/* =========================================================================
   DESIGN JEWEL — "Atelier" storefront design system
   -------------------------------------------------------------------------
   One stylesheet, no vendor theme, no Bootstrap. It owns everything the
   storefront paints: tokens, reset, the grid, the utility subset the views
   use, and every component.

   Reading order
     01 tokens            08 header / navigation
     02 reset + base      09 hero
     03 typography        10 cards
     04 layout + grid     11 page banner
     05 utilities         12 shop, product, cart, checkout
     06 forms + buttons   13 accordion / tabs / lightbox
     07 decor             14 footer, floats, motion, print

   Two house rules:
     - Direction is handled with logical properties (margin-inline, inset-inline)
       so Arabic needs no second stylesheet.
     - Nothing is a hard-cornered rectangle. Every surface takes a radius from
       the --r-* scale, and controls are pills.
   ========================================================================= */

/* ============================================================ 01 tokens == */

:root {
    /* ------------------------------------------------------------------
       The whole palette is the logo. Its monogram samples at #F0C054 — a
       bright warm gold at hue 41 — so that is --gold-400, and every other
       value on the site is that one hue carried up into creams and down
       into bronzes. Nothing here is a neutral grey: the paper and even the
       body text are tinted towards 41, which is what makes the page read
       as sunlit rather than merely beige.
       ------------------------------------------------------------------ */

    --gold-50:  #FFF9EC;
    --gold-100: #FDEFCB;
    --gold-200: #FADFA0;
    --gold-300: #F6CE72;
    --gold-400: #F0C054;  /* the logo, exactly */
    --gold-500: #E8A93C;
    --gold-600: #D18F2A;
    --gold-700: #A9701F;
    --gold-800: #7A4F16;

    /* Ink & paper — light */
    --paper: #FFFBF2;
    --paper-2: #FDF3E0;
    --surface: #FFFFFF;
    --surface-2: #FFF9EC;
    --ink: #2E2113;
    --ink-soft: #5A452A;
    --muted: #8C7554;
    --line: rgba(46, 33, 19, .10);
    --line-soft: rgba(46, 33, 19, .055);

    /* The accent, stepped off the logo so it still carries as text on white. */
    --gold: var(--gold-600);
    --gold-bright: var(--gold-400);
    --gold-deep: var(--gold-700);
    --gold-wash: rgba(240, 192, 84, .18);
    --gold-grad: linear-gradient(118deg, #D18F2A 0%, #F0C054 40%, #FDEFCB 57%, #E8A93C 100%);

    /* Text on a gold fill — never white, which goes muddy over it. */
    --on-gold: #2E2113;

    /* Always-dark surfaces (banner, footer, hero stage). Warm espresso rather
       than black, so the gradients over them read as light, not smoke. */
    --obsidian: #26190A;
    --obsidian-2: #33220D;
    --on-dark: #FFF6E4;
    --on-dark-muted: #C2AC86;
    --line-dark: rgba(255, 246, 228, .16);

    --danger: #C2492F;

    /* Type */
    --font-display: 'Fraunces', 'Tajawal', Georgia, serif;
    --font-body: 'Plus Jakarta Sans', 'Tajawal', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --tracking-eyebrow: .26em;
    --tracking-caps: .14em;

    /* Rhythm */
    --gutter: 1.5rem;
    --container: 1320px;
    --section-y: clamp(4.5rem, 9vw, 8.5rem);

    /* Corners. Nothing in the template is square. */
    --r-xs: 10px;
    --r-sm: 14px;
    --r-md: 20px;
    --r-lg: 28px;
    --r-xl: 40px;
    --r-pill: 999px;

    /* Shadows are wide and faint — depth without a visible edge */
    --shadow-soft: 0 1rem 2.5rem -1.5rem rgba(23, 20, 15, .25);
    --shadow-lift: 0 1.5rem 3.75rem -1.875rem rgba(23, 20, 15, .3);
    --shadow-plate: 0 2rem 5rem -2rem rgba(23, 20, 15, .35);

    --ease: cubic-bezier(.22, 1, .36, 1);
    --ease-in-out: cubic-bezier(.65, 0, .35, 1);

    --header-h: 94px;
    --header-h-sticky: 76px;

    color-scheme: light;
}

[data-theme="dark"] {
    --paper: #1A1206;
    --paper-2: #211708;
    --surface: #251A09;
    --surface-2: #2D210C;
    --ink: #FFF6E4;
    --ink-soft: #E7D7B6;
    --muted: #AE9770;
    --line: rgba(255, 246, 228, .13);
    --line-soft: rgba(255, 246, 228, .065);

    /* On espresso the logo gold is itself the readable value, so the ramp
       shifts one step brighter than it sits on paper. */
    --gold: var(--gold-400);
    --gold-bright: var(--gold-200);
    --gold-deep: var(--gold-600);
    --gold-wash: rgba(240, 192, 84, .14);

    --on-gold: #2E2113;

    --obsidian: #190F04;
    --obsidian-2: #241607;

    --shadow-soft: 0 1rem 2.5rem -1.5rem rgba(0, 0, 0, .7);
    --shadow-lift: 0 1.5rem 3.75rem -1.875rem rgba(0, 0, 0, .78);
    --shadow-plate: 0 2rem 5rem -2rem rgba(0, 0, 0, .85);

    color-scheme: dark;
}

/* Arabic runs on one modern geometric family for both roles. */
[dir="rtl"] {
    --font-display: 'Tajawal', 'Fraunces', Georgia, serif;
    --font-body: 'Tajawal', 'Plus Jakarta Sans', system-ui, sans-serif;
    --tracking-eyebrow: .18em;
    --tracking-caps: .08em;
}

/* Theme switch: kill transitions for one frame or every colour smears at once. */
.jw-theme-switching,
.jw-theme-switching * {
    transition: none !important;
}

/* ====================================================== 02 reset + base == */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
}

body {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 300;
    line-height: 1.75;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    transition: background-color .4s var(--ease), color .4s var(--ease);
}

body.jw-locked {
    overflow: hidden;
}

img,
svg,
video {
    max-width: 100%;
    height: auto;
    display: block;
}

a {
    color: inherit;
    text-decoration: none;
    transition: color .3s var(--ease);
}

a:hover {
    color: var(--gold);
}

button {
    font: inherit;
    color: inherit;
}

ul,
ol {
    margin: 0 0 1rem;
    padding-inline-start: 1.25rem;
}

p {
    margin: 0 0 1.15rem;
}

hr {
    border: 0;
    border-top: 1px solid var(--line);
    margin: 2rem 0;
}

code {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: .875em;
    color: var(--gold);
}

::selection {
    background: var(--gold-400);
    color: var(--on-gold);
}

:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 3px;
    border-radius: var(--r-xs);
}

/* Scrollbar, so the chrome matches the page in both themes */
* {
    scrollbar-color: var(--gold-deep) transparent;
    scrollbar-width: thin;
}

*::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

*::-webkit-scrollbar-track {
    background: transparent;
}

*::-webkit-scrollbar-thumb {
    background: var(--gold-deep);
    border-radius: var(--r-pill);
}

/* ======================================================== 03 typography == */

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-display);
    font-weight: 400;
    line-height: 1.1;
    margin: 0 0 1rem;
    color: var(--ink);
    letter-spacing: -.015em;
    /* Fraunces is variable: lower optical size keeps the display cuts soft
       rather than letting the high-contrast end sharpen up at large sizes. */
    font-variation-settings: "SOFT" 40, "WONK" 0;
}

[dir="rtl"] h1,
[dir="rtl"] h2,
[dir="rtl"] h3,
[dir="rtl"] h4,
[dir="rtl"] h5,
[dir="rtl"] h6 {
    line-height: 1.45;
    letter-spacing: 0;
    font-weight: 500;
    font-variation-settings: normal;
}

h1 { font-size: clamp(2.5rem, 5.6vw, 4.4rem); }
h2 { font-size: clamp(1.9rem, 4vw, 3.2rem); }
h3 { font-size: clamp(1.2rem, 1.9vw, 1.5rem); }
h4 { font-size: clamp(1.05rem, 1.5vw, 1.25rem); }
h5 { font-size: 1.05rem; }
h6 { font-size: 1rem; }

strong, b { font-weight: 600; }

.jw-lead {
    font-size: clamp(1.05rem, 1.5vw, 1.2rem);
    color: var(--ink-soft);
    font-weight: 300;
}

/* Prose coming out of the rich-text editor (articles, policies, descriptions) */
.jw-prose { font-size: 1.0625rem; }
.jw-prose h2, .jw-prose h3, .jw-prose h4, .jw-prose h5 { margin-top: 2.25rem; }
.jw-prose img { margin: 2rem 0; border-radius: var(--r-md); }
.jw-prose ul, .jw-prose ol { margin-bottom: 1.5rem; }
.jw-prose li { margin-bottom: .5rem; }
.jw-prose a { color: var(--gold); text-decoration: underline; text-underline-offset: .2em; }

.jw-prose blockquote {
    margin: 2rem 0;
    padding: 1.25rem 1.5rem;
    border-inline-start: 2px solid var(--gold);
    border-radius: var(--r-sm);
    background: var(--surface-2);
    font-family: var(--font-display);
    font-size: 1.25rem;
    color: var(--ink-soft);
}

.jw-prose table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    margin: 1.5rem 0;
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    overflow: hidden;
}

.jw-prose th,
.jw-prose td {
    border-bottom: 1px solid var(--line);
    padding: .7rem .95rem;
    text-align: start;
}

