/* =========================================================
   HARDSET — MAIN STYLESHEET
   Black / White / Orange accent. Clean, sleek, editorial.
   ========================================================= */

:root{
  --hs-black:#0a0a0a;
  --hs-black-soft:#151515;
  --hs-charcoal:#1f1f1f;
  --hs-grey-900:#2b2b2b;
  --hs-grey-700:#565656;
  --hs-grey-500:#8a8a8a;
  --hs-grey-300:#c9c9c9;
  --hs-grey-100:#eeeeee;
  --hs-white:#ffffff;
  --hs-accent:#f4791f;      /* logo orange */
  --hs-accent-dark:#d9650f;
  --hs-logo-accent:#fc802f; /* exact orange sampled from the current logo artwork */
  --hs-line:#e4e4e4;
  --hs-radius:8px;         /* buttons, inputs, small controls — was a hard 2px, softened for a sleeker feel */
  --hs-radius-lg:16px;     /* cards, media containers, banners */
  --hs-container:1600px;   /* main content width — banners, sections, shop grid, page bodies */
  --hs-container-nav:1280px; /* header bar + footer keep their original, narrower width */
  --hs-font-head:'Oswald', Arial, Helvetica, sans-serif;
  --hs-font-body:'Jost', Arial, Helvetica, sans-serif;
  --hs-speed:.25s;
  --hs-ease:cubic-bezier(.4,0,.2,1); /* smoother, more premium-feeling motion than the browser default "ease" */
  /* Elevation system — soft, low-opacity shadows kept close to the brand's
     black rather than generic grey, so depth reads as an extension of the
     existing palette instead of a bolted-on effect. */
  --hs-shadow-sm:0 2px 10px rgba(10,10,10,.06);
  --hs-shadow-md:0 14px 32px rgba(10,10,10,.12);
  --hs-shadow-lg:0 26px 60px rgba(10,10,10,.18);
}

/* ---------- Fonts (self-hosted-friendly fallback stack; loads from Google if available) ---------- */
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@400;500;600;700&family=Jost:wght@300;400;500;600&family=Playfair+Display:wght@400;700&family=Poppins:wght@500;600;700&display=swap');
/* Material Icons: used only by the tape-measure label's customer-chosen
   symbol (see "TAPE MEASURE LABEL" below) — a single-weight icon webfont
   from fonts.google.com/icons, addressed by ligature (typing the icon's
   programmatic name, e.g. "favorite", renders as the icon glyph) so the
   PHP/GD side (which has no ligature support and instead uses each
   icon's fixed Private-Use-Area codepoint — see
   inc/tapemeasure-label-image.php) and this on-page preview always
   render the exact same glyph from the exact same font file. */
@font-face{
  font-family:'Material Icons';font-style:normal;font-weight:400;
  src:url('https://fonts.gstatic.com/s/materialicons/v145/flUhRq6tzZclQEJ-Vdg-IuiaDsNZ.ttf') format('truetype');
}
.material-icons{
  font-family:'Material Icons';font-weight:normal;font-style:normal;line-height:1;
  letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;
  word-wrap:normal;direction:ltr;-webkit-font-feature-settings:'liga';font-feature-settings:'liga';
  -webkit-font-smoothing:antialiased;
}
/* Playfair Display is used for the keyring tag's and hip flask's live
   engraving previews (see "KEYRING TAG ENGRAVING" and "HIP FLASK
   ENGRAVING" below) — it matches the bold serif used in both products'
   reference engraving photos, quite different from the site's normal
   Oswald/Jost pairing used everywhere else. Both weight 400 and 700 are
   loaded: the keyring tag only ever uses 700, but the hip flask's lines
   2-4 use 400 — without it explicitly requested here, the browser has no
   real regular-weight face to fall back on and silently substitutes a
   different font for those lines, throwing off both their rendered size
   and the auto-fit script's canvas measurements of them. */

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
body{
  margin:0;
  font-family:var(--hs-font-body);
  font-size:16px;
  line-height:1.7;
  color:var(--hs-black);
  background:var(--hs-white);
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block;}
a{color:inherit;text-decoration:none;transition:color var(--hs-speed) var(--hs-ease);}
ul{list-style:none;margin:0;padding:0;}
/* Modern, visible keyboard-focus ring in the brand accent — replaces the
   browser default only for keyboard/assistive-tech focus (:focus-visible),
   so mouse clicks stay clean while tabbing through the site still shows a
   clear, on-brand indicator. */
:focus-visible{outline:2px solid var(--hs-accent);outline-offset:3px;border-radius:2px;}
/* Fade-in-up on scroll — the "hs-reveal" class is only ever added by
   main.js (see the IntersectionObserver block there), never present by
   default, so an element only ever starts hidden if JS is actively about
   to reveal it. If JS doesn't run, nothing here applies and every element
   is fully visible from the start. */
.hs-reveal{opacity:0;transform:translateY(24px);transition:opacity .6s var(--hs-ease),transform .6s var(--hs-ease);}
.hs-reveal.is-visible{opacity:1;transform:none;}
h1,h2,h3,h4,h5,h6{
  font-family:var(--hs-font-head);
  text-transform:uppercase;
  letter-spacing:.04em;
  font-weight:600;
  line-height:1.2;
  margin:0 0 .6em;
  color:var(--hs-black);
}
h1{font-size:clamp(2.1rem,4vw,3.6rem);}
h2{font-size:clamp(1.6rem,2.6vw,2.4rem);}
h3{font-size:1.3rem;}
p{margin:0 0 1.2em;color:var(--hs-grey-700);}
button, input, select, textarea{font-family:var(--hs-font-body);}
.hs-container{max-width:var(--hs-container);margin:0 auto;padding:0 32px;}
/* Footer keeps the original (narrower) container width, matching the header — only page content (banners, product grids, section blocks) uses the wider one. */
.hs-container--nav{max-width:var(--hs-container-nav);}
.hs-section{padding:88px 0;}
.hs-section--tight{padding:56px 0;}
.hs-section--black{background:var(--hs-black);color:var(--hs-white);}
.hs-section--black h1,.hs-section--black h2,.hs-section--black h3{color:var(--hs-white);}
.hs-section--black p{color:var(--hs-grey-300);}
.hs-eyebrow{
  display:inline-block;font-family:var(--hs-font-head);font-size:.75rem;
  letter-spacing:.25em;text-transform:uppercase;color:var(--hs-accent);
  margin-bottom:14px;font-weight:600;
}
.hs-center{text-align:center;}
.hs-heading-row{max-width:680px;margin:0 0 48px;text-align:left;}

/* ---------- Buttons ---------- */
.hs-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:16px 34px;font-family:var(--hs-font-head);font-size:.85rem;
  letter-spacing:.15em;text-transform:uppercase;font-weight:600;
  border:1px solid var(--hs-black);background:var(--hs-black);color:var(--hs-white);
  cursor:pointer;transition:transform var(--hs-speed) var(--hs-ease),box-shadow var(--hs-speed) var(--hs-ease),background var(--hs-speed) var(--hs-ease),color var(--hs-speed) var(--hs-ease),border-color var(--hs-speed) var(--hs-ease);
  border-radius:var(--hs-radius);box-shadow:var(--hs-shadow-sm);
}
.hs-btn:hover{background:var(--hs-accent);border-color:var(--hs-accent);color:var(--hs-white);transform:translateY(-2px);box-shadow:var(--hs-shadow-md);}
.hs-btn:active{transform:translateY(0);box-shadow:var(--hs-shadow-sm);}
.hs-btn--outline{background:transparent;color:var(--hs-black);border-color:var(--hs-black);box-shadow:none;}
.hs-btn--outline:hover{background:var(--hs-black);color:var(--hs-white);}
.hs-btn--white{background:var(--hs-white);color:var(--hs-black);border-color:var(--hs-white);}
.hs-btn--white:hover{background:var(--hs-accent);border-color:var(--hs-accent);color:var(--hs-white);}
.hs-btn--accent{background:var(--hs-accent);border-color:var(--hs-accent);}
.hs-btn--accent:hover{background:var(--hs-black);border-color:var(--hs-black);}
.hs-btn--sm{padding:11px 22px;font-size:.72rem;}

/* =========================================================
   TOP OFFER BANNER (toggle from Customizer)
   ========================================================= */
.hs-offer-bar{
  background:var(--hs-black);color:var(--hs-white);text-align:center;
  font-family:var(--hs-font-head);font-size:.78rem;letter-spacing:.12em;
  text-transform:uppercase;padding:11px 44px 11px 16px;position:relative;
  border-bottom:1px solid var(--hs-accent);
}
.hs-offer-bar strong{color:var(--hs-accent);}
.hs-offer-bar a{border-bottom:1px solid var(--hs-accent);color:var(--hs-white);}
.hs-offer-bar__close{
  position:absolute;right:14px;top:50%;transform:translateY(-50%);
  background:none;border:0;color:var(--hs-grey-300);cursor:pointer;font-size:1rem;line-height:1;
  width:24px;height:24px;
}
.hs-offer-bar__close:hover{color:var(--hs-accent);}
.hs-offer-bar.is-hidden{display:none;}

