/* Hype Pups Commerce — storefront styles (scoped with .hpc-*). Tokens follow the site: Poppins, #D20210, #141414. */
:root{--hpc-ink:#141414;--hpc-grey:#6b6b70;--hpc-line:#ebebed;--hpc-soft:#f6f5f3;--hpc-red:#D20210;--hpc-red-d:#a80109;--hpc-ok:#1a7f37;--hpc-r:10px}

/* ---------- delivery wording */
.hpc-delivery{display:flex;gap:10px;align-items:flex-start;flex-basis:100%;width:100%;margin:14px 0 2px;font-size:12.5px;line-height:1.45;color:var(--hpc-grey)}
.hpc-delivery__ic{width:18px;height:18px;flex:0 0 auto;color:var(--hpc-ink);margin-top:1px}
.hpc-delivery__txt{display:flex;flex-direction:column;gap:2px}
.hpc-delivery__txt strong{color:var(--hpc-ink);font-weight:600;font-size:13px}
.hpc-delivery a{color:var(--hpc-grey);text-decoration:underline;text-underline-offset:2px}
.hpc-delivery--mini{margin:10px 0 0;font-size:12px;align-items:center;justify-content:center}
.hpc-delivery--mini .hpc-delivery__ic{width:16px;height:16px;margin:0}
#glozin-sticky-add-to-cart .hpc-delivery,#glozin-sticky-add-to-cart .hpc-offer{display:none!important}
.woocommerce-variation-add-to-cart,.summary form.cart:not(.variations_form){flex-wrap:wrap}
tr.hpc-delivery-row td,tr.hpc-offer-row td{font-size:13px;line-height:1.5;color:#3a3a3a}
tr.hpc-offer-row small{color:var(--hpc-grey)}

/* ---------- free-shipping bar (existing look, accessible fill) */
.hpc-fsb .hp-freeship-bar__fill{transition:width .35s ease}
.hpc-fsb.is-complete .hp-freeship-bar__msg{color:var(--hpc-ok)!important}

/* ---------- product-page recommendations */
.hpc-recs{padding:48px 22px 44px;border-top:1px solid var(--hpc-line);max-width:1410px;margin:0 auto;clear:both}
.hpc-recs__head{text-align:center;margin:0 auto 26px;max-width:640px}
.hpc-recs__title{font-size:24px;font-weight:700;letter-spacing:-.01em;margin:0 0 6px;color:var(--hpc-ink);line-height:1.2}
.hpc-recs__title:after{content:"";display:block;width:32px;height:2px;background:var(--hpc-red);margin:12px auto 0}
.hpc-recs__sub{margin:10px 0 0;font-size:13px;color:var(--hpc-grey)}
.hpc-recs__fit{color:var(--hpc-ok);font-weight:500}
.hpc-recs__grid{list-style:none}
.hpc-sel{flex:1 1 90px;min-width:0;margin:0}
.hpc-sel select,.hpc-offer select{width:100%;height:36px;min-height:36px;padding:0 28px 0 10px;border:1px solid var(--hpc-line);border-radius:8px;background-color:#fff;font:inherit;font-size:12.5px;color:var(--hpc-ink)}
.hpc-sel select:focus-visible,.hpc-recs__addall:focus-visible,.hpc-mc__btn:focus-visible,.hpc-offer__opt:focus-within{outline:2px solid var(--hpc-ink);outline-offset:2px}
.hpc-recs__allmsg,.hpc-offer__msg{margin:0;font-size:12px;color:var(--hpc-red-d);min-height:0}
.hpc-recs__all{display:flex;flex-direction:column;align-items:center;gap:6px;margin-top:22px;text-align:center}
.hpc-recs__addall{height:44px;padding:0 26px;border-radius:8px;border:0;background:var(--hpc-ink);color:#fff;font-weight:700;letter-spacing:.05em;text-transform:uppercase;font-size:12.5px;cursor:pointer}
.hpc-recs__addall:hover{background:#000}
.hpc-recs__allnote{font-size:12px;color:var(--hpc-grey)}
@media (max-width:767px){.hpc-recs{padding:34px 16px}.hpc-recs__title{font-size:21px}}

/* ---------- mini-cart module (inside the scroll area, above the sticky totals) */
.hpc-mc{margin:12px 0 4px;padding:12px;border:1px solid var(--hpc-line);border-radius:var(--hpc-r);background:#fff}
.hpc-mc__h{margin:0 0 8px;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--hpc-grey)}
.hpc-mc__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.hpc-mc__item{display:grid;grid-template-columns:52px minmax(0,1fr) auto;gap:10px;align-items:center}
.hpc-mc__img img{width:52px;height:52px;object-fit:cover;border-radius:6px;display:block;background:var(--hpc-soft)}
.hpc-mc__txt{display:flex;flex-direction:column;min-width:0;font-size:12.5px;line-height:1.3}
.hpc-mc__txt a{color:var(--hpc-ink);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-decoration:none}
.hpc-mc__why{color:var(--hpc-grey);font-size:11px}
.hpc-mc__price{font-weight:600;color:var(--hpc-ink)}
.hpc-mc__price del{color:var(--hpc-grey);font-weight:400}
.hpc-mc__btn{display:inline-flex;align-items:center;justify-content:center;height:32px;min-width:64px;padding:0 12px;border-radius:8px;border:1px solid var(--hpc-ink);background:#fff;color:var(--hpc-ink)!important;font-size:11px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;cursor:pointer;text-decoration:none}
.hpc-mc__btn:hover{background:var(--hpc-ink);color:#fff!important}
.glozin-mini-products-recommended{display:none!important}

/* ---------- bundle / quantity offer selector */
.hpc-offer{border:0;padding:0;margin:4px 0 16px;flex-basis:100%;width:100%;min-width:0}
.hpc-offer__h{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--hpc-grey);margin:0 0 9px;padding:0}
.hpc-offer__opt{display:flex;align-items:center;gap:10px;padding:12px 14px;border:1px solid var(--hpc-line);border-radius:var(--hpc-r);margin:0 0 8px;cursor:pointer;background:#fff;transition:border-color .15s,box-shadow .15s}
.hpc-offer__opt.is-on{border-color:var(--hpc-ink);box-shadow:0 0 0 1px var(--hpc-ink) inset}
.hpc-offer__opt input{accent-color:var(--hpc-red);margin:0;flex:0 0 auto;width:16px;height:16px}
.hpc-offer__t{flex:1;min-width:0;font-size:13px;font-weight:600;color:var(--hpc-ink);line-height:1.35;display:flex;flex-direction:column;gap:2px}
.hpc-offer__save{font-size:11.5px;font-weight:600;color:var(--hpc-red)}
.hpc-offer__p{font-size:13px;color:var(--hpc-ink);white-space:nowrap;text-align:right}
.hpc-offer__p del{color:var(--hpc-grey);font-weight:400;margin-right:4px;font-size:12px}
.hpc-offer__parts,.hpc-offer__units{display:flex;flex-direction:column;gap:8px;margin:2px 0 8px;padding:10px;background:var(--hpc-soft);border-radius:var(--hpc-r)}
.hpc-offer__parts[hidden],.hpc-offer__units[hidden]{display:none}
.hpc-offer__part{display:grid;grid-template-columns:56px minmax(0,1fr);gap:10px;align-items:center}
.hpc-offer__pimg img{width:56px;height:56px;border-radius:8px;object-fit:cover;display:block;background:#fff}
.hpc-offer__pbody{display:flex;flex-direction:column;gap:4px;min-width:0}
.hpc-offer__pname{font-size:12.5px;font-weight:600;color:var(--hpc-ink)}
.hpc-offer__pprice{font-size:12px;color:var(--hpc-grey)}
.hpc-offer__psel,.hpc-offer__unit{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.hpc-offer__un{font-size:12px;font-weight:600;color:var(--hpc-ink);min-width:48px}
.hpc-offer__note{font-size:11.5px;color:var(--hpc-grey);margin:2px 0 0}

/* ---------- Fits Your Dog */
.hpc-fyd{margin:0 0 18px;padding:12px 14px;border:1px solid var(--hpc-line);border-radius:var(--hpc-r);background:#fff}
.hpc-fyd__row{display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-size:13px}
.hpc-fyd__lab{color:var(--hpc-grey)}
.hpc-fyd__chip{display:inline-flex;align-items:center;height:28px;padding:0 10px;border-radius:30px;background:var(--hpc-soft);font-weight:600;color:var(--hpc-ink);font-size:12.5px}
.hpc-fyd__adj{height:30px;padding:0 12px;border-radius:30px;border:1px solid var(--hpc-ink);background:#fff;color:var(--hpc-ink);font-size:12px;font-weight:600;cursor:pointer}
.hpc-fyd__clear{font-size:12.5px;color:var(--hpc-grey);text-decoration:underline;text-underline-offset:3px;margin-left:auto}
.hpc-fyd__form{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end;margin-top:12px}
.hpc-fyd__form[hidden]{display:none}
.hpc-fyd__f{display:flex;flex-direction:column;gap:4px;font-size:11.5px;color:var(--hpc-grey);width:120px}
.hpc-fyd__f input{height:38px;border:1px solid var(--hpc-line);border-radius:8px;padding:0 10px;font:inherit;font-size:14px}
.hpc-fyd__go{height:38px;padding:0 16px;border:0;border-radius:8px;background:var(--hpc-ink);color:#fff;font-weight:600;font-size:12.5px;cursor:pointer}
.hpc-fyd__note{flex-basis:100%;margin:0;font-size:11.5px;color:var(--hpc-grey)}
.hpc-fyd-hint{margin:0 0 14px;font-size:13px}
.hpc-fyd-hint a,.hpc-fitlink{color:var(--hpc-ink);font-weight:600;text-decoration:underline;text-underline-offset:3px}
.hpc-fitlink{display:inline-block;margin-top:10px;font-size:13px}
#hp-sr-modal .hpc-fitlink--modal{display:block;text-align:center;margin:12px auto 2px}
.hpc-fyd-empty{text-align:center;padding:24px 16px;max-width:620px;margin:0 auto}
.hpc-fyd-empty .button{margin:6px 4px 0}
.hpc-fyd-cta{margin:28px 0 0;padding:20px;border:1px solid var(--hpc-line);border-radius:var(--hpc-r);text-align:center}
.hpc-fyd-cta__t{font-weight:700;font-size:16px;margin:0 0 6px;color:var(--hpc-ink)}
.hpc-fyd-cta__s{font-size:13px;color:var(--hpc-grey);margin:0 0 12px}

/* ---------- zero results */
.hpc-zero{max-width:980px;margin:10px auto 0;text-align:center}
.hpc-zero__h{font-size:22px;margin:0 0 6px}
.hpc-zero__p{color:var(--hpc-grey);font-size:14px;margin:0 0 14px}
.hpc-zero__chips,.hpc-zero__cats{list-style:none;padding:0;margin:0 0 14px;display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.hpc-zero__cats a{display:inline-block;padding:7px 12px;border-radius:30px;background:var(--hpc-soft);color:var(--hpc-ink);font-size:13px;text-decoration:none}
.hpc-zero__h3{font-size:17px;margin:22px 0 14px}
.hpc-zero__grid{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;text-align:left}
.hpc-zero__grid li.product{width:auto!important;max-width:none!important;padding:0!important;margin:0!important}
@media (max-width:767px){.hpc-zero__grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.hpc-zero__shop{margin:18px 0 0}
.hpc-live-zero{padding:10px 0}
.hpc-live-zero ul{list-style:none;padding:0;margin:6px 0 0;display:flex;flex-wrap:wrap;gap:8px}
.hpc-live-zero a{display:inline-block;padding:6px 12px;border:1px solid var(--hpc-line);border-radius:30px;font-size:13px;color:var(--hpc-ink)}

/* ---------- mobile bottom navigation: height is fixed at the source (snippet #295); only add the iPhone home-indicator inset here */
@media (max-width:767.98px){html body #glozin-mobile-navigation-bar{padding-bottom:env(safe-area-inset-bottom,0px)}}
.hpc-btf-clear{display:inline-flex;align-items:center;min-height:32px;margin:6px 0 0;padding:0 2px;background:none;border:0;font:inherit;font-size:12px;font-weight:500;color:#6b6b70;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.hpc-btf-clear:hover,.hpc-btf-clear:focus-visible{color:#111}
.hpc-btf-clear:focus-visible{outline:2px solid #111;outline-offset:2px;border-radius:2px}
.hpc-btf-clear[hidden]{display:none}
.hpc-mc-li{list-style:none;margin:0;padding:0;border:0!important;width:100%}

/* ==========================================================================
   Mobile menu (hpc-mm)
   Replaces the theme's flat category list inside its own off-canvas shell.
   ========================================================================== */

/* A slide-out, not a takeover.
   The theme drops --gz-panel-content-width to 100% below 767px, which makes the
   panel a full-screen page the shopper has to find their way out of. Keeping a
   strip of the page visible is what tells them it is a panel, and gives them a
   second way to dismiss it. Same proportion at every width. */
body .offscreen-panel.hamburger-panel .panel__container {
  --gz-panel-content-width: min(420px, 90vw);
  width: 100% !important;
  max-width: min(420px, 90vw) !important;
  /* The theme animates this over .6s. Two thirds of a second between tapping
     the close cross and anything moving is what reads as lag. */
  transition: transform .3s cubic-bezier(.32,.72,0,1) !important;
  box-shadow: 0 0 44px rgba(0,0,0,.16);
}

/* The theme's close cross renders a 13x13px hit area, tucked against the top of
   the screen. A fingertip is nearer 44px, so taps land beside it and the panel
   appears not to respond — which reads as lag rather than as a miss. The glyph
   stays exactly where it is; an invisible 48px pad is what gets tapped. */
body .offscreen-panel .panel__button-close,
body #search-modal .modal__button-close { position: relative; }
body .offscreen-panel .panel__button-close::after,
body #search-modal .modal__button-close::after {
  content: ""; position: absolute; top: 50%; left: 50%;
  width: 48px; height: 48px; transform: translate(-50%, -50%);
}
body .offscreen-panel.hamburger-panel .panel__button-close svg { width: 17px; height: 17px; }

/* No dark wash over the page behind. The panel sits above a live storefront,
   not a dimmed one — the shadow above does the separating instead. */
body .offscreen-panel.hamburger-panel > .panel__backdrop,
body #search-modal > .modal__backdrop { background-color: transparent !important; }

/* Search gets the menu's proportions. The theme already slides this panel in
   from the right below 1200px — it was simply 480px wide, which is wider than
   the phone, so it landed full-bleed. */
@media (max-width: 1024.98px) {
  body #search-modal.search-type-popup { --gz-modal-content-width: min(420px, 90vw); }
  body #search-modal .modal__container {
    max-width: min(420px, 90vw) !important;
    box-shadow: 0 0 44px rgba(0,0,0,.16);
  }
  body #search-modal.modal--open:not(.loading) .modal__container,
  body #search-modal.modal--closing .modal__container {
    transition: transform .3s cubic-bezier(.32,.72,0,1) !important;
  }
  /* Full height now that it is a side panel, and no longer measured from the
     WordPress admin bar. */
  body #search-modal.modal-to-form .modal__wrapper {
    height: 100%;
    max-height: 100% !important;
    border-radius: 0 !important;
    padding-left: 16px; padding-right: 16px;
  }
}

/* The Klaviyo sign-up popup renders at z-index 90000; the drawers sit at 1100,
   so it lands on top of an open menu and covers the categories. Someone who
   just tapped the hamburger is mid-navigation, which is the worst moment to
   interrupt them. Hidden while a drawer is open, not dismissed — it is still
   free to appear once they close it. */
html.hpc-panel-open [class*="kl-private-reset-css"],
html.hpc-panel-open [class*="klaviyo-form"],
html.hpc-panel-open div[data-testid="POPUP"] { display: none !important; }
body .offscreen-panel.hamburger-panel .panel__content { overflow-x: hidden; }

/* Once our body is in, the theme's own lists and the Menu/Categories tabs go. */
/* The theme pads .panel__content by 30px each side, and our body added 18 more:
   96px of a 351px panel spent on gutters, which is what read as "a lot of white
   space on the left and right". The panel owns no horizontal padding now; the
   menu body sets its own. */
body .panel__content.hpc-mm-on { padding-left: 0; padding-right: 0; padding-top: 0; }

.panel__content.hpc-mm-on > .panel__content-items,
.panel__header .panel__menu-items.hpc-mm-off,
.hpc-mm-on ~ .panel__footer { display: none !important; }
.panel__header .hpc-mm-title { font-size: 14px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; margin: 0; }

.hpc-mm {
  --hpc-line: rgba(17,17,17,.09);
  --hpc-ink: var(--gz-color-dark, #111);
  --hpc-red: var(--gz-color-primary, #D20210);
  display: flex; flex-direction: column; gap: 18px;
  padding: 16px 16px 30px; color: var(--hpc-ink);
  -webkit-tap-highlight-color: transparent;
}
.hpc-mm * { box-sizing: border-box; }
/* `display: flex` beats the hidden attribute, so these would render until the
   script got round to them — a dead "shop what fits" link and the whole label
   tail, both visible on first paint and both still there if the script fails. */
.hpc-mm [hidden] { display: none !important; }
.hpc-mm a, .hpc-mm button { -webkit-tap-highlight-color: transparent; }

/* Search — the highest-intent control, so it comes first. */
.hpc-mm__search { position: relative; display: block; }
.hpc-mm .hpc-mm__search input[type="search"] {
  width: 100%; height: 50px; padding: 0 14px 0 44px !important; margin: 0;
  border: 1.5px solid var(--hpc-line); border-radius: 12px; background: #fff;
  font-size: 15px; line-height: 50px; color: inherit; -webkit-appearance: none; appearance: none;
}
.hpc-mm .hpc-mm__search input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; }
.hpc-mm__search input:focus { outline: 2px solid var(--hpc-red); outline-offset: 1px; border-color: transparent; }
.hpc-mm__searchicon { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; opacity: .45; pointer-events: none; }
.hpc-mm__searchicon svg { width: 18px; height: 18px; display: block; }

/* Sale / New — the two entries that actually get tapped. */
.hpc-mm__tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.hpc-mm__tiles--solo { grid-template-columns: 1fr; }
.hpc-mm__tile { display: flex; flex-direction: column; justify-content: center; gap: 3px; min-height: 64px; padding: 12px 15px; border-radius: 14px; text-decoration: none; }
.hpc-mm__tile--sale { background: var(--hpc-red); color: #fff; }
/* Two heavyweight blocks fought each other. Sale keeps the colour because it is
   the tile that earns its place; New in steps back to a quiet outline. */
.hpc-mm__tile--new { background: #fff; color: var(--hpc-ink); border: 1.5px solid var(--hpc-line); }
.hpc-mm__tile--new .hpc-mm__tiles2 { opacity: .55; }
.hpc-mm__tilek { font-size: 14px; font-weight: 750; letter-spacing: .03em; text-transform: uppercase; line-height: 1.1; }
.hpc-mm__tiles2 { font-size: 11px; opacity: .82; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Sizing help. */
.hpc-mm__fit { display: flex; flex-direction: column; gap: 8px; }
.hpc-mm__fitrow {
  display: flex; align-items: center; gap: 13px; width: 100%; min-height: 62px;
  padding: 11px 15px; border-radius: 14px; background: var(--gz-color-light-grey, #f5f5f5);
  border: 0; text-align: left; text-decoration: none; color: inherit; font: inherit; cursor: pointer;
}
.hpc-mm__fitrow--saved { background: rgba(210,2,16,.06); }
.hpc-mm__fiticon { flex: 0 0 22px; opacity: .8; }
.hpc-mm__fiticon svg { width: 22px; height: 22px; display: block; }
.hpc-mm__fittext { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.hpc-mm__fittext strong { font-size: 14px; font-weight: 650; line-height: 1.25; }
.hpc-mm__fittext small { font-size: 11.5px; opacity: .58; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hpc-mm__fitsaved { display: flex; flex-direction: column; gap: 6px; }
.hpc-mm__fitedit { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; min-height: 40px; padding: 8px 4px; background: none; border: 0; font: inherit; font-size: 12.5px; font-weight: 600; opacity: .6; cursor: pointer; color: inherit; }
.hpc-mm__fitedit svg { width: 15px; height: 15px; }

.hpc-mm__sec { display: flex; flex-direction: column; gap: 10px; }
.hpc-mm__h { margin: 0; font-size: 10.5px; font-weight: 750; letter-spacing: .13em; text-transform: uppercase; opacity: .42; }

.hpc-mm__list { list-style: none; margin: 0; padding: 0; }
.hpc-mm__item + .hpc-mm__item { border-top: 1px solid var(--hpc-line); }
.hpc-mm__row {
  display: flex; align-items: center; gap: 13px; width: 100%; min-height: 58px;
  padding: 8px 0; background: none; border: 0; border-radius: 12px;
  text-align: left; text-decoration: none; color: inherit; font: inherit; cursor: pointer;
}
/* Nothing darkens behind a row. Pressing one dims its own text briefly, which
   is feedback without painting a grey block across the category. */
.hpc-mm a:focus, .hpc-mm button:focus { outline: none; box-shadow: none; background: none; }
.hpc-mm__row:active { background: none; opacity: .55; }
@media (pointer: coarse) {
  .hpc-mm a:focus-visible, .hpc-mm button:focus-visible { outline: none; background: none; }
}
/* Keyboard focus still needs to be visible, but only where a keyboard is. */
@media (pointer: fine) {
  .hpc-mm a:focus-visible, .hpc-mm button:focus-visible { outline: 2px solid var(--hpc-ink); outline-offset: 2px; border-radius: 10px; }
}
.hpc-mm__row--plain { min-height: 52px; }

/* The grey chip round each glyph added a box inside a box: on tap it sat flush
   against the row's focus ring and read as a frame with an icon jammed into the
   corner. The glyph carries itself at this size. */
.hpc-mm__ico { flex: 0 0 28px; width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; }
.hpc-mm__ico svg { width: 28px; height: 28px; display: block; opacity: .9; }

.hpc-mm__label { flex: 1 1 auto; min-width: 0; font-size: 14.5px; font-weight: 600; line-height: 1.25; }
.hpc-mm__count { flex: 0 0 auto; font-size: 11.5px; opacity: .36; font-variant-numeric: tabular-nums; }
.hpc-mm__chev { flex: 0 0 18px; opacity: .3; }
.hpc-mm__chev svg { width: 18px; height: 18px; display: block; transition: transform .18s ease; }
.hpc-mm__row[aria-expanded="true"] .hpc-mm__chev svg { transform: rotate(180deg); }

.hpc-mm__sub { padding: 0 0 10px 41px; }
.hpc-mm__sub ul { list-style: none; margin: 0; padding: 0; }
.hpc-mm__sub a { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 42px; padding: 3px 0; font-size: 13.5px; line-height: 1.3; text-decoration: none; color: inherit; opacity: .8; }
.hpc-mm__suball { font-weight: 650; opacity: 1 !important; }

/* Labels — how customers actually describe what they want. */
.hpc-mm__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.hpc-mm__chip { display: inline-flex; align-items: center; gap: 5px; min-height: 40px; padding: 8px 14px; border: 1.5px solid var(--hpc-line); border-radius: 100px; font-size: 13px; font-weight: 600; line-height: 1.15; text-decoration: none; color: inherit; white-space: nowrap; }
.hpc-mm__chip:active { background: rgba(17,17,17,.04); }
.hpc-mm__chip i { font-style: normal; font-size: 11px; opacity: .36; font-variant-numeric: tabular-nums; }
.hpc-mm__chip--plain { font-weight: 500; }
.hpc-mm__chip--toggle { border-style: dashed; opacity: .65; cursor: pointer; background: none; font-family: inherit; }

.hpc-mm__util { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.hpc-mm__utilitem { display: flex; align-items: center; gap: 8px; min-height: 50px; padding: 10px 12px; border: 1.5px solid var(--hpc-line); border-radius: 12px; font-size: 12.5px; font-weight: 600; line-height: 1.2; text-decoration: none; color: inherit; }
.hpc-mm__utilitem svg { width: 18px; height: 18px; display: block; opacity: .5; flex: 0 0 18px; }

/* Specificity, not taste: the theme's `.hamburger-panel ul` zeroes padding on
   every list in the panel, which is why the divider sat flush against this
   copy. Two classes beat it without !important. */
.hpc-mm .hpc-mm__trust { list-style: none; margin: 2px 0 0; padding: 22px 0 0; border-top: 1px solid var(--hpc-line); display: flex; flex-direction: column; gap: 10px; }
.hpc-mm__trust li { display: flex; align-items: center; gap: 9px; font-size: 12.5px; line-height: 1.35; opacity: .7; }
.hpc-mm__trust svg { width: 15px; height: 15px; flex: 0 0 15px; color: #1c7a3e; }

.hpc-mm__social { display: inline-flex; align-items: center; gap: 9px; min-height: 44px; font-size: 13px; font-weight: 600; text-decoration: none; color: inherit; opacity: .75; }
.hpc-mm__social svg { width: 19px; height: 19px; }

@media (max-width: 360px) {
  .hpc-mm { padding: 14px 15px 26px; gap: 20px; }
  .hpc-mm__tiles, .hpc-mm__util { grid-template-columns: 1fr; }
  .hpc-mm__sub { padding-left: 41px; }
}
@media (prefers-reduced-motion: reduce) { .hpc-mm__chev svg { transition: none; } }

/* ==========================================================================
   Size sheet (hpc-fs)
   One entry, reused by the fit-filtered shop and by every product page.
   ========================================================================== */
.hpc-fs { position: fixed; inset: 0; z-index: 100000; display: flex; align-items: flex-end; justify-content: center; }
.hpc-fs[hidden] { display: none; }
.hpc-fs__backdrop { position: absolute; inset: 0; background: rgba(17,17,17,.5); opacity: 0; transition: opacity .2s ease; }
.hpc-fs.is-open .hpc-fs__backdrop { opacity: 1; }
.hpc-fs__panel {
  position: relative; width: 100%; max-width: 480px; max-height: 88vh; overflow-y: auto;
  background: #fff; border-radius: 20px 20px 0 0; padding: 0 20px calc(24px + env(safe-area-inset-bottom, 0px));
  transform: translateY(100%); transition: transform .24s cubic-bezier(.32,.72,0,1);
  color: var(--gz-color-dark, #111); overscroll-behavior: contain;
}
.hpc-fs.is-open .hpc-fs__panel { transform: translateY(0); }
@media (min-width: 768px) { .hpc-fs { align-items: center; } .hpc-fs__panel { border-radius: 18px; max-height: 86vh; } .hpc-fs__head { border-radius: 18px 18px 0 0; } }
/* Sticky so the way out is always on screen, and wide enough to be the drag
   handle: a swipe down anywhere on this strip dismisses the sheet. */
.hpc-fs__head {
  position: sticky; top: 0; z-index: 3; display: flex; align-items: center; justify-content: center;
  height: 52px; margin: 0 -20px; padding: 0 12px; background: #fff;
  border-radius: 20px 20px 0 0; touch-action: none; cursor: grab;
}
.hpc-fs__grab { width: 44px; height: 5px; border-radius: 99px; background: rgba(17,17,17,.16); margin: 0; }
.hpc-fs .hpc-fs__x {
  position: absolute; top: 50%; right: 12px; transform: translateY(-50%);
  width: 38px; height: 38px; min-height: 0 !important; padding: 0 !important;
  display: flex; align-items: center; justify-content: center;
  border: 0 !important; border-radius: 50% !important; background: rgba(17,17,17,.07) !important;
  box-shadow: none !important; cursor: pointer; opacity: 1; color: var(--gz-color-dark, #111);
}
.hpc-fs .hpc-fs__x:active { background: rgba(17,17,17,.14) !important; }
.hpc-fs__x svg { width: 17px; height: 17px; display: block; }
.hpc-fs__t { margin: 0 0 6px; font-size: 19px; font-weight: 700; line-height: 1.2; }
.hpc-fs__s { margin: 0 0 18px; font-size: 13px; line-height: 1.45; opacity: .62; }

/* Compact segmented control; the theme's button padding would balloon it. */
.hpc-fs__units { display: inline-flex; gap: 2px; padding: 3px; border-radius: 10px; background: var(--gz-color-light-grey, #f5f5f5); margin: 0 0 18px; }
.hpc-fs .hpc-fs__units button {
  width: 52px; min-width: 0 !important; height: 34px; min-height: 0 !important; padding: 0 !important; margin: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border: 0 !important; border-radius: 8px !important; background: none; box-shadow: none !important;
  font: inherit; font-size: 12.5px; font-weight: 650; line-height: 1; letter-spacing: 0; text-transform: none;
  cursor: pointer; color: inherit; opacity: .5;
}
.hpc-fs .hpc-fs__units button.is-on { background: #fff !important; opacity: 1; box-shadow: 0 1px 3px rgba(0,0,0,.09) !important; }

.hpc-fs__f { display: block; margin-bottom: 15px; }
.hpc-fs__l { display: block; margin-bottom: 7px; font-size: 13.5px; font-weight: 650; line-height: 1.25; }
.hpc-fs__l small { display: block; font-size: 11.5px; font-weight: 400; opacity: .48; margin-top: 2px; line-height: 1.3; }
/* The theme styles every input as a pill; the sheet keeps its own shape. */
.hpc-fs .hpc-fs__f input[type="number"],
.hpc-fs .hpc-fs__f input[type="text"] {
  width: 100%; height: 52px; margin: 0; padding: 0 14px !important;
  border: 1.5px solid rgba(17,17,17,.14) !important; border-radius: 12px !important;
  background: #fff; font-size: 16px; line-height: 52px; color: inherit; box-shadow: none !important;
  -webkit-appearance: none; appearance: none;
}
.hpc-fs .hpc-fs__f input[type="number"]::-webkit-outer-spin-button,
.hpc-fs .hpc-fs__f input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.hpc-fs .hpc-fs__f input[type="number"] { -moz-appearance: textfield; }
.hpc-fs .hpc-fs__f input:focus {
  outline: none !important; border-color: var(--gz-color-dark, #111) !important;
  box-shadow: 0 0 0 3px rgba(17,17,17,.08) !important;
}
.hpc-fs .hpc-fs__f input.is-bad { border-color: var(--gz-color-primary, #D20210) !important; box-shadow: 0 0 0 3px rgba(210,2,16,.1) !important; }
.hpc-fs__inp { position: relative; display: block; }
.hpc-fs__unitsuffix { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); font-size: 13px; opacity: .38; pointer-events: none; }
.hpc-fs .hpc-fs__f input[type="number"] { padding-right: 46px !important; }

.hpc-fs__err { margin: 0 0 12px; font-size: 13px; font-weight: 600; color: var(--gz-color-primary, #D20210); }
.hpc-fs .hpc-fs__go { width: 100%; min-height: 54px; margin: 4px 0 0; border: 0; border-radius: 12px; background: var(--gz-color-dark, #111); color: #fff; font: inherit; font-size: 15px; font-weight: 700; cursor: pointer; }
.hpc-fs__go:active { opacity: .88; }
.hpc-fs__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 14px; }
.hpc-fs__clear, .hpc-fs__guide { background: none; border: 0; padding: 8px 0; font: inherit; font-size: 12.5px; text-decoration: underline; opacity: .55; cursor: pointer; color: inherit; min-height: 40px; }

/* ==========================================================================
   Search popup suggestions (hpc-sugg)
   ========================================================================== */

/* The theme sizes the search panel with
   `max-height: calc(100vh - var(--wp-admin--admin-bar--height))`. Logged out
   that calc is invalid and it falls back to 80vh, but signed in as an
   administrator it resolves to nearly the whole viewport — so the search reads
   as a full-screen white takeover for anyone running the shop, and as a panel
   for everyone else. Customer-facing spacing is not measured from the admin
   bar, so it is pinned to the viewport here and the panel sizes to content. */


/* An Add to cart in a search dropdown cannot work for a variable product. */
#search-modal .header-search__products .add_to_cart_button,
#search-modal .header-search__products .product_type_variable,
#search-modal .header-search__products .gz-quick-view-button,
#search-modal .header-search__products .gz-compare-button,
#search-modal .header-search__products .product-action,
#search-modal .header-search__products .gz-swatches { display: none !important; }

@media (max-width: 767.98px) {
  /* Stand the carousel down; a suggestion list should read like a list. */
  #search-modal .header-search__products .swiper.hpc-sugg-done,
  #search-modal .header-search__products.hpc-sugg-on ul.products { display: none !important; }
  .hpc-sugg { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
  .hpc-sugg__item + .hpc-sugg__item { border-top: 1px solid rgba(17,17,17,.08); }
  .hpc-sugg__link { display: flex; align-items: center; gap: 12px; min-height: 68px; padding: 8px 2px; text-decoration: none; color: inherit; }
  .hpc-sugg__img { flex: 0 0 56px; width: 56px; height: 56px; border-radius: 10px; object-fit: cover; background: var(--gz-color-light-grey, #f5f5f5); }
  .hpc-sugg__txt { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
  .hpc-sugg__name { font-size: 14.5px; font-weight: 600; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .hpc-sugg__price { font-size: 13.5px; opacity: .75; }
  .hpc-sugg__price del { opacity: .45; margin-right: 5px; }
  .hpc-sugg__price ins { text-decoration: none; color: var(--gz-color-primary, #D20210); font-weight: 650; }
  .hpc-sugg__chev { flex: 0 0 16px; opacity: .3; }
  .hpc-sugg__chev svg { width: 16px; height: 16px; display: block; }
  .hpc-sugg__all { display: flex; align-items: center; justify-content: center; min-height: 48px; margin-top: 10px; border: 1.5px solid rgba(17,17,17,.14); border-radius: 11px; font-size: 14px; font-weight: 650; text-decoration: none; color: inherit; }
}
.hpc-mm__tiles--solo { grid-template-columns: 1fr; }
.hpc-mm__chip--toggle { border-style: dashed; opacity: .7; cursor: pointer; background: none; font-family: inherit; }

/* ==========================================================================
   Product page corrections
   ========================================================================== */

/* Selected variation swatch.
   The plugin marks the choice with a 2px ring pressed right against the
   thumbnail, which reads as a heavy black box round the product rather than as
   a selection. A hairline ring held off the edge by a white gap says the same
   thing quietly, and lets the garment keep its own silhouette.

   The rule this replaces is `html body .wcboost-variation-swatches
   .wcboost-variation-swatches__item.hp-imgsw.selected` with !important, so
   matching it is not enough — the wrapper class is included to outrank it
   rather than relying on which stylesheet LiteSpeed happens to concatenate
   last. */
html body .wcboost-variation-swatches.hp-imgsw-wrap .wcboost-variation-swatches__item.hp-imgsw.selected {
  box-shadow: 0 0 0 2px #fff, 0 0 0 2.5px var(--gz-color-dark, #111) !important;
}
html body .wcboost-variation-swatches.hp-imgsw-wrap .wcboost-variation-swatches__item.hp-imgsw:hover {
  box-shadow: 0 0 0 2px #fff, 0 0 0 2.5px rgba(17,17,17,.28) !important;
}
/* Same treatment wherever the plugin renders image or colour swatches. */
html body .wcboost-variation-swatches--image .wcboost-variation-swatches__item.selected,
html body .wcboost-variation-swatches--color .wcboost-variation-swatches__item.selected {
  box-shadow: 0 0 0 2px #fff, 0 0 0 2.5px var(--gz-color-dark, #111) !important;
}

/* The wishlist heart is the last child of the add-to-cart group, and the
   delivery line between them is flex-basis:100%, so the heart was pushed onto
   a row of its own underneath "Dispatches in 1-2 business days" — reading as a
   stray button belonging to the shipping copy. Ordering puts it back beside
   Add to cart, where it is understood. */
.glozin-product-atc-group .product-featured-icons--single-product { order: 1; }
.glozin-product-atc-group .hpc-delivery { order: 2; }

/* "Designed In-House" removed from the product trust list. Verified as the
   fourth and last row on every product checked; the script below confirms it by
   heading text and corrects itself if that ever stops being true. */
/* Outranks `body.pdp-v-b .hp-pp-trustb .row { display: flex }`. The keep and
   drop rules come after the nth-child hide on purpose: at equal specificity the
   later rule wins, which is how the script's correction takes effect. */
body .hp-pp-trustb > .row:nth-child(4) { display: none !important; }
body .hp-pp-trustb > .row.hpc-trust-keep { display: flex !important; }
body .hp-pp-trustb > .row.hpc-trust-drop { display: none !important; }

/* ==========================================================================
   Loop product cards — swatches, clipping, and the recommendation grid
   ========================================================================== */

/* The selected-swatch fix in 1.6.0 only reached the product page. Cards in
   Recently Viewed, Related and the archives use the THEME's swatches
   (.product-variation-item), not the plugin's (.wcboost-variation-swatches__item),
   so they kept the heavy 2px ring. Same hairline-and-gap treatment here.

   Outranks `html body ul.products li.product .product-variation-items
   .product-variation-item.hp-imgsw.selected` (!important) by naming the
   wrapper class as well. */
html body ul.products li.product .product-variation-items.hp-imgsw-wrap .product-variation-item.hp-imgsw.selected {
  box-shadow: 0 0 0 2px #fff, 0 0 0 2.5px var(--gz-color-dark, #111) !important;
}
html body ul.products li.product .product-variation-items.hp-imgsw-wrap .product-variation-item.hp-imgsw:hover {
  box-shadow: 0 0 0 2px #fff, 0 0 0 2.5px rgba(17,17,17,.28) !important;
}
/* The row allowed 2px around a 2px ring — exactly flush. Give the ring room. */
ul.products li.product .product-variation-items.hp-imgsw-wrap { padding: 4px; margin: 12px -4px -4px; }

/* Swatch rows are injected after Swiper has measured the carousel, so the card
   grew past a container that is overflow:hidden and the swatches were sliced
   off at the bottom. `clip` on one axis lets the other stay visible, which
   `hidden` cannot do — the carousel keeps masking sideways and stops cropping
   downwards. */
.glozin-product-carousel.swiper,
.recently-viewed-products .swiper {
  overflow-x: clip;
  overflow-y: visible;
}

/* ---------- "Complete the Fit" is now the theme's own product grid.
   The cards are `content-product` output, so layout, hover actions and swatches
   are the theme's and need nothing from us. All that is left is the section's
   own chrome and the handful of places the grid sits in a different container
   from an archive. */
.hpc-recs { border-top: 0; }
.hpc-recs__grid.products { margin-bottom: 0; }
.hpc-recs__grid.products > li.product { margin-bottom: 30px; }

/* The one line this section has that Recently Viewed does not: why the piece is
   here. Sized and coloured to sit under the card, not compete with the title. */
.hpc-recs__grid .hpc-why {
  display: block; margin: 0 0 3px; font-size: 10px; font-weight: 500;
  letter-spacing: .09em; text-transform: uppercase; line-height: 1.4;
  color: var(--hpc-grey, #707076); opacity: .75;
}

/* ---------- Cart: the collapsed promo code and order note.
   Both were fully-expanded blocks competing with the checkout button — the note
   above the totals, the coupon a wide box under the items. Folded away, they
   read as what they are: available, not the next step. */
.hpc-fold { margin: 14px 0 0; }
.hpc-fold__btn {
  display: flex; align-items: center; gap: 6px; width: 100%; padding: 0;
  border: 0; background: none; font: inherit; font-size: 13px; font-weight: 500;
  color: var(--hpc-ink, #111); cursor: pointer; text-align: left;
}
.hpc-fold__btn:after {
  content: ""; width: 7px; height: 7px; margin-left: auto; flex: 0 0 7px;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px); transition: transform .18s ease;
}
.hpc-fold.is-open > .hpc-fold__btn:after { transform: rotate(225deg) translate(-2px, -2px); }
.hpc-fold__btn:focus-visible { outline: 2px solid var(--hpc-ink, #111); outline-offset: 3px; }
.hpc-fold__body { padding-top: 10px; }
.hpc-fold__body[hidden] { display: none; }
.hpc-fold .coupon { display: flex; gap: 8px; flex-wrap: wrap; margin: 0; width: 100%; }
.hpc-fold .coupon .input-text { flex: 1 1 130px; min-width: 0; height: 42px; }
.hpc-fold .coupon .button { flex: 0 0 auto; height: 42px; }
.hpc-fold .form-row { margin: 0; padding: 0; }
.hpc-fold textarea { width: 100%; min-height: 84px; }
.hpc-fold--note { border-top: 1px solid var(--gz-border-color, #ebebed); padding-top: 14px; }
/* "Save: $0.00" next to the subtotal advertises that the order saves nothing. */
html body .glozin-price-saved.hpc-zero-save { display: none !important; }

/* The cart's Complete the fit is the product page's grid, so it needs the page
   gutters the section has there but not inside the cart form. */
.hpc-recs--cart { padding: 40px 0 8px; max-width: none; border-top: 1px solid var(--gz-border-color, #ebebed); margin-top: 34px; }
.hpc-recs--cart .hpc-recs__head { margin-bottom: 22px; }

/* Quick view is a glance, not a second product page. Cap it to the viewport and
   let the panel itself scroll only if a very long description forces it, rather
   than the whole modal growing past the screen. */
html body #quick-view-modal .modal__container--quickview { max-height: calc(100vh - 40px); }
html body #quick-view-modal .modal__content--quickview { max-height: calc(100vh - 40px); overflow-y: auto; }
html body #quick-view-modal .hpc-offer { display: none !important; }