/** Shopify CDN: Minification failed

Line 1140:1 Expected "}" to go with "{"

**/
/* ==========================================================================
   joinshift.css  —  makes a stock Dawn theme read like joinshift.pl
   --------------------------------------------------------------------------
   Requires joinshift-tokens.css to be loaded FIRST. Both must load AFTER
   Dawn's base.css. See JAK-WGRAC.md.

   Plain .css — no Liquid in this file, so it can be dropped into assets/ as
   joinshift.css with no rename.

   HOW THIS FILE IS WRITTEN
   ------------------------
   Dawn's markup changes between versions (2.x, 10.x, 13.x+ differ a lot).
   So, in order of preference:
     1. Override Dawn's own CSS variables. Cheapest and most version-proof.
     2. Target class names that are part of Dawn's public surface and have
        been stable for years (.button, .card, .field__input, .price, ...).
     3. Where a class name is NOT something to bet on, the rule is marked
        UNVERIFIED and paired with a structural fallback that does not depend
        on the class existing. A robust fallback beats a confident guess.

   !important is used sparingly and only where Dawn's own specificity or its
   theme-editor-generated inline styles would otherwise win. Each use is
   deliberate.
   ========================================================================== */


/* ==========================================================================
   1. HAND THE TOKENS TO DAWN'S OWN VARIABLES
   --------------------------------------------------------------------------
   READ YOUR THEME'S :root FIRST. Dawn's variable names and, more
   importantly, their FORMAT changed across versions:

     - Colour variables are RGB TRIPLETS, not hex:  --color-button: 18,18,18;
       consumed as rgba(var(--color-button), var(--alpha-button-background)).
       Putting a hex value in one of these breaks it silently. That is
       exactly why --js-accent-rgb in the tokens file is comma-separated —
       it can be handed straight over.
     - Older Dawn (~2.x-9.x) puts colours on .color-background-1 / .gradient.
       Newer Dawn (~10+) uses .color-scheme-1 ... .color-scheme-5.
       Both selectors are listed below; the one your theme does not have is
       simply inert.
     - Some builds have --buttons-radius / --buttons-radius-outset, some do
       not. They are set here AND the radius is also set directly on .button
       further down, so pills happen either way.
   ========================================================================== */
:root,
.color-background-1, .color-background-2,
.color-inverse, .gradient,
.color-scheme-1, .color-scheme-2, .color-scheme-3,
.color-scheme-4, .color-scheme-5 {
  /* Accent — one source, the tokens file. */
  --color-base-accent-1: var(--js-accent-rgb);
  --color-base-accent-2: var(--js-accent-rgb);
  --color-accent-1:      var(--js-accent-rgb);
  --color-accent-2:      var(--js-accent-rgb);
  --color-button:        var(--js-accent-rgb);
  --color-button-text:   255, 255, 255;
  --alpha-button-background: 1;
  --alpha-button-border: 1;

  /* Radii. Present in most Dawn builds; harmless where absent. */
  --buttons-radius:         var(--js-r-pill);
  --buttons-radius-outset:  var(--js-r-pill);
  --inputs-radius:          var(--js-r-input);
  --inputs-radius-outset:   var(--js-r-input);
  --media-radius:           var(--js-r-card);
  --card-corner-radius:     var(--js-r-card);
  --popup-corner-radius:    var(--js-r-modal);
  --text-boxes-radius:      var(--js-r-card);
  --variant-pills-radius:   var(--js-r-pill);

  /* Borders — the site uses hairlines, not boxes. */
  --inputs-border-width: 1.5px;
  --inputs-border-opacity: 1;
  --card-border-width: 1px;
  --card-shadow-opacity: 0;
  --text-boxes-border-width: 1px;

  /* Type families. Dawn builds these from font_picker settings; pointing the
     variables at our stack is cleaner than fighting every selector. */
  --font-body-family: var(--js-font-sans);
  --font-heading-family: var(--js-font-sans);
  --font-body-weight: var(--js-fw-regular);
  --font-body-weight-bold: var(--js-fw-semi);
  --font-heading-weight: var(--js-fw-semi);
  --font-body-style: normal;
  --font-heading-style: normal;
  --font-heading-scale: 1;

  /* Layout width — the site caps content at 1440px. */
  --page-width: var(--js-page-max);
}


/* ==========================================================================
   2. GLOBAL TYPE
   --------------------------------------------------------------------------
   The site forces one family everywhere with `* { font-family: ... }`. That
   is heavy-handed but it is what makes the site look consistent, and Dawn
   sections carry a lot of inherited font declarations. Applied here with the
   same bluntness, then the display serif is re-allowed for <em> only.
   ========================================================================== */
