/* ═══════════════════════════════════════════════════════════════
   IBRAHIM FASHION — Components
   Buttons, cards, badges, forms, alerts, accordions.
   Loaded after layout.css.
   ═══════════════════════════════════════════════════════════════ */


/* ─────────────────────────────────────────────────────────────
   1. BUTTONS
   ───────────────────────────────────────────────────────────── */
.if-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--if-s2);
  padding: 15px 34px;
  min-height: 44px; /* Phase Q: touch-target minimum */
  font-family: var(--if-font-body);
  font-size: var(--if-fs-sm);
  font-weight: var(--if-fw-medium);
  letter-spacing: var(--if-track-wide);
  text-transform: uppercase;
  line-height: 1;
  border-radius: var(--if-r-sm);
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: all var(--if-dur) var(--if-ease);
  position: relative;
  overflow: hidden;
}

.if-btn svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

/* Primary — charcoal, gold on hover */
.if-btn--primary {
  background: var(--if-charcoal);
  color: var(--if-white);
  border-color: var(--if-charcoal);
}

.if-btn--primary:hover {
  background: var(--if-gold);
  border-color: var(--if-gold);
  color: var(--if-white);
  color: var(--if-charcoal);
}

/* Gold — filled gold, deeper on hover */
.if-btn--gold {
  background: var(--if-gold);
  color: var(--if-white);
  border-color: var(--if-gold);
}

.if-btn--gold:hover {
  background: var(--if-gold-deep);
  border-color: var(--if-gold-deep);
  color: var(--if-white);
}

/* Outline — transparent with border */
.if-btn--outline {
  background: transparent;
  color: var(--if-charcoal);
  border-color: var(--if-charcoal);
}

.if-btn--outline:hover {
  background: var(--if-charcoal);
  color: var(--if-white);
}

/* Outline gold */
.if-btn--outline-gold {
  background: transparent;
  color: var(--if-gold-deep);
  border-color: var(--if-gold);
}

.if-btn--outline-gold:hover {
  background: var(--if-gold);
  color: var(--if-white);
}

/* Ghost — no border */
.if-btn--ghost {
  background: transparent;
  color: var(--if-ink);
  border-color: transparent;
  padding-inline: var(--if-s3);
}

.if-btn--ghost:hover {
  color: var(--if-gold-deep);
  background: var(--if-gold-wash);
}

/* White — for use on dark backgrounds */
.if-btn--white {
  background: var(--if-white);
  color: var(--if-charcoal);
  border-color: var(--if-white);
}

.if-btn--white:hover {
  background: var(--if-gold);
  color: var(--if-white);
  border-color: var(--if-gold);
}

/* Sizes */
.if-btn--sm {
  padding: 10px 20px;
  font-size: var(--if-fs-xs);
}

.if-btn--lg {
  padding: 18px 44px;
  font-size: var(--if-fs-body);
}

.if-btn--full {
  width: 100%;
}

/* Icon-only button */
.if-icon-btn {
  width: 44px;
  height: 44px;
  padding: 0;
  display: inline-grid;
  place-items: center;
  border-radius: var(--if-r-pill);
  background: transparent;
  color: var(--if-ink);
  transition: all var(--if-dur-fast) var(--if-ease);
}

.if-icon-btn svg {
  width: 20px;
  height: 20px;
}

.if-icon-btn:hover {
  background: var(--if-gold-wash);
  color: var(--if-gold-deep);
}

/* Button group */
.if-btn-group {
  display: flex;
  gap: var(--if-s3);
  flex-wrap: wrap;
}


/* ─────────────────────────────────────────────────────────────
   2. BADGES
   ───────────────────────────────────────────────────────────── */
.if-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 5px 10px;
  font-family: var(--if-font-body);
  font-size: var(--if-fs-xxs);
  font-weight: var(--if-fw-semi);
  letter-spacing: var(--if-track-wider);
  text-transform: uppercase;
  line-height: 1;
  color: var(--if-white);
  background: var(--if-charcoal);
  border-radius: var(--if-r-xs);
  white-space: nowrap;
}

.if-badge--new        { background: var(--if-gold); }
.if-badge--sale       { background: var(--if-sale); }
.if-badge--low        { background: var(--if-gold-deep); }
.if-badge--best       { background: var(--if-charcoal); }
.if-badge--restock    { background: var(--if-success); }
.if-badge--premium    { background: linear-gradient(135deg, var(--if-gold), var(--if-gold-deep)); }
.if-badge--wholesale  { background: var(--if-charcoal); border: 1px solid var(--if-gold); color: var(--if-gold); }

/* Soft variant — for labels on light backgrounds */
.if-badge--soft {
  background: var(--if-gold-wash);
  color: var(--if-gold-deep);
}


/* ─────────────────────────────────────────────────────────────
   3. PRODUCT CARD
   ───────────────────────────────────────────────────────────── */
.if-product-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: transparent;
}

.if-product-card__media {
  position: relative;
  aspect-ratio: var(--if-product-ratio);
  overflow: hidden;
  border-radius: var(--if-r-sm);
  background: linear-gradient(150deg, var(--if-ivory), var(--if-champagne));
}

.if-product-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--if-dur-slow) var(--if-ease),
              opacity var(--if-dur) var(--if-ease);
}

/* Secondary image on hover */
.if-product-card__media img + img {
  position: absolute;
  inset: 0;
  opacity: 0;
}

.if-product-card:hover .if-product-card__media img + img {
  opacity: 1;
}

.if-product-card:hover .if-product-card__media img:first-child {
  transform: scale(1.04);
}

/* Badges stack — top left */
.if-product-card__badges {
  position: absolute;
  top: var(--if-s3);
  left: var(--if-s3);
  z-index: 3;
  display: flex;
  flex-direction: column;
  gap: var(--if-s1);
  align-items: flex-start;
}

/* Body */
.if-product-card__body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-top: var(--if-s4);
  flex: 1;
}

.if-product-card__cat {
  font-size: var(--if-fs-xxs);
  letter-spacing: var(--if-track-wider);
  text-transform: uppercase;
  color: var(--if-muted);
}

.if-product-card__title {
  font-family: var(--if-font-display);
  font-size: 1.1rem;
  font-weight: var(--if-fw-medium);
  line-height: var(--if-lh-snug);
  color: var(--if-charcoal);
  margin: 0;
}

.if-product-card__title a {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  color: inherit;
  transition: color var(--if-dur-fast) var(--if-ease);
}

.if-product-card__title a:hover {
  color: var(--if-gold-deep);
}

.if-product-card__set {
  font-size: var(--if-fs-xs);
  letter-spacing: 0.04em;
  color: var(--if-gold-deep);
  font-weight: var(--if-fw-medium);
}

.if-product-card__price {
  margin-top: auto;
  padding-top: var(--if-s2);
  font-size: 1.05rem;
  font-weight: var(--if-fw-medium);
  color: var(--if-charcoal);
  font-variant-numeric: tabular-nums;
  display: flex;
  align-items: baseline;
  gap: var(--if-s2);
  flex-wrap: wrap;
}

.if-product-card__price del {
  font-size: var(--if-fs-sm);
  font-weight: var(--if-fw-regular);
  color: var(--if-muted);
  text-decoration: line-through;
}

.if-product-card__price ins {
  text-decoration: none;
  color: var(--if-sale);
}