.jw-prose tr:last-child th,
.jw-prose tr:last-child td { border-bottom: 0; }

/* Latin fragments inside Arabic copy: phone numbers, prices, SKUs, e-mails. */
.ltr-text {
    direction: ltr;
    unicode-bidi: isolate;
    display: inline-block;
}

/* ===================================================== 04 layout + grid == */

.container {
    width: 100%;
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: var(--gutter);
}

.container-narrow {
    max-width: 880px;
}

section {
    position: relative;
    padding-block: var(--section-y);
}

section.jw-tight { padding-block: clamp(3rem, 5vw, 4.5rem); }

.jw-alt { background: var(--paper-2); }

.jw-alt::before {
    content: "";
    position: absolute;
    inset-inline: 0;
    top: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--gold-300), transparent);
}

/* --- 12-column flex grid ------------------------------------------------ */

.row {
    display: flex;
    flex-wrap: wrap;
    margin-inline: calc(var(--gx, 1.5rem) / -2);
    --gy: 0rem;
}

.row > * {
    width: 100%;
    max-width: 100%;
    padding-inline: calc(var(--gx, 1.5rem) / 2);
    margin-top: var(--gy, 0);
}

.g-4 { --gx: 1.5rem; --gy: 1.5rem; }
.g-5 { --gx: 2.25rem; --gy: 2.25rem; }

/* The scale is twelfths; only the steps the views place are declared, so a new
   width is added here the day a layout needs it. */
.col { flex: 1 0 0%; }
.col-12 { flex: 0 0 auto; width: 100%; }

@media (min-width: 576px) {
    .col-sm-6 { flex: 0 0 auto; width: 50%; }
}

@media (min-width: 768px) {
    .col-md-6 { flex: 0 0 auto; width: 50%; }
    .col-md-8 { flex: 0 0 auto; width: 66.6667%; }
}

@media (min-width: 992px) {
    .col-lg-2 { flex: 0 0 auto; width: 16.6667%; }
    .col-lg-3 { flex: 0 0 auto; width: 25%; }
    .col-lg-4 { flex: 0 0 auto; width: 33.3333%; }
    .col-lg-5 { flex: 0 0 auto; width: 41.6667%; }
    .col-lg-6 { flex: 0 0 auto; width: 50%; }
    .col-lg-7 { flex: 0 0 auto; width: 58.3333%; }
    .col-lg-8 { flex: 0 0 auto; width: 66.6667%; }
    .col-lg-9 { flex: 0 0 auto; width: 75%; }

    .offset-lg-1 { margin-inline-start: 8.3333%; }
}

/* ========================================================= 05 utilities == */

.d-block { display: block !important; }
.d-flex { display: flex !important; }

.flex-wrap { flex-wrap: wrap; }
.justify-content-center { justify-content: center; }
.align-items-center { align-items: center; }

.gap-3 { gap: 1rem; }

.text-center { text-align: center; }

.text-muted { color: var(--muted) !important; }
.text-danger { color: var(--danger) !important; }
.text-gold { color: var(--gold) !important; }

.small { font-size: .8125rem; }
.fs-4 { font-size: 1.35rem; }

.w-100 { width: 100%; }

.mt-2 { margin-top: .6rem !important; }
.mt-3 { margin-top: 1rem !important; }
.mt-4 { margin-top: 1.75rem !important; }
.mt-5 { margin-top: 2.75rem !important; }
.mb-0 { margin-bottom: 0 !important; }
.mb-2 { margin-bottom: .6rem !important; }
.mb-3 { margin-bottom: 1rem !important; }
.mb-4 { margin-bottom: 1.75rem !important; }
.mb-5 { margin-bottom: 2.75rem !important; }

/* ============================================================= 06 forms == */

label {
    display: block;
    margin-bottom: .55rem;
    font-size: .74rem;
    font-weight: 500;
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
    color: var(--muted);
}

[dir="rtl"] label { text-transform: none; font-size: .85rem; }

.form-control,
select,
textarea,
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="password"],
input[type="number"],
input[type="search"] {
    width: 100%;
    padding: .95rem 1.15rem;
    background: var(--surface);
    color: var(--ink);
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    font-family: inherit;
    font-size: .95rem;
    font-weight: 300;
    transition: border-color .3s var(--ease), box-shadow .3s var(--ease), background-color .3s var(--ease);
    appearance: none;
}

textarea.form-control { resize: vertical; min-height: 7rem; border-radius: var(--r-md); }

select.form-control {
    /* Chevron drawn inline so no icon font is needed; flipped for RTL below. */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23D18F2A' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1.15rem center;
    background-size: 12px;
    padding-inline-end: 2.7rem;
}

[dir="rtl"] select.form-control {
    background-position: left 1.15rem center;
}

.form-control:focus {
    outline: none;
    border-color: var(--gold);
    box-shadow: 0 0 0 4px var(--gold-wash);
}

.form-control::placeholder { color: var(--muted); opacity: .7; }

input[type="file"].form-control { padding: .75rem 1.1rem; font-size: .85rem; }

.form-group { margin-bottom: 1.5rem; }

/* Checkbox / radio — rounded, hairline, gold fill */
.form-check {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: .7rem;
    margin-bottom: .85rem;
}

.form-check-input {
    flex: 0 0 auto;
    width: 1.15rem;
    height: 1.15rem;
    margin-top: .34rem;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 6px;
    appearance: none;
    cursor: pointer;
    transition: background-color .25s var(--ease), border-color .25s var(--ease);
}

.form-check-input[type="radio"] { border-radius: 50%; }

.form-check-input:checked {
    background-color: var(--gold);
    border-color: var(--gold);
}

.form-check-input[type="checkbox"]:checked {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 10'%3E%3Cpath d='M1 5l3.5 3.5L11 1.5' fill='none' stroke='%232E2113' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-size: 10px;
    background-position: center;
    background-repeat: no-repeat;
}

.form-check-input[type="radio"]:checked {
    box-shadow: inset 0 0 0 3.5px var(--surface);
}

.form-check-label {
    margin: 0;
    font-size: .95rem;
    font-weight: 300;
    letter-spacing: 0;
    text-transform: none;
    color: var(--ink);
    cursor: pointer;
}

.field-validation-error,
.validation-summary-errors {
    display: block;
    margin-top: .4rem;
    font-size: .8rem;
    color: var(--danger);
}

.validation-summary-errors ul { margin: 0; padding-inline-start: 1.1rem; }

/* ----------------------------------------------------------- buttons --- */

.btn {
    --btn-bg: var(--ink);
    --btn-fg: var(--paper);
    --btn-line: var(--ink);
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .6rem;
    padding: 1.05rem 2.2rem;
    border: 1px solid var(--btn-line);
    border-radius: var(--r-pill);
    background: var(--btn-bg);
    color: var(--btn-fg);
    font-family: var(--font-body);
    font-size: .76rem;
    font-weight: 600;
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
    line-height: 1;
    cursor: pointer;
    overflow: hidden;
    isolation: isolate;
    transition: color .4s var(--ease), border-color .4s var(--ease),
                transform .3s var(--ease), box-shadow .4s var(--ease);
}

[dir="rtl"] .btn { text-transform: none; font-size: .9rem; font-weight: 500; }

/* Hover is a sweep of gold rising from the baseline, not a colour swap. */
.btn::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: var(--gold-grad);
    transform: scaleY(0);
    transform-origin: bottom;
    transition: transform .45s var(--ease);
}

.btn:hover,
.btn:focus-visible {
    color: var(--on-gold);
    border-color: transparent;
    transform: translateY(-2px);
    box-shadow: var(--shadow-soft);
}

.btn:hover::before,
.btn:focus-visible::before { transform: scaleY(1); }

.btn-gold {
    --btn-bg: var(--gold);
    --btn-fg: var(--on-gold);
    --btn-line: var(--gold);
}

.btn-outline {
    --btn-bg: transparent;
    --btn-fg: var(--ink);
    --btn-line: var(--line);
}

.btn-light {
    --btn-bg: rgba(255, 246, 228, .09);
    --btn-fg: var(--on-dark);
    --btn-line: var(--line-dark);
}

.btn-lg { padding: 1.25rem 2.9rem; font-size: .8rem; }
.btn-sm { padding: .78rem 1.5rem; font-size: .7rem; }

.btn:disabled,
.btn.disabled {
    opacity: .4;
    pointer-events: none;
}

/* Text link with a rule that retracts towards the start edge on hover */
.jw-link {
    position: relative;
    display: inline-block;
    padding-block-end: .35rem;
    font-size: .76rem;
    font-weight: 600;
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
    color: var(--ink);
}

[dir="rtl"] .jw-link { text-transform: none; font-size: .92rem; font-weight: 500; }

.jw-link::after {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    bottom: 0;
    width: 100%;
    height: 1.5px;
    border-radius: var(--r-pill);
    background: currentColor;
    transform: scaleX(1);
    transform-origin: inline-end;
    transition: transform .45s var(--ease);
}

.jw-link:hover { color: var(--gold); }
.jw-link:hover::after { transform: scaleX(0); }

/* ============================================================= 07 decor == */

/* Paper grain. One fixed layer over the whole page; cheap and sets the mood. */
.jw-grain {
    position: fixed;
    inset: 0;
    z-index: 9000;
    pointer-events: none;
    opacity: .2;
    mix-blend-mode: multiply;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.38'/%3E%3C/svg%3E");
}

