/* Platform wrappers + native cart chrome. Origin tokens remain the source of truth. */

html { background: var(--c-canopy); }

[id^="shopline-section-"].section,
[id^="shopline-section-"].section-tight {
  padding: 0;
  margin: 0;
}

[id^="shopline-section-"]:has(.site-header),
[id^="shopline-section-"]:has(.promo-bar),
[id^="shopline-section-"]:has(.site-footer),
[id^="shopline-section-"]:has(.marquee) {
  display: contents;
}

a.skip-to-content-link.skip-link {
  position: absolute;
  /* `inset` FIRST: it clears the platform's own offsets, and it is a shorthand for top/left, so
     written after them it resets them too and the pill lands in the corner of every page (A7 fix 11). */
  inset: auto;
  left: var(--sp-4);
  top: -100px;
  z-index: 200;
  display: inline-block;
  padding: var(--sp-3) var(--sp-6);
  font-weight: 600;
  font-size: 14px;
  line-height: 1.4;
  color: var(--c-cream);
  text-decoration: none;
  background: var(--c-canopy);
  border-radius: var(--r-pill);
  transform: none;
}
a.skip-to-content-link.skip-link:focus,
a.skip-to-content-link.skip-link:focus-visible {
  position: absolute;
  top: var(--sp-4);
  transform: none;
}

:root {
  --sort-title-font: var(--f-display);
  --sort-body-font: var(--f-ui);
}

.site-header theme-cart-bubble.cart-bubble,
.site-header .cart-bubble {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.site-header .cart-bubble__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  background: none;
  border-radius: 50%;
  color: inherit;
  cursor: pointer;
}
.site-header .cart-bubble__link svg {
  width: 21px;
  height: 21px;
  display: block;
}
.site-header .cart-bubble__count {
  /* On the bag's top-right corner. An `inset: auto` here used to cancel top/right, which put the
     badge in the middle of the button, right over the bag (2026-09-28). */
  position: absolute;
  inset: 2px -1px auto auto;
  z-index: 1;
  min-width: 17px;
  max-width: none;
  height: 17px;
  padding-inline: 4px;
  overflow: hidden;
  font-size: 10.5px;
  font-style: normal;
  font-weight: 700;
  line-height: 1;
  color: var(--c-ink);
  text-align: center;
  background: var(--c-spectrum);
  border: 2px solid var(--c-linen);
  border-radius: var(--r-pill);
  display: flex;
  align-items: center;
  justify-content: center;
}
.site-header .cart-bubble__count:empty { display: none; }
.site-header--overlay .cart-bubble__count { border-color: rgba(15, 18, 13, .55); }
.site-header--overlay.is-stuck .cart-bubble__count,
.site-header--overlay.is-menu-open .cart-bubble__count { border-color: var(--c-linen); }


/* >>> A7 fix 10 — the platform's own classes where base/index.css is not loaded <<< */

/* theme.html loads base/index.css only where this theme does not draw the page itself. The
   platform's baseline SECTIONS are still placed on the templates that do not load it — main-page on
   every Page, contact-form on the contact page, main-search on /search — and their markup asks for
   classes that live only in that file. Without it they render as the browser's defaults: a 32px h1,
   a 2px-inset input, a grey submit button. This is the floor under them, in the design's tokens.

   Every rule here is 0,2,0, the same weight as a section stylesheet's own `.section .thing` — and
   section stylesheets load after this file. A section that styles its own field therefore keeps its
   styling and this block never reaches it. The two rules that must win say so explicitly. */

/* Type — the platform's title scale onto this design's display scale.
   SIZE AND FAMILY ONLY, on purpose. The first version of this block also set line-height,
   letter-spacing and weight, and the style diff caught it fighting a section that already styles
   its own heading: the product title carries .title2 and reads 60px/-1.8 under those rules where
   the prototype is 63.6px/-1.5 (it was 63px/-1.2 before, from the product section's own CSS, which
   is closer). Setting the size and leaving the rest to base.css's own `h1, h2, h3, h4` rule — or to
   the section that has an opinion — is both smaller and more accurate. */
[data-base-css="off"] .title1,
[data-base-css="off"] .title2 {
  font-family: var(--f-display);
  font-size: var(--t-display-lg);
}
[data-base-css="off"] .title3,
[data-base-css="off"] .title4 {
  font-family: var(--f-display);
  font-size: var(--t-display-md);
}
[data-base-css="off"] .title5,
[data-base-css="off"] .title6 {
  font-family: var(--f-display);
  font-size: var(--t-display-sm);
}

