/* RefStore Components — structural CSS only. Colour and type come from each
   site's Elementor globals via the custom properties the widgets set, so the
   same file serves every store. */

/* On body, not :root: Elementor defines its global colours on the kit class
   (body.elementor-kit-N), so at :root these always fell back to #111. */
body {
  --rs-ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --rs-ink: var(--e-global-color-primary, #111);
  --rs-muted: var(--e-global-color-rs_muted, #999);
  --rs-disabled: var(--e-global-color-rs_disabled, #ccc);
}

/* --- colourway swatches ------------------------------------------------- */
.rs-swatches { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.rs-swatches__label { flex: 0 0 100%; }
.rs-swatches__list { display: flex; flex-wrap: wrap; gap: var(--rs-swatch-gap, 10px); margin: 0; padding: 0; list-style: none; }
.rs-swatches__name { flex: 0 0 100%; }
.rs-swatch {
  display: block; width: var(--rs-swatch, 28px); height: var(--rs-swatch, 28px);
  border-radius: 50%; background: var(--rs-c);
  box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.12), 0 0 0 3px var(--rs-page, #fff), 0 0 0 4px transparent;
  transition: box-shadow 160ms var(--rs-ease-out), transform 160ms var(--rs-ease-out);
}
.rs-swatch-shape-square .rs-swatch { border-radius: 0; }
.rs-swatch.is-current { box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.12), 0 0 0 3px #fff, 0 0 0 4px var(--rs-swatch-ring, var(--rs-ink)); }
.rs-swatch:active { transform: scale(0.94); }
.rs-swatch:focus-visible { outline: 2px solid var(--rs-swatch-ring, var(--rs-ink)); outline-offset: 5px; }
@media (hover: hover) and (pointer: fine) {
  .rs-swatch:not(.is-current):hover { box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.12), 0 0 0 3px #fff, 0 0 0 4px var(--rs-muted); }
}

/* --- spec grid --------------------------------------------------------- */
.rs-spec__heading { margin: 0 0 20px; }
.rs-spec__grid { display: grid; grid-template-columns: repeat(var(--rs-spec-cols, 3), minmax(0, 1fr)); gap: var(--rs-spec-gap, 24px) 20px; margin: 0; }
.rs-spec__item[hidden] { display: none; }
.rs-spec__label { margin: 0 0 4px; }
.rs-spec__value { margin: 0; }
.rs-spec .rs-spec__toggle { margin-top: 20px; padding: 0; background: none; border: 0; font: inherit; font-weight: 700; cursor: pointer; }
.rs-spec__toggle:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }

/* --- size table -------------------------------------------------------- */
.rs-size-table { width: 100%; border-collapse: collapse; }
.rs-size-table caption { text-align: left; font-weight: 700; padding-bottom: 12px; }
.rs-size-table th, .rs-size-table td { padding: 8px 10px 8px 0; text-align: left; border-bottom: 1px solid var(--rs-rule, #e5e5e5); font-weight: 400; }
.rs-size-table thead th { font-weight: 700; }

/* --- size chips (enhances WooCommerce's own select; see size-chips.js) --
   The chips sit inside WooCommerce's cart form, and Elementor's Add to Cart
   widget styles EVERY button in that form (.elementor-N .elementor-element-X
   .cart button — four classes) with the add-to-cart button's padding, fill
   and radius. No reasonable selector outranks that, so the properties it sets
   are pinned here with !important, scoped to this component only. */
.rs-chips { display: flex; flex-wrap: wrap; gap: 0; margin: 0 0 8px; padding: 0; list-style: none; }
form.cart .rs-chips .rs-chip {
  width: 50px !important; height: 50px !important; min-height: 0 !important; padding: 0 !important;
  border: 0 !important; border-radius: 50% !important; background: transparent !important;
  color: var(--rs-ink) !important; font: inherit; font-size: 16px !important; line-height: 1 !important;
  text-transform: none !important; letter-spacing: 0 !important; cursor: pointer; box-shadow: none !important;
  transition: background-color 160ms var(--rs-ease-out), color 160ms var(--rs-ease-out), transform 120ms var(--rs-ease-out);
}
/* --rs-chip-on: text on the pressed chip; white by default, dark on a dark store. */
form.cart .rs-chips .rs-chip[aria-pressed="true"] { background: var(--rs-ink) !important; color: var(--rs-chip-on, #fff) !important; }
form.cart .rs-chips .rs-chip:active { transform: scale(0.94); }
/* Long labels (colour names): the chip grows to fit the words, as a pill. */
form.cart .rs-chips .rs-chip.rs-chip--wide { width: auto !important; min-width: var(--rs-chip-size, 50px); padding: 0 16px !important; border-radius: var(--rs-chip-wide-radius, 999px) !important; white-space: nowrap; }
form.cart .rs-chips:has(.rs-chip--wide) { gap: 6px; }
form.cart .rs-chips .rs-chip:disabled, form.cart .rs-chips .rs-chip.is-unavailable { color: var(--rs-muted) !important; text-decoration: line-through; cursor: not-allowed; }
form.cart .rs-chips .rs-chip:focus-visible { outline: 2px solid var(--rs-ink); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) {
  form.cart .rs-chips .rs-chip:not(:disabled):not([aria-pressed="true"]):hover { background: var(--e-global-color-rs_cream, #f3f0eb) !important; }
}
/* The native select stays in the DOM as the source of truth; visually hidden,
   not display:none, so WooCommerce's scripts and assistive tech still see it. */
.rs-chips-enhanced select {
  position: absolute !important; width: 1px !important; min-width: 0 !important; max-width: 1px !important; height: 1px !important; padding: 0 !important; border: 0 !important; margin: 0 !important; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
  /* WooCommerce gives variation selects min-width: 75%: a 372px invisible select widened 03's page. */
}
.rs-chips-enhanced .reset_variations { display: none !important; }

/* Add to cart before a size is chosen: the reference greys it and says so. */
.single_add_to_cart_button.wc-variation-selection-needed,
.single_add_to_cart_button.disabled {
  background-color: var(--rs-disabled) !important; color: color-mix(in srgb, var(--e-global-color-primary, #111) 64%, var(--rs-disabled)) !important; cursor: not-allowed;
}
.single_add_to_cart_button { transition: background-color 200ms var(--rs-ease-out), transform 120ms var(--rs-ease-out); }
.single_add_to_cart_button:not(.disabled):active { transform: scale(0.97); }

/* --- archive cards outside Loop Grid ------------------------------------ */
.rs-colour-count { display: block; color: var(--rs-muted); font-size: 12px; }

@media (prefers-reduced-motion: reduce) {
  .rs-swatch, .rs-chip, .single_add_to_cart_button { transition-property: background-color, color, box-shadow; }
  .rs-swatch:active, .rs-chip:active, .single_add_to_cart_button:active { transform: none; }
}

/* --- product card: hover image ------------------------------------------
   Two stacked images in the card's media container; the second fades in on
   real hover only. Opacity alone (no scale, no slide): a card grid is seen
   dozens of times per visit, so the motion stays quiet and quick. */
.rs-hover-swap { position: relative; overflow: hidden; }
.rs-hover-swap .rs-hover-img { position: absolute; inset: 0; margin: 0; opacity: 0; transition: opacity 200ms var(--rs-ease-out); pointer-events: none; }
.rs-hover-swap .rs-hover-img img { width: 100%; height: 100%; object-fit: cover; }
/* A cross-fade, not a layer on top: the first image fades out as the second comes in. Product
   photos are blended (multiply) or cut out, so a second image laid over a visible first showed
   both shoes at once (15 Oct, Faizan: "ghosting"). Only when a second image exists. */
.rs-hover-swap .elementor-widget-image:not(.rs-hover-img) img { transition: opacity 200ms var(--rs-ease-out); }
@media (hover: hover) and (pointer: fine) {
  .rs-hover-swap:hover .rs-hover-img { opacity: 1; }
  .rs-hover-swap:hover:has(.rs-hover-img img[src]:not([src=""])) .elementor-widget-image:not(.rs-hover-img) img { opacity: 0; }
}
.rs-badge:empty { display: none; }

/* --- archive controls --------------------------------------------------- */
.rs-sort { display: inline-flex; align-items: center; gap: 8px; }
.rs-sort .woocommerce-ordering { margin: 0 !important; float: none !important; }
.rs-sort select { border: 0; background: transparent; font: inherit; font-size: inherit !important; line-height: inherit; color: inherit; padding: 0 18px 0 0; cursor: pointer; }
.rs-size-filter__label { margin: 0 0 12px; }
.rs-size-filter .rs-chips { gap: 6px; }
.rs-size-filter .rs-chip { display: inline-grid; place-items: center; width: 36px; height: 36px; border: 1px solid var(--e-global-color-rs_line, #e4dfd8); border-radius: 0; font-size: 13px; text-decoration: none; }
.rs-size-filter .rs-chip[aria-pressed="true"] { border-color: var(--rs-ink); }
.rs-size-filter__clear { display: inline-block; margin-top: 12px; font-size: 13px; }

/* --- ticker band -------------------------------------------------------
   Constant motion, so linear timing. Paused while hovered (someone is trying
   to read it) and stopped outright under reduced motion. The track holds two
   copies of the items and moves by exactly one copy's width, so the loop is
   seamless. */
/* Elementor sets .e-con { overflow: var(--overflow) } with equal weight, so
   the clip needs the extra class and the variable. */
.e-con.rs-ticker { overflow: hidden; --overflow: hidden; }
.rs-ticker .elementor-widget-text-editor { width: 100%; }
.rs-ticker__track { display: flex; width: max-content; gap: var(--rs-ticker-gap, 150px); animation: rs-ticker var(--rs-ticker-speed, 60s) linear infinite; white-space: nowrap; }
.rs-ticker__item { flex: none; }
@media (hover: hover) and (pointer: fine) { .rs-ticker:hover .rs-ticker__track { animation-play-state: paused; } }
@keyframes rs-ticker { to { transform: translateX(calc(-50% - var(--rs-ticker-gap, 150px) / 2)); } }
@media (prefers-reduced-motion: reduce) { .rs-ticker__track { animation: none; } }

/* --- gallery grid ------------------------------------------------------ */
.rs-gallery-grid { display: grid; grid-template-columns: repeat(var(--rs-gallery-cols, 2), minmax(0, 1fr)); gap: 1px; }
.rs-gallery-grid__item { margin: 0; aspect-ratio: var(--rs-gallery-ratio, 1 / 1); overflow: hidden; background: var(--e-global-color-rs_cream, #f5f2ed); }
.rs-gallery-grid__item img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Phones: the photographs become one swipeable row; the next one peeks in. */
@media (max-width: 767px) {
	.rs-gallery-grid { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 2px; scrollbar-width: none; -webkit-overflow-scrolling: touch; margin: 0 -16px; padding: 0 16px; scroll-padding: 0 16px; overscroll-behavior-x: contain; }
	.rs-gallery-grid::-webkit-scrollbar { display: none; }
	.rs-gallery-grid__item { flex: 0 0 88%; scroll-snap-align: start; }
	.rs-gallery-rail { display: none !important; }
	.rs-gallery-count { display: block; text-align: right; font-size: 12px; letter-spacing: .06em; margin-top: 8px; color: var(--e-global-color-rs_muted, #6e6c69); font-variant-numeric: tabular-nums; }
}
@media (min-width: 768px) { .rs-gallery-count { display: none; } }   /* after the phone rule, a bare display:none hid it everywhere */

/* --- per-site chip shape ------------------------------------------------ */
form.cart .rs-chips .rs-chip { width: var(--rs-chip-size, 50px) !important; height: var(--rs-chip-size, 50px) !important; border-radius: var(--rs-chip-radius, 50%) !important; font-size: var(--rs-chip-font, 16px) !important; }

/* --- quiet text link ---------------------------------------------------
   An underline that thins on hover. Colour and weight stay put, so the link
   does not shift its neighbours. Hover only on devices that really hover. */
.rs-textlink .elementor-heading-title, .rs-textlink .elementor-button-text { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; transition: text-underline-offset 160ms var(--rs-ease-out); }
.rs-textlink a { color: inherit; }
.rs-textlink .elementor-heading-title, .rs-textlink .elementor-button-text { white-space: nowrap; }
.elementor-widget.rs-textlink { flex-shrink: 0; }
/* Phones: text links get a 32px-tall hit area without changing how they look. */
@media (max-width: 767px) { .rs-textlink .elementor-heading-title a { display: inline-block; padding-block: 8px; margin-block: -8px; } }
@media (hover: hover) and (pointer: fine) { .rs-textlink:hover .elementor-heading-title, .rs-textlink:hover .elementor-button-text { text-underline-offset: 6px; } }
@media (prefers-reduced-motion: reduce) { .rs-textlink .elementor-heading-title, .rs-textlink .elementor-button-text { transition: none; } }

/* --- variation form -------------------------------------------------------
   WooCommerce lays variations out as a table, and the theme stripes table
   rows; the chip rows sit on the page ground instead. */
form.cart table.variations, form.cart table.variations tbody, form.cart table.variations tr, form.cart table.variations th, form.cart table.variations td { background: transparent !important; border: 0 !important; }

/* --- header on small screens --------------------------------------------------
   The icon cluster can overrun a 360px bar by a pixel or two (the cart button
   carries its own padding); clip it rather than let the page scroll sideways. */
@media (max-width: 767px) { .elementor-location-header { overflow-x: clip; } }

/* A simple product has nothing to size: no "Size:" row, no size guide. */
.product-type-simple .rs-sizerow { display: none !important; }
/* The "Size guide" link was 18px tall: give it a 24px target (WCAG 2.2 AA). */
.rs-sizerow .elementor-heading-title a { display: inline-flex; align-items: center; min-height: 24px; }

/* img_fill(): an image filling its container under the content (a background
   video's stand-in). The container's other children sit above it. */
.e-con:has(> .rs-fill), .e-con-inner:has(> .rs-fill) { overflow: hidden; }
.elementor-widget-image.rs-fill { inset: 0; width: 100% !important; height: 100%; max-width: none; pointer-events: none; }
.rs-fill .elementor-widget-container, .rs-fill img { width: 100%; height: 100% !important; max-width: none !important; object-fit: cover; display: block; }
.e-con:has(> .rs-fill) > :not(.rs-fill), .e-con-inner:has(> .rs-fill) > :not(.rs-fill) { position: relative; z-index: 1; }

/* rs_gallery_grid thumbs="1": thumbnail rail beside the stacked images. */
.rs-gallery-with-rail { display: grid; grid-template-columns: 105px 1fr; gap: 122px; align-items: start; }
.rs-gallery-rail { position: sticky; top: 140px; display: flex; flex-direction: column; gap: 8px; }
.rs-gallery-rail a { display: block; border-radius: 4px; overflow: hidden; opacity: 0.6; transition: opacity 200ms ease; }
.rs-gallery-rail a:hover, .rs-gallery-rail a:focus-visible { opacity: 1; }
.rs-gallery-rail img { width: 105px; height: 158px; object-fit: contain; display: block; }
.rs-gallery-with-rail .rs-gallery-grid { gap: 7px; }
@media (max-width: 1024px) { .rs-gallery-with-rail { grid-template-columns: 1fr; gap: 16px; } .rs-gallery-rail { display: none; } }

/* rs_upsell: the bundle card on a product page. */
.rs-upsell { display: grid; gap: 12px; padding: 16px; border-radius: 8px; background: rgba(217,217,217,0.12); color: inherit; text-decoration: none; }
.rs-upsell__img img { width: 100%; height: 242px; object-fit: contain; display: block; }
.rs-upsell__row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 0 16px; }
.rs-upsell__name { font-size: 24px; line-height: 1.4; color: var(--e-global-color-primary); }
.rs-upsell__price { font-size: 14px; }
.rs-upsell__price del { opacity: 0.7; margin-left: 6px; }
.rs-upsell__summary { padding: 0 16px; color: var(--e-global-color-text); }
.rs-upsell__cta { margin: 8px 16px 0; justify-self: start; padding: 8px 16px; border-radius: 8px; background: var(--e-global-color-accent); color: #161616; transition: transform 160ms ease-out; }
.rs-upsell:active .rs-upsell__cta { transform: scale(0.97); }

/* Spec grid, centred variant (label over value, no colon). */
.rs-spec-center .rs-spec__item { text-align: center; display: flex; flex-direction: column; gap: 0; }
.rs-spec-center .rs-spec__colon { display: none; }
.rs-spec-center .rs-spec__label { color: var(--e-global-color-text); }

/* The variations table spans its column, so size chips can fill the row. */
.single-product form.variations_form table.variations, .single-product form.variations_form table.variations :is(tbody, tr, td) { display: block; width: 100%; }
.single-product form.cart .rs-chips { width: 100%; }

/* Prices never break across lines, and take their widget's colour (not the theme's link blue). */
.elementor-widget-woocommerce-product-price .price, .elementor-widget-woocommerce-product-price .price * { white-space: nowrap; }
.elementor-widget-woocommerce-product-price .woocommerce-Price-amount, .elementor-widget-woocommerce-product-price bdi { color: inherit !important; }
.e-loop-item .elementor-widget-woocommerce-product-price { flex-shrink: 0; }

/* Add to cart spans its column (variable products wrap it in two more boxes). */
.elementor-widget-woocommerce-product-add-to-cart .woocommerce-variation-add-to-cart { flex: 1 1 100%; width: 100%; }
.elementor-widget-woocommerce-product-add-to-cart .e-atc-qty-button-holder { display: flex; width: 100%; gap: 12px; }
.elementor-widget-woocommerce-product-add-to-cart .e-atc-qty-button-holder .single_add_to_cart_button { flex: 1 1 auto; width: 100%; }
/* Name and price on one line: the name takes the room and wraps, the price keeps its width. */
.rs-title-row :is(> .elementor-widget-heading, > .e-con-inner > .elementor-widget-heading) { flex: 1 1 auto !important; min-width: 0; width: auto !important; }
.rs-title-row :is(> .elementor-widget-woocommerce-product-price, > .e-con-inner > .elementor-widget-woocommerce-product-price) { flex: none !important; width: auto !important; max-width: none !important; }
/* Before a size is chosen the button is styled here; WooCommerce's extra 50% fade made it unreadable. */
.single_add_to_cart_button.disabled, .single_add_to_cart_button.wc-variation-selection-needed { opacity: 1 !important; }
.single_add_to_cart_button.disabled:hover, .single_add_to_cart_button.wc-variation-selection-needed:hover { background-color: var(--rs-disabled) !important; color: color-mix(in srgb, var(--e-global-color-primary, #111) 64%, var(--rs-disabled)) !important; }
/* Name and price: the price drops under a long name rather than past the column. */
.rs-title-row, .rs-title-row > .e-con-inner { flex-wrap: wrap !important; }
.rs-title-row :is(> .elementor-widget-heading, > .e-con-inner > .elementor-widget-heading) { flex: 1 1 60% !important; }
/* The thumbnail rail never widens the gallery on small screens. */
.rs-gallery-with-rail { grid-template-columns: 105px minmax(0, 1fr); }
@media (max-width: 1024px) { .rs-gallery-with-rail { grid-template-columns: minmax(0, 1fr); } }
.rs-size-filter__group { margin: 18px 0 8px; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; opacity: .7; }
/* Result rows (r_row_card): a fixed thumbnail, the words taking the room, the price at its own width. */
.rs-row-card .rs-row-thumb { flex: 0 0 auto !important; width: auto !important; }
.rs-row-card .rs-row-thumb img { max-width: none !important; display: block; }
.rs-row-card .rs-row-words { flex: 1 1 auto !important; min-width: 0; width: auto !important; }
.rs-row-card .rs-row-words .elementor-heading-title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rs-row-card .rs-row-words > .e-con-inner { min-width: 0; }   /* without it a long name could not shrink and pushed the price off screen */
.rs-row-card .rs-row-price { flex: 0 0 auto !important; white-space: nowrap; }
.rs-row-card .rs-row-price .price { white-space: nowrap; }

/* Membership link in the header ([rs_member_link]): structure only; each store dresses it. */
.elementor-shortcode:has(> .rs-mlink) { display: flex; } /* no line box under the link */
.rs-mlink { position: relative; display: inline-flex; align-items: center; gap: 8px; color: inherit; text-decoration: none; line-height: 1; -webkit-tap-highlight-color: transparent; }
.rs-mlink__ic { position: relative; display: inline-flex; flex: none; width: var(--rs-mlink-size, 21px); height: var(--rs-mlink-size, 21px); }
.rs-mlink__ic svg { width: 100%; height: 100%; display: block; }
.rs-mlink.is-member .rs-mlink__ic::after { content: ""; position: absolute; top: -2px; right: -3px; width: 7px; height: 7px; border-radius: 50%; background: var(--rs-mlink-dot, var(--e-global-color-accent)); box-shadow: 0 0 0 2px var(--rs-mlink-ring, #fff); }
.rs-mlink:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }
@media (hover: hover) {
	/* Anchored to the link's right edge: the link sits near the right of every header, and a centred
	   tip (hidden, but still laid out) widened the page by up to 15px (Field Studio audit, 14 Oct). */
	.rs-mlink[data-tip]::before { content: attr(data-tip); position: absolute; top: calc(100% + 12px); right: 0; left: auto; z-index: 30; transform: translateY(-4px); padding: 7px 10px; white-space: nowrap; font: 500 12px/1.2 var(--e-global-typography-text-font-family), sans-serif; letter-spacing: 0; text-transform: none; color: var(--rs-tip-fg, #fff); background: var(--rs-tip-bg, #111); border-radius: var(--rs-tip-radius, 4px); opacity: 0; pointer-events: none; transition: opacity 150ms cubic-bezier(0.23, 1, 0.32, 1), transform 150ms cubic-bezier(0.23, 1, 0.32, 1); }
	.rs-mlink:is(:hover, :focus-visible)::before { opacity: 1; transform: translateY(0); transition-delay: 250ms; }
}
.rs-mlink:active .rs-mlink__ic { transform: scale(0.94); }
.rs-mlink__ic { transition: transform 140ms ease-out; }
/* The kit colours every link (a and a:hover); the stores set --rs-m-fg instead of color. */
html body a.rs-mlink.rs-mlink { color: var(--rs-m-fg, inherit); }
/* Elementor's sticky script writes the header width in pixels when it pins. When a scrollbar
   appears later (the page grows), that width is 15px too wide and every page scrolls sideways.
   A fixed element's 100% is the viewport without the scrollbar. */
.elementor-sticky--active { max-width: 100% !important; }
/* Phones: a search popup's results run to the bottom of the screen and scroll there, so the
   sheet never stops halfway with the page showing under it (02, 04). */
@media (max-width: 767px) { .rs-search-popup .e-search-results-container { max-height: calc(100dvh - 190px) !important; overflow-y: auto; } }

/* Hello's reset (now in a cascade layer) boxes every table cell with a grey border and stripes odd
   rows. Store tables state only the lines they want (usually a bottom rule), so the reset's grid
   showed through (Rally House's compare table and spec rows, 15 Oct). Zero specificity, unlayered:
   beats the layered reset, loses to every store rule. */
:where(table) :where(th, td) { border: 0; background-color: transparent; }