/* =========================================================
   SITE HEADER + MEGA MENU
   ========================================================= */
.hs-header{
  background:var(--hs-white);border-bottom:1px solid var(--hs-line);
  position:sticky;top:0;z-index:500;
  transition:box-shadow .3s var(--hs-ease); /* smooths the scroll-triggered shadow main.js applies inline */
}
.hs-header__inner{
  display:flex;align-items:center;justify-content:space-between;
  padding:16px 32px;max-width:var(--hs-container-nav);margin:0 auto;gap:24px;
}
.hs-logo{display:flex;flex-direction:column;align-items:flex-start;gap:2px;font-family:var(--hs-font-head);text-decoration:none;}
.hs-logo__row{display:flex;align-items:center;gap:10px;}
.hs-logo img{max-height:88px;width:auto;}
.hs-logo__text{font-size:1.4rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;}
.hs-logo__text span{color:var(--hs-accent);}
.hs-logo__tagline{
  font-size:.66rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  color:var(--hs-logo-accent);white-space:nowrap;
}

.hs-nav{flex:1;display:flex;justify-content:center;}
.hs-nav > ul{display:flex;align-items:center;gap:8px;}
.hs-nav > ul > li{position:relative;}
.hs-nav > ul > li > a{
  display:block;padding:14px 16px;font-family:var(--hs-font-head);
  font-size:.82rem;letter-spacing:.08em;text-transform:uppercase;font-weight:500;
  border-bottom:2px solid transparent;
}
.hs-nav > ul > li:hover > a, .hs-nav > ul > li.current-menu-item > a{
  color:var(--hs-accent);border-bottom-color:var(--hs-accent);
}

/* mega dropdown */
.hs-nav li.menu-item-has-children{position:static;}
.hs-nav .hs-mega{
  position:absolute;left:0;right:0;top:100%;background:var(--hs-white);
  border-top:1px solid var(--hs-accent);border-bottom:1px solid var(--hs-line);
  box-shadow:var(--hs-shadow-lg);border-radius:0 0 var(--hs-radius-lg) var(--hs-radius-lg);
  display:grid;grid-template-columns:repeat(5,1fr);gap:0;
  opacity:0;visibility:hidden;transform:translateY(8px);
  transition:opacity var(--hs-speed) var(--hs-ease),visibility var(--hs-speed) var(--hs-ease),transform var(--hs-speed) var(--hs-ease);padding:36px 0;
}
.hs-nav li.menu-item-has-children:hover .hs-mega{opacity:1;visibility:visible;transform:translateY(0);}
.hs-mega__inner{max-width:var(--hs-container-nav);margin:0 auto;padding:0 32px;display:contents;}
.hs-mega__col{padding:0 26px;border-left:1px solid var(--hs-line);}
.hs-mega__col:first-child{border-left:0;}
.hs-mega__col img{
  width:100%;aspect-ratio:1/1;object-fit:cover;margin-bottom:14px;filter:grayscale(100%);
  transition:filter var(--hs-speed) var(--hs-ease),transform var(--hs-speed) var(--hs-ease);
  border-radius:var(--hs-radius);
}
.hs-mega__col:hover img{filter:grayscale(0%);transform:translateY(-2px);}
.hs-mega__col h4{font-size:.8rem;letter-spacing:.1em;margin-bottom:4px;}
.hs-mega__col p{font-size:.78rem;color:var(--hs-grey-500);margin:0 0 10px;}
.hs-mega__col a.hs-mega__link{font-size:.72rem;letter-spacing:.14em;color:var(--hs-accent);text-transform:uppercase;font-weight:600;}

.hs-header__actions{display:flex;align-items:center;gap:20px;}
.hs-header__icon{position:relative;display:flex;align-items:center;font-size:1.15rem;}
.hs-header__icon .hs-count{
  position:absolute;top:-8px;right:-10px;background:var(--hs-accent);color:#fff;
  font-size:.62rem;width:17px;height:17px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-family:var(--hs-font-head);
}
.hs-header__search input{
  border:1px solid var(--hs-line);padding:9px 12px;font-size:.85rem;width:180px;background:var(--hs-grey-100);
  border-radius:var(--hs-radius);transition:border-color var(--hs-speed) var(--hs-ease),background var(--hs-speed) var(--hs-ease);
}
.hs-header__search input:focus{outline:none;border-color:var(--hs-accent);background:var(--hs-white);}
.hs-burger{display:none;background:none;border:0;font-size:1.4rem;cursor:pointer;position:relative;z-index:601;}
.hs-nav__close{display:none;}
.hs-wishlist-icon:hover{color:var(--hs-accent);}

/* ---------- Wishlist toggle button (product page + wishlist page) ---------- */
.hs-wishlist-toggle{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  margin-top:14px;padding:14px 24px;width:100%;max-width:320px;
  font-family:var(--hs-font-head);font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;font-weight:600;
  background:transparent;color:var(--hs-black);border:1px solid var(--hs-black);border-radius:var(--hs-radius);
  cursor:pointer;transition:all var(--hs-speed) ease;text-decoration:none;
}
.hs-wishlist-toggle:hover{background:var(--hs-black);color:var(--hs-white);}
.hs-wishlist-toggle .hs-wishlist-toggle__icon{font-size:1rem;line-height:1;}
.hs-wishlist-toggle.is-active{background:var(--hs-accent);border-color:var(--hs-accent);color:var(--hs-white);}
.hs-wishlist-toggle.is-active:hover{background:var(--hs-black);border-color:var(--hs-black);}
.hs-wishlist-toggle.is-loading{opacity:.6;pointer-events:none;}
.hs-wishlist-toggle--guest{color:var(--hs-grey-500);border-color:var(--hs-line);}
.hs-wishlist-toggle--guest:hover{background:var(--hs-black);color:var(--hs-white);border-color:var(--hs-black);}
.woocommerce ul.products li.product .hs-wishlist-toggle--remove{
  margin-top:10px;padding:10px 16px;max-width:none;font-size:.68rem;background:var(--hs-grey-100);border-color:var(--hs-line);color:var(--hs-black);
}
.woocommerce ul.products li.product .hs-wishlist-toggle--remove:hover{background:var(--hs-black);border-color:var(--hs-black);color:#fff;}

/* ---------- Wishlist page states (guest prompt / empty state) ---------- */
.hs-wishlist-guest,.hs-wishlist-empty{
  max-width:520px;margin:60px auto;text-align:center;padding:0 24px;
}
.hs-wishlist-guest p,.hs-wishlist-empty p{color:var(--hs-grey-500);margin-bottom:24px;font-size:.95rem;}

/* =========================================================
   HERO
   ========================================================= */
.hs-hero{
  position:relative;background:var(--hs-black);color:var(--hs-white);
  min-height:76vh;display:flex;align-items:center;overflow:hidden;
}
/* This banner used to break out to the true edges of the browser window via
   .alignfull (width:100vw + negative margins). That made it visibly wider
   than every other section (Shop By Category, Best Sellers, etc.), which
   all stay within the site's normal 1600px content width — so it looked
   out of place rather than "full width". Cancel the breakout here and cap
   it to the same width as everything else instead, for a uniform site. */
.hs-hero.alignfull{
  width:auto;position:relative;left:auto;right:auto;margin-left:auto;margin-right:auto;
  max-width:var(--hs-container);
}
.hs-hero__bg{position:absolute;inset:0;background-size:cover;background-position:center;opacity:.42;filter:grayscale(100%);}
.hs-hero__content{
  position:relative;z-index:2;max-width:640px;padding:0 32px;
}
.hs-hero .hs-eyebrow{color:var(--hs-accent);}
.hs-hero h1{color:var(--hs-white);margin-bottom:.4em;}
.hs-hero p{color:var(--hs-grey-300);font-size:1.05rem;max-width:480px;}
.hs-hero__actions{display:flex;gap:16px;margin-top:20px;flex-wrap:wrap;}

/* =========================================================
   HOMEPAGE PROMO BANNER (all-text, links to the promo product)
   ========================================================= */
.hs-promo-banner{
  display:block;background:var(--hs-black);color:var(--hs-white);text-decoration:none;
  border-bottom:3px solid var(--hs-accent);
  /* This is rendered inside an Elementor "Full Width" section, which lets
     it stretch to the true edges of the browser — visibly wider than every
     other section on the page. Cap it to the site's normal content width
     and center it, so it lines up with Shop By Category / Best Sellers. */
  max-width:var(--hs-container);margin:0 auto;
}
.hs-promo-banner__inner{
  max-width:760px;margin:0 auto;padding:56px 32px 40px;text-align:center;
}
.hs-promo-banner__eyebrow{
  font-family:var(--hs-font-head);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--hs-accent);margin:0 0 14px;
}
.hs-promo-banner__headline{
  color:var(--hs-white);font-size:2rem;line-height:1.2;margin:0 0 14px;
}
.hs-promo-banner__count{color:var(--hs-accent);}
.hs-promo-banner__highlight{
  display:inline-block;text-decoration:underline;text-decoration-color:var(--hs-accent);text-underline-offset:4px;
}
.hs-promo-banner__sub{color:var(--hs-grey-300);font-size:1rem;margin:0 0 26px;}
.hs-promo-banner__btn{
  display:inline-block;box-shadow:0 10px 24px rgba(0,0,0,.16);
  transition:transform var(--hs-speed) ease,box-shadow var(--hs-speed) ease,background var(--hs-speed) ease,color var(--hs-speed) ease,border-color var(--hs-speed) ease;
}
.hs-promo-banner:hover .hs-promo-banner__btn{
  background:var(--hs-white);border-color:var(--hs-white);color:var(--hs-black);
  transform:translateY(-3px);box-shadow:0 14px 30px rgba(0,0,0,.22);
}
.hs-promo-banner__fineprint{
  color:var(--hs-grey-500);font-size:.7rem;line-height:1.5;margin:22px 0 0;max-width:600px;
  margin-left:auto;margin-right:auto;
}
.hs-promo-banner__fineprint strong{color:var(--hs-grey-300);}
.hs-promo-banner--soldout{border-bottom-color:var(--hs-grey-700);}
.hs-promo-banner--soldout .hs-promo-banner__eyebrow{color:var(--hs-grey-500);}
.hs-promo-banner--has-image{
  position:relative;background-size:cover;background-position:center 32%;background-repeat:no-repeat;
}
.hs-promo-banner--has-image::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg, rgba(8,8,8,.94) 0%, rgba(8,8,8,.9) 45%, rgba(8,8,8,.8) 100%);
}
.hs-promo-banner--has-image .hs-promo-banner__inner{position:relative;z-index:1;}

