/* ── WooCommerce Overrides ──────────────────────────── */

/* ════════════════════════════════════════════════════════════════════════
   STANDALONE LOOP GRID + BOUTIQUE CARD
   ────────────────────────────────────────────────────────────────────────
   Without a theme loop grid, WooCommerce-core's default loop CSS takes
   over (4-up float grid, visible add-to-cart buttons, blue title links). The
   theme-owned woocommerce/content-product.php reproduces the `.product-small
   .box / .box-image / .box-text` structure; this block lays it out to match
   the reference: a calm 3-up grid of image + title + price, gold prices, no
   per-card buttons, with the missing-image placeholder filling the 3:4 box.
   Selectors out-specify WC-core's `.woocommerce ul.products li.product`.
   ════════════════════════════════════════════════════════════════════════ */
/* The "Curated" collection chips (zohar_render_collection_nav) replace the
   default result-count + catalog-ordering row — hide WC-core's, like the
   reference. */
.woocommerce .woocommerce-result-count,
.woocommerce .woocommerce-ordering { display: none; }

/* Shop / archive container — the loop sat flush to the viewport edges (cards
   touching the window). Centre the whole archive (heading · collection nav ·
   product grid · pagination) in a comfortable max-width column with side
   gutters, mirroring the PDP container so the two surfaces share one rhythm. */
.shop-archive {
    max-width: 1280px;
    margin-inline: auto;
    padding-inline: clamp(var(--space-md), 4vw, var(--space-xl));
}

.woocommerce ul.products,
.woocommerce-page ul.products {
    display: grid;
    /* Boutique 3-column grid. */
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-lg) var(--space-md);
    margin: 0 0 var(--space-xl);
    padding: 0;
    list-style: none;
}

/* Neutralise WC-core's float/width/clear on every loop item (incl. .first/.last
   and the nth-child clears it sets) so the grid governs placement. */
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
    width: auto;
    margin: 0;
    padding: 0;
    float: none;
    clear: none;
    text-align: right;
    direction: rtl;
}

/* WC float-clearfix pseudos become grid items when ul.products is display:grid — kill them. */
.woocommerce ul.products::before,
.woocommerce ul.products::after,
.woocommerce ul.products li.product::before,
.woocommerce ul.products li.product::after { content: none; display: none; }

/* WC core's woocommerce-layout / smallscreen CSS stays enqueued on the shop,
   category and tag archives (performance.php only dequeues it OFF non-WC pages),
   and it FLOATS every loop item. A floated card with our `width:auto` reset
   shrink-wraps to its content (~88px) and sits marooned in the grid track,
   reading as a too-small thumbnail. The extra `.product-small` class (every
   card carries it) out-specifies core's `.woocommerce ul.products li.product`,
   so we win regardless of stylesheet load order: drop the float and let the
   card fill its grid cell — the image becomes the hero the track sizes for. */
.woocommerce ul.products li.product.product-small,
.woocommerce-page ul.products li.product.product-small {
    float: none;
    width: 100%;
}

/* Image — uniform 3:4 editorial crop, soft-rounded, hover-zoom (defined in
   components.css). Holds the ratio even for the cream placeholder. The name
   overlay + quick-view chip are absolutely positioned within it. */
.product-small .box-image {
    position: relative;
    aspect-ratio: 3 / 4;
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--color-cream-low);
}

.product-small .box-image .box-link {
    display: block;
    width: 100%;
    height: 100%;
}

.product-small .box-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    color: transparent; /* suppress alt text if a file 404s (local media gaps) */
}

/* ── On-image product name (boutique overlay) ────────────────
   The name sits over the photo on a soft bottom scrim (dark → transparent),
   not as plain text below. Scrim keeps the serif legible (AA) over any photo;
   it only paints the lower third so the imagery still breathes. RTL-aligned. */
.product-small .product-card__overlay {
    position: absolute;
    inset: auto 0 0 0;
    display: flex;
    align-items: flex-end;
    min-height: 56%;
    padding: var(--space-md) var(--space-sm) var(--space-sm);
    background: linear-gradient(
        to top,
        rgba(42, 37, 32, 0.66) 0%,
        rgba(42, 37, 32, 0.34) 52%,
        rgba(42, 37, 32, 0) 100%
    );
    pointer-events: none;
    /* Fades out on hover so the rising quick-view button takes the bottom. */
    transition: opacity var(--transition-base);
}

.product-small .product-card__name {
    font-family: var(--font-heading);
    /* The model's name IS the card title (colour lives in the swatches), so it
       carries the boutique voice alone — heavier and a step larger than the old
       full-title treatment. */
    font-weight: 800;
    font-size: 1.7rem;
    line-height: 1.25;
    color: var(--color-cream);
    text-align: right;
    width: 100%;
    direction: rtl;
    /* Two-line clamp so long Hebrew names never overflow the scrim. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-shadow: 0 1px 3px rgba(42, 37, 32, 0.35);
}

/* ── Quick-view affordance ───────────────────────────────────
   A slim cream pill anchored to the image's bottom edge. Tucked out of sight
   below the image, it SLIDES UP into view on hover/focus (the loop
   quick-view gesture). Clicking it opens the quick-view modal (quick-view.js);
   the card image itself still links to the PDP. The bottom name scrim fades as
   the button rises, so the two never collide. Always shown on touch (no hover)
   via the coarse-pointer rule below. */
.product-small .product-card__quickview {
    position: absolute;
    inset: auto 0 0 0;            /* anchored to the image's bottom edge */
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding-bottom: var(--space-md);
    z-index: 3;
    opacity: 0;
    transform: translateY(100%);  /* fully tucked below the image edge */
    transition: opacity var(--transition-base), transform var(--transition-base);
    pointer-events: none;
}

.product-small .product-card__quickview-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    padding: 0.5rem 1.25rem;
    background-color: var(--color-cream);
    /* Glossy cream pill: a bright top highlight fading to cream. */
    background-image: linear-gradient(to bottom,
        rgba(255, 255, 255, 0.7) 0%,
        rgba(255, 255, 255, 0) 55%);
    color: var(--color-gold);
    font-family: var(--font-body);
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-decoration: none;
    border-radius: var(--radius-pill);
    /* Raised cream pill: soft ambient lift + a crisp inset top highlight. */
    box-shadow:
        0 2px 6px rgba(42, 37, 32, 0.12),
        0 10px 22px rgba(42, 37, 32, 0.16),
        inset 0 1px 0 rgba(255, 255, 255, 0.75);
    pointer-events: auto;
    transition: background var(--transition-fast), color var(--transition-fast),
                box-shadow var(--transition-fast);
}

/* On hover the chip fills gold and takes the shared lifted-lozenge depth. */
.product-small .product-card__quickview-link:hover,
.product-small .product-card__quickview-link:focus-visible {
    background-color: var(--color-gold);
    background-image: var(--btn-sheen);
    color: var(--color-text-on-gold);
    box-shadow: var(--btn-depth-hover);
    outline: none;
}

.product-small .product-card__quickview-link:active {
    box-shadow: var(--btn-depth-active);
}

/* Reveal on hover, or on KEYBOARD focus (`:has(:focus-visible)`) — deliberately
   NOT `:focus-within`. After the quick-view modal closes it restores focus to the
   trigger link for accessibility; with `:focus-within` that left the just-viewed
   card stuck in its raised-chip / hidden-name state (looking different from every
   neighbour) for mouse users until they clicked elsewhere. `:focus-visible` only
   matches genuine keyboard focus, so a mouse-restored focus no longer sticks,
   while keyboard tabbing still reveals the chip. */
