/* ============================================
   VETTONIA FLOORING — DESIGN SYSTEM v1.0
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:ital,wght@0,300;0,400;0,600;0,700;0,800;0,900;1,700&family=Inter:wght@300;400;500;600&display=swap');

/* ---- TOKENS ---- */
:root {
  /* Forest & Linen palette */
  --color-base:        #f6f3ee;
  --color-surface:     #dde5d8;
  --color-text-dark:   #253320;
  --color-text-mid:    #4a6640;
  --color-gold:        #c9a84c;
  --color-gold-hover:  #a8892d;
  --color-stone:       #c8b89a;
  --color-dark-section:#1a2e18;
  --color-white:       #ffffff;

  /* Backwards-compat aliases used throughout existing CSS */
  --charcoal:     var(--color-dark-section);
  --charcoal-mid: #22381f;
  --charcoal-light:#2d4229;
  --off-white:    var(--color-base);
  --stone:        var(--color-stone);
  --stone-light:  #d8ccb6;
  --gold:         var(--color-gold);
  --gold-dark:    var(--color-gold-hover);
  --gold-light:   #dfc06e;
  --white:        var(--color-white);
  --black:        var(--color-dark-section);
  --text-dim:     rgba(246,243,238,0.55);

  --font-hl:   'Barlow Condensed', sans-serif;
  --font-body: 'Inter', sans-serif;
  --fs-hero: clamp(2.8rem, 6vw, 5.5rem);
  --fs-h1: clamp(2.2rem, 5vw, 4rem);
  --fs-h2: clamp(1.6rem, 3vw, 2.4rem);
  --fs-body: 1rem;
  --fs-sm: 0.875rem;
  --fs-xs: 0.72rem;
  --space-section: clamp(4rem, 8vw, 8rem);
  --space-lg: clamp(2rem, 4vw, 4rem);
  --nav-h: 80px;
  --radius: 6px;
  --ease: cubic-bezier(0.25,0.1,0.25,1);
  --t-base: 0.4s var(--ease);
  --t-fast: 0.2s var(--ease);
  --shadow-gold: 0 8px 32px rgba(201,168,76,0.35);
  --z-nav: 9000;
  --z-cart: 2000;
}

/* ---- RESET ---- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;font-size:16px}
body{font-family:var(--font-body);font-weight:400;line-height:1.65;color:var(--color-text-dark);background:var(--color-base);overflow-x:hidden;-webkit-font-smoothing:antialiased}
img,video{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}
button{cursor:pointer;border:none;background:none;font-family:inherit}
input,select,textarea{font-family:inherit;font-size:inherit}

/* ---- TYPOGRAPHY ---- */
h1,h2,h3,h4{font-family:var(--font-hl);font-weight:800;line-height:1.05;letter-spacing:-0.02em;text-transform:uppercase}
.text-hero{font-size:var(--fs-hero);font-weight:900;letter-spacing:-0.03em;text-transform:uppercase;line-height:1}
.text-h1{font-size:var(--fs-h1);font-weight:800;text-transform:uppercase}
.text-h2{font-size:var(--fs-h2);font-weight:700;text-transform:uppercase}
.text-label{font-family:var(--font-hl);font-size:var(--fs-xs);font-weight:700;letter-spacing:0.2em;text-transform:uppercase;color:var(--gold)}
.text-body-lg{font-weight:300;font-size:1.125rem;line-height:1.75}
.text-dim{color:var(--text-dim)}
.text-gold{color:var(--gold)}
.text-stone{color:var(--stone)}
.text-white{color:var(--white)}

/* ---- LAYOUT ---- */
.container{width:100%;max-width:1400px;margin:0 auto;padding:0 clamp(1.5rem,4vw,4rem)}
.container--lg{max-width:1140px}
.container--md{max-width:860px}
.section{padding:var(--space-section) 0;position:relative}
.section--dark{background:var(--color-dark-section);color:var(--color-base)}
.section--black{background:var(--color-dark-section);color:var(--color-base)}
.section--stone{background:var(--color-surface);color:var(--color-text-dark)}
.section--light{background:var(--color-base);color:var(--color-text-dark)}
.section-header{text-align:center;margin-bottom:var(--space-lg)}
.divider{width:60px;height:2px;background:var(--gold);margin:1.2rem 0}
.divider--center{margin:1.2rem auto}