/* Three-panel split layout: photo | orange offer panel | photo. The offer
   panel fades warm-orange (left, against the worker photo) to a pale cream
   (right, against the white product shot) with a soft diagonal light
   streak across it, for a glossier, more premium feel than a flat colour
   block. */
.hs-promo-banner--split{
  background:linear-gradient(115deg, var(--hs-accent-dark) 0%, var(--hs-accent) 32%, #ffb877 72%, #fff2e2 100%);
  border-bottom-color:var(--hs-accent-dark);
  display:grid;grid-template-columns:1fr 1.5fr 1fr;align-items:stretch;min-height:340px;
  box-shadow:0 26px 60px rgba(0,0,0,.18);position:relative;z-index:1;overflow:hidden;
}
.hs-promo-banner--split::before{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(115deg, transparent 22%, rgba(255,255,255,.55) 50%, transparent 76%);
  mix-blend-mode:screen;
}
.hs-promo-banner--split .hs-promo-banner__photo{
  position:relative;z-index:0;background-size:cover;background-position:center;background-repeat:no-repeat;background-color:var(--hs-black);
}
/* Clean, distinct edges between each photo panel and the orange offer
   panel — no soft colour blend, just the three panels reading as separate
   zones (photo / gradient / photo). */
.hs-promo-banner--split .hs-promo-banner__photo--left{
  border-right:1px solid rgba(0,0,0,.15);
}
/* Right-hand panel is a product shot (dog tag on white), not an atmosphere
   photo — it must show in full, never crop, so it uses "contain" against a
   white backing that matches the product photo's own background instead of
   the left panel's cover-crop treatment. */
.hs-promo-banner--split .hs-promo-banner__photo--right{
  background-size:82% auto;background-color:var(--hs-white);
  border-left:1px solid rgba(0,0,0,.08);
}
.hs-promo-banner--split .hs-promo-banner__inner{
  max-width:400px;margin:0 auto;padding:40px 32px;position:relative;z-index:2;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
}
.hs-promo-banner--split .hs-promo-banner__eyebrow{
  color:var(--hs-black);opacity:.8;background:rgba(255,255,255,.4);
  padding:5px 14px;border-radius:999px;
}
.hs-promo-banner--split .hs-promo-banner__headline{color:var(--hs-white);font-weight:600;text-shadow:0 2px 12px rgba(0,0,0,.12);}
.hs-promo-banner--split .hs-promo-banner__count{
  color:var(--hs-black);background:var(--hs-white);display:inline-block;
  padding:1px 12px;border-radius:999px;box-shadow:0 6px 14px rgba(0,0,0,.18);
}
.hs-promo-banner--split .hs-promo-banner__highlight{text-decoration-color:var(--hs-black);}
.hs-promo-banner--split .hs-promo-banner__sub{color:rgba(10,10,10,.75);}
.hs-promo-banner--split .hs-promo-banner__btn{
  background:var(--hs-black);border-color:var(--hs-black);color:var(--hs-white);
}
.hs-promo-banner--split:hover .hs-promo-banner__btn{background:var(--hs-white);border-color:var(--hs-white);color:var(--hs-black);}
.hs-promo-banner--split .hs-promo-banner__fineprint{color:rgba(10,10,10,.6);}
.hs-promo-banner--split .hs-promo-banner__fineprint strong{color:var(--hs-black);}
.hs-promo-banner--split.hs-promo-banner--soldout{background:var(--hs-charcoal);border-bottom-color:var(--hs-grey-700);}
.hs-promo-banner--split.hs-promo-banner--soldout .hs-promo-banner__eyebrow{color:var(--hs-grey-300);opacity:1;}
.hs-promo-banner--split.hs-promo-banner--soldout .hs-promo-banner__sub{color:var(--hs-grey-300);}
.hs-promo-banner--split.hs-promo-banner--soldout .hs-promo-banner__fineprint{color:var(--hs-grey-500);}
.hs-promo-banner--split.hs-promo-banner--soldout .hs-promo-banner__fineprint strong{color:var(--hs-grey-300);}
@media (max-width:900px){
  .hs-promo-banner--split{
    grid-template-columns:1fr;min-height:0;box-shadow:none;
    background:linear-gradient(160deg, var(--hs-accent-dark) 0%, var(--hs-accent) 45%, #ffb877 100%);
  }
  /* Diagonal streak runs top-to-bottom here to match the stacked layout. */
  .hs-promo-banner--split::before{background:linear-gradient(160deg, transparent 25%, rgba(255,255,255,.5) 52%, transparent 78%);}
  .hs-promo-banner--split .hs-promo-banner__photo{height:200px;}
  .hs-promo-banner--split .hs-promo-banner__inner{padding:36px 24px;max-width:none;}
  /* Panels stack vertically here, so the dividing edge runs along the bottom/top instead of a side border. */
  .hs-promo-banner--split .hs-promo-banner__photo--left{border-right:0;border-bottom:1px solid rgba(0,0,0,.15);}
  .hs-promo-banner--split .hs-promo-banner__photo--right{border-left:0;border-top:1px solid rgba(0,0,0,.08);}
}

/* =========================================================
   HOMEPAGE FEATURED PRODUCTS GRID (curated, below the promo banner)
   ========================================================= */
.hs-featured-grid{
  display:grid;grid-template-columns:repeat(7,1fr);gap:20px;
}
.hs-featured-card{display:block;text-decoration:none;color:inherit;}
.hs-featured-card__media{
  aspect-ratio:1/1;overflow:hidden;background:var(--hs-grey-100);margin-bottom:14px;
  border-radius:var(--hs-radius-lg);box-shadow:var(--hs-shadow-sm);
  transition:box-shadow var(--hs-speed) var(--hs-ease),transform var(--hs-speed) var(--hs-ease);
}
.hs-featured-card__media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s var(--hs-ease);}
.hs-featured-card:hover .hs-featured-card__media{box-shadow:var(--hs-shadow-md);transform:translateY(-4px);}
.hs-featured-card:hover .hs-featured-card__media img{transform:scale(1.04);}
.hs-featured-card__body{text-align:center;}
.hs-featured-card__body h3{
  font-size:.85rem;line-height:1.3;margin:0 0 6px;text-transform:none;letter-spacing:0;
  /* Titles run from one word ("Bamboo Ring") to a full phrase ("Silicone
     Ring – Dome Edge Breathable"), which used to push the price down to a
     different height card-to-card. Reserve a fixed 2-line box (clamping
     anything longer with an ellipsis) so every price in the row lines up
     on the same level, at any column count. */
  height:2.6em;overflow:hidden;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
}
.hs-featured-card__price{font-family:var(--hs-font-head);font-size:.85rem;color:var(--hs-accent);}
.hs-featured-card__price del{color:var(--hs-grey-500);margin-right:6px;}

/* trust / USP strip */
.hs-usp-strip{border-bottom:1px solid var(--hs-line);}
.hs-usp-strip__inner{
  display:grid;grid-template-columns:repeat(4,1fr);max-width:var(--hs-container);margin:0 auto;
}
.hs-usp{
  display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;
  padding:30px 20px;border-left:1px solid var(--hs-line);
}
.hs-usp:first-child{border-left:0;}
.hs-usp__icon{font-size:1.5rem;color:var(--hs-accent);}
.hs-usp h4{font-size:.78rem;margin:0;letter-spacing:.08em;}
.hs-usp p{font-size:.78rem;margin:0;color:var(--hs-grey-500);}

/* =========================================================
   CATEGORY GRID (cloneable section)
   ========================================================= */
.hs-cat-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:16px;background:transparent;}
.hs-cat-card{
  position:relative;background:var(--hs-black);aspect-ratio:3/4;overflow:hidden;display:flex;
  align-items:flex-end;color:#fff;border-radius:var(--hs-radius-lg);box-shadow:var(--hs-shadow-sm);
  transition:box-shadow var(--hs-speed) var(--hs-ease),transform var(--hs-speed) var(--hs-ease);
}
.hs-cat-card:hover{box-shadow:var(--hs-shadow-md);transform:translateY(-4px);}
.hs-cat-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.9;transition:transform .5s var(--hs-ease),opacity var(--hs-speed) var(--hs-ease);}
.hs-cat-card:hover img{transform:scale(1.06);opacity:1;}
.hs-cat-card__label{position:relative;z-index:2;padding:18px 14px;width:100%;background:linear-gradient(0deg,rgba(0,0,0,.85),transparent 90%);}
.hs-cat-card__label h3{font-size:.74rem;letter-spacing:.01em;margin:0 0 4px;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.hs-cat-card__label span{font-size:.72rem;letter-spacing:.12em;color:var(--hs-accent);text-transform:uppercase;font-weight:600;}

/* =========================================================
   PRODUCT GRID / WooCommerce
   ========================================================= */
.hs-products{display:grid;grid-template-columns:repeat(4,1fr);gap:34px;}
ul.products{display:grid !important;grid-template-columns:repeat(4,1fr);gap:34px;list-style:none;padding:0;margin:0;}
/* WooCommerce's own core stylesheet (woocommerce-layout.css) puts an
   old-fashioned clearfix on this exact element:
     .woocommerce ul.products::before, .woocommerce ul.products::after
       { content:" "; display:table; }
   That's inert in WooCommerce's original float-based grid, but the moment
   a container is display:grid, any ::before/::after with real content
   becomes an actual (invisible) grid item and claims a cell of its own —
   one before the first product, one after the last. With our explicit
   column count that silently shifts every real product over by one
   column and strands the final item(s) on their own row, at every
   breakpoint, on every device — this was the true cause of the
   "3 across then 1 stranded" desktop layout and the ragged mobile rows,
   independent of any column-count rule or caching. Kill both
   pseudo-elements outright so only the real <li> products are ever grid
   items.  !important to beat WooCommerce's own !important-free but
   more-specific `.woocommerce ul.products::before` selector regardless
   of stylesheet load order. */
.woocommerce ul.products::before,
.woocommerce ul.products::after,
.woocommerce-page ul.products::before,
.woocommerce-page ul.products::after,
ul.products::before,
ul.products::after{
  content:none !important;display:none !important;
}
ul.products li.product{margin:0 !important;list-style:none;}
.woocommerce ul.products li.product .hs-product-card,
.hs-product-card{
  display:block;position:relative;
}
.hs-product-card__media{
  position:relative;background:var(--hs-grey-100);aspect-ratio:1/1.1;overflow:hidden;margin-bottom:16px;
  border-radius:var(--hs-radius-lg);box-shadow:var(--hs-shadow-sm);
  transition:box-shadow var(--hs-speed) var(--hs-ease),transform var(--hs-speed) var(--hs-ease);
}
.hs-product-card__media img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--hs-ease);}
.hs-product-card:hover .hs-product-card__media{box-shadow:var(--hs-shadow-md);transform:translateY(-4px);}
.hs-product-card:hover .hs-product-card__media img{transform:scale(1.05);}
.hs-product-card__badge{
  position:absolute;top:12px;left:12px;background:var(--hs-accent);color:#fff;
  font-family:var(--hs-font-head);font-size:.65rem;letter-spacing:.08em;text-transform:uppercase;
  padding:5px 10px;
}
.hs-product-card__cat{font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--hs-grey-500);margin-bottom:4px;display:block;}
.hs-product-card__title{font-family:var(--hs-font-head);font-size:.92rem;letter-spacing:.03em;text-transform:none;margin:0 0 6px;font-weight:500;}
.hs-product-card .price{font-family:var(--hs-font-head);font-size:.95rem;color:var(--hs-black);}
.hs-product-card .price del{color:var(--hs-grey-500);opacity:.7;margin-right:6px;}
.hs-product-card .price ins{text-decoration:none;color:var(--hs-accent);}
.hs-product-card .star-rating{font-size:.75rem;margin-bottom:4px;}

