/* =====================================================================
   NURYA — site layer (v1.1 "bright" redesign)

   Loaded AFTER nurya-brand.css. Bright white surfaces, a compact type
   scale, start-aligned section headers, small-radius buttons and a strict
   spacing rhythm. Logical properties throughout so RTL (ar) and LTR
   (fr/en) share one stylesheet.
   ===================================================================== */

:root {
    /* Spacing rhythm — every gap in this file uses one of these. */
    --s-1: 0.25rem;
    --s-2: 0.5rem;
    --s-3: 0.75rem;
    --s-4: 1rem;
    --s-5: 1.5rem;
    --s-6: 2rem;
    --s-7: 3rem;
    --s-8: 4rem;

    /* Radii — small and consistent. No pills. */
    --r-sm: 4px;
    --r-md: 6px;
    --r-lg: 10px;

    --line-soft: #EDEBEC;
}

/* --------------------------- Base surfaces -------------------------- */

body { background: #FFFFFF; }

.nu-section { background: #FFFFFF; padding-block: clamp(2.5rem, 6vw, 4.5rem); }
.nu-section + .nu-section { border-block-start: 1px solid var(--line-soft); }

/* ------------------------------- Logo ------------------------------- */

.logo-wordmark {
    font-family: 'Figtree', system-ui, sans-serif;
    font-weight: 800;
    font-size: clamp(1.1rem, 3vw, 1.35rem);
    letter-spacing: 0.14em;
    text-indent: 0.14em;
    color: var(--plum);
    text-decoration: none;
    text-transform: uppercase;
    display: inline-block;
    line-height: 1;
}

.logo-wordmark:hover { color: var(--wine); }
.site-footer .logo-wordmark, .footer .logo-wordmark { color: var(--rose); }

/* ---------------------------- Announcement -------------------------- */

.nu-announce {
    background: var(--wine);
    color: #FFFFFF;
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    text-align: center;
    padding: var(--s-2) var(--gutter);
    position: relative;
    z-index: 60;
}

.nu-announce span + span { margin-inline-start: var(--s-5); }
@media (max-width: 640px) { .nu-announce span + span { display: none; } }

/* ------------------------------- Hero ------------------------------- */

.nu-hero {
    position: relative;
    min-height: min(78vh, 660px);
    display: flex;
    align-items: flex-end;
    overflow: hidden;
    isolation: isolate;
}

.nu-hero-media { position: absolute; inset: 0; z-index: 0; }

.nu-hero-slide { position: absolute; inset: 0; opacity: 0; transition: opacity 1.6s ease; }
.nu-hero-slide.is-active { opacity: 1; }

.nu-hero-slide img {
    width: 100%; height: 100%;
    object-fit: cover; object-position: center 25%;
    display: block;
}

.nu-hero-veil {
    position: absolute; inset: 0; z-index: 1;
    background: linear-gradient(to top,
        rgba(20, 10, 15, 0.72) 0%,
        rgba(20, 10, 15, 0.34) 42%,
        rgba(20, 10, 15, 0) 78%);
}

.nu-hero-inner {
    position: relative; z-index: 2;
    padding-block: 0 clamp(2rem, 5vw, 3.5rem);
    max-width: 40rem;
    text-align: start;
}

.nu-hero-title {
    font-family: var(--f-display);
    font-weight: 700;
    color: #FFFFFF;
    font-size: clamp(1.6rem, 4.4vw, 2.6rem);
    line-height: 1.15;
    letter-spacing: -0.02em;
    margin: 0 0 var(--s-3);
}

.nu-hero-sub {
    color: rgba(255, 255, 255, 0.85);
    font-size: clamp(0.88rem, 1.9vw, 1rem);
    line-height: 1.6;
    margin: 0 0 var(--s-5);
    max-width: 30rem;
}

@media (prefers-reduced-motion: reduce) { .nu-hero-slide { transition: none; } }

/* ------------------------------ Buttons ----------------------------- */

.nu-btn {
    display: inline-block;
    border: 1px solid transparent;
    border-radius: var(--r-md);
    padding: 0.78rem 1.5rem;
    font-family: var(--f-body);
    font-weight: 600;
    font-size: 0.9rem;
    line-height: 1.2;
    cursor: pointer;
    text-decoration: none;
    transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

.nu-btn-primary { background: var(--plum); color: #FFFFFF; }
.nu-btn-primary:hover { background: var(--wine); color: #FFFFFF; }

.nu-btn-dark { background: #FFFFFF; color: var(--wine); }
.nu-btn-dark:hover { background: var(--blush-tint); }

.nu-btn-ghost { background: transparent; color: var(--plum); border-color: var(--line-strong); }
.nu-btn-ghost:hover { border-color: var(--plum); }

/* --------------------------- Section headers ------------------------ */
/* Start-aligned (right in Arabic, left in fr/en), with the "see all" link
   sitting on the same baseline as the title. Overrides the centred
   defaults inherited from the brand stylesheet. */

.nu-section .section-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--s-4);
    flex-wrap: wrap;
    margin-bottom: var(--s-5);
    text-align: start;
}

.nu-section .section-eyebrow {
    display: block;
    text-align: start;
    font-family: var(--f-body);
    font-style: normal;
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--muted);
    margin: 0 0 var(--s-1);
}

.nu-section .section-title {
    text-align: start;
    font-family: var(--f-display);
    font-size: clamp(1.15rem, 2.2vw, 1.5rem);
    font-weight: 700;
    letter-spacing: -0.015em;
    line-height: 1.25;
    margin: 0;
    color: var(--ink);
}

.nu-section .section-lead {
    text-align: start;
    margin: var(--s-2) 0 0;
    max-width: 40rem;
    font-size: 0.9rem;
    line-height: 1.65;
    color: var(--muted);
}

.nu-head-text { flex: 1 1 18rem; }

.nu-seeall {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--plum);
    text-decoration: none;
    border-block-end: 1px solid currentColor;
    padding-block-end: 1px;
    white-space: nowrap;
}

.nu-seeall:hover { color: var(--wine); }

/* --------------------------- Product cards -------------------------- */
/* Borderless cards on white: the photograph carries the card, not a box. */

.nu-rail {
    display: flex;
    gap: var(--s-3);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-block-end: var(--s-2);
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.nu-rail::-webkit-scrollbar { display: none; }

.nu-rail .pc-card {
    flex: 0 0 clamp(9.5rem, 42vw, 14rem);
    scroll-snap-align: start;
}

.nu-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--s-4) var(--s-3);
}

@media (min-width: 760px)  { .nu-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1040px) { .nu-grid { grid-template-columns: repeat(4, 1fr); } }

.pc-card {
    background: transparent;
    border: 0;
    border-radius: 0;
    overflow: visible;
    display: flex;
    flex-direction: column;
}

.pc-media {
    position: relative;
    display: block;
    aspect-ratio: 3 / 4;
    background: #F5F4F4;
    border-radius: var(--r-sm);
    overflow: hidden;
}

.pc-media img {
    width: 100%; height: 100%;
    object-fit: cover; display: block;
    transition: transform 0.6s ease;
}

.pc-card:hover .pc-media img { transform: scale(1.03); }

.pc-flag {
    position: absolute;
    inset-block-start: var(--s-2);
    inset-inline-start: var(--s-2);
    background: #FFFFFF;
    color: var(--plum);
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 0.2rem 0.45rem;
    border-radius: var(--r-sm);
}

.pc-body {
    padding: var(--s-3) 0 0;
    display: flex;
    flex-direction: column;
    gap: var(--s-1);
    text-align: start;
}

.pc-name { font-size: 0.92rem; font-weight: 600; margin: 0; line-height: 1.35; }
.pc-name a { color: var(--ink); text-decoration: none; }
.pc-name a:hover { color: var(--plum); }

.pc-meta { font-size: 0.78rem; color: var(--muted); margin: 0; }

.pc-price { margin: var(--s-1) 0 0; font-size: 0.9rem; font-weight: 600; color: var(--ink); }
.pc-price s { color: var(--muted); font-weight: 400; margin-inline-end: var(--s-2); }
.pc-price span { color: var(--plum); }

/* The card is fully clickable; a separate CTA button adds noise. */
.pc-cta { display: none; }

/* ----------------------------- Spotlight ---------------------------- */

.nu-spotlight {
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(1rem, 3vw, 2.5rem);
    align-items: center;
    background: transparent;
    border: 0;
}

@media (min-width: 860px) { .nu-spotlight { grid-template-columns: 1fr 1fr; } }

.nu-spot-media { display: block; aspect-ratio: 3 / 4; border-radius: var(--r-sm); overflow: hidden; background: #F5F4F4; }
.nu-spot-media img { width: 100%; height: 100%; object-fit: cover; display: block; }

.nu-spot-body { padding: 0; text-align: start; }
.nu-spot-body h3 {
    font-size: clamp(1.1rem, 2.2vw, 1.4rem);
    font-weight: 700;
    letter-spacing: -0.015em;
    margin: 0 0 var(--s-3);
}

.nu-spot-points { list-style: none; margin: 0 0 var(--s-4); padding: 0; }
.nu-spot-points li {
    position: relative;
    padding-inline-start: var(--s-4);
    margin-block: var(--s-2);
    font-size: 0.88rem;
    color: var(--ink-soft);
}
.nu-spot-points li::before {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    inset-block-start: 0.55em;
    width: 5px; height: 5px;
    border-radius: 50%;
    background: var(--plum);
}

.nu-spot-price { font-size: 1.05rem; font-weight: 700; color: var(--ink); margin: 0 0 var(--s-4); }

/* ---------------------------- Coming soon --------------------------- */

.nu-soon {
    text-align: start;
    border: 1px solid var(--line-soft);
    border-radius: var(--r-lg);
    padding: clamp(1.4rem, 4vw, 2.2rem);
    background: #FAFAFA;
}

.nu-soon h3 { margin: 0 0 var(--s-2); font-size: 1rem; font-weight: 700; }
.nu-soon p { margin: 0 0 var(--s-4); max-width: 34rem; color: var(--muted); font-size: 0.9rem; }
.nu-soon .nu-btn-dark { border-color: var(--line-strong); }

/* ------------------------------- Mission ---------------------------- */

.nu-mission-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(1.2rem, 3.5vw, 2.5rem);
    align-items: center;
}

@media (min-width: 860px) { .nu-mission-grid { grid-template-columns: 5fr 6fr; } }

.nu-mission-media img {
    width: 100%;
    aspect-ratio: 3 / 4;
    object-fit: cover;
    border-radius: var(--r-sm);
    display: block;
}

.nu-mission-body { text-align: start; }
.nu-mission-body p { color: var(--muted); line-height: 1.7; font-size: 0.92rem; margin: 0 0 var(--s-3); }

.nu-mission-points { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); margin-block-start: var(--s-4); }

