/* =========================================================
   THE NEW NEW — consolidated stylesheet
   Structure: TOKENS ? LAYOUT (no typography) ? TYPOGRAPHY
   ========================================================= */

/* ---------- TOKENS / DESIGN VARIABLES ---------- */
:root{
  /* Brand colors */
  --tnn-teal:var(--color-primary,#005366);
  --tnn-lime:var(--color-secondary-hover,#b9f554);
  --tnn-purple:var(--color-primary-hover,#b251bc);
  --tnn-text:var(--color-tertiary-hover,#1d1d1d);
  --tnn-teal-rgb:0,83,102;
  --tnn-blue:#7dd2e5;                 /* CTA hovers */
  --tnn-blue-rgb:125,210,229;         /* for overlays */

  /* Blog image overlay */
  --blog-overlay-alpha:.28;
  --blog-overlay-teal:rgba(var(--tnn-teal-rgb),var(--blog-overlay-alpha));
  --blog-overlay-blue:rgba(var(--tnn-blue-rgb),var(--blog-overlay-alpha));

  /* Hero placement & paddings */
  --hero-left-desktop:8vw;
  --hero-left-tablet:6vw;
  --hero-w-desktop:560px;
  --hero-w-tablet:420px;
  --hero-pad-y:18px; --hero-bg-alpha:.8; --hero-cta-bottom-gap:18px;

  /* Other blocks */
  --mini-inset:24px; --mid-banner-h:316px; --footer-banner-h:316px;

  /* Typography */
  --tnn-regular-size:14px;
  --tnn-regular-weight:400;

  /* Navigation font sizes */
  --nav-l1-size:18px; /* main menu + sign-in */
  --nav-l2-size:16px; /* submenu */

  /* Horizontal paddings */
  --hero-pad-x:50px;          /* hero carousel text block (L/R) */
  --mini-banner-pad-x:40px;   /* 3 top banners (L/R) */
  --mini-banner-pad-y:18px;   /* 3 top banners (T/B) */
}

/* =========================================================
   LAYOUT / COLOR ONLY (no typography)
   ========================================================= */

/* Header & nav background + link color */
#header .header-bottom,
:where(.navigation,.main-navigation,.menu){background:var(--tnn-teal)!important}

:where(.navigation,.main-navigation,.menu) a,
#header .navigation-buttons a{color:#fff!important;background:transparent!important}

/* Header/nav hover colors */
:where(.navigation,.main-navigation,.menu) :is(a:hover,a:focus,li:hover>a,li:focus-within>a),
#header .navigation-buttons :is(a:hover,a:focus){color:var(--tnn-lime)!important}

/* Submenus (incl. Blog) */
:where(.navigation,.main-navigation,.menu) :is(.submenu,.dropdown-menu,.level-2,.menu-level-2){background:var(--tnn-teal)!important}
:where(.navigation,.main-navigation,.menu) :is(.menu-level-2,.level-2) a{color:#fff!important;background:transparent!important}
:where(.navigation,.main-navigation,.menu) :is(.menu-level-2,.level-2) a:is(:hover,:focus){color:var(--tnn-lime)!important}

/* Header icons inherit currentColor */
#header .navigation-buttons :is(i[class^="icon-"],i[class*=" icon-"],span[class^="icon-"],span[class*=" icon-"]){color:inherit!important}
#header .navigation-buttons svg{fill:currentColor!important;stroke:currentColor!important}

/* Category page H1 – visually hidden (kept for SEO/AT) */
h1.category-title{
  position:absolute!important;clip-path:inset(100%)!important;clip:rect(0 0 0 0)!important;
  width:1px!important;height:1px!important;margin:-1px!important;padding:0!important;border:0!important;overflow:hidden!important;white-space:nowrap!important;
}

/* ? NEW: tiny white gap above the category hero (mobile only) */
@media (max-width:767px){
  body:has(h1.category-title) #content::before{
    content:""; display:block; height:10px; /* tweak 6–12px to taste */
    background:#fff;                        /* matches page background */
  }
}

/* CTA buttons — hover in TNN blue (site-wide) */
.btn.add-to-cart-button:hover,
.btn.btn-cart:hover,
button.add-to-cart-button:hover,                 /* product cards & detail */
#continue-order-button.btn-conversion:hover,     /* mini-cart popup + cart page (same id) */
.next-step-forward.btn-conversion:hover,         /* cart page */
.cart-widget-button .btn-conversion:hover{       /* popup safety net */
  background-color:var(--tnn-blue)!important;
  border-color:var(--tnn-blue)!important;
}

/* HERO container & panel */
.carousel-wrapper .carousel-inner .item>a{position:relative!important;display:block!important;overflow:hidden!important}
.carousel-wrapper .extended-banner-texts::before,
.carousel-wrapper .extended-banner-texts::after{content:none!important}
.carousel-wrapper .extended-banner-texts{
  background:rgba(255,255,255,var(--hero-bg-alpha))!important;color:var(--tnn-text)!important;
  display:flex!important;flex-direction:column!important;
  padding:var(--hero-pad-y) var(--hero-pad-x) var(--hero-cta-bottom-gap)!important;
  border-radius:12px 12px 0 0!important;box-shadow:0 10px 30px rgba(0,0,0,.15)!important;
  z-index:2!important;height:auto!important;max-height:none!important;min-height:0!important;width:auto!important;box-sizing:border-box!important;
}
.carousel-wrapper .extended-banner-title{color:var(--tnn-teal)!important;margin:0 0 6px!important}
.carousel-wrapper .extended-banner-text{margin:0 0 14px!important}

/* HERO links (color only; text decoration handled in TYPOGRAPHY) */
.carousel-wrapper .extended-banner-texts :is(.btn,a.btn,.extended-banner-link,.extended-banner-link a){
  background:transparent!important;border:0!important;box-shadow:none!important;padding:0!important;border-radius:0!important;display:inline!important;
  color:var(--tnn-teal)!important;
}
.carousel-wrapper .extended-banner-texts :is(.btn,a.btn,.extended-banner-link,.extended-banner-link a):hover{color:var(--tnn-purple)!important}

/* HERO placement (fixed width on desktop/tablet) */
@media (min-width:1200px){
  .carousel-wrapper .extended-banner-texts{
    position:absolute!important;left:var(--hero-left-desktop)!important;bottom:0!important;
    width:var(--hero-w-desktop)!important;min-height:35%!important;                    /* CHANGED earlier: height ? min-height */
    padding:calc(var(--hero-pad-y)*1.2) var(--hero-pad-x) calc(var(--hero-cta-bottom-gap)*5)!important;
  }
}
@media (min-width:768px) and (max-width:1199px){
  .carousel-wrapper .extended-banner-texts{
    position:absolute!important;left:var(--hero-left-tablet)!important;bottom:0!important;top:auto!important;
    width:var(--hero-w-tablet)!important;
  }
}
@media (max-width:767px){
  .carousel-wrapper .extended-banner-texts{position:static!important;max-width:100%!important;margin:12px 16px 0!important;text-align:left!important}
}

/* Three banners under hero */
.next-to-carousel-banners .banner-wrapper>a{position:relative!important;display:block!important;overflow:hidden!important}
.next-to-carousel-banners .banner-wrapper>a>img{display:block!important;width:100%!important;height:auto!important}
.next-to-carousel-banners .banner-wrapper>a>.extended-banner-texts{
  position:absolute!important;inset:auto var(--mini-inset) 0 var(--mini-inset)!important;width:auto!important;
  padding:var(--mini-banner-pad-y) var(--mini-banner-pad-x)!important;border-radius:12px 12px 0 0!important;
  background:rgba(0,83,102,var(--hero-bg-alpha))!important;color:#fff!important;box-shadow:none!important;pointer-events:none!important;
}
.next-to-carousel-banners .banner-wrapper>a>.extended-banner-texts *{color:#fff!important}
.next-to-carousel-banners .banner-wrapper>a>.extended-banner-texts :is(a,.extended-banner-link){pointer-events:auto}
.next-to-carousel-banners .banner-wrapper>a>.extended-banner-texts :is(a,.extended-banner-link):hover{color:var(--tnn-lime)!important}

/* === Category promo banner — paint container like homepage banners === */
.category-banners .banner-category{background:var(--tnn-blue)!important}
.category-banners .banner-category .extended-banner-texts{background:transparent!important;color:var(--tnn-teal)!important}
.category-banners .banner-category .extended-banner-texts *{color:inherit!important}
.category-banners .banner-category .extended-banner-texts :is(a,.extended-banner-link){color:var(--tnn-teal)!important}
.category-banners .banner-category .extended-banner-texts :is(a,.extended-banner-link):hover{color:var(--tnn-purple)!important}

/* Benefits strip background */
.full-width.benefit-banners-full-width{background:var(--tnn-lime)!important}
/* Category & Product detail = white */
body:has(h1.category-title) .full-width.benefit-banners-full-width,
body:has(.product-detail) .full-width.benefit-banners-full-width,
body:has(.p-detail) .full-width.benefit-banners-full-width{background:#fff!important}

@media (max-width:767px){.full-width.benefit-banners-full-width{display:none!important}}
@media (min-width:1200px){.full-width.benefit-banners-full-width .benefitBanner{padding:0!important}}
.full-width.benefit-banners-full-width .benefitBanner{padding:28px 0}

/* Middle & footer banners (height + bg only) */
.full-width.homepage-banners-full-width.middle-banners .banner-wrapper{min-height:var(--mid-banner-h);background:var(--tnn-purple)!important}
.full-width.homepage-banners-full-width.footer-banners .banner-wrapper{min-height:var(--footer-banner-h);background:var(--tnn-teal)!important}

/* Middle banner color inheritance */
.full-width.homepage-banners-full-width.middle-banners .extended-banner-texts{color:#fff!important}
.full-width.homepage-banners-full-width.middle-banners .extended-banner-texts *{color:inherit!important}
.full-width.homepage-banners-full-width.middle-banners .extended-banner-texts :is(a,.extended-banner-link):hover{color:var(--tnn-lime)!important}

/* Footer banner color inheritance */
.full-width.homepage-banners-full-width.footer-banners .extended-banner-texts{background:transparent!important;color:#fff!important}
.full-width.homepage-banners-full-width.footer-banners .extended-banner-texts *{color:inherit!important}
.full-width.homepage-banners-full-width.footer-banners .extended-banner-texts :is(a,.extended-banner-link):hover{color:var(--tnn-lime)!important}

/* Footer base */
#footer{background:var(--tnn-teal);color:#fff}
#footer a{color:#fff}
#footer h4{color:var(--color-tertiary)!important}

/* Homepage blog image overlay */
.homepage-blog-wrapper .news-item .image{position:relative;overflow:hidden}
.homepage-blog-wrapper .news-item .image::after{
  content:"";position:absolute;inset:0;z-index:1;
  background:var(--blog-overlay-teal);
  transition:background .25s ease;
  pointer-events:none; /* keep the link clickable */
}
.homepage-blog-wrapper .news-item a:hover .image::after,
.homepage-blog-wrapper .news-item .image:hover::after{background:var(--blog-overlay-blue)}

/* =========================================================
   TYPOGRAPHY (copy-specific)
   ========================================================= */

/* Headings stay emphasized */
:where(h1,h2,h3,h4,h5,h6,.extended-banner-title){font-weight:600!important}

/* Site-wide body copy — 14/400 */
:where(main,#content,.content,.page,.homepage) :where(p,.text,.perex,.extended-banner-text,.note,.small,ul>li,ol>li),
:where(.extended-banner-texts) :where(p,.extended-banner-text,.text,.perex),
.carousel-wrapper .extended-banner-text,
.product :is(.name,.short-description,.prices,.flags,.availability,.parameter,.description,.price-standard,.price-final),
#footer :is(p,li,a,.text,.info,.copyright,span,small),
:is(input,select,textarea,button,label),
:is(table,table td,table th),
.sidebar :is(p,li,a,label,input,select,span,small),
:where(.product-detail,.p-detail,.detail) :is(.p-finalization,.buy-box,.buy-actions,.p-meta,.product-info,.product-parameters,.p-shortcuts,.p-icons,.p-additional,.availability,.product-code,.producer,.sku,.ean,.tax,.vat,.price-additional) :is(span,small,dd,dt,label),
:where(.product-detail,.p-detail,.detail) :is(.tabs,.p-tabs,.detail-tabs,.discussion,.reviews,.rating,.comments,.review-list,.comment,.review) :is(p,li,small,span),
#description :is(p,li,small,span,caption,td,th,.note,.footnote){
  font-size:var(--tnn-regular-size)!important;
  font-weight:var(--tnn-regular-weight)!important;
}

/* Banner links: underline the link text (color handled in LAYOUT) */
.extended-banner-texts :is(.btn,a.btn,.extended-banner-link,.extended-banner-link a){text-decoration:underline!important}

/* Navigation hover emphasis (weight only) */
:where(.navigation,.main-navigation,.menu) :is(a:hover,a:focus,li:hover>a,li:focus-within>a){font-weight:600!important}
:where(.navigation,.main-navigation,.menu) a:hover *{font-weight:600!important}

/* Navigation sizes */
#navigation .menu-level-1 > li > a,
#navigation .navigationActions > li > a{font-size:var(--nav-l1-size)!important}
#navigation .menu-level-2 > li > a,
#navigation .menu-level-2 > li > div > a,
#navigation .menu-level-2 a[data-testid="headerMenuItem"]{font-size:var(--nav-l2-size)!important;font-weight:400!important}
#navigation .menu-level-2 a span{font-size:inherit!important;font-weight:inherit!important}

/* HERO readable line-heights */
.carousel-wrapper .extended-banner-title{line-height:1.1!important}
.carousel-wrapper .extended-banner-text{line-height:1.35!important}

/* Normalize WYSIWYG bullets inside descriptions */
#description li::before{font-size:1em!important}

/* Product detail — keep purchase/meta areas at 14/400 */
.p-detail-inner :is(.p-data-wrapper .brand-wrapper,.p-data-wrapper .brand-wrapper a,.p-data-wrapper .stars-wrapper .stars-label,
                    .p-short-description p,.p-price-wrapper .price-measure,
                    .detail-parameters,.detail-parameters *,a.shipping-options,
                    .p-to-cart-block .quantity label,.p-to-cart-block .quantity .amount,
                    .social-buttons-wrapper .link-icons .link-icon span,.social-buttons-wrapper .close-wrapper a){
  font-size:var(--tnn-regular-size)!important;
  font-weight:var(--tnn-regular-weight)!important;
}
/* Product detail — mobile mini header (brand + rating) */
.p-detail-inner .p-image-wrapper .p-detail-inner-header-mobile :is(.brand-wrapper,.brand-wrapper a,.stars-wrapper .stars-label){
  font-size:var(--tnn-regular-size)!important;
  font-weight:var(--tnn-regular-weight)!important;
}
/* Product detail — do not change big price by default */
.p-detail-inner .p-price-wrapper .price-final,
.p-detail-inner .p-price-wrapper .price-final *{font-size:inherit!important;font-weight:inherit!important}
/* Product detail — main price override 28 / 700 */
.p-detail-inner .p-price-wrapper .price-final,
.p-detail-inner .p-price-wrapper .price-final .price-final-holder{
  font-size:28px!important;font-weight:700!important;line-height:1.2!important;
}

/* Benefit strip copy */
.benefitBanner__title{font-size:18px!important;font-weight:600!important}
.benefitBanner__data{font-size:14px!important;font-weight:400!important;line-height:1.45!important}

/* Product cards (listing/teasers) */
.p-in .name [data-micro="name"]{font-weight:600!important}
.p-in .prices :is(.price-final,.price-final strong){
  color:var(--tnn-teal,var(--color-primary,#005366))!important;
  font-weight:700!important;
}
.p-in .prices :is(.price-standard,.price-standard :is(strong,span)),
.p-in .price.price-standard{font-weight:600!important}

/* Homepage group titles */
.homepage-group-title{font-size:28px!important;font-weight:600!important}

/* THE NEW NEW — Product detail description (scoped to .tnn-desc) */
.tnn-desc{
  --teal:#0e5164; --teal-2:#13657c; --ink:#1d1d1d; --muted:#5c7076;
  --soft:#f7fafb; --line:#e6eef1; --gap:clamp(16px,3vw,28px); --radius:10px;
  font-size:clamp(15px,1.05vw,16.5px); line-height:1.65; color:var(--ink);
}
.tnn-desc *{box-sizing:border-box;}
.tnn-desc :is(h2,h3){color:var(--teal);font-weight:700;line-height:1.25;margin:1.25em 0 .5em;}
.tnn-desc h2{font-size:clamp(20px,2.2vw,26px);}
.tnn-desc h3{font-size:clamp(18px,1.7vw,20px);}
.tnn-desc p{margin:.6em 0;}
.tnn-desc .muted{color:var(--muted);}

/* Section spacing */
.tnn-section{margin:var(--gap) 0;}
.tnn-hr{height:1px;background:var(--line);margin:calc(var(--gap) * .9) 0;border:0;}

/* Two-column blocks that collapse on mobile */
.tnn-cols{display:grid;gap:var(--gap);align-items:start;}
.tnn-cols.cols-2{grid-template-columns:1.05fr .95fr;}
@media (max-width:860px){.tnn-cols.cols-2{grid-template-columns:1fr;}}

/* Images */
.tnn-figure{margin:0;}
.tnn-figure img{display:block;width:100%;height:auto;border-radius:var(--radius);}
.tnn-figure figcaption{font-size:.9em;color:var(--muted);margin-top:.5em;}

/* Bullets & callouts */
.tnn-desc ul{padding-left:1.2em;margin:.4em 0 .8em;}
.tnn-desc li{margin:.35em 0;}
.tnn-callout{background:var(--soft);border:1px solid var(--line);border-radius:var(--radius);
  padding:14px 16px;color:var(--ink);}
.tnn-callout .lead{font-weight:700;color:var(--teal);}

/* Key/value list (for size, color, availability) */
.tnn-kv{display:grid;grid-template-columns:140px 1fr;gap:8px 14px;margin:.6em 0 0;}
.tnn-kv dt{color:var(--muted);font-weight:600;}
.tnn-kv dd{margin:0;}

/* Tables */
.tnn-table{width:100%;border-collapse:collapse;margin:.6em 0 1em;}
.tnn-table th{text-align:center;background:var(--soft);color:#0a3d4b;font-weight:700;}
.tnn-table :is(th,td){padding:10px 12px;border-bottom:1px solid var(--line);text-align:center;}
.tnn-table tr:last-child :is(th,td){border-bottom:0;}
.tnn-table caption{text-align:left;color:var(--muted);font-size:.9em;margin:.4em 0 .6em;}

/* Links inside description */
.tnn-desc a{color:var(--teal);text-decoration:underline;}
.tnn-desc a:hover{color:var(--teal-2);}

/* Full-width image breaker */
.tnn-breaker{margin:calc(var(--gap) * 1.2) 0;}
.tnn-breaker img{width:100%;height:auto;display:block;border-radius:var(--radius);}