/*
Theme Name: Loomé
Theme URI: https://loomerugs.com
Author: Loom Rugs
Author URI: https://loomerugs.com
Description: Standalone, self-contained WooCommerce theme for Loomé handmade rugs — the single master theme merging the original "Loom" base with every layout/fix layer built on top of it since (boutique header, collection banners + launch photography for all nine collections, rebuilt single-product page, CSS-grid product listings, EWC-style shop filters, description/shipping/care accordions, the full "Our Process" story page, security hardening). No parent/child split — nothing to override, nothing to cascade-fight.
Version: 2.4.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: loom
Requires at least: 6.0
Requires PHP: 7.4
Tested up to: 6.6

WooCommerce support: Yes
Rank Math SEO compatible: Yes
*/

/* ============================================
   BASE THEME STYLES
   (from the original Loom theme foundation:
   variables, reset, typography, header/footer,
   homepage sections, WooCommerce base rules)
   ============================================ */


/* ============================================
   CSS VARIABLES & RESET
   ============================================ */
:root {
  --color-bg: #fafaf9;
  --color-surface: #ffffff;
  --color-text: #1c1917;
  --color-text-secondary: #78716c;
  --color-text-muted: #a8a29e;
  --color-border: #e7e5e4;
  --color-accent: #44403c;
  --font-serif: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2.5rem;
  --space-xl: 4rem;
  --space-2xl: 6rem;
  --radius: 2px;
  --max-width: 1280px;
  --transition: 0.2s ease;
}

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.7;
  color: var(--color-text);
  background-color: var(--color-bg);
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: var(--color-text);
  text-decoration: none;
  transition: color var(--transition);
}

a:hover {
  color: var(--color-text-secondary);
}

/* ============================================
   TYPOGRAPHY - Semantic hierarchy for LLMs
   ============================================ */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-serif);
  font-weight: 400;
  line-height: 1.2;
  color: var(--color-text);
  text-wrap: balance;
}

h1 { font-size: clamp(2.5rem, 5vw, 4rem); letter-spacing: -0.02em; }
h2 { font-size: clamp(1.8rem, 3.5vw, 2.8rem); letter-spacing: -0.01em; }
h3 { font-size: clamp(1.3rem, 2.5vw, 1.6rem); }
h4 { font-size: 1.15rem; font-weight: 500; font-family: var(--font-sans); }

p {
  margin-bottom: var(--space-md);
  text-wrap: pretty;
}

/* ============================================
   LAYOUT CONTAINERS
   ============================================ */
.loom-container {
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--space-md);
}

.loom-section {
  padding: var(--space-2xl) 0;
}

.loom-section-sm {
  padding: var(--space-xl) 0;
}

/* ============================================
   HEADER & NAVIGATION
   ============================================ */
.site-header {
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  position: sticky;
  top: 0;
  z-index: 100;
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 72px;
}

.site-branding {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}

.site-title {
  font-family: var(--font-serif);
  font-size: 1.5rem;
  font-weight: 400;
  letter-spacing: 0.05em;
  /* FIX 17: was "uppercase", which forced the logo to render as
     "LOOMÉ" — the underlying text is already correctly cased
     ("Loomé"), so this rule was the only thing capitalizing it. */
  text-transform: none;
}

.site-title a:hover {
  color: var(--color-text);
}

/* Primary Navigation */
.primary-navigation ul {
  display: flex;
  list-style: none;
  gap: var(--space-lg);
}

.primary-navigation a {
  font-family: var(--font-sans);
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-secondary);
  padding: 0.5rem 0;
  position: relative;
}

.primary-navigation a:hover,
.primary-navigation .current-menu-item a {
  color: var(--color-text);
}

.primary-navigation a::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 1px;
  background: var(--color-text);
  transition: width var(--transition);
}

.primary-navigation a:hover::after {
  width: 100%;
}

/* Header actions (cart, search) */
.header-actions {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.header-actions a {
  font-size: 0.8rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-text-secondary);
}

/* Mobile menu toggle */
.menu-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: var(--space-xs);
}

.menu-toggle span {
  display: block;
  width: 24px;
  height: 1.5px;
  background: var(--color-text);
  margin: 6px 0;
  transition: var(--transition);
}

/* ============================================
   HERO SECTION
   ============================================ */
.hero-section {
  background: var(--color-surface);
  padding: var(--space-2xl) 0;
  text-align: center;
}

.hero-section h1 {
  max-width: 800px;
  margin: 0 auto var(--space-md);
}

.hero-section .lead {
  font-size: 1.15rem;
  color: var(--color-text-secondary);
  max-width: 600px;
  margin: 0 auto var(--space-lg);
  line-height: 1.8;
}

.hero-image {
  margin-top: var(--space-xl);
}

.hero-image img {
  width: 100%;
  max-height: 70vh;
  object-fit: cover;
}

/* ============================================
   PROCESS / CRAFTSMANSHIP SECTIONS
   (Abbas Carpets inspired)
   ============================================ */
.process-section {
  background: var(--color-surface);
}

.process-step {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-xl);
  align-items: center;
  padding: var(--space-xl) 0;
}

.process-step:nth-child(even) .process-content {
  order: 2;
}

.process-step:nth-child(even) .process-media {
  order: 1;
}

.process-content h2 {
  margin-bottom: var(--space-sm);
  font-size: clamp(1.5rem, 3vw, 2.2rem);
}

.process-content .step-number {
  font-family: var(--font-sans);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: var(--space-xs);
  display: block;
}

.process-content p {
  color: var(--color-text-secondary);
  font-size: 1.05rem;
  line-height: 1.8;
}

.process-services-header {
  padding-top: var(--space-xl);
  border-top: 1px solid var(--color-border);
  margin-bottom: var(--space-lg);
}

.loom-company-info {
  background: var(--color-wash, var(--color-surface));
}

.company-info-card {
  max-width: 640px;
  margin: 0 auto;
  text-align: center;
}

.company-info-card h2 {
  margin-bottom: var(--space-md);
}

