/* ==========================================================================
   Noor — WooCommerce pages (block templates). Loaded on WooCommerce's pages
   only; the product page adds woocommerce-product.css.
   ========================================================================== */

/* ── Shop layout (archive templates and the shop-with-sidebar starter) ── */
.noor-shop__layout.wp-block-columns {
    align-items: flex-start;
    flex-wrap: nowrap !important;
}

.noor-shop__sidebar {
    position: sticky;
    inset-block-start: var(--wp--preset--spacing--30);
    flex-shrink: 0 !important;
    padding: var(--wp--preset--spacing--30);
    border: 1px solid var(--wp--preset--color--line);
    border-radius: 14px;
    background: var(--wp--preset--color--background);
}

/* Archive head: the title, with the breadcrumb on the far side. */
.noor-shop__head {
    gap: var(--wp--preset--spacing--20) var(--wp--preset--spacing--40);
    margin-block-end: var(--wp--preset--spacing--40);
}
.noor-shop__head .noor-shop__title {
    margin: 0;
    font-size: var(--wp--preset--font-size--x-large);
}
.noor-shop__head .noor-breadcrumb { margin: 0; }
.noor-shop__description {
    margin-block: calc(-1 * var(--wp--preset--spacing--20)) var(--wp--preset--spacing--40);
    color: var(--wp--preset--color--text-soft);
}

/* The filters column (noor/hidden-shop-filters; boxes in sections/shop-filters.css).
   On tablets and phones it sits over the products, where WooCommerce shows
   only its Filters button. */
.noor-shop__filters { flex-shrink: 0 !important; min-inline-size: 0; }

@media (max-width: 900px) {
    .noor-shop__layout.wp-block-columns { flex-wrap: wrap !important; }
    .noor-shop__layout > .noor-shop__filters,
    .noor-shop__layout > .noor-shop__results { flex-basis: 100% !important; }
}

/* Sorting and results count, in a box over the products. */
.noor-shop__toolbar {
    align-items: center;
    gap: 1rem;
    margin-block-end: var(--wp--preset--spacing--30);
    padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--30);
    border: 1px solid var(--wp--preset--color--line);
    border-radius: var(--wp--custom--radius--sm, 6px);
    background: var(--wp--preset--color--surface);
}
.noor-shop__toolbar .woocommerce-ordering {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
}
.noor-shop__toolbar .woocommerce-ordering label {
    margin: 0;
    font-size: var(--wp--preset--font-size--small);
    font-weight: 600;
}
.noor-shop__toolbar .wc-block-product-results-count p { margin: 0; }
.noor-shop__toolbar .wc-block-product-results-count {
    color: var(--wp--preset--color--text-soft);
    font-size: var(--wp--preset--font-size--small);
}
.noor-shop__toolbar select {
    padding: 0.4rem 0.75rem;
    border: 1px solid var(--wp--preset--color--line);
    border-radius: 8px;
    font-size: var(--wp--preset--font-size--small);
}

.noor-shop__results .wc-block-product-image { border-radius: 10px; }

/* Sale flash (woocommerce_sale_flash: "-20%") */
.noor-sale-badge {
    position: absolute;
    inset-block-start: 0.75rem;
    inset-inline-start: 0.75rem;
    z-index: 2;
    padding: 0.25rem 0.6rem;
    border-radius: 999px;
    background: var(--wp--preset--color--danger);
    color: var(--wp--preset--color--background);
    font-size: var(--wp--preset--font-size--xs);
    font-weight: 700;
}

/* ── Cart block ── */
.noor-cart .wc-block-components-product-name { color: var(--wp--preset--color--foreground); }
.noor-cart .wc-block-components-product-metadata { display: none; }

/* ── My account (WooCommerce renders it with its own markup) ── */
.woocommerce-MyAccount-navigation ul {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    margin: 0;
    padding: 0;
    list-style: none;
}
.woocommerce-MyAccount-navigation ul li a {
    display: block;
    padding: 0.65rem 0.85rem;
    border-radius: 8px;
    color: var(--wp--preset--color--foreground);
    text-decoration: none;
}
.woocommerce-MyAccount-navigation ul li.is-active a,
.woocommerce-MyAccount-navigation ul li a:hover {
    background: var(--wp--preset--color--surface);
    color: var(--wp--preset--color--primary);
}

/* Notices on account pages */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
    margin: 0 0 1rem;
    padding: 0.85rem 1rem;
    border-radius: 10px;
}
.woocommerce-message {
    border-inline-start: 4px solid var(--wp--preset--color--primary);
    background: color-mix(in srgb, var(--wp--preset--color--primary) 6%, var(--wp--preset--color--background));
}
.woocommerce-info {
    border-inline-start: 4px solid var(--wp--preset--color--accent);
    background: var(--wp--preset--color--surface);
}
.woocommerce-error {
    border-inline-start: 4px solid var(--wp--preset--color--danger);
    background: color-mix(in srgb, var(--wp--preset--color--danger) 8%, var(--wp--preset--color--background));
}