/* ---- BUTTONS ---- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:.9rem 2.2rem;font-family:var(--font-hl);font-weight:700;font-size:1rem;letter-spacing:.06em;text-transform:uppercase;border-radius:var(--radius);transition:all var(--t-base);white-space:nowrap;min-height:52px;position:relative;overflow:hidden}
.btn--gold{background:var(--color-gold);color:var(--color-text-dark);box-shadow:var(--shadow-gold);font-weight:600}
.btn--gold:hover{background:var(--color-gold-hover);transform:translateY(-2px);box-shadow:0 12px 40px rgba(201,168,76,.5)}
.btn--gold:active{transform:translateY(0)}
.btn--outline-white{background:transparent;color:var(--color-base);border:1.5px solid var(--color-base)}
.btn--outline-white:hover{background:rgba(246,243,238,.15);border-color:var(--color-base);transform:translateY(-2px)}
.btn--outline-gold{background:transparent;color:var(--color-gold);border:1.5px solid var(--color-gold)}
.btn--outline-gold:hover{background:rgba(201,168,76,.1);transform:translateY(-2px)}
.btn--lg{padding:1.1rem 2.8rem;font-size:1.1rem}
.btn--sm{padding:.6rem 1.4rem;font-size:.875rem;min-height:40px}
.btn--pill{border-radius:100px}
.btn--full{width:100%}
.tag{display:inline-block;padding:.3rem .8rem;font-family:var(--font-hl);font-size:.7rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;border-radius:var(--radius)}
.tag--gold{background:var(--color-gold);color:var(--color-text-dark)}
.tag--stone{background:var(--color-surface);color:var(--color-text-mid);border:0.5px solid rgba(74,102,64,.2)}

/* ---- NAVIGATION ---- */
.nav:not(.nav--glass) .nav__logo img,
.nav:not(.nav--glass) .nav__link,
.nav:not(.nav--glass) .nav__cart-btn,
.nav:not(.nav--glass) .nav__hamburger span,
.nav:not(.nav--glass) .nav__wa {
  mix-blend-mode: difference;
}
.nav{position:fixed;top:0;left:0;right:0;height:var(--nav-h);z-index:var(--z-nav);display:flex;align-items:center;transition:all .5s var(--ease)}
.nav--transparent{background:transparent}
.nav--glass{background:rgba(246,243,238,.88);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:0.5px solid rgba(37,51,32,.12);box-shadow:0 4px 20px rgba(37,51,32,.08)}
.nav--glass .nav__link{color:var(--color-text-dark)}
.nav--glass .nav__link:hover{color:var(--color-gold)}
.nav--glass .nav__cart-btn{color:var(--color-text-dark)}
.nav--glass .nav__sample-pill{background:var(--color-gold);color:var(--color-text-dark)}
.nav--glass .nav__wa{color:var(--color-text-mid)}
.nav--glass .nav__hamburger span{background:var(--color-text-dark)}
.nav--glass .nav__logo img{filter:none}
.nav__inner{display:flex;align-items:center;justify-content:space-between;width:100%;max-width:1400px;margin:0 auto;padding:0 clamp(1.5rem,4vw,4rem);gap:2rem}
.nav__logo{flex-shrink:0}
.nav__logo img{height:44px;width:auto;filter:brightness(0) invert(1);transition:filter .5s}
.nav__links{display:flex;align-items:center;gap:2rem}
.nav__link{font-family:var(--font-hl);font-size:.85rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.85);transition:color var(--t-fast);position:relative;padding:.3rem 0}
.nav__link::after{content:'';position:absolute;bottom:-2px;left:0;width:0;height:1px;background:var(--gold);transition:width var(--t-base)}
.nav__link:hover{color:var(--gold)}
.nav__link:hover::after{width:100%}
.nav__actions{display:flex;align-items:center;gap:1rem}
.nav__cart-btn{position:relative;display:flex;align-items:center;justify-content:center;width:40px;height:40px;color:rgba(255,255,255,.85);transition:color var(--t-fast)}
.nav__cart-btn:hover{color:var(--gold)}
.nav__cart-btn svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.8}
.nav__badge{position:absolute;top:-4px;right:-4px;width:18px;height:18px;background:var(--gold);color:var(--charcoal);border-radius:50%;font-size:.65rem;font-weight:700;display:flex;align-items:center;justify-content:center;transform:scale(0);transition:transform var(--t-fast)}
.nav__badge.visible{transform:scale(1)}
.nav__badge.bounce{animation:badgeBounce .4s var(--ease)}
.nav__sample-pill{background:var(--gold);color:var(--charcoal);font-family:var(--font-hl);font-size:.75rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:.45rem 1.1rem;border-radius:100px;transition:all var(--t-fast);border:none;cursor:pointer;display:inline-block}
.nav__sample-pill:hover{background:var(--gold-dark);transform:translateY(-1px);box-shadow:0 4px 12px rgba(0,0,0,0.1)}
.nav__wa{display:flex;align-items:center;justify-content:center;width:36px;height:36px;color:rgba(255,255,255,.8);transition:color var(--t-fast)}
.nav__wa:hover{color:#25D366}
.nav__wa svg{width:20px;height:20px;fill:currentColor}
.nav__hamburger{display:none;flex-direction:column;gap:5px;width:28px;cursor:pointer;padding:4px;-webkit-appearance:none;-webkit-tap-highlight-color:transparent;position:relative;z-index:10000;}
.nav__hamburger span{display:block;height:1.5px;background:var(--white);border-radius:2px;transition:all .3s}

/* Collections Dropdown */
.dropdown{position:relative}
.dropdown__menu{position:absolute;z-index:9001;top:calc(100% + 1rem);left:50%;transform:translateX(-50%);background:rgba(26,26,26,.96);backdrop-filter:blur(20px);border:1px solid rgba(201,168,76,.2);border-radius:var(--radius);padding:1rem;min-width:240px;opacity:0;visibility:hidden;transform:translateX(-50%) translateY(-8px);transition:all .3s var(--ease)}
.dropdown:hover .dropdown__menu{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
.dropdown__item{display:flex;align-items:center;gap:.75rem;padding:.7rem 1rem;border-radius:4px;color:rgba(245,240,235,.8);font-family:var(--font-hl);font-size:.8rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;transition:all var(--t-fast)}
.dropdown__item:hover{background:rgba(201,168,76,.12);color:var(--gold)}
.dropdown__item-tag{font-size:.6rem;opacity:.6;margin-left:auto}

/* Mobile Menu */
.mobile-menu{position:fixed;inset:0;background:var(--color-dark-section);z-index:calc(var(--z-nav) + 10);display:flex;flex-direction:column;padding:2rem clamp(1.5rem,4vw,4rem);transform:translateX(100%);transition:transform .4s var(--ease)}
.mobile-menu.open{transform:translateX(0)}
.mobile-menu__header{display:flex;justify-content:space-between;align-items:center;margin-bottom:3rem}
.mobile-menu__logo img{height:36px;filter:brightness(0) invert(1)}
.mobile-menu__close{color:var(--white);font-size:1.5rem;line-height:1}
.mobile-menu__links{display:flex;flex-direction:column;gap:.5rem;flex:1}
.mobile-menu__link{font-family:var(--font-hl);font-size:1.8rem;font-weight:800;letter-spacing:-.01em;text-transform:uppercase;color:var(--off-white);padding:.6rem 0;border-bottom:1px solid rgba(255,255,255,.08);transition:color var(--t-fast)}
.mobile-menu__link:hover{color:var(--gold)}
.mobile-menu__sub{font-size:1.1rem;color:var(--stone);padding-left:1rem}
.mobile-menu__footer{padding-top:2rem;display:flex;gap:1rem;align-items:center}

/* ---- HERO ---- */
.hero{position:relative;height:100vh;min-height:600px;display:flex;align-items:center;justify-content:center;text-align:center;overflow:hidden}
.hero__bg{position:absolute;inset:0;object-fit:cover;object-position:center;width:100%;height:100%;z-index:0}
.hero__overlay{position:absolute;inset:0;background:linear-gradient(to bottom,rgba(0,0,0,.55) 0%,rgba(0,0,0,.15) 50%,rgba(0,0,0,.75) 100%);z-index:1}
.hero__content{position:relative;z-index:2;color:var(--color-white);max-width:900px;padding:0 1.5rem}
.hero__eyebrow{font-family:var(--font-hl);font-size:11px;font-weight:700;letter-spacing:.25em;text-transform:uppercase;color:var(--color-gold);margin-bottom:20px;opacity:0;animation:heroFadeUp .7s ease-out .2s both}
.hero__title{font-family:var(--font-hl);font-size:var(--fs-hero);font-weight:700;line-height:1.15;color:var(--color-white);opacity:0;animation:heroFadeUp .8s ease-out .4s both}

@media (max-width: 768px) {
  .stats-grid { grid-template-columns: 1fr 1fr !important; }
}
@media (max-width: 480px) {
  .stats-grid { grid-template-columns: 1fr !important; }
}


.hero__subtitle{font-family:var(--font-body);font-weight:400;font-size:clamp(1rem,2vw,1.2rem);color:rgba(246,243,238,.8);margin-top:20px;letter-spacing:.03em;opacity:0;animation:heroFadeUp .8s ease-out .6s both}
.hero__ctas{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;margin-top:40px;opacity:0;animation:heroFadeUp .8s ease-out .8s both}
.scroll-indicator{position:absolute;bottom:30px;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:.4rem;color:rgba(246,243,238,.6);z-index:2;opacity:0;animation:heroFadeUp .6s ease-out 1.2s both,scrollBounce 1.5s ease-in-out 1.8s infinite}
.scroll-indicator span{font-size:.65rem;letter-spacing:.15em;text-transform:uppercase}
.scroll-indicator svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.5}
@media(max-width:768px){
  .hero__title{font-size:clamp(2rem,8vw,3rem)}
  .hero__ctas{flex-direction:column;align-items:center}
  .hero__ctas .btn{width:100%;max-width:300px}
  .hero__overlay{background:linear-gradient(to bottom,rgba(0,0,0,.65) 0%,rgba(0,0,0,.35) 50%,rgba(0,0,0,.8) 100%)}
  .hero__bg{object-position:center 30%}
}

/* ---- BENEFITS STRIP ---- */
.benefits{background:var(--color-dark-section);padding:4rem 0}
.benefits__grid{display:grid;grid-template-columns:repeat(6,1fr);gap:1.5rem}
.benefit-item{display:flex;flex-direction:column;align-items:center;text-align:center;gap:.75rem;opacity:0;transform:scale(.85);transition:all .6s var(--ease)}
.benefit-item.visible{opacity:1;transform:scale(1)}
.benefit-item__icon{width:52px;height:52px;display:flex;align-items:center;justify-content:center}
.benefit-item__icon svg{width:100%;height:100%;stroke:var(--gold);fill:none;stroke-width:1.5}
.benefit-item__label{font-family:var(--font-hl);font-size:.75rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--off-white)}
.benefit-item__desc{font-size:.72rem;color:var(--stone-light);line-height:1.5;font-weight:300}

/* ---- ANATOMY ---- */
.anatomy-section{height:700vh;background:var(--color-dark-section)}
.anatomy-sticky{position:sticky;top:0;height:100vh;display:flex;align-items:stretch;overflow:hidden}
.anatomy-image-side{flex:1;position:relative;display:flex;align-items:center;justify-content:center;padding:2rem}
.anatomy-image-side img{max-height:80vh;width:auto;object-fit:contain;position:relative;z-index:1}
.anatomy-layer-hl{position:absolute;left:10%;right:10%;height:3px;background:var(--gold);opacity:0;transform:scaleX(0);transition:all .5s var(--ease);z-index:2;border-radius:2px;box-shadow:0 0 20px rgba(201,168,76,.8)}
.anatomy-layer-hl.active{opacity:1;transform:scaleX(1)}
.anatomy-text-side{width:420px;flex-shrink:0;display:flex;flex-direction:column;justify-content:center;padding:3rem 3rem 3rem 2rem;position:relative}
.anatomy-intro{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;padding:3rem 3rem 3rem 2rem;opacity:1;transition:opacity .4s}
.anatomy-intro.hidden{opacity:0;pointer-events:none}
.layer-info{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;padding:3rem 3rem 3rem 2rem;opacity:0;transform:translateY(20px);transition:all .5s var(--ease);pointer-events:none}
.layer-info.active{opacity:1;transform:translateY(0);pointer-events:auto}
.layer-number{font-family:var(--font-hl);font-size:5rem;font-weight:900;color:rgba(201,168,76,.15);line-height:1;position:absolute;top:2rem;right:2rem}
.layer-name{font-family:var(--font-hl);font-size:.7rem;font-weight:700;letter-spacing:.2em;color:var(--gold);text-transform:uppercase;margin-bottom:.5rem}
.layer-title{font-family:var(--font-hl);font-size:1.8rem;font-weight:800;text-transform:uppercase;color:var(--white);line-height:1.1;margin-bottom:1rem}
.layer-desc{font-size:.9rem;color:rgba(245,240,235,.7);line-height:1.7;font-weight:300}
.anatomy-progress{position:absolute;bottom:2rem;left:3rem;display:flex;gap:.5rem}
.anatomy-dot{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.2);transition:all .3s}
.anatomy-dot.active{background:var(--gold);transform:scale(1.4)}

/* ---- COLLECTIONS SECTION ---- */
.collections-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem}
@media(max-width:1024px){.collections-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:768px){.collections-grid{grid-template-columns:1fr}}
.coll-card{position:relative;border-radius:var(--radius);overflow:hidden;aspect-ratio:3/4;cursor:pointer;opacity:0;transform:scale(.95);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.coll-card.visible{opacity:1;transform:scale(1)}
.coll-card__img{position:absolute;inset:0;object-fit:cover;width:100%;height:100%;transition:transform .8s var(--ease)}
.coll-card:hover .coll-card__img{transform:scale(1.06)}
.coll-card__overlay{position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.85) 0%,rgba(0,0,0,.3) 50%,transparent 100%);transition:background .4s}
.coll-card:hover .coll-card__overlay{background:linear-gradient(to top,rgba(201,168,76,.5) 0%,rgba(0,0,0,.4) 60%,transparent 100%)}
.coll-card__content{position:absolute;bottom:0;left:0;right:0;padding:1.8rem;color:var(--white)}
.coll-card__tag{margin-bottom:.5rem}
.coll-card__title{font-family:var(--font-hl);font-size:1.8rem;font-weight:900;text-transform:uppercase;letter-spacing:-.01em;line-height:1.05}
.coll-card__sub{font-size:.8rem;color:rgba(255,255,255,.7);font-weight:300;margin-top:.3rem;line-height:1.5}
.coll-card__specs{display:flex;gap:.75rem;flex-wrap:wrap;margin-top:.75rem;padding-top:.75rem;border-top:1px solid rgba(255,255,255,.15)}
.coll-card__spec{font-size:.65rem;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.6)}
.coll-card__cta{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);opacity:0;transition:opacity .3s;white-space:nowrap}
.coll-card:hover .coll-card__cta{opacity:1}