[data-theme="dark"] .jw-grain { mix-blend-mode: screen; opacity: .12; }

/* Reading progress, a soft gold line at the very top */
.jw-progress {
    position: fixed;
    inset-inline-start: 0;
    top: 0;
    z-index: 8600;
    height: 3px;
    width: 100%;
    border-radius: var(--r-pill);
    transform: scaleX(0);
    transform-origin: inline-start;
    background: var(--gold-grad);
}

/* --- gradient panels ----------------------------------------------------
   Every dark stage in the template — the banner, the hero fallback, the
   commission band — paints one of these instead of a photograph. Layered
   radials plus two slowly drifting orbs: no image request, nothing to go
   stale, and it always carries the brand's own colour.                   */

.jw-mesh {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    background:
        radial-gradient(68% 86% at 14% 8%, rgba(240, 192, 84, .44), transparent 62%),
        radial-gradient(56% 74% at 88% 2%, rgba(232, 169, 60, .5), transparent 64%),
        radial-gradient(84% 120% at 50% 118%, rgba(26, 16, 5, .88), transparent 70%),
        linear-gradient(158deg, #3E2A10 0%, #26190A 54%, #4A340F 100%);
}

.jw-mesh::before,
.jw-mesh::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    opacity: .5;
}

.jw-mesh::before {
    width: 38vw;
    height: 38vw;
    min-width: 320px;
    min-height: 320px;
    inset-block-start: -12%;
    inset-inline-start: -6%;
    background: radial-gradient(circle, rgba(250, 223, 160, .72), transparent 70%);
    animation: jw-drift-a 26s var(--ease-in-out) infinite alternate;
}

.jw-mesh::after {
    width: 30vw;
    height: 30vw;
    min-width: 260px;
    min-height: 260px;
    inset-block-end: -16%;
    inset-inline-end: -4%;
    background: radial-gradient(circle, rgba(232, 169, 60, .62), transparent 70%);
    animation: jw-drift-b 32s var(--ease-in-out) infinite alternate;
}

/* The light twin, for panels that sit on the cream palette. */
.jw-mesh.is-light {
    background:
        radial-gradient(70% 90% at 18% 6%, rgba(240, 192, 84, .5), transparent 62%),
        radial-gradient(60% 80% at 92% 10%, rgba(253, 239, 203, .95), transparent 64%),
        linear-gradient(158deg, #FFF9EC 0%, #FDEFCB 56%, #FADFA0 100%);
}

[data-theme="dark"] .jw-mesh.is-light {
    background:
        radial-gradient(70% 90% at 18% 6%, rgba(240, 192, 84, .3), transparent 62%),
        radial-gradient(60% 80% at 92% 10%, rgba(232, 169, 60, .3), transparent 64%),
        linear-gradient(158deg, #3A2810 0%, #251A09 56%, #45300F 100%);
}

.jw-mesh.is-light::before { opacity: .35; }
.jw-mesh.is-light::after { opacity: .3; }

@keyframes jw-drift-a {
    to { transform: translate3d(14%, 18%, 0) scale(1.18); }
}

@keyframes jw-drift-b {
    to { transform: translate3d(-16%, -14%, 0) scale(1.22); }
}

/* Small-caps gold label that opens a block */
.jw-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .7rem;
    margin-bottom: 1.1rem;
    font-family: var(--font-body);
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: var(--tracking-eyebrow);
    text-transform: uppercase;
    color: var(--gold);
}

[dir="rtl"] .jw-eyebrow { text-transform: none; font-size: .88rem; font-weight: 500; }

.jw-eyebrow::before {
    content: "";
    width: 1.75rem;
    height: 2px;
    border-radius: var(--r-pill);
    background: currentColor;
    opacity: .6;
}

.jw-eyebrow.is-centered { justify-content: center; }
.jw-eyebrow.is-centered::after {
    content: "";
    width: 1.75rem;
    height: 2px;
    border-radius: var(--r-pill);
    background: currentColor;
    opacity: .6;
}

/* Soft dotted rule — the studio's divider */
.jw-rule {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .6rem;
    margin: 1.4rem auto;
    width: min(200px, 60%);
    color: var(--gold);
}

/* Symmetric fade at both ends, so the rule reads the same in either direction. */
.jw-rule::before,
.jw-rule::after {
    content: "";
    flex: 1;
    height: 2px;
    border-radius: var(--r-pill);
    background: linear-gradient(90deg, transparent, currentColor, transparent);
}

.jw-rule i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
    flex: 0 0 auto;
}

/* Start-aligned: dot first, then a single short rule running away from it. */
.jw-rule.is-start {
    margin-inline: 0;
    justify-content: flex-start;
    width: 110px;
}

.jw-rule.is-start::before { display: none; }

.jw-rule.is-start::after {
    background: currentColor;
    opacity: .5;
}

/* Section opener: eyebrow, display heading, rule, lead */
.jw-sectionhead {
    max-width: 44rem;
    margin: 0 auto clamp(2.5rem, 5vw, 4rem);
    text-align: center;
}

.jw-sectionhead.is-start {
    margin-inline: 0;
    text-align: start;
}

.jw-sectionhead h2 { margin-bottom: 0; }
.jw-sectionhead p { margin: 0; color: var(--muted); font-size: 1.05rem; }

/* Mat: a rounded plate the artwork is mounted on, rather than a bled photo.
   What this studio uploads is logos and lettering on white, which disappears
   when it is bled to the edge of a dark card. */
.jw-mat {
    position: relative;
    overflow: hidden;
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    isolation: isolate;
    transition: box-shadow .5s var(--ease), transform .5s var(--ease);
}

.jw-mat > img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: clamp(.9rem, 2.5vw, 1.9rem);
    transition: transform .9s var(--ease);
}

.jw-mat.is-cover > img { object-fit: cover; padding: 0; }

.jw-ratio-square { aspect-ratio: 1 / 1; }
.jw-ratio-portrait { aspect-ratio: 4 / 5; }
.jw-ratio-landscape { aspect-ratio: 16 / 10; }

.jw-hover:hover .jw-mat {
    transform: translateY(-4px);
    border-color: var(--gold-300);
    box-shadow: var(--shadow-lift), 0 0 0 4px var(--gold-wash);
}

.jw-hover:hover .jw-mat > img { transform: scale(1.035); }

/* Marquee ribbon of service words */
.jw-marquee {
    --speed: 46s;
    overflow: hidden;
    padding-block: 1.5rem;
    background: var(--paper-2);
    user-select: none;
}

.jw-marquee-track {
    display: flex;
    width: max-content;
    animation: jw-marquee var(--speed) linear infinite;
}

/* One group of words; jewel.js clones it so the loop has somewhere to scroll. */
.jw-marquee-track > div {
    display: flex;
    align-items: center;
    gap: 3.5rem;
    padding-inline-end: 3.5rem;
}

[dir="rtl"] .jw-marquee-track { animation-direction: reverse; }

.jw-marquee:hover .jw-marquee-track { animation-play-state: paused; }

.jw-marquee span {
    display: inline-flex;
    align-items: center;
    gap: 3.5rem;
    font-family: var(--font-display);
    font-size: clamp(1.25rem, 2.4vw, 2rem);
    color: var(--ink);
    white-space: nowrap;
}

.jw-marquee span::after {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--gold);
    flex: 0 0 auto;
}

@keyframes jw-marquee {
    to { transform: translateX(-50%); }
}

/* Inline SVG icon */
.ic {
    width: 1em;
    height: 1em;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex: 0 0 auto;
}

.ic-fill { fill: currentColor; stroke: none; }

/* Directional glyphs (arrows, chevrons) point the other way in Arabic. */
[dir="rtl"] .ic-flip { transform: scaleX(-1); }

/* Empty state */
.jw-empty {
    padding: clamp(3rem, 7vw, 5rem) 1.5rem;
    text-align: center;
    background: var(--surface-2);
    border: 1px dashed var(--line);
    border-radius: var(--r-lg);
    color: var(--muted);
    font-family: var(--font-display);
    font-size: 1.25rem;
}

.jw-empty .btn { margin-top: 1.5rem; }

/* ================================================ 08 header / navigation */

/* The bar itself is invisible; once the page moves, the inner container
   becomes a floating glass pill. */
#header {
    position: fixed;
    inset-inline: 0;
    top: 0;
    z-index: 7000;
    height: var(--header-h);
    display: flex;
    align-items: center;
    transition: height .4s var(--ease), color .4s var(--ease);
}

#header.is-transparent { color: var(--on-dark); }

#header.is-stuck {
    height: var(--header-h-sticky);
    color: var(--ink);
}

#header > .container {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    border-radius: var(--r-pill);
    transition: background-color .4s var(--ease), box-shadow .4s var(--ease),
                padding .4s var(--ease), backdrop-filter .4s var(--ease);
}

#header.is-stuck > .container {
    max-width: calc(var(--container) - 2rem);
    padding: .5rem .75rem .5rem 1.4rem;
    background: color-mix(in srgb, var(--surface) 76%, transparent);
    backdrop-filter: blur(18px) saturate(170%);
    box-shadow: var(--shadow-lift);
}

[dir="rtl"] #header.is-stuck > .container { padding: .5rem 1.4rem .5rem .75rem; }

.jw-logo {
    display: inline-flex;
    align-items: center;
    gap: .8rem;
    flex: 0 0 auto;
    margin-inline-end: auto;
}

.jw-logo img {
    width: auto;
    height: 44px;
    transition: height .4s var(--ease);
}

