/* --- 0. WEBFONT ---------------------------------------------------------
   Switzer, self-hosted. Until 28 Oct the theme named the family but never
   declared it; it only rendered on the mini because a local copy resolved.
   Every other device fell back to the system sans. Fontshare licence
   (ITF), free for commercial use. ~95KB for five weights.
   ========================================================================= */
@font-face{font-family:'Switzer';font-weight:400;font-style:normal;font-display:swap;
  src:url('../fonts/switzer-400.woff2') format('woff2')}
@font-face{font-family:'Switzer';font-weight:500;font-style:normal;font-display:swap;
  src:url('../fonts/switzer-500.woff2') format('woff2')}
@font-face{font-family:'Switzer';font-weight:600;font-style:normal;font-display:swap;
  src:url('../fonts/switzer-600.woff2') format('woff2')}
@font-face{font-family:'Switzer';font-weight:700;font-style:normal;font-display:swap;
  src:url('../fonts/switzer-700.woff2') format('woff2')}
@font-face{font-family:'Switzer';font-weight:800;font-style:normal;font-display:swap;
  src:url('../fonts/switzer-800.woff2') format('woff2')}

/* ==========================================================================
   North Peptides — OpenCart 4 theme
   Built on OpenCart's Bootstrap 5 base. Restyle, not a rewrite.

   Order: tokens, base, layout, header, nav, home, cards, catalogue,
   product, cart, forms, footer, motion, responsive.
   One block per concern. !important only where Bootstrap or OpenCart's
   base stylesheet must be beaten, and each one is deliberate.
   ========================================================================== */
@import url('https://api.fontshare.com/v2/css?f[]=switzer@400,500,600,700,800,900&display=swap');

/* --- 1. TOKENS ----------------------------------------------------------- */
:root{
  /* brand: one hue, derived. Changing --brand-h retints the whole theme. */
  --brand-h:254;
  --brand-c:.17;
  --cobalt:oklch(.32 var(--brand-c) var(--brand-h));            /* was #063C89 */
  --cobalt-lift:oklch(from var(--cobalt) calc(l + .07) c h);
  --cobalt-press:oklch(from var(--cobalt) calc(l - .04) c h);
  --deep:oklch(.30 .07 232);                                    /* was #003B5D */

  /* ink + ground */
  --ink-max:#0B0D10;
  --ink:#111317;
  --body:#15181C;
  --muted:oklch(.52 .015 var(--brand-h));
  --bg:#FFFFFF;
  --tint:#EBF3FB;
  --tint-2:#F7FAFD;
  --surface:#F4F5F7;
  --surface-2:#EAECEF;
  --edge:oklch(.90 .018 var(--brand-h));       /* tinted, not #e5e5e5 grey */
  --line-2:#EFF1F4;

  /* status */
  --ok:#17733F;
  --warn:#9A5B00;
  --flag:#B3321E;

  /* type */
  --sans:'Switzer',-apple-system,"Segoe UI",Arial,sans-serif;
  --display:'Switzer',-apple-system,Arial,sans-serif;

  /* geometry */
  --r-xs:4px;    /* badges, chips */
  --r-sm:6px;   /* buttons, inputs */
  --r:8px;      /* cards */
  --r-lg:12px;   /* panels, dropdowns */

  /* motion */
  --ease:cubic-bezier(.4,0,.2,1);
  --squish:cubic-bezier(.34,1.56,.64,1);
  --squish-in:cubic-bezier(.4,0,.6,1);

  /* elevation: layered, because single-layer shadows read flat */
  --sh-1:
    0 1px 2px -1px oklch(.32 .06 var(--brand-h) / .10),
    0 2px 6px -2px oklch(.32 .06 var(--brand-h) / .08);
  --sh-2:
    0 2px 4px -2px oklch(.32 .06 var(--brand-h) / .10),
    0 8px 18px -8px oklch(.32 .06 var(--brand-h) / .14);
  --sh-3:
    0 4px 8px -4px oklch(.32 .06 var(--brand-h) / .10),
    0 14px 34px -18px oklch(.32 .08 var(--brand-h) / .30);
  --sh-cobalt:
    0 1px 2px -1px oklch(from var(--cobalt) l c h / .30),
    0 8px 18px -8px oklch(from var(--cobalt) l c h / .34);
  --sh-deep:
    0 1px 2px -1px oklch(from var(--deep) l c h / .32),
    0 8px 18px -8px oklch(from var(--deep) l c h / .36);
  --glow:0 0 0 6px oklch(from var(--cobalt) l c h / .10);
}

/* --- 1b. BOOTSTRAP BRIDGE ------------------------------------------------
   Feed tokens into Bootstrap's variables instead of overriding its components.
   This sheet must load AFTER bootstrap.css (registered in header.twig).      */
:root{
  --bs-primary:var(--cobalt);
  --bs-link-color:var(--cobalt);
  --bs-link-hover-color:var(--cobalt-lift);
  --bs-body-color:var(--body);
  --bs-body-font-family:var(--sans);
  --bs-border-color:var(--edge);
  --bs-border-radius:var(--r-sm);
  --bs-border-radius-sm:var(--r-xs);
  --bs-border-radius-lg:var(--r);
  --bs-focus-ring-color:oklch(from var(--cobalt) l c h / .18);
}

/* --- 2. BASE ------------------------------------------------------------- */
*{box-sizing:border-box}
body{font-family:var(--sans);color:var(--body);background:var(--tint-2);
  font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased}
body,input,select,textarea,button{font-family:var(--sans)}
h1,h2,h3,h4,h5,h6,legend{font-family:var(--display);color:var(--ink-max);
  font-weight:700;letter-spacing:-.02em}
a{color:var(--cobalt);text-decoration:none}
a:hover{color:var(--cobalt-lift)}
p,li,td,th,label,.form-text{font-size:16px}
p{max-width:62ch}
small,.small{font-size:15px}
*{text-shadow:none}

/* --- 3. LAYOUT ----------------------------------------------------------- */
.container{max-width:1340px}
#content h1{font-size:40px;letter-spacing:-.03em;line-height:1.05;font-weight:800;margin:0 0 12px}
#content h3{font-size:24px;font-weight:700;letter-spacing:-.025em;margin:0 0 16px}
.np-crumb,.breadcrumb{background:none;padding:14px 0 6px;margin:0;font-size:15px;
  display:flex;gap:6px;list-style:none;flex-wrap:wrap}
.np-crumb li::after{content:"/";margin-left:6px;color:var(--muted)}
.np-crumb li:last-child::after{content:""}
.np-crumb a{color:var(--muted)}
.np-crumb li:last-child a{color:var(--ink-max)}
.breadcrumb-item::before{display:none}

/* --- 4. HEADER ----------------------------------------------------------- */
#top{background:var(--deep);min-height:0;position:relative;z-index:30}
#top .np-toprow{flex-wrap:nowrap;align-items:center;min-height:34px;margin:0}
#top .np-toprow > div{padding:0}
#top .np-topright ul{display:flex;gap:14px;justify-content:flex-end;flex-wrap:nowrap;margin:0}
#top .list-inline-item{margin:0}
#top,#top a,#top .btn-link,#top .dropdown-toggle,#top span{
  color:rgba(255,255,255,.72);font-size:13.5px}
#top a:hover,#top .btn-link:hover{color:#fff}
#top .btn-link{padding:.2rem .5rem;text-decoration:none}
#top i{font-size:12.5px;opacity:.72}
#top .dropdown-menu{position:absolute;background:#fff;border:1px solid var(--edge);
  border-radius:var(--r-sm);box-shadow:var(--sh-3);min-width:180px;padding:6px;margin-top:6px}
#top .dropdown-menu .dropdown-item{color:var(--ink-max);font-size:14px;border-radius:4px;padding:7px 10px}
#top .dropdown-menu .dropdown-item:hover{background:var(--tint)}

header{background:#fff;box-shadow:0 1px 0 var(--edge)}
#logo{margin:0;padding:18px 0 16px;position:relative;z-index:5}
/* Wordmark. One colour (navy) so it reads as one brand, not black-plus-navy.
   SWIFT LAB is the mark; PEPTIDES is a subordinate descriptor: smaller,
   lighter, tracked but not stretched to the line width. A second line that
   runs the full width competes with the first instead of sitting under it. */
.np-wordmark{display:inline-flex;flex-direction:column;align-items:flex-start;
  line-height:1;text-decoration:none;width:max-content}
.np-wm-main{font-family:var(--display);font-weight:800;font-size:35px;
  letter-spacing:-.035em;color:var(--cobalt);white-space:nowrap}
.np-wm-sp{display:inline-block;width:.18em}
.np-wm-sub{font-family:var(--display);font-weight:600;font-size:12.5px;
  letter-spacing:.22em;color:oklch(.52 .03 var(--brand-h));margin-top:6px;
  white-space:nowrap;padding-left:.08em}
.np-wordmark:hover .np-wm-main{color:var(--cobalt-lift)}
.np-wordmark:hover .np-wm-sub{color:var(--cobalt)}

#search .form-control{height:44px;border:1px solid var(--edge);border-right:0;
  border-radius:var(--r-sm) 0 0 var(--r-sm);background:#fff;font-size:15px}
#search .btn{height:44px;background:var(--deep);border:0;color:#fff;padding:0 20px;
  border-radius:0 var(--r-sm) var(--r-sm) 0}
#search .btn:hover{background:var(--cobalt)}

/* --- 5. NAV -------------------------------------------------------------- */
#menu{background:#fff;border:0;border-top:1px solid var(--edge);
  box-shadow:0 1px 0 var(--edge);padding:0}
#menu .nav-link{color:var(--ink-max);font-weight:600;font-size:15px;
  padding:11px 14px;border:0;border-radius:var(--r-sm);margin:5px 2px}
#menu .nav-link:hover{color:var(--cobalt);background:var(--tint)}
#menu .dropdown-menu{border:0;border-radius:var(--r-sm);padding:6px;box-shadow:var(--sh-3)}
#menu .dropdown-item{border-radius:4px;font-size:15px;padding:7px 12px;color:var(--ink-max)}
#menu .dropdown-item:hover{background:var(--tint)}
#menu .navbar-toggler{border-color:var(--edge);margin:8px 0}
#category{color:var(--ink-max);background:var(--surface-2);padding:12px 16px;
  border-radius:4px;font-weight:700;font-size:16px;margin-bottom:12px}

/* --- 6. HOME ------------------------------------------------------------- */
.np-hero{display:grid;grid-template-columns:1.15fr .85fr;gap:56px;align-items:center;padding:52px 0 44px}
.np-hero-eyebrow{font-size:14px;color:var(--cobalt);font-weight:700;margin:0 0 14px}
.np-hero h1{font-size:58px;line-height:1.0;letter-spacing:-.04em;font-weight:800;
  margin:0 0 18px;color:var(--ink-max)}
.np-hero .np-lede{font-size:19px;line-height:1.55;color:var(--body);margin:0 0 26px;max-width:52ch}
.np-hero-actions{display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.np-link{font-size:16px;font-weight:600;color:var(--cobalt);
  text-decoration:underline;text-underline-offset:4px}

.np-hero-panel{background:#fff;border:1px solid var(--edge);border-radius:var(--r-lg);
  box-shadow:var(--sh-3);padding:22px}
.np-dispatch-live{display:flex;gap:12px;align-items:flex-start;background:var(--tint);
  border:1px solid var(--edge);border-radius:var(--r-sm);padding:14px 16px;margin-bottom:18px}
.np-dispatch-live strong{display:block;font-size:16px;color:var(--ink-max)}
.np-dispatch-live span{font-size:15px;color:var(--muted)}
.np-dot{width:9px;height:9px;border-radius:50%;background:var(--ok);margin-top:7px;
  flex:none;box-shadow:0 0 0 4px rgba(23,115,63,.14)}
.np-hero-facts{margin:0;display:grid;gap:1px;background:var(--edge);
  border-radius:var(--r-sm);overflow:hidden}
.np-hero-facts > div{display:flex;justify-content:space-between;gap:16px;background:#fff;padding:12px 16px}
.np-hero-facts dt{font-size:15px;color:var(--muted);margin:0}
.np-hero-facts dd{font-size:15px;margin:0;font-weight:600;color:var(--ink-max);
  font-variant-numeric:tabular-nums;text-align:right}

.np-usp{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--edge);
  list-style:none;margin:0 0 44px;padding:0;border-radius:12px;overflow:hidden;box-shadow:var(--sh-1)}
.np-usp li{background:#fff;padding:16px 18px;font-size:15px;color:var(--body);
  line-height:1.45;transition:background .2s var(--ease)}
.np-usp li:hover{background:var(--tint)}
.np-usp strong{display:block;color:var(--ink-max);font-size:16px;margin-bottom:3px}

.np-tiles{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:46px}
.np-tile{display:block;background:#fff;border:1px solid var(--edge);border-radius:var(--r-lg);
  padding:30px 28px;box-shadow:var(--sh-1);
  transition:transform .25s var(--squish),box-shadow .25s var(--ease),background .2s var(--ease)}
.np-tile:hover{transform:translateY(-3px);box-shadow:var(--sh-2);background:var(--tint-2)}
.np-tile:active{transform:scale(.99) translateY(-1px)}
.np-tile h2{font-size:26px;letter-spacing:-.025em;margin:0 0 10px;color:var(--ink-max)}
.np-tile p{font-size:16px;color:var(--body);margin:0 0 18px;max-width:42ch}
.np-tile-go{font-size:15px;font-weight:700;color:var(--cobalt)}
.np-tile-alt{background:var(--deep);border-color:var(--deep)}
.np-tile-alt:hover{background:#004B75}
.np-tile-alt h2,.np-tile-alt p{color:#fff}
.np-tile-alt .np-tile-go{color:#8FA9E8}

/* --- 7. PRODUCT CARD ----------------------------------------------------- */
.product-thumb{background:#fff;border:1px solid var(--edge);border-radius:var(--r);
  display:flex;flex-direction:column;overflow:hidden;position:relative;
  box-shadow:var(--sh-1);
  transition:box-shadow .25s var(--ease),transform .25s var(--ease),border-color .25s var(--ease)}
.product-thumb:hover{transform:translateY(-3px) scale(1.008);box-shadow:var(--sh-3);
  border-color:oklch(from var(--cobalt) l c h / .35)}
.product-thumb:active{transform:translateY(-1px) scale(.995);transition-duration:.08s}
.product-thumb .image{background:linear-gradient(#EBF5FF,#fff);
  border-bottom:1px solid var(--edge);border-radius:var(--r) var(--r) 0 0;position:relative}
.product-thumb .image img{width:100%;aspect-ratio:1/1;object-fit:contain;padding:14px;
  max-height:190px;display:block;transition:transform .35s var(--ease)}
.product-thumb:hover .image img{transform:scale(1.03)}

.product-thumb .description > p{display:none}
.product-thumb .np-card-title{font-size:16px;margin:0 0 10px;line-height:1.25}
.product-thumb .np-card-title a{color:var(--ink-max)}
.product-thumb .np-card-title a:hover{color:var(--cobalt)}
.np-meta{display:grid;grid-template-columns:auto 1fr;gap:3px 9px;margin:0 0 14px}
.np-meta dt{color:var(--muted);font-weight:400;font-size:13.5px}
.np-meta dd{margin:0;font-size:13.5px;color:var(--body);font-variant-numeric:tabular-nums}
.product-thumb .price{margin:0;padding:12px 0 0;border-top:1px solid var(--edge);
  display:flex;align-items:baseline;gap:7px}
.np-from{font-size:13px;color:var(--muted)}
.product-thumb .price-new{font-size:21px;font-weight:700;color:var(--ink-max);
  letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.product-thumb .price-old{font-size:14px;color:var(--muted);text-decoration:line-through}
.product-thumb .price-tax{display:none}
.np-tier-hint{font-size:13.5px;color:var(--ok);font-weight:500;margin:5px 0 0}

.np-badge{position:absolute;top:9px;right:9px;z-index:2;font-size:12px;font-weight:600;
  padding:3px 8px;border-radius:var(--r-xs);background:rgba(255,255,255,.92);
  color:var(--ok);border:1px solid var(--edge)}
.np-badge.out{color:var(--muted)}
.product-thumb .rating{display:none}

.product-thumb .button button{min-width:0;margin:0;border-radius:var(--r-sm);
  transition:transform .32s var(--squish),background .2s var(--ease),box-shadow .25s var(--ease)}
/* Kept full-width on purpose: it fills the 1fr track of
   grid-template-columns:minmax(0,1fr) 38px 38px. A full-width primary action
   is the conversion pattern here — bigger tap target, consistent rhythm down
   the grid, icons stay secondary by being small. Height raised 40->44 to
   match the hero button and sit nearer the 46px search/cart controls. */
.product-thumb .button button[formaction*="cart"]{width:100%;height:44px;font-size:14px;
  font-weight:600;background:var(--deep);border:0;color:#fff;
  box-shadow:var(--sh-deep),inset 0 1px 0 rgba(255,255,255,.12)}
.product-thumb .button button[formaction*="cart"]::after{content:" Add to basket"}
.product-thumb .button button[formaction*="cart"]:hover{background:var(--cobalt);
  transform:translateY(-1px)}
.product-thumb .button button:not([formaction*="cart"]){width:44px;height:44px;padding:0;
  background:#fff;border:1px solid var(--edge);color:var(--muted)}
.product-thumb .button button:not([formaction*="cart"]):hover{border-color:var(--ink-max);color:var(--ink-max)}
.product-thumb .button button:active{transform:scale(.94);transition-duration:.08s;
  transition-timing-function:var(--squish-in);
  box-shadow:0 1px 2px rgba(15,23,42,.18),inset 0 1px 2px rgba(0,0,0,.10)}
.product-thumb .button button:not([formaction*="cart"]):active{transform:scale(.88)}

/* --- 8. CATALOGUE -------------------------------------------------------- */
.np-cathead{padding:22px 0 18px}
.np-cathead h1,#content > .np-cathead h1{font-size:46px;letter-spacing:-.035em;
  line-height:1.02;max-width:16ch;margin:0 0 10px}
.np-cathead p,.np-lede{font-size:18px;color:var(--body);max-width:62ch;margin:0}
.np-toolbar{display:flex;align-items:center;justify-content:space-between;gap:16px;
  background:var(--surface);border-radius:var(--r-sm);padding:10px 14px;
  margin-bottom:16px;flex-wrap:wrap}
.np-toolbar-count{font-size:15px;color:var(--muted);font-variant-numeric:tabular-nums}
.np-toolbar-controls{display:flex;align-items:center;gap:8px}
.np-toolbar-controls label{font-size:14px;color:var(--muted);margin:0}
.np-toolbar-controls .form-select{width:auto;min-width:112px;height:34px;
  padding:4px 28px 4px 10px;font-size:14px;border:0;background-color:#fff;border-radius:4px}
.np-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.pagination{--bs-pagination-color:var(--ink-max);--bs-pagination-active-bg:var(--cobalt);
  --bs-pagination-active-border-color:var(--cobalt);--bs-pagination-border-radius:6px}

#column-left .list-group-item{border:0;padding:7px 10px;border-radius:4px;
  font-size:15px;color:var(--ink-max);background:none}
#column-left .list-group-item:hover{background:var(--surface)}
#column-left .list-group-item.active{background:var(--surface-2);color:var(--ink-max);font-weight:700}
#column-left h3{font-size:16px;font-weight:700;padding:0 0 10px;background:none;border:0}

/* --- 9. PRODUCT PAGE ----------------------------------------------------- */
#product-thumb img,.thumbnails img{width:100%;max-width:460px;height:auto;
  background:var(--surface);border-radius:var(--r);padding:20px}
.thumbnails a,#product-thumb a{border:0}
#product .price-new,#content .h2{font-size:38px;font-weight:800;letter-spacing:-.03em;
  font-variant-numeric:tabular-nums}
.np-spec,#tab-specification table{width:100%;border:0;border-radius:var(--r-sm);overflow:hidden}
.np-spec tr:nth-child(odd),#tab-specification tr:nth-child(odd){background:var(--surface)}
.np-spec th,.np-spec td,#tab-specification td,#tab-specification th{
  padding:9px 13px;border:0;font-size:15px}
.np-spec th{text-align:left;font-weight:500;color:var(--muted);width:42%}
.np-tier{width:100%;border:0;border-radius:var(--r-sm);overflow:hidden;
  font-variant-numeric:tabular-nums;font-size:15px}
.np-tier th{background:var(--surface);font-size:13px;text-transform:uppercase;
  letter-spacing:.06em;color:var(--muted);font-weight:600;padding:8px 12px;text-align:left}
.np-tier td{padding:8px 12px;border:0}
.np-tier tr:nth-child(even){background:var(--surface)}
.np-tier .save{color:var(--ok)}
.np-dispatch{display:flex;gap:8px;align-items:center;border:0;background:none;
  padding:0;font-size:14.5px;color:var(--body)}
/* Plain text, no box. A coloured left-border callout is a stock AI-design
   pattern; the statement carries itself. */
.np-ruo{border:0;background:none;padding:0;margin-top:14px;
  font-size:14px;line-height:1.55;color:var(--muted);max-width:62ch}
.np-ruo strong{color:var(--ink-max);font-weight:600}
#tab-specification{display:block;margin-top:28px}
#tab-review,.nav-tabs li:nth-child(3){display:none}
.nav-tabs{border-bottom:1px solid var(--edge);margin-top:34px}
.nav-tabs .nav-link{color:var(--muted);font-weight:600;font-size:15px;border:0;
  border-bottom:2px solid transparent;background:none}
.nav-tabs .nav-link.active{color:var(--ink-max);border-bottom-color:var(--ink-max)}
.tab-content{padding-top:8px}

/* --- 10. CART DROPDOWN --------------------------------------------------- */
.np-cart{width:400px;max-width:92vw;padding:0;border:1px solid var(--edge);
  border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--sh-3);margin-top:10px;background:#fff}
.np-cart > li{list-style:none}
.np-cart-items{max-height:320px;overflow-y:auto}
.np-cart-row{display:grid;grid-template-columns:52px 1fr auto;gap:12px;align-items:center;
  padding:13px 15px;border-bottom:1px solid var(--edge)}
.np-cart-row:last-child{border-bottom:0}
.np-cart-img{display:block;width:52px;height:52px;border-radius:var(--r-sm);
  background:var(--tint-2);border:1px solid var(--edge);overflow:hidden;flex:none}
.np-cart-img img{width:100%;height:100%;object-fit:contain;padding:4px}
.np-cart-detail{min-width:0;display:flex;flex-direction:column;gap:3px}
.np-cart-name{font-size:14.5px;font-weight:600;color:var(--ink-max);line-height:1.3;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.np-cart-name:hover{color:var(--cobalt)}
.np-cart-qty,.np-cart-opt{font-size:13px;color:var(--muted)}
.np-cart-right{display:flex;align-items:center;gap:9px}
.np-cart-price{font-size:15px;font-weight:700;color:var(--ink-max);
  font-variant-numeric:tabular-nums;white-space:nowrap}
.np-cart-remove{width:26px;height:26px;border-radius:50%;border:0;background:var(--tint);
  color:var(--muted);display:inline-flex;align-items:center;justify-content:center;
  font-size:12px;cursor:pointer;
  transition:background .18s var(--ease),color .18s var(--ease),transform .2s var(--squish)}
.np-cart-remove:hover{background:#FDE8E8;color:var(--flag)}
.np-cart-remove:active{transform:scale(.88)}
.np-cart-totals{background:var(--tint-2);padding:10px 15px}
.np-cart-total-row{display:flex;justify-content:space-between;align-items:baseline;
  font-size:14px;color:var(--muted);padding:3px 0}
.np-cart-total-row span:last-child{font-variant-numeric:tabular-nums}
.np-cart-total-row:last-child{font-size:16px;font-weight:700;color:var(--ink-max);
  padding-top:7px;margin-top:4px;border-top:1px solid var(--edge)}
.np-cart-actions{display:grid;grid-template-columns:1fr 1fr;gap:9px;padding:13px 15px 15px}
.np-cart-btn{display:flex;align-items:center;justify-content:center;height:43px;
  border-radius:var(--r-sm);font-size:14.5px;font-weight:600;
  transition:background .18s var(--ease),transform .25s var(--squish),box-shadow .2s var(--ease)}
.np-cart-btn:active{transform:scale(.95)}
.np-cart-btn-ghost{background:var(--tint);color:var(--ink-max)}
.np-cart-btn-ghost:hover{background:var(--edge);color:var(--ink-max)}
.np-cart-btn-solid{background:var(--cobalt);color:#fff;box-shadow:var(--sh-cobalt)}
.np-cart-btn-solid:hover{background:var(--cobalt-lift);color:#fff}
.np-cart-empty{padding:30px 16px;text-align:center;color:var(--muted);font-size:15px}

/* --- 11. BUTTONS + FORMS ------------------------------------------------- */
.btn{border-radius:var(--r-sm);font-weight:600;
  transition:transform .32s var(--squish),background .2s var(--ease),box-shadow .25s var(--ease)}
.btn:active{transform:scale(.94);transition-duration:.08s;transition-timing-function:var(--squish-in)}
.np-btn-primary,#button-cart,.btn-primary,#cart .btn,#cart .btn-lg{
  background:var(--cobalt);border:0;color:#fff;
  box-shadow:var(--sh-cobalt),inset 0 1px 0 rgba(255,255,255,.14)}
.np-btn-primary:hover,#button-cart:hover,.btn-primary:hover,#cart .btn:hover,#cart .btn-lg:hover{
  background:var(--cobalt-lift);color:#fff;transform:translateY(-1px)}
/* 44px tall, not 58.8px. Measured: 15px padding + 16px text + borders
   overshot every other control on the page (search and cart are 46px). */
.np-btn-primary{padding:10px 20px;font-size:15px;font-weight:700;
  min-height:44px;display:inline-flex;align-items:center;justify-content:center}
#button-cart{height:48px;font-size:15px;font-weight:700}
#cart .btn,#cart .btn-lg{height:44px;padding:0 20px;font-size:15px;border-radius:var(--r-sm)}

.form-control,.form-select{background:var(--surface);border:0;border-radius:var(--r-sm);
  padding:11px 12px;font-size:16px}
.form-control:focus,.form-select:focus{background:#fff;box-shadow:var(--glow);outline:none}
.input-group-text{background:var(--surface-2);border:0}
.card,.card-header,.list-group,.list-group-item,.table,fieldset,legend,hr{border:0}
.card-header{background:var(--surface);font-weight:700}
.table tr:nth-child(odd) td{background:var(--surface)}
.btn:focus-visible,#button-cart:focus-visible,.np-btn-primary:focus-visible,
.product-thumb .button button:focus-visible{outline:none;
  box-shadow:0 0 0 3px #fff,0 0 0 6px var(--cobalt)}

/* below-fold sections skip rendering until near the viewport.
   contain-intrinsic-size is mandatory or the scrollbar jumps. */
footer,.np-tiles{content-visibility:auto;contain-intrinsic-size:auto 420px}

/* --- 12. FOOTER ---------------------------------------------------------- */
footer{background:var(--surface);border:0;margin-top:56px;padding:36px 0 0;color:var(--body)}
footer .np-foot-h{font-size:16px;color:var(--ink-max);font-weight:700;margin-bottom:12px;
  text-transform:none;letter-spacing:0}
footer a{color:var(--body);font-size:16px;display:block;padding:3px 0}
footer a:hover{color:var(--cobalt)}
footer hr{display:none}
.np-legal{font-size:14px;color:var(--muted);padding:16px 0 22px;margin:0}

/* --- 13. MOTION ---------------------------------------------------------- */
@keyframes np-rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){
  .np-hero-panel,.np-usp li,.np-tile,.np-grid > *{animation:none}
}
/* The hero copy holds the h1 (the LCP element) and is deliberately NOT faded:
   Chrome does not count paints at opacity:0 as LCP candidates, so an entrance
   animation here reports NO_LCP until something else repaints. */
.np-hero-panel{animation:np-rise .5s var(--ease) .08s both}
.np-usp li{animation:np-rise .45s var(--ease) backwards;
  animation-delay:calc(min(sibling-index() - 1, 8) * 60ms)}
@supports not (animation-delay:calc(sibling-index() * 1ms)){
  .np-usp li:nth-child(2){animation-delay:.06s}
  .np-usp li:nth-child(3){animation-delay:.12s}
  .np-usp li:nth-child(4){animation-delay:.18s}
}
.np-grid > *{animation:np-rise .42s var(--ease) backwards;
  animation-delay:calc(min(sibling-index() - 1, 8) * 45ms)}
.np-tile{animation:np-rise .5s var(--ease) .1s both}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms;animation-iteration-count:1;
    transition-duration:.01ms;scroll-behavior:auto}
  .product-thumb:hover,.product-thumb:active,.np-tile:hover,.np-tile:active,
  .btn:active,.product-thumb .button button:active,.np-cart-btn:active{transform:none}
}

/* --- 14. RESPONSIVE ------------------------------------------------------ */
@media(min-width:1500px){.np-grid{grid-template-columns:repeat(5,1fr)}}
@media(max-width:1100px){.np-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:991px){
  .container{padding-left:20px;padding-right:20px}
  .np-hero{grid-template-columns:1fr;gap:30px;padding:30px 0 28px}
  .np-hero h1{font-size:40px}
  .np-usp{grid-template-columns:1fr 1fr}
  .np-tiles{grid-template-columns:1fr}
  #menu .nav-link{margin:2px 0}
}
@media(max-width:820px){.np-grid{grid-template-columns:repeat(2,1fr);gap:10px}}
@media(max-width:575px){
  #content h1,.np-cathead h1{font-size:28px}
  .np-hero h1{font-size:32px}
  .np-hero .np-lede{font-size:17px}
  .np-usp{grid-template-columns:1fr}
  .np-wm-main{font-size:27px}
  .np-toolbar{flex-direction:column;align-items:flex-start;gap:8px}
  .product-thumb .button button[formaction*="cart"]::after{content:" Add"}
  #product .price-new{font-size:28px}
}

/* --- 15. STICKY ADD TO CART (mobile) -------------------------------------
   The evidenced alternative to a FAB: Material deprecated the speed dial,
   and Baymard found 60% of testers missed an unlabelled floating control.
   MyProtein and Thorne both ship this pattern. Deliberately NOT full width
   (Baymard #791: competing full-width CTAs hurt).                          */
.np-atc-bar{display:none}
@media(max-width:991.98px){
  .np-atc-bar{
    position:fixed;inset:auto 0 0 0;z-index:1040;
    display:flex;gap:.75rem;align-items:center;
    padding:.7rem clamp(.75rem,4vw,1.25rem);
    padding-bottom:calc(.7rem + env(safe-area-inset-bottom));
    background:color-mix(in oklch, #fff 94%, transparent);
    backdrop-filter:blur(12px) saturate(1.3);
    border-top:1px solid var(--edge);
    box-shadow:0 -8px 24px -16px oklch(.32 .06 var(--brand-h) / .35);
  }
  .np-atc-info{display:flex;flex-direction:column;min-width:0;gap:1px}
  .np-atc-name{font-size:13px;color:var(--muted);white-space:nowrap;
    overflow:hidden;text-overflow:ellipsis}
  .np-atc-price{font-size:17px;font-weight:700;color:var(--ink-max);
    font-variant-numeric:tabular-nums}
  .np-atc-btn{flex:0 1 13rem;margin-inline-start:auto;height:46px;
    background:var(--cobalt);color:#fff;border:0;border-radius:var(--r-sm);
    font-size:15px;font-weight:700;box-shadow:var(--sh-cobalt);
    transition:transform .32s var(--squish),background .2s var(--ease)}
  .np-atc-btn:active{transform:scale(.95);transition-duration:.08s}

  /* WCAG 2.2 SC 2.4.11 Focus Not Obscured (AA): a sticky bar must not hide
     a keyboard-focused field. scroll-padding is the named passing technique. */
  html{scroll-padding-bottom:5.5rem;scroll-padding-top:4.5rem}
  body{padding-bottom:4.5rem}
}
@media(prefers-reduced-motion:no-preference){
  @media(max-width:991.98px){
    .np-atc-bar{animation:np-atc-up .22s var(--ease) both}
    @keyframes np-atc-up{from{transform:translateY(100%)}}
  }
}

/* --- 16. MOBILE HEADER FIXES ---------------------------------------------
   The account dropdown rendered open and overflowed the viewport; the
   category accordion left an empty toggle box beside its label.           */
@media(max-width:991.98px){
  #top .dropdown-menu{right:0;left:auto;max-width:calc(100vw - 24px)}
  #top .dropdown-menu:not(.show){display:none}
  .dropdown-menu{max-width:calc(100vw - 24px)}

  /* category accordion: label and chevron in one bar, no empty box */
  #category{display:flex;align-items:center;justify-content:space-between;
    width:100%;margin:0 0 10px}
  #column-left > .list-group,#column-left .card{border:0;background:none}
  #column-left .btn,#column-left .navbar-toggler{border:0;background:none;
    box-shadow:none;padding:0;width:auto}

  /* breadcrumb shouldn't look like a card on mobile */
  .np-crumb,.breadcrumb{background:none;border:0;padding:10px 0 4px}
}
/* the breadcrumb chevrons are OpenCart's default sprite look: drop them */
.breadcrumb-item + .breadcrumb-item::before{content:none}

/* --- 17. BREADCRUMB + MOBILE REMNANTS ------------------------------------
   Templates use plain .breadcrumb, so the .np-crumb rules never applied and
   OpenCart's chevron sprite survived. Also: an empty category list-group on
   mobile, and the h1 sitting under the sticky bar.                         */
.breadcrumb{background:none;border:0;padding:14px 0 6px;margin:0;
  display:flex;gap:6px;flex-wrap:wrap;font-size:15px;list-style:none}
.breadcrumb .breadcrumb-item{display:flex;align-items:center;gap:6px}
.breadcrumb .breadcrumb-item::before,
.breadcrumb .breadcrumb-item::after{content:none}
.breadcrumb .breadcrumb-item:not(:last-child)::after{
  content:"/";color:var(--muted);margin-left:6px}
.breadcrumb a{color:var(--muted)}
.breadcrumb a:hover{color:var(--cobalt)}
.breadcrumb .breadcrumb-item:last-child a{color:var(--ink-max);font-weight:600}

@media(max-width:991.98px){
  /* an empty list-group renders as a stray pill: hide when it has no links */
  #column-left .list-group:not(:has(a)),
  #column-left .list-group-item:empty{display:none}
  #column-left{margin-bottom:8px}
  #category{border-radius:var(--r-sm)}

  /* the sticky bar covers content: body padding must clear it */
  body{padding-bottom:5.5rem}
}

/* --- 18. KILL THE BREADCRUMB CHEVRON SPRITE ------------------------------
   OpenCart's base sheet draws separators as a 29px square rotated -45deg
   with two borders, positioned absolutely. `content:none` does not remove
   it because the rule also sets width/height/borders/transform. The stray
   "empty pill" on mobile was this same pseudo-element on the last item.  */
.breadcrumb{border:0;background:none;margin:0;padding:14px 0 6px}
.breadcrumb > li.breadcrumb-item{padding:0;text-shadow:none;white-space:normal}
.breadcrumb > li.breadcrumb-item::after{
  content:"/";display:inline;position:static;width:auto;height:auto;
  border:0;transform:none;color:var(--muted);margin:0 8px;top:auto;right:auto}
.breadcrumb > li.breadcrumb-item:last-child::after{content:none;margin:0}
.breadcrumb i{font-size:14px}

/* --- 19. MOBILE MENU BUTTON ----------------------------------------------
   The toggler was rendering as an empty 44x27 pill: its icon glyph was not
   painting and a broad sidebar rule had stripped its styling. Labelled
   rather than icon-only, per the icon-usability evidence.                 */
.np-menu-btn{display:inline-flex;align-items:center;gap:8px;
  padding:9px 14px;border:1px solid var(--edge);border-radius:var(--r-sm);
  background:#fff;color:var(--ink-max);font-size:15px;font-weight:600;
  width:auto;height:auto;box-shadow:var(--sh-1)}
.np-menu-btn:hover{background:var(--tint)}
.np-menu-btn i{font-size:14px}
@media(max-width:991.98px){
  #menu{padding:10px 0;background:transparent;box-shadow:none;border:0}
  #menu .navbar-collapse{margin-top:8px}
  #menu .nav-link{padding:10px 12px;background:#fff;border-radius:var(--r-sm);
    margin:3px 0;border:1px solid var(--edge)}
}

/* --- 20. HEADER CONTRAST + DROPDOWN BEHAVIOUR ----------------------------
   Nav links were washed out (inherited muted colour), and the account
   dropdown rendered permanently open because Bootstrap's .show class was
   never the only thing controlling display.                              */
#menu .nav-link,#menu .nav-link:link,#menu .nav-link:visited{
  color:var(--ink-max);font-weight:600;opacity:1}
#menu .nav-item > .nav-link{color:var(--ink-max)}
#menu .nav-link:hover,#menu .nav-link:focus{color:var(--cobalt);background:var(--tint)}

/* dropdowns stay closed until Bootstrap opens them */
.dropdown-menu:not(.show){display:none}
#top .dropdown-menu:not(.show),
#menu .dropdown-menu:not(.show),
#cart .dropdown-menu:not(.show){display:none}
.dropdown-menu.show{display:block}

/* account menu: readable, contained */
#top .dropdown-menu{right:0;left:auto;min-width:190px}
#top .dropdown-menu .dropdown-item{color:var(--ink-max);font-weight:500}

/* Top-level nav. OpenCart's base gives childless categories dropdown-item,
   so they rendered as three bold dropdown rows in a flex bar. menu.twig now
   emits nav-link for them (dropdown-item stays inside dropdown-menu only)
   and marks the current category active via np_path from twig.php. */
#menu .navbar-nav{gap:28px}
#menu .navbar-nav > .nav-item > .nav-link{font-weight:500;font-size:15px;color:var(--ink);
  padding:15px 0;border-bottom:2px solid transparent;border-radius:0;background:none;
  transition:color .15s var(--ease),border-color .15s var(--ease)}
#menu .navbar-nav > .nav-item > .nav-link:hover,
#menu .navbar-nav > .nav-item > .nav-link.active{color:var(--cobalt);border-bottom-color:var(--cobalt)}
#menu .navbar-nav > .nav-item > .nav-link.active{font-weight:600}
#menu .navbar-nav{align-items:center;gap:2px}
#menu .nav-item{list-style:none}

/* --- 22. NAV BAR: part of the header, not a floating card ---------------
   The nav was rendering as a bordered white panel sitting below the header
   with a gap, because .container gave it its own box. It should read as one
   continuous header: white band, hairline under, links flush left with the
   wordmark above.                                                         */
#menu{background:#fff;border:0;border-top:1px solid var(--edge);
  border-bottom:1px solid var(--edge);border-radius:0;
  box-shadow:none;padding:0;margin:0}
