/** Shopify CDN: Minification failed

Line 236:11 Unexpected "4"

**/
/* =====================================================================
   HL LONDON — TRUE QUICK-ADD (Shopability P0)
   Styles snippets/hl-quick-add.liquid. Loaded on index, collection and
   search — the three templates that render product-block grids.

   MOBILE-FIRST, and deliberately so: the control this replaces was
   hover-revealed and carried `@media (max-width: 767.98px) { display: none }`,
   which meant the single highest-value control on the site did not exist
   for the 97% of traffic that is mobile. Here the trigger is ALWAYS
   visible, at every width, and sized for a thumb before a cursor.

   It sits over the card image, so it costs the grid no vertical space —
   density and shopability are not traded against each other.
   ===================================================================== */

/* The control is a full-width strip across the bottom of the card image,
   not a floating dot. That is deliberate: .image-cont is overflow:hidden
   (it is what crops every card to the same 3:4), so a sheet anchored to a
   40px dot would be clipped the moment it grew wider than that dot. Giving
   the strip the width of the photograph gives the sheet the same width. */
.hlqa {
  position: absolute;
  left: 6px;
  right: 6px;
  bottom: 6px;
  z-index: 6;
  text-align: right;
  line-height: 0;
  pointer-events: none;   /* the strip must not eat taps meant for the card */
}

.hlqa__trigger,
.hlqa__sheet { pointer-events: auto; }

/* The card image container is the positioning context. Symmetry already
   makes .image-cont relative; stated here so the control cannot drift into
   the page if that ever changes. */
.product-block .image-cont { position: relative; }

/* ── The trigger ─────────────────────────────────────────────────────── */
.hlqa__trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid rgba(26, 20, 16, 0.14);
  border-radius: 50%;
  background: rgba(255, 253, 250, 0.94);
  color: #1a1410;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  box-shadow: 0 1px 6px rgba(26, 20, 16, 0.13);
  transition: background 0.15s ease, transform 0.15s ease, border-color 0.15s ease;
}

.hlqa__trigger:hover,
.hlqa__trigger:focus-visible {
  background: #1a1410;
  color: #fffdfa;
  border-color: #1a1410;
}

.hlqa__trigger:active { transform: scale(0.94); }

/* A drawn "+" rather than a glyph, so it cannot be restyled by the theme's
   font stack or clipped by an inherited line-height. */
.hlqa__glyph {
  position: relative;
  display: block;
  width: 15px;
  height: 15px;
  transition: transform 0.15s ease;
}

.hlqa__glyph::before,
.hlqa__glyph::after {
  content: '';
  position: absolute;
  background: currentColor;
}

.hlqa__glyph::before { left: 0; right: 0; top: 7px; height: 1.5px; }
.hlqa__glyph::after  { top: 0; bottom: 0; left: 7px; width: 1.5px; }

/* Open: the trigger becomes the close affordance. */
.hlqa--open .hlqa__trigger {
  background: #1a1410;
  color: #fffdfa;
  border-color: #1a1410;
}

.hlqa--open .hlqa__glyph { transform: rotate(45deg); }

/* Pressed / in flight. The drawer opening is the real confirmation; this is
   only so the tap does not feel inert on a slow connection. */
.hlqa--busy .hlqa__trigger,
.hlqa--busy .hlqa__size {
  opacity: 0.55;
  pointer-events: none;
}

/* ── The size sheet ──────────────────────────────────────────────────── */
.hlqa__sheet {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 50px;
  margin: 0;
  padding: 9px 9px 8px;
  background: rgba(255, 253, 250, 0.985);
  border: 1px solid rgba(26, 20, 16, 0.14);
  box-shadow: 0 6px 22px rgba(26, 20, 16, 0.18);
  text-align: left;
  line-height: normal;
}

.hlqa__sheet[hidden] { display: none; }

.hlqa__sheet-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 7px;
}

.hlqa__sheet-label {
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #6b6259;
  white-space: nowrap;
}

.hlqa__close {
  width: 22px;
  height: 22px;
  padding: 0;
  border: 0;
  background: none;
  color: #6b6259;
  font-size: 17px;
  line-height: 1;
  cursor: pointer;
}