body,
button, input, select, textarea, optgroup,
.h0, .h1, .h2, .h3, .h4, .h5,
h1, h2, h3, h4, h5, h6 {
  font-family: var(--js-font-sans) !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  color: var(--js-ink);
  background: var(--js-white);
  font-size: var(--js-fs-body);
  line-height: var(--js-lh-body);
  letter-spacing: 0;
}

/* Rhymes italic for emphasis inside headlines — the site's signature move.
   Until Rhymes ships as woff2, --js-font-display resolves to a system serif
   italic (see the tokens file). */
h1 em, h2 em, h3 em,
.h0 em, .h1 em, .h2 em, .h3 em,
.js-rh {
  font-family: var(--js-font-display) !important;
  font-style: italic !important;
  font-weight: var(--js-fw-medium);
  letter-spacing: 0;
}

/* Headings. Dawn's .h0-.h5 utility classes are public and stable. */
.h0 { font-size: var(--js-fs-h1);  line-height: var(--js-lh-h1); letter-spacing: var(--js-ls-h1); font-weight: var(--js-fw-semi); color: var(--js-black); }
h1, .h1 { font-size: var(--js-fs-h2); line-height: var(--js-lh-h2); letter-spacing: var(--js-ls-h1); font-weight: var(--js-fw-bold); color: var(--js-ink); }
h2, .h2 { font-size: var(--js-fs-h3); line-height: var(--js-lh-h1); letter-spacing: var(--js-ls-h1); font-weight: var(--js-fw-semi); color: var(--js-black); }
h3, .h3 { font-size: var(--js-fs-h4); line-height: var(--js-lh-tight); letter-spacing: var(--js-ls-title); font-weight: var(--js-fw-semi); }
h4, .h4,
h5, .h5 { font-size: var(--js-fs-title); line-height: var(--js-lh-title); letter-spacing: var(--js-ls-title); font-weight: var(--js-fw-semi); }

h1, h2, h3, .h0, .h1, .h2 { text-wrap: balance; }

/* Body copy inside rich text. .rte is Dawn's rich-text wrapper class and is
   safe to target. */
.rte p,
.rte li {
  color: var(--js-body);
  font-size: var(--js-fs-body);
  line-height: var(--js-lh-body);
}
.rte a:not(.button) {
  color: var(--js-ink);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: rgba(var(--js-accent-rgb), 0.5);
}
.rte a:not(.button):hover { color: var(--js-accent); }

/* Section headings above collection/product grids. */
.title,
.title-wrapper h2,
.section-header h2 {
  font-size: var(--js-fs-h3);
  line-height: var(--js-lh-h1);
  letter-spacing: var(--js-ls-h1);
  font-weight: var(--js-fw-semi);
  color: var(--js-black);
}


/* ==========================================================================
   3. BUTTONS — 999px pills in the accent
   --------------------------------------------------------------------------
   Dawn's .button is public and has been stable. Two details matter:

   a) Dawn draws the button's border AND its focus ring with a ::after
      pseudo-element that has its own border-radius. If only .button is
      rounded you get a pill with a rectangle outlined inside it. The
      ::after rule below is required. (Present in Dawn 2.x through 13.x. If
      a future build drops it, the rule is inert, not harmful.)
   b) Dawn gives .button a min-width of ~12rem and min-height ~4.5rem. The
      site's buttons are padding-sized, so both are released.

   The site's hover behaviour, verbatim from .poll-votebar / .partners-cta:
      hover  -> translateY(-2px) + a deeper shadow
      :active -> scale(0.96)  (press feedback overrides the lift)
      and the trailing arrow <span> slides 4px right on hover.
   .lf-submit and .su-cta additionally darken the fill to #d8481a; that is
   folded in as --js-accent-hover.
   ========================================================================== */
.button,
.shopify-challenge__button,
.customer button,
button.shopify-payment-button__button--unbranded,
.shopify-payment-button__button--branded {
  border-radius: var(--js-r-pill) !important;
  min-width: 0;
  min-height: 0;
  padding: 15px 30px;
  font-family: var(--js-font-sans);
  font-size: 16px;
  font-weight: var(--js-fw-semi);
  letter-spacing: var(--js-ls-title);
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition: transform var(--js-t-base) ease,
              box-shadow var(--js-t-base) ease,
              background-color var(--js-t-base) ease,
              color var(--js-t-base) ease;
}

/* Dawn's border/focus pseudo-element — must follow the pill. */
.button::after,
.button::before,
.shopify-payment-button__button--unbranded::after {
  border-radius: var(--js-r-pill) !important;
}

/* Primary: filled accent pill. */
.button:not([disabled]),
.button--primary,
.button--full-width,
button.shopify-payment-button__button--unbranded,
.shopify-payment-button__button--branded,
.product-form__submit {
  background-color: var(--js-accent);
  color: var(--js-white);
  border: none;
  box-shadow: var(--js-sh-btn);
}