.product-small:hover .product-card__quickview,
.product-small:has(:focus-visible) .product-card__quickview {
    opacity: 1;
    transform: translateY(0);
}

/* The on-image name fades as the quick-view button rises, freeing the bottom. */
.product-small:hover .product-card__overlay,
.product-small:has(:focus-visible) .product-card__overlay {
    opacity: 0;
}

/* Touch devices have no hover and the whole card is already tappable to the
   PDP — hide the quick-view chip so it doesn't permanently sit over the name. */
@media (hover: none) {
    .product-small .product-card__quickview { display: none; }
}

/* Text block — centred, generous air, no divider lines. Holds the price (and,
   for placeholder-only cards, the name, since there's no photo to overlay). */
.product-small .box-text {
    padding: var(--space-sm) var(--space-xs) 0;
    text-align: right;
}

/* Price → elegant bold gold. The brand "price = gold" rule; gold-hover (#5f430a)
   reads ≈8.85:1 on cream for comfortable AA at this weight. */
/* The `.woocommerce ul.products li.product.product-small` forms out-specify WC
   core's `.woocommerce ul.products li.product .price { font-size: .857em }` (which
   otherwise shrinks the loop price to ~13px); the plain `.product-small` forms
   keep gold + scale on cards rendered outside ul.products (sale grid, CTL band). */
.woocommerce ul.products li.product.product-small .price,
.woocommerce ul.products li.product.product-small .price .amount,
.woocommerce ul.products li.product.product-small .price bdi,
.product-small .price,
.product-small .price .amount,
.product-small .price bdi {
    color: var(--color-gold-hover);
    font-family: var(--font-body);
    font-weight: 700;
    /* Bolder: gold is the brand's moment of joy — let the price carry weight. */
    font-size: 1.25rem;
    letter-spacing: 0.01em;
}

.product-small .price del,
.product-small .price del .amount {
    color: var(--color-text-soft);
    font-weight: 400;
    margin-inline-start: 0.35em;
}

/* Title — only rendered below the card for image-less (placeholder) products;
   brand dark, never the default blue underline. */
.product-small .name.product-title,
.product-small a.name.product-title {
    display: block;
    text-decoration: none;
    color: var(--color-text);
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 0.95rem;
    line-height: 1.3;
    margin-bottom: 0.2rem;
}

.product-small a.name.product-title:hover,
.product-small a.name.product-title:focus-visible {
    color: var(--color-gold-hover);
    outline: none;
}

/* ── Colour swatches (catalogue collapse) ─────────────────────────────────
   One card per garment; its colour siblings sit here as small round thumbnails.
   A click re-dresses the card IN PLACE (archive-swatches.js); without JS each
   swatch is a plain link to that colour's PDP. The card's own colour is ringed
   in gold (the precious accent). The "+N" chip links to the model's tag
   archive, where every colour is its own card. */
.product-card__swatches {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: var(--space-xs);
}

.product-card__swatch {
    position: relative;
    display: inline-flex;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    overflow: hidden;
    box-shadow: inset 0 0 0 1px rgba(42, 37, 32, 0.12);
    transition: box-shadow var(--transition-fast), transform var(--transition-fast);
}

/* Comfortable touch target without inflating the 28px visual disc. Inset -4px
   (not -8px) so adjacent hit zones meet the 8px swatch-container gap edge-to-edge
   instead of overlapping into the neighbouring swatch's tap area (390px mobile:
   4 swatches + "+N" overflow chip must still fit the card width at gap:8px, so
   the gap itself can't grow — the fix is a smaller, non-overlapping inset). */
.product-card__swatch::after {
    content: '';
    position: absolute;
    inset: -4px;
}

/* The double selector out-guns WC-core's `.woocommerce ul.products li.product
   a img { height:auto; margin:0 0 1em }` — that 1em bottom margin ate into the
   flex-stretch and squashed the disc photo to a 28×12 sliver. Fixed px + zero
   margin restore the full circle. object-position favours the garment
   (mid-frame of a model shot), not the face/backdrop at the top. */
.woocommerce ul.products li.product .product-card__swatch img.product-card__swatch-img,
.product-card__swatch-img {
    width: 34px;
    height: 34px;
    margin: 0;
    aspect-ratio: 1;
    object-fit: cover;
    object-position: center 35%;
    display: block;
}

/* Colour product with no image on disk → a quiet tonal disc, never a broken slot. */
.product-card__swatch-img--empty {
    width: 34px;
    height: 34px;
    display: block;
    background: linear-gradient(135deg, var(--color-cream-low), #d9cdbb);
}

.product-card__swatch:hover,
.product-card__swatch:focus-visible {
    transform: translateY(-1px);
    box-shadow: inset 0 0 0 1px rgba(42, 37, 32, 0.2),
                0 0 0 2px var(--color-gold-light);
    outline: none;
}

.product-card__swatch.is-current {
    box-shadow: 0 0 0 2px var(--color-cream), 0 0 0 3px var(--color-gold);
}

.product-card__swatch-more {
    font-family: var(--font-body);
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--color-text-soft);
    margin-inline-start: 2px;
    font-variant-numeric: tabular-nums;
    transition: color var(--transition-fast);
}

a.product-card__swatch-more:hover,
a.product-card__swatch-more:focus-visible {
    color: var(--color-gold);
    outline: none;
}

/* Colour caption — model tag archives only, where each colour is its own card
   and the title above holds just the model name. AA: text-soft is 5.9:1 on cream. */
.product-small .product-card__color {
    display: block;
    font-family: var(--font-body);
    font-size: 1.05rem;
    color: var(--color-text-soft);
    margin-top: 2px;
}

/* In-place colour swap: the incoming photo settles with a quiet crossfade. */
@keyframes zohar-swatch-swap {
    from { opacity: 0.35; }
    to   { opacity: 1; }
}

.product-small .box-image img.is-swapping {
    animation: zohar-swatch-swap 280ms cubic-bezier(0.22, 1, 0.36, 1);
}

@media (prefers-reduced-motion: reduce) {
    .product-card__swatch { transition: none; }
    .product-card__swatch:hover,
    .product-card__swatch:focus-visible { transform: none; }
    .product-small .box-image img.is-swapping { animation: none; }
}

/* Mobile / tablet column counts.
   767px matches the homepage collection grid breakpoint so store tiles
   are the same size as the model-image cards on mobile. */
@media (max-width: 1024px) {
    .woocommerce ul.products,
    .woocommerce-page ul.products { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 767px) {
    /* Phones: pull the archive gutters in and tighten the column gap so the
       2-up product images read as large as the two-column grid allows — they
       stay the hero, with just enough edge whitespace to keep breathing. */
    .shop-archive { padding-inline: var(--space-sm); }
    .woocommerce ul.products,
    .woocommerce-page ul.products {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-md) var(--space-xs);
    }
    /* The model name must read BIG on the 2-up mobile grid.
       A clamp scales it up on a ~390px card while capping under the desktop 1.7rem
       so long two-line names never overflow the narrow card. */
    .product-small .product-card__name { font-size: clamp(1.25rem, 5.4vw, 1.6rem); }
    /* Larger swatch discs (34px) need a slightly tighter gap to keep 4 colours +
       the "+N" chip on one row inside the narrow 2-up card. */
    .product-card__swatches { gap: 6px; }
}