.nu-mp {
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--ink);
}

/* ------------------------- Colour image cards ----------------------- */

.color-cards { display: flex; flex-wrap: wrap; gap: var(--s-2); }

.color-card {
    inline-size: 62px;
    block-size: 78px;
    padding: 0;
    border: 1px solid var(--line-soft);
    border-radius: var(--r-sm);
    background: #F5F4F4;
    overflow: hidden;
    cursor: pointer;
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.color-card img { inline-size: 100%; block-size: 100%; object-fit: cover; display: block; }
.color-card:hover { border-color: var(--line-strong); }
.color-card.active { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.color-card:focus-visible { outline: 2px solid var(--plum); outline-offset: 2px; }

@media (max-width: 480px) { .color-card { inline-size: 54px; block-size: 68px; } }

/* ---------------------------- Product page -------------------------- */

.product-title {
    font-size: clamp(1.25rem, 2.8vw, 1.7rem);
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.2;
}

.product-selection-color .selector-header,
.product-selection-size .selector-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--s-3);
    margin-bottom: var(--s-3);
}

.product-selection-color .selector-header h3,
.product-selection-size .selector-header h3 {
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    margin: 0;
}

.product-selection-color .selected-value,
.product-selection-size .selected-value {
    font-size: 0.85rem;
    color: var(--muted);
    font-weight: 400;
}

