/** Shopify CDN: Minification failed

Line 3007:0 Unexpected "}"

**/
/* SKYDESIGN component layer — implements design.md..sky-section
 * Kept out of Dawn's component-*.css so a version bump can't clobber it.
 * RTL: logical properties only, zero physical properties, zero [dir] selectors.
 * Sense RTL injects 258 !important declarations on PHYSICAL properties — stay
 * logical or you start a specificity war you lose. CLAUDE.md §4, design.md §6.
 */

/* ══ layout primitives ═══════════════════════════════════════════════════ */

.sky-wrap {
  max-inline-size: var(--sky-wrap);
  margin-inline: auto;
  padding-inline: var(--sky-gutter);
}

.sky-wrap--narrow {
  max-inline-size: var(--sky-measure);
}

.sky-section {
  font-family: var(--sky-font);
  color: var(--sky-ink);
}

/* ══ vertical rhythm — the interval belongs to the BOUNDARY ══════════════
 * One rule owns the gap BETWEEN consecutive sections; sections carry no block
 * padding of their own. Do not re-add per-section padding — that is the defect
 * this replaced. design.md §10.
 * Plain sibling combinator, not :has() — if it fails it degrades to no rhythm
 * rather than to a collapsed page.
 */
.skydesign-section + .skydesign-section {
  padding-block-start: var(--sky-space-3xl);
}
.skydesign-section + .skydesign-story-section {
  padding-block-start: 24px;
}
/* Breathing room before the footer, without reintroducing per-section padding. */
main .skydesign-section:last-child {
  padding-block-end: var(--sky-space-3xl);
}

/* Whichever section renders first gets no top padding from the rule above —
 * right for a hero flush under the header, wrong for the brand story when
 * the sections ahead of it are disabled (as on the parasols page today) and
 * it ends up first. Scoped to .sky-story so an actual first-rendered hero
 * elsewhere is untouched. */
main .skydesign-section:first-child .sky-story {
  padding-block-start: var(--sky-space-3xl);
}

/* The mixed Dawn/SKYDESIGN boundary, which the product template is the first to
 * have. The Dawn sections' padding sliders are 0 in templates/product.json, so
 * this is the single source of that interval — change one, change the other.
 * design.md §10. */
#MainContent > .shopify-section:not(.skydesign-section) + .skydesign-section {
  padding-block-start: var(--sky-space-3xl);
}

/* The last section is Dawn's related-products, which
 * `main .skydesign-section:last-child` cannot reach. Hung off the buy box so it
 * applies to the product template only. */
#MainContent:has(.product__info-container) {
  padding-block-end: var(--sky-space-3xl);
}

/* ══ plate — the image field. The placeholder is DESIGNED, not a fallback for a
 * live store. design.md §8. ══ */

.sky-plate {
  position: relative;
  overflow: hidden;
  background: var(--sky-sand-pale);
}

/* DO NOT REMOVE `:empty` FROM THIS SELECTOR.
 * Dawn's base.css ships `div:empty { display: none }`, which hides a plate that
 * has neither an image nor a brief — i.e. every product card on a live page.
 * `div:empty` is (0,1,1) and a bare `.sky-plate` at (0,1,0) LOSES to it
 * regardless of source order; `:empty` here makes it (0,2,0) and wins on
 * specificity, which is the property that survives Dawn's body-loaded sheets.
 * design.md §10. */
.sky-plate:empty {
  display: block;
}

.sky-plate img,
.sky-plate svg {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  display: block;
}

.sky-plate--dark {
  background: linear-gradient(200deg, oklch(22% 0 90) 0%, oklch(34% 0.018 74) 62%, oklch(45% 0.026 72) 100%);
}

.sky-plate--mid {
  background: linear-gradient(200deg, oklch(30% 0.01 84) 0%, oklch(46% 0.026 72) 100%);
}

.sky-plate__note {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  max-inline-size: 24ch;
  margin: 0;
  padding: var(--sky-space-xs) var(--sky-space-sm);
  font-size: var(--sky-text-xs);
  line-height: 1.45;
  color: var(--sky-sand-deep);
  background: oklch(97.9% 0.001 106 / 0.62);
  border-inline-end: var(--sky-rule-width) dashed currentColor;
  border-block-end: var(--sky-rule-width) dashed currentColor;
}

.sky-plate--dark .sky-plate__note,
.sky-plate--mid .sky-plate__note {
  color: oklch(84% 0.014 74);
  background: oklch(20% 0 90 / 0.5);
}

/* ══ scrim — guarantees the contrast floor for text over photography ══════
 * TWO layers with FIXED lengths, never one percentage gradient — a single
 * gradient reaches ~0 alpha exactly where the first heading line sits (measured
 * 1.15:1). The text container's block-start padding equals the fade height, so
 * no text can enter the fade. Keep those two numbers tied.
 * Any new overlay-on-image component must use `.sky-scrim` rather than rolling
 * its own gradient. Measure alpha against the SERVED image. design.md §8.
 */

.sky-scrim {
  --sky-scrim-fade: 9.6rem;   /* 96px — 1rem is 10px, see skydesign-tokens.css */
  position: absolute;
  inset-block-end: 0;
  inset-inline: 0;
  color: var(--sky-paper);
  padding-block-start: var(--sky-scrim-fade);
  background-repeat: no-repeat;
  background-image:
    linear-gradient(
      oklch(18% 0 90 / var(--sky-scrim-opacity, 0.72)),
      oklch(18% 0 90 / var(--sky-scrim-opacity, 0.72))
    ),
    linear-gradient(to top, oklch(18% 0 90 / var(--sky-scrim-opacity, 0.72)), oklch(18% 0 90 / 0));
  background-size:
    100% calc(100% - var(--sky-scrim-fade)),
    100% var(--sky-scrim-fade);
  background-position:
    bottom,
    top;
}

/* :where() contributes zero specificity — keep it. Dawn's base.css sets `color`
 * on the h1–h5 ELEMENT selectors, which beats inheritance and rendered scrim
 * headings at 1.1:1. Raising specificity here would break the per-element rules
 * below. design.md §6. */
.sky-section :where(h1, h2, h3, h4, h5, h6) {
  font-family: inherit;
}

.sky-scrim :where(h1, h2, h3, h4, h5, h6, p, a, li, dt, dd) {
  color: inherit;
}

/* ══ C3 · typographic link — no filled buttons (design.md §3). Arrow authored
 * left-pointing (design.md §6). ══ */

.sky-link {
  display: inline-flex;
  align-items: center;
  align-content: center;
  flex-wrap: wrap;
  gap: 0.88rem;
  position: relative;
  min-block-size: 4.4rem;    /* 44px minimum tap target */
  padding-block: var(--sky-space-2xs);
  font-size: var(--sky-text-base);
  font-weight: 600;
  color: inherit;
  text-decoration: none;
}

.sky-link::after {
  content: '';
  position: absolute;
  inset-block-end: 0.8rem;
  inset-inline: 0;
  block-size: var(--sky-rule-width);
  background: currentColor;
  transition: block-size var(--sky-dur-fast) var(--sky-ease-out);
}

.sky-link:hover::after {
  block-size: 2px;
}

.sky-link svg {
  flex: 0 0 auto;
  inline-size: 1.68rem;
  block-size: 1.68rem;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.5;
}

/* ══ S2 · hanging section head — no rule, no numbered eyebrow ═════════════ */

.sky-head {
  margin-block-end: var(--sky-space-xl);
}

/* Opt-in centred head. A modifier rather than a `.sky-works .sky-head`
 * override: nothing else about .sky-head changes, and the next section that
 * wants a centred head should not need a second rule. */
.sky-head--center {
  text-align: center;
}

.sky-head__title {
  margin: 0;
  font-size: var(--sky-text-2xl);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.008em;
  text-wrap: balance;
  overflow-wrap: anywhere;
  min-inline-size: 0;
}

.sky-head__sub {
  margin: var(--sky-space-2xs) 0 0;
  font-size: var(--sky-text-sm);
  color: var(--sky-sand-deep);
}

/* ══ H6 · hero photographic fold ═════════════════════════════════════════ */

.sky-hero {
  position: relative;
  isolation: isolate;
}

.sky-hero__plate {
  block-size: clamp(41.6rem, 78svh, 70.4rem);
}

/* The band outgrows the photograph's 3:2 as the viewport widens, so `cover`
   trims the top and bottom. Centring drops whatever hangs near the top edge —
   on the current hero, the fan. `--sky-hero-focus` comes from the section
   setting; the fallback here must match its schema default. design.md §11.
   Specificity ties with `.sky-plate img`, so this rule has to stay BELOW it. */
.sky-hero__plate img {
  object-position: 50% var(--sky-hero-focus, 25%);
}

/* block-start padding belongs to .sky-scrim — it IS the fade zone, and
   overriding it here would put the heading back inside the fade. */
.sky-hero__copy {
  padding-block-end: clamp(3.2rem, 5vw, 5.6rem);
}

.sky-hero__title {
  margin: 0;
  font-size: var(--sky-text-display);
  font-weight: 600;
  line-height: 1.06;
  letter-spacing: -0.012em;
  max-inline-size: 17ch;
  text-wrap: balance;
  overflow-wrap: anywhere;
  min-inline-size: 0;
}

.sky-hero__sub {
  margin: var(--sky-space-sm) 0 0;
  font-size: var(--sky-text-lg);
  color: oklch(92% 0.006 90);
  max-inline-size: 34ch;
  text-wrap: pretty;
}

.sky-hero .sky-link {
  margin-block-start: var(--sky-space-lg);
  color: var(--sky-paper);
}

/* ══ narrow text band — text as annotation, not headline ══════════════════ */

/* Richtext arrives wrapped in <p> — style the inner paragraph, never wrap it in
 * another <p>. CLAUDE.md §5. */
.sky-band__text p {
  margin: 0;
  font-size: var(--sky-text-xl);
  line-height: 1.5;
  letter-spacing: -0.004em;
  text-wrap: pretty;
}

/* ══ brand heritage narrative — editorial "about the maker" block. Restrained
 * per design.md §7 (no badges, no adjectives-about-quality in OUR copy), but a
 * licensed maker's own heritage claim is quoted content, not our marketing —
 * the eyebrow + generous leading is the whole "expensive" register here. ══ */

/* Logo tile is the maker's own registered mark, reproduced as supplied — a
 * solid-fill square, not a badge we invented, so it sits outside design.md
 * §7's "no badges" rule for OUR marketing. Centred, stacked above the copy,
 * until the float takes over below (CLAUDE.md §4: logical `inline-*`
 * properties throughout, zero physical ones). */
.sky-story__logo {
  margin-block-end: var(--sky-space-lg);
  margin-inline: auto;
  inline-size: clamp(9.6rem, 32vw, 13.6rem);
}

.sky-story__logo img {
  display: block;
  inline-size: 100%;
  block-size: auto;
}

.sky-story__eyebrow {
  margin: 0 0 var(--sky-space-sm);
  font-size: var(--sky-text-sm);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--sky-sand-deep);
}

/* Plain block flow on purpose, NOT `display: flex`. A flex container is its
 * own block formatting context, so next to the floated logo it would avoid
 * the float as one rigid rectangle — narrowed for its full height, never
 * reclaiming the measure once past the logo's bottom edge. Ordinary <p> line
 * boxes don't have that problem: each one wraps around the float only where
 * it actually overlaps it. */
.sky-story__body {
  text-align: center;
}

.sky-story__text {
  margin: 0;
  font-size: var(--sky-text-lg);
  line-height: 1.7;
  letter-spacing: -0.002em;
  text-wrap: pretty;
}

.sky-story__text + .sky-story__text {
  margin-block-start: var(--sky-space-md);
}

.sky-story__text:first-child {
  font-size: var(--sky-text-xl);
  color: var(--sky-ink);
}

/* Once there's room, the logo floats to the inline-start of the copy instead
 * of stacking above it. A float — not a flex row — on purpose: it's what
 * makes the top of the logo line up with the top of the eyebrow line for
 * free (the eyebrow is the first text after it in source order, so it's what
 * wraps alongside it), and it's what lets the paragraphs run past the logo's
 * bottom edge at full measure instead of being boxed into a permanent second
 * column. `inline-start`, never `left` — CLAUDE.md §4 — so RTL puts it on the
 * right without a `row-reverse`-style branch. */
@media screen and (min-width: 48rem) {
  .sky-story--with-logo .sky-story__logo {
    float: inline-start;
    margin-inline: 0 var(--sky-space-xl);
    margin-block-end: var(--sky-space-md);
  }

  .sky-story--with-logo .sky-head,
  .sky-story--with-logo .sky-story__body {
    text-align: start;
  }

  /* Contain the float — otherwise a copy block shorter than the logo (never
   * happens with real paragraphs, but don't rely on that) leaves the next
   * section's rhythm gap measured from the wrong edge. */
  .sky-story--with-logo .sky-story__copy::after {
    content: '';
    display: table;
    clear: both;
  }
}