.company-info-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.company-info-list li {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.company-info-label {
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.company-info-list a {
  color: var(--color-text);
  text-decoration: underline;
}

.process-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  aspect-ratio: 4/3;
}

/* ============================================
   ABOUT / LEGACY SECTION
   ============================================ */
.about-hero {
  text-align: center;
  padding: var(--space-2xl) 0 var(--space-xl);
}

.about-hero h1 {
  font-size: clamp(3rem, 7vw, 5.5rem);
  letter-spacing: 0.02em;
  margin-bottom: var(--space-md);
}

.about-hero .legacy-text {
  max-width: 700px;
  margin: 0 auto;
  color: var(--color-text-secondary);
  font-size: 1.1rem;
  line-height: 1.9;
}

.about-gallery {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-sm);
  margin-top: var(--space-xl);
}

.about-gallery img {
  width: 100%;
  aspect-ratio: 3/4;
  object-fit: cover;
}

/* Stats / Trust signals */
.trust-bar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-lg);
  padding: var(--space-xl) 0;
  text-align: center;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  margin: var(--space-xl) 0;
}

.trust-item .trust-number {
  font-family: var(--font-serif);
  font-size: 2.5rem;
  display: block;
  margin-bottom: var(--space-xs);
}

.trust-item .trust-label {
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

/* ============================================
   PRODUCT GRID (Shop/Category)
   ============================================ */
.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--space-lg);
}

.product-card {
  background: var(--color-surface);
  transition: transform var(--transition);
}

.product-card:hover {
  transform: translateY(-4px);
}

.product-card img {
  width: 100%;
  aspect-ratio: 3/4;
  object-fit: cover;
  margin-bottom: var(--space-sm);
}

.product-card h3 {
  font-family: var(--font-sans);
  font-size: 1rem;
  font-weight: 500;
  margin-bottom: var(--space-xs);
}

.product-card .price {
  font-size: 0.95rem;
  color: var(--color-text-secondary);
}

/* ============================================
   SINGLE PRODUCT
   ============================================ */
.product-single {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-xl);
  padding: var(--space-xl) 0;
}

.product-gallery img {
  width: 100%;
  aspect-ratio: 3/4;
  object-fit: cover;
}

.product-info h1 {
  margin-bottom: var(--space-sm);
}

.product-info .price {
  font-family: var(--font-serif);
  font-size: 1.5rem;
  margin-bottom: var(--space-md);
  display: block;
}

.product-meta {
  margin-top: var(--space-lg);
  padding-top: var(--space-md);
  border-top: 1px solid var(--color-border);
}

.product-meta dt {
  font-weight: 500;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-muted);
  margin-top: var(--space-sm);
}

.product-meta dd {
  color: var(--color-text-secondary);
  margin-top: 2px;
}

/* Add to cart button */
.woocommerce button.button,
.woocommerce a.button {
  background: var(--color-text);
  color: var(--color-surface);
  border: none;
  padding: 1rem 2.5rem;
  font-family: var(--font-sans);
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  transition: opacity var(--transition);
  border-radius: var(--radius);
}

.woocommerce button.button:hover,
.woocommerce a.button:hover {
  opacity: 0.85;
  background: var(--color-text);
  color: var(--color-surface);
}

/* ============================================
   CONTENT PAGES
   ============================================ */
.page-content,
.entry-content {
  max-width: 720px;
  margin: 0 auto;
  padding: var(--space-xl) 0;
}

.entry-content h2 {
  margin-top: var(--space-xl);
  margin-bottom: var(--space-sm);
}

.entry-content h3 {
  margin-top: var(--space-lg);
  margin-bottom: var(--space-sm);
  font-family: var(--font-sans);
  font-weight: 500;
}

.entry-content ul,
.entry-content ol {
  margin-bottom: var(--space-md);
  padding-left: var(--space-md);
}

.entry-content li {
  margin-bottom: var(--space-xs);
}

/* ============================================
   FOOTER
   ============================================ */
.site-footer {
  background: var(--color-surface);
  border-top: 1px solid var(--color-border);
  padding: var(--space-xl) 0 var(--space-lg);
}

.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: var(--space-xl);
  margin-bottom: var(--space-xl);
}

.footer-brand .site-title {
  font-size: 1.25rem;
  margin-bottom: var(--space-sm);
}

.footer-brand p {
  font-size: 0.9rem;
  color: var(--color-text-secondary);
  line-height: 1.7;
}

.footer-nav h4 {
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: var(--space-md);
  color: var(--color-text-muted);
}

.footer-nav ul {
  list-style: none;
}

.footer-nav li {
  margin-bottom: var(--space-xs);
}

.footer-nav a {
  font-size: 0.9rem;
  color: var(--color-text-secondary);
}

.footer-nav a:hover {
  color: var(--color-text);
}

.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: var(--space-lg);
  border-top: 1px solid var(--color-border);
  font-size: 0.8rem;
  color: var(--color-text-muted);
}

/* ============================================
   BREADCRUMBS (Schema-ready)
   ============================================ */
.breadcrumbs {
  font-size: 0.8rem;
  color: var(--color-text-muted);
  padding: var(--space-sm) 0;
  border-bottom: 1px solid var(--color-border);
  margin-bottom: var(--space-lg);
}

.breadcrumbs a {
  color: var(--color-text-secondary);
}

.breadcrumbs .sep {
  margin: 0 0.5rem;
  color: var(--color-text-muted);
}

/* ============================================
   UTILITIES
   ============================================ */
.screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.text-center { text-align: center; }
.text-muted { color: var(--color-text-muted); }

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 768px) {
  .menu-toggle {
    display: block;
  }

  .primary-navigation {
    display: none;
    position: absolute;
    top: 72px;
    left: 0;
    right: 0;
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
    padding: var(--space-md);
  }

  .primary-navigation.toggled {
    display: block;
  }

  .primary-navigation ul {
    flex-direction: column;
    gap: var(--space-sm);
  }

  .process-step {
    grid-template-columns: 1fr;
    gap: var(--space-md);
  }

  .process-step:nth-child(even) .process-content,
  .process-step:nth-child(even) .process-media {
    order: unset;
  }

  .product-single {
    grid-template-columns: 1fr;
  }

  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-lg);
  }

  .about-gallery {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 480px) {
  .footer-grid {
    grid-template-columns: 1fr;
  }

  .trust-bar {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-md);
  }
}

/* ============================================
   LAYOUT & FEATURE LAYER
   (boutique header, collection banners, product
   grid rebuild, single-product rebuild, accordions,
   responsive fixes, colour-palette match — everything
   previously shipped as the "Loomé Fixed" child theme,
   now applied directly instead of overriding a parent)
   ============================================ */


