/* trendnovae responsive v5 — final layout correction layer
   UI only: no business logic/data changes. */
:root{
  --tn5-max:1280px;
  --tn5-deep:#176a67;
  --tn5-deep2:#105451;
  --tn5-ink:#123d3b;
  --tn5-soft:#eef6f4;
  --tn5-soft2:#f8fbfa;
  --tn5-line:#d5e5e1;
  --tn5-muted:#6f817e;
}
html,body{max-width:100%;overflow-x:hidden}
*,*::before,*::after{box-sizing:border-box}
img{max-width:100%}

/* ---------- HEADER: one clean row on mobile, never overlap ---------- */
html body[data-page] #main-header{
  position:sticky!important;top:0!important;z-index:80!important;
  width:100%!important;background:#fff!important;border-bottom:1px solid #edf2f0!important;
  box-shadow:0 6px 20px rgba(18,61,59,.035)!important;
}
html body[data-page] #main-header .base-header-top{width:100%!important;background:#fff!important}
html body[data-page] #main-header .base-header-top-inner{
  width:min(calc(100% - 32px),var(--tn5-max))!important;max-width:var(--tn5-max)!important;
  min-height:76px!important;margin:0 auto!important;padding:0!important;
  display:grid!important;grid-template-columns:auto minmax(260px,1fr) auto!important;
  align-items:center!important;gap:34px!important;flex-wrap:nowrap!important;
}
html body[data-page] #main-header .base-brand{
  display:inline-flex!important;align-items:center!important;gap:10px!important;min-width:0!important;
  white-space:nowrap!important;text-decoration:none!important;flex:0 0 auto!important;
}
html body[data-page] #main-header .base-brand-mark{flex:0 0 auto!important}
html body[data-page] #main-header .base-brand-name{font-size:22px!important;line-height:1!important;color:var(--tn5-deep)!important;white-space:nowrap!important}
html body[data-page] #main-header .base-header-nav{
  display:flex!important;width:auto!important;min-width:0!important;height:auto!important;min-height:0!important;
  align-items:center!important;justify-content:center!important;gap:34px!important;padding:0!important;margin:0!important;overflow:visible!important;
}
html body[data-page] #main-header .base-header-nav a{
  flex:0 0 auto!important;padding:8px 0!important;font:700 12px/1.2 Manrope,Arial,sans-serif!important;
  color:var(--tn5-ink)!important;white-space:nowrap!important;
}
html body[data-page] #main-header .base-header-tools{
  display:flex!important;align-items:center!important;justify-content:flex-end!important;gap:6px!important;min-width:0!important;flex-wrap:nowrap!important;
}
html body[data-page] #main-header .base-desktop-search{width:300px!important;min-width:220px!important;height:44px!important;flex:0 1 300px!important}
html body[data-page] #main-header .base-icon-btn{flex:0 0 38px!important;width:38px!important;height:38px!important;min-width:38px!important;min-height:38px!important;padding:0!important;border:0!important;box-shadow:none!important}
html body[data-page] #main-header .base-mobile-search-trigger,
html body[data-page] #main-header .base-menu-btn{display:none!important}

/* drawers/search always above sticky header */
html body #drawer{z-index:220!important}
html body #drawer .base-drawer-backdrop{z-index:220!important}
html body #drawer .base-drawer-panel{z-index:221!important}
html body #mobile-search-bar{z-index:230!important}