/* ---- KINETIC TEXT (WHY VETTONIA) ---- */
.kinetic-section{height:600vh;background:var(--color-dark-section)}
.kinetic-sticky{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:0 clamp(1.5rem,4vw,4rem)}
.kinetic-intro{font-family:var(--font-hl);font-size:clamp(1.2rem,2vw,1.6rem);font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--gold);margin-bottom:2rem;opacity:.7}
.kinetic-statement{font-family:var(--font-hl);font-size:clamp(2rem,6vw,5rem);font-weight:900;text-transform:uppercase;line-height:1.05;letter-spacing:-.02em;color:rgba(255,255,255,.25);transition:all .4s var(--ease);max-width:900px}
.kinetic-statement.active{color:var(--white);transform:scale(1.02)}
.kinetic-statement.past{color:rgba(255,255,255,.2)}
.kinetic-cta{margin-top:3rem;opacity:0;transform:translateY(20px);transition:all .5s var(--ease)}
.kinetic-cta.visible{opacity:1;transform:translateY(0)}

/* ---- QUIZ ---- */
.quiz-container{max-width:700px;margin:0 auto}
.quiz-steps{position:relative}
.quiz-step{display:none;animation:fadeInUp .4s var(--ease)}
.quiz-step.active{display:block}
.quiz-step__q{font-family:var(--font-hl);font-size:clamp(1.4rem,3vw,2rem);font-weight:800;text-transform:uppercase;margin-bottom:2rem;color:var(--charcoal)}
.quiz-options{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem}
.quiz-option{padding:1.2rem 1.5rem;border:2px solid rgba(200,184,154,.4);border-radius:var(--radius);cursor:pointer;text-align:center;font-family:var(--font-hl);font-weight:700;font-size:.9rem;letter-spacing:.06em;text-transform:uppercase;color:var(--charcoal);transition:all var(--t-fast);background:var(--white)}
.quiz-option:hover,.quiz-option.selected{border-color:var(--gold);background:rgba(201,168,76,.08);color:var(--gold)}
.quiz-progress{display:flex;gap:.5rem;margin-bottom:2rem}
.quiz-dot{flex:1;height:3px;border-radius:2px;background:rgba(200,184,154,.3);transition:background .3s}
.quiz-dot.done{background:var(--gold)}
.quiz-result{display:none;animation:fadeInUp .5s var(--ease)}
.quiz-result.show{display:block}
.quiz-result-card{background:var(--white);border-radius:calc(var(--radius)*2);overflow:hidden;box-shadow:0 20px 60px rgba(0,0,0,.12)}
.quiz-result-card__img{width:100%;height:280px;object-fit:cover}
.quiz-result-card__body{padding:2rem}
.quiz-result-card__ctas{display:flex;gap:1rem;margin-top:1.5rem;flex-wrap:wrap}

/* ---- CALCULATOR ---- */
.calc-container{max-width:780px;margin:0 auto}
.calc-form{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;align-items:end}
.calc-field{display:flex;flex-direction:column;gap:.5rem}
.calc-label{font-family:var(--font-hl);font-size:.75rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--stone)}
.calc-input{background:rgba(255,255,255,.06);border:1px solid rgba(200,184,154,.25);border-radius:var(--radius);color:var(--off-white);padding:.85rem 1.1rem;font-size:1rem;transition:border-color var(--t-fast)}
.calc-input:focus{outline:none;border-color:var(--gold)}
.calc-select{background:rgba(26,26,26,.9);border:1px solid rgba(200,184,154,.25);border-radius:var(--radius);color:var(--off-white);padding:.85rem 1.1rem;font-size:1rem;transition:border-color var(--t-fast);cursor:pointer}
.calc-select:focus{outline:none;border-color:var(--gold)}
.calc-checkbox-row{display:flex;align-items:center;gap:.75rem;grid-column:1/-1;color:rgba(245,240,235,.7);font-size:.9rem}
.calc-checkbox-row input{width:18px;height:18px;accent-color:var(--gold)}
.calc-results{margin-top:2.5rem;display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;opacity:0;transform:translateY(20px);transition:all .5s var(--ease)}
.calc-results.show{opacity:1;transform:translateY(0)}
.calc-result-item{background:rgba(255,255,255,.05);border:1px solid rgba(201,168,76,.2);border-radius:var(--radius);padding:1.5rem;text-align:center}
.calc-result-value{font-family:var(--font-hl);font-size:2.5rem;font-weight:900;color:var(--gold);line-height:1}
.calc-result-label{font-size:.7rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:rgba(245,240,235,.5);margin-top:.4rem}
.calc-note{margin-top:1.5rem;font-size:.8rem;color:rgba(245,240,235,.5);text-align:center;font-style:italic}
.calc-cta{display:flex;justify-content:center;margin-top:1.5rem}

/* ---- SAMPLE REQUEST ---- */
.sample-request{position:relative;min-height:60vh;display:flex;align-items:center;overflow:hidden}
.sample-request__bg{position:absolute;inset:0;object-fit:cover;width:100%;height:100%;opacity:.25}
.sample-request__overlay{position:absolute;inset:0;background:var(--charcoal)}
.sample-request__content{position:relative;z-index:1;color:var(--white);text-align:center;padding:var(--space-section) 0}

/* ---- COMPARATOR ---- */
.comparator-selects{display:flex;gap:1rem;margin-bottom:2.5rem;flex-wrap:wrap}
.comparator-select{flex:1;min-width:180px;background:rgba(255,255,255,.06);border:1px solid rgba(200,184,154,.25);border-radius:var(--radius);color:var(--off-white);padding:.8rem 1rem;font-size:.875rem;cursor:pointer;transition:border-color var(--t-fast)}
.comparator-select:focus{outline:none;border-color:var(--gold)}
table.comp-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 0.9rem;
}
.comp-table th {
  font-family: var(--font-hl);
  font-size: 1rem;
  font-weight: 800;
  color: var(--gold);
  padding: 1.5rem 1rem;
  text-align: center;
  border-bottom: 2px solid rgba(201,168,76,0.5);
}
.comp-table th:first-child {
  text-align: left;
  color: #fff;
  border-bottom: 2px solid rgba(255,255,255,0.1);
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.comp-table td {
  padding: 1.25rem 1rem;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  text-align: center;
  color: rgba(255,255,255,0.6);
  transition: background 0.3s ease, color 0.3s ease;
}
.comp-table tr:hover td {
  background: rgba(255,255,255,0.02);
  color: rgba(255,255,255,0.9);
}
.comp-table td:first-child {
  text-align: left;
  font-family: var(--font-hl);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: rgba(255,255,255,0.9);
}
.comp-table td.diff {
  color: var(--gold);
  font-weight: 700;
  background: rgba(201,168,76,0.08);
}
.comp-ctas{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap;margin-top:2rem}

/* ---- UNDERLAY CARDS ---- */
.underlay-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem}
.underlay-card{background:rgba(255,255,255,.04);border:1px solid rgba(200,184,154,.15);border-radius:calc(var(--radius)*2);overflow:hidden;transition:all var(--t-base)}
.underlay-card:hover{border-color:rgba(201,168,76,.35);transform:translateY(-4px);box-shadow:0 20px 50px rgba(0,0,0,.3)}
.underlay-card__img{width:100%;aspect-ratio:4/3;object-fit:cover}
.underlay-card__body{padding:1.25rem}
.underlay-card__ref{font-size:.65rem;letter-spacing:.12em;text-transform:uppercase;color:rgba(245,240,235,.35);margin-bottom:.3rem}
.underlay-card__name{font-family:var(--font-hl);font-size:1.1rem;font-weight:800;text-transform:uppercase;color:var(--off-white);margin-bottom:.75rem}
.underlay-card__specs{display:flex;flex-direction:column;gap:.3rem}
.underlay-card__spec{display:flex;justify-content:space-between;font-size:.72rem;color:rgba(245,240,235,.55);padding:.3rem 0;border-bottom:1px solid rgba(255,255,255,.04)}
.underlay-card__spec strong{color:rgba(245,240,235,.85);font-weight:500}
.underlay-card__radiant{display:inline-flex;align-items:center;gap:.3rem;font-size:.65rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;margin-top:.75rem;padding:.3rem .7rem;border-radius:100px;border:1px solid}
.underlay-card__radiant.yes{color:#4CAF50;border-color:#4CAF50}
.underlay-card__radiant.no{color:rgba(245,240,235,.35);border-color:rgba(255,255,255,.1)}
.underlay-card__dl{margin-top:1rem}

/* ---- RODAPIÉS ---- */
.skirting-benefits{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;margin-bottom:3rem}
.skirting-benefit{display:flex;align-items:flex-start;gap:1rem;padding:1.5rem;background:rgba(255,255,255,.04);border:1px solid rgba(200,184,154,.12);border-radius:var(--radius)}
.skirting-benefit__icon{width:40px;height:40px;flex-shrink:0;color:var(--gold)}
.skirting-benefit__icon svg{width:100%;height:100%;fill:currentColor}
.skirting-benefit__title{font-family:var(--font-hl);font-size:.85rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--off-white)}
.skirting-colors-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:1rem}
.skirting-color-item{display:flex;flex-direction:column;align-items:center;gap:.5rem;cursor:pointer;transition:transform var(--t-fast)}
.skirting-color-item:hover{transform:translateY(-3px)}
.skirting-color-img{width:100%;aspect-ratio:1/2;object-fit:cover;border-radius:var(--radius);border:2px solid transparent;transition:border-color var(--t-fast)}
.skirting-color-item:hover .skirting-color-img,.skirting-color-item.active .skirting-color-img{border-color:var(--gold)}
.skirting-color-name{font-size:.6rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;text-align:center;color:rgba(245,240,235,.6)}

