/** Shopify CDN: Minification failed

Line 91:0 Unexpected "}"

**/
/* ---------------------------------------------------------------------------
   Protekt "Buy 2, get the Shorts free" offer UI.

   Used ONLY by templates/product.protekt-offer.json. Every rule is scoped to
   a .protekt-offer* root, or gated behind body:has(.protekt-offer) — which is
   only ever true on this template — so nothing here can reach the live
   product.protekt template even though both share the same section file.

   Design language measured off the rendered live PDP, NOT settings_data.json
   (which is stale: it declares Inter and badge_corner_radius:100, but the page
   actually renders Helvetica Custom and every product-UI control at radius 0).
   What the live page really does:
     - ATC button   #222222, white, 18px, UPPERCASE, padding 16px 32px, radius 0
     - size button  #f7f7f7, 1px solid #000, 14px, radius 0
     - option title UPPERCASE 14px, rgba(0,0,0,.81)
     - fabric badge #222222 fill, 1px solid #efefef, radius 0
   So: squared corners throughout, uppercase labels, no pills. The only
   pill-shaped things on the whole site are the cart bubble and the shipping
   banner, neither of which is product UI.

   Red is #b80600 — the same red as the approved 10-reasons landing page, so
   the campaign reads as one thing rather than two.
   --------------------------------------------------------------------------- */
.protekt-offer,
.protekt-breakdown,
.protekt-sticky {
  --protekt-red: #b80600;
  --protekt-ink: #222222;
  --protekt-muted: rgba(0, 0, 0, .56);
  --protekt-line: #e4e4e4;
  --protekt-wash: #fafafa;
  font-family: inherit;
}

/* --- Offer bar: claim + countdown ---------------------------------------- */
.protekt-offer {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 8px 16px;
  /* The details column already puts a 21px flex gap above this block; the
     bar's own top margin stacked on that and left a visible hole under the
     price. Pulled back so the offer sits close to the price it qualifies. */
  margin-block: -8px 6px;
  padding: 8px 12px;
  border: 1px solid var(--protekt-red);
  background: #fff;
}
/* One line at mobile: the claim shrinks, the clock never does. Sizes are set
   so the longest real string ("Buy 2, get the Shorts free" + "ends in" +
   00:00:00) still fits the 379px details column at 430px. */

/* No nowrap, no ellipsis. Truncating the offer itself ("BUY 2, GET THE
   SHORTS F...") is never acceptable — if the line runs out of room the claim
   wraps to a second line instead. */
.protekt-offer__claim {
  color: var(--protekt-red);
  /* 12px, not 13: the details column is ~365px on desktop too, so the claim
     has about 207px beside the countdown there — 13px pushed it to a second
     line at 1440. */
  font-size: 12px; font-weight: 700; line-height: 1.25;
  letter-spacing: .02em; text-transform: uppercase;
}
.protekt-offer__timer {
  display: inline-flex; align-items: baseline; gap: 8px; white-space: nowrap;
  color: var(--protekt-muted);
  font-size: 12px; line-height: 1.25; text-transform: uppercase; letter-spacing: .02em;
}
.protekt-offer__clock {
  display: inline-flex; align-items: baseline; gap: 1px;
  color: var(--protekt-red);
  font-weight: 700; font-size: 15px;
  font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1;
}
.protekt-offer__clock span[data-fl-unit] { min-width: 2ch; text-align: center; }
.protekt-offer__sep { opacity: .5; }

@media (max-width: 749px) {
  /* wrap, not nowrap: one line whenever it fits, two when it can't, never a
     clipped claim. The timer stays whole — a broken clock reads as a bug. */
  .protekt-offer { flex-wrap: wrap; gap: 4px 10px; padding: 7px 10px; }
  .protekt-offer__claim { flex: 1 1 auto; min-width: 0; font-size: 11px; letter-spacing: 0; }
  .protekt-offer__timer { flex: none; font-size: 10px; gap: 5px; }
  .protekt-offer__clock { font-size: 13px; }
  .protekt-offer__label-long { display: none; }
}

}
}


/* --- Variant picker: order, short labels, free marker -------------------
   The product's option order is Shorts, Top, Trouser, but the offer reads
   "buy the top and trouser, the shorts is free" — so the shorts must come
   last. Reordering the options themselves is product data and would change
   the live page, so it's done visually here. Selectors key off
   data-option-id, which variant-main-picker.liquid builds by handleizing the
   option name (the same 'shorts'/'top'/'trouser' test it uses for size
   guides), so this survives the fieldsets being reordered in admin.

   The labels themselves are shortened by protekt-variant-labels.liquid; this
   only has to keep the legend on one line once they are.                  */