.product-selection-color,
.product-selection-size { margin-block-end: var(--s-5); }

.nu-desc { background: #FFFFFF; }
.nu-desc-inner { max-width: 42rem; color: var(--ink-soft); line-height: 1.75; font-size: 0.92rem; }

/* Media column stays put while the decision column scrolls on desktop. */
@media (min-width: 1000px) {
    .product-container { align-items: flex-start; }
    .product-gallery { position: sticky; inset-block-start: 92px; }
}

/* ------------------------------ Shop grid --------------------------- */

.woocommerce ul.products {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--s-4) var(--s-3);
    list-style: none;
    margin: 0;
    padding: 0;
}

@media (min-width: 760px)  { .woocommerce ul.products { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1040px) { .woocommerce ul.products { grid-template-columns: repeat(4, 1fr); } }

.woocommerce ul.products::before,
.woocommerce ul.products::after { content: none; }

/* =====================================================================
   v1.2 — richer cards, rail navigation, collection archives
   ===================================================================== */

/* ------------------------- Section head actions --------------------- */

.nu-head-actions {
    display: flex;
    align-items: center;
    gap: var(--s-3);
}

.nu-rail-nav { display: flex; gap: var(--s-2); }

.nu-rail-btn {
    inline-size: 40px;
    block-size: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--line-soft);
    border-radius: 50%;
    background: #FFFFFF;
    color: var(--ink);
    cursor: pointer;
    padding: 0;
    transition: border-color 0.18s ease, opacity 0.18s ease;
}

