@layer components {
/* ========== Base / Utilities ========== */
.container{
  max-width:var(--container-max);
  padding-inline:var(--container-padding);
  margin-inline:auto;
}
.grid{
  display:grid;
  gap:var(--grid-gap);
}
@media (min-width: 768px){
  .grid.cols-3{ grid-template-columns:repeat(3,1fr); }
  .grid.cols-4{ grid-template-columns:repeat(4,1fr); }
}
.skeleton{
  position:relative; overflow:hidden; background:var(--skeleton-base);
}
.skeleton::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(90deg, transparent, var(--skeleton-shine), transparent);
  animation:skeleton 1.2s infinite;
}
@keyframes skeleton{ 0%{transform:translateX(-100%)} 100%{transform:translateX(100%)} }

/* ========== Buttons ========== */
.btn{
  display:inline-block;
  padding:var(--btn-padding-y) var(--btn-padding-x);
  border-radius:var(--radius-button);
  background:var(--btn-bg);
  min-height:var(--control-min-height); /* ~42–43px by tokens */
  font-size:inherit; /* inherit GP 14px */
  color:var(--btn-text);
  font-weight:var(--font-weight-semibold);
  text-decoration:none;
  transition:transform var(--duration-100) var(--ease-standard), opacity var(--duration-100) var(--ease-standard), box-shadow var(--duration-100) var(--ease-standard), background var(--duration-100) var(--ease-standard);
}
.btn:hover{ background:var(--btn-bg-hover); transform:translateY(-1px); box-shadow:var(--shadow-sm); }
.btn:focus-visible{ outline:none; box-shadow:var(--focus-ring); }
.btn--ghost{
  background:transparent;
  color:var(--color-primary);
  border:var(--border-width-1) solid var(--color-primary);
}
.btn--ghost:hover{
  background:color-mix(in srgb, var(--color-primary), #fff 85%);
}

/* ========== Inputs ========== */
.input{
  width:100%;
  font:var(--font-weight-regular) var(--fs-body)/var(--lh-normal) var(--font-sans); /* inherits 14px body from tokens/maps */
  color:var(--input-text);
  background:var(--input-bg);
  border:var(--border-width-1) solid var(--input-border);
  border-radius:var(--radius-input); /* 12px by tokens */
  padding:var(--input-padding-y) var(--input-padding-x);
  min-height:var(--control-min-height); /* visual consistency with buttons */
}
.input::placeholder{ color:var(--input-placeholder); }
.input:focus{ outline:none; box-shadow:var(--focus-ring); border-color:transparent; }

/* ========== Badges ========== */
.badge{
  display:inline-block; padding:2px 8px; border-radius:var(--radius-badge);
  font:var(--font-weight-medium) var(--fs-small)/1 var(--font-sans);
}
.badge--sale{ background:var(--badge-sale-bg); color:var(--badge-sale-text); }
.badge--new{ background:var(--badge-new-bg); color:var(--badge-new-text); }
.badge--low{ background:var(--badge-lowstock-bg); color:var(--badge-lowstock-text); }

/* ========== Price ========== */
.price{ display:flex; gap:8px; align-items:baseline; }
.price__current{ color:var(--price-main); font-weight:var(--font-weight-semibold); }
.price__sale{ color:var(--price-sale); font-weight:var(--font-weight-bold); }
.price__compare{ color:var(--price-compare); text-decoration:line-through; }

/* ========== Rating (simple star fill; replace with SVG if needed) ========== */
.rating{ color:var(--rating-star); font-size:14px; } /* matches GP base */

/* ========== Generic Card Foundation (used by all cards below) ========== */
.rlm-card{
  background:var(--card-bg);
  border:var(--border-width-1) solid var(--card-border);
  border-radius:var(--radius-card);            /* 16px */
  box-shadow:var(--card-shadow, var(--shadow-sm)); /* subtle by default */
  padding:var(--card-padding);
  display:grid; gap:var(--card-gap);
  transition:transform var(--duration-100) var(--ease-standard), box-shadow var(--duration-100) var(--ease-standard);
}
.rlm-card:hover{
  transform:translateY(-2px);
  box-shadow:var(--shadow-md); /* gentle lift */
}

.rlm-card__media{
  aspect-ratio:var(--card-media-ratio);       /* 4/3 by default */
  overflow:hidden;
  border-radius:var(--radius-card-media);     /* 8px inner radius */
  background:var(--color-surface-alt);
}
.rlm-card__media img{ width:100%; height:100%; object-fit:cover; display:block; }

.rlm-card__eyebrow{
  color:var(--color-text); font:var(--font-weight-medium) var(--fs-small)/1 var(--font-sans);
  text-transform:uppercase; letter-spacing:.02em;
}
.rlm-card__title{
  margin:0;
  font:var(--font-weight-semibold) var(--fs-h4)/var(--lh-tight) var(--font-sans);
  color:var(--color-heading);
}
.rlm-card__subtitle{
  margin:0;
  font:var(--font-weight-regular) var(--fs-small)/var(--lh-normal) var(--font-sans);
  color:var(--color-text);
}
.rlm-card__cta{ align-self:start; }

/* ========== 1) On-Sale Card ========== */
/* Extends rlm-card via HTML class composition */
.rlm-sale-card .badge--sale{ margin-bottom:var(--space-2); }
.rlm-sale-card__discount{
  color:var(--price-sale);
  font:var(--font-weight-bold) var(--fs-h3)/var(--lh-tight) var(--font-sans);
}
.rlm-sale-card__timer{ color:var(--color-text); font-size:var(--fs-small); }

/* Variant: horizontal layout (image right) */
@media (min-width: 768px){
  .rlm-sale-card--horizontal{
    grid-template-columns:1.2fr .8fr; align-items:center;
  }
}

/* ========== 2) Brand Range Card ========== */
.rlm-range-card__title{
  font:var(--font-weight-semibold) var(--fs-h3)/var(--lh-tight) var(--font-sans);
}
.rlm-range-card__meta{
  display:flex; flex-wrap:wrap; gap:8px; color:var(--color-text);
  font:var(--font-weight-medium) var(--fs-small)/1.2 var(--font-sans);
}
.rlm-range-card__cta .btn{ margin-top:var(--space-3); }

/* ========== 3) Product Card (PLP) ========== */
/* Requirements: outer radius 16px, inner image 8px, price/rating/cta */
.rlm-product-card{
  /* often we drop outer padding to let image touch edges; adjust if desired */
  padding:var(--space-4);
}
.rlm-product-card__media{
  /* Square or 4/3 depending on your catalogue imagery */
  aspect-ratio: 1; /* override per context if needed */
  position:relative;
}
.rlm-product-card__badge{
  position:absolute; top:8px; left:8px; z-index:var(--z-sticky);
}
.rlm-product-card__title{
  font:var(--font-weight-medium) var(--fs-h5)/1.3 var(--font-sans);
  color:var(--color-heading); margin:0;
}
.rlm-product-card__attrs{
  color:var(--color-text); font-size:var(--fs-small);
}
.rlm-product-card__bottom{
  display:grid; grid-template-columns:1fr auto; align-items:center; gap:var(--space-3);
}
.rlm-product-card .price{ margin-top:var(--space-2); }
.rlm-product-card .btn{ justify-self:end; }

/* Hover media zoom (nice but subtle) */
.rlm-product-card__media img{ transition:transform var(--duration-200) var(--ease-standard); }
.rlm-product-card:hover .rlm-product-card__media img{ transform:scale(1.03); }

/* Compact PLP density variant */
.rlm-product-card--compact{ padding:var(--space-3); }
.rlm-product-card--compact .rlm-product-card__title{ font-size:var(--fs-small); }
.rlm-product-card--compact .btn{ padding:8px 12px; }

/* ========== Grids for the three cards ========== */
.rlm-card-grid{ display:grid; gap:var(--grid-gap); }
@media (min-width: 640px){ .rlm-card-grid.cols-2{ grid-template-columns:repeat(2,1fr); } }
@media (min-width: 900px){ .rlm-card-grid.cols-3{ grid-template-columns:repeat(3,1fr); } }
@media (min-width: 1200px){ .rlm-card-grid.cols-4{ grid-template-columns:repeat(4,1fr); } }

/* ========== Accessibility & States ========== */
a:focus-visible, button:focus-visible{ outline:none; box-shadow:var(--focus-ring); }
.is-hidden{ display:none !important; }
.is-disabled{ pointer-events:none; opacity:.6; }

/* ========== Page Wrappers (PLP) ========== */
.rlm-shop-intro{
  padding:var(--space-4);
  border-radius:var(--radius-card);
  box-shadow:var(--shadow-sm);
  background:var(--color-surface);
  margin-top:var(--space-4);
}
.rlm-shop-intro > .e-con-inner { padding:0; }
.rlm-shop-intro .rlm-category-blurb > :last-child { margin-bottom:0; }

/* Breadcrumb divider (Woo or Elementor wrapper) */
.woocommerce .woocommerce-breadcrumb,
.rlm-breadcrumb > .e-con-inner {
  border-bottom: var(--border-width-1, 1px) solid var(--color-border, var(--gray-200));
  padding: var(--space-3) 0 var(--space-1);
  margin: 0;
}

/* ========== End components layer ========== */
}

/* ===== Unlayered topcoat for PLPs (override Elementor/page CSS safely) ===== */

/* Scope: only product archives */
.rlm-archive-scope .e-con.rlm-shop-intro{
  /* Elementor's .e-con may set --border-radius: 0 and apply it */
  --border-radius: var(--radius-card);
  border-radius: var(--radius-card);
}

/* Kill unwanted anchor margins on product tiles */
.rlm-archive-scope .woocommerce ul.products li.product a{
  margin: 0;
}

/* If breadcrumbs get overridden by Elementor wrappers, reinforce the divider */
.rlm-archive-scope .rlm-breadcrumb > .e-con-inner{
  border-bottom: var(--border-width-1) solid var(--color-border);
  padding: var(--space-3) 0 var(--space-1);
  margin: 0;
}