.if-product-card__unit {
  font-size: var(--if-fs-xs);
  color: var(--if-muted);
  font-weight: var(--if-fw-regular);
}

.if-product-card__stock {
  font-size: var(--if-fs-xs);
  color: var(--if-success);
  display: flex;
  align-items: center;
  gap: 6px;
}

.if-product-card__stock::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

.if-product-card__stock--low {
  color: var(--if-warn);
}

.if-product-card__stock--out {
  color: var(--if-sale);
}

/* Add to cart — appears on hover on desktop */
.if-product-card__actions {
  margin-top: auto;
  padding-top: var(--if-s3);
  opacity: 0;
  transform: translateY(6px);
  transition: all var(--if-dur) var(--if-ease);
}

.if-product-card:hover .if-product-card__actions,
.if-product-card:focus-within .if-product-card__actions {
  opacity: 1;
  transform: translateY(0);
}

@media (hover: none) {
  .if-product-card__actions {
    opacity: 1;
    transform: none;
  }
}


/* ─────────────────────────────────────────────────────────────
   4. CATEGORY CARD
   ───────────────────────────────────────────────────────────── */
.if-category-card {
  position: relative;
  display: flex;
  align-items: flex-end;
  aspect-ratio: 3 / 4;
  padding: var(--if-s5);
  border-radius: var(--if-r-sm);
  overflow: hidden;
  background: linear-gradient(160deg, var(--if-linen), var(--if-champagne));
  transition: transform var(--if-dur) var(--if-ease);
}

.if-category-card:hover {
  transform: translateY(-6px);
}

.if-category-card__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.if-category-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--if-dur-slower) var(--if-ease);
}

.if-category-card:hover .if-category-card__media img {
  transform: scale(1.05);
}

.if-category-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    to top,
    rgba(28, 27, 25, 0.88) 0%,
    rgba(28, 27, 25, 0.74) 28%,
    rgba(28, 27, 25, 0.42) 52%,
    rgba(28, 27, 25, 0.12) 74%,
    rgba(28, 27, 25, 0) 92%
  );
}

.if-category-card__body {
  position: relative;
  z-index: 2;
  color: var(--if-white);
}

.if-category-card__eyebrow {
  display: block;
  font-size: var(--if-fs-xxs);
  letter-spacing: var(--if-track-wider);
  text-transform: uppercase;
  color: var(--if-gold-soft);
  margin-bottom: 6px;
}

.if-category-card__title {
  font-family: var(--if-font-display);
  font-size: 1.35rem;
  font-weight: var(--if-fw-medium);
  color: var(--if-white);
  margin: 0;
}

.if-category-card__desc {
  font-size: var(--if-fs-sm);
  margin-top: 6px;
  color: rgba(255, 255, 255, 0.85);
  max-width: 30ch;
}

.if-category-card__cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: var(--if-s3);
  font-size: var(--if-fs-xs);
  letter-spacing: var(--if-track-wide);
  text-transform: uppercase;
  color: var(--if-gold-soft);
  font-weight: var(--if-fw-medium);
}

.if-category-card__cta::after {
  content: "→";
  transition: transform var(--if-dur) var(--if-ease);
}

.if-category-card:hover .if-category-card__cta::after {
  transform: translateX(4px);
}


/* ─────────────────────────────────────────────────────────────
   5. VALUE / TRUST CARD
   ───────────────────────────────────────────────────────────── */
.if-value-card {
  text-align: center;
  padding: var(--if-s6) var(--if-s5);
}

.if-value-card__icon {
  width: 48px;
  height: 48px;
  margin: 0 auto var(--if-s4);
  border: 1px solid var(--if-gold);
  border-radius: var(--if-r-pill);
  display: grid;
  place-items: center;
  color: var(--if-gold-deep);
  font-family: var(--if-font-display);
  font-size: 1.15rem;
  font-weight: var(--if-fw-medium);
}

.if-value-card__icon svg {
  width: 20px;
  height: 20px;
}

.if-value-card h3 {
  font-size: var(--if-fs-h4);
  margin-bottom: var(--if-s2);
}

.if-value-card p {
  font-size: var(--if-fs-sm);
  color: var(--if-muted);
  max-width: 32ch;
  margin-inline: auto;
}


/* ─────────────────────────────────────────────────────────────
   6. FORMS
   ───────────────────────────────────────────────────────────── */
.if-form {
  display: grid;
  gap: var(--if-s5);
}

.if-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--if-s5);
}

.if-form-row--3 {
  grid-template-columns: repeat(3, 1fr);
}

.if-input,
.if-select,
.if-textarea {
  width: 100%;
  padding: 14px 16px;
  font-family: var(--if-font-body);
  font-size: var(--if-fs-body);
  color: var(--if-ink);
  background: var(--if-white);
  border: 1px solid var(--if-line);
  border-radius: var(--if-r-sm);
  transition: border-color var(--if-dur-fast) var(--if-ease),
              box-shadow var(--if-dur-fast) var(--if-ease);
}

.if-input:focus,
.if-select:focus,
.if-textarea:focus {
  border-color: var(--if-gold);
  box-shadow: 0 0 0 3px rgba(198, 161, 91, 0.15);
  outline: none;
}

.if-textarea {
  min-height: 140px;
  resize: vertical;
}

/* Input with icon */
.if-input-group {
  position: relative;
}

.if-input-group svg {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  color: var(--if-muted);
  pointer-events: none;
}

.if-input-group .if-input {
  padding-left: 46px;
}

/* Checkbox / Radio */
.if-check {
  display: flex;
  align-items: flex-start;
  gap: var(--if-s3);
  cursor: pointer;
  font-size: var(--if-fs-sm);
  color: var(--if-body);
  line-height: var(--if-lh-normal);
}

.if-check input {
  margin-top: 3px;
  flex-shrink: 0;
}

@media (max-width: 767px) {
  .if-form-row,
  .if-form-row--3 {
    grid-template-columns: 1fr;
  }
}


/* ─────────────────────────────────────────────────────────────
   7. ALERTS / NOTICES
   ───────────────────────────────────────────────────────────── */
.if-alert {
  display: flex;
  align-items: flex-start;
  gap: var(--if-s3);
  padding: var(--if-s4) var(--if-s5);
  border-left: 3px solid var(--if-gold);
  background: var(--if-gold-wash);
  color: var(--if-ink);
  font-size: var(--if-fs-sm);
  border-radius: var(--if-r-sm);
}

.if-alert svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  margin-top: 2px;
  color: var(--if-gold-deep);
}

.if-alert--success {
  border-left-color: var(--if-success);
  background: #F1F7F3;
}

.if-alert--success svg {
  color: var(--if-success);
}

.if-alert--error {
  border-left-color: var(--if-error);
  background: #FBF2F2;
}

.if-alert--error svg {
  color: var(--if-error);
}

.if-alert--info {
  border-left-color: var(--if-info);
  background: #F1F5F9;
}

.if-alert--info svg {
  color: var(--if-info);
}


/* ─────────────────────────────────────────────────────────────
   8. QUANTITY SELECTOR
   For product page and cart.
   ───────────────────────────────────────────────────────────── */
.if-qty {
  display: inline-flex;
  align-items: stretch;
  border: 1px solid var(--if-line);
  border-radius: var(--if-r-sm);
  overflow: hidden;
  height: 48px;
}

