/** Shopify CDN: Minification failed

Line 65:10 Unexpected "!"
Line 65:84 Unterminated string token
Line 69:81 Unterminated string token

**/
.uppercase.tracking-widest.text-small.p-break-words {
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 0.08em !important;
}

/* ⛔ NO BORDER ON THE MEGA-MENU CARDS — owner, 7 Aug 2026: "delete the grey
   edges on the sale, new arrival and best sellers". This used to be
   `border: 1px solid rgba(41, 55, 128, 0.08)`, which drew a faint grey box
   around each of the three cards. The card still lifts on hover; only the
   outline is gone. Keep `border: 0` written out rather than deleting the line
   — the theme's own utility classes set a border on these cards, so removing
   the declaration lets the grey come back. */
.mega-menu-card {
  position: relative;
  border: 0 !important;
  border-radius: 14px;
  min-height: 140px;
  background: #ffffff !important;
  overflow: hidden;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.mega-menu-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 40px -16px rgba(41, 55, 128, 0.18);
}

/* ⛔ SAME LINE, SAME SIZE — owner, 10 Aug 2026: "make sure the text are in same
   line, i dont care how you fix it but dont make size smaller or bigger".

   The cards were never different heights. Both images are 800x800, both render
   329.4 x 121 with object-fit: cover. What differs is where the LETTERING sits
   inside each file, measured off the pixels:
     nh-bestsellers-card.png  ink rows 300-499, centre 399.5
     new_arrivals.webp        ink rows 275-477, centre 376.0
   a 23.5-row difference. At the cover scale of 0.4118 that is 9.7px on screen.

   ⛔ AND WHY object-position, NOT height. My first attempt at this set
   `max-height: 96px; object-fit: contain` on these images — which fixed nothing
   and SHRANK both wordmarks on the live shop ("size is to small, how can you
   even do sush an error?!"). Any rule touching height, max-height, width or
   `contain` resizes the artwork. object-position does not: under `cover` the
   scale is fixed by the width, so moving the crop window slides the lettering
   vertically at exactly the same size. That is the only lever that satisfies
   "same line" without touching "bigger or smaller".

   Only new_arrivals moves. With object-position 50% the visible window is
   source rows 253-547, centred on row 400 — which is where the best-sellers
   lettering already sits, so that card is correct and is left alone. Shifting
   new_arrivals by 23.5/506.2 of its crop slack = 4.64 points, to 45.36%, walks
   its lettering down onto the same line.

   Keyed on the FILENAME, not nth-of-type: the positional selectors that used to
   live in this file broke the moment a card was added or reordered. If either
   image is ever re-exported with the lettering centred, delete this rule — it
   is a correction for one specific file's padding, not a layout rule. */
   ⚠️ !important IS REQUIRED, and it is not laziness. The theme writes Shopify's
   focal point as an INLINE style on the image — `object-position: 50.0% 50.0%`
   — and an inline style beats any stylesheet rule. Tested without it first: the
   selector matched exactly 1 element and changed nothing.
   (The tidier fix is to set that image's focal point in the Shopify admin, which
   would move the inline value itself. If that is ever done, delete this rule —
   otherwise it will override the admin.) */
.mega-menu-card .promotion-header img[src*="new_arrivals"] {
  object-position: 50% 45.36% !important;
}

/* The card's own image lives in .promotion-header. Hiding it is what made the
   SALE wordmark invisible and left an empty third box: the labels below were
   painted by CSS instead, and only two of them existed. Show the real image. */
.mega-menu-card .promotion-header {
  display: block !important;
}

.mega-menu-card::before {
  position: absolute;
  left: 32px;
  top: 50%;
  transform: translateY(-50%);
  font-family: 'Poppins', sans-serif;
  font-size: 24px;
  font-weight: 700;
  color: #293780;
  letter-spacing: -0.01em;
  line-height: 1;
  pointer-events: none;
  z-index: 2;
}

/* ⛔ DO NOT PAINT CARD LABELS IN CSS.
   There used to be nth-of-type(1)::before{content:"Top Sellers"} and
   nth-of-type(2)::before{content:"New Arrivals"} here. Those are POSITIONAL:
   the moment a card was added or reordered the wording no longer matched the
   link underneath it, and any card past the second showed nothing. The label
   belongs to the card's own image and settings. */

.mega-menu-card .promotion-content {
  position: absolute;
  inset: 0;
  padding: 0;
  background: transparent !important;
  display: block !important;
  border: none !important;
  z-index: 1;
}

.mega-menu-card .promotion-content *,
.mega-menu-card .promotion-content *::before,
.mega-menu-card .promotion-content *::after {
  font-size: 0 !important;
  color: transparent !important;
  border: none !important;
  background: transparent !important;
  text-decoration: none !important;
  box-shadow: none !important;
}

.mega-menu-card .promotion-content a {
  display: block;
  width: 100%;
  height: 100%;
  border-bottom: 0 !important;
}

.mega-menu-card a.nav-link,
.mega-menu-card a.effect-inline,
.mega-menu-card a.border-b,
.mega-nav-promotions a.nav-link,
.mega-nav-promotions a.effect-inline,
.mega-nav-promotions a.border-b {
  border-bottom: 0 !important;
  border-bottom-color: transparent !important;
}

