/* VULOIR site: sections, navigation, bag, checkout. Tokens: brand.css. Showcase: showcase.css. */

/* Author display rules (flex/grid) must never override the hidden attribute. */
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
html.has-modal, html.has-modal body { overflow: hidden; }
img { max-width: 100%; }
section[id] { scroll-margin-top: 72px; }
button:disabled { opacity: .35; cursor: default; }

.skip-link { position: fixed; left: 16px; top: -60px; z-index: 100; padding: 10px 16px; background: var(--c-text); color: var(--c-bg-deep); font-weight: 600; }
.skip-link:focus { top: 16px; }

/* ------------------------------------------------------------ header (fixed; solid after the showcase) */
.site-header { position: fixed; transition: background-color .4s var(--ease), padding .4s var(--ease), box-shadow .4s var(--ease); }
.site-header.is-solid { background: rgba(13, 11, 9, .92); padding-top: 14px; padding-bottom: 14px; box-shadow: 0 1px 0 var(--c-line); backdrop-filter: blur(10px); }
.bag-btn { position: relative; }
.bag-count {
  position: absolute; top: 4px; right: 0; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9px;
  background: var(--c-accent); color: var(--c-bg-deep); font-size: .625rem; font-weight: 700; line-height: 17px; text-align: center;
}

/* ------------------------------------------------------------ shared type */
.kicker { margin: 0 0 18px; font-size: .75rem; font-weight: 500; letter-spacing: .26em; text-transform: uppercase; color: var(--c-accent); }
.section-title { margin: 0; font-family: var(--f-display); font-weight: 400; font-size: clamp(2.6rem, 5.2vw, 5rem); line-height: 1.02; letter-spacing: -.005em; }
.section-title em, .story__title em { font-style: italic; color: var(--c-accent); }
.lede { margin: 26px 0 0; max-width: 46ch; font-size: 1.0625rem; line-height: 1.65; color: var(--c-text-muted); }
.text-btn { border: 0; background: none; padding: 10px 0; color: var(--c-text-muted); font-size: .8125rem; letter-spacing: .12em; text-transform: uppercase; cursor: pointer; text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--c-accent); }

/* ------------------------------------------------------------ reviewer mode (?review) */
.rv { display: none !important; }
.review .rv { display: inline-block !important; }
.rv--tag {
  padding: 3px 8px; border: 1px dashed rgba(200, 178, 126, .8); background: rgba(11, 10, 9, .8);
  font: 600 .625rem/1.4 var(--f-sans); letter-spacing: .1em; text-transform: uppercase; color: var(--c-accent);
}
.rv--corner { position: absolute; left: 10px; bottom: 10px; }
.rv--corner-top { position: absolute; left: 16px; top: 88px; }
.review .bottle__note { position: absolute; left: 50%; top: 9%; transform: translateX(-50%); white-space: nowrap; }
.review-panel { position: fixed; right: 16px; bottom: 16px; z-index: 50; max-width: 360px; padding: 14px 16px; border: 1px dashed rgba(200, 178, 126, .8); background: rgba(11, 10, 9, .94); font-size: .75rem; line-height: 1.5; color: var(--c-text-muted); }
.review .review-panel { display: block !important; }
.review-panel__title { margin: 0 0 6px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--c-accent); }
.review-panel ul { margin: 0; padding-left: 1.1em; }