#header.is-stuck .jw-logo img { height: 36px; }

.jw-logo-name {
    display: none;
    font-family: var(--font-display);
    font-size: 1.1rem;
    font-weight: 500;
    letter-spacing: .02em;
    line-height: 1;
}

@media (min-width: 400px) {
    .jw-logo-name { display: block; }
}

/* --- desktop nav --- */

.jw-nav { display: none; }

.jw-nav > ul {
    display: flex;
    align-items: center;
    gap: .25rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.jw-nav > ul > li { position: relative; }

.jw-nav > ul > li > a {
    position: relative;
    display: block;
    padding: .65rem clamp(.65rem, 1.1vw, 1rem);
    border-radius: var(--r-pill);
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
    white-space: nowrap;
    transition: background-color .3s var(--ease), color .3s var(--ease);
}

[dir="rtl"] .jw-nav > ul > li > a {
    text-transform: none;
    font-size: .95rem;
    font-weight: 500;
    letter-spacing: 0;
}

.jw-nav > ul > li:hover > a { background: var(--gold-wash); color: var(--gold); }

.jw-nav > ul > li.is-current > a {
    background: var(--gold-wash);
    color: var(--gold);
}

#header.is-transparent:not(.is-stuck) .jw-nav > ul > li:hover > a,
#header.is-transparent:not(.is-stuck) .jw-nav > ul > li.is-current > a {
    background: rgba(255, 246, 228, .14);
    color: var(--gold-bright);
}

.jw-nav .jw-submenu {
    position: absolute;
    top: calc(100% + .5rem);
    inset-inline-start: 0;
    min-width: 13rem;
    margin: 0;
    padding: .5rem;
    list-style: none;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    box-shadow: var(--shadow-lift);
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: opacity .3s var(--ease), transform .3s var(--ease), visibility .3s;
}

.jw-nav > ul > li:hover .jw-submenu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.jw-nav .jw-submenu a {
    display: block;
    padding: .6rem .9rem;
    border-radius: var(--r-xs);
    font-size: .88rem;
    color: var(--ink);
    white-space: nowrap;
    transition: background-color .25s var(--ease), color .25s var(--ease);
}

.jw-nav .jw-submenu a:hover {
    color: var(--gold);
    background: var(--gold-wash);
}

@media (min-width: 1100px) {
    .jw-nav { display: block; }
}

/* --- header tools --- */

.jw-tools {
    display: flex;
    align-items: center;
    gap: .25rem;
    flex: 0 0 auto;
}

.jw-tool {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.7rem;
    height: 2.7rem;
    border: 0;
    border-radius: 50%;
    background: transparent;
    font-size: 1.05rem;
    cursor: pointer;
    transition: color .3s var(--ease), background-color .3s var(--ease);
}

.jw-tool:hover {
    color: var(--gold);
    background: var(--gold-wash);
}

.jw-tool.jw-lang {
    font-family: var(--font-display);
    font-size: .95rem;
    font-weight: 500;
}

.jw-cart-count {
    position: absolute;
    top: .2rem;
    inset-inline-end: .05rem;
    min-width: 1.2rem;
    height: 1.2rem;
    padding-inline: .28rem;
    display: grid;
    place-items: center;
    background: var(--gold);
    color: var(--on-gold);
    border-radius: var(--r-pill);
    font-family: var(--font-body);
    font-size: .66rem;
    font-weight: 700;
    line-height: 1;
}

/* The sun/moon pair is swapped off the root attribute — nothing to sync in script. */
.jw-tool .ic-moon { display: none; }
[data-theme="dark"] .jw-tool .ic-moon { display: block; }
[data-theme="dark"] .jw-tool .ic-sun { display: none; }

/* --- burger --- */

.jw-burger {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 2.7rem;
    height: 2.7rem;
    padding: 0 .6rem;
    border: 0;
    border-radius: 50%;
    background: transparent;
    cursor: pointer;
    transition: background-color .3s var(--ease);
}

.jw-burger:hover { background: var(--gold-wash); }

.jw-burger span {
    display: block;
    height: 2px;
    width: 100%;
    border-radius: var(--r-pill);
    background: currentColor;
    transition: transform .4s var(--ease), opacity .3s var(--ease);
}

.jw-burger span:nth-child(2) { width: 70%; margin-inline-start: auto; }

@media (min-width: 1100px) {
    .jw-burger { display: none; }
}

/* --- mobile drawer --- */

.jw-drawer {
    position: fixed;
    inset: 0;
    z-index: 7500;
    display: grid;
    grid-template-rows: auto 1fr auto;
    background: var(--paper);
    visibility: hidden;
    opacity: 0;
    transition: opacity .45s var(--ease), visibility .45s;
}

.jw-drawer.is-open { visibility: visible; opacity: 1; }

.jw-drawer-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.4rem var(--gutter);
}

.jw-drawer-body {
    overflow-y: auto;
    padding: clamp(1rem, 5vw, 2.5rem) var(--gutter);
}

.jw-drawer-body ul { list-style: none; margin: 0; padding: 0; }

.jw-drawer-body > ul > li {
    margin-bottom: .5rem;
    padding: .25rem 1.1rem;
    border-radius: var(--r-md);
    background: var(--surface-2);
}

.jw-drawer-body > ul > li > a {
    display: block;
    padding: .85rem 0;
    font-family: var(--font-display);
    font-size: clamp(1.4rem, 5.5vw, 2rem);
    line-height: 1.25;
    opacity: 0;
    transform: translateY(14px);
}

.jw-drawer.is-open .jw-drawer-body > ul > li > a {
    animation: jw-drawer-in .5s var(--ease) forwards;
    animation-delay: calc(var(--i, 0) * 55ms + 120ms);
}

@keyframes jw-drawer-in {
    to { opacity: 1; transform: translateY(0); }
}

.jw-drawer-body .jw-submenu {
    padding-inline-start: .9rem;
    padding-bottom: .9rem;
}

.jw-drawer-body .jw-submenu a {
    display: block;
    padding: .35rem 0;
    font-size: .95rem;
    color: var(--muted);
}

.jw-drawer-body .jw-submenu a:hover { color: var(--gold); }

.jw-drawer-foot {
    padding: 1.5rem var(--gutter) 2rem;
    text-align: center;
    color: var(--muted);
    font-size: .85rem;
}

/* Spacer under the fixed header for pages with no hero */
.jw-offset { padding-top: var(--header-h); }

/* ============================================================== 09 hero == */

.jw-hero {
    position: relative;
    min-height: min(100svh, 920px);
    display: grid;
    background: var(--obsidian);
    color: var(--on-dark);
    overflow: hidden;
    border-end-start-radius: var(--r-xl);
    border-end-end-radius: var(--r-xl);
}

.jw-hero-slides { display: grid; grid-area: 1 / 1; }

.jw-hero-slide {
    grid-area: 1 / 1;
    display: grid;
    align-items: center;
    padding-block: calc(var(--header-h) + 3rem) 5rem;
    opacity: 0;
    visibility: hidden;
    transition: opacity 1.1s var(--ease-in-out), visibility 1.1s;
}

.jw-hero-slide.is-active { opacity: 1; visibility: visible; }

/* A blurred, over-scaled copy of the artwork, so the stage takes the piece's
   own colour whatever the admin happens to upload. */
.jw-hero-wash {
    position: absolute;
    inset: -12%;
    background-size: cover;
    background-position: center;
    filter: blur(80px) saturate(150%);
    opacity: .5;
    transform: scale(1.18);
    animation: jw-breathe 26s var(--ease-in-out) infinite alternate;
}

@keyframes jw-breathe {
    to { transform: scale(1.32) translate3d(2%, -2%, 0); }
}

.jw-hero-veil {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(120% 90% at 50% 0%, rgba(32, 20, 7, .24), rgba(32, 20, 7, .84) 72%),
        linear-gradient(to bottom, rgba(32, 20, 7, .46), rgba(32, 20, 7, .16) 40%, rgba(32, 20, 7, .9));
}

.jw-hero .container { position: relative; z-index: 2; width: 100%; }

.jw-hero-copy { max-width: 36rem; }

.jw-hero-copy .jw-eyebrow { color: var(--gold-bright); }

.jw-hero-copy h1,
.jw-hero-copy h2 {
    font-size: clamp(2.5rem, 5.8vw, 5rem);
    color: var(--on-dark);
    margin-bottom: 1.5rem;
}

.jw-hero-copy p {
    color: var(--on-dark-muted);
    font-size: clamp(1rem, 1.4vw, 1.15rem);
    max-width: 32rem;
    margin-bottom: 2.25rem;
}

/* The artwork card. It used to be a mat with the picture inset on ivory, which
   suited logos on transparent grounds but framed real photography in a slab of
   white. The picture now fills the card edge to edge, and a second card peeling
   out from behind it supplies the depth the mat used to give. */
.jw-hero-art {
    display: none;
    position: relative;
}

.jw-hero-art::before {
    content: "";
    position: absolute;
    inset: 8% -4% -7% 10%;
    border-radius: var(--r-lg);
    background: linear-gradient(140deg, rgba(240, 192, 84, .5), rgba(240, 192, 84, .08));
    transform: rotate(-3.5deg);
}

[dir="rtl"] .jw-hero-art::before {
    inset: 8% 10% -7% -4%;
    transform: rotate(3.5deg);
}

.jw-hero-plate {
    position: relative;
    overflow: hidden;
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-plate), 0 0 0 1px rgba(255, 246, 228, .14);
    aspect-ratio: 4 / 3;
}