/* ════════════════════════════════════════════════════════════════════════
   SINGLE-PRODUCT LAYOUT + GALLERY
   ────────────────────────────────────────────────────────────────────────
   A two-column PDP (RTL: gallery on the right, summary on
   the left) and guarantee the WC-core gallery is visible — WC-core sets the
   gallery to opacity:0 until its flexslider JS flips it; if that init is ever
   delayed/blocked the gallery would render blank, so we force it visible.
   ════════════════════════════════════════════════════════════════════════ */
/* The PDP content (gallery · summary · tabs · related) sat flush to the viewport
   edges (no page gutter in this theme). Centre it in a comfortable max-width
   column with side gutters so it reads as a composed editorial spread. The
   "Complete the Look" band breaks back out to full-bleed below. */
.single-product div.product {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: var(--space-xl);
    max-width: 1280px;
    margin-inline: auto;
    padding-inline: clamp(var(--space-md), 4vw, var(--space-xl));
    direction: rtl;
}

/* Full-bleed "Complete the Look" band: cancel the product container's gutters +
   max-width so the curated wall spans the whole viewport, edge to edge. */
.single-product div.product .zohar-ctl {
    width: 100vw;
    max-width: 100vw;
    margin-inline: calc(50% - 50vw);
}

.single-product div.product .woocommerce-product-gallery {
    /* Narrower gallery column — the editorial photo read as oversized at 52%.
       ~44% sits the image at the reference's proportion, giving the summary room. */
    flex: 1 1 44%;
    min-width: 300px;
    max-width: 44%;
    float: none;
    margin: 0;
    opacity: 1 !important; /* never leave the gallery blank if JS init lags */
}

.single-product div.product .summary.entry-summary {
    flex: 1 1 50%;
    min-width: 300px;
    float: none;
    margin: 0;
    /* Hold the summary toward the top of the row even when the gallery is tall. */
    align-self: flex-start;
}

/* ── Flexslider RTL fix ──────────────────────────────────────────────────────
   The PDP `.product` is `direction: rtl`, which cascades into WooCommerce's
   flexslider gallery and breaks its LTR slide-track math (the active slide is
   translated off-canvas, so the main viewport shows an empty gap while only the
   thumbnail nav paints). Paired with `rtl => false` on the carousel options
   (inc/woocommerce.php), forcing LTR on the gallery wrapper keeps the track and
   its slides positioned correctly. The thumbnail strip below is laid out with
   flexbox and reads correctly regardless of direction. */
.single-product .woocommerce-product-gallery,
.single-product .woocommerce-product-gallery__wrapper,
.single-product .woocommerce-product-gallery .flex-viewport,
.single-product .woocommerce-product-gallery ol.flex-control-thumbs {
    direction: ltr;
}

/* Cap the gallery's vertical presence so a tall editorial photo doesn't make the
   image read as "way too big"; the wrapper owns the rounded crop. */
.single-product .woocommerce-product-gallery__wrapper {
    margin: 0;
}
.single-product .woocommerce-product-gallery .woocommerce-product-gallery__image {
    border-radius: var(--radius-lg);
    overflow: hidden;
}
.single-product .woocommerce-product-gallery__image img {
    /* The gallery photo sizes to its natural ratio within the 52% column. A
       single rule here — a previous edit left a second, later `…__image img`
       block that silently overrode `height` and `object-fit`, so those never
       applied; consolidated to avoid that dead override. `max-height` keeps a
       tall editorial photo from reading as oversized. */
    display: block;
    width: 100%;
    height: auto;
    max-height: 640px;
    object-fit: cover;
}

/* Full-width rows (tabs, related, complete-the-look) span both columns. */
.single-product div.product .woocommerce-tabs,
.single-product div.product .woocommerce-product-gallery + .summary ~ .woocommerce-tabs,
.single-product div.product .related,
.single-product div.product .upsells {
    flex: 1 1 100%;
    width: 100%;
}

/* Gallery thumbnail strip — a single horizontal row under the main image that
   scrolls when there are more thumbnails than fit. Keeps the gallery a fixed
   height (no tall wrapped block on many-image products) and reads as a
   deliberate set. The strip scroll-snaps and carries a thin gold scrollbar. */
.single-product .flex-control-thumbs {
    display: flex;
    flex-wrap: nowrap;
    gap: var(--space-sm);
    margin: var(--space-md) 0 0;
    padding: 0 0 var(--space-xs);
    list-style: none;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: var(--color-gold) transparent;
}
.single-product .flex-control-thumbs::-webkit-scrollbar { height: 6px; }
.single-product .flex-control-thumbs::-webkit-scrollbar-track { background: transparent; }
.single-product .flex-control-thumbs::-webkit-scrollbar-thumb {
    background: var(--color-gold);
    border-radius: var(--radius-sm);
}
.single-product .flex-control-thumbs li {
    flex: 0 0 72px;
    width: 72px;
    margin: 0;
    scroll-snap-align: start;
}
.single-product .flex-control-thumbs img {
    display: block;
    width: 100%;
    aspect-ratio: 3 / 4;
    object-fit: cover;
    border-radius: var(--radius-sm);
    cursor: pointer;
    opacity: 0.6;
    transition: opacity var(--transition-fast), box-shadow var(--transition-fast);
}
.single-product .flex-control-thumbs img.flex-active,
.single-product .flex-control-thumbs img:hover { opacity: 1; }
/* Active thumb gets a soft gold ring so the current slide reads at a glance. */
.single-product .flex-control-thumbs img.flex-active {
    box-shadow: 0 0 0 2px var(--color-gold);
}

@media (max-width: 768px) {
    .single-product div.product { gap: var(--space-lg); }
    .single-product div.product .woocommerce-product-gallery,
    .single-product div.product .summary.entry-summary {
        flex: 1 1 100%;
        max-width: 100%;
    }
}

/* Related-products grid uses the shared card; ensure 4-up on desktop to match
   the reference's "אולי תאהבי גם" row (the loop grid above is 3-up). */
@media (min-width: 1025px) {
    .single-product .related ul.products,
    .single-product .upsells ul.products {
        grid-template-columns: repeat(4, 1fr);
    }
}


/* ── "Curated" Collection Toggle (DESIGN.md §5) ─────────────
   Selection chips above the product loop on shop & category
   archives. Selected = primary_container; unselected = surface_variant. */
.zohar-collection-nav {
    margin: 0 0 var(--space-xl);
}

.zohar-collection-nav__list {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;   /* RTL start = right; chips flow under the masthead */
    align-items: stretch;          /* equal-height pills across the row */
    gap: var(--space-sm);
    list-style: none;
    margin: 0;
    padding: 0;
    direction: rtl;
}

.zohar-collection-nav__list > li {
    display: flex;                 /* let each chip stretch to the row height */
    margin: 0;
}

.zohar-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* Even, generous pills: fixed height + comfortable horizontal air give
       every chip the same vertical presence regardless of label length. */
    min-height: 46px;
    padding: 0 1.4rem;
    border-radius: var(--radius-pill);
    background: var(--color-cream-low);   /* surface_variant — unselected */
    color: var(--color-text);
    font-family: var(--font-body);
    font-size: 0.9375rem;
    font-weight: 500;
    line-height: 1;
    white-space: nowrap;
    text-decoration: none;
    border: 1px solid var(--color-border); /* quiet ghost edge → real "pill" presence */
    transition: background var(--transition-fast),
                color var(--transition-fast),
                border-color var(--transition-fast),
                transform var(--transition-fast);
}