#menu > .container{padding-left:0;padding-right:0}
.np-menu,#menu.np-menu{background:#fff;border-radius:0;box-shadow:none}
/* the wrapper OpenCart puts around the nav */
#menu .navbar-collapse{padding:0}
#menu .navbar-nav{gap:0;margin-left:-14px}
#menu .navbar-nav > .nav-item > .dropdown-item,
#menu .navbar-nav > .nav-item > .nav-link{
  margin:0;border-radius:0;padding:14px 14px;
  border-bottom:2px solid transparent}
#menu .navbar-nav > .nav-item > .dropdown-item:hover,
#menu .navbar-nav > .nav-item > .nav-link:hover{
  background:transparent;color:var(--cobalt);border-bottom-color:var(--cobalt)}
/* header and nav form one block */
header{box-shadow:none;border-bottom:0}

/* the band spans the viewport; the nav inside it keeps the page gutter */
/* The band used to be #fff over a --tint-2 body. That hard white-to-blue
   step under a bordered bar reads as a drop shadow even though no box-shadow
   exists anywhere. Matching the header's white and carrying it to the hero
   removes the step; one 1px bottom border does the separating. */
.np-menu-band{background:#fff;border-top:1px solid var(--edge);
  border-bottom:1px solid var(--edge);width:100%}
.np-common-home header,.np-common-home .np-menu-band{background:#fff}
.np-common-home .np-hero{background:#fff;
  margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);
  padding-left:calc(50vw - 50%);padding-right:calc(50vw - 50%)}
.np-common-home .np-hero + *{border-top:1px solid var(--edge)}
.np-menu-band #menu{max-width:1340px;margin:0 auto;border:0;
  padding-left:calc((100vw - min(1340px, 100vw - 48px)) / 2 * 0)}