/* ---- INSTALLATION ---- */
.install-grid{display:grid;grid-template-columns:1fr 1fr;gap:4rem}
.install-steps{display:flex;flex-direction:column;gap:1.5rem}
.install-step{display:flex;gap:1.5rem;align-items:flex-start}
.install-step__num{width:48px;height:48px;border-radius:50%;background:var(--gold);color:var(--charcoal);font-family:var(--font-hl);font-size:1.2rem;font-weight:900;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.install-step__title{font-family:var(--font-hl);font-size:1rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--off-white);margin-bottom:.3rem}
.install-step__desc{font-size:.875rem;color:rgba(245,240,235,.6);line-height:1.6}
.maintain-list{display:flex;flex-direction:column;gap:.8rem}
.maintain-item{display:flex;align-items:flex-start;gap:.75rem;font-size:.875rem;color:rgba(245,240,235,.7);line-height:1.5}
.maintain-item::before{content:'—';color:var(--gold);flex-shrink:0;margin-top:.05rem}
.delivery-strip{margin-top:3rem;padding:1.5rem 2rem;background:rgba(201,168,76,.08);border:1px solid rgba(201,168,76,.2);border-radius:var(--radius);display:flex;align-items:center;justify-content:center;gap:3rem;flex-wrap:wrap}
.delivery-strip__item{text-align:center}
.delivery-strip__val{font-family:var(--font-hl);font-size:1rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--gold)}
.delivery-strip__desc{font-size:.75rem;color:rgba(245,240,235,.5);margin-top:.2rem}

/* ---- TESTIMONIALS ---- */
.trust-strip{display:flex;gap:0;background:rgba(201,168,76,.08);border-top:1px solid rgba(201,168,76,.15);border-bottom:1px solid rgba(201,168,76,.15);flex-wrap:wrap}
.trust-item{flex:1;min-width:200px;text-align:center;padding:1.2rem 1rem;border-right:1px solid rgba(201,168,76,.15)}
.trust-item:last-child{border-right:none}
.trust-item__icon{font-size:1.2rem;margin-bottom:.3rem}
.trust-item__text{font-family:var(--font-hl);font-size:.75rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--off-white)}
.testimonials-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;margin-bottom:3rem}
.testimonial-card{background:rgba(255,255,255,.04);border:1px solid rgba(200,184,154,.12);border-radius:calc(var(--radius)*2);padding:2rem;transition:all var(--t-base)}
.testimonial-card:hover{border-color:rgba(201,168,76,.3);transform:translateY(-4px)}
.testimonial-stars{color:var(--gold);font-size:1rem;letter-spacing:.1em;margin-bottom:1rem}
.testimonial-quote{font-size:.9rem;line-height:1.7;color:rgba(245,240,235,.75);font-style:italic;margin-bottom:1.2rem}
.testimonial-author{font-family:var(--font-hl);font-size:.75rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--stone)}

/* ---- CERTS ---- */
.certs-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem}
.cert-item{display:flex;flex-direction:column;align-items:center;gap:.75rem;padding:1.5rem;background:var(--color-surface);border:0.5px solid rgba(37,51,32,.1);border-radius:var(--radius);text-align:center;transition:all var(--t-base);color:var(--color-text-dark)}
.cert-item:hover{border-color:var(--color-gold);background:rgba(201,168,76,.08)}
.cert-item__badge{font-family:var(--font-hl);font-size:1.2rem;font-weight:900;color:var(--color-gold);letter-spacing:.06em}
.cert-item__label{font-size:.7rem;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--color-text-mid)}

/* ---- BLOG PREVIEW ---- */
.blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem}
.blog-card{background:var(--white);border-radius:calc(var(--radius)*2);overflow:hidden;box-shadow:var(--shadow-sm,0 2px 12px rgba(0,0,0,.08));transition:all var(--t-base)}
.blog-card:hover{transform:translateY(-6px);box-shadow:0 20px 50px rgba(0,0,0,.12)}
.blog-card__img{width:100%;aspect-ratio:16/9;object-fit:cover}
.blog-card__body{padding:1.5rem}
.blog-card__cat{font-family:var(--font-hl);font-size:.65rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--gold);margin-bottom:.5rem}
.blog-card__title{font-family:var(--font-hl);font-size:1.1rem;font-weight:800;text-transform:uppercase;letter-spacing:-.01em;color:var(--charcoal);margin-bottom:.5rem;line-height:1.2}
.blog-card__desc{font-size:.85rem;color:rgba(26,26,26,.6);line-height:1.6}
.blog-card__link{display:inline-flex;align-items:center;gap:.3rem;font-family:var(--font-hl);font-size:.75rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--gold);margin-top:1rem;transition:gap var(--t-fast)}
.blog-card__link:hover{gap:.6rem}

/* ---- FOOTER ---- */
.footer{background:var(--color-dark-section);color:var(--color-base);padding:5rem 0 2rem}
.footer__grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr 1fr;gap:3rem;margin-bottom:4rem}
.footer__brand-logo{height:40px;width:auto;filter:brightness(0) invert(1);margin-bottom:1rem}
.footer__tagline{font-size:.85rem;color:rgba(245,240,235,.5);line-height:1.7;max-width:260px}
.footer__contact{margin-top:1.5rem;display:flex;flex-direction:column;gap:.4rem}
.footer__contact a,.footer__contact p{font-size:.8rem;color:rgba(245,240,235,.5);transition:color var(--t-fast)}
.footer__contact a:hover{color:var(--gold)}
.footer__col-title{font-family:var(--font-hl);font-size:.75rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--gold);margin-bottom:1rem}
.footer__links{display:flex;flex-direction:column;gap:.5rem}
.footer__link{font-size:.8rem;color:rgba(245,240,235,.5);transition:color var(--t-fast)}
.footer__link:hover{color:var(--off-white)}
.footer__bottom{border-top:1px solid rgba(255,255,255,.06);padding-top:2rem;display:flex;justify-content:space-between;align-items:center;flex-wrap:gap;gap:1rem;font-size:.75rem;color:rgba(245,240,235,.35);flex-wrap:wrap}
.footer__bottom a{color:rgba(245,240,235,.35);transition:color var(--t-fast)}
.footer__bottom a:hover{color:var(--stone)}
.footer__legal{display:flex;gap:1.5rem;flex-wrap:wrap}

/* ---- CART PANEL ---- */
.cart-overlay{position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:calc(var(--z-cart) - 1);opacity:0;visibility:hidden;transition:all .35s var(--ease);backdrop-filter:blur(4px)}
.cart-overlay.open{opacity:1;visibility:visible}
.cart-panel{position:fixed;top:0;right:0;bottom:0;width:400px;background:var(--color-white);border-left:0.5px solid rgba(37,51,32,.12);z-index:var(--z-cart);transform:translateX(100%);transition:transform .4s var(--ease);display:flex;flex-direction:column;box-shadow:-20px 0 60px rgba(0,0,0,.15)}
.cart-panel.open{transform:translateX(0)}
.cart-panel__header{display:flex;justify-content:space-between;align-items:center;padding:1.5rem 1.8rem;border-bottom:1px solid rgba(37,51,32,.1)}
.cart-panel__title{font-family:var(--font-hl);font-size:1rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--color-text-dark)}
.cart-close{width:36px;height:36px;display:flex;align-items:center;justify-content:center;color:rgba(37,51,32,.45);transition:color var(--t-fast);font-size:1.2rem}
.cart-close:hover{color:var(--color-text-dark)}
.cart-items{flex:1;overflow-y:auto;padding:1.5rem 1.8rem;display:flex;flex-direction:column;gap:1rem}
.cart-item{display:flex;gap:1rem;align-items:flex-start;padding:1rem;background:var(--color-surface);border:0.5px solid rgba(37,51,32,.1);border-radius:var(--radius)}
.cart-item__swatch{width:52px;height:52px;border-radius:4px;object-fit:cover;flex-shrink:0}
.cart-item__info{flex:1}
.cart-item__name{font-family:var(--font-hl);font-size:.85rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--color-text-dark)}
.cart-item__spec{font-size:.72rem;color:var(--color-text-mid);margin-top:.2rem}
.cart-item__price{font-family:var(--font-hl);font-size:1rem;font-weight:800;color:var(--color-gold);margin-top:.3rem}
.cart-item__remove{color:rgba(37,51,32,.35);font-size:1rem;transition:color var(--t-fast);flex-shrink:0;line-height:1}
.cart-item__remove:hover{color:#ff6b6b}
.cart-empty{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1rem;color:rgba(37,51,32,.35);text-align:center;padding:2rem}
.cart-empty svg{width:48px;height:48px;stroke:currentColor;fill:none;stroke-width:1.2}
.cart-empty p{font-size:.875rem;line-height:1.6}
.cart-panel__footer{padding:1.5rem 1.8rem;border-top:0.5px solid rgba(37,51,32,.1)}
.cart-total-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:.5rem}
.cart-total-label{font-size:.8rem;color:rgba(37,51,32,.5);text-transform:uppercase;letter-spacing:.08em;font-weight:500}
.cart-total-value{font-family:var(--font-hl);font-size:1.5rem;font-weight:900;color:var(--color-gold)}
.cart-shipping{font-size:.72rem;color:rgba(37,51,32,.4);margin-bottom:1.2rem;text-align:center}
.cart-checkout-btn{width:100%;background:var(--color-gold);color:var(--color-text-dark);font-family:var(--font-hl);font-size:1rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;padding:1.1rem;border-radius:var(--radius);transition:all var(--t-fast)}
.cart-checkout-btn:hover{background:var(--color-gold-hover);transform:translateY(-1px)}
.cart-checkout-btn:disabled{background:rgba(37,51,32,.08);color:rgba(37,51,32,.3);cursor:not-allowed;transform:none}