.zohar-chip:hover,
.zohar-chip:focus-visible {
    background: var(--color-cream);
    border-color: var(--color-gold-light);
    color: var(--color-gold-hover);
    transform: translateY(-1px);
    outline: none;
}

.zohar-chip.is-selected {
    background: var(--color-gold);        /* precious gold for the active filter */
    border-color: var(--color-gold);
    color: var(--color-text-on-gold);
    font-weight: 600;
}

.zohar-chip.is-selected:hover,
.zohar-chip.is-selected:focus-visible {
    background: var(--color-gold-hover);
    border-color: var(--color-gold-hover);
    color: var(--color-text-on-gold);
}

/* Mobile: single horizontal scroll row instead of wrapping */
@media (max-width: 600px) {
    .zohar-collection-nav__list {
        flex-wrap: nowrap;
        justify-content: flex-start;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding-bottom: var(--space-xs);
    }
    .zohar-collection-nav__list::-webkit-scrollbar { display: none; }
    .zohar-chip { flex: 0 0 auto; }
}

/* ── Shop / collection page heading (H1) ────────────────────
   The archive had no H1 (first heading was the footer). This is a visually
   integrated collection title, not a banner — Noto Serif, centered, generous
   air, tone-only separation (no divider line). RTL-native. */
/* Scoped to WooCommerce archive bodies so it never collides with the cart
   page title. */
.woocommerce-shop .zohar-archive-head,
.tax-product_cat .zohar-archive-head,
.tax-product_tag .zohar-archive-head,
body.archive .zohar-archive-head {
    /* Editorial masthead: RTL right-anchored (not centered). The big serif title
       is the first thing the eye meets — RTL-first weight — with the item count
       set small beside it for a magazine-cover scale contrast. Dramatic top air
       opens the catalogue like a spread, not a browser tab. */
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--space-sm) var(--space-md);
    text-align: right;
    margin: clamp(2rem, 5vw, 4.5rem) 0 var(--space-lg);
    direction: rtl;
}

.woocommerce-shop .zohar-archive-head__title,
.tax-product_cat .zohar-archive-head__title,
.tax-product_tag .zohar-archive-head__title,
body.archive .zohar-archive-head__title {
    font-family: var(--font-heading);
    font-weight: 700;
    color: var(--color-text);
    /* Display scale (was max 2.5rem) — a confident editorial anchor. */
    font-size: clamp(2.75rem, 1.6rem + 5vw, 5rem);
    line-height: 1.0;
    margin: 0;
    letter-spacing: -0.02em;
    text-wrap: balance;
    direction: rtl;
    unicode-bidi: isolate; /* keep the Hebrew title laid out RTL, never LTR */
}

/* Signature entrance: the headline rises once on load. Visible by default — the
   base rule already renders it — so reduced-motion users and headless renders
   see the final state; the animation only plays when motion is welcome. */
@media (prefers-reduced-motion: no-preference) {
    .zohar-archive-head__title {
        animation: zohar-head-rise 720ms cubic-bezier(0.22, 1, 0.36, 1) both;
    }
    @keyframes zohar-head-rise {
        from { opacity: 0; transform: translateY(16px); }
        to   { opacity: 1; transform: none; }
    }
}

/* Archive intro copy — the category / model (product_tag) story. WooCommerce
   prints this as a bare .term-description; left full-bleed it runs edge-to-edge
   at an unreadable RTL measure and reads as orphaned metadata under the title.
   We contain it as a tonal "sheet of fine paper" — surface-container-low
   (--color-cream-low) on the cream canvas, the No-Line Rule's structural shift,
   no borders — at a readable measure, right-anchored as the masthead's editorial
   intro. The cream breathing to its left is the intended RTL asymmetry. */
