/* =========================================================
   RLM Molecules (Component styling + RLM identifiers)
   Component classes with styling + WordPress override hooks
   ========================================================= */

/* ===== CORE COMPONENT CLASSES ===== */

/* Buttons */
.btn,
.wp-block-button__link{
  display:inline-block;
  padding:var(--btn-padding-y) var(--btn-padding-x) !important;
  border-radius:var(--radius-button) !important;
  background:var(--btn-bg) !important;
  border:var(--border-width-1) solid var(--btn-bg) !important;
  min-height:var(--btn-min-height) !important;
  color:var(--btn-text) !important;
  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), border-color var(--duration-100) var(--ease-standard);
}
.btn:hover,
.wp-block-button__link:hover{
  background:var(--btn-bg-hover) !important;
  border-color:var(--btn-bg-hover) !important;
  transform:translateY(-1px);
  box-shadow:var(--shadow-sm);
}
.btn:focus-visible,
.wp-block-button__link:focus-visible{
  outline:none;
  box-shadow:var(--focus-ring) !important;
}
.btn--ghost,
.wp-block-button.is-style-outline .wp-block-button__link,
.wp-block-button.is-style-outline--1 .wp-block-button__link{
  background:transparent !important;
  color:var(--color-primary) !important;
  border:var(--border-width-1) solid var(--color-primary) !important;
}
.btn--ghost:hover,
.wp-block-button.is-style-outline .wp-block-button__link:hover,
.wp-block-button.is-style-outline--1 .wp-block-button__link:hover{
  background:color-mix(in srgb, var(--color-primary), #fff 85%) !important;
}

/* Gutenberg button container styles */
.wp-block-buttons{
  display: flex !important;
  flex-wrap: wrap !important;
  gap: var(--space-2) !important;
  align-items: center !important;
}
.wp-block-button{
  margin: 0 !important;
}

/* Inputs */
.input{
  width:100%;
  box-sizing:border-box !important;
  font:var(--font-weight-regular) var(--fs-body)/var(--lh-normal) var(--font-sans) !important;
  color:var(--input-text) !important;
  background:var(--input-bg) !important;
  border:var(--border-width-1) solid var(--input-border) !important;
  border-radius:var(--radius-input) !important;
  padding:var(--input-padding-y) var(--input-padding-x) !important;
}
.input::placeholder{ color:var(--input-placeholder) !important; }
.input:focus{ outline:none !important; box-shadow:var(--focus-ring) !important; border-color:transparent !important; }

/* Pills */
.pill{
  display:inline-flex;
  align-items:center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-3) calc(var(--space-1) + 1px);
  border-radius: var(--radius-pill);
  font: var(--font-weight-medium) var(--fs-small)/1 var(--font-sans);
  background: var(--color-surface);
  color: var(--color-text);
  border: var(--border-width-1) solid var(--color-border);
  transition: background var(--duration-100) var(--ease-standard), box-shadow var(--duration-100) var(--ease-standard), transform var(--duration-100) var(--ease-standard);
  max-width:100%;
}
.pill:hover{ transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.pill--success{ background: color-mix(in oklab, var(--color-success), #fff 88%); color: var(--color-success); border-color: color-mix(in oklab, var(--color-success), #fff 70%); }
.pill--warning{ background: color-mix(in oklab, var(--color-warning), #fff 88%); color: var(--color-warning); border-color: color-mix(in oklab, var(--color-warning), #fff 70%); }
.pill--info{ background: color-mix(in oklab, var(--color-info), #fff 88%); color: var(--color-info); border-color: color-mix(in oklab, var(--color-info), #fff 70%); }
.pill--danger{ background: color-mix(in oklab, var(--color-danger), #fff 88%); color: var(--color-danger); border-color: color-mix(in oklab, var(--color-danger), #fff 70%); }
.pill--primary{ background: color-mix(in oklab, var(--color-primary), #fff 88%); color: var(--color-primary); border-color: color-mix(in oklab, var(--color-primary), #fff 70%); }
.pill--brand{ background: var(--color-brand-100); color: var(--color-brand-600); border-color: var(--color-brand-400); }

/* Promo Labels */
.promo-label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-3) calc(var(--space-1) + 1px);
  border-radius: var(--radius-pill);
  font: var(--font-weight-semibold) var(--fs-small)/1 var(--font-sans);
  background: var(--color-surface);
  color: var(--color-text);
  border: var(--border-width-1) solid var(--color-border);
  transition: all var(--duration-100) var(--ease-standard);
}
.promo-label--success { background: color-mix(in oklab, var(--color-success), #fff 85%); color: var(--color-success); border-color: color-mix(in oklab, var(--color-success), #fff 60%); }
.promo-label--warning { background: color-mix(in oklab, var(--color-warning), #fff 85%); color: var(--color-warning); border-color: color-mix(in oklab, var(--color-warning), #fff 60%); }
.promo-label--info { background: color-mix(in oklab, var(--color-info), #fff 85%); color: var(--color-info); border-color: color-mix(in oklab, var(--color-info), #fff 60%); }
.promo-label--danger { background: color-mix(in oklab, var(--color-danger), #fff 85%); color: var(--color-danger); border-color: color-mix(in oklab, var(--color-danger), #fff 60%); }
.promo-label--primary { background: color-mix(in oklab, var(--color-primary), #fff 85%); color: var(--color-primary); border-color: color-mix(in oklab, var(--color-primary), #fff 60%); }

/* 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 */
.rating{ color:var(--rating-star); font-size:14px; }

/* Avatar */
.avatar{ width:48px; height:48px; border-radius:var(--radius-round); object-fit:cover; display:block; }

/* Feature Item (Icon + Label/Value) */
.feature-item{
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3);
  background: var(--color-surface);
  border-radius: var(--radius-md);
}
.feature-item__icon{
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-surface-alt);
  color: var(--gray-700);
  border-radius: var(--radius-md);
}
.feature-item__icon svg,
.feature-item__icon .icon{
  width: 24px;
  height: 24px;
}
.feature-item__content{
  flex-shrink: 0;
}
.feature-item__label{
  display: block;
  font: var(--font-weight-medium) var(--fs-small)/1.2 var(--font-sans);
  color: var(--gray-700);
  margin-bottom: var(--space-1);
  white-space: nowrap;
}
.feature-item__value{
  display: block;
  font: var(--font-weight-medium) var(--fs-h5)/1.2 var(--font-sans);
  color: var(--color-heading);
  white-space: nowrap;
}

/* Feature Item - Dark Variant */
.feature-item--dark{
  background: var(--gray-900);
  border-color: var(--gray-800);
}
.feature-item--dark .feature-item__icon{
  background: var(--gray-700);
  color: var(--white);
}
.feature-item--dark .feature-item__label{
  color: var(--white);
}
.feature-item--dark .feature-item__value{
  color: var(--white);
}

/* Info Card */
.info-card{
  width: auto;
  display: inline-block;
  padding: var(--space-4);
  background: transparent;
  border-radius: var(--radius-lg);
}
.info-card h1.info-card__title,
.info-card h2.info-card__title,
.info-card h3.info-card__title,
.info-card h4.info-card__title,
.info-card h5.info-card__title,
.info-card h6.info-card__title,
.info-card .info-card__title{
  font: var(--font-weight-semibold) var(--fs-h4)/1.2 var(--font-sans);
  color: var(--color-heading);
  margin: 0 0 var(--space-3) 0;
}
.info-card__grid{
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}
.info-card__grid .feature-item{
  display: flex;
  flex: 0 0 auto;
}

/* Info Card - Background Variants */
.info-card--white{
  background: var(--white);
}
.info-card--secondary{
  background: var(--color-surface-alt);
}
.info-card--dark{
  background: var(--gray-900);
}
.info-card--dark .info-card__title{
  color: var(--white);
}

/* ===== INTERACTIVE COMPONENTS ===== */

/* Tabs */
.tabs{
  display: grid;
  gap: var(--space-4);
}

.tablist{
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  background: transparent;
  border-radius: var(--radius-lg);
  padding: var(--space-1);
  box-shadow: inset 0px 0px 2px rgba(0, 0, 0, 0.2);
}

.tab{
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--color-text);
  border: none;
  cursor: pointer;
  font: var(--font-weight-medium) var(--fs-body)/var(--lh-normal) var(--font-sans);
  transition: all var(--duration-200) var(--ease-standard);
  position: relative;
  min-width: 80px;
  text-align: center;
}

.tab:hover {
  color: var(--color-heading);
  background: color-mix(in oklab, var(--color-surface), transparent 20%);
}

.tab[aria-selected="true"],
.tab.is-active{
  background: var(--color-primary);
  box-shadow: var(--shadow-sm);
  color: white;
  font-weight: var(--font-weight-semibold);
  transform: translateY(-1px);
}

.tab:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.tabpanel{
  padding: var(--space-4) var(--space-2) var(--space-2);
  border-radius: var(--radius-md);
  min-height: 120px;
}

/* Accordion */
.accordion{ display:grid; gap:var(--space-2); }
.accordion__item{ border-bottom: var(--border-width-1) solid var(--color-border); }
.accordion__button{ width:100%; text-align:left; background:transparent; border:none; padding:12px 0; font: var(--font-weight-medium) var(--fs-h5)/var(--lh-medium) var(--font-sans); color: var(--color-heading); }
.accordion__panel{ padding: 0 0 var(--space-3); color: var(--color-text); }

/* ===== LAYOUT COMPONENTS ===== */

/* Layout primitives */
.stack{ display:flex; flex-direction:column; gap:var(--space-3); }
.stack--sm{ gap:var(--space-2); }
.stack--lg{ gap:var(--space-5); }
.cluster{ display:flex; flex-wrap:wrap; gap:var(--space-2); align-items:center; }
.cluster--spread{ justify-content:space-between; }
.cluster--center{ justify-content:center; }
.switcher{ display:flex; flex-wrap:wrap; gap:var(--space-3); }
.switcher > * { flex:1 1 320px; }
/* ===== GRID PATTERNS ===== */
/*
 * These provide responsive grid defaults
 * Override with utility classes for custom layouts:
 * - grid-cols-{1-6,12} for column count
 * - col-span-{1-6} for spanning
 * - Use sm:, md:, lg:, xl: prefixes for responsive control
 *
 * Example: <div class="grid-range lg:grid-cols-3">
 */

.grid-auto{
  display: grid !important;
  gap: var(--grid-gap) !important;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)) !important;
}

/* Product Range Grid: 1 col mobile, 2 col tablet, 4 col desktop */
.grid-range{
  display: grid !important;
  gap: var(--space-4) !important;
  grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
}

@media (min-width: 480px) {
  .grid-range { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}

@media (min-width: 1024px) {
  .grid-range { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
}

/* Media object */
.media{ display:grid; grid-template-columns: 96px 1fr; gap:var(--space-3); align-items:center; }
.media__img{ width:96px; aspect-ratio:1; border-radius:var(--radius-sm); background:var(--color-surface-alt); display:grid; place-items:center; overflow:hidden; }
.media__img img{ width:100%; height:100%; object-fit:cover; display:block; }
.media__body{ min-width:0; }

/* Banner */
.banner-block{
  display: grid !important;
  gap: var(--space-4) !important;
  align-items: center !important;
  grid-template-columns: 1fr !important;
}

@media (min-width: 768px) {
  .banner-block { grid-template-columns: 1.1fr 0.9fr !important; }
}
.banner-block__title{ margin:0; font: var(--font-weight-bold) var(--fs-h1)/var(--lh-tight) var(--font-sans); color: var(--color-heading); }
.banner-block__text{ color: var(--color-text); font: var(--font-weight-regular) var(--fs-body)/var(--lh-normal) var(--font-sans); }
.banner-block__actions{ display:flex; flex-wrap:wrap; gap:var(--space-2); }

/* Video embed */
.video-embed{ position:relative; width:100%; aspect-ratio:16/9; border-radius:var(--radius-xl); overflow:hidden; background:var(--color-surface-alt); box-shadow:var(--shadow-sm); }
.video-embed iframe, .video-embed video{ position:absolute; inset:0; width:100%; height:100%; border:0; display:block; }

/* ===== FORM COMPONENTS ===== */

.form{ display: grid !important; gap: var(--space-3) !important; }
.form-row{ display: grid !important; gap: var(--space-2) !important; }
.form-row--2{
  grid-template-columns: 1fr !important;
  gap: var(--space-3) !important;
}

@media (min-width: 480px) {
  .form-row--2 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}

.form-row--3{
  grid-template-columns: 1fr !important;
  gap: var(--space-3) !important;
}

@media (min-width: 768px) {
  .form-row--3 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
}
.form__label{ font-weight: var(--font-weight-medium); color: var(--color-text-strong); }

/* ===== SPEC/COMPARISON COMPONENTS ===== */

.spec-chip{ display:inline-grid; grid-auto-flow:column; align-items:center; gap:8px; padding:6px 10px; border-radius:var(--radius-pill); background: var(--color-surface); color: var(--color-text); border: var(--border-width-1) solid var(--color-border); font: var(--font-weight-medium) var(--fs-small)/1 var(--font-sans); }
.spec-chip__icon{ width:18px; height:18px; display:inline-grid; place-items:center; }

/* Comparison table - tab-style aesthetic */
.compare{
  background: var(--color-surface) !important;
  border-radius: var(--radius-lg) !important;
  overflow: hidden !important;
  box-shadow: var(--shadow-sm) !important;
}

.compare-row{
  display: grid !important;
  grid-template-columns: 1fr !important;
  align-items: center !important;
  gap: var(--space-2) !important;
  padding: var(--space-3) var(--space-4) !important;
  border-bottom: var(--border-width-1) solid var(--color-border) !important;
  transition: background var(--duration-100) var(--ease-standard) !important;
}

@media (min-width: 768px) {
  .compare-row { grid-template-columns: 1.2fr repeat(3, 1fr) !important; }
}

.compare-row--head{
  font-weight: var(--font-weight-semibold);
  color: var(--color-heading);
  background: var(--color-surface-alt) !important;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
}

.compare-row:not(.compare-row--head):hover {
  background: color-mix(in oklab, var(--color-surface-alt), transparent 50%) !important;
}

.compare-row:last-child {
  border-bottom: none !important;
}

.compare-row__cell{
  font-size: var(--fs-body);
  color: var(--color-text);
}

/* ===== MODAL COMPONENTS ===== */

.overlay{ position:fixed; inset:0; background:rgba(0,0,0,.4); z-index: var(--z-overlay); opacity:0; pointer-events:none; transition:opacity var(--duration-100) var(--ease-standard); }
.overlay.is-open{ opacity:1; pointer-events:auto; }
.sheet{ position:fixed; right:0; top:0; height:100dvh; width:min(420px, 100%); background:var(--color-surface); box-shadow:var(--shadow-lg); z-index: var(--z-modal); transform:translateX(100%); transition:transform var(--duration-200) var(--ease-standard); display:grid; grid-template-rows:auto 1fr auto; }
.sheet.is-open{ transform:translateX(0%); }
.sheet__header, .sheet__footer{ padding: var(--space-4); border-bottom: var(--border-width-1) solid var(--color-border); }
.sheet__footer{ border-bottom:none; border-top: var(--border-width-1) solid var(--color-border); }
.sheet__body{ padding: var(--space-4); overflow:auto; }

/* ===== TABLE COMPONENTS ===== */

/* Tab-style tables - matches tablist aesthetic */
.table-clean{
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: var(--fs-body);
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

.table-clean thead {
  background: var(--color-surface-alt);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
}

.table-clean th {
  padding: var(--space-3) var(--space-4);
  text-align: left;
  color: var(--color-heading);
  font-weight: var(--font-weight-semibold);
  font-size: var(--fs-body);
  border-bottom: var(--border-width-1) solid var(--color-border);
  background: var(--color-surface-alt);
}

.table-clean th:first-child {
  border-top-left-radius: var(--radius-lg);
}

.table-clean th:last-child {
  border-top-right-radius: var(--radius-lg);
}

.table-clean td {
  padding: var(--space-3) var(--space-4);
  text-align: left;
  color: var(--color-text);
  border-bottom: var(--border-width-1) solid var(--color-border);
  transition: background var(--duration-100) var(--ease-standard);
}

.table-clean tbody tr:hover {
  background: color-mix(in oklab, var(--color-surface-alt), transparent 50%);
}

.table-clean tbody tr:last-child td {
  border-bottom: none;
}

.table-clean tbody tr:last-child td:first-child {
  border-bottom-left-radius: var(--radius-lg);
}

.table-clean tbody tr:last-child td:last-child {
  border-bottom-right-radius: var(--radius-lg);
}

/* Striped variant */
.table-clean--striped tbody tr:nth-child(even) {
  background: color-mix(in oklab, var(--color-surface-alt), transparent 70%);
}

/* Compact variant */
.table-clean--compact th,
.table-clean--compact td {
  padding: var(--space-2) var(--space-3);
}

/* ===== SKELETON COMPONENTS ===== */

.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%)} }

/* ===== TYPOGRAPHY HIERARCHY ===== */

/* Section titles - consistent across all sections */
.section-title {
  font: var(--font-weight-semibold) var(--fs-h2)/var(--lh-tight) var(--font-sans) !important;
  color: var(--color-heading) !important;
  margin: 0 0 var(--space-4) 0 !important;
}

/* Card titles - primary content within cards */
.card-title {
  font: var(--font-weight-semibold) var(--fs-h4)/var(--lh-medium) var(--font-sans) !important;
  color: var(--color-heading) !important;
  margin: 0 0 var(--space-2) 0 !important;
}

/* Product titles - specific for product cards */
.product-title {
  font: var(--font-weight-medium) var(--fs-h5)/var(--lh-medium) var(--font-sans) !important;
  color: var(--color-heading) !important;
  margin: 0 0 var(--space-1) 0 !important;
}

/* Range titles - for product range/category cards */
.range-title {
  font: var(--font-weight-semibold) var(--fs-h5)/var(--lh-tight) var(--font-sans) !important;
  color: var(--color-heading) !important;
  margin: 0 0 var(--space-2) 0 !important;
}

/* Feature titles - for feature/benefit cards */
.feature-title {
  font: var(--font-weight-semibold) var(--fs-h5)/var(--lh-medium) var(--font-sans) !important;
  color: var(--color-heading) !important;
  margin: 0 0 var(--space-2) 0 !important;
}

/* Banner titles - for hero/banner sections */
.banner-title {
  font: var(--font-weight-bold) var(--fs-h1)/var(--lh-tight) var(--font-sans) !important;
  color: var(--color-heading) !important;
  margin: 0 0 var(--space-3) 0 !important;
}

/* Subtitles - supporting text under titles */
.subtitle {
  font: var(--font-weight-regular) var(--fs-body)/var(--lh-normal) var(--font-sans) !important;
  color: var(--color-text) !important;
  margin: 0 0 var(--space-3) 0 !important;
}

/* ===== CARD COMPONENTS ===== */

/* Card foundations */
.card-base{
  background:var(--card-bg) !important;
  border:var(--border-width-1) solid var(--card-border) !important;
  border-radius:var(--radius-card) !important;
  box-shadow:var(--card-shadow) !important;
  padding:var(--card-padding) !important;
}

.card-flex{
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
  padding: var(--space-4) !important;
}

.card-range{
  display:grid; grid-template-rows:auto 1fr auto; gap: var(--space-3);
  padding: var(--card-padding) !important; border-radius: var(--radius-card) !important;
  background: var(--card-bg) !important; box-shadow: var(--card-shadow) !important;
  border: var(--border-width-1) solid var(--card-border) !important; color: inherit;
}

/* Media components */
.media-card {
  aspect-ratio: var(--ratio-card-media);
  border-radius: var(--radius-card-media);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-surface-alt);
  width: 100%;
}

.media-video {
  aspect-ratio: var(--ratio-wide-angle);
  border-radius: var(--radius-card-media);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-surface-alt);
  width: 100%;
}

/* Icon components */
.icon-box {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 48px !important;
  height: 48px !important;
  background: var(--color-brand-100) !important;
  border-radius: var(--radius-md) !important;
  color: var(--color-primary) !important;
  margin-bottom: var(--space-3) !important;
}
.icon-box .icon {
  width: 24px !important;
  height: 24px !important;
}

/* Content components */
.content-header,
.content-body {
  margin-bottom: var(--space-3);
}

.content-header:last-child,
.content-body:last-child {
  margin-bottom: 0;
}

.content-footer {
  margin-top: auto;
}

.content-promo {
  padding: var(--space-2) !important;
  background: var(--color-brand-100) !important;
  border-radius: var(--radius-md) !important;
  font-size: var(--fs-small) !important;
  color: var(--color-brand-600) !important;
  margin-bottom: var(--space-3) !important;
}

.content-payment {
  padding: var(--space-2) !important;
  border: var(--border-width-1) solid var(--color-border) !important;
  border-radius: var(--radius-md) !important;
  font-size: var(--fs-small) !important;
}

.flex-payment-row {
  display: flex !important;
  align-items: center !important;
  gap: var(--space-2) !important;
  margin-bottom: var(--space-1) !important;
}

/* Component Grid: 1 col mobile, 2 col tablet, 3 col desktop */
.grid-component {
  display: grid !important;
  gap: var(--space-4) !important;
  grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
}

@media (min-width: 768px) {
  .grid-component { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}

@media (min-width: 1024px) {
  .grid-component { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
}

/* Badge components */
.badge-stack{
  position: absolute !important;
  top: var(--space-3) !important;
  right: var(--space-3) !important;
  display: flex !important;
  flex-direction: column !important;
  gap: var(--space-1) !important;
  z-index: 2 !important;
}
.badge-stack--left{ left: var(--space-3) !important; right: auto !important; }
.badge-stack--bottom{ top: auto !important; bottom: var(--space-2) !important; }

/* Range components - styles defined above with title classes */

.range-actions{
  margin-top: auto !important;
  display: flex !important;
  flex-direction: row !important;
  gap: var(--space-2) !important;
}

/* .range-badges uses .badge-stack - defined above */

/* Utility patterns */
.reset-margins > * {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}
.reset-margins > * + * {
  margin-top: var(--space-3) !important;
}

.stack-sm > * + * {
  margin-top: var(--space-2) !important;
}

.space-group {
  margin-bottom: var(--space-4) !important;
}

/* Placeholder styling removed - using real images */

/* ===== RLM MOLECULE IDENTIFIERS (WordPress hooks) ===== */

/* Layout molecule identifiers */
.rlm-stack{ /* Vertical stacked content */ }
.rlm-cluster{ /* Horizontally grouped items */ }
.rlm-switcher{ /* Responsive layout switcher */ }
.rlm-grid{ /* Grid container */ }
.rlm-grid-auto{ /* Auto-fitting grid */ }

/* Media molecule identifiers */
.rlm-media{ /* Media object pattern */ }
.rlm-media-img{ /* Media image container */ }
.rlm-media-body{ /* Media content area */ }
.rlm-avatar{ /* User avatar image */ }
.rlm-video-embed{ /* Video container */ }

/* Banner molecule identifiers */
.rlm-banner-block{ /* Hero/banner container */ }
.rlm-banner-title{ /* Banner headline */ }
.rlm-banner-text{ /* Banner description */ }
.rlm-banner-actions{ /* Banner CTA group */ }

/* Interactive molecule identifiers */
.rlm-tabs{ /* Tab container */ }
.rlm-tablist{ /* Tab navigation */ }
.rlm-tab{ /* Individual tab */ }
.rlm-tabpanel{ /* Tab content panel */ }
.rlm-accordion{ /* Accordion container */ }
.rlm-accordion-item{ /* Accordion section */ }
.rlm-accordion-button{ /* Accordion trigger */ }
.rlm-accordion-panel{ /* Accordion content */ }

/* Spec/comparison molecule identifiers */
.rlm-spec-chip{ /* Individual spec item */ }
.rlm-spec-icon{ /* Spec icon container */ }
.rlm-compare{ /* Comparison container */ }
.rlm-compare-head{ /* Comparison header */ }
.rlm-compare-row{ /* Comparison row */ }
.rlm-compare-cell{ /* Comparison cell */ }

/* Form molecule identifiers */
.rlm-form{ /* Form container */ }
.rlm-form-row{ /* Form row/group */ }
.rlm-form-label{ /* Form field label */ }

/* Modal molecule identifiers */
.rlm-overlay{ /* Background overlay */ }
.rlm-sheet{ /* Side drawer/sheet */ }
.rlm-sheet-header{ /* Sheet header */ }
.rlm-sheet-body{ /* Sheet content */ }
.rlm-sheet-footer{ /* Sheet footer */ }

/* Table molecule identifiers */
.rlm-table{ /* Table container */ }
.rlm-table-head{ /* Table header */ }
.rlm-table-cell{ /* Table cell */ }

/* Skeleton molecule identifiers */
.rlm-skeleton{ /* Skeleton loader */ }

/* ========== Brand Range Cards ========== */
/* Grid container for range cards */
.rlm-range-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: clamp(12px, calc(10.421px + 0.526vw), 22px);
  margin: 8px 0;
  align-items: stretch;
}

/* Alternative grid with explicit columns */
.rlm-range-grid--columns {
  grid-template-columns: repeat(var(--plp-columns, 4), minmax(0, 1fr));
  gap: var(--space-4);
}

/* Range card container */
.rlm-range-card {
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: var(--space-3);
  padding: var(--card-padding);
  border-radius: var(--radius-card);
  background: var(--card-bg);
  box-shadow: var(--card-shadow);
  border: none;
  color: inherit; /* lets parent define accent via currentColor */
  transition: transform var(--duration-100) var(--ease-standard), box-shadow var(--duration-100) var(--ease-standard);
}

.rlm-range-card:hover {
  /* transform: translateY(-2px); */
  box-shadow: var(--shadow-sm);
}

/* Active state for filtered/current range */
.rlm-range-card.active {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 1px var(--color-primary);
}

/* Range card media */
.rlm-range-card__media {
  aspect-ratio: var(--ratio-range-media);
  border-radius: var(--radius-card-media);
  background: var(--color-surface-alt);
  display: grid;
  place-items: center;
  overflow: hidden;
  position: relative;
}

.rlm-range-card__media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* Badges positioned on media */
.rlm-range-card__badges {
  position: absolute;
  top: var(--space-2);
  right: var(--space-2);
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  align-items: flex-end;
 
}

.rlm-range-card__badge {
  height: 28px;
  padding: 0 var(--space-2);
  display: inline-grid;
  place-items: center;
  border-radius: var(--radius-pill);
  font: var(--font-weight-medium) var(--fs-small)/1 var(--font-sans);
  color: currentColor;
  background: color-mix(in srgb, currentColor 12%, var(--card-bg));
  white-space: nowrap;

}

/* Range card title */
.rlm-range-card__title {
  margin: 0;
  font: var(--font-weight-semibold) var(--fs-h5)/var(--lh-tight) var(--font-sans);
  color: var(--color-heading);
}

/* Range card metadata */
.rlm-range-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  color: var(--color-text);
  font: var(--font-weight-medium) var(--fs-small)/1.2 var(--font-sans);
}

/* Range card actions (buttons) */
.rlm-range-card__actions {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.rlm-range-card__actions .button,
.rlm-range-card__actions .btn {
  /* flex: 1 1 auto;
  min-width: max-content; */
}

/* Disabled state for active range buttons */
.rlm-range-card__actions .is-disabled {
  opacity: 0.6;
  cursor: not-allowed;
  pointer-events: none;
}

/* Responsive adjustments */
@media (max-width: 640px) {
  .rlm-range-grid {
    grid-template-columns: 1fr;
  }

  .rlm-range-card__actions {
    flex-direction: column;
  }

  .rlm-range-card__actions .button,
  .rlm-range-card__actions .btn {
    width: 100%;
  }
}