/* ---- ADD TO CART BUTTON STATES ---- */
.btn-add-cart{transition:all .3s var(--ease)}
.btn-add-cart.added{background:#38a169!important;color:var(--white)!important}
.btn-add-cart.in-cart{background:rgba(255,255,255,.1)!important;color:rgba(245,240,235,.6)!important;border:1px solid rgba(255,255,255,.15)!important;cursor:default}

/* ---- CONTACT FLOAT (unused) ---- */
.wa-float{position:fixed;bottom:2rem;right:2rem;width:56px;height:56px;background:#25D366;border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 20px rgba(37,211,102,.4);z-index:calc(var(--z-nav) - 1);transition:all var(--t-base);animation:waPulse 3s ease-in-out infinite}
.wa-float:hover{transform:scale(1.1);box-shadow:0 8px 30px rgba(37,211,102,.6);animation:none}
.wa-float svg{width:28px;height:28px;fill:white}

/* ---- INNER PAGE — COLLECTION ---- */
.product-hero{position:relative;min-height:70vh;display:flex;align-items:flex-end;overflow:hidden}
.product-hero__gallery{position:absolute;inset:0}
.product-hero__gallery img{width:100%;height:100%;object-fit:cover}
.product-hero__overlay{position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.85) 0%,rgba(0,0,0,.25) 60%,transparent 100%)}
.product-hero__content{position:relative;z-index:2;color:var(--white);padding:3rem clamp(1.5rem,4vw,4rem);width:100%}
.variant-thumbs{display:flex;gap:.75rem;flex-wrap:wrap;margin-top:1.5rem}
.variant-thumb{width:80px;cursor:pointer;border:2px solid transparent;border-radius:var(--radius);overflow:hidden;transition:all var(--t-fast)}
.variant-thumb:hover,.variant-thumb.active{border-color:var(--gold)}
.variant-thumb img{width:100%;aspect-ratio:1;object-fit:cover}
.variant-thumb p{font-size:.55rem;font-weight:600;letter-spacing:.05em;text-transform:uppercase;text-align:center;padding:.3rem .2rem;background:rgba(0,0,0,.6);color:rgba(255,255,255,.8)}
.product-info-grid{display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:start}
.product-icon-strip{display:grid;grid-template-columns:repeat(6,1fr);gap:1rem;margin:2rem 0;padding:2rem;background:rgba(255,255,255,.04);border-radius:var(--radius);border:1px solid rgba(200,184,154,.12)}
.pis-item{display:flex;flex-direction:column;align-items:center;text-align:center;gap:.4rem}
.pis-icon{width:36px;height:36px;color:var(--gold)}
.pis-icon svg{width:100%;height:100%;stroke:currentColor;fill:none;stroke-width:1.5}
.pis-label{font-size:.6rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:rgba(245,240,235,.55);line-height:1.3}

/* ---- CHECKOUT PAGE ---- */
.checkout-layout{display:grid;grid-template-columns:1fr 380px;gap:3rem;align-items:start}
.checkout-form{background:var(--white);border-radius:calc(var(--radius)*2);padding:2.5rem;box-shadow:0 8px 40px rgba(0,0,0,.08)}
.checkout-form__title{font-family:var(--font-hl);font-size:1.4rem;font-weight:800;text-transform:uppercase;color:var(--charcoal);margin-bottom:2rem}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem}
.form-grid--full{grid-column:1/-1}
.form-field{display:flex;flex-direction:column;gap:.4rem}
.form-label{font-family:var(--font-hl);font-size:.7rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:rgba(26,26,26,.5)}
.form-input{border:1.5px solid rgba(26,26,26,.15);border-radius:var(--radius);padding:.85rem 1rem;font-size:.95rem;color:var(--charcoal);transition:border-color var(--t-fast);background:var(--white)}
.form-input:focus{outline:none;border-color:var(--gold)}
.order-summary{background:var(--charcoal);border-radius:calc(var(--radius)*2);padding:2rem;position:sticky;top:calc(var(--nav-h) + 1rem)}
.order-summary__title{font-family:var(--font-hl);font-size:1rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--off-white);margin-bottom:1.5rem}
.payment-methods{display:flex;flex-direction:column;gap:.75rem;margin-top:1.5rem}
.payment-method{display:flex;align-items:center;gap:.75rem;padding:.75rem 1rem;border:1.5px solid rgba(26,26,26,.12);border-radius:var(--radius);cursor:pointer;transition:border-color var(--t-fast)}
.payment-method.selected{border-color:var(--gold);background:rgba(201,168,76,.04)}
.payment-method input{accent-color:var(--gold)}
.payment-method label{cursor:pointer;font-size:.875rem;font-weight:500}
.terms-row{display:flex;align-items:flex-start;gap:.75rem;margin-top:1.5rem;font-size:.8rem;color:rgba(26,26,26,.6)}
.terms-row input{width:18px;height:18px;accent-color:var(--gold);flex-shrink:0;margin-top:.1rem}

/* ---- ANIMATIONS ---- */
@keyframes heroFadeUp{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}
@keyframes fadeInUp{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}
@keyframes scrollBounce{0%,100%{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(8px)}}
@keyframes waPulse{0%,100%{box-shadow:0 4px 20px rgba(37,211,102,.4)}50%{box-shadow:0 4px 30px rgba(37,211,102,.7),0 0 0 8px rgba(37,211,102,.1)}}
@keyframes badgeBounce{0%,100%{transform:scale(1)}40%{transform:scale(1.4)}70%{transform:scale(.9)}}
@keyframes countUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}

.animate-on-scroll{opacity:0;transform:translateY(28px);transition:opacity .55s ease-out,transform .55s ease-out}
.animate-on-scroll.visible{opacity:1;transform:translateY(0)}
.animate-fade{opacity:0;transition:opacity .7s ease-out}
.animate-fade.visible{opacity:1}

/* ---- ANATOMY STATIC ---- */
.anatomy-static{background:var(--color-base);padding:var(--space-section) 0}
.anatomy-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin:60px 0}
.anatomy-card{background:var(--color-white);border:0.5px solid rgba(37,51,32,.1);border-radius:12px;padding:28px 24px;transition:border-color .2s ease}
.anatomy-card:hover{border-color:var(--color-gold)}
.anatomy-num{display:block;font-family:var(--font-hl);font-size:11px;font-weight:600;letter-spacing:.15em;color:var(--color-gold);margin-bottom:12px}
.anatomy-card h3{font-family:var(--font-hl);font-size:1.2rem;font-weight:700;color:var(--color-text-dark);margin-bottom:8px;text-transform:uppercase}
.anatomy-card p{font-size:.9rem;color:var(--color-text-mid);line-height:1.6}
.anatomy-image{text-align:center;margin-top:20px}
.anatomy-image img{max-width:100%;height:auto;border-radius:8px}
@media(max-width:768px){.anatomy-grid{grid-template-columns:1fr}}

/* ---- WHY VETTONIA STATIC ---- */
.why-vettonia{background:var(--color-dark-section);padding:var(--space-section) 0}
.why-headline{font-family:var(--font-hl);font-size:clamp(2.5rem,5vw,4rem);font-weight:700;color:var(--color-white);margin-bottom:60px;max-width:700px;line-height:1.1;text-transform:uppercase}
.why-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:40px 48px}
.why-item{display:flex;gap:16px;align-items:flex-start}
.why-icon{flex-shrink:0;width:48px;height:48px;background:rgba(201,168,76,.15);border-radius:10px;display:flex;align-items:center;justify-content:center;color:var(--color-gold)}
.why-item h3{font-family:var(--font-hl);font-size:1.1rem;font-weight:700;color:var(--color-white);margin-bottom:4px;text-transform:uppercase}
.why-item p{font-size:.9rem;color:rgba(246,243,238,.65);line-height:1.6}
@media(max-width:1024px){.why-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.why-grid{grid-template-columns:1fr;gap:28px}}

