html,body{margin:0!important;padding:0!important;background:#020202!important}
body.levial-collection-standalone{overflow-x:hidden}
body.levial-collection-standalone .site-header,
body.levial-collection-standalone .site-footer{display:none!important}
.ref-page{--gold:#b98a3c;--gold2:#d5ad68;--cream:#e8e0d4;--muted:#a29a90;--line:rgba(185,138,60,.40);background:#030303;color:var(--cream);min-height:100vh;font-family:Arial,sans-serif}
.ref-page *{box-sizing:border-box}
.ref-page a{color:inherit;text-decoration:none}

/* utility + nav */
.ref-topbar{height:31px;padding:0 28px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;border-bottom:1px solid rgba(255,255,255,.08);background:#010101;color:#beb7ad;font-size:8px;letter-spacing:.06em}
.ref-top-left,.ref-top-right{display:flex;align-items:center;gap:10px}.ref-top-right{justify-content:flex-end}.ref-topbar i{width:1px;height:15px;background:#725a36;margin:0 8px}.ref-top-center{color:#cf9e50;font-size:11px;letter-spacing:.23em}.ref-badge{color:#c69545}
.ref-header{height:78px;padding:0 27px;display:grid;grid-template-columns:260px 1fr 160px;align-items:center;border-bottom:1px solid rgba(255,255,255,.08);background:#040404}
.ref-logo{display:flex;align-items:center;gap:12px}.ref-lv{font:44px Georgia,serif;line-height:.9;color:#c59a55;text-shadow:0 1px 0 #563d1d}.ref-word{font:29px Georgia,serif;letter-spacing:.17em}.ref-word small{display:block;font:7px Arial,sans-serif;letter-spacing:.48em;margin-top:5px}
.ref-header nav{display:flex;justify-content:center;gap:42px;height:100%;align-items:center}.ref-header nav a{height:100%;display:flex;align-items:center;position:relative;font-size:9px;letter-spacing:.08em}.ref-header nav a.active:after{content:"";height:2px;position:absolute;left:12%;right:12%;bottom:16px;background:linear-gradient(90deg,transparent,#c69443,transparent);box-shadow:0 0 10px #c69443}
.ref-icons{display:flex;justify-content:flex-end;gap:22px;font-size:20px}.ref-icons .cart{position:relative}.ref-icons b{position:absolute;right:-9px;top:-7px;width:15px;height:15px;border-radius:50%;display:grid;place-items:center;background:#c89442;color:#111;font-size:8px}

/* hero */
.ref-hero{height:335px;display:grid;grid-template-columns:58% 42%;position:relative;overflow:hidden;border-bottom:1px solid var(--line);background:linear-gradient(90deg,#050505 0%,#070706 58%,#070604 100%)}
.ref-copy{padding:44px 0 24px 49px;position:relative;z-index:4}.ref-copy h1{font:72px/1 Georgia,serif;letter-spacing:.03em;margin:0 0 14px;color:#ebe4d9}.ref-copy>p{margin:0;color:#d7d0c6;font-size:14px;line-height:1.8;letter-spacing:.29em}
.ref-benefits{display:flex;gap:24px;margin-top:26px}.ref-benefits>div{display:flex;align-items:center;gap:9px}.ref-benefits b{width:36px;height:36px;border:1px solid #9d712d;border-radius:50%;display:grid;place-items:center;color:#cc9d50;font-size:14px;font-weight:400}.ref-benefits span{font-size:8px;line-height:1.45}
.ref-hero-art{position:relative;overflow:hidden;background:radial-gradient(circle at 44% 34%,rgba(181,132,55,.15),transparent 31%)}.ref-hero-art img{position:absolute;z-index:5;height:303px;left:48%;bottom:-2px;transform:translateX(-50%);filter:drop-shadow(0 27px 19px rgba(0,0,0,.82))}
.ref-hex{position:absolute;inset:0;opacity:.24;background-image:linear-gradient(30deg,transparent 47%,rgba(184,134,54,.18) 48%,transparent 49%),linear-gradient(-30deg,transparent 47%,rgba(184,134,54,.18) 48%,transparent 49%);background-size:44px 38px}
.ref-dna{position:absolute;right:2%;top:-35px;width:125px;height:390px;opacity:.8}.ref-dna i{position:absolute;inset:0;border-left:2px solid #b2813b;border-right:2px solid #b2813b;border-radius:49%;transform:rotate(25deg)}.ref-dna i+ i{transform:rotate(-25deg);opacity:.75}
.ref-rock{position:absolute;bottom:-15px;background:linear-gradient(140deg,#36332f,#0e0d0c 65%);clip-path:polygon(0 70%,18% 35%,42% 45%,60% 14%,100% 60%,88% 100%,10% 100%);filter:drop-shadow(0 -1px 0 rgba(190,145,65,.25))}
.rock1{left:1%;width:190px;height:115px}.rock2{right:1%;width:160px;height:105px}.rock3{left:29%;width:150px;height:85px}

/* featured */
.ref-featured{padding:0 18px 11px}.ref-feature-title{height:31px;display:flex;align-items:center;justify-content:center;gap:10px}.ref-feature-title>span{height:1px;background:var(--line);flex:1}.ref-feature-title h2{font:18px Georgia,serif;font-weight:400;letter-spacing:.10em;color:#d0a963;white-space:nowrap}.ref-feature-title b{font-weight:400;color:#c09043;font-size:10px}
.ref-feature-grid{display:grid;grid-template-columns:repeat(6,1fr);border:1px solid var(--line);border-radius:8px;overflow:hidden;background:#060606}
.ref-feature-card{min-width:0;border-right:1px solid rgba(185,138,60,.2)}.ref-feature-card:last-child{border-right:0}.ref-feature-card a{display:block;text-align:center;padding:10px 8px 13px}.ref-feature-vial{height:175px;display:flex;align-items:flex-end;justify-content:center}.ref-feature-vial img{height:169px;width:auto;max-width:100%;object-fit:contain}.ref-feature-card h3{font:13px Georgia,serif;font-weight:400;margin:7px 0 4px}.ref-feature-card p{margin:0 0 9px;color:#c59443;font-size:9px}.ref-feature-card span{display:inline-block;border:1px solid #866125;padding:8px 13px;color:#d4a657;font-size:8px;letter-spacing:.06em}

/* toolbar + grid */
.ref-catalog{padding:0 18px 10px}.ref-toolbar{display:grid;grid-template-columns:1fr 265px;gap:8px;margin-bottom:7px}.ref-filters{display:flex;gap:4px;overflow:auto}.ref-filters button{white-space:nowrap;border:1px solid rgba(255,255,255,.09);border-radius:18px;background:#070707;color:#aaa198;padding:8px 15px;font-size:8px;cursor:pointer}.ref-filters button.active,.ref-filters button:hover{border-color:#916725;color:#dec183;box-shadow:inset 0 0 14px rgba(185,138,60,.08)}
.ref-search{position:relative}.ref-search input{width:100%;height:31px;border:1px solid rgba(255,255,255,.09);border-radius:18px;background:#070707;color:#ddd;padding:0 34px 0 13px;font-size:8px;letter-spacing:.07em}.ref-search span{position:absolute;right:12px;top:6px;color:#c18d38}
.ref-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:4px}.ref-grid-card{border:1px solid rgba(185,138,60,.36);border-radius:5px;background:#080808}.ref-grid-card[hidden]{display:none}.ref-grid-card a{display:block;text-align:center;padding:7px 5px 8px}.ref-grid-vial{height:118px;display:flex;align-items:flex-end;justify-content:center}.ref-grid-vial img{height:113px;max-width:100%;width:auto;object-fit:contain}.ref-grid-card h3{font-size:10px;font-weight:400;margin:5px 0 2px}.ref-grid-card p{font-size:9px;color:#ce9b47;margin:0}.ref-load{text-align:center;margin-top:5px}.ref-load button{border:1px solid #8d6728;border-radius:16px;background:#070707;color:#d1a151;padding:6px 23px;font-size:8px;cursor:pointer}.ref-load span{margin-left:8px}

/* newsletter */
.ref-community{margin:0 18px 9px;border:1px solid rgba(185,138,60,.38);border-radius:8px;overflow:hidden;display:grid;grid-template-columns:1.1fr .9fr 1.15fr;min-height:126px;background:#070707}.ref-community-copy{display:flex;align-items:center;gap:20px;padding:20px}.ref-mail{width:48px;height:48px;border:1px solid #a9782d;border-radius:50%;display:grid;place-items:center;color:#d0a050;font-size:20px}.ref-community-copy h2{font:17px Georgia,serif;font-weight:400;line-height:1.23;letter-spacing:.06em;margin:0 0 8px}.ref-community-copy p{font-size:8px;color:#a49c92;line-height:1.5}.ref-newsletter{display:flex;flex-direction:column;justify-content:center;padding:20px;border-left:1px solid rgba(185,138,60,.18);border-right:1px solid rgba(185,138,60,.18)}.ref-newsletter>div{display:flex}.ref-newsletter input{height:34px;flex:1;background:#080808;border:1px solid rgba(185,138,60,.28);border-right:0;color:#ddd;padding:0 12px;font-size:8px}.ref-newsletter button{width:40px;border:1px solid #ad7f36;background:linear-gradient(135deg,#8b6228,#d5ae66);color:#111}.ref-newsletter small{font-size:7px;color:#81796e;line-height:1.45;margin-top:8px}.ref-brand-panel{display:grid;place-items:center;position:relative;background:radial-gradient(circle at 50% 50%,rgba(185,138,60,.18),transparent 35%)}.ref-brand-panel:before{content:"";position:absolute;inset:0;background:linear-gradient(120deg,transparent 0 49%,rgba(185,138,60,.07) 49% 51%,transparent 51%)}.ref-brand-panel span{font:80px Georgia,serif;color:#c5984e;text-shadow:0 2px 15px #000;position:relative}

/* footer */
.ref-footer{display:grid;grid-template-columns:1.45fr repeat(4,1fr) 1.05fr;gap:20px;padding:8px 28px 27px;border-top:1px solid rgba(185,138,60,.30);background:#020202;position:relative}.ref-foot-brand{display:flex;align-items:center;gap:12px;margin-top:12px}.ref-foot-brand>span{font:44px Georgia,serif;color:#c49a58}.ref-foot-brand b{font:23px Georgia,serif;font-weight:400;letter-spacing:.15em}.ref-foot-brand small{display:block;font:7px Arial,sans-serif;letter-spacing:.45em;margin-top:4px}.ref-footer h4{font-size:8px;color:#ae8950;letter-spacing:.08em;margin:10px 0 5px}.ref-footer a{display:block;color:#a49b90;font-size:8px;line-height:1.62}.ref-warning{align-self:center;border:1px solid rgba(185,138,60,.35);padding:10px;text-align:center;font-size:8px;line-height:1.45;color:#b6aea4}.ref-warning hr{border:0;border-top:1px solid rgba(185,138,60,.20);margin:7px 0}.ref-footer>p{position:absolute;left:0;right:0;bottom:4px;text-align:center;font-size:7px;color:#6f6960;margin:0}

/* reference desktop proportion target */
@media(min-width:1400px){
  .ref-topbar,.ref-header,.ref-hero,.ref-featured,.ref-catalog,.ref-community,.ref-footer{max-width:100%}
}
@media(max-width:1100px){
  .ref-top-left{display:none}.ref-topbar{grid-template-columns:1fr 1fr}.ref-top-center{text-align:left}.ref-header{grid-template-columns:220px 1fr 120px}.ref-header nav{gap:20px}.ref-feature-grid,.ref-grid{grid-template-columns:repeat(3,1fr)}.ref-hero{grid-template-columns:62% 38%}.ref-copy h1{font-size:61px}.ref-hero-art img{height:265px}.ref-footer{grid-template-columns:1.4fr repeat(2,1fr)}
}
@media(max-width:760px){
  .ref-topbar{display:none}.ref-header{height:69px;grid-template-columns:1fr auto}.ref-header nav{display:none}.ref-icons{gap:14px}.ref-word{font-size:22px}.ref-lv{font-size:38px}.ref-hero{height:400px;grid-template-columns:1fr}.ref-copy{padding:44px 22px}.ref-copy h1{font-size:52px}.ref-hero-art{position:absolute;inset:0 0 0 43%;opacity:.25}.ref-benefits{flex-direction:column;gap:12px}.ref-feature-grid,.ref-grid{grid-template-columns:repeat(2,1fr)}.ref-toolbar{grid-template-columns:1fr}.ref-community{grid-template-columns:1fr}.ref-newsletter{border-left:0;border-right:0;border-top:1px solid rgba(185,138,60,.18);border-bottom:1px solid rgba(185,138,60,.18)}.ref-brand-panel{min-height:105px}.ref-footer{grid-template-columns:repeat(2,1fr)}
}


/* ============================================================
   LEVIAL SIGNATURE 2.7 — APPROVED MOCKUP PROPORTION MATCH
   Key correction: the approved reference is a ~1023px editorial
   canvas. Previous builds stretched that composition across wide
   desktop viewports. This keeps the same visual proportions.
   ============================================================ */

body.levial-collection-standalone{
    background:#020202 !important;
}

/* Keep the collection as a refined editorial canvas on wide screens.
   On smaller screens it remains fully responsive. */
.ref-page{
    width:min(100%,1120px);
    margin:0 auto;
    border-left:1px solid rgba(185,138,60,.10);
    border-right:1px solid rgba(185,138,60,.10);
}

/* Reference header proportions */
.ref-topbar{
    height:30px;
    padding-left:20px;
    padding-right:20px;
}
.ref-header{
    height:90px;
    padding-left:24px;
    padding-right:24px;
    grid-template-columns:240px 1fr 135px;
}
.ref-logo{gap:10px}
.ref-lv{font-size:48px}
.ref-word{font-size:28px}
.ref-header nav{gap:31px}
.ref-header nav a{font-size:9px}
.ref-icons{gap:17px}

/* Reference hero is much richer and more balanced than the CSS-only
   approximation. Use the user's approved hero artwork directly on
   the right while keeping live HTML text/buttons on the left. */
.ref-hero{
    height:335px;
    grid-template-columns:55% 45%;
}
.ref-copy{
    padding:48px 0 25px 50px;
}
.ref-copy h1{
    font-size:72px;
    margin-bottom:19px;
}
.ref-copy>p{
    font-size:14px;
    letter-spacing:.27em;
    line-height:1.7;
}
.ref-benefits{
    gap:22px;
    margin-top:28px;
}
.ref-benefits b{
    width:38px;
    height:38px;
}
.ref-hero-art{
    background:
      linear-gradient(90deg,rgba(4,4,4,.02),rgba(4,4,4,0)),
      url('../images/collection/collection-hero-reference.webp') center/cover no-repeat;
}
.ref-hero-art .ref-hex,
.ref-hero-art .ref-dna,
.ref-hero-art .ref-rock,
.ref-hero-art img{
    display:none!important;
}

/* Featured section: target mockup is tighter and taller than v2.6 */
.ref-featured{
    padding:0 16px 12px;
}
.ref-feature-title{
    height:34px;
}
.ref-feature-title h2{
    font-size:18px;
}
.ref-feature-grid{
    border-radius:9px;
}
.ref-feature-card a{
    padding:13px 8px 14px;
}
.ref-feature-vial{
    height:185px;
}
.ref-feature-vial img{
    height:179px;
}
.ref-feature-card h3{
    margin-top:8px;
    font-size:13px;
}
.ref-feature-card span{
    padding:8px 14px;
}

/* Compact catalog / exact six-column feel */
.ref-catalog{
    padding:0 16px 10px;
}
.ref-toolbar{
    grid-template-columns:1fr 250px;
    margin-bottom:7px;
}
.ref-filters button{
    padding:8px 13px;
    font-size:7.5px;
}
.ref-grid{
    gap:4px;
}
.ref-grid-vial{
    height:136px;
}
.ref-grid-vial img{
    height:130px;
}
.ref-grid-card a{
    padding:8px 5px 9px;
}
.ref-grid-card h3{
    font-size:9.5px;
    margin:6px 0 2px;
}

/* Community panel uses the approved art instead of the flat LV panel. */
.ref-community{
    margin:0 16px 9px;
    min-height:137px;
    grid-template-columns:1.08fr .95fr 1.17fr;
}
.ref-brand-panel{
    background:url('../images/collection/collection-community-reference.webp') center/cover no-repeat;
}
.ref-brand-panel:before,
.ref-brand-panel span{
    display:none!important;
}

/* Footer closer to reference density */
.ref-footer{
    padding:10px 22px 29px;
    gap:16px;
    grid-template-columns:1.35fr repeat(4,.88fr) 1.12fr;
}
.ref-foot-brand>span{
    font-size:46px;
}
.ref-foot-brand b{
    font-size:22px;
}

/* On very wide desktops, avoid the over-stretched composition that
   caused v2.6 to differ most from the approved image. */
@media (min-width:1280px){
    .ref-page{
        width:1120px;
    }
}

/* Preserve responsive behavior below the editorial desktop width. */
@media (max-width:1120px){
    .ref-page{
        width:100%;
        border-left:0;
        border-right:0;
    }
}



/* ============================================================
   LEVIAL SIGNATURE 2.8 — REFERENCE REFINEMENT
   ============================================================ */

/* Slightly wider canvas than v2.7: removes excessive side gutters
   while still retaining the reference's compact editorial feel. */
.ref-page{
    width:min(100%,1180px);
}
@media (min-width:1320px){
    .ref-page{width:1180px}
}

/* Use the exact approved Levial header-mark treatment. */
.ref-logo{
    width:245px;
    height:72px;
    background:url('../images/collection/collection-logo-reference.webp') left center/contain no-repeat;
}
.ref-logo .ref-lv,
.ref-logo .ref-word{
    visibility:hidden;
}

/* Hero: cleaner crop removes the stray clipped lettering from v2.7. */
.ref-hero{
    grid-template-columns:54.5% 45.5%;
}
.ref-hero-art{
    background:
      url('../images/collection/collection-hero-reference-v28.webp') center center/cover no-repeat;
}
.ref-copy{
    padding-left:48px;
}
.ref-copy h1{
    font-size:74px;
}

/* Match the mockup's six-up featured collection. */
.ref-feature-grid{
    grid-template-columns:repeat(6,minmax(0,1fr));
}
.ref-feature-vial{
    height:188px;
}
.ref-feature-vial img{
    height:182px;
}
.ref-feature-card h3{
    font-size:12.5px;
}

/* Reference catalog cards are slightly taller and more generous. */
.ref-grid-vial{
    height:130px;
}
.ref-grid-vial img{
    height:124px;
}
.ref-grid-card{
    min-height:174px;
}

/* Reference newsletter artwork. */
.ref-brand-panel{
    background:url('../images/collection/collection-community-reference-v28.webp') center/cover no-repeat;
}

/* Keep compact typography but add the small breathing room seen in target. */
.ref-featured{padding-left:14px;padding-right:14px}
.ref-catalog{padding-left:14px;padding-right:14px}
.ref-community{margin-left:14px;margin-right:14px}
.ref-footer{padding-left:24px;padding-right:24px}

/* On laptop widths, preserve all six featured products instead of dropping to 3. */
@media (min-width:900px) and (max-width:1180px){
    .ref-feature-grid{grid-template-columns:repeat(6,minmax(0,1fr))}
    .ref-feature-vial{height:160px}
    .ref-feature-vial img{height:154px}
    .ref-feature-card h3{font-size:10.5px}
    .ref-feature-card span{padding:7px 8px;font-size:7px}
}

/* Tablet remains responsive. */
@media (max-width:899px){
    .ref-feature-grid{grid-template-columns:repeat(3,1fr)}
}


/* ============================================================
   LEVIAL SIGNATURE 2.9 — SURGICAL COLLECTION FINE-TUNE
   Base: v2.8.0. Only the four agreed areas are adjusted.
   ============================================================ */

/* 1. HERO ART — show more of the approved artwork; reduce the over-zoom. */
.ref-hero-art{
    background-size:100% auto !important;
    background-position:center center !important;
    background-repeat:no-repeat !important;
    background-color:#050505;
}

/* 2. FEATURED COLLECTION — six products, slightly shorter/tighter like reference. */
.ref-feature-grid{
    grid-template-columns:repeat(6,minmax(0,1fr)) !important;
}
.ref-feature-card{
    min-height:270px;
}
.ref-feature-vial{
    height:168px !important;
    padding-top:8px;
}
.ref-feature-vial img{
    height:162px !important;
    max-width:92%;
    object-fit:contain;
}
.ref-feature-card h3{
    margin-top:7px;
    line-height:1.15;
}
.ref-feature-card p{
    margin-top:3px;
}
.ref-feature-card span{
    margin-top:9px;
}

/* 3. LOWER GRID — slightly more vertical breathing room without widening cards. */
.ref-grid{
    row-gap:5px;
}
.ref-grid-card{
    min-height:184px !important;
    padding-top:10px;
    padding-bottom:9px;
}
.ref-grid-vial{
    height:136px !important;
}
.ref-grid-vial img{
    height:130px !important;
    object-fit:contain;
}
.ref-grid-card h3{
    margin-top:6px;
    line-height:1.15;
}
.ref-grid-card p{
    margin-top:2px;
}

/* Keep six featured items at normal desktop/laptop widths. */
@media (min-width:900px){
    .ref-feature-grid{
        grid-template-columns:repeat(6,minmax(0,1fr)) !important;
    }
}
@media (max-width:899px){
    .ref-feature-grid{
        grid-template-columns:repeat(3,1fr) !important;
    }
}
@media (max-width:620px){
    .ref-feature-grid{
        grid-template-columns:repeat(2,1fr) !important;
    }
}