/* Compact the size pickers. Measured on the offer page: the three groups
   occupied 428px of the fold — 47px-tall buttons (11.2px block padding) with
   8px row gaps and, at one point, a 28px gap between groups. That pushed the
   add-to-cart button to y1350 at 430px. Tightened to ~325px without touching
   the shared component: shorter buttons, tighter rows, and just enough space
   between groups to keep each label attached to the grid below it. */
body:has(.protekt-offer) .variant-picker__form { display: flex; flex-direction: column; gap: 26px; }

/* The product's option order is Shorts, Top, Trouser, but the offer reads
   "buy the top and trouser, the shorts is free" — so the shorts must come
   last. Reordering the options themselves is product data and would change
   the live page, so it's done visually here. Keys off data-option-id, which
   variant-main-picker.liquid builds by handleizing the option name (the same
   shorts/top/trouser test it uses for size guides), so it survives the
   fieldsets being reordered in admin. */
body:has(.protekt-offer) .variant-picker__form > [data-option-id*="top"] { order: 1; }
body:has(.protekt-offer) .variant-picker__form > [data-option-id*="trouser"] { order: 2; }
body:has(.protekt-offer) .variant-picker__form > [data-option-id*="shorts"] { order: 3; }
body:has(.protekt-offer) .variant-option { gap: 6px; }
body:has(.protekt-offer) .variant-option__button-label { padding-block: 6px; }
/* A fieldset's legend renders outside the fieldset's content box, so neither
   the 6px grid gap nor a margin on the legend puts any space between the
   label row and the first row of sizes — measured 0px, with the FREE chip on
   Shorts sitting directly on the buttons. Padding on the fieldset is what
   actually separates a legend from its content. */
body:has(.protekt-offer) .variant-option { padding-top: 10px; }

/* Shopify marks a variant selected on load, so every size arrived looking
   chosen while the button asked the customer to choose one. Until an option
   has actually been picked, its preselected swatch is shown in the unselected
   treatment (#fff on #eee, measured off this theme) so the prompt and the
   controls agree. protekt-atc-state.liquid owns the data-protekt-chosen flag. */
/* !important is required, not lazy: base.css sets this state with
   `background-color: … !important; border: … !important` on
   .variant-option__button-label:has(:checked), so a plain declaration loses
   however specific it is. */
body:has(.protekt-offer) [data-protekt-chosen="false"] .variant-option__button-label:has(input:checked) {
  background-color: #fff !important;
  border-color: #eee !important;
}

/* Legend was wrapping the size-guide link's arrow onto its own line at 430px.
   Title shrinks, link never does. */
body:has(.protekt-offer) .variant-option__legend-container {
  flex-wrap: nowrap; align-items: center; gap: 8px;
}
body:has(.protekt-offer) .variant-option__title {
  min-width: 0; display: flex; align-items: center; gap: 8px;
  /* Bolder than the theme's 400 so each group reads as its own step. */
  font-weight: 700;
}
body:has(.protekt-offer) .bundle-size-guide-link { flex: none; white-space: nowrap; }

/* The FREE badge. Alignment is done by giving the chip the same line box as
   the label text rather than a fixed height centred by eye: both flex items
   then share one box and cannot drift. Measured against the rendered text
   range, not guessed — see the note on --protekt-tag-h below. */
.protekt-free-tag {
  flex: none;
  align-self: center;
  display: inline-flex;
  align-items: center;
  padding: 0 7px;
  /* Back to the size that read best. The label's letters are 10.61px tall
     (14px Helvetica Custom: cap ascent 10.32 + 0.29 overshoot) inside a 16px
     content box, so "match the text" has two answers and both extremes fail:
     10.61px crushes the chip's own text, 13px still reads tight. 18px gives
     FREE room to breathe, which matters more than shaving the last 2px off
     the chip's height. */
  height: 18px;
  background: #b80600;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  line-height: 1;
}

/* --- Sticky offer bar (mobile) -------------------------------------------
   The theme ships no sticky add-to-cart, so this adds one rather than
   restyling anything shared. It never duplicates cart logic: the button
   forwards the click to the real add-to-cart button in the product form.
   Button styling mirrors the measured ATC: #222, white, uppercase, radius 0. */
.protekt-sticky {
  position: fixed; inset-inline: 0; bottom: 0; z-index: 30;
  display: none; align-items: center; gap: 12px;
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
  background: #fff; border-top: 1px solid var(--protekt-line);
  box-shadow: 0 -6px 20px rgb(0 0 0 / 8%);
  transform: translateY(100%); transition: transform 220ms ease;
}
.protekt-sticky[data-visible="true"] { transform: translateY(0); }
.protekt-sticky__text { flex: 1 1 auto; min-width: 0; line-height: 1.25; }
/* Nothing in this bar may be clipped: at 390 the button's nowrap label plus
   the note exceeded the row, so the label is set a size down with tighter
   padding and the note is kept short rather than truncated. */