.hlqa__sizes {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.hlqa__size {
  min-width: 40px;
  min-height: 36px;
  padding: 4px 8px;
  border: 1px solid rgba(26, 20, 16, 0.22);
  background: #fff;
  color: #1a1410;
  font-size: 12px;
  letter-spacing: 0.02em;
  line-height: 1.2;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}

.hlqa__size:hover,
.hlqa__size:focus-visible {
  background: #1a1410;
  color: #fffdfa;
  border-color: #1a1410;
}

/* Out of stock in that size. Shown, not removed: a struck-through 8 tells a
   shopper the piece runs to an 8 and is gone, which a missing pill does not. */
.hlqa__size--out {
  opacity: 0.34;
  text-decoration: line-through;
  cursor: not-allowed;
}

/* Narrow phones. The strip already tracks the image width, so only the
   control sizes change; 40px is still a comfortable thumb target and it
   leaves the photograph readable behind it. */
@media (max-width: 480px) {
  .hlqa { left: 5px; right: 5px; bottom: 5px; }
  .hlqa__trigger { width: 40px; height: 40px; }
  .hlqa__sheet { bottom: 46px; padding: 8px 7px 7px; }
  .hlqa__sheet-label { font-size: 9px; letter-spacing: 0.08em; }
  .hlqa__sizes { gap: 4px; }
  .hlqa__size { min-width: 33px; min-height: 32px; font-size: 11px; padding: 3px 5px; }
}

/* ── The homepage cells ──────────────────────────────────────────────────
   hl-homepage-premium.css hides the OLD .quick-add-overlay and
   .quickbuy-toggle on the index template; nothing there matches .hlqa, and
   that is intentional - 82.9% of homepage landers never reach a product
   page, so the cell has to be able to sell.

   snippets/hl-home-cell.liquid now wraps its link in a .hl-cell__media DIV.
   assets/home.css already gives that box position:relative and
   overflow:hidden, so the strip and the sheet behave exactly as they do on
   a collection card; the link just has to fill the box it used to be. */
.hl-cell__media-link {
  display: block;
  width: 100%;
  height: 100%;
}

/* MEASURED while placing the control, and a real pre-existing defect that
   the control made visible rather than caused.

   .hl-featured .hl-grid and .hl-cats .hl-grid are 12-column grids with a
   36px gap. On mobile every child is forced to `grid-column: 1 / -1`, so a
   child spans twelve 0px tracks plus ELEVEN 36px gaps = 396px inside a
   350px grid. The three lead photographs of the collage and the three
   category tiles were each 46px wider than the page, and .hl-editorial's
   overflow-x:clip was quietly cutting 26px off the right of every one of
   them. (The usual suspect, a grid item's min-content minimum, is not the
   cause here: the tracks compute to 0px and the overflow is pure gutter.)

   Zeroing the COLUMN gap on those two grids only - the row gap, and every
   other .hl-grid on the page, are untouched - puts the cell back inside
   the page. It is also what lets the quick-add sit on the photograph
   instead of 19px past the right edge of the screen. */
   RETIRED 4 September 2026 — and this is why it can go rather than being
   left in place "just in case".

   The overflow above was a consequence of ONE thing: on mobile every grid
   child was forced to `grid-column: 1 / -1`, so a single card spanned all
   twelve 0px tracks and, with them, eleven 36px gutters. assets/hl-home-mobile.css
   replaces that fold entirely — those two grids are now
   `grid-template-columns: 1fr 1fr` with a 2px gap and each child spans ONE
   track, so a child can span at most one gutter and the 396px-in-350px
   arithmetic cannot arise. The zeroing is not just unnecessary now, it is
   actively wrong: it was the last rule on the page touching these grids
   (this file loads after hl-home-mobile.css) and it was silently removing
   the 2px seam from the collage and the category tiles while every other
   band on the page kept it — MEASURED as `gap: 2px 0px` and 195px tracks
   there against 2px and 194px everywhere else.

   Verified after removal: no horizontal overflow at 390px
   (document.scrollWidth == 390), which is the condition the rule existed
   to protect. */

/* The homepage cells are larger and further apart than grid cards, so the
   control can be a touch more generous without crowding the photograph. */
.hl-cell .hlqa {
  left: 10px;
  right: 10px;
  bottom: 10px;
}

@media (max-width: 480px) {
  .hl-cell .hlqa { left: 7px; right: 7px; bottom: 7px; }
}

@media (prefers-reduced-motion: reduce) {
  .hlqa__trigger,
  .hlqa__glyph,
  .hlqa__size { transition: none; }
  .hlqa__trigger:active { transform: none; }
}