/* Desktop only — match the sky-wrap width every sibling section around it
 * uses. Mobile/tablet keep the narrower measure. */
@media screen and (min-width: 62rem) {
  .sky-story.sky-wrap--narrow {
    max-inline-size: var(--sky-wrap);
  }
}

/* ══ single full-width image band — skydesign-image.liquid ═══════════════ */

.sky-image__plate {
  block-size: clamp(30rem, 56svh, 48rem);
}

/* ══ F6 · product card grid — no badges, no inline add-to-cart. 1-up straight to
 * 3-up; a 2-up step orphans the third card. design.md §11. ══ */

.sky-grid {
  display: grid;
  gap: var(--sky-space-lg) var(--sky-space-md);
  grid-template-columns: minmax(0, 1fr);
  margin: 0;
  padding: 0;
  list-style: none;
}

@media screen and (min-width: 44rem) {
  .sky-grid {
    grid-template-columns: repeat(var(--sky-grid-columns, 3), minmax(0, 1fr));
  }
}

/* Home fan grid only (skydesign-product-grid.liquid) — below 44rem the 3-up
 * grid becomes a peek-and-snap scroll strip instead of stacking 1-up. No
 * dots, arrows or autoplay: same shape as the works filmstrip, so it stays
 * inside §3's "carousel of equal tiles" ban. Contained in .sky-wrap, never
 * full-bleed — design.md §9's scrollWidth gate. design.md §3, §11. */
.sky-grid--peek {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}

.sky-grid--peek .sky-card {
  flex: 0 0 82%;
  scroll-snap-align: start;
}

@media screen and (min-width: 44rem) {
  .sky-grid--peek {
    display: grid;
    overflow-x: visible;
    scroll-snap-type: none;
  }

  .sky-grid--peek .sky-card {
    flex: initial;
  }
}

.sky-card {
  position: relative;
}

.sky-card__link {
  color: inherit;
  text-decoration: none;
  display: block;
}

.sky-card__img {
  overflow: hidden;
}

/* 4/3 LANDSCAPE, and `contain` — never `cover`. Nothing is ever cut, whatever
 * ratio the owners upload next. Do not restore a cropped portrait plate.
 * design.md §11.
 *
 * `padding-block-end`, not `aspect-ratio`: WebKit doesn't reliably resolve a
 * percentage `max-block-size` on a child (below) against a box whose own
 * height comes from `aspect-ratio` — confirmed live on Safari, where the cap
 * silently no-ops. The percentage-padding box is the same trick Dawn's own
 * `.media--landscape` etc. already use for exactly this reason. */
.sky-card__img .sky-plate {
  padding-block-end: 75%;
  box-sizing: border-box;
  transition: transform var(--sky-dur-mid) var(--sky-ease-out);
}

/* Paper, NOT sand — the ground shows around a fitted shot and the cut-outs sit
 * on #F7F7F7. The placeholder field keeps its sand tone; that one is meant to
 * be seen. design.md §11. */
.sky-card__img .sky-plate--has-image {
  background: var(--sky-paper);
}

/* Must be `inset`, not padding on the parent: an abs-positioned child
 * resolves against the PADDING BOX, so padding on `.sky-plate--has-image`
 * itself would be invisible to it. `max-block-size` caps how much of the
 * frame a portrait-ish shot is allowed to fill — without it `contain` lets a
 * photo whose own ratio is close to the box's run edge to edge, reading as
 * clipped even though nothing is cut. `max-inline-size` is the same cap on
 * the OTHER axis: capping only block-size stops a tall shot filling the
 * width, but a shot wider than the box (Prop's) is inline-constrained, not
 * block-constrained, so it fills edge to edge unless the inline axis is
 * capped too — see design.md §8. Both caps need BOTH `margin-block: auto`
 * and `margin-inline: auto` to re-centre; auto margins on an absolutely
 * positioned element centre it, unlike on a static one. Skipping
 * `margin-inline` here is what left Stick's card visibly off-centre under
 * its (correctly centred) title. */
.sky-card__img .sky-plate--has-image img {
  position: absolute;
  inset: var(--sky-space-md);
  inline-size: auto;
  block-size: auto;
  max-block-size: 70%;
  max-inline-size: 70%;
  margin-block: auto;
  margin-inline: auto;
  object-fit: contain;
}

/* Hooked to the LINK, not the list item — the anchor is the one element the
   home grid and the collection grid have in common. */
.sky-card__link:hover .sky-card__img .sky-plate {
  transform: scale(1.022);
}

/* Column, not row — a row wrapped the price onto its own line only when the
 * title was long enough to push it there, so the price sat beside the name
 * on short titles and below it on long ones. Always-column keeps it below,
 * every card, every title length. */
.sky-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--sky-space-sm);
  padding-block-start: var(--sky-space-sm);
}

.sky-card__title {
  margin: 0;
  font-size: var(--sky-text-base);
  font-weight: 600;
  line-height: 1.35;
}

.sky-card__spec {
  margin: var(--sky-space-2xs) 0 0;
  font-size: var(--sky-text-sm);
  color: var(--sky-sand-deep);
}

/* Section-local, not part of the shared card — skydesign-quote-product-grid.liquid.
 * Sits outside the card's <a>, directly under it in the DOM, so this is plain
 * block flow rather than a slot inside .sky-card__body's flexbox. */
.sky-card__description {
  margin: var(--sky-space-sm) 0 0;
  font-size: var(--sky-text-sm);
  line-height: 1.5;
  color: var(--sky-ink);
}

.sky-card__description p {
  margin: 0;
}

.sky-card__description p + p {
  margin-block-start: var(--sky-space-2xs);
}

/* Opt-in via section setting — skydesign-quote-product-grid.liquid's
 * "center_content". Do not change the defaults above: skydesign-card-product
 * is shared with the collection grid, search and the home grid. */
