/* 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; height: 1px !important; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
.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; }
@media (hover: hover) and (pointer: fine) {
  .rs-hover-swap:hover .rs-hover-img { opacity: 1; }
}
.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: 11px; letter-spacing: .06em; margin-top: 8px; opacity: .6; font-variant-numeric: tabular-nums; }
}
.rs-gallery-count { display: none; }

/* --- 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; }

/* 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-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) {
	.rs-mlink[data-tip]::before { content: attr(data-tip); position: absolute; top: calc(100% + 12px); left: 50%; z-index: 30; transform: translate(-50%, -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: translate(-50%, 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); }