.np-menu-band > #menu{padding-left:24px;padding-right:24px}
@media(max-width:991.98px){.np-menu-band > #menu{padding-left:20px;padding-right:20px}}

/* --- 23. CARD MECHANICS (Journal pattern) --------------------------------
   Journal's cards do three things mine did not: swap to a second image on
   hover, reveal an action overlay, and keep a scrim layer for legibility.
   This is the difference between a styled list and a shop card.          */
.product-thumb .image{position:relative;overflow:hidden;isolation:isolate}
.np-img-link{display:block;position:relative}
.product-thumb .np-img-a,.product-thumb .np-img-b{
  width:100%;aspect-ratio:1/1;object-fit:contain;padding:14px;
  display:block;transition:opacity .28s var(--ease),transform .4s var(--ease)}
.product-thumb .np-img-b{position:absolute;inset:0;opacity:0}
.product-thumb .image.has-second:hover .np-img-a{opacity:0}
.product-thumb .image.has-second:hover .np-img-b{opacity:1}
.product-thumb:hover .np-img-a,.product-thumb:hover .np-img-b{transform:scale(1.02)}

/* action overlay: appears on hover, keyboard reachable */
.np-quickview{position:absolute;left:0;right:0;bottom:0;z-index:3;
  display:flex;justify-content:center;padding:10px;
  background:linear-gradient(to top, rgba(255,255,255,.96), rgba(255,255,255,0));
  transform:translateY(100%);opacity:0;
  transition:transform .26s var(--ease),opacity .26s var(--ease)}
.product-thumb:hover .np-quickview,
.product-thumb:focus-within .np-quickview{transform:translateY(0);opacity:1}
.np-quickview a{font-size:13.5px;font-weight:700;color:var(--cobalt);
  background:#fff;border:1px solid var(--edge);border-radius:var(--r-sm);
  padding:8px 14px;box-shadow:var(--sh-1);text-decoration:none}
.np-quickview a:hover{background:var(--cobalt);color:#fff;border-color:var(--cobalt)}

@media(hover:none){
  .np-quickview{display:none}
  .product-thumb .image.has-second:hover .np-img-a{opacity:1}
  .product-thumb .image.has-second:hover .np-img-b{opacity:0}
}
@media(prefers-reduced-motion:reduce){
  .product-thumb .np-img-a,.product-thumb .np-img-b,.np-quickview{transition:none}
  .product-thumb:hover .np-img-a,.product-thumb:hover .np-img-b{transform:none}
}

/* --- 24. CARD BUTTON ROW: FIT, AND LABEL THE ICONS -----------------------
   Measured 333px inside a 309px card: the grid's 1fr was computed against
   the form, not the padded content box, so the row overflowed by 24px and
   clipped the third control. min-width:0 lets 1fr actually shrink.
   Icon-only controls also carried no visible label (Baymard: 60% of users
   miss unlabelled controls) so wishlist/compare now collapse on small
   cards rather than fighting for space with the primary action.          */
.product-thumb form{min-width:0;width:100%}
.product-thumb .button > *{min-width:0}
.product-thumb .button button[formaction*="cart"]{
  width:100%;min-width:0;justify-content:center}

/* below ~230px of card width the icons are noise: primary action only */
@container (max-width: 230px){
    .product-thumb .button button:not([formaction*="cart"]){display:none}
}
.product-thumb{container-type:inline-size}

/* --- 25. OVERFLOW FIXES (found by automated QA, not by eye) --------------
   Two patterns on every page:
   - DIV.row sat 24px wider than its padded parent. Bootstrap rows use
     negative margins (-12px each side) to cancel column padding; my earlier
     .container padding override broke that balance.
   - DIV.button (card actions) sat 28px over, because 1fr resolved against
     the form rather than the padded content box.                          */
.row{--bs-gutter-x:1.5rem;margin-left:calc(var(--bs-gutter-x) * -.5);
  margin-right:calc(var(--bs-gutter-x) * -.5)}
#content > .row,.container > .row{margin-left:0;margin-right:0}
/* Zero the padding on layout rows only. A product grid (.row-cols-*) is also
   a direct child of #content, and this rule used to flatten its gutter to 0,
   leaving cards touching. :not() keeps the card grids out of it. */
#content > .row:not([class*="row-cols"]) > [class*="col"]{padding-left:0;padding-right:0}

/* card action row: constrain to the content box */
.product-thumb form{display:block;width:100%;min-width:0;max-width:100%}
.product-thumb .button > button{min-width:0;max-width:100%}

/* --- 26. THE ACTUAL BUTTON OVERFLOW CAUSE --------------------------------
   The grid measured 319px inside a 267px form. The form is display:block
   with no width, so the grid sized to its own content, and minmax(0,1fr)
   had no parent width to resolve against. Giving the form a definite
   width and making the grid fill it fixes every card at every breakpoint. */
.product-thumb form{display:block;width:100%;min-width:0;max-width:100%;
  box-sizing:border-box}

/* the add-to-basket label is what forces the minimum: let it truncate */
.product-thumb .button button[formaction*="cart"]{
  min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;
  padding-left:8px;padding-right:8px}

/* category toolbar overflowed on mobile and caused horizontal scroll */
@media(max-width:575px){
  .np-toolbar{width:100%;max-width:100%;box-sizing:border-box;overflow:hidden}
  .np-toolbar-controls{flex-wrap:wrap;width:100%;min-width:0}
  .np-toolbar-controls .form-select{min-width:0;flex:1 1 120px;width:auto}
  body{overflow-x:hidden}
}

/* "Lab supplies" sat at 1.1:1 — white tile text on a white tile */
.np-tile-alt,.np-tile-alt h2,.np-tile-alt p,.np-tile-alt .np-tile-go{color:#fff}
.np-tile-alt .np-tile-go{color:#9FC0F5}
.np-tile:not(.np-tile-alt) h2,.np-tile:not(.np-tile-alt) p{color:var(--ink-max)}

/* --- 27. CARD ACTION ROW, single authoritative rule ----------------------
   OpenCart's base sets .product-thumb .button{position:absolute;width:100%}.
   Absolute positioning resolves against the nearest positioned ancestor,
   which is the card itself, so the row spanned the full card width and
   ignored the content box's 14px side padding. That was the 28px overflow.
   Returning it to static flow is the fix: everything else was treating a
   symptom.                                                               */
.product-thumb .button{
  position:static;
  display:grid;
  grid-template-columns:minmax(0,1fr) 44px 44px;
  gap:6px;
  width:100%;
  max-width:100%;
  min-width:0;
  box-sizing:border-box;
  margin-top:14px;
  bottom:auto;
}
.product-thumb .button > button{min-width:0;max-width:100%;width:auto;
  border:0;line-height:normal}

/* nested rows inside form cards still carried the negative gutter */
#content .row .row{margin-left:0;margin-right:0}
#content .row .row > [class*="col"]{padding-left:0;padding-right:0}
fieldset .row,.card .row,form .row{margin-left:0;margin-right:0}
fieldset .row > [class*="col"],form .row > [class*="col"]{padding-left:0;padding-right:0}

/* --- 28. CARD + PAGE POLISH (measured, not assumed) ----------------------
   Verified: 74px dead gap between the tier hint and the button row, and a
   329px sidebar holding 112px of links in a 2810px column.
   NOT changed: the vial already fills 99% of its image box, so the
   "tiny image in a big grey box" reading was from an older build.        */

/* button row pinned to the card bottom, closing the 74px gap */
/* The button row is a sibling of .description inside .content, not a child,
   so an auto-margin inside .description could never reach it. The auto
   margin has to be on .description itself, pushing the button down. */
.product-thumb .price{margin-top:auto}
.product-thumb .button{margin-top:0;padding-top:14px;flex:0 0 auto}
.np-tier-hint{margin-bottom:0}

/* secondary actions recede so the primary CTA stands alone */
.product-thumb .button button:not([formaction*="cart"]){
  background:transparent;border:1px solid transparent;color:#9AA3AE;
  box-shadow:none}
.product-thumb .button button:not([formaction*="cart"]):hover{
  background:var(--tint);border-color:var(--edge);color:var(--ink-max)}

/* stock badge only when it says something: hide the default "In stock" */
.np-badge.stock{display:none}
.np-badge.out{display:inline-block}

/* pagination matched to the card buttons */
.pagination{gap:6px;align-items:center}
.pagination .page-link{border:1px solid var(--edge);border-radius:var(--r-sm);
  min-width:40px;height:40px;display:flex;align-items:center;justify-content:center;
  color:var(--ink-max);font-weight:600;font-size:15px;background:#fff;
  transition:background .18s var(--ease),border-color .18s var(--ease)}
.pagination .page-link:hover{background:var(--tint);border-color:var(--cobalt)}
.pagination .active > .page-link,.pagination .page-item.active .page-link{
  background:var(--deep);border-color:var(--deep);color:#fff}
.pagination .page-item.disabled .page-link{opacity:.4}
#content .text-end:has(+ .pagination),.np-pager-summary{color:var(--muted);font-size:14px}

/* the "10 shown" count duplicates the pagination summary */
.np-toolbar-count{display:none}
.np-toolbar{justify-content:flex-end}

/* --- 29. CARD INTERNALS, one rule each -----------------------------------
   .button is a SIBLING of .description inside .content, so .description
   must grow to push it to the bottom. Three competing .description rules
   were cancelling the flex-grow.                                         */
.product-thumb .content{display:flex;flex-direction:column;flex:1 1 auto;
  min-width:0;min-height:0;padding:14px;gap:0}
.product-thumb .description{display:flex;flex-direction:column;flex:1 1 auto;
  min-width:0;min-height:0;width:100%;gap:0}
.product-thumb .description > p{display:none}
.product-thumb .price{margin-top:auto;padding:12px 0 0;border-top:1px solid var(--edge);
  display:flex;align-items:baseline;gap:7px}

/* --- 30. THE FORM IS THE FLEX CHILD, NOT .button -------------------------
   .content (341px) held .description (214px) + FORM (54px) = 268px, leaving
   73px unclaimed. Every rule I wrote targeted .button, which is INSIDE the
   form. The form is the actual flex child, so it needs margin-top:auto to
   sit at the card bottom.                                                */
.product-thumb .content > form{margin-top:auto;flex:0 0 auto;width:100%}
.product-thumb .description{flex:0 1 auto}

/* --- 31. CARD IMAGE + SPACING -------------------------------------------
   Back to the 191px image box that measured correctly (vial filled 99% of
   it). The white seam came from the SVG's own white background, which
   mix-blend-mode:multiply removes against the tint. No aspect-ratio: that
   grew the card from 534 to 650px.                                       */
.product-thumb .image{background:var(--tint);overflow:hidden;aspect-ratio:auto}
.product-thumb .np-img-a,.product-thumb .np-img-b{
  width:100%;height:auto;max-height:190px;object-fit:contain;padding:10px;
  mix-blend-mode:multiply}
.product-thumb .content{flex:0 0 auto;padding:14px}
.product-thumb .description{flex:0 0 auto}
.product-thumb .content > form{margin-top:12px}
.product-thumb .price{margin-top:0}

/* --- 32. THE GAP WAS ROW STRETCH, NOT PADDING ---------------------------
   Eight attempts targeted padding and flex inside the card. The parent is
   Bootstrap's DIV.row with display:flex, which stretches every card to the
   tallest in the row. On a grid of identical products that reads as dead
   space above the button. align-items:start lets each card size to its own
   content; the grid gap keeps the rows aligned.                          */
#product-list.row,.row.np-grid,#content .row[class*="row-cols"]{align-items:start}
.product-thumb{height:auto}

/* --- 33. THE 45px GAP, FOUND AT LAST ------------------------------------
   OpenCart base: .product-thumb .description{padding:15px;margin-bottom:45px}
   That margin reserved room for the absolutely-positioned .button row.
   Section 27 returned the button to static flow, so the reservation became
   dead space. Nine earlier attempts chased flex-grow, row stretch and the
   wrong flex child because I assumed layout, never checked for a margin.  */
.product-thumb .description{margin-bottom:0;padding:0}

/* --- 34. HOME: section framing, trust strip, spacing --------------------- */
.np-sec-head{display:flex;align-items:flex-end;justify-content:space-between;
  gap:20px;margin:8px 0 18px;flex-wrap:wrap}
.np-sec-head h2{font-size:26px;letter-spacing:-.025em;margin:0 0 4px}
.np-sec-head p{font-size:16px;color:var(--muted);margin:0;max-width:52ch}
.np-sec-link{font-size:15px;font-weight:700;color:var(--cobalt);white-space:nowrap}
.np-sec-link:hover{color:var(--cobalt-lift)}
/* OpenCart prints its own h3 above the featured grid: ours replaces it */
#content > h3{display:none}

/* trust strip: one row with dividers, not four grey boxes */
.np-usp{background:transparent;border:1px solid var(--edge);border-radius:var(--r);
  box-shadow:var(--sh-1);gap:0;overflow:hidden;margin-bottom:40px}
.np-usp li{background:#fff;padding:18px 20px;position:relative}
.np-usp li + li::before{content:"";position:absolute;left:0;top:18px;bottom:18px;
  width:1px;background:var(--edge)}
.np-usp strong{color:var(--ink-max)}

/* close the ~130px void between the tiles and the footer */
.np-tiles{margin-bottom:12px}
footer{margin-top:28px}

/* footer: trim the stock OpenCart columns, lift the legal line */
footer .np-legal{font-size:14px;color:var(--body);border-top:1px solid var(--edge);
  margin-top:22px;padding-top:18px}

/* --- 35. HERO IMAGERY ----------------------------------------------------
   The hero was a text block beside a spec table: the first product image
   was below the fold on a product business. The vial cluster sits above
   the spec card so the product leads.                                     */
.np-hero-right{display:flex;flex-direction:column;gap:18px;min-width:0}
.np-hero-media{width:100%;height:auto;max-width:560px;display:block;
  mix-blend-mode:multiply}
@media(max-width:991px){
  .np-hero-media{max-width:420px;margin:0 auto}
}
@media(max-width:575px){
  .np-hero-media{max-width:100%}
}

/* --- 36. HERO WITHOUT THE BOX -------------------------------------------
   The spec card read as a widget floating in the right column. The product
   should carry the hero; the facts become a quiet inline list under it
   rather than a bordered panel competing with the headline.              */
.np-hero{grid-template-columns:1fr 1.05fr;gap:40px;align-items:center;padding:44px 0 40px}
.np-hero-right{display:block}
.np-hero-media{width:100%;max-width:620px;margin:0;filter:drop-shadow(0 18px 28px rgba(15,23,42,.12))}
.np-hero-facts-inline{list-style:none;margin:18px 0 0;padding:0;
  display:flex;flex-wrap:wrap;gap:8px 22px}
.np-hero-facts-inline li{display:flex;align-items:center;gap:7px;
  font-size:14.5px;color:var(--muted)}
.np-hero-facts-inline .np-dot{width:8px;height:8px;margin:0}
@media(max-width:991px){
  .np-hero{grid-template-columns:1fr;gap:24px}
  .np-hero-media{max-width:460px;margin:0 auto}
  .np-hero-facts-inline{justify-content:center}
}

/* --- 37. CONTENT PAGES ---------------------------------------------------
   The four information pages held only their own title. Now that they carry
   real legal and delivery content they need typographic treatment: a
   readable measure, clear heading hierarchy, and breathing room.         */
.np-information-information #content,
.np-information-contact #content,
.np-information-sitemap #content{max-width:760px}
.np-information-information #content h1{font-size:40px;margin-bottom:22px}
.np-information-information #content h2{font-size:21px;margin:34px 0 10px;
  letter-spacing:-.02em;color:var(--ink-max)}
.np-information-information #content h2:first-of-type{margin-top:26px}
.np-information-information #content p{font-size:17px;line-height:1.65;
  color:var(--body);margin:0 0 16px;max-width:68ch}
.np-information-information #content ul,.np-information-information #content ol{
  font-size:17px;line-height:1.65;padding-left:22px;margin:0 0 16px}
.np-information-information #content li{margin-bottom:7px}

/* secondary pages still on OpenCart defaults */
.btn-light{background:var(--tint);border:1px solid var(--edge);color:var(--ink-max);
  border-radius:var(--r-sm);font-weight:600}
.btn-light:hover{background:var(--edge);color:var(--ink-max)}
.np-common-success #content,.np-error-not-found #content{max-width:680px;padding:40px 0}
.np-error-not-found #content h1{font-size:36px}
.table-striped > tbody > tr:nth-of-type(odd) > *{background:var(--surface);
  --bs-table-accent-bg:transparent}
.table{border-color:var(--edge)}
.table thead th{background:var(--surface);border:0;font-size:14px;
  text-transform:none;letter-spacing:0;color:var(--muted);font-weight:600}
.img-thumbnail{border:1px solid var(--edge);border-radius:var(--r-sm);
  padding:5px;background:#fff}
.alert{border:0;border-radius:var(--r-sm);font-size:15px}
.alert-success{background:#F0F9F4;color:#14532D}
.alert-danger{background:#FDF2F2;color:#7F1D1D}
.breadcrumb + h1{margin-top:6px}

/* content pages were left-hugging: centre the measure in the page */
.np-information-information #content,
.np-information-contact #content,
.np-information-sitemap #content,
.np-common-success #content,
.np-error-not-found #content{margin-left:auto;margin-right:auto}

/* --- 38. CART PAGE -------------------------------------------------------
   The default cart table gave the image cell no height limit, so one row
   ran to 400px. The delete control was bright red, Checkout was smaller
   than Continue Shopping, and the "- Model:" line repeats the product name.
   ========================================================================= */
.np-checkout-cart #content h1{font-size:36px;margin-bottom:20px}
.np-checkout-cart .table{border:1px solid var(--edge);border-radius:var(--r);
  overflow:hidden;border-collapse:separate;border-spacing:0}
.np-checkout-cart .table > :not(caption) > * > *{border-bottom-color:var(--edge)}
.np-checkout-cart .table thead th{background:var(--surface);color:var(--muted);
  font-size:13.5px;font-weight:600;padding:12px 14px;border:0}
.np-checkout-cart .table tbody td{padding:14px;vertical-align:middle;
  background:#fff;font-size:15px}
/* image cell: fixed, small, so the row does not stretch */
.np-checkout-cart .table td:first-child{width:92px}
.np-checkout-cart .table td:first-child a,
.np-checkout-cart .table .img-thumbnail{display:block;width:72px;height:72px;
  padding:4px;border:1px solid var(--edge);border-radius:var(--r-sm);
  background:var(--tint-2);object-fit:contain}
.np-checkout-cart #content .table td:first-child img{width:100%;height:100%;object-fit:contain}
/* the model line duplicates the product name */
.np-checkout-cart #content .table td small,.np-checkout-cart #content .table td .list-unstyled{display:none}
.np-checkout-cart #content .table td a{font-weight:600;color:var(--ink-max)}
.np-checkout-cart #content .table td a:hover{color:var(--cobalt)}
/* quantity + controls */
.np-checkout-cart #content .input-group{max-width:150px}
.np-checkout-cart #content .input-group .form-control{text-align:center;background:#fff;
  border:1px solid var(--edge);border-radius:var(--r-sm) 0 0 var(--r-sm)}
.np-checkout-cart #content .btn-primary{background:var(--tint)!important;color:var(--ink-max)!important;
  border:1px solid var(--edge)!important;box-shadow:none!important;border-radius:0}
.np-checkout-cart #content .btn-primary:hover{background:var(--edge)!important}
.np-checkout-cart #content .btn-danger{background:#fff;color:var(--muted);
  border:1px solid var(--edge);border-radius:0 var(--r-sm) var(--r-sm) 0;box-shadow:none}
.np-checkout-cart #content .btn-danger:hover{background:#FDF2F2;color:var(--flag);border-color:#F3D4D4}
/* totals */
.np-checkout-cart #content .table tfoot td,.np-checkout-cart #content .table tr:has(strong) td{
  background:var(--surface);font-size:15px}
.np-checkout-cart #content .table tr:last-child strong{font-size:18px;color:var(--ink-max)}
/* the action row: checkout is the primary action */
.np-checkout-cart #content .d-flex.justify-content-between,
.np-checkout-cart #content .row:last-of-type{align-items:center;gap:14px;margin-top:26px}
.np-checkout-cart #content a.btn-light{background:#fff;border:1px solid var(--edge);
  color:var(--ink-max);padding:13px 22px;font-size:15px}
.np-checkout-cart #content a.btn-primary,.np-checkout-cart #content .btn-primary.float-end{
  background:var(--cobalt)!important;color:#fff!important;border:0!important;
  padding:15px 34px!important;font-size:16px!important;font-weight:700!important;
  border-radius:var(--r-sm)!important;box-shadow:var(--sh-cobalt)!important}
/* accordions */
.np-checkout-cart .accordion-button,.np-checkout-cart .card-header{background:#fff;
  font-size:15px;font-weight:600;color:var(--ink-max);border:0}
.np-checkout-cart .accordion-item{border:1px solid var(--edge);border-radius:var(--r-sm);
  margin-bottom:8px;overflow:hidden}
.np-checkout-cart h2{font-size:22px;margin:30px 0 8px}
.np-checkout-cart h2 + p{color:var(--muted);font-size:16px;max-width:60ch}


/* --- 40. PRODUCT PAGE ----------------------------------------------------
   Audit found: 24-word description, no dispatch promise, no research-use
   notice, an empty 5-star widget reading "0 reviews", tier prices as loose
   text, and the Specification tab hidden though it is the differentiator. */
.np-product-product #content h1{font-size:38px;letter-spacing:-.03em;margin:0 0 6px}
.np-product-product .list-unstyled{margin:0 0 18px;padding:0;font-size:15px;color:var(--muted)}
.np-product-product .list-unstyled li{margin-bottom:3px}
/* price block */
.np-product-product .h2,.np-product-product .price-new{font-size:40px;font-weight:800;
  letter-spacing:-.03em;color:var(--ink-max);display:block;margin:4px 0 2px}
.np-product-product .np-tax{color:var(--muted);font-size:14px}
/* quantity tiers as a real price table */
.np-tiers{border:1px solid var(--edge);border-radius:var(--r-sm);overflow:hidden;
  margin:0 0 28px;width:100%;max-width:none}
.np-tiers div{display:flex;justify-content:space-between;padding:9px 13px;font-size:15px;
  border-bottom:1px solid var(--line-2)}
.np-tiers div:last-child{border-bottom:0}
.np-tiers div:nth-child(odd){background:var(--surface)}
.np-tiers b{font-variant-numeric:tabular-nums;color:var(--ink-max)}
/* assurance block */
.np-pdp-assure{display:flex;flex-direction:column;gap:10px;margin:0 0 20px;max-width:none}
.np-pdp-assure .np-dispatch{font-size:15px}
.np-pdp-assure .np-ruo{margin:0;font-size:14px}
/* buy row */
.np-product-product #button-cart{height:54px;font-size:17px;font-weight:700;
  padding:0 34px;border-radius:var(--r-sm)}
.np-product-product .input-group{max-width:none;margin-bottom:12px}
.np-product-product #input-quantity{max-width:96px;flex:0 0 96px}
.np-product-product #button-cart{flex:1 1 auto}
.np-product-product .input-group-text{background:var(--surface);border:1px solid var(--edge);
  border-right:0;font-size:14px;color:var(--muted);padding:0 14px}
/* scoped to the quantity field only: this previously squeezed header search too */
.np-product-product #input-quantity{border:1px solid var(--edge);text-align:center;max-width:90px}
/* image: the media column is 46% of the row and sticky; the image fills it.
   Earlier rules targeted #product-thumb/.thumbnails, which the restored base
   template never had, so the page was showing Bootstrap's 250px img-thumbnail. */
.np-product-product .row.mb-3{--bs-gutter-x:48px}
.np-product-product .np-pdp-media-col{flex:0 0 54%;max-width:54%}
.np-product-product .np-media{position:sticky;top:24px}
.np-product-product .np-media a{display:block}
.np-product-product .np-media-img{display:block;width:100%;height:auto;aspect-ratio:1/1;
  object-fit:contain;background:var(--tint);border-radius:var(--r);padding:40px;
  border:1px solid var(--edge)}
/* product codes */
.np-product-product .np-code-label{color:var(--muted)}
.np-product-product .np-code{color:var(--ink);font-variant-numeric:tabular-nums;font-weight:600}
.np-tiers-head{font-size:12.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.np-tiers .np-tiers-head{background:var(--surface)}
/* wishlist / compare: quiet pair that sits with the buy row, not above it */

@media(max-width:767px){
  .np-product-product .np-pdp-media-col{flex:0 0 100%;max-width:100%}
  .np-product-product .np-media{position:static}
  .np-product-product .np-media-img{padding:24px}}
.np-product-product .thumbnails{display:grid;grid-template-columns:1fr 1fr;gap:12px;
  max-width:100%;list-style:none;padding:0}
/* specification visible, not hidden behind a tab */
.np-product-product #tab-specification{display:block;margin-top:10px}
.np-product-product .nav-tabs{margin-top:36px}

/* empty review widget: hide until there are real reviews */
.np-product-product .rating,.np-product-product a[href*="review"],
.np-product-product .fa-star,.np-product-product .fa-stack{display:none}
/* assurance block sits under the buy row, full width */
.np-product-product .np-pdp-assure{margin-top:0;max-width:100%;gap:20px}
.np-product-product .np-ruo{margin:0;max-width:none;width:100%;padding:14px 16px;border:1px solid var(--edge);border-radius:var(--r-sm);
  background:var(--surface);font-size:13.5px;color:var(--muted);line-height:1.5}
.np-product-product .np-ruo strong{color:var(--ink)}
/* wishlist / compare as quiet text links under the notice, not a floating pair mid-column */
.np-pdp-aux{display:flex;gap:22px;margin:16px 0 0}
.np-pdp-aux .np-aux-btn{border:0;background:none;padding:0;height:auto;width:auto;font-size:14px;
  color:var(--muted);display:inline-flex;align-items:center;gap:7px;box-shadow:none}
.np-pdp-aux .np-aux-btn:hover{color:var(--cobalt);text-decoration:underline}
/* price rhythm */
.np-product-product .h2,.np-product-product .price-new{margin:4px 0 20px}

/* Add to Cart measured 111px: too small for the primary action.
   The input-group lets it size to its label, so give it real presence. */
.np-product-product #button-cart{flex:1 0 auto;min-width:200px;height:52px;
  font-size:16px;font-weight:700;padding:0 30px;
  border-radius:0 var(--r-sm) var(--r-sm) 0}
.np-product-product .input-group-text{border-radius:var(--r-sm) 0 0 var(--r-sm);
  background:var(--surface);border:1px solid var(--edge);border-right:0;
  font-size:14px;color:var(--muted);padding:0 15px}
.np-product-product #input-quantity{max-width:76px;text-align:center;
  border:1px solid var(--edge);border-right:0;border-radius:0;height:52px}


/* --- 41. SEARCH FIELD ----------------------------------------------------
   The header search is a bare .input-group with no id, so a page-scoped
   .input-group{max-width} rule from the product page was squeezing it to
   nothing. Scope that rule to the product form and let search fill. */
header .col-md-5 form.input-group{width:100%;max-width:none;margin:0}
header .col-md-5 .form-control{flex:1 1 auto;min-width:0;height:46px;
  border:1px solid var(--edge);border-right:0;background:#fff;
  border-radius:var(--r-sm) 0 0 var(--r-sm);font-size:15px}
header .col-md-5 .btn{flex:0 0 auto;width:58px;height:46px;background:var(--deep);
  color:#fff;border:0;border-radius:0 var(--r-sm) var(--r-sm) 0}
header .col-md-5 .btn:hover{background:var(--cobalt)}
/* keep the product quantity group narrow without touching search */

/* --- 42. SEARCH RESULTS --------------------------------------------------
   The results page led with an advanced "Search Criteria" panel and a blue
   Product Compare button, both louder than the results themselves. The
   header search already does the job; the panel is a refinement, so it
   collapses to a quiet link-styled row and the results lead.            */
.np-product-search #content h1{font-size:34px;margin-bottom:4px}
/* criteria panel: quiet, secondary */
.np-product-search #content > h2:first-of-type,
.np-product-search #content > .row:first-of-type{display:none}
.np-product-search #content fieldset,
.np-product-search #content > form{background:var(--surface);
  border:1px solid var(--edge);border-radius:var(--r);padding:16px 18px;
  margin:14px 0 26px}
.np-product-search #content legend,
.np-product-search #content form h2{font-size:14px;color:var(--muted);
  font-weight:600;margin:0 0 10px;float:none;width:auto}
.np-product-search #content .form-control,
.np-product-search #content .form-select{background:#fff;border:1px solid var(--edge);
  height:42px;font-size:15px}
.np-product-search #content .form-check-label{font-size:14px;color:var(--muted)}
/* compare + view toggle are noise for this audience */
/* .d-block (Bootstrap utility) outranks a plain id selector here, so these
   need the same weight to win. Compare and the grid/list toggle are noise
   for a researcher who searched for a specific compound. */
.np-product-search #compare-total.d-block,
.np-product-search #compare-total,
.np-product-search #button-list,
.np-product-search #button-grid,
.np-product-search .btn-group{display:none!important}
.np-product-search .col-lg-3:has(#compare-total),
.np-product-search .col-lg-1:has(#button-grid){display:none}
/* results heading leads */
.np-product-search #content h2{font-size:22px;margin:22px 0 14px}
/* sort/show row matches the category toolbar */
.np-product-search .input-group .input-group-text{background:var(--surface);
  border:1px solid var(--edge);border-right:0;font-size:13.5px;color:var(--muted)}
.np-product-search .input-group .form-select{border:1px solid var(--edge);
  border-radius:0 var(--r-sm) var(--r-sm) 0;height:42px}
/* results grid spacing to match category */
.np-product-search #product-list{gap:14px}

/* --- 43. ACCOUNT FORMS ---------------------------------------------------
   OpenCart right-aligns labels in a narrow column, so "Organisation or
   institution" and "Research use declaration" wrapped onto two lines and
   sat away from their fields. Left-aligned labels above the input read
   faster and survive long field names.                                   */
.np-account-register #content,
.np-account-login #content,
.np-account-forgotten #content{max-width:720px}
.np-account-register .row.mb-3,
.np-account-login .row.mb-3,
.np-account-forgotten .row.mb-3{display:block;margin-bottom:18px!important}
.np-account-register .col-form-label,
.np-account-login .col-form-label,
.np-account-forgotten .col-form-label{
  display:block;width:100%;text-align:left!important;float:none;
  font-size:14.5px;font-weight:600;color:var(--ink-max);
  margin:0 0 6px;padding:0;max-width:none}
.np-account-register .col-sm-10,
.np-account-login .col-sm-10,
.np-account-forgotten .col-sm-10{width:100%;max-width:100%;flex:0 0 100%;padding:0}
.np-account-register .form-control,
.np-account-register .form-select,
.np-account-login .form-control{background:#fff;border:1px solid var(--edge);
  height:46px;font-size:15px;border-radius:var(--r-sm);padding:0 13px}
.np-account-register .form-control:focus,
.np-account-login .form-control:focus{border-color:var(--cobalt);box-shadow:var(--glow)}
.np-account-register fieldset{border:0;padding:0;margin:0 0 30px}
.np-account-register legend,.np-account-login legend{
  font-size:20px;font-weight:700;color:var(--ink-max);margin:0 0 16px;
  float:none;width:auto;letter-spacing:-.02em}
/* the research-use declaration is the important control on this form */
.np-account-register .form-check{background:var(--surface);
  border:1px solid var(--edge);
  border-radius:var(--r-sm);padding:14px 16px 14px 44px;margin:4px 0}
.np-account-register .form-check-input{margin-left:-28px;width:18px;height:18px}
.np-account-register .form-check-label{font-size:14.5px;line-height:1.5;
  color:var(--body);font-weight:500}
/* the 14-link account sidebar is noise while registering */
.np-account-register #column-right,
.np-account-login #column-right,
.np-account-forgotten #column-right{display:none}
.np-account-register #content,.np-account-login #content{margin:0 auto}
/* primary action */
.np-account-register .btn-primary,.np-account-login .btn-primary{
  background:var(--cobalt);border:0;padding:14px 30px;font-size:16px;
  font-weight:700;border-radius:var(--r-sm);box-shadow:var(--sh-cobalt)}

/* --- 44. PRODUCT PAGE: DROP THE TAB STRIP -------------------------------
   Tabs hide the spec table, which is the one thing this catalogue has that
   competitors do not. Both panels now render as plain stacked sections
   with their own headings: nothing to click, nothing to miss.           */
.np-product-product .nav-tabs{display:none}
/* show the description and specification panes, but not the review form:
   a blanket .tab-pane rule was re-showing what the tab used to hide */
.np-product-product #tab-description,
.np-product-product #tab-specification{display:block!important;opacity:1}
.np-product-product #tab-description{padding-top:30px;border-top:1px solid var(--edge);
  margin-top:34px}
.np-product-product #tab-specification{padding-top:26px;margin-top:26px;
  border-top:1px solid var(--edge)}
.np-product-product #tab-specification::before{content:"Specification";
  display:block;font-size:22px;font-weight:700;letter-spacing:-.02em;
  color:var(--ink-max);margin-bottom:14px}
.np-product-product #tab-description h3{font-size:18px;margin:26px 0 8px;
  letter-spacing:-.015em}
.np-product-product #tab-description > p:first-child{font-size:17px;
  color:var(--body);margin-bottom:4px}
/* spec table: readable rows, no heavy chrome */
.np-product-product #tab-specification table{width:100%;max-width:720px;border:0}
.np-product-product #tab-specification td{padding:10px 14px;font-size:15px;border:0}
.np-product-product #tab-specification td:first-child{color:var(--muted);width:42%}
.np-product-product #tab-specification tr:nth-child(odd) td{background:var(--surface)}
.np-product-product #tab-specification thead{display:none}

/* removing the tab strip exposed the review pane that the tab was hiding */
.np-product-product #tab-review{display:none!important}

/* --- 45. PRODUCT DETAIL: TWO COLUMNS ------------------------------------
   The description was capped at 68ch inside a 1292px container, so it sat
   in a narrow strip with the right half of the page empty. Description and
   specification now run side by side, which uses the width and puts the
   spec table level with the text that refers to it.                     */