.if-qty button {
  width: 44px;
  display: grid;
  place-items: center;
  color: var(--if-ink);
  font-size: 1.1rem;
  transition: background var(--if-dur-fast) var(--if-ease);
}

.if-qty button:hover {
  background: var(--if-gold-wash);
}

.if-qty button:disabled {
  color: var(--if-faint);
  cursor: not-allowed;
  background: transparent;
}

.if-qty input {
  width: 60px;
  padding: 0;
  text-align: center;
  border: 0;
  background: transparent;
  font-size: var(--if-fs-body);
  font-weight: var(--if-fw-medium);
  font-variant-numeric: tabular-nums;
  -moz-appearance: textfield;
}

.if-qty input::-webkit-outer-spin-button,
.if-qty input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.if-qty input:focus {
  outline: none;
}

/* Wholesale label next to quantity */
.if-qty-label {
  display: inline-flex;
  align-items: center;
  gap: var(--if-s2);
  font-size: var(--if-fs-sm);
  color: var(--if-muted);
  letter-spacing: 0.03em;
}


/* ─────────────────────────────────────────────────────────────
   9. BREADCRUMBS
   ───────────────────────────────────────────────────────────── */
.if-breadcrumbs {
  padding-block: var(--if-s4);
  font-size: var(--if-fs-xs);
  color: var(--if-muted);
}

.if-breadcrumbs ol {
  display: flex;
  flex-wrap: wrap;
  gap: var(--if-s2);
  align-items: center;
}

.if-breadcrumbs li {
  display: inline-flex;
  align-items: center;
  gap: var(--if-s2);
}

.if-breadcrumbs li + li::before {
  content: "/";
  color: var(--if-line-strong);
}

.if-breadcrumbs a {
  color: var(--if-muted);
  transition: color var(--if-dur-fast) var(--if-ease);
}

.if-breadcrumbs a:hover {
  color: var(--if-gold-deep);
}

.if-breadcrumbs [aria-current="page"] {
  color: var(--if-ink);
  font-weight: var(--if-fw-medium);
}


/* ─────────────────────────────────────────────────────────────
   10. PAGINATION
   ───────────────────────────────────────────────────────────── */
.if-pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--if-s2);
  padding-block: var(--if-s7);
}

.if-pagination a,
.if-pagination span {
  display: grid;
  place-items: center;
  min-width: 40px;
  height: 40px;
  padding: 0 var(--if-s3);
  font-size: var(--if-fs-sm);
  font-weight: var(--if-fw-medium);
  color: var(--if-ink);
  border: 1px solid var(--if-line);
  border-radius: var(--if-r-sm);
  transition: all var(--if-dur-fast) var(--if-ease);
  font-variant-numeric: tabular-nums;
}

.if-pagination a:hover {
  border-color: var(--if-gold);
  color: var(--if-gold-deep);
}

.if-pagination .current {
  background: var(--if-charcoal);
  border-color: var(--if-charcoal);
  color: var(--if-white);
}

.if-pagination .dots {
  border: 0;
  color: var(--if-muted);
}


/* ─────────────────────────────────────────────────────────────
   11. ACCORDION
   Used for FAQ, product tabs, filters.
   ───────────────────────────────────────────────────────────── */
.if-accordion {
  border-top: 1px solid var(--if-line);
}

.if-accordion__item {
  border-bottom: 1px solid var(--if-line);
}

.if-accordion__trigger {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--if-s4);
  padding: var(--if-s5) 0;
  font-family: var(--if-font-body);
  font-size: var(--if-fs-body-lg);
  font-weight: var(--if-fw-medium);
  color: var(--if-charcoal);
  text-align: left;
  text-transform: none;
  letter-spacing: 0;
  transition: color var(--if-dur-fast) var(--if-ease);
}

.if-accordion__trigger:hover {
  color: var(--if-gold-deep);
}

.if-accordion__icon {
  position: relative;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.if-accordion__icon::before,
.if-accordion__icon::after {
  content: "";
  position: absolute;
  inset: 50% 0 auto 0;
  height: 1px;
  background: currentColor;
  transition: transform var(--if-dur) var(--if-ease);
}

.if-accordion__icon::after {
  transform: rotate(90deg);
}

.if-accordion__trigger[aria-expanded="true"] .if-accordion__icon::after {
  transform: rotate(0deg);
}

.if-accordion__panel {
  overflow: hidden;
  max-height: 0;
  transition: max-height var(--if-dur-slow) var(--if-ease);
}

.if-accordion__panel-inner {
  padding-bottom: var(--if-s5);
  color: var(--if-body);
  line-height: var(--if-lh-relaxed);
}

.if-accordion__trigger[aria-expanded="true"] + .if-accordion__panel {
  max-height: 800px;
}


/* ─────────────────────────────────────────────────────────────
   12. TABS
   ───────────────────────────────────────────────────────────── */
.if-tabs {
  display: flex;
  gap: var(--if-s6);
  border-bottom: 1px solid var(--if-line);
  margin-bottom: var(--if-s6);
  overflow-x: auto;
  scrollbar-width: none;
}

.if-tabs::-webkit-scrollbar {
  display: none;
}

.if-tab {
  padding: var(--if-s3) 0;
  font-size: var(--if-fs-sm);
  letter-spacing: var(--if-track-wide);
  text-transform: uppercase;
  color: var(--if-muted);
  white-space: nowrap;
  position: relative;
  transition: color var(--if-dur-fast) var(--if-ease);
}

.if-tab::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 100%;
  height: 2px;
  background: transparent;
  transition: background var(--if-dur-fast) var(--if-ease);
}

.if-tab:hover {
  color: var(--if-ink);
}

.if-tab.is-active {
  color: var(--if-charcoal);
  font-weight: var(--if-fw-medium);
}

.if-tab.is-active::after {
  background: var(--if-gold);
}


/* ─────────────────────────────────────────────────────────────
   13. RATING STARS
   ───────────────────────────────────────────────────────────── */
.if-rating {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  color: var(--if-gold);
  font-size: var(--if-fs-sm);
}

.if-rating__star {
  width: 14px;
  height: 14px;
}

.if-rating__star svg {
  fill: currentColor;
}

.if-rating__star--empty {
  color: var(--if-line-strong);
}

.if-rating__count {
  margin-left: var(--if-s2);
  color: var(--if-muted);
  font-size: var(--if-fs-xs);
}


/* ─────────────────────────────────────────────────────────────
   14. EMPTY STATE
   ───────────────────────────────────────────────────────────── */
.if-empty {
  text-align: center;
  padding: clamp(48px, 8vw, 96px) var(--if-s4);
  max-width: 480px;
  margin-inline: auto;
}

.if-empty__icon {
  width: 72px;
  height: 72px;
  margin: 0 auto var(--if-s5);
  border: 1px solid var(--if-line);
  border-radius: var(--if-r-pill);
  display: grid;
  place-items: center;
  color: var(--if-gold);
}

.if-empty__icon svg {
  width: 28px;
  height: 28px;
}

.if-empty h3 {
  margin-bottom: var(--if-s3);
}

.if-empty p {
  color: var(--if-muted);
  margin-bottom: var(--if-s5);
}


