/* pdp.css — product page variants for the per-store architectures (playbook 15).
 * Nothing here is a default look: each block is switched on by a class the
 * store's own build puts on its widget or container. Colours come from the
 * store's Elementor globals, so one variant reads differently on each store.
 */
:root { --rs-pdp-ease: cubic-bezier(0.23, 1, 0.32, 1); }

/* --- scrolling galleries: filmstrip / stage / peek ------------------------ */
.rs-gal { position: relative; }
.rs-gal__track { display: flex; gap: var(--rs-gal-gap, 2px); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; outline-offset: -2px; }
.rs-gal__track::-webkit-scrollbar { display: none; }
.rs-gal__item { position: relative; flex: none; margin: 0; scroll-snap-align: start; }
.rs-gal__item img { display: block; }
.rs-gal--filmstrip .rs-gal__item img { height: min(72vh, 760px); width: auto; max-width: none; }
.rs-gal--stage .rs-gal__item { flex-basis: 100%; scroll-snap-align: center; }
.rs-gal--stage .rs-gal__item img { width: 100%; aspect-ratio: 4 / 3; object-fit: contain; background: var(--e-global-color-rs_cream, #f3f1ec); }
.rs-gal--peek { --rs-gal-gap: 12px; }
.rs-gal--peek .rs-gal__item { flex-basis: 84%; border-radius: var(--rs-gal-radius, 24px); overflow: hidden; background: var(--e-global-color-rs_cream, #f3f1ec); }
.rs-gal--peek .rs-gal__item img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.rs-gal__ui { display: flex; align-items: center; gap: 14px; margin-top: 12px; }
.rs-gal__count { font-variant-numeric: tabular-nums; font-size: 13px; letter-spacing: .04em; }
.rs-gal__dots { display: flex; gap: 6px; }
.rs-gal__dots i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .25; transition: opacity 200ms ease, transform 200ms var(--rs-pdp-ease); }
.rs-gal__dots i.is-on { opacity: 1; transform: scale(1.25); }
.rs-gal--filmstrip .rs-gal__dots, .rs-gal--peek .rs-gal__count { display: none; }
.rs-gal__prev, .rs-gal__next { display: inline-grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 1px solid currentColor; border-radius: var(--rs-gal-btn-radius, 50%); background: transparent; color: inherit; cursor: pointer; transition: opacity 160ms ease, transform 160ms ease-out; }
/* The kit's global button style (.elementor-kit-N button: padding 15px 28px) outranked the rule above and
   pushed the arrow off the middle (15 Oct, 03). The box is set again where the kit cannot reach it. */
html body :is(.rs-gal__prev, .rs-gal__next) { display: inline-grid; place-items: center; width: var(--rs-gal-btn-w, 44px); height: 44px; min-height: 0; padding: 0; line-height: 0; }
.rs-gal__prev svg, .rs-gal__next svg { display: block; }
.rs-gal__prev svg { transform: scaleX(-1); }
.rs-gal__prev:disabled, .rs-gal__next:disabled { opacity: .3; cursor: default; }
.rs-gal__prev:active:not(:disabled), .rs-gal__next:active:not(:disabled) { transform: scale(0.95); }
.rs-gal__next { margin-left: auto; }
.rs-gal__count + .rs-gal__dots { margin-left: 4px; }

/* --- numbered frame index beside a stack (contact sheet) ----------------- */
.rs-gal-with-index { display: grid; grid-template-columns: 72px 1fr; gap: 24px; align-items: start; }
.rs-gal-index { position: sticky; top: 120px; }
.rs-gal-index ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.rs-gal-index a { display: inline-block; padding: 4px 2px; font-size: 12px; letter-spacing: .06em; font-variant-numeric: tabular-nums; color: var(--e-global-color-rs_muted, #666) !important; text-decoration: none; transition: color 160ms ease; }
.rs-gal-index a[aria-current="true"] { color: var(--rs-ink) !important; background: linear-gradient(var(--e-global-color-secondary), var(--e-global-color-secondary)) 0 calc(50% + .3em) / 100% .5em no-repeat; }
.rs-gallery-grid[data-prefix] .rs-gallery-grid__item { position: relative; }
.rs-gallery-grid[data-prefix] .rs-gallery-grid__item::after { content: attr(data-n); position: absolute; left: 12px; bottom: 10px; font-size: 11px; letter-spacing: .08em; color: var(--rs-ink); }
@media (max-width: 1024px) { .rs-gal-with-index { grid-template-columns: 1fr !important; } .rs-gal-with-index > .rs-gallery-grid { grid-column: 1 / -1; } .rs-gal-index { display: none; } }

/* Phones: a stacked gallery becomes a swipe filmstrip (mobile="film"). */
@media (max-width: 767px) {
  .rs-gal-mfilm { display: flex !important; gap: 2px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin-inline: -16px; padding-inline: 16px; }
  .rs-gal-mfilm::-webkit-scrollbar { display: none; }
  .rs-gal-mfilm .rs-gallery-grid__item { flex: 0 0 84%; scroll-snap-align: start; }
}

/* --- packshot band: hairline cells, the shoe box tissue ------------------- */
.rs-gal-band { display: grid !important; grid-template-columns: repeat(var(--rs-gallery-cols, 3), 1fr); gap: 0 !important; border-top: 1px solid var(--e-global-color-rs_line, #ddd); }
.rs-gal-band .rs-gallery-grid__item { margin: 0; border-right: 1px solid var(--e-global-color-rs_line, #ddd); border-bottom: 1px solid var(--e-global-color-rs_line, #ddd); background: var(--e-global-color-rs_cream, #f3f1ec); }
.rs-gal-band .rs-gallery-grid__item:nth-child(3n) { border-right: 0; }
.rs-gal-band .rs-gallery-grid__item img { width: 100%; aspect-ratio: 1; object-fit: contain; padding: 6%; }
@media (max-width: 767px) {
  .rs-gal-band { display: flex !important; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .rs-gal-band .rs-gallery-grid__item { flex: 0 0 86%; scroll-snap-align: start; border-right: 1px solid var(--e-global-color-rs_line, #ddd) !important; }
}

/* --- portrait pair: two tall frames, then one wide ------------------------ */
/* The frame takes the photo's shape (the base cell is square: the wide frame left
   a cream band under its 3:2 photo). Phones keep the shared swipe row. */
.rs-gal-pair { --rs-gallery-ratio: 3 / 4; }
.rs-gal-pair .rs-gallery-grid__item { margin: 0; }
.rs-gal-pair .rs-gallery-grid__item img { height: 100% !important; }   /* Elementor's img { height: auto } left a cream band under each photo */
@media (min-width: 768px) {
  .rs-gal-pair { display: grid !important; grid-template-columns: 1fr 1fr; gap: 4px !important; }
  .rs-gal-pair .rs-gallery-grid__item:nth-child(3n) { grid-column: span 2; --rs-gallery-ratio: 3 / 2; }
  /* An odd last frame on its own would leave a hole beside it: let it run wide. */
  .rs-gal-pair .rs-gallery-grid__item:last-child:nth-child(3n + 1) { grid-column: span 2; --rs-gallery-ratio: 3 / 2; }
}

/* --- callouts on the first image ------------------------------------------ */
.rs-callouts { position: absolute; left: 18px; bottom: 18px; margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; justify-items: start; pointer-events: none; }
.rs-callout { position: relative; padding: 7px 14px; border-radius: 999px; background: var(--e-global-color-secondary); color: var(--e-global-color-rs_white, #fff); font-size: 13px; line-height: 1.2; box-shadow: 0 2px 10px rgba(0, 0, 0, .08); }
.rs-callout::after { content: ""; position: absolute; left: 100%; top: 50%; width: 40px; border-top: 1.5px dashed var(--e-global-color-secondary); }
@media (max-width: 767px) { .rs-callouts { left: 12px; bottom: 12px; } .rs-callout { font-size: 12px; padding: 6px 12px; } .rs-callout::after { width: 20px; } }

/* --- sizes ------------------------------------------------------------------ */
/* Typed: "XS  S  M  L", the chosen one marked with the highlighter band. */
.rs-sizes-typed form.cart .rs-chips { gap: 4px 14px; }
.rs-sizes-typed form.cart .rs-chips .rs-chip { width: auto !important; min-width: 28px; height: 32px !important; padding: 0 3px !important; border-radius: 0 !important; background: none !important; color: var(--rs-ink) !important; }
.rs-sizes-typed form.cart .rs-chips .rs-chip[aria-pressed="true"] { background: linear-gradient(var(--e-global-color-secondary), var(--e-global-color-secondary)) 0 calc(50% + .32em) / 100% .55em no-repeat !important; color: var(--rs-ink) !important; }
@media (hover: hover) and (pointer: fine) { .rs-sizes-typed form.cart .rs-chips .rs-chip:not(:disabled):not([aria-pressed="true"]):hover { background: none !important; text-decoration: underline; text-underline-offset: 5px; } }

/* Table: US sizes in five square columns, hairlines between. */
.rs-sizes-table form.cart .rs-chips { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; border-left: 1px solid var(--e-global-color-rs_line, #ddd); border-top: 1px solid var(--e-global-color-rs_line, #ddd); }
.rs-sizes-table form.cart .rs-chips .rs-chip { width: 100% !important; height: 48px !important; border-radius: 0 !important; border-right: 1px solid var(--e-global-color-rs_line, #ddd) !important; border-bottom: 1px solid var(--e-global-color-rs_line, #ddd) !important; font-variant-numeric: tabular-nums; }

/* Tiles: grey filled tiles, six across. */
.rs-sizes-tiles form.cart .rs-chips { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }
.rs-sizes-tiles form.cart .rs-chips .rs-chip { width: 100% !important; height: 48px !important; border-radius: var(--rs-tile-radius, 12px) !important; background: var(--e-global-color-rs_cream, #f1f1f1) !important; }
@media (max-width: 420px) { .rs-sizes-tiles form.cart .rs-chips { grid-template-columns: repeat(4, 1fr); } }

/* Width toggle: the width attribute's chips as one segmented pill switch. */
.rs-width-toggle form.cart .rs-chips[data-attribute*="width"] { display: inline-flex; gap: 2px; padding: 4px; border-radius: 999px; background: var(--e-global-color-rs_cream, #f1f1f1); }
.rs-width-toggle form.cart .rs-chips[data-attribute*="width"] .rs-chip { width: auto !important; height: 38px !important; padding: 0 20px !important; border-radius: 999px !important; background: transparent !important; color: var(--rs-ink) !important; }
.rs-width-toggle form.cart .rs-chips[data-attribute*="width"] .rs-chip[aria-pressed="true"] { background: var(--e-global-color-rs_white, #fff) !important; color: var(--rs-ink) !important; box-shadow: 0 1px 4px rgba(0, 0, 0, .12) !important; }

/* Form rows: "Size | 50 ▾" — label column, then the control (tailoring). */
.rs-formrows form.cart table.variations, .rs-formrows form.cart table.variations tbody { display: block; width: 100%; }
.rs-formrows form.cart table.variations tr { display: grid !important; grid-template-columns: var(--rs-formrow-label, 110px) 1fr; align-items: center; gap: 16px; padding: 14px 0; border-top: 1px solid var(--e-global-color-rs_line, #ddd); margin: 0 !important; }
.rs-formrows form.cart table.variations th.label { display: block !important; padding: 0 !important; color: var(--e-global-color-rs_muted, #666); font-weight: 400; }
.rs-formrows form.cart table.variations td.value { display: block; padding: 0 !important; }
.rs-formrows form.cart select { width: 100%; height: 44px; padding: 0 32px 0 0; border: 0; border-bottom: 1px solid var(--rs-ink); border-radius: 0; background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23222' stroke-width='1.5'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") right 2px center / 18px no-repeat; color: var(--rs-ink); font: inherit; appearance: none; -webkit-appearance: none; cursor: pointer; }
.rs-formrows form.cart select:focus-visible { outline: 2px solid var(--rs-ink); outline-offset: 2px; }
.rs-formrows form.cart .reset_variations { font-size: 13px; }
.rs-formrow { padding: 14px 0 0; border-top: 1px solid var(--e-global-color-rs_line, #ddd); }
.rs-formrow > .elementor-widget:first-child { width: var(--rs-formrow-label, 110px); flex: none; }

/* --- details -------------------------------------------------------------- */
/* Lines: small chevron disclosures, no boxes (the first one open). */
.rs-pdp-acc--lines .e-n-accordion-item-title { padding: 6px 0 !important; border: 0 !important; background: none !important; justify-content: flex-start !important; gap: 8px; }
.rs-pdp-acc--lines .e-n-accordion-item-title-icon { order: -1; }
.rs-pdp-acc--lines .e-n-accordion-item-title-icon .e-closed svg { transform: rotate(-90deg); }
.rs-pdp-acc--lines .e-n-accordion-item { border: 0 !important; }
.rs-pdp-acc--lines .e-n-accordion-item > .e-con { padding: 4px 0 12px 22px !important; }

/* Tabs: underlined, on one hairline. */
.rs-pdp-tabs .e-n-tabs-heading { gap: 24px !important; border-bottom: 1px solid var(--e-global-color-rs_line, #ddd); justify-content: flex-start !important; flex-wrap: wrap; }
.rs-pdp-tabs .e-n-tab-title { min-width: 24px; justify-content: center; padding: 10px 0 !important; background: none !important; border: 0 !important; border-bottom: 2px solid transparent !important; margin-bottom: -1px; flex: none !important; }
.rs-pdp-tabs .e-n-tab-title[aria-selected="true"] { border-bottom-color: var(--rs-ink) !important; }
.rs-pdp-tabs .e-n-tabs-content > .e-con { padding: 18px 0 0 !important; border: 0 !important; }

/* Drawer link: the store's text link, with room to tap. */
.rs-pdp-drawer-link .elementor-heading-title a { display: inline-block; padding: 10px 0; text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px; }
.rs-drawer-entry { padding-top: 18px; border-top: 1px solid var(--e-global-color-rs_line, #ddd); }

/* Box label: the spec list printed as the label on the end of a shoe box. */
.rs-boxlabel .rs-spec { padding: 18px 20px; border: 1.5px solid var(--rs-ink); }
.rs-boxlabel .rs-spec__grid { display: grid !important; grid-template-columns: 1fr !important; gap: 0 !important; }
.rs-boxlabel .rs-spec__item { display: grid; grid-template-columns: 9em 1fr; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--e-global-color-rs_line, #ddd); }
.rs-boxlabel .rs-spec__item:last-child { border-bottom: 0; }
.rs-boxlabel .rs-spec__label { text-transform: uppercase; letter-spacing: .08em; font-size: 12px; }
.rs-boxlabel .rs-spec__colon { display: none; }

/* Feature tiles (bento). */
.rs-bento-tile { border-radius: var(--rs-tile-radius, 20px); background: var(--e-global-color-rs_cream, #f3f1ec); }
.rs-bento-tile--wide { grid-column: 1 / -1; }
.rs-bento-icon { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--e-global-color-rs_white, #fff); color: var(--e-global-color-secondary); }

.rs-pdp-line p { margin: 0; }

/* --- sticky buy bar ----------------------------------------------------------- */
.rs-sticky-buy { position: fixed; left: 0; right: 0; bottom: 0; z-index: 90; padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px)); background: var(--e-global-color-rs_white, #fff); border-top: 1px solid var(--e-global-color-rs_line, #ddd); transform: translateY(110%); transition: transform 260ms var(--rs-pdp-ease); }
.rs-sticky-buy.is-shown { transform: translateY(0); }
.rs-sticky-buy__inner { display: flex; align-items: center; gap: 12px; max-width: 1200px; margin: 0 auto; }
.rs-sticky-buy__thumb img { display: block; width: 44px; height: 44px; object-fit: cover; border-radius: var(--rs-sticky-radius, 0); }
.rs-sticky-buy__text { display: grid; min-width: 0; flex: 1; line-height: 1.25; }
.rs-sticky-buy__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; }
.rs-sticky-buy__price { font-size: 13px; color: var(--e-global-color-rs_muted, #666); }
.rs-sticky-buy__btn { flex: none; min-height: 46px; padding: 0 22px; border: 0; border-radius: var(--rs-sticky-radius, 0); background: var(--e-global-color-accent); color: var(--e-global-color-rs_white, #fff); font: inherit; font-weight: 600; cursor: pointer; transition: transform 160ms ease-out, opacity 160ms ease; }
.rs-sticky-buy__btn:active { transform: scale(0.97); }
.rs-sticky-buy__btn:focus-visible { outline: 2px solid var(--rs-ink); outline-offset: 2px; }
@media (min-width: 768px) { .rs-sticky-buy--mobile { display: none; } }
@media (prefers-reduced-motion: reduce) { .rs-sticky-buy { transition: none; } .rs-gal__dots i { transition: none; } }

/* Colour as photographs: each colour's own packshot in a rounded frame. */
.rs-swatch-shape-photo .rs-swatches__list { gap: 8px; }
.rs-swatch-shape-photo .rs-swatch { width: 64px !important; height: 64px !important; border-radius: var(--rs-tile-radius, 12px) !important; background: var(--e-global-color-rs_cream, #f1f1f1) !important; overflow: hidden; display: grid; place-items: center; box-shadow: none !important; outline: 1.5px solid transparent; outline-offset: 2px; transition: outline-color 160ms ease; }
.rs-swatch-shape-photo .rs-swatch img { width: 100%; height: 100%; object-fit: contain; }
.rs-swatch-shape-photo .rs-swatch.is-current { outline-color: var(--rs-ink); }

/* Typed sizes are letters, not boxes: the shared chip border came through. */
.rs-sizes-typed form.cart .rs-chips .rs-chip { border: 0 !important; box-shadow: none !important; }
.rs-sizes-typed form.cart .rs-chips .rs-chip:disabled, .rs-sizes-typed form.cart .rs-chips .rs-chip.is-unavailable { text-decoration: line-through; color: var(--e-global-color-rs_muted) !important; }
/* The sticky bar carries name and price only; the member line belongs to the page. */
.rs-sticky-buy__price .rs-member-price { display: none !important; }

/* --- [rs_sets]: the other sets of the same device, as picture cards (store CSS skins it) --- */
.rs-sets { display: grid; gap: 10px; }
.rs-sets__label { margin: 0; font-size: 14px; color: var(--e-global-color-rs_muted); }
.rs-sets__label span { color: var(--e-global-color-primary); }
.rs-sets ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.rs-set { display: flex; align-items: center; gap: 12px; min-height: 72px; padding: 8px 12px 8px 8px; border: 1px solid var(--e-global-color-rs_line); color: var(--e-global-color-primary); text-decoration: none; transition: border-color 150ms ease; }
.rs-set__img { flex: none; width: 56px; height: 56px; background: var(--e-global-color-rs_cream); }
.rs-set__img img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.rs-set__text { display: grid; gap: 2px; min-width: 0; }
.rs-set__name { font-size: 14px; line-height: 1.25; }
.rs-set__price { font-size: 13px; color: var(--e-global-color-rs_muted); }
.rs-set__price .rs-member-price { display: none; }
.rs-set.is-current { border-color: var(--e-global-color-primary); box-shadow: inset 0 0 0 1px var(--e-global-color-primary); }
@media (hover: hover) { .rs-set:not(.is-current):hover { border-color: var(--e-global-color-rs_muted); } }
.rs-set:active { transform: scale(0.98); }
/* Label sheet (recipes r_product "sheet"): a row whose pane rendered nothing (no specs on this product) is left out. */
.rs-sheet-row:not(:has(.rs-sheet-body .elementor-widget)) { display: none; }