/* ------------------------------------------------------------ scroll cue */
.scroll-cue { position: absolute; z-index: 26; right: var(--gutter); top: 38%; display: flex; flex-direction: column; align-items: center; gap: 14px; color: var(--c-text-muted); transition: color .3s var(--ease); }
.scroll-cue:hover { color: var(--c-text); }
.scroll-cue__label { writing-mode: vertical-rl; font-size: .6875rem; font-weight: 500; letter-spacing: .32em; text-transform: uppercase; }
.scroll-cue i { width: 1px; height: 64px; overflow: hidden; position: relative; background: linear-gradient(to bottom, rgba(200, 178, 126, .5), rgba(200, 178, 126, 0)); }
.scroll-cue i::after { content: ""; position: absolute; left: 0; top: -40%; width: 1px; height: 40%; background: linear-gradient(to bottom, transparent, #ece6db, transparent); animation: cue 2.8s var(--ease) infinite 1.2s; }
@keyframes cue { to { top: 110%; } }
@media (prefers-reduced-motion: reduce) { .scroll-cue i::after { animation: none; display: none; } }
.reduce-motion .scroll-cue i::after { animation: none; display: none; }

/* ------------------------------------------------------------ discovery */
.discover { padding: 140px var(--gutter) 120px; background: linear-gradient(to bottom, #0f0d0b, #16130f 30%, #16130f); }
.discover__intro { display: grid; grid-template-columns: 1.2fr .8fr; column-gap: 60px; align-items: end; max-width: 1320px; margin: 0 auto 70px; }
.discover__intro .kicker { grid-column: 1 / -1; }
.discover__intro .section-title { font-size: clamp(2.6rem, 4.6vw, 4.6rem); }
.discover__intro .lede { margin: 0 0 8px; justify-self: end; }
.spectrum { position: relative; display: grid; grid-template-columns: repeat(5, 1fr); gap: 28px; max-width: 1320px; margin: 0 auto; }
.spectrum__band { position: absolute; left: 0; right: 0; top: 330px; height: 2px; background: linear-gradient(90deg, var(--spectrum)); box-shadow: 0 0 24px rgba(214, 168, 108, .35); }
.spectrum__band span { position: absolute; top: -24px; font-size: .6875rem; letter-spacing: .22em; text-transform: uppercase; color: var(--c-text-muted); }
.spectrum__band span:last-child { right: 0; }
.scent { position: relative; display: grid; justify-items: start; align-content: start; }
.scent img { height: 380px; width: auto; justify-self: center; margin: -20px 0 26px; object-fit: contain; filter: drop-shadow(0 24px 30px rgba(0, 0, 0, .45)); transition: filter .4s var(--ease); }
.scent__body { display: grid; justify-items: start; width: 100%; }
.scent__hour { margin: 0; font-size: .6875rem; letter-spacing: .22em; text-transform: uppercase; color: var(--tone); }
.scent__family { display: inline; margin-left: 10px; font-size: .75rem; letter-spacing: .06em; text-transform: none; color: var(--c-text); }
.scent__name { margin: 8px 0 12px; font-family: var(--f-display); font-weight: 400; font-size: 2.1rem; line-height: 1; }
.scent__desc { margin: 0 0 18px; font-size: .9375rem; line-height: 1.6; color: var(--c-text-muted); }
.scent__scale { display: grid; gap: 8px; margin: 0 0 18px; width: 100%; }
.scent__scale div { display: grid; grid-template-columns: 76px 1fr; align-items: center; gap: 10px; }
.scent__scale dt { font-size: .6875rem; letter-spacing: .16em; text-transform: uppercase; color: var(--c-text-muted); }
.scent__scale dd { margin: 0; }
.scent__scale i { display: block; height: 2px; background: linear-gradient(90deg, var(--tone) calc(var(--v) * 20%), rgba(236, 230, 219, .12) 0); }
.scent__links { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0; }
.scent__links a { padding: 6px 0; font-size: .8125rem; color: var(--c-text); background: linear-gradient(var(--tone), var(--tone)) left calc(100% - 3px) / 100% 1px no-repeat; }
.scent.is-selected .scent__name::after { content: attr(data-selected-label); display: block; margin-top: 8px; font-family: var(--f-sans); font-size: .625rem; letter-spacing: .2em; text-transform: uppercase; color: var(--c-accent); }

/* ------------------------------------------------------------ notes */
.notes-section { padding: 130px var(--gutter) 140px; background: linear-gradient(to bottom, #2a2119 0%, #231c16 30%, #17120f 64%, #0c0a08 100%); }
.notes-section__head { text-align: center; margin: 0 auto 80px; max-width: 900px; display: grid; justify-items: center; }
.mini-tabs { display: flex; gap: 6px; margin-top: 30px; padding: 5px; border: 1px solid var(--c-line); border-radius: 999px; }
.mini-tabs button { flex: none; padding: 8px 16px; border: 0; border-radius: 999px; background: none; font-size: .6875rem; letter-spacing: .18em; text-transform: uppercase; color: var(--c-text-muted); cursor: pointer; }
.mini-tabs button:hover { color: var(--c-text); }
.mini-tabs .is-on { background: var(--c-text); color: var(--c-bg-deep); }
.tiers { position: relative; max-width: 1320px; margin: 0 auto; display: grid; grid-template-columns: 1fr 360px 1fr; grid-template-rows: repeat(3, auto); column-gap: 56px; row-gap: 80px; }
.tiers.is-entering { animation: tiers-in .7s var(--ease); }
@keyframes tiers-in { from { opacity: 0; transform: translateY(12px); } }
@media (prefers-reduced-motion: reduce) { .tiers.is-entering { animation: none; } }
.reduce-motion .tiers.is-entering { animation: none; }
.tiers::before { content: ""; position: absolute; left: 50%; top: -30px; bottom: -30px; width: 1px; background: linear-gradient(to bottom, rgba(236, 230, 219, .7), rgba(200, 178, 126, .35) 50%, rgba(200, 178, 126, 0)); }
.tier { display: contents; }
.tier--top .tier__texture { grid-column: 1; grid-row: 1; } .tier--top .tier__text { grid-column: 3; grid-row: 1; }
.tier--heart .tier__text { grid-column: 1; grid-row: 2; text-align: right; justify-self: end; } .tier--heart .tier__texture { grid-column: 3; grid-row: 2; }
.tier--base .tier__texture { grid-column: 1; grid-row: 3; } .tier--base .tier__text { grid-column: 3; grid-row: 3; }
.tiers__bottle { grid-column: 2; grid-row: 1 / 4; margin: 0; align-self: center; position: relative; z-index: 1; }
.tiers__bottle img { width: 100%; display: block; filter: drop-shadow(0 30px 40px rgba(0, 0, 0, .5)); }
.tier__texture { position: relative; aspect-ratio: 16 / 11; align-self: center; overflow: hidden; border-radius: 2px; background-size: cover; background-position: center; }
.tier__texture.is-image img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.tier__texture.is-image::after { content: none; }
.tier__texture::after { content: ""; position: absolute; inset: 0; opacity: .5; mix-blend-mode: overlay; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>"); }
.tier__text { align-self: center; max-width: 380px; }
.tier__label { margin: 0 0 12px; font-size: .6875rem; letter-spacing: .2em; text-transform: uppercase; color: var(--c-accent); }
.tier__text h3 { margin: 0 0 14px; font-family: var(--f-display); font-weight: 400; font-size: clamp(2.2rem, 3.4vw, 3.4rem); line-height: 1.02; }
.tier__text p:last-child { margin: 0; color: var(--c-text-muted); line-height: 1.65; }

/* ------------------------------------------------------------ craft */
.craft { padding: 140px var(--gutter) 120px; background: #0d0b09; display: grid; grid-template-columns: minmax(280px, 4fr) 8fr; column-gap: 72px; max-width: 1480px; margin: 0 auto; }
.craft__aside { align-self: stretch; }                        /* same height as the detail grid */
.craft__intro { position: sticky; top: 110px; }                /* sticks only within .craft__aside */
.craft__grid { display: grid; grid-template-columns: 1.15fr .85fr; grid-template-areas: "cap blade" "cap label" "base base"; gap: 22px; }
.detail { margin: 0; display: grid; gap: 14px; align-content: start; }
.detail--cap { grid-area: cap; } .detail--blade { grid-area: blade; } .detail--label { grid-area: label; } .detail--base { grid-area: base; }
.crop { background-color: #0b0a09; background-repeat: no-repeat; border: 1px solid rgba(236, 230, 219, .06); }
.detail figcaption { display: grid; grid-template-columns: auto 1fr; column-gap: 12px; font-size: .9375rem; }
.detail figcaption b { font-family: var(--f-display); font-weight: 400; color: var(--c-accent); }
.detail figcaption span { grid-column: 2; margin-top: 4px; font-size: .875rem; line-height: 1.55; color: var(--c-text-muted); }
.craft__specs { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, 1fr); margin: 80px 0 0; border-top: 1px solid var(--c-line); }
.craft__specs div { padding: 22px 20px 0 0; }
.craft__specs dt { font-size: .6875rem; letter-spacing: .2em; text-transform: uppercase; color: var(--c-text-muted); }
.craft__specs dd { margin: 8px 0 0; font-family: var(--f-display); font-size: 1.35rem; }

/* ------------------------------------------------------------ shop (light section) */
.product { display: grid; grid-template-columns: 1.08fr .92fr; background: #ece6db; color: #141210; min-height: 880px; }
.product :focus-visible { outline-color: #6a4f23; }
.product__media { position: relative; background: radial-gradient(ellipse 60% 50% at 50% 42%, #2a2119, #0f0d0b 70%); overflow: hidden; min-height: 560px; }
.product__hero { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 44%; }
.product__media.is-cutout .product__hero { object-fit: contain; padding: 6% 12% 4%; filter: drop-shadow(0 30px 40px rgba(0, 0, 0, .55)); }
.product__thumbs { position: absolute; left: 28px; bottom: 28px; display: flex; gap: 10px; }
.product__thumbs button { padding: 0; border: 1px solid rgba(236, 230, 219, .25); background: none; cursor: pointer; opacity: .75; }
.product__thumbs button.is-on { border-color: #c8b27e; opacity: 1; }
.product__thumbs img { display: block; width: 64px; height: 80px; object-fit: cover; object-position: 50% 42%; }
.product__caption { position: absolute; right: 24px; bottom: 26px; margin: 0; padding: 6px 12px; border-radius: 999px; background: rgba(11, 10, 9, .7); color: #ece6db; font-size: .75rem; letter-spacing: .06em; }
.product__panel { padding: 110px clamp(28px, 6vw, 96px) 90px; display: grid; align-content: start; }
.crumb { margin: 0 0 24px; font-size: .6875rem; letter-spacing: .2em; text-transform: uppercase; color: #6f675b; }
.product__name { margin: 0; font-family: var(--f-display); font-weight: 400; font-size: clamp(3rem, 5vw, 4.8rem); line-height: 1; }
.product__sub { margin: 12px 0 6px; font-size: .8125rem; letter-spacing: .16em; text-transform: uppercase; color: #6a4f23; }
.product__notes { margin: 0 0 32px; color: #4c463d; }
.field { margin: 0 0 28px; padding: 0; border: 0; }
.field legend { margin-bottom: 14px; font-size: .6875rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; }
.swatches { display: flex; flex-wrap: wrap; gap: 18px; }
.swatches label { position: relative; display: grid; justify-items: center; gap: 8px; font-size: .75rem; color: #4c463d; cursor: pointer; }
.swatches input, .sizes input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.swatches span { width: 34px; height: 34px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, .55), transparent 45%), var(--c); box-shadow: inset 0 0 0 1px rgba(20, 18, 16, .15); }
.swatches input:checked + span { box-shadow: 0 0 0 2px #ece6db, 0 0 0 3px #141210; }
.swatches input:focus-visible + span { outline: 2px solid #6a4f23; outline-offset: 5px; }
.swatches label:has(input:checked) { color: #141210; font-weight: 600; }
.sizes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.sizes label { position: relative; }
.sizes span { display: grid; gap: 2px; padding: 14px 16px; border: 1px solid rgba(20, 18, 16, .22); cursor: pointer; }
.sizes b { font-weight: 600; font-size: .9375rem; }
.sizes em { font-style: normal; font-size: .8125rem; color: #5f584d; }
.sizes input:checked + span { border-color: #141210; background: #f6f2ea; box-shadow: inset 0 0 0 1px #141210; }
.sizes input:focus-visible + span { outline: 2px solid #6a4f23; outline-offset: 3px; }
.buy { display: flex; justify-content: space-between; align-items: center; margin: 6px 0 18px; padding-top: 22px; border-top: 1px solid rgba(20, 18, 16, .15); }
/* Prices use the text face: Bodoni's hairlines make large digits hard to read, and it has no ₺ sign. */
.buy__price { margin: 0; font-family: var(--f-sans); font-weight: 500; font-size: 2rem; letter-spacing: -.01em; font-variant-numeric: tabular-nums lining-nums; }
.buy__price span { margin-left: 10px; font-family: var(--f-sans); font-size: .8125rem; letter-spacing: .12em; text-transform: uppercase; color: #5f584d; }
.qty { display: flex; align-items: center; border: 1px solid rgba(20, 18, 16, .25); }
.qty button { width: 44px; height: 44px; border: 0; background: none; font-size: 1.1rem; cursor: pointer; color: inherit; }
.qty output { min-width: 28px; text-align: center; font-weight: 600; }
.add { display: flex; align-items: center; justify-content: center; gap: 14px; width: 100%; min-height: 58px; border: 0; background: #141210; color: #ece6db; cursor: pointer; font-size: .8125rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; transition: background-color .3s var(--ease); }
.add:hover { background: #2a241c; }
.add svg { width: 18px; height: 10px; }
.demo-note { margin: 12px 0 30px; font-size: .75rem; color: #5f584d; }
.accordion { border-top: 1px solid rgba(20, 18, 16, .15); }
.accordion details { border-bottom: 1px solid rgba(20, 18, 16, .15); }
.accordion summary { display: flex; justify-content: space-between; padding: 18px 0; font-size: .9375rem; cursor: pointer; list-style: none; }
.accordion summary::-webkit-details-marker { display: none; }
.accordion summary::after { content: "+"; color: #6f675b; }
.accordion details[open] summary::after { content: "−"; }
.accordion p { margin: 0 0 18px; font-size: .9375rem; line-height: 1.6; color: #4c463d; }

/* ------------------------------------------------------------ story + footer */
.story { position: relative; padding: 160px var(--gutter) 140px; text-align: center; display: grid; justify-items: center; background: radial-gradient(ellipse 50% 60% at 50% 30%, rgba(214, 168, 108, .07), transparent 70%), #0b0a09; }
.story__blade { display: block; width: 1px; height: 90px; margin-bottom: 40px; background: linear-gradient(to bottom, transparent, #c8b27e); }
.story__title { margin: 0; font-family: var(--f-display); font-weight: 400; font-size: clamp(2.6rem, 5.4vw, 5.4rem); line-height: 1.04; }
.story__text { margin: 32px 0 0; max-width: 44ch; font-size: 1.0625rem; line-height: 1.7; color: var(--c-text-muted); }
.footer { padding: 80px var(--gutter) 34px; background: #080706; border-top: 1px solid var(--c-line); }
.footer__top { display: flex; justify-content: space-between; align-items: center; gap: 40px; padding-bottom: 44px; border-bottom: 1px solid var(--c-line); }
.footer__mark { font-size: 2.2rem; }
.footer__nav { display: flex; flex-wrap: wrap; gap: 8px 32px; }
.footer__nav a { padding: 6px 0; font-size: .8125rem; letter-spacing: .14em; text-transform: uppercase; color: var(--c-text-muted); }
.footer__nav a:hover { color: var(--c-text); }
.footer__demo { margin: 34px 0 10px; max-width: 70ch; font-size: .8125rem; line-height: 1.6; color: var(--c-text-muted); }
.footer__legal { margin: 0; font-size: .75rem; color: #8a8276; }

/* ------------------------------------------------------------ mobile menu */
.menu { position: fixed; inset: 0; z-index: 65; display: flex; flex-direction: column; padding: 14px 20px 30px; background: #0d0b09; }
.menu__top { display: flex; justify-content: space-between; align-items: center; min-height: 32px; }
.menu__links { margin: 60px 0 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.menu__links a, .menu__bag { display: block; padding: 10px 0; border: 0; background: none; color: var(--c-text); font-family: var(--f-display); font-size: 2.4rem; line-height: 1.1; text-align: left; cursor: pointer; }
/* Language switch: header (desktop) and menu (mobile). The active language is not a link. */
.lang { display: flex; align-items: center; gap: 2px; }
.lang button { border: 0; background: none; cursor: pointer; padding: 8px 6px; font: 500 .75rem/1 var(--f-sans); letter-spacing: .16em; text-transform: uppercase; color: var(--c-text-muted); transition: color .3s var(--ease); }
.lang button + button { border-left: 1px solid var(--c-line); }
.lang button:hover, .lang button[aria-pressed="true"] { color: var(--c-text); }
.lang button[aria-pressed="true"] { cursor: default; }
.lang button:focus-visible { outline: 1px solid var(--c-accent); outline-offset: 2px; }
.lang--menu { margin-top: 28px; gap: 0; }
.lang--menu button { font-size: .875rem; padding: 10px 16px 10px 0; letter-spacing: .12em; }
.lang--menu button + button { padding-left: 16px; }
.menu__demo { margin-top: auto; font-size: .75rem; color: var(--c-text-muted); }

/* ------------------------------------------------------------ bag drawer */
.scrim { position: fixed; inset: 0; z-index: 55; background: rgba(5, 4, 3, .6); }
.drawer {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 60; width: min(440px, 100%);
  display: flex; flex-direction: column; background: #ece6db; color: #141210;
  transform: translateX(100%); transition: transform .45s var(--ease);
}
.drawer.is-open { transform: none; }
@media (prefers-reduced-motion: reduce) { .drawer { transition: none; } }
.reduce-motion .drawer { transition: none; }
.drawer :focus-visible, .checkout :focus-visible { outline-color: #6a4f23; }
.drawer__head, .checkout__head { display: flex; justify-content: space-between; align-items: center; padding: 22px 24px; border-bottom: 1px solid rgba(20, 18, 16, .15); }
.drawer__head h2, .checkout__head h2 { margin: 0; font-family: var(--f-display); font-weight: 400; font-size: 1.8rem; }
.drawer__head h2 span { font-family: var(--f-sans); font-size: .9rem; color: #6f675b; }
.lines { margin: 0; padding: 0 24px; list-style: none; overflow-y: auto; }
.drawer .lines { flex: 1; }
.line { display: grid; grid-template-columns: 64px 1fr auto; gap: 14px; padding: 18px 0; border-bottom: 1px solid rgba(20, 18, 16, .12); }
.line img { width: 64px; height: 80px; object-fit: contain; background: radial-gradient(ellipse at 50% 45%, #2a2119, #0f0d0b 75%); }
.line__name { margin: 0; font-family: var(--f-display); font-size: 1.3rem; }
.line__meta { margin: 2px 0 8px; font-size: .8125rem; color: #5f584d; }
.line__price { margin: 0; font-weight: 600; }
.qty--small button { width: 34px; height: 34px; }
.line__remove { margin-top: 8px; padding: 4px 0; border: 0; background: none; color: #5f584d; font-size: .75rem; text-decoration: underline; cursor: pointer; }
.drawer__foot { padding: 20px 24px 24px; border-top: 1px solid rgba(20, 18, 16, .15); }
.drawer__subtotal { display: flex; justify-content: space-between; margin: 0 0 16px; font-size: 1rem; }
.drawer__foot .demo-note { margin-bottom: 4px; }
.drawer__empty { padding: 40px 24px; }
.drawer .text-btn, .checkout .text-btn { color: #4c463d; }

/* ------------------------------------------------------------ demo checkout */
.checkout { position: fixed; inset: 0; z-index: 70; overflow-y: auto; background: rgba(5, 4, 3, .7); display: grid; place-items: start center; padding: 6vh 16px; }
.checkout__inner { width: min(620px, 100%); background: #ece6db; color: #141210; padding-bottom: 24px; }
.checkout__banner { margin: 20px 24px 0; padding: 12px 14px; border: 1px solid rgba(106, 79, 35, .35); background: #f4efe6; font-size: .875rem; color: #4c463d; }
.checkout__ref { margin: 20px 24px 0; }
.checkout__text { margin: 8px 24px 0; color: #4c463d; line-height: 1.6; }
.checkout .lines { margin-top: 10px; }
.checkout__totals { margin: 10px 24px 20px; }
.checkout__totals div { display: flex; justify-content: space-between; padding: 8px 0; }
.checkout__totals dt { color: #5f584d; }
.checkout__totals dd { margin: 0; }
.checkout__totals .is-total { border-top: 1px solid rgba(20, 18, 16, .15); margin-top: 6px; padding-top: 14px; font-family: var(--f-display); font-size: 1.5rem; }
.checkout__totals .is-total dd { font-family: var(--f-sans); font-weight: 600; font-size: 1.35rem; font-variant-numeric: tabular-nums lining-nums; }
.checkout .add { width: calc(100% - 48px); margin: 0 24px; }
.checkout .text-btn { margin: 10px 24px 0; }

/* ------------------------------------------------------------ mobile */
@media (max-width: 760px) {
  .site-header.is-solid { padding: 10px 20px; }
  .header-actions .lang { display: none; }   /* on phones the switch lives in the menu */
  .scroll-cue { top: auto; bottom: 8px; right: auto; left: 50%; transform: translateX(-50%); flex-direction: row; gap: 10px; }
  .scroll-cue__label { writing-mode: horizontal-tb; font-size: .6875rem; }
  .scroll-cue i { height: 18px; }
  .showcase { padding-bottom: 40px; }
  .section-title { font-size: 2.5rem; }
  .lede { font-size: 1rem; }

  /* Collection: compact rows; readable sizes kept. */
  .discover { padding: 60px 20px 44px; }
  .discover__intro { grid-template-columns: 1fr; margin-bottom: 24px; }
  .discover__intro .lede { justify-self: start; margin-top: 16px; }
  .spectrum { grid-template-columns: 1fr; gap: 0; padding-left: 16px; }
  .spectrum__band { top: 0; bottom: 0; left: 0; right: auto; width: 2px; height: auto; background: linear-gradient(180deg, var(--spectrum)); }
  .spectrum__band span { display: none; }
  .scent { grid-template-columns: 76px 1fr; column-gap: 14px; align-items: start; padding: 14px 0; border-bottom: 1px solid var(--c-line); }
  .scent:last-child { border-bottom: 0; }
  .scent img { height: 118px; margin: 0; }
  .scent__name { font-size: 1.75rem; margin: 4px 0 6px; }
  .scent__family { margin-left: 8px; }
  .scent__desc { margin-bottom: 8px; font-size: .9375rem; line-height: 1.5; }
  .scent__scale { grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 6px; }
  .scent__scale div { grid-template-columns: auto 1fr; gap: 8px; }
  .scent.is-selected .scent__name::after { display: inline; margin: 0 0 0 10px; vertical-align: middle; }

  /* Notes: shorter panels, no repetition, same readable type. */
  .notes-section { padding: 72px 20px 64px; }
  .notes-section__head { margin-bottom: 28px; }
  .mini-tabs { max-width: calc(100% + 40px); margin: 22px -20px 0; overflow-x: auto; scrollbar-width: none; border: 0; padding: 5px 34%;
    -webkit-mask-image: linear-gradient(to right, transparent, #000 20%, #000 80%, transparent); mask-image: linear-gradient(to right, transparent, #000 20%, #000 80%, transparent); }
  .mini-tabs::-webkit-scrollbar { display: none; }
  .mini-tabs button { padding: 8px 12px; font-size: .6875rem; letter-spacing: .14em; }
  .tiers { grid-template-columns: 1fr; row-gap: 22px; }
  .tiers::before { display: none; }
  .tiers__bottle { grid-column: 1; grid-row: auto; order: -1; width: 46%; justify-self: center; margin-bottom: 4px; }
  .tier { display: grid; grid-template-columns: 38% 1fr; gap: 14px; align-items: center; }
  .tier .tier__texture, .tier .tier__text { grid-column: auto; grid-row: auto; }
  .tier--heart .tier__text { text-align: left; justify-self: start; }
  .tier--heart .tier__texture { order: 0; }
  .tier__texture { aspect-ratio: 1 / 1.1; }
  .tier__text h3 { font-size: 1.7rem; margin-bottom: 8px; }
  .tier__text p:last-child { font-size: .9375rem; line-height: 1.55; }

  .craft { display: block; padding: 80px 20px 72px; }
  .craft__intro { position: static; margin-bottom: 36px; }
  .craft__grid { grid-template-columns: 1fr 1fr; grid-template-areas: "cap cap" "blade label" "base base"; gap: 16px; }
  .detail--cap .crop { aspect-ratio: 4 / 3.4 !important; background-size: 230% !important; background-position: 50% 16% !important; }
  .craft__specs { grid-template-columns: 1fr 1fr; row-gap: 20px; margin-top: 44px; }

  .product { grid-template-columns: 1fr; min-height: 0; }
  .product__media { min-height: 0; aspect-ratio: 4 / 4.4; }
  .product__thumbs { left: 16px; bottom: 16px; }
  .product__thumbs img { width: 48px; height: 60px; }
  .product__caption { right: 16px; bottom: 16px; }
  .product__panel { padding: 40px 20px 56px; }
  .swatches { gap: 12px; }
  .swatches label { font-size: .75rem; }
  .sizes span { padding: 12px; }

  .story { padding: 100px 24px 90px; }
  .footer { padding: 60px 20px 30px; }
  .footer__top { flex-direction: column; align-items: start; gap: 24px; }
  .footer__nav { gap: 4px 22px; }
  .review-panel { left: 12px; right: 12px; max-width: none; }
}

/* ------------------------------------------------------------ right-to-left (Arabic)
   Grid and flex layouts mirror by themselves under dir="rtl"; these rules mirror the
   few physical positions. Images are never mirrored (labels must stay readable). */
[dir="rtl"] .wordmark { direction: ltr; }                       /* the Latin wordmark keeps its tracking */
[dir="rtl"] .arrow svg, [dir="rtl"] .btn svg, [dir="rtl"] .add svg { transform: scaleX(-1); }
[dir="rtl"] .scroll-cue { right: auto; left: var(--gutter); }
[dir="rtl"] .spectrum__band { background: linear-gradient(270deg, var(--spectrum)); }
[dir="rtl"] .spectrum__band span:last-child { right: auto; left: 0; }
[dir="rtl"] .scent__family { margin-left: 0; margin-right: 10px; }
[dir="rtl"] .scent__scale i { background: linear-gradient(270deg, var(--tone) calc(var(--v) * 20%), rgba(236, 230, 219, .12) 0); }
[dir="rtl"] .tier--heart .tier__text { text-align: left; }
[dir="rtl"] .product__thumbs { left: auto; right: 28px; }
[dir="rtl"] .product__caption { right: auto; left: 24px; }
[dir="rtl"] .buy__price span { margin-left: 0; margin-right: 10px; }
[dir="rtl"] .menu__links a, [dir="rtl"] .menu__bag { text-align: right; }
[dir="rtl"] .lang button + button { border-left: 0; border-right: 1px solid var(--c-line); }
[dir="rtl"] .lang--menu button { padding: 10px 0 10px 16px; }
[dir="rtl"] .lang--menu button + button { padding-left: 16px; padding-right: 16px; }
[dir="rtl"] .drawer { right: auto; left: 0; transform: translateX(-100%); }
[dir="rtl"] .drawer.is-open { transform: none; }
@media (max-width: 760px) {
  [dir="rtl"] .scroll-cue { left: 50%; right: auto; }
  [dir="rtl"] .spectrum { padding-left: 0; padding-right: 16px; }
  [dir="rtl"] .spectrum__band { left: auto; right: 0; background: linear-gradient(180deg, var(--spectrum)); }
  [dir="rtl"] .scent__family { margin-right: 8px; }
  [dir="rtl"] .tier--heart .tier__text { text-align: right; }
  [dir="rtl"] .product__thumbs { right: 16px; }
  [dir="rtl"] .product__caption { left: 16px; }
}

/* Arabic typography: the Latin brand faces have no Arabic letters, so Arabic text falls
   through to Amiri (display) and IBM Plex Sans Arabic (text), bundled in assets/fonts;
   Latin words (names, wordmark) keep the brand faces. System faces remain as a last resort.
   Arabic letters join, so no letter-spacing; no synthetic italics. */
:root:lang(ar) {
  --f-display: "Bodoni Moda", "Amiri", "Noto Naskh Arabic", "Geeza Pro", serif;
  --f-sans: "Instrument Sans", "IBM Plex Sans Arabic", "Noto Sans Arabic", "Segoe UI", "Geeza Pro", sans-serif;
}
:lang(ar) body *:not(.wordmark):not(.wordmark *) { letter-spacing: 0 !important; }
:lang(ar) em { font-style: normal; }
:lang(ar) .scroll-cue__label { writing-mode: horizontal-tb; }   /* Arabic letters are never set rotated */
:lang(ar) .lede, :lang(ar) .scent__desc, :lang(ar) .tier__text p:last-child, :lang(ar) .story__text { line-height: 1.8; }