/* ─────────────────────────────────────────────────────────────
   15. LOADING SKELETON
   Shown while content loads. Never leave blank space.
   ───────────────────────────────────────────────────────────── */
.if-skeleton {
  background: linear-gradient(
    90deg,
    var(--if-line-soft) 25%,
    var(--if-line) 50%,
    var(--if-line-soft) 75%
  );
  background-size: 200% 100%;
  animation: if-shimmer 1.6s infinite linear;
  border-radius: var(--if-r-sm);
}

@keyframes if-shimmer {
  from { background-position: 200% 0; }
  to   { background-position: -200% 0; }
}

.if-skeleton--text {
  height: 14px;
  margin-bottom: var(--if-s2);
}

.if-skeleton--title {
  height: 20px;
  width: 70%;
  margin-bottom: var(--if-s3);
}

.if-skeleton--image {
  aspect-ratio: var(--if-product-ratio);
  width: 100%;
}


/* ─────────────────────────────────────────────────────────────
   16. TAG / PILL
   Small labels, filter chips.
   ───────────────────────────────────────────────────────────── */
.if-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  font-size: var(--if-fs-xs);
  font-weight: var(--if-fw-medium);
  letter-spacing: 0.04em;
  color: var(--if-ink);
  background: var(--if-ivory);
  border: 1px solid var(--if-line);
  border-radius: var(--if-r-pill);
  transition: all var(--if-dur-fast) var(--if-ease);
  cursor: pointer;
}

.if-tag:hover {
  border-color: var(--if-gold);
  color: var(--if-gold-deep);
}

.if-tag.is-active {
  background: var(--if-charcoal);
  border-color: var(--if-charcoal);
  color: var(--if-white);
}

.if-tag__remove {
  width: 14px;
  height: 14px;
  display: grid;
  place-items: center;
  color: inherit;
  opacity: 0.7;
}

.if-tag__remove:hover {
  opacity: 1;
}


/* ─────────────────────────────────────────────────────────────
   17. TOAST NOTIFICATION
   For "Added to cart", "Removed from wishlist" etc.
   ───────────────────────────────────────────────────────────── */
.if-toast {
  position: fixed;
  bottom: var(--if-s5);
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  z-index: var(--if-z-toast);
  display: flex;
  align-items: center;
  gap: var(--if-s3);
  padding: 14px 22px;
  background: var(--if-charcoal);
  color: var(--if-white);
  font-size: var(--if-fs-sm);
  border-radius: var(--if-r-sm);
  box-shadow: var(--if-shadow-lg);
  opacity: 0;
  pointer-events: none;
  transition: all var(--if-dur) var(--if-ease);
  max-width: calc(100vw - 32px);
}

.if-toast.is-visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
}

.if-toast svg {
  width: 18px;
  height: 18px;
  color: var(--if-gold);
  flex-shrink: 0;
}

.if-toast--success svg { color: #6EDB9B; }
.if-toast--error svg   { color: #F19A9A; }


/* ─────────────────────────────────────────────────────────────
   18. TITLE RULE — small gold divider under section titles
   ───────────────────────────────────────────────────────────── */
.if-rule-gold {
  display: block;
  width: 56px;
  height: 2px;
  background: var(--if-gold);
  margin: var(--if-s4) 0;
}

.if-rule-gold--center {
  margin-inline: auto;
}


/* ─────────────────────────────────────────────────────────────
   19. LINK ARROW
   Elegant "read more →" pattern.
   ───────────────────────────────────────────────────────────── */
.if-link-arrow {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  gap: var(--if-s2);
  font-size: var(--if-fs-sm);
  letter-spacing: var(--if-track-wide);
  text-transform: uppercase;
  font-weight: var(--if-fw-medium);
  color: var(--if-charcoal);
  transition: color var(--if-dur-fast) var(--if-ease);
}

.if-link-arrow::after {
  content: "→";
  transition: transform var(--if-dur) var(--if-ease);
}

.if-link-arrow:hover {
  color: var(--if-gold-deep);
}

.if-link-arrow:hover::after {
  transform: translateX(6px);
}


/* ─────────────────────────────────────────────────────────────
   20. IMAGE HOVER ZOOM
   Wrap any image to get subtle zoom on hover.
   ───────────────────────────────────────────────────────────── */
.if-zoom {
  overflow: hidden;
  border-radius: var(--if-r-sm);
  display: block;
}

.if-zoom img {
  transition: transform var(--if-dur-slower) var(--if-ease);
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.if-zoom:hover img {
  transform: scale(1.05);
}


/* ─────────────────────────────────────────────────────────────
   21. RESPONSIVE ADJUSTMENTS
   ───────────────────────────────────────────────────────────── */
@media (max-width: 767px) {

  .if-btn {
    padding: 13px 24px;
    font-size: var(--if-fs-xs);
  }

  .if-btn--lg {
    padding: 15px 30px;
    font-size: var(--if-fs-sm);
  }

  .if-product-card__title {
    font-size: 1rem;
  }

  .if-product-card__price {
    font-size: 0.95rem;
  }

  .if-value-card {
    padding: var(--if-s5) var(--if-s4);
  }

  .if-accordion__trigger {
    font-size: var(--if-fs-body);
    padding: var(--if-s4) 0;
  }

  .if-pagination a,
  .if-pagination span {
    min-width: 36px;
    height: 36px;
    padding: 0 var(--if-s2);
  }

  .if-toast {
    font-size: var(--if-fs-xs);
    padding: 12px 18px;
  }
}

/* ═══════════════════════════════════════════════════════════════
   MARQUEE - image items
   ═══════════════════════════════════════════════════════════════ */
.if-marquee__item--image {
  display: inline-flex;
  align-items: center;
  padding: 0;
}

.if-marquee__item--image::after {
  content: none;
}

.if-marquee__image {
  display: block;
  height: 60px;
  width: auto;
  max-width: none;
  object-fit: contain;
  filter: brightness(1.1);
  opacity: 0.9;
  transition: opacity 0.3s ease;
}

.if-marquee:hover .if-marquee__image {
  opacity: 1;
}

.if-marquee--light .if-marquee__image {
  filter: brightness(1) contrast(1.05);
  opacity: 0.85;
}


/* ═══════════════════════════════════════════════════════════════
   HERO SECTION - proper layout
   ═══════════════════════════════════════════════════════════════ */
.if-hero {
  background: var(--if-ivory);
  padding-block: clamp(40px, 5vw, 72px);
  overflow: hidden;
}

.if-hero__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
  min-height: 520px;
}

.if-hero__copy {
  max-width: 560px;
}

.if-hero__title {
  font-family: var(--if-font-display);
  font-size: clamp(2rem, 4vw, 3.4rem);
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: -0.01em;
  color: var(--if-charcoal);
  margin: 0 0 20px 0;
}

.if-hero__text {
  font-size: clamp(1rem, 1.2vw, 1.1rem);
  line-height: 1.6;
  color: var(--if-body);
  margin-bottom: 32px;
  max-width: 48ch;
}

.if-hero__actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.if-hero__media {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: 4px;
  background: linear-gradient(150deg, var(--if-champagne), var(--if-linen));
}

.if-hero__media.has-image {
  background: none;
}

.if-hero__media img,
.if-hero__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  border-radius: 4px;
}

.if-hero__media .if-ken-burns {
  animation: if-hero-zoom 24s ease-in-out infinite alternate;
  will-change: transform;
}

@keyframes if-hero-zoom {
  0%   { transform: scale(1)    translate(0, 0); }
  100% { transform: scale(1.06) translate(-1%, -1%); }
}

.if-hero__placeholder-label {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--if-gold-deep);
  opacity: 0.6;
  padding: 24px;
  text-align: center;
}