.jw-hero-plate img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.02);
    transition: transform 1.2s var(--ease);
}

.jw-hero-slide.is-active .jw-hero-plate img { transform: scale(1); }

/* A touch of the stage's warmth across the lower edge, so the card sits in the
   scene instead of being pasted onto it. */
.jw-hero-plate::after {
    content: "";
    position: absolute;
    inset: auto 0 0 0;
    height: 38%;
    background: linear-gradient(to top, rgba(26, 16, 5, .4), transparent);
    pointer-events: none;
}

@media (min-width: 992px) {
    .jw-hero-art { display: block; }
}

/* Slide-in on the active slide only */
.jw-hero-slide.is-active .jw-hero-copy > *,
.jw-hero-slide.is-active .jw-hero-art {
    animation: jw-hero-in .95s var(--ease) backwards;
}

.jw-hero-slide.is-active .jw-hero-copy > *:nth-child(1) { animation-delay: .15s; }
.jw-hero-slide.is-active .jw-hero-copy > *:nth-child(2) { animation-delay: .25s; }
.jw-hero-slide.is-active .jw-hero-copy > *:nth-child(3) { animation-delay: .35s; }
.jw-hero-slide.is-active .jw-hero-copy > *:nth-child(4) { animation-delay: .45s; }
.jw-hero-slide.is-active .jw-hero-copy > *:nth-child(5) { animation-delay: .55s; }
.jw-hero-slide.is-active .jw-hero-art { animation-delay: .3s; }

@keyframes jw-hero-in {
    from { opacity: 0; transform: translateY(26px); }
    to { opacity: 1; transform: none; }
}

/* Dots */
.jw-hero-dots {
    position: absolute;
    z-index: 3;
    bottom: 2.75rem;
    inset-inline-start: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: .55rem;
}

[dir="rtl"] .jw-hero-dots { transform: translateX(50%); }

.jw-hero-dots button {
    position: relative;
    width: .55rem;
    height: .55rem;
    padding: 0;
    border: 0;
    border-radius: var(--r-pill);
    background: rgba(255, 246, 228, .28);
    cursor: pointer;
    overflow: hidden;
    transition: background-color .4s var(--ease), width .5s var(--ease);
}

.jw-hero-dots button:hover { background: rgba(255, 246, 228, .5); }

/* The active dot stretches into a track that fills across the autoplay
   interval, so the slider says how long it is about to stay put. */
.jw-hero-dots button.is-active {
    width: 3rem;
    background: rgba(255, 246, 228, .25);
}

.jw-hero-dots button.is-active::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: var(--gold-bright);
    transform-origin: inline-start;
    animation: jw-dot-fill var(--hero-delay, 7000ms) linear forwards;
}

/* Paused autoplay (pointer over the hero, tab in the background) must not leave
   a bar still travelling. */
.jw-hero.is-paused .jw-hero-dots button.is-active::after,
.jw-hero-dots button.is-active.is-static::after { animation-play-state: paused; }

@keyframes jw-dot-fill {
    from { transform: scaleX(0); }
    to { transform: scaleX(1); }
}

@media (prefers-reduced-motion: reduce) {
    .jw-hero-dots button.is-active::after { animation: none; transform: scaleX(1); }
}

/* Scroll cue */
.jw-hero-cue {
    position: absolute;
    z-index: 3;
    bottom: 2.4rem;
    inset-inline-start: var(--gutter);
    display: none;
    align-items: center;
    gap: .7rem;
    font-size: .66rem;
    font-weight: 600;
    letter-spacing: var(--tracking-eyebrow);
    text-transform: uppercase;
    color: var(--on-dark-muted);
}

[dir="rtl"] .jw-hero-cue { text-transform: none; font-size: .8rem; }

.jw-hero-cue::after {
    content: "";
    width: 2px;
    height: 3rem;
    border-radius: var(--r-pill);
    background: linear-gradient(var(--gold-bright), transparent);
    animation: jw-cue 2.4s var(--ease-in-out) infinite;
    transform-origin: top;
}

@keyframes jw-cue {
    0%, 100% { transform: scaleY(.35); opacity: .4; }
    50% { transform: scaleY(1); opacity: 1; }
}

@media (min-width: 992px) {
    .jw-hero-cue { display: flex; }
}

/* Static hero for pages with no slider content */
.jw-hero.is-static { min-height: min(76svh, 720px); }

/* ============================================================= 10 cards == */

/* --- product ------------------------------------------------------------ */

.jw-product { position: relative; }

.jw-product .jw-mat { background: var(--surface); }

.jw-badge {
    position: absolute;
    z-index: 3;
    top: .9rem;
    inset-inline-start: .9rem;
    padding: .4rem .85rem;
    border-radius: var(--r-pill);
    background: var(--gold);
    color: var(--on-gold);
    font-size: .62rem;
    font-weight: 700;
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
}

[dir="rtl"] .jw-badge { text-transform: none; font-size: .74rem; letter-spacing: 0; }

.jw-badge.is-muted { background: var(--ink); color: var(--paper); }

/* Actions rise from the bottom of the plate on hover */
.jw-actions {
    position: absolute;
    z-index: 3;
    inset-inline: .75rem;
    bottom: .75rem;
    display: flex;
    gap: .4rem;
    transform: translateY(calc(100% + 1.1rem));
    opacity: 0;
    transition: transform .5s var(--ease), opacity .4s var(--ease);
}

.jw-hover:hover .jw-actions,
.jw-hover:focus-within .jw-actions { transform: none; opacity: 1; }

.jw-action {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    padding: .8rem .7rem;
    border: 0;
    border-radius: var(--r-pill);
    background: color-mix(in srgb, var(--surface) 88%, transparent);
    backdrop-filter: blur(8px);
    color: var(--ink);
    font-family: var(--font-body);
    font-size: .68rem;
    font-weight: 600;
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
    cursor: pointer;
    white-space: nowrap;
    transition: background-color .3s var(--ease), color .3s var(--ease);
}

[dir="rtl"] .jw-action { text-transform: none; font-size: .8rem; letter-spacing: 0; }

.jw-action:hover { background: var(--ink); color: var(--paper); }
.jw-action.is-primary { background: var(--gold); color: var(--on-gold); }
.jw-action.is-primary:hover { background: var(--gold-700); color: var(--gold-50); }

@media (hover: none) {
    /* No hover on touch: keep the actions permanently visible. */
    .jw-actions { position: static; transform: none; opacity: 1; margin-top: .7rem; }
    .jw-action { background: var(--surface-2); }
}

.jw-card-body {
    padding-top: 1.15rem;
    text-align: center;
}

.jw-card-cat {
    display: block;
    margin-bottom: .4rem;
    font-size: .66rem;
    font-weight: 600;
    letter-spacing: var(--tracking-eyebrow);
    text-transform: uppercase;
    color: var(--gold);
}

[dir="rtl"] .jw-card-cat { text-transform: none; font-size: .8rem; letter-spacing: .04em; }

.jw-card-body h3 {
    font-size: clamp(1.05rem, 1.4vw, 1.25rem);
    margin-bottom: .55rem;
}

.jw-card-meta {
    display: block;
    font-size: .82rem;
    color: var(--muted);
}

/* --- price -------------------------------------------------------------- */

.jw-price {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: .7rem;
    font-family: var(--font-display);
    font-size: 1.15rem;
}

.jw-price.is-start { justify-content: flex-start; }

.jw-price ins {
    text-decoration: none;
    color: var(--gold);
    font-weight: 500;
}

.jw-price del {
    color: var(--muted);
    font-size: .85em;
    opacity: .8;
}

.jw-price.is-lg { font-size: clamp(1.5rem, 2.4vw, 2rem); }

.jw-oos {
    display: inline-block;
    padding: .4rem .9rem;
    border-radius: var(--r-pill);
    background: color-mix(in srgb, var(--danger) 10%, transparent);
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
    color: var(--danger);
}

[dir="rtl"] .jw-oos { text-transform: none; font-size: .85rem; letter-spacing: 0; }

/* --- article ------------------------------------------------------------ */

.jw-article .jw-mat { background: var(--surface); }

.jw-article-body { padding-top: 1.3rem; }

.jw-article-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .55rem;
    margin-bottom: .75rem;
    font-size: .7rem;
    font-weight: 600;
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
    color: var(--muted);
}

[dir="rtl"] .jw-article-meta { text-transform: none; font-size: .84rem; letter-spacing: 0; }

.jw-article-meta span + span::before {
    content: "";
    display: inline-block;
    width: 5px;
    height: 5px;
    margin-inline-end: .55rem;
    border-radius: 50%;
    background: var(--gold);
}

.jw-article-body h3 { font-size: clamp(1.25rem, 1.9vw, 1.55rem); margin-bottom: .7rem; }
.jw-article-body p { color: var(--muted); font-size: .95rem; margin-bottom: 1.1rem; }

/* --- brand board --------------------------------------------------------
   Stands in for the editorial photograph beside the studio statement. It is
   the studio's own palette, monogram and letterforms rather than stock, so
   it can never look like somebody else's business.                       */

.jw-board {
    position: relative;
    overflow: hidden;
    border-radius: var(--r-lg);
    aspect-ratio: 4 / 5;
    box-shadow: var(--shadow-plate);
    isolation: isolate;
}