.button:not([disabled]):hover,
button.shopify-payment-button__button--unbranded:hover,
.product-form__submit:hover {
  background-color: var(--js-accent-hover);
  color: var(--js-white);
  transform: translateY(var(--js-lift));
  box-shadow: var(--js-sh-btn-hover);
}

.button:not([disabled]):active,
.product-form__submit:active,
button.shopify-payment-button__button--unbranded:active {
  transform: scale(var(--js-press));
  box-shadow: var(--js-sh-btn);
}

/* The trailing arrow slide. Wrap arrows in <span> to get it, as the site
   does (`<a class="button">Kup teraz <span>-></span></a>`). */
.button > span { transition: transform var(--js-t-base) ease; display: inline-block; }
.button:hover > span { transform: translateX(4px); }

/* Secondary / outline: white pill, hairline border, border darkens on hover.
   Lifted from .su-outline-link. */
.button--secondary,
.button--tertiary {
  background-color: var(--js-white) !important;
  color: var(--js-ink) !important;
  border: 1.5px solid var(--js-border) !important;
  box-shadow: none;
  padding: 13px 24px;
  font-size: 14px;
}
.button--secondary:hover,
.button--tertiary:hover {
  background-color: var(--js-white) !important;
  border-color: #999 !important;
  color: var(--js-ink) !important;
  transform: translateY(var(--js-lift));
  box-shadow: none;
}

/* Disabled / sold out. The site uses a lightened accent for a disabled CTA
   (.su-cta:disabled) and a neutral grey for "not ready yet" (.lf-waiting).
   Sold-out reads better neutral. */
.button[disabled],
.button[aria-disabled='true'],
.product-form__submit[disabled] {
  background-color: rgba(0, 0, 0, 0.10) !important;
  color: rgba(0, 0, 0, 0.45) !important;
  box-shadow: none !important;
  transform: none !important;
  cursor: not-allowed;
}

/* Focus. Dawn ships both .focus-visible (its JS polyfill class) and native
   :focus-visible depending on version — both are covered. */
.button:focus-visible,
.button.focus-visible,
.field__input:focus-visible,
.select__select:focus-visible,
a:focus-visible {
  outline: none;
  box-shadow: var(--js-focus-ring), var(--js-sh-btn);
}

/* Text-only links styled as the site's quiet CTA. */
.link,
.link--text {
  color: var(--js-ink);
  text-underline-offset: 3px;
  text-decoration-color: rgba(var(--js-accent-rgb), 0.5);
}
.link:hover { color: var(--js-accent); }


/* ==========================================================================
   4. SECTION RADII AND DARK CANVASES
   --------------------------------------------------------------------------
   The site's signature structure: a section is a full-bleed plate whose TOP
   two corners are rounded clamp(28px, 3vw, 44px) and which casts an upward
   shadow, so it reads as sliding over the section above it. Bottom corners
   stay square.

   .shopify-section is generated by the platform for every section and is the
   most reliable hook there is. Opt in per section by adding the class
   `js-plate` (light) or `js-plate-dark` (dark) to the section's own
   "Custom CSS class" / wrapper — or add it to a section in the theme editor
   under Section settings > Custom CSS if your Dawn version offers it.
   ========================================================================== */
.js-plate,
.shopify-section.js-plate > * {
  border-top-left-radius: var(--js-r-section);
  border-top-right-radius: var(--js-r-section);
  box-shadow: var(--js-sh-plate-light);
  background: var(--js-white);
  overflow: hidden;
}

.js-plate-dark,
.shopify-section.js-plate-dark > * {
  border-top-left-radius: var(--js-r-section);
  border-top-right-radius: var(--js-r-section);
  box-shadow: var(--js-sh-plate-dark);
  background: var(--js-dark);
  color: var(--js-white);
  overflow: hidden;
}

/* Everything inside a dark plate flips to the on-dark ramp. */
.js-plate-dark h1, .js-plate-dark h2, .js-plate-dark h3,
.js-plate-dark .h0, .js-plate-dark .h1, .js-plate-dark .h2,
.js-plate-dark .title { color: var(--js-white); }
.js-plate-dark .rte p,
.js-plate-dark p { color: var(--js-on-dark-1); }
.js-plate-dark .js-eyebrow { color: var(--js-on-dark-2); }

/* Utility for a plain dark band without the rounded top. */
.js-dark-canvas {
  background: var(--js-dark-alt);
  color: var(--js-white);
}

/* Section vertical rhythm and gutter. Dawn's own section padding comes from
   per-section theme settings (padding_top / padding_bottom sliders), so it
   is NOT overridden here — fighting the theme editor is a bad trade. Set
   those sliders to roughly 100 / 100 to land on the site's rhythm.
   These two rules only align the content gutter. */
.page-width {
  max-width: var(--js-page-max);
  padding-left: var(--js-pad);
  padding-right: var(--js-pad);
}
.page-width--narrow {
  max-width: 900px;
}