.np-product-product .tab-content{display:grid;grid-template-columns:1.15fr .85fr;
  gap:48px;align-items:start;margin-top:34px;padding-top:30px;
  border-top:1px solid var(--edge)}
.np-product-product #tab-description,
.np-product-product #tab-specification{border-top:0;margin-top:0;padding-top:0;
  max-width:none;width:100%}
.np-product-product #tab-description{font-size:16px;line-height:1.65;color:var(--body)}
.np-product-product #tab-description p{max-width:58ch}
.np-product-product #tab-specification table{max-width:none;width:100%}
.np-product-product #tab-specification::before{margin-top:0}

/* spec column was 529px of a 1292px grid: balance the two columns */
/* equal columns, and both must be allowed to shrink or the grid forces
   the page wider than the viewport on a phone */
.np-product-product .tab-content{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px}
.np-product-product .tab-content > *{min-width:0;overflow-wrap:anywhere}
.np-product-product #tab-specification table td{padding:10px 12px;
  word-break:break-word}
.np-product-product #tab-specification table{table-layout:fixed}

/* --- 46. MOBILE ----------------------------------------------------------
   Measured on a 390px viewport: 24 tap targets under 40px (top-bar links
   were 16px wide), a single-column product grid making the home page
   13,000px long, and a "Categories" box sitting above an empty Menu button.
   ========================================================================= */
@media(max-width:575px){
  /* 1. two columns: halves page length and matches how people scan a shop */
  .np-grid,#product-list.row,.row[class*="row-cols"]:not(form .row){
    display:grid!important;grid-template-columns:1fr 1fr!important;gap:10px!important}
  .np-grid > *,#product-list > *,.row[class*="row-cols"]:not(form .row) > .col{width:auto;max-width:none;padding:0}
  .product-thumb .content{padding:10px}
  .product-thumb .np-card-title{font-size:13.5px;line-height:1.25}
  .np-meta{font-size:11.5px;row-gap:1px}
  .np-meta dt,.np-meta dd{font-size:11.5px}
  .product-thumb .price-new{font-size:17px}
  .np-from{font-size:11px}
  .np-tier-hint{font-size:11.5px}
  .product-thumb .button{grid-template-columns:1fr;gap:5px}
  .product-thumb .button button:not([formaction*="cart"]){display:none}
  .product-thumb .button button[formaction*="cart"]{height:42px;font-size:13.5px}
  .product-thumb .button button[formaction*="cart"]::after{content:" Add"}

  /* 2. tap targets: 44px minimum on every control */
  #top .np-topright a,#top .btn-link{min-height:44px;display:inline-flex;
    align-items:center;padding:0 10px}
  #top .np-topright ul{gap:2px;flex-wrap:wrap;justify-content:flex-end}
  #top .np-toprow{min-height:44px}
  .breadcrumb a{min-height:40px;display:inline-flex;align-items:center}

  /* 3. the Categories label plus an empty Menu button is one control too many */
  #category{display:none}
  .np-menu-btn{width:100%;justify-content:center;min-height:46px}

  /* 4. hero facts read as a list, not a cramped row */
  .np-hero-facts-inline{flex-direction:column;align-items:flex-start;gap:7px}
  .np-hero-facts-inline li{font-size:14px}
  .np-usp li{padding:13px 15px}
  .np-usp li + li::before{display:none}
  .np-usp li + li{border-top:1px solid var(--edge)}
}

/* top-bar links collapse to bare icons on mobile (36px wide). Either give
   them a real target or drop the ones the header already provides: the
   cart button and account menu are both in the header below. */
@media(max-width:575px){
  #top .np-topright li:has(a[href*="wishlist"]),
  #top .np-topright li:has(a[href*="checkout/cart"]),
  #top .np-topright li:has(a[href*="checkout/checkout"]){display:none}
  #top .np-topright a{min-width:44px;justify-content:center}
  #top .np-toprow > div:first-child{flex:0 0 auto}
}

/* #category sits in the sidebar column, so hiding it inside the 575px
   block missed it on the category page where the sidebar renders. */
@media(max-width:991px){
  #category{display:none!important}
  #column-left{margin-bottom:0}
  /* toolbar: label and control on one line each, no awkward wrap */
  .np-toolbar{flex-direction:column;align-items:stretch;gap:8px;padding:12px}
  .np-toolbar-controls{display:grid;grid-template-columns:auto 1fr;gap:8px 10px;
    align-items:center;width:100%}
  .np-toolbar-controls label{margin:0;font-size:14px}
  .np-toolbar-controls .form-select{width:100%;min-width:0;height:40px}
  /* pagination: bigger targets, centred */
  .pagination{justify-content:center;flex-wrap:wrap;gap:6px}
  .pagination .page-link{min-width:44px;height:44px}
  .np-product-category #content .text-end,
  .text-end:has(+ .pagination){text-align:center!important}
}

/* the two-column detail grid must collapse on narrow screens; this rule
   has to come AFTER the desktop grid declaration or source order wins */
@media(max-width:991px){
  .np-product-product .tab-content{grid-template-columns:1fr!important;gap:28px}
  .np-product-product #tab-specification table{table-layout:auto}
  .np-product-product #tab-specification td:first-child{width:46%}
}

/* --- 47. ACCOUNT PAGES ---------------------------------------------------
   Stock OpenCart: a bare blue link list, the same 14 links repeated in the
   sidebar, and features this business does not run (affiliate, reward
   points, subscriptions, downloads, transactions, returns).             */
[class*="np-account-"] #content{max-width:900px}
[class*="np-account-"] #content h1{font-size:34px;margin-bottom:22px}
[class*="np-account-"] #content h2{font-size:17px;font-weight:700;
  color:var(--ink-max);margin:30px 0 10px;letter-spacing:-.015em}

/* link lists become real cards */
[class*="np-account-"] #content ul.list-unstyled{display:grid;
  grid-template-columns:1fr 1fr;gap:10px;margin:0 0 6px;padding:0}
[class*="np-account-"] #content ul.list-unstyled li{margin:0}
[class*="np-account-"] #content ul.list-unstyled li a{
  display:block;background:#fff;border:1px solid var(--edge);
  border-radius:var(--r-sm);padding:14px 16px;font-size:15px;font-weight:600;
  color:var(--ink-max);box-shadow:var(--sh-1);
  transition:border-color .16s var(--ease),transform .16s var(--ease)}
[class*="np-account-"] #content ul.list-unstyled li a:hover{
  border-color:var(--cobalt);color:var(--cobalt);transform:translateY(-1px)}

/* features this shop does not offer are left out of the account templates (theme section 66) */

/* keep the sidebar as account navigation, but style it and drop the
   features this shop does not run */
[class*="np-account-"] #column-right{padding-left:28px}
[class*="np-account-"] #column-right .list-group{border:1px solid var(--edge);
  border-radius:var(--r);overflow:hidden;box-shadow:var(--sh-1);background:#fff}
[class*="np-account-"] #column-right .list-group-item{border:0;
  border-bottom:1px solid var(--line-2);padding:12px 16px;font-size:15px;
  color:var(--ink-max);background:#fff}
[class*="np-account-"] #column-right .list-group-item:last-child{border-bottom:0}
[class*="np-account-"] #column-right .list-group-item:hover{background:var(--tint);
  color:var(--cobalt)}
[class*="np-account-"] #content{margin:0 auto}

/* tables on order history and wishlist */
[class*="np-account-"] .table{border:1px solid var(--edge);border-radius:var(--r);
  overflow:hidden;border-collapse:separate;border-spacing:0}
[class*="np-account-"] .table thead th{background:var(--surface);border:0;
  font-size:13.5px;color:var(--muted);font-weight:600;padding:12px 14px}
[class*="np-account-"] .table td{padding:13px 14px;font-size:15px;background:#fff;
  border-bottom:1px solid var(--line-2);vertical-align:middle}
[class*="np-account-"] .table tr:last-child td{border-bottom:0}
[class*="np-account-"] .table .img-thumbnail{width:56px;height:56px;padding:4px;
  border:1px solid var(--edge);border-radius:var(--r-sm);object-fit:contain}
/* empty states */
[class*="np-account-"] #content > p:only-of-type{margin:0 0 22px;padding:0;background:none;border-radius:0;
  text-align:left;color:var(--muted);font-size:15.5px}
@media(max-width:575px){
  [class*="np-account-"] #content ul.list-unstyled{grid-template-columns:1fr}
}

/* --- 48. LOW-TRAFFIC PAGES ----------------------------------------------
   Contact, 404, sitemap and compare were still on OpenCart defaults. The
   404 in particular just repeated its own message with no way forward.  */
.np-error-not-found #content{max-width:620px;margin:0 auto;padding:60px 0;
  text-align:center}
.np-error-not-found #content h1{font-size:32px;margin-bottom:12px}
.np-error-not-found #content p{font-size:17px;color:var(--muted);margin:0 auto 10px}
.np-404-actions{display:flex;gap:18px;justify-content:center;align-items:center;
  margin-top:26px;flex-wrap:wrap}
.np-404-actions .np-btn-primary{display:inline-flex;align-items:center;
  padding:14px 26px;font-size:16px;border-radius:var(--r-sm)}

/* contact */
.np-information-contact #content{max-width:860px;margin:0 auto}
.np-information-contact #content h1{font-size:34px;margin-bottom:8px}
.np-information-contact #content h2,
.np-information-contact #content legend{font-size:19px;font-weight:700;
  color:var(--ink-max);margin:26px 0 12px;float:none;width:auto}
.np-information-contact address,
.np-information-contact #content .col-md-6:first-child{
  font-style:normal;font-size:16px;line-height:1.7;color:var(--body)}
.np-information-contact .form-control{background:#fff;border:1px solid var(--edge);
  border-radius:var(--r-sm);font-size:15px;padding:12px 13px}
.np-information-contact .form-control:focus{border-color:var(--cobalt);box-shadow:var(--glow)}
.np-information-contact .btn-primary{background:var(--cobalt);border:0;
  padding:14px 28px;font-weight:700;border-radius:var(--r-sm);box-shadow:var(--sh-cobalt)}

/* sitemap: a real index, not a wall of links */
.np-information-sitemap #content{max-width:980px;margin:0 auto}
.np-information-sitemap #content .row{display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:26px;margin:0}
.np-information-sitemap #content ul{list-style:none;padding:0;margin:0}
.np-information-sitemap #content li{padding:5px 0;font-size:15px}
.np-information-sitemap #content a{color:var(--body)}
.np-information-sitemap #content a:hover{color:var(--cobalt)}
.np-information-sitemap h2,.np-information-sitemap h3{font-size:15px;
  text-transform:none;color:var(--ink-max);font-weight:700;margin:0 0 8px}

/* compare: this audience compares specs, so make the table readable */
.np-product-compare .table{border:1px solid var(--edge);border-radius:var(--r);
  overflow:hidden;border-collapse:separate;border-spacing:0}
.np-product-compare .table td,.np-product-compare .table th{
  padding:12px 14px;font-size:15px;border-bottom:1px solid var(--line-2)}
.np-product-compare .table tr:nth-child(odd) td{background:var(--surface)}

/* --- 50. HEADER ALIGNMENT, MEASURED -------------------------------------
   Logo at x=74 but nav links at x=60: a 14px mismatch on what should be one
   shared left edge. Search 46px tall against a 44px cart button on the same
   row. Both visible once you look for them.                             */

/* One shared left edge. The logo sits in .row > .col-md-3 (12px padding,
   lands at 74); the nav has none (lands at 50). Both should meet the row
   edge at 62. Cancel the column padding and give the nav the same inset. */
header .row > .col-md-3:first-child{padding-left:0}
.np-menu-band > #menu{max-width:1340px;margin:0 auto;padding:0 12px}
#menu .navbar-nav{margin-left:0}

/* the header row: equal heights, baseline aligned */
header .col-md-5 .form-control,
header .col-md-5 .btn,
#cart .btn,#cart .btn-lg{height:46px;line-height:1}
#cart .btn,#cart .btn-lg{display:inline-flex;align-items:center;justify-content:center}
/* Search and basket were top-aligned in the 88px row, so they sat flush
   against the dark top bar while the wordmark had ~16px above it. Centre
   the row so all three share one middle line. The Bootstrap mb-2 on #cart
   and mb-3 on the search form are !important and would pull each one off
   that line, so they go too (phone layout has its own grid). */
@media(min-width:768px){
  header .container > .row{align-items:center}
  header #cart,header .col-md-5 form.input-group{margin-bottom:0!important}
}

/* nav links: even rhythm, consistent hit area */

/* content sat at x=74 against a header at x=62: the same 12px Bootstrap
   column padding, one level down. One vertical edge down the whole page.
   Scoped to the PAGE row only (the one holding #content / #column-left).
   An earlier blanket `.container > .row{--bs-gutter-x:0}` also hit product
   grids, and because Bootstrap builds gutters out of column padding the
   cards ended up touching at 0px. Alignment checks passed: touching cards
   are still perfectly aligned. */