/* ============================================
   TABLET BREAKPOINT
   ============================================ */
@media (max-width: 1024px) {
  .header-inner {
    padding: 0 var(--space-sm);
  }

  .primary-navigation ul {
    gap: var(--space-md);
  }

  .primary-navigation a {
    font-size: 0.78rem;
  }

  .product-grid {
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: var(--space-md);
  }

  .hero-section {
    padding: var(--space-xl) 0;
  }

  .footer-grid {
    grid-template-columns: 1.5fr 1fr 1fr;
    gap: var(--space-lg);
  }
}

/* ============================================
   FIX 11: The shop/category grid was rendering as
   WooCommerce's own default <ul class="products">
   layout — an old float-based grid with WooCommerce's
   own hardcoded margins/breakpoints — because the
   theme's .product-grid CSS was written for a
   different wrapper that the actual template never
   outputs. That mismatch is why spacing looked
   inconsistent and cramped, especially at the 2-column
   mobile width. This replaces WooCommerce's own grid
   entirely with a real CSS Grid using the theme's own
   spacing scale, at every breakpoint.
   ============================================ */
.loom-shop-main ul.products,
.loom-shop-main ul.products.columns-3,
.loom-shop-main ul.products.columns-4 {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  grid-auto-rows: auto;
  grid-auto-flow: row dense;
  align-content: start;
  gap: var(--space-lg) var(--space-md);
  list-style: none;
  margin: 0 !important;
  padding: 0 !important;
}

/* Undo WooCommerce core's per-item float/width/margin so our grid
   fully controls placement instead of fighting it. Also guards against
   the "first-of-type"/"nth-child" margin resets WooCommerce core adds
   for its own float grid, which can otherwise re-introduce a gap when a
   plugin or cache serves an older markup pattern. */
.loom-shop-main ul.products li.product {
  float: none !important;
  width: auto !important;
  margin: 0 !important;
  clear: none !important;
  grid-column: auto !important;
}

/* Belt-and-braces: if a product renders with no image at all (should
   never happen — content-product.php always prints one — but a
   third-party hook could still short-circuit it), never let an empty
   card collapse to zero size and leave a hole in the grid. */
.loom-shop-main ul.products li.product:empty,
.loom-shop-main ul.products > *:not(li.product) {
  display: none !important;
}

/* FIX 18 — THE ACTUAL CAUSE OF "ONLY 2 RUGS IN THE FIRST ROW": WooCommerce
   core ships a plain CSS clearfix on ul.products (content:" "; display:
   table on ::before/::after) meant for an old float-based layout. A
   ::before/::after pseudo-element still counts as a real grid item as
   long as its `display` isn't `none` — so once ul.products becomes a CSS
   Grid above, that invisible clearfix ::before silently claims the very
   first grid cell (row 1, column 1) for itself, and every actual product
   gets pushed one slot to the right. That's why the grid track always
   measured "3 columns" correctly in every test, yet the first row only
   ever showed 2 real rugs with an empty gap on the left of them. The
   `> *:not(li.product)` rule above can't catch this — pseudo-elements
   aren't selectable through a child combinator — so it needs its own
   rule. */
.loom-shop-main ul.products::before,
.loom-shop-main ul.products::after,
ul.products.columns-3::before,
ul.products.columns-3::after,
ul.products.columns-4::before,
ul.products.columns-4::after,
.woocommerce ul.products::before,
.woocommerce ul.products::after,
ul.products::before,
ul.products::after {
  content: none !important;
  display: none !important;
}

@media (max-width: 1024px) {
  .loom-shop-main ul.products,
  .loom-shop-main ul.products.columns-3,
  .loom-shop-main ul.products.columns-4 {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: var(--space-md) var(--space-sm);
  }
}

@media (max-width: 768px) {
  .loom-shop-main ul.products,
  .loom-shop-main ul.products.columns-3,
  .loom-shop-main ul.products.columns-4 {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: var(--space-md) var(--space-sm);
  }
}

@media (max-width: 480px) {
  .loom-shop-main ul.products,
  .loom-shop-main ul.products.columns-3,
  .loom-shop-main ul.products.columns-4 {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: var(--space-sm) var(--space-xs);
  }
}

/* FIX 11b: extra-defensive fallback. On some setups (an aggressive
   page cache serving an older cached copy of a category page, or a
   plugin printing the product loop outside the .loom-shop-main
   wrapper the rules above target) the scoped selectors above never
   get the chance to match, and WooCommerce's own old float-based grid
   is left in charge — which is what leaves the first row showing 2
   items instead of 3. These bare, unscoped versions of the same rule
   catch that case too, so the 3-across grid always wins regardless of
   markup, cache state, or which template part actually rendered it.
   If a gap ever still appears after this, it's a real product sitting
   Draft or out-of-stock in that exact slot, not a layout bug — check
   Products in wp-admin for that collection. */
.woocommerce ul.products,
ul.products {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  grid-auto-flow: row dense !important;
  gap: var(--space-lg) var(--space-md) !important;
}

.woocommerce ul.products li.product,
ul.products li.product {
  float: none !important;
  width: auto !important;
  margin: 0 !important;
}