/* ==========================================================================
   5. CARDS (collection grid, related products, blog)
   --------------------------------------------------------------------------
   .card, .card-wrapper, .card__inner, .card__content, .card__heading,
   .card__information and .card__media are Dawn's public card API and are
   safe. The hover on the site is a 4px rise plus the border turning accent
   (.plex-card), which translates well to a product card.

   The attribute-based fallback (.card-wrapper > [class*='card']) catches
   builds where the inner element is named differently.
   ========================================================================== */
.card,
.card-wrapper,
.card__inner,
.card-wrapper > [class*='card'] {
  border-radius: var(--js-r-card);
}

.card__inner,
.card__media,
.media,
.card__media img {
  border-radius: var(--js-r-card);
  overflow: hidden;
}

.card-wrapper {
  transition: transform var(--js-t-slow) var(--js-ease);
}
.card-wrapper:hover {
  transform: translateY(-4px);
}

/* Card with a visible container (Dawn's "card" style rather than "standard"). */
.card--card,
.card--standard .card__inner {
  background: var(--js-surface);
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: none;
}
.card--card:hover,
.card-wrapper:hover .card--standard .card__inner {
  border-color: var(--js-accent-55);
}

/* Card typography. */
.card__heading,
.card__heading a,
.card-information .card__heading {
  font-family: var(--js-font-sans);
  font-size: var(--js-fs-title);
  font-weight: var(--js-fw-semi);
  line-height: var(--js-lh-title);
  letter-spacing: var(--js-ls-title);
  color: var(--js-ink);
  text-decoration: none;
}
.card__heading a:hover { color: var(--js-accent); }

.card__information,
.card-information {
  padding-top: 14px;
  color: var(--js-body);
  font-size: var(--js-fs-body);
}

/* Card badges (Sale / Sold out). Dawn puts them in .card__badge with a
   .badge inside. Made a pill in the site's micro-tag style. */
.card__badge .badge,
.badge {
  border-radius: var(--js-r-pill);
  padding: 5px 10px;
  font-family: var(--js-font-sans);
  font-size: var(--js-fs-micro);
  font-weight: var(--js-fw-semi);
  letter-spacing: var(--js-ls-micro);
  text-transform: uppercase;
  line-height: 1;
  border: none;
}
/* Sale badge in the accent. UNVERIFIED: the exact sale-badge class differs
   between versions (.badge--bottom-left, .badge.color-accent-2, and in some
   builds no modifier at all). Rather than guess, the accent is applied to any
   badge that is not the sold-out one, which Dawn consistently renders with
   the inverse colour scheme. */
.badge:not(.badge--sold-out):not(.color-inverse):not(.color-scheme-inverse) {
  background: var(--js-accent);
  color: var(--js-white);
}
.badge--sold-out,
.badge.color-inverse,
.badge.color-scheme-inverse {
  background: var(--js-dark-alt);
  color: var(--js-white);
}

/* Prices. .price / .price-item / .price-item--regular / .price-item--sale are
   Dawn public classes. */
.price,
.price-item {
  font-family: var(--js-font-sans);
  font-weight: var(--js-fw-semi);
  letter-spacing: var(--js-ls-title);
  font-variant-numeric: tabular-nums;
  color: var(--js-ink);
}
.price--on-sale .price-item--sale,
.price__sale .price-item--sale {
  color: var(--js-accent);
}
.price--on-sale .price-item--regular {
  color: var(--js-label);
  font-weight: var(--js-fw-regular);
}


/* ==========================================================================
   6. EYEBROWS AND CHIPS
   --------------------------------------------------------------------------
   Two patterns carry a lot of the site's voice. They are exposed here as
   utility classes so they can be dropped into any Dawn rich-text or custom
   liquid block, and then mapped onto Dawn's nearest equivalents.

     .js-eyebrow      12px / 600 / 0.22em uppercase, accent coloured
     .js-eyebrow-pill the same but inside a hairline pill (.plex-eyebrow)
     .js-chip         999px chip with a 5px accent dot (.plex-chip)
     .js-tag          10px / 0.14em micro tag (.plex-tag / .poll-lead-tag)
   ========================================================================== */
.js-eyebrow {
  display: inline-block;
  margin-bottom: 16px;
  font-family: var(--js-font-sans);
  font-size: var(--js-fs-eyebrow);
  font-weight: var(--js-fw-semi);
  letter-spacing: var(--js-ls-eyebrow);
  text-transform: uppercase;
  color: var(--js-accent);
}