/* Fields — the design's .input frame, the label kept for a screen reader only */
[data-base-css="off"] .field {
  position: relative;
  display: block;
  margin-block-end: 20px;
}
[data-base-css="off"] .field__group {
  display: flex;
  gap: 20px;
}
[data-base-css="off"] .field__group > * {
  flex: 1 1 0;
  min-width: 0;
}
[data-base-css="off"] .field__inner {
  flex: 1;
}
[data-base-css="off"] .field__label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  white-space: nowrap;
  border: 0;
  clip-path: inset(50%);
}
[data-base-css="off"] .field__input {
  font-family: var(--f-ui);
  width: 100%;
  padding: 15px 18px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--c-ink);
  background: var(--c-paper);
  border: 1px solid var(--c-line);
  border-radius: 8px;
  outline: none;
  transition: border-color var(--t-control), box-shadow var(--t-control);
}
[data-base-css="off"] .field__input::placeholder {
  color: var(--c-stone);
  opacity: 1;
}
[data-base-css="off"] .field__input:focus {
  border-color: var(--c-spectrum);
  box-shadow: 0 0 0 3px rgba(232, 163, 61, .22);
}
[data-base-css="off"] .field__input.textarea {
  min-height: 150px;
  padding: 15px 18px;
  resize: vertical;
}

/* iOS zooms into any field under 16px and stays zoomed — the rule components.css already has */
@media (max-width: 700px) {
  [data-base-css="off"] .field__input {
    font-size: 16px;
  }
}

/* contact-form.css stacks its name/email row below 960px by setting `display: block` on the same
   element at 0,1,0. The rule above would outweigh it, so the stack is restated here. */
@media (max-width: 959px) {
  [data-base-css="off"] .contact-form__group {
    display: block;
  }
}

/* The form is a column, not the page's full width: the prototype's is 476px beside a card. */
[data-base-css="off"] .contact-form__inner {
  max-width: 640px;
}
[data-base-css="off"] .contact-form__button {
  text-align: start;
}

/* Buttons — the design's pill. Icon and link variants keep being icons and links. */
[data-base-css="off"] .button,
[data-base-css="off"] .shopline-element-buy-now {
  display: inline-flex;
  gap: var(--sp-2);
  align-items: center;
  justify-content: center;
  padding: 17px 30px;
  font-family: var(--f-ui);
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  color: var(--c-cream);
  white-space: nowrap;
  background: var(--c-canopy);
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  transition: background var(--t-control), color var(--t-control),
              border-color var(--t-control), transform var(--t-control);
}
[data-base-css="off"] .button:hover,
[data-base-css="off"] .shopline-element-buy-now:hover {
  color: var(--c-cream);
  background: var(--c-canopy-deep);
  transform: translateY(-2px);
}
[data-base-css="off"] .button:disabled,
[data-base-css="off"] .button.disabled {
  color: var(--c-stone);
  cursor: not-allowed;
  background: transparent;
  border-color: var(--c-line);
  transform: none;
}
[data-base-css="off"] .button--icon,
[data-base-css="off"] .button--link {
  padding: 0;
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  border-radius: 0;
  transform: none;
}

/* The search page's field is a display-type element in the approved prototype — 30px Newsreader,
   22/28 padding, 14px radius (measured: audit/a7-visual/style/style-1/summary.md). main-search.css
   sets `padding: 0` on it at 0,2,0 and loads later, so this one is stated at 0,3,0 on purpose. */
[data-base-css="off"] .main-search-box .field__input {
  padding: 22px 28px;
  font-family: var(--f-display);
  font-size: 30px;
  line-height: 1.6;
  border-radius: 14px;
}
@media (max-width: 700px) {
  [data-base-css="off"] .main-search-box .field__input {
    font-size: 22px;
  }
}

/* <<< A7 fix 10 ends >>> */

/* The platform's {{#component "image"}} writes width= and height= attributes onto every <img> it
   renders. base.css caps the width at 100% and never resets the height (it is the approved
   prototype's own file, whose <img> tags carry no dimensions), so the height attribute's
   presentational hint won and an image rendered at the FILE's pixel height on a column a third as
   wide — sections/one-price +1,417px on /pages/about, sections/product-versus +1,753px on
   /pages/compare, and .versus__card img's own aspect-ratio ignored because the box already had two
   definite sides. An element selector, so every class rule that sets a height on purpose still
   wins. (A7 fix 12, 2026-09-24.) */
img, video { height: auto; }