/*
Theme Name: NT Outdoor Box
Theme URI: https://ntoutdoorbox.com
Author: NT
Author URI: https://ntoutdoorbox.com
Description: WooCommerce theme for Foshan Shunde Nantian Machinery Co., Ltd — outdoor kitchens, furniture, pergolas and BBQs. Mega menu, customisable hero carousel and homepage sections via the Customizer.
Version: 1.0.0
Requires PHP: 7.4
Requires at least: 6.0
Tested up to: 6.8
License: GNU General Public License v2 or later
Text Domain: ntoutdoorbox
*/

/* =========================================================
   Variables
   ========================================================= */
:root{
  --teal:#25988b;
  --teal-dark:#1e7c71;
  --teal-darker:#19675e;
  --lime:#d4dc33;
  --ink:#23292f;
  --ink-soft:#363636;
  --grey:#7a7a7a;
  --line:#e3e6e8;
  --light:#f6f7f8;
  --red:#e02222;
  --was:#9f3e3e;
  --orange:#e15f17;
  --maxw:1400px;
  --radius:6px;
  --radius-img:8px;
  --font:"Helvetica Neue",Helvetica,Arial,"Segoe UI",Roboto,"PingFang SC","Microsoft YaHei",sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{max-width:100%;overflow-x:hidden}
body{
  margin:0;font-family:var(--font);color:var(--ink-soft);background:#fff;
  font-size:15px;line-height:1.6;-webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;height:auto}
a{color:inherit;text-decoration:none}
ul,ol{margin:0;padding:0;list-style:none}
h1,h2,h3,h4,h5,h6{margin:0 0 .6em;color:var(--ink);font-weight:700;line-height:1.25}
p{margin:0 0 1em}
button,input,select,textarea{font-family:inherit}

.container{max-width:var(--maxw);margin:0 auto;padding:0 20px;width:100%}
.btn{
  display:inline-block;padding:12px 28px;border-radius:var(--radius);background:var(--teal);color:#fff;
  font-weight:700;font-size:14px;text-transform:uppercase;letter-spacing:.06em;border:0;cursor:pointer;transition:.2s;
}
.btn:hover{background:var(--teal-darker);color:#fff}
.btn--lime{background:var(--lime);color:var(--ink)}
.btn--lime:hover{background:#c3cb26;color:var(--ink)}
.btn--sm{padding:10px 18px;font-size:12.5px}
.sr-only{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* =========================================================
   Top bar
   ========================================================= */
.topbar{background:var(--orange);color:#fff;font-size:13px}
.topbar__inner{
  background:var(--orange);max-width:var(--maxw);margin:0 auto;padding:0 20px;min-height:38px;
  display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
}
.topbar a{color:#fff}
.topbar a:hover{color:#fff;text-decoration:underline}
.topbar__phone{display:flex;align-items:center;gap:8px;font-weight:600;flex-wrap:wrap}
.topbar__phone svg{fill:#fff;flex:none}
.topbar__links{display:flex;gap:22px;flex-wrap:wrap}
.topbar__menu{display:flex;align-items:center;gap:20px;list-style:none;margin:0;padding:0}
.topbar__menu li{margin:0;position:relative;white-space:nowrap}
.topbar__menu li + li{padding-left:20px}
.topbar__menu li + li::before{content:'';position:absolute;left:0;top:50%;transform:translateY(-50%);width:1px;height:13px;background:rgba(255,255,255,.45)}
.topbar__menu a{font-weight:600}
.topbar__social{display:flex;gap:14px;align-items:center}
.topbar__social a{display:inline-flex;align-items:center;gap:5px}
.topbar__social svg{fill:#fff;width:14px;height:14px}

/* =========================================================
   Header
   ========================================================= */
.header{background:#fff;border-bottom:1px solid var(--line);position:relative;z-index:60}
.header__inner{
  max-width:var(--maxw);margin:0 auto;padding:16px 20px;
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:24px;
}
.logo{display:flex;align-items:center;gap:10px;font-size:25px;font-weight:800;color:var(--ink);letter-spacing:-.5px;white-space:nowrap;min-width:0}
/* Uploaded logo — the height comes from the customizer (--logo-h), so a tall
   PNG can never blow the header open. Falls back to 46px. */
.logo{--logo-h:46px}
.logo img,.logo__img,.logo .custom-logo{
  display:block;max-height:var(--logo-h);width:auto;height:auto;object-fit:contain;
}
.logo__mark{background:var(--teal);color:#fff;width:44px;height:44px;border-radius:8px;flex:none;display:grid;place-items:center;font-size:20px;font-weight:900;text-align:center;line-height:1}
.logo__txt{display:flex;flex-direction:column;line-height:1.05}
.logo__name{font-size:22px;font-weight:800;letter-spacing:-.4px}
.logo__sub{font-size:10px;letter-spacing:.2em;color:var(--grey);font-weight:600;text-transform:uppercase;margin-top:2px}

.header__search{display:flex;max-width:640px;width:100%;min-width:0;justify-self:center}
.header__search input,.nt-search input{
  flex:1;min-width:0;border:2px solid var(--line);border-right:0;border-radius:var(--radius) 0 0 var(--radius);
  padding:10px 14px;font-size:14px;outline:none;background:#fff;color:var(--ink);
}
.header__search input:focus{border-color:var(--teal)}
.header__search button,.nt-search button{
  border:0;background:var(--teal-dark);color:#fff;padding:0 20px;font-weight:700;font-size:13px;letter-spacing:.04em;
  border-radius:0 var(--radius) var(--radius) 0;cursor:pointer;transition:.2s;
}
.header__search button:hover{background:var(--teal-darker)}
.nt-search{display:flex;max-width:420px;width:100%;margin:0 auto}

.header__actions{display:flex;align-items:center;gap:20px}
.hd-act{display:flex;align-items:center;gap:7px;font-size:14px;font-weight:600;color:var(--ink);transition:.2s}
.hd-act:hover{color:var(--teal)}
.hd-act svg{fill:var(--ink)}
.hd-act:hover svg{fill:var(--teal)}
.hd-cart{position:relative}
.hd-cart__count{
  position:absolute;top:-8px;left:12px;background:var(--red);color:#fff;min-width:19px;height:19px;
  border-radius:50%;display:grid;place-items:center;font-size:11px;font-weight:700;
}
.burger{display:none;background:none;border:0;cursor:pointer;padding:6px}
.burger span{display:block;width:24px;height:2.5px;background:var(--ink);margin:5px 0;border-radius:2px}

/* =========================================================
   Primary nav + mega menu
   ========================================================= */
.nav{background:var(--teal-dark);position:relative;z-index:50}
.nav__inner{max-width:var(--maxw);margin:0 auto;padding:0 20px}
.nav__list{display:flex;align-items:stretch;flex-wrap:wrap}
.nav__item{position:relative}
.nav__link{
  display:flex;align-items:center;gap:6px;padding:15px 20px;color:#fff;font-weight:600;font-size:14.5px;
  letter-spacing:.02em;transition:background .18s;cursor:pointer;
}
.nav__item:hover>.nav__link,.nav__link.is-open{background:var(--teal-darker)}
.nav__link--sale{background:var(--red)}
.nav__link--sale:hover{background:#c31c1c}
.nav__caret{width:9px;height:9px;border-right:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(45deg) translateY(-2px);transition:.2s;flex:none}
.nav__item:hover .nav__caret,.nav__link.is-open .nav__caret{transform:rotate(225deg) translateY(-2px)}

.mega{
  position:absolute;top:100%;left:0;z-index:80;background:#fff;border-top:3px solid var(--lime);
  border-radius:0 0 10px 10px;box-shadow:0 20px 48px rgba(0,0,0,.20);
  width:min(var(--mega-w,940px),calc(100vw - 32px));
  padding:22px 0 20px;display:flex;flex-wrap:wrap;align-items:stretch;
  opacity:0;visibility:hidden;transform:translate(var(--mega-dx,0px),10px);
  transition:opacity .19s ease,transform .19s ease,visibility .19s;
}
/* A flat list of second-level categories only needs a narrow panel; the
   rail + stage + visual layout needs the full width. */
/* Depth-2 panels are a single narrow flyout: the reference store uses this
   shape for Christmas, a plain list hanging under the nav item. */
.mega--flat{--mega-w:300px}
.mega--panes{--mega-w:1200px}
/* Depth-3 departments drop the rail and let every second-level category own a
   column; the remaining width carries the recommended products strip. */
.mega--cols{--mega-w:1160px}
.mega--cols[data-cols="1"]{--mega-w:740px}
.mega--cols[data-cols="2"]{--mega-w:960px}
.mega--cols[data-cols="4"]{--mega-w:1310px}
.nav__item:hover>.mega,.nav__item.is-open>.mega{opacity:1;visibility:visible;transform:translate(var(--mega-dx,0px),0)}
.nav__item--right>.mega{left:auto;right:0}
.mega__inner{flex:1;min-width:0;display:flex;flex-direction:column}

/* --- left rail: the second-level categories --- */
.mega__rail{width:236px;flex:none;border-right:1px solid var(--line);padding:0 10px 0 26px}
.mega__railist{margin:0;list-style:none}
.mega__railitem{margin:0}
.mega__raillink{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:9px 12px 9px 10px;border-radius:7px;font-size:14px;font-weight:600;
  color:var(--ink);line-height:1.35;transition:background .15s,color .15s;
}
.mega__raillink:hover{background:var(--light);color:var(--teal-darker)}
.mega__railitem.is-active>.mega__raillink{background:var(--light);color:var(--teal-darker)}
.mega__railname{min-width:0}
.mega__railarrow{
  width:7px;height:7px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:rotate(-45deg);flex:none;opacity:.5;
}

/* The reference store paints the second-level strip in its brand teal and
   leaves the stage and the image column white, so the panel reads as
   "navigate on the left, browse on the right". Negative margins let the colour
   bleed into the panel's own padding and reach the rounded bottom corner. */
.mega--panes .mega__rail{
  width:250px;background:var(--teal);border-right:0;
  margin:-22px 0 -20px;padding:22px 12px 20px 26px;border-radius:0 0 0 10px;
}
.mega--panes .mega__raillink{color:#fff}
.mega--panes .mega__raillink:hover,
.mega--panes .mega__railitem.is-active>.mega__raillink{background:var(--teal-darker);color:#fff}
.mega--panes .mega__railitem.is-active>.mega__raillink .mega__railarrow{opacity:.9}

/* --- middle stage: one pane per second-level category --- */
.mega__stage{flex:1;min-width:0;padding:0 26px;min-height:236px}
.mega__pane{display:none}
.mega__pane.is-active{display:block}
.mega__panehead{
  display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  margin:0 0 16px;padding-bottom:9px;border-bottom:1px solid var(--line);
}
.mega__panehead>a{
  font-size:11.5px;font-weight:800;letter-spacing:.085em;text-transform:uppercase;
  color:var(--teal-darker);line-height:1.35;
}
.mega__panehead>a:hover{color:var(--teal)}

/* --- flat panel (depth 2): just the second-level categories --- */
/* A flyout carries no promo panel — the list is the whole dropdown. */
.mega--flat .mega__visual{display:none}
.mega__flatlist{display:grid;grid-template-columns:1fr;gap:0}
.mega__flatitem{
  display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  padding:8px 0;font-size:14px;font-weight:600;color:#4b5359;line-height:1.4;
  border-bottom:1px solid var(--line);transition:color .15s,border-color .15s;
}
.mega__flatitem:hover{color:var(--teal);border-bottom-color:var(--lime)}
.mega__flatname{min-width:0}

/* --- columns: one per level 3 category --- */
.mega__cols{display:grid;grid-template-columns:repeat(var(--cols,3),minmax(0,1fr));gap:2px 0;align-items:start}
.mega__cols[data-cols="1"]{--cols:1}
.mega__cols[data-cols="2"]{--cols:2}
.mega__cols[data-cols="3"]{--cols:3}
.mega__cols[data-cols="4"]{--cols:4}
.mega__col{padding:0 22px;border-left:1px solid var(--line);min-width:0}
/* Every row must start flush with the panel edge: the grid wraps columns, so
   "first-child" alone only cleans the very first cell and leaves every later
   row's leading column indented with a stray divider. Kill the border and
   left padding on the cell that opens each row instead. */
.mega__cols[data-cols="1"] .mega__col,
.mega__cols[data-cols="2"] .mega__col:nth-child(2n+1),
.mega__cols[data-cols="3"] .mega__col:nth-child(3n+1),
.mega__cols[data-cols="4"] .mega__col:nth-child(4n+1){border-left:0;padding-left:0}
.mega__head{
  display:block;font-size:11.5px;font-weight:800;letter-spacing:.085em;text-transform:uppercase;
  color:var(--teal-darker);margin:0 0 14px;padding-bottom:9px;line-height:1.35;
  border-bottom:1px solid var(--line);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.mega__head:hover{color:var(--teal);border-bottom-color:var(--lime)}
.mega__list{margin:0}

/* --- level 3: teal group heading --- */
.mega__group{position:relative;margin-bottom:16px}
.mega__group:last-child{margin-bottom:0}
.mega__grouphead{
  display:flex;align-items:baseline;justify-content:space-between;gap:8px;
  font-size:13.5px;font-weight:700;line-height:1.4;color:var(--teal);margin-bottom:7px;
}
.mega__grouphead:hover{color:var(--teal-darker);text-decoration:underline}
.mega__sublist{margin:0}

/* --- level 4: the actual category links --- */
.mega__li{position:relative}
/* No decorative rule on hover: the panel is dense enough without a marker
   sliding in beside every third-level link. */
.mega__link{
  display:flex;align-items:baseline;justify-content:space-between;gap:10px;
  padding:5px 0 5px 12px;font-size:13.6px;line-height:1.42;color:#4b5359;
  transition:color .15s;
}
.mega__link>span{
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.mega__link--product{color:var(--grey);font-size:13.2px}
.mega__link:hover{color:var(--teal)}

/* --- depth-3 panel: columns take the leftover width, picks sit on the right --- */
/* flex-basis 0 so four columns plus the picks column never wrap: with
   `auto` the longest category names push the aside onto a second row. */
.mega--cols .mega__cols{flex:1 1 0;min-width:0;padding:0 26px;gap:4px 0}
.mega--cols .mega__col{padding:0 22px}
/* Column heading is the second-level category itself, so it reads as a
   section title rather than the teal sub-heading used inside a pane. */
.mega--cols .mega__grouphead{
  display:block;font-size:14.5px;font-weight:800;color:var(--ink);
  letter-spacing:0;text-transform:none;white-space:normal;overflow:visible;
  margin:0 0 10px;padding-bottom:9px;border-bottom:1px solid var(--line);
}
.mega--cols .mega__grouphead:hover{color:var(--teal);border-bottom-color:var(--lime)}
.mega--cols .mega__link{font-size:13.8px;color:#4b5359}


/* --- promo column: one per second-level category, only the active one shows --- */
.mega__aside{width:236px;flex:none;border-left:1px solid var(--line);padding-left:24px}
.mega__visual{width:250px;flex:none;border-left:1px solid var(--line);padding-left:24px;padding-right:26px}
.mega__promo{display:none}
.mega__promo.is-active{display:block}
.mega__promo img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--radius-img);margin-bottom:12px;display:block}
.mega__promo strong{display:block;font-size:14.5px;color:var(--ink);margin-bottom:5px;line-height:1.35}
.mega__promo span{display:block;font-size:12.8px;color:var(--grey);line-height:1.55;margin-bottom:12px}
.mega__promo .btn{padding:9px 16px;font-size:12px}

/* --- recommended category images: fills the right of a depth-3 panel so it
       is not just a wall of links --- */
.mega__visual--cats{display:flex;flex-direction:column;gap:13px;align-self:flex-start}
.mega__pickshead{
  font-size:11.5px;font-weight:800;letter-spacing:.085em;text-transform:uppercase;
  color:var(--teal-darker);margin:0;padding-bottom:9px;border-bottom:1px solid var(--line);
}
.mega__catlist{display:flex;flex-direction:column;gap:14px}
.mega__catcard{display:block}
.mega__catcard img{
  width:100%;aspect-ratio:16/10;object-fit:cover;display:block;background:var(--light);
  border-radius:var(--radius-img);margin-bottom:7px;
}
.mega__catname{
  display:block;font-size:13.6px;font-weight:700;line-height:1.35;color:var(--ink);
  transition:color .15s;
}
.mega__catcta{
  display:block;font-size:12px;font-weight:700;color:var(--teal);margin-top:3px;
  letter-spacing:.02em;
}
.mega__catcard:hover .mega__catname{color:var(--teal)}
.mega__catcard:hover img{opacity:.92}

/* --- the fourth-level links under a column (a plain list, not a flyout) --- */
.mega__sub{margin:0;list-style:none}
.mega__sublink{display:block;padding:6px 0;font-size:13.5px;color:#4b5359;line-height:1.45}
.mega__sublink:hover{color:var(--teal);padding-left:5px}

/* =========================================================
   USP strip
   ========================================================= */
.usp{background:var(--light);border-bottom:1px solid var(--line);font-size:12.5px}
.usp__inner{max-width:var(--maxw);margin:0 auto;padding:10px 20px;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;color:var(--ink)}
.usp__item{display:flex;align-items:center;gap:8px;font-weight:700;letter-spacing:.06em}
.usp__item svg{fill:var(--teal);flex:none}
.usp__stars{display:flex;align-items:center;gap:9px;font-weight:600}
.stars{display:inline-flex;gap:2px}
.stars svg{fill:#00b67a;width:17px;height:17px;flex:none}

/* =========================================================
   Hero — height follows the reference store (62vh desktop / 45vh phone)
   ========================================================= */
.hero{position:relative;height:var(--hero-h,62vh);min-height:420px;overflow:hidden;background:var(--ink)}
.hero__slide{position:absolute;inset:0;opacity:0;transition:opacity .8s ease}
.hero__slide.is-active{opacity:1}
.hero__slide img{width:100%;height:100%;object-fit:cover}
.hero__overlay{position:absolute;inset:0;background:linear-gradient(90deg,rgba(20,30,28,.78) 0%,rgba(20,30,28,.45) 45%,rgba(20,30,28,0) 75%)}
.hero__body{position:absolute;top:50%;left:0;right:0;transform:translateY(-50%);padding:0 20px;color:#fff}
.hero__inner{max-width:var(--maxw);margin:0 auto}
.hero__copy{max-width:560px}
.hero__tag{display:inline-block;background:var(--lime);color:var(--ink);font-weight:800;font-size:12px;letter-spacing:.14em;text-transform:uppercase;padding:6px 14px;border-radius:3px;margin-bottom:16px}
.hero__copy h1,.hero__copy h2{color:#fff;font-size:50px;line-height:1.08;margin-bottom:14px;font-weight:800;letter-spacing:-.5px}
.hero__copy p{font-size:17px;opacity:.93;margin-bottom:24px;max-width:440px}
.hero__arrow{position:absolute;top:50%;transform:translateY(-50%);width:46px;height:46px;border-radius:50%;background:rgba(255,255,255,.85);border:0;cursor:pointer;display:grid;place-items:center;z-index:5;transition:.2s;padding:0}
.hero__arrow:hover{background:#fff}
.hero__arrow svg{fill:var(--ink);width:16px;height:16px}
.hero__arrow--prev{left:18px}
.hero__arrow--next{right:18px}
.hero__dots{position:absolute;bottom:22px;left:0;right:0;display:flex;justify-content:center;gap:9px;z-index:5}
.hero__dots button{width:11px;height:11px;border-radius:50%;border:2px solid #fff;background:transparent;cursor:pointer;padding:0;transition:.2s}
.hero__dots button.is-active{background:var(--lime);border-color:var(--lime)}

/* =========================================================
   Sections
   ========================================================= */
.section{padding:56px 0}
.section--tight{padding:36px 0}
.section__head{text-align:center;margin-bottom:34px}
.section__head h2{font-size:31px;letter-spacing:-.3px}
.section__head p{color:var(--grey);max-width:720px;margin:0 auto;font-size:15.5px}
.eyebrow{display:block;font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--teal);font-weight:700;margin-bottom:10px}

.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:26px}
.grid-5{display:grid;grid-template-columns:repeat(var(--cols,5),1fr);gap:22px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:26px}

/* Category cards (shop by range) */
.cat-card{display:block}
.cat-card__img{display:block;overflow:hidden;border-radius:var(--radius-img);background:var(--light);aspect-ratio:4/3}
.cat-card__img img{width:100%;height:100%;object-fit:cover;border-radius:var(--radius-img);transition:transform .45s ease}
.cat-card:hover .cat-card__img img{transform:scale(1.06)}
.cat-card__title{margin-top:13px;font-weight:700;font-size:15px;color:var(--ink);transition:.15s;display:block}
.cat-card:hover .cat-card__title{color:var(--teal)}
.cat-card__count{font-size:13px;color:var(--grey)}

/* Text / image columns */
.text-col{background:#fff;border:1px solid var(--line);border-radius:var(--radius-img);padding:18px 18px 22px;text-align:center;transition:.22s;display:flex;flex-direction:column}
.text-col:hover{box-shadow:0 14px 30px rgba(0,0,0,.10);border-color:#cfd6d8;transform:translateY(-3px)}
.text-col img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--radius-img);margin-bottom:15px}
.text-col h3{font-size:17px;margin-bottom:10px;line-height:1.3}
.text-col h3 a:hover{color:var(--teal)}
.text-col p{font-size:14px;color:var(--grey);margin-bottom:16px}
.text-col .btn{margin-top:auto;align-self:center}

/* Product card */
.prod-card{border:1px solid var(--line);border-radius:var(--radius);padding:14px;text-align:center;transition:.2s;background:#fff;display:flex;flex-direction:column}
.prod-card:hover{box-shadow:0 10px 26px rgba(0,0,0,.09);border-color:#cfd6d8}
.prod-card__img{aspect-ratio:1/1;overflow:hidden;border-radius:4px;margin-bottom:12px;background:var(--light)}
.prod-card__img img{width:100%;height:100%;object-fit:cover;transition:transform .4s ease}
.prod-card:hover .prod-card__img img{transform:scale(1.05)}
.prod-card h4,.prod-card .woocommerce-loop-product__title{font-size:14px;font-weight:600;color:var(--ink-soft);min-height:38px;margin-bottom:8px;line-height:1.35}
.price,.woocommerce-Price-amount{font-size:19px;font-weight:800;color:var(--ink)}
/* Struck "was" price. The size has to be repeated on the inner
   .woocommerce-Price-amount span: the 19px rule above outranks it on the child,
   which leaves the text large while line-through is drawn with the 14px font
   metrics — that is what pushed the strike above the digits. */
.price del,.woocommerce-Price-amount del{font-size:14px;color:var(--was);font-weight:500;margin-right:7px}
.price del .woocommerce-Price-amount,
.price del .woocommerce-Price-amount bdi,
.woocommerce-Price-amount del .woocommerce-Price-amount,
.woocommerce-Price-amount del .woocommerce-Price-amount bdi{
  font-size:inherit;font-weight:inherit;color:inherit}
.badge-lime{display:inline-block;background:var(--lime);color:var(--ink);font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;padding:3px 9px;border-radius:3px;margin-bottom:8px;align-self:center}
.reco-stars{display:inline-flex;gap:2px;margin-bottom:8px;justify-content:center}
.reco-stars svg{fill:#00b67a;width:13px;height:13px}
.reco-count{display:block;font-size:12px;color:var(--grey);margin:6px 0 0}
.onsale-badge{position:absolute;top:10px;left:10px;background:var(--red);color:#fff;font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;padding:4px 9px;border-radius:3px;z-index:2}

/* Services */
.service{padding:30px 22px;border:1px solid var(--line);border-radius:var(--radius);background:#fff;text-align:center}
.service__icon{width:62px;height:62px;border-radius:50%;background:rgba(37,152,139,.1);display:grid;place-items:center;margin:0 auto 16px}
.service__icon svg{fill:var(--teal);width:30px;height:30px}
.service h3{font-size:18px}
.service p{color:var(--grey);font-size:14.5px;margin:0}

/* Reviews */
.reviews{background:var(--light);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.review{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:24px;height:100%}
.review__top{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;gap:12px}
.review__name{font-weight:700;color:var(--ink)}
.verified{display:flex;align-items:center;gap:5px;font-size:12px;color:var(--teal);font-weight:600}
.verified svg{fill:var(--teal);width:14px;height:14px}
.review__date{font-size:12.5px;color:var(--grey)}
.review h4{font-size:15.5px;margin-bottom:8px}
.review p{font-size:14.5px;color:var(--grey);margin-bottom:16px}
.review__product{display:flex;align-items:center;gap:11px;border-top:1px solid var(--line);padding-top:14px}
.review__product img{width:46px;height:46px;object-fit:cover;border-radius:4px;flex:none}
.review__product span{font-size:13px;color:var(--ink-soft);line-height:1.35}

/* Blog */
.blog-card img{border-radius:var(--radius-img);aspect-ratio:16/10;object-fit:cover;width:100%;margin-bottom:13px}
.blog-card h3{font-size:16px;line-height:1.35}
.blog-card:hover h3{color:var(--teal)}
.blog-card__date{font-size:12.5px;color:var(--grey);display:block;margin-top:6px}

/* "Read more articles" under a section heading — the way into the full index. */
.section__more{
  display:inline-flex;align-items:center;gap:8px;margin-top:12px;
  font-size:13.5px;font-weight:700;color:var(--teal);
}
.section__more:hover{color:var(--teal-darker);text-decoration:underline}
.section__morearrow{
  width:7px;height:7px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:rotate(-45deg);flex:none;
}

/* Article index cards: image + title link, excerpt, date, then a Read more
   button pinned to the bottom so every card in a row lines up. */
.blog-card--list{display:flex;flex-direction:column;min-width:0}
.blog-card--list .blog-card__link{display:block;color:inherit}
.blog-card--list .blog-card__excerpt{
  font-size:14px;line-height:1.6;color:var(--grey);margin:0 0 6px;
}
.blog-card--list .blog-card__date{margin-top:0}
.blog-card--list .blog-card__more{margin-top:auto;align-self:flex-start}
.blog-pager{display:flex;justify-content:center;gap:8px;margin-top:38px;flex-wrap:wrap}
.blog-pager .page-numbers{
  min-width:38px;height:38px;padding:0 12px;display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--line);border-radius:var(--radius);font-size:14px;font-weight:600;color:var(--ink);
  background:#fff;transition:.15s;
}
.blog-pager .page-numbers:hover{border-color:var(--teal);color:var(--teal)}
.blog-pager .page-numbers.current{background:var(--teal);border-color:var(--teal);color:#fff}

/* Dual cards */
.dual__card img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:var(--radius-img);margin-bottom:16px}
.dual__card h3{font-size:20px}
.dual__card p{color:var(--grey)}

/* Newsletter */
.news{background:var(--teal-dark);color:#fff;text-align:center}
.news h2{color:#fff;font-size:28px}
.news p{opacity:.9;max-width:560px;margin:0 auto 22px}
.news form{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;max-width:520px;margin:0 auto}
.news input[type=email]{flex:1;min-width:0;padding:12px 16px;border:0;border-radius:var(--radius);font-size:14px}
.news small{display:block;opacity:.72;margin-top:14px;font-size:12.5px}

/* =========================================================
   Footer
   ========================================================= */
.footer{background:var(--ink);color:#a9b2b8;padding:52px 0 26px;font-size:14px}
.footer h4{color:#fff;font-size:13px;letter-spacing:.13em;text-transform:uppercase;margin-bottom:16px}
.footer__grid{display:grid;grid-template-columns:repeat(3,1fr) 1.3fr;gap:36px;padding-bottom:34px;border-bottom:1px solid rgba(255,255,255,.12)}
.footer li{margin-bottom:9px}
.footer a{color:#a9b2b8}
.footer a:hover{color:var(--lime)}
.footer__addr address{font-style:normal;line-height:1.9}
.footer__addr strong{color:#fff;font-size:15px}
.footer__bottom{max-width:var(--maxw);margin:0 auto;padding:22px 20px 0;display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;color:#7f8a90;font-size:12.5px}
.pay{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.pay span{background:#fff;color:var(--ink);border-radius:3px;padding:3px 8px;font-size:10.5px;font-weight:800;letter-spacing:.06em}
.social{display:flex;gap:10px;margin-top:16px}
.social a{width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.1);display:grid;place-items:center}
.social a:hover{background:var(--teal)}
.social svg{fill:#fff;width:16px;height:16px}
.footer__contact a{color:#fff}

/* =========================================================
   Sticky / back to top
   ========================================================= */
.nav.is-sticky{position:fixed;top:0;left:0;right:0;box-shadow:0 4px 16px rgba(0,0,0,.18);animation:slideDown .25s ease}
@keyframes slideDown{from{transform:translateY(-100%)}to{transform:translateY(0)}}
.to-top{position:fixed;right:20px;bottom:24px;width:44px;height:44px;border-radius:50%;background:var(--teal);color:#fff;border:0;cursor:pointer;display:none;place-items:center;box-shadow:0 6px 18px rgba(0,0,0,.24);z-index:90;padding:0}
.to-top svg{width:17px;height:17px;fill:#fff}

/* =========================================================
   Inner pages
   ========================================================= */
.page-hero{background:var(--light);border-bottom:1px solid var(--line);padding:34px 0}
.page-hero h1{font-size:32px;margin:0}
/* Short teal rule under the heading, the way the reference store separates a
   page title from its listing. */
.page-hero__rule{display:block;width:76px;height:3px;background:var(--lime);margin-top:14px;border-radius:2px}
.page-hero__lead{color:var(--grey);font-size:15.5px;max-width:720px;margin:14px 0 0}
.breadcrumb{font-size:13px;color:var(--grey);margin-bottom:8px}
.breadcrumb a:hover{color:var(--teal)}
.breadcrumb__sep{margin:0 6px;opacity:.6}
.page-content{padding:46px 0}

/* --- single article --- */
.entry{max-width:820px;margin:0 auto}
.entry__meta{display:flex;align-items:center;gap:14px;flex-wrap:wrap;font-size:13px;color:var(--grey);margin-bottom:18px}
.entry__cat{
  background:var(--light);color:var(--teal-darker);border-radius:20px;padding:3px 12px;
  font-size:11.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
}
.entry__img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:var(--radius-img);margin-bottom:26px;display:block}
.entry-content{font-size:16.2px;line-height:1.78;color:var(--ink-soft)}
.entry-content p{margin:0 0 1.1em}
.entry-content img{border-radius:var(--radius-img)}
.entry__back{margin:34px 0 0}
.entry__back a{display:inline-flex;align-items:center;gap:7px;font-weight:700;color:var(--teal)}
.entry__back a:hover{color:var(--teal-darker)}
.entry__back svg{width:13px;height:13px;fill:currentColor}
.entry__more{margin-top:56px;padding-top:38px;border-top:1px solid var(--line)}
.entry__pages{display:flex;gap:8px;flex-wrap:wrap;margin-top:20px}
.entry-content h2{font-size:24px;margin-top:1.2em}
.entry-content h3{font-size:19px;margin-top:1.1em}
.entry-content ul{list-style:disc;padding-left:22px;margin:0 0 1em}
.entry-content ol{list-style:decimal;padding-left:22px;margin:0 0 1em}
.entry-content li{margin-bottom:.4em}
.alignleft{float:left;margin:0 1.2em 1em 0}
.alignright{float:right;margin:0 0 1em 1.2em}
.aligncenter{display:block;margin:0 auto 1em}
.screen-reader-text{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* =========================================================
   WooCommerce
   ========================================================= */
.woocommerce .woocommerce-breadcrumb{margin:0 0 18px;font-size:13px;color:var(--grey)}
.woocommerce .woocommerce-breadcrumb a:hover{color:var(--teal)}
.woocommerce .page-title{font-size:32px;margin:0 0 24px}
.woocommerce-result-count,.woocommerce-ordering{font-size:14px;color:var(--grey);margin:0}
.woocommerce-ordering select{border:1px solid var(--line);border-radius:var(--radius);padding:9px 12px;font-size:14px;background:#fff;color:var(--ink)}

/* -------- product grid --------
   NOTE: WooCommerce adds ::before/::after clearfix pseudo elements to ul.products.
   Inside a CSS grid those become real grid items and push every product one
   cell to the right — leaving the first cell blank. Remove them. */
.woocommerce ul.products::before,
.woocommerce ul.products::after{content:none;display:none}
.woocommerce ul.products{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr));gap:34px 26px;padding:0;margin:0 0 30px;clear:none}
.woocommerce ul.products li.product{
  width:auto!important;float:none!important;margin:0!important;clear:none!important;padding:0;
  border:0;border-radius:0;background:transparent;text-align:center;position:relative;transition:.2s;
  display:flex;flex-direction:column}
.woocommerce ul.products li.product>a.woocommerce-LoopProduct-link{display:flex;flex-direction:column;height:100%}
.woocommerce ul.products li.product img{
  width:100%;aspect-ratio:1/1;object-fit:contain;border-radius:var(--radius-img);margin:0 0 14px;background:#fff}
.woocommerce ul.products li.product .woocommerce-loop-product__title{
  font-size:15px;font-weight:600;padding:0;margin:0 0 11px;color:var(--ink-soft);line-height:1.45;min-height:44px}
/* "was" above, live price below — same order as the reference store. */
.woocommerce ul.products li.product .price{
  font-size:20px;font-weight:800;color:var(--ink);margin:0;display:flex;flex-direction:column;align-items:center;gap:1px}
.woocommerce ul.products li.product .price del{font-size:14px;color:var(--was);font-weight:500;opacity:1;margin:0;order:-1}
.woocommerce ul.products li.product .price ins{text-decoration:none;font-weight:800}
.woocommerce ul.products li.product .price del .woocommerce-Price-amount,
.woocommerce ul.products li.product .price del .woocommerce-Price-amount bdi{
  font-size:inherit;font-weight:inherit;color:inherit}

/* round SAVE badge, right aligned — reference style */
.woocommerce ul.products li.product .onsale,
.nt-onsale-round{
  position:absolute;top:6px;right:6px;left:auto;margin:0;min-height:0;min-width:0;height:auto;
  width:58px;height:58px;border-radius:50%;background:var(--ink);color:#fff;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;
  font-size:10px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;line-height:1.1;
  padding:0;z-index:3;box-shadow:0 4px 12px rgba(0,0,0,.18)}
.nt-onsale-round__pct{font-size:15px;letter-spacing:0}
.nt-onsale-round__label{font-size:9px;opacity:.85}

.woocommerce ul.products li.product .button{
  margin:14px auto 0;display:inline-block;font-size:12.5px;padding:10px 18px;border-radius:var(--radius);
  background:var(--teal);color:#fff;text-transform:uppercase;letter-spacing:.06em;font-weight:700;align-self:center}
.woocommerce ul.products li.product .button:hover{background:var(--teal-darker);color:#fff}
.woocommerce ul.products li.product .added_to_cart{margin-top:6px;font-size:12.5px;color:var(--teal)}

/* -------- category head + banner -------- */
.nt-cat-head{border-bottom:1px solid var(--line);padding:22px 0 18px;margin-bottom:0}
.nt-crumb{font-size:12.5px;color:var(--grey);margin:0}
.nt-crumb a:hover{color:var(--teal)}
.nt-crumb__sep{margin:0 7px;opacity:.55}
.nt-crumb__current{color:var(--ink-soft)}

.nt-cat-banner{background:var(--light) center/cover no-repeat;min-height:210px;display:flex;align-items:stretch}
.nt-cat-banner .container{display:flex;justify-content:flex-end;align-items:center;padding-top:26px;padding-bottom:26px}
.nt-cat-banner__panel{width:min(560px,100%);background:rgba(255,255,255,.94);border-radius:var(--radius-img);padding:26px 30px}
.nt-cat-banner__panel h2{font-size:21px;color:var(--teal);margin:0 0 12px}
.nt-cat-banner__text{font-size:14.5px;color:var(--ink-soft);line-height:1.7}
.nt-cat-banner__text p:last-child{margin-bottom:0}

/* -------- department landing page (reference layout) -------- */
/* Page title sits above the banner, small and teal — not a hero heading. */
.nt-coll-title{padding:14px 0 12px}
.nt-coll-title h1{font-size:20px;font-weight:400;color:var(--teal);margin:0;line-height:1.3}

/* --- banner: three shapes, one per department --- */
.nt-cbanner{padding:0 0 6px}
.nt-cbanner__img{width:100%;height:auto;display:block;border-radius:var(--radius-img)}

/* Christmas: a coloured promotion card with copy on both sides. */
.nt-promo{
  display:flex;align-items:center;justify-content:space-between;gap:26px;flex-wrap:wrap;
  padding:30px 44px;border-radius:var(--radius-img);
  background:radial-gradient(85% 70% at 50% 35%,#c9222b 0%,#8e0e15 55%,#4e060b 100%);
  color:#fff;
}
.nt-promo__left{display:flex;flex-direction:column;line-height:1}
.nt-promo__kicker{font-size:19px;font-weight:800;letter-spacing:.02em;margin-bottom:6px}
.nt-promo__headline{font-size:56px;font-weight:900;letter-spacing:-.01em;color:#f6d67a}
.nt-promo__right{text-align:center}
.nt-promo__title{display:block;font-size:30px;font-weight:900;line-height:1.08;text-transform:uppercase}
.nt-promo__note{display:block;margin-top:10px;font-size:14px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:#f6d67a}
.nt-promo__small{display:block;margin-top:4px;font-size:12.5px;font-style:normal;opacity:.85}

/* Halloween: dark picture panel, logo left, blurb right. */
.nt-split{
  position:relative;overflow:hidden;
  display:flex;align-items:center;justify-content:space-between;gap:30px;flex-wrap:wrap;
  min-height:280px;padding:34px 40px;border-radius:var(--radius-img);
  background:#0b0b10 center/cover no-repeat;color:#fff;
}
/* The photo is bright on the left, so the copy sits on a dark gradient that
   fades in from the middle — same reading order as the source banner. */
.nt-split::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,rgba(6,8,14,.08) 0%,rgba(6,8,14,.52) 46%,rgba(6,8,14,.88) 100%);
}
.nt-split>*{position:relative;z-index:1}
.nt-split__logo{max-width:330px}
.nt-split__logo img{max-width:100%;height:auto;display:block}
.nt-split__body{width:min(520px,100%);text-align:right;margin-left:auto}
.nt-split__body h2{font-size:23px;line-height:1.3;margin:0 0 12px;color:#fff;font-weight:600}
.nt-split__text{font-size:14px;line-height:1.7;color:rgba(255,255,255,.88)}
.nt-split__text p:last-child{margin-bottom:0}
/* Image-only banner: identical size/shape to the split banner, but no copy —
   skip the scrim and keep the panel height at every breakpoint. */
.nt-split.nt-split--imgonly{min-height:280px}
.nt-split.nt-split--imgonly::before{display:none}
@media (max-width:1024px){.nt-split.nt-split--imgonly{min-height:230px}}
@media (max-width:760px){.nt-split.nt-split--imgonly{min-height:180px}}

/* --- Shop By Department: big cards, three to a row, centred labels --- */
.nt-dept{padding:16px 0 54px}
.nt-dept__title{
  font-size:25px;font-weight:400;color:var(--teal);
  text-align:center;margin:0 0 30px;line-height:1.3;
}
.nt-dept__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:26px 26px}
/* Recommended products strip on the department landing pages: the same
   product cards the shop grid uses, laid out four across. */
.nt-recs ul.products{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:30px 22px;margin:0}
.nt-recs ul.products li.product{width:100%;float:none;margin:0}
.nt-dept-card{display:block;text-align:center}
.nt-dept-card__media{
  display:block;position:relative;background:var(--light);
  border-radius:var(--radius-img);overflow:hidden;aspect-ratio:3/2;
}
.nt-dept-card__media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .3s}
.nt-dept-card:hover .nt-dept-card__media img{transform:scale(1.04)}
.nt-dept-card__ph{
  position:absolute;inset:0;display:grid;place-items:center;
  font-size:34px;font-weight:700;color:var(--teal);opacity:.35;
}
.nt-dept-card__name{
  display:block;margin-top:12px;font-size:15px;line-height:1.4;color:var(--teal);
  transition:color .15s;
}
.nt-dept-card:hover .nt-dept-card__name{color:var(--teal-darker)}

.nt-brands{padding:6px 0 48px}
.nt-brands__row{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:40px}
.nt-brands__item{display:block;max-width:170px;opacity:.9;transition:opacity .18s}
.nt-brands__item:hover{opacity:1}
.nt-brands__item img{max-height:66px;width:auto;object-fit:contain;display:block}
.nt-collection__cta{background:var(--light);padding:34px 0;text-align:center}
.nt-collection__cta p{font-size:15px;color:var(--ink-soft);margin:0 0 16px}
.nt-collection__tel{font-weight:700;color:var(--teal);white-space:nowrap}
.nt-collection__tel:hover{color:var(--teal-darker)}

/* --- the long department blurb, kept at the foot of the page --- */
.nt-coll-desc{padding:10px 0 56px}
.nt-coll-desc h2{font-size:20px;font-weight:400;color:var(--teal);margin:0 0 14px}
.nt-coll-desc p{font-size:14.5px;line-height:1.75;color:var(--ink-soft);max-width:980px}

/* -------- sub-category landing (big categories) -------- */
.nt-subcats{padding:14px 0 62px}
.nt-subcats__section{margin-bottom:44px}
.nt-subcats__section:last-child{margin-bottom:0}
.nt-subcats__bar{
  display:flex;align-items:baseline;justify-content:space-between;gap:18px;
  border-bottom:1px solid var(--line);padding-bottom:12px;margin-bottom:26px;
}
.nt-subcats__title{font-size:25px;font-weight:400;color:var(--teal);margin:0;line-height:1.3}
.nt-subcats__title a{color:inherit}
.nt-subcats__title a:hover{color:var(--teal-darker)}
.nt-subcats__all{font-size:13px;font-weight:700;color:var(--teal);white-space:nowrap}
.nt-subcats__all::after{content:" ›";font-weight:700}
.nt-subcats__all:hover{color:var(--teal-darker)}
.nt-subcats__grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:26px 22px}
.nt-subcard{display:block;background:#fff;border-radius:var(--radius);overflow:hidden;transition:transform .18s,box-shadow .18s}
.nt-subcard:hover{transform:translateY(-3px);box-shadow:0 14px 30px rgba(0,0,0,.10)}
.nt-subcard__media{
  display:block;position:relative;background:var(--light);border-radius:var(--radius-img);overflow:hidden;
  aspect-ratio:4/3;
}
.nt-subcard__media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .3s}
.nt-subcard:hover .nt-subcard__media img{transform:scale(1.05)}
.nt-subcard__ph{
  position:absolute;inset:0;display:grid;place-items:center;
  font-size:40px;font-weight:800;color:#c9d2d0;
}
.nt-subcard__body{display:block;padding:14px 4px 4px}
.nt-subcard__name{display:block;font-size:15px;font-weight:600;color:var(--teal);line-height:1.4;margin-bottom:5px}
.nt-subcard:hover .nt-subcard__name{text-decoration:underline}
.nt-subcard__meta{display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--grey)}
.nt-subcard__arrow{
  width:6px;height:6px;border-right:1.7px solid currentColor;border-bottom:1.7px solid currentColor;
  transform:rotate(-45deg);flex:none;opacity:.6;margin-bottom:1px;
}

/* -------- toolbar -------- */
.nt-shop-toolbar{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-top:20px;padding-bottom:20px}
.nt-shop-toolbar__right{display:flex;align-items:center;gap:22px;margin-left:auto;flex-wrap:wrap}
.nt-shop-toolbar .woocommerce-result-count{font-size:13.5px;color:var(--grey)}
.nt-filter-toggle{
  display:none;align-items:center;gap:9px;background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:10px 18px;font-size:12.5px;font-weight:800;letter-spacing:.1em;color:var(--ink);cursor:pointer}
.nt-filter-toggle svg{fill:var(--teal)}

/* -------- sidebar + grid layout -------- */
.nt-shop-layout{display:grid;grid-template-columns:250px minmax(0,1fr);gap:40px;align-items:start;padding-bottom:60px}
.nt-shop-side{position:sticky;top:20px}
.nt-shop-side__head{display:block;margin:-6px 0 16px}
.nt-shop-side__head h3{font-size:21px;font-weight:400;color:var(--teal);margin:0}
.nt-shop-side__close{display:none;background:none;border:0;font-size:28px;line-height:1;cursor:pointer;color:var(--grey)}
.nt-widget{border-bottom:1px solid var(--line);padding:0 0 18px;margin-bottom:18px}
.nt-widget:last-of-type{border-bottom:0}
.nt-widget__title{
  font-size:17px;font-weight:700;color:var(--teal);letter-spacing:0;margin:0 0 12px;
  display:flex;align-items:center;justify-content:space-between;cursor:pointer;position:relative}
.nt-widget__title::after{
  content:'';flex:none;width:9px;height:9px;margin-right:3px;border-right:2px solid currentColor;
  border-bottom:2px solid currentColor;transform:rotate(45deg) translateY(-2px);transition:transform .22s ease}
.nt-widget.is-closed .nt-widget__title{margin-bottom:0}
.nt-widget.is-closed .nt-widget__title::after{transform:rotate(-45deg) translateY(-1px)}
.nt-widget.is-closed > *:not(.nt-widget__title){display:none}
.nt-widget ul{list-style:none;margin:0;padding:0}
.nt-widget ul li{margin-bottom:8px;font-size:14px}
.nt-widget ul li a{color:var(--grey)}
.nt-widget ul li a:hover{color:var(--teal)}
.nt-widget ul li.current-cat>a,.nt-widget ul li.chosen a{color:var(--teal);font-weight:700}
.nt-widget .count{color:var(--grey);font-size:12.5px}
.nt-widget ul.product-categories ul.children{padding-left:14px;margin-top:8px}
.nt-widget ul.product-categories ul.children li{margin-bottom:6px;font-size:13.5px}
.nt-widget .price_slider_wrapper{margin-top:10px}
.nt-widget .ui-slider{background:var(--line);border:0;height:6px;border-radius:3px;position:relative;margin:14px 0 18px}
.nt-widget .ui-slider .ui-slider-range{background:var(--teal);border-radius:3px}
.nt-widget .ui-slider .ui-slider-handle{background:var(--teal);border:0;width:16px;height:16px;border-radius:50%;top:-5px;cursor:pointer}
.nt-widget .price_slider_amount .button{background:var(--teal);color:#fff;border:0;border-radius:var(--radius);padding:8px 16px;font-size:12.5px;font-weight:700;text-transform:uppercase;cursor:pointer}
.nt-widget .price_label{font-size:13.5px;color:var(--grey)}
.nt-widget select{width:100%;border:1px solid var(--line);border-radius:var(--radius);padding:9px 12px;font-size:14px}

.nt-side-promo{display:grid;gap:16px;margin-top:26px}
.nt-side-promo__block{background:var(--light);border-radius:var(--radius-img);padding:18px 20px}
.nt-side-promo__eyebrow{display:block;font-size:11.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--teal);margin-bottom:9px}
/* The number has to stay on one line inside the narrow side column, so it is
   sized down and told not to wrap. */
.nt-side-promo__phone{
  display:flex;align-items:center;gap:7px;font-size:14px;font-weight:800;color:var(--ink);
  margin-bottom:9px;white-space:nowrap;flex-wrap:nowrap;
}
.nt-side-promo__phone svg{width:15px;height:15px;flex:none}
.nt-side-promo__phone svg{fill:var(--teal)}
.nt-side-promo__block p{font-size:13px;color:var(--grey);margin:0 0 6px;line-height:1.6}
.nt-side-promo__block p:last-child{margin-bottom:0}

/* -------- pagination --------
   WooCommerce ships its own `nav.woocommerce-pagination` rules with a higher
   specificity than a plain `.woocommerce .woocommerce-pagination …` selector,
   so every rule here has to carry the same `nav.` element or the buttons fall
   back to its cramped inline-block row. */
.woocommerce nav.woocommerce-pagination{margin-top:38px;text-align:center}
.woocommerce nav.woocommerce-pagination ul{
  border:0;margin:0;padding:0;display:flex;gap:12px;justify-content:center;flex-wrap:wrap;white-space:normal;
}
.woocommerce nav.woocommerce-pagination ul li{border:0;border-right:0;margin:0;padding:0;float:none;display:block;overflow:visible}
.woocommerce nav.woocommerce-pagination ul li a,.woocommerce nav.woocommerce-pagination ul li span{
  display:block;min-width:44px;height:44px;line-height:42px;padding:0 10px;text-align:center;
  border:1px solid var(--line);border-radius:var(--radius);color:var(--ink);font-size:14.5px;
  font-weight:600;background:#fff;transition:border-color .15s,color .15s,background .15s;
}
.woocommerce nav.woocommerce-pagination ul li a:hover{background:var(--light);border-color:var(--teal);color:var(--teal)}
.woocommerce nav.woocommerce-pagination ul li span.current{background:var(--teal);border-color:var(--teal);color:#fff}

/* =========================================================
   Single product — reference-style two column layout
   ========================================================= */
.nt-product{padding-bottom:10px}
.nt-phead{padding:6px 0 22px}
.nt-phead__crumb .woocommerce-breadcrumb{font-size:13px;color:var(--grey);margin:0 0 10px}
.nt-phead__crumb .woocommerce-breadcrumb a:hover{color:var(--teal)}
.nt-phead__row{display:flex;align-items:center;justify-content:space-between;gap:22px;flex-wrap:wrap}
.nt-phead__row h1.product_title{font-size:30px;font-weight:400;margin:0;color:var(--ink);line-height:1.28;max-width:calc(100% - 190px)}
.nt-phead__brand{
  font-size:12px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--teal);
  border:1px solid var(--line);border-radius:var(--radius);padding:9px 16px;white-space:nowrap;flex:none}

.nt-pmain{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:44px;align-items:start;padding-bottom:46px}

/* gallery */
.nt-pgal{position:relative}
.nt-pgal .woocommerce-product-gallery{position:relative;margin:0}
.woocommerce div.product .nt-pgal div.images{float:none;width:100%;margin:0}
.woocommerce div.product .nt-pgal div.images img{border-radius:var(--radius-img);width:100%}
/* WooCommerce ships `.woocommerce div.product div.images .flex-control-thumbs li`
   — four classes and three elements — so the chain below has to be spelled out
   in full to outrank it. With the shorter selector the theme's width, float and
   margin all lost, which left the thumbs at 25% and glued to the main image. */
.woocommerce div.product .nt-pgal div.images .flex-control-thumbs{
  display:flex;flex-wrap:wrap;gap:12px;margin:20px 0 0;padding:0;list-style:none}
/* Six across, so a full gallery is exactly one row. */
.woocommerce div.product .nt-pgal div.images .flex-control-thumbs li{
  width:calc((100% - 60px)/6);float:none;margin:0}
.woocommerce div.product .nt-pgal div.images .flex-control-thumbs img{
  border-radius:6px;border:1px solid var(--line);opacity:.6;cursor:pointer;margin:0}
.woocommerce div.product .nt-pgal div.images .flex-control-thumbs img.flex-active,
.woocommerce div.product .nt-pgal div.images .flex-control-thumbs img:hover{
  opacity:1;border-color:var(--teal)}
.nt-pgal .flex-direction-nav a{background:rgba(0,0,0,.4);border-radius:50%;width:40px;height:40px;line-height:40px;text-align:center;top:46%;opacity:.9}
.nt-pgal .flex-direction-nav a:hover{background:rgba(0,0,0,.7)}
.nt-pgal .flex-direction-nav a::before{color:#fff;font-size:20px}
.nt-pgal .woocommerce-product-gallery__trigger{position:absolute;top:14px;left:14px;right:auto;z-index:3;background:#fff;border-radius:50%;width:36px;height:36px;font-size:16px;line-height:36px;text-align:center;box-shadow:0 3px 10px rgba(0,0,0,.14)}

.nt-save-sticker{
  position:absolute;top:14px;right:14px;z-index:4;width:66px;height:66px;border-radius:50%;background:var(--ink);
  color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;
  font-size:10px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;box-shadow:0 5px 14px rgba(0,0,0,.2)}
.nt-save-sticker__pct{font-size:17px;letter-spacing:0}

/* summary card */
.nt-psummary__card{border:1px solid var(--line);border-radius:var(--radius-img);padding:0 26px 26px;background:#fff}
.nt-psummary__meta{
  display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  border-bottom:1px solid var(--line);padding:18px 0 16px;margin-bottom:22px}
.nt-sku{font-size:12.5px;color:var(--grey);letter-spacing:.04em;text-transform:uppercase}
.nt-rating{display:flex;align-items:center;gap:9px}
.nt-rating .star-rating{float:none;margin:0;font-size:14px;color:#f5a623}
.nt-rating__count{font-size:13px;color:var(--teal);border-bottom:1px solid transparent}
.nt-rating__count:hover{border-color:var(--teal)}

.nt-psummary__price{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin-bottom:18px}
/* get_price_html() is echoed straight into this wrapper, so the del/ins pair is
   a direct child — no .price span in between. */
.woocommerce div.product .nt-psummary__price .price,
.woocommerce div.product .nt-psummary__price ins,
.woocommerce div.product .nt-psummary__price>.woocommerce-Price-amount{
  font-size:32px;font-weight:800;color:var(--ink);margin:0}
.woocommerce div.product .nt-psummary__price ins{text-decoration:none}
.woocommerce div.product .nt-psummary__price del{
  font-size:18px;color:var(--was);font-weight:500;opacity:1;display:block;text-decoration:line-through}
.woocommerce div.product .nt-psummary__price del .woocommerce-Price-amount,
.woocommerce div.product .nt-psummary__price del .woocommerce-Price-amount bdi{
  font-size:inherit;font-weight:inherit;color:inherit}
.nt-savings{display:inline-block;background:rgba(37,152,139,.1);color:var(--teal);font-size:12.5px;font-weight:700;border-radius:3px;padding:4px 10px}
.nt-psummary__short{font-size:14.5px;color:var(--grey);line-height:1.7;margin-bottom:20px}

.woocommerce div.product form.cart{display:flex;flex-direction:column;gap:16px;margin:0 0 22px}
.woocommerce div.product form.cart .variations{width:100%;border:0;margin:0}
.woocommerce div.product form.cart .variations th,
.woocommerce div.product form.cart .variations td{display:block;padding:0;border:0;text-align:left;background:none}
.woocommerce div.product form.cart .variations .label label{font-size:13.5px;font-weight:700;color:var(--ink);margin:0 0 7px}
.woocommerce div.product form.cart .variations select{width:100%;border:1px solid var(--line);border-radius:var(--radius);padding:11px 13px;font-size:14px;color:var(--ink);background:#fff}
.woocommerce div.product .nt-cart-row{display:flex;align-items:center;gap:16px;flex-wrap:wrap;width:100%}
.woocommerce div.product form.cart .quantity{margin:0}
.woocommerce div.product .stock,
.woocommerce div.product p.stock{font-size:13.5px;font-weight:600;color:var(--teal);margin:0}

.woocommerce div.product form.cart .button,
.woocommerce #respond input#submit,.woocommerce a.button,.woocommerce button.button{
  background:var(--teal);color:#fff;border-radius:var(--radius);font-weight:700;text-transform:uppercase;letter-spacing:.06em;
  font-size:14px;padding:13px 26px;transition:.2s;border:0;cursor:pointer}
.woocommerce div.product form.cart .button{flex:1 1 200px;min-height:48px}
.woocommerce div.product form.cart .button:hover,
.woocommerce #respond input#submit:hover,.woocommerce a.button:hover,.woocommerce button.button:hover{background:var(--teal-darker);color:#fff}

.nt-prod-usp{border-top:1px solid var(--line);padding-top:18px;display:grid;gap:13px}
.nt-prod-usp li{display:flex;align-items:flex-start;gap:12px;font-size:14px;color:var(--ink-soft);line-height:1.5}
.nt-prod-usp svg{fill:var(--teal);flex:none;margin-top:1px}
.nt-prod-usp strong{font-weight:700}
.nt-prod-usp em{font-style:normal;color:var(--grey)}

/* tabs */
.nt-ptabs{margin-bottom:10px}
.woocommerce div.product .woocommerce-tabs ul.tabs{border:0;padding:0;margin:0 0 22px;display:flex;gap:10px;flex-wrap:wrap}
.woocommerce div.product .woocommerce-tabs ul.tabs::before{display:none}
.woocommerce div.product .woocommerce-tabs ul.tabs li{
  border:1px solid var(--line);border-radius:var(--radius);background:#fff;margin:0;padding:0;display:inline-block}
.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after{display:none}
.woocommerce div.product .woocommerce-tabs ul.tabs li a{padding:11px 22px;font-weight:700;font-size:13.5px;color:var(--ink);text-transform:uppercase;letter-spacing:.06em;display:inline-block}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active{border-color:var(--teal);background:var(--teal)}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a{color:#fff}
.woocommerce div.product .woocommerce-tabs .panel{border:1px solid var(--line);border-radius:var(--radius-img);padding:30px 34px;margin:0;background:#fff}
.woocommerce div.product .woocommerce-tabs .panel h2,
.woocommerce div.product .woocommerce-tabs .panel h3{font-size:19px;margin:0 0 14px}
.woocommerce div.product .woocommerce-tabs .panel p{font-size:14.5px;color:var(--ink-soft);line-height:1.75}
.woocommerce div.product .woocommerce-tabs .panel ul{list-style:none;padding:0;margin:0 0 1em}
.nt-ticklist li{position:relative;padding-left:26px;margin-bottom:9px;font-size:14.5px;color:var(--ink-soft)}
.nt-ticklist li::before{
  content:"";position:absolute;left:0;top:5px;width:14px;height:8px;border-left:2.5px solid var(--teal);border-bottom:2.5px solid var(--teal);
  transform:rotate(-45deg)}
.woocommerce div.product .woocommerce-tabs .panel table.shop_attributes{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.woocommerce div.product .woocommerce-tabs .panel table.shop_attributes th,
.woocommerce div.product .woocommerce-tabs .panel table.shop_attributes td{border-top:1px solid var(--line);padding:11px 15px;font-size:14px;background:#fff}

/* Related products — four to a row. */
.woocommerce div.product .related.products>h2,
.woocommerce div.product .upsells.products>h2{font-size:24px;margin:52px 0 24px;text-align:left}
.woocommerce div.product .related.products ul.products,
.woocommerce div.product .upsells.products ul.products{
  grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:34px 24px}

/* ---------------------------------------------------------
   Frequently bought together
   --------------------------------------------------------- */
.nt-fbt{margin:52px 0 0;padding-top:44px;border-top:1px solid var(--line)}
.nt-fbt__title{font-size:24px;margin:0 0 20px;color:var(--ink)}
.nt-fbt__box{
  max-width:920px;border:1px solid var(--line);border-radius:var(--radius);background:#fff;overflow:hidden}
.nt-fbt__list{margin:0;padding:0;list-style:none}
.nt-fbt__item+.nt-fbt__item{border-top:1px solid var(--line)}
.nt-fbt__row{
  display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:18px;
  padding:16px 18px;cursor:pointer;transition:background .16s}
.nt-fbt__row:hover{background:var(--light)}
.nt-fbt__check{
  appearance:none;-webkit-appearance:none;width:20px;height:20px;flex:none;margin:0;order:-1;
  border:1.5px solid #c6ccd0;border-radius:4px;background:#fff;position:relative;cursor:pointer;transition:.15s}
.nt-fbt__check:checked{background:var(--teal);border-color:var(--teal)}
.nt-fbt__check:checked::after{
  content:'';position:absolute;left:6px;top:2px;width:5px;height:10px;
  border:2px solid #fff;border-top:0;border-left:0;transform:rotate(45deg)}
.nt-fbt__check[data-locked]{opacity:.55;cursor:not-allowed}
/* The checkbox sits before the thumbnail without stealing a grid track. */
.nt-fbt__row{grid-template-columns:20px auto 1fr auto;gap:16px}
.nt-fbt__thumb{width:84px;height:84px;border-radius:var(--radius);overflow:hidden;background:var(--light);flex:none}
.nt-fbt__thumb img{width:100%;height:100%;object-fit:cover;display:block}
.nt-fbt__body{min-width:0}
.nt-fbt__name{
  display:block;font-size:15px;font-weight:600;color:var(--ink-soft);line-height:1.4;margin-bottom:6px}
.nt-fbt__flag{
  display:inline-block;margin-left:8px;font-size:10.5px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;
  color:var(--teal);background:rgba(37,152,139,.1);border-radius:3px;padding:2px 7px;vertical-align:1px}
.nt-fbt__price{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;font-size:17px;font-weight:800;color:var(--ink)}
.nt-fbt__price del{font-size:14px;color:var(--was);font-weight:500}
.nt-fbt__price del .woocommerce-Price-amount,
.nt-fbt__price del .woocommerce-Price-amount bdi{font-size:inherit;font-weight:inherit;color:inherit}
.nt-fbt__price ins{text-decoration:none}
/* SELECT / Added pill — lime like the reference. */
.nt-fbt__toggle{
  display:inline-flex;align-items:center;justify-content:center;min-width:92px;
  padding:9px 14px;border-radius:4px;background:var(--light);color:var(--grey);
  font-size:11.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;transition:.16s}
.nt-fbt__toggle-off{display:none}
.nt-fbt__check:not(:checked)~.nt-fbt__toggle .nt-fbt__toggle-on{display:none}
.nt-fbt__check:not(:checked)~.nt-fbt__toggle .nt-fbt__toggle-off{display:inline}
.nt-fbt__check:checked~.nt-fbt__toggle{background:var(--lime);color:var(--ink)}
.nt-fbt__form{
  display:flex;align-items:center;gap:18px;flex-wrap:wrap;
  padding:16px 18px;border-top:1px solid var(--line);background:var(--light)}
.nt-fbt__submit{
  flex:1 1 auto;min-width:240px;justify-content:center;text-align:center;
  border:0;cursor:pointer;font-family:inherit;letter-spacing:.08em;text-transform:uppercase;
  padding:15px 24px;font-size:13px;font-weight:800;border-radius:var(--radius)}
.nt-fbt__total{display:flex;align-items:baseline;gap:10px}
.nt-fbt__total-label{font-size:12.5px;color:var(--grey);text-transform:uppercase;letter-spacing:.06em}
.nt-fbt__total-value{font-size:20px;font-weight:800;color:var(--ink)}
/* In the buy column the bundle box runs half as wide as the full-bleed layout
   it was designed for, so it tightens up instead of scrolling sideways. */
.nt-psummary .nt-fbt{margin:22px 0 0;padding-top:0;border-top:0}
.nt-psummary .nt-fbt__title{font-size:19px;margin:0 0 14px}
.nt-psummary .nt-fbt__box{max-width:none}
.nt-psummary .nt-fbt__row{gap:12px;padding:13px 14px}
.nt-psummary .nt-fbt__thumb{width:64px;height:64px}
.nt-psummary .nt-fbt__name{font-size:14px}
.nt-psummary .nt-fbt__toggle{min-width:74px;padding:8px 11px;font-size:11px}
.nt-psummary .nt-fbt__form{gap:12px;padding:14px}
.nt-psummary .nt-fbt__submit{flex:1 1 100%;min-width:0;padding:14px 18px}
.nt-psummary .nt-fbt__total{width:100%;justify-content:space-between}

/* ---------------------------------------------------------
   Gallery — main image to thumbnail strip
   --------------------------------------------------------- */
.woocommerce div.product div.images img{border-radius:var(--radius-img)}
.woocommerce div.product div.images .woocommerce-product-gallery__wrapper{margin-bottom:18px}
.woocommerce .quantity .qty{border:1px solid var(--line);border-radius:var(--radius);padding:12px 8px;width:80px;height:48px;text-align:center;font-size:15px}
.woocommerce-message,.woocommerce-info,.woocommerce-error{border-top-color:var(--teal)}
.woocommerce-message::before,.woocommerce-info::before{color:var(--teal)}
.woocommerce table.shop_table{border-radius:var(--radius);border:1px solid var(--line)}
.woocommerce table.shop_table th{background:var(--light)}
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button,.woocommerce #payment #place_order{background:var(--teal);border-radius:var(--radius)}
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button:hover,.woocommerce #payment #place_order:hover{background:var(--teal-darker)}
.woocommerce .product_meta{font-size:13px;color:var(--grey)}
.woocommerce .product_meta a{color:var(--teal)}
.woocommerce span.onsale{background:var(--red)}
.woocommerce-MyAccount-navigation ul li{border-bottom:1px solid var(--line)}
.woocommerce-MyAccount-navigation ul li.is-active a{color:var(--teal);font-weight:700}
.woocommerce .woocommerce-error,.woocommerce .woocommerce-info,.woocommerce .woocommerce-message{border-radius:var(--radius)}

/* Product category header on archive. It now carries nothing but the
   breadcrumb — the category title moved into the banner below — so the strip
   stays slim and hands the vertical space to the banner. */
.nt-cat-head{background:var(--light);border-bottom:1px solid var(--line);padding:11px 0;margin-bottom:0}
.nt-cat-head h1{font-size:24px;margin:0 0 4px}
.nt-cat-head p{color:var(--grey);margin:0}

/* =========================================================
   Mobile drawer
   ========================================================= */
.drawer{position:fixed;top:0;bottom:0;right:0;width:min(88vw,360px);background:#fff;z-index:200;transform:translateX(100%);transition:transform .3s ease;overflow-y:auto;box-shadow:-8px 0 30px rgba(0,0,0,.2)}
.drawer.is-open{transform:translateX(0)}
.overlay{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:190;opacity:0;pointer-events:none;transition:.25s}
.overlay.is-open{opacity:1;pointer-events:auto}
.drawer__head{background:var(--teal-dark);color:#fff;padding:16px 18px;display:flex;justify-content:space-between;align-items:center}
.drawer__head strong{font-size:18px}
.drawer__close{background:none;border:0;color:#fff;font-size:26px;cursor:pointer;line-height:1;padding:0}
.drawer__group{border-bottom:1px solid var(--line)}
.drawer__group>summary{list-style:none;cursor:pointer;padding:15px 18px;font-weight:700;color:var(--ink);display:flex;justify-content:space-between;align-items:center}
.drawer__group>summary::-webkit-details-marker{display:none}
.drawer__group>summary::after{content:"+";font-size:19px;color:var(--teal)}
.drawer__group[open]>summary::after{content:"\2013"}
.drawer__group ul{padding:0 18px 14px}
.drawer__group ul li{margin-bottom:9px}
.drawer__group ul a{color:var(--grey);font-size:14px}
.drawer__plain{padding:15px 18px;display:block;font-weight:700;color:var(--ink);border-bottom:1px solid var(--line)}
.drawer__foot{padding:18px;border-top:0}
.drawer__foot p{margin:0;color:var(--grey);font-size:13px}
.drawer__foot a{color:var(--teal)}
/* Nested levels (four-tier nav) */
.drawer__group ul{list-style:none;margin:0}
.drawer__l1>li{margin:0}
.drawer__subgroup{border-top:1px dashed var(--line)}
.drawer__subgroup>summary{
  list-style:none;cursor:pointer;padding:12px 0 10px;font-weight:700;font-size:14.5px;color:var(--teal);
  display:flex;justify-content:space-between;align-items:center}
.drawer__subgroup>summary::-webkit-details-marker{display:none}
.drawer__subgroup>summary::after{content:"+";font-size:16px;color:var(--teal)}
.drawer__subgroup[open]>summary::after{content:"\2013"}
.drawer__l2{list-style:none;margin:0 0 12px;padding:0 0 0 12px}
.drawer__l2>li{margin-bottom:8px}
.drawer__l2 a{color:var(--grey);font-size:13.8px;line-height:1.5}
.drawer__l2 a:hover{color:var(--teal)}
/* level 4 sits one step in again, quieter */
.drawer__l2 .drawer__l2{padding-left:10px;margin-bottom:6px}
.drawer__l2 .drawer__subgroup>summary{font-size:13.8px;font-weight:700;color:var(--ink-soft);padding:10px 0 8px}
.drawer__l2 .drawer__l2 a{font-size:13.4px}
.drawer__leaf a{display:block}

/* =========================================================
   Responsive — tablet (<=1024)
   ========================================================= */
@media (max-width:1280px){
  .nav__link{padding:15px 14px;font-size:14px}
  .mega--panes{--mega-w:1060px}
  .mega__rail{width:214px;padding-left:20px}
  .mega--panes .mega__rail{width:222px}
  .mega__stage{padding:0 20px}
  .mega__visual{width:216px;padding-left:18px;padding-right:20px}
}
@media (max-width:1024px){
  /* Phone / tablet: the filter sidebar slides in from the left. */
  .nt-filter-toggle{display:inline-flex}
  .nt-shop-layout{grid-template-columns:1fr;gap:0}
  .nt-shop-side{
    position:fixed;top:0;bottom:0;left:0;width:min(86vw,330px);z-index:1200;background:#fff;
    padding:18px 20px 40px;overflow-y:auto;-webkit-overflow-scrolling:touch;
    box-shadow:0 0 40px rgba(0,0,0,.26);transform:translateX(-104%);transition:transform .28s ease}
  .nt-shop-side.is-open{transform:none}
  .nt-shop-side__head{display:flex;align-items:center;justify-content:space-between;margin:0 0 16px}
  .nt-shop-side__head h3{margin:0;font-size:18px}
  .nt-shop-side__close{display:block}
  .nt-shop-side__close{background:none;border:0;font-size:28px;line-height:1;cursor:pointer;color:var(--grey)}
  body.nt-filters-open{overflow:hidden}
  .header__inner{grid-template-columns:auto minmax(0,1fr) auto;gap:12px}
  .header__search{display:none}
  .burger{display:block}
  /* nav becomes a scrollable strip; dropdowns open full-width under the bar */
  .nav__inner{padding:0;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .nav__inner::-webkit-scrollbar{display:none}
  .nav__list{flex-wrap:nowrap;min-width:max-content;padding:0 8px}
  .nav__item{position:static}
  .nav__link{padding:14px 13px;font-size:14px}
  .mega{
    left:0;right:0;width:100%;max-width:none;min-width:0;padding:20px 20px 24px;border-radius:0 0 10px 10px;
    max-height:80vh;overflow-y:auto;-webkit-overflow-scrolling:touch;gap:0}
  /* Touch layout: there is no hover, so the rail and the promo column would
     both be dead weight. Drop them and stack every pane under its own heading. */
  .mega__rail{display:none}
  .mega__visual{display:none}
  .mega__stage{flex:0 0 100%;padding:0;min-height:0}
  .mega__pane{display:block}
  .mega__pane+.mega__pane{margin-top:22px;padding-top:20px;border-top:1px solid var(--line)}
  .mega__flatlist{grid-template-columns:1fr}
  .mega__cols{grid-template-columns:repeat(3,minmax(0,1fr));gap:4px 0}
  /* Columns wrap onto a second row here, so the separators follow the grid
     rhythm instead of the source order. */
  .mega__col{padding:0 16px;border-left:1px solid var(--line)}
  .mega__col:nth-child(3n+1){border-left:0;padding-left:0}
  .mega__col:nth-child(3n+1):not(:first-child){border-top:1px solid var(--line);padding-top:16px}
  .mega__aside{display:none}
  .mega__promo{display:block}
  /* The columns panel is already flat, so it only needs the panel's own
     padding — the desktop rule would double it up. */
  .mega--cols .mega__cols{padding:0}
  .mega--cols .mega__col{padding:0 16px}
  .mega--cols .mega__col:nth-child(3n+1){padding-left:0}
  .nt-subcats__grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:22px 18px}
  .nt-dept__grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 18px}
  .nt-promo{padding:24px 26px}
  .nt-promo__headline{font-size:40px}
  .nt-promo__title{font-size:23px}
  .nt-split{padding:26px 28px;min-height:0}
  .grid-4,.grid-5,.grid-3{grid-template-columns:repeat(3,1fr)}
  .woocommerce ul.products{grid-template-columns:repeat(3,1fr)}
  .woocommerce div.product .related.products ul.products,
  .woocommerce div.product .upsells.products ul.products{grid-template-columns:repeat(3,minmax(0,1fr))!important}
  .nt-fbt__box{max-width:none}
  .hero{height:440px}
  .hero__copy h1,.hero__copy h2{font-size:36px}
  .footer__grid{grid-template-columns:1fr 1fr}
}

/* =========================================================
   Responsive — phone (<=760)
   ========================================================= */
@media (max-width:760px){
  .container{padding:0 14px}
  .topbar__inner{padding:8px 14px}
  .topbar__links{display:none}
  .header__inner{padding:12px 14px;gap:10px}
  .logo__mark{width:36px;height:36px;font-size:17px}
  .logo__name{font-size:18px}
  .logo__sub{font-size:9px;letter-spacing:.14em}
  .header__actions{gap:12px}
  .hd-act span.lbl{display:none}
  .nav{display:none}
  .grid-4,.grid-5,.grid-3,.grid-2{grid-template-columns:repeat(2,1fr);gap:14px}
  .woocommerce ul.products{grid-template-columns:repeat(2,1fr);gap:14px}
  .woocommerce div.product .related.products ul.products,
  .woocommerce div.product .upsells.products ul.products{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .woocommerce div.product .nt-pgal div.images .flex-control-thumbs li{width:calc((100% - 36px)/4)}
  .nt-fbt{margin-top:38px;padding-top:32px}
  .nt-fbt__title{font-size:20px;margin-bottom:16px}
  .nt-fbt__row{grid-template-columns:20px 64px 1fr;gap:12px;padding:14px}
  .nt-fbt__thumb{width:64px;height:64px}
  .nt-fbt__toggle{grid-column:2 / -1;justify-self:start;margin-top:2px;min-width:0}
  .nt-fbt__form{flex-direction:column;align-items:stretch;gap:12px;padding:14px}
  .nt-fbt__submit{min-width:0;width:100%}
  .nt-fbt__total{justify-content:space-between}
  .hero{height:400px}
  .hero__body{padding:0 14px}
  .hero__copy h1,.hero__copy h2{font-size:27px}
  .hero__copy p{font-size:15px}
  .hero__arrow{width:38px;height:38px}
  .hero__arrow--prev{left:10px}
  .hero__arrow--next{right:10px}
  .section{padding:38px 0}
  .section__head h2{font-size:25px}
  .page-hero{padding:24px 0}
  .page-hero h1{font-size:25px}
  .woocommerce .page-title,.nt-cat-head h1{font-size:25px}
  .nt-cat-head{padding:9px 0;margin-bottom:0}
  .nt-cat-banner{min-height:0}
  .nt-cat-banner .container{justify-content:center}
  .nt-subcats{padding:6px 0 46px}
  .nt-subcats__section{margin-bottom:34px}
  .nt-subcats__bar{margin-bottom:18px}
  .nt-subcats__title{font-size:20px}
  .nt-subcats__grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 14px}
  .nt-subcard__name{font-size:14px}
  .nt-coll-title h1{font-size:18px}
  .nt-dept__grid{gap:20px 14px}
  .nt-recs ul.products{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 14px}
  .nt-dept-card__name{font-size:13.5px;margin-top:9px}
  .nt-promo{padding:20px 18px;gap:14px}
  .nt-promo__headline{font-size:32px}
  .nt-promo__kicker{font-size:15px}
  .nt-promo__title{font-size:19px}
  .nt-promo__note{font-size:12px}
  .nt-split{padding:22px 18px;gap:18px}
  /* Narrow screens stack the copy, so the scrim runs top-to-bottom instead. */
  .nt-split::before{background:linear-gradient(180deg,rgba(6,8,14,.12) 0%,rgba(6,8,14,.72) 42%,rgba(6,8,14,.92) 100%)}
  .nt-split__logo{max-width:200px}
  .nt-split__body{width:100%;text-align:left}
  .nt-split__body h2{font-size:19px}
  .nt-split__text{font-size:13.5px}
  .nt-brands__row{gap:22px}
  .nt-brands__item{max-width:130px}
  .footer__grid{grid-template-columns:1fr}
  /* The USP strip is desktop/tablet only — on a phone it eats a screenful. */
  .usp{display:none}
  .news input[type=email]{min-width:100%}
  .footer__bottom{padding:22px 14px 0}
  /* Single product stacks into one column. */
  .nt-pmain{grid-template-columns:1fr;gap:22px}
  .nt-phead__row{gap:10px}
  .nt-phead__row h1.product_title{max-width:100%;font-size:23px}
  .nt-psummary__card{padding:0 18px 20px}
  .woocommerce div.product .nt-psummary__price p.price,
  .woocommerce div.product .nt-psummary__price span.price{font-size:27px}
  .woocommerce div.product div.summary h1.product_title{font-size:23px}
}
@media (max-width:420px){
  .grid-4,.grid-5,.grid-3,.grid-2{grid-template-columns:1fr}
  .woocommerce ul.products{grid-template-columns:1fr}
  .logo__sub{display:none}
  .logo__name{font-size:17px}
}