/* RugsCurator — Elementor support stylesheet
   Provides the interaction/utility CSS that native Elementor controls
   cannot express natively (matches src/index.css + component classes
   from the original React codebase). */

/* Elementor's "boxed" content-width (content_width:boxed) always centers via
   `.e-con-inner{margin:0 auto}` (see assets/dev/scss/frontend/_container.scss).
   The original React layout uses plain Tailwind max-w-* WITHOUT mx-auto for
   these inner description-text wrappers (e.g. max-w-2xl on a <div> with no
   auto margin) -- i.e. a left-aligned max-width cap, not a centered block.
   There is no native Elementor control for "boxed but left-aligned", so this
   override targets the auto-generated .e-con-inner wrapper directly. */
/* Elementor's own frontend.min.css rule is `.e-con>.e-con-inner{margin:0 auto}`
   -- two classes, specificity (0,2,0) -- and it loads after this stylesheet,
   so an equal-specificity `.rc-cap-left > .e-con-inner` selector loses the
   tie-break on load order. Add the .e-con class ourselves to reach (0,3,0)
   and win outright regardless of stylesheet order. */
.rc-cap-left.e-con > .e-con-inner{ margin-left:0 !important; margin-right:auto !important; }

:root{
  --rc-background-50:#faf6ee; --rc-background-100:#f6efe1; --rc-background-200:#efe5d0;
  --rc-background-800:#6f6149; --rc-background-900:#514634;
  --rc-foreground-400:#a29e96; --rc-foreground-500:#848077; --rc-foreground-600:#67635a;
  --rc-foreground-700:#4b4740; --rc-foreground-800:#302d28; --rc-foreground-900:#211f1b; --rc-foreground-950:#100f0d;
  --rc-primary-300:#e5b3ac; --rc-primary-600:#5f2622; --rc-primary-700:#4d1c1b;
  --rc-accent-400:#baa57d; --rc-accent-500:#8e774d; --rc-accent-600:#75603b; --rc-accent-700:#5d4a2b;
  --rc-font-heading:'Cormorant Garamond', Georgia, serif;
  --rc-font-body:'Manrope','Helvetica Neue',Arial,sans-serif;
}

/* hairline editorial underline animation */
.rc-link-underline{ position:relative; }
.rc-link-underline::after{
  content:''; position:absolute; left:0; bottom:-2px; height:1px; width:100%;
  background-color:currentColor; transform:scaleX(0); transform-origin:left;
  transition:transform .45s cubic-bezier(.22,1,.36,1);
}
.rc-link-underline:hover::after{ transform:scaleX(1); }

/* slow reveal-on-scroll (JS toggles .rc-visible) */
.rc-reveal{ opacity:0; transform:translateY(26px); transition:opacity 1s cubic-bezier(.22,1,.36,1), transform 1s cubic-bezier(.22,1,.36,1); }
.rc-reveal.rc-visible{ opacity:1; transform:translateY(0); }

/* subtle image zoom on hover */
.rc-img-zoom{ overflow:hidden; }
.rc-img-zoom img{ transition:transform 1.4s cubic-bezier(.22,1,.36,1); }
.rc-img-zoom:hover img{ transform:scale(1.05); }

/* Elementor wraps every widget in .elementor-widget-<type> > .elementor-widget-container
   before the real markup, so aspect/cross-fade rules below target *descendants*, not direct children. */
.rc-aspect .elementor-widget-image,
.rc-aspect .elementor-widget-image .elementor-widget-container{ position:static; height:100%; }

/* product card image cross-fade (2nd image widget layered over the 1st) */
.rc-crossfade{ position:relative; }
.rc-crossfade .rc-img-a img{ transition:opacity .7s ease; }
.rc-crossfade .rc-img-b{ position:absolute; inset:0; }
.rc-crossfade .rc-img-b img{ opacity:0; transition:opacity .7s ease; }
.rc-crossfade:hover .rc-img-a img{ opacity:0; }
.rc-crossfade:hover .rc-img-b img{ opacity:1; }

/* product card wishlist heart button: found invisible on BOTH pages that
   use it (Collection and Curated Edits, since they share
   build_collection.product_card()) while verifying Curated Edits. The
   button's own `html_widget` wrapper div sits, in normal flow, right
   AFTER the crossfade's first (in-flow) image widget -- so its own flow
   top offset is ~one image-height below the crossfade box's top, and its
   own height auto-collapses to 0 (the button inside is `position:absolute`,
   contributing nothing to auto height). The button's `top:12px;right:12px`
   is measured from THAT zero-height div's top edge, not the crossfade
   box's -- landing it a whole image-height below where it visually needs
   to be, clipped away entirely by the crossfade's own `overflow:hidden`.
   Fix: pin the wrapper itself to `inset:0` over the same box the images
   occupy (like `.rc-crossfade .rc-img-b` already does), so the button's
   own absolute offset is measured from the right place; `pointer-events`
   split so the (otherwise full-card-covering) wrapper doesn't block
   clicks/hover on the image or its link underneath. `!important` on
   `position`: Elementor's own base widget CSS sets `.elementor-widget{
   position:relative }`, which ties this rule's specificity (one class
   each) and, loading after this stylesheet, wins the tie -- the same
   load-order tie-break already documented several times in this file
   (.rc-aspect img, .rc-cap-left, .e-con position/z-index), just on
   `.elementor-widget` this time instead of `.e-con`. Confirmed via
   getComputedStyle: without !important this computed to "relative", not
   "absolute", which was silently defeating the whole fix below. */