@media (max-width: 768px) {
  .woocommerce ul.products,
  ul.products {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* If your host or a caching plugin (LiteSpeed Cache, WP Rocket, etc.)
   is still showing the old 2-then-3 layout after installing this
   theme, purge that cache — CSS changes to files already served from
   a full-page cache won't appear until it's cleared. */

/* ============================================
   TITLE/HEADING ALIGNMENT FIXES
   ============================================ */
.page-header,
.entry-header,
.about-hero {
  text-align: center;
}

.page-header h1,
.entry-header h1,
.about-hero h1 {
  margin-left: auto;
  margin-right: auto;
}

/* Single product title: left-aligned to match the two-column layout */
.product-info h1 {
  text-align: left;
}

/* Category/shop card titles: centered so the whole text block
   (title, size, price) reads as one balanced column under the photo */
.product-card h2,
.product-card h3 {
  text-align: center;
}

/* Mobile: tighten heading sizes further so nothing wraps awkwardly */
@media (max-width: 480px) {
  h1 { font-size: clamp(2rem, 9vw, 3rem); }
  h2 { font-size: clamp(1.5rem, 6vw, 2rem); }
  .hero-section .lead { font-size: 1rem; padding: 0 var(--space-sm); }
  .site-title { font-size: 1.15rem; }
}

/* ============================================
   FIX 1: Category/collection archive cards —
   name + price were rendering smaller than the
   rest of the theme because the real markup is
   <h2 class="woocommerce-loop-product__title">,
   which WooCommerce's own plugin CSS was styling
   at a smaller size than our theme intended.
   ============================================ */
.product-card h2.woocommerce-loop-product__title {
  font-family: var(--font-sans) !important;
  font-size: 1.1rem !important;
  font-weight: 500 !important;
  line-height: 1.4 !important;
  margin-bottom: 0.35rem !important;
  text-align: center;
}

.product-card .price {
  font-size: 1.05rem !important;
  text-align: center;
}

/* FIX 10: Stack the price as its own two lines instead of side by
   side — the original (struck-through) price on line 3, the
   discounted price on line 4 — matching the requested card layout of
   Title / Size / Original price / Sale price, each centered. A
   product with no active sale has no <del> at all, so it simply
   shows Title / Size / Price (3 lines), which is expected. */
.product-card .price del {
  display: block;
  color: var(--color-text-muted);
  font-size: 0.85em;
  opacity: 0.7;
  margin-bottom: 0.15rem;
}

.product-card .price ins {
  display: block;
  text-decoration: none;
  color: var(--color-text);
  font-weight: 500;
}

/* Code + Size subheading line, e.g. "BG 02 – 9'11 x 13'5", printed
   directly under the Collection heading (see content-product.php +
   loomchild_get_split_title_parts() in functions.php) */
.product-card-subtitle {
  font-family: var(--font-sans);
  font-size: 0.85rem;
  color: var(--color-text-secondary);
  text-align: center;
  margin: 0 0 0.35rem;
}

/* Size line, printed between the product name and price (see
   content-product.php + loomchild_get_product_size_label()) */
.product-card-size {
  font-family: var(--font-sans);
  font-size: 0.9rem;
  color: var(--color-text-muted);
  margin: 0 0 0.35rem;
  text-align: center;
}

/* FIX 9: Title, size, price, and the Add to Cart button had no
   horizontal inset of their own — they sit directly in the <li>,
   which has no padding — so all four lines start flush against the
   very left edge of the card, right up against the grid's gap. The
   product photo above is meant to run edge-to-edge, so this only
   nudges the text/button block, not the image. Combined with the
   text-align: center above, this keeps the whole text column
   balanced under the photo instead of pinned to either edge. */
.product-card h2.woocommerce-loop-product__title,
.product-card-size,
.product-card .price {
  margin-left: var(--space-xs);
  margin-right: var(--space-xs);
}

.product-card .button,
.product-card a.add_to_cart_button {
  margin-left: var(--space-xs);
  margin-right: var(--space-xs);
}

/* FIX 1 set the title/price to 1.1rem for every screen size, which
   reads oversized on small phones and crowds out the product photo.
   Scale all three lines down specifically on mobile. */
@media (max-width: 480px) {
  .product-card h2.woocommerce-loop-product__title {
    font-size: 0.95rem !important;
    margin-bottom: 0.2rem !important;
  }

  .product-card-size {
    font-size: 0.8rem;
    margin-bottom: 0.2rem;
  }

  .product-card .price {
    font-size: 0.95rem !important;
  }

  /* The loop "Add to Cart" button used the same padding/font-size as
     full-size buttons everywhere else on the site, which doesn't fit
     WooCommerce's own narrow mobile grid column — causing "ADD TO
     CART" to wrap onto 3 lines. Shrink it specifically inside the
     product card on small screens. */
  .product-card .button,
  .product-card a.add_to_cart_button {
    padding: 0.55rem 0.5rem !important;
    font-size: 0.68rem !important;
    letter-spacing: 0.04em !important;
    /* FIX 9 gave this button a left/right margin, so its 100% width
       needs to shrink by the same amount on both sides or it'll
       overflow past the card's right edge on small screens. */
    width: calc(100% - (2 * var(--space-xs)));
    text-align: center;
    white-space: nowrap;
  }
}

/* ============================================
   FIX 2: Single product title — split "COLLECTION
   – CODE – SIZE" into a real heading + subheading.
   Markup for this is printed by loomchild_split_product_title()
   in functions.php (h1.loom-collection-title + p.loom-product-subtitle).
   ============================================ */
.product-info .loom-collection-title {
  font-family: var(--font-serif);
  font-size: clamp(2rem, 3.2vw, 2.75rem);
  letter-spacing: 0.03em;
  text-transform: uppercase;
  line-height: 1.15;
  margin-bottom: 0.4rem;
  text-align: left;
}

.product-info .loom-product-subtitle {
  font-family: var(--font-sans);
  font-size: 1rem;
  font-weight: 400;
  letter-spacing: 0.02em;
  color: var(--color-text-secondary);
  margin-bottom: var(--space-md);
}

/* Keep single-product gallery/summary columns tidy and evenly aligned */
.product-single {
  align-items: start;
}

.product-gallery img {
  border-radius: var(--radius);
}

/* ============================================
   FIX 3: WooCommerce "Default sorting" dropdown —
   restyle the native <select> so it matches the
   theme instead of looking like a raw browser control.
   Paired with the .loom-shop-toolbar wrapper added
   in the child theme's archive-product.php override.
   ============================================ */
.loom-shop-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-bottom: var(--space-lg);
}

.loom-shop-toolbar .woocommerce-result-count {
  margin: 0;
  font-size: 0.85rem;
  color: var(--color-text-muted);
}

.woocommerce-ordering {
  position: relative;
  display: inline-block;
  margin: 0;
}

.woocommerce-ordering::after {
  content: '';
  position: absolute;
  right: 2px;
  top: 45%;
  width: 6px;
  height: 6px;
  border-right: 1px solid var(--color-text-secondary);
  border-bottom: 1px solid var(--color-text-secondary);
  transform: translateY(-60%) rotate(45deg);
  pointer-events: none;
}

.woocommerce-ordering select.orderby {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--color-border);
  border-radius: 0;
  font-family: var(--font-sans);
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-secondary);
  padding: 0.35rem 1.2rem 0.35rem 0;
  cursor: pointer;
}