.protekt-sticky__price { font-size: 15px; font-weight: 700; color: var(--protekt-ink); }
/* No ellipsis: the note is short enough to fit, and a truncated offer line
   ("Protekt - Padded Shorts include…") is worse than none. */
.protekt-sticky__note {
  display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .02em;
  color: var(--protekt-red);
}
.protekt-sticky__btn {
  flex: none; padding: 13px 14px; border: 0; cursor: pointer;
  white-space: nowrap;
  background: var(--protekt-ink); color: #fff;
  font-family: inherit; font-size: 12px; font-weight: 400;
  text-transform: uppercase; letter-spacing: .01em;
}
@media (max-width: 749px) { .protekt-sticky { display: flex; } }
@media (prefers-reduced-motion: reduce) { .protekt-sticky { transition: none; } }

/* --- Incomplete-selection prompt ----------------------------------------
   Set by protekt-atc-state.liquid when the customer clicks Add to cart before
   choosing every size. The group it scrolls to is briefly outlined so it's
   obvious which one needs attention. Accelerated checkout is hidden until the
   selection is complete because it posts directly and can't be intercepted. */
[data-protekt-prompt] {
  outline: 2px solid #b80600;
  outline-offset: 6px;
}
@media (prefers-reduced-motion: no-preference) {
  [data-protekt-prompt] { transition: outline-color 200ms ease; }
}
.protekt-selection-incomplete .accelerated-checkout,
.protekt-selection-incomplete shopify-accelerated-checkout,
.protekt-selection-incomplete [data-shopify="dynamic-checkout-cart"] { display: none !important; }

/* --- Reclaim the mobile fold ---------------------------------------------
   Measured at 430x900: the media gallery ran 111->630, so 519px (58% of the
   viewport) was gone before the title, and the offer bar landed at y782 —
   only just on screen. Capping the main image pulls the offer, the size
   pickers and the add-to-cart up the page. object-fit:contain so the cap
   letterboxes the shot instead of cropping the product out of it.
   Scoped to this template and to mobile, where the section is used. */
@media (max-width: 749px) {
  body:has(.protekt-offer) .mobile-product-media__main,
  body:has(.protekt-offer) .mobile-product-media__main-slide { max-height: 38vh; }
  body:has(.protekt-offer) .mobile-product-media__main-slide img {
    max-height: 38vh; height: 100%; width: 100%; object-fit: contain;
  }
  body:has(.protekt-offer) .mobile-product-media__thumb img { padding: 6px; max-width: 68px; }
  body:has(.protekt-offer) .protekt-offer { margin-block: -9px 4px; }
}

/* The guarantee block carries its own 12px block margins on top of the
   column's 21px gap, which read as a bigger step than any other section. */
body:has(.protekt-offer) .guarantee-block { margin-block: 0; }

/* --- Bestseller badge -----------------------------------------------------
   Sits in the rating row beside the combined review count. Same squared,
   uppercase treatment as the rest of the store's product UI (measured: every
   product control renders at radius 0), in the theme's own ink rather than
   the offer red, so it reads as a fact about the product and not as part of
   the promotion. */
.protekt-rating-row {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.protekt-bestseller {
  display: inline-flex; align-items: center;
  padding: 0 8px; height: 18px;
  background: #222222; color: #fff;
  font-size: 10px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; line-height: 1; white-space: nowrap;
}

/* --- Grid track sizing -----------------------------------------------------
   .product-information__grid uses subgrid, so its column sizes to the
   max-content of what's inside it. The offer bar's claim and clock are both
   white-space:nowrap, which made that max-content 401px — wider than a 390px
   viewport — and gave the whole document a horizontal scroll. (430px was fine,
   which is why this only showed up on a 390px-class phone.)

   min-width:0 lets the details column resolve below its content's max-content,
   which is the fix that keeps the offer bar on one line. Letting the claim wrap
   also clears the overflow but costs a second line, which the bar is
   deliberately sized to avoid. */
body:has(.protekt-offer) .product-details { min-width: 0; }

/* --- Footer trust bar -----------------------------------------------------
   Hidden on this template only. The bar lives in footer_new, a GLOBAL footer
   section that also renders on the homepage and every other page, so removing
   the block itself would strip it from the whole site including live. Scoping
   it behind body:has(.protekt-offer) takes it off this page and nowhere else.
   It also contradicted the offer here: "Free shipping Over £139.99" sits above
   this bundle's £99.99, so it read as a threshold the customer had missed. */
body:has(.protekt-offer) .footer-new-top { display: none; }