.tax-product_cat .term-description,
.tax-product_tag .term-description,
.zohar-shop-view .term-description {
    max-width: 90ch;
    margin: 0 0 var(--space-xl);
    padding: clamp(1.5rem, 1rem + 2vw, 2.75rem);
    /* Depth felt, not drawn (DESIGN.md: tonal layering, no borders, no Material
       shadows). Light falls from the top right — where the RTL eye lands — so the
       near corner is lifted a touch above cream-low and the FAR edge settles into
       shade. The far edge must darken, not fade toward the canvas: a sheet that
       blends out at its edge reads as a printed panel, not as paper lying on the
       page. That shaded edge is what carries the elevation. */
    background-image: linear-gradient(
        200deg,
        color-mix(in srgb, var(--color-cream-low) 82%, #fff) 0%,
        var(--color-cream-low) 52%,
        color-mix(in srgb, var(--color-cream-low) 91%, var(--color-text)) 100%
    );
    background-color: var(--color-cream-low); /* fallback where color-mix is unsupported */
    border-radius: var(--radius-lg);
    /* Three diffused layers instead of one: a tight contact shadow anchoring the
       sheet to the canvas, an ambient body, and a wide soft cast. Plus a 1px
       inset highlight along the top edge — the lit paper lip. Ambient, warm-tinted
       (never neutral grey, never a hard Material drop). */
    box-shadow:
        0 1px 2px rgba(42, 37, 32, 0.05),
        0 8px 24px rgba(42, 37, 32, 0.07),
        0 28px 56px -16px rgba(42, 37, 32, 0.10),
        inset 0 1px 0 rgba(255, 255, 255, 0.55);
    direction: rtl;
    text-align: right;
    color: var(--color-text-soft);
    font-family: var(--font-body);
    font-size: clamp(0.95rem, 0.9rem + 0.3vw, 1.0625rem);
    line-height: 1.75;
    text-wrap: pretty;
}
.tax-product_cat .term-description p,
.tax-product_tag .term-description p,
.zohar-shop-view .term-description p { margin: 0 0 var(--space-md); }
.tax-product_cat .term-description > :first-child,
.tax-product_tag .term-description > :first-child,
.zohar-shop-view .term-description > :first-child { margin-top: 0; }
.tax-product_cat .term-description > :last-child,
.tax-product_tag .term-description > :last-child,
.zohar-shop-view .term-description > :last-child { margin-bottom: 0; }

/* The opening paragraph is the collection's lede, not body copy. Both families
   in the stack are Assistant, so the editorial contrast has to be carried by
   scale + weight + tone: display weight at ink strength (16.3:1) against the
   soft-taupe body underneath it. This is what stops the sheet reading as a flat
   slab of grey text. */
.tax-product_cat .term-description > p:first-child,
.tax-product_tag .term-description > p:first-child,
.zohar-shop-view .term-description > p:first-child {
    font-family: var(--font-heading);
    font-weight: 600;
    /* Restrained: these ledes run 50-60 words. At display scale a paragraph that
       long stops being a lede and starts shouting. */
    font-size: clamp(1.05rem, 0.98rem + 0.45vw, 1.25rem);
    line-height: 1.55;
    color: var(--color-text);
    text-wrap: pretty;
}

/* The closing line is the house promise ("עוצב אישית ע״י זהר..."). Let it fall
   away from the body: smaller, spaced off, a quiet signature at the foot of the
   sheet rather than another sentence in the stack. */
.tax-product_cat .term-description > p:last-child,
.tax-product_tag .term-description > p:last-child,
.zohar-shop-view .term-description > p:last-child {
    margin-top: var(--space-lg);
    font-size: 0.9375rem;
    line-height: 1.6;
}

/* Desktop: break the rectangle. The lede spans the sheet as an editorial
   standfirst (capped to a readable RTL measure, right-anchored — the cream
   breathing to its left is the intended asymmetry), and the copy beneath it
   flows into two balanced columns. Multi-column, not grid: the term copy varies
   from two paragraphs to four, and only column balancing keeps both sides even.
   A fixed 2-col grid leaves a dead void beside the longest paragraph. Net effect
   is a wider sheet, roughly half the height. */
@media (min-width: 900px) {
    .tax-product_cat .term-description,
    .tax-product_tag .term-description,
    .zohar-shop-view .term-description {
        columns: 2;
        column-gap: clamp(2rem, 4vw, 3.5rem);
    }
    /* The lede sits above the columns as a standfirst. Capped to a readable RTL
       measure; block start is the right edge in RTL, so it right-anchors on its
       own and the cream to its left is the intended asymmetry. */
    .tax-product_cat .term-description > p:first-child,
    .tax-product_tag .term-description > p:first-child,
    .zohar-shop-view .term-description > p:first-child {
        column-span: all;
        max-width: 62ch;
        margin-bottom: var(--space-lg);
    }
    /* Model (product_tag) archives carry a single paragraph: it is both the lede
       and the whole copy. Without this it keeps the standfirst's bottom margin
       and the sheet ends in a strip of dead space. */
    .tax-product_cat .term-description > p:only-child,
    .tax-product_tag .term-description > p:only-child,
    .zohar-shop-view .term-description > p:only-child {
        margin-bottom: 0;
    }
    /* Keep each remaining paragraph whole rather than split across the gutter. */
    .tax-product_cat .term-description > p:not(:first-child),
    .tax-product_tag .term-description > p:not(:first-child),
    .zohar-shop-view .term-description > p:not(:first-child) {
        break-inside: avoid;
    }
    /* The signature line is balanced into a column by the flow, so its stacked
       offset no longer applies. */
    .tax-product_cat .term-description > p:last-child,
    .tax-product_tag .term-description > p:last-child,
    .zohar-shop-view .term-description > p:last-child {
        margin-top: 0;
    }
}

/* ── Breadcrumb trail (inc/breadcrumbs.php) ─────────────────
   Quiet RTL wayfinding above the H1 — understated luxury, not chrome. Muted
   sans, no underlines, no boxes; the separator is a CSS ‹ glyph (RTL travel
   goes leftward) so no literal slash sits in the markup to fight the direction.
   Selected/current crumb reads slightly darker but stays calm. */
.zohar-breadcrumb {
    direction: rtl;
    text-align: right;
    margin: clamp(1.25rem, 3vw, 2rem) 0 calc(-1 * var(--space-sm));
}
/* Mobile: the breadcrumb sits outside .shop-archive's own gutter, so on phones
   (where that gutter shrinks to --space-sm, see the 767px query above) the
   first crumb reads flush to the viewport edge. Give it the same inline
   gutter as its sibling blocks here, scoped to mobile only so desktop (which
   already gets its gutter from the surrounding content wrapper) isn't
   double-padded. */
@media (max-width: 767px) {
    .zohar-breadcrumb {
        padding-inline: var(--space-md);
    }
}
.zohar-breadcrumb__list {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.35rem 0.55rem;
    margin: 0;
    padding: 0;
    list-style: none;
    font-family: var(--font-body);
    font-size: 0.8125rem;
    letter-spacing: 0.01em;
    color: var(--color-text-soft);
}
.zohar-breadcrumb__item {
    display: inline-flex;
    align-items: baseline;
    gap: 0.55rem;
}
/* Separator before every crumb except the first — leftward chevron for RTL. */
.zohar-breadcrumb__item + .zohar-breadcrumb__item::before {
    content: "\2039"; /* ‹ */
    color: var(--color-text-soft);
    opacity: 0.55;
}
.zohar-breadcrumb a {
    color: var(--color-text-soft);
    text-decoration: none;
    transition: color 160ms ease;
}
.zohar-breadcrumb a:hover,
.zohar-breadcrumb a:focus-visible {
    color: var(--color-text);
}
.zohar-breadcrumb [aria-current="page"] {
    color: var(--color-text);
    font-weight: 500;
}

/* ── Shop pagination (brand pills, gold active) ─────────────
   WC-core renders `nav.woocommerce-pagination > ul.page-numbers` with plain
   underlined blue links. Re-cast as a centred row of soft cream pills: hover
   warms toward gold, the current page is a filled gold pill. No underlines. */
.woocommerce nav.woocommerce-pagination {
    text-align: center;
    margin: var(--space-lg) 0 var(--space-xl);
}

.woocommerce nav.woocommerce-pagination ul {
    display: inline-flex;
    /* The page is RTL, so a default `row` already flows right→left: page 1 sits
       on the right, the next-page arrow (←) on the far left. (A `row-reverse`
       here double-reversed it back to LTR, which put page 1 on the left.) */
    direction: rtl;
    align-items: center;
    gap: var(--space-xs);
    border: none;
    margin: 0;
    padding: 0;
    list-style: none;
}

.woocommerce nav.woocommerce-pagination ul li {
    border: none;
    margin: 0;
    overflow: visible;
}

.woocommerce nav.woocommerce-pagination ul li a.page-numbers,
.woocommerce nav.woocommerce-pagination ul li span.page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 42px;
    min-height: 42px;
    padding: 0 0.65rem;
    background: var(--color-cream-low);
    color: var(--color-text);
    font-family: var(--font-body);
    font-size: 0.9375rem;
    font-weight: 500;
    line-height: 1;
    text-decoration: none;
    border-radius: var(--radius-pill);
    transition: background var(--transition-fast), color var(--transition-fast);
}

.woocommerce nav.woocommerce-pagination ul li a.page-numbers:hover,
.woocommerce nav.woocommerce-pagination ul li a.page-numbers:focus-visible {
    background: var(--color-cream);
    color: var(--color-gold-hover);
    outline: none;
}

.woocommerce nav.woocommerce-pagination ul li span.page-numbers.current {
    background: var(--color-gold);
    color: var(--color-text-on-gold);
    font-weight: 600;
}

/* Prev / next arrows — quiet ghost pills (no background until hover). */
.woocommerce nav.woocommerce-pagination ul li a.page-numbers.prev,
.woocommerce nav.woocommerce-pagination ul li a.page-numbers.next {
    background: transparent;
    color: var(--color-gold);
    font-weight: 600;
}

/* ── Designed broken-image placeholder (server-rendered) ────
   Shown by inc/woocommerce.php whenever a product's featured-image FILE is
   missing on disk, across the PDP gallery, archive cards and cart thumbnails.
   A quiet tonal cream panel carrying the brand mark + product name — never a
   broken-image glyph or leaked alt string. */
.zohar-img-placeholder {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-end;
    gap: var(--space-xs);
    width: 100%;
    height: 100%;
    min-height: 100%;
    aspect-ratio: 3 / 4;
    padding: var(--space-md);
    box-sizing: border-box;
    background: var(--color-cream-low);
    border-radius: var(--radius-lg);
    text-align: right;
    overflow: hidden;
}

.zohar-img-placeholder__mark {
    font-family: var(--font-body);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--color-gold-light);
}