#content,#common-home #content,.container > .row > #content{padding-left:0}
.container > .row:has(> #content){--bs-gutter-x:0}
#content > .row{--bs-gutter-x:1.5rem}
#column-left{padding-left:0}

/* Product grids keep a real gutter. 24px horizontal to match the 16px
   vertical rhythm of .mb-3 without the rows looking cramped. */
.row[class*="row-cols"]{--bs-gutter-x:1.5rem}
.row[class*="row-cols"] > .col{padding-left:calc(var(--bs-gutter-x) * .5);
  padding-right:calc(var(--bs-gutter-x) * .5)}

/* zeroing the row gutter pushed form rows past the viewport on mobile:
   restore the page gutter below the breakpoint */
@media(max-width:991px){
  .container > .row:has(> #content){--bs-gutter-x:1.5rem}
  #content,#column-left{padding-left:0;padding-right:0}
  .container{padding-left:20px;padding-right:20px;overflow-x:clip}
}


/* --- 51. CATEGORY, CART, FOOTER (loop tick 2) ------------------------------
   Category: a 450px sidebar holding three links forced a 3-col grid; the
   header menu already carries the categories, so the column goes and the
   grid takes the width. Cart: a bordered Bootstrap table with an "Image"
   header is the default-theme tell. Footer: no mark, no hierarchy, and the
   rule stopped at half width because .np-legal constrained it.
   ========================================================================= */
/* The sidebar is <aside class="col-3 d-none d-md-block">. Bootstrap's
   .d-md-block is !important, so this is the one place the theme needs it. */
.np-product-category #column-left{display:none!important}
.np-product-category #content{flex:0 0 100%;max-width:100%}
.np-product-category .np-cathead{max-width:760px}
/* OpenCart's list/grid script rewrites #product-list's class at runtime to
   row row-cols-lg-3, with .product-thumb as the column itself, so the 12px
   column padding lands INSIDE the card border and the cards touch. A CSS
   grid ignores whatever class the script applies. */
#product-list{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;
  --bs-gutter-x:0;margin:0}
/* category renders .product-thumb as the direct child; search wraps it in
   .col.mb-3. Reset whichever one is the grid item. */
#product-list > *{padding:0;width:auto;max-width:none;min-width:0;flex:none;margin:0}
#product-list > .col > .product-thumb{height:100%}
@media(max-width:1199px){#product-list{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:767px){#product-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}}

/* cart */
.np-cart{--bs-table-bg:transparent;border-collapse:separate;border-spacing:0;margin:0;
  width:100%;table-layout:auto}
.np-cart th:nth-child(2){width:auto}
.np-cart th:nth-child(3){width:220px}
.np-cart th:nth-child(4),.np-cart th:nth-child(5){width:140px}
.np-cart th,.np-cart td{border:0;vertical-align:middle;padding:16px 14px}
.np-cart thead th{font-size:12.5px;text-transform:uppercase;letter-spacing:.06em;
  color:var(--muted);font-weight:600;border-bottom:1px solid var(--edge);padding-bottom:10px}
.np-cart tbody td{border-bottom:1px solid var(--line-2)}
.np-cart-th-img{width:96px}
.np-cart-img{width:72px;height:72px;object-fit:contain;background:var(--tint);
  border:1px solid var(--edge);border-radius:var(--r-sm);padding:6px;display:block}
.np-cart td a{color:var(--ink-max);font-weight:600;text-decoration:none}
.np-cart .input-group{max-width:190px;flex-wrap:nowrap}
.np-cart .input-group .form-control{height:44px;text-align:center;border:1px solid var(--edge);
  width:64px;flex:0 0 64px}
.np-cart .input-group .btn{height:44px;width:44px;padding:0;border:1px solid var(--edge);
  background:#fff;color:var(--muted)}
.np-cart .input-group .btn:hover{color:var(--ink-max);border-color:var(--ink-max)}
.np-cart .np-cart-remove:hover{color:#B42318;border-color:#B42318}
.np-cart tfoot td{border:0;padding:8px 14px;font-size:15px}
.np-cart tfoot tr:last-child td{font-size:20px;font-weight:800;padding-top:14px;
  border-top:1px solid var(--edge)}
.np-checkout-cart .table-responsive{border:1px solid var(--edge);border-radius:var(--r);
  background:#fff;padding:6px 10px 10px}

/* cart on a phone: the desktop column widths (96+220+140+140) exceed the
   viewport and table-responsive scrolls sideways, pushing the totals and the
   remove button off-screen. A scrollable table is not an overflow fault, so
   the checkers never saw it. Stack each line instead. */
@media(max-width:767px){
  .np-checkout-cart .table-responsive{overflow:visible;padding:4px 12px 12px}
  .np-cart,.np-cart tbody,.np-cart tfoot,.np-cart tr,.np-cart td{display:block;width:100%}
  .np-cart thead{display:none}
  .np-cart th{width:auto}
  .np-cart tbody tr{display:grid;grid-template-columns:72px 1fr;grid-template-areas:
    "img name" "img qty" "img price";column-gap:14px;row-gap:8px;padding:14px 0;
    border-bottom:1px solid var(--line-2);align-items:center}
  .np-cart tbody td{padding:0;border:0;width:auto}
  .np-cart tbody td:nth-child(1){grid-area:img}
  .np-cart tbody td:nth-child(2){grid-area:name}
  .np-cart tbody td:nth-child(3){grid-area:qty}
  .np-cart tbody td:nth-child(4){display:none}
  .np-cart tbody td:nth-child(5){grid-area:price;font-weight:700;font-size:17px;text-align:left!important}
  .np-cart tbody td:nth-child(5)::before{content:"Total ";font-weight:400;color:var(--muted);font-size:14px}
  .np-cart .input-group{max-width:none}
  .np-cart tfoot tr{display:flex;justify-content:space-between;align-items:baseline;padding:8px 0}
  .np-cart tfoot td{width:auto;padding:0;border:0}
  .np-cart tfoot td:empty{display:none}
  .np-cart tfoot tr:last-child{border-top:1px solid var(--edge);padding-top:12px;margin-top:4px}
  .np-cart tfoot tr:last-child td{font-size:20px;font-weight:800}
}

/* footer */
footer{background:#fff;border-top:1px solid var(--edge);padding:48px 0 32px;margin-top:64px}
.np-foot-brand{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;
  padding-bottom:28px;margin-bottom:28px;border-bottom:1px solid var(--line-2)}
.np-wordmark-foot .np-wm-main{font-size:26px}
.np-wordmark-foot .np-wm-sub{font-size:11px;margin-top:4px}
.np-foot-tag{margin:0;color:var(--muted);font-size:15px;max-width:420px;text-align:right}
footer .np-foot-h{font-size:13px;text-transform:uppercase;letter-spacing:.07em;color:var(--ink-max);
  font-weight:700;margin:0 0 14px}
footer ul{margin:0}
footer li{margin-bottom:8px}
footer a{color:var(--body);text-decoration:none;font-size:15px}
footer a:hover{color:var(--cobalt)}
footer hr{max-width:none;margin:28px 0 18px;border-color:var(--line-2);opacity:1}
footer .np-legal{max-width:none;font-size:13.5px;color:var(--muted);margin:0}
@media(max-width:767px){
  .np-foot-brand{flex-direction:column;align-items:flex-start}
  .np-foot-tag{text-align:left}
  footer .col-sm-3{margin-bottom:22px}}


/* --- 52. CHECKOUT LAYOUT, CONTACT, SIGN IN (loop tick 3) -------------------
   Checkout: section 46's declaration rule used .row:has(.form-check), which
   also matched the outer layout row, so both columns went flex 0 0 100% and
   the order summary fell to the bottom of a 2,960px page. Scoped to nested
   rows above; here the summary becomes a sticky card beside the form.
   Contact: placeholders hidden in the template; labels stacked like the
   account forms. Sign in: no account sidebar while logged out.
   ========================================================================= */
.np-account-login #column-right,.np-account-register #column-right,
.np-account-forgotten #column-right{display:none!important}
.np-account-login #content,.np-account-register #content,
.np-account-forgotten #content{flex:0 0 100%;margin:0}
.np-account-login #content{max-width:960px}
.np-auth-title{font-size:38px;letter-spacing:-.03em;margin:0 0 24px}
.np-account-login .np-auth{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin:0}
.np-account-login .np-auth > .col{width:auto;max-width:none;flex:none;padding:0;margin:0!important}
.np-account-login .np-auth .border{background:#fff;border:1px solid var(--edge)!important;
  border-radius:var(--r)!important;padding:32px!important}
.np-account-login .np-auth h2{font-size:22px;letter-spacing:-.02em;margin:0 0 14px}
.np-account-login .np-auth form{display:flex;flex-direction:column;height:100%}
.np-auth-actions{margin-top:auto;padding-top:20px}
.np-auth-actions .btn{display:flex;align-items:center;justify-content:center;width:100%;height:48px;font-weight:700}
.np-account-login .btn-outline-primary{border:1.5px solid var(--cobalt);color:var(--cobalt);background:#fff}
.np-account-login .btn-outline-primary:hover{background:var(--cobalt);color:#fff}
@media(max-width:767px){.np-account-login .np-auth{grid-template-columns:1fr}}
.np-information-contact .card{border:1px solid var(--edge);border-radius:var(--r);background:#fff}
.np-information-contact .card-body > .row{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:20px 40px;margin:0}
.np-information-contact .card-body > .row > [class*="col"]{width:auto;max-width:none;padding:0}
.np-information-contact address{margin:6px 0 0}
.np-information-contact #form-contact{max-width:760px}
.np-information-contact #form-contact .row.mb-3{display:block;margin:0 0 18px!important}
.np-information-contact #form-contact .col-form-label{display:block;width:100%;text-align:left!important;
  font-size:14.5px;font-weight:600;color:var(--ink-max);margin:0 0 6px;padding:0}
.np-information-contact #form-contact .col-sm-10{width:100%;max-width:100%;padding:0}
/* login cards: the account pages style a bare <p> as a grey notice and give
   #content h2 a top margin; neither belongs inside these cards */
#content .np-auth h2{margin-top:0}
[class*="np-account-"] #content .np-auth p{background:none;border:0;border-radius:0;padding:0;margin:0 0 8px;
  text-align:left;color:var(--body);font-size:15.5px;line-height:1.55}
#content .np-auth-actions .btn{font-size:16px}

/* --- 53. FOOTER FLOW -------------------------------------------------------
   OpenCart's base sticky footer makes #container and footer position:absolute
   and reserves a fixed padding-bottom for the footer. Ours is 446px tall and
   the reserve did not match, so the footer sat over the last part of any
   long page (it was cutting the sign-in cards off) and its margin-top never
   applied. Normal flow instead: short pages still push the footer down. */
#container{position:relative;display:flex;flex-direction:column;min-height:100vh;
  padding-bottom:0!important;margin-bottom:0}
#container > main{flex:1 0 auto}
footer{position:static;bottom:auto;width:auto}

/* --- 54. ONE FINISH (review point 5) ---------------------------------------
   Radius scale is now 4/6/8/12 (was 6/10/14/20): the panels read as fitted
   rather than soft. One primary action colour, cobalt; --deep stays for the
   top bar only. Button shadows were doing more than the buttons; now a hair. */
:root{--sh-deep:0 1px 2px oklch(.32 .06 254 / .18);--sh-2:0 1px 2px oklch(.32 .06 254 / .08),0 4px 12px -6px oklch(.32 .06 254 / .12)}
.product-thumb .button button[formaction*="cart"]{background:var(--cobalt);box-shadow:var(--sh-deep)}
.product-thumb .button button[formaction*="cart"]:hover{background:var(--cobalt-lift)}
#search .btn,header .input-group .btn-light{background:var(--surface);color:var(--ink);
  border:1px solid var(--edge);border-left:0;box-shadow:none}
#search .btn:hover,header .input-group .btn-light:hover{background:var(--tint);color:var(--cobalt)}
.np-acct-btn{background:none;border:0;padding:0;color:inherit;font:inherit;cursor:pointer}
.np-acct-btn:focus-visible{outline:2px solid #fff;outline-offset:3px;border-radius:2px}
/* product page: the media and buy columns touched (0px). 40px gutter. */
@media(min-width:768px){
  .np-product-product #content > .row.mb-3{flex-wrap:nowrap;column-gap:40px}
  .np-product-product .np-pdp-media-col{flex:0 0 calc(54% - 20px);max-width:calc(54% - 20px)}
}
.np-product-product #tab-specification table td,.np-product-product #tab-specification table th{border-color:var(--line-2)}

/* --- 55. PHONE HEADER AND INTRO (review point 2) ---------------------------
   Measured at 390px: header 330px deep, first product at 1,537px. Now one
   row (menu, wordmark, basket) plus a search row; the top bar keeps only its
   icons; the hero drops the vial art and the fact line that the four USP
   tiles already say, and the tiles go 2x2. */
.np-burger{display:none}
.np-cart-count{display:none}
@media(max-width:767px){
  #top{min-height:0}
  #top .np-toprow > .col-auto{display:none}
  #top .np-topright .list-inline{margin:0;padding:6px 0;display:flex;justify-content:flex-end;gap:6px}
  #top .np-topright a,#top .np-acct-btn{display:inline-flex;align-items:center;min-height:36px;padding:0 8px}
  header .container > .row{display:grid;grid-template-columns:44px 1fr auto;
    grid-template-areas:"burger logo cart" "search search search";align-items:center;
    column-gap:10px;row-gap:10px;margin:0;padding:10px 0 12px}
  header .container > .row > *{width:auto;max-width:none;flex:none;padding:0;margin:0}
  header .np-burger{grid-area:burger;display:flex;align-items:center;justify-content:center;
    width:44px;height:44px;border:1px solid var(--edge);border-radius:var(--r-sm);background:#fff;
    color:var(--ink-max);font-size:18px}
  header .container > .row > .col-md-3{grid-area:logo}
  header .container > .row > .col-md-5{grid-area:search}
  header #cart{grid-area:cart}
  #logo{padding:0;text-align:left}
  #logo .np-wordmark{align-items:flex-start}
  #logo .np-wm-main{font-size:24px}
  #logo .np-wm-sub{font-size:9.5px;margin-top:3px}
  header #search,header form.input-group{margin:0!important}
  header form.input-group .form-control,header form.input-group .btn{height:44px}
  #cart .btn{height:44px;min-width:56px;padding:0 12px;display:flex;align-items:center;gap:6px;font-size:15px}
  #cart .btn::after{display:none}
  #cart .np-cart-label{display:none}
  #cart .np-cart-count{display:inline-flex;min-width:20px;height:20px;padding:0 5px;border-radius:10px;
    background:#fff;color:var(--cobalt);font-size:12.5px;font-weight:800;align-items:center;justify-content:center}
  .np-menu-band{border-top:0}
  .np-menu-band .navbar-toggler,.np-menu-band #category{display:none!important}
  .np-menu-band #navbar-menu.show,.np-menu-band #navbar-menu.collapsing{border-top:1px solid var(--edge)}
  .np-common-home .np-hero{padding-top:22px;padding-bottom:18px}
  .np-common-home .np-hero-right{display:none}
  .np-common-home .np-hero h1{font-size:34px;line-height:1.05}
  .np-common-home .np-lede{font-size:16px;margin-bottom:16px}
  .np-common-home .np-hero-eyebrow{margin-bottom:8px}
  .np-usp{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:0 0 22px;padding:0}
  .np-usp li{padding:12px;font-size:13.5px;line-height:1.35;border:1px solid var(--edge);border-radius:var(--r-sm);background:#fff}
  .np-usp li strong{display:block;font-size:14.5px;margin-bottom:2px}
  .np-usp li + li{border-left:1px solid var(--edge)}
  .np-sec-head{margin-bottom:12px}
  .np-sec-head p{display:none}
}

/* phone header, second look at the screenshot: the hero lost its side gutter
   (shorthand zeroed the full-bleed padding), the collapsed menu band kept a
   desktop min-height, #top's inherited bottom margin left a pale strip, and
   the open menu drew desktop tabs. */
#top{margin-bottom:0}
@media(max-width:767px){
  #top .np-topright .list-inline{padding:2px 0}
  #top .np-topright a,#top .np-acct-btn{min-height:40px}
  .np-menu-band,.np-menu-band > #menu{min-height:0;padding-top:0;padding-bottom:0;border-bottom:0}
  .np-menu-band #navbar-menu.show,.np-menu-band #navbar-menu.collapsing{border-bottom:1px solid var(--edge)}
  #menu .navbar-nav{flex-direction:column;align-items:stretch;gap:0;padding:4px 0 8px}
  #menu .navbar-nav > .nav-item{width:100%}
  #menu .navbar-nav > .nav-item > .nav-link{display:block;width:100%;text-align:left;padding:13px 2px;
    border:0;border-bottom:1px solid var(--line-2);border-radius:0;font-size:16px}
  #menu .navbar-nav > .nav-item:last-child > .nav-link{border-bottom:0}
  #menu .navbar-nav > .nav-item > .nav-link.active{border-bottom-color:var(--line-2);color:var(--cobalt)}
}

/* --- 56. PHONE CARDS (review point 3) --------------------------------------
   Prices and buttons already line up across every row (measured 0px spread).
   The problem was size: 11px text in a 170px card. On a phone a card now
   shows name, purity, price, the discount line and the button, all 13px+;
   formula and weight stay on desktop cards and on every product page. */
@media(max-width:767px){
  .product-thumb .content{padding:12px}
  .product-thumb .np-card-title{font-size:15px;line-height:1.25;margin-bottom:8px}
  .np-meta dt:not([data-k="purity"]),.np-meta dd:not([data-k="purity"]){display:none}
  .np-meta dt,.np-meta dd{font-size:13px}
  .product-thumb .np-from{font-size:13px}
  .product-thumb .price-new{font-size:18px}
  .product-thumb .np-tier-hint{font-size:13px;line-height:1.3}
  .product-thumb .button button[formaction*="cart"]{font-size:14px}
}
/* one left edge again: the phone burger became the header row's first child,
   so section 50's ".col-md-3:first-child" stopped matching and the wordmark
   picked its 12px column padding back up. No positional selector this time. */
@media(min-width:768px){
  header .container > .row > .col-md-3{padding-left:0}
  .np-menu-band > #menu{padding-left:0;padding-right:0}
}
@media(min-width:768px){
  .np-menu-band > #menu{max-width:1316px}
  .np-menu-band #menu .navbar-nav > .nav-item > .nav-link{padding-left:0;padding-right:0}
}
@media(min-width:768px){.np-menu-band #menu .navbar-nav{column-gap:32px}}

/* --- 57. ACCOUNT AREA AND PHONE CHECKOUT (loop tick 4) ---------------------
   OpenCart's base also reserves 730px (phone) / 400px (desktop) under
   #content for the absolute footer that section 53 removed: every phone page
   ended in an 800px blank band. Account pages centred a 900px column, 44px in
   from the breadcrumb; the stacked-label form treatment from section 43 now
   covers every account form, not just register/login. */
#content,#column-left,#column-right{padding-bottom:0}
[class*="np-account-"] #content{margin-left:0;margin-right:auto}
[class*="np-account-"] #content form .row.mb-3{display:block;margin-bottom:18px!important}
[class*="np-account-"] #content form .col-form-label{display:block;width:100%;text-align:left!important;
  float:none;font-size:14.5px;font-weight:600;color:var(--ink-max);margin:0 0 6px;padding:0;max-width:none}
[class*="np-account-"] #content form .row.mb-3 > [class*="col-sm-10"]{width:100%;max-width:100%;flex:0 0 100%;padding:0}
[class*="np-account-"] #content .form-control,[class*="np-account-"] #content .form-select{background:#fff;
  border:1px solid var(--edge);height:46px;font-size:15px;border-radius:var(--r-sm);padding:0 13px}
[class*="np-account-"] #content textarea.form-control{height:auto;min-height:120px;padding:10px 13px}
[class*="np-account-"] #content .form-control:focus,[class*="np-account-"] #content .form-select:focus{
  border-color:var(--cobalt);box-shadow:var(--glow)}
[class*="np-account-"] #content > p:only-of-type{max-width:none}
[class*="np-account-"] #content > p:only-of-type + .text-end{text-align:left!important;margin-top:16px}

/* --- 58. SECOND REVIEW (loop tick 4) ---------------------------------------
   Basket page: section 30's action-row rule (.row:last-of-type, gap 14px)
   also matched the header and footer rows, so the basket button fell under
   the logo and the fourth footer column wrapped. That block is now scoped to
   #content. Below 1364px the container had a 12px gutter and the menu none;
   both now share one gutter. Phone headings come down. Card rows stretch so
   prices and buttons line up however the names wrap (supersedes section 32). */
@media(min-width:992px){
  .container{max-width:1380px;padding-left:32px;padding-right:32px}
  .np-menu-band > #menu{width:min(1316px,calc(100% - 64px));max-width:none}
}
@media(min-width:768px) and (max-width:991.98px){
  .np-menu-band > #menu{width:calc(100% - 40px);max-width:none}
}
#product-list.row,#product-list,.row.np-grid,#content .row[class*="row-cols"]{align-items:stretch}
#product-list .product-thumb,.row > [class*="col"] > .product-thumb{height:100%}
@media(max-width:767px){
  #content h1,.np-cathead h1{font-size:32px;line-height:1.1;letter-spacing:-.025em}
  .np-product-product #content h1{font-size:30px}
}
@media(max-width:767px){#content > .np-cathead h1{font-size:32px;line-height:1.1;letter-spacing:-.025em}}
/* price block pinned to the foot of every card, so prices and buttons sit level
   across a row whatever the name or spec rows do above. Applies to every card grid:
   the shop (#product-list, cards as grid items) and the home/related rows, where
   each card sits in a .col and fills it with the height:100% above */
.product-thumb > .image{flex:0 0 auto}
.product-thumb .content,.product-thumb .description{flex:1 1 auto}
.product-thumb .price{margin-top:auto}
/* the volume-pricing line under the price keeps its height when empty (no tiers), or a card
   with one would lift its price above its neighbours' */
.np-tier-hint:empty::before{content:"\00a0"}

/* --- 59. PRODUCT RENDERS (vial3ml) ----------------------------------------
   Vial images are rendered on white and multiplied onto whatever tint frames
   them, so frame and image always meet without a seam and the vial's own
   shadow stays real. The hero image carries its own shadows: no filter box. */
.np-product-product .np-media-img,.np-cart-img img,.np-cart td img,.np-cart-img{mix-blend-mode:multiply}
.np-hero-media[src*=".jpg"]{filter:none;mix-blend-mode:multiply} /* *= not $=: the address ends in ?v=<time> */
/* the tint has to sit BEHIND the image for multiply to reach it: an element's
   own background is blended together with its content */
.np-product-product .np-media{background:var(--tint);border:1px solid var(--edge);border-radius:var(--r)}
.np-product-product .np-media-img{background:transparent;border:0}

/* vial renders carry the --tint outside the vial already; multiply was tinting the vial itself blue */
.product-thumb .image img[src*="vials"],.np-media-img[src*="vials"],.np-cart-img img[src*="vials"],
.np-cart td img[src*="vials"],#cart img[src*="vials"]{mix-blend-mode:normal}

/* --- 60. LOOP TICK 5 ------------------------------------------------------
   Spec table: Bootstrap .table-bordered draws each row's border in the body
   text colour, so every row had a near-black rule. Sequences: overflow-wrap
   :anywhere split residues mid-name on phones ("As|p"); break-word only breaks
   a string that can't fit any other way, so hyphens go first. Home: the hero
   fact line repeated the four tiles under it; the dispatch cut-off moved into
   a tile and the line goes. */
.np-product-product #tab-specification .table > :not(caption) > *,
.np-product-product #tab-specification .table > :not(caption) > * > *{border-color:var(--line-2)}
.np-product-product #tab-specification tr{border-bottom:1px solid var(--line-2)}
.np-product-product #tab-specification tr:last-child{border-bottom:0}
.np-product-product .tab-content > *{overflow-wrap:break-word}
.np-common-home .np-hero-facts-inline{display:none}
/* sequences in descriptions break only between residues (the old inline break-all split "As|p") */
.np-seq{word-break:normal;overflow-wrap:break-word;font-variant-numeric:tabular-nums}

/* --- 61. PHONE SWEEP (loop tick 6) ----------------------------------------
   Body padding for the sticky basket bar applied on every page, leaving an
   88px tinted strip under the footer everywhere but the product page. Footer
   link groups stacked four deep (~900px): two columns. Search filters had
   selects whose text sat on the bottom border. Wishlist was a five-column
   table squeezed to 390px: now one stacked row per product. */
@media(max-width:767px){
  body:not(.np-product-product){padding-bottom:0}
  footer .container > .row{display:grid;grid-template-columns:1fr 1fr;column-gap:20px;row-gap:6px;margin:0}
  footer .container > .row > [class*="col"]{width:auto;max-width:none;padding:0;margin-bottom:16px}
  footer .np-foot-h{margin-bottom:10px}
  footer li{margin-bottom:6px}
  footer a{font-size:14.5px}
  .np-foot-tag{font-size:14px}
  .np-product-search #content .form-select,.np-product-search #content .form-control{
    height:44px;padding:0 12px;line-height:42px;font-size:15px}
  .np-product-search #content .form-check-label{font-size:14px;color:var(--body)}
  .np-product-search #content .input-group-text{height:44px;font-size:13.5px}
  .np-account-wishlist .table-responsive{overflow:visible;border:1px solid var(--edge);border-radius:var(--r);background:#fff;padding:4px 12px}
  .np-account-wishlist table,.np-account-wishlist tbody,.np-account-wishlist tr,.np-account-wishlist td{display:block;width:100%;border:0}
  .np-account-wishlist thead{display:none}
  .np-account-wishlist tbody tr{display:grid;grid-template-columns:64px 1fr auto;grid-template-areas:"img name price" "img stock act";
    column-gap:12px;row-gap:4px;padding:12px 0;border-bottom:1px solid var(--line-2);align-items:center}
  .np-account-wishlist tbody tr:last-child{border-bottom:0}
  .np-account-wishlist tbody td{padding:0!important;width:auto!important;text-align:left!important;background:none!important}
  .np-account-wishlist tbody td:nth-child(1){grid-area:img}
  .np-account-wishlist tbody td:nth-child(1) img{width:64px;height:64px;object-fit:contain}
  .np-account-wishlist tbody td:nth-child(2){grid-area:name;font-weight:600}
  .np-account-wishlist tbody td:nth-child(3){display:none}
  .np-account-wishlist tbody td:nth-child(4){grid-area:stock;font-size:13.5px;color:var(--muted)}
  .np-account-wishlist tbody td:nth-child(4)::before{content:"Stock: "}
  .np-account-wishlist tbody td:nth-child(5){grid-area:price;text-align:right!important;font-weight:700}
  .np-account-wishlist tbody td:nth-child(6){grid-area:act;display:flex;gap:6px;justify-content:flex-end}
  .np-account-wishlist tbody td:nth-child(6) .btn{height:36px;padding:0 12px;margin:0!important;font-size:13.5px}
}
@media(max-width:767px){
  .np-account-wishlist .table,.np-account-wishlist .table > :not(caption) > *,
  .np-account-wishlist .table > :not(caption) > * > *{border:0!important;box-shadow:none!important}
  .np-account-wishlist tbody tr{border-bottom:1px solid var(--line-2)!important}
  .np-account-wishlist tbody tr:last-child{border-bottom:0!important}
  .np-account-wishlist tbody td:nth-child(6) .btn-danger{background:#fff;color:var(--muted);border:1px solid var(--edge)!important}
}

/* --- 62. BASKET DRAWER, TOASTS, TOP BAR, CARDS (Chris's review, 29 Oct) -----
   The header basket opens a right-hand drawer (np-cart-drawer.js) instead of
   a dropdown that overflowed on phones. Adds open the drawer; other messages
   are small toasts, not full-width alerts. Top bar: "My Account" is a
   <button> and sat 5px high; every item is now a 36px flex row. */
.np-cart-src{display:none!important}
#cart .np-cart-open{position:relative}
#cart .np-cart-open::after{display:none}

.np-drawer-backdrop{position:fixed;inset:0;background:oklch(.22 .03 254 / .45);opacity:0;visibility:hidden;
  transition:opacity .25s var(--ease),visibility .25s;z-index:1060}
.np-drawer{position:fixed;top:0;right:0;height:100vh;height:100dvh;width:min(440px,100vw);background:#fff;z-index:1061;
  display:flex;flex-direction:column;transform:translateX(100%);visibility:hidden;
  transition:transform .32s cubic-bezier(.2,.8,.2,1),visibility .32s;box-shadow:-16px 0 48px oklch(.22 .03 254 / .16);outline:0}
body.np-drawer-open .np-drawer{transform:none;visibility:visible}
body.np-drawer-open .np-drawer-backdrop{opacity:1;visibility:visible}
body.np-drawer-open{overflow:hidden}
.np-drawer-head{display:flex;align-items:center;justify-content:space-between;padding:18px 22px;border-bottom:1px solid var(--edge)}
.np-drawer-head h2{margin:0;font-size:19px;font-weight:800;letter-spacing:-.02em}
.np-drawer-count{color:var(--muted);font-weight:600}
.np-drawer-close{width:40px;height:40px;display:flex;align-items:center;justify-content:center;border:1px solid var(--edge);
  border-radius:var(--r-sm);background:#fff;color:var(--ink);font-size:17px;cursor:pointer}
.np-drawer-close:hover{border-color:var(--ink-max)}
.np-drawer-added{display:none;align-items:center;gap:9px;margin:14px 22px 0;padding:11px 13px;border-radius:var(--r-sm);
  background:oklch(.96 .04 150);color:oklch(.42 .11 150);font-size:14.5px;font-weight:600}
.np-drawer-added.show{display:flex}
.np-drawer-body{flex:1;overflow-y:auto;padding:4px 22px}
.np-drawer-foot{border-top:1px solid var(--edge);padding:16px 22px 20px;background:#fff}
.np-drawer .np-cart-row{display:grid;grid-template-columns:64px minmax(0,1fr) auto;gap:14px;align-items:center;
  padding:14px 0;border-bottom:1px solid var(--line-2)}
.np-drawer .np-cart-row:last-child{border-bottom:0}
.np-drawer .np-cart-img{display:block;width:64px;height:64px;border-radius:var(--r-sm);background:var(--tint);overflow:hidden}
.np-drawer .np-cart-img img{width:64px;height:64px;object-fit:contain;display:block}
.np-drawer .np-cart-detail{display:flex;flex-direction:column;gap:3px;min-width:0}
.np-drawer .np-cart-name{font-weight:700;color:var(--ink-max);text-decoration:none;font-size:15px;line-height:1.25}
.np-drawer .np-cart-name:hover{color:var(--cobalt)}
.np-drawer .np-cart-qty,.np-drawer .np-cart-opt{font-size:13.5px;color:var(--muted)}
.np-drawer .np-cart-right{display:flex;flex-direction:column;align-items:flex-end;gap:6px}
.np-drawer .np-cart-price{font-weight:700;font-variant-numeric:tabular-nums}
.np-drawer .np-cart-right form{margin:0}
.np-drawer .np-cart-remove{width:30px;height:30px;display:flex;align-items:center;justify-content:center;border:0;
  background:none;color:var(--muted);border-radius:var(--r-xs);cursor:pointer}
.np-drawer .np-cart-remove:hover{color:#B42318;background:#FDF2F2}
.np-drawer .np-cart-totals{display:flex;flex-direction:column;gap:4px;margin-bottom:14px}
.np-drawer .np-cart-total-row{display:flex;justify-content:space-between;font-size:14.5px;color:var(--muted);font-variant-numeric:tabular-nums}
.np-drawer .np-cart-total-row:last-child{color:var(--ink-max);font-weight:800;font-size:18px;padding-top:6px}
.np-drawer .np-cart-actions{display:flex;flex-direction:column;gap:8px}
.np-cart-btn{display:flex;align-items:center;justify-content:center;height:50px;border-radius:var(--r-sm);font-weight:700;
  text-decoration:none;font-size:16px}
.np-cart-btn-solid{background:var(--cobalt);color:#fff}
.np-cart-btn-solid:hover{background:var(--cobalt-lift);color:#fff}
.np-cart-btn-ghost{background:#fff;color:var(--ink-max);border:1px solid var(--edge);height:46px;font-weight:600;font-size:15px}
.np-cart-btn-ghost:hover{border-color:var(--ink-max);color:var(--ink-max)}
.np-drawer .np-cart-note{display:flex;align-items:center;gap:8px;justify-content:center;margin:12px 0 0;font-size:13.5px;color:var(--muted)}
.np-drawer .np-cart-empty{padding:56px 0;text-align:center;color:var(--muted)}
.np-drawer .np-cart-empty p{margin:0 0 18px;font-size:16px}
@media(prefers-reduced-motion:reduce){.np-drawer,.np-drawer-backdrop{transition:none}}

/* toasts: OpenCart's messages as small cards, bottom-right, auto-dismissed by the drawer script */
#alert{position:fixed;right:20px;bottom:20px;top:auto;left:auto;z-index:1070;display:flex;flex-direction:column;gap:8px;
  width:min(380px,calc(100vw - 40px));pointer-events:none}
#alert .alert{pointer-events:auto;margin:0;border:1px solid var(--edge);border-radius:var(--r);background:#fff;color:var(--ink);
  box-shadow:0 10px 30px -10px oklch(.22 .03 254 / .28);padding:13px 42px 13px 14px;font-size:14.5px;line-height:1.4;
  animation:np-toast-in .25s var(--ease)}
#alert .alert-success{border-left:0}
#alert .alert-success i{color:oklch(.55 .13 150)}
#alert .alert-danger i{color:#B42318}
#alert .alert a{color:var(--cobalt);font-weight:600}
#alert .alert.np-toast-out{opacity:0;transform:translateY(6px);transition:opacity .35s,transform .35s}
@keyframes np-toast-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media(max-width:575px){#alert{right:12px;left:12px;bottom:12px;width:auto}}

/* top bar: one row height, everything centred on the same line */
#top .np-toprow{align-items:center;min-height:46px}
#top .list-inline{display:flex;align-items:center;margin:0;padding:0}
#top .list-inline-item{display:flex;align-items:center;margin:0}
#top .np-topright .list-inline{justify-content:flex-end;gap:18px}
#top .np-topright a,#top .np-acct-btn,#top .dropdown-toggle{display:inline-flex;align-items:center;gap:6px;height:36px;
  line-height:1;padding:0;margin:0;vertical-align:middle;font:inherit;font-size:14px}
#top .np-acct-btn{border:0;background:none;color:inherit}

/* cards: compare is gone, the basket button takes the space */
.product-thumb .button{grid-template-columns:minmax(0,1fr) 44px}

/* product page: sticky basket bar only once the main button has scrolled away */
.np-atc-bar{transform:translateY(110%);transition:transform .25s var(--ease)}
body.np-atc-show .np-atc-bar{transform:none}
/* drawer: drop the old dropdown's boxed totals so totals and buttons share one edge */
.np-drawer .np-cart-totals,.np-drawer .np-cart-actions{background:none;padding:0;margin-left:0;margin-right:0;border:0;border-radius:0}
.np-drawer .np-cart-total-row{padding:0;border:0}
.np-drawer .np-cart-total-row:last-child{border-top:1px solid var(--edge);margin-top:4px;padding-top:10px}
#alert{margin:0}
.product-thumb .np-img-b:not([src]){visibility:hidden}

/* --- 63. CHECKOUT, REBUILT ------------------------------------------------
   One page, hosted-checkout style. Details, delivery, shipping and payment
   run down the left; the order summary sits in a tinted band on the right
   and stays in view. Shipping and payment are inline option lists, not
   modals. On phones the summary folds into a bar at the top and repeats in
   full above the Place order button. The shop navigation and search step
   back so the only way forward is the order.                              */
.np-checkout-checkout .np-menu-band,
.np-checkout-checkout header #search,
.np-checkout-checkout header .col-md-5,
.np-checkout-checkout .np-burger{display:none!important}
.np-checkout-checkout header #cart{margin-left:auto}
.np-checkout-checkout #content{padding-bottom:0}
.np-checkout-checkout main,.np-checkout-success main{background:#fff}
.np-checkout-checkout footer,.np-checkout-success footer{margin-top:0}
.np-co #password legend{margin-top:6px}

.np-co-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin:0 0 22px}
.np-co-head h1{margin:0;font-size:34px}
.np-co-secure{margin:0;font-size:13.5px;font-weight:600;color:var(--muted);white-space:nowrap}
.np-co-secure i{font-size:12px;margin-right:4px}

/* sections and headings */
.np-co-section + .np-co-section{margin-top:34px}
.np-co fieldset + fieldset{margin-top:30px}
.np-co legend{float:none;width:auto;padding:0;margin:0 0 14px;font-size:16px;font-weight:700;color:var(--ink-max);line-height:1.3}
.np-co legend.np-step{font-size:21px;letter-spacing:-.01em;margin-bottom:16px}
.np-co fieldset > br,.np-co #payment-new > br,.np-co #shipping-new > br{display:none}
#checkout-register{position:relative}
.np-co-login{margin:0 0 18px;font-size:14.5px;color:var(--muted)}
.np-co-login a{color:var(--cobalt);font-weight:600}
@media(min-width:768px){
  .np-co-login{position:absolute;top:5px;right:0;margin:0}
}

/* field grid: six tracks so pairs, thirds and full rows all line up */
.np-co-main .row{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:0 14px;margin:0;--bs-gutter-x:0}
.np-co-main .row > *{grid-column:1/-1;order:10;width:auto;max-width:none;padding:0;margin:0 0 16px}
.np-co-main .row > .col:empty{display:none}
@media(min-width:768px){
  .np-co-main .row-cols-md-2 > *{grid-column:span 3}
}
.np-co-main .row > :has(> [id$="-country"]){order:1}
.np-co-main .row > :has(> [id$="-firstname"]),
.np-co-main .row > :has(> [id$="-lastname"]){order:2}
.np-co-main .row > :has(> [id$="-company"]){order:3}
.np-co-main .row > :has(> [id$="-address-1"]){order:4}
.np-co-main .row > :has(> [id$="-address-2"]){order:5}
.np-co-main .row > :has(> [id$="-city"]){order:6}
.np-co-main .row > :has(> [id$="-zone"]){order:7}
.np-co-main .row > :has(> [id$="-postcode"]){order:8}
.np-co-main .row > :has(> [id$="-country"]),
.np-co-main .row > :has(> [id$="-company"]),
.np-co-main .row > :has(> [id$="-address-1"]),
.np-co-main .row > :has(> [id$="-address-2"]),
.np-co-main .row > :has(.form-check),
.np-co-main .row > .custom-field:has(> select),
.np-co-main .row > #password{grid-column:1/-1}
.np-co-main .row > :has(> [id$="-zone"]),
.np-co-main .row > :has(> [id$="-postcode"]){grid-column:span 3}
@media(min-width:768px){
  .np-co-main .row > :has(> [id$="-city"]),
  .np-co-main .row > :has(> [id$="-zone"]),
  .np-co-main .row > :has(> [id$="-postcode"]){grid-column:span 2}
  .np-co-main #password .row > *{grid-column:span 3}
}

/* fields */
.np-co .form-label{display:block;font-size:13.5px;font-weight:600;color:var(--body);margin:0 0 6px}
.np-co .required > .form-label::before,
.np-co .required .form-label::before{content:none}
/* custom fields are switched on per customer group by OpenCart's script, which adds .required
   to the required ones: label the rest "(optional)", like Company and Flat */
.np-co .custom-field:not(.required) > .form-label::after,
[class*="np-account-"] .custom-field:not(.required) .form-label::after,
[class*="np-account-"] .custom-field:not(.required) .col-form-label::after{content:" (optional)"}
.np-co .form-control,.np-co .form-select{height:48px;padding:0 14px;font-size:15px;color:var(--ink-max);
  background-color:#fff;border:1px solid var(--edge);border-radius:var(--r-sm);box-shadow:none}
.np-co .form-select{padding-right:38px}
.np-co textarea.form-control{height:auto;min-height:96px;padding:12px 14px;line-height:1.5}
.np-co .form-control::placeholder{color:oklch(.68 .015 var(--brand-h))}
.np-co .form-control:focus,.np-co .form-select:focus{border-color:var(--cobalt);
  box-shadow:0 0 0 3px oklch(from var(--cobalt) l c h / .14)}
.np-co .form-control.is-invalid,.np-co .form-select.is-invalid{border-color:var(--flag);background-image:none}
.np-co .invalid-feedback{font-size:13px;color:var(--flag);margin-top:6px}

/* account type: one segmented control */
.np-seg{display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:4px;max-width:480px;
  background:var(--surface);border:1px solid var(--edge);border-radius:var(--r)}
.np-seg-input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.np-seg-label{display:flex;align-items:center;justify-content:center;height:42px;margin:0;padding:0 10px;
  border-radius:var(--r-sm);font-size:14.5px;font-weight:600;color:var(--muted);cursor:pointer;text-align:center;
  transition:background-color .15s var(--ease),color .15s var(--ease)}
.np-seg-label:hover{color:var(--ink-max)}
.np-seg-input:checked + .np-seg-label{background:#fff;color:var(--ink-max);
  box-shadow:0 1px 2px rgba(11,13,16,.08),0 0 0 1px var(--edge)}
.np-seg-input:focus-visible + .np-seg-label{outline:2px solid var(--cobalt);outline-offset:1px}
.np-seg-input:disabled + .np-seg-label{cursor:default}

/* checkboxes and radios: plain, aligned, no boxed rows */
.np-co .form-check{display:flex;align-items:flex-start;gap:10px;min-height:0;margin:0 0 12px;padding:0;background:none;border:0}
.np-co .form-check-input{float:none;flex:0 0 18px;width:18px;height:18px;margin:2px 0 0;
  border:1.5px solid oklch(.74 .02 var(--brand-h));border-radius:4px;box-shadow:none}
.np-co .form-check-input[type=radio]{border-radius:50%}
.np-co .form-check-input:checked{background-color:var(--cobalt);border-color:var(--cobalt)}
.np-co .form-check-input:focus{box-shadow:0 0 0 3px oklch(from var(--cobalt) l c h / .14)}
.np-co .form-check-label{margin:0;font-size:14.5px;font-weight:400;line-height:1.45;color:var(--body)}
.np-co .form-check-label a{color:var(--cobalt);font-weight:600}
/* the research-use declaration is the one tick that matters: give it a panel */
.np-co .custom-field:has(input[type=checkbox]) > div:has(> .form-check){padding:14px 16px;
  background:var(--tint-2);border:1px solid var(--edge);border-radius:var(--r)}
.np-co .custom-field:has(input[type=checkbox]) > div > .form-check:last-child{margin-bottom:0}
/* saved or new address: the same segmented control as the account choice */
.np-co #payment-addresses[style*="block"],.np-co #shipping-addresses[style*="block"]{display:grid!important}
.np-co #payment-addresses,.np-co #shipping-addresses{grid-template-columns:1fr 1fr;gap:4px;padding:4px;max-width:480px;margin:0 0 14px;
  background:var(--surface);border:1px solid var(--edge);border-radius:var(--r)}
.np-co #payment-addresses .form-check,.np-co #shipping-addresses .form-check{position:relative;display:block;margin:0}
.np-co #payment-addresses .form-check-input,.np-co #shipping-addresses .form-check-input{position:absolute;opacity:0;width:1px;height:1px;margin:0}
.np-co #payment-addresses .form-check-label,.np-co #shipping-addresses .form-check-label{display:flex;align-items:center;justify-content:center;height:40px;
  border-radius:var(--r-sm);font-size:14.5px;font-weight:600;color:var(--muted);cursor:pointer}
.np-co #payment-addresses .form-check-input:checked + .form-check-label,
.np-co #shipping-addresses .form-check-input:checked + .form-check-label{background:#fff;color:var(--ink-max);
  box-shadow:0 1px 2px rgba(11,13,16,.08),0 0 0 1px var(--edge)}
.np-co #payment-addresses .form-check-input:focus-visible + .form-check-label,
.np-co #shipping-addresses .form-check-input:focus-visible + .form-check-label{outline:2px solid var(--cobalt);outline-offset:1px}
.np-co #payment-new,.np-co #shipping-new{margin-top:18px}
.np-co #payment-new .text-end,.np-co #shipping-new .text-end{text-align:left!important}

/* buttons in the left column */
.np-co .np-co-continue,
.np-co #button-payment-address,.np-co #button-shipping-address{height:52px;min-width:240px;margin-top:8px;padding:0 28px;
  font-size:16px;font-weight:700;color:#fff;background:var(--cobalt);border:0;border-radius:var(--r-sm);box-shadow:none}
.np-co .np-co-continue:hover,
.np-co #button-payment-address:hover,.np-co #button-shipping-address:hover{background:var(--cobalt-lift)}

/* details, once saved */
#checkout-register.is-done #form-register{display:none}
.np-co-review{border:1px solid var(--edge);border-radius:var(--r);padding:0 16px;background:#fff}
.np-co-review-row{display:grid;grid-template-columns:76px minmax(0,1fr) auto;gap:14px;align-items:baseline;padding:14px 0;font-size:14.5px}
.np-co-review-row + .np-co-review-row{border-top:1px solid var(--edge)}
.np-co-review-key{color:var(--muted)}
.np-co-review-val{color:var(--ink-max);overflow-wrap:anywhere}
.np-co-review-edit{padding:0;background:none;border:0;font-size:14px;font-weight:600;color:var(--cobalt);
  text-decoration:underline;text-underline-offset:3px}

/* shipping and payment options */
.np-opts{background:#fff;border:1px solid var(--edge);border-radius:var(--r);overflow:hidden;transition:opacity .15s var(--ease)}
.np-opts.is-loading{opacity:.5;pointer-events:none}
.np-opt{display:flex;align-items:center;gap:12px;margin:0;padding:16px;cursor:pointer;font-size:15px;color:var(--ink-max)}
.np-opt + .np-opt{border-top:1px solid var(--edge)}
.np-opt input{flex:0 0 18px;width:18px;height:18px;margin:0;accent-color:var(--cobalt)}
.np-opt-name{flex:1 1 auto;font-weight:500}
.np-opt-price{font-weight:700;font-variant-numeric:tabular-nums}
.np-opt.is-on{background:var(--tint-2);box-shadow:inset 0 0 0 1.5px var(--cobalt)}
.np-opt:first-child{border-radius:calc(var(--r) - 1px) calc(var(--r) - 1px) 0 0}
.np-opt:last-child{border-radius:0 0 calc(var(--r) - 1px) calc(var(--r) - 1px)}
.np-opt:only-child{border-radius:calc(var(--r) - 1px)}
.np-opts-empty,.np-opts-error{max-width:none;margin:0;padding:16px;font-size:14.5px;color:var(--muted);background:var(--surface)}
.np-opts-error{color:var(--flag);background:#FDF5F3}
.np-opts-group{margin:0;padding:12px 16px 4px;font-size:12.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}

/* order note and terms */
.np-co-note{margin-top:22px}
.np-co-note summary{display:inline-flex;align-items:center;gap:8px;list-style:none;cursor:pointer;
  font-size:14.5px;font-weight:600;color:var(--cobalt)}
.np-co-note summary::-webkit-details-marker{display:none}
.np-co-note summary::before{content:"+";display:grid;place-items:center;width:20px;height:20px;
  border:1.5px solid currentColor;border-radius:50%;font-size:14px;line-height:1}
.np-co-note[open] summary::before{content:"\2212"}
.np-co-note textarea{margin-top:12px}
.np-co-agree{margin-top:18px}

/* order summary */
.np-co-sumhead{margin:0 0 20px;font-size:18px;font-weight:700;color:var(--ink-max)}
.np-sum-items{list-style:none;margin:0;padding:0}
.np-sum-item{display:grid;grid-template-columns:64px minmax(0,1fr) auto;gap:16px;align-items:center}
.np-sum-item + .np-sum-item{margin-top:16px}
.np-sum-thumb{position:relative;display:block;width:64px;height:64px;background:#fff;
  border:1px solid var(--edge);border-radius:var(--r)}
.np-sum-thumb img{display:block;width:100%;height:100%;object-fit:contain;border-radius:inherit}
.np-sum-qty{position:absolute;top:-9px;right:-9px;display:grid;place-items:center;min-width:22px;height:22px;padding:0 6px;
  border-radius:11px;background:oklch(.40 .03 var(--brand-h));color:#fff;font-size:12px;font-weight:700;line-height:1}
.np-sum-name{display:block;font-size:14.5px;font-weight:600;line-height:1.3;color:var(--ink-max);text-decoration:none}
.np-sum-name:hover{color:var(--cobalt)}
.np-sum-meta{display:block;margin-top:3px;font-size:12.5px;color:var(--muted)}
.np-sum-price{font-size:14.5px;font-weight:600;color:var(--ink-max);font-variant-numeric:tabular-nums;white-space:nowrap}
.np-sum-totals{margin:20px 0 0;padding:16px 0 0;border-top:1px solid var(--edge)}
.np-sum-row{display:flex;justify-content:space-between;gap:16px;padding:4px 0;font-size:14.5px}
.np-sum-row dt{font-weight:400;color:var(--body)}
.np-sum-row dd{margin:0;color:var(--ink-max);font-variant-numeric:tabular-nums}
.np-sum-row.is-total{align-items:baseline;margin-top:10px;padding-top:14px;border-top:1px solid var(--edge);font-size:19px}
.np-sum-row.is-total dt,.np-sum-row.is-total dd{font-weight:700}
.np-sum-row.is-total small{margin-right:4px;font-size:12px;font-weight:500;color:var(--muted)}
.np-co #checkout-payment{margin-top:22px}
.np-co #checkout-payment .text-end{text-align:left!important}
.np-co #checkout-payment .btn-primary{display:block;width:100%;height:56px;padding:0 20px;font-size:17px;font-weight:700;
  color:#fff;background:var(--cobalt);border:0;border-radius:var(--r-sm);box-shadow:none;opacity:1}
.np-co #checkout-payment .btn-primary:hover{background:var(--cobalt-lift)}
.np-co #checkout-payment .btn-primary:disabled{background:oklch(.80 .03 var(--brand-h));color:#fff}
.np-sum-hint{margin:10px 0 0;font-size:13.5px;color:var(--muted);text-align:center}
.np-sum-trust{margin:16px 0 0;font-size:13px;line-height:1.5;color:var(--muted);text-align:center}
.np-sum-trust i{font-size:11.5px;margin-right:3px}
.np-co-ruo{margin:14px 0 0;font-size:12.5px;line-height:1.5;color:var(--muted);text-align:center}

/* desktop: two columns, the summary in a tinted band that runs to the edge */
@media(min-width:992px){
  .np-co-grid{flex-wrap:nowrap;margin:0}
  .np-co.container #content > .np-co-grid > .np-co-main{flex:0 0 57%;max-width:57%;padding:0 56px 72px 0}
  .np-co.container #content > .np-co-grid > .np-co-side{flex:1 1 auto;width:auto;max-width:none;padding:34px 0 72px 48px;
    background:var(--tint-2);border-left:1px solid var(--edge);
    box-shadow:0 0 0 100vmax var(--tint-2);clip-path:inset(0 -100vmax 0 0)}
  .np-co-summary{position:sticky;top:24px}
  .np-co-sumbar{display:none}
}
/* phones and tablets: summary bar at the top, full summary above the button */
@media(max-width:991.98px){
  .np-co-head h1{font-size:28px}
  .np-co-sumbar{margin:0 0 26px;background:var(--tint-2);border:1px solid var(--edge);border-radius:var(--r)}
  .np-co-sumtoggle{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;
    padding:14px 16px;background:none;border:0;font-size:14.5px;font-weight:600;color:var(--cobalt);text-align:left}
  .np-co-sumtext i{font-size:13px}
  .np-co-chev{margin-left:4px;font-size:11px;transition:transform .2s var(--ease)}
  .np-co-sumbar.is-open .np-co-chev{transform:rotate(180deg)}
  .np-co-sumtotal{font-size:17px;font-weight:700;color:var(--ink-max);font-variant-numeric:tabular-nums}
  .np-co-sumpanel{padding:6px 16px 16px;border-top:1px solid var(--edge)}
  .np-co-sumpanel .np-sum{padding-top:14px}
  .np-co.container #content > .np-co-grid > .np-co-side{margin-top:36px;padding-bottom:48px}
  .np-co-summary{padding:22px 18px;background:var(--tint-2);border:1px solid var(--edge);border-radius:var(--r)}
}
@media(max-width:767.98px){
  .np-co .np-co-continue,
  .np-co #button-payment-address,.np-co #button-shipping-address{width:100%;min-width:0}
  .np-seg{max-width:none}
  .np-co-review-row{grid-template-columns:64px minmax(0,1fr) auto;gap:10px}
}
@media(max-width:767px){
  /* checkout header: no menu button, so the logo takes its column */
  .np-checkout-checkout header .container > .row{grid-template-columns:1fr auto;grid-template-areas:"logo cart"}
  .np-checkout-checkout header #cart{margin-left:0}
  /* review rows: label and Change on one line, the value full width beneath */
  .np-co-review-row{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"key edit" "val val";row-gap:4px}
  .np-co-review-key{grid-area:key}
  .np-co-review-val{grid-area:val;overflow-wrap:break-word}
  .np-co-review-edit{grid-area:edit}
}

/* --- 64. ORDER CONFIRMED ----------------------------------------------------
   The page after Place order: what was bought, where it is going and what
   happens next, laid out like the checkout it follows.                    */
.np-done-head{display:flex;align-items:center;gap:16px;margin:4px 0 26px}
.np-done-tick{display:grid;place-items:center;flex:0 0 48px;width:48px;height:48px;border-radius:50%;
  border:2px solid var(--cobalt);color:var(--cobalt);font-size:20px}
.np-done-ref{margin:0 0 2px;font-size:14px;font-weight:600;color:var(--muted)}
.np-done-head h1{margin:0;font-size:32px;line-height:1.15}
.np-done-card{margin:0 0 16px;padding:20px 22px;background:#fff;border:1px solid var(--edge);border-radius:var(--r)}
.np-done-card h2{margin:0 0 8px;font-size:18px;font-weight:700;color:var(--ink-max)}
.np-done-card p{max-width:none;margin:0;font-size:15px;line-height:1.55;color:var(--body)}
.np-done-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 24px;margin:14px 0 0}
.np-done-grid dt{margin:0 0 4px;font-size:13.5px;font-weight:600;color:var(--muted)}
.np-done-grid dd{margin:0;font-size:15px;line-height:1.5;color:var(--ink-max);overflow-wrap:anywhere}
.np-done-actions{display:flex;align-items:center;flex-wrap:wrap;gap:12px 24px;margin:26px 0 0}
.np-done-actions .np-cart-btn{min-width:220px;padding:0 26px;text-decoration:none;box-shadow:none}
.np-done-link{font-size:15px;font-weight:600;color:var(--cobalt)}
.np-done-help{max-width:none;margin:22px 0 0;font-size:14px;color:var(--muted)}
.np-done-help a{color:var(--cobalt);font-weight:600}
@media(max-width:575.98px){
  .np-done-head h1{font-size:26px}
  .np-done-grid{grid-template-columns:1fr}
  .np-done-actions .np-cart-btn{width:100%}
}

/* --- 65. VIP CLUB -----------------------------------------------------------
   Gold is the members' colour and appears nowhere else on the site. Deep
   ink for text on light grounds, a brighter foil on the dark card and the
   welcome letter. Everything here renders only for the VIP customer group. */
:root{
  --gold:#B48F45;
  --gold-ink:#7A5B1C;
  --gold-bright:#E2C57E;
  --gold-soft:#F7F1E3;
  --gold-edge:#E6D6B2;
  --night:#0F1623;
}

/* top bar link and account menu item */
#top .np-vip-pill{color:var(--gold-bright)!important;font-weight:700}
#top .np-vip-pill:hover{color:#F1DC9E!important}
.dropdown-menu .np-vip-item{color:var(--gold-ink)!important;font-weight:700}

/* the one-time welcome letter */
.np-vipw{width:min(560px,calc(100% - 32px));max-height:calc(100% - 32px);padding:0;border:0;border-radius:var(--r-lg);
  background:transparent;color:var(--body);overflow:visible}
.np-vipw::backdrop{background:rgba(9,13,20,.62);backdrop-filter:blur(3px)}
.np-vipw[open]{animation:np-vipw-in .32s var(--ease)}
@keyframes np-vipw-in{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.np-vipw-card{position:relative;max-height:calc(100dvh - 32px);overflow:auto;padding:38px 40px 34px;background:#fff;
  border-radius:var(--r-lg);border-top:4px solid var(--gold);box-shadow:0 30px 80px rgba(9,13,20,.35)}
.np-vipw h2{margin:0 0 14px;font-size:28px;line-height:1.15;color:var(--ink-max)}
.np-vipw p{max-width:none;margin:0 0 12px;font-size:16px;line-height:1.6;color:var(--body)}
.np-vipw-note{margin:18px 0 0!important;padding:14px 16px;
  background:var(--gold-soft);border:1px solid var(--gold-edge);border-radius:var(--r);font-size:14.5px!important;color:var(--ink)!important}
.np-vipw-btn{display:flex;align-items:center;justify-content:center;height:52px;margin-top:22px;border-radius:var(--r-sm);
  background:var(--night);color:#fff;font-size:16px;font-weight:700;text-decoration:none;box-shadow:inset 0 -2px 0 var(--gold)}
.np-vipw-btn:hover{background:#1B2638;color:#fff}
.np-vipw-x{position:absolute;top:14px;right:14px;display:grid;place-items:center;width:38px;height:38px;padding:0;
  border:0;border-radius:50%;background:transparent;color:var(--muted);font-size:18px}
.np-vipw-x:hover{background:var(--surface);color:var(--ink-max)}
@media(max-width:575.98px){
  .np-vipw-card{padding:30px 22px 24px}
  .np-vipw h2{font-size:24px;padding-right:28px}
  .np-vipw p{font-size:15.5px}
}

/* the club page */
.np-vip-hero{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:48px;align-items:center;
  margin:6px 0 56px;padding:44px 48px;background:var(--night);border-radius:var(--r-lg);
  border:1px solid rgba(226,197,126,.28);color:#fff}
.np-vip-hero h1{margin:0 0 14px;color:#fff;font-size:42px;line-height:1.08}
.np-vip-lede{max-width:46ch;margin:0;color:rgba(255,255,255,.8);font-size:17px;line-height:1.55}
.np-vip-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
.np-vip-btn{display:inline-flex;align-items:center;justify-content:center;height:50px;padding:0 24px;border-radius:var(--r-sm);
  background:var(--gold-bright);color:#1B1406;font-size:15.5px;font-weight:700;text-decoration:none}
.np-vip-btn:hover{background:#EBD08F;color:#1B1406}
.np-vip-btn-ghost{background:transparent;border:1px solid rgba(226,197,126,.55);color:var(--gold-bright)}
.np-vip-btn-ghost:hover{background:rgba(226,197,126,.1);color:#F1DC9E}
.np-vip-cardwrap{display:flex;justify-content:flex-end}
.np-vip-card{position:relative;display:flex;flex-direction:column;justify-content:space-between;width:100%;max-width:420px;
  aspect-ratio:1.586;padding:26px 28px;border-radius:16px;overflow:hidden;
  background:#1A2333;border:1px solid rgba(226,197,126,.5)}
.np-vip-card-top{display:flex;justify-content:space-between;align-items:flex-start}
.np-vip-card-brand{display:flex;flex-direction:column;color:var(--gold-bright);font-size:21px;font-weight:800;line-height:1;letter-spacing:.01em}
.np-vip-card-brand small{margin-top:5px;color:rgba(226,197,126,.7);font-size:8.5px;font-weight:700;letter-spacing:.32em}
.np-vip-card-tier{color:var(--gold-bright);font-size:24px;font-weight:800;letter-spacing:.1em}
.np-vip-card-name{color:#F4E6C1;font-size:20px;font-weight:600;letter-spacing:.12em;text-transform:uppercase}
.np-vip-card-foot{display:flex;gap:30px;color:#F4E6C1;font-size:14px;font-weight:600;letter-spacing:.06em}
.np-vip-card-foot small{display:block;margin-bottom:3px;color:rgba(226,197,126,.65);font-size:9.5px;font-weight:700;
  letter-spacing:.18em;text-transform:uppercase}

.np-vip-section{margin:0 0 56px}
.np-vip-head{display:flex;align-items:baseline;justify-content:space-between;gap:24px;margin:0 0 18px;
  padding-bottom:14px;border-bottom:1px solid var(--gold-edge)}
.np-vip-head h2{margin:0;font-size:26px;color:var(--ink-max)}
.np-vip-head p{max-width:52ch;margin:0;color:var(--muted);font-size:15px;text-align:right}
.np-vip-grid .product-thumb{border-color:var(--gold-edge)}
.np-vip-grid .product-thumb .image{position:relative}
.np-vip-grid .product-thumb .image::before{content:"VIP only";position:absolute;top:10px;left:10px;z-index:2;
  padding:4px 9px;border-radius:var(--r-xs);background:var(--night);color:var(--gold-bright);
  font-size:11.5px;font-weight:700;letter-spacing:.04em}

.np-vip-prices{background:#fff;border:1px solid var(--edge);border-radius:var(--r);overflow:hidden}
.np-vip-prow{display:grid;grid-template-columns:minmax(0,1fr) 120px 190px;gap:16px;align-items:center;
  padding:15px 20px;color:var(--ink-max);text-decoration:none;font-size:15.5px}
.np-vip-prow + .np-vip-prow{border-top:1px solid var(--line-2)}
a.np-vip-prow:hover{background:var(--gold-soft)}
.np-vip-prow-head{padding-top:12px;padding-bottom:12px;background:var(--surface);color:var(--muted);font-size:13px;font-weight:600}
.np-vip-prow-head span:not(:first-child),.np-vip-pstd,.np-vip-pmem{text-align:right}
.np-vip-pname{font-weight:600}
.np-vip-pstd s{color:var(--muted);text-decoration-thickness:1px}
.np-vip-pmem{font-weight:800;color:var(--gold-ink);font-variant-numeric:tabular-nums}
.np-vip-pmem em{margin-left:10px;font-style:normal;font-size:13px;font-weight:600;color:var(--muted)}

.np-vip-note{margin:0 0 64px;padding:18px 22px;
  background:var(--gold-soft);border:1px solid var(--gold-edge);border-radius:var(--r)}
.np-vip-note p{max-width:none;margin:0;font-size:15px;line-height:1.55;color:var(--ink)}
.np-vip-note a{color:var(--gold-ink);font-weight:700}

@media(max-width:991.98px){
  .np-vip-hero{grid-template-columns:1fr;gap:32px;padding:32px 28px}
  .np-vip-cardwrap{justify-content:flex-start}
  .np-vip-head{flex-direction:column;gap:6px}
  .np-vip-head p{text-align:left}
}
@media(max-width:575.98px){
  .np-vip-hero{margin-bottom:40px;padding:26px 20px;border-radius:var(--r)}
  .np-vip-hero h1{font-size:30px}
  .np-vip-lede{font-size:16px}
  .np-vip-btn{flex:1 1 100%}
  .np-vip-card{padding:20px 20px}
  .np-vip-card-brand{font-size:18px}
  .np-vip-card-name{font-size:16px}
  .np-vip-card-foot{gap:22px;font-size:13px}
  .np-vip-prow{grid-template-columns:minmax(0,1fr) auto;row-gap:2px;padding:14px 16px}
  .np-vip-prow-head{display:none}
  .np-vip-pname{grid-column:1/-1}
  .np-vip-pstd{text-align:left}
}
/* the club page is a full-width page, not a narrow account form */
.np-account-vip #column-right{display:none!important}
#account-vip #content{max-width:none}
#account-vip #content .np-vip-head h2{margin:0;font-size:26px;font-weight:700;color:var(--ink-max)}
#account-vip #content .np-vip-head p,#account-vip #content .np-vip-note p,#account-vip #content .np-vip-lede{padding:0;background:none;border:0;border-radius:0;text-align:left}
/* the same card grid as the shop (no #product-list id: OpenCart's list/grid script rewrites that one) */
#account-vip .np-vip-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;align-items:stretch}
#account-vip .np-vip-grid .product-thumb{height:100%}
#account-vip .np-vip-grid .product-thumb .content{flex:1 1 auto}
#account-vip .np-vip-grid .product-thumb .description{flex:1 1 auto}
#account-vip .np-vip-grid .product-thumb .price{margin-top:auto}
#account-vip .np-vip-grid .product-thumb .np-badge.stock{display:none}
#account-vip .np-vip-head p{text-align:left}
@media(min-width:992px){#account-vip .np-vip-head p{text-align:right}}
@media(max-width:1199px){#account-vip .np-vip-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:767px){#account-vip .np-vip-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}}
/* VIP card on the account page */
.np-acct-vip{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:16px;align-items:center;margin:0 0 28px;padding:18px 22px;
  background:var(--night);border:1px solid rgba(226,197,126,.4);border-radius:var(--r-lg);color:#fff;text-decoration:none}
.np-acct-vip:hover{background:#172133;color:#fff}
.np-acct-vip-text strong{display:block;color:var(--gold-bright);font-size:16px;letter-spacing:.02em}
.np-acct-vip-text span{display:block;margin-top:2px;color:rgba(255,255,255,.78);font-size:14.5px}
.np-acct-vip-go{color:var(--gold-bright);font-size:14.5px;font-weight:700;white-space:nowrap}
@media(max-width:575.98px){
  .np-acct-vip{grid-template-columns:1fr;padding:16px}
  .np-acct-vip-go{grid-column:1/-1}
}
#account-vip #content .np-vip-lede{color:rgba(255,255,255,.82);font-size:17px}

/* --- 66. MY ACCOUNT -----------------------------------------------------------
   One account shell: a left menu with the customer's name and the current
   page marked, the page itself beside it. On phones the menu becomes a row of
   tabs above the page. Only the sections the shop uses are listed.          */
.np-account-login #column-left,.np-account-register #column-left,.np-account-forgotten #column-left,
.np-account-forgotten-reset #column-left,.np-account-success #column-left,.np-account-logout #column-left{display:none!important}
.np-acct-nav{background:#fff;border:1px solid var(--edge);border-radius:var(--r);overflow:hidden}
.np-acct-who{padding:18px 18px 16px;border-bottom:1px solid var(--edge)}
.np-acct-who strong{display:block;font-size:16px;line-height:1.3;color:var(--ink-max)}
.np-acct-who span{display:block;margin-top:2px;font-size:13.5px;color:var(--muted);overflow-wrap:anywhere}
.np-acct-who .np-acct-who-vip{display:inline-block;margin-top:10px;padding:3px 9px;border-radius:var(--r-xs);
  background:var(--night);color:var(--gold-bright);font-size:12px;font-weight:700;letter-spacing:.02em}
.np-acct-links{list-style:none;margin:0;padding:8px}
.np-acct-links a{display:block;padding:10px 12px;border-radius:var(--r-sm);font-size:15px;font-weight:500;color:var(--ink-max);text-decoration:none}
.np-acct-links a:hover{background:var(--surface)}
.np-acct-links a[aria-current="page"]{background:var(--tint);color:var(--cobalt);font-weight:700}
.np-acct-links .np-acct-link-vip{color:var(--gold-ink);font-weight:700}
.np-acct-links .np-acct-out{margin-top:6px;padding-top:6px;border-top:1px solid var(--line-2)}
.np-acct-links .np-acct-out a{color:var(--muted)}
@media(min-width:992px){
  .row:has(> #column-left.np-acct-col){flex-wrap:nowrap;gap:48px}
  #column-left.np-acct-col{flex:0 0 260px;width:260px;max-width:260px;padding:0;position:sticky;top:24px;align-self:flex-start}
  .row:has(> #column-left.np-acct-col) > #content{flex:1 1 auto;width:auto;max-width:880px;margin:0}
}
@media(max-width:991.98px){
  #column-left.np-acct-col{display:block;width:100%;max-width:none;flex:0 0 100%;margin:0 0 22px;padding:0}
  .np-acct-who{display:none}
  .np-acct-nav{overflow:visible;background:none;border:0;border-radius:0}
  .np-acct-links{display:flex;gap:8px;margin:0 -16px;padding:0 16px 4px;overflow-x:auto;scrollbar-width:none}
  .np-acct-links::-webkit-scrollbar{display:none}
  .np-acct-links li{flex:0 0 auto}
  .np-acct-links a{padding:9px 14px;border:1px solid var(--edge);border-radius:999px;background:#fff;font-size:14px;white-space:nowrap}
  .np-acct-links a[aria-current="page"]{background:var(--ink-max);border-color:var(--ink-max);color:#fff}
  .np-acct-links .np-acct-out{margin:0;padding:0;border:0}
  .row:has(> #column-left.np-acct-col) > #content{max-width:none}
}
/* account pages: headings, buttons, empty states */
[class*="np-account-"] #content h1{margin:0 0 22px;font-size:32px}
.np-acct-headrow{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:0 0 22px}
.np-acct-headrow h1{margin:0!important}
.np-acct-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:46px;padding:0 20px;border-radius:var(--r-sm);
  background:var(--cobalt);color:#fff;font-size:15px;font-weight:700;text-decoration:none;border:0}
.np-acct-btn:hover{background:var(--cobalt-lift);color:#fff}
.np-acct-btn i{font-size:13px}
[class*="np-account-"] #content .np-acct-muted{max-width:none;margin:0 0 14px;padding:0;background:none;border:0;font-size:15px;color:var(--muted)}
.np-acct-empty{padding:28px;background:#fff;border:1px dashed var(--edge);border-radius:var(--r);text-align:center}
[class*="np-account-"] #content .np-acct-empty p{max-width:none;margin:0 0 14px;padding:0;background:none;border:0;color:var(--body);font-size:15.5px}
[class*="np-account-"] #content .np-acct-empty p:last-child{margin:0}
.np-acct-pager{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:18px;font-size:14px;color:var(--muted)}
.np-back{display:inline-flex;align-items:center;gap:8px;margin:0 0 10px;font-size:14.5px;font-weight:600;color:var(--cobalt);text-decoration:none}
.np-back i{font-size:11px}

/* status pills */
.np-order-status{display:inline-flex;align-items:center;height:26px;padding:0 10px;border-radius:999px;font-size:12.5px;font-weight:700;
  background:var(--surface);color:var(--body);white-space:nowrap}
.np-status-pending{background:#FFF4DE;color:#8A5A00}
.np-status-processing,.np-status-processed{background:var(--tint);color:var(--cobalt)}
.np-status-shipped,.np-status-complete{background:#E5F4EA;color:var(--ok)}
.np-status-canceled,.np-status-denied,.np-status-failed,.np-status-voided,.np-status-expired,
.np-status-refunded,.np-status-reversed,.np-status-chargeback{background:#F7E9E6;color:var(--flag)}

/* order cards (orders page and overview) */
.np-orders{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.np-order-link,.np-ov-order{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto auto;gap:18px;align-items:center;
  padding:16px 18px;background:#fff;border:1px solid var(--edge);border-radius:var(--r);color:var(--ink-max);text-decoration:none;
  transition:border-color .15s var(--ease),box-shadow .15s var(--ease)}
.np-order-link:hover,.np-ov-order:hover{border-color:oklch(.78 .04 var(--brand-h));box-shadow:var(--sh-1);color:var(--ink-max)}
.np-order-thumbs{display:flex}
.np-order-thumbs img{width:56px;height:56px;object-fit:contain;background:#fff;border:1px solid var(--edge);border-radius:var(--r-sm)}
.np-order-thumbs img + img{margin-left:-18px;box-shadow:-2px 0 0 #fff}
.np-order-main{display:flex;flex-direction:column;min-width:0}
.np-order-no{font-size:16px;font-weight:700}
.np-order-meta{margin-top:2px;font-size:14px;color:var(--muted)}
.np-order-total{font-size:16px;font-weight:700;font-variant-numeric:tabular-nums}
.np-order-go{font-size:14px;font-weight:600;color:var(--cobalt);white-space:nowrap}
.np-order-go i{margin-left:4px;font-size:10px}
.np-ov-order{grid-template-columns:auto minmax(0,1fr) auto}
@media(max-width:767.98px){
  .np-order-link{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"thumbs status" "main total" "go go";row-gap:12px;padding:14px}
  .np-order-link .np-order-thumbs{grid-area:thumbs}
  .np-order-link .np-order-main{grid-area:main}
  .np-order-link .np-order-status{grid-area:status;justify-self:end}
  .np-order-link .np-order-total{grid-area:total;align-self:end}
  .np-order-link .np-order-go{grid-area:go;padding-top:10px;border-top:1px solid var(--line-2)}
  .np-ov-order{grid-template-columns:minmax(0,1fr) auto;row-gap:12px}
  .np-ov-order .np-order-main{grid-column:1/-1;grid-row:2}
}

/* overview */
.np-ov{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.np-ov-card{padding:20px 22px;background:#fff;border:1px solid var(--edge);border-radius:var(--r)}
.np-ov-orders{grid-column:1/-1}
.np-ov-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:0 0 12px}
[class*="np-account-"] #content .np-ov-head h2{margin:0;padding:0;border:0;font-size:17px;font-weight:700;color:var(--ink-max)}
.np-ov-head a{font-size:14px;font-weight:600;color:var(--cobalt)}
[class*="np-account-"] #content .np-ov-text{max-width:none;margin:0;padding:0;background:none;border:0;font-size:15px;line-height:1.6;color:var(--body)}
.np-ov-link{display:inline-block;margin-top:12px;font-size:14px;font-weight:600;color:var(--cobalt)}
.np-ov .np-ov-order{padding:12px 14px;background:var(--tint-2)}
@media(max-width:767.98px){.np-ov{grid-template-columns:1fr}}

/* order detail */
.np-oi-head{margin:0 0 22px}
.np-oi-title{display:flex;align-items:center;flex-wrap:wrap;gap:12px}
[class*="np-account-"] #content .np-oi-title h1{margin:0}
[class*="np-account-"] #content .np-oi-date{max-width:none;margin:6px 0 0;padding:0;background:none;border:0;font-size:15px;color:var(--muted)}
.np-oi-grid{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(0,1fr);gap:16px;align-items:start}
.np-oi-side{display:grid;gap:16px}
.np-oi-card{padding:20px 22px;background:#fff;border:1px solid var(--edge);border-radius:var(--r)}
[class*="np-account-"] #content .np-oi-card h2{margin:0 0 12px;padding:0;border:0;font-size:17px;font-weight:700;color:var(--ink-max)}
[class*="np-account-"] #content .np-oi-card p{max-width:none;margin:0;padding:0;background:none;border:0;font-size:15px;line-height:1.6;color:var(--body)}
[class*="np-account-"] #content .np-oi-card p.np-oi-sub{margin-top:10px;padding-top:10px;border-top:1px solid var(--line-2);font-size:14px;color:var(--muted)}
.np-oi-lines{list-style:none;margin:0;padding:0}
.np-oi-line{display:grid;grid-template-columns:64px minmax(0,1fr) auto;gap:14px;align-items:start;padding:14px 0}
.np-oi-line + .np-oi-line{border-top:1px solid var(--line-2)}
.np-oi-line:first-child{padding-top:2px}
.np-oi-thumb img{display:block;width:64px;height:64px;object-fit:contain;background:#fff;border:1px solid var(--edge);border-radius:var(--r)}
.np-oi-info{display:flex;flex-direction:column;min-width:0;padding-top:4px}
.np-oi-name{font-size:15.5px;font-weight:700;color:var(--ink-max);text-decoration:none}
.np-oi-name:hover{color:var(--cobalt)}
.np-oi-meta{margin-top:3px;font-size:14px;color:var(--muted)}
.np-oi-form{display:none}
.np-oi-right{display:flex;flex-direction:column;align-items:flex-end;gap:8px;padding-top:4px}
.np-oi-total{font-size:15.5px;font-weight:700;font-variant-numeric:tabular-nums}
.np-oi-actions{display:flex;align-items:center;gap:14px}
.np-oi-again{height:34px;padding:0 14px;border:1px solid var(--cobalt);border-radius:var(--r-sm);background:#fff;color:var(--cobalt);font-size:13.5px;font-weight:700}
.np-oi-again:hover{background:var(--cobalt);color:#fff}
.np-oi-return{font-size:13.5px;color:var(--muted);text-decoration:underline;text-underline-offset:3px}
.np-oi-return:hover{color:var(--ink-max)}
.np-oi-items .np-sum-totals{margin-top:6px}
.np-oi-history{margin-top:16px}
.np-oi-timeline{list-style:none;margin:0;padding:0 0 0 18px;border-left:2px solid var(--edge)}
.np-oi-timeline li{position:relative;padding:0 0 16px 4px}
.np-oi-timeline li:last-child{padding-bottom:0}
.np-oi-timeline li::before{content:"";position:absolute;left:-26px;top:5px;width:12px;height:12px;border-radius:50%;background:#fff;border:2px solid var(--cobalt)}
.np-oi-tl-status{display:block;font-size:15px;font-weight:700;color:var(--ink-max)}
.np-oi-tl-date{display:block;font-size:13.5px;color:var(--muted)}
[class*="np-account-"] #content .np-oi-timeline p{margin:6px 0 0;padding:0;background:none;border:0;font-size:14.5px}
@media(max-width:991.98px){.np-oi-grid{grid-template-columns:1fr}}
@media(max-width:575.98px){
  .np-oi-card{padding:16px}
  .np-oi-line{grid-template-columns:56px minmax(0,1fr)}
  .np-oi-thumb img{width:56px;height:56px}
  .np-oi-right{grid-column:2;flex-direction:row;align-items:center;justify-content:space-between;padding-top:0}
}

/* address book */
.np-addrs{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.np-addr{display:flex;flex-direction:column;padding:20px 22px;background:#fff;border:1px solid var(--edge);border-radius:var(--r)}
.np-addr.is-default{border-color:oklch(.78 .05 var(--brand-h))}
.np-addr-default{align-self:flex-start;margin:0 0 10px;padding:2px 9px;border-radius:999px;background:var(--tint);color:var(--cobalt);font-size:12.5px;font-weight:700}
[class*="np-account-"] #content .np-addr-text{flex:1 1 auto;max-width:none;margin:0;padding:0;background:none;border:0;font-size:15px;line-height:1.6;color:var(--body)}
.np-addr-actions{display:flex;gap:18px;margin-top:16px;padding-top:14px;border-top:1px solid var(--line-2)}
.np-addr-actions a{font-size:14px;font-weight:600;color:var(--cobalt)}
.np-addr-actions .np-addr-delete{color:var(--muted)}
.np-addr-actions .np-addr-delete.is-confirming{color:var(--flag)}
@media(max-width:767.98px){.np-addrs{grid-template-columns:1fr}}

/* account forms: labels above full-width fields, the save button first */
[class*="np-account-"]:not(.np-account-login) #content form{max-width:600px}
[class*="np-account-"] #content form legend{float:none;width:auto;margin:0 0 14px;padding:0;font-size:18px;font-weight:700;color:var(--ink-max)}
[class*="np-account-"] #content form fieldset + fieldset{margin-top:26px}
[class*="np-account-"] #content form .row.mb-3{display:block;margin:0 0 16px!important;--bs-gutter-x:0}
[class*="np-account-"] #content form .row.mb-3 > .col-form-label{display:block;width:auto;max-width:none;margin:0 0 6px;padding:0;
  font-size:13.5px;font-weight:600;color:var(--body);text-align:left}
[class*="np-account-"] #content form .row.mb-3 > [class*="col-sm-"]{width:auto;max-width:none;padding:0}
[class*="np-account-"] #content form .required .col-form-label::before{content:none}
[class*="np-account-"] #content form .form-control,[class*="np-account-"] #content form .form-select{height:48px;padding:0 14px;font-size:15px;
  color:var(--ink-max);background-color:#fff;border:1px solid var(--edge);border-radius:var(--r-sm);box-shadow:none}
[class*="np-account-"] #content form textarea.form-control{height:auto;padding:12px 14px}
[class*="np-account-"] #content form .form-control:focus,[class*="np-account-"] #content form .form-select:focus{border-color:var(--cobalt);
  box-shadow:0 0 0 3px oklch(from var(--cobalt) l c h / .14)}
[class*="np-account-"] #content form .form-check{display:inline-flex;align-items:center;gap:8px;margin:0 22px 0 0;padding:0}
[class*="np-account-"] #content form .form-check-input{float:none;width:18px;height:18px;margin:0}
[class*="np-account-"] #content form .form-check-input:checked{background-color:var(--cobalt);border-color:var(--cobalt)}
[class*="np-account-"] #content form .form-check-label{margin:0;font-size:15px;font-weight:500}
[class*="np-account-"]:not(.np-account-login):not(.np-account-register) #content form .row:has(> .col > .btn){display:flex;flex-direction:row-reverse;
  justify-content:flex-end;align-items:center;gap:22px;margin:24px 0 0;--bs-gutter-x:0}
[class*="np-account-"]:not(.np-account-login):not(.np-account-register) #content form .row:has(> .col > .btn) > .col{flex:0 0 auto;width:auto;padding:0;text-align:left!important}
[class*="np-account-"] #content form .btn-primary{height:48px;padding:0 26px;border:0;border-radius:var(--r-sm);background:var(--cobalt);
  color:#fff;font-size:15.5px;font-weight:700;box-shadow:none}
[class*="np-account-"] #content form .btn-primary:hover{background:var(--cobalt-lift)}
[class*="np-account-"] #content form .btn-light{height:auto;padding:0;border:0;background:none;color:var(--muted);font-size:15px;font-weight:600;box-shadow:none}
[class*="np-account-"] #content form .btn-light:hover{color:var(--ink-max)}
@media(max-width:575.98px){
  [class*="np-account-"] #content h1{font-size:28px}
  .np-acct-headrow .np-acct-btn{height:42px;padding:0 14px;font-size:14px}
}
/* wish list rows, same anatomy as order lines */
.np-wl{list-style:none;margin:0;padding:0;background:#fff;border:1px solid var(--edge);border-radius:var(--r)}
.np-wl-item{display:grid;grid-template-columns:64px minmax(0,1fr) auto;gap:16px;align-items:center;padding:16px 20px}
.np-wl-item + .np-wl-item{border-top:1px solid var(--line-2)}
.np-wl-info{display:flex;flex-direction:column;min-width:0}
.np-wl-right{display:flex;align-items:center;gap:22px}
.np-wl-right s{margin-left:6px;font-size:13px;font-weight:500;color:var(--muted)}
.np-wl-add{height:40px;padding:0 16px;font-size:14px}
.np-wl-remove{font-size:13.5px;color:var(--muted);text-decoration:underline;text-underline-offset:3px}
.np-wl-remove:hover{color:var(--flag)}
@media(max-width:575.98px){
  .np-wl-item{grid-template-columns:56px minmax(0,1fr);padding:14px}
  .np-wl-right{grid-column:1/-1;justify-content:space-between}
}
/* newsletter preference */
.np-news-card{padding:20px 22px;background:#fff;border:1px solid var(--edge);border-radius:var(--r)}
[class*="np-account-"] #content .np-news .form-check{display:flex;margin:0 0 10px}
[class*="np-account-"] #content .np-news .form-check-label{font-size:15.5px;font-weight:600;color:var(--ink-max)}
[class*="np-account-"] #content .np-news-card .np-acct-muted{margin:0 0 0 26px;font-size:14px}
.np-return-link{grid-template-columns:minmax(0,1fr) auto auto}
@media(max-width:767.98px){.np-return-link{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"main status" "go go"}}
/* sign-up: the two ticks as plain checkboxes, the research declaration as one panel */
.np-reg-checks{display:grid;gap:12px;margin:26px 0 22px}
[class*="np-account-"] #content .np-reg-checks .form-check{display:flex;align-items:flex-start;gap:10px;margin:0;padding:0;background:none;border:0;min-height:0}
[class*="np-account-"] #content .np-reg-checks .form-check-input{margin-top:2px;border-radius:4px}
[class*="np-account-"] #content .np-reg-checks .form-check-label a{color:var(--cobalt);font-weight:600}
[class*="np-account-"] #content .np-reg-submit{min-width:220px}
[class*="np-account-"] #content form .custom-field:has(input[type=checkbox]) .form-check{display:flex;align-items:flex-start;gap:10px;width:100%;margin:0;
  padding:14px 16px;background:var(--tint-2);border:1px solid var(--edge);border-radius:var(--r)}
[class*="np-account-"] #content form .custom-field:has(input[type=checkbox]) .form-check-input{flex:0 0 18px;margin-top:2px;border-radius:4px}
[class*="np-account-"] #content form .custom-field:has(input[type=checkbox]) .form-check-label{font-size:14.5px;line-height:1.5}
@media(max-width:575.98px){[class*="np-account-"] #content .np-reg-submit{width:100%}}
/* sign-up: form on the left, what an account gives you on the right */
@media(min-width:992px){
  .np-account-register #content{display:grid;grid-template-columns:minmax(0,600px) minmax(0,1fr);column-gap:44px;align-content:start;max-width:none}
  .np-account-register #content > *{grid-column:1/-1}
  .np-account-register #content > form{grid-column:1}
  .np-account-register #content > .np-reg-side{grid-column:2;grid-row:span 1;align-self:start;position:sticky;top:24px}
}
.np-reg-side{padding:22px 24px;background:#fff;border:1px solid var(--edge);border-radius:var(--r)}
[class*="np-account-"] #content .np-reg-side h2{margin:0 0 12px;padding:0;border:0;font-size:17px;font-weight:700;color:var(--ink-max)}
.np-reg-side ul{list-style:none;margin:0 0 16px;padding:0;display:grid;gap:10px}
.np-reg-side li{position:relative;padding-left:24px;font-size:15px;line-height:1.45;color:var(--body)}
.np-reg-side li::before{content:"";position:absolute;left:2px;top:5px;width:12px;height:7px;border-left:2px solid var(--cobalt);border-bottom:2px solid var(--cobalt);transform:rotate(-45deg)}
[class*="np-account-"] #content .np-reg-side p{max-width:none;margin:0;padding-top:14px;border-top:1px solid var(--line-2);background:none;font-size:14.5px;color:var(--muted);text-align:left}
.np-reg-side p a{color:var(--cobalt);font-weight:600}
@media(max-width:991.98px){.np-reg-side{margin-top:28px}}
@media(min-width:992px){.np-account-register .row:has(> #column-left.np-acct-col) > #content,.np-account-register #content{max-width:1010px;grid-template-columns:minmax(0,600px) minmax(0,340px)}}
.np-acct-links .np-acct-link-vip[aria-current="page"]{background:var(--gold-soft);color:var(--gold-ink)}

/* --- 67. BASKET PAGE, REBUILT ---------------------------------------------
   Item rows on the left with a stepper that saves itself; the summary card
   on the right holds the totals, the discount code and the one button that
   matters. Delivery is worked out at checkout, so no estimate form here.  */
.np-bk-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin:0 0 22px}
.np-checkout-cart #content .np-bk-head h1{margin:0}
.np-bk-continue{font-size:15px;font-weight:600;color:var(--cobalt)}
.np-bk{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:28px;align-items:start;margin-bottom:56px}
.np-bk-list{list-style:none;margin:0;padding:0;background:#fff;border:1px solid var(--edge);border-radius:var(--r)}
.np-bk-line{display:grid;grid-template-columns:80px minmax(0,1fr) auto 120px;gap:20px;align-items:center;padding:18px 22px;transition:opacity .15s var(--ease)}
.np-bk-line + .np-bk-line{border-top:1px solid var(--line-2)}
.np-bk-line.is-busy{opacity:.5;pointer-events:none}
.np-bk-thumb img{display:block;width:80px;height:80px;object-fit:contain;background:#fff;border:1px solid var(--edge);border-radius:var(--r)}
.np-bk-info{display:flex;flex-direction:column;min-width:0}
.np-bk-name{font-size:16px;font-weight:700;color:var(--ink-max);text-decoration:none}
.np-bk-name:hover{color:var(--cobalt)}
.np-bk-unit{margin-top:3px;font-size:14px;color:var(--muted);font-variant-numeric:tabular-nums}
.np-bk-warn{margin-top:4px;font-size:13.5px;font-weight:600;color:var(--flag)}
.np-bk-qty{display:inline-flex;align-items:center;height:44px;border:1px solid var(--edge);border-radius:var(--r-sm);background:#fff;overflow:hidden}
.np-qty-btn{display:grid;place-items:center;width:40px;height:100%;padding:0;border:0;background:transparent;color:var(--ink-max);font-size:12px}
.np-qty-btn:hover:not(:disabled){background:var(--surface)}
.np-qty-btn:disabled{color:oklch(.8 .01 var(--brand-h));cursor:default}
.np-qty-input{width:44px;height:100%;padding:0;border:0;border-left:1px solid var(--line-2);border-right:1px solid var(--line-2);
  text-align:center;font-size:15px;font-weight:600;color:var(--ink-max);background:#fff;-moz-appearance:textfield;appearance:textfield}
.np-qty-input::-webkit-outer-spin-button,.np-qty-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.np-qty-input:focus{outline:2px solid var(--cobalt);outline-offset:-2px}
.np-bk-right{display:flex;flex-direction:column;align-items:flex-end;gap:6px}
.np-bk-total{font-size:16px;font-weight:700;font-variant-numeric:tabular-nums;color:var(--ink-max)}
.np-bk-remove{font-size:13.5px;color:var(--muted);text-decoration:underline;text-underline-offset:3px}
.np-bk-remove:hover{color:var(--flag)}
.np-bk-summary{position:sticky;top:24px;padding:24px;background:#fff;border:1px solid var(--edge);border-radius:var(--r)}
.np-checkout-cart #content .np-bk-summary h2{margin:0 0 14px;font-size:18px;font-weight:700;color:var(--ink-max)}
.np-bk-summary .np-sum-totals{margin:0;padding:0;border:0}
.np-checkout-cart #content .np-bk-note{max-width:none;margin:10px 0 18px;font-size:13.5px;color:var(--muted)}
.np-coupon{margin:0 0 16px}
.np-coupon-form{display:flex;gap:8px}
.np-coupon-form .form-control{flex:1 1 auto;height:46px;padding:0 14px;font-size:15px;border:1px solid var(--edge);border-radius:var(--r-sm);background:#fff;box-shadow:none}
.np-coupon-form .form-control:focus{border-color:var(--cobalt);box-shadow:0 0 0 3px oklch(from var(--cobalt) l c h / .14)}
.np-coupon-apply{flex:0 0 auto;height:46px;padding:0 18px;border:1px solid var(--edge);border-radius:var(--r-sm);background:var(--surface);
  color:var(--ink-max);font-size:14.5px;font-weight:700}
.np-coupon-apply:hover{background:var(--surface-2)}
.np-coupon-remove{margin-top:8px;padding:0;border:0;background:none;font-size:13.5px;color:var(--muted);text-decoration:underline;text-underline-offset:3px}
.np-bk-checkout{display:flex;align-items:center;justify-content:center;height:56px;border-radius:var(--r-sm);background:var(--cobalt);
  color:#fff;font-size:17px;font-weight:700;text-decoration:none}
.np-bk-checkout:hover{background:var(--cobalt-lift);color:#fff}
.np-bk-summary .np-sum-trust{margin-top:14px}
@media(max-width:991.98px){
  .np-bk{grid-template-columns:1fr}
  .np-bk-summary{position:static}
}
@media(max-width:575.98px){
  .np-bk-head{margin-bottom:16px}
  .np-bk-line{grid-template-columns:64px minmax(0,1fr) auto;grid-template-areas:"thumb info info" "thumb qty right";row-gap:12px;column-gap:14px;padding:16px}
  .np-bk-thumb{grid-area:thumb;align-self:start}
  .np-bk-thumb img{width:64px;height:64px}
  .np-bk-info{grid-area:info}
  .np-bk-qty{grid-area:qty;justify-self:start;height:40px}
  .np-bk-right{grid-area:right}
  .np-bk-summary{padding:20px}
}

/* --- 68. CONTACT, SEARCH, 404 ----------------------------------------------- */
.np-information-contact #content{max-width:none;margin:0}
.np-information-contact #content h1{margin:0 0 8px}
.np-information-contact #content .np-ct-lede{max-width:60ch;margin:0 0 26px;font-size:16.5px;color:var(--muted)}
.np-ct{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:32px;align-items:start;margin-bottom:56px}
.np-ct-form{padding:26px;background:#fff;border:1px solid var(--edge);border-radius:var(--r)}
.np-ct-pair{display:grid;grid-template-columns:1fr 1fr;gap:0 16px}
.np-ct-field{margin:0 0 16px}
.np-ct .form-label{display:block;margin:0 0 6px;font-size:13.5px;font-weight:600;color:var(--body)}
.np-ct .form-control{height:48px;padding:0 14px;font-size:15px;border:1px solid var(--edge);border-radius:var(--r-sm);background:#fff;box-shadow:none}
.np-ct textarea.form-control{height:auto;padding:12px 14px;line-height:1.5}
.np-ct .form-control:focus{border-color:var(--cobalt);box-shadow:0 0 0 3px oklch(from var(--cobalt) l c h / .14)}
.np-ct-send{height:50px;padding:0 26px;margin-top:4px}
.np-ct-side{display:grid;gap:0;background:#fff;border:1px solid var(--edge);border-radius:var(--r);overflow:hidden}
.np-ct-side section{padding:18px 22px}
.np-ct-side section + section{border-top:1px solid var(--line-2)}
.np-information-contact #content .np-ct-side h2{margin:0 0 6px;font-size:15px;font-weight:700;color:var(--ink-max)}
.np-information-contact #content .np-ct-side p{max-width:none;margin:0;font-size:15px;line-height:1.55;color:var(--body)}
.np-ct-side a{color:var(--cobalt);font-weight:600}
@media(max-width:991.98px){.np-ct{grid-template-columns:1fr}}
@media(max-width:575.98px){.np-ct-pair{grid-template-columns:1fr}.np-ct-form{padding:20px}.np-ct-send{width:100%}}

.np-srch{margin:0 0 28px;padding:18px;background:#fff;border:1px solid var(--edge);border-radius:var(--r)}
.np-srch-row{display:grid;grid-template-columns:minmax(0,1fr) 240px auto;gap:10px}
.np-srch .form-control,.np-srch .form-select{height:48px;padding:0 14px;font-size:15px;border:1px solid var(--edge);border-radius:var(--r-sm);box-shadow:none}
.np-srch .form-select{padding-right:36px}
.np-srch .np-acct-btn{height:48px;padding:0 24px}
.np-srch-opts{display:flex;flex-wrap:wrap;gap:8px 24px;margin-top:12px}
.np-srch-opts .form-check{display:flex;align-items:center;gap:8px;margin:0;padding:0;min-height:0}
.np-srch-opts .form-check-input{float:none;width:16px;height:16px;margin:0;border-radius:4px}
.np-srch-opts .form-check-label{font-size:14px;color:var(--muted)}
.np-srch-opts .form-check:has(input:disabled){display:none}
.np-product-search #content > hr,.np-product-search #content > h2{display:none}
.np-srch-empty{margin-bottom:56px}
@media(max-width:767.98px){.np-srch-row{grid-template-columns:1fr}.np-srch .np-acct-btn{width:100%}}

.np-404{max-width:640px;padding:40px 0 72px}
.np-404-code{margin:0 0 6px;font-size:14px;font-weight:700;letter-spacing:.06em;color:var(--cobalt)}
.np-error-not-found #content .np-404 h1{margin:0 0 10px}
.np-error-not-found #content .np-404-text{max-width:none;margin:0 0 24px;font-size:16.5px;color:var(--muted)}
.np-404-search{display:flex;gap:10px;margin:0 0 20px}
.np-404-search .form-control{flex:1 1 auto;height:50px;padding:0 16px;font-size:15.5px;border:1px solid var(--edge);border-radius:var(--r-sm);box-shadow:none}
.np-404-search .form-control:focus{border-color:var(--cobalt);box-shadow:0 0 0 3px oklch(from var(--cobalt) l c h / .14)}
.np-404-search .np-acct-btn{height:50px;padding:0 24px}
.np-404 .np-404-actions{display:flex;justify-content:flex-start;gap:22px}
.np-404 .np-404-actions a{font-size:15px;font-weight:600;color:var(--cobalt)}
@media(max-width:575.98px){.np-404{padding:16px 0 48px}.np-404-search{flex-direction:column}}
.np-ct-form{max-width:none!important;margin:0}
.np-404-search .form-control{background:#fff}
.np-acct-empty p{max-width:none!important;margin:0 0 14px}
.np-srch-bar{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:0 0 16px}
.np-product-search #content .np-srch-count{max-width:none;margin:0;font-size:14.5px;color:var(--muted)}
.np-srch-sort{display:flex;align-items:center;gap:10px}
.np-srch-sort label{font-size:14px;font-weight:600;color:var(--muted);white-space:nowrap}
.np-srch-sort .form-select{height:42px;min-width:200px;padding:0 36px 0 12px;font-size:14.5px;border:1px solid var(--edge);border-radius:var(--r-sm);box-shadow:none}

/* --- 69. HEADER ACCOUNT MENU ------------------------------------------------
   The top bar's inline list styling was leaking into the dropdown, laying
   its links out sideways and off the edge on phones. A plain vertical menu. */
#top .np-acct-menu{min-width:210px;margin-top:8px!important;padding:6px;border:1px solid var(--edge);border-radius:var(--r);
  background:#fff;box-shadow:0 12px 32px rgba(11,13,16,.14)}
#top .np-acct-menu > li{display:block;margin:0;padding:0}
#top .np-acct-menu .dropdown-item{display:block;padding:10px 12px!important;min-height:0!important;border-radius:var(--r-sm);
  color:var(--ink-max)!important;font-size:15px;font-weight:500;white-space:nowrap;text-decoration:none}
#top .np-acct-menu .dropdown-item:hover,#top .np-acct-menu .dropdown-item:focus{background:var(--surface);color:var(--ink-max)!important}
#top .np-acct-menu .np-acct-menu-primary{background:var(--cobalt);color:#fff!important;font-weight:700;text-align:center;margin-bottom:4px}
#top .np-acct-menu .np-acct-menu-primary:hover{background:var(--cobalt-lift);color:#fff!important}
#top .np-acct-menu .np-vip-item{color:var(--gold-ink)!important;font-weight:700}
#top .np-acct-menu .np-acct-menu-out{color:var(--muted)!important}
#top .np-acct-menu-sep{height:1px;margin:6px 4px;background:var(--line-2)}
#top .np-acct-menu:not(.show){display:none!important}
#top .np-acct-menu.show{display:block!important;text-align:left}
#top .np-acct-menu .dropdown-item{width:100%}
/* signed out: Sign in and Create account as a matched pair of full-width buttons,
   the same solid + outline treatment as the sign-in page */
#top .np-acct-menu:has(.np-acct-menu-primary){min-width:240px;padding:12px}
#top .np-acct-menu .np-acct-menu-primary,#top .np-acct-menu .np-acct-menu-secondary{
  display:flex;align-items:center;justify-content:center;height:44px;padding:0 14px!important;
  margin:0;border-radius:var(--r-sm);font-size:14.5px;font-weight:700;text-align:center}
#top .np-acct-menu .np-acct-menu-secondary{background:#fff;color:var(--cobalt)!important;
  border:1.5px solid var(--cobalt)}
#top .np-acct-menu .np-acct-menu-secondary:hover,#top .np-acct-menu .np-acct-menu-secondary:focus{
  background:var(--cobalt);color:#fff!important}
#top .np-acct-menu > li.np-acct-menu-note{margin:12px 0 7px;font-size:12.5px;line-height:1.3;color:var(--muted);text-align:center}

/* --- 70. PRODUCT PAGE TIDY ---------------------------------------------------
   Stock as a plain status, the basket's stepper beside Add to basket, and
   the volume price row that applies at the chosen quantity marked.        */
.np-product-product .np-stock{display:inline-flex;align-items:center;gap:7px;font-size:14.5px;font-weight:600;color:var(--muted)}
.np-product-product .np-stock.is-in{color:var(--ok)}
.np-product-product .np-stock.is-in::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--ok)}
.np-pdp-buy{display:flex;gap:10px;align-items:stretch}
.np-pdp-qty{flex:0 0 auto;height:auto;min-height:52px}
.np-pdp-qty .np-qty-btn{width:44px}
.np-pdp-qty .np-qty-input{width:52px}
.np-pdp-buy #button-cart{flex:1 1 auto;width:auto;margin:0;border-radius:var(--r-sm)}
.np-tiers [data-qty]{transition:background-color .15s var(--ease)}
.np-tiers [data-qty].is-on{background:var(--tint)!important;box-shadow:inset 3px 0 0 var(--cobalt)}
.np-tiers [data-qty].is-on span,.np-tiers [data-qty].is-on b{color:var(--cobalt)}
.np-pdp-buy{width:100%;max-width:100%}
.np-pdp-buy #button-cart{flex:1 1 0;min-width:0;padding-left:12px;padding-right:12px}
.np-pdp-assure{margin-top:12px}
.np-tiers .np-tiers-head{text-transform:none!important;letter-spacing:0!important;font-size:13px!important;font-weight:600;color:var(--muted)}
/* category toolbar: a count and Sort by on one line, no grey slab, same as search */
.np-toolbar{flex-direction:row!important;align-items:center!important;justify-content:space-between;gap:12px;margin:0 0 16px;padding:0!important;background:none!important;border:0!important}
.np-toolbar-count{display:block!important;font-size:14.5px;color:var(--muted)}
.np-toolbar-controls{flex-wrap:nowrap!important;width:auto!important;gap:10px}
.np-toolbar-controls label{display:inline!important;font-size:14px;font-weight:600;white-space:nowrap}
.np-toolbar-controls .form-select{height:42px!important;min-width:180px;padding:0 34px 0 12px;font-size:14.5px;border:1px solid var(--edge);border-radius:var(--r-sm);background-color:#fff}
@media(max-width:575.98px){.np-toolbar-controls .form-select{min-width:0;width:170px}}
/* currency: shows the active code, opens as the same plain menu as the account one */
#top .np-cur-btn{display:inline-flex;align-items:center;gap:6px;padding:0 4px;border:0;background:none;color:inherit;font-size:13.5px;font-weight:600}
#top .np-cur-btn::after{display:none}
#top .np-cur-btn i{font-size:10px;opacity:.7}
#top .np-cur-menu{min-width:180px}
/* footer headings in normal case: spaced-out capitals read as template chrome */
footer .np-foot-h{font-size:15px!important;text-transform:none!important;letter-spacing:0!important;font-weight:700}
/* site map: three plain groups */
.np-smap{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin:8px 0 56px}
.np-smap section{padding:20px 22px;background:#fff;border:1px solid var(--edge);border-radius:var(--r)}
.np-information-sitemap #content .np-smap h2{margin:0 0 12px;font-size:16px;font-weight:700;color:var(--ink-max)}
.np-smap ul{list-style:none;margin:0;padding:0}
.np-smap li{margin:0 0 9px}
.np-smap li ul{margin:8px 0 0 14px}
.np-smap a{font-size:15px;color:var(--body);text-decoration:none}
.np-smap a:hover{color:var(--cobalt);text-decoration:underline}
@media(max-width:767.98px){.np-smap{grid-template-columns:1fr}}
.np-product-category .np-acct-empty{margin:8px 0 56px}
/* card titles and footer headings are h2 for a clean heading order; keep their old look */
.product-thumb .np-card-title{font-family:var(--sans);font-weight:700;letter-spacing:-.02em;text-transform:none}
footer .np-foot-h{font-family:var(--sans);line-height:1.2;margin-top:0}
/* the icon font loads after first paint: hold each icon's space so nothing shifts when it lands */
i.fa-solid,i.fa-regular,i.fa-brands{display:inline-block;min-width:1em;text-align:center}
.np-information-information #content h2[id]{scroll-margin-top:20px}
/* shared confirmation pages (signed out, message sent, return received...) */
.np-common-success #content h1,[class*="-success"] #content h1{margin-bottom:12px}
[class*="-success"] #content > p,.np-account-logout #content > p{max-width:60ch;margin:0 0 10px;padding:0;background:none;text-align:left;color:var(--body);font-size:16px}
[class*="-success"] .np-done-actions,.np-account-logout .np-done-actions{margin:20px 0 56px}

/* ===== Product page: gallery, pack sizes, trust strip, details, FAQ (29 Oct) ===== */
.np-gallery{display:flex;gap:10px;margin-top:12px}
.np-gthumb{width:72px;height:72px;padding:0;border:1px solid var(--edge);border-radius:var(--r-sm);background:var(--tint);overflow:hidden;cursor:pointer}
.np-gthumb img{width:100%;height:100%;object-fit:cover;display:block}
.np-gthumb.is-on{border-color:var(--cobalt);box-shadow:0 0 0 1px var(--cobalt)}
.np-sizes{display:flex;flex-wrap:wrap;gap:8px;margin:2px 0 18px}
.np-size{display:inline-flex;align-items:center;min-height:40px;padding:0 16px;border:1px solid var(--edge);border-radius:999px;font-weight:600;font-size:15px;color:var(--ink-max);text-decoration:none;background:var(--bg)}
.np-size:hover{border-color:var(--cobalt);color:var(--cobalt)}
.np-size.is-on{background:var(--cobalt);border-color:var(--cobalt);color:#fff}
.np-trust{list-style:none;margin:16px 0 0;padding:14px 0 0;border-top:1px solid var(--line-2);display:grid;gap:8px}
.np-trust li{position:relative;padding-left:24px;font-size:15px;color:var(--body)}
.np-trust li::before{content:"";position:absolute;left:2px;top:5px;width:12px;height:7px;border-left:2px solid var(--ok);border-bottom:2px solid var(--ok);transform:rotate(-45deg)}
.np-pdp-details{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:40px;margin:28px 0 0;padding-top:24px;border-top:1px solid var(--edge)}
.np-pdp-h{font-size:22px;font-weight:700;color:var(--ink-max);margin:0 0 14px;letter-spacing:-.01em}
.np-pdp-desc h3{font-size:16px;margin:18px 0 4px}
.np-pdp-desc p{margin-bottom:10px}
.np-pdp-desc p{max-width:68ch}
.np-spec-table{width:100%;border-collapse:collapse;font-size:15px;border:1px solid var(--edge);border-radius:var(--r-sm);overflow:hidden}
.np-spec-table th,.np-spec-table td{padding:10px 14px;border-bottom:1px solid var(--line-2);vertical-align:top;text-align:left}
.np-spec-table th{width:42%;font-weight:500;color:var(--muted);background:var(--surface)}
.np-spec-table td{color:var(--ink-max);font-weight:500;overflow-wrap:anywhere;font-variant-numeric:tabular-nums}
.np-spec-table tr:last-child th,.np-spec-table tr:last-child td{border-bottom:0}
.np-faq{margin:28px 0 0;padding-top:24px;border-top:1px solid var(--edge)}
.np-faq-list{columns:2;column-gap:40px}
.np-faq-item{break-inside:avoid}
.np-faq-item{border-bottom:1px solid var(--line-2)}
.np-faq-item summary{cursor:pointer;list-style:none;padding:16px 32px 16px 0;font-weight:600;font-size:16px;color:var(--ink-max);position:relative}
.np-faq-item summary::-webkit-details-marker{display:none}
.np-faq-item summary::after{content:"+";position:absolute;right:4px;top:12px;font-size:22px;font-weight:400;color:var(--muted)}
.np-faq-item[open] summary::after{content:"\2212"}
.np-faq-item p{margin:0 0 18px;color:var(--body);max-width:68ch}
@media (max-width:767px){
  .np-pdp-details{grid-template-columns:1fr;gap:28px;margin-top:28px;padding-top:24px}
  .np-faq{margin-top:24px;padding-top:20px}
  .np-faq-list{columns:1}
}
.np-related{margin:28px 0 0;padding-top:24px;border-top:1px solid var(--edge)}
@media (max-width:767px){.np-related{margin-top:28px;padding-top:24px}}

/* "Often ordered with" cards are product cards: keep card-sized prices, not the product page's 40px */
#product .np-related .price-new,.np-product-product .np-related .product-thumb .price-new{font-size:21px;font-weight:700;letter-spacing:-.02em}

/* plus / minus on basket lines (drawer and checkout summary) */
.np-qty{display:inline-flex;align-items:center;margin-top:6px;border:1px solid var(--edge);border-radius:var(--r-sm);background:#fff;height:32px;width:max-content}
.np-qty-btn{width:32px;height:30px;border:0;background:none;color:var(--ink-max);font-size:16px;font-weight:600;line-height:1;cursor:pointer;display:grid;place-items:center}
.np-qty-btn:hover{background:var(--tint)}
.np-qty-btn:focus-visible{outline:2px solid var(--cobalt);outline-offset:-2px}
.np-qty-btn .fa-trash-can{font-size:12px;color:var(--muted)}
.np-qty-n{min-width:26px;text-align:center;font-size:14px;font-weight:600;font-variant-numeric:tabular-nums}
.np-qty.is-busy{opacity:.55}
.np-sum-item .np-qty{display:flex}

.np-sum-item .np-sum-qty{display:none} /* the stepper shows the quantity */

/* UK postcode check (np-postcode.js) */
.np-pc-note{font-size:13px;margin-top:5px;min-height:0}
.np-pc-note:empty{display:none}
.np-pc-note.is-ok{color:var(--ok)}
.np-pc-note.is-warn{color:var(--warn);font-weight:500}

/* total under the product price when buying more than one */
.np-line-total{font-size:15px;color:var(--muted);margin-top:2px;font-variant-numeric:tabular-nums}
.np-line-total:empty{display:none}

/* search suggestions (np-search.js) */
.np-suggest-host{position:relative}
.np-suggest{position:absolute;left:0;right:0;top:calc(100% + 4px);z-index:1050;margin:0;padding:6px;list-style:none;background:#fff;
  border:1px solid var(--edge);border-radius:var(--r);box-shadow:0 12px 32px -12px oklch(.25 .08 254 / .35);max-height:70vh;overflow:auto}
.np-suggest[hidden]{display:none}
.np-suggest-item a{display:flex;align-items:center;gap:10px;padding:7px 8px;border-radius:var(--r-sm);color:var(--ink-max);text-decoration:none}
.np-suggest-item img{width:40px;height:40px;object-fit:contain;background:var(--tint);border-radius:6px;flex:0 0 auto;mix-blend-mode:multiply}
.np-suggest-name{flex:1 1 auto;font-weight:600;font-size:15px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.np-suggest-price{font-size:14px;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.np-suggest-item.is-active a,.np-suggest-item a:hover{background:var(--tint)}
.np-suggest-all button{width:100%;text-align:left;border:0;background:none;padding:9px 8px;border-radius:var(--r-sm);font:inherit;font-size:14px;color:var(--cobalt);font-weight:600;cursor:pointer}
.np-suggest-all.is-active button,.np-suggest-all button:hover{background:var(--tint)}

/* home: the whole catalogue (quick jump + one section per category) */
.np-home-jump{display:flex;flex-wrap:wrap;gap:8px;margin:28px 0 8px}
.np-home-jump a{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border:1px solid var(--edge);border-radius:999px;background:#fff;color:var(--ink-max);font-weight:600;font-size:14.5px;text-decoration:none}
.np-home-jump a:hover{border-color:var(--cobalt);color:var(--cobalt)}
.np-home-jump a span{font-weight:500;color:var(--muted);font-variant-numeric:tabular-nums}
.np-home-cat{scroll-margin-top:16px;margin-top:28px}