/* Mobile: stack vertically */
@media (max-width: 1023px) {
  .if-hero__inner {
    grid-template-columns: 1fr;
    min-height: auto;
    gap: 40px;
  }

  .if-hero__copy {
    max-width: 100%;
  }

  .if-hero__media {
    aspect-ratio: 4 / 3;
  }
}

@media (max-width: 640px) {
  .if-hero {
    padding-block: 32px;
  }

  .if-hero__title {
    font-size: clamp(1.6rem, 6vw, 2.2rem);
  }

  .if-hero__actions .if-btn {
    width: 100%;
  }
}


/* ═══════════════════════════════════════════════════════════════
   HERO SLIDER - full-width premium
   ═══════════════════════════════════════════════════════════════ */
.if-hero-slider {
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  min-height: clamp(520px, 78vh, 820px);
  background: #1C1B19;
  overflow: hidden;
  display: flex;
  align-items: center;
  isolation: isolate;
}

/* ── Slides ── */
.if-hero-slider__slides {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.if-hero-slider__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1.4s cubic-bezier(0.22, 0.61, 0.36, 1);
  will-change: opacity;
}

.if-hero-slider__slide.is-active {
  opacity: 1;
}

.if-hero-slider__slide img,
.if-hero-slider__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* Slow zoom on active slide */
.if-hero-slider__slide.is-active .if-hero-slider__img {
  animation: if-hero-zoom 12s ease-out forwards;
}

@keyframes if-hero-zoom {
  from { transform: scale(1); }
  to   { transform: scale(1.08); }
}

.if-hero-slider__slide--placeholder {
  background: linear-gradient(140deg, var(--if-champagne), var(--if-linen) 45%, var(--if-gold-soft));
}

/* ── Overlay ── */
.if-hero-slider__overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  background:
    linear-gradient(
      100deg,
      rgba(28, 27, 25, calc(var(--if-overlay-alpha, 0.45) + 0.32)) 0%,
      rgba(28, 27, 25, calc(var(--if-overlay-alpha, 0.45) + 0.10)) 48%,
      rgba(28, 27, 25, calc(var(--if-overlay-alpha, 0.45) * 0.55)) 100%
    ),
    linear-gradient(
      to top,
      rgba(28, 27, 25, 0.34) 0%,
      rgba(28, 27, 25, 0.12) 38%,
      rgba(28, 27, 25, 0) 62%
    );
  pointer-events: none;
}

/* ── Content ── */
.if-hero-slider__content {
  position: relative;
  z-index: 3;
  width: 100%;
  padding-block: 80px;
  padding-inline: var(--if-gutter);
}

.if-hero-slider__copy {
  max-width: 640px;
  animation: if-hero-copy-in 1.1s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}

@keyframes if-hero-copy-in {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: translateY(0); }
}

.if-hero-slider__eyebrow {
  font-family: var(--if-font-body);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--if-gold-soft);
  margin: 0 0 16px 0;
}

.if-hero-slider__rule {
  display: block;
  width: 56px;
  height: 2px;
  background: var(--if-gold);
  margin-bottom: 20px;
}

.if-hero-slider__title {
  font-family: var(--if-font-display);
  font-size: clamp(2rem, 4.2vw, 3.6rem);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: #fff;
  margin: 0 0 20px 0;
  text-shadow: 0 2px 20px rgba(0, 0, 0, 0.55), 0 1px 3px rgba(0, 0, 0, 0.4);
}

.if-hero-slider__text {
  font-family: var(--if-font-body);
  font-size: clamp(1rem, 1.2vw, 1.15rem);
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.9);
  margin: 0 0 32px 0;
  max-width: 50ch;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.3);
}

.if-hero-slider__actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

/* Outline light button (for dark bg) */
.if-btn--outline-light {
  background: transparent;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.55);
}

.if-btn--outline-light:hover {
  background: #fff;
  color: var(--if-charcoal);
  border-color: #fff;
}

/* ── Dots ── */
.if-hero-slider__dots {
  position: absolute;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 4;
  display: flex;
  gap: 12px;
  padding: 8px 16px;
  background: rgba(28, 27, 25, 0.3);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: 999px;
}

.if-hero-slider__dot {
  position: relative;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.4);
  border: 0;
  padding: 0;
}

/* Phase Q: 44px hit area without changing layout (clicks on ::before hit the button). */
.if-hero-slider__dot::before {
  content: "";
  position: absolute;
  inset: -18px;
}
  cursor: pointer;
  transition: all 0.35s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.if-hero-slider__dot:hover {
  background: rgba(255, 255, 255, 0.7);
}

.if-hero-slider__dot.is-active {
  width: 28px;
  background: var(--if-gold);
}

/* ── Responsive ── */
@media (max-width: 1023px) {
  .if-hero-slider {
    min-height: clamp(480px, 70vh, 640px);
  }

  .if-hero-slider__content {
    padding-block: 60px;
    padding-inline: var(--if-gutter);
  }

  .if-hero-slider__copy {
    max-width: 100%;
  }
}

@media (max-width: 640px) {
  .if-hero-slider {
    min-height: 520px;
  }

  .if-hero-slider__overlay {
    background: linear-gradient(
      to bottom,
      rgba(28, 27, 25, 0.25) 0%,
      rgba(28, 27, 25, calc(var(--if-overlay-alpha, 0.5) + 0.25)) 100%
    );
  }

  .if-hero-slider__title {
    font-size: clamp(1.5rem, 6vw, 2.1rem);
  }

  .if-hero-slider__text {
    font-size: 0.95rem;
  }

  .if-hero-slider__actions {
    width: 100%;
  }

  .if-hero-slider__actions .if-btn {
    flex: 1;
    min-width: 140px;
  }

  .if-hero-slider__dots {
    bottom: 20px;
  }
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce) {
  .if-hero-slider__slide.is-active .if-hero-slider__img {
    animation: none;
  }
  .if-hero-slider__copy {
    animation: none;
  }
}


/* ═══════════════════════════════════════════════════════════════
   HERO SLIDER - SMOOTH CROSSFADE FIX
   Overrides earlier rules. Continuous zoom (no restart).
   ═══════════════════════════════════════════════════════════════ */

/* Persistent zoom on ALL slides from page load.
   Never restarts, so no visible "reset" during transitions. */
.if-hero-slider__slide img,
.if-hero-slider__img {
  animation: if-hero-continuous-zoom 22s ease-in-out infinite alternate !important;
  transform-origin: center center;
  will-change: transform, opacity;
}

@keyframes if-hero-continuous-zoom {
  0%   { transform: scale(1); }
  100% { transform: scale(1.06); }
}

/* Remove the old rule that only ran on active slide */
.if-hero-slider__slide.is-active .if-hero-slider__img {
  animation-name: if-hero-continuous-zoom !important;
}

/* Slower, silkier crossfade with proper easing.
   Both slides remain visible during fade so no white flash. */