.woocommerce-ordering select.orderby:hover,
.woocommerce-ordering select.orderby:focus {
  outline: none;
  color: var(--color-text);
  border-bottom-color: var(--color-text);
}

/* ============================================
   FIX 7: Shop sidebar layout — sidebar column of
   filter widgets (Size, etc.) beside the product
   grid on the Shop page and every Collection page.
   Paired with the .loom-shop-layout wrapper added
   in the child theme's archive-product.php override.
   ============================================ */
.loom-shop-layout {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: var(--space-xl);
  align-items: start;
}

.loom-shop-layout--no-sidebar {
  grid-template-columns: 1fr;
}

.loom-shop-sidebar {
  position: sticky;
  top: var(--space-lg);
}

.loom-filter-widget {
  margin-bottom: var(--space-xl);
}

.loom-filter-title {
  font-family: var(--font-sans);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: var(--space-sm);
}

/* WooCommerce's built-in "Filter Products by Attribute" widget
   (Display type: List) renders a plain <ul><li><a>Term (count)</a>.
   Restyle it to read like the EWC checklist: a checkbox-shaped
   indicator, the term name, and the count aligned to the right. The
   widget itself has no real checkbox input — clicking the row just
   reloads the page with that term added to the URL — so ".chosen" is
   the class WooCommerce adds to the <li> once a term is active; we
   use that to fill in the "checked" box. */
.loom-shop-sidebar .wc-layered-nav-list,
.loom-shop-sidebar .widget_layered_nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.loom-shop-sidebar .wc-layered-nav-list li,
.loom-shop-sidebar .widget_layered_nav ul li {
  margin: 0;
  padding: 0.3rem 0;
}

.loom-shop-sidebar .wc-layered-nav-list li a,
.loom-shop-sidebar .widget_layered_nav ul li a {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-family: var(--font-sans);
  font-size: 0.88rem;
  color: var(--color-text-secondary);
  text-decoration: none;
}

.loom-shop-sidebar .wc-layered-nav-list li a::before,
.loom-shop-sidebar .widget_layered_nav ul li a::before {
  content: '';
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
  border: 1px solid var(--color-border);
  border-radius: 2px;
}

.loom-shop-sidebar .wc-layered-nav-list li.chosen a::before,
.loom-shop-sidebar .widget_layered_nav ul li.chosen a::before {
  background: var(--color-text);
  border-color: var(--color-text);
}

.loom-shop-sidebar .wc-layered-nav-list li.chosen a,
.loom-shop-sidebar .widget_layered_nav ul li.chosen a {
  color: var(--color-text);
  font-weight: 500;
}

.loom-shop-sidebar .wc-layered-nav-list li a .count,
.loom-shop-sidebar .widget_layered_nav ul li a .count {
  margin-left: auto;
  color: var(--color-text-muted);
  font-size: 0.8rem;
}

@media (max-width: 800px) {
  .loom-shop-layout {
    grid-template-columns: 1fr;
  }

  .loom-shop-sidebar {
    position: static;
    order: -1;
    margin-bottom: var(--space-lg);
  }
}

/* ============================================
   SHOP FILTERS — Price / Size / Collection /
   Availability panel (loomchild_render_shop_filters()
   in functions.php). Self-contained, no widgets
   required to add by hand.
   ============================================ */
.loom-shop-filters {
  display: block;
}

.loom-filter-block {
  margin-bottom: var(--space-lg);
}

.loom-filters-clear {
  display: inline-block;
  font-size: 0.8rem;
  color: var(--color-text-muted);
  text-decoration: underline;
  margin-bottom: var(--space-md);
}

.loom-filter-price-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.loom-filter-price-row input[type="number"] {
  width: 100%;
  min-width: 0;
  padding: 0.5rem 0.6rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  font-family: var(--font-sans);
  font-size: 0.85rem;
  background: var(--color-surface);
  color: var(--color-text);
}

.loom-filter-checklist {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.88rem;
  color: var(--color-text-secondary);
}

ul.loom-filter-checklist {
  display: block;
}

ul.loom-filter-checklist li {
  padding: 0.3rem 0;
}

.loom-filter-checklist label {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  cursor: pointer;
}

.loom-filter-checklist input[type="checkbox"] {
  width: 14px;
  height: 14px;
  accent-color: var(--color-accent);
}

.loom-filter-cats li a {
  display: block;
  padding: 0.15rem 0;
  color: var(--color-text-secondary);
  font-size: 0.88rem;
}

.loom-filter-cats li.is-current a {
  color: var(--color-text);
  font-weight: 500;
  text-decoration: underline;
}

.loom-filter-submit {
  width: 100%;
  text-align: center;
}

/* ============================================
   FIX 4: "Shop by Collection" tile grid
   (template-collections.php) — EWC-style image
   tile + caption underneath.
   ============================================ */
.collections-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-xl) var(--space-lg);
}

.collection-tile {
  display: block;
}

.collection-tile-image {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  margin-bottom: var(--space-sm);
  background: var(--color-surface);
}

.collection-tile-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.collection-tile:hover .collection-tile-image img {
  transform: scale(1.03);
}

.collection-tile-label {
  display: block;
  font-family: var(--font-sans);
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text);
}

/* Bonus: the Description/Additional info/Reviews tabs were rendering as a
   plain bulleted list instead of a styled tab bar — clean that up too. */
.woocommerce-tabs ul.tabs {
  list-style: none;
  display: flex;
  gap: var(--space-lg);
  border-bottom: 1px solid var(--color-border);
  margin-bottom: var(--space-lg);
  padding: 0;
}

.woocommerce-tabs ul.tabs li {
  margin: 0;
}

.woocommerce-tabs ul.tabs li a {
  display: inline-block;
  padding: 0.6rem 0;
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-secondary);
}

.woocommerce-tabs ul.tabs li.active a {
  color: var(--color-text);
  border-bottom: 2px solid var(--color-text);
}

@media (max-width: 768px) {
  .collections-grid {
    grid-template-columns: 1fr;
  }

  .loom-shop-toolbar {
    justify-content: flex-start;
  }
}

/* ============================================
   FIX 6: Boutique-style header — search icon +
   "Collection" hover dropdown on the left, logo
   centered, Contact/Bag on the right. Markup is
   in the child theme's header.php.
   ============================================ */