/* ---- MEDIA QUERIES ---- */
@media(max-width:1200px){
  .benefits__grid{grid-template-columns:repeat(3,1fr)}
  .underlay-grid{grid-template-columns:repeat(2,1fr)}
  .footer__grid{grid-template-columns:1fr 1fr 1fr}
  .footer__grid>:first-child{grid-column:1/-1}
  .collections-grid{grid-template-columns:repeat(2,1fr)}
  .certs-grid{grid-template-columns:repeat(4,1fr)}
  .product-icon-strip{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:900px){
  .comparator-selects{flex-direction:column}
  .testimonials-grid{grid-template-columns:1fr}
  .skirting-colors-grid{grid-template-columns:repeat(4,1fr)}
  .install-grid{grid-template-columns:1fr;gap:2.5rem}
  .skirting-benefits{grid-template-columns:1fr 1fr}
  .blog-grid{grid-template-columns:1fr}
  .checkout-layout{grid-template-columns:1fr}
  .product-info-grid{grid-template-columns:1fr}
  .calc-results{grid-template-columns:1fr 1fr}
}
@media(max-width:768px){
  :root{--nav-h:64px}
  .nav__links,.nav__sample-pill,.nav__wa{display:none}
  .nav__hamburger{display:flex}
  .benefits__grid{grid-template-columns:repeat(2,1fr)}
  .collections-grid{grid-template-columns:1fr}
  .quiz-options{grid-template-columns:1fr}
  .calc-form{grid-template-columns:1fr}
  .calc-results{grid-template-columns:1fr}
  .certs-grid{grid-template-columns:repeat(2,1fr)}
  .skirting-colors-grid{grid-template-columns:repeat(3,1fr)}
  .skirting-benefits{grid-template-columns:1fr}
  .cart-panel{width:100%;max-width:100%}
  .comp-table{font-size:.75rem}
  .footer__grid{grid-template-columns:1fr 1fr}
  .footer__grid>:first-child{grid-column:1/-1}
  .anatomy-sticky{flex-direction:column}
  .anatomy-text-side{width:100%;padding:1.5rem}
  .anatomy-image-side{height:50vh}
  .delivery-strip{gap:1.5rem}
  .trust-strip{flex-direction:column}
  .trust-item{border-right:none;border-bottom:1px solid rgba(201,168,76,.15)}
  .kinetic-sticky{padding:0 1.5rem}
  .form-grid{grid-template-columns:1fr}
  .underlay-grid{grid-template-columns:1fr}
  .product-icon-strip{grid-template-columns:repeat(3,1fr)}
}
/* ---- DISTRIBUIDORES ---- */
.dist-search-bar{display:flex;gap:12px;margin-bottom:24px;align-items:center}
.dist-search-input-wrap{flex:1;position:relative}
.dist-filters{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:8px}
.dist-filter{padding:8px 18px;border-radius:24px;border:1px solid rgba(37,51,32,.15);background:var(--color-white);color:var(--color-text-mid);font-size:13px;font-weight:500;cursor:pointer;font-family:inherit;transition:all .2s ease}
.dist-filter:hover{border-color:var(--color-gold);color:var(--color-text-dark)}
.dist-filter.active{background:var(--color-text-dark);border-color:var(--color-text-dark);color:var(--color-base)}
.dist-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.dist-card{background:var(--color-white);border:.5px solid rgba(37,51,32,.1);border-radius:14px;padding:28px 24px;display:flex;flex-direction:column;gap:20px;transition:border-color .2s ease,transform .2s ease}
.dist-card:hover{border-color:rgba(37,51,32,.25);transform:translateY(-2px)}
.dist-card--hq{border:1.5px solid rgba(201,168,76,.4);background:linear-gradient(135deg,rgba(201,168,76,.04) 0%,var(--color-white) 100%)}
.dist-card__name{font-family:var(--font-hl);font-size:1.2rem;font-weight:700;color:var(--color-text-dark);margin:6px 0 6px;line-height:1.2}
.dist-card__address{font-size:.9rem;color:var(--color-text-mid);line-height:1.6}
.dist-card__contacts{display:flex;flex-direction:column;gap:10px}
.dist-card__contact-item{display:flex;align-items:center;gap:10px;font-size:.9rem;color:var(--color-text-mid);text-decoration:none;transition:color .2s ease}
.dist-card__contact-item:hover{color:var(--color-text-dark)}
.dist-card__contact-item svg{flex-shrink:0;color:var(--color-gold)}
.dist-card__maps-btn{display:flex;align-items:center;justify-content:center;gap:8px;padding:10px 0;background:var(--color-surface);border-radius:8px;color:var(--color-text-dark);text-decoration:none;font-size:13px;font-weight:500;transition:background .2s ease;margin-top:auto}
.dist-card__maps-btn:hover{background:rgba(201,168,76,.15);color:var(--color-text-dark)}
.dist-card__maps-btn svg{color:var(--color-gold)}
@media(max-width:1024px){.dist-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.dist-grid{grid-template-columns:1fr}.dist-search-bar{flex-direction:column}.dist-search-bar button{width:100%}}

/* ---- SCROLL PROGRESS BAR ---- */
.scroll-progress{position:fixed;top:0;left:0;height:3px;background:var(--color-gold);z-index:9999;width:0%;transition:width .1s linear;pointer-events:none}

/* ---- STATS SECTION ---- */
.stats-section{background:var(--color-surface);padding:60px 0;border-top:.5px solid rgba(37,51,32,.08);border-bottom:.5px solid rgba(37,51,32,.08)}
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr)}
.stat-item{text-align:center;padding:32px 20px;border-right:.5px solid rgba(37,51,32,.1)}
.stat-item:last-child{border-right:none}
.stat-num{display:block;font-family:var(--font-hl);font-size:clamp(2.8rem,5vw,4rem);font-weight:700;color:var(--color-gold);line-height:1;margin-bottom:10px}
.stat-label{display:block;font-size:.85rem;color:var(--color-text-mid);line-height:1.4;max-width:140px;margin:0 auto}
@media(max-width:768px){.stats-grid{grid-template-columns:repeat(2,1fr);gap:1px;background:rgba(37,51,32,.08)}.stat-item{background:var(--color-surface)}}

/* ---- COLLECTION CARDS (fullbleed + logo) ---- */
.collection-card{display:flex;flex-direction:column;position:relative;border-radius:14px;overflow:hidden;text-decoration:none;background:var(--color-dark-section);border:1px solid rgba(255,255,255,0.08);box-shadow:0 10px 30px rgba(0,0,0,0.25);transition:transform 0.4s var(--ease), border-color 0.4s var(--ease), box-shadow 0.4s var(--ease);}
.collection-card:hover{transform:translateY(-8px);border-color:rgba(201,168,76,0.3);box-shadow:0 20px 50px rgba(0,0,0,0.45);}
.collection-card__image{position:relative;width:100%;aspect-ratio:4/3;overflow:hidden;flex-shrink:0}
.collection-card__image img{width:100%;height:100%;object-fit:cover;transition:transform 0.8s cubic-bezier(.25,.1,.25,1)}
.collection-card:hover .collection-card__image img{transform:scale(1.05)}
.collection-card__overlay{display:none}
.collection-card:hover .collection-card__overlay{display:none}
.collection-card__content{position:relative;padding:24px;flex:1;display:flex;flex-direction:column;background:var(--color-dark-section);}
.collection-card__logo{height:50px;display:flex;align-items:center;margin-bottom:14px}
.col-logo-img{height:100%;max-height:44px;width:auto;object-fit:contain;filter:brightness(0) invert(1);max-width:160px}
.collection-card__sub{font-size:.85rem;color:rgba(246,243,238,.85);margin-bottom:12px;line-height:1.4;min-height:2.8em;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.collection-card__specs{font-size:.75rem;color:rgba(246,243,238,.45);margin-bottom:14px;letter-spacing:.02em;font-weight:500}
.collection-card__swatches{display:flex;gap:5px;margin-bottom:14px}
.collection-card__swatch{width:14px;height:14px;border-radius:50%;border:1.5px solid rgba(255,255,255,.35);flex-shrink:0}
.collection-card__cta{display:inline-flex;align-items:center;gap:5px;font-size:.82rem;font-weight:600;color:var(--color-gold);opacity:0.25;transform:translateY(0);transition:opacity .25s ease,transform .25s ease;margin-top:auto;padding-top:10px}
.collection-card:hover .collection-card__cta{opacity:1;transform:translateY(0)}

/* ---- COLLECTION HERO (with logo) ---- */
.col-hero--visual{position:relative;height:70vh;min-height:500px;display:flex;align-items:center;justify-content:center;text-align:center;overflow:hidden}
.col-hero__bg{
  object-position: center;position:absolute;inset:0}
.col-hero__bg img{width:100%;height:100%;object-fit:cover}
.col-hero__bg-overlay{position:absolute;inset:0;background:linear-gradient(to bottom,rgba(0,0,0,.3) 0%,rgba(0,0,0,.7) 100%)}
.col-hero__center{position:relative;z-index:1;padding:0 20px}
.col-hero__logo-wrap{margin-bottom:24px}
.col-hero__tagline{font-size:clamp(1rem,2vw,1.25rem);color:rgba(246,243,238,.8);margin-bottom:16px;font-style:italic}
.col-hero__specs-row{display:flex;align-items:center;justify-content:center;gap:12px;font-size:.85rem;color:rgba(246,243,238,.55);margin-bottom:32px;flex-wrap:wrap}

/* ---- BREADCRUMB ---- */
.breadcrumb{background:var(--color-base);padding:14px 0;border-bottom:.5px solid rgba(37,51,32,.08)}
.breadcrumb__list{display:flex;align-items:center;gap:8px;list-style:none;flex-wrap:wrap}
.breadcrumb__link{font-size:13px;color:var(--color-text-mid);text-decoration:none;transition:color .2s}
.breadcrumb__link:hover{color:var(--color-text-dark)}
.breadcrumb__sep{font-size:13px;color:var(--color-gold);font-weight:600}
.breadcrumb__item--current{font-size:13px;font-weight:600;color:var(--color-text-dark)}

/* ---- STICKY BAR ---- */
.sticky-bar{position:fixed;top:0;left:0;right:0;z-index:900;background:rgba(246,243,238,.95);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:.5px solid rgba(37,51,32,.12);padding:10px 0;transform:translateY(-100%);transition:transform .3s cubic-bezier(.25,.1,.25,1);pointer-events:none}
.sticky-bar.visible{transform:translateY(0);pointer-events:auto}
.sticky-bar__inner{display:flex;align-items:center;justify-content:space-between;gap:16px}
.sticky-bar__info{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.sticky-bar__sep{color:var(--color-stone)}
.sticky-bar__tagline{font-size:.82rem;color:var(--color-text-mid)}
.sticky-bar__btn{padding:9px 18px;background:var(--color-gold);color:var(--color-text-dark);border:none;border-radius:6px;font-size:13px;font-weight:600;cursor:pointer;white-space:nowrap;font-family:inherit;flex-shrink:0;transition:background .2s ease}
.sticky-bar__btn:hover{background:var(--color-gold-hover)}
@media(max-width:640px){.sticky-bar__tagline{display:none}.sticky-bar__btn{padding:8px 14px;font-size:12px}}

/* ---- DROPDOWN WITH LOGOS ---- */
.dropdown__item--logo{display:flex;align-items:center;gap:.75rem;padding:.6rem 1rem}
.dropdown__logo-box{background:rgba(26,46,24,.6);width:48px;height:34px;border-radius:5px;display:flex;align-items:center;justify-content:center;flex-shrink:0;padding:5px}
.dropdown__logo-box img{max-width:100%;max-height:100%;object-fit:contain;filter:brightness(0) invert(1)}
.dropdown__item-info{display:flex;flex-direction:column;gap:2px}
.dropdown__item-title{font-family:var(--font-hl);font-size:.8rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:rgba(245,240,235,.9)}
.dropdown__item-sub{font-size:.6rem;color:rgba(245,240,235,.45);letter-spacing:.04em}

/* ---- HOVER REFINEMENTS ---- */
.btn-primary{transition:background .2s ease,transform .15s ease}
.btn-primary:hover{background:var(--color-gold-hover);transform:translateY(-1px)}
.btn-primary:active{transform:translateY(0) scale(.98)}
.anatomy-card,.dist-card{transition:border-color .2s ease,transform .2s ease}
.anatomy-card:hover{transform:translateY(-2px)}
.thumb:not(.active){opacity:.72}
.thumb:not(.active):hover{opacity:1;transform:scale(1.06)}

/* ---- COLLECTION HERO VISUAL ---- */
.col-hero--visual{position:relative;min-height:65vh;display:flex;align-items:flex-end;overflow:hidden;padding:0}
.col-hero--visual .col-hero__bg{
  object-position: center;position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 40%}
.col-hero--visual .col-hero__overlay{position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,0.85) 0%,rgba(0,0,0,0.3) 40%,rgba(0,0,0,0.2) 100%)}
.col-hero--visual .container{position:relative;z-index:0;padding-top:calc(var(--nav-h) + 5rem);padding-bottom:5rem}
@media(max-width:768px){.col-hero--visual{min-height:55vh}}

