/* ==========================================================================
   Korjin — Shopline (Bottle) platform adapter
   --------------------------------------------------------------------------
   Reconciles the ported bespoke design system with the host platform's
   render behaviour. Loaded LAST so it wins on equal specificity.

   Trap #1 — the platform wraps every rendered section in
   <div id="shopline-section-…" class="section">. That collides with the
   design system's own `.section { padding-block: var(--section-y) }` helper,
   injecting ~7rem of phantom padding around every band (and DOUBLING it on
   bands whose own root already carries `.section`). Scope the reset to the
   platform wrapper only — identified by its real `id` prefix — so the inner
   `<section class="… section">` roots keep their intended, source-measured
   padding.
   ========================================================================== */

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

/* Trap #2 — the journal teaser cards are semantic <article>s (contract asserts
   3 of them) with a block link filling each so the whole card stays clickable,
   exactly as the source's single-anchor card did. */
.journal__card-link {
  display: block;
  color: inherit;
}

/* Trap #3 — Bottle's global form-control styling gives the newsletter <input>
   a ~13px-inflated flex hypothetical cross-size, stretching the capture row's
   button and making the whole band taller than the source. Revert the input to
   native intrinsic sizing, then re-apply the source's `.field` skin on top so
   it still reads as the design's transparent, hairline-bordered field. */
[data-section-key="capture"] .capture__form .field {
  all: revert;
  box-sizing: border-box;
  width: min(320px, 60vw);
  padding: 0.9375rem 1.125rem;
  background: transparent;
  border: 1px solid var(--rule-strong);
  border-right: 0;
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--step--1);
  line-height: var(--leading-body);
}

[data-section-key="capture"] .capture__form .field::placeholder {
  color: var(--ink-faint);
}

[data-section-key="capture"] .capture__form .field:focus {
  border-color: var(--focus);
}

@media (max-width: 560px) {
  [data-section-key="capture"] .capture__form .field {
    width: 100%;
    border-right: 1px solid var(--rule-strong);
  }
}

/* Trap #4 — the PLP Sort control is a native <select class="field plp__select">.
   Bottle's global `.field` styles it as a flex form-control with a
   `margin-block-end: 20px`, a `::after` border overlay, and a 1.4 line-height.
   The bottom margin inflates the sort control's flex cross-size by ~16px, which
   cascades the whole listing (and the builder + footer below it) downward, while
   the shrunk line-height and overlaid border also break the field. Revert to
   native intrinsic sizing, then re-apply the source `.field` + `.plp__select`
   skin (transparent, hairline border, custom caret) exactly as the source did. */
[data-section-key="plp"] .plp__select {
  all: revert;
  box-sizing: border-box;
  width: auto;
  padding: 0.5rem 2rem 0.5rem 0.75rem;
  background: transparent;
  border: 1px solid var(--rule-strong);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--step--1);
  line-height: var(--leading-body);
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, currentcolor 50%),
    linear-gradient(135deg, currentcolor 50%, transparent 50%);
  background-position: calc(100% - 16px) 55%, calc(100% - 11px) 55%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}

/* Trap #6 — `all: revert` above also reverts `outline`, which hands the focused
   control back to the browser's own focus ring (blue in Chrome). The global
   `:focus-visible` rule in base.css is specificity (0,1,0) and cannot beat the
   (0,3,0) selectors those reverts live on, so the brand ring has to be restored
   at matching specificity here. Reported on the newsletter field, 10 Sep.

   --focus resolves per ground: gold on the dark direction the site leads with,
   oxblood on cream. Both are brand colours; neither is the browser's blue. */
[data-section-key="capture"] .capture__form .field:focus-visible,
[data-section-key="plp"] .plp__select:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: -1px;
}

/* Belt and braces for any platform control this sheet does not revert: Bottle
   inputs inside a Korjin section should take the brand ring too. Scoped to
   [data-section-key] so it cannot reach into native commerce templates that
   are deliberately left on the base theme's own styling. */
[data-section-key] input:not([type="radio"]):not([type="checkbox"]):focus-visible,
[data-section-key] select:focus-visible,
[data-section-key] textarea:focus-visible {
  outline: 2px solid var(--focus);
  /* On the border, not 3px outside it: one line, not two (QA-09). Radios and
     checkboxes are excluded — custom controls draw their own ring. */
  outline-offset: -1px;
}

/* Trap #7 — the platform's own skip link is parked ABOVE the viewport
   (`position: absolute; top: -62px`) and carries a box-shadow. Nothing is
   wrong with it until the page is overscrolled: the rubber-band drag pulls it
   into view and a shadowed box appears at the top of the page out of nowhere.

   Same rule as the theme's own skip link — clip it rather than offset it, so
   it is not painted at all until focused. Reported 10 Sep; this is a recurring
   symptom on Bottle builds, not specific to this theme. */
.skip-to-content-link:not(:focus) {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip-path: inset(50%) !important;
  box-shadow: none !important;
  white-space: nowrap;
}

/* Hide the Subscriptions app storefront widget wherever the theme owns
   the buy path. The embed itself stays on so checkout can still render
   subscription payment; hiding .theme-app-extension__subscription-payment
   globally would blank that. */
[data-section-key="pdp"] .theme-app-extension__subscription-payment,
[data-section-key="pdp"] .isv-pdp-block-container,
[data-section-key="pdp"] .isv-subscribe-common,
[data-section-key="buy"] .theme-app-extension__subscription-payment,
[data-section-key="buy"] .isv-pdp-block-container,
[data-section-key="buy"] .isv-subscribe-common,
[data-section-key="plp"] .theme-app-extension__subscription-payment,
[data-section-key="plp"] .isv-pdp-block-container,
[data-section-key="plp"] .isv-subscribe-common,
[data-section-key="builder"] .theme-app-extension__subscription-payment,
[data-section-key="builder"] .isv-pdp-block-container,
[data-section-key="builder"] .isv-subscribe-common,
[data-section-key="xsell"] .theme-app-extension__subscription-payment,
[data-section-key="xsell"] .isv-pdp-block-container,
[data-section-key="xsell"] .isv-subscribe-common {
  display: none !important;
}