.if-hero-slider__slide {
  opacity: 0;
  transition: opacity 1.8s cubic-bezier(0.45, 0, 0.15, 1);
  will-change: opacity;
}

.if-hero-slider__slide.is-active {
  opacity: 1;
}

/* Incoming slide sits above outgoing — the fade overlaps cleanly */
.if-hero-slider__slide.is-active {
  z-index: 2;
}

.if-hero-slider__slide:not(.is-active) {
  z-index: 1;
}

/* Slight scale-in on incoming image only via filter, no transform reset */
.if-hero-slider__slide.is-active img {
  filter: brightness(1);
  transition: filter 1.8s ease;
}

/* Reduced motion: kill zoom, keep simple fade */
@media (prefers-reduced-motion: reduce) {
  .if-hero-slider__slide img,
  .if-hero-slider__img {
    animation: none !important;
  }
  .if-hero-slider__slide {
    transition: opacity 0.6s ease;
  }
}


/* ═══════════════════════════════════════════════════════════════
   PRODUCT CARD GRID - GLOBAL FIX (all pages)
   Homepage sections, shop, search, related, archive — everywhere.
   ═══════════════════════════════════════════════════════════════ */

/* Base rule — all product grids */
.if-grid--products,
ul.products,
.if-shop-products,
.woocommerce ul.products,
.woocommerce-page ul.products {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 32px 20px !important;
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

.if-grid--products > *,
ul.products > li,
.if-shop-products > *,
.woocommerce ul.products > li {
  margin: 0 !important;
  width: 100% !important;
  float: none !important;
  min-width: 0 !important;
}

/* Product card base */
.if-product-card {
  width: 100% !important;
  min-width: 0 !important;
}

.if-product-card__media {
  width: 100% !important;
  aspect-ratio: 3 / 4 !important;
  overflow: hidden !important;
}

.if-product-card__media img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

.if-product-card__body {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  padding-top: 14px !important;
  min-width: 0 !important;
}

.if-product-card__title {
  font-family: var(--if-font-display) !important;
  font-size: 1.1rem !important;
  font-weight: 500 !important;
  line-height: 1.25 !important;
  color: var(--if-charcoal) !important;
  margin: 0 !important;
  overflow-wrap: break-word !important;
  word-break: normal !important;
  white-space: normal !important;
}

.if-product-card__title a {
  color: inherit !important;
  text-decoration: none !important;
}

.if-product-card__title a:hover {
  color: var(--if-gold-deep) !important;
}

.if-product-card__set {
  font-size: 0.75rem !important;
  color: var(--if-gold-deep) !important;
  font-weight: 500 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.if-product-card__price {
  font-size: 1.05rem !important;
  font-weight: 500 !important;
  color: var(--if-charcoal) !important;
  font-variant-numeric: tabular-nums !important;
  margin-top: 4px !important;
  padding-top: 0 !important;
}

.if-product-card__stock {
  font-size: 0.75rem !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
}

.if-product-card__actions {
  margin-top: auto !important;
  padding-top: 12px !important;
  opacity: 1 !important;
  transform: none !important;
}

.if-product-card__actions .if-btn {
  width: 100% !important;
  font-size: 0.72rem !important;
  padding: 10px 18px !important;
}

/* ── RESPONSIVE ── */

/* Tablet (768-1023px) — 3 columns */
@media (min-width: 768px) and (max-width: 1023px) {
  .if-grid--products,
  ul.products,
  .if-shop-products {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 26px 16px !important;
  }
}

/* Small tablet (640-767px) — 2 columns */
@media (min-width: 640px) and (max-width: 767px) {
  .if-grid--products,
  ul.products,
  .if-shop-products {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 24px 14px !important;
  }
}

/* Mobile (< 640px) — 2 columns */
@media (max-width: 639px) {
  .if-grid--products,
  ul.products,
  .if-shop-products {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 20px 12px !important;
  }

  .if-product-card__title {
    font-size: 0.95rem !important;
    line-height: 1.3 !important;
  }

  .if-product-card__price {
    font-size: 0.9rem !important;
  }

  .if-product-card__set {
    font-size: 0.7rem !important;
  }

  .if-product-card__stock {
    font-size: 0.7rem !important;
  }

  .if-product-card__actions .if-btn {
    font-size: 0.68rem !important;
    padding: 9px 14px !important;
  }
}

/* Ensure no card breaks */
.if-product-card * {
  max-width: 100% !important;
  box-sizing: border-box !important;
}


/* ═══════════════════════════════════════════════════════════════
   TESTIMONIALS
   ═══════════════════════════════════════════════════════════════ */
.if-testimonials {
  background: var(--if-white);
  padding-block: clamp(48px, 6vw, 96px);
}

.if-testimonials__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}

.if-testimonial {
  padding: 32px 28px;
  background: var(--if-ivory);
  border-radius: 4px;
  border-left: 3px solid var(--if-gold);
  display: flex;
  flex-direction: column;
  gap: 16px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  min-width: 0;
}

.if-testimonial:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(28, 27, 25, 0.08);
}

.if-testimonial__stars {
  display: flex;
  gap: 3px;
}

.if-testimonial__star {
  width: 16px !important;
  height: 16px !important;
  max-width: 16px !important;
  max-height: 16px !important;
  min-width: 16px !important;
  min-height: 16px !important;
  flex: 0 0 16px !important;
  fill: var(--if-gold) !important;
  color: var(--if-gold) !important;
  display: inline-block !important;
}

.if-testimonial__star.is-empty {
  fill: var(--if-line-strong) !important;
  color: var(--if-line-strong) !important;
}

.if-testimonial__review {
  font-family: var(--if-font-display);
  font-size: 1.05rem;
  line-height: 1.5;
  color: var(--if-body);
  margin: 0;
  font-style: italic;
  flex: 1;
}

.if-testimonial__author {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-top: 16px;
  border-top: 1px solid var(--if-line);
}

.if-testimonial__avatar {
  width: 42px;
  height: 42px;
  border-radius: 999px;
  background: var(--if-charcoal);
  color: var(--if-gold);
  display: grid;
  place-items: center;
  font-family: var(--if-font-display);
  font-size: 1.15rem;
  font-weight: 600;
  flex-shrink: 0;
}

.if-testimonial__name {
  display: block;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--if-charcoal);
  line-height: 1.2;
}

.if-testimonial__city {
  display: block;
  font-size: 0.75rem;
  color: var(--if-muted);
  margin-top: 2px;
}

@media (max-width: 1023px) {
  .if-testimonials__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .if-testimonials__grid {
    grid-template-columns: 1fr;
  }
}


/* ═══════════════════════════════════════════════════════════════
   ORDER POPUP
   ═══════════════════════════════════════════════════════════════ */
.if-order-popup {
  position: fixed;
  bottom: 24px;
  left: 24px;
  z-index: 900;
  display: flex;
  align-items: center;
  gap: 14px;
  max-width: 380px;
  padding: 12px 40px 12px 12px;
  background: #fff;
  border: 1px solid var(--if-line);
  border-left: 3px solid var(--if-gold);
  border-radius: 4px;
  box-shadow: 0 12px 40px rgba(28, 27, 25, 0.14);
  transform: translateY(120%);
  opacity: 0;
  pointer-events: none;
  transition: transform 0.5s cubic-bezier(0.22, 0.61, 0.36, 1), opacity 0.4s ease;
  font-family: var(--if-font-body);
}