.jw-board-inner {
    position: relative;
    z-index: 2;
    height: 100%;
    display: grid;
    grid-template-rows: auto 1fr auto;
    gap: 1.5rem;
    padding: clamp(1.5rem, 4vw, 2.75rem);
}

.jw-board-specimen {
    display: flex;
    align-self: center;
    align-items: baseline;
    justify-content: center;
    gap: clamp(1rem, 4vw, 2.5rem);
    font-family: var(--font-display);
    font-size: clamp(4rem, 13vw, 8rem);
    line-height: 1;
    color: var(--ink);
}

.jw-board-specimen span:last-child {
    font-family: 'Tajawal', sans-serif;
    color: var(--gold);
}

.jw-board-mark {
    width: clamp(70px, 18%, 110px);
    height: auto;
    justify-self: start;
    align-self: start;
}

.jw-board-chips {
    display: flex;
    gap: .6rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.jw-board-chips li {
    flex: 1;
    height: clamp(2.2rem, 6vw, 3.2rem);
    border-radius: var(--r-sm);
    background: var(--c);
    box-shadow: inset 0 0 0 1px rgba(46, 33, 19, .08);
}

/* --- services ----------------------------------------------------------- */

.jw-services {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
    gap: 1rem;
}

.jw-service {
    position: relative;
    padding: clamp(1.75rem, 3.2vw, 2.6rem);
    border-radius: var(--r-md);
    background: var(--surface);
    overflow: hidden;
    transition: background-color .5s var(--ease), color .5s var(--ease),
                transform .5s var(--ease), box-shadow .5s var(--ease);
}

.jw-service-no {
    display: block;
    margin-bottom: 1rem;
    font-family: var(--font-display);
    font-size: 2.5rem;
    line-height: 1;
    color: var(--gold);
    opacity: .55;
    transition: opacity .5s var(--ease), color .5s var(--ease);
}

.jw-service h3 { font-size: 1.25rem; margin-bottom: .6rem; }
.jw-service p { margin: 0; color: var(--muted); font-size: .95rem; }

.jw-service:hover {
    background: var(--obsidian);
    transform: translateY(-4px);
    box-shadow: var(--shadow-lift);
}

.jw-service:hover h3 { color: var(--on-dark); }
.jw-service:hover p { color: var(--on-dark-muted); }
.jw-service:hover .jw-service-no { opacity: 1; color: var(--gold-400); }

/* --- statement band ----------------------------------------------------- */

.jw-band {
    position: relative;
    margin-inline: clamp(1rem, 4vw, 3rem);
    border-radius: var(--r-xl);
    background: var(--obsidian);
    color: var(--on-dark);
    overflow: hidden;
}

.jw-band > .container { position: relative; z-index: 2; }

.jw-band h2 { color: var(--on-dark); }
.jw-band p { color: var(--on-dark-muted); }

/* --- pull quote --------------------------------------------------------- */

.jw-statement {
    max-width: 50rem;
    margin-inline: auto;
    font-size: clamp(1.6rem, 3.4vw, 2.6rem);
    line-height: 1.3;
}

[dir="rtl"] .jw-statement { line-height: 1.6; }

/* ====================================================== 11 page banner == */

#page-banner {
    position: relative;
    padding-block: calc(var(--header-h) + clamp(3rem, 7vw, 5.5rem)) clamp(3rem, 7vw, 5.5rem);
    background: var(--obsidian);
    color: var(--on-dark);
    overflow: hidden;
    text-align: center;
    border-end-start-radius: var(--r-xl);
    border-end-end-radius: var(--r-xl);
}

/* A page can lay its own artwork over the gradient — an article's cover, an
   album's. Nothing decorative is ever stock. */
.jw-banner-art {
    position: absolute;
    inset: 0;
    z-index: 1;
    background-size: cover;
    background-position: center;
    opacity: .22;
    filter: saturate(.85);
}

#page-banner > .container { position: relative; z-index: 2; }

#page-banner h1 {
    color: var(--on-dark);
    margin-bottom: .75rem;
    font-size: clamp(2.1rem, 4.6vw, 3.6rem);
}

#page-banner p {
    margin: 0 auto;
    max-width: 38rem;
    color: var(--on-dark-muted);
}

.jw-crumbs {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: .55rem;
    margin: 0 0 1.4rem;
    padding: 0;
    list-style: none;
    font-size: .68rem;
    font-weight: 600;
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
    color: var(--on-dark-muted);
}

[dir="rtl"] .jw-crumbs { text-transform: none; font-size: .84rem; letter-spacing: 0; }

.jw-crumbs li + li::before {
    content: "";
    display: inline-block;
    width: 4px;
    height: 4px;
    margin-inline-end: .55rem;
    border-radius: 50%;
    background: var(--gold);
    vertical-align: middle;
}

.jw-crumbs a:hover { color: var(--gold-bright); }
.jw-crumbs li:last-child { color: var(--gold-bright); }

/* ======================================= 12 shop / product / cart / pay == */

/* --- filter sidebar ----------------------------------------------------- */

.jw-filters {
    position: sticky;
    top: calc(var(--header-h-sticky) + 1.5rem);
    padding: clamp(1.25rem, 2.5vw, 1.75rem);
    border-radius: var(--r-lg);
    background: var(--surface-2);
}

.jw-widget { margin-bottom: 2rem; }
.jw-widget:last-child { margin-bottom: 0; }

.jw-widget-title {
    margin-bottom: .9rem;
    font-family: var(--font-body);
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: var(--tracking-eyebrow);
    text-transform: uppercase;
    color: var(--muted);
}

[dir="rtl"] .jw-widget-title { text-transform: none; font-size: .92rem; letter-spacing: 0; }

.jw-facets { list-style: none; margin: 0; padding: 0; }

.jw-facets li + li { margin-top: .15rem; }

.jw-facets a {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .5rem .8rem;
    border-radius: var(--r-pill);
    font-size: .95rem;
    color: var(--muted);
    transition: background-color .25s var(--ease), color .25s var(--ease);
}

.jw-facets a:hover { color: var(--gold); background: var(--gold-wash); }

.jw-facets li.is-active > a {
    color: var(--gold);
    background: var(--gold-wash);
    font-weight: 500;
}

.jw-swatch {
    width: 1.05rem;
    height: 1.05rem;
    border-radius: 50%;
    box-shadow: inset 0 0 0 1px var(--line);
    flex: 0 0 auto;
}

.jw-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 2rem;
}

.jw-count {
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
    color: var(--muted);
}

[dir="rtl"] .jw-count { text-transform: none; font-size: .9rem; letter-spacing: 0; }

/* --- product detail ----------------------------------------------------- */

.jw-pdp-main {
    position: relative;
    background: var(--surface);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-soft);
    padding: clamp(1.25rem, 3vw, 2.75rem);
    aspect-ratio: 1 / 1;
    display: grid;
    place-items: center;
    cursor: zoom-in;
}

.jw-pdp-main img { max-height: 100%; width: auto; object-fit: contain; }

.jw-thumbs {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(5rem, 1fr));
    gap: .75rem;
    margin-top: .9rem;
}

.jw-thumb {
    aspect-ratio: 1 / 1;
    background: var(--surface);
    border: 0;
    border-radius: var(--r-sm);
    box-shadow: inset 0 0 0 1px var(--line);
    padding: .45rem;
    cursor: pointer;
    transition: box-shadow .3s var(--ease);
}

.jw-thumb img { width: 100%; height: 100%; object-fit: contain; }

.jw-thumb:hover,
.jw-thumb.is-active { box-shadow: inset 0 0 0 2px var(--gold); }

.jw-pdp-title { font-size: clamp(1.8rem, 3.4vw, 2.7rem); margin-bottom: .9rem; }

.jw-variant { margin-bottom: 1.5rem; }

.jw-variant > span {
    display: block;
    margin-bottom: .7rem;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: var(--tracking-eyebrow);
    text-transform: uppercase;
    color: var(--muted);
}

[dir="rtl"] .jw-variant > span { text-transform: none; font-size: .88rem; letter-spacing: 0; }