.zohar-img-placeholder__name {
    font-family: var(--font-heading);
    font-size: 1rem;
    line-height: 1.3;
    color: var(--color-text-soft);
    direction: rtl;
}

/* Gallery context fills the full-width PDP canvas, no fixed aspect crop so it
   matches the tall editorial gallery proportion. */
.zohar-img-placeholder--gallery {
    aspect-ratio: 3 / 4;
    min-height: 420px;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.zohar-img-placeholder--gallery .zohar-img-placeholder__mark { font-size: 0.8125rem; }
.zohar-img-placeholder--gallery .zohar-img-placeholder__name { font-size: 1.5rem; }

/* Loop / cart cards are smaller — scale the type down. */
.zohar-img-placeholder--loop .zohar-img-placeholder__name { font-size: 0.875rem; }

/* ── PDP summary composition — title · price · meta hierarchy ───────────────
   Compose the summary as an editorial column: a generous Noto Serif headline,
   an elegant bold-gold price beneath it with breathing room, then the form and
   refined category labels. RTL-native, right-aligned, tone-only separation. */
.single-product .summary.entry-summary {
    direction: rtl;
    text-align: right;
}

.single-product .summary .product_title.entry-title {
    margin: 0 0 var(--space-sm);
    font-family: var(--font-heading);
    font-weight: 700;
    /* Display moment (was max 2.4rem) — the product name reads as a headline. */
    font-size: clamp(2rem, 1.4rem + 2.6vw, 3.25rem);
    line-height: 1.08;
    letter-spacing: -0.02em;
    text-wrap: balance;
    color: var(--color-text);
}

/* Price → confident gold statement directly under the title (the moment of joy).
   `.single-product div.product .summary p.price` out-specifies WooCommerce core's
   `.woocommerce div.product p.price { font-size: 1.25em }`, which otherwise pins
   the price to a meek 20px. */
.single-product div.product .summary > .price,
.single-product div.product .summary p.price {
    margin: 0 0 var(--space-lg);
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 1.85rem;
    letter-spacing: 0.01em;
    line-height: 1.2;
}

/* Short description (if present) — comfortable muted body, capped measure. */
.single-product .summary .woocommerce-product-details__short-description {
    margin: 0 0 var(--space-lg);
    max-width: 46ch;
    color: var(--color-text-soft);
    line-height: 1.7;
}

/* ── PDP summary price → gold (brand rule: price = gold) ─────
   The default summary price computed to near-black (#111), inconsistent with the
   gold sticky-bar price and the gold loop prices. #7d5a0e on cream ≈ 6.08:1 (AA).
   Use gold-hover (#5f430a, ≈8.85:1) to match the loop + sticky treatment exactly. */
.single-product .summary .price,
.single-product .summary .price .amount,
.single-product .summary .price bdi,
.single-product .summary .price ins .amount,
.single-product .summary .price ins bdi {
    color: var(--color-gold-hover);
}

/* Keep the struck regular price quiet (muted), not gold, on sale items. */
.single-product .summary .price del,
.single-product .summary .price del .amount,
.single-product .summary .price del bdi {
    color: var(--color-text-soft);
}

/* ════════════════════════════════════════════════════════════════════════
   STANDALONE WC-CORE PRODUCT TABS
   ────────────────────────────────────────────────────────────────────────
   WooCommerce-core renders the product tabs as `ul.tabs.wc-tabs`.
   This block re-creates the brand tab row against WC-core markup: a horizontal
   RTL row of gold-on-hover/active labels with a gold bottom underline on the
   active tab, sitting on a single hairline rail (structural, not a divider).
   ════════════════════════════════════════════════════════════════════════ */
/* The PDP flex container already contributes a row-gap (--space-xl) above the
   tabs; a second full --space-xl margin-top stacked a ~160px gap under the
   summary. --space-lg keeps clear editorial separation without reopening the
   "void" reported under the product summary. */
.woocommerce-tabs.wc-tabs-wrapper { margin-top: var(--space-lg); direction: rtl; }

/* Specificity note: WooCommerce core's woocommerce-rtl.css styles the tab chips
   with `.woocommerce div.product .woocommerce-tabs ul.tabs li` (white box, 1px
   border, 4px radius) at specificity (0,4,1). We prefix every rule below with
   `.single-product div.product` to out-specify it and reskin the chips as a flat
   RTL label row with a gold active underline — no boxes, no divider lines. */
.single-product div.product .woocommerce-tabs ul.tabs.wc-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-lg);
    margin: 0 0 var(--space-lg);
    padding: 0 0 0.25rem;
    list-style: none;
    border: none;
    border-bottom: 1px solid var(--color-border); /* structural rail */
}

.single-product div.product .woocommerce-tabs ul.tabs.wc-tabs li {
    display: inline-block;
    margin: 0;
    padding: 0;
    background: none;
    border: none;
    border-radius: 0;
    position: relative;
}

.single-product div.product .woocommerce-tabs ul.tabs.wc-tabs li a {
    display: inline-block;
    padding: 0 0 0.5rem;
    font-family: var(--font-body);
    font-size: 0.9375rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    color: var(--color-text-soft);
    text-decoration: none;
    transition: color var(--transition-fast);
}

.single-product div.product .woocommerce-tabs ul.tabs.wc-tabs li.active a,
.single-product div.product .woocommerce-tabs ul.tabs.wc-tabs li:hover a,
.single-product div.product .woocommerce-tabs ul.tabs.wc-tabs li a:focus-visible {
    color: var(--color-gold);
    font-weight: 600;
    outline: none;
}

/* Gold active underline, sat on the rail. */
.single-product div.product .woocommerce-tabs ul.tabs.wc-tabs li::after {
    content: "";
    position: absolute;
    bottom: -1px;
    right: 0;
    left: 0;
    height: 2px;
    background: var(--color-gold);
    opacity: 0;
    transition: opacity var(--transition-fast);
}
.single-product div.product .woocommerce-tabs ul.tabs.wc-tabs li.active::after { opacity: 1; }

/* WC-core draws ::before/::after box-connector pseudos on the tabs + each li —
   neutralise them so only our gold underline remains. */
.single-product div.product .woocommerce-tabs ul.tabs.wc-tabs::before,
.single-product div.product .woocommerce-tabs ul.tabs.wc-tabs::after { content: none; border: none; }
.single-product div.product .woocommerce-tabs ul.tabs.wc-tabs li::before { content: none; border: none; }

/* Panels — comfortable RTL reading column, brand typography. Cap the measure so
   long descriptions stay readable (≈68ch); the additional-info table spans full. */
.woocommerce-tabs .woocommerce-Tabs-panel {
    direction: rtl;
    text-align: right;
    font-family: var(--font-body);
    color: var(--color-text);
    line-height: 1.7;
    max-width: 68ch;
}
.woocommerce-tabs .woocommerce-Tabs-panel--additional_information {
    max-width: none;
}
.woocommerce-tabs .woocommerce-Tabs-panel > p {
    margin: 0 0 var(--space-md);
}
.woocommerce-tabs .woocommerce-Tabs-panel h2,
.woocommerce-tabs .woocommerce-Tabs-panel h3 {
    font-family: var(--font-heading);
    color: var(--color-text);
}