.rc-card-wishlist-wrap{ position:absolute !important; inset:0; pointer-events:none; }
.rc-card-wishlist-wrap button{ pointer-events:auto; }

/* aspect ratio helpers (object-fit crop containers).
   !important is required here: Elementor's own frontend.min.css ships a
   global `.elementor img{height:auto;max-width:100%;...}` rule at equal
   specificity (one class + the img tag) that loads AFTER this stylesheet,
   so on a load-order tie it wins and collapses the image back to its
   intrinsic aspect ratio instead of filling (and being cropped to) this
   box -- visible as the crop box being taller than the image it contains. */
.rc-aspect{ position:relative; width:100%; overflow:hidden; }
.rc-aspect img{ position:absolute !important; inset:0; width:100% !important; height:100% !important; object-fit:cover; object-position:top center; }
.rc-aspect-4-5{ aspect-ratio:4/5; }
.rc-aspect-square{ aspect-ratio:1/1; }
.rc-aspect-16-11{ aspect-ratio:16/11; }
.rc-aspect-16-10{ aspect-ratio:16/10; }
.rc-aspect-4-3{ aspect-ratio:4/3; }

/* header: floating-over-image -> solid on scroll */
/* position:fixed !important, z-index !important: this class is applied via
   css_classes on an Elementor CONTAINER element, so it also carries
   Elementor's own `.e-con{ position:var(--position,relative); z-index:var(--z-index,revert); }`
   rule from frontend.css, which loads after this stylesheet and ties at
   equal specificity -- without !important both properties silently
   revert (confirmed the same way as the z-index issue documented below on
   .rc-filter-bar, discovered here because it made the header invisible
   once actually scrolled past its home position, not just when tested at
   scroll 0 where "reverted to relative but still at the top of the page"
   looks identical to "fixed at the top of the page"). */
.rc-site-header{ position:fixed !important; top:0; left:0; width:100%; z-index:9999 !important; transition:all .5s ease; background:transparent; border-bottom:1px solid rgba(250,246,238,.15); }
.rc-site-header.rc-scrolled{ background:var(--rc-background-50); border-bottom-color:rgba(33,31,27,.1); }
.rc-site-header .rc-nav-link,
.rc-site-header .rc-icon-btn,
.rc-site-header .rc-wordmark{ color:var(--rc-background-50); transition:color .5s ease; }
.rc-site-header.rc-scrolled .rc-nav-link{ color:var(--rc-foreground-700); }
.rc-site-header.rc-scrolled .rc-nav-link:hover{ color:var(--rc-foreground-950); }
.rc-site-header.rc-scrolled .rc-icon-btn{ color:var(--rc-foreground-800); }
.rc-site-header.rc-scrolled .rc-wordmark{ color:var(--rc-foreground-950); }
.rc-hero-spacer{ height:0; }
.rc-site-header.rc-scrolled ~ .rc-hero-spacer{ }

/* mobile menu + search overlay + cart drawer (off-canvas panels) */
.rc-offcanvas{ position:fixed; inset:0; z-index:10000 !important; display:none; }
.rc-offcanvas.rc-open{ display:block; }
.rc-offcanvas .rc-offcanvas-backdrop{ position:absolute; inset:0; background:rgba(16,15,13,.5); }
.rc-offcanvas .rc-offcanvas-panel{ position:absolute; background:var(--rc-background-50); }
.rc-mobile-menu .rc-offcanvas-panel{ inset:0; }
.rc-cart-drawer .rc-offcanvas-panel{ right:0; top:0; height:100%; width:100%; max-width:420px; }
.rc-search-overlay .rc-offcanvas-backdrop{ backdrop-filter:blur(2px); }
.rc-search-overlay .rc-offcanvas-panel{ left:0; right:0; top:0; background:var(--rc-background-50); }

.rc-badge{ position:absolute; top:-2px; right:-2px; width:14px; height:14px; border-radius:999px; background:var(--rc-primary-600); color:var(--rc-background-50); font-size:8px; display:flex; align-items:center; justify-content:center; }

.rc-form-input{ width:100%; background:transparent; border:0; border-bottom:1px solid rgba(33,31,27,.2); padding:.5rem 0; font-size:.875rem; color:var(--rc-foreground-900); outline:none; }
.rc-form-input:focus{ border-color:var(--rc-accent-500); }