.woocommerce .star-rating{color:var(--hs-accent);}
.woocommerce span.onsale{
  background:var(--hs-accent) !important;font-family:var(--hs-font-head);border-radius:var(--hs-radius) !important;
  font-size:.65rem !important;letter-spacing:.06em;text-transform:uppercase;min-height:auto !important;min-width:auto !important;
  padding:6px 12px !important;line-height:1 !important;top:12px !important;left:12px !important;right:auto !important;
  box-shadow:var(--hs-shadow-sm);
}
.woocommerce a.button, .woocommerce button.button, .woocommerce #respond input#submit,
.woocommerce input.button, .woocommerce a.added_to_cart{
  background:var(--hs-black) !important;color:#fff !important;border-radius:var(--hs-radius) !important;
  font-family:var(--hs-font-head) !important;letter-spacing:.1em;text-transform:uppercase;font-size:.75rem !important;
  padding:13px 22px !important;border:1px solid var(--hs-black) !important;
  transition:transform var(--hs-speed) var(--hs-ease),box-shadow var(--hs-speed) var(--hs-ease),background var(--hs-speed) var(--hs-ease),border-color var(--hs-speed) var(--hs-ease) !important;
  box-shadow:var(--hs-shadow-sm);
}
.woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce input.button:hover{
  background:var(--hs-accent) !important;border-color:var(--hs-accent) !important;
  transform:translateY(-2px);box-shadow:var(--hs-shadow-md);
}
.woocommerce nav.woocommerce-pagination ul{border:0 !important;display:flex;gap:8px;}
.woocommerce nav.woocommerce-pagination ul li{border:0 !important;}
.woocommerce nav.woocommerce-pagination ul li a, .woocommerce nav.woocommerce-pagination ul li span{
  border:1px solid var(--hs-line) !important;color:var(--hs-black) !important;font-family:var(--hs-font-head);
  border-radius:var(--hs-radius) !important;transition:all var(--hs-speed) var(--hs-ease);
}
.woocommerce nav.woocommerce-pagination ul li a:hover, .woocommerce nav.woocommerce-pagination ul li span.current{
  background:var(--hs-black) !important;color:#fff !important;border-color:var(--hs-black) !important;
}
.woocommerce-page .hs-shop-toolbar{
  display:flex;justify-content:space-between;align-items:center;padding-bottom:24px;margin-bottom:36px;border-bottom:1px solid var(--hs-line);
}
.woocommerce-result-count, .woocommerce-ordering select{font-size:.82rem;}

/* single product */
.woocommerce div.product div.images{margin-bottom:0;}
.woocommerce div.product .product_title{font-size:2rem;}
.woocommerce div.product p.price, .woocommerce div.product span.price{color:var(--hs-black);font-family:var(--hs-font-head);font-size:1.3rem;}
.woocommerce div.product .woocommerce-product-details__short-description{color:var(--hs-grey-700);}
.woocommerce div.product .hs-product-description{
  color:var(--hs-grey-700);font-size:.92rem;line-height:1.7;margin:14px 0 22px;
  padding-top:14px;border-top:1px solid var(--hs-line);
}
.woocommerce div.product .hs-product-description p{margin:0 0 1em;}
.woocommerce div.product .hs-product-description p:last-child{margin-bottom:0;}
.woocommerce-tabs ul.tabs{border-bottom:1px solid var(--hs-line) !important;}
.woocommerce-tabs ul.tabs li{background:transparent !important;border:0 !important;font-family:var(--hs-font-head);text-transform:uppercase;letter-spacing:.08em;font-size:.8rem;}
.woocommerce-tabs ul.tabs li.active{border-bottom:2px solid var(--hs-accent) !important;}
.woocommerce-tabs ul.tabs li a{color:var(--hs-black) !important;padding:12px 20px !important;}

/* cart / checkout */
.woocommerce table.shop_table{border:1px solid var(--hs-line);border-radius:var(--hs-radius);overflow:hidden;}
.woocommerce table.shop_table th{font-family:var(--hs-font-head);text-transform:uppercase;font-size:.75rem;letter-spacing:.08em;}
.woocommerce #payment div.payment_box, .woocommerce-checkout #payment div.payment_box{background:var(--hs-grey-100) !important;border-radius:var(--hs-radius);}
.woocommerce-checkout .form-row input.input-text, .woocommerce-checkout .form-row select{
  border:1px solid var(--hs-line);padding:12px;border-radius:var(--hs-radius);
  transition:border-color var(--hs-speed) var(--hs-ease),box-shadow var(--hs-speed) var(--hs-ease);
}
.woocommerce-checkout .form-row input.input-text:focus, .woocommerce-checkout .form-row select:focus{
  outline:none;border-color:var(--hs-accent);box-shadow:0 0 0 3px rgba(244,121,31,.14);
}