/* Additional-information table — borderless cream zebra (WC-core markup). */
.woocommerce-tabs table.shop_attributes { border: none; }
.woocommerce-tabs table.shop_attributes th,
.woocommerce-tabs table.shop_attributes td {
    border: none;
    padding: var(--space-sm) var(--space-md);
    background: none;
    text-align: right;
}
.woocommerce-tabs table.shop_attributes tr:nth-child(even) th,
.woocommerce-tabs table.shop_attributes tr:nth-child(even) td {
    background: var(--color-cream-low);
}
.woocommerce-tabs table.shop_attributes th {
    color: var(--color-text-muted);
    font-weight: 600;
    width: 30%;
}

@media (max-width: 600px) {
    .woocommerce-tabs ul.tabs.wc-tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        gap: var(--space-md);
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .woocommerce-tabs ul.tabs.wc-tabs::-webkit-scrollbar { display: none; }
    .woocommerce-tabs ul.tabs.wc-tabs li a { white-space: nowrap; }
}

/* ── Single Product — "Editorial Canvas" (GUIDELINES/product page) ──────────
   Declutter + curve-forward styling so the product page reads as elegantly as
   the homepage. PHP removes the breadcrumb + upsells (inc/woocommerce.php);
   the SKU line is hidden here so the admin SKU field & sku-manager stay intact. */
.single-product .product_meta .sku_wrapper {
    display: none;
}

/* ── Product meta / category labels (issue: shown but raw blue links) ────────
   The user wants categories SHOWN, but composed as refined labels — small
   Manrope, the "in" prefix muted, the category links a quiet gold that warms on
   hover (never the default underlined blue). Tone-only separation above. */
.single-product .product_meta {
    margin-top: var(--space-lg);
    padding-top: var(--space-md);
    font-family: var(--font-body);
    font-size: 0.8125rem;
    line-height: 1.7;
    color: var(--color-text-soft);
    direction: rtl;
    text-align: right;
}

.single-product .product_meta .posted_in {
    display: block;
    letter-spacing: 0.01em;
}

/* The "מסווג" / "Categories:" prefix label — quiet, uppercase, spaced. */
.single-product .product_meta .posted_in {
    color: var(--color-text-soft);
}

.single-product .product_meta a {
    color: var(--color-gold);
    text-decoration: none;
    font-weight: 600;
    transition: color var(--transition-fast);
}

.single-product .product_meta a:hover,
.single-product .product_meta a:focus-visible {
    color: var(--color-gold-hover);
    text-decoration: none;
    outline: none;
}

/* Fallback in case the theme prints the breadcrumb outside the removed hook. */
.single-product nav.woocommerce-breadcrumb,
.single-product .shop-page-title.product-title .woocommerce-breadcrumb {
    display: none;
}

/* Curve-forward, homepage-matching imagery: round the gallery image. */
.single-product .woocommerce-product-gallery__image img {
    border-radius: var(--radius-lg);
}

/* Related products — compact, uniform 4-up row (matches the reference's
   "אולי תאהבי גם"). The aspect-ratio sits on the .box-image CONTAINER (not the
   <img>), so every card holds the same 3:4 height even when an image file is
   missing — the cream placeholder shows instead of the card collapsing and
   scattering its caption. Rendered as a static grid (see inc/woocommerce.php),
   so no flickity absolute positioning to fight. */
.single-product .related .box-image {
    aspect-ratio: 3 / 4;
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--color-cream-low);
}

/* Stretch ONLY the image wrapper to fill the 3:4 box — never the `.image-tools`
   overlays (quick-view / wishlist), or the "תצוגה מהירה" bar would cover the
   whole image instead of sitting as a bottom bar like on the shop archive. */
.single-product .related .box-image > div:not(.image-tools),
.single-product .related .box-image > div:not(.image-tools) > a {
    height: 100%;
}

.single-product .related .box-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    color: transparent; /* hide alt text if a media file is missing (local) */
}

/* ── Cart row — qty stepper + ATC button on one aligned line, with a clear gap
   between them (issue: quantity touched the button). Covers both simple
   (`form.cart` direct children) and variable (`.woocommerce-variation-add-to-cart`)
   layouts. RTL: stepper on the right, button to its left. */
.single-product form.cart,
.single-product .woocommerce-variation-add-to-cart {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-md);
    margin-top: var(--space-md);
    direction: rtl;
}

/* Don't let the variations table become a flex child of form.cart and collapse
   onto the cart row — it must sit on its own line above the qty + button. */
.single-product form.cart > table.variations,
.single-product form.cart > .single_variation_wrap {
    flex: 1 1 100%;
}
.single-product form.cart > .single_variation_wrap {
    margin: 0;
}

/* Primary add-to-cart → gold pill, echoing the homepage hero CTA. Sized to its
   content so it sits beside the qty stepper rather than spanning the column. */
.single-product form.cart .single_add_to_cart_button,
.single-product .woocommerce-variation-add-to-cart .single_add_to_cart_button {
    width: auto;
    min-width: 220px;
    min-height: 52px;
    padding: 0.85em 2.5em;
    border-radius: var(--radius-pill);
    font-size: 0.875rem;
    letter-spacing: 0.12em;
}

/* The qty stepper holds its intrinsic pill size next to the button. */
.single-product form.cart .quantity,
.single-product .woocommerce-variation-add-to-cart .quantity {
    flex: 0 0 auto;
    margin: 0;
}

/* Variation price/availability sits above the cart row, not inline with it. */
.single-product .single_variation_wrap .woocommerce-variation {
    margin-bottom: var(--space-sm);
}
.single-product .woocommerce-variation-price .price {
    margin: 0;
}

/* ── Quantity stepper — clean rounded pill group ────────────────────────────
   The +/- render as `input.button.is-form`, so they inherit the big
   gold uppercase `.button` block from components.css (min-height 48px, wide
   padding) — the "old, oversized" look. Re-cast the whole control as one slim
   rounded pill: equal-width ghost +/- glyphs flanking a centred number, no
   spinners. Specificity (.single-product .quantity input.minus) out-points
   `.woocommerce input.button`, so no !important is needed. */
.single-product .quantity {
    display: inline-flex;
    align-items: center;
    background: var(--color-cream);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    overflow: hidden;
}

.single-product .quantity input.minus,
.single-product .quantity input.plus {
    -webkit-appearance: none;
    appearance: none;
    width: 44px;   /* ≥44px touch target (was 40px) */
    height: 44px;
    min-width: 0;
    min-height: 0;
    margin: 0;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 0;
    color: var(--color-gold);
    font-family: var(--font-body);
    font-size: 1.125rem;
    font-weight: 400;
    line-height: 1;
    letter-spacing: 0;
    text-transform: none;
    cursor: pointer;
    transition: background var(--transition-fast), color var(--transition-fast);
}

.single-product .quantity input.minus:hover,
.single-product .quantity input.plus:hover,
.single-product .quantity input.minus:focus-visible,
.single-product .quantity input.plus:focus-visible {
    background: var(--color-cream-low);
    color: var(--color-gold-hover);
    outline: none;
}

.single-product .quantity input.qty {
    width: 46px;
    height: 44px;
    min-height: 0;
    margin: 0;
    padding: 0;
    border: none;
    background: transparent;
    box-shadow: none;
    text-align: center;
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-text);
    -moz-appearance: textfield;
}

.single-product .quantity input.qty::-webkit-outer-spin-button,
.single-product .quantity input.qty::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* ── Variation controls — ≥44px touch targets ───────────────────────────────
   The size <select> was ~35px tall (THE conversion control). Bring it to 48px
   and give it room to breathe; matches the form-input curve language. Also
   covers any variation-swatch chips (~33px) the swatches plugin may render. */