/* ---- TOOLS TABS ---- */
.tools-section{background:var(--color-dark-section);padding:var(--space-section) 0}
.tools-tabs{display:flex;gap:4px;justify-content:center;margin-bottom:3rem;background:rgba(255,255,255,.06);border-radius:8px;padding:4px;max-width:420px;margin-left:auto;margin-right:auto}
.tools-tab{flex:1;padding:12px 24px;border:none;background:transparent;color:rgba(246,243,238,.5);font-family:var(--font-hl);font-size:.85rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;cursor:pointer;border-radius:6px;transition:all .25s var(--ease)}
.tools-tab:hover{color:rgba(246,243,238,.8)}
.tools-tab.active{background:var(--color-gold);color:var(--color-text-dark)}
.tools-panel{display:none}
.tools-panel.active{display:block;animation:fadeInUp .4s var(--ease) forwards}
@keyframes fadeInUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}

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

/* ---- FAQ ---- */
.faq-grid{display:flex;flex-direction:column;gap:3rem}
.faq-category__label{font-family:var(--font-hl);font-size:var(--fs-xs);font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--color-gold);margin-bottom:1rem}
.faq-item{border-bottom:.5px solid rgba(37,51,32,.1)}
.faq-item:first-of-type{border-top:.5px solid rgba(37,51,32,.1)}
.faq-question{width:100%;display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1.1rem 0;background:none;border:none;cursor:pointer;text-align:left;font-family:var(--font-body);font-size:1rem;font-weight:500;color:var(--color-text-dark);line-height:1.45;transition:color .2s}
.faq-question:hover{color:var(--color-text-mid)}
.faq-icon{width:18px;height:18px;flex-shrink:0;stroke:var(--color-gold);stroke-width:2;fill:none;transition:transform .3s var(--ease)}
.faq-item.open .faq-icon{transform:rotate(180deg)}
.faq-answer{overflow:hidden;max-height:0;transition:max-height .4s cubic-bezier(0.25,0.1,0.25,1)}
.faq-answer p{padding:.25rem 0 1.25rem;font-size:.925rem;line-height:1.75;color:var(--color-text-mid)}
.faq-answer a{color:var(--color-gold);text-decoration:underline;text-underline-offset:3px}
.faq-answer a:hover{color:var(--color-gold-hover)}
.faq-inline-btn{background:none;border:none;padding:0;font-family:inherit;font-size:inherit;color:var(--color-gold);text-decoration:underline;text-underline-offset:3px;cursor:pointer;transition:color .2s}
.faq-inline-btn:hover{color:var(--color-gold-hover)}
.faq-cta{text-align:center;padding-top:3rem;margin-top:1rem;border-top:.5px solid rgba(37,51,32,.08)}
.faq-cta p{font-size:.95rem;color:var(--color-text-mid);margin-bottom:1.25rem}
@media(min-width:860px){.faq-grid{display:grid;grid-template-columns:1fr 1fr;gap:2rem 4rem}.faq-category:last-child{grid-column:1 / -1;max-width:660px}}

/* ---- CART DRAWER ---- */
.cart-overlay {
  position: fixed;
  inset: 0;
  background: rgba(26, 46, 24, 0.6);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 8000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s var(--ease);
}
.cart-overlay.open {
  opacity: 1;
  pointer-events: auto;
}

.cart-panel {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  max-width: 440px;
  background: var(--color-base);
  z-index: 8001;
  transform: translateX(100%);
  transition: transform 0.4s cubic-bezier(0.25, 1, 0.25, 1);
  display: flex;
  flex-direction: column;
  box-shadow: -10px 0 40px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}
.cart-panel.open {
  transform: translateX(0);
}
.cart-panel__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.5rem;
  border-bottom: 1px solid rgba(37, 51, 32, 0.1);
  background: var(--color-white);
}
.cart-panel__title {
  font-family: var(--font-hl);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color-text-dark);
}
.cart-close {
  background: none;
  border: none;
  font-size: 1.25rem;
  color: var(--color-text-mid);
  cursor: pointer;
  padding: 0.5rem;
  line-height: 1;
  transition: transform 0.2s ease, color 0.2s ease;
}
.cart-close:hover {
  color: var(--color-text-dark);
  transform: scale(1.1);
}

.cart-items {
  flex: 1;
  overflow-y: auto;
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.cart-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  text-align: center;
  color: rgba(37, 51, 32, 0.5);
  gap: 1rem;
}
.cart-empty svg {
  width: 48px;
  height: 48px;
  stroke: rgba(37, 51, 32, 0.3);
  stroke-width: 1.5;
  fill: none;
}
.cart-item {
  display: flex;
  align-items: center;
  gap: 1rem;
  background: var(--color-white);
  padding: 1rem;
  border-radius: 12px;
  border: 1px solid rgba(37, 51, 32, 0.08);
  position: relative;
}
.cart-item__swatch {
  width: 64px;
  height: 64px;
  border-radius: 8px;
  object-fit: cover;
  flex-shrink: 0;
  border: 1px solid rgba(0, 0, 0, 0.05);
}
.cart-item__info {
  flex: 1;
}
.cart-item__name {
  font-family: var(--font-hl);
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--color-text-dark);
  margin-bottom: 0.25rem;
  line-height: 1.2;
}
.cart-item__spec {
  font-size: 0.75rem;
  color: var(--color-text-mid);
  margin-bottom: 0.4rem;
}
.cart-item__price {
  font-family: var(--font-hl);
  font-weight: 700;
  color: var(--color-gold);
}
.cart-item__remove {
  background: rgba(0, 0, 0, 0.03);
  border: none;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  color: var(--color-text-mid);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  position: absolute;
  top: 1rem;
  right: 1rem;
}
.cart-item__remove:hover {
  background: #ff4d4f;
  color: white;
}

.cart-panel__footer {
  padding: 1.5rem;
  background: var(--color-white);
  border-top: 1px solid rgba(37, 51, 32, 0.1);
  box-shadow: 0 -5px 20px rgba(0,0,0,0.02);
}
.cart-total-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.75rem;
}
.cart-total-label {
  font-size: 0.95rem;
  color: var(--color-text-mid);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
}
.cart-total-value {
  font-family: var(--font-hl);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-text-dark);
}
.cart-shipping {
  font-size: 0.75rem;
  color: #38a169;
  text-align: right;
  margin-bottom: 1.25rem;
  font-weight: 500;
}
.cart-checkout-btn {
  width: 100%;
  padding: 1rem;
  background: var(--color-gold);
  color: var(--color-text-dark);
  border: none;
  border-radius: 8px;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
}
.cart-checkout-btn:hover:not(:disabled) {
  background: var(--color-gold-hover);
  transform: translateY(-2px);
}
.cart-checkout-btn:disabled {
  background: rgba(37, 51, 32, 0.1);
  color: rgba(37, 51, 32, 0.4);
  cursor: not-allowed;
}

/* Nav Badge Animations */
.nav__badge.bounce {
  animation: badgeBounce 0.4s cubic-bezier(0.18, 0.89, 0.32, 1.28);
}
@keyframes badgeBounce {
  0%   { transform: scale(1) translate(50%, -50%); }
  50%  { transform: scale(1.4) translate(35%, -35%); background: var(--color-gold-hover); }
  100% { transform: scale(1) translate(50%, -50%); }
}

/* Button Added State */
.btn-add-cart.added {
  background: #38a169;
  border-color: #38a169;
  color: white;
}
.btn-add-cart.in-cart {
  background: var(--color-surface);
  color: var(--color-text-mid);
  border-color: rgba(37, 51, 32, 0.15);
  pointer-events: all; 
}

/* ---- INTERACTIVE EXPLODED PLANK ---- */
.exploded-section {
  background: #050505;
  padding: 5rem 1.5rem;
  color: var(--color-white);
  overflow: hidden;
}
.exploded-header {
  text-align: center;
  margin-bottom: 3rem;
}
.exploded-container {
  position: relative;
  max-width: 900px;
  margin: 0 auto;
}
.exploded-images {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 4; /* Ensures consistent container height based on width */
  max-height: 800px; /* Sensible limit */
  cursor: crosshair;
}
.exploded-images img {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain; /* Centers both images without distortion */
  object-position: center center;
  transition: opacity 0.5s ease-in-out;
}
.exploded-images img.exploded-default {
  z-index: 2;
  background-color: #050505; /* CRITICAL: Hides the underlying exploded view completely due to aspect-ratio mismatch */
}
.exploded-images img.exploded-hover {
  z-index: 1;
}