.site-header--boutique .header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
}

.header-left,
.header-right {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
  flex: 1;
}

.header-right {
  justify-content: flex-end;
}

.search-toggle {
  background: none;
  border: none;
  padding: 0;
  color: var(--color-text);
  cursor: pointer;
  display: flex;
  align-items: center;
}

.nav-collection {
  position: relative;
  /* FIX 8: The dropdown below is offset from the trigger by
     margin-top (see .nav-collection-menu), which leaves a gap that
     belongs to neither element. Moving the mouse straight down from
     "COLLECTION" toward a submenu item crosses that gap, the pointer
     briefly leaves .nav-collection entirely, :hover is lost, and the
     menu snaps shut before the click lands — that's the "hover shows
     it but I can't click it" bug. Padding-bottom + an equal negative
     margin-bottom extends this element's own hoverable box down
     through that gap (invisibly, with no layout shift), so the
     hover/focus state survives the trip down to the menu. */
  padding-bottom: var(--space-md);
  margin-bottom: calc(-1 * var(--space-md));
}

.nav-collection-trigger {
  font-family: var(--font-sans);
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text);
}

.nav-collection-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: var(--space-md);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  padding: var(--space-md) var(--space-lg);
  white-space: nowrap;
  flex-direction: column;
  gap: var(--space-sm);
  z-index: 20;
}

.nav-collection:hover .nav-collection-menu,
.nav-collection:focus-within .nav-collection-menu {
  display: flex;
}

.nav-collection-menu a {
  font-size: 0.8rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-text-secondary);
}

.nav-collection-menu a:hover {
  color: var(--color-text);
}

.header-contact-link,
.header-bag-link {
  font-family: var(--font-sans);
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text);
}

.site-search-panel {
  border-top: 1px solid var(--color-border);
  background: var(--color-surface);
  padding: var(--space-lg) 0;
}

.site-search-panel-inner {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}

.site-search-panel-inner form {
  flex: 1;
}

.site-search-panel-inner input[type="search"],
.site-search-panel-inner input[type="text"] {
  width: 100%;
  border: none;
  border-bottom: 1px solid var(--color-border);
  font-family: var(--font-serif);
  font-size: 1.3rem;
  padding: 0.4rem 0;
  background: transparent;
}

.site-search-panel-inner input:focus {
  outline: none;
  border-bottom-color: var(--color-text);
}

.search-close {
  background: none;
  border: none;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  color: var(--color-text-secondary);
}

/* On the boutique header, the old inline primary nav bar moves off to
   the side and only appears in the mobile dropdown (see below) —
   Collection / Contact / Bag replace it on desktop. */
.site-header--boutique .primary-navigation {
  display: none;
}

@media (max-width: 768px) {
  .site-header--boutique .header-left .nav-collection,
  .site-header--boutique .header-right .header-contact-link {
    display: none;
  }

  .site-header--boutique .menu-toggle {
    display: block;
  }

  .site-header--boutique .primary-navigation {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
    padding: var(--space-md);
  }

  .site-header--boutique .primary-navigation.toggled {
    display: block;
  }
}

/* ============================================
   FIX 6: Homepage — three full-width banner tiles
   (Collection / Legacy / Client Diaries). Markup
   is in the child theme's front-page.php; images
   are set under Appearance > Customize > Homepage
   Banners.
   ============================================ */
.home-banners {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.home-banner-tile {
  position: relative;
  display: block;
  /* Sized closer to these particular photos' own resolution (they're
     portrait shots, not shot for a full-bleed 85vh-tall crop) — a
     shorter box means less upscaling, which is what actually reads as
     "pixelated/zoomed in": stretching a smaller photo to fill a much
     bigger box always looks softer, no matter how it's cropped. */
  height: 62vh;
  max-height: 660px;
  min-height: 420px;
  overflow: hidden;
  background: var(--color-accent);
}

.home-banner-tile img,
.home-banner-placeholder {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.home-banner-placeholder {
  background: var(--color-accent);
}

.home-banner-tile:hover img {
  transform: scale(1.04);
}

.home-banner-label {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #fff;
  font-family: var(--font-sans);
  font-size: 1.4rem;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.35);
  z-index: 2;
  white-space: nowrap;
}

@media (max-width: 900px) {
  .home-banners {
    grid-template-columns: 1fr;
  }

  .home-banner-tile {
    height: 55vh;
    max-height: 520px;
    min-height: 340px;
  }
}

/* ============================================
   CONTACT PAGE (template-contact.php, rendered by
   loomchild_render_contact_page() in functions.php).
   A quiet, uncluttered two-column layout: a plain
   underline-style enquiry form on the left, address /
   WhatsApp / email / map on the right — stacks to one
   column on narrower screens. Reached from the "Contact"
   link in the header.
   ============================================ */
.contact-page {
  padding-top: var(--space-xl);
}

.contact-page-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2xl, 4rem);
  align-items: start;
}

.contact-form-col h1 {
  margin-bottom: var(--space-sm);
}

.contact-intro {
  color: var(--color-text-secondary);
  max-width: 32rem;
  margin-bottom: var(--space-lg);
}

.contact-underline-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
  max-width: 30rem;
}

.contact-underline-form label {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  font-size: 0.8rem;
  letter-spacing: 0.03em;
  color: var(--color-text-muted);
}

.contact-underline-form input,
.contact-underline-form textarea {
  width: 100%;
  border: none;
  border-bottom: 1px solid var(--color-border);
  border-radius: 0;
  background: transparent;
  padding: 0.5rem 0;
  font-family: var(--font-sans);
  font-size: 1rem;
  color: var(--color-text);
  resize: vertical;
  transition: border-color 0.2s ease;
}

.contact-underline-form input:focus,
.contact-underline-form textarea:focus {
  outline: none;
  border-color: var(--color-text);
}

.contact-underline-form .loom-hp-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.contact-send-btn {
  align-self: flex-start;
  margin-top: var(--space-sm);
  background: var(--color-text);
  color: var(--color-surface);
  border: none;
  padding: 0.85rem 2.5rem;
  font-family: var(--font-sans);
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  transition: opacity 0.2s ease, background 0.2s ease;
}

.contact-send-btn:hover {
  opacity: 1;
  background: var(--color-gold-dark, var(--color-text));
}