.nu-rail-btn svg { inline-size: 18px; block-size: 18px; }
.nu-rail-btn:hover:not(:disabled) { border-color: var(--ink); }
.nu-rail-btn:disabled { opacity: 0.3; cursor: default; }
.nu-rail-btn:focus-visible { outline: 2px solid var(--plum); outline-offset: 2px; }

/* RTL: the chevrons are directional, so flip them with the document. */
[dir="rtl"] .nu-rail-btn svg { transform: scaleX(-1); }

@media (max-width: 560px) {
    .nu-rail-nav { display: none; } /* touch swipe is the control on mobile */
}

/* ---------------------------- Product cards ------------------------- */
/* Cards sit on a tinted section so the white card reads as a surface. */

.nu-featured { background: #F4F3F3; }
.nu-featured .pc-card {
    background: #FFFFFF;
    border-radius: var(--r-lg);
    padding: var(--s-3);
}

.nu-featured .pc-media { background: #EDEBEB; }

.pc-media { border-radius: var(--r-md); }

.pc-body { padding-block-start: var(--s-3); gap: 0; }

.pc-name {
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    margin: 0 0 var(--s-1);
}

.pc-meta { font-size: 0.82rem; color: var(--muted); margin: 0 0 var(--s-2); }

.pc-price {
    margin: 0 0 var(--s-3);
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--ink);
    display: flex;
    align-items: baseline;
    gap: var(--s-2);
    flex-wrap: wrap;
}

.pc-price .pc-from { font-weight: 400; color: var(--muted); font-size: 0.85rem; }
.pc-price s { color: var(--muted); font-weight: 400; }
.pc-price span:not(.pc-from) { color: var(--ink); }

/* Colour dots + count */
.pc-colors {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    margin-block-end: var(--s-3);
}

.pc-dots { display: inline-flex; }

.pc-dot {
    inline-size: 18px;
    block-size: 18px;
    border-radius: 50%;
    display: inline-block;
    border: 1px solid rgba(0, 0, 0, 0.12);
    margin-inline-start: -6px;
}

.pc-dots .pc-dot:first-child { margin-inline-start: 0; }

.pc-colors-count { font-size: 0.8rem; color: var(--muted); }

/* Full-width action, dark, with a directional arrow. */
.pc-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--s-2);
    margin-block-start: auto;
    background: var(--ink);
    color: #FFFFFF;
    border: 0;
    border-radius: var(--r-md);
    padding: 0.75rem 1rem;
    font-size: 0.88rem;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.18s ease;
}

