/* ============================================================
   OUD NOIR — Perfume Boutique store theme (code: oud-store)
   GCC dark-amber luxury · near-black aubergine + amber glow
   Cormorant Garamond display · Manrope body · Cairo (Arabic)
   Mobile-first · RTL-safe (logical properties) · reduced-motion aware
   ============================================================ */

:root {
    --oud-bg: var(--tk-bg, #16100E);
    --oud-bg-2: color-mix(in srgb, var(--tk-bg, #16100E), #fff 5%);
    --oud-bg-3: color-mix(in srgb, var(--tk-bg, #16100E), #fff 9%);
    --oud-panel: rgb(from var(--tk-text, #F3EADC) r g b / .045);
    --oud-panel-2: rgb(from var(--tk-text, #F3EADC) r g b / .08);
    --hairline: rgb(from var(--tk-primary, #D98E32) r g b / .22);
    --hairline-2: rgb(from var(--tk-primary, #D98E32) r g b / .45);
    --amber: var(--tk-primary, #D98E32);
    --amber-2: color-mix(in srgb, var(--tk-primary, #D98E32), #fff 24%);
    --amber-deep: var(--tk-secondary, #7A4A14);
    --glow: rgb(from var(--tk-primary, #D98E32) r g b / .32);
    --txt: var(--tk-text, #F3EADC);
    --muted: color-mix(in srgb, var(--tk-text, #F3EADC), var(--tk-bg, #16100E) 28%);
    --dim: color-mix(in srgb, var(--tk-text, #F3EADC), var(--tk-bg, #16100E) 50%);
    --danger: var(--tk-danger, #C24A3F);
    --ok: var(--tk-success, #5E8C61);
    --r-lg: 20px;
    --r-md: 14px;
    --r-sm: 10px;
    --font-d: var(--tk-font-header, 'Cormorant Garamond'), 'Cairo', Georgia, serif;
    --font-b: var(--tk-font-content, 'Manrope'), 'Cairo', system-ui, sans-serif;
}

/* ---------------- Base ---------------- */
html { scroll-behavior: smooth; }

body {
    background: var(--oud-bg);
    color: var(--txt);
    font-family: var(--font-b);
    font-size: 15px;
    line-height: 1.65;
    letter-spacing: .01em;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
    min-height: 100vh;
}

::selection { background: var(--amber); color: #1A120D; }

a { color: inherit; }
a:hover { color: var(--amber-2); }
.perfume-card a, .spot-card a, .scent-tile, .oud-logo, .oud-back,
.oud-policy-links a, .oud-copy a, .scent-link, .oud-clear-filter { text-decoration: none; }
img { max-width: 100%; }

body::-webkit-scrollbar { width: 10px; }
body::-webkit-scrollbar-thumb { background: var(--amber-deep); border-radius: 8px; }
body::-webkit-scrollbar-track { background: var(--oud-bg-2); }

.oud-shell { max-width: 1140px; margin-inline: auto; padding-inline: 18px; }
.oud-page { position: relative; z-index: 1; padding-block-end: 96px; }

.cursor-pointer { cursor: pointer; }

/* ---------------- Platform helpers (self-contained) ---------------- */
.preloader-wrapper {
    position: fixed; inset: 0; z-index: 9999;
    display: flex; align-items: center; justify-content: center;
    background: var(--oud-bg);
}
.preloader-wrapper .spinner-border { color: var(--amber); }

.alert-float {
    position: fixed;
    inset-block-end: -120px;
    inset-inline-start: 50%;
    transform: translateX(-50%);
    z-index: 2000;
    opacity: 0;
    display: none;
    border-radius: var(--r-sm) !important;
    border: 1px solid var(--hairline-2);
    color: #fff !important;
    transition: inset-block-end .6s ease, opacity .6s ease;
}
[dir="rtl"] .alert-float { transform: translateX(50%); }
.alert-float.show { inset-block-end: 96px; opacity: 1; }
.alert-danger.alert-float { background: var(--tk-danger, #4A201B); }
.alert-success.alert-float { background: var(--tk-success, #243A26); }

.text-warning { color: var(--amber) !important; }
.logo-height { height: 40px; width: auto; }
.single-product { text-overflow: ellipsis; white-space: nowrap; overflow: hidden; }

/* ---------------- Ambient background: smoke + amber light ---------------- */
.oud-fx { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.oud-fx .wisp {
    position: absolute;
    border-radius: 50%;
    filter: blur(85px);
    will-change: transform;
}
.oud-fx .wisp.w1 {
    width: 70vw; height: 70vw; max-width: 760px; max-height: 760px;
    inset-block-start: -22%; inset-inline-end: -24%;
    background: radial-gradient(circle at 40% 40%, rgb(from var(--tk-primary, #D98E32) r g b / .20), rgb(from var(--tk-secondary, #7A4A14) r g b / .07) 55%, transparent 75%);
    animation: oud-wisp-a 46s ease-in-out infinite alternate;
}
.oud-fx .wisp.w2 {
    width: 58vw; height: 58vw; max-width: 640px; max-height: 640px;
    inset-block-end: -16%; inset-inline-start: -20%;
    background: radial-gradient(circle at 60% 60%, rgba(167, 96, 35, .14), rgba(60, 32, 16, .08) 55%, transparent 78%);
    animation: oud-wisp-b 58s ease-in-out infinite alternate;
}
@keyframes oud-wisp-a { to { transform: translate(-9vw, 12vh) scale(1.14) rotate(14deg); } }
@keyframes oud-wisp-b { to { transform: translate(11vw, -9vh) scale(.9) rotate(-10deg); } }

/* ---------------- Typography blocks ---------------- */
.oud-kicker {
    display: inline-flex; align-items: center; gap: 10px;
    font-size: 11px; font-weight: 700; letter-spacing: .24em;
    text-transform: uppercase; color: var(--amber);
}
.oud-kicker::before { content: ""; width: 26px; height: 1px; background: linear-gradient(90deg, var(--amber), transparent); }

.sec-head { margin-block-end: 20px; }
.sec-title {
    font-family: var(--font-d);
    font-weight: 600;
    font-size: clamp(1.65rem, 5.6vw, 2.35rem);
    line-height: 1.12;
    letter-spacing: .005em;
    color: var(--txt);
    margin: 6px 0 0;
}
.sec-sub { color: var(--muted); font-size: 14px; margin: 8px 0 0; max-width: 56ch; }

.oud-section { padding-block: 34px; }

/* ---------------- Header ---------------- */
.oud-header {
    position: sticky; inset-block-start: 0; z-index: 90;
    background: rgb(from var(--tk-bg, #16100E) r g b / .78);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-block-end: 1px solid var(--hairline);
}
.oud-header-inner {
    max-width: 1140px; margin-inline: auto;
    display: flex; align-items: center; gap: 12px;
    padding: 10px 18px;
}
.oud-logo { display: flex; align-items: center; gap: 10px; text-decoration: none; min-width: 0; }
.oud-logo img {
    width: 40px; height: 40px; border-radius: 50%;
    object-fit: cover; border: 1px solid var(--hairline-2);
}
.oud-logo-name {
    font-family: var(--font-d); font-size: 1.15rem; font-weight: 600;
    color: var(--txt); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.oud-header-spacer { flex: 1; }

.oud-cart-trigger {
    position: relative;
    display: inline-flex; align-items: center; justify-content: center;
    width: 42px; height: 42px; border-radius: 50%;
    background: var(--oud-panel); border: 1px solid var(--hairline);
    color: var(--amber-2); font-size: 1.25rem;
    transition: border-color .25s ease, box-shadow .25s ease;
}
.oud-cart-trigger:hover { color: var(--amber-2); border-color: var(--hairline-2); box-shadow: 0 0 18px -4px var(--glow); }

.oud-badge {
    position: absolute; inset-block-start: -5px; inset-inline-end: -5px;
    min-width: 18px; height: 18px; padding: 0 5px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 999px; background: var(--amber); color: #1A120D;
    font-size: 11px; font-weight: 700; line-height: 1;
}

/* Language switcher (bs-language-switcher) */
.oud-header .lang .form-select {
    background-color: var(--oud-panel) !important;
    border: 1px solid var(--hairline) !important;
    color: var(--txt) !important;
    border-radius: 999px !important;
    font-size: 12.5px;
    padding: .45rem 2rem .45rem .9rem !important;
}

/* ---------------- Buttons ---------------- */
.oud-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 9px;
    padding: 13px 24px; border: 0; border-radius: var(--r-md);
    background: linear-gradient(135deg, var(--amber) 0%, var(--amber-2) 100%);
    color: #1A120D; font-family: var(--font-b); font-weight: 700; font-size: 14px;
    letter-spacing: .02em; text-decoration: none; cursor: pointer;
    box-shadow: 0 10px 28px -10px var(--glow);
    transition: transform .25s ease, box-shadow .25s ease, filter .25s ease;
}
.oud-btn:hover { transform: translateY(-2px); color: #1A120D; box-shadow: 0 16px 34px -10px var(--glow); filter: brightness(1.05); }

.oud-btn.ghost {
    background: transparent; color: var(--amber-2);
    border: 1px solid var(--hairline-2); box-shadow: none;
}
.oud-btn.ghost:hover { color: var(--amber-2); border-color: var(--amber); box-shadow: 0 0 22px -8px var(--glow); }

/* Machinery sets class="btn btn-warning ..." on #place-order — keep amber */
.btn-warning {
    background: linear-gradient(135deg, var(--amber) 0%, var(--amber-2) 100%) !important;
    color: #1A120D !important;
    border: 0 !important;
    border-radius: var(--r-md) !important;
    font-weight: 700;
}
.btn-warning:hover { filter: brightness(1.06); }
.btn-dark {
    background: transparent !important;
    color: var(--muted) !important;
    border: 1px solid var(--hairline) !important;
    border-radius: var(--r-md) !important;
}
#place-order { justify-content: center; padding: 13px 18px; font-size: 15px; }
.btn-effect { transition: transform .2s ease; }
.btn-effect:active { transform: scale(.96); }

/* ---------------- Session banners ---------------- */
.oud-banner {
    margin-block: 16px; padding: 12px 16px;
    border-radius: var(--r-md); font-size: 14px;
    border: 1px solid var(--hairline);
    background: var(--oud-panel);
    color: var(--txt);
}
.oud-banner.ok { border-color: rgb(from var(--tk-success, #5E8C61) r g b / .55); }
.oud-banner.bad { border-color: rgb(from var(--tk-danger, #C24A3F) r g b / .55); }

/* ---------------- Hero ---------------- */
.oud-hero { padding-block: 36px 12px; display: grid; gap: 26px; }
.hero-copy { min-width: 0; }
.hero-title {
    font-family: var(--font-d);
    font-weight: 600;
    font-size: clamp(2.45rem, 11vw, 4.1rem);
    line-height: 1.04;
    letter-spacing: .003em;
    margin: 14px 0 0;
}
.hero-title em {
    font-style: italic;
    background: linear-gradient(120deg, var(--amber-2), var(--amber) 60%, var(--amber-deep));
    -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero-sub { color: var(--muted); font-size: 15px; max-width: 52ch; margin: 14px 0 0; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-block-start: 24px; }

.hero-media { position: relative; }
.hero-halo {
    position: absolute; inset: -12% -6%;
    background: radial-gradient(ellipse at 50% 48%, var(--glow) 0%, rgb(from var(--tk-primary, #D98E32) r g b / .10) 42%, transparent 70%);
    z-index: 0; pointer-events: none;
}

/* Cover rail (CSS scroll-snap, no swiper) */
.cover-rail {
    position: relative; z-index: 1;
    display: flex; gap: 12px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    padding-block: 6px;
}
.cover-rail::-webkit-scrollbar { display: none; }
.cover-slide {
    flex: 0 0 100%;
    scroll-snap-align: start;
    aspect-ratio: 16 / 10;
    border-radius: var(--r-lg);
    overflow: hidden;
    border: 1px solid var(--hairline);
    box-shadow: 0 24px 50px -28px rgba(0, 0, 0, .85);
}
.cover-slide img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---------------- Trust strip ---------------- */
.trust-strip {
    display: flex; flex-wrap: wrap; justify-content: center; gap: 10px;
    padding-block: 22px;
    border-block: 1px solid var(--hairline);
    margin-block-start: 26px;
}
.trust-chip {
    display: inline-flex; align-items: center; gap: 9px;
    padding: 9px 16px; border-radius: 999px;
    background: var(--oud-panel); border: 1px solid var(--hairline);
    font-size: 12.5px; color: var(--muted); white-space: nowrap;
}
.trust-chip i { color: var(--amber); font-size: 1.05rem; }

/* ---------------- Generic horizontal rail ---------------- */
.oud-rail {
    display: flex; gap: 14px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    padding: 4px 2px 14px;
    scroll-padding-inline-start: 2px;
}
.oud-rail::-webkit-scrollbar { display: none; }
.oud-rail > * { scroll-snap-align: start; }

/* ---------------- Scent-family tiles ---------------- */
.scent-tile {
    position: relative;
    flex: 0 0 68vw; max-width: 280px;
    aspect-ratio: 4 / 5;
    border-radius: var(--r-lg);
    overflow: hidden;
    border: 1px solid var(--hairline);
    text-decoration: none;
    isolation: isolate;
    transition: transform .35s ease, border-color .35s ease, box-shadow .35s ease;
}
.scent-tile:hover { transform: translateY(-4px); border-color: var(--hairline-2); box-shadow: 0 22px 44px -20px rgba(0, 0, 0, .8); }
.scent-tile img.scent-img {
    position: absolute; inset: 0; width: 100%; height: 100%;
    object-fit: cover; z-index: -2;
    transition: transform .6s ease;
}
.scent-tile:hover img.scent-img { transform: scale(1.06); }
.scent-tile::after { /* family tint */
    content: ""; position: absolute; inset: 0; z-index: -1;
    background: linear-gradient(to top, rgb(from var(--tk-bg, #16100E) r g b / .92) 8%, rgb(from var(--tk-bg, #16100E) r g b / .35) 48%, rgb(from var(--tk-bg, #16100E) r g b / .08));
}
.scent-tile.tint-amber::after { box-shadow: inset 0 -120px 90px -60px rgb(from var(--tk-primary, #D98E32) r g b / .38); }
.scent-tile.tint-floral::after { box-shadow: inset 0 -120px 90px -60px rgb(from var(--tk-accent2, #AD5E7A) r g b / .38); }
.scent-tile.tint-woody::after { box-shadow: inset 0 -120px 90px -60px rgba(124, 86, 47, .48); }

.scent-tile-body { position: absolute; inset-block-end: 0; inset-inline: 0; padding: 16px; }
.scent-family {
    font-size: 10.5px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase;
}
.tint-amber .scent-family { color: var(--amber-2); }
.tint-floral .scent-family { color: color-mix(in srgb, var(--tk-accent2, #AD5E7A), #fff 30%); }
.tint-woody .scent-family { color: #C9A077; }
.scent-name {
    font-family: var(--font-d); font-size: 1.5rem; font-weight: 600;
    color: var(--txt); margin: 4px 0 8px; line-height: 1.15;
}
.scent-link {
    display: inline-flex; align-items: center; gap: 7px;
    font-size: 12px; color: var(--muted);
    padding-block-start: 8px;
    border-block-start: 1px solid var(--hairline);
}
.scent-tile:hover .scent-link { color: var(--amber-2); }

/* ---------------- Spotlight (featured) cards ---------------- */
.spot-card {
    flex: 0 0 64vw; max-width: 250px;
    background: linear-gradient(180deg, var(--oud-panel-2), var(--oud-panel));
    border: 1px solid var(--hairline);
    border-radius: var(--r-lg);
    padding: 14px;
    transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.spot-card:hover { transform: translateY(-4px); border-color: var(--hairline-2); box-shadow: 0 22px 48px -22px var(--glow); }
.spot-media {
    position: relative;
    aspect-ratio: 4 / 5;
    border-radius: var(--r-md);
    overflow: hidden;
    background:
        radial-gradient(ellipse at 50% 42%, var(--glow) 0%, rgb(from var(--tk-primary, #D98E32) r g b / .08) 46%, transparent 72%),
        var(--oud-bg-3);
}
.spot-media img {
    width: 100%; height: 100%; object-fit: cover; display: block;
    transition: transform .55s ease;
}
.spot-card:hover .spot-media img { transform: scale(1.05); }
.spot-name {
    font-family: var(--font-d); font-size: 1.25rem; font-weight: 600;
    color: var(--txt); margin: 12px 0 2px; line-height: 1.2;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    text-align: start; unicode-bidi: plaintext;
}
.spot-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-block-start: 6px; }

/* ---------------- Price (amber serif) ---------------- */
.oud-price {
    font-family: var(--font-d);
    font-size: 1.3rem; font-weight: 700;
    color: var(--amber-2);
    line-height: 1.15;
    margin: 0;
}
.oud-price-was { color: var(--dim); font-size: .85rem; margin: 0; }
.oud-ghost { visibility: hidden; }

/* ---------------- Add-to-cart round button ---------------- */
.oud-add-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; flex: 0 0 40px;
    border-radius: 50%; cursor: pointer;
    background: transparent;
    border: 1px solid var(--hairline-2);
    color: var(--amber-2); font-size: 1.15rem;
    transition: background .25s ease, color .25s ease, box-shadow .25s ease, transform .2s ease;
}
.oud-add-btn:hover {
    background: linear-gradient(135deg, var(--amber), var(--amber-2));
    color: #1A120D; box-shadow: 0 8px 22px -8px var(--glow);
}
.oud-add-btn:active { transform: scale(.92); }

.oud-soldout {
    font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
    color: var(--dim); border: 1px solid var(--hairline);
    border-radius: 999px; padding: 6px 12px;
}

/* ---------------- Product grid + cards ---------------- */
.oud-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}
.perfume-card {
    display: flex; flex-direction: column;
    background: var(--oud-panel);
    border: 1px solid var(--hairline);
    border-radius: var(--r-lg);
    padding: 14px;
    transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.perfume-card:hover { transform: translateY(-3px); border-color: var(--hairline-2); box-shadow: 0 20px 42px -22px var(--glow); }
.perfume-card a { text-decoration: none; }

.bottle-media {
    position: relative;
    aspect-ratio: 4 / 5;
    border-radius: var(--r-md);
    overflow: hidden;
    background:
        radial-gradient(ellipse at 50% 45%, rgb(from var(--tk-primary, #D98E32) r g b / .20) 0%, rgb(from var(--tk-primary, #D98E32) r g b / .05) 48%, transparent 74%),
        var(--oud-bg-3);
}
.bottle-media img {
    position: absolute; inset: 0; width: 100%; height: 100%;
    object-fit: cover; display: block;
    transition: opacity .45s ease, transform .55s ease;
}
.bottle-media img.peek { opacity: 0; }
.perfume-card:hover .bottle-media img.peek { opacity: 1; }
.perfume-card:hover .bottle-media img.primary { transform: scale(1.05); }
.perfume-card:hover .bottle-media.solo img.primary { transform: scale(1.07); }

.oud-chip {
    position: absolute; inset-block-start: 8px; inset-inline-start: 8px; z-index: 2;
    background: rgb(from var(--tk-bg, #16100E) r g b / .82);
    border: 1px solid var(--hairline-2);
    color: var(--amber-2);
    border-radius: 999px;
    font-size: 10.5px; font-weight: 600; letter-spacing: .06em;
    padding: 4px 10px;
    backdrop-filter: blur(6px);
}
.perfume-name {
    font-family: var(--font-d); font-size: 1.15rem; font-weight: 600;
    color: var(--txt); line-height: 1.2; margin: 10px 0 2px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    text-align: start; unicode-bidi: plaintext;
}
.perfume-sub {
    color: var(--muted); font-size: 12px; margin: 0 0 8px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    text-align: start; unicode-bidi: plaintext;
}
.perfume-foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; margin-block-start: auto; }
.perfume-card .oud-price { font-size: 1.15rem; }

/* ---------------- Toolbar (search / price / sort) ---------------- */
.oud-toolbar { display: grid; gap: 10px; margin-block-end: 18px; }
.oud-toolbar form { display: flex; gap: 8px; margin: 0; }
.oud-toolbar .grow { flex: 1 1 auto; min-width: 0; }

.oud-field, .oud-toolbar .form-control, .oud-toolbar .form-select {
    background-color: var(--oud-panel) !important;
    border: 1px solid var(--hairline) !important;
    color: var(--txt) !important;
    border-radius: var(--r-md) !important;
    padding: 10px 14px;
    font-size: 14px;
    box-shadow: none !important;
}
.oud-toolbar .form-control::placeholder { color: var(--dim); }
.oud-toolbar .form-control:focus, .oud-toolbar .form-select:focus { border-color: var(--amber) !important; }
.oud-icon-btn {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 46px; border: 1px solid var(--hairline-2); border-radius: var(--r-md);
    background: transparent; color: var(--amber-2); font-size: 1.1rem; cursor: pointer;
    transition: background .25s ease, color .25s ease;
}
.oud-icon-btn:hover { background: var(--amber); color: #1A120D; }

.oud-clear-filter {
    display: inline-flex; align-items: center; gap: 7px;
    font-size: 12px; color: var(--muted); text-decoration: none;
    border: 1px solid var(--hairline); border-radius: 999px;
    padding: 6px 13px; margin-block-start: 10px;
}
.oud-clear-filter:hover { color: var(--amber-2); border-color: var(--hairline-2); }

/* ---------------- Pagination ---------------- */
.pagination { gap: 6px; justify-content: center; }
.pagination .page-link {
    background: var(--oud-panel);
    border: 1px solid var(--hairline);
    color: var(--muted);
    border-radius: var(--r-sm);
    min-width: 38px; text-align: center;
}
.pagination .page-link:hover { color: var(--amber-2); border-color: var(--hairline-2); background: var(--oud-panel-2); }
.pagination .page-item.active .page-link {
    background: linear-gradient(135deg, var(--amber), var(--amber-2));
    border-color: transparent; color: #1A120D; font-weight: 700;
}
.pagination .page-item.disabled .page-link { background: transparent; color: var(--dim); border-color: var(--hairline); }

/* ---------------- Gifting band ---------------- */
.gift-band {
    display: flex; align-items: flex-start; gap: 16px;
    padding: 22px 20px;
    border-radius: var(--r-lg);
    background:
        radial-gradient(ellipse at 12% 0%, rgb(from var(--tk-primary, #D98E32) r g b / .12), transparent 55%),
        linear-gradient(180deg, var(--oud-panel-2), var(--oud-panel));
    border: 1px solid var(--hairline);
}
.gift-icon {
    flex: 0 0 52px; width: 52px; height: 52px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
    border: 1px solid var(--hairline-2);
    background: rgb(from var(--tk-primary, #D98E32) r g b / .1);
    color: var(--amber-2); font-size: 1.5rem;
}
.gift-title { font-family: var(--font-d); font-size: 1.45rem; font-weight: 600; margin: 0 0 4px; color: var(--txt); }
.gift-copy { color: var(--muted); font-size: 13.5px; margin: 0; max-width: 62ch; }

/* ---------------- Empty states (pure CSS bottle) ---------------- */
.oud-empty { text-align: center; padding-block: 40px 30px; }
.css-bottle {
    position: relative;
    width: 56px; height: 92px;
    margin-inline: auto;
    margin-block-end: 20px;
}
.css-bottle::before { /* cap + neck */
    content: "";
    position: absolute;
    inset-block-start: 0; inset-inline-start: 50%;
    transform: translateX(-50%);
    width: 20px; height: 22px;
    border-radius: 5px 5px 2px 2px;
    background: linear-gradient(180deg, var(--amber-deep), var(--amber));
    box-shadow: 0 26px 0 -8px rgb(from var(--tk-primary, #D98E32) r g b / .25);
}
.css-bottle::after { /* body */
    content: "";
    position: absolute;
    inset-block-end: 0; inset-inline: 0;
    height: 64px;
    border-radius: 14px 14px 16px 16px;
    border: 1.5px solid var(--hairline-2);
    background:
        linear-gradient(165deg, rgb(from var(--tk-text, #F3EADC) r g b / .12) 12%, transparent 36%),
        linear-gradient(180deg, transparent 30%, rgb(from var(--tk-primary, #D98E32) r g b / .35) 95%);
    box-shadow: 0 18px 34px -14px var(--glow);
}
.oud-empty-title { font-family: var(--font-d); font-size: 1.5rem; font-weight: 600; color: var(--txt); margin: 0 0 6px; }
.oud-empty-sub { color: var(--muted); font-size: 13.5px; margin: 0 0 18px; }

/* ---------------- Footer ---------------- */
.oud-footer {
    margin-block-start: 40px;
    border-block-start: 1px solid var(--hairline);
    background: linear-gradient(180deg, transparent, rgb(from var(--tk-primary, #D98E32) r g b / .045));
    padding-block: 30px 26px;
}
.oud-footer-inner { max-width: 1140px; margin-inline: auto; padding-inline: 18px; text-align: center; }
.oud-socials { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-block-end: 18px; }
.oud-social {
    display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; border-radius: 50%;
    border: 1px solid var(--hairline); color: var(--muted);
    font-size: 1.05rem; text-decoration: none;
    transition: color .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.oud-social:hover { color: var(--amber-2); border-color: var(--hairline-2); box-shadow: 0 0 16px -6px var(--glow); }

.oud-policy-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 18px; margin-block-end: 16px; padding: 0; list-style: none; }
.oud-policy-links a { color: var(--muted); font-size: 12.5px; text-decoration: none; }
.oud-policy-links a:hover { color: var(--amber-2); }

.oud-copy { color: var(--dim); font-size: 12.5px; line-height: 1.8; }
.oud-copy a { color: var(--muted); text-decoration: none; }
.oud-copy a:hover { color: var(--amber-2); }
.oud-hairline-orn { /* small gold ornament */
    width: 110px; height: 1px; margin: 0 auto 20px;
    background: linear-gradient(90deg, transparent, var(--amber), transparent);
    position: relative;
}
.oud-hairline-orn::after {
    content: ""; position: absolute; inset-block-start: -3px; inset-inline-start: 50%;
    width: 7px; height: 7px; transform: translateX(-50%) rotate(45deg);
    background: var(--amber);
}

.scaanme-wallet-buttons { padding-block: 8px; }

/* ---------------- Offcanvas cart ---------------- */
.offcanvas.offcanvas-end {
    width: min(420px, 94vw);
    background: var(--oud-bg-2);
    color: var(--txt);
    border-inline-start: 1px solid var(--hairline);
}
.offcanvas-header {
    display: flex; align-items: center;
    justify-content: space-between; gap: 14px;
    padding: 18px 20px;
    border-block-end: 1px solid var(--hairline);
}
.offcanvas-title { font-family: var(--font-d); font-weight: 600; font-size: 1.5rem; color: var(--txt); min-width: 0; margin: 0; }
.offcanvas-body { padding: 18px 20px; }
.offcanvas .btn-close, .modal .btn-close { filter: invert(.85) sepia(.3) saturate(2) hue-rotate(-15deg); }
/* Bootstrap ships the close button with a directional auto-margin
   (margin: -.5rem -.5rem -.5rem auto) that jams the X against the
   title in RTL. Neutralise it — flex space-between already places it. */
.offcanvas-header .btn-close { margin: 0; flex: 0 0 auto; }
.offcanvas-footer { padding: 14px 16px calc(14px + env(safe-area-inset-bottom)); border-block-start: 1px solid var(--hairline); display: flex; flex-direction: column; gap: 10px; }

.oud-cart-line {
    display: flex; gap: 12px; align-items: center;
    background: var(--oud-panel);
    border: 1px solid var(--hairline);
    border-radius: var(--r-md);
    padding: 10px;
    margin-block-end: 10px;
}
.oud-cart-thumb {
    width: 76px; height: 76px; flex: 0 0 76px;
    border-radius: var(--r-sm); object-fit: cover;
    border: 1px solid var(--hairline);
    background: var(--oud-bg-3);
}
.oud-cart-info { flex: 1; min-width: 0; }
.oud-cart-name {
    font-family: var(--font-d); font-size: 1.05rem; font-weight: 600;
    color: var(--txt); margin: 0;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    text-align: start; unicode-bidi: plaintext;
}
.oud-cart-sub { display: block; color: var(--dim); font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: start; unicode-bidi: plaintext; }
.oud-cart-price { font-family: var(--font-d); color: var(--amber-2); font-weight: 700; font-size: 1.05rem; margin: 2px 0 8px; }

.oud-qty-row { display: flex; align-items: center; gap: 6px; }
.oud-qty-btn {
    width: 30px; height: 30px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 50%; border: 1px solid var(--hairline-2);
    background: transparent; color: var(--txt); cursor: pointer;
    transition: background .2s ease, color .2s ease;
}
.oud-qty-btn:hover { background: var(--amber); color: #1A120D; }
.oud-qty-btn svg { width: 15px; height: 15px; }
.oud-qty-num { min-width: 26px; text-align: center; font-weight: 700; font-size: .95rem; color: var(--txt); }
.oud-qty-del {
    width: 30px; height: 30px; margin-inline-start: 8px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 50%; border: 1px solid rgb(from var(--tk-danger, #C24A3F) r g b / .55);
    background: transparent; color: var(--tk-danger, #D98077); cursor: pointer;
    transition: background .2s ease, color .2s ease;
}
.oud-qty-del:hover { background: var(--danger); color: #fff; }
.oud-qty-del svg { width: 15px; height: 15px; }

.oud-total { display: flex; justify-content: space-between; align-items: baseline; font-size: 1.05rem; font-weight: 600; color: var(--txt); margin: 0; }
.oud-total-amt { font-family: var(--font-d); font-size: 1.45rem; font-weight: 700; color: var(--amber-2); }

#empty-cart .oud-btn { width: 100%; }

/* ---------------- Modals (dark, X inside, overlay closes) ---------------- */
.modal-content {
    position: relative;
    background: var(--oud-bg-2);
    color: var(--txt);
    border: 1px solid var(--hairline-2);
    border-radius: var(--r-lg);
    box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .9);
}
.modal-header { border-block-end: 1px solid var(--hairline); }
.modal-footer { border-block-start: 1px solid var(--hairline); }
.modal-title { font-family: var(--font-d); font-weight: 600; color: var(--txt); }
.modal .form-label { color: var(--txt); }
.modal .form-control, .modal textarea.form-control {
    background-color: var(--oud-panel) !important;
    border: 1px solid var(--hairline) !important;
    color: var(--txt) !important;
    border-radius: var(--r-sm) !important;
}
.modal .form-control:focus { border-color: var(--amber) !important; box-shadow: 0 0 0 3px rgb(from var(--tk-primary, #D98E32) r g b / .15) !important; }
.modal .form-control::placeholder { color: var(--dim); }
.modal .form-check-label { color: var(--muted); }
.modal .form-check-input { background-color: var(--oud-bg-3); border-color: var(--hairline-2); }
.modal .form-check-input:checked { background-color: var(--amber); border-color: var(--amber); }
.modal small, .modal .text-muted { color: var(--dim) !important; }

/* ---------------- Share include re-skin ---------------- */
.product-share-card .share-title { color: var(--muted) !important; font-size: 12px !important; letter-spacing: .18em; text-transform: uppercase; font-weight: 700 !important; }
.product-share-card .share-icon {
    background: var(--oud-panel) !important;
    border: 1px solid var(--hairline) !important;
}
.product-share-card .share-icon:hover { background: var(--oud-panel-2) !important; border-color: var(--hairline-2) !important; box-shadow: 0 0 16px -6px var(--glow) !important; }
.product-share-card .share-icon.x { color: var(--txt) !important; }
.product-share-card .share-icon.email { color: var(--muted) !important; }

/* ---------------- Bottom bar (shared include) re-skin ---------------- */
.navbar-2 {
    background: rgb(from var(--tk-bg, #16100E) r g b / .94) !important;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 0 !important;
    border-block-start: 1px solid var(--hairline) !important;
}
.navbar-2 a { color: var(--muted) !important; }
.navbar-2 a.text-warning, .navbar-2 .text-warning { color: var(--amber) !important; }

/* ---------------- Single product page ---------------- */
.oud-back {
    display: inline-flex; align-items: center; gap: 8px;
    color: var(--muted); font-size: 13px; text-decoration: none;
    margin-block: 18px 4px;
}
.oud-back:hover { color: var(--amber-2); }

.pdp { display: grid; gap: 26px; padding-block: 10px 30px; }
.pdp-info { min-width: 0; }
.pdp-gallery { position: relative; }
.pdp-halo {
    position: absolute; inset: -10% -8%;
    background: radial-gradient(ellipse at 50% 45%, var(--glow) 0%, rgb(from var(--tk-primary, #D98E32) r g b / .08) 45%, transparent 72%);
    pointer-events: none;
}
.pdp-main {
    position: relative; z-index: 1; display: block;
    aspect-ratio: 1 / 1;
    border-radius: var(--r-lg); overflow: hidden;
    border: 1px solid var(--hairline);
    background: var(--oud-bg-3);
}
.pdp-main img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pdp-thumbs { position: relative; z-index: 1; margin-block-start: 10px; padding-block-end: 6px; }
.pdp-thumb {
    flex: 0 0 76px; width: 76px; height: 76px;
    border-radius: var(--r-sm); overflow: hidden;
    border: 1px solid var(--hairline); cursor: pointer;
    transition: border-color .25s ease;
}
.pdp-thumb:hover { border-color: var(--amber); }
.pdp-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

.pdp-name { font-family: var(--font-d); font-weight: 600; font-size: clamp(1.9rem, 7vw, 2.6rem); line-height: 1.08; margin: 4px 0 8px; }
.pdp-sub { color: var(--muted); font-size: 14.5px; margin: 0 0 14px; }
.pdp-price-row { display: flex; align-items: baseline; gap: 12px; margin-block-end: 14px; }
.pdp-price-row .oud-price { font-size: 2rem; }
.pdp-badges { display: flex; flex-wrap: wrap; gap: 8px; margin-block-end: 18px; }
.pdp-badge {
    font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
    color: var(--amber-2); border: 1px solid var(--hairline-2);
    border-radius: 999px; padding: 6px 13px;
    background: rgb(from var(--tk-primary, #D98E32) r g b / .07);
}
.pdp-badge.out { color: var(--dim); border-color: var(--hairline); background: transparent; }
.pdp-add { width: 100%; }
.pdp-desc { color: var(--muted); font-size: 14.5px; margin-block-start: 20px; }
.pdp-desc p { margin-block-end: .7em; }
.pdp-desc h1, .pdp-desc h2, .pdp-desc h3, .pdp-desc h4 { font-family: var(--font-d); color: var(--txt); }

/* ---------------- Categories page ---------------- */
.cat-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.cat-grid .scent-tile { flex: initial; max-width: none; width: 100%; }

/* ---------------- Policy page ---------------- */
.policy-prose { padding-block: 24px 36px; color: var(--muted); font-size: 14.5px; }
.policy-title {
    font-family: var(--font-d); font-weight: 600; color: var(--txt);
    font-size: clamp(1.8rem, 6.4vw, 2.5rem);
    padding-block-end: 14px; margin-block-end: 20px;
    border-block-end: 1px solid var(--hairline);
}
.policy-prose h1, .policy-prose h2, .policy-prose h3, .policy-prose h4 { font-family: var(--font-d); color: var(--txt); }
.policy-prose a { color: var(--amber-2); }
.policy-prose li { margin-block-end: .35em; }

/* ---------------- RTL nits ---------------- */
[dir="rtl"] .flip-x { transform: scaleX(-1); display: inline-block; }
[dir="rtl"] .oud-kicker::before { background: linear-gradient(270deg, var(--amber), transparent); }

/* ---------------- ≥760px layer ---------------- */
@media (min-width: 760px) {
    body { font-size: 16px; }
    .oud-page { padding-block-end: 30px; }
    .oud-section { padding-block: 46px; }

    .oud-hero {
        grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
        align-items: center;
        padding-block: 56px 20px;
        gap: 44px;
    }
    .trust-chip { font-size: 13.5px; }

    .scent-tile { flex-basis: 264px; }
    .spot-card { flex-basis: 236px; }

    .oud-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
    .oud-toolbar {
        grid-template-columns: minmax(0, 1.4fr) minmax(0, 1.2fr) minmax(0, .9fr);
        align-items: center;
    }
    .perfume-card { padding: 16px; }
    .perfume-name { font-size: 1.25rem; }

    .gift-band { align-items: center; padding: 28px 30px; }

    .pdp { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 44px; padding-block: 20px 44px; }
    .pdp-add { width: auto; min-width: 280px; }

    .cat-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
}

@media (min-width: 1024px) {
    .oud-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ---------------- Reduced motion ---------------- */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .oud-fx .wisp { animation: none !important; }
    *, *::before, *::after {
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
    }
}


/* ============================================================
   Cart toast — bulletproof compact pill.
   Overrides the legacy inline showAlert() sizing (width:75% /
   inset-inline:0) that made the Tabler solid alert blow up to a
   half-screen green panel. Forces a centered top toast, auto height.
   ============================================================ */
.alert-float {
    position: fixed !important;
    inset-block-start: 16px !important;
    inset-block-end: auto !important;
    bottom: auto !important;
    inset-inline: 16px !important;
    z-index: 4000;
    width: auto !important;
    max-width: 420px !important;
    margin-inline: auto !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 13px 20px !important;
    border: 0 !important;
    border-radius: 14px !important;
    text-align: center !important;
    font-weight: 600;
    font-size: 14.5px;
    line-height: 1.4;
    background: var(--tk-success, #1f7a4d) !important;
    color: #fff !important;
    box-shadow: 0 16px 38px -10px rgba(0, 0, 0, .42);
    opacity: 0;
    transform: translateY(-12px);
    transition: opacity .25s ease, transform .25s ease;
    pointer-events: none;
}
.alert-float.show {
    display: block !important;
    opacity: 1 !important;
    transform: none !important;
}
.alert-float .btn-close,
.alert-float .alert-icon { display: none !important; }
@media (prefers-reduced-motion: reduce) {
    .alert-float { transition: none; }
}


/* ============================================================
   GLOBAL CONTAINMENT BASELINE (founder remark: diagonal-scroll
   drift / horizontal "wiggle" on mobile + zoom-out).
   overflow-x:clip on html is sticky-safe (unlike hidden) and
   stops the horizontal pan; overscroll-behavior-x:none kills the
   rubber-band; max-width:100% + min-width:0 prevent any child
   from forcing the document wider than the viewport.
   ============================================================ */
html { overflow-x: clip; }
body { overflow-x: clip; overscroll-behavior-x: none; max-width: 100%; }
/* horizontal scrollers keep their swipe to themselves */
.car-track, .reel, .film-reel, .tm-track, .letters, .marquee, .marquee-track,
[class*="-track"], [class*="-rail"], [class*="-carousel"], [class*="-scroll"] {
    overscroll-behavior-x: contain;
    max-width: 100vw;
}