@media(max-width:900px){
  html body[data-page] #main-header .base-header-top-inner{
    grid-template-columns:auto 1fr auto!important;gap:14px!important;min-height:68px!important;
  }
  html body[data-page] #main-header .base-header-nav{display:none!important}
  html body[data-page] #main-header .base-desktop-search{width:min(38vw,280px)!important;min-width:170px!important}
  html body[data-page] #main-header .base-menu-btn{display:inline-flex!important}
}
@media(max-width:640px){
  html body[data-page] #main-header .base-header-top-inner{
    width:calc(100% - 24px)!important;min-height:64px!important;
    display:flex!important;align-items:center!important;justify-content:space-between!important;gap:10px!important;
  }
  html body[data-page] #main-header .base-brand{max-width:150px!important;gap:7px!important;overflow:hidden!important}
  html body[data-page] #main-header .base-brand-name{font-size:18px!important;max-width:112px!important;overflow:hidden!important;text-overflow:ellipsis!important}
  html body[data-page] #main-header .base-brand-mark{width:30px!important;height:30px!important;font-size:11px!important}
  html body[data-page] #main-header .base-header-nav,
  html body[data-page] #main-header .base-desktop-search{display:none!important}
  html body[data-page] #main-header .base-header-tools{margin-left:auto!important;gap:2px!important;flex:0 0 auto!important}
  html body[data-page] #main-header .base-mobile-search-trigger,
  html body[data-page] #main-header .base-menu-btn{display:inline-flex!important}
  html body[data-page] #main-header .base-icon-btn{flex-basis:34px!important;width:34px!important;height:34px!important;min-width:34px!important;min-height:34px!important}
  html body[data-page] #main-header .base-count{transform:scale(.88)!important;transform-origin:top right!important}
}
@media(max-width:420px){
  html body[data-page] #main-header .base-brand{max-width:132px!important}
  html body[data-page] #main-header .base-brand-name{font-size:17px!important;max-width:98px!important}
  html body[data-page] #main-header .base-header-tools{gap:0!important}
  html body[data-page] #main-header .base-icon-btn{flex-basis:32px!important;width:32px!important;height:32px!important;min-width:32px!important;min-height:32px!important}
  /* account is still reachable from drawer/login flows; hide only the standalone icon on very narrow phones */
  html body[data-page] #main-header #btn-account{display:none!important}
}