.jw-chips {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.jw-chips label { margin: 0; cursor: pointer; }
.jw-chips input { position: absolute; opacity: 0; pointer-events: none; }

.jw-chips label > span {
    display: grid;
    place-items: center;
    min-width: 2.9rem;
    height: 2.9rem;
    padding-inline: .9rem;
    border-radius: var(--r-pill);
    box-shadow: inset 0 0 0 1px var(--line);
    font-family: var(--font-body);
    font-size: .85rem;
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
    color: var(--ink);
    transition: color .3s var(--ease), box-shadow .3s var(--ease);
}

.jw-chips input:checked + span {
    color: var(--gold);
    box-shadow: inset 0 0 0 2px var(--gold);
}

.jw-chips.is-colour label > span {
    min-width: 2.4rem;
    height: 2.4rem;
    padding: 0;
    font-size: 0;
}

.jw-chips.is-colour input:checked + span {
    box-shadow: 0 0 0 2px var(--paper), 0 0 0 4px var(--gold);
}

/* Quantity stepper */
.jw-qty {
    display: inline-flex;
    align-items: stretch;
    border-radius: var(--r-pill);
    background: var(--surface-2);
    box-shadow: inset 0 0 0 1px var(--line);
    overflow: hidden;
}

.jw-qty button {
    width: 2.9rem;
    border: 0;
    background: none;
    color: var(--ink);
    font-size: 1.1rem;
    cursor: pointer;
    display: grid;
    place-items: center;
    transition: background-color .3s var(--ease), color .3s var(--ease);
}

.jw-qty button:hover { background: var(--gold); color: var(--on-gold); }

.jw-qty input {
    width: 3rem;
    padding: .85rem 0;
    border: 0;
    background: none;
    text-align: center;
    font-family: var(--font-display);
    font-size: 1.05rem;
    color: var(--ink);
}

.jw-qty input:focus { outline: none; }

.jw-meta {
    list-style: none;
    margin: 2rem 0 0;
    padding: 1.5rem;
    border-radius: var(--r-md);
    background: var(--surface-2);
    font-size: .92rem;
}

.jw-meta li {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
    padding: .45rem 0;
    color: var(--muted);
}

.jw-meta li > strong {
    min-width: 9rem;
    font-weight: 500;
    color: var(--ink);
}

.jw-share {
    display: flex;
    align-items: center;
    gap: .6rem;
    margin-top: 1.75rem;
}

.jw-share > span {
    margin-inline-end: .2rem;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: var(--tracking-eyebrow);
    text-transform: uppercase;
    color: var(--muted);
}

[dir="rtl"] .jw-share > span { text-transform: none; font-size: .88rem; letter-spacing: 0; }

.jw-share button {
    display: grid;
    place-items: center;
    width: 2.6rem;
    height: 2.6rem;
    border: 0;
    border-radius: 50%;
    background: var(--surface-2);
    cursor: pointer;
    transition: background-color .3s var(--ease), color .3s var(--ease), transform .3s var(--ease);
}

.jw-share button:hover { background: var(--gold-wash); color: var(--gold); transform: translateY(-2px); }

/* --- cart --------------------------------------------------------------- */

.jw-cart-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 .75rem;
}

.jw-cart-table thead th {
    padding: 0 1.25rem .25rem;
    text-align: start;
    font-family: var(--font-body);
    font-size: .66rem;
    font-weight: 700;
    letter-spacing: var(--tracking-eyebrow);
    text-transform: uppercase;
    color: var(--muted);
}

[dir="rtl"] .jw-cart-table thead th { text-transform: none; font-size: .84rem; letter-spacing: 0; }

/* Each line is its own rounded card rather than a ruled row. */
.jw-cart-table tbody td {
    padding: 1rem 1.25rem;
    background: var(--surface);
    vertical-align: middle;
}

.jw-cart-table tbody td:first-child {
    border-start-start-radius: var(--r-md);
    border-end-start-radius: var(--r-md);
}

.jw-cart-table tbody td:last-child {
    border-start-end-radius: var(--r-md);
    border-end-end-radius: var(--r-md);
}

.jw-cart-thumb {
    width: 4.75rem;
    height: 4.75rem;
    border-radius: var(--r-sm);
    background: var(--surface-2);
    padding: .4rem;
}

.jw-cart-thumb img { width: 100%; height: 100%; object-fit: contain; }

.jw-cart-name {
    font-family: var(--font-display);
    font-size: 1.05rem;
}

.jw-cart-remove {
    display: grid;
    place-items: center;
    width: 2.2rem;
    height: 2.2rem;
    border-radius: 50%;
    background: var(--surface-2);
    color: var(--muted);
    transition: color .3s var(--ease), background-color .3s var(--ease);
}

.jw-cart-remove:hover { color: var(--danger); background: color-mix(in srgb, var(--danger) 12%, transparent); }

@media (max-width: 767px) {
    /* Stack each line into one labelled card instead of scrolling the table */
    .jw-cart-table { border-spacing: 0; }
    .jw-cart-table thead { display: none; }
    .jw-cart-table, .jw-cart-table tbody, .jw-cart-table tr, .jw-cart-table td { display: block; width: 100%; }

    .jw-cart-table tr {
        position: relative;
        margin-bottom: 1rem;
        padding: 1.25rem;
        border-radius: var(--r-md);
        background: var(--surface);
    }

    .jw-cart-table tbody td { padding: .35rem 0; background: none; border-radius: 0; }

    .jw-cart-table td[data-label] {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
    }

    .jw-cart-table td[data-label]::before {
        content: attr(data-label);
        font-size: .7rem;
        font-weight: 600;
        letter-spacing: var(--tracking-caps);
        text-transform: uppercase;
        color: var(--muted);
    }

    .jw-cart-table td.jw-cart-remove-cell {
        position: absolute;
        top: .9rem;
        inset-inline-end: .9rem;
        width: auto;
        padding: 0;
    }
}

/* --- summary panel ------------------------------------------------------ */

.jw-panel {
    position: sticky;
    top: calc(var(--header-h-sticky) + 1.5rem);
    padding: clamp(1.5rem, 3vw, 2.25rem);
    border-radius: var(--r-lg);
    background: var(--surface);
    box-shadow: var(--shadow-soft);
}

.jw-panel h4 {
    margin-bottom: 1.25rem;
    font-size: 1.25rem;
}

.jw-totals {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 1.5rem;
}

.jw-totals th,
.jw-totals td {
    padding: .7rem 0;
    border-bottom: 1px solid var(--line-soft);
    font-weight: 400;
    text-align: start;
    font-size: .95rem;
}

.jw-totals td { text-align: end; }

.jw-totals tr:last-child th,
.jw-totals tr:last-child td {
    border-bottom: 0;
    padding-top: 1rem;
    font-family: var(--font-display);
    font-size: 1.2rem;
    color: var(--gold);
}

.jw-totals tr:last-child th { color: var(--ink); }

/* --- payment method cards ----------------------------------------------- */

/* A <label> wrapping the whole card, so the generic label styling is undone here. */
.jw-pay {
    display: block;
    margin-bottom: .6rem;
    padding: 1rem 1.15rem;
    border-radius: var(--r-md);
    background: var(--surface-2);
    box-shadow: inset 0 0 0 1px transparent;
    font-size: 1rem;
    font-weight: 300;
    letter-spacing: 0;
    text-transform: none;
    color: var(--ink);
    cursor: pointer;
    transition: box-shadow .3s var(--ease), background-color .3s var(--ease);
}

.jw-pay:has(input:checked) {
    background: var(--gold-wash);
    box-shadow: inset 0 0 0 2px var(--gold);
}

.jw-pay .form-check { margin: 0; }
.jw-pay .form-check-label { font-weight: 400; }
.jw-pay small { display: block; margin-top: .3rem; color: var(--muted); font-size: .82rem; }

/* --- checkout steps ----------------------------------------------------- */

.jw-steps {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
    margin-bottom: 2.5rem;
    padding: 0;
    list-style: none;
}

.jw-steps li {
    display: flex;
    align-items: center;
    gap: .65rem;
    padding: .5rem 1.1rem .5rem .5rem;
    border-radius: var(--r-pill);
    background: var(--surface-2);
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
    color: var(--muted);
}

[dir="rtl"] .jw-steps li {
    text-transform: none;
    font-size: .9rem;
    letter-spacing: 0;
    padding: .5rem .5rem .5rem 1.1rem;
}

.jw-steps li b {
    display: grid;
    place-items: center;
    width: 1.9rem;
    height: 1.9rem;
    border-radius: 50%;
    background: var(--surface);
    font-family: var(--font-display);
    font-size: .9rem;
    font-weight: 500;
}

.jw-steps li.is-active { background: var(--gold-wash); color: var(--gold); }
.jw-steps li.is-active b { background: var(--gold); color: var(--on-gold); }

/* --- confirmation ------------------------------------------------------- */

.jw-seal {
    display: grid;
    place-items: center;
    width: 7rem;
    height: 7rem;
    margin: 0 auto 2rem;
    border-radius: 50%;
    background: var(--gold-wash);
    color: var(--gold);
    font-size: 2.4rem;
    position: relative;
}

.jw-seal::before {
    content: "";
    position: absolute;
    inset: -.75rem;
    border-radius: 50%;
    background: var(--gold-wash);
    opacity: .5;
    z-index: -1;
}

/* ================================= 13 accordion / tabs / lightbox / misc */

.jw-accordion { display: grid; gap: .75rem; }

.jw-ac-item {
    border-radius: var(--r-md);
    background: var(--surface);
    overflow: hidden;
    transition: box-shadow .4s var(--ease);
}

.jw-ac-item.is-open { box-shadow: var(--shadow-soft); }

.jw-ac-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    width: 100%;
    padding: 1.35rem clamp(1.25rem, 3vw, 1.85rem);
    border: 0;
    background: none;
    text-align: start;
    font-family: var(--font-display);
    font-size: clamp(1.05rem, 1.7vw, 1.3rem);
    line-height: 1.4;
    color: var(--ink);
    cursor: pointer;
    transition: color .3s var(--ease);
}

.jw-ac-title:hover { color: var(--gold); }

.jw-ac-title .ic {
    font-size: 1rem;
    color: var(--gold);
    transition: transform .4s var(--ease);
}

.jw-ac-item.is-open .jw-ac-title { color: var(--gold); }
.jw-ac-item.is-open .jw-ac-title .ic { transform: rotate(45deg); }

.jw-ac-panel {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows .45s var(--ease);
}

.jw-ac-item.is-open .jw-ac-panel { grid-template-rows: 1fr; }

.jw-ac-panel > div { overflow: hidden; }

.jw-ac-panel > div > * {
    padding-inline: clamp(1.25rem, 3vw, 1.85rem);
    padding-bottom: 1.6rem;
}

/* --- tabs --------------------------------------------------------------- */