.if-order-popup.is-visible {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}

.if-order-popup__media {
  width: 52px;
  height: 52px;
  border-radius: 2px;
  overflow: hidden;
  flex-shrink: 0;
  background: var(--if-ivory);
}

.if-order-popup__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.if-order-popup__body {
  min-width: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.if-order-popup__title {
  font-size: 0.72rem;
  color: var(--if-muted);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-weight: 500;
}

.if-order-popup__product {
  font-family: var(--if-font-display);
  font-size: 0.98rem;
  font-weight: 500;
  color: var(--if-charcoal);
  text-decoration: none;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.if-order-popup__product:hover {
  color: var(--if-gold-deep);
}

.if-order-popup__time {
  font-size: 0.72rem;
  color: var(--if-success);
  font-weight: 500;
  margin-top: 2px;
}

.if-order-popup__close {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: transparent;
  color: var(--if-muted);
  font-size: 1.1rem;
  line-height: 1;
  border: 0;
  cursor: pointer;
  transition: background 0.2s ease;
}

.if-order-popup__close:hover {
  background: var(--if-ivory);
  color: var(--if-charcoal);
}

@media (max-width: 767px) {
  .if-order-popup {
    bottom: 16px;
    left: 12px;
    right: 12px;
    max-width: none;
  }
}


/* ═══════════════════════════════════════════════════════════════
   TRUST STRIP - site-wide
   ═══════════════════════════════════════════════════════════════ */
.if-trust {
  background: var(--if-ivory);
  border-top: 1px solid var(--if-line);
  border-bottom: 1px solid var(--if-line);
  padding-block: 40px;
}

.if-trust__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
}

.if-trust__item {
  display: flex;
  align-items: center;
  gap: 16px;
}

.if-trust__icon {
  width: 46px;
  height: 46px;
  flex-shrink: 0;
  border: 1px solid var(--if-gold);
  border-radius: 999px;
  display: grid;
  place-items: center;
  color: var(--if-gold-deep);
  background: #fff;
}

.if-trust__icon svg {
  width: 20px;
  height: 20px;
}

.if-trust__text strong {
  display: block;
  font-family: var(--if-font-body);
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--if-charcoal);
  letter-spacing: 0.02em;
  margin-bottom: 2px;
}

.if-trust__text span {
  display: block;
  font-size: 0.78rem;
  color: var(--if-muted);
}

@media (max-width: 1023px) {
  .if-trust__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
}

@media (max-width: 599px) {
  .if-trust { padding-block: 28px; }
  .if-trust__grid { grid-template-columns: 1fr; gap: 16px; }
}


/* ═══════════════════════════════════════════════════════════════
   FREE SHIPPING PROGRESS BAR
   ═══════════════════════════════════════════════════════════════ */
.if-ship-bar {
  margin-bottom: 24px;
  padding: 18px 22px;
  background: var(--if-gold-wash);
  border: 1px solid var(--if-line);
  border-left: 3px solid var(--if-gold);
  border-radius: 4px;
}

.if-ship-bar.is-unlocked {
  background: #F1F7F3;
  border-left-color: var(--if-success);
}

.if-ship-bar__message {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--if-ink);
  margin-bottom: 12px;
}

.if-ship-bar.is-unlocked .if-ship-bar__message {
  color: var(--if-success);
}

.if-ship-bar__message svg {
  flex-shrink: 0;
  color: var(--if-gold-deep);
}

.if-ship-bar.is-unlocked .if-ship-bar__message svg {
  color: var(--if-success);
}

.if-ship-bar__track {
  height: 6px;
  background: rgba(198, 161, 91, 0.2);
  border-radius: 999px;
  overflow: hidden;
  position: relative;
}

.if-ship-bar__fill {
  height: 100%;
  background: linear-gradient(90deg, var(--if-gold), var(--if-gold-deep));
  border-radius: 999px;
  transition: width 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.if-ship-bar.is-unlocked .if-ship-bar__track {
  background: rgba(47, 107, 79, 0.15);
}

.if-ship-bar.is-unlocked .if-ship-bar__fill {
  background: linear-gradient(90deg, var(--if-success), #3d8a63);
}

/* Trust strip inside cart/checkout should be full width & no border-top */
.woocommerce-cart .if-trust,
.woocommerce-checkout .if-trust {
  margin-top: 48px;
  border-radius: 4px;
}


/* ═══════════════════════════════════════════════════════════════
   MOBILE STICKY ADD TO CART
   ═══════════════════════════════════════════════════════════════ */
.if-sticky-atc {
  display: none;
}

@media (max-width: 767px) {
  .if-sticky-atc {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 800;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    padding-bottom: calc(10px + env(safe-area-inset-bottom, 0));
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-top: 1px solid var(--if-line);
    box-shadow: 0 -8px 24px rgba(28, 27, 25, 0.08);
    transform: translateY(120%);
    transition: transform 0.4s cubic-bezier(0.22, 0.61, 0.36, 1);
  }

  .if-sticky-atc.is-visible {
    transform: translateY(0);
  }

  .if-sticky-atc__img {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    border-radius: 2px;
    overflow: hidden;
    background: var(--if-ivory);
  }

  .if-sticky-atc__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  .if-sticky-atc__info {
    flex: 1;
    min-width: 0;
  }

  .if-sticky-atc__title {
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--if-charcoal);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.3;
  }

  .if-sticky-atc__price {
    font-size: 0.78rem;
    color: var(--if-gold-deep);
    font-weight: 500;
    margin-top: 2px;
  }

  .if-sticky-atc__btn {
    flex-shrink: 0;
    padding: 12px 20px;
    min-height: 44px;
    background: var(--if-charcoal);
    color: #fff;
    border: 0;
    border-radius: 2px;
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 0.2s ease;
  }

  .if-sticky-atc__btn:hover,
  .if-sticky-atc__btn:active {
    background: var(--if-gold);
  }
}

/* ─────────────────────────────────────────────────────────────
   HOMEPAGE — PROMO / CAMPAIGN BANNER
   ───────────────────────────────────────────────────────────── */
.if-promo-banner {
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: center;
  min-height: clamp(340px, 44vw, 500px);
  padding: clamp(40px, 6vw, 88px) var(--if-s5, 24px);
  border-radius: var(--if-r-md, 10px);
  overflow: hidden;
  text-align: center;
  background-color: var(--if-charcoal, #1a1712);
  background-image: var(--if-promo-img, none);
  background-size: cover;
  background-position: center 28%;
  background-repeat: no-repeat;
}

.if-promo-banner__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    radial-gradient(120% 100% at 50% 0%, rgba(18, 15, 11, 0.28), rgba(18, 15, 11, 0.62) 70%),
    linear-gradient(180deg, rgba(18, 15, 11, 0.42), rgba(18, 15, 11, 0.72));
}

.if-promo-banner__inner {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--if-s4, 16px);
  max-width: 760px;
}