@media (max-width: 1023px){ .rc-desktop-nav{ display:none !important; } }
@media (min-width: 1024px){ .rc-mobile-toggle{ display:none !important; } }

/* ---- standard header (all pages except the homepage) ------------------ */
/* Header.tsx: sticky, always solid; only border-opacity/padding shift on
   scroll (no transparent state, unlike the homepage's rc-site-header). */
/* position:fixed, not position:sticky: once a `position:sticky` element on
   this page actually engages (the user scrolls past its natural position
   and it pins in place), it stops painting its own content entirely in
   this environment -- confirmed for BOTH this header (top:0) and the
   Collection filter bar (top:57px), so the failure isn't about the `top`
   value, it's `position:sticky`'s "stuck" state itself. `position:fixed`
   doesn't have that stuck/unstuck state transition and renders correctly
   throughout scrolling (matches the homepage's own header, .rc-site-header,
   which already uses fixed for the same reason). A JS-inserted spacer
   (rugscurator-support.js) compensates for `fixed` removing this element
   from normal flow, so the page layout is unaffected. */
.rc-standard-header{ position:fixed !important; top:0; left:0; width:100%; z-index:50 !important; }
.rc-standard-header .rc-header-bar-wrap{ transition:padding .3s ease; }
.rc-standard-header.rc-scrolled-standard{ border-bottom-color:rgba(33,31,27,.1) !important; }
.rc-standard-header.rc-scrolled-standard .rc-header-bar-wrap{ padding-top:12px !important; padding-bottom:12px !important; }

/* ---- footer main grid (grid-cols-2 md:grid-cols-4) --------------------- */
.rc-footer-brand-col{ grid-column:span 2 / span 2; }
@media (min-width:768px){ .rc-footer-maingrid{ grid-template-columns:repeat(4,1fr) !important; } }

/* ---- collection page: sticky filter bar + custom multi-facet dropdowns -
   No native Elementor widget (free or Pro) combines independent
   AND-composed facet filters (style/material/colour/price) with a live
   result count and a "Clear" reset over a fixed client-side array, so
   this whole interactive block is custom HTML/CSS/JS.

   The "sticks below the header while scrolling" behavior is done with a
   JS-driven fixed-position toggle (see rugscurator-support.js) instead of
   plain `position:sticky`. Reason: `position:sticky` with a NONZERO `top`
   on this element reproducibly fails to paint its own content in this
   Elementor container nesting (confirmed by bisection: `top:0` and
   `position:static` both render correctly; any `top` at roughly >=55px --
   which is what a real "stick below the header" value needs to be --
   renders the element completely blank, in its natural position AND
   after scrolling past its sticky point). `position:sticky` at `top:0`
   IS used successfully elsewhere on this page (.rc-standard-header), so
   the failure is specific to the sticky+nonzero-top combination, not
   sticky positioning generally. Rather than ship a filter bar that could
   render blank for site visitors, the fixed-position + spacer polyfill
   below avoids that CSS combination entirely. */
/* !important on z-index: Elementor's own frontend.css sets a blanket
   `.e-con{ --z-index:revert; z-index:var(--z-index); }`, which loads AFTER
   this stylesheet and ties our z-index at equal (0,1,0) specificity --
   same tie-break pattern already documented/fixed elsewhere in this file
   (.rc-aspect img, .rc-cap-left) -- so without !important this element's
   z-index silently reverts to auto. */
.rc-filter-bar{ position:relative; z-index:40 !important; background:var(--rc-background-50); }
.rc-filter-bar.rc-stuck{ position:fixed !important; left:0; right:0; }
.rc-filter-bar-spacer{ display:none; }
.rc-filter-dd{ position:relative; }
.rc-filter-dd-btn{ display:inline-flex; align-items:center; gap:8px; padding:8px 16px; border:1px solid rgba(33,31,27,.15);
  font-family:'Manrope',sans-serif; font-size:11px; text-transform:uppercase; letter-spacing:.16em; color:var(--rc-foreground-600);
  background:transparent; cursor:pointer; white-space:nowrap; transition:border-color .3s,color .3s,background .3s; }
.rc-filter-dd-btn.rc-active{ border-color:var(--rc-foreground-950); color:var(--rc-foreground-950); background:var(--rc-background-100); }
.rc-filter-dd-btn i{ font-size:14px; transition:transform .3s; }
.rc-filter-dd.rc-open .rc-filter-dd-btn i{ transform:rotate(180deg); }
.rc-filter-dd-panel{ position:absolute; left:0; top:100%; margin-top:8px; z-index:20 !important; background:var(--rc-background-50);
  border:1px solid rgba(33,31,27,.1); padding:8px 0; min-width:180px; max-height:288px; overflow-y:auto; display:none; }
.rc-filter-dd.rc-open .rc-filter-dd-panel{ display:block; }
.rc-filter-dd-panel button{ display:block; width:100%; text-align:left; padding:10px 20px; font-size:14px; background:none;
  border:0; cursor:pointer; color:var(--rc-foreground-600); font-family:'Manrope',sans-serif; }