.pc-cta:hover { background: var(--plum); color: #FFFFFF; }
.pc-cta svg { inline-size: 16px; block-size: 16px; flex: 0 0 auto; }
[dir="rtl"] .pc-cta svg { transform: scaleX(-1); }

/* Outside the featured rail the cards stay flat on white. */
.nu-active .pc-card,
.nu-swim .pc-card,
.nu-archive .pc-card { background: transparent; padding: 0; }

.nu-active .pc-media,
.nu-swim .pc-media,
.nu-archive .pc-media { background: #F1EFEF; }

/* --------------------------- Archive pages -------------------------- */

.nu-archive { padding-block: clamp(1.5rem, 4vw, 2.5rem) clamp(3rem, 7vw, 5rem); background: #FFFFFF; }

.nu-archive-head { padding-block: clamp(1.5rem, 5vw, 3.5rem) clamp(1rem, 3vw, 2rem); }

.nu-archive-title {
    font-family: var(--f-display);
    font-size: clamp(1.75rem, 6vw, 3rem);
    font-weight: 500;
    letter-spacing: -0.03em;
    line-height: 1.1;
    margin: 0;
    text-align: start;
    color: var(--ink);
}

.nu-archive-desc {
    margin-block-start: var(--s-3);
    max-width: 40rem;
    color: var(--muted);
    font-size: 0.92rem;
    line-height: 1.7;
}

.nu-archive-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-4);
    padding-block: var(--s-4);
    margin-block-end: var(--s-4);
    border-block-end: 1px solid var(--line-soft);
}

.nu-archive-count { font-size: 0.88rem; color: var(--muted); }

.nu-archive-empty { color: var(--muted); font-size: 0.92rem; }

.nu-archive-nav { margin-block-start: var(--s-7); display: flex; justify-content: center; }
.nu-archive-nav ul { display: flex; gap: var(--s-2); list-style: none; margin: 0; padding: 0; }
.nu-archive-nav a,
.nu-archive-nav span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-inline-size: 38px;
    block-size: 38px;
    border: 1px solid var(--line-soft);
    border-radius: var(--r-sm);
    text-decoration: none;
    font-size: 0.85rem;
    color: var(--ink);
}
.nu-archive-nav .current { background: var(--ink); color: #FFFFFF; border-color: var(--ink); }

/* =====================================================================
   v1.3 — audit fixes: hierarchy, product column, action colour
   ===================================================================== */

/* ------------------------ Section titles (F1) ----------------------- */
/* The bright pass over-corrected: everything ended up the same small size,
   so nothing led the eye. Titles come back up; body stays quiet. */

.nu-section .section-title {
    font-size: clamp(1.5rem, 4vw, 2.1rem);
    font-weight: 800;
    letter-spacing: -0.03em;
}

.nu-section .section-header { margin-bottom: var(--s-5); }

/* ------------------------ Action colour (T2) ------------------------ */
/* Plum is the action colour. Ink is reserved for text and secondary
   surfaces, so the brand colour actually does work on the page. */

.pc-cta { background: var(--plum); }
.pc-cta:hover { background: var(--wine); }

.nu-btn:active,
.pc-cta:active { transform: scale(0.985); }

/* --------------------- Product page hierarchy ----------------------- */

.product-title {
    font-size: clamp(1.9rem, 6vw, 2.9rem);
    font-weight: 500;
    letter-spacing: -0.035em;
    line-height: 1.08;
    margin: 0 0 var(--s-2);
}

.product-color-line {
    font-size: 0.95rem;
    color: var(--muted);
    margin: 0 0 var(--s-3);
}

.product-header .rating-stars { margin-block-end: var(--s-4); }

.product-price-stock { margin-block-end: var(--s-5); }

/* Delivery status row — green dot + window, right above the form. */
.delivery-row {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    font-size: 0.85rem;
    color: var(--ink-soft);
    margin: 0 0 var(--s-3);
}

.dot-live {
    inline-size: 8px;
    block-size: 8px;
    border-radius: 50%;
    background: var(--ok);
    flex: 0 0 auto;
}

/* Risk reversal collapsed to one line. */
.risk-line {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    font-size: 0.82rem;
    color: var(--muted);
    margin: 0 0 var(--s-4);
}

.order-form-header .order-form-title {
    font-size: 1rem;
    font-weight: 700;
    margin: 0 0 var(--s-3);
}

/* Bundles now sit below the form — quieter, they are an upsell not a gate. */
.product-selection-bundle { margin-block-start: var(--s-6); }

/* Thumbnail strip: detail shots only (colour choice lives in the cards). */
.thumbnail-gallery { gap: var(--s-2); }

/* ----------------------------- Cards (C1/C2) ------------------------ */

.nu-featured .pc-card { padding: var(--s-4); }
.pc-name { font-size: 1.05rem; }
.pc-price { font-size: 0.9rem; font-weight: 500; }
.pc-price span:not(.pc-from) { font-weight: 600; }

/* ---------------------------- Motion (M1) --------------------------- */

.nu-reveal {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.nu-reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
    .nu-reveal { opacity: 1; transform: none; transition: none; }
}

/* =====================================================================
   v1.3.1 — header: logo start, inline nav, actions end
   ===================================================================== */

.nu-header {
    background: #FFFFFF;
    border-block-end: 1px solid var(--line-soft);
}

.nu-header-inner {
    display: flex;
    align-items: center;
    gap: var(--s-5);
    min-block-size: 68px;
}

.nu-header-start {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    flex: 0 0 auto;
}

.nu-header .logo { margin: 0; }

/* Inline navigation sits beside the logo, filling the middle. */
.nu-header .nu-nav {
    display: flex;
    align-items: center;
    gap: clamp(0.9rem, 2vw, 1.6rem);
    flex: 1 1 auto;
}

.nu-header .nu-nav a {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--ink);
    text-decoration: none;
    white-space: nowrap;
    transition: color 0.18s ease;
}