.js-eyebrow-pill {
  display: inline-block;
  margin-bottom: 18px;
  padding: 7px 16px;
  border: 1px solid var(--js-on-dark-hair);
  border-radius: var(--js-r-pill);
  font-family: var(--js-font-sans);
  font-size: 11px;
  font-weight: var(--js-fw-semi);
  letter-spacing: var(--js-ls-eyebrow);
  text-transform: uppercase;
  color: var(--js-on-dark-2);
}
/* On a light background the hairline needs to be dark instead. */
.js-plate .js-eyebrow-pill,
.js-eyebrow-pill.js-on-light {
  border-color: rgba(0, 0, 0, 0.12);
  color: var(--js-muted);
}

.js-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--js-gap-xs);
  padding: 10px 18px;
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: var(--js-r-pill);
  background: rgba(0, 0, 0, 0.02);
  font-family: var(--js-font-sans);
  font-size: var(--js-fs-chip);
  font-weight: var(--js-fw-medium);
  color: var(--js-ink);
  text-decoration: none;
  transition: border-color 0.3s ease, background-color 0.3s ease;
}
.js-chip::before {
  content: '';
  flex: 0 0 auto;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--js-accent);
}
.js-chip:hover {
  border-color: var(--js-accent-50);
  background: var(--js-accent-08);
}
/* Dark-canvas variant, matching .plex-chip exactly. */
.js-plate-dark .js-chip,
.js-dark-canvas .js-chip,
.js-chip.js-on-dark {
  border-color: var(--js-on-dark-hair);
  background: var(--js-accent-03);
  color: var(--js-on-dark-1);
}

.js-tag {
  display: inline-block;
  padding: 5px 10px;
  border-radius: var(--js-r-pill);
  background: rgba(8, 8, 10, 0.66);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.18);
  font-family: var(--js-font-sans);
  font-size: var(--js-fs-micro);
  font-weight: var(--js-fw-semi);
  letter-spacing: var(--js-ls-micro);
  text-transform: uppercase;
  color: var(--js-white);
}

/* Map the eyebrow onto Dawn's collection/product "caption" text, which is
   Dawn's closest built-in equivalent (used for vendor lines and section
   subheadings). .caption-with-letter-spacing is a real Dawn class. */
.caption-with-letter-spacing,
.product__text.caption-with-letter-spacing {
  font-size: var(--js-fs-eyebrow);
  font-weight: var(--js-fw-semi);
  letter-spacing: var(--js-ls-eyebrow);
  text-transform: uppercase;
  color: var(--js-accent);
}


/* ==========================================================================
   7. PRODUCT PAGE
   --------------------------------------------------------------------------
   .product, .product__info-wrapper, .product__title, .product__description,
   .product-form__buttons, .product-form__submit, .product__media-wrapper
   are Dawn public classes.

   UNVERIFIED, flagged individually below: the variant picker markup
   (.product-form__input--pill vs. a <select>, and whether Dawn wraps radios
   in <fieldset>), and the accordion/collapsible-tab classes.
   ========================================================================== */
.product__title,
.product__title h1,
.product__title > * {
  font-family: var(--js-font-sans);
  font-size: clamp(32px, 3.6vw, 52px);
  line-height: var(--js-lh-h2);
  letter-spacing: var(--js-ls-h1);
  font-weight: var(--js-fw-semi);
  color: var(--js-black);
  text-wrap: balance;
  margin: 0 0 10px;
}

.product__info-wrapper .price,
.product .price__container {
  font-size: clamp(22px, 2vw, 28px);
  font-weight: var(--js-fw-semi);
  letter-spacing: var(--js-ls-h1);
}

.product__description,
.product__description.rte {
  max-width: var(--js-prose-max);
  font-size: var(--js-fs-body);
  line-height: var(--js-lh-body);
  color: var(--js-body);
}

.product__media-wrapper .media,
.product__media,
.product__modal-opener .media {
  border-radius: var(--js-r-card);
  overflow: hidden;
}

.product-form__buttons {
  display: flex;
  flex-direction: column;
  gap: var(--js-gap-sm);
}
.product-form__submit {
  width: 100%;
  padding: 18px;
  font-size: 17px;
}

/* Variant pills.
   UNVERIFIED: `.product-form__input--pill` exists in Dawn 7+ but earlier
   builds render variants as a <select>, and some builds use
   `.product-form__input input[type='radio'] + label`. Both shapes are
   styled, plus a structural fallback that only assumes "a radio followed by
   a label inside the product form". */
.product-form__input--pill input[type='radio'] + label,
.product-form__input input[type='radio'] + label,
product-form input[type='radio'] + label {
  border-radius: var(--js-r-pill);
  border: 1.5px solid var(--js-border);
  background: var(--js-white);
  color: var(--js-ink);
  font-family: var(--js-font-sans);
  font-size: 14px;
  font-weight: var(--js-fw-semi);
  padding: 11px 20px;
  transition: border-color var(--js-t-fast) ease, background var(--js-t-fast) ease;
}
.product-form__input--pill input[type='radio'] + label:hover,
.product-form__input input[type='radio'] + label:hover {
  border-color: #999;
}
.product-form__input--pill input[type='radio']:checked + label,
.product-form__input input[type='radio']:checked + label {
  border-color: var(--js-accent);
  background: var(--js-accent-08);
  color: var(--js-ink);
}
.product-form__input--pill input[type='radio']:focus-visible + label {
  box-shadow: var(--js-focus-ring);
}