/* My Account: login + register side by side (registration is enabled sitewide,
   so every login screen — header account icon, wishlist "log in" prompts,
   checkout — offers a Register form here too, not just Login). */
.woocommerce-account .woocommerce-form-login,
.woocommerce-account .woocommerce-form-register{
  border:1px solid var(--hs-line);padding:32px;border-radius:var(--hs-radius-lg);box-shadow:var(--hs-shadow-sm);
}
.woocommerce-account .woocommerce-form-login-toggle,
.woocommerce-account .woocommerce-form-register-toggle{margin-bottom:20px;}
.woocommerce-account .form-row input.input-text,
.woocommerce-account .form-row input[type="password"],
.woocommerce-account .form-row input[type="email"]{
  border:1px solid var(--hs-line);padding:12px;width:100%;border-radius:var(--hs-radius);
  transition:border-color var(--hs-speed) var(--hs-ease),box-shadow var(--hs-speed) var(--hs-ease);
}
.woocommerce-account .form-row input.input-text:focus,
.woocommerce-account .form-row input[type="password"]:focus,
.woocommerce-account .form-row input[type="email"]:focus{
  outline:none;border-color:var(--hs-accent);box-shadow:0 0 0 3px rgba(244,121,31,.14);
}
.woocommerce-account .u-columns{display:grid;grid-template-columns:1fr 1fr;gap:32px;align-items:start;}
.woocommerce-account .u-columns h2{font-size:1.05rem;margin-bottom:20px;text-transform:uppercase;letter-spacing:.04em;}
@media (max-width:600px){
  .woocommerce-account .u-columns{grid-template-columns:1fr;gap:40px;}
}

/* =========================================================
   TESTIMONIALS / SPLIT / NEWSLETTER (cloneable sections)
   ========================================================= */
.hs-split{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:0;}
.hs-split__media img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/5;filter:grayscale(100%);}
.hs-split__content{padding:60px 80px;}
.hs-split--reverse{direction:rtl;}
.hs-split--reverse > *{direction:ltr;}

/* "Banner" variant: for wide landscape photos that need to read across the
   full width of the section (e.g. lifestyle/profession shots), instead of
   being squeezed into the narrow portrait media column above. Same dimmed
   treatment as .hs-hero, so it reads as the same visual family. */
.hs-split--banner{
  position:relative;background:var(--hs-black);color:var(--hs-white);
  min-height:60vh;display:flex;align-items:center;overflow:hidden;
}
/* Same reasoning as .hs-hero.alignfull above: cancel the full-bleed
   breakout so this banner is the same width as every other section. */