/* Interaction States */
@media (min-width: 768px) {
  .exploded-images:hover img.exploded-default {
    opacity: 0; /* Smoothly uncovers the exploded view */
    pointer-events: none;
  }
}

@media (max-width: 1024px) {
  /* On tablets and mobile, always show the exploded view directly to avoid touch hover issues */
  .exploded-images img.exploded-default {
    display: none !important;
  }
  .exploded-section {
    padding: 3rem 1rem;
  }
}

/* Hotspots / Tooltips */
.layer-hotspot {
  position: absolute;
  left: 20%;
  width: 60%; /* Covers the center area of the plank */
  z-index: 10;
  cursor: pointer;
}

/* Approximate vertical distribution of layers over the PNG */
/* Adjusted slightly to match the isometric lines of the image */
.hotspot-1 { top: 15%; height: 12%; }
.hotspot-2 { top: 30%; height: 12%; }
.hotspot-3 { top: 45%; height: 20%; }
.hotspot-4 { top: 68%; height: 8%; }
.hotspot-5 { top: 78%; height: 12%; }

/* ---- STONE LOSETA SPECIFIC HOTSPOTS ---- */
.exploded-loseta {
  background: var(--color-base);
  color: var(--color-text-dark);
}
.exploded-loseta .text-label { color: var(--color-text-mid) !important; }
.exploded-loseta .text-h2 { color: var(--color-text-dark) !important; }
.exploded-loseta .exploded-header p { color: var(--color-text-mid) !important; }

.exploded-loseta .exploded-images {
  aspect-ratio: auto;
  max-width: 1100px;
  cursor: default;
}
.hotspot-txt {
  position: absolute;
  right: 2%;
  width: 45%;
  cursor: help;
  z-index: 10;
  background: transparent;
}
.hotspot-txt-1 { top: 40%; height: 10%; }
.hotspot-txt-2 { top: 51%; height: 10%; }
.hotspot-txt-3 { top: 62%; height: 10%; }
.hotspot-txt-4 { top: 73%; height: 11%; }
.hotspot-txt-5 { top: 85%; height: 8%; }

.hotspot-txt .hotspot-tooltip {
  left: auto;
  right: 100%;
  transform: translateY(-50%) translateX(-20px);
}
.layer-hotspot.hotspot-txt:hover .hotspot-tooltip {
  transform: translateY(-50%) translateX(-10px);
}
.hotspot-txt .hotspot-tooltip::before {
  right: auto;
  left: 100%;
  border-color: transparent transparent transparent rgba(26,26,26,0.95);
}

@media (max-width: 768px) {
  .hotspot-txt { width: 50%; right: 0; }
  .hotspot-txt .hotspot-tooltip {
    right: 0;
    transform: translateY(20px);
    bottom: 100%;
    top: auto;
  }
  .layer-hotspot.hotspot-txt.active .hotspot-tooltip {
    transform: translateY(-5px);
  }
  .hotspot-txt .hotspot-tooltip::before {
    bottom: -15px;
    top: auto;
    left: 85%;
    transform: none;
    border-color: rgba(26,26,26,0.95) transparent transparent transparent;
    border-width: 8px 8px 0 8px; /* pointing down */
  }
}

/* Visual dot indicator so user knows where to interact */
.hotspot-dot {
  position: absolute;
  right: 15%; /* Position it centrally on the right */
  top: 50%;
  width: 28px;
  height: 28px;
  background: var(--color-gold);
  border-radius: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 0 0 rgba(201,168,76, 0.4);
  animation: pulseGold 2.5s infinite;
  z-index: 11;
  opacity: 0; /* Hidden initially on desktop... */
  transition: opacity 0.4s ease, background 0.3s;
}
.hotspot-dot::after {
  content: '+';
  color: #1a1a1a;
  font-weight: 900;
  font-size: 18px;
  line-height:1;
}
@keyframes pulseGold {
  0% { box-shadow: 0 0 0 0 rgba(201,168,76, 0.7); }
  70% { box-shadow: 0 0 0 15px rgba(201,168,76, 0); }
  100% { box-shadow: 0 0 0 0 rgba(201,168,76, 0); }
}

@media (min-width: 1025px) {
  .exploded-images:hover .hotspot-dot {
    opacity: 1; /* Show dots when container hovered */
  }
}
@media (max-width: 1024px) {
  .hotspot-dot {
    opacity: 1; /* Always show dots on mobile */
    right: -5%; /* Move slightly outwards so thumbs don't cover the image */
  }
}


.hotspot-tooltip {
  position: absolute;
  left: 100%; /* Relative to .layer-hotspot */
  top: 50%;
  transform: translateY(-50%) translateX(20px); /* Push further right from the dot */
  width: 250px;
  background: rgba(26,26,26,0.95);
  border: 1px solid rgba(201,168,76,0.3);
  padding: 1rem;
  border-radius: var(--radius);
  color: #fff;
  font-size: 0.82rem;
  line-height: 1.4;
  opacity: 0;
  pointer-events: none;
  transition: all 0.3s ease;
  z-index: 10;
  box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}

.hotspot-tooltip::before {
  content: '';
  position: absolute;
  top: 50%;
  right: 100%;
  transform: translateY(-50%);
  border-width: 8px;
  border-style: solid;
  border-color: transparent rgba(26,26,26,0.95) transparent transparent;
}

.hotspot-tooltip strong {
  display: block;
  font-family: var(--font-hl);
  color: var(--color-gold);
  margin-bottom: 0.3rem;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

@media (min-width: 768px) {
  .layer-hotspot:hover .hotspot-tooltip {
    opacity: 1;
    transform: translateY(-50%) translateX(10px);
  }
  .layer-hotspot:hover .hotspot-dot {
    background: #fff;
  }
}

/* Mobile Tooltips adjustments */
@media (max-width: 767px) {
  .hotspot-tooltip {
    left: 50%;
    top: auto;
    bottom: 100%;
    transform: translateX(-50%) translateY(10px);
    width: 280px;
  }
  .hotspot-tooltip::before {
    top: 100%;
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    border-color: rgba(26,26,26,0.95) transparent transparent transparent;
  }
  .layer-hotspot.active .hotspot-tooltip {
    opacity: 1;
    transform: translateX(-50%) translateY(-10px);
  }
  .layer-hotspot.active .hotspot-dot {
    background: #fff;
  }
}

/* ---- LAMAS ESTANDARIZACION ---- */
.exploded-lamas {
  background: var(--color-base);
  color: var(--color-text-dark);
}
.exploded-lamas .text-label { color: var(--color-text-mid) !important; }
.exploded-lamas .text-h2 { color: var(--color-text-dark) !important; }
.exploded-lamas .exploded-header p { color: var(--color-text-mid) !important; }

.exploded-lamas .exploded-images {
  aspect-ratio: auto;
  max-width: 1100px;
  cursor: default;
}

.hotspot-txt-lama-1 { top: 41%; height: 9%; width: 50%; right: 0; }
.hotspot-txt-lama-2 { top: 51%; height: 7%; width: 50%; right: 0; }
.hotspot-txt-lama-3 { top: 59%; height: 8%; width: 50%; right: 0; }
.hotspot-txt-lama-4 { top: 69%; height: 10%; width: 50%; right: 0; }
.hotspot-txt-lama-5 { top: 80%; height: 7%; width: 50%; right: 0; }
.hotspot-txt-lama-6 { top: 88%; height: 8%; width: 50%; right: 0; }



#comparator-panel {
  background: var(--color-dark-section);
  border-radius: 24px;
  padding: 3rem;
  box-shadow: 0 40px 100px rgba(0,0,0,0.6);
  border: 1px solid rgba(255,255,255,0.08);
}

/* ============================================
   CERT-ITEM — Sección Calidad Certificada
   ============================================ */
.cert-item {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 16px;
  padding: 2rem 1.5rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  transition: background 0.3s ease, transform 0.3s ease, border-color 0.3s ease;
}
.cert-item:hover {
  background: rgba(255,255,255,0.09);
  border-color: var(--color-gold);
  transform: translateY(-4px);
}
.cert-item__badge {
  font-family: var(--font-hl);
  font-size: 1.6rem;
  font-weight: 900;
  color: var(--color-gold);
  line-height: 1;
  letter-spacing: 0.02em;
}
.cert-item__label {
  font-size: 0.8rem;
  font-weight: 500;
  color: rgba(255,255,255,0.6);
  line-height: 1.4;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* .certs-grid — 4 columnas × 2 filas simétricas */
.certs-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
}

/* Responsive: tablet → 2 columnas */
@media (max-width: 1024px) {
  .certs-grid,
  #certificaciones > .container > div[style*="grid-template-columns:repeat(4"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}
/* Responsive: mobile → 2 columnas pequeñas */
@media (max-width: 600px) {
  .certs-grid,
  #certificaciones > .container > div[style*="grid-template-columns:repeat(4"] {
    grid-template-columns: 1fr 1fr !important;
    gap: 1rem !important;
  }
  .cert-item__badge { font-size: 1.2rem; }
}


/* Fixes for Calculator Inputs */
.calc-input {
  color: #1a1a1a !important;
}

/* Fixes for Add to Cart Button States */
.btn-add-cart.in-cart,
.btn-add-cart.added {
  background: #4CAF50 !important;
  color: #ffffff !important;
  border-color: #4CAF50 !important;
}