/* ==========================================================================
   Naturamia storefront — fiel al Figma (componentes verificados con captura)
   Tokens: green #2D6A4F · green-dark #1B4332 · coral #FD4239 · Inter
   ========================================================================== */
.nat { --green:#2D6A4F; --green-d:#1B4332; --coral:#FD4239; --ink:#374151; --muted:#8a93a0; --line:#e7eae8; --tint:#D8F3DC; --card:#F3F6F4; font-family:Inter,system-ui,-apple-system,sans-serif; color:var(--ink); }
.nat *,.nat *::before,.nat *::after { box-sizing:border-box; }
.nat-wrap { max-width:1160px; margin:0 auto; padding:0 20px; }
.nat-wrap--full { max-width:none; }
.nat .nat-btn, a.nat-btn, button.nat-btn { display:inline-flex; align-items:center; justify-content:center; gap:.45rem; background:var(--green) !important; color:#fff !important; font-weight:700; border:0 !important; border-radius:999px !important; padding:.85rem 1.6rem !important; cursor:pointer; text-decoration:none; font-size:.95rem; transition:background .15s; width:auto; }
.nat .nat-btn:hover, a.nat-btn:hover, button.nat-btn:hover,
.nat .nat-btn:focus, a.nat-btn:focus, button.nat-btn:focus { background:var(--green-d) !important; color:#fff !important; }
.nat .nat-btn--outline, button.nat-btn--outline { background:#fff !important; color:var(--green) !important; border:1.5px solid var(--green) !important; }
.nat .nat-btn:disabled, .nat .nat-btn[disabled], button.nat-btn:disabled { opacity:.45 !important; cursor:not-allowed !important; box-shadow:none !important; }
.nat .nat-btn:disabled:hover, button.nat-btn:disabled:hover { background:var(--green) !important; }

/* ---------- HERO ---------- */
.nat-hero { position:relative; overflow:hidden; background:#1B4332; color:#fff; border-radius:24px; padding:3.5rem 1.5rem 0; text-align:center; margin:1.25rem auto 2.5rem; max-width:1160px; }
/* Full-bleed hero behind the menu (shop "Find your box") */
.nat-fullhero { --nat-hdr: 110px; }
.nat-fullhero .nat-hero {
	border-radius:0 !important; max-width:none !important;
	width:100vw; margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw);
	margin-top:0; margin-bottom:2.5rem;
	padding-top:9rem;
}
/* Transparent menu overlapping the hero, with white nav text */
.nat-fullhero .elementor-location-header { background:transparent !important; position:relative; z-index:50; }
.nat-fullhero .elementor-location-header > .elementor, .nat-fullhero .elementor-location-header .e-con, .nat-fullhero .elementor-location-header .elementor-container { background:transparent !important; }
.nat-fullhero .elementor-location-header .elementor-nav-menu a, .nat-fullhero .elementor-location-header .elementor-item { color:#fff !important; }
.nat-fullhero .elementor-location-header .elementor-nav-menu a:hover { color:#D8F3DC !important; }
.nat-hero__eyebrow { margin:0 auto .4rem; max-width:720px; font-weight:600; font-size:clamp(1.05rem,2.4vw,2rem); line-height:1.35; }
.nat-hero__title { margin:0; font-weight:700; font-size:clamp(3rem,11vw,8.75rem); line-height:1; letter-spacing:-.02em; }
.nat-hero__art { height:clamp(180px,30vw,360px); margin-top:1.2rem; background:center bottom/contain no-repeat; }

/* ---------- category pills ---------- */
.nat-pills { display:flex; flex-wrap:wrap; gap:.75rem; justify-content:center; margin:0 0 2.2rem; }
/* No !important here on purpose: the .nat scope already beats theme button styles,
   and leaving these overridable lets the widget's "Filter tabs" Style controls win
   by specificity ({{WRAPPER}} .nat-pill). */
.nat .nat-pill { border:1.5px solid var(--green); background:#fff; color:var(--green); border-radius:999px; padding:.7rem 1.5rem; font-weight:600; font-size:.82rem; letter-spacing:.06em; text-transform:uppercase; cursor:pointer; line-height:1.2; }
.nat .nat-pill.is-active { background:var(--green); color:#fff; border-color:var(--green); }

/* ---------- box grid + cards ---------- */
.nat-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; }
.nat-box-card { position:relative; display:flex; flex-direction:column; border-radius:24px; overflow:hidden; background:var(--card); text-decoration:none !important; color:var(--ink); transition:box-shadow .2s,transform .2s; }
/* Some page contexts (e.g. the deals page) underline links — never on the cards. */
.nat .nat-box-card, .nat .nat-box-card:hover, .nat .nat-box-card * { text-decoration:none !important; }
/* Force the widget's card typography/colours everywhere the cards are used (shop
   widget, [naturamia_shop] and [naturamia_deals]) so the page theme can't alter them. */
.nat .nat-box-card__title { font-family:Inter,system-ui,-apple-system,sans-serif; font-size:1.6rem; font-weight:700; color:var(--ink); letter-spacing:-.01em; }
.nat .nat-box-card__ingredients { font-family:Inter,system-ui,-apple-system,sans-serif; color:var(--muted); font-size:.82rem; font-weight:600; letter-spacing:.05em; text-transform:uppercase; }
.nat .nat-box-card__copy { font-family:Inter,system-ui,-apple-system,sans-serif; color:#5b6470; font-size:1rem; line-height:1.5; }
.nat .nat-box-card__from { color:var(--green); }
.nat .nat-box-card__cart { color:var(--green); }
/* Price aligned to the "Add to cart" text line (the widget did this via an Elementor
   control; this base rule applies it to the shortcodes too — the widget control,
   being more specific, still overrides with its own value). */
.nat .nat-box-card__from { transform:translateY(18px); }
/* "See all boxes" — spacing from the offers grid. */
.nat-promo { margin:2.5rem 0 0; }

/* ---------- Promo-code block (deals) ---------- */
.nat-promo2 { border-left:2px solid #2D6A4F; border-radius:8px; background:#EAF5EF; padding:2rem 2.2rem; max-width:720px; margin:2.5rem auto 0; }
.nat-promo2__head { display:flex; align-items:center; gap:1.3rem; }
.nat-promo2__ic { flex:none; width:44px; height:44px; color:#2D6A4F; display:inline-flex; }
.nat-promo2__ic svg { width:44px; height:44px; }
.nat-promo2__title { margin:0; font-family:Inter,system-ui,-apple-system,sans-serif; font-weight:600; font-size:28px; line-height:1.1; color:#2D6A4F; }
.nat-promo2__desc { margin:.35rem 0 0; font-family:Inter,system-ui,-apple-system,sans-serif; font-weight:500; font-size:14px; line-height:1.4; color:rgba(55,71,81,.6); }
.nat-promo2__field { margin-top:1.6rem; }
.nat-promo2__label { display:block; font-family:Inter,system-ui,-apple-system,sans-serif; font-weight:600; font-size:16px; color:#374151; margin:0 0 .5rem; }
.nat-promo2__row { display:flex; gap:.8rem; align-items:stretch; }
.nat-promo2__input { flex:1; border:1px solid var(--line); border-radius:10px; padding:.8rem 1rem; font-size:1rem; background:#fff; }
.nat-promo2__apply { flex:none; background:#2D6A4F !important; color:#fff !important; border:0 !important; border-radius:200px !important; box-shadow:none !important; font-family:Inter,system-ui,-apple-system,sans-serif; font-weight:600; font-size:14px; padding:0 1.9rem; cursor:pointer; }
.nat-promo2__apply:hover, .nat-promo2__apply:focus { background:#2D6A4F !important; color:#fff !important; box-shadow:none !important; }
.nat-promo2__ok { display:flex; align-items:center; gap:.5rem; margin:1rem 0 0; font-family:Inter,system-ui,-apple-system,sans-serif; font-weight:500; font-size:14px; color:#2D6A4F; }
.nat-promo2__ok-ic { flex:none; display:inline-flex; width:19px; height:19px; color:#2D6A4F; }
.nat-promo2__ok-ic svg { width:19px; height:19px; }
@media (max-width:600px){
	.nat-promo2 { padding:1.4rem 1.3rem; }
	.nat-promo2__head { gap:.9rem; }
	.nat-promo2__title { font-size:1.5rem; }
	.nat-promo2__desc { font-size:.95rem; }
	.nat-promo2__ic, .nat-promo2__ic svg { width:40px; height:40px; }
	.nat-promo2__row { flex-direction:column; align-items:stretch; }
	.nat-promo2__apply { width:100%; padding:.85rem 1.9rem; }
}
.nat-box-card:hover { box-shadow:0 16px 38px rgba(0,0,0,.08); transform:translateY(-3px); }
.nat-box-card__media { position:relative; height:230px; background:transparent center/contain no-repeat; padding:1.4rem 1.4rem .4rem; }
.nat-box-card__badge { position:absolute; top:1rem; right:1rem; background:var(--coral); color:#fff; font-weight:700; font-size:.7rem; letter-spacing:.06em; padding:.4rem .8rem; border-radius:999px; }
.nat-box-card__body { padding:.4rem 1.5rem 1.6rem; display:flex; flex-direction:column; gap:.5rem; flex:1; }
.nat-box-card__title { margin:0; font-size:1.6rem; font-weight:700; color:var(--ink); letter-spacing:-.01em; }
.nat-box-card__ingredients { margin:0; color:var(--muted); font-size:.82rem; font-weight:600; letter-spacing:.05em; text-transform:uppercase; }
.nat-box-card__copy { margin:0; color:#5b6470; font-size:1rem; line-height:1.5; flex:1; }
.nat-box-card__foot { display:flex; align-items:center; margin-top:.8rem; min-height:48px; padding-right:7rem; }
.nat-box-card__from { font-size:1.5rem; font-weight:800; color:var(--green); white-space:nowrap; }
.nat-box-card__from b { font-weight:800; }
/* concave notch: white "Add to cart" tab carved into the bottom-right of the gray card.
   Two radial-gradient fillets bridge the white tab to the gray card with concave curves. */
.nat-box-card__cart { position:absolute; right:0; bottom:0; z-index:1; display:inline-flex; align-items:center; gap:.45rem; background:#fff; color:var(--green); font-weight:700; font-size:.95rem; padding:1rem 1.4rem 1.2rem; border-top-left-radius:22px; }
.nat-box-card__cart::before { content:""; position:absolute; left:-22px; bottom:0; width:22px; height:22px; background:radial-gradient(circle 22px at top left, transparent 0 22px, #fff 22px); }
.nat-box-card__cart::after { content:""; position:absolute; right:0; top:-22px; width:22px; height:22px; background:radial-gradient(circle 22px at top left, transparent 0 22px, #fff 22px); }

/* build-your-own tile */
.nat-byob { background:var(--tint); border:2px dashed #7bb597; align-items:flex-start; justify-content:flex-start; text-align:left; padding:2.2rem 1.6rem 2.2rem; gap:.45rem; color:var(--green); }
.nat-byob__ic { color:var(--green); margin:1.1rem 0 1.3rem; }
.nat-byob h3 { margin:0; color:var(--green); font-size:1.5rem; font-weight:800; letter-spacing:-.01em; }
.nat-byob p { margin:.2rem 0 0; color:#5b6470; font-size:1rem; line-height:1.5; max-width:none; }
/* Free-standing pill CTA, separated from the card. 16px vertical / 44px horizontal
   padding, fully rounded (200px). margin-top:auto pushes it to the bottom so it sits
   apart from the copy above it. */
.nat .nat-byob .nat-byob__btn { margin-top:auto; align-self:flex-start; padding:16px 44px !important; border-radius:200px !important; }

/* ---------- gift block ---------- */
.nat-gift { position:relative; border:1.5px solid #cfdbd5; border-radius:24px; text-align:center; padding:3.5rem 1.5rem 2.5rem; margin:3rem 0 0; }
.nat-gift__ic { position:absolute; top:-32px; left:50%; transform:translateX(-50%); width:64px; height:64px; border-radius:50%; background:var(--tint); color:var(--green); display:flex; align-items:center; justify-content:center; }
.nat-gift__title { margin:0 0 1.5rem; color:var(--ink); font-size:3rem; font-weight:700; }
.nat-gift__note { display:inline-flex; flex-direction:column; align-items:center; gap:1rem; }
.nat-gift__note p { margin:0; color:#1f2d28; font-size:1rem; }
.nat-help { background:#f4f6f5; border-radius:16px; text-align:center; padding:1.6rem; margin:1.5rem 0; }
.nat-help p { margin:0 0 .4rem; font-size:1.15rem; color:var(--ink); }
.nat-help a { color:var(--green); font-weight:600; text-decoration:underline; }
.nat-guarantee-band { display:flex; align-items:center; justify-content:center; gap:.6rem; color:var(--ink); padding:1rem 0 2.5rem; font-size:1.05rem; }
.nat-guarantee-band a { color:var(--green); font-weight:600; text-decoration:underline; }
.nat-guarantee-band svg { color:var(--green); flex:none; }

/* ==========================================================================
   SINGLE BOX
   ========================================================================== */
.nat-inside { margin:1.4rem 0; }
.nat-inside h4 { color:var(--green); font-weight:700; margin:0 0 .7rem; font-size:1.05rem; }
.nat-chips { display:flex; flex-wrap:wrap; gap:.6rem; }
.nat-chip { display:inline-flex; align-items:center; gap:.45rem; background:var(--tint); border-radius:999px; padding:.4rem .8rem .4rem .4rem; font-size:.85rem; font-weight:600; }
.nat-chip .qbadge { background:var(--green); color:#fff; width:22px; height:22px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; font-size:.72rem; }
.nat-cart .nat-price-toggle { display:flex; gap:.9rem; margin:1.2rem 0; flex-wrap:wrap; }
.nat-price-opt { position:relative; flex:1 1 180px; border:2px solid var(--line); border-radius:14px; padding:1rem 1.1rem; cursor:pointer; display:flex; flex-direction:column; gap:.15rem; }
.nat-price-opt:has(input:checked) { border-color:var(--green); background:var(--tint); }
.nat-price-opt input { position:absolute; opacity:0; }
.nat-price-opt .lbl { font-size:.72rem; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); font-weight:700; }
.nat-price-opt .amt { font-size:1.5rem; font-weight:800; color:var(--green); }
.nat-price-opt small { color:var(--muted); }
.nat-price-opt .tag { position:absolute; top:-10px; right:12px; background:var(--green); color:#fff; font-size:.68rem; font-weight:700; padding:.2rem .55rem; border-radius:999px; }
.nat-cart .single_add_to_cart_button { background:var(--green) !important; color:#fff !important; border-radius:999px !important; font-weight:700 !important; padding:.85rem 1.8rem !important; }
.nat-guarantee { margin-top:1rem; color:var(--muted); font-size:.85rem; }
.nat-addons { margin:1.2rem 0; }
.nat-addons h4 { color:var(--green); font-weight:700; margin:0 0 .6rem; font-size:1.05rem; }
.nat-addon { display:flex; align-items:center; gap:.6rem; border:1px solid var(--line); border-radius:12px; padding:.7rem .9rem; margin-bottom:.5rem; cursor:pointer; }
.nat-addon:has(input:checked) { border-color:var(--green); background:var(--tint); }
.nat-addon__name { flex:1; font-weight:600; display:flex; flex-direction:column; }
.nat-addon__name small { color:var(--muted); font-weight:400; font-size:.8rem; }
.nat-addon b { color:var(--green); white-space:nowrap; }

/* ==========================================================================
   BOX BUILDER
   ========================================================================== */
.nat-builder-head h1 { color:var(--green); font-weight:800; font-size:2.4rem; margin:1.5rem 0 .3rem; }
.nat-builder-head p { color:var(--muted); margin:0 0 1.5rem; }
.nat-stepper-bar { display:flex; align-items:center; gap:.5rem; margin:0 0 2rem; flex-wrap:wrap; }
.nat-step { display:flex; align-items:center; gap:.5rem; color:var(--muted); font-weight:600; font-size:.92rem; }
.nat-step__num { width:30px; height:30px; border-radius:50%; border:2px solid #d6e0db; display:flex; align-items:center; justify-content:center; font-size:.85rem; background:#fff; }
.nat-step.is-active { color:var(--green); }
.nat-step.is-active .nat-step__num,.nat-step.is-done .nat-step__num { background:var(--green); border-color:var(--green); color:#fff; }
/* Completed step: solid green bullet (no half-green outline), green label + connector. */
.nat-step.is-done { color:var(--green); }
.nat-step.is-done .nat-step__num { background:var(--green) !important; border-color:var(--green) !important; color:#fff !important; }
.nat-step.is-done + .nat-step__line { background:var(--green); }
.nat-step__line { flex:1; min-width:24px; height:2px; background:#e3eae6; }
.nat-builder { display:grid; grid-template-columns:1fr 330px; gap:1.6rem; align-items:start; }
.nat-search { position:relative; margin-bottom:1rem; }
/* Search icon lives in the input background (left), 8px before the text. It hides
   as soon as the field has text (:placeholder-shown flips false). !important +
   wrapper specificity so theme/Elementor input rules can't reset the left padding. */
.nat .nat-search input.nat-search-input { width:100%; border:1px solid var(--line); border-radius:12px; padding:.85rem 1rem .85rem 2.75rem !important; font-size:.95rem; background:#fff url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9.16667 15.8333C12.8486 15.8333 15.8333 12.8486 15.8333 9.16667C15.8333 5.48477 12.8486 2.5 9.16667 2.5C5.48477 2.5 2.5 5.48477 2.5 9.16667C2.5 12.8486 5.48477 15.8333 9.16667 15.8333Z' stroke='%23374151' stroke-width='1.66667' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M17.4999 17.5L13.8749 13.875' stroke='%23374151' stroke-width='1.66667' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat left 1rem center !important; background-size:20px 20px !important; }
.nat .nat-search input.nat-search-input:not(:placeholder-shown) { background-image:none !important; padding-left:1rem !important; }
.nat-builder__tabs { display:flex; gap:.5rem; flex-wrap:wrap; margin-bottom:1.2rem; }
.nat .nat-tab { border:1.5px solid var(--green) !important; background:#fff !important; color:var(--green) !important; border-radius:999px !important; padding:.5rem 1.1rem !important; cursor:pointer; font-weight:600; font-size:.85rem; }
.nat .nat-tab.is-active { background:var(--green) !important; color:#fff !important; border-color:var(--green) !important; }
.nat-builder__panel { display:none; }
.nat-builder__panel.is-active { display:block; }
.nat-prod-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; }
.nat-prod { border:1px solid var(--line); border-radius:16px; padding:1rem; text-align:center; background:#fff; display:flex; flex-direction:column; align-items:center; gap:.25rem; }
.nat-prod.is-hidden { display:none; }
.nat-prod__img { width:64px; height:64px; border-radius:50%; background:#F3F6F4 center/contain no-repeat; display:flex; align-items:center; justify-content:center; font-size:1.8rem; margin-bottom:.3rem; }
.nat-prod__name { font-weight:700; font-size:.95rem; }
.nat-prod__price { color:#1b4332; font-weight:700; }
.nat-prod__unit { color:var(--muted); font-size:.78rem; margin-bottom:.5rem; }
/* Quantity stepper: clean outlined box with plain +/- (no filled circles) and a
   centered number. The .nat .nat-stepper .nat-qty rule resets the PDP's
   ".nat .nat-qty" box (line ~480) that was leaking in and deforming the control. */
.nat-stepper { display:flex; align-items:center; justify-content:space-between; width:100%; border:1.5px solid var(--line); border-radius:14px; padding:.35rem .5rem; margin-top:auto; }
.nat-stepper button { flex:none; min-width:34px; height:34px; padding:0; border:0 !important; background:none !important; color:#2D6A4F !important; font-size:1.5rem; font-weight:500; line-height:1; cursor:pointer; box-shadow:none !important; }
.nat-stepper button:hover, .nat-stepper button:focus, .nat-stepper button:active { background:none !important; color:#2D6A4F !important; box-shadow:none !important; }
.nat .nat-stepper .nat-qty { display:inline-flex; align-items:center; justify-content:center; border:0; border-radius:0; padding:0; height:auto; background:none; min-width:1.4rem; font-weight:700; font-size:1rem; color:var(--ink); }
.nat-yourbox { position:sticky; top:1rem; border:1px solid var(--line); border-radius:18px; padding:1.3rem; background:#fff; box-shadow:0 8px 24px rgba(0,0,0,.04); }
.nat-yourbox h3 { color:var(--green); margin:0 0 1rem; font-size:1.25rem; }
.nat-builder__list { list-style:none; margin:0 0 1rem; padding:0; max-height:280px; overflow:auto; }
.nat-builder__list li { display:flex; justify-content:space-between; gap:.5rem; padding:.45rem 0; border-bottom:1px solid #f0f3f1; font-size:.88rem; }
.nat-builder__list:empty::after { content:"Tu caja está vacía"; color:var(--muted); font-size:.85rem; }
.nat-yourbox__sub { display:flex; justify-content:space-between; align-items:baseline; font-size:1.05rem; padding-top:.6rem; border-top:1px solid var(--line); }
.nat-yourbox__sub b { color:var(--green); font-size:1.4rem; }
.nat-builder__min { font-size:.84rem; font-weight:700; padding:.55rem .8rem; border-radius:10px; margin:.9rem 0; text-align:center; }
.nat-builder__min.is-ok { background:var(--tint); color:var(--green); }
.nat-builder__min.is-warn { background:#fff1f0; color:var(--coral); }
.nat-toggle { display:flex; flex-direction:column; gap:.5rem; margin-bottom:1rem; }
.nat-toggle__opt { border:2px solid var(--line); border-radius:12px; padding:.6rem .8rem; cursor:pointer; font-size:.9rem; font-weight:600; display:flex; align-items:center; gap:.4rem; }
.nat-toggle__opt.is-selected { border-color:var(--green); background:var(--tint); color:var(--green); }
.nat-builder__add { width:100%; justify-content:center; background:var(--green) !important; color:#fff !important; border:0 !important; border-radius:999px !important; padding:.85rem 1.4rem !important; font-weight:700 !important; }

/* ---------- responsive / mobile ---------- */
@media (max-width:900px){
	.nat-grid,.nat-prod-grid { grid-template-columns:repeat(2,1fr); }
	.nat-builder { grid-template-columns:1fr; }
	.nat-gift__title { font-size:2.2rem; }
}
@media (max-width:560px){
	.nat-grid,.nat-prod-grid { grid-template-columns:1fr; }
	.nat-hero { padding-top:2.5rem; }
	.nat-hero__title { font-size:clamp(2.2rem,13vw,3.4rem); }
	.nat-hero__eyebrow { font-size:1rem; }
	.nat-box-card__media { height:200px; }
	.nat-box-card__title { font-size:1.4rem; }
	.nat-box-card__from { font-size:1.3rem; }
}

/* Deals */
.nat-deals { background:#1B4332; color:#fff; border-radius:24px; text-align:center; padding:3rem 1.5rem; margin:1.5rem 0 2rem; }
.nat-deals__eyebrow { display:inline-block; background:var(--coral); color:#fff; font-size:.72rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; padding:.3rem .8rem; border-radius:999px; }
.nat-deals__title { font-size:clamp(2.2rem,6vw,4rem); font-weight:800; margin:.8rem 0; }
.nat-deals__sub { max-width:520px; margin:0 auto 1.4rem; opacity:.9; }
.nat-deals__h2 { margin:2rem 0 1.2rem; font-size:1.6rem; font-weight:800; color:var(--ink); }
.nat-deals__promo { display:flex; align-items:center; gap:1rem; flex-wrap:wrap; background:var(--card); border:1px solid var(--line); border-radius:18px; padding:1.3rem 1.5rem; margin:1.8rem 0; }
.nat-deals__promo-ic { font-size:1.8rem; }
.nat-deals__promo strong { display:block; font-size:1.05rem; color:var(--ink); }
.nat-deals__promo span { color:var(--muted); font-size:.9rem; }
.nat-deals__promo-form { display:flex; gap:.5rem; margin-left:auto; flex-wrap:wrap; }
.nat-deals__promo-form input { border:1.5px solid var(--line); border-radius:999px; padding:.6rem 1rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase; min-width:150px; }
.nat-countdown { font-size:1.8rem; font-weight:800; letter-spacing:.04em; margin:0 0 1.4rem; }
.nat-countdown span { background:rgba(255,255,255,.12); padding:.2rem .5rem; border-radius:8px; }

/* Auth */
.nat-auth { max-width:460px; margin:2rem auto; border:1px solid var(--line); border-radius:18px; padding:1.6rem; box-shadow:0 12px 30px rgba(0,0,0,.06); }
.nat-auth__tabs { display:flex; gap:1.5rem; border-bottom:1px solid var(--line); margin-bottom:1.2rem; }
.nat-auth__tabs button { background:none; border:0; padding:.6rem 0; font-weight:700; color:var(--muted); cursor:pointer; border-bottom:2px solid transparent; }
.nat-auth__tabs button.is-active { color:var(--green); border-color:var(--green); }
.nat-auth__form { display:flex; flex-direction:column; gap:.8rem; }
.nat-auth__form label { display:flex; flex-direction:column; gap:.3rem; font-size:.85rem; font-weight:600; color:var(--ink); }
.nat-auth__form input { border:1px solid var(--line); border-radius:10px; padding:.7rem .9rem; font-size:.95rem; }
.nat-auth__row { display:flex; gap:.8rem; } .nat-auth__row label { flex:1; }
.nat-auth__msg { margin:0; font-size:.85rem; color:var(--coral); min-height:1em; }

/* Account dashboard */
.nat-acct { display:grid; grid-template-columns:240px 1fr; gap:1.5rem; margin:1.5rem 0; }
.nat-acct__side { background:linear-gradient(180deg,#235744,#1B4332); color:#fff; border-radius:18px; padding:1.5rem 1rem; text-align:center; }
.nat-acct__avatar { width:72px; height:72px; border-radius:50%; background:rgba(255,255,255,.15); display:flex; align-items:center; justify-content:center; font-size:2rem; margin:0 auto .6rem; }
.nat-acct__name { font-weight:700; margin-bottom:1rem; }
.nat-acct__nav { display:flex; flex-direction:column; gap:.15rem; text-align:left; margin-top:.3rem; }
.nat-acct__navlink { position:relative; display:flex; align-items:center; gap:.7rem; color:rgba(255,255,255,.85)!important; text-decoration:none!important; padding:.62rem .8rem; border-radius:10px; font-weight:600; font-size:.92rem; }
.nat-acct__navlink:hover { background:rgba(255,255,255,.08); color:#fff!important; }
.nat-acct__navlink.is-active { background:rgba(255,255,255,.16); color:#fff!important; }
.nat-acct__navlink.is-active::before { content:""; position:absolute; left:-1rem; top:6px; bottom:6px; width:4px; border-radius:0 4px 4px 0; background:var(--coral); }
.nat-acct__navic { width:19px; height:19px; flex:0 0 auto; display:inline-flex; }
.nat-acct__navic svg { width:19px!important; height:19px!important; display:block; }
.nat-acct__logout { margin-top:1.2rem; border-top:1px solid rgba(255,255,255,.14); padding-top:.9rem; border-radius:0; }
.nat-acct__main { min-height:300px; }
.nat-acct__h1 { color:var(--green); font-weight:800; font-size:1.9rem; margin:.2rem 0 1.3rem; }
.nat-acct__h2 { color:var(--ink); font-weight:800; font-size:1.15rem; margin:2rem 0 .9rem; }
.nat-acct__cards { display:grid; grid-template-columns:1fr 1fr; gap:1.2rem; }
.nat-acct__card { display:flex; align-items:center; gap:1rem; border:1px solid var(--line); border-radius:18px; padding:1.4rem 1.5rem; text-decoration:none!important; color:var(--ink); transition:box-shadow .15s,transform .15s; }
.nat-acct__card:hover { box-shadow:0 12px 30px rgba(16,40,28,.07); transform:translateY(-2px); }
.nat-acct__cardic { width:60px; height:60px; flex:0 0 auto; border-radius:50%; background:var(--tint); color:var(--green); display:flex; align-items:center; justify-content:center; }
.nat-acct__cardic svg { width:28px!important; height:28px!important; display:block; }
.nat-acct__cardbody { display:flex; flex-direction:column; }
.nat-acct__card b { font-size:2.1rem; color:var(--ink); font-weight:800; line-height:1; }
.nat-acct__card .nat-acct__cardbody span { color:var(--muted); font-size:.9rem; font-weight:600; margin-top:.1rem; }
.nat-acct__card em { color:var(--green); font-weight:700; font-style:normal; font-size:.85rem; margin-top:.5rem; }
.nat-acct__quick { display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; }
.nat-acct__quicklink { display:flex; flex-direction:column; gap:.7rem; background:var(--card); border:1px solid var(--line); border-radius:16px; padding:1.3rem 1.2rem; text-decoration:none!important; color:var(--ink); transition:background .15s,box-shadow .15s; }
.nat-acct__quicklink:hover { background:var(--tint); box-shadow:0 8px 22px rgba(16,40,28,.06); }
.nat-acct__quickic { width:26px; height:26px; color:var(--green); }
.nat-acct__quickic svg { width:26px!important; height:26px!important; display:block; }
.nat-acct__quicklink b { font-weight:800; font-size:1rem; }
/* Borderless orders table: no outer frame, no vertical separators, only a thin
   horizontal divider between rows. !important + transparent bg beat theme table styles. */
.nat-acct__table { width:100%; border-collapse:collapse; border:0 !important; background:transparent !important; }
.nat-acct__table th { text-align:left; font-family:Inter,system-ui,-apple-system,sans-serif; font-weight:700; font-size:16px; color:#000; text-transform:none; border:0 !important; border-bottom:1px solid var(--line) !important; padding:.6rem; background:transparent !important; }
.nat-acct__table td { padding:.8rem .6rem; border:0 !important; border-bottom:1px solid var(--line) !important; background:transparent !important; }
.nat-acct__table tbody tr:last-child td { border-bottom:0 !important; }
/* Data cells: My orders # (1), Date (2), Total (4). */
.nat-acct__table td:nth-child(1), .nat-acct__table td:nth-child(2), .nat-acct__table td:nth-child(4) { font-family:Inter,system-ui,-apple-system,sans-serif; font-weight:500; font-size:16px; color:#374151; }
/* Status: only typography changes; keep its badge colours. */
.nat-acct__table .nat-badge-status { font-family:Inter,system-ui,-apple-system,sans-serif; font-weight:500; font-size:16px; }
.nat-acct__table a { color:#2D6A4F !important; font-weight:600; text-decoration:none; }
.nat-acct__table a:hover { color:#1B4332 !important; }
.nat-badge-status { background:var(--tint); color:var(--green); border-radius:999px; padding:.2rem .7rem; font-size:.8rem; font-weight:600; }
/* Per-status colours (green=delivered, blue=shipping, grey=processing, red=cancelled/failed). */
.nat-badge--completed { background:#D8F3DC; color:#2D6A4F; }
.nat-badge--processing, .nat-badge--pending, .nat-badge--on-hold { background:#eef0f2; color:#4b5563; }
.nat-badge--packed, .nat-badge--out-for-delivery, .nat-badge--shipped { background:#e8f0fb; color:#2f4b8f; }
.nat-badge--cancelled, .nat-badge--failed, .nat-badge--refunded, .nat-badge--delivery-failed { background:#fdeaea; color:#d92d20; }
/* 5 horizontal sections, each stacking its content vertically. */
.nat-sub-card { display:flex; flex-wrap:wrap; align-items:stretch; gap:1.25rem; border:1px solid var(--line); border-radius:18px; padding:1rem 1.2rem; margin-bottom:1rem; box-shadow:0 4px 16px rgba(16,40,28,.04); }
/* 1 — image */
.nat-sub-card__img { width:92px; height:78px; flex:none; align-self:center; border-radius:12px; background:var(--card) center/cover no-repeat; display:flex; align-items:center; justify-content:center; font-size:1.9rem; }
/* 2 — title + frequency + next delivery (chip pinned to the bottom of the column) */
.nat-sub-card__info { display:flex; flex-direction:column; align-items:flex-start; gap:.25rem; flex:1; min-width:170px; }
.nat-sub-card h3 { margin:0; color:var(--ink); font-size:1.15rem; font-weight:800; }
.nat-sub-card__info > span { color:var(--muted); font-size:.85rem; }
.nat-sub-card__info .nat-sub-card__chip { margin-top:auto; }
/* 3 — valid until: same bottom line as the next-delivery chip (parallel) */
.nat-sub-card > .nat-sub-card__chip { align-self:flex-end; }
/* 3 & 4 — date chips (icon box + label + value) */
.nat-sub-card__chip { display:flex; align-items:center; gap:.6rem; background:#f6f8f7; border-radius:12px; padding:.5rem .85rem; flex:none; }
.nat-sub-card__chipic { width:36px; height:36px; flex:none; border-radius:10px; background:#fff; display:inline-flex; align-items:center; justify-content:center; color:var(--green); }
.nat-sub-card__chipic svg { width:18px; height:18px; }
.nat-sub-card__chiptxt { display:flex; flex-direction:column; line-height:1.25; }
.nat-sub-card__chiptxt small { color:var(--muted); font-size:.72rem; }
.nat-sub-card__chiptxt b { color:var(--ink); font-size:.95rem; }
/* 5 — pause / resume (+ edit when paused) */
.nat-sub-card__actions { display:flex; flex-direction:column; justify-content:center; gap:.5rem; align-items:center; flex:none; }
.nat-sub-card__toggle { display:inline-flex; align-items:center; justify-content:center; gap:.4rem; }
.nat-sub-card__toggle svg { width:15px; height:15px; }
/* 6 — status + cancel */
.nat-sub-card__end { display:flex; flex-direction:column; justify-content:center; align-items:center; gap:.5rem; flex:none; }
/* Edit, Pause/Resume and the status share the exact same box (the status stays a span). */
.nat-sub-card__actions .nat-btn, .nat-sub-card__status { width:140px; height:46px; padding:0 18px !important; display:inline-flex; align-items:center; justify-content:center; box-sizing:border-box; font-size:.9rem; }
.nat-sub-card__status { font-weight:700; border-radius:999px; }
.nat-sub--active { background:#eaf3ee; color:var(--green); } .nat-sub--paused { background:#fff4e5; color:#b26a00; } .nat-sub--cancelled { background:#fde8e8; color:#b42318; }
.nat-sub-edit { flex-basis:100%; }
.nat-btn--outline { background:#fff !important; color:var(--green) !important; border:1.5px solid var(--green) !important; }
.nat-link-danger { background:none; border:0; color:var(--coral); font-weight:600; cursor:pointer; }
.nat-acct__form { display:flex; flex-direction:column; gap:.8rem; max-width:480px; } .nat-acct__form label { display:flex; flex-direction:column; gap:.3rem; font-weight:600; } .nat-acct__form input { border:1px solid var(--line); border-radius:10px; padding:.6rem .8rem; }
.nat-acct__address { border:1px solid var(--line); border-radius:14px; padding:1.2rem; max-width:420px; line-height:1.6; }
.nat-acct__form { max-width:560px; }
.nat-acct__form-row { display:grid; grid-template-columns:1fr 1fr; gap:.8rem; }
.nat-acct__form input:not([disabled]) { background:#fff; }
.nat-acct__back { color:var(--green); font-weight:600; text-decoration:none; }
.nat-acct__back:hover { color:var(--green-d); }
.nat-notice--ok { background:var(--tint); color:var(--green); border-radius:10px; padding:.7rem 1rem; font-weight:700; margin:0 0 1rem; max-width:560px; }
.nat-notice--err { background:#fdeaea; color:#b42318; border-radius:10px; padding:.7rem 1rem; font-weight:600; margin:0 0 1rem; }
.nat-notice--err ul { margin:0; padding-left:1.1rem; }

/* Account details — full-width form, 3-up name row, password fields with eye toggle. */
.nat-acct-details { max-width:none !important; }
.nat-acct-details .nat-acct__form-row--3 { grid-template-columns:1fr 1fr 1fr; }
/* Unify every input's border (the theme darkens some — email/zip/password). */
.nat-acct-details input { border:1px solid var(--line) !important; background:#fff !important; border-radius:10px !important; }
.nat-acct-details input:focus { border-color:var(--green) !important; outline:none !important; box-shadow:none !important; }
.nat-acct__divider { border:0; border-top:1px solid var(--line); margin:1.6rem 0 1.2rem; }
.nat-acct__h2--tight { margin-top:0; }
.nat-pass { position:relative; display:flex; }
.nat-pass input { width:100%; padding-right:2.8rem !important; }
/* Eye toggle: transparent, no border (the theme paints it pink) — forced. */
.nat-pass__toggle { position:absolute; right:.4rem; top:50%; transform:translateY(-50%); width:34px; height:34px; display:inline-flex; align-items:center; justify-content:center; background:none !important; border:0 !important; box-shadow:none !important; color:#374151 !important; cursor:pointer; }
.nat-pass__toggle svg { width:20px; height:20px; stroke:#374151 !important; }
.nat-pass__toggle:hover, .nat-pass__toggle:focus { background:none !important; box-shadow:none !important; color:rgba(55,71,81,.7) !important; }
.nat-pass__toggle:hover svg, .nat-pass__toggle:focus svg { stroke:rgba(55,71,81,.7) !important; }
.nat-acct__form-foot { display:flex; justify-content:flex-end; margin-top:.4rem; }
@media (max-width:680px){ .nat-acct-details .nat-acct__form-row--3 { grid-template-columns:1fr; } }
.nat-order-meta { color:var(--muted); margin:-.6rem 0 1.2rem; }
.nat-order-timeline { display:flex; gap:0; margin:0 0 1.6rem; max-width:640px; }
.nat-order-step { flex:1; text-align:center; position:relative; font-size:.8rem; color:var(--muted); font-weight:600; }
.nat-order-step .nat-order-dot { display:block; width:16px; height:16px; border-radius:50%; background:#dde4e0; margin:0 auto .4rem; position:relative; z-index:1; }
.nat-order-step::before { content:""; position:absolute; top:7px; left:-50%; width:100%; height:2px; background:#dde4e0; }
.nat-order-step:first-child::before { display:none; }
.nat-order-step.is-done { color:var(--green); }
.nat-order-step.is-done .nat-order-dot { background:var(--green); }
.nat-order-step.is-done::before { background:var(--green); }
.nat-order-items { margin-bottom:1rem; }
.nat-order-total { display:flex; justify-content:space-between; align-items:baseline; max-width:640px; padding-top:.6rem; border-top:2px solid var(--line); }
.nat-order-total b { color:var(--green); font-size:1.4rem; font-weight:800; }
.nat-cards-list { display:flex; flex-direction:column; gap:.7rem; max-width:480px; }
.nat-card-row { display:flex; align-items:center; gap:.8rem; border:1px solid var(--line); border-radius:14px; padding:1rem 1.2rem; font-weight:700; }
.nat-card-ic { width:34px; height:34px; color:var(--green); } .nat-card-ic svg { width:34px!important; height:34px!important; }
.nat-acct__empty { text-align:center; border:1px dashed var(--line); border-radius:16px; padding:2.2rem 1.5rem; max-width:480px; color:var(--muted); }
.nat-acct__empty-ic { display:inline-flex; width:44px; height:44px; color:var(--green); opacity:.6; } .nat-acct__empty-ic svg { width:44px!important; height:44px!important; }
.nat-acct__empty p { margin:.6rem 0 0; }
@media (max-width:560px){ .nat-acct__form-row { grid-template-columns:1fr; } }
@media (max-width:782px){ .nat-acct { grid-template-columns:1fr; } .nat-acct__cards { grid-template-columns:1fr; } .nat-acct__quick { grid-template-columns:1fr 1fr; } .nat-sub-card__info { flex-basis:100%; } .nat-sub-card__end { margin-left:auto; } }

/* Builder 4-step */
.nat-base-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; margin-bottom:1.5rem; }
.nat-base-card { position:relative; border:2px solid var(--line); border-radius:16px; padding:1.8rem 1.1rem 1.4rem; text-align:center; cursor:pointer; display:flex; flex-direction:column; gap:.35rem; align-items:center; }
.nat-base-card input { position:absolute; opacity:0; width:0; height:0; }
.nat-base-card.is-selected { border-color:var(--green); background:var(--tint); }
/* "select" radio, top-left corner */
.nat-base-card__radio { position:absolute; top:14px; left:14px; width:20px; height:20px; border:2px solid #cfdbd5; border-radius:50%; background:#fff; display:inline-flex; align-items:center; justify-content:center; transition:border-color .15s; }
.nat-base-card input:checked ~ .nat-base-card__radio { border-color:var(--green); }
.nat-base-card input:checked ~ .nat-base-card__radio::after { content:""; width:10px; height:10px; border-radius:50%; background:var(--green); }
.nat-base-card__ic { font-size:2.6rem; line-height:1; color:var(--green); display:inline-flex; }
.nat-base-card__ic svg { width:1em; height:1em; }
.nat-base-card__ic img { width:2.6rem; height:auto; }
.nat-base-card__title { color:var(--ink); font-weight:800; font-size:1.05rem; }
.nat-base-card__desc { color:var(--muted); font-size:.82rem; line-height:1.4; margin-top:.1rem; max-width:24ch; }
/* responsive: 3 → 2 → 1 columns */
@media (max-width:900px){ .nat-base-grid { grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .nat-base-grid { grid-template-columns:1fr; } .nat-stepper-bar { gap:.35rem; } .nat-step { font-size:.8rem; } .nat-step__label { display:none; } .nat-step.is-active .nat-step__label { display:inline; } .nat-step__line { min-width:12px; } }
.nat-builder__nav { display:flex; justify-content:space-between; align-items:center; margin-top:1.5rem; gap:1rem; }
/* Step 1 (Choose your base): hide the "Your box" summary and let the main column
   span the full width (no empty grid track). It returns from step 2 on. */
.nat-builder[data-step="1"] { grid-template-columns:1fr; }
.nat-builder[data-step="1"] .nat-yourbox { display:none; }
.nat-review { border:1px solid var(--line); border-radius:14px; padding:1.2rem 1.4rem; margin-bottom:1.2rem; }
.nat-review__row { display:flex; justify-content:space-between; padding:.45rem 0; border-bottom:1px dashed #eef1ef; }
.nat-review__save { color:var(--green); font-weight:600; }
.nat-review__total { display:flex; justify-content:space-between; align-items:baseline; padding-top:.8rem; font-size:1.05rem; }
.nat-review__total b { color:var(--green); font-size:1.6rem; }
.nat-review-note { font-size:.85rem; font-weight:700; padding:.6rem .9rem; border-radius:10px; margin:0 0 1rem; text-align:center; }
.nat-review-note.is-ok { background:var(--tint); color:var(--green); }
.nat-review-note.is-warn { background:#fff1f0; color:var(--coral); }
.nat-review-note:empty { display:none; }

/* ========================================================================
   Builder redesign — add-on cards, rich Your box, review table, Order Summary
   ======================================================================== */
.nat-btn--sm { padding:.5rem 1rem !important; font-size:.85rem !important; }
/* Edit Box (Review view): pill outline, Inter Bold 15px, green. */
.nat .nat-edit { border-radius:200px !important; font-family:Inter,system-ui,-apple-system,sans-serif; font-weight:700 !important; font-size:15px !important; color:#2D6A4F !important; }
.nat-builder__nav-r { display:flex; align-items:center; gap:1rem; }
.nat-skip { background:none; border:0; color:var(--muted); font-weight:600; font-size:.9rem; cursor:pointer; text-decoration:underline; }
.nat-skip:hover { color:var(--green); }

/* --- Step 3: add-on cards (image/desc/price/toggle from admin) --- */
.nat-addons { display:flex; flex-direction:column; gap:1rem; margin:1.2rem 0; }
.nat-addon-card { display:grid; grid-template-columns:1fr 118px; align-items:stretch; gap:0; border:0; border-radius:18px; overflow:hidden; background:#FAFAFA; cursor:pointer; transition:box-shadow .15s, background-color .15s; min-height:120px; }
.nat-addon-card:hover { box-shadow:0 10px 26px rgba(0,0,0,.06); background:var(--tint); }
.nat-addon-card.is-selected { background:var(--tint); }
.nat-addon-card__info { padding:1.1rem 1.2rem; display:flex; flex-direction:column; gap:.35rem; }
.nat-addon-card__name { font-family:Inter,system-ui,-apple-system,sans-serif; font-size:16px; font-weight:600; color:#374151; }
.nat-addon-card__desc { font-family:Inter,system-ui,-apple-system,sans-serif; color:rgba(55,71,81,.8); font-size:14px; line-height:1.45; font-weight:500; }
.nat-addon-card__foot { margin-top:auto; display:flex; align-items:center; gap:.8rem; padding-top:.6rem; }
.nat-addon-card__price { font-family:Inter,system-ui,-apple-system,sans-serif; font-weight:600; font-size:16px; color:#5E6673; }
.nat-addon-card.is-selected .nat-addon-card__price { color:#2D6A4F; }
.nat-addon-card__media { background:transparent right center/cover no-repeat; display:flex; align-items:center; justify-content:center; }
.nat-addon-card__ph { font-size:2.4rem; opacity:.5; }

/* toggle switch */
.nat-switch { position:relative; display:inline-flex; align-items:center; }
.nat-switch input { position:absolute; opacity:0; width:0; height:0; }
.nat-switch__track { width:46px; height:26px; border-radius:999px; background:#cfd8d3; transition:background .18s; display:inline-block; position:relative; }
.nat-switch__dot { position:absolute; top:3px; left:3px; width:20px; height:20px; border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.25); transition:transform .18s; }
/* Check mark drawn inside the white knob, shown only when the switch is on. */
.nat-switch__dot::after { content:""; position:absolute; left:8px; top:5px; width:4px; height:8px; border:solid var(--green); border-width:0 2px 2px 0; transform:rotate(45deg); opacity:0; transition:opacity .15s; }
.nat-switch input:checked + .nat-switch__track { background:var(--green); }
.nat-switch input:checked + .nat-switch__track .nat-switch__dot { transform:translateX(20px); }
.nat-switch input:checked + .nat-switch__track .nat-switch__dot::after { opacity:1; }

/* --- "Your box" rich panel (steps 1–3) --- */
.nat-yourbox__head { display:flex; align-items:baseline; justify-content:space-between; gap:.5rem; margin:0 0 .2rem; }
.nat-yourbox__head h3 { margin:0; }
.nat-base-label { font-size:.78rem; font-weight:700; color:var(--green); background:var(--tint); padding:.2rem .6rem; border-radius:999px; white-space:nowrap; }
.nat-yourbox__count { font-size:.8rem; color:var(--muted); font-weight:600; margin-bottom:.6rem; }
.nat-builder__list { list-style:none; margin:0 0 .8rem; padding:0; max-height:280px; overflow-y:auto; }
.nat-yourbox__item { display:grid !important; grid-template-columns:32px 1fr auto auto; align-items:center; gap:.55rem; padding:.4rem 0 !important; border-bottom:1px dashed #eef1ef !important; }
.nat-thumb { width:32px; height:32px; border-radius:8px; background:var(--card) center/cover no-repeat; display:inline-flex; align-items:center; justify-content:center; font-size:1rem; }
.nat-thumb--ph { background:var(--tint); }
.nat-yourbox__item-name { font-size:.85rem; font-weight:600; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.nat-yourbox__item-qty { font-size:.8rem; color:var(--muted); }
.nat-yourbox__item-price { font-size:.85rem; font-weight:700; color:var(--ink); }
.nat-yourbox__rows { padding-top:.4rem; }
.nat-yourbox__row { display:flex; justify-content:space-between; font-size:.9rem; color:#5b6470; padding:.25rem 0; }
.nat-yourbox__row b { color:var(--ink); }
.nat-yourbox__total { display:flex; justify-content:space-between; align-items:baseline; padding-top:.6rem; margin-top:.4rem; border-top:1px solid var(--line); }
.nat-yourbox__total span { font-weight:700; }
.nat-yourbox__total-val { color:var(--green); font-size:1.5rem; font-weight:800; }

/* --- Step 4: review (two columns) --- */
.nat-builder.is-review { grid-template-columns:1fr; }
.nat-builder.is-review .nat-yourbox { display:none; }
.nat-review2 { display:grid; grid-template-columns:1fr 360px; gap:1.6rem; align-items:start; }
.nat-review2__head { display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-bottom:1rem; }
.nat-review2__head .nat-h2 { margin:0; }
.nat-review-tbl { border:1px solid var(--line); border-radius:16px; overflow:hidden; }
.nat-review-tbl__head { display:grid; grid-template-columns:1fr 130px 90px; gap:1rem; padding:.8rem 1.2rem; background:var(--card); font-size:.78rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--muted); }
.nat-review-tbl__head span:nth-child(2) { text-align:center; }
.nat-review-tbl__head span:last-child { text-align:right; }
.nat-review-tbl__row { display:grid; grid-template-columns:1fr 130px 90px; gap:1rem; align-items:center; padding:.85rem 1.2rem; border-top:1px solid #f0f3f1; }
.nat-review-tbl__item { display:flex; align-items:center; gap:.7rem; font-weight:600; color:var(--ink); }
.nat-review-tbl__item .nat-thumb { width:40px; height:40px; border-radius:10px; }
/* Same clean look as the Select-products stepper: outlined box, plain green +/-. */
.nat-review-tbl__qty { display:inline-flex; align-items:center; justify-content:center; gap:.3rem; border:1.5px solid var(--line); border-radius:12px; padding:.2rem .45rem; justify-self:center; }
.nat-review-tbl__qty button { flex:none; min-width:26px; height:26px; padding:0; border:0 !important; background:none !important; color:#2D6A4F !important; border-radius:0; cursor:pointer; font-size:1.25rem; font-weight:500; line-height:1; box-shadow:none !important; }
.nat-review-tbl__qty button:hover, .nat-review-tbl__qty button:focus, .nat-review-tbl__qty button:active { background:none !important; color:#2D6A4F !important; box-shadow:none !important; }
.nat-review-tbl__qty b { min-width:28px; text-align:center; font-weight:700; color:var(--ink); }
.nat-review-tbl__total { text-align:right; font-weight:700; color:var(--ink); }
.nat-review-tbl__empty { padding:1.5rem 1.2rem; color:var(--muted); text-align:center; }

/* Order Summary card */
.nat-summary { border:1px solid var(--line); border-radius:18px; padding:1.4rem; background:#fff; box-shadow:0 8px 24px rgba(0,0,0,.04); position:sticky; top:1rem; }
.nat-summary__title { margin:0 0 1rem; font-size:1.3rem; color:var(--ink); font-weight:800; }
.nat-summary__base { display:flex; justify-content:space-between; align-items:baseline; padding-bottom:.9rem; border-bottom:1px solid var(--line); margin-bottom:.9rem; font-size:.85rem; color:var(--muted); }
.nat-summary__base b { color:var(--ink); font-weight:700; }
.nat-summary__row { display:flex; justify-content:space-between; font-size:.92rem; color:#5b6470; padding:.3rem 0; }
.nat-summary__row b { color:var(--ink); }
.nat-summary__total { display:flex; justify-content:space-between; align-items:baseline; padding:.8rem 0 1rem; margin-top:.4rem; border-top:1px solid var(--line); }
.nat-summary__total span { font-weight:800; font-size:1.05rem; }
.nat-summary__total-val { color:var(--green); font-size:1.7rem; font-weight:800; }

/* modality option cards */
.nat-modal-opts { display:flex; flex-direction:column; gap:.7rem; margin-bottom:1rem; }
.nat-modal-opt { position:relative; display:grid; grid-template-columns:auto 1fr; column-gap:.6rem; align-items:center; align-content:start; height:100%; border:1.6px solid var(--line); border-radius:14px; padding:.85rem 1rem; cursor:pointer; }
.nat-modal-opt input { grid-row:1/3; width:18px; height:18px; accent-color:var(--green); }
.nat-modal-opt.is-selected { border-color:var(--green); background:var(--tint); }
.nat-modal-opt__top { display:flex; align-items:center; gap:.5rem; }
.nat-modal-opt__lbl { font-family:Inter,system-ui,-apple-system,sans-serif; font-weight:500; font-size:14px; color:rgba(55,71,81,.6); }
.nat-modal-opt b { grid-column:2; font-family:Inter,system-ui,-apple-system,sans-serif; font-size:28px; font-weight:700; color:#374151; }
/* Price turns green only when the card is selected or hovered. */
.nat-modal-opt.is-selected b, .nat-modal-opt:hover b { color:#2D6A4F; }
.nat-modal-opt small { grid-column:2; margin-top:.4rem; font-family:Inter,system-ui,-apple-system,sans-serif; font-weight:500; font-size:12px; color:rgba(55,71,81,.6); }
.nat-save-badge { position:absolute; top:-10px; right:12px; z-index:2; background:#2D6A4F; color:#ffffff; font-family:Inter,system-ui,-apple-system,sans-serif; font-size:12px; font-weight:500; letter-spacing:.03em; padding:8px 16px; border-radius:200px; font-style:normal; white-space:nowrap; }
.nat-builder__add { width:100%; }
.nat-guarantee { display:flex; gap:8px; align-items:flex-start; margin:.9rem 0 0; font-family:Inter,system-ui,-apple-system,sans-serif; font-weight:500; font-size:13px; color:#374151; text-align:center; justify-content:center; }
.nat-guarantee__ic { flex:none; width:20px; height:20px; color:var(--green); margin-top:.5px; }

@media (max-width:860px){ .nat-review2 { grid-template-columns:1fr; } .nat-addon-card { grid-template-columns:1fr 120px; } }

/* Single box (template-agnostic) */
.nat-single { display:grid; grid-template-columns:minmax(0,1.5fr) minmax(0,1fr); gap:2.5rem; max-width:1140px; margin:1.5rem auto 2.5rem; padding:0 20px; align-items:start; }
.nat-single__media { background:#F3F6F4; border-radius:24px; padding:2rem; display:flex; align-items:center; justify-content:center; min-height:300px; }
.nat-single__media img { max-width:100%; height:auto; }
.nat-single__title { font-family:Inter,system-ui,-apple-system,sans-serif; color:#374151; font-weight:700; font-size:48px; margin:0 0 .3rem; }
.nat-single__rating { color:#f5a623; font-size:1.1rem; margin-bottom:.6rem; }
.nat-single__rating span { color:#6b7280; font-size:.85rem; }
.nat-single__copy { color:#5b6470; line-height:1.6; margin:0 0 1rem; }
.nat-single__h4 { font-family:Inter,system-ui,-apple-system,sans-serif; font-size:24px; font-weight:600; color:#374151; margin:1.4rem 0 .8rem; }
.nat-single__modes { margin:1.3rem 0; }
.nat-single__buyrow { display:flex; align-items:center; gap:.8rem; flex-wrap:wrap; margin-top:.4rem; }
.nat-single__buyrow .quantity { display:inline-flex; }
.nat-single__buyrow .quantity input { width:64px; height:46px; border:1.5px solid var(--line); border-radius:999px; text-align:center; font-weight:700; }
.nat-single__buyrow .nat-btn { flex:1; min-width:160px; height:46px; }
.nat-single-buy .nat-addons { gap:.8rem; }
@media (max-width:860px){ .nat-single { grid-template-columns:1fr; } }

/* Auth (Sign in / Create account) — immersive hero like Figma */
.nat-auth-hero { background:#1B4332; min-height:74vh; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:4rem 1.25rem; }
.nat-auth-hero__title { color:#fff; font-weight:800; font-size:clamp(2.6rem,7vw,5.5rem); margin:0 0 .4rem; letter-spacing:-.02em; line-height:1; }
.nat-auth-hero__sub { color:rgba(255,255,255,.85); margin:0 0 2rem; font-size:1.05rem; }
.nat-auth { background:#fff; border-radius:18px; padding:1.8rem; width:100%; max-width:440px; box-shadow:0 24px 60px rgba(0,0,0,.28); text-align:left; }
/* Standalone [naturamia_login] card (no hero): centred, lighter shadow. */
.nat-auth-standalone { display:flex; justify-content:center; padding:1.5rem 1rem; }
.nat-auth-standalone .nat-auth { box-shadow:0 10px 30px rgba(16,40,28,.08); border:1px solid var(--line); }
/* Already-signed-in card: same footprint as the login card — message (2 lines)
   centred, full-width button below. */
.nat-auth--signedin { display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:1.3rem; min-height:20rem; }
.nat-auth__signedin { color:var(--ink); font-weight:700; font-size:1.25rem; line-height:1.45; margin:0; max-width:16ch; }
.nat-auth--signedin .nat-btn { width:100%; }
.nat-auth__tabs { display:flex; gap:.6rem; border-bottom:1px solid #e7eae8; margin-bottom:1.3rem; }
/* Equal-width tabs, square (no radius), no hover effect at all (theme tries to add a
   pink box and change the text colour). */
.nat-auth__tabs button { background:none !important; border:0 !important; border-radius:0 !important; box-shadow:none !important; border-bottom:2px solid transparent !important; padding:.5rem 0 .8rem; min-width:130px; text-align:left; font-weight:700; color:#8a93a0; cursor:pointer; font-size:.95rem; }
.nat-auth__tabs button:hover, .nat-auth__tabs button:focus { background:none !important; box-shadow:none !important; color:#8a93a0 !important; }
.nat-auth__tabs button.is-active, .nat-auth__tabs button.is-active:hover, .nat-auth__tabs button.is-active:focus { color:#2D6A4F !important; border-bottom-color:#2D6A4F !important; }
/* Both forms share one grid cell so the card height stays constant (= the taller
   register form); the hidden one keeps its space instead of collapsing. */
.nat-auth__forms { display:grid; }
.nat-auth__forms > .nat-auth__form { grid-area:1 / 1; align-self:start; }
.nat-auth__forms > .nat-auth__form[hidden] { display:block !important; visibility:hidden; pointer-events:none; }
/* Sign In extras: forgot-password link + "New to Naturamia? Create account". */
.nat-auth__forgot { align-self:flex-start; margin-top:-.3rem; color:var(--green); font-weight:700; font-size:.9rem; text-decoration:none; }
.nat-auth__forgot:hover { color:var(--green-d); }
.nat-auth__switch { text-align:center; color:var(--ink); font-size:.92rem; margin:.3rem 0 0; }
.nat-auth__switch-link { background:none !important; border:0 !important; box-shadow:none !important; padding:0; color:var(--green) !important; font-weight:700; font-size:.92rem; cursor:pointer; }
.nat-auth__switch-link:hover { color:var(--green-d) !important; }
.nat-auth__form { display:flex; flex-direction:column; gap:.9rem; }
.nat-auth__form > label { display:flex; flex-direction:column; gap:.35rem; font-weight:600; font-size:.85rem; color:#374151; }
.nat-auth__form input { border:1px solid #e7eae8; border-radius:10px; padding:.7rem .9rem; font-size:.95rem; }
.nat-auth__row { display:flex; gap:.8rem; }
.nat-auth__row label { flex:1; display:flex; flex-direction:column; gap:.35rem; font-weight:600; font-size:.85rem; }
.nat-auth__msg { margin:.2rem 0 0; color:#FD4239; font-size:.85rem; min-height:1em; }
.nat-auth .nat-btn { width:100%; margin-top:.3rem; }

/* ===================== Product (PDP) — faithful to Figma 381:3115 ===================== */
.nat-single__left { display:flex; flex-direction:column; }
/* gallery: vertical thumb strip + large main image */
.nat-gallery { display:flex; gap:14px; }
.nat-gallery__thumbs { display:flex; flex-direction:column; gap:12px; flex:none; }
.nat .nat-gallery__thumb { width:84px !important; height:84px !important; border-radius:6px !important; border:2px solid var(--line) !important; background-color:#F3F6F4 !important; background-size:cover !important; background-position:center !important; background-repeat:no-repeat !important; cursor:pointer; padding:0 !important; flex:none; box-shadow:none !important; }
.nat .nat-gallery__thumb.is-active { border-color:var(--green) !important; }
.nat-gallery__main { flex:1; background:#F3F6F4; border-radius:24px; padding:1.5rem; display:flex; align-items:center; justify-content:center; min-height:360px; }
.nat-gallery__main img { max-width:100%; height:auto; }
/* what's inside: round fruit thumbnails + dynamic qty badge */
.nat-inside { margin:1.8rem 0 0; }
.nat-inside__title { color:var(--ink); font-weight:800; font-size:1.15rem; margin:0 0 1rem; }
.nat-inside__grid { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:.5rem; }
.nat-inside__item { display:flex; flex-direction:column; align-items:center; gap:.5rem; text-align:center; }
.nat-inside__thumb { position:relative; width:64px; height:64px; border-radius:50%; background:#F3F6F4; display:flex; align-items:center; justify-content:center; }
.nat-inside__thumb img { width:54px; height:54px; object-fit:contain; }
.nat-inside__emoji { font-size:1.6rem; }
.nat-inside__qty { position:absolute; top:-4px; left:-4px; min-width:20px; height:20px; padding:0 5px; border-radius:999px; background:var(--green); color:#fff; font-size:.7rem; font-weight:700; font-style:normal; display:flex; align-items:center; justify-content:center; }
.nat-inside__name { font-size:.78rem; color:var(--muted); font-weight:600; line-height:1.2; }
.nat-inside__item.is-featured .nat-inside__name { color:var(--coral); }
.nat-inside__item.is-featured .nat-inside__qty { background:var(--coral); }
/* right column */
.nat-single__right { padding-top:.2rem; }
.nat-single__price-label { display:block; color:#374151; font-family:Inter,system-ui,-apple-system,sans-serif; font-weight:600; font-size:.9rem; margin:.2rem 0 .1rem; }
.nat-single__price { font-family:Inter,system-ui,-apple-system,sans-serif; color:#2D6A4F; font-weight:700; font-size:28px; margin:0 0 .8rem; }
.nat-single__rating { display:flex; align-items:center; gap:.4rem; margin:0 0 .7rem; }
/* Two-layer stars: grey base + gold overlay clipped to the rating (0–5). */
.nat-stars { --rating:0; position:relative; display:inline-block; font-size:1.05rem; line-height:1; white-space:nowrap; }
.nat-stars::before { content:"★★★★★"; color:#d9dee2; letter-spacing:2px; }
.nat-stars::after { content:"★★★★★"; color:#FFB400; letter-spacing:2px; position:absolute; left:0; top:0; width:calc(var(--rating) / 5 * 100%); overflow:hidden; white-space:nowrap; }
.nat-single__rval { color:#374151; font-weight:700; font-size:.9rem; }
.nat-single__rcount { color:var(--muted); font-size:.9rem; text-decoration:underline; }
.nat-single__hr { border:0; border-top:1px solid var(--line); margin:1.1rem 0; }
/* quantity stepper (− 1 +) — forced over Elementor global button/input styles */
.nat .nat-qty { display:inline-flex; align-items:center; gap:.1rem; border:1.5px solid var(--line); border-radius:999px; padding:.25rem; height:52px; flex:none; background:#fff; }
.nat .nat-qty__btn { width:40px !important; height:40px !important; min-width:0 !important; border-radius:50% !important; border:0 !important; background:transparent !important; color:var(--ink) !important; box-shadow:none !important; font-size:1.5rem !important; font-weight:600; line-height:1; padding:0 !important; cursor:pointer; display:inline-flex !important; align-items:center; justify-content:center; }
.nat .nat-qty__btn:hover { background:var(--tint) !important; }
.nat .nat-qty__input { width:46px !important; border:0 !important; background:transparent !important; box-shadow:none !important; text-align:center; font-weight:700; font-size:1.05rem; color:var(--ink); padding:0 !important; -moz-appearance:textfield; }
.nat .nat-qty__input::-webkit-outer-spin-button, .nat .nat-qty__input::-webkit-inner-spin-button { -webkit-appearance:none; margin:0; }
.nat-single__buyrow .nat-btn { flex:1; min-width:160px; height:52px; }
/* modality cards side-by-side (Figma) */
.nat-single__modes.nat-modal-opts { display:grid; grid-template-columns:1fr 1fr; gap:.8rem; align-items:stretch; }
@media (max-width:480px){ .nat-single__modes.nat-modal-opts { grid-template-columns:1fr; } }
/* reviews: WHAT CUSTOMERS SAY */
.nat-reviews { max-width:1140px; margin:2.5rem auto 1rem; padding:1.5rem 20px 0; }
.nat-reviews__title { text-align:center; font-size:3.6rem; font-weight:800; letter-spacing:.02em; color:transparent; -webkit-text-stroke:1.5px #c9d3cd; margin:0 0 2rem; }
.nat-reviews__grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.2rem; }
.nat-review { border:1px solid var(--line); border-radius:18px; padding:1.3rem; background:#fff; }
.nat-review__head { display:flex; align-items:center; gap:.6rem; margin-bottom:.6rem; }
.nat-review__avatar { width:40px; height:40px; border-radius:50%; background:var(--tint); color:var(--green); font-weight:800; display:flex; align-items:center; justify-content:center; flex:none; }
.nat-review__who { display:flex; flex-direction:column; flex:1; }
.nat-review__who b { color:var(--ink); font-size:.95rem; }
.nat-review__who small { color:var(--muted); font-size:.78rem; }
.nat-review__g { font-weight:800; color:#4285F4; font-size:1.15rem; flex:none; }
.nat-review__stars { color:var(--coral); margin-bottom:.4rem; letter-spacing:1px; }
.nat-review__txt { color:#5b6470; margin:0; line-height:1.5; }
@media (max-width:860px){ .nat-reviews__grid { grid-template-columns:1fr; } .nat-reviews__title { font-size:2.2rem; } .nat-inside__grid { grid-template-columns:repeat(4,minmax(0,1fr)); row-gap:1rem; } }

/* Subscription inline edit panel */
.nat-sub-edit { grid-column:1/-1; margin-top:.9rem; padding:1rem 1.1rem; border:1px solid var(--line); border-radius:14px; background:#fafcfb; }
.nat-sub-edit__row { display:flex; gap:1rem; flex-wrap:wrap; }
.nat-sub-edit__row label { display:flex; flex-direction:column; gap:.3rem; font-weight:600; font-size:.82rem; color:var(--ink); }
.nat-sub-edit__row select, .nat-sub-edit__row input { border:1px solid var(--line); border-radius:8px; padding:.5rem .6rem; }
.nat-sub-edit__items { margin-top:.9rem; }
.nat-sub-edit__items h4 { margin:0 0 .5rem; color:var(--green); font-size:.95rem; }
.nat-sub-item { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:.35rem 0; border-bottom:1px solid #eef3f0; }
.nat-sub-item span { font-size:.9rem; }
.nat-sub-item input { width:64px; border:1px solid var(--line); border-radius:8px; padding:.35rem; text-align:center; }
.nat-sub-edit__foot { display:flex; align-items:center; gap:1rem; margin-top:.9rem; }
.nat-link { background:none; border:0; color:var(--muted); cursor:pointer; text-decoration:underline; }

/* ===================== WooCommerce notices — on-brand (global) ===================== */
/* Hide WooCommerce's "added to cart" success bar — the custom toast replaces it.
   Only that notice carries a "View cart/basket" (.wc-forward) button. */
.woocommerce-message:has(a.wc-forward) { display:none !important; }
.woocommerce-notices-wrapper .woocommerce-message,
.woocommerce-notices-wrapper .woocommerce-info,
.woocommerce-notices-wrapper .woocommerce-error,
.woocommerce-message, .woocommerce-info, .woocommerce-error {
	font-family:Inter,system-ui,sans-serif; border:0 !important; border-radius:16px !important;
	padding:1.05rem 1.25rem 1.05rem 3.1rem !important; margin:0 0 1.5rem !important; position:relative;
	display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap;
	box-shadow:0 8px 24px rgba(16,40,28,.06) !important; list-style:none; font-size:.98rem; line-height:1.4;
}
.woocommerce-message { background:#EAF5EF !important; color:#1B4332 !important; }
.woocommerce-info    { background:#EAF2FB !important; color:#1f3a5f !important; }
.woocommerce-error   { background:#FDECEC !important; color:#7a2520 !important; }
/* left accent bar */
.woocommerce-message::after, .woocommerce-info::after, .woocommerce-error::after {
	content:""; position:absolute; left:0; top:0; bottom:0; width:5px; border-radius:16px 0 0 16px;
}
.woocommerce-message::after { background:#2D6A4F; }
.woocommerce-info::after    { background:#3b6ea5; }
.woocommerce-error::after   { background:#FD4239; }
/* WC icon (font) recolor + position */
.woocommerce-message::before, .woocommerce-info::before, .woocommerce-error::before {
	left:1.15rem !important; top:1.15rem !important; font-size:1.05rem !important;
}
.woocommerce-message::before { color:#2D6A4F !important; }
.woocommerce-info::before    { color:#3b6ea5 !important; }
.woocommerce-error::before   { color:#FD4239 !important; }
/* button inside a notice (e.g. "View cart") */
.woocommerce-message .button, .woocommerce-info .button, .woocommerce-error .button {
	background:#2D6A4F !important; color:#fff !important; border:0 !important; border-radius:999px !important;
	font-weight:700 !important; padding:.6rem 1.35rem !important; box-shadow:none !important; text-shadow:none !important;
	float:none !important; margin:0 !important; font-size:.9rem !important; flex:none;
}
.woocommerce-message .button:hover, .woocommerce-info .button:hover { background:#1B4332 !important; }
.woocommerce-error ul.woocommerce-error { margin:0 !important; box-shadow:none !important; padding:0 !important; }

/* ===================== Auth — full-screen immersive takeover (Figma 197:751 / 214:977) ===================== */
body.nat-auth-screen .elementor-location-header,
body.nat-auth-screen .elementor-location-footer { display:none !important; }
body.nat-auth-screen .ast-container, body.nat-auth-screen .site-content,
body.nat-auth-screen .entry-content, body.nat-auth-screen .elementor-section-wrap,
body.nat-auth-screen .e-con, body.nat-auth-screen main { margin:0 !important; padding:0 !important; max-width:none !important; }
body.nat-auth-screen { overflow-x:hidden; }

.nat-auth-page { width:100vw; margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw); }
.nat-auth-hero {
	position:relative; overflow:hidden; min-height:100vh;
	display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center;
	padding:5rem 1.25rem 3.5rem;
	background:radial-gradient(120% 90% at 50% 30%, #2D6A4F 0%, #1B4332 60%, #15402F 100%) !important;
	border-radius:0 !important;
}
.nat-auth-hero__logo { position:absolute; top:1.6rem; left:50%; transform:translateX(-50%); color:#fff !important; font-weight:800; font-size:1.5rem; letter-spacing:-.02em; text-decoration:none; z-index:6; }
.nat-auth-hero__sub { color:rgba(255,255,255,.9); margin:0 0 .25rem; font-size:1rem; z-index:5; }
.nat-auth-hero__title { color:#fff; font-weight:800; text-transform:uppercase; font-size:clamp(3rem,12vw,9rem); line-height:.9; letter-spacing:-.03em; margin:.1rem 0 1.6rem; z-index:5; }
.nat-auth { position:relative; z-index:6; background:#fff; border-radius:20px; padding:1.8rem; width:100%; max-width:440px; box-shadow:0 30px 70px rgba(0,0,0,.32); text-align:left; }

/* Floating fruits */
.nat-auth-hero__fruits { position:absolute; inset:0; z-index:1; pointer-events:none; }
.nat-fruit { position:absolute; background:center/contain no-repeat; filter:drop-shadow(0 14px 26px rgba(0,0,0,.3)); }
.nat-fruit--1 { width:120px; height:120px; top:16%;  left:9%;  transform:rotate(-10deg); }
.nat-fruit--2 { width:140px; height:140px; top:54%;  left:6%;  transform:rotate(8deg); }
.nat-fruit--3 { width:90px;  height:90px;  top:78%;  left:18%; transform:rotate(-6deg); }
.nat-fruit--4 { width:80px;  height:80px;  top:30%;  left:24%; transform:rotate(12deg); }
.nat-fruit--5 { width:130px; height:130px; top:18%;  right:10%; transform:rotate(10deg); }
.nat-fruit--6 { width:150px; height:150px; top:52%;  right:7%;  transform:rotate(-8deg); }
.nat-fruit--7 { width:85px;  height:85px;  top:80%;  right:20%; transform:rotate(6deg); }
.nat-fruit--8 { width:80px;  height:80px;  top:34%;  right:26%; transform:rotate(-12deg); }
@media (max-width:760px){ .nat-fruit--4, .nat-fruit--8 { display:none; } .nat-fruit { opacity:.5; } }

/* ===================== Find-your-box — carousel widget =====================
   Only the dedicated carousel widget carries .nat-shop--carousel, so every rule
   here is scoped to it — the plain grid widget is never touched, at any width.
   Slides-per-view / peek / gap are driven by CSS vars the widget's responsive
   controls set on the wrapper (with the fallbacks below); JS handles arrows,
   dots, autoplay and loop. Arrows/dots only exist when toggled on. */
.nat-shop--carousel .nat-grid-wrap { display:block; position:relative; }
.nat-shop--carousel .nat-grid {
	display:flex; grid-template-columns:none; gap:var(--nat-gap,24px);
	overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;
	scrollbar-width:none; padding-bottom:.5rem;
}
.nat-shop--carousel .nat-grid::-webkit-scrollbar { display:none; }
/* slide width = (track - peek - gaps) / slides, so `peek` px of the next card shows */
.nat-shop--carousel .nat-grid > .nat-box-card {
	flex:0 0 calc((100% - var(--nat-peek,0px) - var(--nat-gap,24px) * (var(--nat-slides,3) - 1)) / var(--nat-slides,3));
	scroll-snap-align:start;
}

/* round arrow buttons floating over the card image */
.nat-shop--carousel .nat-cnav {
	display:inline-flex; align-items:center; justify-content:center;
	position:absolute; top:var(--nat-arrow-top,115px); transform:translateY(-50%);
	width:40px; height:40px; padding:0; border:0; border-radius:50%;
	background:var(--green); color:#fff; cursor:pointer; z-index:5;
	box-shadow:0 6px 16px rgba(0,0,0,.22); transition:background .15s;
}
.nat-shop--carousel .nat-cnav:hover { background:var(--green-d); }
.nat-shop--carousel .nat-cnav--prev { left:4px; }
.nat-shop--carousel .nat-cnav--next { right:4px; }

/* dots */
.nat-shop--carousel .nat-dots { display:flex; justify-content:center; gap:.5rem; margin:1.1rem 0 .2rem; }
.nat-shop--carousel .nat-dot { width:9px; height:9px; padding:0; border:0; border-radius:50%; background:#cfdbd5; cursor:pointer; transition:background .15s,transform .15s; }
.nat-shop--carousel .nat-dot.is-active { background:var(--green); transform:scale(1.15); }

/* See all boxes CTA */
.nat-shop--carousel .nat-seeall-wrap { display:flex; justify-content:center; margin-top:1.1rem; }