.sky-fans--center .sky-card__body {
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.sky-fans--center .sky-card__description {
  text-align: center;
}

.sky-card__price {
  margin: 0;
  font-size: var(--sky-text-base);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* No sale colour — §3 bans urgency signalling. design.md §4. */
.sky-card__price--was {
  font-weight: 400;
  color: var(--sky-sand-deep);
  text-decoration: line-through;
  margin-inline-end: var(--sky-space-xs);
}

/* ══ Quote-only products — browsable, never purchasable ══════════════════════
 *
 * The line stands IN the price slot rather than removing it: the grid's rhythm
 * comes from every card carrying the same rows, and a missing row would leave
 * quote-only cards visibly short next to fans. docs/quote-only-products.md.
 *
 * --sky-sand-deep (5.44:1 on paper), never the taupe — CLAUDE.md §7 bans
 * #9E9385 as a text colour outright, at any size. */
.sky-quote-price {
  font-weight: 400;
  color: var(--sky-sand-deep);
}

/* The priced card sets `white-space: nowrap` so ₪1,299 cannot break mid-number.
 * A sentence has to be allowed to wrap, so this undoes it. */
.sky-card__price--quote {
  white-space: normal;
  font-size: var(--sky-text-sm);
}

/* Dawn's .price--large sizes .price-item, which this is not. */
.price--quote .sky-quote-price {
  font-size: var(--sky-text-lg);
}

/* The quote block replaces the whole buy box, so it has to carry that much
 * weight — a bare link left a hole where the price, quantity and button were.
 *
 * Outlined on paper, never filled: §3 bans filled blocks in editorial contexts,
 * and --sky-sand-deep is 5.44:1 so the border also clears WCAG 1.4.11's 3:1 for
 * the one thing identifying the module. */
.sky-quote {
  display: block;
  margin-block-start: var(--sky-space-lg);
  padding: var(--sky-space-lg);
  border: var(--sky-rule-width) solid var(--sky-sand-deep);
}

.sky-quote__intro {
  margin: 0;
  max-inline-size: var(--sky-measure);
  font-size: var(--sky-text-base);
  line-height: 1.55;
  color: var(--sky-ink);
}

/* The configuration readout. This is the customer confirming what they are
 * about to be quoted on, so it reads as a spec table, not as form output. */
.sky-quote__config-label {
  margin: var(--sky-space-lg) 0 0;
  font-size: var(--sky-text-xs);
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--sky-sand-deep);
}

.sky-quote__config {
  margin: var(--sky-space-sm) 0 0;
  padding: 0;
  border-block-start: var(--sky-rule-width) solid var(--sky-rule);
}

.sky-quote__row {
  display: flex;
  gap: var(--sky-space-md);
  justify-content: space-between;
  align-items: baseline;
  padding-block: var(--sky-space-sm);
  border-block-end: var(--sky-rule-width) solid var(--sky-rule);
}

.sky-quote__row dt {
  font-size: var(--sky-text-sm);
  color: var(--sky-sand-deep);
}

/* 600 so the chosen value reads as the answer, not as more label. */
.sky-quote__row dd {
  margin: 0;
  font-size: var(--sky-text-sm);
  font-weight: 600;
  color: var(--sky-ink);
  text-align: end;
}

.sky-quote__cta {
  margin-block-start: var(--sky-space-md);
}

/* ══ Arriving at the lead form from a quote-only PDP ═════════════════════════
 *
 * The customer already made a choice on the product page. This shows it back to
 * them so they do not retype it into the message box — and so the form does not
 * look like it forgot. Read-only by design; see the section comment.
 *
 * Ink ground, not paper: this is the one block on the page that is NOT the form,
 * and the inversion says "we already have this" without adding a heading. It is
 * not a filled BUTTON, so §3's ban does not apply — that rule is about CTAs. */
.sky-quote-context {
  margin-block-end: var(--sky-space-xl);
  padding: var(--sky-space-lg);
  background: var(--sky-ink);
  color: var(--sky-paper);
}

.sky-quote-context[hidden] {
  display: none;
}

.sky-quote-context__label {
  margin: 0;
  font-size: var(--sky-text-xs);
  font-weight: 600;
  letter-spacing: 0.04em;
  /* Paper at 72% on ink still clears AA; the value below stays full strength. */
  opacity: 0.72;
}

.sky-quote-context__model {
  margin: var(--sky-space-2xs) 0 0;
  font-size: var(--sky-text-xl);
  font-weight: 600;
  line-height: 1.2;
}

.sky-quote-context__config {
  margin: var(--sky-space-md) 0 0;
  padding: 0;
}

.sky-quote-context__row {
  display: flex;
  gap: var(--sky-space-md);
  justify-content: space-between;
  align-items: baseline;
  padding-block: var(--sky-space-xs);
  /* Hairline on ink — currentColor at low alpha, so it tracks the ground. */
  border-block-end: var(--sky-rule-width) solid rgb(248 248 247 / 0.24);
}

.sky-quote-context__row:last-child {
  border-block-end: 0;
}

.sky-quote-context__row dt {
  font-size: var(--sky-text-sm);
  opacity: 0.72;
}

.sky-quote-context__row dd {
  margin: 0;
  font-size: var(--sky-text-sm);
  font-weight: 600;
  text-align: end;
}

/* .sky-link takes colour from currentColor, so the underline and arrow invert
 * with the block. Nothing to override. */
.sky-quote-context__back {
  margin-block-start: var(--sky-space-sm);
}

.sky-card__sold-out {
  margin: var(--sky-space-2xs) 0 0;
  font-size: var(--sky-text-sm);
  color: var(--sky-error);
}

.sky-grid__more {
  margin-block-start: var(--sky-space-xl);
}

/* ══ closing CTA — hanging head, band-scale body, C3 link. design.md §10. ══ */

.sky-cta__text {
  margin-block-start: var(--sky-space-sm);
  max-inline-size: var(--sky-measure);
}

.sky-cta__text p {
  margin: 0;
  font-size: var(--sky-text-xl);
  line-height: 1.5;
  letter-spacing: -0.004em;
  text-wrap: pretty;
}

.sky-cta__link {
  margin-block-start: var(--sky-space-lg);
}

/* ══ installer / shipping note — a referral, never a product. No price, no cart
 * affordance, no weight that reads as an add-on. design.md §2, §10. ══ */

.sky-note {
  display: grid;
  gap: var(--sky-space-xs) var(--sky-space-xl);
  grid-template-columns: repeat(auto-fit, minmax(min(20.8rem, 100%), auto));
  margin: 0;
  padding-block: var(--sky-space-xl);
  border-block: var(--sky-rule-width) solid var(--sky-rule);
}

.sky-note dt {
  font-size: var(--sky-text-sm);
  font-weight: 600;
}

.sky-note dd {
  margin: 0;
  font-size: var(--sky-text-sm);
  color: var(--sky-sand-deep);
  max-inline-size: 52ch;
}

/* ── the same list at body scale — TYPE ONLY. The hairlines, auto-fit columns and
 * sand-deep detail stay. lg not xl, 46ch not 52ch — choices, not arithmetic. design.md §11. ── */
.sky-note--body {
  gap: var(--sky-space-md) var(--sky-space-xl);
}

.sky-note--body dt {
  font-size: var(--sky-text-lg);
}

.sky-note--body dd {
  font-size: var(--sky-text-base);
  max-inline-size: 46ch;
}

/* A list of exactly 5 items doesn't divide evenly into the grid's usual
 * auto-fit tracks — every partial-row split tried here (fixed 3-up, a
 * flex-wrapped centred pair, 4-across with the 5th centred alone) read as
 * an orphan rather than a deliberate layout. Five straight across sidesteps
 * the problem instead of working around it. 1-up below 62rem; the same
 * breakpoint the collection grid uses to add a column (design.md §11).
 * Scoped to the 5-item case only — every other count keeps the documented
 * auto-fit behaviour untouched. */
.sky-note:has(> :nth-child(5):last-child) {
  grid-template-columns: minmax(0, 1fr);
}

@media screen and (min-width: 62rem) {
  .sky-note:has(> :nth-child(5):last-child) {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}

/* NOT .sky-link — that is the 16px C3 CTA with an arrow and a 44px min-height.
 * This is the note's own 13px scale, with the tap target bought back below.
 * design.md §10. */
.sky-note__link {
  /* inline-flex + min-block-size buys the 44px floor without moving the 13px
   * type. design.md §9. */
  /* `flex` + fit-content, not inline-flex: block-level puts the link on its own
   * line, and fit-content stops the 44px target spanning the full measure as an
   * invisible hit area. design.md §9. */
  display: flex;
  inline-size: fit-content;
  align-items: center;
  min-block-size: 4.4rem;
  margin-block-start: var(--sky-space-2xs);
  color: var(--sky-ink);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: var(--sky-rule);
  text-decoration-thickness: var(--sky-rule-width);
  text-underline-offset: 0.35em;
  transition: text-decoration-color var(--sky-dur-fast) var(--sky-ease-out);
}

.sky-note__link:hover {
  text-decoration-color: var(--sky-ink);
}

/* ══ installer directory — a real table (two axes). Hairline row rules only:
 * no decorative borders, no zebra striping. design.md §3, §10. ══ */

.sky-directory__intro {
  max-inline-size: var(--sky-measure);
  margin-block-end: var(--sky-space-xl);
}

.sky-directory__intro p {
  margin: 0;
  font-size: var(--sky-text-lg);
  line-height: 1.5;
  text-wrap: pretty;
}

/* Scroll the container rather than stacking: `display: block` on table elements
 * drops the row/column association assistive tech needs. design.md §10. */
.sky-directory__scroll {
  overflow-x: auto;
  overscroll-behavior-x: contain;
}

.sky-directory__table {
  inline-size: 100%;
  border-collapse: collapse;
  font-size: var(--sky-text-sm);
}

/* Gap scales with the viewport — two fixed 40px gaps would spend 80px of a
 * 320px screen on whitespace and wrap the name and area columns. */
/* `middle`, not `baseline` — the phone cell is a 44px target and the others are
 * one line, so baseline would hang them off the top of the row. */
.sky-directory__table th,
.sky-directory__table td {
  text-align: start;
  vertical-align: middle;
  padding-block: var(--sky-space-xs);
  padding-inline-end: clamp(var(--sky-space-md), 4vw, var(--sky-space-xl));
  border-block-end: var(--sky-rule-width) solid var(--sky-rule);
}

.sky-directory__table th:last-child,
.sky-directory__table td:last-child {
  padding-inline-end: 0;
}

/* The column heads are the only labelling the rows get, so they stay ink at
 * 600 rather than taking --sky-sand-deep the way .sky-spec__row dt does. */
.sky-directory__table thead th {
  font-weight: 600;
  white-space: nowrap;
}

.sky-directory__table tbody th {
  font-weight: 600;
}

.sky-directory__table tbody td {
  color: var(--sky-sand-deep);
}

/* tabular-nums so the numbers form a column; nowrap so a mobile number never
 * breaks across lines mid-dial-string. */
.sky-directory__phone {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* inline-flex + min-block-size for the 44px floor (design.md §9). Underlined
 * with text-decoration, not a border: on a 44px box a bottom border sits well
 * below the digits and reads as a cell rule. */
.sky-directory__phone a {
  display: inline-flex;
  align-items: center;
  min-block-size: 4.4rem;
  color: var(--sky-ink);
  text-decoration: underline;
  text-decoration-color: var(--sky-rule);
  text-decoration-thickness: var(--sky-rule-width);
  text-underline-offset: 0.35em;
  transition: text-decoration-color var(--sky-dur-fast) var(--sky-ease-out);
}

.sky-directory__phone a:hover {
  text-decoration-color: var(--sky-ink);
}

/* The list is not populated yet, so this is the state the page ships
 * in — a designed empty state, not a fallback (design.md §10). */
.sky-directory__empty p {
  margin: 0;
  max-inline-size: var(--sky-measure);
  font-size: var(--sky-text-base);
  line-height: 1.6;
  text-wrap: pretty;
}

.sky-directory__footnote {
  margin-block-start: var(--sky-space-xl);
}

.sky-directory__footnote p {
  margin: 0;
  max-inline-size: var(--sky-measure);
  font-size: var(--sky-text-xs);
  line-height: 1.6;
  color: var(--sky-sand-deep);
}

/* ══ custom-work panels — the second visual grammar. No price, no cart. Must
 * never be mistaken for the fans grid. design.md §2. ══ */

.sky-panels {
  display: grid;
  gap: var(--sky-space-md);
}

@media screen and (min-width: 62rem) {
  .sky-panels {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.sky-panel {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

/* "Coming soon" panel — block.settings.coming_soon. Gray the plate only, never
 * the copy: text stays full-contrast so the heading is still legible.
 * design.md contrast floor applies here same as anywhere else. */
.sky-panel--soon .sky-panel__plate {
  filter: grayscale(1);
}

/* The panel's `text` block doubles as the small "בקרוב" caption under the
 * heading for a coming-soon panel — same field, smaller size here only. */
.sky-panel--soon .sky-panel__text {
  font-size: var(--sky-text-sm);
}

.sky-panel__plate {
  block-size: clamp(32rem, 46svh, 43.2rem);
}

/* As with the hero: block-start padding is the scrim's fade zone, not ours. */
.sky-panel__copy {
  --sky-scrim-fade: 6.4rem;
  padding-inline: var(--sky-gutter);
  padding-block-end: var(--sky-space-xl);
}

.sky-panel__title {
  margin: 0;
  font-size: var(--sky-text-xl);
  font-weight: 600;
  line-height: 1.2;
}

.sky-panel__text {
  margin: var(--sky-space-xs) 0 0;
  font-size: var(--sky-text-base);
  color: oklch(90% 0.008 84);
  max-inline-size: 44ch;
  text-wrap: pretty;
}

.sky-panel .sky-link {
  margin-block-start: var(--sky-space-sm);
  color: var(--sky-paper);
}

/* ══ works filmstrip — NOT a carousel: no autoplay, no dots, no hidden state.
 * Keep it inside .sky-wrap or design.md §9's scrollWidth gate breaks. design.md §11. ══ */

.sky-works__strip {
  /* One slide width, used three times below — by the slides themselves and by
   * the two spacers that let the first and last of them reach the centre. */
  --sky-works-slide: clamp(26rem, 78vw, 76rem);

  display: flex;
  gap: var(--sky-space-md);
  /* The one physical property in this file, and it is deliberate: in a horizontal
   * writing mode the inline axis IS the x axis. `overflow-inline` is not yet
   * shippable. design.md §11. */
  overflow-x: auto;
  scroll-snap-type: inline mandatory;
  padding-block-end: var(--sky-space-2xs);
}

/* Spacers, so the FIRST and LAST work can also sit centred — without them there
 * is no scroll range before the first slide.
 * They must stay PSEUDO-ELEMENTS. A real element would be visible to
 * `strip.children` and would silently shift every slide index by one.
 * design.md §11. */
.sky-works__strip::before,
.sky-works__strip::after {
  content: '';
  flex: 0 0 auto;
  inline-size: max(0px, calc(50% - var(--sky-works-slide) / 2));
}

/* Everything below applies only once skydesign-works.js has taken over — the
 * class is added by the script. Without it the strip stays exactly what it was:
 * a scrollable filmstrip with spacers that stops at both ends. That is the
 * no-JS fallback, and it is the reason none of this lives in the base rules. */

/* THE STRIP IS DRIVEN BY ITS TWO BUTTONS AND NOTHING ELSE — owners' call
 * 2026-08-24. `overflow-x: hidden` still scrolls PROGRAMMATICALLY, so the
 * script moves it exactly as before; it only takes the gesture away. Do not put
 * `auto` back without asking: a gesture-driven loop has to cross its seam while
 * the visitor's momentum is still running, and that re-home is visible as a
 * jump. Snap goes with it — there is nothing left to snap, and mandatory snap
 * fights a programmatic smooth scroll. */
.sky-works--loop .sky-works__strip {
  overflow-x: hidden;
  scroll-snap-type: none;
}

/* The cloned works fill both ends, so a spacer would only put paper back beside
 * a slide — the thing the loop exists to remove.
 * `content: none` and NOT `inline-size: 0`: a zero-width box still collects the
 * flex `gap` on both sides, which leaves a sliver of paper before the first
 * work. Measured 2026-08-24. Removing the box removes its gaps with it. */
.sky-works--loop .sky-works__strip::before,
.sky-works--loop .sky-works__strip::after {
  content: none;
}

/* Deliberately NO `scroll-behavior: smooth`. It would hand smooth scrolling back
 * to reduced-motion users after the script opted them out. design.md §11. */

/* `center` MUST match the script's scrollIntoView({inline}). If they disagree,
 * the snap yanks the slide after the scroll and the strip jumps twice per
 * click. design.md §11. */
.sky-works__item {
  flex: 0 0 auto;
  inline-size: var(--sky-works-slide);
  margin: 0;
  scroll-snap-align: center;
}

.sky-works__plate {
  block-size: clamp(30rem, 44svh, 43.2rem);
}

/* Caption UNDER the photograph, never over it. Moving it onto the image owes a
 * .sky-scrim and a per-pixel measurement. design.md §8, §11. */
.sky-works__caption {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--sky-space-2xs) var(--sky-space-sm);
  margin-block-start: var(--sky-space-sm);
}

.sky-works__title {
  font-size: var(--sky-text-base);
  font-weight: 600;
  color: var(--sky-ink);
}

.sky-works__meta {
  font-size: var(--sky-text-sm);
  color: var(--sky-sand-deep);
}

/* `flex-end` rather than an inset property: in a row flex container it already
 * resolves against `direction`, so the controls sit at the inline-end. */
/* Centred, which also removes the last thing here that had to reason about
 * which edge is which. design.md §11. */
.sky-works__nav {
  display: flex;
  justify-content: center;
  gap: var(--sky-space-xs);
  margin-block-start: var(--sky-space-md);
}

/* 4.4rem square for §9's 44px floor.
 * The border is --sky-sand-deep, NOT --sky-rule. It is the only thing
 * identifying the control, so WCAG 1.4.11 applies and needs 3:1; --sky-rule is
 * ~1.2:1 on paper. design.md §11.
 */
.sky-works__step {
  display: flex;
  align-items: center;
  justify-content: center;
  inline-size: 4.4rem;
  block-size: 4.4rem;
  padding: 0;
  background: none;
  border: var(--sky-rule-width) solid var(--sky-sand-deep);
  color: var(--sky-ink);
  cursor: pointer;
  transition: border-color var(--sky-dur-fast) var(--sky-ease-out);
}

.sky-works__step:hover {
  border-color: var(--sky-ink);
}

.sky-works__step svg {
  inline-size: 2rem;
  block-size: 2rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ══ Dawn header · restyle, not a rebuild — Dawn owns the drawer, predictive
 * search, cart drawer and focus management. design.md §10. ══ */

.header {
  font-family: var(--sky-font);
  padding-block: var(--sky-space-lg);
  border-block-end: var(--sky-rule-width) solid var(--sky-rule);
}

.header__menu-item {
  font-size: var(--sky-text-sm);
  font-weight: 400;
  letter-spacing: 0.01em;
  padding-inline: var(--sky-space-sm);
  /* min-block-size, not more padding, so the fix IS the floor and can't drift
     when the type scale moves. The header does not get taller — the wordmark
     link is already pinned to 4.4rem and sets the row height. design.md §9. */
  min-block-size: 4.4rem;
}

/* Dawn's search-modal close button measured 20 WIDE × 44 tall — measure both
   axes. `body ` prefix is load-bearing here and NOT on the rule above:
   component-search.css loads inside <body>, base.css does not. design.md §10. */
body .search-modal__close-button {
  min-inline-size: 4.4rem;
}

/* MEASURE THE DRAWER OPEN — shut, this element reports 39×147 and any sweep is
   measuring nothing. `body ` prefix: component-menu-drawer.css is body-loaded.
   design.md §9, §10. */
body .menu-drawer__account {
  min-block-size: 4.4rem;
  align-items: center;
}

/* Hairline underline, not text-decoration — design.md §3. */
.header__menu-item:hover span,
.header__menu-item:focus-visible span {
  text-decoration: none;
  border-block-end: var(--sky-rule-width) solid currentColor;
}

/* "Coming soon" nav item — header-dropdown-menu.liquid / header-drawer.liquid
 * render a plain, unlinked <span> for any top-level link whose URL is "#".
 * --sky-sand-deep, never the taupe itself — CLAUDE.md §7 bans #9E9385 as text
 * at any size. */
.header__menu-item--disabled,
.menu-drawer__menu-item--disabled {
  color: var(--sky-sand-deep);
  cursor: default;
}

/* Desktop: the item stacks main label over the smaller "Sub" line, centered
 * in the same nav slot every other item occupies. */
.header__menu-item--disabled {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  line-height: 1.15;
  text-align: center;
}

/* Drawer: items are already a vertical list — just drop the sub label onto
 * its own line below the main one, no flex needed.
 * Deliberately smaller than --sky-text-xs (the token floor) and faded via
 * opacity, not a lighter color value — §7 bans anything lighter than
 * --sky-sand-deep as text. Opacity is fine here specifically because this
 * caption sits inside an aria-disabled item; WCAG exempts inactive controls
 * from the contrast floor that applies everywhere else. */
.header__menu-item-sub,
.menu-drawer__menu-item-sub {
  display: block;
  font-size: 1rem;
  font-weight: 400;
  opacity: 0.65;
}

.header__heading-logo {
  block-size: auto;
}

/* Padding the link rather than scaling the logo, so the lockup is unchanged.
   design.md §9. */
.header__heading-link {
  display: inline-flex;
  align-items: center;
  min-block-size: 4.4rem;
}

/* ══ Dawn footer · nudged toward Ft1 mast-headed ══════════════════════════ */

.footer {
  font-family: var(--sky-font);
  border-block-start: var(--sky-rule-width) solid var(--sky-rule);
}

.footer__content-bottom {
  border-block-start: var(--sky-rule-width) solid var(--sky-rule);
}

.footer__copyright,
.footer-block__details p {
  font-size: var(--sky-text-xs);
  color: var(--sky-sand-deep);
}

/* ── The legal row — six links at 13px, two columns below 750px and Dawn's
 * inline run above. A layout change, not a size change: six stacked 44px links
 * would be a 264px legal block on a 320px screen. section-footer.css is
 * body-loaded, so every Dawn selector here needs the `body ` prefix. design.md §10. ── */

/* --sky-text-sm, the size the spec line and card meta already use. */
body .copyright__content {
  font-size: var(--sky-text-sm);
}

/* Start-alignment: same result in RTL, holds both columns to a common edge, and
   degrades correctly if Sense RTL fails to load. CLAUDE.md §4. */
body .footer__copyright,
body
  .footer__content-bottom-wrapper:not(.footer__content-bottom-wrapper--center)
  .footer__copyright {
  text-align: start;
}

/* Let it wrap, and centre it — Dawn holds this row nowrap, and `align-items`
   stretch misaligns the two <small> credits against the links. Both measured
   live. This row is only a flex container because Sense RTL makes it one, so
   every declaration here is inert if that stops being true. design.md §10. */
body .footer__copyright {
  flex-wrap: wrap;
  align-items: center;
  column-gap: var(--sky-space-sm);
  row-gap: var(--sky-space-2xs);
}

body .policies {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--sky-space-lg);
  flex-basis: 100%;
  margin-block-start: var(--sky-space-2xs);
}

body .policies li {
  display: block;
}

/* The grid's columns separate the links, so Dawn's middot is dropped there. */
body .policies li::before {
  content: none;
}

body .policies li a {
  display: flex;
  align-items: center;
  min-block-size: 4.4rem;
  padding: 0;
}

@media screen and (min-width: 750px) {
  body .policies {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    column-gap: 0;
    flex-basis: auto;
    margin-block-start: 0;
  }

  body .policies li {
    display: inline-flex;
    align-items: center;
  }

  body .policies li::before {
    content: '\00B7';
    padding-inline: var(--sky-space-xs);
  }
}

/* ══ collection template · Dawn restyled into the F6 grammar. design.md §10.
 * Dawn's facet POSITIONING is deliberately untouched — physical properties
 * Sense RTL flips with !important, and the flipped result is already correct.
 * ══ EVERY DAWN SELECTOR BELOW CARRIES A `body ` PREFIX ══
 * Dawn's SECTION stylesheets are emitted inside <body> and land AFTER us, so an
 * equal-specificity Dawn rule wins on source order here — inverting the
 * assumption that holds elsewhere in this file. Six rules were silently losing
 * before the prefix. Do NOT reach for !important. A new rule targeting a Dawn
 * class needs the prefix too.
 */

/* Held at the same measure as the rest of the storefront. */
body .collection-hero__inner,
body .facets-wrapper.page-width,
body .collection.page-width {
  max-inline-size: var(--sky-wrap);
  padding-inline: var(--sky-gutter);
}

/* Padding sliders are 0 in templates/collection.json so the interval is owned
   here, in the same token as the rest of the vertical rhythm. design.md §10. */
body .collection {
  padding-block-end: var(--sky-space-3xl);
}

/* ── S2 hanging head — a photographic fold would borrow the custom-work grammar
 * and push 20 fans below the fold. `show_collection_image` stays off. design.md §11. ── */
body .collection-hero {
  font-family: var(--sky-font);
  color: var(--sky-ink);
}

body .collection-hero__inner {
  display: block;
  padding-block: var(--sky-space-3xl) 0;
}

/* Class specificity on purpose — Dawn sets `color` on the h1 ELEMENT selector.
   design.md §6. */
body .collection-hero__title {
  margin: 0;
  color: var(--sky-ink);
  font-size: var(--sky-text-2xl);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.008em;
  text-wrap: balance;
  overflow-wrap: anywhere;
  min-inline-size: 0;
}

/* Compound selector is not decoration — Dawn styles this at (0,2,0). */
body .collection-hero__description,
body .collection-hero__title + .collection-hero__description {
  margin: var(--sky-space-2xs) 0 0;
  max-inline-size: var(--sky-measure);
  font-size: var(--sky-text-sm);
  line-height: 1.5;
  color: var(--sky-sand-deep);
  text-wrap: pretty;
}

body .collection-hero__description > *:last-child {
  margin-block-end: 0;
}

/* ── the filter row — one hairline-separated line, not a second navigation.
 * Sorting is OFF in templates/collection.json; the styling is kept so flipping
 * it back on yields a styled control. design.md §1, §10. ── */
body .facets-wrapper {
  font-family: var(--sky-font);
  color: var(--sky-ink);
  margin-block: var(--sky-space-xl) var(--sky-space-lg);
}

/* Decorative — separates content blocks, identifies no control, so no 3:1 floor
   applies. The control boundaries below are the ones on it. design.md §9. */
body .facets__form {
  padding-block-end: var(--sky-space-sm);
  border-block-end: var(--sky-rule-width) solid var(--sky-rule);
}

/* These ARE controls, so WCAG 1.4.11's 3:1 floor applies: --sky-sand-deep
   (5.44:1), never --sky-sand (2.84:1). design.md §10. */
body .facet-filters__sort,
body .facet-filters__sort:hover,
body .facets__summary {
  font-family: inherit;
  font-size: var(--sky-text-sm);
  color: var(--sky-ink);
  background: none;
  border: 0;
  border-block-end: var(--sky-rule-width) solid var(--sky-sand-deep);
  border-radius: 0;
  transition: border-color var(--sky-dur-fast) var(--sky-ease-out);
}

body .facet-filters__sort:hover,
body .facets__summary:hover,
body .facets__disclosure[open] .facets__summary {
  border-block-end-color: var(--sky-ink);
}

/* min-inline-size AS WELL AS min-block-size — a short filter name ("גימור")
   measured 43.9px wide while passing on height. design.md §9. */
body .facets__summary,
body .facet-filters__field .select,
body .facet-filters__sort {
  display: flex;
  align-items: center;
  min-block-size: 4.4rem;
  min-inline-size: 4.4rem;
}

body .facet-filters__label,
body .facets__heading {
  font-size: var(--sky-text-sm);
  font-weight: 400;
  color: var(--sky-sand-deep);
}

/* Hairline underline, matching the rest of the system. */
body .facets__summary:hover .facets__summary-label {
  text-decoration: none;
}

/* Popup panel. Border only — the system has no shadows and no corner radius. */
body .facets__display {
  border-color: var(--sky-sand-deep);
  border-radius: 0;
  box-shadow: none;
  background: var(--sky-paper);
}

body .facets__header {
  font-size: var(--sky-text-sm);
  border-block-end: var(--sky-rule-width) solid var(--sky-rule);
  background: var(--sky-paper);
}

body .facets__label {
  font-size: var(--sky-text-sm);
  min-block-size: 4.4rem;
}

body .product-count__text,
body .product-count-vertical .product-count__text {
  font-size: var(--sky-text-sm);
  font-weight: 400;
  color: var(--sky-sand-deep);
}

/* Outlined, never filled — a row of filled pills reads as badges (§3). */
body .active-facets__button-inner {
  font-size: var(--sky-text-sm);
  font-weight: 400;
  color: var(--sky-ink);
  background: none;
  border: var(--sky-rule-width) solid var(--sky-sand-deep);
  border-radius: 0;
  box-shadow: none;
  min-block-size: 4.4rem;
}

body .active-facets__button-remove {
  font-size: var(--sky-text-sm);
  color: var(--sky-sand-deep);
}

/* Mobile filter trigger — the only facet control small screens get. */
body .mobile-facets__open-label {
  font-family: var(--sky-font);
  font-size: var(--sky-text-sm);
}

body .mobile-facets__open-wrapper {
  min-block-size: 4.4rem;
}

/* ── the grid — CSS grid, not Dawn's flex percentages, so a card is the same
 * width here and on the home page. 2 → 4 columns. design.md §11. ── */
body .collection .product-grid {
  display: grid;
  gap: var(--sky-space-lg) var(--sky-space-md);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
}

@media screen and (min-width: 44rem) {
  body .collection .product-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* Neutralises Dawn's flex-basis maths, logically. */
body .collection .product-grid > .grid__item {
  position: relative;
  inline-size: auto;
  max-inline-size: none;
}

.sky-card__component {
  display: block;
}

/* ── pagination — typographic, like every other link. The current page carries
 * the same hairline the nav uses on hover. ── */
body .pagination-wrapper {
  margin-block-start: var(--sky-space-2xl);
}

body .pagination__item {
  font-family: var(--sky-font);
  font-size: var(--sky-text-sm);
  color: var(--sky-ink);
  min-inline-size: 4.4rem;
  min-block-size: 4.4rem;
}

body .pagination__item--current::after,
body .pagination__item:hover::after {
  border-block-end: var(--sky-rule-width) solid currentColor;
}

/* ── empty state — hangs from the inline-start edge; Dawn centres it, and a lone
 * centred block reads as an error page. ── */
body .collection--empty .title-wrapper {
  text-align: start;
  margin-block: var(--sky-space-2xl);
}

body .collection--empty .title--primary {
  font-family: var(--sky-font);
  font-size: var(--sky-text-xl);
  font-weight: 400;
  color: var(--sky-ink);
  line-height: 1.5;
  max-inline-size: var(--sky-measure);
  text-wrap: pretty;
}

/* ══ lead form — the one place a filled button is allowed (a form control is not
 * an editorial context). Inputs are ONE block-end hairline, never a box. design.md §10. ══ */

/* <sky-lead-form> is a custom element, and custom elements default to
 * display: inline — where max-inline-size does nothing at all. This rule is
 * load-bearing, not cosmetic. */
.sky-form {
  display: block;
  max-inline-size: 63rem;
}

.sky-form__intro {
  margin-block-end: var(--sky-space-xl);
  max-inline-size: var(--sky-measure);
}

.sky-form__intro p {
  margin: 0;
  font-size: var(--sky-text-lg);
  line-height: 1.55;
  text-wrap: pretty;
}

.sky-form__fields {
  display: grid;
  gap: var(--sky-space-lg) var(--sky-space-xl);
  grid-template-columns: repeat(auto-fit, minmax(min(24rem, 100%), 1fr));
}

.sky-form__field {
  display: flex;
  flex-direction: column;
  gap: var(--sky-space-2xs);
  margin: 0;
  min-inline-size: 0;
}

.sky-form__field--wide {
  grid-column: 1 / -1;
}

.sky-form__field label {
  font-size: var(--sky-text-sm);
  font-weight: 600;
}

.sky-form__field input,
.sky-form__field textarea {
  font-family: inherit;
  font-size: var(--sky-text-base);
  color: var(--sky-ink);
  background: none;
  border: 0;
  /* NOT --sky-sand. This underline is the only thing identifying the control, so
   * WCAG 1.4.11 puts it on a 3:1 floor; taupe on paper is 2.84:1 and fails,
   * --sky-sand-deep is 5.44:1. The decorative hairline (--sky-rule, .sky-note)
   * is a different case and carries no floor. design.md §10.
   */
  border-block-end: var(--sky-rule-width) solid var(--sky-sand-deep);
  border-radius: 0;
  padding: var(--sky-space-xs) 0;
  inline-size: 100%;
  transition: border-color var(--sky-dur-fast) var(--sky-ease-out);
}

.sky-form__field textarea {
  resize: vertical;
  min-block-size: 9rem;
}

/* Logical longhand, not the shorthand — this file's contract is zero physical
 * properties. CLAUDE.md §4. */
.sky-form__field input:hover,
.sky-form__field textarea:hover,
.sky-form__field input:focus,
.sky-form__field textarea:focus {
  border-block-end-color: var(--sky-ink);
}

/* The inputs carry dir="ltr" for the digits; the LABEL stays in the paragraph
 * direction and the field still sits at the inline-start edge. CLAUDE.md §4. */
.sky-form__field input[dir='ltr'] {
  text-align: start;
}

.sky-form__hint {
  font-size: var(--sky-text-xs);
  color: var(--sky-sand-deep);
}

.sky-form__submit {
  margin-block-start: var(--sky-space-xl);
  font-family: inherit;
  font-size: var(--sky-text-base);
  font-weight: 600;
  color: var(--sky-paper);
  background: var(--sky-ink);
  border: 0;
  border-radius: 0;
  padding: var(--sky-space-sm) var(--sky-space-xl);
  cursor: pointer;
  min-block-size: 4.4rem;
  transition: opacity var(--sky-dur-fast) var(--sky-ease-out);
}

.sky-form__submit:hover {
  opacity: 0.86;
}

.sky-form__status {
  margin: 0 0 var(--sky-space-lg);
  font-size: var(--sky-text-base);
  padding-inline-start: var(--sky-space-md);
  border-inline-start: 2px solid currentcolor;
}

.sky-form__status--ok {
  color: var(--sky-success);
}

.sky-form__status--error {
  color: var(--sky-error);
}

.sky-form__status ul {
  margin: var(--sky-space-2xs) 0 0;
  padding-inline-start: var(--sky-space-md);
  font-size: var(--sky-text-sm);
}

.sky-form__status p {
  margin: 0;
}

/* ══ product template · Dawn restyled into the PDP grammar. design.md §10.
 * EVERY selector below that targets a DAWN class carries a `body ` prefix —
 * main-product.liquid emits ten stylesheets from inside <body>, so an
 * equal-specificity Dawn rule wins on source order. NOT !important. Selectors
 * on our own classes (.sky-spec*) need no prefix.
 */

/* ── the two-column frame — the media column scrolls, the buy box stays. design.md §10. ── */

body .product {
  gap: var(--sky-space-xl);
}

@media screen and (min-width: 990px) {
  body .product {
    gap: clamp(var(--sky-space-xl), 5vw, var(--sky-space-2xl));
  }
}

body .product__info-container {
  max-inline-size: 42rem;
}

/* The `align-self` is required — without it the buy box stretches to the media
 * column's height and sticky has nothing to travel inside. design.md §10. */
@media screen and (min-width: 990px) {
  body .product__column-sticky {
    inset-block-start: var(--sky-space-lg);
    align-self: start;
  }
}

/* ── media — one slider at every width, no thumbnail strip. DO NOT restore Dawn's
 * `stacked` layout: it lays shots two-up on a calc assuming an 8px gap and wraps
 * them at half width. `slider--everywhere` is the class buying this. design.md §10. ── */

body .product__media-wrapper {
  min-inline-size: 0;
}

/* Mobile keeps the interval because mobile keeps the peek. Above 750px the gap
 * is zeroed, and that is behaviour rather than looks — see the arrow row. */
body .product__media-list {
  gap: var(--sky-space-md);
}

body .product__media-item {
  min-inline-size: 0;
}

/* Fixed 3/2, fitted, on paper — the ratio the owners shoot to (1536×1024). A box
 * taking each shot's own ratio changes height per slide and the page jumps on
 * every arrow press. Deliberately NOT the card's 4/3 any more. design.md §10.
 * `body ` is NOT enough here: Dawn's `.product-media-container .media` is
 * (0,2,0) and `body .product__media` is (0,1,1). Naming the container gets this
 * to (0,2,1). design.md §10.
 *
 * `padding-block-end`, not `aspect-ratio`: WebKit doesn't reliably resolve a
 * percentage `max-block-size` on a child (below) against a box whose own
 * height comes from `aspect-ratio` — confirmed live on Safari, where the cap
 * silently no-ops. The percentage-padding box is the same trick Dawn's own
 * `.media--landscape` etc. already use for exactly this reason; it gives
 * every browser a definite height to resolve the child's percentage against.
 *
 * MUST be `padding-block-start`, not `-end`: Dawn's own rule on this element
 * sets `padding-top` from the shot's own ratio (`--ratio-percent`). `-start`
 * maps to the same physical `padding-top`, so our higher-specificity value
 * REPLACES Dawn's. `-end` maps to `padding-bottom` — a different property —
 * so it doesn't override anything; it stacks on top of Dawn's padding-top,
 * roughly doubling the box for any shot whose own ratio isn't already 4/3
 * (portrait shots worst of all). That's what pushed Stick's image down the
 * page: confirmed live, the box was 1146px tall against an intended 536px. */
body .product-media-container .product__media {
  padding-block-start: 66.6667%;
  background: var(--sky-paper);
}

/* No border, radius or shadow — the image edge IS the divider (design.md §3). */
body .product__media,
body .product-media-container.constrain-height .product__media,
body .product__media-item .global-media-settings {
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

/* `contain`, never `cover`, edge to edge: a 3/2 shot fills the box exactly, and
 * anything else letterboxes on paper instead of being cut. No inset and no 70%
 * cap here — those were for cut-outs and shrank a full-bleed photo to a stamp
 * (owners, 2026-09-23). The CARD keeps both. Needs the container class — Dawn's
 * `:not()` chain is (0,3,0). design.md §10. */
body .product-media-container .product__media > img {
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  object-fit: contain;
}

/* The placeholder plate. Ours, hence no prefix. design.md §10. */
.sky-pdp__plate {
  aspect-ratio: 3 / 4;
}

/* ── the slider — one slide above 750px; below it the mobile carousel is untouched. design.md §10. ── */
@media screen and (min-width: 750px) {
  body .product__media-list .product__media-item {
    inline-size: 100%;
    max-inline-size: 100%;
  }
}

/* `slider--everywhere` re-snaps to CENTER. Identical to `start` at full width,
 * but visibly different on mobile where there is a peek — so `start` goes back
 * below 750px and the mobile carousel is untouched. design.md §10. */
@media screen and (max-width: 749px) {
  body .product__media-list.slider--everywhere .slider__slide {
    scroll-snap-align: start;
  }
}

/* ── the arrow row ────────────────────────────────────────────────────────
 * Dawn hides this in TWO separate places above 750px and `slider--everywhere`
 * clears only one. Both overrides below are needed — removing either hides the
 * arrows again.
 * ZEROING THE GAP IS BEHAVIOUR, NOT LOOKS. SliderComponent divides by slide
 * width PLUS gap; at 16px that floors slidesPerPage to 0, so the counter read
 * "1 / 4" for three shots and every arrow press drifted off the snap points.
 * design.md §10.
 */
@media screen and (min-width: 750px) {
  body .product__media-wrapper .slider--everywhere + .slider-buttons {
    display: flex;
  }

  body .product__media-wrapper .slider-mobile-gutter .slider-button {
    display: flex;
  }

  body .product__media-list.slider--everywhere {
    gap: 0;
  }
}

/* The counter is KEPT — with no thumbnail strip it is the only thing telling
 * you how many shots there are. design.md §10. */
body .product__media-wrapper .slider-buttons {
  gap: var(--sky-space-xs);
  margin-block-start: var(--sky-space-sm);
}

body .product__media-wrapper .slider-button {
  color: var(--sky-ink);
}

/* Sand-deep clears 1.4.11's 3:1 even in the disabled state. design.md §10. */
body .product__media-wrapper .slider-button[disabled] {
  color: var(--sky-sand-deep);
  opacity: 0.45;
  cursor: default;
}

body .product__media-wrapper .slider-counter {
  color: var(--sky-sand-deep);
  font-size: var(--sky-text-sm);
}

/* ── head — class specificity on purpose; Dawn sets `color` on h1–h5 directly.
 * design.md §6. ── */

body .product__title,
body .product__title > h1,
body .product__title > a {
  margin: 0;
  font-family: var(--sky-font);
  font-size: var(--sky-text-2xl);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.01em;
  color: var(--sky-ink);
  text-wrap: balance;
  overflow-wrap: anywhere;
  min-inline-size: 0;
}

/* Same snippet as the card — one implementation. design.md §10. */
.sky-pdp__spec {
  margin: var(--sky-space-2xs) 0 0;
  font-size: var(--sky-text-sm);
  color: var(--sky-sand-deep);
}

/* ── price — stated, not shouted. No sale colour in the token set. design.md §4. ── */

body .product__info-container .price {
  font-family: var(--sky-font);
  font-size: var(--sky-text-xl);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0;
  color: var(--sky-ink);
  font-variant-numeric: tabular-nums;
}

body .product__info-container .price--on-sale .price-item--regular {
  font-size: var(--sky-text-base);
  font-weight: 400;
  color: var(--sky-sand-deep);
  text-decoration: line-through;
}

body .product__info-container .price-item--sale,
body .product__info-container .price-item--last {
  color: var(--sky-ink);
}

/* Badges are §3's first banned entry. Safe to `display: none` HERE — unlike the
 * collection card's, these are plain spans, not wired into an accessible name.
 * The sold-out state still reaches assistive tech via the disabled submit
 * button. design.md §10. */
body .product__info-container .price__badge-sale,
body .product__info-container .price__badge-sold-out {
  display: none;
}

body .product__tax {
  margin-block-start: var(--sky-space-2xs);
  font-size: var(--sky-text-xs);
  color: var(--sky-sand-deep);
}

body .product__tax a {
  color: inherit;
}

body .product__inventory {
  margin-block-start: var(--sky-space-md);
  font-size: var(--sky-text-sm);
  color: var(--sky-sand-deep);
}

/* ── variant picker — two shapes, because Dawn picks between them at render
 * time. Both are styled, so a second axis later yields a designed control. ── */

body .product-form__input {
  margin-block: var(--sky-space-lg) 0;
  padding: 0;
  max-inline-size: none;
}

body .product-form__input .form__label,
body .product__info-container .form__label {
  font-family: var(--sky-font);
  font-size: var(--sky-text-sm);
  font-weight: 600;
  color: var(--sky-ink);
  margin-block-end: var(--sky-space-xs);
  padding: 0;
}

/* `gap`, not Dawn's physical per-label margin — a left/right rule in an RTL
 * storefront is exactly what CLAUDE.md §4 keeps out of this file. `sm` leaves
 * room for the 3px selected ring. */
body .product-form__input--pill,
body .product-form__input--swatch {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sky-space-sm);
}

/* Selected fills ink/paper — §4's button mapping. A form control is not an
 * editorial context. design.md §10. */
body .product-form__input--pill input[type='radio'] + label {
  margin: 0;
  font-family: var(--sky-font);
  font-size: var(--sky-text-sm);
  color: var(--sky-ink);
  background: none;
  border: var(--sky-rule-width) solid var(--sky-sand-deep);
  border-radius: 0;
  min-block-size: 4.4rem;
  min-inline-size: 4.4rem;
  padding-inline: var(--sky-space-md);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background-color var(--sky-dur-fast) var(--sky-ease-out),
    color var(--sky-dur-fast) var(--sky-ease-out);
}

body .product-form__input--pill input[type='radio'] + label:hover {
  border-color: var(--sky-ink);
}

body .product-form__input--pill input[type='radio']:checked + label {
  background: var(--sky-ink);
  color: var(--sky-paper);
  border-color: var(--sky-ink);
}

body .product-form__input--pill input[type='radio']:focus-visible + label {
  outline: 2px solid var(--sky-focus);
  outline-offset: 3px;
}

/* Sold-out values stay selectable — Dawn strikes them through. */
body .product-form__input--pill input[type='radio'].disabled + label {
  color: var(--sky-sand-deep);
  border-color: var(--sky-rule);
}

/* SET `--swatch-input--size` AND THE LABEL SIZE TOGETHER, ALWAYS. Dawn sizes
 * the disc from that variable and the label from its own rule; changing one
 * leaves a 2.8rem disc loose in a 4.4rem ring, which is what shipped.
 * The ring goes on `.swatch`, not the label, so it hugs the colour and a white
 * finish still reads as a disc. It identifies a control, so 1.4.11's 3:1 floor
 * applies — sand-deep, never sand. CLAUDE.md §5, design.md §10. */
body .product-form__input--swatch .swatch-input__input + .swatch-input__label {
  --swatch-input--size: 4.4rem;

  inline-size: 4.4rem;
  block-size: 4.4rem;
  margin: 0;
  border: 0;
  box-shadow: none;
  outline: none;
  transition: box-shadow var(--sky-dur-fast) var(--sky-ease-out);
}

/* Dawn has no universal border-box reset. */
body .product-form__input--swatch .swatch-input__label .swatch {
  box-sizing: border-box;
  border: var(--sky-rule-width) solid var(--sky-sand-deep);
}

body .product-form__input--swatch .swatch-input__input + .swatch-input__label:hover .swatch {
  border-color: var(--sky-ink);
}

/* A detached ring — paper gap, then ink — is legible on a white finish and a
 * black one alike. The `outline: none` above stops Dawn's doubling up. */
body .product-form__input--swatch .swatch-input__input:checked + .swatch-input__label {
  box-shadow: 0 0 0 2px var(--sky-paper), 0 0 0 3px var(--sky-ink);
}

body .product-form__input--swatch .swatch-input__input:focus-visible + .swatch-input__label {
  outline: 2px solid var(--sky-focus);
  outline-offset: 3px;
}

/* ── quantity + add to cart ───────────────────────────────────────────── */

body .product-form__quantity .quantity {
  border: var(--sky-rule-width) solid var(--sky-sand-deep);
  border-radius: 0;
  block-size: 4.4rem;
  min-block-size: 4.4rem;
}

body .product-form__quantity .quantity::after {
  box-shadow: none;
  border: 0;
}

body .quantity__button,
body .quantity__input {
  font-family: var(--sky-font);
  color: var(--sky-ink);
  min-block-size: 4.4rem;
}

/* §9's floor is 44px on BOTH axes. */
body .quantity__button {
  inline-size: 4.4rem;
}

body .quantity__input {
  inline-size: 4.4rem;
  font-size: var(--sky-text-sm);
  font-variant-numeric: tabular-nums;
}

/* Filled, deliberately — a form control is not an editorial context, and the
 * one element the page exists to get pressed should not spend its affordance on
 * a hairline. design.md §10. */
body .product-form__submit {
  font-family: var(--sky-font);
  font-size: var(--sky-text-base);
  font-weight: 600;
  min-block-size: 4.8rem;
  border-radius: 0;
  box-shadow: none;
  letter-spacing: 0;
}

body .product-form__submit::after,
body .product-form__submit::before {
  box-shadow: none;
  border-radius: 0;
}

body .product-form__buttons {
  max-inline-size: none;
}

/* ── description, notes, share ───────────────────────────────────────── */

body .product__description {
  margin-block-start: var(--sky-space-lg);
  font-size: var(--sky-text-base);
  line-height: 1.7;
  color: var(--sky-ink);
  text-wrap: pretty;
  max-inline-size: var(--sky-measure);
}

/* skydesign-features.liquid: the fan feature list sits in its own full-width
 * .sky-wrap row between notes and spec, not the narrow sticky info column
 * `.product__description`'s measure cap was written for — drop the cap so it
 * matches its siblings' width instead of reading as an orphaned narrow column. */
body .skydesign-features-section .product__description {
  max-inline-size: none;
}

/* ── quote-only PDP: a brand/heritage story, its own section below the feature
 * list (`skydesign-product-story.liquid` — design.md §10, docs/quote-only-
 * products.md). No block padding of its own: it is a `.skydesign-section` now,
 * so the boundary rule near the top of this file owns the gap above it. A
 * quieter lead-in on the second paragraph plus bolded brand names reads as
 * considered rather than as an extra heading — no badges, no rule beyond what
 * the boundary already draws (CLAUDE.md §7). */

.sky-product-story p {
  margin: 0;
}

.sky-product-story p + p {
  margin-block-start: var(--sky-space-md);
}

.sky-product-story p:first-of-type {
  font-size: var(--sky-text-lg);
  line-height: 1.65;
  letter-spacing: -0.006em;
  color: var(--sky-ink);
}

.sky-product-story p:not(:first-of-type) {
  font-size: var(--sky-text-base);
  line-height: 1.75;
  color: var(--sky-sand-deep);
}

/* Brand names (Frico, Relax Glass, SCHOTT NEXTREMA®️) carry the <bdi> CLAUDE.md
 * §4 already requires for Latin inside Hebrew running text; weighting them here
 * doubles as the one typographic accent this block allows itself. */
.sky-product-story bdi {
  font-weight: 600;
  color: var(--sky-ink);
}

body .product__info-container .share-button__button {
  font-family: var(--sky-font);
  font-size: var(--sky-text-sm);
  color: var(--sky-sand-deep);
  min-block-size: 4.4rem;
}

body .product__info-container .share-button__button:hover {
  color: var(--sky-ink);
}

/* ── quote-only PDP feature list — plain lines, not term/detail. design.md §10.
 * A `custom_liquid` block in `main`'s own block_order, not a section: it needs
 * to sit directly under the buy box, inside the sticky info column, which only
 * a block can do. So unlike `.skydesign-section`s it owns its own top margin —
 * there is no section boundary here to supply one. One column, not the auto-fit
 * grid the notes list uses: line lengths here run from two words to a full
 * sentence, and packing those into even-width columns read as ragged rather
 * than considered. A hairline per row plus a single dot marker gives each line
 * a fixed anchor instead of leaving it as bare running text. ── */

.sky-features {
  display: grid;
  gap: 0;
  margin-block-start: var(--sky-space-xl);
  padding: 0;
  list-style: none;
  max-inline-size: var(--sky-measure);
  border-block-start: var(--sky-rule-width) solid var(--sky-rule);
}

.sky-features__item {
  display: flex;
  align-items: flex-start;
  gap: var(--sky-space-sm);
  padding-block: var(--sky-space-md);
  border-block-end: var(--sky-rule-width) solid var(--sky-rule);
  font-size: var(--sky-text-base);
  line-height: 1.6;
  color: var(--sky-ink);
}

.sky-features__item::before {
  content: "";
  flex: none;
  inline-size: 0.6rem;
  block-size: 0.6rem;
  margin-block-start: 0.65em;
  border-radius: 50%;
  background: var(--sky-sand);
}

/* ── spec sheet — ours, so no `body ` prefix. A <dl>, not a table. design.md §10. ── */

.sky-spec__list {
  display: grid;
  gap: 0;
  margin: 0;
  max-inline-size: 64rem;
}

@media screen and (min-width: 750px) {
  .sky-spec__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: clamp(var(--sky-space-xl), 5vw, var(--sky-space-3xl));
  }
}

.sky-spec__row {
  display: flex;
  gap: var(--sky-space-md);
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  padding-block: var(--sky-space-sm);
  border-block-end: var(--sky-rule-width) solid var(--sky-rule);
}

.sky-spec__row dt {
  font-size: var(--sky-text-sm);
  color: var(--sky-sand-deep);
}

.sky-spec__row dd {
  margin: 0;
  font-size: var(--sky-text-sm);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  text-align: end;
}

/* ── related products — reuses the collection's density variant and the same
 * card snippet. design.md §11. ── */

body .related-products {
  padding-inline: var(--sky-gutter);
  max-inline-size: var(--sky-wrap);
}

/* Hung off `:has(.product-grid)`. Dawn renders the wrapper whether or not there
 * are recommendations, so an unconditional interval leaves a phantom gap under
 * the spec sheet. design.md §10. */
body .related-products:has(.product-grid) {
  padding-block-start: var(--sky-space-3xl);
}

body .related-products__heading {
  margin: 0 0 var(--sky-space-xl);
  font-family: var(--sky-font);
  font-size: var(--sky-text-2xl);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.008em;
  color: var(--sky-ink);
  text-align: start;
}

body .related-products .product-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sky-space-lg) var(--sky-space-md);
  margin: 0;
  padding: 0;
}

@media screen and (min-width: 750px) {
  body .related-products .product-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media screen and (min-width: 990px) {
  body .related-products .product-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Neutralises Dawn's flex-basis maths on the grid item. */
body .related-products .grid__item {
  max-inline-size: none;
  inline-size: auto;
  padding: 0;
  margin: 0;
  flex: none;
}

/* ══ search template · rides the collection's frame. design.md §10.
 * Dawn gives search results the SAME classes the collection uses, and the
 * collection rules deliberately do not scope themselves to that template.
 * DO NOT scope a collection rule to the collection template — it silently
 * undoes search. `body ` prefix throughout: main-search.liquid emits five Dawn
 * stylesheets from <body>, plus an inline <style> block.
 */

body .template-search__header.page-width {
  max-inline-size: var(--sky-wrap);
  padding-inline: var(--sky-gutter);
  margin-block: var(--sky-space-3xl) var(--sky-space-2xl);
}

/* The storefront hangs from the inline-start edge; a centred block reads as an
 * error page. This compound clears Dawn's `.center` without !important. */
body .template-search__header .h2,
body .template-search__header h1.center {
  margin: 0;
  font-family: var(--sky-font);
  font-size: var(--sky-text-2xl);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.008em;
  color: var(--sky-ink);
  text-align: start;
}

body .template-search__search {
  margin-inline: 0;
  margin-block: var(--sky-space-lg) 0;
  max-inline-size: var(--sky-measure);
}

body .template-search__search .search {
  margin-block-start: 0;
}

/* One block-end hairline, matching .sky-form__field — one input, not two.
 * --sky-sand-deep, NOT --sky-sand: the underline is the only thing identifying
 * the control, so WCAG 1.4.11's 3:1 floor applies. design.md §10.
 * Dawn's box is two pseudo-elements on .field, both on physical insets. They
 * are switched OFF rather than restyled — overriding physical properties Sense
 * RTL owns is a specificity war we lose. CLAUDE.md §4. */
body .template-search__search .field {
  border-block-end: var(--sky-rule-width) solid var(--sky-sand-deep);
  transition: border-color var(--sky-dur-fast) var(--sky-ease-out);
}

body .template-search__search .field::before,
body .template-search__search .field::after,
body .template-search__search .field:hover.field::after {
  box-shadow: none;
  border: 0;
}

body .template-search__search .field:hover,
body .template-search__search .field:focus-within {
  border-block-end-color: var(--sky-ink);
}

/* TYPE AND COLOUR ONLY — DO NOT SET PADDING HERE. Two things depend on Dawn's:
 * its floating label re-pads the input across two states, and
 * component-search.css reserves the inline-end edge for the two buttons. A flat
 * padding-block beats both states and long queries then run underneath the
 * icons — invisible until someone types a long enough term.
 * The inset text start is the accepted cost, not a defect to fix. design.md §10.
 */
body .template-search__search .field__input {
  font-family: var(--sky-font);
  font-size: var(--sky-text-base);
  color: var(--sky-ink);
  background: none;
  min-block-size: 4.4rem;
}

body .template-search__search .field__label {
  font-family: var(--sky-font);
  color: var(--sky-sand-deep);
}

/* Colour only — Dawn already gives .field__button 4.4rem on both axes. That is
 * NOT true of .search-modal__close-button in the header. Measure both.
 * design.md §9. */
body .template-search__search .field__button {
  color: var(--sky-ink);
}

/* The results line — Dawn renders it as a bare <p role="status">. */
body .template-search__header p[role='status'] {
  margin: var(--sky-space-lg) 0 0;
  font-family: var(--sky-font);
  font-size: var(--sky-text-sm);
  line-height: 1.5;
  color: var(--sky-sand-deep);
  max-inline-size: var(--sky-measure);
  text-wrap: pretty;
}

/* Search is the only template rendering non-products in the F6 grid — pages and
 * articles come back as Dawn `card` markup the card swap does not touch.
 * Deliberately minimal, and NOT a second card design. If pages start mattering
 * in search, design one rather than growing this. design.md §10. */
body .template-search__results .card-wrapper {
  font-family: var(--sky-font);
  color: var(--sky-ink);
}

body .template-search__results .card,
body .template-search__results .card__inner,
body .template-search__results .card .card__content {
  border-radius: 0;
  box-shadow: none;
}

body .template-search__results .card__heading {
  font-size: var(--sky-text-base);
  font-weight: 600;
  line-height: 1.3;
}

body .template-search__results .card__heading a {
  color: var(--sky-ink);
  text-decoration: none;
}

body .template-search__results .card__heading a:hover {
  text-decoration: underline;
  text-underline-offset: 0.3em;
}

/* Dropping `.ratio::before` collapses the card to its content rather than to
 * nothing, because `.card__content` is `position: static` on text-only cards.
 * Without this it renders as a 421px taupe square holding one line of text.
 * design.md §10. */
body .template-search__results .card--text.ratio::before {
  content: none;
}

body .template-search__results .card--text,
body .template-search__results .card--text .card__content {
  background: transparent;
}

/* Dawn hardcodes `text-align: left` — a PHYSICAL property Sense RTL does not
 * touch, so the title sat against the LEFT edge on an RTL page. `start` is the
 * logical form. CLAUDE.md §4. */
body .template-search__results .card--text .card__content,
body .template-search__results .card--text .card__information {
  text-align: start;
}

/* §3 bans badges. Dawn labels non-product results with one; a policy page in a
 * list of fans is obvious from its title. */
body .template-search__results .card__badge {
  display: none;
}

/* The only target in the card, so it takes §9's floor — inline-flex +
 * fit-content so the 44px box is not an invisible full-width hit area. */
body .template-search__results .card__heading a {
  display: inline-flex;
  align-items: center;
  inline-size: fit-content;
  min-block-size: 4.4rem;
}

/* ══ cart template · where the fans funnel closes. design.md §10.
 * `cart_type` is "notification", so this page IS the cart, not a fallback.
 * `body ` prefix throughout: the two cart sections emit five Dawn stylesheets
 * from <body>.
 * `.cart__dynamic-checkout-buttons` is deliberately UNSTYLED — PayPlus is not
 * connected. Check its contrast and target size when the gateway lands.
 */

body .cart__items,
body .cart__footer {
  font-family: var(--sky-font);
  color: var(--sky-ink);
}

/* Padding sliders are 0 in templates/cart.json so the interval is owned here. */
body #main-cart-items,
body .cart__contents {
  padding-block-start: 0;
}

/* ── head ───────────────────────────────────────────────────────────────── */

/* SCOPED TO THE <cart-items> CUSTOM ELEMENT. Not `.cart__items` (a div wrapping
 * the items TABLE only — the head is its SIBLING) and not `#main-cart-items`
 * (an id INSIDE that wrapper). Written either of those ways these rules match
 * NOTHING, and it is invisible: Dawn's `.title--primary` is close enough that
 * the head LOOKS styled while the margins and the 44px floor never apply.
 * design.md §10. */
body cart-items .title-wrapper-with-link {
  align-items: baseline;
  margin-block: var(--sky-space-3xl) var(--sky-space-2xl);
  border-block-end: 0;
}

body cart-items .title--primary {
  margin: 0;
  font-family: var(--sky-font);
  font-size: var(--sky-text-2xl);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.008em;
  color: var(--sky-ink);
}

/* Not .sky-link markup — a CSS-only pass gets the hairline but not the arrow,
   and this is a secondary escape, not the C3 CTA. */
body cart-items .underlined-link {
  display: inline-flex;
  align-items: center;
  min-block-size: 4.4rem;
  font-size: var(--sky-text-sm);
  color: var(--sky-sand-deep);
  text-underline-offset: 0.3em;
}

body cart-items .underlined-link:hover {
  color: var(--sky-ink);
}

/* ── the line items ─────────────────────────────────────────────────────── */

body .cart-items th {
  font-family: var(--sky-font);
  font-size: var(--sky-text-xs);
  font-weight: 400;
  letter-spacing: 0;
  color: var(--sky-sand-deep);
  padding-block-end: var(--sky-space-sm);
  border-block-end: var(--sky-rule-width) solid var(--sky-rule);
  text-transform: none;
}

body .cart-item {
  border-block-end: var(--sky-rule-width) solid var(--sky-rule);
}

body .cart-item td {
  padding-block: var(--sky-space-lg);
}

/* --sky-paper, NOT --sky-sand-pale: a cart thumbnail always has an image, and
   the cut-outs sit on #F7F7F7 — a sand field would frame them. Sand-pale is the
   EMPTY plate's tone. Dawn's `global-media-settings` radius/border/shadow are
   dropped; this system has none. design.md §10. */
body .cart-item__image-container.global-media-settings,
body .cart-item__image {
  border-radius: 0;
  box-shadow: none;
  border: 0;
  background: var(--sky-paper);
}

/* A standalone link, so §9's 44px floor applies with no inline exception to
 * claim. inline-flex + fit-content rather than `display: block`, so the box does
 * not span the cell as an invisible hit area. design.md §9. */
body .cart-item__name {
  display: inline-flex;
  align-items: center;
  inline-size: fit-content;
  min-block-size: 4.4rem;
  font-family: var(--sky-font);
  font-size: var(--sky-text-base);
  font-weight: 600;
  line-height: 1.3;
  color: var(--sky-ink);
  text-decoration: none;
}

body .cart-item__name:hover {
  text-decoration: underline;
  text-underline-offset: 0.3em;
}

/* The variant lines under the title. Secondary text. */
body .cart-item__details .product-option,
body .cart-item__details dl,
body .cart-item .product-option {
  font-size: var(--sky-text-sm);
  line-height: 1.5;
  color: var(--sky-sand-deep);
}

body .cart-item__details .price,
body .cart-item__totals .price,
body .cart-item__final-price {
  font-family: var(--sky-font);
  font-size: var(--sky-text-base);
  color: var(--sky-ink);
  font-variant-numeric: tabular-nums;
}

/* Never a sale colour — §3 bans urgency signalling. design.md §4. */
body .cart-item__old-price {
  color: var(--sky-sand-deep);
  font-size: var(--sky-text-sm);
}

/* The PDP block's quantity rules are unscoped, so the 44px floor already
   reaches this; only the box itself is left. */
body .cart-quantity .quantity,
body .cart-item__quantity .quantity {
  border: var(--sky-rule-width) solid var(--sky-sand-deep);
  border-radius: 0;
  block-size: 4.4rem;
  min-block-size: 4.4rem;
}

body .cart-quantity .quantity::after,
body .cart-item__quantity .quantity::after {
  box-shadow: none;
  border: 0;
}

/* Remove is a real destructive control — §9's floor applies. */
body .cart-item__quantity-wrapper .button--tertiary,
body cart-remove-button .button {
  min-inline-size: 4.4rem;
  min-block-size: 4.4rem;
  border-radius: 0;
  box-shadow: none;
  color: var(--sky-sand-deep);
}

body .cart-item__quantity-wrapper .button--tertiary::after,
body cart-remove-button .button::after {
  box-shadow: none;
  border-radius: 0;
}

body cart-remove-button .button:hover {
  color: var(--sky-ink);
}

/* Dawn's inline cart error, and the quantity-rules popover under it. */
body .cart-item__error-text,
body .cart-item__error {
  font-size: var(--sky-text-sm);
  color: var(--sky-error);
}

body .quantity__rules,
body .quantity-popover__info {
  font-family: var(--sky-font);
  font-size: var(--sky-text-xs);
  color: var(--sky-sand-deep);
  border-radius: 0;
}

/* ── note, totals, checkout ─────────────────────────────────────────────── */

/* One block-end hairline at 5.44:1, not a box — same pseudo-element switch-off
   as the search field. design.md §10. */
body .cart__note label {
  font-size: var(--sky-text-sm);
  font-weight: 600;
  color: var(--sky-ink);
}

body .cart__note.field {
  border-block-end: var(--sky-rule-width) solid var(--sky-sand-deep);
}

body .cart__note.field::before,
body .cart__note.field::after,
body .cart__note.field:hover.field::after {
  box-shadow: none;
  border: 0;
}

body .cart__note .text-area {
  font-family: var(--sky-font);
  font-size: var(--sky-text-base);
  color: var(--sky-ink);
  background: none;
  padding-inline: 0;
  margin: 0;
  min-block-size: 9rem;
}

body .totals {
  align-items: baseline;
  padding-block-start: var(--sky-space-lg);
  border-block-start: var(--sky-rule-width) solid var(--sky-rule);
}

body .totals__total {
  font-family: var(--sky-font);
  font-size: var(--sky-text-base);
  font-weight: 600;
  letter-spacing: 0;
  color: var(--sky-ink);
  text-transform: none;
}

body .totals__total-value {
  font-family: var(--sky-font);
  font-size: var(--sky-text-xl);
  font-weight: 600;
  color: var(--sky-ink);
  font-variant-numeric: tabular-nums;
}

/* Filled, on the same grounds as the PDP's add-to-cart — the two are the same
   act. design.md §10. */
body .cart__checkout-button {
  font-family: var(--sky-font);
  font-size: var(--sky-text-base);
  font-weight: 600;
  min-block-size: 4.8rem;
  border-radius: 0;
  box-shadow: none;
  letter-spacing: 0;
  max-inline-size: none;
}

body .cart__checkout-button::after,
body .cart__checkout-button::before {
  box-shadow: none;
  border-radius: 0;
}

/* ── the empty cart ─────────────────────────────────────────────────────── */

/* Editorial here — nothing to submit, it is a way out — so it becomes the
 * typographic form §3 asks for.
 * The arrow is the one part CSS cannot add: a pseudo-element glyph would be a
 * second arrow implementation that mirrors differently under RTL. One link
 * without an arrow beats two arrows that disagree. design.md §10.
 */
body .cart__warnings {
  text-align: start;
  padding-block: var(--sky-space-3xl);
}

body .cart__empty-text {
  margin: 0 0 var(--sky-space-lg);
  font-family: var(--sky-font);
  font-size: var(--sky-text-2xl);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.008em;
  color: var(--sky-ink);
}

body .cart__warnings .button {
  min-inline-size: 0;
  min-block-size: 4.4rem;
  padding: var(--sky-space-2xs) 0;
  font-family: var(--sky-font);
  font-size: var(--sky-text-base);
  font-weight: 600;
  letter-spacing: 0;
  color: var(--sky-ink);
  background: none;
  border-block-end: var(--sky-rule-width) solid currentColor;
  border-radius: 0;
  box-shadow: none;
  transition: border-width var(--sky-dur-fast) var(--sky-ease-out);
}

body .cart__warnings .button::after,
body .cart__warnings .button::before {
  box-shadow: none;
  border: 0;
  border-radius: 0;
}

body .cart__warnings .button:hover {
  border-block-end-width: 2px;
}

/* DELIBERATELY NO RULES for `.cart__login-*` or `.tax-note` — that markup was
 * was removed from these sections and survives only in
 * cart-drawer.liquid, which never renders while `cart_type` is "notification".
 * If the drawer is switched on, fix the markup there rather than restoring
 * these rules. design.md §10. */

/* ── the add-to-cart notification ───────────────────────────────────────── */

/* This popup is what a customer sees EVERY time they add a fan — more travelled
 * than the cart page itself. design.md §10. */
body .cart-notification {
  font-family: var(--sky-font);
  color: var(--sky-ink);
  border-radius: 0;
  box-shadow: none;
  border: var(--sky-rule-width) solid var(--sky-rule);
}

body .cart-notification__heading {
  font-size: var(--sky-text-sm);
  font-weight: 600;
  color: var(--sky-ink);
}

body .cart-notification-product__name {
  font-family: var(--sky-font);
  font-size: var(--sky-text-base);
  font-weight: 600;
  line-height: 1.3;
}

body .cart-notification-product__image {
  border-radius: 0;
  box-shadow: none;
  background: var(--sky-paper);
}

body .cart-notification__close {
  min-inline-size: 4.4rem;
  min-block-size: 4.4rem;
}

body .cart-notification__links .button {
  border-radius: 0;
  box-shadow: none;
  letter-spacing: 0;
  font-family: var(--sky-font);
  font-size: var(--sky-text-base);
  min-block-size: 4.4rem;
}

body .cart-notification__links .button::after,
body .cart-notification__links .button::before {
  box-shadow: none;
  border-radius: 0;
}

/* "המשיכו לקנות" is the only control in this popup that is NOT a `.button` —
 * Dawn gives it `.link.button-label`, so the rule above never reaches it and it
 * sits at 20px. design.md §10. */
body .cart-notification__links .link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-block-size: 4.4rem;
}

/* ══ 404 — our own classes, so no `body ` prefix and no Dawn selectors. It is
 * the only section on its page, so the sibling rhythm rule never fires and it
 * sets its own leading interval. design.md §10. ══ */

.sky-404 {
  padding-block-start: var(--sky-space-3xl);
}

.sky-404__title {
  margin: 0;
  font-size: var(--sky-text-2xl);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.008em;
  color: var(--sky-ink);
  text-wrap: balance;
}

.sky-404__text {
  margin-block-start: var(--sky-space-sm);
  max-inline-size: var(--sky-measure);
}

.sky-404__text p {
  margin: 0;
  font-size: var(--sky-text-lg);
  line-height: 1.55;
  color: var(--sky-ink);
  text-wrap: pretty;
}

.sky-404__link {
  margin-block-start: var(--sky-space-lg);
}

/* ══ focus — visible, and never removed. Accessibility is a legal requirement
 * in Israel (CLAUDE.md §8). ══ */

.sky-section :focus-visible,
.sky-link:focus-visible,
.collection-hero :focus-visible,
.facets-wrapper :focus-visible,
.collection :focus-visible,
.pagination-wrapper :focus-visible,
.product :focus-visible,
.related-products :focus-visible {
  outline: 2px solid var(--sky-focus);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ══ floating call affordance ════════════════════════════════════════════
 * The element carries its own `dir="rtl"` (see the section file). That makes
 * `inset-inline-end` here the LEFT edge unconditionally, including on a page
 * where the RTL app fails to load and everything else computes LTR.
 * z-index 2 is chosen against a stack: under the header group (4), the facets
 * drawer (100) and the cart drawer (1000), above page content. design.md §10.
 */

.sky-callbar {
  position: fixed;
  inset-block-end: var(--sky-space-md);
  inset-inline-end: var(--sky-space-md);
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sky-space-xs);
  min-inline-size: 4.4rem;
  min-block-size: 4.4rem;
  font-family: var(--sky-font);
  font-size: var(--sky-text-base);
  font-weight: 400;
  line-height: 1;
  color: var(--sky-ink);
  text-decoration: none;
  background: var(--sky-paper);
  border: var(--sky-rule-width) solid var(--sky-ink);
  /* The one radius in the system, and only on the icon-only state. The desktop
     pill below resets it to the square edge. design.md §10. */
  border-radius: 50%;
  transition: color var(--sky-dur-fast) var(--sky-ease-out), background-color var(--sky-dur-fast)
    var(--sky-ease-out);
}

.sky-callbar:hover,
.sky-callbar:focus-visible {
  color: var(--sky-paper);
  background: var(--sky-ink);
}

.sky-callbar:focus-visible {
  outline: 2px solid var(--sky-focus);
  outline-offset: 3px;
}

/* Matches the element — the glyph is inlined from assets/icon-phone.svg, which
   carries Dawn's own `icon` classes. */
.sky-callbar svg {
  flex: 0 0 auto;
  inline-size: 2.4rem;
  block-size: 2.4rem;
  fill: currentColor;
  stroke: none;
}

/* Clipped, not removed — the label is this link's accessible name. */
.sky-callbar__text {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

}
/* The number is what the visitor is being asked to act on, so it carries the
   weight — and it is a digit string next to Hebrew, so it is isolated. */
.sky-callbar__number {
  font-weight: 600;
}

@media screen and (min-width: 750px) {
  .sky-callbar {
    padding-inline: var(--sky-space-md);
    border-radius: 0;
  }

  /* Text alone above 750px. The label says what the number is for, which the
     glyph would only restate. */
  .sky-callbar svg {
    display: none;
  }

  .sky-callbar__text {
    position: static;
    inline-size: auto;
    block-size: auto;
    overflow: visible;
    clip-path: none;
  }
}

/* Clearance so the callbar never covers the legal row at full scroll — those
   links include the accessibility statement and cookie preferences, both of
   which must stay reachable (CLAUDE.md §8). design.md §10. */
body .footer__content-bottom {
  padding-block-end: 6rem;
}

/* ══ Shopify's consent banner — the one third-party surface we style.
 * §9's own stricter floor applied for consistency, NOT a conformance fix.
 * Kept to `min-block-size` ALONE on purpose: Shopify can restyle this without
 * notice, so own as little of it as possible. design.md §10. ══ */
#shopify-pc__banner button {
  min-block-size: 4.4rem;
}

/* ══ motion — two primitives, total (design.md §10) ══════════════════════ */

@media (prefers-reduced-motion: reduce) {
  .sky-card__img .sky-plate,
  .sky-link::after,
  .sky-works__step {
    transition-duration: 0.01ms;
  }

  .sky-card__link:hover .sky-card__img .sky-plate {
    transform: none;
  }
}
/* =========================================================
   SKYDESIGN · LIGHTING PRODUCT PAGE
   Applies only to product template: lighting
   ========================================================= */

@media screen and (min-width: 990px) {

  .product--template-lighting {
    column-gap: clamp(60px, 7vw, 120px);
    align-items: flex-start;
  }

  .product--template-lighting .product__info-wrapper {
    padding: 0;
  }

  .product--template-lighting .product__info-container {
    width: 100%;
    max-width: 480px;
    margin-inline: auto;
    direction: rtl;
    text-align: right;
  }

  .product--template-lighting .product__title {
    text-align: right;
    margin-bottom: 10px;
  }

  .product--template-lighting .product__title h1 {
    font-size: clamp(34px, 2.6vw, 46px);
    line-height: 1.08;
    letter-spacing: -0.02em;
    margin: 0;
  }

  .product--template-lighting .product__text,
  .product--template-lighting .product__tax,
  .product--template-lighting .product-form__input,
  .product--template-lighting .product-form__quantity {
    text-align: right;
  }

  .product--template-lighting .price {
    text-align: right;
  }

  .product--template-lighting .price--large {
    font-size: 24px;
  }

  .product--template-lighting .product-form__input {
    max-width: none;
  }

  .product--template-lighting .product-form__quantity {
    margin-top: 22px;
  }

  .product--template-lighting .product-form__buttons {
    max-width: none;
    width: 100%;
  }

  .product--template-lighting .product-form__submit {
    min-height: 58px;
    width: 100%;
    border-radius: 0;
    font-size: 16px;
    font-weight: 600;
  }
}
/* =========================================================
   SKYDESIGN · LIGHTING PDP — controls polish
   ========================================================= */

@media screen and (min-width: 750px) {

  /* Product info spacing */
  .product--template-lighting .product__info-container {
    max-width: 520px;
  }

  /* Variant picker */
  .product--template-lighting .product-form__input {
    margin-bottom: 22px;
  }

  .product--template-lighting .product-form__input legend {
    margin-bottom: 10px;
    font-size: 13px;
    font-weight: 600;
  }

  /* Color swatches */
  .product--template-lighting .swatch-input__label {
    width: 42px;
    height: 42px;
  }

  .product--template-lighting .swatch {
    width: 100%;
    height: 100%;
  }

  /* Quantity */
  .product--template-lighting .quantity {
    width: 132px;
    min-height: 44px;
    border: 1px solid rgba(0, 0, 0, 0.22);
  }

  .product--template-lighting .quantity:after {
    box-shadow: none;
  }

  .product--template-lighting .quantity__button {
    width: 40px;
  }

  .product--template-lighting .quantity__input {
    font-size: 14px;
  }

  /* Add to cart */
  .product--template-lighting .product-form__submit:not([disabled]) {
    min-height: 58px;
    background: #171717;
    color: #fff;
    border: 0;
  }

  .product--template-lighting .product-form__submit:not([disabled]):hover {
    background: #000;
  }

  /* Gallery thumbnails */
  .product--template-lighting .thumbnail-list {
    justify-content: flex-start;
    gap: 10px;
  }

  .product--template-lighting .thumbnail-list__item {
    width: 88px;
    max-width: 88px;
  }

  .product--template-lighting .thumbnail {
    border: 1px solid #dedbd6;
  }

  .product--template-lighting .thumbnail[aria-current="true"] {
    border: 1px solid #1d1d1b;
  }
}
/* SKYDESIGN · Lighting PDP — RTL buy box alignment */
@media screen and (min-width: 990px) {

  .product--template-lighting .product__info-container {
    margin-left: auto;
    margin-right: 0;
    text-align: right !important;
  }

  .product--template-lighting .product__title,
  .product--template-lighting .product__title h1,
  .product--template-lighting .product__text,
  .product--template-lighting .price,
  .product--template-lighting .product-form__input,
  .product--template-lighting .product-form__quantity {
    text-align: right !important;
  }

  .product--template-lighting .product-form__input--swatch {
    justify-content: flex-start;
    direction: rtl;
  }

  .product--template-lighting .product-form__input--swatch legend {
    width: 100%;
    text-align: right;
  }
}
/* SKYDESIGN · Lighting PDP — final buy box alignment */
@media screen and (min-width: 990px) {

  .product--template-lighting .product__info-container {
    max-width: 520px;
    margin: 0 !important;
    margin-inline-start: auto !important;
    direction: rtl;
    text-align: right !important;
  }

  .product--template-lighting .product__info-container > * {
    text-align: right;
  }

  .product--template-lighting .product-form__input,
  .product--template-lighting .product-form__quantity,
  .product--template-lighting .product-form__buttons {
    margin-left: 0;
    margin-right: 0;
  }

  .product--template-lighting fieldset.product-form__input {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    direction: rtl;
  }

  .product--template-lighting fieldset.product-form__input legend {
    flex-basis: 100%;
    width: 100%;
    text-align: right;
  }

  .product--template-lighting .quantity {
    margin-inline-start: 0;
  }
}
/* SKYDESIGN · Lighting PDP — correct RTL alignment */
@media screen and (min-width: 990px) {

  .product--template-lighting .product__info-container {
    width: 100%;
    max-width: 520px;
    margin-left: auto !important;
    margin-right: 0 !important;
    direction: rtl;
    text-align: right !important;
  }

  .product--template-lighting .product__title,
  .product--template-lighting .product__title h1,
  .product--template-lighting .product__text,
  .product--template-lighting .price,
  .product--template-lighting .product-form__input,
  .product--template-lighting .product-form__quantity,
  .product--template-lighting .product-form__buttons {
    text-align: right !important;
  }

  .product--template-lighting fieldset.product-form__input {
    justify-content: flex-start !important;
    direction: rtl;
  }

  .product--template-lighting fieldset.product-form__input legend {
    width: 100%;
    text-align: right !important;
  }
}
/* SKYDESIGN · Lighting short description */
.product--template-lighting .sky-lighting-short-description {
  max-width: 460px;
  margin: 12px 0 18px;
  direction: rtl;
  text-align: right;
  font-size: 15px;
  line-height: 1.65;
  color: rgba(28, 28, 28, 0.72);
}

.product--template-lighting .sky-lighting-short-description p {
  margin: 0;
}
/* SKYDESIGN · Lighting short description polish */
.product--template-lighting .sky-lighting-short-description {
  max-width: 430px;
  margin: 10px 0 20px;
  direction: rtl;
  text-align: right !important;
  font-size: 15px;
  line-height: 1.7;
  color: #666;
}

.product--template-lighting .sky-lighting-short-description p {
  margin: 0;
  text-align: right !important;
}
/* SKYDESIGN · Lighting consultation button */
.product--template-lighting .sky-lighting-consult-button {
  width: 100%;
  min-height: 56px;
  margin-top: 10px;
  display: flex;
  align-items: center;
  justify-content: center;

  border: 1px solid #1d1d1b;
  background: transparent;
  color: #1d1d1b;

  text-decoration: none;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0;
  transition: background .2s ease, color .2s ease;
}

.product--template-lighting .sky-lighting-consult-button:hover {
  background: #1d1d1b;
  color: #fff;
}

@media screen and (max-width: 749px) {
  .product--template-lighting .sky-lighting-consult-button {
    min-height: 52px;
    font-size: 14px;
  }
}
/* LIGHTING PDP · remove extra gap before specifications */
.product--template-lighting ~ .skydesign-spec-section,
body:has(.product--template-lighting) .skydesign-spec-section {
  padding-block-start: 0 !important;
}

body:has(.product--template-lighting) .skydesign-spec-section .sky-spec {
  padding-top: 24px !important;
}
/* LIGHTING PDP · center gallery thumbnails */
.product--template-lighting .thumbnail-list,
.product--template-lighting .thumbnail-slider .thumbnail-list {
  justify-content: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
/* LIGHTING PDP · main product image */
@media screen and (min-width: 990px) {
  .product--template-lighting
  .product__media-item:first-child
  .product__media img {
    transform: translateY(10px) scale(1.06);
    transform-origin: center center;
  }

  .product--template-lighting
  .product__media-item:first-child
  .product__media {
    overflow: visible;
  }
}
/* LIGHTING PDP · compact buy box */
@media screen and (min-width: 990px) {

  /* Price */
  .product--template-lighting .product__info-container .price {
    margin-top: 16px !important;
    margin-bottom: 4px !important;
  }

  /* Shipping / tax text under price */
  .product--template-lighting .product__tax {
    margin-top: 2px !important;
    margin-bottom: 18px !important;
  }

  /* Variant colors */
  .product--template-lighting .product-form__input {
    margin-top: 0 !important;
    margin-bottom: 18px !important;
  }

  /* Quantity */
  .product--template-lighting .product-form__quantity {
    margin-top: 0 !important;
    margin-bottom: 16px !important;
  }

  /* Main add-to-cart button */
  .product--template-lighting .product-form {
    margin-top: 0 !important;
    margin-bottom: 10px !important;
  }

  /* Consultation button */
  .product--template-lighting .sky-lighting-consult-button {
    margin-top: 8px !important;
  }
}
/* LIGHTING PDP · stronger CTA buttons */
@media screen and (min-width: 990px) {
  .product--template-lighting .product-form__buttons,
  .product--template-lighting .product-form__submit,
  .product--template-lighting .sky-lighting-consult-button {
    width: 100% !important;
    max-width: 390px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .product--template-lighting .product-form__submit,
  .product--template-lighting .sky-lighting-consult-button {
    min-height: 54px;
  }
}
/* LIGHTING PDP · larger main image on mobile */
@media screen and (max-width: 749px) {
  .product--template-lighting
  .product__media-item:first-child
  .product__media img {
    transform: translateY(6px) scale(1.09);
    transform-origin: center center;
  }

  .product--template-lighting
  .product__media-item:first-child
  .product__media {
    overflow: visible;
  }
}

@media screen and (min-width: 750px) {
  .card__media img {
    transform: scale(1.6) !important;
    transform-origin: center !important;
  }
}