/* STAUREON — Vivid Maker light theme (loads AFTER site-cosmic.css, overrides to light). */
:root{
 --paper:#eef0f4;--white:#ffffff;--panel:#ffffff;--ink:#14151f;--muted:#61637a;--soft:#8a8ca0;
 --line:#e8eaf0;--brass:#ff4d5e;--silver:#8a8ca0;--dark:#14151f;
 --co:#ff4d5e;--cod:#ec3d4f;--cos:#ffe9eb;--co2:#ff7a3d;
 --acc:#ff4d5e;--acc2:#ff4d5e;--comp:#ec3d4f;--acc-rgb:255,77,94;
 --r:18px;--rl:26px;--shadow:0 14px 30px -22px rgba(20,20,50,.5);
 color-scheme:light;background:var(--paper);color:var(--ink);
}
body{background:var(--paper);color:var(--ink);font-family:'Outfit','Onest',system-ui,-apple-system,sans-serif}
::selection{background:var(--co);color:#fff}
h1,h2,h3,h4,h5{font-family:'Outfit','Onest',system-ui,sans-serif;color:var(--ink)}
a{color:inherit}
.wrap{max-width:1160px}
/* catalog gets a slightly wider container → product cards a touch bigger on wide screens */
.wrap-catalog{max-width:1320px}
.muted{color:var(--soft)}
.text-link,.reset{color:var(--cod)}
.eyebrow{color:var(--co);font-weight:800;letter-spacing:.08em;text-transform:uppercase}

/* buttons */
.btn{background:var(--co);color:#fff;border:none;border-radius:12px;font-family:'Outfit','Onest',sans-serif;font-weight:700;min-height:auto;transition:background .2s,transform .15s,box-shadow .2s}
.btn:not(.outline):not(.light){background:var(--co);color:#fff;border-color:var(--co)}
.btn:not(.outline):not(.light):hover{background:var(--cod)}
.btn:hover{background:var(--cod);transform:translateY(-1px)}
.btn.outline{background:#fff;color:var(--ink);box-shadow:inset 0 0 0 1.5px #d9dbe4}
.btn.outline:hover{background:#fff;box-shadow:inset 0 0 0 1.5px var(--co);color:var(--cod)}
.btn.light{background:var(--ink);color:#fff;border:none}
.btn.light:hover{background:#000}
.btn.small{padding:11px 18px;font-size:14px}

/* header */
.header{background:rgba(255,255,255,.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.nav{min-height:72px}
.brand strong{color:var(--ink);font-weight:800;letter-spacing:.14em}
.brand small{color:var(--co)}
.menu-btn{background:#f2f3f7;border:none;border-radius:12px;color:#3d3f52}
.menu-btn:hover{background:#e9ebf1}
.menu-label{color:#3d3f52}
.menu-ic span{background:#3d3f52}
.menu-panel{background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow)}
.menu-panel a{color:#3d3f52}
.menu-panel a:hover{color:var(--co);background:#f7f8fb}
.nav-actions .icon{background:#f2f3f7;border:none;border-radius:12px;color:#3d3f52}
.nav-actions .icon:hover{background:#e9ebf1;color:var(--co)}
.count{background:var(--co);color:#fff}
.acct-btn{background:#f2f3f7;color:#3d3f52;border:none;border-radius:12px}
.acct-btn:hover{background:#e9ebf1}
.acct-btn.is-in{background:var(--cos);color:var(--cod)}
.acct-label{color:inherit}
.lang{background:#f2f3f7;color:#3d3f52;border:none;border-radius:12px}
.custom-select-lang .custom-select-trigger{background:#f2f3f7;color:#3d3f52;box-shadow:none;border:none}

/* hero (light) */
.vivid-hero{display:block;min-height:0;padding:56px 0 24px}
.vivid-hero .hero-copy{max-width:760px}
.vivid-hero .eyebrow{display:inline-flex;align-items:center;gap:8px;background:#fff;box-shadow:inset 0 0 0 1.5px var(--line);color:#3d3f52;font-weight:700;letter-spacing:0;text-transform:none;font-size:13px;padding:8px 15px;border-radius:999px;margin-bottom:22px}
.hero-dot{width:8px;height:8px;border-radius:50%;background:#25c26e;box-shadow:0 0 0 4px rgba(37,194,110,.16);display:inline-block}
.vivid-hero h1{font-size:clamp(40px,6.4vw,78px);font-weight:900;line-height:.96;letter-spacing:-.035em;color:var(--ink)}
.vivid-hero h1 .mark{position:relative;color:var(--co);white-space:nowrap;display:inline-block}
.vivid-hero h1 .mark svg{position:absolute;left:-2%;bottom:-.14em;width:104%;height:.38em;z-index:-1}
.vivid-hero p{color:var(--muted);font-size:18px;line-height:1.5;max-width:46ch;margin:22px 0 26px;font-weight:500}
.vivid-hero .hero-buttons{display:flex;gap:12px;flex-wrap:wrap}
.hero-trust{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:24px;color:var(--soft);font-weight:600;font-size:14px}
.hero-trust b{color:var(--ink)}
.hero-star{color:#ffb020}

/* sections */
.section,.section.dark{background:var(--paper);color:var(--ink)}
.section-head h2,.catalog-head h1{color:var(--ink);font-weight:900;letter-spacing:-.03em}
.section-head .eyebrow{color:var(--co)}

/* services */
.services .service{background:#fff;border:1px solid var(--line);border-radius:var(--r);transition:transform .15s,box-shadow .15s}
.services .service:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.service h3{color:var(--ink)}
.service p{color:var(--muted)}
.service-num{color:var(--co)}

/* direction reel */
.direction-section{background:var(--paper)}
.direction-card{background:#fff;border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow)}
.direction-card.is-active{box-shadow:0 24px 44px -22px rgba(20,20,50,.45)}
.direction-copy h3{color:#fff}
.direction-copy p{color:#e6e7ee}
.direction-number{color:#ffd24d}
.direction-cta{background:var(--cos);border-color:transparent}
.direction-cta .direction-number,.direction-cta p,.direction-cta h3{color:var(--cod)}
.direction-go{color:var(--cod);font-weight:800}
.direction-nav{background:#fff;border:1px solid var(--line);color:#3d3f52}
.direction-nav:hover{background:var(--co);color:#fff;border-color:var(--co)}
.direction-progress{background:#e2e4ec}
.direction-progress span{background:var(--co)}

/* product cards */
.grid .product{background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;transition:transform .15s,box-shadow .15s}
.grid .product:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.grid .product .product-media{margin:8px 8px 0;border-radius:14px;background:#f4f5f8}
.grid .product .product-media .media-fill{display:none}
.grid .product .product-media img{object-fit:contain}
.product h3 a{color:var(--ink)}
.product-bottom span{color:var(--muted);font-weight:600}
.pview{color:var(--cod);font-weight:700}
.cat-tag{background:var(--cos);color:var(--cod);font-weight:700;border-radius:999px;font-size:11px;padding:4px 10px}
.cat-tag.cat-figures{background:#eef0ff;color:#4b53c9}
.cat-tag.cat-cosplay{background:#ffe9ec;color:#d63b56}
.cat-tag.cat-vases{background:#eafaf5;color:#0e8f7c}
.cat-tag.cat-decor{background:#eafaf5;color:#0e8f7c}
.cat-tag.cat-lamps{background:#fff3df;color:#c1841c}
.cat-tag.cat-holders{background:#fff0e6;color:#d3671f}
.cat-tag.cat-keychains{background:#f2fbd6;color:#5f7a12}
.cat-tag.cat-toys{background:#ffe9ec;color:#d63b56}
.heart,.fav,.favorite{color:#c9ccd6}
.heart.is-active,.fav.is-active,[aria-pressed="true"].heart{color:var(--co)}

/* reviews */
.review-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.review{background:#fff;border:1px solid var(--line);border-radius:var(--r);color:var(--ink)}
.review blockquote{color:var(--ink)}
.review .stars{color:#ffb020}
.review-meta{color:var(--ink)}
.review-meta small{color:var(--soft)}
.avatar{background:var(--co);color:#fff}
@media(max-width:820px){.review-grid{grid-template-columns:1fr}}

/* final CTA — coral band */
.final-cta{background:linear-gradient(120deg,var(--co),var(--co2));border-radius:var(--rl);color:#fff;margin:34px auto;max-width:1160px}
.final-cta .final-inner{display:flex;justify-content:space-between;align-items:center;gap:26px;flex-wrap:wrap;padding:40px}
.final-cta .final-inner>div{flex:1 1 380px}
.final-cta p{max-width:52ch}
.final-cta h2{color:#fff;font-weight:900}
.final-cta p{color:rgba(255,255,255,.92)}
.final-cta .btn{background:#fff;color:var(--cod)}
.final-cta .btn:hover{background:#fff;color:var(--co)}

/* footer */
.footer{background:var(--ink);color:#c9cbd8;margin-top:24px}
.footer .brand strong{color:#fff}.footer .brand small{color:var(--co)}
.footer-cols{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.2fr;gap:26px;padding:44px 0 26px}
.footer-brand p{color:#8c8ea2;font-size:13.5px;line-height:1.6;margin-top:12px;max-width:34ch}
.footer-col h5{color:#fff;font-size:13px;letter-spacing:.1em;text-transform:uppercase;margin:0 0 14px}
.footer-col a{display:block;color:#aeb0c2;font-size:14px;margin-bottom:9px}
.footer-col a:hover{color:#fff}
.footer-bottom{border-top:1px solid #2a2c3a;color:#7c7e92}
.footer .legal-links a,.footer-legal a{color:#8c8ea2}
.footer .legal-links a:hover,.footer-legal a:hover{color:#fff}
@media(max-width:820px){.footer-cols{grid-template-columns:1fr 1fr}}

/* catalog page */
.catalog-section,.catalog-head{background:var(--paper);color:var(--ink)}
.catalog-tools .custom-select-trigger,.search-field{background:#fff;border:1.5px solid var(--line);color:var(--ink);box-shadow:none}
.chip{background:#fff;border:1.5px solid var(--line);color:#4a4c5a;border-radius:999px;font-weight:700}
.chip:hover{border-color:#cfd2dd}
.chip.active{background:var(--co);border-color:var(--co);color:#fff}
.result-line{color:var(--muted)}

/* forms / fields */
.field label{color:var(--ink)}
.field input,.field textarea,.field select,.custom-select-trigger{background:#fff;border:1.5px solid var(--line);color:var(--ink);border-radius:12px}
.field input:focus,.field textarea:focus{border-color:var(--co);outline:none}
.order-card,.contact-list,.order-action{background:#fff;border:1px solid var(--line);border-radius:var(--r);color:var(--ink)}
.order-submit,.btn.order-submit{background:var(--co);color:#fff}
.consent-note{color:var(--soft)}
.custom-select-menu{background:#fff;border:1px solid var(--line);box-shadow:var(--shadow)}
.custom-select-menu .custom-select-option{color:#1b1e22}
.custom-select-option:hover{background:#f7f8fb;color:#1b1e22}
.custom-select-option[aria-selected="true"]{background:var(--cos);color:var(--cod)}

/* product detail */
.detail-grid,.detail-copy,.product-extra{color:var(--ink)}
.detail-copy h1{color:var(--ink)}
.gallery-main{background:#f4f5f8;border-radius:16px}
.breadcrumbs,.breadcrumbs a{color:var(--soft)}

/* misc surfaces that were dark via tokens */
.principles{display:none}
.search-overlay{background:rgba(255,255,255,.96);color:var(--ink)}
.search-overlay .search-field{background:#f4f5f8}

/* ---- stage-1 polish: kill muddy shadows, fix header CTA, reel edge fade, star rating ---- */
.vivid-hero .hero-copy{text-shadow:none}
.vivid-hero .eyebrow,.vivid-hero .hero-copy .eyebrow,.vivid-hero h1,.vivid-hero p{text-shadow:none}
.btn{box-shadow:none}
.btn:hover,.btn.light:hover{box-shadow:none;transform:translateY(-1px)}
.btn:not(.outline):not(.light){box-shadow:0 12px 22px -14px rgba(255,77,94,.6)}
.btn:not(.outline):not(.light):hover{box-shadow:0 16px 26px -14px rgba(255,77,94,.65)}
.btn.outline{box-shadow:inset 0 0 0 1.5px #d9dbe4}
.btn.outline:hover{box-shadow:inset 0 0 0 1.5px var(--co)}
.nav-actions .icon,.acct-btn,.menu-btn,.lang,.custom-select-lang .custom-select-trigger{box-shadow:none}
.btn.light{background:var(--ink);color:#fff;background-image:none;border-color:var(--ink)}
.header .btn.light,.header .btn.light.small{background:var(--co);color:#fff;border-color:var(--co);box-shadow:none;background-image:none}
.header .btn.light:hover,.header .btn.light.small:hover{background:var(--cod)}
.direction-stage{-webkit-mask:linear-gradient(90deg,transparent 0,#000 9%,#000 91%,transparent 100%);mask:linear-gradient(90deg,transparent 0,#000 9%,#000 91%,transparent 100%)}
.rate-label{display:block;font-weight:700;font-size:13px;margin-bottom:6px;color:var(--ink)}
.star-rate{display:inline-flex;gap:5px}
.star-rate .star{background:none;border:none;font-size:30px;line-height:1;cursor:pointer;color:#d7d9e2;padding:0;transition:color .12s,transform .12s}
.star-rate .star.on{color:#ffb020}
.star-rate .star:hover{transform:scale(1.14)}

/* ================= PREMIUM DARK GRAPHITE (bg dark, cards light) ================= */
:root{--paper:#17191f}
body{background:#17191f;color:#eceef3}
/* page-level (on dark) text -> light */
.section-head h2,.catalog-head h1,.detail-copy .section-head h2,.section .section-head h2{color:#f2f4f8}
.catalog-head p,#results,.result-line #results,.note,.direction-bottom,.direction-status{color:#9aa0ad}
.section-head .eyebrow,.catalog-head .eyebrow{color:var(--co)}
.breadcrumbs,.breadcrumbs a{color:#9aa0ad}
.breadcrumbs a:hover{color:var(--co)}
/* header dark */
.header{background:rgba(23,25,31,.92);border-bottom:1px solid #262a33}
.brand strong{color:#fff}
.menu-btn{background:#23262e;color:#d3d6dd}.menu-btn:hover{background:#2b2f38}
.menu-label{color:#d3d6dd}.menu-ic span{background:#d3d6dd}
.menu-panel{background:#1e2129;border:1px solid #2c303a}
.menu-panel a{color:#c7cad3}.menu-panel a:hover{color:var(--co);background:#262a33}
.nav-actions .icon{background:#23262e;color:#d3d6dd}.nav-actions .icon:hover{background:#2b2f38;color:var(--co)}
.acct-btn{background:#23262e;color:#d3d6dd}.acct-btn:hover{background:#2b2f38}
.acct-btn.is-in{background:var(--cos);color:var(--cod)}
.lang,.custom-select-lang .custom-select-trigger{background:#23262e;color:#d3d6dd}
/* hero on dark */
.vivid-hero h1{color:#fff}
.vivid-hero p{color:#c3c7d0}
.vivid-hero .eyebrow{background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px rgba(255,255,255,.16);color:#d8dbe2}
.hero-trust{color:#9aa0ad}.hero-trust b{color:#fff}
.btn.outline{background:transparent;color:#fff;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.3)}
.btn.outline:hover{background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1.5px var(--co);color:#fff}
/* section grounds transparent (page is dark) */
.section,.section.dark,.catalog-section,.catalog-head,.direction-section,.hero{background:transparent}
/* WHITE CARDS keep dark interior text */
.services .service{background:#fff;border:1px solid #ececf1}
.service h3{color:#14151f}.service p{color:#61637a}
.grid .product{background:#fff;border:1px solid #ececf1;opacity:1;transform:none}
.product h3 a{color:#14151f}.product-bottom span{color:#61637a}.pview{color:var(--cod)}
.review{background:#fff;border:1px solid #ececf1}
.review blockquote{color:#14151f}.review-meta{color:#14151f}.review-meta small{color:#8a8ca0}
/* catalog chips + pager on dark */
.chip{background:#20232b;border:1.5px solid #2f333d;color:#c7cad3}
.chip:hover{border-color:#3a3f4a;color:#fff}
.chip.active{background:var(--co);border-color:var(--co);color:#fff}
.pager{display:flex;gap:8px;justify-content:center;margin-top:30px;flex-wrap:wrap}
.pager .pg{min-width:44px;height:44px;border-radius:12px;background:#20232b;border:1.5px solid #2f333d;color:#c7cad3;font-family:'Outfit','Onest',sans-serif;font-weight:700;cursor:pointer;padding:0 12px}
.pager .pg:hover:not([disabled]):not(.on){border-color:#3a3f4a;color:#fff}
.pager .pg.on{background:var(--co);border-color:var(--co);color:#fff}
.pager .pg[disabled]{opacity:.35;cursor:default}
.pager .pg-dots{align-self:center;color:#6b6f79;padding:0 2px}
/* product page = white card */
.detail-grid{background:#fff;border:1px solid #ececf1;border-radius:24px;padding:clamp(16px,3vw,32px)}
.detail-copy h1{color:#14151f}.detail-copy .lead{color:#61637a}.price-line{color:#14151f}
.detail-copy .eyebrow{color:var(--co)}
.gallery-main{background:#f4f5f8}
.detail-grid .thumbs button{background:#f4f5f8}
/* dark elevated cards for order/contact + white inputs */
.order-card,.contact-list,.order-action{background:#1e2129;border:1px solid #2c303a;color:#eceef3}
.field label,.rate-label{color:#c7cad3}
.field input,.field textarea,.field select,.custom-select-trigger{background:#fff;border:1.5px solid #dfe2ea;color:#14151f}
.consent-note{color:#9aa0ad}
/* footer stays deep */
.footer{background:#101216}
/* catalog teaser band on home */
.catalog-band{background:#1e2129;border:1px solid #2c303a}
/* search overlay full width + dark */
.search-overlay{background:rgba(20,22,27,.97)}
.search-overlay-inner{max-width:none;width:100%}
.search-field{width:100%;background:#20232b;border:1.5px solid #2f333d}
.search-field input{color:#fff}
.search-field input::placeholder{color:#8a8ca0}
.search-ico{color:#9aa0ad}

/* force dark text inside white cards (beat cosmic's specific selectors) */
.grid .product,.services .service,.review,.detail-grid{color:#14151f}
.grid .product h3,.grid .product h3 a{color:#14151f!important}
.grid .product .product-bottom span{color:#61637a!important}
.grid .product .pview{color:var(--cod)!important}
.services .service h3{color:#14151f!important}
.services .service p{color:#61637a!important}
.review blockquote,.review .review-meta,.review .review-meta span{color:#14151f!important}
.review .review-meta small{color:#8a8ca0!important}
.detail-copy h1{color:#14151f!important}
.detail-copy .lead{color:#61637a!important}
.detail-copy .price-line{color:#14151f!important}

/* ===== hero printer background ===== */
.vivid-hero{position:relative;overflow:hidden;display:flex;align-items:center;min-height:600px;padding:40px 0}
.vivid-hero::before{content:"";position:absolute;inset:0;z-index:0;background:#17191f url("/assets/hero-print-2.webp") center right/cover no-repeat}
.vivid-hero::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,#17191f 0%,rgba(23,25,31,.9) 32%,rgba(23,25,31,.45) 58%,rgba(23,25,31,.05) 100%)}
.vivid-hero>.wrap{position:relative;z-index:2;width:100%}

/* ===== catalog card images fill frame + centered ===== */
.grid .product .product-media{aspect-ratio:1/1;overflow:hidden;display:block}
.grid .product .product-media a{display:block;width:100%;height:100%}
.grid .product .product-media img{width:100%!important;height:100%!important;object-fit:contain!important;object-position:center!important}
.grid .product .product-media .media-fill{display:none}

/* ===== product gallery fill frame + arrows ===== */
.gallery{position:relative}
.gallery-main{position:relative;display:block;width:100%;aspect-ratio:1/1;padding:0;overflow:hidden;border-radius:16px;background:#f4f5f8}
#mainPhoto{width:100%;height:100%;object-fit:contain;object-position:center}
.gal-nav{position:absolute;top:50%;transform:translateY(-50%);width:46px;height:46px;border-radius:50%;background:rgba(255,255,255,.92);border:1px solid #e2e4ea;color:#14151f;display:grid;place-items:center;font-size:22px;line-height:1;cursor:pointer;z-index:4;box-shadow:0 6px 18px -8px rgba(0,0,0,.5)}
.gal-nav:hover{background:#fff}
.gal-prev{left:12px}.gal-next{right:12px}
.detail-grid .thumbs button{width:66px;height:66px;border-radius:12px;overflow:hidden;padding:0;background:#f4f5f8}
.detail-grid .thumbs button img{width:100%;height:100%;object-fit:cover}

/* ===== round like button on product page ===== */
.order-action{display:flex;gap:12px;align-items:stretch}
.order-action .btn:not(.like-btn){flex:1 1 auto}
.like-btn,.order-action .like-btn{flex:0 0 56px!important;width:56px!important;min-width:56px;height:56px!important;min-height:56px;padding:0!important;border-radius:50%!important;display:grid!important;place-items:center;aspect-ratio:1}
.like-btn svg{width:22px;height:22px}

/* ================= RESPONSIVE (tablet + phone) ================= */
@media(max-width:900px){
 #catalogGrid,.catalog-section .grid,.section .grid{grid-template-columns:repeat(2,1fr)!important}
 .detail-grid{grid-template-columns:minmax(0,1fr)!important}
 .detail-grid>*{min-width:0!important}
 .footer-cols{grid-template-columns:1fr 1fr}
}
@media(max-width:760px){
 .vivid-hero{min-height:0;padding:40px 0 34px}
 .vivid-hero::before{background-position:center right -40px;opacity:.4}
 .vivid-hero::after{background:linear-gradient(180deg,rgba(23,25,31,.72) 0%,rgba(23,25,31,.9) 70%,#17191f 100%)}
 .vivid-hero h1{font-size:clamp(34px,10vw,46px)}
 .vivid-hero p{font-size:16px}
 .final-cta .final-inner{padding:28px}
 .catalog-head h1{font-size:clamp(30px,8vw,40px)}
 .gal-nav{width:40px;height:40px;font-size:19px}
}
@media(max-width:520px){
 #catalogGrid,.catalog-section .grid,.section .grid{grid-template-columns:repeat(2,1fr)!important;gap:12px}
 .grid .product h3{font-size:14px}
 .footer-cols{grid-template-columns:1fr}
 .hero-buttons{width:100%}
 .hero-buttons .btn{flex:1 1 auto;text-align:center;justify-content:center}
 .order-action{flex-wrap:nowrap}
 .pager .pg{min-width:40px;height:40px}
}

/* catalog card media = 4:3 (matches source renders) so covers fill without off-center crop */
.grid .product .product-media{aspect-ratio:4/3!important}
.grid .product .product-media img{object-fit:contain!important;object-position:center center!important}

/* ===== catalog card = mock layout (inset image, tag below, price + coral button) ===== */
.grid .product{display:flex;flex-direction:column}
.grid .product .product-media{margin:8px 8px 0!important;border-radius:14px!important;aspect-ratio:4/3!important;overflow:hidden;background:#f4f5f8}
.grid .product .product-body{padding:12px 14px 14px;display:flex;flex-direction:column;gap:8px;align-items:flex-start}
.grid .product .cat-tag{position:static!important;inset:auto!important;display:inline-block;align-self:flex-start;margin:0;font-weight:700;border-radius:999px;font-size:11px;padding:4px 10px}
.grid .product h3{margin:0!important;font-size:15.5px;line-height:1.25}
.grid .product .product-bottom{display:flex;justify-content:space-between;align-items:center;width:100%;gap:8px;margin-top:auto;padding-top:2px}
.grid .product .p-price{color:#61637a!important;font-weight:600;font-size:13px}
.pview{background:var(--co)!important;color:#fff!important;border-radius:999px!important;padding:8px 15px!important;font-weight:700;font-size:12.5px;white-space:nowrap}
.pview:hover{background:var(--cod)!important}
/* permanent review form on home */
#leave-review .review-form{margin-top:8px;max-width:820px}

.grid .product .pview{opacity:1!important}

/* card bottom row: let price wrap, keep button intact (no clip on narrow cards) */
.grid .product .product-bottom{flex-wrap:wrap}
.grid .product .p-price{flex:1 1 60px;min-width:0;white-space:normal;line-height:1.2}
.grid .product .pview{flex:0 0 auto}
@media(max-width:560px){.grid .product .product-bottom{flex-direction:column;align-items:flex-start;gap:8px}.grid .product .pview{width:100%;text-align:center}}

/* FIX ROOT CAUSE: media had width:100% -> overflowed the 8px inset and got clipped (looked edge-to-edge).
   width:auto lets it fit inside the margins symmetrically. */
.grid .product .product-media{width:auto!important;margin:8px 8px 0!important;box-sizing:border-box}
/* bottom row: keep price + button on ONE row; price wraps internally instead of pushing button to a new line */
.grid .product .product-bottom{flex-wrap:nowrap!important;align-items:center;gap:10px}
.grid .product .p-price{flex:1 1 auto;min-width:0;white-space:normal;line-height:1.25}
.grid .product .pview{flex:0 0 auto;padding:9px 16px!important}
@media(max-width:520px){.grid .product .product-bottom{flex-direction:column;align-items:stretch}.grid .product .pview{width:100%;text-align:center}}
/* reviews + review form as one tighter, centered block */
#reviews{padding-bottom:10px}
#leave-review{padding-top:10px}
#leave-review .section-head{text-align:center}
#leave-review .section-head>div{margin:0 auto}
#leave-review .review-form{margin:14px auto 0;max-width:760px}

/* ===== full-screen hero + inline rounded search + no-menu header ===== */
.vivid-hero{min-height:calc(100svh - 72px)!important}
.header .nav{flex-wrap:wrap;gap:12px}
.nav-actions{display:flex;align-items:center;gap:12px;flex-wrap:nowrap}
.nav-search{display:flex;align-items:center;gap:9px;background:#20232b;border:1.5px solid #2f333d;border-radius:999px;padding:0 18px;height:46px;min-width:240px;max-width:360px;flex:1 1 280px}
.nav-search:focus-within{border-color:var(--co)}
.nav-search-ico{color:#9aa0ad;display:flex}
.nav-search-ico svg{width:18px;height:18px}
.nav-search input{border:none;outline:none;background:transparent;color:#fff;font-family:'Outfit','Onest',sans-serif;font-size:14px;width:100%}
.nav-search input::placeholder{color:#8a8ca0}
@media(max-width:820px){
 .vivid-hero{min-height:calc(100svh - 64px)!important;padding:24px 0}
 .nav .btn.light.small{display:none}
 .nav-search{min-width:0;flex:1 1 120px;max-width:none;height:42px;padding:0 14px}
}
@media(max-width:520px){
 .nav-search input::placeholder{font-size:13px}
 .acct-btn .acct-label{display:none}
}

/* header: language by the logo (left), actions pushed to the corner (right) */
.header .nav{max-width:none;justify-content:space-between;padding-inline:clamp(16px,3.2vw,46px)}
.nav-left{display:flex;align-items:center;gap:14px}
.nav-left .lang,.nav-left .custom-select-lang{margin-left:4px}
.nav-actions{margin-left:auto}
@media(max-width:820px){.header .nav{padding-inline:14px}.nav-left{gap:8px}}

/* ===== services block — variant A (minimal columns, no boxes) ===== */
#services .svc-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:34px;margin-top:26px}
#services .svc-item{border:none;background:none;padding:0;box-shadow:none;border-top:2px solid var(--co);padding-top:16px}
#services .svc-num{display:block;font-weight:800;font-size:13px;letter-spacing:.12em;color:var(--co)}
#services .svc-item h3{font-size:19px;font-weight:800;margin:12px 0 8px;color:#f2f4f8}
#services .svc-item p{color:#9aa0ad;font-size:14.5px;line-height:1.55;margin:0 0 14px}
#services .svc-item .text-link{color:#f2f4f8;font-weight:700;font-size:13.5px}
#services .svc-item .text-link:hover{color:var(--co)}
@media(max-width:820px){#services .svc-cols{grid-template-columns:1fr;gap:26px}}

/* product CTA row: no dark card behind buttons; heart = true circle (beats cosmic min-height:62px) */
.detail-copy .order-action{background:none!important;border:none!important;padding:0!important;align-items:center!important;margin-top:22px}
.detail-copy .order-action .like-btn{flex:0 0 56px!important;width:56px!important;height:56px!important;min-width:56px!important;min-height:56px!important;max-height:56px!important;padding:0!important;border-radius:50%!important;aspect-ratio:1!important;background:#fff!important;box-shadow:inset 0 0 0 1.5px #e2e4ec!important;color:var(--co)!important}
.detail-copy .order-action .like-btn svg{color:var(--co)}
.detail-copy .order-action .like-btn:hover{box-shadow:inset 0 0 0 1.5px var(--co)!important}
.detail-copy .order-action .like-btn[aria-pressed="true"]{background:var(--co)!important;box-shadow:none!important;color:#fff!important}

/* ===== hero: bigger heading, aligned to the header logo (uses the empty left gutter) ===== */
.vivid-hero .wrap{max-width:none;margin-inline:auto;padding-inline:clamp(16px,3.2vw,46px)}
.vivid-hero .hero-copy{max-width:880px}
.vivid-hero h1{font-size:clamp(44px,7.6vw,110px)!important;line-height:.92!important;letter-spacing:-.04em}
.vivid-hero h1 .mark svg{bottom:-.1em}
.vivid-hero p{font-size:clamp(17px,1.5vw,22px)!important;max-width:52ch}
.vivid-hero .eyebrow{font-size:13.5px}
@media(max-width:820px){
 .vivid-hero .hero-copy{max-width:none}
 .vivid-hero h1{font-size:clamp(40px,10.5vw,66px)!important}
 .vivid-hero p{font-size:16px!important}
}

/* hero heading: two clean non-breaking lines (no lonely dash) */
.vivid-hero .hero-copy{max-width:1040px}
.vivid-hero h1{font-size:clamp(40px,7vw,98px)!important}
.vivid-hero h1 .hl1,.vivid-hero h1 .hl2{display:block;white-space:nowrap}
@media(max-width:640px){.vivid-hero h1{font-size:clamp(34px,9vw,56px)!important}}

/* ===== mobile polish ===== */
@media(max-width:640px){
 /* hero: height by content, no huge empty gap under it.
    KILLS cosmic's mobile .hero-copy{padding-bottom:420px} (room for old dark-theme art vivid doesn't use). */
 .vivid-hero{min-height:auto!important;padding:22px 0 34px!important}
 .vivid-hero .hero-copy{max-width:none;padding:0!important}
 .vivid-hero .eyebrow{margin-bottom:16px}
 .vivid-hero h1{margin:0 0 4px!important}
 .vivid-hero p{font-size:15.5px!important;margin:16px 0 22px!important}
 .vivid-hero .hero-buttons{margin:0}
 .hero-trust{margin-top:20px;font-size:13px}
 /* section headers stack cleanly (fixes "4 отзыва" cramming into the corner) */
 .section-head{flex-direction:column;align-items:flex-start;gap:6px}
 .section-head .muted,.section-head .text-link{margin:0}
 .section-head h2,.catalog-head h1{font-size:clamp(26px,7.5vw,34px)}
}

/* ===== catalog card "Смотреть" button: readable WHITE text + compact (fix dark-on-coral) ===== */
.grid .product .pview{background:var(--co)!important;color:#fff!important;font-weight:700!important;font-size:11.5px!important;letter-spacing:0!important;padding:7px 13px!important;line-height:1.1!important;border-radius:999px!important}
.grid .product .pview:hover{background:var(--cod)!important;color:#fff!important}

/* ===== header search: centered + wider so placeholder fits ===== */
.header .nav{gap:16px}
.nav-actions{margin-left:0}
.nav-search{flex:1 1 auto!important;min-width:0!important;max-width:600px!important;margin-inline:auto}
@media(max-width:820px){.nav-search{max-width:none!important;flex:1 1 160px!important;order:3;width:100%}}

/* ===== page background = studio photo, darkened so it never distracts from content =====
   Fixed positioned layer (works on mobile, unlike background-attachment:fixed).
   Graphite base moved to <html>, body transparent so the z-index:-1 layer shows through. */
html{background:#17191f!important}
body{background:transparent!important}
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(rgba(14,15,19,.94),rgba(14,15,19,.975)),url("/assets/bg-studio.png") center center/cover no-repeat}

/* ===== hero showcase photo: brighter & punchier (was too dim/murky) ===== */
.vivid-hero::before{filter:brightness(1.34) contrast(1.06) saturate(1.06)}
.vivid-hero::after{background:linear-gradient(90deg,#17191f 0%,rgba(23,25,31,.8) 30%,rgba(23,25,31,.3) 56%,rgba(23,25,31,0) 100%)}
@media(max-width:760px){.vivid-hero::after{background:linear-gradient(180deg,rgba(23,25,31,.55) 0%,rgba(23,25,31,.82) 72%,#17191f 100%)}}

/* ===== sleek scrollbar: transparent track (no ugly light strip on load) + thin dark thumb ===== */
html{scrollbar-width:thin;scrollbar-color:#3a3d44 transparent}
::-webkit-scrollbar{width:10px;height:10px;background:transparent}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:#3a3d44;border-radius:8px;border:2px solid transparent;background-clip:content-box}
::-webkit-scrollbar-thumb:hover{background:#4a4d55}
::-webkit-scrollbar-corner{background:transparent}

/* ===== dark cards (review form / order / contact): headings light so they're readable ===== */
.order-card h3,.order-card .order-title,.review-form h3,.contact-list h3{color:#f2f4f8}

/* ===== dark-bg page-hero headings (quote/contacts/404) — keep light on graphite ===== */
.wrap.section>h1{color:#f2f4f8}
/* ===== "Удобнее лично?" card is dark — its text/links must be light ===== */
.personal-contact-copy p,.personal-contact-copy a{color:#e8eaef}
.personal-contact-copy .note{color:#c3c7d0}

/* ===== brand motto: word-by-word looping glow, each word its own colour
   (matches the intro splash: Форма=gold, Материя=silver, Точность=blue) ===== */
.brand .motto .mw{color:var(--glow)}
.brand .motto .mw:nth-of-type(1){--glow:#e0a94e}   /* Форма — gold */
.brand .motto .mw:nth-of-type(2){--glow:#9fa8b2}   /* Материя — silver */
.brand .motto .mw:nth-of-type(3){--glow:#6fb0ff}   /* Точность — blue */
.brand .motto .md{font-style:normal;color:#4a4f5a;margin:0 5px}
@media(prefers-reduced-motion:no-preference){
 .brand .motto .mw{animation:mottoGlow 3.9s ease-in-out infinite;will-change:filter}
 .brand .motto .mw:nth-of-type(2){animation-delay:1.3s}
 .brand .motto .mw:nth-of-type(3){animation-delay:2.6s}
}
@keyframes mottoGlow{
 0%{filter:brightness(.82);text-shadow:none}
 9%{filter:brightness(1.32);text-shadow:0 0 10px var(--glow),0 0 4px var(--glow)}
 26%{filter:brightness(.82);text-shadow:none}
 100%{filter:brightness(.82);text-shadow:none}
}

/* ===== review media: video thumbnails + lightbox video ===== */
.review-photos .rv-video{position:relative;display:inline-block;padding:0;border:0;background:transparent;cursor:pointer;line-height:0}
.review-photos .rv-video video{width:62px;height:68px;object-fit:cover;border-radius:4px;display:block;background:#000}
.review-photos .rv-play{position:absolute;inset:0;display:grid;place-items:center;color:#fff;font-size:17px;text-shadow:0 1px 5px rgba(0,0,0,.75);pointer-events:none}
#lightbox video.light-video{max-width:100%;max-height:78vh;margin:auto;display:block;border-radius:6px;background:#000}

/* ===== during the animated intro: no reserved scrollbar strip (it appears with the site afterwards) ===== */
html:has(body.intro-active){scrollbar-gutter:auto;overflow:hidden}

/* ===== scroll reveal: sections & cards fade + slide up as they enter view ===== */
@media(prefers-reduced-motion:no-preference){
 .reveal{opacity:0;transform:translateY(24px);transition:opacity .66s cubic-bezier(.22,.61,.36,1),transform .66s cubic-bezier(.22,.61,.36,1)}
 .reveal.in{opacity:1;transform:none}
}

/* ===== hero cinematic dissolve: on scroll the showcase photo glides into depth
   (soft zoom + blur + melt-into-light + fade) and the copy lifts & fades; reverses
   smoothly on scroll-up. JS (site-dissolve.js) drives --p (0=assembled → 1=dissolved),
   already eased (smootherstep) & rAF-lerped, so motion is silky. GPU-only props. ===== */
@media(prefers-reduced-motion:no-preference){
 /* showcase photo — desktop: recedes into soft light, then fades */
 .vivid-hero::before{
  transform:scale(calc(1 + var(--p,0) * 0.16));
  transform-origin:64% 44%;
  filter:brightness(calc(1.34 + var(--p,0) * 0.55)) contrast(calc(1.06 - var(--p,0) * 0.18)) saturate(calc(1.06 - var(--p,0) * 0.55)) blur(calc(var(--p,0) * 20px));
  opacity:calc(1 - var(--p,0) * 0.94);
  will-change:transform,filter,opacity;
 }
 .vivid-hero::after{opacity:calc(1 - var(--p,0) * 0.35)}
 /* copy — lifts, softens and fades; staggered so lines don't move as one slab */
 .vivid-hero .hero-copy>*{
  opacity:calc(1 - var(--p,0));
  transform:translate3d(0, calc(var(--p,0) * var(--rise, -46px)), 0);
  filter:blur(calc(var(--p,0) * 4px));
  will-change:transform,opacity,filter;
 }
 .vivid-hero .hero-copy>*:nth-child(1){--rise:-24px}
 .vivid-hero .hero-copy>*:nth-child(2){--rise:-34px}
 .vivid-hero .hero-copy>*:nth-child(3){--rise:-46px}
 .vivid-hero .hero-copy>*:nth-child(4){--rise:-58px}
 .vivid-hero .hero-copy>*:nth-child(5){--rise:-70px}
}
/* mobile: photo is a faint backdrop (base opacity .4) — dissolve it gently too */
@media(prefers-reduced-motion:no-preference) and (max-width:760px){
 .vivid-hero::before{
  transform:scale(calc(1 + var(--p,0) * 0.1));
  filter:brightness(calc(1 + var(--p,0) * 0.3)) blur(calc(var(--p,0) * 10px));
  opacity:calc(0.4 * (1 - var(--p,0)));
 }
 .vivid-hero .hero-copy>*{transform:translate3d(0, calc(var(--p,0) * var(--rise, -34px) * 0.7), 0)}
}

/* product page — full description + specs (audit 2026-09-24): раньше full/specs не выводились вовсе */
.detail-more{margin-top:26px;padding-top:22px;border-top:1px solid #e7e8ee}
.detail-copy .detail-sub{font-size:12.5px;letter-spacing:.09em;text-transform:uppercase;color:#8a8ca0;font-weight:800;margin:0 0 10px}
.detail-full{color:#3c3e52;line-height:1.65;font-size:15.5px;margin:0 0 24px;white-space:pre-line}
.spec-list{list-style:none;margin:0;padding:0}
.spec-list li{display:flex;justify-content:space-between;align-items:baseline;gap:18px;padding:10px 0;border-bottom:1px dashed #e3e4ec;font-size:14.5px}
.spec-list li:last-child{border-bottom:none}
.spec-list li span{color:#8a8ca0;flex:0 0 auto}
.spec-list li b{color:#14151f;font-weight:700;text-align:right}
.spec-list li.wide b{text-align:left}
.order-summary .muted{color:#8a8ca0;font-size:13px}
/* audit 2026-09-24: display:grid/block перебивал атрибут hidden → «мёртвые» стрелки на 124 товарах с одним фото */
#lightbox .light-nav[hidden],#lightbox video.light-video[hidden],#lightbox [hidden]{display:none!important}
.spec-list li span{flex:0 0 42%}
.spec-list li b{flex:1 1 auto;min-width:0}