/* ---------- SHOP INTRO: coherent two-column hero ---------- */
html body[data-page="shop"] .tn-shop-intro{padding:28px 0 18px!important;background:linear-gradient(180deg,#f7faf9 0,#f2f7f5 100%)!important}
html body[data-page="shop"] .tn-shop-intro>.container,
html body[data-page="shop"] .tn-shop-workspace>.container{
  width:min(calc(100% - 40px),var(--tn5-max))!important;max-width:var(--tn5-max)!important;margin-inline:auto!important;padding-inline:0!important;
}
html body[data-page="shop"] .tn-shop-intro-grid{
  display:grid!important;grid-template-columns:minmax(0,1.08fr) minmax(420px,.92fr)!important;gap:16px!important;align-items:stretch!important;
}
html body[data-page="shop"] .tn-shop-intro-copy{
  min-width:0!important;padding:34px 36px!important;border-radius:24px!important;background:var(--tn5-deep)!important;color:#fff!important;
}
html body[data-page="shop"] .tn-shop-intro-copy .tn-eyebrow{color:#c8e5e1!important}
html body[data-page="shop"] .tn-shop-intro-copy h1{margin:8px 0 14px!important;max-width:650px!important;font-size:clamp(34px,4vw,58px)!important;line-height:1!important;color:#fff!important}
html body[data-page="shop"] .tn-shop-intro-copy p{max-width:670px!important;margin:0!important;font-size:14px!important;line-height:1.7!important;color:#d9ebe8!important}
html body[data-page="shop"] .tn-shop-intro-facts{
  display:grid!important;grid-template-columns:1fr!important;gap:10px!important;min-width:0!important;
}
html body[data-page="shop"] .tn-shop-intro-facts article{
  display:flex!important;flex-direction:column!important;justify-content:center!important;min-width:0!important;min-height:94px!important;
  padding:18px 22px!important;border:1px solid var(--tn5-line)!important;border-radius:18px!important;background:#fff!important;
}
html body[data-page="shop"] .tn-shop-intro-facts small{margin-bottom:6px!important;color:var(--tn5-deep)!important;font:800 9px/1.2 Manrope,Arial,sans-serif!important;letter-spacing:.14em!important;text-transform:uppercase!important}
html body[data-page="shop"] .tn-shop-intro-facts strong{color:var(--tn5-ink)!important;font:750 15px/1.4 Manrope,Arial,sans-serif!important;overflow-wrap:anywhere!important}

/* ---------- SHOP FILTER: compact dashboard, no giant strips ---------- */
html body[data-page="shop"] .tn-shop-workspace{padding:18px 0 72px!important;background:#f3f7f6!important}
html body[data-page="shop"] .tn-filter-deck{overflow:visible!important;border-radius:22px!important;background:#fff!important}
html body[data-page="shop"] .tn-filter-title{padding:22px 24px 18px!important}
html body[data-page="shop"] .tn-filter-body{
  display:grid!important;grid-template-columns:1.15fr .85fr 1.15fr 1.15fr!important;gap:12px!important;padding:16px!important;background:#fff!important;
}
html body[data-page="shop"] .tn-filter-block,
html body[data-page="shop"] .ferovixe-filter-group{
  min-width:0!important;height:196px!important;max-height:196px!important;padding:16px!important;
  border:1px solid var(--tn5-line)!important;border-radius:16px!important;background:var(--tn5-soft2)!important;overflow:hidden!important;
}
html body[data-page="shop"] .tn-filter-block:nth-of-type(even){background:#fff!important}
html body[data-page="shop"] .tn-filter-block h3{margin:0 0 10px!important;writing-mode:horizontal-tb!important;white-space:normal!important}
html body[data-page="shop"] .tn-filter-chips,
html body[data-page="shop"] .tn-option-grid,
html body[data-page="shop"] .ferovixe-check-list,
html body[data-page="shop"] .ferovixe-size-grid{
  display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:7px!important;
  width:100%!important;height:auto!important;max-height:132px!important;padding:0 4px 0 0!important;margin:0!important;
  overflow-y:auto!important;overflow-x:hidden!important;align-content:start!important;
}
html body[data-page="shop"] .tn-filter-chips label,
html body[data-page="shop"] .tn-option-grid label,
html body[data-page="shop"] .ferovixe-check-list label,
html body[data-page="shop"] .ferovixe-size-grid label{
  display:block!important;width:100%!important;min-width:0!important;max-width:100%!important;margin:0!important;padding:0!important;overflow:hidden!important;
}
html body[data-page="shop"] .tn-filter-chips label span,
html body[data-page="shop"] .tn-option-grid label span,
html body[data-page="shop"] .ferovixe-check-list label span,
html body[data-page="shop"] .ferovixe-size-grid label span{
  display:flex!important;width:100%!important;min-width:0!important;min-height:34px!important;padding:7px 9px!important;
  align-items:center!important;justify-content:flex-start!important;text-align:left!important;
  white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;word-break:normal!important;overflow-wrap:normal!important;
}
html body[data-page="shop"] .tn-select select{height:42px!important}
html body[data-page="shop"] .tn-filter-apply{
  grid-column:1/-1!important;width:auto!important;justify-self:start!important;min-width:180px!important;min-height:42px!important;
  margin:0 16px 16px!important;border-radius:12px!important;padding:0 22px!important;
}

html body[data-page="shop"] .tn-results-toolbar{margin-top:24px!important}
html body[data-page="shop"] #shop-grid .base-shop-now{background:var(--tn5-deep)!important;border-color:var(--tn5-deep)!important;color:#fff!important}
html body[data-page="shop"] #shop-grid .base-shop-now span{color:#fff!important;text-shadow:none!important}

@media(max-width:1050px){
  html body[data-page="shop"] .tn-shop-intro-grid{grid-template-columns:1fr!important}
  html body[data-page="shop"] .tn-shop-intro-facts{grid-template-columns:repeat(3,minmax(0,1fr))!important}
  html body[data-page="shop"] .tn-filter-body{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}
@media(max-width:700px){
  html body[data-page="shop"] .tn-shop-intro{padding-top:14px!important}
  html body[data-page="shop"] .tn-shop-intro>.container,
  html body[data-page="shop"] .tn-shop-workspace>.container{width:calc(100% - 24px)!important}
  html body[data-page="shop"] .tn-shop-intro-copy{padding:24px 20px!important;border-radius:18px!important}
  html body[data-page="shop"] .tn-shop-intro-copy h1{font-size:34px!important}
  html body[data-page="shop"] .tn-shop-intro-facts{grid-template-columns:1fr!important}
  html body[data-page="shop"] .tn-shop-intro-facts article{min-height:74px!important;padding:14px 16px!important}
  html body[data-page="shop"] .tn-filter-title{display:block!important;padding:18px!important}
  html body[data-page="shop"] .tn-filter-title p{margin-top:8px!important;text-align:left!important}
  html body[data-page="shop"] .tn-filter-body{grid-template-columns:1fr!important;padding:12px!important;gap:10px!important}
  html body[data-page="shop"] .tn-filter-block,
  html body[data-page="shop"] .ferovixe-filter-group{height:auto!important;max-height:none!important;padding:14px!important}
  html body[data-page="shop"] .tn-filter-chips,
  html body[data-page="shop"] .tn-option-grid,
  html body[data-page="shop"] .ferovixe-check-list,
  html body[data-page="shop"] .ferovixe-size-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;max-height:124px!important}
  html body[data-page="shop"] .tn-filter-apply{width:calc(100% - 24px)!important;margin:0 12px 12px!important;justify-self:stretch!important}
}

/* ---------- PDP: stable price header + gallery/purchase proportions ---------- */
html body[data-page="pdp"] .tn-pdp-page>.container{width:min(calc(100% - 40px),var(--tn5-max))!important;max-width:var(--tn5-max)!important;padding-inline:0!important}
html body[data-page="pdp"] .tn-pdp-identity{
  grid-template-columns:minmax(0,1fr) minmax(280px,390px)!important;align-items:center!important;gap:24px!important;padding:24px 26px!important;
}
html body[data-page="pdp"] .tn-pdp-identity-main{min-width:0!important}
html body[data-page="pdp"] .tn-pdp-identity h1{font-size:clamp(28px,3vw,44px)!important;line-height:1.06!important;overflow-wrap:break-word!important;word-break:normal!important}
html body[data-page="pdp"] .tn-pdp-price{min-width:0!important;width:100%!important;max-width:390px!important;justify-self:end!important;text-align:right!important}
html body[data-page="pdp"] .tn-pdp-price .price-container{display:flex!important;flex-direction:column!important;align-items:flex-end!important;gap:8px!important;min-width:0!important;width:100%!important}
html body[data-page="pdp"] .tn-pdp-price .pdp-price-row-primary,
html body[data-page="pdp"] .tn-pdp-price .pdp-price-row-secondary{display:flex!important;align-items:center!important;justify-content:flex-end!important;gap:8px!important;flex-wrap:wrap!important;width:100%!important;min-width:0!important}
html body[data-page="pdp"] .tn-pdp-price .current-price{font-size:clamp(28px,2.5vw,38px)!important;line-height:1!important;white-space:nowrap!important}
html body[data-page="pdp"] .tn-pdp-price .original-price{font-size:18px!important;white-space:nowrap!important}
html body[data-page="pdp"] .tn-pdp-price .discount-badge{display:inline-flex!important;align-items:center!important;min-height:36px!important;padding:7px 12px!important;border-radius:10px!important;font-size:14px!important;white-space:nowrap!important}
html body[data-page="pdp"] .tn-pdp-price .save-amount{font-size:14px!important;white-space:nowrap!important}

html body[data-page="pdp"] .tn-pdp-showcase{grid-template-columns:minmax(0,1.7fr) minmax(320px,.72fr)!important;gap:18px!important;align-items:start!important}
html body[data-page="pdp"] .tn-pdp-gallery{grid-template-columns:72px minmax(0,1fr)!important;padding:16px!important}
html body[data-page="pdp"] .tn-pdp-gallery-main{aspect-ratio:4/3!important;max-height:620px!important;padding:18px!important}
html body[data-page="pdp"] .tn-pdp-thumbnails{max-height:620px!important}
html body[data-page="pdp"] .tn-pdp-thumbnails>*{flex-basis:62px!important;width:62px!important;height:62px!important}
html body[data-page="pdp"] .tn-pdp-purchase{position:sticky!important;top:96px!important;width:100%!important;min-width:0!important;padding:26px!important}
html body[data-page="pdp"] .tn-pdp-stock,
html body[data-page="pdp"] .tn-pdp-quantity{min-width:0!important;width:100%!important}
html body[data-page="pdp"] .tn-pdp-stock *{max-width:100%!important}

@media(max-width:980px){
  html body[data-page="pdp"] .tn-pdp-identity{grid-template-columns:1fr!important}
  html body[data-page="pdp"] .tn-pdp-price{max-width:none!important;justify-self:start!important;text-align:left!important}
  html body[data-page="pdp"] .tn-pdp-price .price-container{align-items:flex-start!important}
  html body[data-page="pdp"] .tn-pdp-price .pdp-price-row-primary,
  html body[data-page="pdp"] .tn-pdp-price .pdp-price-row-secondary{justify-content:flex-start!important}
  html body[data-page="pdp"] .tn-pdp-showcase{grid-template-columns:1fr!important}
  html body[data-page="pdp"] .tn-pdp-purchase{position:static!important;top:auto!important}
}
@media(max-width:640px){
  html body[data-page="pdp"] .tn-pdp-page>.container{width:calc(100% - 24px)!important}
  html body[data-page="pdp"] .tn-pdp-breadcrumb{display:none!important}
  html body[data-page="pdp"] .tn-pdp-identity{padding:16px!important;border-radius:16px!important}
  html body[data-page="pdp"] .tn-pdp-identity h1{font-size:24px!important;line-height:1.12!important}
  html body[data-page="pdp"] .tn-pdp-meta{display:flex!important;flex-wrap:wrap!important;gap:7px!important}
  html body[data-page="pdp"] .tn-pdp-price .pdp-price-row-secondary{gap:6px!important}
  html body[data-page="pdp"] .tn-pdp-price .current-price{font-size:27px!important}
  html body[data-page="pdp"] .tn-pdp-price .original-price{font-size:14px!important}
  html body[data-page="pdp"] .tn-pdp-price .discount-badge{font-size:11px!important;min-height:30px!important;padding:5px 8px!important}
  html body[data-page="pdp"] .tn-pdp-price .save-amount{font-size:11px!important}
  html body[data-page="pdp"] .tn-pdp-gallery{display:flex!important;flex-direction:column!important;padding:10px!important}
  html body[data-page="pdp"] .tn-pdp-gallery-main{order:1!important;aspect-ratio:1/1!important;padding:10px!important}
  html body[data-page="pdp"] .tn-pdp-thumbnails{order:2!important;display:flex!important;flex-direction:row!important;max-height:none!important;width:100%!important;overflow-x:auto!important;overflow-y:hidden!important}
  html body[data-page="pdp"] .tn-pdp-thumbnails>*{flex:0 0 54px!important;width:54px!important;height:54px!important}
  html body[data-page="pdp"] .tn-pdp-trust{order:3!important;grid-template-columns:1fr!important}
  html body[data-page="pdp"] .tn-pdp-purchase{padding:20px 18px!important;border-radius:18px!important}
  html body[data-page="pdp"] .tn-pdp-purchase h2{font-size:28px!important;line-height:1.12!important}
}