.hs-split--banner.alignfull{
  width:auto;position:relative;left:auto;right:auto;margin-left:auto;margin-right:auto;
  max-width:var(--hs-container);
}
.hs-split--banner .hs-split__bg{
  position:absolute;inset:0;background-size:cover;background-position:center;
  opacity:.42;filter:grayscale(100%);
}
.hs-split--banner .hs-split__content{
  position:relative;z-index:2;max-width:640px;padding:0 32px;
}
.hs-split--banner .hs-eyebrow{color:var(--hs-accent);}
.hs-split--banner h2{color:var(--hs-white);margin-bottom:.4em;}
.hs-split--banner p{color:var(--hs-grey-300);font-size:1.05rem;max-width:480px;}
.hs-split--banner .hs-btn--outline{color:#fff;border-color:#fff;}

.hs-testimonials{display:grid;grid-template-columns:repeat(3,1fr);gap:40px;}
.hs-testimonial{
  border:1px solid var(--hs-line);padding:32px;border-radius:var(--hs-radius-lg);
  box-shadow:var(--hs-shadow-sm);
  transition:box-shadow var(--hs-speed) var(--hs-ease),transform var(--hs-speed) var(--hs-ease);
}
.hs-testimonial:hover{box-shadow:var(--hs-shadow-md);transform:translateY(-4px);}
.hs-testimonial__stars{color:var(--hs-accent);margin-bottom:14px;letter-spacing:2px;}
.hs-testimonial p{font-style:italic;}
.hs-testimonial__name{font-family:var(--hs-font-head);font-size:.8rem;text-transform:uppercase;letter-spacing:.08em;color:var(--hs-black);}

.hs-newsletter{background:var(--hs-black);color:#fff;text-align:center;padding:70px 32px;}
.hs-newsletter h2{color:#fff;}
.hs-newsletter__form{
  display:flex;justify-content:center;gap:0;max-width:440px;margin:24px auto 0;
  border-radius:var(--hs-radius);overflow:hidden;box-shadow:var(--hs-shadow-md);
}
.hs-newsletter__form input[type=email]{
  flex:1;padding:15px 18px;border:1px solid var(--hs-grey-700);background:rgba(255,255,255,.04);color:#fff;font-size:.9rem;
  transition:background var(--hs-speed) var(--hs-ease),border-color var(--hs-speed) var(--hs-ease);
}
.hs-newsletter__form input[type=email]:focus{outline:none;border-color:var(--hs-accent);background:rgba(255,255,255,.08);}
.hs-newsletter__form button{border-radius:0;}

/* =========================================================
   FOOTER
   ========================================================= */
.hs-footer{background:var(--hs-black-soft);color:var(--hs-grey-300);padding-top:70px;}
.hs-footer__grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px;padding-bottom:50px;border-bottom:1px solid #2a2a2a;}
.hs-footer h4{color:#fff;font-size:.82rem;letter-spacing:.1em;margin-bottom:18px;}
.hs-footer ul li{margin-bottom:10px;}
.hs-footer a{color:var(--hs-grey-300);font-size:.88rem;}
.hs-footer a:hover{color:var(--hs-accent);}
.hs-footer__logo{display:flex;align-items:center;gap:10px;margin-bottom:16px;}
.hs-footer__logo img{max-height:60px;}
.hs-footer__socials{display:flex;gap:14px;margin-top:18px;}
.hs-footer__socials a{
  width:36px;height:36px;border:1px solid var(--hs-grey-700);border-radius:50%;
  display:flex;align-items:center;justify-content:center;
}
.hs-footer__socials a:hover{border-color:var(--hs-accent);color:var(--hs-accent);}
.hs-footer__bottom{display:flex;justify-content:space-between;padding:24px 0;font-size:.78rem;color:var(--hs-grey-500);flex-wrap:wrap;gap:10px;}
.hs-footer__payments{display:flex;gap:8px;font-size:1.4rem;color:var(--hs-grey-500);}
.hs-footer__support{padding:20px 0;border-bottom:1px solid #2a2a2a;font-size:.85rem;text-align:center;}
.hs-footer__support a{color:var(--hs-grey-300);}
.hs-footer__support a:hover{color:var(--hs-accent);}

/* Support-ticket block appended to the Contact page. */
.hs-support-ticket-block{padding:48px 0;}
.hs-support-ticket-steps{max-width:560px;margin:0 0 28px;padding-left:20px;color:var(--hs-grey-700);}
.hs-support-ticket-steps li{margin-bottom:8px;}
.hs-support-ticket-actions{display:flex;align-items:center;gap:20px;flex-wrap:wrap;}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width:1024px){
  .hs-cat-grid{grid-template-columns:repeat(3,1fr);}
  /* Kept at 4 columns (matching the default desktop grid) rather than
     dropping to 3 here — with exactly 4 products in categories like
     Accessories, 3-per-row was leaving a single item stranded alone on
     its own second row. Narrower columns at this width are an
     acceptable trade (each product-card still has ample room down to
     the 782px breakpoint below, where it drops to 2 columns). */
  ul.products{grid-template-columns:repeat(4,1fr) !important;}
  .hs-products{grid-template-columns:repeat(3,1fr);}
  .hs-footer__grid{grid-template-columns:1fr 1fr;}
  .hs-testimonials{grid-template-columns:1fr 1fr;}
  .hs-nav .hs-mega{grid-template-columns:repeat(3,1fr);}
  .hs-featured-grid{grid-template-columns:repeat(3,1fr);}
  .hs-promo-banner__headline{font-size:1.6rem;}
}
@media (max-width:782px){
  .hs-header__search{display:none;}
  .hs-nav{display:none;position:fixed;inset:0;top:0;background:var(--hs-white);z-index:600;padding:90px 24px 24px;overflow:auto;}
  .hs-nav.is-open{display:block;}
  .hs-nav__close{
    display:flex;align-items:center;justify-content:center;
    position:absolute;top:20px;right:20px;width:40px;height:40px;
    background:none;border:1px solid var(--hs-line);border-radius:50%;
    font-size:1.6rem;line-height:1;color:var(--hs-black);cursor:pointer;
  }
  .hs-nav__close:hover{color:var(--hs-accent);border-color:var(--hs-accent);}
  .hs-nav > ul{flex-direction:column;align-items:flex-start;width:100%;}
  .hs-nav > ul > li{width:100%;}
  .hs-nav .hs-mega{position:static;opacity:1;visibility:visible;transform:none;display:none;grid-template-columns:1fr;box-shadow:none;border:0;padding:10px 0 10px 16px;}
  .hs-nav li.menu-item-has-children.is-expanded .hs-mega{display:grid;}
  .hs-mega__col{border-left:0;padding:12px 0;}
  .hs-burger{display:block;}
  .hs-split{grid-template-columns:1fr;}
  .hs-split__content{padding:40px 24px;}
  /* Banner variant (e.g. the "Our Story" ring-on-finger photo): on desktop
     the text sits over the left portion of a wide landscape photo, leaving
     the product visible on the right. On a narrow phone screen that same
     min-height:60vh box forced a huge zoom-crop of a very wide image down
     to a sliver, and the overlaid text covered whatever was left — the
     ring itself was rarely still in frame. Stack image above text instead:
     the full-width photo becomes its own block (cropped/positioned so the
     ring stays centred in it), then the text flows below on a solid
     background where it's fully readable and never overlaps the photo. */
  .hs-split--banner{flex-direction:column;min-height:0;}
  .hs-split--banner .hs-split__bg{
    position:relative;inset:auto;width:100%;aspect-ratio:3/2;
    opacity:.95;background-position:63% center;
  }
  .hs-split--banner .hs-split__content{padding:32px 24px 40px;max-width:none;}
  .hs-cat-grid{grid-template-columns:repeat(2,1fr);}
  ul.products{grid-template-columns:repeat(2,1fr) !important;}
  .hs-products{grid-template-columns:repeat(2,1fr);}
  .hs-usp-strip__inner{grid-template-columns:repeat(2,1fr);}
  .hs-footer__grid{grid-template-columns:1fr 1fr;gap:30px;}
  .hs-testimonials{grid-template-columns:1fr;}
  .hs-section{padding:56px 0;}
  .hs-featured-grid{grid-template-columns:repeat(3,1fr);gap:16px;}
  .hs-promo-banner__inner{padding:40px 24px 30px;}
  .hs-promo-banner__headline{font-size:1.4rem;}
  .hs-logo img{max-height:64px;}
  /* Below this point every one of these grids has dropped to 2 columns
     (see the ul.products / .hs-featured-grid / .hs-cat-grid rules above
     and the ≤480px block below — this rule isn't re-declared there
     because the gap values it depends on don't change at that
     narrower width, so it keeps applying as-is). A 2-column grid with
     an ODD total item count always leaves one lone card sitting in the
     left column of its own final row, with an empty gap beside it —
     that's the "1, then 2, 2, then 1" ragged look. Nothing here
     reorders any product (grid always keeps strict DOM/desktop source
     order — there's no JS reshuffling anything), it just widens that
     one trailing card to sit centred across the full row instead of
     stranded on one side, at whichever card size (half the row minus
     half the gap) its siblings already use. */
  ul.products li.product:last-child:nth-child(odd){
    grid-column:1/-1;max-width:calc(50% - 17px);margin-left:auto !important;margin-right:auto !important;
  }
  .hs-featured-grid > *:last-child:nth-child(odd),
  .hs-cat-grid > *:last-child:nth-child(odd){
    grid-column:1/-1;max-width:calc(50% - 8px);margin-left:auto;margin-right:auto;
  }
}
@media (max-width:480px){
  .hs-cat-grid{grid-template-columns:1fr 1fr;}
  ul.products{grid-template-columns:1fr 1fr !important;}
  .hs-footer__grid{grid-template-columns:1fr;}
  .hs-featured-grid{grid-template-columns:1fr 1fr;}
  .hs-logo img{max-height:52px;}
}
/* Category grid tiles drop to 2 columns well before phone width (see the
   782px rule above), leaving too little room for the longer category names
   at the desktop label size — shrink the label text and padding so every
   category name reads in full on one line instead of getting cut off with
   an ellipsis. */
@media (max-width:600px){
  .hs-cat-card__label{padding:12px 10px;}
  .hs-cat-card__label h3{font-size:.58rem;letter-spacing:0;}
  .hs-cat-card__label span{font-size:.6rem;letter-spacing:.08em;}
}

/* Admin bar offset safety */
.admin-bar .hs-header{top:32px;}

/* Alignment helpers used by block patterns */
.alignfull{width:100vw;position:relative;left:50%;right:50%;margin-left:-50vw;margin-right:-50vw;}
.alignwide{max-width:var(--hs-container);margin-left:auto;margin-right:auto;}

/* =========================================================
   Default WooCommerce content wrapper + native loop markup
   (no template overrides needed — theme support hooks output
   #primary/#main automatically; we just constrain + style it)
   ========================================================= */
#primary.content-area{max-width:var(--hs-container);margin:0 auto;padding:48px 32px 100px;}
/* Elementor-built pages are made entirely of their own edge-to-edge
   (alignfull) sections with their own backgrounds, so the default
   top/bottom breathing room above just leaves an unwanted plain-white gap
   between the last section and the header/footer. Drop it for those pages
   only — ordinary text pages (About, Privacy Policy, etc.) keep the normal
   padding. */
#primary.content-area.content-area--flush{padding-top:0;padding-bottom:0;}
.hs-breadcrumb{padding:20px 32px 0;font-size:.78rem;color:var(--hs-grey-500);text-transform:uppercase;letter-spacing:.06em;}
.hs-breadcrumb a{color:var(--hs-grey-500);}
.hs-breadcrumb a:hover{color:var(--hs-accent);}

.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product{
  position:relative;width:100% !important;float:none !important;margin:0 !important;padding:0;clear:none !important;
  /* Titles run one line ("Bamboo Ring") to several ("Silicone Ring – Dome
     Edge Breathable"), and the star rating only appears on products that
     have reviews — both used to leave the Add to Cart button at a
     different height card to card. Grid rows already stretch every card
     to match the tallest one in that row; making the card itself a column
     flexbox and pinning the button with margin-top:auto means the button
     always lands on the same bottom edge across the row, at any column
     count, without having to hand-tune a fixed height per breakpoint. */
  display:flex !important;flex-direction:column;
}
.woocommerce ul.products li.product a{display:block;}
.woocommerce ul.products li.product a img{
  width:100%;height:auto;aspect-ratio:1/1.05;object-fit:cover;background:var(--hs-grey-100);margin-bottom:16px;
  transition:transform .5s var(--hs-ease),box-shadow var(--hs-speed) var(--hs-ease);
  border-radius:var(--hs-radius-lg);box-shadow:var(--hs-shadow-sm);
}
.woocommerce ul.products li.product:hover a img{transform:scale(1.04) translateY(-2px);box-shadow:var(--hs-shadow-md);}
.woocommerce ul.products li.product .woocommerce-loop-product__title{
  font-family:var(--hs-font-head);font-size:.92rem;letter-spacing:.02em;text-transform:none;font-weight:500;margin:0 0 6px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;line-height:1.35;
}
.woocommerce ul.products li.product .price{font-family:var(--hs-font-head);font-size:.95rem;}
.woocommerce ul.products li.product a.button{margin-top:auto;padding-top:14px;width:100%;text-align:center;}
.woocommerce ul.products li.product .star-rating{margin-bottom:6px;}
.woocommerce ul.products li.product > a:first-child{flex:0 0 auto;}

.page-title, .woocommerce-products-header__title{font-size:clamp(1.8rem,3vw,2.6rem);margin-bottom:.3em;}
.term-description{color:var(--hs-grey-700);max-width:760px;margin-bottom:20px;}

/* =========================================================
   DOG TAG ENGRAVING FIELD + LIVE PREVIEW
   ========================================================= */
.hs-engraving-field{margin:0 0 22px;}
.hs-engrave-explainer{
  font-size:.85rem;color:var(--hs-grey-700);max-width:420px;margin:0 0 16px;line-height:1.55;
}
.hs-engrave-lines{
  display:flex;flex-wrap:wrap;gap:14px;margin:0 0 22px;
}
.hs-engrave-lines__field{flex:1 1 190px;min-width:190px;}
.hs-engrave-lines__field label,
.hs-engraving-field label{
  display:block;font-family:var(--hs-font-head);font-size:.72rem;letter-spacing:.06em;
  text-transform:uppercase;color:var(--hs-grey-700);margin-bottom:8px;line-height:1.4;
}
/* The keyring tag's "Line 3" label ("Line 3 — e.g. phone number (max N
   characters)") is long enough to wrap onto a second line at most widths,
   while Line 1 and Line 2's labels never do — left alone, that pushes just
   the Line 3 input down and out of line with the other two, so the three
   boxes read as uneven heights even though each input is the same height
   on its own. Reserving two lines' worth of space for every label in this
   field group (not just line 3's) keeps all three inputs starting at the
   same y position, and therefore the same visible box height, at any
   viewport width. Scoped to .hs-keyring-field only — the dog-tag engraving
   fields (.hs-engraving-field) share the same base label rule above but
   both of their labels are always one line, so they're left untouched. */
.hs-keyring-field .hs-engrave-lines__field label{
  min-height:2.8em;
}
.hs-engrave-lines__field input[type="text"],
.hs-engraving-field input[type="text"]{
  border:1px solid var(--hs-line);padding:12px;width:100%;
  font-family:var(--hs-font-body);font-size:.95rem;border-radius:var(--hs-radius);
}
.hs-engrave-lines__field input[type="text"]:focus,
.hs-engraving-field input[type="text"]:focus{outline:none;border-color:var(--hs-accent);}

.hs-engrave-preview{
  position:relative;max-width:340px;margin:0 0 20px;border-radius:8px;overflow:hidden;
  background:var(--hs-grey-100);
}
.hs-engrave-preview__img{display:block;width:100%;height:auto;}
.hs-engrave-preview__text{
  position:absolute;top:47%;left:11%;width:56%;transform:translateY(-50%);
  text-align:center;pointer-events:none;
}
.hs-engrave-preview__line{
  display:block;white-space:nowrap;font-family:'Courier New', Courier, monospace;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;color:#333;
  font-size:20px;line-height:1.45;
  text-shadow:0 1px 0 rgba(255,255,255,.6);
}
.hs-engrave-preview__line:empty{display:none;}

@media (max-width:480px){
  .hs-engrave-preview{max-width:260px;}
}

.hs-engrave-price{
  margin:0 0 22px;padding:14px 16px;border:1px solid var(--hs-line);border-radius:var(--hs-radius);
  background:var(--hs-grey-100);transition:border-color .15s ease,background .15s ease;
}
.hs-engrave-price--active{border-color:var(--hs-accent);background:#fff8f2;}
.hs-engrave-price__row{margin:0 0 6px;font-size:.85rem;color:var(--hs-grey-700);}
.hs-engrave-price__row--sum{font-size:.95rem;color:var(--hs-text);font-weight:600;}
.hs-engrave-price__surcharge{color:var(--hs-accent);}
.hs-engrave-price__total{margin:8px 0 0;padding-top:8px;border-top:1px solid var(--hs-line);font-size:1rem;}
.hs-engrave-price__total-amount{color:var(--hs-accent);}

/* =========================================================
   PRODUCT-PAGE DELIVERY ESTIMATOR
   ========================================================= */
.hs-delivery-estimator{
  margin:0 0 22px;padding:18px;border:1px solid var(--hs-line);border-radius:var(--hs-radius);
  background:var(--hs-grey-100);
}
.hs-delivery-estimator__label{
  font-family:var(--hs-font-head);font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;
  color:var(--hs-grey-700);margin:0 0 12px;
}
.hs-delivery-estimator__options{display:flex;flex-direction:column;gap:10px;margin:0 0 14px;}
.hs-delivery-estimator__option{
  display:flex;align-items:flex-start;gap:10px;padding:10px 12px;background:var(--hs-white);
  border:1px solid var(--hs-line);border-radius:var(--hs-radius);cursor:pointer;
  transition:border-color var(--hs-speed) ease;
}
.hs-delivery-estimator__option:hover{border-color:var(--hs-accent);}
.hs-delivery-estimator__option input[type="radio"]{margin-top:4px;accent-color:var(--hs-accent);flex-shrink:0;}
.hs-delivery-estimator__option-text{display:flex;flex-direction:column;gap:2px;font-size:.85rem;color:var(--hs-black);}
.hs-delivery-estimator__option strong{font-family:var(--hs-font-head);font-weight:500;font-size:.85rem;}
.hs-delivery-estimator__desc{color:var(--hs-grey-700);font-size:.78rem;}
.hs-delivery-estimator__price{color:var(--hs-accent-dark);font-size:.8rem;font-weight:500;}
.hs-delivery-estimator__total{
  margin:0 0 8px;padding-top:12px;border-top:1px solid var(--hs-line);
  font-size:.9rem;color:var(--hs-black);display:flex;justify-content:space-between;align-items:baseline;
}
.hs-delivery-estimator__total-amount{font-family:var(--hs-font-head);font-size:1.15rem;color:var(--hs-accent);}
.hs-delivery-estimator__note{
  margin:0;font-size:.72rem;line-height:1.5;color:var(--hs-grey-500);
}

/* =========================================================
   KEYRING TAG ENGRAVING (three-line preview + fields)
   Independent of the dog-tag engraving preview above — different image,
   field IDs, fonts and layout. See inc/keyring-personalisation.php.
   ========================================================= */
.hs-keyring-preview{
  position:relative;max-width:340px;margin:0 0 20px;border-radius:8px;overflow:hidden;
  background:var(--hs-grey-100);
}
.hs-keyring-preview__img{display:block;width:100%;height:auto;}
/* Position measured precisely off the blank tag photo using edge
   detection (not eyeballed — the tag is photographed at an angle, so its
   visual centre is not the photo's centre and is easy to misjudge by
   eye): the flat plate's own bounding box runs from y=430–1394 and
   x=239–1177 of the 1400×1400 source image, so its horizontal centre —
   measured at the block's own mid-height, since the plate is a rotated
   trapezoid whose centre shifts slightly with height — is 45% across.
   Centred with translate(-50%,-50%) so the block's own centre, not its
   top-left corner, lands exactly on that point, giving an equal margin to
   the plate's edge on both sides. Vertical position moved down from an
   earlier 52% to 60% — measured off where the text actually sits in the
   reference engraving photo (masking out the ring's shadow above and the
   tag's cast shadow below to isolate just the ink pixels), which centres
   around 60% down the full photo — a little above the plate's own strict
   65%-down midpoint. The whole block (all three lines together) is tilted
   13° — re-measured by linear-regressing the plate's own left/right edge
   x-position against y down the blank tag photo (the plate is
   photographed at a genuine camera angle, not just rotated in-plane, so
   its edges form a trapezoid rather than a simple rotated rectangle; 13°
   is the tilt of the trapezoid's own centre line, the best single
   rigid-rotation match to that perspective) — every line rotates together
   as one rigid block, the way real engraving on a single flat tilted
   surface would look, rather than only the bottom line angling. Each line
   is independently centred within this block via align-items:center (flex
   column, so centring is measured on the container's own true CSS width,
   not a rotation-inflated bounding box) plus an explicit text-align:center
   as a second guarantee, so line 1 and line 2 land on the same centre line
   as line 3 regardless of how their individual text lengths differ. */
.hs-keyring-preview__text{
  position:absolute;top:60%;left:45%;width:46%;
  transform:translate(-50%,-50%) rotate(13deg);transform-origin:center;
  display:flex;flex-direction:column;align-items:center;gap:5px;
  pointer-events:none;
}
/* Simulated engraved/laser-etched look: a bright bevel highlight offset
   toward the photo's light source (upper-left) plus a stacked, deepening
   set of dark shadows offset away from it (lower-right) reads as a groove
   actually cut into the metal, instead of flat printed text sitting on
   top of it — the extra long, soft outer shadow layer is what gives it
   real depth rather than just a thin 1px bevel line. */
.hs-keyring-preview__line{
  display:block;max-width:100%;white-space:nowrap;text-align:center;
  color:#150f08;
  text-shadow:
    -1px -1px 0 rgba(255,255,255,.9),
    1px 1px 0 rgba(0,0,0,.65),
    2px 2px 2px rgba(0,0,0,.5),
    3px 3px 6px rgba(0,0,0,.25);
}
.hs-keyring-preview__line:empty{display:none;}
/* Lines 1 & 2: bold serif "name" style, matching the reference photo. */
.hs-keyring-preview__line--1,
.hs-keyring-preview__line--2{
  font-family:'Playfair Display', Georgia, serif;font-weight:700;line-height:1.15;
}
/* Line 3: smaller, plainer "phone number" style, matching the reference photo. */
.hs-keyring-preview__line--3{
  font-family:'Jost', Arial, sans-serif;font-weight:500;letter-spacing:.02em;
  margin-top:6px;
}
@media (max-width:480px){
  .hs-keyring-preview{max-width:260px;}
}

/* =========================================================
   HIP FLASK ENGRAVING (four-line preview + fields)
   Independent of the dog-tag and keyring-tag previews above — different
   image, field IDs and layout. See inc/hipflask-personalisation.php.
   ========================================================= */
.hs-hipflask-preview{
  position:relative;max-width:340px;margin:0 0 20px;border-radius:8px;overflow:hidden;
  background:var(--hs-grey-100);
}
.hs-hipflask-preview__img{display:block;width:100%;height:auto;}
/* Position measured off the blank flask photo (edge-scanned, not
   eyeballed): the flat panel runs from x≈503–1524 / y≈445–1750 of the
   2048×2048 source image and is photographed dead-on with no camera-angle
   tilt (unlike the keyring tag), so its horizontal centre is a flat 49.6%
   at every height. Confirmed against the reference engraving photo itself
   by diffing it against the blank photo to isolate just the ink pixels —
   their vertical centre (53.4%) lands almost exactly on the panel's own
   vertical midpoint (53.6%), so no vertical nudge is needed the way the
   keyring tag needed one. Centred with translate(-50%,-50%) so the
   block's own centre lands exactly on that point, giving an equal margin
   on both sides — no rotate() at all, since the source photo has none. */
.hs-hipflask-preview__text{
  position:absolute;top:53.5%;left:49.6%;width:40%;
  transform:translate(-50%,-50%);
  display:flex;flex-direction:column;align-items:center;gap:4px;
  pointer-events:none;
}
/* Same simulated engraved/laser-etched look as the keyring tag (see
   .hs-keyring-preview__line above) — bright bevel highlight toward the
   photo's light source plus a stacked, deepening set of dark shadows away
   from it. */
.hs-hipflask-preview__line{
  display:block;max-width:100%;white-space:nowrap;text-align:center;
  font-family:'Playfair Display', Georgia, serif;
  color:#150f08;
  text-shadow:
    -1px -1px 0 rgba(255,255,255,.9),
    1px 1px 0 rgba(0,0,0,.65),
    2px 2px 2px rgba(0,0,0,.5),
    3px 3px 6px rgba(0,0,0,.25);
}
.hs-hipflask-preview__line:empty{display:none;}
/* Line 1: bold "heading" style, matching the reference photo. */
.hs-hipflask-preview__line--1{
  font-weight:700;line-height:1.15;margin-bottom:2px;
}
/* Lines 2-4: same font family, regular weight and a touch smaller —
   matching the reference photo's lighter-weight body lines. */
.hs-hipflask-preview__line--2,
.hs-hipflask-preview__line--3,
.hs-hipflask-preview__line--4{
  font-weight:400;line-height:1.3;
}
@media (max-width:480px){
  .hs-hipflask-preview{max-width:260px;}
}

/* =========================================================
   CIGARETTE LIGHTER ENGRAVING (three-line preview + fields)
   Independent of the previews above — different image, field IDs and
   layout. See inc/lighter-personalisation.php /
   inc/lighter-engraving-image.php.
   ========================================================= */
.hs-lighter-preview{
  position:relative;max-width:340px;margin:0 0 20px;border-radius:8px;overflow:hidden;
  background:var(--hs-grey-100);
}
.hs-lighter-preview__img{display:block;width:100%;height:auto;}
/* Position + size measured off the blank lighter photo the same way as
   the hip flask's panel (edge-scanned, not eyeballed) and cross-checked
   against the sample engraving photo by isolating just the ink pixels:
   the engraved panel sits centred at 50.6%/65.2% of the frame and the
   text itself never needs more than ~37.7% of the frame's width even at
   the 14-character-per-line limit, matching the $box_w / $center_x /
   $center_y constants in inc/lighter-engraving-image.php exactly (both
   re-derived together via the same crop+resize transform after
   lighter-blank.jpg was cropped tighter, so this live preview and the
   server-rendered order image stay in agreement) so this live preview
   and the server-rendered order image agree. Centred with
   translate(-50%,-50%) so the block's own centre lands on that point,
   giving an equal margin on both sides. */
.hs-lighter-preview__text{
  position:absolute;top:65.2%;left:50.6%;width:37.7%;
  transform:translate(-50%,-50%);
  display:flex;flex-direction:column;align-items:center;gap:8px;
  pointer-events:none;
}
/* Same simulated engraved/laser-etched look as the hip flask/keyring tag
   previews (see .hs-hipflask-preview__line above) — bright bevel
   highlight toward the photo's light source plus a stacked, deepening
   set of dark shadows away from it. All three lines share one font size
   (set inline by assets/js/lighter-engraving.js, mirroring the PHP
   renderer's own uniform-size logic) rather than each having its own
   modifier class, since — unlike the hip flask's bold heading + smaller
   body lines — the reference photo draws all three lines identically. */
.hs-lighter-preview__line{
  display:block;max-width:100%;white-space:nowrap;text-align:center;
  font-family:'Poppins', Arial, sans-serif;font-weight:500;line-height:1.3;
  color:#141414;
  text-shadow:
    -1px -1px 0 rgba(255,255,255,.9),
    1px 1px 0 rgba(0,0,0,.65),
    2px 2px 2px rgba(0,0,0,.5),
    3px 3px 6px rgba(0,0,0,.25);
}
.hs-lighter-preview__line:empty{display:none;}
@media (max-width:480px){
  .hs-lighter-preview{max-width:260px;}
}

/* =========================================================
   TAPE MEASURE LABEL — printed sticker preview + colour/icon
   pickers. Own field/class prefix (hs-tape-*), gated by product meta
   (see inc/tapemeasure-personalisation.php), independent of the dog
   tag / keyring tag / hip flask engraving CSS above. Unlike those three
   (debossed/engraved metal look), this is flat printed ink on a black
   sticker, so no highlight/shadow text-shadow stack — just solid colour.
   ========================================================= */
.hs-tape-preview{
  position:relative;max-width:340px;margin:0 0 20px;border-radius:8px;overflow:hidden;
  background:var(--hs-grey-100);
}
.hs-tape-preview__img{display:block;width:100%;height:auto;}
/* Label position/size/tilt measured directly off the blank photo
   (edge-scanned, not eyeballed): the round label sits centred at
   42.4% / 52.9%, with a horizontal radius of 17.0% of the image width —
   diameter 34% — and is photographed at a very slight angle: ~2.4°
   rotation plus the ellipse being ~6.6% taller than it is wide
   (reproduced here as scaleY, applied after the rotation so it stays a
   simple ellipse rather than a sheared one). Width widened to 80% of
   that diameter (up from an earlier, more conservative 66%) to match
   how bold/large the text actually reads on the reference photo — the
   boldest line there spans roughly 75-85% of the label's own width —
   while still leaving room for the topmost/bottommost stacked line to
   stay inside the circle's curve. Mirrors the same box-width fraction
   and font-size bump made in inc/tapemeasure-label-image.php. */
.hs-tape-preview__label{
  position:absolute;top:52.9%;left:42.4%;width:27.2%;
  transform:translate(-50%,-50%) rotate(2.4deg) scaleY(1.066);
  display:flex;flex-direction:column;align-items:center;
  pointer-events:none;
}
/* Gap left unset here — tapemeasure-label.js sets it inline, proportional
   to the label's own rendered width (matching the $gap = 7 * $scale
   constant in inc/tapemeasure-label-image.php's PHP renderer), so the
   on-page preview's line spacing scales with the label the same way the
   printed/GD version's does instead of eating a disproportionate share
   of a small preview at a fixed pixel value. */
.hs-tape-preview--empty .hs-tape-preview__label{display:none;}
.hs-tape-preview__line{
  display:block;max-width:100%;white-space:nowrap;text-align:center;
  font-family:'Poppins', 'Jost', sans-serif;
}
.hs-tape-preview__line:empty{display:none;}
.hs-tape-preview__line--1{font-size:18px;font-weight:700;}
.hs-tape-preview__line--2{font-size:16px;font-weight:700;}
.hs-tape-preview__line--3{font-size:12px;font-weight:600;}
/* height:0 + border-top (rather than height:1px + background) so
   tapemeasure-label.js can add proportional padding above/below the
   line itself without the background swelling into a thick bar. */
.hs-tape-preview__rule{display:block;width:78%;height:0;border-top:1px solid rgba(255,255,255,.45);}
.hs-tape-preview__rule--hidden{display:none;}
.hs-tape-preview__icon{font-size:26px;line-height:1;}
.hs-tape-preview__icon:empty{display:none;}
@media (max-width:480px){
  .hs-tape-preview{max-width:260px;}
}

/* Colour swatch pickers — one set per text line, one for the symbol.
   Radio inputs visually hidden but still keyboard/focus accessible;
   the coloured dot itself is drawn from a --swatch-colour custom
   property set inline per swatch (see inc/tapemeasure-personalisation.php). */
.hs-tape-colour-picker{display:flex;gap:8px;margin-top:9px;}
.hs-tape-swatch{position:relative;display:block;width:24px;height:24px;cursor:pointer;}
.hs-tape-swatch input[type="radio"]{
  position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer;
}
.hs-tape-swatch__dot{
  display:block;width:100%;height:100%;border-radius:50%;background:var(--swatch-colour);
  box-shadow:0 0 0 1px rgba(0,0,0,.15) inset;transition:transform .15s ease,box-shadow .15s ease;
}
.hs-tape-swatch input[type="radio"]:checked + .hs-tape-swatch__dot{
  transform:scale(1.15);box-shadow:0 0 0 2px #fff inset,0 0 0 2px #1a1a1a;
}
.hs-tape-swatch input[type="radio"]:focus-visible + .hs-tape-swatch__dot{
  outline:2px solid var(--hs-accent);outline-offset:2px;
}

.hs-engrave-lines__field--icon{flex:1 1 220px;min-width:220px;}
.hs-engrave-lines__field select{
  border:1px solid var(--hs-line);padding:12px;width:100%;
  font-family:var(--hs-font-body);font-size:.95rem;border-radius:var(--hs-radius);background:#fff;
}
.hs-engrave-lines__field select:focus{outline:none;border-color:var(--hs-accent);}