.rc-filter-dd-panel button:hover{ color:var(--rc-foreground-950); background:var(--rc-background-100); }
.rc-filter-dd-panel button.rc-selected{ color:var(--rc-foreground-950); font-weight:500; }
.rc-filter-clear{ font-size:11px; text-transform:uppercase; letter-spacing:.18em; color:var(--rc-foreground-500);
  background:none; border:0; cursor:pointer; padding:0 4px; white-space:nowrap; }
.rc-filter-clear:hover{ color:var(--rc-foreground-950); }

/* ---- collection page: product results grid -----------------------------
   Each card is a native Elementor container (see build_collection.
   product_card()), sized with the site's existing calc()-based width_calc
   pattern -- not a custom CSS-grid div. Filtering hides/shows the card's
   own container element directly via JS (found through its hidden
   .rc-card-marker child, since Elementor's free container has no custom
   data-attribute control). Hiding uses the standard `hidden` DOM property
   (matches the [hidden]{display:none} UA rule already relied on
   elsewhere on this page), so no extra layout CSS is needed here. */

/* ---- curated edits page: bounded "sticky" image column -----------------
   Source: `lg:sticky lg:top-24` on each edit's image -- sticks 96px from
   the viewport top while its taller text-column sibling scrolls past, then
   releases at the bottom of its own column. NOT implemented as CSS
   `position:sticky` -- same reasoning already established for this site's
   header/filter-bar (see the .rc-filter-bar comment above): sticky with a
   nonzero `top`, this deep inside Elementor's container nesting, is an
   unnecessary risk given the paint-failure bug already confirmed twice on
   this project, for a purely decorative scroll effect. Instead
   rugscurator-support.js drives 3 states directly via inline styles on
   `.rc-edit-sticky-img`, bounded by its own parent `.rc-edit-img-col`'s
   measured top/bottom: static (above the sticky range) / fixed (within
   range) / absolute, pinned to the column's bottom (past the range, so it
   scrolls away with the page exactly like a released native sticky would).
   Only active >=1025px (`lg:`), matching the source and this page's own
   `direction_tablet`/`direction_mobile` switch to a stacked column layout
   below that width, where the image is a plain flow item and none of this
   applies. */
.rc-edit-img-col{ position:relative; }
.rc-edit-sticky-img{ width:100%; }

/* ---- product detail page: breadcrumb, gallery, save button -------------
   Custom `html` widgets: none of these three are things Elementor has a
   native widget for (an inline breadcrumb trail with separators; a main
   image + 6-thumbnail gallery where clicking a thumbnail swaps a DIFFERENT
   element's image and label text -- see rugscurator-support.js Section 8;
   an icon+text toggle button). */