.contact-details-card {
  background: var(--color-wash, var(--color-surface));
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: var(--space-lg);
}

.contact-details-card h2 {
  margin-bottom: var(--space-sm);
  font-size: 1.3rem;
}

.contact-address {
  color: var(--color-text-secondary);
  margin-bottom: 0.5rem;
}

.contact-reach {
  margin-bottom: var(--space-md);
  font-size: 0.95rem;
}

.contact-reach a {
  color: var(--color-text);
  text-decoration: underline;
}

.contact-map {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--radius);
  border: 1px solid var(--color-border);
}

.contact-map iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

.home-contact-notice {
  padding: 0.75rem 1rem;
  border-radius: var(--radius);
  font-size: 0.9rem;
  margin-bottom: var(--space-sm);
  max-width: 30rem;
}

.home-contact-success {
  background: #eaf3ea;
  color: #2f5c33;
}

.home-contact-error {
  background: #fbe9e7;
  color: #8a2f22;
}

.loom-filter-submit {
  display: inline-block;
  width: 100%;
  margin-top: var(--space-xs);
  background: var(--color-text);
  color: var(--color-surface);
  border: none;
  padding: 0.9rem 2rem;
  font-family: var(--font-sans);
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-align: center;
  cursor: pointer;
  transition: opacity 0.2s ease, background 0.2s ease;
}

.loom-filter-submit:hover {
  opacity: 1;
  background: var(--color-gold-dark, var(--color-text));
}

@media (max-width: 900px) {
  .contact-page-grid {
    grid-template-columns: 1fr;
    gap: var(--space-xl);
  }
}

/* ============================================
   FIX 6: Slim footer — copyright + a few policy
   links in one row, replacing the previous
   4-column footer. Markup is in footer.php.
   ============================================ */
.site-footer--slim .footer-slim-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-sm);
  padding: var(--space-lg) 0;
}

.footer-slim-copyright {
  font-size: 0.8rem;
  color: var(--color-text-muted);
}

.footer-slim-links {
  display: flex;
  gap: var(--space-md);
}

.footer-slim-links a {
  font-size: 0.8rem;
  color: var(--color-text-secondary);
}

.footer-slim-links a:hover {
  color: var(--color-text);
}

@media (max-width: 768px) {
  .site-footer--slim .footer-slim-inner {
    flex-direction: column;
    text-align: center;
  }
}

/* ============================================================
   REFINED PALETTE — a warm brass/gold accent alongside the
   existing charcoal-on-cream palette, echoing the rug tones
   without copying any other site's exact colour scheme.
   ============================================================ */
:root {
  --color-gold: #c2b280;
  --color-gold-dark: #9b8e66;
  --color-wash: #f5f2ea;
}

/* ============================================================
   COLLECTION BANNER — full-width landscape photo at the top of
   a category page (Products > Categories > [name] > Collection
   Banner). Falls back to nothing (plain title) if unset, so a
   category never shows a broken/empty banner.
   ============================================================ */
.collection-banner {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  max-height: 640px;
  overflow: hidden;
  background: var(--color-wash);
  margin-bottom: var(--space-xl);
}

.collection-banner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.collection-banner-title {
  position: absolute;
  left: var(--space-lg);
  bottom: var(--space-lg);
  color: #fff;
  font-family: var(--font-serif);
  font-size: clamp(1.75rem, 4vw, 3rem);
  letter-spacing: 0.04em;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.45);
}

@media (max-width: 768px) {
  .collection-banner {
    aspect-ratio: 4 / 3;
    max-height: 340px;
    margin-bottom: var(--space-lg);
  }

  .collection-banner-title {
    left: var(--space-sm);
    bottom: var(--space-sm);
  }
}

/* FIX 12: a leftover plugin called "loome-shop-layout" — built during an
   earlier round of fixes and never deactivated — is still active and
   injects its OWN old, wrong collection photo (".loome-category-banner")
   on every collection page, directly underneath this theme's correct
   ".collection-banner". That plugin lives outside this theme entirely,
   which is exactly why no amount of editing the theme ever removed this
   second photo. Deactivating/deleting "loome-shop-layout" under wp-admin
   > Plugins is the real fix — this rule is a safety net so the stray
   photo stays hidden even before that's done. */
.loome-category-banner {
  display: none !important;
}

/* ============================================================
   PRODUCT CARD IMAGE — always a reserved, sized box. This is
   the fix for collection pages appearing to have an "empty"
   first box: the browser now reserves this exact space the
   instant the page lays out, instead of collapsing to nothing
   while the photo is still loading in.
   ============================================================ */
.product-card-image {
  position: relative;
  display: block;
  width: 100%;
  min-height: 1px;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: var(--color-wash);
  margin-bottom: var(--space-sm);
}

/* Fallback for the rare browser without aspect-ratio support: reserve
   the same 3:4 box using the padding-percentage technique so the
   space is still held even there — never a collapsed/empty box. */
@supports not (aspect-ratio: 3 / 4) {
  .product-card-image {
    height: 0;
    padding-top: 133.333%;
  }
  .product-card-image img {
    position: absolute;
    inset: 0;
  }
}

/* Keep any WooCommerce badge (Sale!, Out of stock, etc.) inside this
   card instead of escaping to the nearest positioned ancestor — with
   no containment, an absolutely-positioned badge on the very first
   product can end up pinned near the top-left of the whole page,
   which is exactly what "empty first box" often actually is. */
.product-card {
  position: relative;
}
.product-card .onsale {
  position: absolute;
  top: var(--space-xs);
  left: var(--space-xs);
  z-index: 2;
}

.product-card-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.product-card:hover .product-card-image img {
  transform: scale(1.035);
}

/* ============================================================
   SINGLE PRODUCT PAGE — sticky gallery left, structured info
   column right.
   ============================================================ */
.loom-product-single {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: var(--space-2xl);
  align-items: start;
  padding: var(--space-xl) 0;
}

.loom-product-gallery {
  position: sticky;
  top: var(--space-lg);
}

.loom-product-gallery .woocommerce-product-gallery__image {
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: var(--color-wash);
}

.loom-product-gallery .woocommerce-product-gallery__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.loom-product-info {
  max-width: 480px;
}

.loom-product-brand {
  font-family: var(--font-sans);
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: var(--space-sm);
}

