:root{
    --deep:#020812;
    --navy:#06152f;
    --blue:#2e83c6;
    --cream:#f4efe3;
    --gold:#d6a94f;
    --gold2:#f4c96d;
    --muted:#aebed2;
    --glass:rgba(9,31,65,.58);
}

*{box-sizing:border-box}

html{scroll-behavior:smooth}

body{
    margin:0;
    font-family:Arial, Helvetica, sans-serif;
    color:var(--cream);
    background:
        radial-gradient(circle at 15% 8%, rgba(46,131,198,.22), transparent 24%),
        radial-gradient(circle at 84% 14%, rgba(244,201,109,.12), transparent 22%),
        radial-gradient(circle at 50% 52%, rgba(46,131,198,.14), transparent 36%),
        linear-gradient(180deg, #020812 0%, #06152f 45%, #020812 100%);
    min-height:100vh;
}

body:before{
    content:"";
    position:fixed;
    inset:0;
    pointer-events:none;
    background-image:
        linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
    background-size:44px 44px;
    mask-image:linear-gradient(to bottom, rgba(0,0,0,.7), transparent 75%);
}

.hero{
    position:relative;
    min-height:520px;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:70px 20px 58px;
    overflow:hidden;
}

.hero:before{
    content:"";
    position:absolute;
    width:780px;
    height:780px;
    border:1px solid rgba(214,169,79,.18);
    border-radius:50%;
    top:-390px;
    left:50%;
    transform:translateX(-50%);
    box-shadow:0 0 90px rgba(46,131,198,.15);
}

.hero:after{
    content:"✦";
    position:absolute;
    top:76px;
    right:18%;
    color:var(--gold2);
    font-size:34px;
    opacity:.75;
    text-shadow:0 0 28px rgba(244,201,109,.35);
}

.hero-inner{
    position:relative;
    z-index:1;
    width:min(980px, 94vw);
    padding:58px 34px;
    text-align:center;
    border:1px solid rgba(214,169,79,.32);
    border-radius:28px;
    background:
        linear-gradient(135deg, rgba(255,255,255,.055), rgba(255,255,255,.018)),
        rgba(4,16,36,.58);
    box-shadow:
        0 30px 90px rgba(0,0,0,.36),
        inset 0 1px 0 rgba(255,255,255,.08);
    backdrop-filter:blur(14px);
}

.eyebrow,
.section-label{
    color:var(--gold2);
    text-transform:uppercase;
    letter-spacing:.24em;
    font-size:13px;
    font-weight:700;
}

h1{
    margin:18px 0 0;
    font-size:clamp(42px, 7vw, 82px);
    line-height:1;
    letter-spacing:.12em;
    text-transform:uppercase;
    text-shadow:0 0 36px rgba(255,255,255,.10);
}

.subtitle{
    margin:18px 0 14px;
    color:var(--gold);
    font-size:clamp(18px, 3vw, 32px);
    letter-spacing:.2em;
    text-transform:uppercase;
}

.intro{
    max-width:760px;
    margin:0 auto 30px;
    color:var(--muted);
    line-height:1.7;
    font-size:18px;
}

.hero-actions{
    display:flex;
    gap:16px;
    justify-content:center;
    flex-wrap:wrap;
}

.btn{
    display:inline-block;
    padding:14px 28px;
    border-radius:999px;
    text-decoration:none;
    font-weight:800;
    letter-spacing:.06em;
}

.btn.primary{
    background:linear-gradient(135deg, #f0bd55, #ffe08a);
    color:#071225;
    box-shadow:
        0 14px 34px rgba(214,169,79,.34),
        0 0 28px rgba(244,201,109,.22);
}

.btn.secondary{
    border:1px solid rgba(244,201,109,.55);
    color:var(--cream);
    background:rgba(255,255,255,.035);
}

main{
    max-width:1180px;
    margin:0 auto;
    padding:10px 20px 70px;
}

section{margin-top:58px}

h2{
    text-align:center;
    font-size:clamp(28px, 4vw, 42px);
    letter-spacing:.14em;
    text-transform:uppercase;
    margin:12px 0 32px;
}

.section-label{text-align:center}

.product-grid{
    display:grid;
    grid-template-columns:repeat(4, 1fr);
    gap:26px;
}

.product-card{
    position:relative;
    background:
        linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.025)),
        var(--glass);
    border:1px solid rgba(214,169,79,.36);
    border-radius:24px;
    padding:16px;
    box-shadow:0 22px 45px rgba(0,0,0,.27);
    overflow:hidden;
    transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.product-card:before{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(135deg, rgba(46,131,198,.20), transparent 45%, rgba(214,169,79,.10));
    opacity:.65;
    pointer-events:none;
}

.product-card > *{position:relative}

.product-card:hover{
    transform:translateY(-8px);
    border-color:rgba(244,201,109,.72);
    box-shadow:0 30px 60px rgba(0,0,0,.38);
}

.product-card img{
    width:100%;
    height:310px;
    object-fit:cover;
    object-position:center top;
    display:block;
    border-radius:18px;
    border:1px solid rgba(244,201,109,.42);
    background:rgba(2,11,24,.52);
}

.product-card h3{
    text-align:center;
    margin:16px 0 6px;
    color:var(--cream);
    font-size:19px;
}

.product-card p{
    margin:0 4px 6px;
    text-align:center;
    color:var(--muted);
    font-size:13px;
    line-height:1.45;
}

.store-grid{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:24px;
}

.store-card{
    position:relative;
    display:flex;
    flex-direction:column;
    gap:8px;
    align-items:center;
    justify-content:center;
    min-height:178px;
    padding:22px;
    border-radius:24px;
    background:
        linear-gradient(135deg, rgba(46,131,198,.35), rgba(6,21,47,.9)),
        rgba(8,28,60,.75);
    border:1px solid rgba(214,169,79,.5);
    text-decoration:none;
    color:var(--cream);
    box-shadow:0 24px 48px rgba(0,0,0,.28);
    overflow:hidden;
    transition:transform .25s ease, border-color .25s ease;
}

.store-card:after{
    content:"";
    position:absolute;
    width:180px;
    height:180px;
    border-radius:50%;
    right:-70px;
    top:-70px;
    background:rgba(244,201,109,.12);
}

.store-card:hover{
    transform:translateY(-7px);
    border-color:rgba(244,201,109,.85);
}

.store-card span{
    position:relative;
    z-index:1;
    font-size:26px;
    font-weight:800;
}

.store-card small{
    position:relative;
    z-index:1;
    color:var(--gold2);
    text-align:center;
    font-size:14px;
    letter-spacing:.04em;
}

.store-card strong{
    position:relative;
    z-index:1;
    color:var(--cream);
    font-size:15px;
    letter-spacing:.16em;
    text-transform:uppercase;
}

.store-card em{
    position:relative;
    z-index:1;
    display:block;
    margin-top:2px;
    color:var(--cream);
    font-size:12px;
    font-style:normal;
    font-weight:800;
    text-align:center;
    letter-spacing:.03em;
    opacity:.96;
}

@media(max-width:1100px){
    .store-grid{grid-template-columns:1fr;}
}

footer{
    border-top:1px solid rgba(214,169,79,.28);
    padding:30px 20px 34px;
    text-align:center;
    background:linear-gradient(180deg, rgba(0,0,0,.08), rgba(0,0,0,.32));
}

.copyright{
    color:var(--gold);
    font-size:13px;
    margin:0;
}

@media(max-width:900px){
    .product-grid{grid-template-columns:repeat(2, 1fr);}
}

@media(max-width:560px){
    .hero{min-height:480px;padding-top:40px}
    .hero-inner{padding:40px 22px}
    .product-grid,.store-grid{grid-template-columns:1fr;}
}


/* v6 — compact premium landing header */
.hero{
    min-height:340px !important;
    padding:34px 20px 18px !important;
}

.hero:before{
    width:900px !important;
    height:900px !important;
    top:-650px !important;
    opacity:.75;
}

.hero:after{
    content:"✦" !important;
    top:42px !important;
    right:12% !important;
    transform:none !important;
    letter-spacing:0 !important;
    font-size:34px !important;
    opacity:.55 !important;
}

.hero-inner{
    width:min(1180px,96vw) !important;
    min-height:255px;
    display:grid;
    grid-template-columns: 1.35fr .85fr;
    align-items:center;
    gap:26px;
    padding:34px 42px !important;
    border-radius:32px !important;
    text-align:left !important;
    background:
        radial-gradient(circle at 92% 12%, rgba(244,201,109,.16), transparent 34%),
        radial-gradient(circle at 12% 0%, rgba(46,131,198,.22), transparent 38%),
        linear-gradient(135deg, rgba(255,255,255,.075), rgba(255,255,255,.02)),
        rgba(4,16,36,.68) !important;
    box-shadow:
        0 34px 90px rgba(0,0,0,.46),
        0 0 90px rgba(46,131,198,.13),
        inset 0 1px 0 rgba(255,255,255,.11) !important;
    overflow:hidden;
}

.hero-copy{
    position:relative;
    z-index:2;
}

h1{
    font-size:clamp(38px,5.4vw,78px) !important;
    letter-spacing:.075em !important;
    white-space:normal !important;
    margin:0 0 12px !important;
    line-height:.98 !important;
}

.subtitle{
    font-size:clamp(17px,2.2vw,28px) !important;
    margin:0 0 12px !important;
    letter-spacing:.18em !important;
}

.intro{
    max-width:720px !important;
    margin:0 0 22px !important;
    font-size:17px !important;
}

.hero-actions{
    justify-content:flex-start !important;
}

.hero-preview{
    position:relative;
    height:230px;
    z-index:2;
}

.preview-card{
    position:absolute;
    width:150px;
    height:205px;
    object-fit:cover;
    border-radius:22px;
    border:1px solid rgba(244,201,109,.48);
    box-shadow:0 24px 54px rgba(0,0,0,.48);
    background:#071225;
}

.preview-one{
    right:88px;
    top:8px;
    width:168px;
    height:214px;
    z-index:3;
}

.preview-two{
    right:220px;
    top:36px;
    transform:rotate(-7deg);
    opacity:.92;
    z-index:2;
}

.preview-three{
    right:0;
    top:42px;
    transform:rotate(7deg);
    opacity:.92;
    z-index:2;
}

.products-section{
    margin-top:34px !important;
}

.product-card img{
    height:300px !important;
    object-position:center top;
}

.product-card{
    background:
        radial-gradient(circle at top, rgba(46,131,198,.14), transparent 45%),
        linear-gradient(180deg, rgba(255,255,255,.078), rgba(255,255,255,.026)),
        rgba(9,31,65,.64) !important;
}

.store-card{
    background:
        radial-gradient(circle at top right, rgba(244,201,109,.18), transparent 35%),
        radial-gradient(circle at bottom left, rgba(46,131,198,.22), transparent 42%),
        linear-gradient(135deg, rgba(46,131,198,.35), rgba(6,21,47,.92)),
        rgba(8,28,60,.78) !important;
}

@media(max-width:900px){
    .hero-inner{
        grid-template-columns:1fr !important;
        text-align:center !important;
        padding:34px 24px !important;
    }
    .hero-actions{justify-content:center !important;}
    .intro{margin-left:auto !important; margin-right:auto !important;}
    .hero-preview{
        display:none;
    }
}

/* v8 — 4 artwork hero collage */
.hero-preview{
    height:250px !important;
}
.preview-card{
    background:#f7f3eb !important;
    object-fit:cover !important;
    border:1px solid rgba(244,201,109,.55) !important;
}
.preview-one{
    right:124px !important;
    top:4px !important;
    width:176px !important;
    height:214px !important;
    z-index:4 !important;
    transform:rotate(2deg) !important;
}
.preview-two{
    right:278px !important;
    top:38px !important;
    width:154px !important;
    height:202px !important;
    transform:rotate(-8deg) !important;
    z-index:2 !important;
}
.preview-three{
    right:0 !important;
    top:40px !important;
    width:158px !important;
    height:202px !important;
    transform:rotate(8deg) !important;
    z-index:2 !important;
}
.preview-four{
    right:170px !important;
    top:142px !important;
    width:190px !important;
    height:112px !important;
    transform:rotate(-2deg) !important;
    z-index:3 !important;
    object-position:center center !important;
}


/* v10 — real artwork collage from supplied gallery images */
.hero-collage{
    height:285px !important;
    min-width:460px;
    transform:translateX(8px);
}
.hero-collage .preview-card{
    background:rgba(3,10,22,.78) !important;
    object-fit:cover !important;
    object-position:center center !important;
    border:1px solid rgba(244,201,109,.58) !important;
    box-shadow:0 26px 58px rgba(0,0,0,.54) !important;
}
.hero-collage .preview-one{
    right:172px !important;
    top:0 !important;
    width:178px !important;
    height:178px !important;
    z-index:4 !important;
    transform:rotate(-5deg) !important;
}
.hero-collage .preview-two{
    right:26px !important;
    top:8px !important;
    width:186px !important;
    height:146px !important;
    z-index:3 !important;
    transform:rotate(6deg) !important;
}
.hero-collage .preview-three{
    right:248px !important;
    top:112px !important;
    width:160px !important;
    height:158px !important;
    z-index:2 !important;
    transform:rotate(7deg) !important;
}
.hero-collage .preview-four{
    right:78px !important;
    top:148px !important;
    width:214px !important;
    height:118px !important;
    z-index:5 !important;
    transform:rotate(-4deg) !important;
    object-fit:contain !important;
    background:rgba(0,0,0,.06) !important;
}
.hero-collage .preview-five{
    right:0 !important;
    top:138px !important;
    width:134px !important;
    height:118px !important;
    z-index:6 !important;
    transform:rotate(8deg) !important;
    object-fit:contain !important;
    background:rgba(0,0,0,.05) !important;
}
@media(max-width:900px){
    .hero-collage{display:none !important;}
}


/* v13 — About typography refinements */
.about-section{
    margin-top:58px;
    padding:0 0 8px;
}

.about-card{
    position:relative;
    max-width:980px;
    margin:0 auto;
    padding:42px 48px 40px;
    border-radius:30px;
    border:1px solid rgba(214,169,79,.48);
    background:
        radial-gradient(circle at 12% 0%, rgba(244,201,109,.18), transparent 34%),
        radial-gradient(circle at 88% 18%, rgba(46,131,198,.20), transparent 38%),
        linear-gradient(135deg, rgba(255,255,255,.075), rgba(255,255,255,.024)),
        rgba(4,16,36,.74);
    box-shadow:
        0 28px 70px rgba(0,0,0,.38),
        0 0 80px rgba(214,169,79,.10),
        inset 0 1px 0 rgba(255,255,255,.10);
    overflow:hidden;
}

.about-card:before{
    content:"✦";
    position:absolute;
    top:24px;
    right:32px;
    color:var(--gold2);
    font-size:32px;
    opacity:.62;
    text-shadow:0 0 30px rgba(244,201,109,.36);
}

.about-card:after{
    content:"";
    position:absolute;
    inset:12px;
    border-radius:24px;
    border:1px solid rgba(244,201,109,.18);
    pointer-events:none;
}

.about-card h2{
    color:var(--cream);
    margin-bottom:22px;
    text-shadow:0 0 26px rgba(255,255,255,.14);
}

.about-lead{
    max-width:820px;
    margin:0 auto 24px;
    color:var(--cream);
    text-align:center;
    font-size:18px;
    line-height:1.75;
    font-weight:700;
}

.about-copy{
    max-width:840px;
    margin:0 auto;
    display:grid;
    gap:12px;
}

.about-copy p{
    margin:0;
    color:var(--gold2);
    text-align:center;
    line-height:1.7;
    font-size:15px;
}

.about-copy p:last-child{
    color:var(--cream);
    font-weight:700;
}

@media(max-width:560px){
    .about-card{
        padding:34px 22px 32px;
        border-radius:24px;
    }
    .about-card:before{right:24px; top:18px;}
    .about-lead{font-size:16px;}
}


/* v14 — unify About section gold with store link gold */
.about-card .section-label,
.about-copy p{
    color:var(--gold2);
    opacity:1;
    text-shadow:none;
}

.about-lead,
.about-copy p:last-child{
    color:var(--cream);
}

/* v17 — gallery preview background, 12-color lightbox palette */
.product-card{
    cursor:default;
}

.product-card img.artwork-preview{
    object-fit:contain !important;
    object-position:center center !important;
    padding:10px;
    background:
        radial-gradient(circle at center, rgba(255,255,255,.42), rgba(219,193,143,.18) 60%, rgba(72,48,25,.18) 100%),
        linear-gradient(135deg, #efe1c1, #b99b67) !important;
    cursor:pointer;
    transition:transform .26s ease, filter .26s ease, box-shadow .26s ease, background .26s ease;
}

.product-card:hover img.artwork-preview,
.product-card img.artwork-preview:focus{
    transform:scale(1.055);
    filter:saturate(1.06) contrast(1.04);
    box-shadow:0 18px 34px rgba(0,0,0,.34);
    outline:none;
}

.product-card img.artwork-preview:focus-visible{
    outline:2px solid var(--gold2);
    outline-offset:4px;
}

body.lightbox-open{
    overflow:hidden;
}

.artwork-lightbox{
    position:fixed;
    inset:0;
    z-index:999;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:22px;
    opacity:0;
    pointer-events:none;
    transition:opacity .22s ease;
}

.artwork-lightbox.is-open{
    opacity:1;
    pointer-events:auto;
}

.lightbox-backdrop{
    position:absolute;
    inset:0;
    background:rgba(0,0,0,.72);
    backdrop-filter:blur(8px);
}

.lightbox-panel{
    position:relative;
    width:min(860px, 94vw);
    max-height:92vh;
    border:1px solid rgba(244,201,109,.55);
    border-radius:28px;
    background:
        radial-gradient(circle at top right, rgba(244,201,109,.13), transparent 36%),
        linear-gradient(135deg, rgba(255,255,255,.075), rgba(255,255,255,.024)),
        rgba(4,16,36,.92);
    box-shadow:0 34px 90px rgba(0,0,0,.62);
    overflow:hidden;
}

.lightbox-close{
    position:absolute;
    top:14px;
    right:16px;
    z-index:3;
    width:38px;
    height:38px;
    border-radius:50%;
    border:1px solid rgba(244,201,109,.55);
    background:rgba(2,8,18,.84);
    color:var(--cream);
    font-size:27px;
    line-height:1;
    cursor:pointer;
}

.lightbox-stage{
    height:min(66vh, 680px);
    min-height:340px;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:34px;
    transition:background .22s ease;
}

.lightbox-stage img{
    max-width:100%;
    max-height:100%;
    object-fit:contain;
    display:block;
    filter:drop-shadow(0 20px 34px rgba(0,0,0,.38));
}

.bg-parchment{background:#d8c29a;}
.bg-cream{background:#f7f0dc;}
.bg-sand{background:#b99b67;}
.bg-warmgray{background:#7b766c;}
.bg-sky{background:#8fb6cf;}
.bg-navy{background:#06152f;}
.bg-charcoal{background:#20242a;}
.bg-black{background:#000;}
.bg-white{background:#f7f4ee;}
.bg-rose{background:#d98da4;}
.bg-mint{background:#8fbfa8;}
.bg-lavender{background:#a997c9;}

.lightbox-footer{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:18px;
    padding:18px 24px 22px;
    border-top:1px solid rgba(244,201,109,.26);
}

.lightbox-footer h3{
    margin:0;
    color:var(--cream);
    font-size:20px;
    letter-spacing:.04em;
}

.background-switcher{
    display:flex;
    flex-wrap:nowrap;
    justify-content:flex-end;
    gap:7px;
}

.bg-option{
    border:1px solid rgba(244,201,109,.52);
    border-radius:999px;
    background:rgba(255,255,255,.05);
    color:var(--cream);
    cursor:pointer;
    font-weight:700;
    font-size:12px;
    letter-spacing:.04em;
}

.bg-swatch{
    width:28px;
    height:28px;
    padding:0;
    position:relative;
    flex:0 0 auto;
    box-shadow:inset 0 0 0 2px rgba(0,0,0,.16), 0 2px 8px rgba(0,0,0,.18);
}

.bg-swatch[data-bg="parchment"]{background:#d8c29a;}
.bg-swatch[data-bg="cream"]{background:#f7f0dc;}
.bg-swatch[data-bg="sand"]{background:#b99b67;}
.bg-swatch[data-bg="warmgray"]{background:#7b766c;}
.bg-swatch[data-bg="sky"]{background:#8fb6cf;}
.bg-swatch[data-bg="navy"]{background:#06152f;}
.bg-swatch[data-bg="charcoal"]{background:#20242a;}
.bg-swatch[data-bg="black"]{background:#000;}
.bg-swatch[data-bg="white"]{background:#f7f4ee;}
.bg-swatch[data-bg="rose"]{background:#d98da4;}
.bg-swatch[data-bg="mint"]{background:#8fbfa8;}
.bg-swatch[data-bg="lavender"]{background:#a997c9;}

.bg-option.is-active,
.bg-option:hover{
    border-color:rgba(255,224,138,.98);
    transform:translateY(-1px);
}

.bg-option.is-active::after{
    content:"";
    position:absolute;
    inset:-5px;
    border-radius:999px;
    border:2px solid #ffe08a;
    pointer-events:none;
}

@media(max-width:560px){
    .lightbox-panel{border-radius:22px;}
    .lightbox-stage{height:58vh; min-height:280px; padding:22px;}
    .lightbox-footer{flex-direction:column; align-items:flex-start;}
    .background-switcher{justify-content:flex-start; flex-wrap:wrap;}
}

/* v20 — expandable wearable-art gallery */
.section-intro{
    max-width:760px;
    margin:-14px auto 30px;
    color:var(--muted);
    text-align:center;
    line-height:1.65;
    font-size:16px;
}

.apparel-grid{
    grid-template-columns:repeat(4,minmax(0,1fr));
}

.product-card-active{
    cursor:pointer;
}

.card-image-wrap{
    position:relative;
}

.product-card .card-image-wrap img{
    width:100%;
    height:330px !important;
    padding:0 !important;
    object-fit:cover !important;
    object-position:center top !important;
    background:#eef0ef !important;
}

.card-id{
    position:absolute;
    left:12px;
    bottom:12px;
    padding:7px 10px;
    border:1px solid rgba(244,201,109,.55);
    border-radius:999px;
    background:rgba(2,8,18,.78);
    color:var(--gold2);
    font-size:11px;
    font-weight:800;
    letter-spacing:.12em;
    backdrop-filter:blur(8px);
}

.card-open{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    margin-top:14px;
    color:var(--gold2);
    font-size:12px;
    font-weight:800;
    letter-spacing:.13em;
    text-transform:uppercase;
}

.card-open b{
    font-size:17px;
    transition:transform .2s ease;
}

.product-card-active:hover .card-open b{transform:translateX(4px)}

.product-placeholder{
    min-height:455px;
    opacity:.74;
    border-style:dashed;
}

.placeholder-art{
    height:330px;
    border-radius:18px;
    border:1px dashed rgba(244,201,109,.42);
    background:
        radial-gradient(circle at 50% 42%, rgba(46,131,198,.22), transparent 28%),
        linear-gradient(135deg, rgba(255,255,255,.05), rgba(255,255,255,.015));
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:14px;
    color:var(--gold2);
}

.placeholder-art span{
    display:grid;
    place-items:center;
    width:76px;
    height:76px;
    border:1px solid rgba(244,201,109,.45);
    border-radius:50%;
    font-family:Georgia,serif;
    font-size:28px;
    color:var(--cream);
    background:rgba(2,8,18,.42);
}

.placeholder-art b{
    font-size:11px;
    letter-spacing:.22em;
    text-transform:uppercase;
}

.product-placeholder:hover{
    transform:none;
    border-color:rgba(214,169,79,.36);
    box-shadow:0 22px 45px rgba(0,0,0,.27);
}

body.artwork-modal-open{overflow:hidden}

.artwork-modal{
    position:fixed;
    inset:0;
    z-index:1200;
    display:grid;
    place-items:center;
    padding:28px;
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transition:opacity .25s ease,visibility .25s ease;
}

.artwork-modal.is-open{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
}

.artwork-modal-backdrop{
    position:absolute;
    inset:0;
    background:rgba(1,6,13,.72);
    backdrop-filter:blur(13px) saturate(.78);
}

.artwork-modal-panel{
    position:relative;
    z-index:1;
    width:min(1380px,95vw);
    max-height:92vh;
    overflow:auto;
    display:grid;
    grid-template-columns:minmax(420px,1.1fr) minmax(400px,.9fr);
    gap:46px;
    padding:38px 48px 68px;
    border:1px solid rgba(214,169,79,.64);
    border-radius:28px;
    background:
        radial-gradient(circle at 12% 0%, rgba(46,131,198,.15), transparent 30%),
        radial-gradient(circle at 91% 11%, rgba(244,201,109,.10), transparent 26%),
        linear-gradient(135deg, rgba(255,255,255,.045), rgba(255,255,255,.012)),
        rgba(3,11,22,.96);
    box-shadow:0 44px 120px rgba(0,0,0,.72),inset 0 1px 0 rgba(255,255,255,.08);
}

.artwork-modal-panel:after{
    content:"";
    position:absolute;
    inset:12px;
    border:1px solid rgba(244,201,109,.10);
    border-radius:21px;
    pointer-events:none;
}

.artwork-modal-media{
    min-height:620px;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:18px;
    border-radius:22px;
    border:1px solid rgba(244,201,109,.38);
    background:
        linear-gradient(45deg,#f5f5f5 25%,transparent 25%),
        linear-gradient(-45deg,#f5f5f5 25%,transparent 25%),
        linear-gradient(45deg,transparent 75%,#f5f5f5 75%),
        linear-gradient(-45deg,transparent 75%,#f5f5f5 75%),
        #e7e7e7;
    background-size:32px 32px;
    background-position:0 0,0 16px,16px -16px,-16px 0;
}

.artwork-modal-media img{
    display:block;
    width:100%;
    max-height:690px;
    object-fit:contain;
    border-radius:14px;
}

.artwork-modal-info{
    align-self:center;
    padding:10px 12px 10px 0;
}

.modal-id{
    color:var(--gold2);
    font-size:12px;
    font-weight:800;
    letter-spacing:.2em;
    text-transform:uppercase;
    margin-bottom:14px;
}

.artwork-modal-info h3{
    margin:0;
    color:var(--cream);
    font-family:Georgia,'Times New Roman',serif;
    font-size:clamp(38px,4vw,62px);
    line-height:1.02;
    font-weight:700;
}

.modal-divider{
    display:flex;
    align-items:center;
    gap:16px;
    margin:26px 0 22px;
    color:var(--gold2);
}
.modal-divider span{height:1px;background:rgba(214,169,79,.62);flex:1}
.modal-divider b{font-size:19px}

.modal-category{
    margin:0 0 20px;
    color:var(--gold2);
    font-size:15px;
    font-weight:800;
    letter-spacing:.1em;
    text-transform:uppercase;
}

.modal-description{
    margin:0;
    color:#d8d7d2;
    font-size:17px;
    line-height:1.7;
}

.modal-features{
    margin-top:26px;
    padding:22px 0;
    border-top:1px solid rgba(214,169,79,.32);
    border-bottom:1px solid rgba(214,169,79,.32);
    display:grid;
    gap:17px;
}

.modal-features>div{display:flex;gap:14px;align-items:flex-start}
.modal-features>div>span{color:var(--gold2);font-size:27px;line-height:1}
.modal-features p{margin:0;color:var(--cream)}
.modal-features b{display:block;font-size:13px;letter-spacing:.08em}
.modal-features small{display:block;color:var(--muted);font-size:13px;margin-top:4px;line-height:1.35}

.modal-marketplaces{margin-top:24px}
.modal-marketplaces>p{
    color:var(--gold2);
    font-size:13px;
    font-weight:800;
    letter-spacing:.1em;
    text-transform:uppercase;
}
.marketplace-buttons{display:flex;gap:10px;flex-wrap:wrap}
.marketplace-link{
    min-width:128px;
    padding:14px 18px;
    border:1px solid rgba(214,169,79,.48);
    border-radius:8px;
    background:rgba(255,255,255,.05);
    color:var(--cream);
    text-align:center;
    text-decoration:none;
    font-weight:800;
    cursor:default;
}
.marketplace-link[aria-disabled="true"]{opacity:.88}
.links-note{display:block;margin-top:10px;color:var(--muted);font-size:11px}

.artwork-modal-close,
.artwork-modal-arrow{
    position:absolute;
    z-index:4;
    display:grid;
    place-items:center;
    border:1px solid rgba(214,169,79,.55);
    border-radius:50%;
    background:rgba(3,11,22,.88);
    color:var(--cream);
    cursor:pointer;
    transition:background .2s ease,border-color .2s ease,transform .2s ease;
}
.artwork-modal-close:hover,.artwork-modal-arrow:hover{background:rgba(214,169,79,.18);border-color:var(--gold2)}
.artwork-modal-close{top:18px;right:18px;width:46px;height:46px;font-size:32px}
.artwork-modal-arrow{top:50%;width:56px;height:56px;font-size:27px}
.artwork-modal-prev{left:-28px}
.artwork-modal-next{right:-28px}
.artwork-modal-arrow:hover{transform:translateY(-50%) scale(1.05)}
.artwork-modal-arrow{transform:translateY(-50%)}

.modal-signature{
    position:absolute;
    left:48px;
    right:48px;
    bottom:22px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:24px;
    color:var(--gold);
    font-size:10px;
    letter-spacing:.22em;
    text-transform:uppercase;
}
.modal-signature b{font-size:19px;color:var(--gold2)}

@media(max-width:1100px){
    .apparel-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
    .artwork-modal-panel{grid-template-columns:1fr;gap:26px;padding:34px 34px 70px}
    .artwork-modal-media{min-height:420px}
    .artwork-modal-media img{max-height:560px}
    .artwork-modal-info{padding:0}
    .modal-signature{position:static;grid-column:1;margin-top:4px;flex-wrap:wrap;text-align:center}
}

@media(max-width:760px){
    .apparel-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
    .artwork-modal{padding:10px}
    .artwork-modal-panel{width:100%;max-height:96vh;padding:58px 18px 30px;border-radius:20px}
    .artwork-modal-media{min-height:300px;padding:10px}
    .artwork-modal-info h3{font-size:36px}
    .artwork-modal-arrow{top:25px;transform:none;width:42px;height:42px;font-size:21px}
    .artwork-modal-arrow:hover{transform:scale(1.04)}
    .artwork-modal-prev{left:18px}
    .artwork-modal-next{right:70px}
    .artwork-modal-close{top:25px;right:18px;width:42px;height:42px;font-size:27px}
}

@media(max-width:520px){
    .apparel-grid{grid-template-columns:1fr}
    .product-card .card-image-wrap img,.placeholder-art{height:390px !important}
    .product-placeholder{min-height:510px}
    .modal-signature{gap:10px;letter-spacing:.12em}
}


/* v21 — complete 12-design wearable gallery */
.card-image-wrap{
    position:relative;
    overflow:hidden;
    border-radius:18px;
    background:radial-gradient(circle at 50% 25%, rgba(255,245,204,.96), rgba(218,173,82,.92) 55%, rgba(127,82,28,.95) 100%);
    border:1px solid rgba(244,201,109,.55);
}
.product-card img{
    background:radial-gradient(circle at 50% 20%, #f8eec9 0%, #e2bd72 54%, #8d5b25 100%) !important;
    border:none !important;
}
.card-image-wrap:after{
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;
    box-shadow:inset 0 0 45px rgba(54,31,8,.22);
    border-radius:18px;
}
.artwork-modal-panel{
    width:min(1180px, calc(100vw - 36px)) !important;
    height:min(760px, calc(100vh - 36px)) !important;
    max-height:calc(100vh - 36px) !important;
    overflow:hidden !important;
    grid-template-columns:minmax(0, 1.05fr) minmax(360px, .95fr) !important;
}
.artwork-modal-media{
    min-width:0;
    overflow:hidden;
    background:radial-gradient(circle at 50% 22%, rgba(255,247,211,.98), rgba(221,181,101,.96) 56%, rgba(105,65,24,.98) 100%) !important;
}
.artwork-modal-media img{
    width:100% !important;
    height:100% !important;
    object-fit:contain !important;
    object-position:center !important;
    background:transparent !important;
}
.artwork-modal-info{
    min-width:0;
    overflow-y:auto !important;
    overflow-x:hidden !important;
    padding:42px 42px 72px !important;
    scrollbar-width:thin;
    scrollbar-color:rgba(244,201,109,.65) rgba(255,255,255,.06);
}
.artwork-modal-info::-webkit-scrollbar{width:8px}
.artwork-modal-info::-webkit-scrollbar-thumb{background:rgba(244,201,109,.6);border-radius:99px}
.artwork-modal-info::-webkit-scrollbar-track{background:rgba(255,255,255,.04)}
.artwork-modal-info h3{
    font-size:clamp(34px, 4.2vw, 62px) !important;
    line-height:.98 !important;
    overflow-wrap:anywhere;
}
.marketplace-buttons{
    display:grid !important;
    grid-template-columns:repeat(3, minmax(0,1fr)) !important;
    gap:10px !important;
}
.marketplace-link{
    min-width:0 !important;
    text-align:center;
    padding:13px 8px !important;
}
.modal-signature{
    white-space:normal !important;
    text-align:center;
    padding:12px 22px !important;
}
@media(max-width:860px){
    .artwork-modal-panel{
        display:block !important;
        width:calc(100vw - 20px) !important;
        height:calc(100vh - 20px) !important;
        max-height:calc(100vh - 20px) !important;
        overflow-y:auto !important;
    }
    .artwork-modal-media{
        height:48vh !important;
        min-height:350px;
    }
    .artwork-modal-info{
        overflow:visible !important;
        padding:30px 24px 80px !important;
    }
    .marketplace-buttons{grid-template-columns:1fr !important}
    .modal-signature{position:relative !important}
}


/* v22 — corrected clean product backgrounds and hidden catalogue IDs */
.card-id,
.artwork-modal-id{
    display:none !important;
}

.card-image-wrap{
    background:#fff !important;
    border:1px solid rgba(255,255,255,.18) !important;
}
.product-card img{
    background:#fff !important;
}
.card-image-wrap:after{
    display:none !important;
}

.artwork-modal-media{
    background:#fff !important;
}
.artwork-modal-media img{
    background:#fff !important;
}


/* v23 — warm ivory product backgrounds and corrected modal signature */
.card-image-wrap,
.product-card img,
.artwork-modal-media,
.artwork-modal-media img{
    background:#fff9e8 !important;
}

.artwork-modal-media{
    position:relative !important;
    padding:14px 14px 38px !important;
}

.artwork-modal-media img{
    width:100% !important;
    height:100% !important;
    max-height:none !important;
    object-fit:contain !important;
    object-position:center !important;
}

.artwork-modal-media .modal-signature{
    position:absolute !important;
    left:10px !important;
    right:10px !important;
    bottom:9px !important;
    width:auto !important;
    margin:0 !important;
    padding:0 !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    gap:13px !important;
    color:var(--gold) !important;
    font-size:8.5px !important;
    line-height:1 !important;
    letter-spacing:.17em !important;
    text-transform:uppercase !important;
    white-space:nowrap !important;
    text-align:center !important;
    overflow:hidden !important;
}

.artwork-modal-media .modal-signature b{
    flex:0 0 auto;
    color:var(--gold2) !important;
    font-size:15px !important;
}

.artwork-modal-media .modal-signature span{
    flex:0 1 auto;
    min-width:0;
}

@media(max-width:860px){
    .artwork-modal-media{
        padding-bottom:34px !important;
    }
    .artwork-modal-media .modal-signature{
        position:absolute !important;
        font-size:7px !important;
        gap:8px !important;
        letter-spacing:.12em !important;
        white-space:nowrap !important;
    }
}


/* v24 — grouped gallery, blue framing and cleaner card presentation */
.gallery-group{
    margin-top:34px;
}
.gallery-group + .gallery-group{
    margin-top:58px;
}
.gallery-group-heading{
    max-width:760px;
    margin:0 auto 20px;
    text-align:center;
}
.gallery-group-heading span{
    display:block;
    color:var(--gold);
    font-size:11px;
    letter-spacing:.28em;
    text-transform:uppercase;
    font-weight:700;
    margin-bottom:8px;
}
.gallery-group-heading h3{
    margin:0;
    color:#f7f1e6;
    font-size:clamp(24px, 3vw, 38px);
    letter-spacing:.08em;
    text-transform:uppercase;
}
.gallery-group-heading p{
    margin:10px auto 0;
    max-width:690px;
    color:rgba(220,228,239,.78);
    font-size:14px;
    line-height:1.6;
}

/* richer blue framing around every preview */
.card-image-wrap{
    padding:7px !important;
    background:linear-gradient(145deg,#17375f 0%,#0f2948 48%,#17324f 100%) !important;
    border:1px solid rgba(228,184,91,.28) !important;
    box-shadow:
        inset 0 0 0 1px rgba(255,255,255,.04),
        0 10px 24px rgba(0,0,0,.18);
}
.gallery-group-digital .card-image-wrap{
    background:linear-gradient(145deg,#21456f 0%,#153557 52%,#102a45 100%) !important;
}
.gallery-group-kids .card-image-wrap{
    background:linear-gradient(145deg,#284a70 0%,#173958 55%,#122d49 100%) !important;
}
.product-card img{
    border-radius:12px !important;
    background:#fff9e8 !important;
}
.product-card{
    transition:transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.product-card:hover{
    transform:translateY(-2px);
    border-color:rgba(231,191,99,.48);
    box-shadow:0 14px 28px rgba(0,0,0,.22);
}
.product-card:hover .card-image-wrap{
    filter:brightness(1.05);
}

/* slightly tighter cards after removing the redundant link */
.product-card h3{
    margin-bottom:6px !important;
}
.product-card p{
    margin-bottom:4px !important;
}

/* dark blue image stage and a dedicated footer strip for the slogan */
.artwork-modal-media{
    background:linear-gradient(145deg,#17375f 0%,#102b4c 56%,#0d223a 100%) !important;
    padding:14px 14px 42px !important;
    border-right:1px solid rgba(227,184,91,.25);
}
.artwork-modal-media img{
    background:#fff9e8 !important;
    border-radius:16px !important;
    box-shadow:0 10px 28px rgba(0,0,0,.22);
}
.artwork-modal-media .modal-signature{
    left:14px !important;
    right:14px !important;
    bottom:10px !important;
    color:#e5b85c !important;
    text-shadow:0 1px 1px rgba(0,0,0,.35);
}

/* About section pillars */
.about-pillars{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:12px;
    margin:24px 0 28px;
}
.about-pillars div{
    padding:16px 14px;
    border:1px solid rgba(227,184,91,.22);
    border-radius:14px;
    background:linear-gradient(145deg,rgba(28,59,95,.42),rgba(12,31,52,.5));
    text-align:center;
}
.about-pillars span{
    display:block;
    color:var(--gold);
    font-size:20px;
    margin-bottom:8px;
}
.about-pillars b{
    display:block;
    color:#f6f0e7;
    font-size:12px;
    letter-spacing:.08em;
    text-transform:uppercase;
}
.about-pillars small{
    display:block;
    color:rgba(222,228,238,.68);
    font-size:11px;
    line-height:1.45;
    margin-top:5px;
}

@media(max-width:860px){
    .gallery-group + .gallery-group{margin-top:42px}
    .about-pillars{grid-template-columns:1fr}
}


/* v25 — active and inactive marketplace buttons */
.marketplace-link.is-active{
    cursor:pointer;
    border-color:rgba(229,184,92,.52) !important;
    color:#f6f0e7 !important;
}
.marketplace-link.is-active:hover{
    transform:translateY(-1px);
    border-color:rgba(241,199,105,.85) !important;
    background:linear-gradient(145deg,rgba(44,73,105,.92),rgba(20,43,68,.96)) !important;
    box-shadow:0 7px 16px rgba(0,0,0,.22);
}
.marketplace-link.is-disabled{
    cursor:default;
    opacity:.42;
    filter:saturate(.35);
    border-style:dashed !important;
}
.gallery-group-featured{
    margin-top:26px;
}


/* v26 — performance and marketplace naming updates */
.artwork-modal-info h3{
    font-size:clamp(31px, 3.75vw, 56px) !important;
    line-height:1 !important;
}

/* Slightly tighter heading behavior for longer three-line artwork names */
@media(max-width:1200px){
    .artwork-modal-info h3{
        font-size:clamp(29px, 3.45vw, 51px) !important;
    }
}


/* v27 — slightly smaller artwork titles */
.artwork-modal-info h3{
    font-size:clamp(28px, 3.4vw, 50px) !important;
    line-height:1 !important;
}

@media(max-width:1200px){
    .artwork-modal-info h3{
        font-size:clamp(27px, 3.15vw, 46px) !important;
    }
}


/* v28 — new Silent Sky Gallery brand hero */
.sr-only{
    position:absolute !important;
    width:1px !important;
    height:1px !important;
    padding:0 !important;
    margin:-1px !important;
    overflow:hidden !important;
    clip:rect(0,0,0,0) !important;
    white-space:nowrap !important;
    border:0 !important;
}

.hero.hero-brand{
    min-height:0 !important;
    padding:28px 20px 22px !important;
    overflow:visible !important;
}

.hero.hero-brand:before,
.hero.hero-brand:after{
    display:none !important;
}

.hero-brand-card{
    display:block !important;
    width:min(1180px, 96vw) !important;
    min-height:0 !important;
    padding:0 !important;
    overflow:hidden !important;
    text-align:center !important;
    border-radius:30px !important;
    background:#031833 !important;
    border:1px solid rgba(230,181,76,.46) !important;
    box-shadow:
        0 30px 85px rgba(0,0,0,.46),
        0 0 70px rgba(33,103,161,.14),
        inset 0 1px 0 rgba(255,255,255,.06) !important;
}

.hero-brand-logo{
    display:block;
    width:100%;
    height:auto;
    aspect-ratio:2 / 1;
    object-fit:cover;
    object-position:center;
    background:#031833;
}

.hero-brand-actions{
    display:flex !important;
    justify-content:center !important;
    align-items:center;
    gap:14px !important;
    padding:18px 22px 20px;
    border-top:1px solid rgba(230,181,76,.28);
    background:
        radial-gradient(circle at 50% 0%, rgba(228,174,67,.12), transparent 54%),
        linear-gradient(180deg,#061d3b,#03142c);
}

.btn.youtube{
    border:1px solid rgba(230,181,76,.62);
    color:var(--cream);
    background:linear-gradient(135deg,rgba(30,73,117,.78),rgba(8,31,58,.94));
    box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
}

.btn.youtube:hover,
.btn.secondary:hover{
    border-color:rgba(255,214,126,.9);
    background:linear-gradient(135deg,rgba(43,93,140,.88),rgba(12,39,69,.98));
    transform:translateY(-1px);
}

/* Product photography now uses natural scene backgrounds. */
.product-card img,
.artwork-modal-media img{
    background:#061b35 !important;
}

.card-image-wrap{
    background:linear-gradient(145deg,#1b4774 0%,#102e51 55%,#081d37 100%) !important;
}

/* Keep the compact title treatment from v27. */
.artwork-modal-info h3{
    font-size:clamp(28px,3.4vw,50px) !important;
    line-height:1 !important;
}

@media(max-width:720px){
    .hero.hero-brand{
        padding:14px 10px 14px !important;
    }
    .hero-brand-card{
        width:100% !important;
        border-radius:20px !important;
    }
    .hero-brand-actions{
        flex-wrap:wrap;
        padding:14px 12px 16px;
    }
    .hero-brand-actions .btn{
        padding:12px 18px;
        font-size:14px;
    }
}


/* v29 — compact brand logo and back-to-top control */
.hero-brand-card{
    width:min(590px, 94vw) !important;
    border-radius:24px !important;
}

.hero-brand-logo{
    width:100% !important;
    height:auto !important;
    aspect-ratio:2 / 1 !important;
}

.hero-brand-actions{
    gap:10px !important;
    padding:14px 16px 16px !important;
}

.hero-brand-actions .btn{
    padding:11px 17px !important;
    font-size:14px !important;
}

.back-to-top{
    position:fixed;
    right:24px;
    bottom:24px;
    z-index:1200;
    width:48px;
    height:48px;
    display:grid;
    place-items:center;
    padding:0;
    border-radius:50%;
    border:1px solid rgba(236,190,91,.78);
    color:#f4c15f;
    background:
        radial-gradient(circle at 35% 25%, rgba(47,91,137,.96), rgba(7,29,55,.98) 68%);
    box-shadow:
        0 12px 28px rgba(0,0,0,.38),
        inset 0 1px 0 rgba(255,255,255,.11),
        0 0 22px rgba(233,183,76,.12);
    cursor:pointer;
    opacity:0;
    visibility:hidden;
    transform:translateY(10px);
    transition:
        opacity .22s ease,
        visibility .22s ease,
        transform .22s ease,
        border-color .22s ease,
        box-shadow .22s ease;
}

.back-to-top span{
    display:block;
    font-size:27px;
    line-height:1;
    transform:translateY(-1px);
}

.back-to-top.is-visible{
    opacity:1;
    visibility:visible;
    transform:translateY(0);
}

.back-to-top:hover{
    color:#ffe0a0;
    border-color:#ffd47a;
    transform:translateY(-2px);
    box-shadow:
        0 16px 34px rgba(0,0,0,.46),
        inset 0 1px 0 rgba(255,255,255,.14),
        0 0 26px rgba(233,183,76,.22);
}

.back-to-top:focus-visible{
    outline:3px solid rgba(255,210,112,.35);
    outline-offset:3px;
}

@media(max-width:720px){
    .hero-brand-card{
        width:min(470px, 100%) !important;
    }

    .hero-brand-actions{
        gap:8px !important;
    }

    .hero-brand-actions .btn{
        padding:10px 14px !important;
        font-size:13px !important;
    }

    .back-to-top{
        right:14px;
        bottom:14px;
        width:44px;
        height:44px;
    }
}


/* v30 — wide hero, split navigation and refined section styling */
.hero.hero-brand{
    padding:22px 20px 8px !important;
}

.hero-brand-card{
    width:min(920px, 94vw) !important;
    border-radius:24px !important;
    box-shadow:
        0 26px 70px rgba(0,0,0,.44),
        0 0 78px rgba(38,102,158,.18),
        0 0 34px rgba(228,174,67,.08),
        inset 0 1px 0 rgba(255,255,255,.06) !important;
}

.hero-brand-logo{
    display:block !important;
    width:100% !important;
    height:auto !important;
    aspect-ratio:auto !important;
    object-fit:contain !important;
    object-position:center !important;
}

.hero-brand-actions{
    display:flex !important;
    justify-content:space-between !important;
    align-items:center !important;
    gap:18px !important;
    padding:15px 20px 17px !important;
}

.hero-action-group{
    display:flex;
    align-items:center;
    gap:10px;
}

.hero-action-social{
    justify-content:flex-start;
}

.hero-action-about{
    justify-content:flex-end;
    margin-left:auto;
}

.products-section{
    margin-top:18px !important;
}

/* Small decorative separator under collection titles */
.products-section > h2::after,
.gallery-group-heading h3::after{
    content:"";
    display:block;
    width:72px;
    height:1px;
    margin:13px auto 0;
    background:
        linear-gradient(90deg,transparent,rgba(235,188,88,.95),transparent);
    box-shadow:0 0 14px rgba(235,188,88,.18);
}

/* Keep every product row visually aligned */
.product-card{
    display:flex !important;
    flex-direction:column !important;
    min-height:100%;
}

.product-card h3{
    min-height:46px;
    display:flex;
    align-items:flex-end;
    justify-content:center;
}

.product-card p{
    min-height:58px;
    display:flex;
    align-items:flex-start;
    justify-content:center;
}

/* Slightly more elegant store-card interaction */
.store-card{
    transition:
        transform .22s ease,
        border-color .22s ease,
        box-shadow .22s ease,
        filter .22s ease !important;
}

.store-card:hover{
    transform:translateY(-3px) !important;
    border-color:rgba(244,201,109,.88) !important;
    filter:brightness(1.055);
    box-shadow:
        0 24px 48px rgba(0,0,0,.34),
        0 0 24px rgba(218,169,68,.10) !important;
}

.store-status{
    display:inline-flex !important;
    align-items:center;
    justify-content:center;
    margin-top:7px !important;
    padding:5px 10px !important;
    border-radius:999px;
    border:1px solid rgba(244,201,109,.34);
    background:rgba(244,201,109,.08);
    color:rgba(248,239,219,.86) !important;
    font-size:10px !important;
    line-height:1 !important;
    letter-spacing:.09em !important;
    text-transform:uppercase;
    font-weight:700 !important;
    opacity:1 !important;
}

/* Mobile: keep the logo natural and controls readable */
@media(max-width:720px){
    .hero.hero-brand{
        padding:12px 10px 8px !important;
    }

    .hero-brand-card{
        width:100% !important;
        border-radius:18px !important;
    }

    .hero-brand-actions{
        flex-direction:column !important;
        align-items:stretch !important;
        gap:10px !important;
        padding:12px !important;
    }

    .hero-action-group{
        justify-content:center !important;
        margin-left:0 !important;
        flex-wrap:wrap;
    }

    .hero-action-about .btn{
        min-width:150px;
    }

    .products-section{
        margin-top:12px !important;
    }

    .product-card h3,
    .product-card p{
        min-height:0;
    }
}


/* v31 — more panoramic and less dominant brand hero */
.hero.hero-brand{
    padding:16px 20px 2px !important;
}

.hero-brand-card{
    position:relative !important;
    width:min(820px, 92vw) !important;
    padding:12px 12px 0 !important;
    border-radius:24px !important;
    background:
        linear-gradient(135deg, rgba(46,131,198,.28), rgba(6,21,47,.94)),
        rgba(8,28,60,.78) !important;
    border:1px solid rgba(214,169,79,.42) !important;
    box-shadow:
        0 24px 48px rgba(0,0,0,.30),
        0 0 24px rgba(38,102,158,.12),
        inset 0 1px 0 rgba(255,255,255,.05) !important;
    overflow:hidden !important;
}

.hero-brand-card::after{
    content:"";
    position:absolute;
    width:170px;
    height:170px;
    border-radius:50%;
    right:-62px;
    top:-68px;
    background:rgba(244,201,109,.10);
    pointer-events:none;
}

.hero-brand-logo{
    position:relative;
    z-index:1;
    display:block !important;
    width:100% !important;
    height:auto !important;
    aspect-ratio:3.1 / 1 !important;
    object-fit:cover !important;
    object-position:center 58% !important;
    border-radius:18px !important;
    border:1px solid rgba(244,201,109,.26) !important;
    background:#031833 !important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
}

.hero-brand-actions{
    position:relative;
    z-index:1;
    gap:18px !important;
    padding:12px 6px 14px !important;
    background:transparent !important;
    border-top:none !important;
}

.hero-action-group{
    gap:10px;
}

.hero-action-about{
    margin-left:auto;
}

.hero-brand-actions .btn{
    padding:11px 17px !important;
    font-size:14px !important;
}

.products-section{
    margin-top:10px !important;
}

@media(max-width:900px){
    .hero-brand-card{
        width:min(760px, 95vw) !important;
    }
}

@media(max-width:720px){
    .hero.hero-brand{
        padding:12px 10px 4px !important;
    }

    .hero-brand-card{
        width:100% !important;
        padding:10px 10px 0 !important;
        border-radius:20px !important;
    }

    .hero-brand-logo{
        aspect-ratio:2.28 / 1 !important;
        object-position:center 56% !important;
        border-radius:16px !important;
    }

    .hero-brand-actions{
        padding:12px 2px 14px !important;
    }
}


/* v32 — supplied compact logo, panoramic crop and unified blue frame */
.hero.hero-brand{
    padding:14px 20px 0 !important;
}

.hero-brand-card{
    width:min(760px, 92vw) !important;
    padding:8px 8px 0 !important;
    border-radius:20px !important;
    overflow:hidden !important;
    background:
        linear-gradient(145deg,#17375f 0%,#0f2948 48%,#17324f 100%) !important;
    border:1px solid rgba(228,184,91,.30) !important;
    box-shadow:
        inset 0 0 0 1px rgba(255,255,255,.04),
        0 18px 40px rgba(0,0,0,.28),
        0 0 22px rgba(38,102,158,.10) !important;
}

.hero-brand-card::after{
    display:none !important;
}

.hero-brand-logo{
    display:block !important;
    width:100% !important;
    height:auto !important;
    aspect-ratio:auto !important;
    object-fit:contain !important;
    object-position:center !important;
    border-radius:14px !important;
    border:1px solid rgba(244,201,109,.24) !important;
    background:#031833 !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.04),
        0 8px 18px rgba(0,0,0,.15) !important;
}

.hero-brand-actions{
    padding:9px 3px 11px !important;
    gap:12px !important;
    background:transparent !important;
    border-top:0 !important;
}

.hero-brand-actions .btn{
    padding:9px 15px !important;
    font-size:13px !important;
}

.products-section{
    margin-top:8px !important;
}

@media(max-width:720px){
    .hero.hero-brand{
        padding:10px 10px 0 !important;
    }

    .hero-brand-card{
        width:100% !important;
        padding:6px 6px 0 !important;
        border-radius:17px !important;
    }

    .hero-brand-logo{
        aspect-ratio:auto !important;
        object-fit:contain !important;
        border-radius:12px !important;
    }

    .hero-brand-actions{
        padding:9px 2px 10px !important;
    }

    .hero-brand-actions .btn{
        padding:9px 14px !important;
        font-size:12px !important;
    }
}


/* v33 — wide integrated masthead, no double frame */
.hero.hero-brand{
    padding:12px 20px 0 !important;
}

.hero-brand-card{
    width:min(980px, 94vw) !important;
    padding:6px 6px 0 !important;
    border-radius:18px !important;
    overflow:hidden !important;
    background:
        linear-gradient(145deg,#17375f 0%,#0f2948 52%,#102b49 100%) !important;
    border:1px solid rgba(228,184,91,.28) !important;
    box-shadow:
        inset 0 0 0 1px rgba(255,255,255,.035),
        0 16px 34px rgba(0,0,0,.25) !important;
}

.hero-brand-card::after{
    display:none !important;
}

.hero-brand-logo{
    display:block !important;
    width:100% !important;
    height:210px !important;
    aspect-ratio:auto !important;
    object-fit:contain !important;
    object-position:center !important;
    border:0 !important;
    border-radius:12px !important;
    background:#031833 !important;
    box-shadow:none !important;
}

.hero-brand-actions{
    min-height:46px !important;
    padding:7px 4px 9px !important;
    gap:12px !important;
    background:transparent !important;
    border-top:0 !important;
}

.hero-brand-actions .btn{
    padding:8px 14px !important;
    font-size:12.5px !important;
}

.products-section{
    margin-top:6px !important;
}

@media(max-width:900px){
    .hero-brand-card{
        width:min(860px, 95vw) !important;
    }

    .hero-brand-logo{
        height:190px !important;
    }
}

@media(max-width:720px){
    .hero.hero-brand{
        padding:9px 10px 0 !important;
    }

    .hero-brand-card{
        width:100% !important;
        padding:5px 5px 0 !important;
        border-radius:16px !important;
    }

    .hero-brand-logo{
        height:170px !important;
        border-radius:10px !important;
    }

    .hero-brand-actions{
        padding:7px 2px 8px !important;
    }

    .hero-brand-actions .btn{
        padding:8px 12px !important;
        font-size:12px !important;
    }
}


/* v34 — final wide logo integration */
.hero.hero-brand{
    padding:12px 20px 2px !important;
}

.hero-brand-card{
    width:min(1120px, 95vw) !important;
    padding:6px 6px 0 !important;
    border-radius:18px !important;
    overflow:hidden !important;
    background:
        linear-gradient(145deg,#17375f 0%,#0f2948 52%,#102b49 100%) !important;
    border:1px solid rgba(228,184,91,.28) !important;
    box-shadow:
        inset 0 0 0 1px rgba(255,255,255,.035),
        0 16px 34px rgba(0,0,0,.25) !important;
}

.hero-brand-card::after{
    display:none !important;
}

.hero-brand-logo{
    display:block !important;
    width:100% !important;
    height:auto !important;
    aspect-ratio:2048 / 682 !important;
    object-fit:contain !important;
    object-position:center !important;
    border:0 !important;
    border-radius:12px !important;
    background:#031833 !important;
    box-shadow:none !important;
}

.hero-brand-actions{
    min-height:44px !important;
    padding:7px 4px 9px !important;
    gap:12px !important;
    background:transparent !important;
    border-top:0 !important;
}

.hero-brand-actions .btn{
    padding:8px 14px !important;
    font-size:12.5px !important;
}

.products-section{
    margin-top:8px !important;
}

@media(max-width:900px){
    .hero-brand-card{
        width:min(980px, 96vw) !important;
    }
}

@media(max-width:720px){
    .hero.hero-brand{
        padding:9px 10px 0 !important;
    }

    .hero-brand-card{
        width:100% !important;
        padding:5px 5px 0 !important;
        border-radius:16px !important;
    }

    .hero-brand-logo{
        width:100% !important;
        height:auto !important;
        aspect-ratio:2048 / 682 !important;
        border-radius:10px !important;
    }

    .hero-brand-actions{
        padding:7px 2px 8px !important;
    }

    .hero-brand-actions .btn{
        padding:8px 12px !important;
        font-size:12px !important;
    }
}


/* v35 — refined About storytelling, readability and lower-page consistency */

/* Slightly clearer product captions without changing the card proportions. */
.product-card p{
    font-size:14px !important;
    line-height:1.5 !important;
}

/* Give the store cards a little more breathing room. */
.store-card{
    min-height:188px !important;
    padding:25px 22px !important;
}

.store-status{
    border-color:rgba(244,201,109,.56) !important;
    background:rgba(244,201,109,.14) !important;
    color:#f8efdb !important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
}

/* Bring the final two sections into a more compact visual relationship. */
.stores-section{
    padding-bottom:0 !important;
}

.about-section{
    margin-top:42px !important;
    padding-bottom:18px !important;
}

.about-card{
    max-width:1040px !important;
    padding:42px 46px 44px !important;
}

.about-lead{
    max-width:860px !important;
    font-size:19px !important;
    line-height:1.7 !important;
    margin-bottom:26px !important;
}

/* The original three process pillars remain the quick visual summary. */
.about-pillars{
    margin-bottom:24px !important;
}

.about-pillars div{
    min-height:104px;
    display:flex;
    flex-direction:column;
    justify-content:center;
}

/* The longer About copy is now presented as a visual story grid. */
.about-story-grid{
    position:relative;
    z-index:1;
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:14px;
    max-width:920px;
    margin:0 auto;
}

.about-story-card{
    position:relative;
    display:grid;
    grid-template-columns:38px minmax(0,1fr);
    gap:13px;
    align-items:flex-start;
    min-height:176px;
    padding:20px 20px 19px;
    border-radius:17px;
    border:1px solid rgba(86,135,181,.30);
    background:
        radial-gradient(circle at 100% 0%, rgba(244,201,109,.08), transparent 34%),
        linear-gradient(145deg,rgba(31,67,105,.48),rgba(8,27,49,.60));
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.045),
        0 12px 24px rgba(0,0,0,.15);
    transition:
        transform .2s ease,
        border-color .2s ease,
        background .2s ease;
}

.about-story-card:nth-child(2),
.about-story-card:nth-child(4){
    background:
        radial-gradient(circle at 0% 100%, rgba(46,131,198,.11), transparent 36%),
        linear-gradient(145deg,rgba(22,58,94,.54),rgba(7,25,47,.63));
}

.about-story-card:hover{
    transform:translateY(-2px);
    border-color:rgba(231,190,101,.48);
}

.about-story-icon{
    width:36px;
    height:36px;
    display:grid;
    place-items:center;
    border-radius:50%;
    border:1px solid rgba(244,201,109,.40);
    color:var(--gold2);
    background:rgba(244,201,109,.07);
    font-size:18px;
    line-height:1;
}

.about-story-card h3{
    margin:1px 0 8px;
    color:var(--cream);
    font-size:14px;
    line-height:1.2;
    letter-spacing:.12em;
    text-transform:uppercase;
}

.about-story-card p{
    margin:0;
    color:rgba(231,223,205,.88);
    font-size:15.5px;
    line-height:1.62;
    text-align:left;
}

.about-story-mission{
    grid-column:1 / -1;
    min-height:0;
    align-items:center;
    border-color:rgba(244,201,109,.40);
    background:
        radial-gradient(circle at 50% 0%, rgba(244,201,109,.12), transparent 42%),
        linear-gradient(135deg,rgba(30,67,104,.58),rgba(7,24,45,.69));
}

.about-story-mission p{
    color:var(--cream);
    font-weight:700;
}

/* The footer already existed; refine it without adding a duplicate back-to-top link. */
.site-footer{
    position:relative;
    margin-top:18px;
    padding:25px 20px 30px !important;
    border-top:1px solid rgba(214,169,79,.24) !important;
    background:
        radial-gradient(circle at 50% 0%, rgba(46,131,198,.08), transparent 46%),
        linear-gradient(180deg,rgba(0,0,0,.04),rgba(0,0,0,.30)) !important;
}

.site-footer::before{
    content:"✦";
    display:block;
    margin:0 auto 9px;
    color:var(--gold2);
    font-size:13px;
    opacity:.72;
}

.site-footer .copyright{
    font-size:13px !important;
    letter-spacing:.045em;
    color:rgba(228,184,91,.86) !important;
}

/* Preserve responsive readability and avoid cramped cards. */
@media(max-width:820px){
    .about-story-grid{
        grid-template-columns:1fr;
    }

    .about-story-mission{
        grid-column:auto;
    }

    .about-story-card{
        min-height:0;
    }
}

@media(max-width:560px){
    .about-card{
        padding:34px 19px 32px !important;
    }

    .about-lead{
        font-size:17px !important;
    }

    .about-story-card{
        grid-template-columns:34px minmax(0,1fr);
        gap:10px;
        padding:17px 15px;
    }

    .about-story-icon{
        width:32px;
        height:32px;
        font-size:16px;
    }

    .about-story-card p{
        font-size:14.5px;
    }

    .store-card{
        min-height:174px !important;
    }
}

/* v37 — click-to-zoom and drag inside the existing product modal */
.artwork-zoom-stage{
    position:relative;
    width:100%;
    height:100%;
    min-height:0;
    overflow:hidden;
    border-radius:16px;
    background:#fff9e8;
    cursor:zoom-in;
    touch-action:none;
    user-select:none;
    -webkit-user-select:none;
    outline:none;
}
.artwork-zoom-stage:focus-visible{
    box-shadow:0 0 0 2px rgba(230,185,92,.9),0 0 0 5px rgba(11,29,49,.9);
}
.artwork-zoom-stage img{
    display:block;
    width:100% !important;
    height:100% !important;
    max-height:none !important;
    object-fit:contain !important;
    object-position:center !important;
    transform-origin:center center;
    transition:transform .28s cubic-bezier(.2,.7,.2,1);
    will-change:transform;
    pointer-events:none;
}
.artwork-zoom-stage.is-zoomed{
    cursor:grab;
}
.artwork-zoom-stage.is-zoomed img{
    transition:transform .12s ease-out;
}
.artwork-zoom-stage.is-dragging{
    cursor:grabbing;
}
.artwork-zoom-stage.is-dragging img{
    transition:none;
}
.artwork-zoom-reset{
    position:absolute;
    top:22px;
    right:22px;
    z-index:4;
    width:34px;
    height:34px;
    display:grid;
    place-items:center;
    border:1px solid rgba(229,184,92,.58);
    border-radius:50%;
    background:rgba(5,19,34,.82);
    color:#f5e8ca;
    font-size:20px;
    line-height:1;
    cursor:pointer;
    opacity:0;
    visibility:hidden;
    transform:scale(.88);
    transition:opacity .18s ease,transform .18s ease,background .18s ease;
}
.artwork-zoom-reset.is-visible{
    opacity:1;
    visibility:visible;
    transform:scale(1);
}
.artwork-zoom-reset:hover,
.artwork-zoom-reset:focus-visible{
    background:rgba(19,47,78,.96);
    outline:none;
}
@media(max-width:860px){
    .artwork-zoom-reset{
        top:18px;
        right:18px;
        width:32px;
        height:32px;
    }
}

/* v38 — privacy consent banner and settings */
.footer-privacy{
    margin:8px 0 0;
    text-align:center;
    font-size:13px;
}
.footer-privacy a{
    color:#d6b264;
    text-decoration:none;
    border-bottom:1px solid rgba(214,178,100,.35);
}
.footer-privacy a:hover,
.footer-privacy a:focus-visible{
    color:#f2d895;
    border-bottom-color:currentColor;
    outline:none;
}
.cookie-banner[hidden],
.cookie-dialog[hidden]{
    display:none !important;
}
.cookie-banner{
    position:fixed;
    left:18px;
    right:18px;
    bottom:0;
    z-index:10000;
    max-width:1020px;
    margin:0 auto;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    padding:11px 15px;
    border:1px solid rgba(221,185,105,.55);
    border-radius:12px 12px 0 0;
    background:rgba(5,20,35,.97);
    color:#f7f1e3;
    box-shadow:0 18px 55px rgba(0,0,0,.42);
    backdrop-filter:blur(10px);
}
.cookie-banner-copy{
    max-width:670px;
}
.cookie-banner-copy strong{
    display:block;
    margin-bottom:2px;
    color:#f1d58f;
    font-size:13px;
    letter-spacing:.04em;
}
.cookie-banner-copy p{
    margin:0;
    color:#d9e0e6;
    font-size:12px;
    line-height:1.4;
}
.cookie-banner-actions,
.cookie-dialog-actions{
    display:flex;
    align-items:center;
    gap:10px;
    flex:0 0 auto;
}
.cookie-btn{
    min-height:36px;
    padding:7px 13px;
    border-radius:9px;
    font:inherit;
    font-size:13px;
    font-weight:700;
    letter-spacing:.025em;
    cursor:pointer;
    transition:transform .16s ease,background .16s ease,border-color .16s ease,color .16s ease;
}
.cookie-btn:hover{
    transform:translateY(-1px);
}
.cookie-btn:focus-visible{
    outline:2px solid #f4d98f;
    outline-offset:2px;
}
.cookie-btn-primary{
    border:1px solid #e5bd63;
    background:linear-gradient(135deg,#f1d48a,#d6a84c);
    color:#071727;
    box-shadow:0 5px 18px rgba(214,168,76,.24);
}
.cookie-btn-primary:hover{
    background:linear-gradient(135deg,#f7dfa2,#e1b65e);
}
.cookie-btn-muted{
    border:1px solid rgba(226,192,116,.42);
    background:rgba(255,255,255,.035);
    color:#ede6d7;
}
.cookie-btn-muted:hover{
    border-color:rgba(239,207,135,.75);
    background:rgba(255,255,255,.075);
}
.cookie-dialog{
    position:fixed;
    inset:0;
    z-index:10010;
    display:grid;
    place-items:center;
    padding:20px;
}
.cookie-dialog-backdrop{
    position:absolute;
    inset:0;
    background:rgba(0,8,16,.76);
    backdrop-filter:blur(5px);
}
.cookie-dialog-panel{
    position:relative;
    z-index:1;
    width:min(620px,100%);
    max-height:calc(100vh - 40px);
    overflow:auto;
    padding:30px;
    border:1px solid rgba(225,187,103,.52);
    border-radius:18px;
    background:#081d31;
    color:#f7f1e3;
    box-shadow:0 25px 75px rgba(0,0,0,.52);
}
.cookie-dialog-close{
    position:absolute;
    top:14px;
    right:16px;
    width:38px;
    height:38px;
    border:1px solid rgba(225,187,103,.38);
    border-radius:50%;
    background:rgba(255,255,255,.035);
    color:#f3ddb0;
    font-size:25px;
    line-height:1;
    cursor:pointer;
}
.cookie-dialog-kicker{
    margin:0 0 6px;
    color:#d7b564;
    text-transform:uppercase;
    letter-spacing:.18em;
    font-size:11px;
    font-weight:700;
}
.cookie-dialog-panel h2{
    margin:0 44px 10px 0;
    color:#fff7e7;
    font-size:28px;
}
.cookie-dialog-intro{
    margin:0 0 20px;
    color:#cfd9e2;
    line-height:1.58;
}
.cookie-choice{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:22px;
    margin-top:11px;
    padding:16px 17px;
    border:1px solid rgba(218,182,101,.26);
    border-radius:12px;
    background:rgba(255,255,255,.025);
}
.cookie-choice strong{
    display:block;
    margin-bottom:4px;
    color:#f5e4bd;
    font-size:15px;
}
.cookie-choice small{
    display:block;
    color:#bdc9d3;
    font-size:13px;
    line-height:1.45;
}
.cookie-choice-fixed span{
    flex:0 0 auto;
    color:#d8b763;
    font-size:12px;
    font-weight:700;
}
.cookie-choice input{
    flex:0 0 auto;
    width:22px;
    height:22px;
    accent-color:#d8ae55;
}
.cookie-dialog-actions{
    justify-content:flex-end;
    margin-top:22px;
}
.cookie-dialog-open{
    overflow:hidden;
}
@media(max-width:760px){
    .cookie-banner{
        left:10px;
        right:10px;
        bottom:0;
        align-items:stretch;
        flex-direction:column;
        gap:10px;
        padding:13px;
    }
    .cookie-banner-actions{
        display:grid;
        grid-template-columns:1fr 1fr;
    }
    .cookie-banner-actions .cookie-btn-primary{
        grid-column:1 / -1;
        grid-row:1;
    }
    .cookie-dialog-panel{
        padding:25px 18px 20px;
    }
    .cookie-choice{
        align-items:flex-start;
    }
    .cookie-dialog-actions{
        display:grid;
        grid-template-columns:1fr;
    }
    .cookie-dialog-actions .cookie-btn-primary{
        grid-row:1;
    }
}