/* The variant label above the picker, styled as the site's form label. */
.product-form__input .form__label,
.product-form__input > legend {
  font-family: var(--js-font-sans);
  font-size: 15px;
  font-weight: var(--js-fw-semi);
  color: #15161a;
  margin-bottom: 9px;
}

/* Quantity selector. .quantity, .quantity__input, .quantity__button are
   Dawn public classes; the pill shape is applied to the wrapper only so the
   two buttons stay inside it. */
.quantity {
  border-radius: var(--js-r-pill);
  border: 1.5px solid var(--js-border);
  background: var(--js-white);
  overflow: hidden;
}
.quantity::after { border-radius: var(--js-r-pill) !important; }
.quantity__input {
  font-family: var(--js-font-sans);
  font-weight: var(--js-fw-semi);
  color: var(--js-ink);
  font-variant-numeric: tabular-nums;
}
.quantity__button:hover { color: var(--js-accent); }

/* Collapsible product tabs / accordions.
   UNVERIFIED: Dawn has used `.product__accordion`, `.accordion`, and a bare
   <details> in different versions. The <details>/<summary> fallback below
   does not depend on any class and covers all three. */
.product__info-wrapper details,
.accordion details,
.product__accordion details {
  border-top: 1px solid rgba(0, 0, 0, 0.10);
}
.product__info-wrapper summary,
.accordion summary {
  padding: clamp(18px, 1.8vw, 24px) 0;
  font-family: var(--js-font-sans);
  font-size: var(--js-fs-title);
  font-weight: var(--js-fw-semi);
  letter-spacing: var(--js-ls-title);
  line-height: var(--js-lh-title);
  color: #111;
  cursor: pointer;
}
.product__info-wrapper summary + *,
.accordion summary + * {
  font-size: var(--js-fs-body);
  line-height: var(--js-lh-body);
  color: var(--js-body);
}


/* ==========================================================================
   8. FORM FIELDS
   --------------------------------------------------------------------------
   .field, .field__input, .field__label, .select, .select__select,
   .form__label, .form__message are Dawn public classes. Values taken from
   .su-input (14px radius, 1.5px #e4e4e4 border, 3px accent focus ring) and
   .lf-field > span (12px / 600 / uppercase labels).
   ========================================================================== */
.field__input,
.select__select,
.customer input[type='text'],
.customer input[type='email'],
.customer input[type='password'],
.customer textarea,
input[type='search'],
textarea {
  font-family: var(--js-font-sans);
  font-size: 16px;
  line-height: 1.4;
  color: var(--js-ink);
  background: var(--js-white);
  border: 1.5px solid var(--js-border);
  border-radius: var(--js-r-input);
  padding: 14px 16px;
  outline: none;
  box-shadow: none;
  transition: border-color var(--js-t-base) ease, box-shadow var(--js-t-base) ease;
}

/* Dawn draws the field border with a ::after pseudo-element too, same story
   as the button. Neutralised so the real border above is what shows. */
.field::after,
.field::before,
.select::after,
.select::before,
.customer .field::after {
  box-shadow: none !important;
  border-radius: var(--js-r-input) !important;
}

.field__input:focus,
.field__input:focus-visible,
.select__select:focus,
textarea:focus {
  border-color: var(--js-accent);
  box-shadow: var(--js-focus-ring);
  outline: none;
}
.field__input::placeholder,
textarea::placeholder { color: var(--js-label-lo); }

/* Dawn's floating label. Kept, but re-typed to the site's label scale. */
.field__label,
.form__label,
.customer .field label {
  font-family: var(--js-font-sans);
  font-size: 15px;
  font-weight: var(--js-fw-semi);
  color: #15161a;
  letter-spacing: 0;
}

/* The site's other label style: 12px uppercase micro-label. Opt in with
   .js-label-micro on the wrapper. */
.js-label-micro .field__label,
.js-label-micro .form__label {
  font-size: 12px;
  font-weight: var(--js-fw-semi);
  letter-spacing: var(--js-ls-label);
  text-transform: uppercase;
  color: rgba(0, 0, 0, 0.45);
}

textarea,
.field__input[rows] { min-height: 104px; resize: vertical; border-radius: var(--js-r-input); }