.if-promo-banner__eyebrow {
  margin: 0;
  font-size: var(--if-fs-xs, 0.72rem);
  letter-spacing: var(--if-track-widest, 0.22em);
  text-transform: uppercase;
  color: var(--if-gold, #c8a25a) !important;
}

.if-promo-banner__title {
  margin: 0;
  font-family: var(--if-font-display, Georgia, serif);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -0.01em;
  color: #ffffff !important;
  font-size: clamp(2rem, 4.6vw, 3.4rem);
  text-shadow: 0 2px 20px rgba(0, 0, 0, 0.55), 0 1px 4px rgba(0, 0, 0, 0.4);
}

.if-promo-banner__text {
  margin: 0;
  max-width: 52ch;
  color: rgba(255, 255, 255, 0.92) !important;
  font-size: clamp(0.95rem, 1.4vw, 1.12rem);
  line-height: 1.6;
}

.if-promo-banner__cta {
  margin-top: var(--if-s2, 8px);
  min-width: 200px;
}

@media (max-width: 639px) {
  .if-promo-banner {
    min-height: 320px;
    padding: 40px 20px;
  }
  .if-promo-banner__cta { width: 100%; }
}

/* ═══════════════════════════════════════════════════════════════
   §H FREE-SHIPPING BAR (unlocked state) — authoritative final block

   ROOT CAUSE: When the free-shipping threshold is met, ".if-ship-bar"
   gains ".is-unlocked" which forces a green palette (bg #F1F7F3,
   text/icon var(--if-success), track rgba(47,107,79,.15), fill green
   gradient) that clashes with the brand's ivory/gold design system.
   This final block keeps the celebratory "unlocked" treatment but in
   brand gold: a full gold hairline border, gold-deep message/icon, and
   the same gold track/fill used by the locked state.
   ═══════════════════════════════════════════════════════════════ */
.if-ship-bar.is-unlocked {
  background: #FFF8E7;
  border: 1px solid var(--if-gold, #C6A15B);
  border-left: 4px solid var(--if-gold, #C6A15B);
}

.if-ship-bar.is-unlocked .if-ship-bar__message {
  color: var(--if-gold-deep, #A9834A);
}

.if-ship-bar.is-unlocked .if-ship-bar__message svg {
  color: var(--if-gold-deep, #A9834A);
}

.if-ship-bar.is-unlocked .if-ship-bar__track {
  background: rgba(198, 161, 91, 0.2);
}

.if-ship-bar.is-unlocked .if-ship-bar__fill {
  background: linear-gradient(90deg, var(--if-gold, #C6A15B), var(--if-gold-deep, #A9834A));
}

/* ═══════════════════════════════════════════════════════════════
   §M SHARED SUCCESS ALERT — authoritative final block (green → gold)
   The shared ".if-alert--success" component was green (WC default
   look). Restyle it to the brand's ivory/gold success language to
   match the unified notice system (§G). Error stays red.
   ═══════════════════════════════════════════════════════════════ */
.if-alert--success {
  border-left-color: var(--if-gold, #C6A15B);
  background: var(--if-gold-wash, #FAF6EE);
}

.if-alert--success svg {
  color: var(--if-gold-deep, #A9834A);
}

/* ═══════════════════════════════════════════════════════════════
   §R RESPONSIVE PRODUCT GRIDS — specificity fix (authoritative)

   ROOT CAUSE: the base rule ".if-grid--products, ul.products,
   .if-shop-products, .woocommerce ul.products, .woocommerce-page
   ul.products { grid-template-columns: repeat(4, ...) !important }"
   matches WC grids through the ".woocommerce ul.products" selector
   (specificity 0,1,2), but the responsive overrides further down only
   used the bare "ul.products" selector (0,1,1). On any WooCommerce
   page (body carries .woocommerce), the 4-column base therefore BEAT
   the 2/3-column media rules — Related Products, Upsells and cart
   cross-sells stayed 4-across on mobile/tablet, crushing cards to ~75px
   with clipped buttons. These rules repeat the FULL selector list at
   each breakpoint so the responsive column counts win by cascade order
   at equal specificity.
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 1023px) {
  .if-grid--products,
  ul.products,
  .if-shop-products,
  .woocommerce ul.products,
  .woocommerce-page ul.products {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 26px 16px !important;
  }
}

@media (max-width: 767px) {
  .if-grid--products,
  ul.products,
  .if-shop-products,
  .woocommerce ul.products,
  .woocommerce-page ul.products {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 20px 12px !important;
  }
}

@media (max-width: 639px) {
  .if-grid--products,
  ul.products,
  .if-shop-products,
  .woocommerce ul.products,
  .woocommerce-page ul.products {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 20px 12px !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   §R PRODUCT-CARD ACTION — global button unification (authoritative)

   ROOT CAUSE: the earlier shop-grid fix unified card-button geometry
   but scoped it to ".if-shop-main" and ".related.products" only, so
   every OTHER grid that reuses the same shared card partial (homepage
   sections, Complete the Look, thank-you page, cart cross-sells, …)
   fell back to the smaller base ".if-btn--sm" size (34px) — one
   standard card, two different button heights. This component-level
   rule covers the shared ".if-product-card__actions" markup in ALL
   contexts, using the same geometry as the shop cards (46px solid
   charcoal Add to Cart / outlined View Product for out-of-stock —
   legitimate WooCommerce behaviour preserved via the existing
   is_in_stock() && is_purchasable() check in the card partial).
   ═══════════════════════════════════════════════════════════════ */
.if-product-card__actions .button,
.if-product-card__actions .if-btn,
.if-product-card__actions .add_to_cart_button,
.if-product-card__actions a.button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  min-height: 46px !important;
  height: 46px !important;
  margin: 0 !important;
  padding: 12px 18px !important;
  border-radius: 0 !important;
  font-size: 0.78rem !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  text-align: center !important;
  line-height: 1 !important;
  box-sizing: border-box !important;
}

/* ═══════════════════════════════════════════════════════════════
   PHASE R — MOBILE PERFECT: hero CTA buttons
   At ≤639px the two hero CTAs sit side-by-side (flex:1, min-width:140px)
   while the base .if-btn padding (34px sides) leaves ~95px of content
   box — "EXPLORE WHOLESALE" (nowrap + letter-spacing ≈ 176px) overflowed
   its border by 12px+ (measured scrollWidth 176 vs clientWidth 164 @375).
   Stack them full-width on phones, matching the theme's existing
   mobile pattern (product-card actions are already full-width).
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 639px) {
  .if-hero-slider__actions {
    flex-direction: column;
    gap: 10px;
  }

  .if-hero-slider__actions .if-btn {
    flex: none;
    width: 100%;
    min-width: 0;
  }
}

/* ═══════════════════════════════════════════════════════════════
   PHASE R — card-action clip @320 + link-arrow tap height
   1) "VIEW PRODUCT" measured scrollWidth 141 vs clientWidth 136 at
      320px (2-col grid column ≈ 136px; §R card-action padding
      12/18 + uppercase 0.12em tracking leaves a 100px content box
      for 105px of text) — 5px was clipped by overflow:hidden.
      Trim horizontal padding only below 360px; larger screens and
      desktop are untouched.
   2) .if-link-arrow ("VIEW ALL →") had min-height 24px — half the
      44px touch minimum. Raise on pointer:coarse only; the row is
      inline-flex/align-center so section headers just gain ~20px.
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 359px) {
  .if-btn--sm {
    padding: 10px 14px;
  }

  .if-product-card__actions .if-btn,
  .if-product-card__actions .button {
    padding: 12px 14px !important;
  }
}

@media (pointer: coarse) {
  .if-link-arrow {
    min-height: 44px;
  }
}