.single-product .variations select {
    min-height: 48px;
    /* Constrain the size select to a sensible boutique width instead of
       stretching across the full summary column. */
    width: auto;
    min-width: 200px;
    max-width: 280px;
    /* base.css sets appearance:none (removes the native arrow), so the field read
       as a plain box, not a dropdown. Paint our own chevron + reserve room for it
       on the LEFT (the RTL "end" of the field). */
    padding: 0.5rem var(--space-sm) 0.5rem 2.25rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background-color: var(--color-cream);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23755a28' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: left 0.85rem center;
    background-size: 14px;
    font-family: var(--font-body);
    font-size: 1rem;
    color: var(--color-text);
    line-height: 1.2;
    cursor: pointer;
}

/* Variations table: clean RTL rows, no default table chrome, comfortable air
   between the label and the control. */
.single-product table.variations {
    margin: 0 0 var(--space-md);
    border: none;
    width: auto;
}
.single-product table.variations th,
.single-product table.variations td {
    border: none;
    padding: 0 0 var(--space-sm);
    background: none;
    text-align: right;
    vertical-align: middle;
}
.single-product table.variations th.label {
    padding-inline-end: var(--space-md);
    white-space: nowrap;
}
/* "נקה" (clear/reset) link — a secondary escape hatch, not a control that
   competes with the size dropdown. Sit it clearly apart from the select
   (inline gap), quiet it down (smaller, softer, no underline), and let it
   underline only on hover so it reads as an afterthought. */
.single-product .reset_variations {
    display: inline-block;
    margin-inline-start: var(--space-md);
    font-family: var(--font-body);
    font-size: 0.75rem;
    color: var(--color-text-soft);
    text-decoration: none;
    opacity: 0.8;
}
.single-product .reset_variations:hover,
.single-product .reset_variations:focus {
    color: var(--color-text);
    text-decoration: underline;
    opacity: 1;
}

.single-product .variations select:focus {
    outline: none;
    border-color: var(--color-gold);
    box-shadow: 0 0 0 3px rgba(117, 90, 40, 0.15);
}

/* Variation row label ("מידה") — clear required affordance via heading weight. */
.single-product .variations th.label,
.single-product .variations .label label {
    font-family: var(--font-body);
    font-weight: 600;
    color: var(--color-text);
}

/* Swatch-style size chips (if the swatches plugin is active). */
.single-product .variations ul li,
.single-product .variations .swatch,
.single-product .variations [class*="swatch"] {
    min-height: 44px;
    min-width: 44px;
}

/* ── Sticky bar — keep it to a single slim line ─────────────────────────────
   Hide the embedded quantity stepper (defaults to 1) and pill the CTA so the
   bar matches the curve language without growing tall. */
.sticky-atc .quantity {
    display: none;
}

/* Size the embedded form to its button instead of stretching across the bar. */
.sticky-atc form.cart {
    flex: 0 0 auto;
    width: auto;
    margin: 0;
    display: inline-flex;
    align-items: center;
}

.sticky-atc .single_add_to_cart_button,
.sticky-atc .sticky-atc__scroll {
    flex: 0 0 auto;
    width: auto;
    min-width: 0;
    min-height: 44px;
    margin: 0;
    padding: 0.5em 1.75em;
    border-radius: var(--radius-pill);
    white-space: nowrap;
    line-height: 1.4;
}

@media (max-width: 600px) {
    /* On phones the name is the first thing to give up room. */
    .sticky-atc__title { display: none; }
}

/* Checkout / Cart progress bar */
.checkout-progress {
    margin-bottom: var(--space-lg);
}

.checkout-progress__list {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 0;
    counter-reset: step;
}

.checkout-progress__step {
    flex: 1;
    text-align: center;
    font-size: 0.875rem;
    color: var(--color-text-muted);
    position: relative;
    padding-bottom: var(--space-sm);
}

.checkout-progress__step::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--color-border);
    border-radius: var(--radius-pill);
}

.checkout-progress__step--active {
    color: var(--color-gold);
    font-weight: 600;
}

.checkout-progress__step--active::after {
    background: var(--color-gold);
}

.checkout-progress__step a {
    color: inherit;
    text-decoration: none;
}


/* Checkout — single column mobile */
@media (max-width: 768px) {
    .woocommerce .col2-set,
    .woocommerce-page .col2-set {
        display: block;
    }
    .woocommerce .col2-set .col-1,
    .woocommerce .col2-set .col-2 {
        width: 100%;
        float: none;
    }
}

/* Floating labels */
.woocommerce form .form-row label {
    font-size: 0.875rem;
    color: var(--color-text-muted);
    margin-bottom: var(--space-xs);
}

.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 0.625rem var(--space-sm);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus {
    outline: none;
    border-color: var(--color-gold);
    box-shadow: 0 0 0 3px rgba(117, 90, 40, 0.15);
}

/* Place order button — full width mobile */
@media (max-width: 768px) {
    #place_order {
        width: 100%;
        min-height: 52px;
        font-size: 1rem;
    }
}

/* "עוד בדגם זה" — sibling-colour cross-links on the PDP (inc/woocommerce.php) */
.zohar-siblings {
    margin: var(--space-md) 0 0;
    padding-top: var(--space-md);
    border-top: 1px solid var(--color-border);
}
.zohar-siblings__label {
    display: block;
    font-family: var(--font-body);
    font-size: 0.85rem;
    color: var(--color-text-muted);
    margin-bottom: var(--space-sm);
}
.zohar-siblings__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
}
.zohar-siblings__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    width: 64px;
    text-decoration: none;
    color: var(--color-text-soft);
}
.zohar-siblings__thumb {
    width: 56px;
    height: 56px;
    object-fit: cover;
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border);
    transition: border-color var(--transition-base), transform var(--transition-base);
}
.zohar-siblings__item:hover .zohar-siblings__thumb,
.zohar-siblings__item:focus-visible .zohar-siblings__thumb {
    border-color: var(--color-gold);
    transform: translateY(-2px);
}
.zohar-siblings__name {
    font-size: 0.72rem;
    line-height: 1.2;
    text-align: center;
    color: var(--color-text-muted);
}
.zohar-siblings__item:hover .zohar-siblings__name {
    color: var(--color-gold);
}

/* ── PDP category cross-links (".zohar-cat-links") ─────────────── */
.zohar-cat-links {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0 var(--space-xs);
    padding-block-start: var(--space-sm);
    font-size: 0.82rem;
}
.zohar-cat-links__label {
    color: var(--color-text-muted);
    font-weight: 600;
    margin-inline-end: var(--space-xs);
}
.zohar-cat-links__link {
    color: var(--color-text-soft);
    text-decoration: none;
    transition: color var(--transition-base);
}
.zohar-cat-links__link:hover,
.zohar-cat-links__link:focus-visible {
    color: var(--color-gold);
    text-decoration: underline;
}
.zohar-cat-links__sep {
    color: var(--color-text-muted);
    pointer-events: none;
}

/* ── Archive sister-category row (".zohar-related-cats") ─────── */
.zohar-related-cats {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-xs) var(--space-sm);
    padding-block: var(--space-lg) var(--space-md);
}
.zohar-related-cats__label {
    color: var(--color-text-muted);
    font-size: 0.82rem;
    font-weight: 600;
}