/* Select chevron — the site's own inline SVG, so the arrow matches. */
.select__select,
select.field__input {
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  padding-right: 44px;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' fill='none'%3E%3Cpath d='M1 1l6 6 6-6' stroke='%236a6a6a' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
}
/* Dawn ships its own chevron as a sibling <svg class="icon icon-caret">.
   Hidden so there is only one arrow.
   UNVERIFIED across versions — if the icon class differs the rule is inert
   and you will see two chevrons; in that case delete the background-image
   above instead of hunting the class. */
.select .icon-caret,
.select__select + .icon-caret { display: none; }

/* Checkboxes and radios pick up the accent natively. */
input[type='checkbox'],
input[type='radio'] { accent-color: var(--js-accent); }

/* Validation messages. */
.form__message,
.form-status,
.errors {
  font-family: var(--js-font-sans);
  font-size: 14px;
  line-height: 1.5;
  color: var(--js-error);
  background: var(--js-error-bg);
  border-radius: 12px;
  padding: 12px 16px;
}
.form__message--success,
.form-status--success {
  color: var(--js-success);
  background: rgba(31, 157, 87, 0.08);
}

/* Newsletter form — sits on a dark plate often, so give it an on-dark case. */
.js-plate-dark .field__input,
.js-dark-canvas .field__input {
  background: rgba(255, 255, 255, 0.04);
  border-color: var(--js-on-dark-hair);
  color: var(--js-white);
}
.js-plate-dark .field__label,
.js-dark-canvas .field__label { color: var(--js-on-dark-2); }


/* ==========================================================================
   9. CART (page and drawer)
   --------------------------------------------------------------------------
   .cart, .cart__items, .cart-item, .cart-item__name, .cart-item__details,
   .cart__footer, .cart__ctas, .totals and .cart__checkout-button are Dawn
   public classes and stable.

   UNVERIFIED: the cart DRAWER internals. Dawn has shipped
   <cart-drawer class="cart-drawer">, .drawer__inner, .cart-drawer__overlay,
   .drawer__header and in newer builds .cart-drawer__form — the names have
   moved. The rules below lead with the custom element name
   (`cart-drawer`), which is the one thing that has not changed, and treat
   the inner class names as best-effort.
   ========================================================================== */
.cart-item__name,
.cart-item .cart-item__name {
  font-family: var(--js-font-sans);
  font-size: var(--js-fs-title);
  font-weight: var(--js-fw-semi);
  letter-spacing: var(--js-ls-title);
  color: var(--js-ink);
  text-decoration: none;
}
.cart-item__name:hover { color: var(--js-accent); }

.cart-item__details,
.cart-item__details dl,
.product-option {
  font-size: 13px;
  line-height: 1.35;
  color: var(--js-muted);
}

.cart-item__image,
.cart-item__media img {
  border-radius: var(--js-r-card-sm);
}

.cart__items,
.cart-items thead th {
  border-color: var(--js-hairline);
}
.cart-items thead th {
  font-size: var(--js-fs-eyebrow);
  font-weight: var(--js-fw-semi);
  letter-spacing: var(--js-ls-label);
  text-transform: uppercase;
  color: rgba(0, 0, 0, 0.45);
}

.cart__footer,
.cart__blocks,
.totals {
  font-family: var(--js-font-sans);
}
.totals__total,
.totals > * {
  font-weight: var(--js-fw-semi);
  color: var(--js-ink);
  font-variant-numeric: tabular-nums;
}
.totals__total-value {
  font-size: clamp(22px, 2vw, 28px);
  letter-spacing: var(--js-ls-h1);
}
.tax-note,
.cart__note {
  font-size: var(--js-fs-small);
  color: var(--js-body);
}

.cart__checkout-button,
.cart__ctas .button {
  width: 100%;
  padding: 18px;
  font-size: 17px;
  border-radius: var(--js-r-pill) !important;
}

/* Empty-cart state. */
.cart__empty-text,
.cart--empty .cart__warnings h1 {
  font-size: var(--js-fs-h3);
  font-weight: var(--js-fw-semi);
  letter-spacing: var(--js-ls-h1);
  color: var(--js-black);
}