div:has(> .mega-nav-promotions) {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
}

.mega-nav a.nav-link.border-b,
.mega-nav a.effect-inline {
  border-bottom: 0 !important;
  border-bottom-color: transparent !important;
}
/* ============================================================= NH TREE MENU
   STORE LOCATOR: Thailand > Bangkok > Asok.

   ⛔ THE BUG, and it was never speed.
   Each fly-out panel is `absolute left-full` INSIDE its parent <li>, and that
   <li> is one row tall. The rows BELOW it are later siblings with
   `position: relative` and no z-index, so by the normal painting order they
   sit ON TOP of the panel. Only the first entry is reachable, because it lines
   up with the parent's own row; everything under it is covered by the next
   cities. Moving down the panel hovers the CITY behind it and the menu jumps
   back. Owner: "i cant choose a secound neigborhood, then it jump to the city
   left of it."

   ⚠️ THE PANEL CLASS IS `.child`, NOT `.sub-menu-toggle`.
   Two snippets render menus: header-megamenu-block.liquid uses
   `.sub-menu-toggle`, header-block-item.liquid — the one that actually renders
   this tree — uses `.child`, and `.grandchildlink child` one level deeper. An
   earlier attempt targeted the wrong class and silently did nothing.

   Raising the hovered row and its panel above the later siblings is the fix.
   No markup, no JavaScript, no change to how the menu is built.
   ========================================================================= */
li.relative:hover {
  z-index: 60;
}

li.relative:hover > .child,
li.relative:focus-within > .child {
  z-index: 61;
}

/* The panel begins exactly at the row's right edge — a few pixels of overlap so
   a diagonal path cannot fall through the join. */
li.relative:hover > .child::before {
  content: "";
  position: absolute;
  top: 0;
  left: -20px;
  width: 20px;
  height: 100%;
}

/* ============================================================================
   ⛔ MOVED HERE FROM nh-cards.css ON 7 Aug 2026 — BECAUSE NOTHING LOADS IT.
   assets/nh-cards.css is in the push list and ships to live, and no template,
   section or layout ever links it. Every rule in it is dead. That is the real
   reason the owner saw "30 mg / pouchCandyPABLO" run together and a quantity
   ticker that ignored the size I set: I fixed both in a stylesheet the browser
   never downloads. custom.css IS loaded on every page (verified in the live
   DOM: theme.css, customize.css, bss-custom.css, custom.css, config-header.css)
   and is already in the push list.
   preflight check 3e now fails any pushed .css that nothing references.
   ============================================================================ */

/* ——— product facts chips (product page) ———
   Three separate facts — strength, flavour, brand — each a link to its own
   collection. With no layout rule they rendered as one run-on string. */
.nh-pfacts{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;margin:0 0 14px}
.nh-pfacts__chip{display:inline-flex;align-items:center;padding:4px 10px;
  border:1px solid #e0e5f2;border-radius:99px;background:#f7f9fd;
  font-size:12.5px;line-height:1.2;color:#293780;white-space:nowrap}
.nh-pfacts__chip b{font-weight:700}
a.nh-pfacts__chip{color:#293780;text-decoration:none;
  transition:background .15s ease,border-color .15s ease}
a.nh-pfacts__chip:hover{background:#eef2fb;border-color:#c9d5ef}

/* ——— quantity ticker on product CARDS ———
   Owner: "why has the quantity ticker expands to a bigger size? its way to
   big". Measured at 58px tall with 36px buttons, heavier than the Add-to-cart
   button beneath it. It has no explicit size of its own — it grows from the
   button padding — so the size has to be stated here. */
#block-button-card-product div:has(> input[name="quantity"]){
  height:34px !important;max-width:118px;margin:0 auto;border-radius:10px}
/* ⛔ CENTRE THE ICON, NOT JUST THE BUTTON — owner, 9 Aug 2026:
   "look at the + and - ther are not same wide from the edges and middle".
   Measured: button 32px, icon 11px, left gap 0, right gap 21. The boxes were
   already symmetric (32 / 48 / 32) but the SVGs were pinned to the left of
   theirs, so the minus sat flush to the outer edge while the plus floated 21px
   off it and crowded the number.
   The `display:flex; align-items:center; justify-content:center` that fixed
   this lived in nh-cards.css — the stylesheet nothing loads. I moved the
   width and height into this file and left the centring behind. */
#block-button-card-product div:has(> input[name="quantity"]) > button[name="minus"],
#block-button-card-product div:has(> input[name="quantity"]) > button[name="plus"]{
  width:32px !important;min-width:32px !important;padding:0 !important;
  display:flex !important;align-items:center !important;justify-content:center !important}
#block-button-card-product div:has(> input[name="quantity"]) > button[name="minus"] svg,
#block-button-card-product div:has(> input[name="quantity"]) > button[name="plus"] svg{
  width:11px !important;height:11px !important}
#block-button-card-product input[name="quantity"]{font-size:13px !important;padding:0 !important}