.rc-pd-breadcrumb{ display:flex; align-items:center; gap:8px; font-family:'Manrope',sans-serif;
  font-size:11px; text-transform:uppercase; letter-spacing:.18em; color:#a29e96; }
.rc-pd-breadcrumb a{ color:inherit; text-decoration:none; transition:color .3s; }
.rc-pd-breadcrumb a:hover{ color:#100f0d; }
.rc-pd-breadcrumb-current{ color:#4b4740; }

.rc-pd-main{ position:relative; background:#f6efe1; overflow:hidden; }
.rc-pd-main-img{ display:block; width:100%; aspect-ratio:4/5; object-fit:cover; object-position:top center; }
.rc-pd-main-label{ position:absolute; top:12px; left:12px; font-family:'Manrope',sans-serif; font-size:10px;
  text-transform:uppercase; letter-spacing:.18em; color:#848077; background:rgba(250,246,238,.9); padding:6px 12px; }
.rc-pd-thumbs{ margin-top:16px; display:grid; grid-template-columns:repeat(6,1fr); gap:12px; }
.rc-pd-thumb{ padding:0; margin:0; border:1px solid transparent; background:#f6efe1; overflow:hidden;
  cursor:pointer; transition:border-color .3s; display:block; }
.rc-pd-thumb:hover{ border-color:rgba(33,31,27,.3); }
.rc-pd-thumb.rc-active{ border-color:#100f0d; }
.rc-pd-thumb img{ display:block; width:100%; aspect-ratio:1/1; object-fit:cover; object-position:top center; }

.rc-pd-save-btn{ display:flex; align-items:center; justify-content:center; gap:8px; width:100%;
  font-family:'Manrope',sans-serif; font-size:11px; text-transform:uppercase; letter-spacing:.18em;
  color:#302d28; background:transparent; border:1px solid rgba(16,15,13,.2); padding:16px 24px;
  cursor:pointer; transition:border-color .3s; white-space:nowrap; }
.rc-pd-save-btn:hover{ border-color:#100f0d; }
.rc-pd-save-btn i{ font-size:16px; }

/* ---- Bespoke page contact form (Elementor free has no native Form
   widget -- this is hand-built HTML inside an html_widget, styled to
   reproduce src/index.css's .form-input / .contact-hidden-field rules
   value-for-value under an rc- prefix). */
.rc-bespoke-card{ font-family:'Manrope',sans-serif; }
.rc-form-label{ display:block; }
.rc-form-label span{ display:block; font-family:'Manrope',sans-serif; font-size:10px; text-transform:uppercase;
  letter-spacing:.2em; color:#848077; margin-bottom:8px; }
.rc-form-input{ width:100%; background:transparent; border:0; border-bottom:1px solid rgba(33,31,27,.2);
  padding:8px 0; font-family:'Manrope',sans-serif; font-size:14px; color:#211f1b; outline:none;
  border-radius:0; transition:border-color .3s ease; box-sizing:border-box; }
.rc-form-input:focus{ border-color:#8e774d; }
.rc-form-input::placeholder{ color:#a29e96; }
.rc-form-select{ appearance:none; -webkit-appearance:none; background-image:none; cursor:pointer; }
.rc-form-honeypot{ position:absolute !important; left:-9999px !important; width:1px; height:1px;
  overflow:hidden; opacity:0; pointer-events:none; }
.rc-form-submit{ display:inline-flex; align-items:center; justify-content:center; gap:12px;
  font-family:'Manrope',sans-serif; font-size:11px; text-transform:uppercase; letter-spacing:.22em;
  color:#faf6ee; background:#100f0d; border:0; padding:16px 32px; cursor:pointer; white-space:nowrap;
  transition:background-color .3s ease; }
.rc-form-submit:hover{ background:#4d1c1b; }
.rc-form-submit:disabled{ opacity:.5; cursor:default; }
/* shared two-up field row (name/email, dimensions/material, ...) that
   collapses to one column below 640px -- matches every source page's own
   `sm:grid-cols-2` on its contact-style forms (Bespoke, Contact). */
@media (max-width:639px){ .rc-form-row2{ grid-template-columns:1fr !important; } }
/* generic "fades to near-black on hover" used by the Contact page's plain
   text links (mailto address, Instagram/Pinterest) -- same
   `hover:text-foreground-950` utility the source applies inline via
   Tailwind, reproduced as one reusable class since it recurs 3 times on
   that page alone. */
.rc-hover-fg950{ transition:color .3s ease; }
.rc-hover-fg950:hover{ color:#100f0d; }

/* Checkout page: static example cart rows, the quantity/remove icon
   buttons (inert -- see build_checkout.py's scope note on why real cart
   math isn't wired up), the item-name link, and the "Continue browsing"
   link's hover border. */
.rc-checkout-name{ color:#100f0d; text-decoration:none; transition:color .3s ease; }
.rc-checkout-name:hover{ color:#4b4740; }
.rc-checkout-remove{ background:none; border:0; cursor:pointer; color:#a29e96; transition:color .3s ease;
  display:flex; align-items:center; justify-content:center; }
.rc-checkout-remove:hover{ color:#100f0d; }
.rc-checkout-qtybtn{ background:none; border:0; cursor:pointer; color:#4b4740; transition:color .3s ease;
  display:flex; width:32px; height:32px; align-items:center; justify-content:center; }
.rc-checkout-qtybtn:hover{ color:#100f0d; }
.rc-checkout-continue{ border-bottom:1px solid rgba(33,31,27,.3); transition:border-color .3s ease; }
.rc-checkout-continue:hover{ border-color:#100f0d; }
/* Hidden until the order form is submitted -- see rugscurator-support.js
   Section 11. Needs !important for the same reason `rc-hide-below-lg`
   does: Elementor's own generated per-post CSS sets this container's
   `display` via a same-specificity single-class selector, so a plain
   `display:none` here loses that tie whenever Elementor's stylesheet is
   enqueued after the plugin's (confirmed needed: without it, the "Thank
   you." block rendered visible on every page load, well before the form
   was ever submitted). The JS then overrides this back to `flex` via an
   inline style, which always wins regardless of specificity. */
.rc-checkout-success{ display:none !important; }

/* `hidden lg:block` on the bespoke page's editorial image -- this installed
   Elementor version (v4.0.0, core/free) has NO working native responsive-
   visibility control (an earlier attempt to use "hide_tablet"/"hide_mobile"
   settings did nothing at all: those keys only ever appear in Elementor's
   own qunit *test fixture* JSON, not in any real control-registration code
   in this version, confirmed by grep -- so the image rendered on every
   breakpoint and left a large blank gap on tablet/mobile where its content
   silently failed to show/hide correctly). Fixed with a plain CSS class
   instead, at the same >=1024px threshold ("lg") used for every other
   row/column breakpoint switch on this site. */
/* !important on both rules: Elementor's own generated per-post CSS sets this
   container's `display` via a same-specificity single-class selector
   (`.elementor-element-<id>{--display:flex...}` combined with `.e-con`'s
   base `display:var(--display,flex)` rule) -- a plain override here loses
   that specificity tie whenever Elementor's stylesheet happens to be
   enqueued after ours, so !important is needed to guarantee this class
   wins regardless of enqueue order (confirmed needed: the unqualified
   version above left the image's box fully sized on tablet/mobile even
   though nothing rendered inside it). */
.rc-hide-below-lg{ display:none !important; }
@media (min-width:1024px){ .rc-hide-below-lg{ display:block !important; } }
@media (min-width:641px){ .rc-pd-save-btn{ width:auto; } }

/* ==========================================================================
   WooCommerce styling additions — Collection product grid + native
   single-product template. Appended to rugscurator-support.css so all
   brand fonts/colors/tokens defined earlier in that file are already in
   scope (--rc-background-*, --rc-foreground-*, --rc-accent-*, --rc-primary-*,
   --rc-font-heading, --rc-font-body).
   ========================================================================== */

/* ---- retire the old static-demo filter bar ------------------------------
   The Collection page's original Style/Material/Colour/Price filter bar
   (.rc-filter-bar) was wired in rugscurator-support.js to show/hide a
   fixed set of 10 static demo product cards client-side (.rc-card-marker).
   Those demo cards have been removed and replaced with a real WooCommerce
   `[products]` shortcode grid, so the old filter bar's JS now has zero
   items to track — meaning its "no results" message
   (.rc-filter-empty, "No pieces match these filters.") is permanently
   visible regardless of how many real products exist, and its dropdowns
   don't actually filter the real WooCommerce grid at all. Hiding the
   whole bar is the safe fix until real faceted filtering against
   WooCommerce product attributes is built. Remove this rule when that
   happens. */
.rc-filter-bar { display: none !important; }
/* A second, separate "No pieces match these filters." placeholder widget
   exists near the product grid (outside .rc-filter-bar itself) and is
   driven by the same broken zero-items JS logic -- hide it globally too. */
.rc-filter-empty { display: none !important; }
.rc-filter-count { display: none !important; }

/* ---- shared WooCommerce resets -----------------------------------------
   WooCommerce's own frontend CSS ships opinionated defaults (blue links,
   system-ui font stacks, a themed "star rating" widget, etc.) that clash
   with the site's editorial serif/sans pairing. Reset broadly, then
   restyle the specific pieces below. */
.woocommerce, .woocommerce-page {
  font-family: var(--rc-font-body);
  color: var(--rc-foreground-900);
}
.woocommerce a { color: inherit; }
/* Buttons rendered as <a> (WooCommerce Blocks "Select options" / "Add to cart" links,
   e.g. on Related/Upsell product blocks) must keep their own white text instead of
   inheriting the dark body-text color above -- otherwise the text is unreadable
   against the near-black button background. */
.woocommerce a.button,
.woocommerce a.add_to_cart_button,
.woocommerce a.wp-element-button,
.woocommerce a.wp-block-button__link {
  color: var(--wp--preset--color--base, #fff);
}
.woocommerce .star-rating { color: var(--rc-accent-500); }
/* Review-form "Your rating" stars (p.stars a) also inherit color from the rule
   above by default and render in the plain body-text color instead of the
   brand accent used everywhere else star ratings appear. */
.woocommerce p.stars a,
.woocommerce p.stars a::before {
  color: var(--rc-accent-500);
}

/* ---- product grid (Collection page `[products]` shortcode) ------------- */
.woocommerce ul.products {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px 32px;
  list-style: none;
  margin: 0 !important;
  padding: 0 !important;
}
@media (max-width: 1023px) { .woocommerce ul.products { grid-template-columns: repeat(2, 1fr); gap: 32px 20px; } }
@media (max-width: 639px)  { .woocommerce ul.products { grid-template-columns: 1fr; } }

.woocommerce ul.products li.product {
  width: 100% !important;
  float: none !important;
  margin: 0 !important;
  list-style: none;
}
.woocommerce ul.products::before,
.woocommerce ul.products::after {
  content: none !important;
  display: none !important;
}
.woocommerce ul.products li.product a {
  text-decoration: none;
  display: block;
}
/* image: same 4:5 crop convention as the rest of the site (.rc-aspect-4-5) */
.woocommerce ul.products li.product a img {
  width: 100%;
  aspect-ratio: 4/5;
  object-fit: cover;
  object-position: top center;
  display: block;
  margin: 0 0 20px 0 !important;
  border-radius: 0;
  transition: transform 1.4s cubic-bezier(.22,1,.36,1);
}
.woocommerce ul.products li.product:hover a img { transform: scale(1.05); }
.woocommerce ul.products li.product a > span:first-of-type,
.woocommerce ul.products li.product > a { overflow: hidden; }

.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-family: var(--rc-font-heading);
  font-size: 22px;
  font-weight: 400;
  color: var(--rc-foreground-950);
  margin: 0 0 6px 0;
  padding: 0;
}
.woocommerce ul.products li.product .price {
  font-family: var(--rc-font-body);
  font-size: 14px;
  color: var(--rc-foreground-600);
}
.woocommerce ul.products li.product .price ins {
  text-decoration: none;
  color: var(--rc-primary-600);
}
.woocommerce ul.products li.product .price del {
  color: var(--rc-foreground-400);
  opacity: .7;
  margin-right: 8px;
}
/* hide WooCommerce's default "Add to cart" button on the grid card itself —
   the brand pattern elsewhere on this site (.rc-pd-save-btn) is a full
   detail-page action, not a one-click-add from the grid; clicking through
   to the product page is the primary path here. Remove this rule if the
   user wants quick-add buttons on the grid instead. */
.woocommerce ul.products li.product .button.add_to_cart_button { display: none; }
.woocommerce ul.products li.product .onsale {
  font-family: var(--rc-font-body);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .18em;
  color: var(--rc-foreground-800);
  background: rgba(250,246,238,.9);
  border-radius: 0;
  min-height: 0;
  min-width: 0;
  padding: 6px 12px;
  top: 12px; left: 12px; right: auto;
  position: absolute;
  font-weight: 400;
}

/* WooCommerce's own "No products were found" / result-count notices */
.woocommerce-info, .woocommerce-message, .woocommerce-error {
  font-family: var(--rc-font-body);
  font-size: 14px;
  color: var(--rc-foreground-600);
  background: transparent;
  border: 0;
  border-top: 1px solid rgba(33,31,27,.12);
  padding: 32px 0 0 0 !important;
  margin: 0 !important;
  list-style: none;
}
.woocommerce-info::before, .woocommerce-message::before, .woocommerce-error::before { display: none; }
.woocommerce-result-count, .woocommerce-ordering { font-family: var(--rc-font-body); font-size: 12px; color: var(--rc-foreground-500); }

/* ---- native single-product template ------------------------------------
   WooCommerce's own product page (real per-product URLs — the only way to
   get true dynamic per-product pages without Elementor Pro's Theme
   Builder). Styled to echo the old static Product Detail page's look
   (see .rc-pd-* in this file) as closely as CSS allows. */
.woocommerce div.product {
  font-family: var(--rc-font-body);
  max-width: 1200px;
  margin: 0 auto;
  padding: 40px 24px 80px;
}
@media (min-width: 1024px) {
  .woocommerce div.product {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 64px;
    align-items: start;
  }
}

/* image gallery column */
.woocommerce div.product .woocommerce-product-gallery {
  background: var(--rc-background-100);
}
.woocommerce div.product .woocommerce-product-gallery__image img {
  width: 100%;
  aspect-ratio: 4/5;
  object-fit: cover;
  object-position: top center;
}
.woocommerce div.product .flex-control-thumbs {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 12px;
  margin: 16px 0 0 0;
  padding: 0;
  list-style: none;
}
.woocommerce div.product .flex-control-thumbs li { margin: 0; }
.woocommerce div.product .flex-control-thumbs img {
  width: 100%;
  aspect-ratio: 1/1;
  object-fit: cover;
  object-position: top center;
  border: 1px solid transparent;
  cursor: pointer;
  transition: border-color .3s;
}
.woocommerce div.product .flex-control-thumbs img.flex-active,
.woocommerce div.product .flex-control-thumbs img:hover { border-color: var(--rc-foreground-950); }

/* summary column */
.woocommerce div.product .product_title {
  font-family: var(--rc-font-heading);
  font-size: 36px;
  font-weight: 400;
  color: var(--rc-foreground-950);
  margin: 0 0 12px 0;
}
.woocommerce div.product p.price {
  font-family: var(--rc-font-body);
  font-size: 20px;
  color: var(--rc-foreground-800);
  margin: 0 0 24px 0;
}
.woocommerce div.product p.price ins { text-decoration: none; color: var(--rc-primary-600); }
.woocommerce div.product .woocommerce-product-details__short-description {
  font-size: 15px;
  line-height: 1.7;
  color: var(--rc-foreground-700);
  margin: 0 0 32px 0;
}
.woocommerce div.product .woocommerce-product-details__short-description p:last-child { margin-bottom: 0; }

/* variation attribute selects (Style / Material / Colour) */
.woocommerce div.product table.variations { width: 100%; margin: 0 0 24px 0; border-collapse: collapse; }
.woocommerce div.product table.variations tr { display: block; margin: 0 0 16px 0; }
.woocommerce div.product table.variations th.label {
  display: block;
  text-align: left;
  font-family: var(--rc-font-body);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .2em;
  color: var(--rc-foreground-500);
  font-weight: 400;
  padding: 0 0 8px 0;
}
.woocommerce div.product table.variations td.value { display: block; padding: 0; }
.woocommerce div.product table.variations select {
  width: 100%;
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(33,31,27,.2);
  padding: 8px 0;
  font-family: var(--rc-font-body);
  font-size: 14px;
  color: var(--rc-foreground-900);
  border-radius: 0;
  appearance: none;
  cursor: pointer;
}
.woocommerce div.product table.variations select:focus { border-color: var(--rc-accent-500); outline: none; }
.woocommerce div.product .reset_variations {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .18em;
  color: var(--rc-foreground-500);
}

/* quantity input + add to cart button (matches .rc-form-submit / .rc-pd-save-btn) */
.woocommerce div.product .quantity { display: inline-block; margin: 0 16px 0 0; vertical-align: middle; }
.woocommerce div.product .quantity .qty {
  width: 64px;
  background: transparent;
  border: 1px solid rgba(16,15,13,.2);
  padding: 16px 12px;
  font-family: var(--rc-font-body);
  font-size: 14px;
  color: var(--rc-foreground-900);
  text-align: center;
}
.woocommerce div.product .single_add_to_cart_button,
.woocommerce div.product button.single_add_to_cart_button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  font-family: var(--rc-font-body);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .22em;
  color: var(--rc-background-50);
  background: var(--rc-foreground-950);
  border: 0;
  padding: 16px 32px;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color .3s ease;
  vertical-align: middle;
}
.woocommerce div.product .single_add_to_cart_button:hover { background: var(--rc-primary-700); }
.woocommerce div.product .single_add_to_cart_button.disabled { opacity: .5; cursor: default; }

/* product meta (SKU / categories) + tabs (description / reviews) */
.woocommerce div.product .product_meta {
  font-size: 12px;
  color: var(--rc-foreground-500);
  margin: 24px 0 0 0;
  padding: 24px 0 0 0;
  border-top: 1px solid rgba(33,31,27,.1);
}
.woocommerce div.product .woocommerce-tabs {
  grid-column: 1 / -1;
  margin-top: 64px;
  border-top: 1px solid rgba(33,31,27,.1);
  padding-top: 40px;
}
.woocommerce div.product .woocommerce-tabs ul.tabs {
  display: flex;
  gap: 32px;
  list-style: none;
  margin: 0 0 32px 0;
  padding: 0;
  border: 0;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li {
  margin: 0;
  padding: 0;
  background: none;
  border: 0;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li a {
  font-family: var(--rc-font-body);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .18em;
  color: var(--rc-foreground-500);
  padding: 0 0 8px 0;
  border-bottom: 2px solid transparent;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
  color: var(--rc-foreground-950);
  border-bottom-color: var(--rc-foreground-950);
}
.woocommerce div.product .woocommerce-tabs .panel {
  font-size: 15px;
  line-height: 1.7;
  color: var(--rc-foreground-700);
}

/* related products section — reuse the grid styling above */
.woocommerce div.product .related.products {
  grid-column: 1 / -1;
  margin-top: 64px;
  padding-top: 40px;
  border-top: 1px solid rgba(33,31,27,.1);
}
.woocommerce div.product .related.products > h2 {
  font-family: var(--rc-font-heading);
  font-size: 28px;
  font-weight: 400;
  color: var(--rc-foreground-950);
  margin: 0 0 32px 0;
}


/* "Buy on Etsy" button -- secondary/outline CTA on the single product page,
   sitting directly under the primary (solid) Add to Cart button. Matches
   the Add to Cart button's padding/type treatment but inverted (outline
   instead of filled) so it reads as the secondary purchase path. */
.woocommerce a.rc-etsy-button {
  display: block;
  width: 100%;
  box-sizing: border-box;
  margin-top: 12px;
  padding: 16px 32px;
  font-family: var(--rc-font-body);
  font-size: 11px;
  font-weight: 300;
  letter-spacing: .22em;
  text-transform: uppercase;
  text-align: center;
  text-decoration: none;
  color: #ffffff;
  background: #f1641e; /* Etsy orange */
  border: 1px solid #f1641e;
  transition: background-color .2s ease, border-color .2s ease;
}
.woocommerce a.rc-etsy-button:hover,
.woocommerce a.rc-etsy-button:focus {
  background: #d1530f;
  border-color: #d1530f;
  color: #ffffff;
}

/* Quantity stepper -- was a plain, short native number input that didn't
   line up with the Add to Cart button's height/border weight, making it
   look unstyled/"off" next to it. Give it the same height and a matching
   border so the row reads as one deliberate control group. */
.woocommerce div.quantity {
  display: flex;
  align-items: stretch;
  height: 100%;
}
.woocommerce div.quantity .qty {
  width: 100%;
  height: 100%;
  min-height: 47px;
  box-sizing: border-box;
  margin: 0;
  padding: 0 14px;
  border: 1px solid rgba(16, 15, 13, .35);
  border-radius: 0;
  background: transparent;
  font-family: var(--rc-font-body);
  font-size: 14px;
  color: var(--rc-foreground-950);
  text-align: center;
  line-height: normal;
}
.woocommerce div.quantity .qty:focus {
  outline: none;
  border-color: var(--rc-foreground-950);
}