/* --- Cart drawer. `cart-drawer` is the custom element; safest hook. --- */
cart-drawer .drawer__inner,
cart-drawer [class*='drawer__inner'],
.cart-drawer__inner {
  border-top-left-radius: var(--js-r-section);
  background: var(--js-white);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.4);
}
cart-drawer .drawer__overlay,
cart-drawer [class*='overlay'],
.cart-drawer__overlay {
  background: rgba(8, 8, 10, 0.55);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
cart-drawer .drawer__heading,
cart-drawer h2 {
  font-size: var(--js-fs-h4);
  font-weight: var(--js-fw-semi);
  letter-spacing: var(--js-ls-h1);
  color: var(--js-black);
}


/* ==========================================================================
   10. HEADER, FOOTER, ANNOUNCEMENT BAR
   ========================================================================== */
.header {
  padding-left: var(--js-pad);
  padding-right: var(--js-pad);
  max-width: var(--js-page-max);
}
.header__menu-item,
.list-menu__item--link,
.header__menu-item .header__active-menu-item {
  font-family: var(--js-font-sans);
  font-size: 17px;
  font-weight: var(--js-fw-semi);
  line-height: 1.15;
  letter-spacing: 0;
  color: var(--js-ink);
  text-decoration: none;
}
.header__menu-item:hover { color: var(--js-accent); text-decoration: none; }

/* The site's logo is a PNG with alpha; cap its height so Dawn's width-based
   sizing does not make it huge. Assets available:
   primary-logo-black.png (1080x294) and -white, logomark-* (900x753). */
.header__heading-logo {
  height: auto;
  max-height: 40px;
  width: auto;
}

/* Announcement bar / utility bar. `.announcement-bar` is stable;
   `.utility-bar` only exists in Dawn 13+ and is inert elsewhere. */
.announcement-bar,
.utility-bar {
  background: var(--js-dark-alt);
  color: var(--js-white);
}
.announcement-bar__message,
.utility-bar__item {
  font-size: var(--js-fs-eyebrow);
  font-weight: var(--js-fw-semi);
  letter-spacing: var(--js-ls-micro);
  text-transform: uppercase;
}

.footer {
  background: var(--js-dark);
  color: var(--js-on-dark-1);
  border-top-left-radius: var(--js-r-section);
  border-top-right-radius: var(--js-r-section);
}
.footer .footer-block__heading,
.footer__content-top .h4 {
  font-size: var(--js-fs-eyebrow);
  font-weight: var(--js-fw-semi);
  letter-spacing: var(--js-ls-eyebrow);
  text-transform: uppercase;
  color: var(--js-on-dark-2);
}
.footer a,
.footer .list-menu__item--link { color: var(--js-on-dark-1); text-decoration: none; }
.footer a:hover { color: var(--js-white); }
.footer__content-bottom { border-top-color: var(--js-on-dark-hair-lo); }
.footer .copyright__content { color: var(--js-on-dark-3); font-size: var(--js-fs-small); }


/* ==========================================================================
   11. COLLECTION PAGE ODDS AND ENDS
   --------------------------------------------------------------------------
   UNVERIFIED, and deliberately light-touch: the faceted-filter markup
   (.facets, .facets__summary, .facet-checkbox, .active-facets) is the part
   of Dawn that has been rewritten most often. Only radii, type and the
   accent are touched — no layout — so a mismatch degrades to "stock Dawn
   filters in the right font" rather than a broken sidebar.
   ========================================================================== */
.collection-hero__title,
.collection__title .title {
  font-size: var(--js-fs-h2);
  font-weight: var(--js-fw-bold);
  letter-spacing: var(--js-ls-h1);
  line-height: var(--js-lh-h2);
  color: var(--js-ink);
}
.collection-hero__description,
.collection__description {
  max-width: var(--js-prose-max);
  color: var(--js-body);
  font-size: var(--js-fs-body);
  line-height: var(--js-lh-body);
}

.facets__summary,
.facets summary,
.facets__label,
.facet-checkbox {
  font-family: var(--js-font-sans);
  font-size: 15px;
  color: var(--js-ink);
}
.facets__display,
.facets [class*='display'] {
  border-radius: var(--js-r-card);
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: var(--js-sh-card-light);
}
.active-facets__button,
.active-facets [class*='button'] {
  border-radius: var(--js-r-pill);
  font-size: 13px;
}

.pagination__item {
  border-radius: var(--js-r-pill);
  font-weight: var(--js-fw-semi);
}
.pagination__item--current,
.pagination__item[aria-current='page'] {
  color: var(--js-accent);
}


/* ==========================================================================
   12. MOTION GUARD
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .card-wrapper,
  .card-wrapper:hover,
  .button,
  .button:hover,
  .button:active,
  .js-chip {
    transition: none;
    transform: none;
  }
/* Dawn paints buttons as rgba(var(--color-button), var(--alpha-button-background))
   and its secondary variant sets that alpha to 0, so plain `background` loses.
   Feed Dawn's own variables instead - they are RGB triplets, not hex - and force
   the paint so the outline variant cannot win back. */
.product-form__submit,
.product-form__submit.button--secondary {
  --color-button: var(--js-accent-rgb);
  --color-button-text: 255, 255, 255;
  --alpha-button-background: 1;
  background: rgb(var(--js-accent-rgb)) !important;
  color: #fff !important;
  box-shadow: none !important;
}
.product-form__submit::after {
  box-shadow: none !important;
}
.product-form__submit:hover:not([disabled]) {
  background: #d8481a !important;
}
.product-form__submit[disabled] {
  background: rgb(245, 169, 140) !important;
  color: #fff !important;
}