.nu-header .nu-nav a:hover { color: var(--plum); }

.nu-header-end {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    flex: 0 0 auto;
    margin-inline-start: auto;
}

.nu-icon-btn {
    position: relative;
    inline-size: 40px;
    block-size: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 0;
    border-radius: 50%;
    color: var(--ink);
    cursor: pointer;
    padding: 0;
    transition: background 0.18s ease;
}

.nu-icon-btn:hover { background: #F4F3F3; }
.nu-icon-btn svg { inline-size: 21px; block-size: 21px; }
.nu-icon-btn:focus-visible { outline: 2px solid var(--plum); outline-offset: 2px; }

.nu-icon-btn .cart-count {
    position: absolute;
    inset-block-start: 2px;
    inset-inline-end: 2px;
    min-inline-size: 17px;
    block-size: 17px;
    border-radius: 999px;
    background: var(--plum);
    color: #FFFFFF;
    font-size: 0.65rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding-inline: 4px;
}

/* Hamburger is mobile-only: the inline nav carries desktop. */
.nu-header .mobile-menu-toggle { display: none; }

@media (max-width: 900px) {
    .nu-header .mobile-menu-toggle { display: inline-flex; }
    .nu-header .nu-nav {
        position: fixed;
        inset-block-start: 0;
        inset-inline-start: 0;
        block-size: 100dvh;
        inline-size: min(82vw, 320px);
        background: #FFFFFF;
        flex-direction: column;
        align-items: flex-start;
        gap: var(--s-4);
        padding: calc(var(--s-8) + var(--s-4)) var(--s-5) var(--s-5);
        transform: translateX(-102%);
        transition: transform 0.28s ease;
        z-index: 80;
        overflow-y: auto;
    }
    [dir="rtl"] .nu-header .nu-nav { transform: translateX(102%); }
    .nu-header .nu-nav.active { transform: none; }
    .nu-header .nu-nav a { font-size: 1.05rem; }
}

/* ------------------------------ Search ------------------------------ */

.nu-search {
    border-block-start: 1px solid var(--line-soft);
    background: #FFFFFF;
    padding-block: var(--s-3);
}

.nu-search-form { display: flex; gap: var(--s-2); align-items: center; }

.nu-search-form input[type="search"] {
    flex: 1 1 auto;
    border: 1px solid var(--line-strong);
    border-radius: var(--r-md);
    padding: 0.7rem 0.9rem;
    font-family: var(--f-body);
    font-size: 0.92rem;
    color: var(--ink);
    background: #FFFFFF;
}

.nu-search-form input[type="search"]:focus-visible {
    outline: 2px solid var(--plum);
    outline-offset: 1px;
}

/* =====================================================================
   v1.3.2 — collection archive header
   Large light title over a filter/sort/count bar.
   ===================================================================== */

.nu-archive-title { font-weight: 400; letter-spacing: -0.04em; }

.nu-archive-bar {
    flex-wrap: wrap;
    row-gap: var(--s-2);
}

.nu-archive-tools {
    display: flex;
    align-items: center;
    gap: var(--s-4);
    flex-wrap: wrap;
}

.nu-archive-sort {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    font-size: 0.85rem;
    color: var(--muted);
}

.nu-archive-sort select {
    font-family: var(--f-body);
    font-size: 0.85rem;
    color: var(--ink);
    background: transparent;
    border: 0;
    border-block-end: 1px solid var(--ink);
    padding: 0.2rem 1.2rem 0.2rem 0;
    cursor: pointer;
}

.nu-archive-sort select:focus-visible { outline: 2px solid var(--plum); outline-offset: 2px; }

/* Bundles sit inside the decision flow again, so they need breathing room
   rather than the below-the-form treatment. */
.product-selection-bundle { margin-block-start: var(--s-5); margin-block-end: var(--s-3); }
.offer-deadline { margin-block-end: var(--s-4); }