.jw-tabs {
    display: inline-flex;
    gap: .35rem;
    margin: 0 0 2rem;
    padding: .35rem;
    list-style: none;
    border-radius: var(--r-pill);
    background: var(--surface-2);
}

.jw-tabs button {
    padding: .7rem 1.4rem;
    border: 0;
    border-radius: var(--r-pill);
    background: none;
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
    color: var(--muted);
    cursor: pointer;
    transition: color .3s var(--ease), background-color .3s var(--ease);
}

[dir="rtl"] .jw-tabs button { text-transform: none; font-size: .95rem; letter-spacing: 0; }

.jw-tabs button.is-active {
    color: var(--ink);
    background: var(--surface);
    box-shadow: var(--shadow-soft);
}

.jw-tabpanel[hidden] { display: none; }

/* --- gallery grid + lightbox -------------------------------------------- */

.jw-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
    gap: 1.25rem;
}

.jw-gallery figure { margin: 0; }

.jw-gallery button {
    position: relative;
    display: block;
    width: 100%;
    padding: 0;
    border: 0;
    border-radius: var(--r-md);
    background: var(--surface);
    cursor: zoom-in;
    overflow: hidden;
    aspect-ratio: 1 / 1;
    transition: transform .5s var(--ease), box-shadow .5s var(--ease);
}

.jw-gallery img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .8s var(--ease);
}

.jw-gallery button:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lift);
}

.jw-gallery button:hover img { transform: scale(1.06); }

.jw-gallery figcaption {
    padding-top: .65rem;
    font-size: .82rem;
    color: var(--muted);
    text-align: center;
}

.jw-lightbox {
    position: fixed;
    inset: 0;
    z-index: 9500;
    display: grid;
    place-items: center;
    padding: clamp(1.5rem, 5vw, 4rem);
    background: rgba(22, 13, 4, .93);
    backdrop-filter: blur(8px);
    opacity: 0;
    visibility: hidden;
    transition: opacity .4s var(--ease), visibility .4s;
}

.jw-lightbox.is-open { opacity: 1; visibility: visible; }

.jw-lightbox img {
    max-width: 100%;
    max-height: 82vh;
    object-fit: contain;
    border-radius: var(--r-md);
    box-shadow: 0 3rem 6rem -2rem rgba(0, 0, 0, .9);
    transform: scale(.96);
    transition: transform .5s var(--ease);
}

.jw-lightbox.is-open img { transform: none; }

.jw-lightbox-close,
.jw-lightbox-prev,
.jw-lightbox-next {
    position: absolute;
    display: grid;
    place-items: center;
    width: 3rem;
    height: 3rem;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 246, 228, .12);
    backdrop-filter: blur(6px);
    color: var(--on-dark);
    cursor: pointer;
    transition: background-color .3s var(--ease), color .3s var(--ease);
}

.jw-lightbox-close:hover,
.jw-lightbox-prev:hover,
.jw-lightbox-next:hover { background: var(--gold); color: var(--on-gold); }

.jw-lightbox-close { top: 1.5rem; inset-inline-end: 1.5rem; }
.jw-lightbox-prev { inset-inline-start: 1.5rem; top: 50%; transform: translateY(-50%); }
.jw-lightbox-next { inset-inline-end: 1.5rem; top: 50%; transform: translateY(-50%); }

[dir="rtl"] .jw-lightbox-prev .ic,
[dir="rtl"] .jw-lightbox-next .ic { transform: scaleX(-1); }

.jw-lightbox-caption {
    position: absolute;
    bottom: 1.5rem;
    inset-inline: 0;
    text-align: center;
    color: var(--on-dark-muted);
    font-size: .85rem;
}

/* --- author card -------------------------------------------------------- */

.jw-author {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1.5rem;
    margin-top: 3rem;
    padding: clamp(1.5rem, 3vw, 2.25rem);
    border-radius: var(--r-lg);
    background: var(--surface-2);
}

.jw-author img {
    width: 5.5rem;
    height: 5.5rem;
    border-radius: 50%;
    object-fit: cover;
    box-shadow: 0 0 0 2px var(--surface-2), 0 0 0 4px var(--gold);
}

.jw-author h4 { margin-bottom: .25rem; }
.jw-author p { margin: 0; color: var(--muted); font-size: .95rem; }

/* --- social ------------------------------------------------------------- */

.jw-social {
    display: flex;
    gap: .5rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.jw-social a {
    display: grid;
    place-items: center;
    width: 2.6rem;
    height: 2.6rem;
    border-radius: 50%;
    background: var(--surface-2);
    font-size: 1rem;
    transition: color .3s var(--ease), background-color .3s var(--ease), transform .3s var(--ease);
}

.jw-social a:hover {
    color: var(--gold);
    background: var(--gold-wash);
    transform: translateY(-3px);
}

/* ============================================================ 14 footer == */

#footer {
    position: relative;
    margin-top: clamp(2rem, 5vw, 4rem);
    border-start-start-radius: var(--r-xl);
    border-start-end-radius: var(--r-xl);
    background: var(--obsidian);
    color: var(--on-dark-muted);
    padding-top: clamp(3.5rem, 7vw, 6rem);
    overflow: hidden;
}

#footer > .container { position: relative; z-index: 2; }

#footer h4,
#footer h3 { color: var(--on-dark); }

#footer a { color: var(--on-dark-muted); }
#footer a:hover { color: var(--gold); }

#footer .jw-widget-title { color: var(--on-dark); }

#footer .jw-social a { background: rgba(255, 246, 228, .08); color: var(--on-dark); }
#footer .jw-social a:hover { color: var(--gold); background: rgba(255, 246, 228, .16); }

.jw-foot-links { list-style: none; margin: 0; padding: 0; }
.jw-foot-links li { margin-bottom: .55rem; font-size: .95rem; }

.jw-foot-contact li {
    display: flex;
    gap: .75rem;
    margin-bottom: .75rem;
    font-size: .95rem;
}

.jw-foot-contact .ic { margin-top: .35rem; color: var(--gold); }

.jw-foot-logo {
    height: 52px;
    width: auto;
    margin-bottom: 1.25rem;
}

/* Oversized wordmark closing the page */
.jw-foot-mark {
    margin-top: clamp(2.5rem, 6vw, 4.5rem);
    font-family: var(--font-display);
    font-size: clamp(3.5rem, 14vw, 12rem);
    font-weight: 400;
    line-height: .85;
    text-align: center;
    color: transparent;
    background: linear-gradient(180deg, rgba(240, 192, 84, .45), rgba(240, 192, 84, .04));
    background-clip: text;
    -webkit-background-clip: text;
    user-select: none;
    white-space: nowrap;
    overflow: hidden;
}

[dir="rtl"] .jw-foot-mark { line-height: 1.15; }

.jw-copyright {
    margin-top: 1.5rem;
    padding: 1.5rem 0;
    border-top: 1px solid var(--line-dark);
    text-align: center;
    font-size: .82rem;
}

.jw-copyright a { color: var(--gold); }

/* --- floating controls -------------------------------------------------- */

.jw-float {
    position: fixed;
    z-index: 6500;
    inset-inline-end: clamp(1rem, 3vw, 2.2rem);
    display: grid;
    place-items: center;
    width: 3.2rem;
    height: 3.2rem;
    border-radius: 50%;
    background: var(--surface);
    color: var(--ink);
    box-shadow: var(--shadow-lift);
    transition: transform .4s var(--ease), opacity .4s var(--ease),
                color .3s var(--ease), background-color .3s var(--ease);
}

.jw-float:hover { color: var(--gold); transform: translateY(-3px); }

.jw-whatsapp {
    bottom: calc(clamp(1rem, 3vw, 2.2rem) + 4.1rem);
    background: #1FAE54;
    color: #fff;
    font-size: 1.3rem;
}

.jw-whatsapp:hover { background: #18913f; color: #fff; }

.jw-totop {
    bottom: clamp(1rem, 3vw, 2.2rem);
    opacity: 0;
    transform: translateY(1rem);
    pointer-events: none;
}

.jw-totop.is-shown { opacity: 1; transform: none; pointer-events: auto; }

/* --- scroll reveal ------------------------------------------------------ */

[data-reveal] {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity .9s var(--ease), transform .9s var(--ease);
    transition-delay: var(--reveal-delay, 0ms);
}

[data-reveal].is-in { opacity: 1; transform: none; }

.jw-d-0 { --reveal-delay: 0ms; }
.jw-d-1 { --reveal-delay: 90ms; }
.jw-d-2 { --reveal-delay: 180ms; }
.jw-d-3 { --reveal-delay: 270ms; }

/* --- SweetAlert, dressed to match --------------------------------------- */

.swal2-popup {
    border-radius: var(--r-lg) !important;
    background: var(--surface) !important;
    color: var(--ink) !important;
    font-family: var(--font-body) !important;
}

.swal2-title { font-family: var(--font-display) !important; font-weight: 500 !important; }

.swal2-styled.swal2-confirm,
.swal2-styled.swal2-cancel {
    border-radius: var(--r-pill) !important;
    font-size: .76rem !important;
    font-weight: 600;
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
    padding: .9rem 1.9rem !important;
}

.swal2-toast { border-radius: var(--r-md) !important; }

/* --- motion & print ----------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }

    *,
    *::before,
    *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
    }

    [data-reveal] { opacity: 1; transform: none; }
}

@media print {
    #header, #footer, .jw-float, .jw-grain, .jw-progress, .jw-drawer { display: none !important; }
    body { background: #fff; color: #000; }
    section { padding-block: 1rem; }
}