.loom-sku-price-row {
  margin: var(--space-sm) 0 var(--space-lg);
  padding-bottom: var(--space-lg);
  border-bottom: 1px solid var(--color-border);
}

.loom-product-sku {
  font-size: 0.8rem;
  color: var(--color-text-muted);
  margin-bottom: var(--space-xs);
}

.loom-product-price .price {
  font-family: var(--font-serif);
  font-size: 1.5rem;
  color: var(--color-text);
}

.loom-product-price .price del {
  font-size: 0.75em;
  opacity: 0.6;
  margin-right: 0.5em;
}

.loom-product-price .price ins {
  text-decoration: none;
}

/* Size pills — bordered boxes like "9 x 12" / "369 x 272" */
.loom-size-pills {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
  margin-bottom: var(--space-lg);
}

.loom-size-pill-group {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.loom-size-pill-label {
  font-size: 0.78rem;
  color: var(--color-text-muted);
}

.loom-size-pill {
  display: inline-block;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 0.55rem 1.1rem;
  font-family: var(--font-sans);
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--color-text);
  width: fit-content;
}

/* Quantity + Add to Cart / Buy It Now */
.loom-purchase-form {
  margin-bottom: var(--space-lg);
}

.loom-qty-row {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  margin-bottom: var(--space-md);
}

.loom-qty-label {
  font-size: 0.85rem;
  color: var(--color-text-muted);
}

.loom-purchase-form .quantity {
  display: inline-flex;
}

.loom-purchase-form .qty {
  width: 4.5rem;
  padding: 0.55rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  font-family: var(--font-sans);
  text-align: center;
}

.loom-cart-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
}

.loom-btn {
  flex: 1 1 auto;
  min-width: 160px;
  padding: 0.9rem 1.5rem;
  border: none;
  border-radius: var(--radius);
  font-family: var(--font-sans);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: center;
  cursor: pointer;
  transition: background var(--transition), color var(--transition), transform var(--transition);
}

.loom-btn-primary {
  background: var(--color-gold);
  color: var(--color-text);
}

.loom-btn-primary:hover {
  background: var(--color-gold-dark);
  color: var(--color-text);
}

.loom-btn-dark {
  background: var(--color-text);
  color: #fff;
}

.loom-btn-dark:hover {
  background: #000;
}

.loom-btn:focus-visible,
.loom-share-btn:focus-visible {
  outline: 2px solid var(--color-gold);
  outline-offset: 2px;
}

.loom-out-of-stock {
  font-size: 0.9rem;
  color: var(--color-text-secondary);
  margin-bottom: var(--space-lg);
}

.loom-share-btn {
  background: none;
  border: none;
  padding: 0;
  font-family: var(--font-sans);
  font-size: 0.85rem;
  letter-spacing: 0.05em;
  text-decoration: underline;
  color: var(--color-text-secondary);
  cursor: pointer;
  margin-bottom: var(--space-lg);
}

.loom-share-btn:hover {
  color: var(--color-text);
}

/* Accordions — Description / Shipping / Care Instructions / Disclaimer */
.loom-accordions {
  border-top: 1px solid var(--color-border);
}

.loom-accordion {
  border-bottom: 1px solid var(--color-border);
}

.loom-accordion summary {
  list-style: none;
  cursor: pointer;
  padding: var(--space-md) 0;
  font-family: var(--font-sans);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.loom-accordion summary::-webkit-details-marker {
  display: none;
}

.loom-accordion summary::after {
  content: '+';
  font-size: 1.2rem;
  font-weight: 400;
  color: var(--color-text-muted);
  transition: transform var(--transition);
}

.loom-accordion[open] summary::after {
  content: '\2212'; /* minus sign */
}

.loom-accordion-body {
  padding-bottom: var(--space-md);
  font-size: 0.92rem;
  line-height: 1.75;
  color: var(--color-text-secondary);
}

.loom-accordion-body p {
  margin-bottom: 0.75em;
}

.loom-accordion-body p:last-child {
  margin-bottom: 0;
}

/* ============================================================
   RESPONSIVE — single product page, tablet + mobile
   ============================================================ */
@media (max-width: 1024px) {
  .loom-product-single {
    grid-template-columns: 1fr;
    gap: var(--space-lg);
  }

  .loom-product-gallery {
    position: static;
  }

  .loom-product-info {
    max-width: none;
  }
}

@media (max-width: 480px) {
  .loom-cart-buttons {
    flex-direction: column;
  }

  .loom-btn {
    width: 100%;
  }

  .loom-size-pills {
    gap: var(--space-sm);
  }

  .loom-product-price .price {
    font-size: 1.25rem;
  }
}

/* ============================================================
   GENERAL RESPONSIVE / ALIGNMENT POLISH
   ============================================================ */
@media (max-width: 600px) {
  .home-banner-label {
    font-size: 1rem;
    letter-spacing: 0.08em;
  }

  .collections-grid {
    gap: var(--space-lg) var(--space-md);
  }

  .loom-container {
    padding-left: var(--space-sm);
    padding-right: var(--space-sm);
  }
}

/* Make sure every heading and paragraph inherits a consistent left/
   center alignment rule from its container instead of relying on
   browser defaults — prevents the "text drifting left/right
   unexpectedly" look on odd screen widths. */
.loom-product-info h1,
.loom-product-info p,
.loom-product-info .loom-accordions {
  text-align: left;
}

.loom-container {
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  padding-left: var(--space-md);
  padding-right: var(--space-md);
}

/* Focus states for keyboard/accessibility on interactive elements
   site-wide (also a mild security/usability best practice). */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible {
  outline: 2px solid var(--color-gold);
  outline-offset: 2px;
}

/* ============================================================
   BRAND TIE-IN — ties the shop-grid "Add to Cart" buttons and
   the nav-collection hover state to the same khaki from the
   Loomé logo, so the accent colour reads consistently sitewide
   instead of only appearing on the new single-product buttons.
   ============================================================ */
.woocommerce button.button:hover,
.woocommerce a.button:hover {
  opacity: 1;
  background: var(--color-gold-dark);
}

.nav-collection-menu a:hover,
.footer-slim-links a:hover,
.collection-tile:hover .collection-tile-label,
a.header-contact-link:hover {
  color: var(--color-gold-dark);
}

.loom-accordion[open] summary,
.loom-accordion summary:hover {
  color: var(--color-gold-dark);
}