/**
 * AffiliateCMS Pro - Frontend Styles
 *
 * Styling for product cards, grids, lists.
 * Mobile-first responsive design with dark mode support.
 */

/* ===========================================
 * CSS VARIABLES
 * Theme-aware with fallbacks
 * =========================================== */

:root {
  /* Font - inherit from theme if available */
  --acms-font: var(
    --font-sans,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    Oxygen-Sans,
    Ubuntu,
    Cantarell,
    "Helvetica Neue",
    sans-serif
  );

  /* Font Sizes */
  --acms-text-xs: 0.75rem;
  --acms-text-sm: 0.875rem;
  --acms-text-base: 1rem;
  --acms-text-lg: 1.125rem;
  --acms-text-xl: 1.25rem;
  --acms-text-2xl: 1.5rem;

  /* Spacing */
  --acms-space-1: 0.25rem;
  --acms-space-2: 0.5rem;
  --acms-space-3: 0.75rem;
  --acms-space-4: 1rem;
  --acms-space-5: 1.25rem;
  --acms-space-6: 1.5rem;
  --acms-space-8: 2rem;

  /* Border Radius */
  --acms-radius-sm: var(--radius-sm, 0.25rem);
  --acms-radius: var(--radius-md, 0.5rem);
  --acms-radius-lg: var(--radius-lg, 0.75rem);
  --acms-radius-full: 9999px;

  /* Colors - Light Mode (inherit from theme when available) */
  --acms-surface: var(--color-surface, #ffffff);
  --acms-surface-raised: var(--color-surface-raised, #ffffff);
  --acms-bg: var(--color-bg, #f9fafb);
  --acms-bg-alt: var(--color-bg-alt, #f3f4f6);
  --acms-text: var(--color-text, #111827);
  --acms-text-secondary: var(--color-text-secondary, #4b5563);
  --acms-text-muted: var(--color-text-muted, #9ca3af);
  --acms-border: var(--color-border, #e5e7eb);

  /* Brand */
  --acms-primary: var(--color-primary, #2563eb);
  --acms-primary-hover: var(--color-primary-hover, #1d4ed8);
  --acms-primary-rgb: 37, 99, 235;

  /* Status */
  --acms-success: var(--color-success, #16a34a);
  --acms-danger: var(--color-error, #dc2626);
  --acms-warning: var(--color-warning, #f59e0b);
  --acms-info: var(--color-info, #0ea5e9);

  /* Product specific */
  --acms-price-color: #b12704;
  --acms-price-original: #565959;
  --acms-price-savings: var(--color-success, #16a34a);
  --acms-prime-color: #00a8e1;
  --acms-star-active: #fbbf24;
  --acms-star-inactive: #d1d5db;

  /* Amazon Brand */
  --acms-amazon-orange: #ff9900;
  --acms-amazon-orange-hover: #e88a00;

  /* Shadows */
  --acms-shadow-sm: var(--shadow-xs, 0 1px 2px 0 rgba(0, 0, 0, 0.05));
  --acms-shadow: var(
    --shadow-sm,
    0 1px 3px 0 rgba(0, 0, 0, 0.1),
    0 1px 2px 0 rgba(0, 0, 0, 0.06)
  );
  --acms-shadow-md: var(
    --shadow-md,
    0 4px 6px -1px rgba(0, 0, 0, 0.1),
    0 2px 4px -1px rgba(0, 0, 0, 0.06)
  );
  --acms-shadow-lg: var(
    --shadow-lg,
    0 10px 15px -3px rgba(0, 0, 0, 0.1),
    0 4px 6px -2px rgba(0, 0, 0, 0.05)
  );

  /* Transitions */
  --acms-transition: 150ms ease;
  --acms-transition-slow: 300ms ease;

  /* Layout */
  --acms-card-max-width: 700px;
  --acms-grid-gap: var(--acms-space-6);
  --acms-grid-columns: 3;
  --acms-list-max-width: 900px;
}

/* Dark Mode - System preference */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --acms-surface: var(--color-surface, #1f2937);
    --acms-bg: var(--color-bg, #111827);
    --acms-bg-alt: var(--color-bg-alt, #374151);
    --acms-text: var(--color-text, #f9fafb);
    --acms-text-secondary: var(--color-text-secondary, #d1d5db);
    --acms-text-muted: var(--color-text-muted, #6b7280);
    --acms-border: var(--color-border, #374151);
    --acms-star-inactive: #4b5563;
  }
}

/* WordPress Theme Dark Mode - Explicit */
[data-theme="dark"],
.dark-mode,
body.dark {
  --acms-surface: var(--color-surface, #1f2937);
  --acms-bg: var(--color-bg, #111827);
  --acms-bg-alt: var(--color-bg-alt, #374151);
  --acms-text: var(--color-text, #f9fafb);
  --acms-text-secondary: var(--color-text-secondary, #d1d5db);
  --acms-text-muted: var(--color-text-muted, #6b7280);
  --acms-border: var(--color-border, #374151);
  --acms-star-inactive: #4b5563;
}

/* ===========================================
 * BUTTONS
 * =========================================== */

.acms-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--acms-space-2);
  padding: var(--acms-space-3) var(--acms-space-5);
  font-family: var(--acms-font);
  font-size: var(--acms-text-sm);
  font-weight: 600;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.025em;
  border: 1px solid transparent;
  border-radius: var(--acms-radius);
  cursor: pointer;
  transition: all var(--acms-transition);
}

.acms-btn i {
  font-size: 0.875em;
}

.acms-btn--primary {
  background-color: var(--acms-primary);
  color: #fff;
  border-color: var(--acms-primary);
}

.acms-btn--primary:hover {
  background-color: var(--acms-primary-hover);
  border-color: var(--acms-primary-hover);
  transform: translateY(-2px);
  box-shadow: 0 4px 14px 0 rgba(var(--acms-primary-rgb), 0.39);
}

.acms-btn--outline {
  background-color: transparent;
  color: var(--acms-primary);
  border-color: var(--acms-primary);
}

.acms-btn--outline:hover {
  background-color: var(--acms-primary);
  color: #fff;
}

.acms-btn--small {
  padding: var(--acms-space-2) var(--acms-space-3);
  font-size: var(--acms-text-xs);
}

.acms-btn--block {
  width: 100%;
}

/* Amazon Brand Button */
.acms-btn--amazon {
  background: linear-gradient(
    135deg,
    var(--acms-amazon-orange),
    var(--acms-amazon-orange-hover)
  );
  color: #fff;
  border-color: var(--acms-amazon-orange);
  text-transform: none;
  white-space: nowrap;
}

.acms-btn--amazon:hover {
  background: linear-gradient(135deg, var(--acms-amazon-orange-hover), #cc7a00);
  border-color: var(--acms-amazon-orange-hover);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 4px 14px rgba(255, 153, 0, 0.4);
}

/* ===========================================
 * BADGES
 * =========================================== */

.acms-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--acms-space-1);
  padding: var(--acms-space-1) var(--acms-space-2);
  font-size: var(--acms-text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.025em;
  border-radius: var(--acms-radius-sm);
}

.acms-badge--small {
  padding: 2px 6px;
  font-size: 10px;
}

.acms-badge--prime {
  background-color: rgba(0, 168, 225, 0.1);
  color: var(--acms-prime-color);
}

.acms-badge--discount {
  position: absolute;
  top: var(--acms-space-3);
  right: var(--acms-space-3);
  background-color: var(--acms-danger);
  color: #fff;
  border-radius: var(--acms-radius-full);
  padding: var(--acms-space-1) var(--acms-space-2);
  font-weight: 700;
  z-index: 10;
}

.acms-badge--danger {
  background-color: rgba(220, 38, 38, 0.1);
  color: var(--acms-danger);
}

.acms-badge--success {
  background-color: rgba(22, 163, 74, 0.1);
  color: var(--acms-success);
}

.acms-badge--warning {
  background-color: rgba(245, 158, 11, 0.1);
  color: var(--acms-warning);
}

.acms-badge--info {
  background-color: rgba(14, 165, 233, 0.1);
  color: var(--acms-info);
}

/* ===========================================
 * RATING STARS
 * =========================================== */

.acms-stars {
  display: inline-flex;
  gap: 1px;
}

.acms-stars--small {
  font-size: var(--acms-text-sm);
}

.acms-stars__star {
  color: var(--acms-star-inactive);
  line-height: 1;
}

.acms-stars__star--filled {
  color: var(--acms-star-active);
}

/* ===========================================
 * SCORE DISPLAY
 * =========================================== */

.acms-score {
  display: inline-flex;
  align-items: baseline;
  gap: 2px;
  padding: var(--acms-space-1) var(--acms-space-2);
  background: linear-gradient(135deg, var(--acms-success), #059669);
  border-radius: var(--acms-radius-sm);
  color: #fff;
}

.acms-score__value {
  font-size: var(--acms-text-lg);
  font-weight: 700;
  line-height: 1;
}

.acms-score__label {
  font-size: var(--acms-text-xs);
  font-weight: 500;
  opacity: 0.85;
}

/* Score color variations based on value */
.acms-score[data-score^="9"],
.acms-score[data-score="100"] {
  background: linear-gradient(135deg, #059669, #047857);
}

.acms-score[data-score^="8"] {
  background: linear-gradient(135deg, var(--acms-success), #059669);
}

.acms-score[data-score^="7"] {
  background: linear-gradient(135deg, #84cc16, #65a30d);
}

.acms-score[data-score^="6"] {
  background: linear-gradient(135deg, var(--acms-warning), #d97706);
}

.acms-score[data-score^="5"],
.acms-score[data-score^="4"],
.acms-score[data-score^="3"],
.acms-score[data-score^="2"],
.acms-score[data-score^="1"] {
  background: linear-gradient(135deg, var(--acms-danger), #b91c1c);
}

/* ===========================================
 * STOCK STATUS
 * =========================================== */

.acms-stock {
  display: inline-flex;
  align-items: center;
  gap: var(--acms-space-1);
  font-size: var(--acms-text-sm);
  font-weight: 500;
}

.acms-stock--in {
  color: var(--acms-success);
}

.acms-stock--out {
  color: var(--acms-danger);
}

/* ===========================================
 * TOOLTIP
 * =========================================== */

.acms-tooltip {
  position: relative;
  display: inline-flex;
  cursor: help;
}

.acms-tooltip__content {
  position: absolute;
  bottom: calc(100% + var(--acms-space-2));
  left: 50%;
  transform: translateX(-50%);
  padding: var(--acms-space-2) var(--acms-space-3);
  background-color: var(--acms-text);
  color: var(--acms-surface);
  font-size: var(--acms-text-xs);
  white-space: nowrap;
  border-radius: var(--acms-radius-sm);
  opacity: 0;
  visibility: hidden;
  transition: all var(--acms-transition);
  z-index: 100;
}

.acms-tooltip:hover .acms-tooltip__content {
  opacity: 1;
  visibility: visible;
}

/* ===========================================
 * DISCLAIMER
 * =========================================== */

.acms-disclaimer {
  max-width: var(--acms-list-max-width, var(--acms-card-max-width));
  margin: var(--acms-space-4) auto;
  padding: var(--acms-space-2) var(--acms-space-3);
  font-size: var(--acms-text-xs);
  color: var(--acms-text-muted);
  text-align: center;
}

/* ===========================================
 * CARD STYLES
 * =========================================== */

.acms-card {
  position: relative;
  max-width: var(--acms-card-max-width);
  margin: var(--acms-space-4) auto;
  font-family: var(--acms-font);
}

.acms-card__inner {
  background-color: var(--acms-surface);
  border: 2px solid var(--acms-border);
  border-radius: var(--acms-radius-lg);
  box-shadow: var(--acms-shadow-sm);
  overflow: hidden;
  transition: all var(--acms-transition-slow);
}

.acms-card:hover .acms-card__inner {
  border-color: var(--acms-primary);
  box-shadow: var(--acms-shadow-lg);
  transform: translateY(-4px);
}

.acms-card__row {
  display: flex;
  align-items: stretch;
  min-height: 200px;
}

/* Image Column */
.acms-card__image-col {
  position: relative;
  flex: 0 0 40%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--acms-space-4);
  background-color: var(--acms-surface);
}

.acms-card__image-wrapper {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  overflow: hidden;
  cursor: pointer;
}

.acms-card__image {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: transform var(--acms-transition-slow);
}

.acms-card__image-wrapper:hover .acms-card__image {
  transform: scale(1.05);
}

.acms-card__gallery-hint {
  position: absolute;
  bottom: var(--acms-space-2);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: var(--acms-space-1);
  padding: var(--acms-space-1) var(--acms-space-2);
  background-color: rgba(0, 0, 0, 0.7);
  color: #fff;
  font-size: var(--acms-text-xs);
  border-radius: var(--acms-radius-sm);
}

/* Content Column */
.acms-card__content {
  flex: 1;
  padding: var(--acms-space-5);
  display: flex;
  flex-direction: column;
  gap: var(--acms-space-3);
}

.acms-card__title {
  font-size: var(--acms-text-base) !important;
  font-weight: 500;
  line-height: 1.4;
  color: var(--acms-text);
  margin: 0 !important;
}

.acms-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--acms-space-3);
  font-size: var(--acms-text-sm);
  color: var(--acms-text-secondary);
}

.acms-card__meta-item {
  display: flex;
  align-items: center;
  gap: var(--acms-space-1);
}

.acms-card__rating {
  display: flex;
  align-items: center;
  gap: var(--acms-space-2);
  flex-wrap: wrap;
}

.acms-card__rating-value {
  font-weight: 500;
  color: var(--acms-text);
}

.acms-card__rating-count {
  font-size: var(--acms-text-xs);
  color: var(--acms-text-muted);
}

.acms-card__price {
  display: flex;
  align-items: baseline;
  gap: var(--acms-space-3);
  flex-wrap: wrap;
}

.acms-card__price-current {
  font-size: var(--acms-text-2xl);
  font-weight: 700;
  color: var(--acms-price-color);
}

.acms-card__price-original {
  font-size: var(--acms-text-sm);
  color: var(--acms-price-original);
  text-decoration: line-through;
}

.acms-card__price-savings {
  font-size: var(--acms-text-sm);
  font-weight: 600;
  color: var(--acms-price-savings);
}

.acms-card__actions {
  margin-top: auto;
}

.acms-card__update {
  font-size: var(--acms-text-xs);
  color: var(--acms-text-muted);
  text-align: center;
  margin-top: var(--acms-space-2);
}

/* Affiliate Tag Display */
.acms-card__affiliate-tag,
.acms-grid__affiliate-tag,
.acms-list__affiliate-tag,
.acms-modal__affiliate-tag {
  font-size: 11px;
  color: var(--acms-text-muted);
  text-align: center;
  margin-top: var(--acms-space-1);
}

.acms-card__affiliate-tag strong,
.acms-grid__affiliate-tag strong,
.acms-list__affiliate-tag strong,
.acms-modal__affiliate-tag strong {
  color: var(--acms-primary);
  font-weight: 600;
}

/* Features Section */
.acms-card__features {
  border-top: 1px solid var(--acms-border);
  background-color: var(--acms-bg-alt);
}

.acms-card__features-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: var(--acms-space-3) var(--acms-space-4);
  background: none;
  border: none;
  cursor: pointer;
}

.acms-card__features-toggle-left {
  display: flex;
  align-items: center;
  gap: var(--acms-space-2);
  font-size: var(--acms-text-base);
  font-weight: 500;
  color: var(--acms-text);
}

.acms-card__features-toggle-action {
  display: flex;
  align-items: center;
  gap: var(--acms-space-1);
  font-size: var(--acms-text-sm);
  color: var(--acms-text-muted);
}

.acms-card__features-toggle-arrow {
  transition: transform var(--acms-transition);
}

.acms-card__features.is-expanded .acms-card__features-toggle-arrow {
  transform: rotate(180deg);
}

.acms-card__features-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--acms-transition-slow);
  background-color: var(--acms-surface);
}

.acms-card__features.is-expanded .acms-card__features-content {
  max-height: 2000px;
}

.acms-card__features-list {
  margin: 0;
  padding: var(--acms-space-4);
  list-style: none;
  border-top: 1px solid var(--acms-border);
}

.acms-card__features-item {
  position: relative;
  padding: var(--acms-space-2) 0 var(--acms-space-2) var(--acms-space-6);
  color: var(--acms-text-secondary);
}

.acms-card__features-item::before {
  content: "\2713";
  position: absolute;
  left: 0;
  color: var(--acms-success);
  font-weight: 700;
}

/* Gallery Section */
.acms-card__gallery {
  padding: var(--acms-space-4);
  border-top: 1px solid var(--acms-border);
}

.acms-card__gallery-main {
  position: relative;
  width: 100%;
  aspect-ratio: 16/10;
  background-color: var(--acms-bg-alt);
  border-radius: var(--acms-radius);
  overflow: hidden;
  margin-bottom: var(--acms-space-3);
}

.acms-card__gallery-main-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.acms-card__gallery-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(0, 0, 0, 0.7);
  color: #fff;
  border: none;
  border-radius: var(--acms-radius-full);
  cursor: pointer;
  transition: all var(--acms-transition);
}

.acms-card__gallery-nav:hover {
  background-color: rgba(0, 0, 0, 0.9);
  transform: translateY(-50%) scale(1.1);
}

.acms-card__gallery-nav--prev {
  left: var(--acms-space-2);
}
.acms-card__gallery-nav--next {
  right: var(--acms-space-2);
}

.acms-card__gallery-counter {
  position: absolute;
  bottom: var(--acms-space-2);
  left: 50%;
  transform: translateX(-50%);
  padding: var(--acms-space-1) var(--acms-space-3);
  background-color: rgba(0, 0, 0, 0.7);
  color: #fff;
  font-size: var(--acms-text-sm);
  border-radius: var(--acms-radius-full);
}

.acms-card__gallery-thumbs {
  display: flex;
  gap: var(--acms-space-2);
  justify-content: center;
  overflow-x: auto;
}

.acms-card__gallery-thumb {
  flex-shrink: 0;
  width: 60px;
  height: 60px;
  border: 2px solid var(--acms-border);
  border-radius: var(--acms-radius-sm);
  overflow: hidden;
  cursor: pointer;
  transition: all var(--acms-transition);
}

.acms-card__gallery-thumb:hover,
.acms-card__gallery-thumb.is-active {
  border-color: var(--acms-primary);
}

.acms-card__gallery-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Card Responsive */
@media (max-width: 600px) {
  .acms-card__row {
    flex-direction: column;
    min-height: auto;
  }

  .acms-card__image-col {
    flex: none;
  }

  .acms-card__content {
    padding: var(--acms-space-4);
  }

  .acms-card__price-current {
    font-size: var(--acms-text-xl);
  }
}

/* ===========================================
 * MODAL STYLES
 * =========================================== */

.acms-modal {
  display: none;
  position: fixed;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.95);
  z-index: 999999;
  padding: var(--acms-space-4);
}

.acms-modal.is-open {
  display: flex;
  align-items: center;
  justify-content: center;
}

.acms-modal__close {
  position: fixed;
  top: var(--acms-space-4);
  right: var(--acms-space-4);
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(255, 255, 255, 0.9);
  border: none;
  border-radius: var(--acms-radius-full);
  font-size: 1.25rem;
  cursor: pointer;
  z-index: 10;
  transition: all var(--acms-transition);
}

.acms-modal__close:hover {
  background-color: #fff;
  transform: scale(1.1);
}

.acms-modal__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--acms-space-4);
  width: 100%;
  max-width: 1000px;
}

.acms-modal__main {
  position: relative;
  width: 100%;
  max-height: 60vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.acms-modal__main-image {
  max-width: 100%;
  max-height: 60vh;
  object-fit: contain;
}

.acms-modal__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(0, 0, 0, 0.7);
  color: #fff;
  border: none;
  border-radius: var(--acms-radius-full);
  font-size: 1.25rem;
  cursor: pointer;
  transition: all var(--acms-transition);
}

.acms-modal__nav:hover {
  background-color: rgba(0, 0, 0, 0.9);
  transform: translateY(-50%) scale(1.1);
}

.acms-modal__nav--prev {
  left: var(--acms-space-4);
}
.acms-modal__nav--next {
  right: var(--acms-space-4);
}

.acms-modal__counter {
  position: absolute;
  bottom: var(--acms-space-2);
  left: 50%;
  transform: translateX(-50%);
  padding: var(--acms-space-1) var(--acms-space-3);
  background-color: rgba(0, 0, 0, 0.7);
  color: #fff;
  font-size: var(--acms-text-sm);
  border-radius: var(--acms-radius-full);
}

.acms-modal__thumbs {
  display: flex;
  gap: var(--acms-space-2);
  overflow-x: auto;
  max-width: 100%;
}

.acms-modal__thumb {
  flex-shrink: 0;
  width: 70px;
  height: 70px;
  border: 2px solid transparent;
  border-radius: var(--acms-radius-sm);
  overflow: hidden;
  cursor: pointer;
  transition: all var(--acms-transition);
}

.acms-modal__thumb:hover,
.acms-modal__thumb.is-active {
  border-color: var(--acms-primary);
}

.acms-modal__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.acms-modal__footer {
  margin-top: var(--acms-space-4);
}

/* Body scroll lock */
body.acms-modal-open {
  overflow: hidden;
}

/* ===========================================
 * GRID STYLES
 * =========================================== */

.acms-grid {
  display: grid;
  grid-template-columns: repeat(var(--acms-grid-columns), 1fr);
  gap: var(--acms-grid-gap);
  font-family: var(--acms-font);
  max-width: 800px;
  margin: 0 auto;
}

.acms-grid__item {
  position: relative;
  display: flex;
  flex-direction: column;
  background-color: var(--acms-surface);
  border: 1px solid var(--acms-border);
  border-radius: var(--acms-radius-lg);
  box-shadow: var(--acms-shadow-sm);
  overflow: visible;
  transition: all var(--acms-transition);
}

.acms-grid__item:hover {
  transform: translateY(-4px);
  box-shadow: var(--acms-shadow-lg);
  border-color: var(--acms-primary);
}

.acms-grid__badge {
  position: absolute;
  top: var(--acms-space-2);
  left: calc(-1 * var(--acms-space-1));
  z-index: 10;
  border-radius: 0 var(--acms-radius-sm) var(--acms-radius-sm) 0;
}

.acms-grid__image {
  position: relative;
  display: block;
  width: 100%;
  height: 180px;
  overflow: hidden;
  background-color: var(--acms-surface);
  border-radius: var(--acms-radius-lg) var(--acms-radius-lg) 0 0;
}

.acms-grid__image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: transform var(--acms-transition-slow);
}

.acms-grid__item:hover .acms-grid__image img {
  transform: scale(1.05);
}

.acms-grid__store {
  position: absolute;
  bottom: var(--acms-space-2);
  left: var(--acms-space-2);
  display: flex;
  align-items: center;
  gap: var(--acms-space-1);
  padding: 2px 6px;
  background-color: rgba(0, 0, 0, 0.75);
  color: #fff;
  font-size: 10px;
  border-radius: 2px;
}

.acms-grid__content {
  padding: var(--acms-space-3);
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  gap: var(--acms-space-2);
}

.acms-grid__title {
  font-size: var(--acms-text-sm) !important;
  font-weight: 500;
  line-height: 1.4;
  color: var(--acms-text);
  margin: 0 !important;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-align: center;
}

.acms-grid__rating {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--acms-space-1);
  flex-wrap: wrap;
}

.acms-grid__rating-value {
  font-size: var(--acms-text-sm);
  font-weight: 500;
}

.acms-grid__rating-count {
  font-size: var(--acms-text-xs);
  color: var(--acms-text-muted);
}

.acms-grid__price {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: var(--acms-space-2);
  margin: var(--acms-space-2) 0;
}

.acms-grid__price-current {
  font-size: var(--acms-text-lg);
  font-weight: 700;
  color: var(--acms-price-color);
}

.acms-grid__price-original {
  font-size: var(--acms-text-xs);
  color: var(--acms-price-original);
  text-decoration: line-through;
}

.acms-grid__price-discount {
  font-size: var(--acms-text-xs);
  font-weight: 600;
  color: var(--acms-danger);
}

.acms-grid__actions {
  padding: 0 var(--acms-space-3) var(--acms-space-3);
  margin-top: auto;
}

.acms-grid__update {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--acms-space-1);
  margin-top: var(--acms-space-2);
  font-size: var(--acms-text-xs);
  color: var(--acms-text-muted);
}

/* Grid Responsive */
@media (max-width: 389px) {
  .acms-grid {
    --acms-grid-columns: 1;
    --acms-grid-gap: var(--acms-space-3);
  }
}

@media (min-width: 390px) and (max-width: 600px) {
  .acms-grid {
    --acms-grid-columns: 2;
    --acms-grid-gap: var(--acms-space-2);
  }
}

@media (min-width: 601px) and (max-width: 900px) {
  .acms-grid {
    --acms-grid-columns: 3;
    --acms-grid-gap: var(--acms-space-4);
  }
}

/* ===========================================
 * LIST STYLES - Row-based Layout
 * Row 1: Main content (image, info, price/action)
 * Row 2: Toggle bar (full width)
 * Row 3: Expandable details (full width)
 * =========================================== */

.acms-list {
  display: flex;
  flex-direction: column;
  gap: var(--acms-space-6);
  max-width: var(--acms-list-max-width);
  margin: 0 auto;
  font-family: var(--acms-font);
}

.acms-list__item {
  position: relative;
  display: flex;
  flex-direction: column;
  background-color: var(--acms-surface);
  border: 1px solid var(--acms-border);
  border-radius: var(--acms-radius-lg);
  box-shadow: var(--acms-shadow-sm);
  margin-left: 1rem;
  transition: all var(--acms-transition);
}

.acms-list__item:hover {
  box-shadow: var(--acms-shadow-lg);
  border-color: var(--acms-primary);
}

/* Ranking Badge */
.acms-list__rank {
  position: absolute;
  top: 50%;
  left: -0.875rem;
  transform: translateY(-50%);
  width: 1.75rem;
  height: 1.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--acms-danger), #b91c1c);
  color: #fff;
  font-size: var(--acms-text-sm);
  font-weight: 700;
  border-radius: var(--acms-radius-full);
  box-shadow: var(--acms-shadow-md);
  z-index: 10;
  transition: transform var(--acms-transition);
}

.acms-list__item:hover .acms-list__rank {
  transform: translateY(-50%) scale(1.1);
}

/* Row Base */
.acms-list__row {
  width: 100%;
}

/* Row 1: Main Content */
.acms-list__row--main {
  display: grid;
  grid-template-columns: 140px 1fr auto;
  gap: var(--acms-space-4);
  padding: var(--acms-space-4);
  align-items: center;
  border-radius: var(--acms-radius-lg) var(--acms-radius-lg) 0 0;
}

/* Product Image */
.acms-list__image {
  position: relative;
  width: 140px;
  height: 140px;
  border-radius: var(--acms-radius);
  overflow: hidden;
  flex-shrink: 0;
}

.acms-list__image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: transform var(--acms-transition-slow);
}

.acms-list__item:hover .acms-list__image img {
  transform: scale(1.05);
}

.acms-list__discount {
  position: absolute;
  top: var(--acms-space-1);
  right: var(--acms-space-1);
  padding: 2px 6px;
  background-color: var(--acms-danger);
  color: #fff;
  font-size: 10px;
  font-weight: 600;
  border-radius: var(--acms-radius-sm);
  z-index: 5;
}

/* Product Info */
.acms-list__info {
  display: flex;
  flex-direction: column;
  gap: var(--acms-space-2);
  min-width: 0;
}

.acms-list__badges {
  display: flex;
  align-items: center;
  gap: var(--acms-space-2);
  flex-wrap: wrap;
}

.acms-list__title {
  font-size: var(--acms-text-base) !important;
  font-weight: 600;
  line-height: 1.4;
  color: var(--acms-text);
  margin: 0 !important;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.acms-list__title a {
  color: inherit !important;
  text-decoration: none !important;
}

.acms-list__title a:hover {
  color: var(--acms-primary) !important;
}

.acms-list__meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--acms-space-3) var(--acms-space-4);
  font-size: var(--acms-text-xs);
  color: var(--acms-text-muted);
}

.acms-list__brand,
.acms-list__stock {
  display: flex;
  align-items: center;
  gap: var(--acms-space-1);
}

.acms-list__brand {
  color: var(--acms-text);
  font-weight: 500;
}

.acms-list__stock--in {
  color: var(--acms-success);
}
.acms-list__stock--out {
  color: var(--acms-danger);
}

/* Inline Score with Tooltip */
.acms-list__score-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--acms-space-2);
}

.acms-score.acms-score--inline,
.acms-score.acms-score--inline[data-score] {
  padding: 0;
  background: none;
  color: var(--acms-text);
  border-radius: 0;
}

.acms-score--inline .acms-score__value {
  font-size: var(--acms-text-xs);
  font-weight: 700;
}

.acms-score--inline .acms-score__label {
  font-size: var(--acms-text-xs);
  color: var(--acms-text-muted);
  opacity: 1;
}

.acms-list__score-icon {
  font-size: 11px;
  color: var(--acms-text-muted);
}

.acms-list__score-label {
  font-size: 11px;
  color: var(--acms-text-muted);
  font-weight: 500;
}

.acms-list__score-info {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  padding: 0;
  background: none;
  border: none;
  color: var(--acms-text-muted);
  cursor: pointer;
  transition: color var(--acms-transition);
}

.acms-list__score-info:hover {
  color: var(--acms-primary);
}

.acms-list__score-info i {
  font-size: 12px;
}

.acms-list__score-tooltip {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 0;
  width: 280px;
  padding: var(--acms-space-3);
  background-color: var(--acms-surface);
  border: 1px solid var(--acms-border);
  border-radius: var(--acms-radius);
  box-shadow: var(--acms-shadow-lg);
  font-size: var(--acms-text-xs);
  line-height: 1.5;
  color: var(--acms-text-secondary);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(4px);
  transition: all var(--acms-transition);
  z-index: 100;
}

/* Tooltip links */
.acms-list__score-tooltip a {
  color: var(--acms-primary);
  text-decoration: none;
  font-weight: 500;
}

.acms-list__score-tooltip a:hover {
  text-decoration: underline;
}

/* Arrow */
.acms-list__score-tooltip::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 20px;
  border: 6px solid transparent;
  border-top-color: var(--acms-surface);
}

/* Invisible bridge to keep tooltip open when hovering */
.acms-list__score-tooltip::before {
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  height: 16px;
  background: transparent;
}

.acms-list__score-wrapper:hover .acms-list__score-tooltip,
.acms-list__score-info:focus + .acms-list__score-tooltip {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}

/* Price & Action Column */
.acms-list__price-action {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--acms-space-3);
  padding-left: var(--acms-space-4);
}

.acms-list__price-group {
  text-align: right;
}

.acms-list__price-old-row {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--acms-space-2);
  margin-bottom: var(--acms-space-1);
}

.acms-list__price-old {
  font-size: var(--acms-text-sm);
  color: var(--acms-price-original);
  text-decoration: line-through;
}

.acms-list__price-savings {
  font-size: var(--acms-text-xs);
  font-weight: 500;
  color: var(--acms-price-savings);
}

.acms-list__price-current {
  font-size: var(--acms-text-xl);
  font-weight: 700;
  color: var(--acms-price-color);
}

.acms-list__action {
  display: flex;
  flex-direction: column;
  gap: var(--acms-space-2);
  width: 100%;
}

.acms-list__action .acms-btn {
  padding: var(--acms-space-1) var(--acms-space-2);
  font-size: var(--acms-text-xs);
  flex: 1;
}

/* Custom affiliate link button (outline style) */
.acms-btn--affiliate {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--acms-space-1);
  font-family: var(--acms-font);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  border-radius: var(--acms-radius);
  cursor: pointer;
  transition: all var(--acms-transition);
  border: 1.5px solid var(--acms-primary);
  background-color: transparent;
  color: var(--acms-primary);
}

.acms-btn--affiliate:hover {
  background-color: var(--acms-primary);
  color: #fff;
}

.acms-list__update {
  position: relative;
  font-size: 10px;
  color: var(--acms-text-muted);
  display: flex;
  align-items: center;
  gap: 4px;
  cursor: help;
}

.acms-list__update-tooltip {
  position: absolute;
  bottom: calc(100% + 6px);
  right: 0;
  width: 220px;
  padding: var(--acms-space-2);
  background-color: var(--acms-surface);
  border: 1px solid var(--acms-border);
  border-radius: var(--acms-radius-sm);
  box-shadow: var(--acms-shadow-lg);
  font-size: 11px;
  line-height: 1.4;
  color: var(--acms-text-secondary);
  text-align: left;
  opacity: 0;
  visibility: hidden;
  transform: translateY(4px);
  transition: all var(--acms-transition);
  z-index: 100;
  pointer-events: none;
}

.acms-list__update-tooltip::after {
  content: "";
  position: absolute;
  top: 100%;
  right: 12px;
  border: 5px solid transparent;
  border-top-color: var(--acms-surface);
}

.acms-list__update:hover .acms-list__update-tooltip {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* When main row is the only row (no expand content), give it full border-radius */
.acms-list__item:not(.has-expand) .acms-list__row--main {
  border-radius: var(--acms-radius-lg);
}

/* Row: Short Review (Full Width)
   Hàng riêng nằm giữa hàng chính và thanh mở rộng. Để trong cột giữa thì nó chen vào
   giữa tiêu đề và giá, cột hẹp lại nên chữ vỡ thành nhiều dòng ngắn, xấu và đẩy vỡ khung
   ở màn hình nhỏ. Tách thành hàng riêng thì nó chạy hết chiều ngang thẻ sản phẩm. */
.acms-list__row--review {
  padding: var(--acms-space-4);
  color: var(--acms-text-secondary);
  font-size: 0.9375rem;
  line-height: 1.65;
}

@media (max-width: 640px) {
  .acms-list__row--review {
    font-size: 0.9rem;
    text-align: left;
  }
}

/* Row 2: Toggle Bar (Full Width) */
.acms-list__row--toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--acms-space-4);
  border-top: 1px solid var(--acms-border);
  background-color: var(--acms-surface);
  cursor: pointer;
  transition: background-color var(--acms-transition);
}

.acms-list__row--toggle:hover {
  background-color: var(--acms-bg-alt);
}

/* Apply bottom corners only when NOT expanded */
/* When details are expanded, they get the bottom radius instead */
.acms-list__row--toggle:last-child,
.acms-list__item:not(:has(.acms-list__row--details.is-expanded)) .acms-list__row--toggle {
  border-bottom-left-radius: var(--acms-radius-lg);
  border-bottom-right-radius: var(--acms-radius-lg);
}

.acms-list__row--details.is-expanded {
  border-bottom-left-radius: var(--acms-radius-lg);
  border-bottom-right-radius: var(--acms-radius-lg);
}

/* Toggle Labels (left side) */
.acms-list__toggle-labels {
  display: flex;
  align-items: center;
  gap: var(--acms-space-2);
  flex-wrap: wrap;
}

.acms-list__toggle-label {
  font-size: var(--acms-text-sm);
  font-weight: 600;
  color: var(--acms-text);
  text-transform: uppercase;
  letter-spacing: 0.025em;
}

.acms-list__toggle-label i {
  font-size: var(--acms-text-base);
  color: var(--acms-text-muted);
}

/* Toggle Button (right side) */
.acms-list__expand-toggle {
  display: flex;
  align-items: center;
  gap: var(--acms-space-2);
  padding: 0;
  background: none;
  border: none;
  font-family: var(--acms-font);
  font-size: var(--acms-text-sm);
  font-weight: 500;
  color: var(--acms-text-muted);
  cursor: pointer;
  transition: color var(--acms-transition);
}

.acms-list__expand-toggle:hover {
  color: var(--acms-primary);
}

.acms-list__expand-toggle i {
  transition: transform var(--acms-transition);
}

.acms-list__expand-toggle[aria-expanded="true"] i {
  transform: rotate(180deg);
}

/* Toggle text visibility */
.acms-list__expand-text {
  display: inline;
}

.acms-list__collapse-text {
  display: none;
}

.acms-list__expand-toggle[aria-expanded="true"] .acms-list__expand-text {
  display: none;
}

.acms-list__expand-toggle[aria-expanded="true"] .acms-list__collapse-text {
  display: inline;
}

/* Row 3: Expandable Details (Full Width) */
.acms-list__row--details {
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--acms-transition-slow) ease-out;
  background-color: var(--acms-surface);
}

.acms-list__row--details.is-expanded {
  max-height: 10000px;
}

/* Details Grid */
.acms-list__details-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  padding: 0;
  border-top: 1px solid var(--acms-border);
}

/* Detail Section Base */
.acms-list__detail-section {
  padding: var(--acms-space-5);
  background-color: var(--acms-surface);
}

.acms-list__detail-section h4 {
  display: flex;
  align-items: center;
  gap: var(--acms-space-2);
  font-size: var(--acms-text-sm);
  font-weight: 600;
  color: var(--acms-text);
  margin: 0 0 var(--acms-space-3) 0;
}

.acms-list__detail-section h4 i {
  color: var(--acms-primary);
}

/* Description Section */
.acms-list__description p {
  font-size: var(--acms-text-sm);
  line-height: 1.7;
  color: var(--acms-text-secondary);
  margin: 0;
}

/* Pros & Cons Section */
.acms-list__pros-cons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--acms-space-6);
}

.acms-list__pros,
.acms-list__cons {
  padding: var(--acms-space-4);
  border-radius: var(--acms-radius);
  background-color: var(--acms-bg);
}

.acms-list__pros h4 {
  color: var(--acms-success);
  display: flex;
  align-items: center;
  gap: var(--acms-space-2);
}

.acms-list__cons h4 {
  color: var(--acms-danger);
  display: flex;
  align-items: center;
  gap: var(--acms-space-2);
}

.acms-list__pros ul,
.acms-list__cons ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.acms-list__pros li,
.acms-list__cons li {
  position: relative;
  padding: var(--acms-space-2) 0 var(--acms-space-2) var(--acms-space-5);
  font-size: var(--acms-text-sm);
  color: var(--acms-text-secondary);
  line-height: 1.6;
}

.acms-list__pros li::before {
  content: "+";
  position: absolute;
  left: 0;
  color: var(--acms-success);
  font-weight: 700;
  font-size: var(--acms-text-base);
}

.acms-list__cons li::before {
  content: "−";
  position: absolute;
  left: 0;
  color: var(--acms-danger);
  font-weight: 700;
  font-size: var(--acms-text-base);
}

/* Custom Tabs Section */
.acms-list__custom-tab {
  padding: 15px;
}

.acms-list__tab-content {
  font-size: var(--acms-text-sm);
  line-height: 1.7;
  color: var(--acms-text-secondary);
}

.acms-list__tab-content p {
  margin: 0 0 var(--acms-space-3) 0;
}

.acms-list__tab-content p:last-child {
  margin-bottom: 0;
}

.acms-list__tab-content h2,
.acms-list__tab-content h3,
.acms-list__tab-content h4 {
  color: var(--acms-text);
  margin: var(--acms-space-4) 0 var(--acms-space-2) 0;
}

.acms-list__tab-content h2:first-child,
.acms-list__tab-content h3:first-child,
.acms-list__tab-content h4:first-child {
  margin-top: 0;
}

.acms-list__tab-content ul,
.acms-list__tab-content ol {
  margin: 0 0 var(--acms-space-3) 0;
  padding-left: var(--acms-space-5);
  color: var(--acms-text-secondary);
}

.acms-list__tab-content li {
  margin-bottom: var(--acms-space-2);
}

.acms-list__tab-content blockquote {
  margin: var(--acms-space-3) 0;
  padding: var(--acms-space-3) var(--acms-space-4);
  border-left: 4px solid var(--acms-primary);
  background-color: var(--acms-bg-alt);
  color: var(--acms-text-secondary);
  font-style: italic;
}

.acms-list__tab-content a {
  color: var(--acms-primary);
  text-decoration: underline;
}

.acms-list__tab-content a:hover {
  color: var(--acms-primary-hover);
}

/* Features Section - Vertical List */
.acms-list__features ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--acms-space-2);
}

.acms-list__features li {
  position: relative;
  padding: var(--acms-space-2) 0 var(--acms-space-2) var(--acms-space-4);
  font-size: var(--acms-text-sm);
  color: var(--acms-text-secondary);
  border-bottom: 1px dashed var(--acms-border);
}

.acms-list__features li:last-child {
  border-bottom: none;
}

.acms-list__features li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: var(--acms-space-2);
  line-height: inherit;
  color: var(--acms-success);
  font-weight: 700;
}

/* List Responsive - Tablet */
@media (max-width: 800px) {
  .acms-list__row--main {
    grid-template-columns: 120px 1fr;
    grid-template-rows: auto auto;
  }

  .acms-list__image {
    width: 120px;
    height: 120px;
    grid-row: span 2;
  }

  .acms-list__price-action {
    grid-column: 2;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: var(--acms-space-4);
  }

  .acms-list__price-group {
    text-align: left;
  }

  .acms-list__action {
    width: 100%;
  }

  .acms-list__action .acms-btn {
    width: 100%;
  }
}

/* ========================================
 * MOBILE OVERFLOW FIX
 * Prevent horizontal scrolling on small screens
 * ======================================== */

@media (max-width: 767px) {
    .acms-list,
    .acms-grid {
        max-width: 100%;
        overflow-x: hidden;
    }
    
    /* Ensure list items don't overflow */
    .acms-list__item,
    .acms-grid__item {
        max-width: 100%;
    }
}


/* List Responsive - Mobile */
@media (max-width: 600px) {
  .acms-list {
    margin-top: 0;
  }

  .acms-list__item {
    margin-left: 0;
    margin-top: 15px;
  }

  .acms-list__rank {
    top: 0;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    width: 2rem;
    height: 2rem;
    font-size: var(--acms-text-base);
  }

  .acms-list__item:hover .acms-list__rank {
    transform: translateX(-50%) translateY(-50%) scale(1.1);
  }

  .acms-list__row--main {
    grid-template-columns: 1fr;
    text-align: center;
    padding-top: var(--acms-space-6);
  }

  .acms-list__image {
    width: 100%;
    max-width: 200px;
    height: 200px;
    margin: 0 auto;
    grid-row: auto;
  }

  .acms-list__info {
    text-align: center;
  }

  .acms-list__badges,
  .acms-list__meta {
    justify-content: center;
    flex-wrap: wrap;
  }

  .acms-list__score-wrapper {
    justify-content: center;
  }

  .acms-list__score-tooltip {
    left: 50%;
    transform: translateX(-50%) translateY(4px);
  }

  .acms-list__score-wrapper:hover .acms-list__score-tooltip,
  .acms-list__score-info:focus + .acms-list__score-tooltip {
    transform: translateX(-50%) translateY(0);
  }

  .acms-list__score-tooltip::after {
    left: 50%;
    transform: translateX(-50%);
  }

  .acms-list__price-action {
    flex-direction: column;
    align-items: center;
    grid-column: auto;
  }

  .acms-list__price-group {
    text-align: center;
  }

  .acms-list__price-old-row {
    justify-content: center;
  }

  .acms-list__action {
    width: 100%;
  }

  .acms-list__action .acms-btn {
    padding: var(--acms-space-3) var(--acms-space-4);
    font-size: var(--acms-text-lg);
  }

  /* Details responsive */
  .acms-list__pros-cons {
    grid-template-columns: 1fr;
  }

  .acms-list__detail-section {
    padding: var(--acms-space-4);
  }
}

/* ===========================================
 * ERROR MESSAGE
 * =========================================== */

.acms-error {
  padding: var(--acms-space-3);
  background-color: rgba(239, 68, 68, 0.1);
  border: 1px solid var(--acms-danger);
  border-radius: var(--acms-radius);
  color: var(--acms-danger);
  font-style: italic;
}

/* ============================================================
 * Coupons shortcode [acms_coupons]
 *
 * Kích thước lấy từ DOM thật của trang tham khảo (getBoundingClientRect/getComputedStyle,
 * không áng chừng theo ảnh chụp): card cao 164px, bo 12px, viền 1px + shadow mềm, logo
 * 128x128, tiêu đề 24px/700, tên store 14px/600, khối CTA 208x48 với chip code nằm SAU nút
 * 180x48, hover nút co lại để hé thêm code. Màu thì giữ nguyên bộ token brand của site
 * (child theme remap --color-*), KHÔNG lấy bảng màu của trang tham khảo.
 * ============================================================ */
.acms-coupons {
  max-width: var(--acms-list-max-width);
  margin: 0 auto;
}

.acms-coupons-feed {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--acms-space-4);
}

.acms-coupons-row {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--acms-space-5);
  min-height: 10.125rem;
  padding: var(--acms-space-3) var(--acms-space-4);
  background: var(--acms-surface-raised);
  border: 1px solid var(--acms-border);
  border-radius: var(--acms-radius-lg);
  box-shadow: 0 4px 6px -1px rgba(17, 24, 39, 0.1), 0 2px 4px -2px rgba(17, 24, 39, 0.1);
}

.acms-coupons-row[hidden] {
  display: none;
}

.acms-coupons-row-logo {
  flex: 0 0 auto;
  width: 128px;
  height: 128px;
  object-fit: contain;
}

.acms-coupons-row-logo-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 128px;
  height: 128px;
  padding: var(--acms-space-6);
  background: var(--acms-bg-alt);
  border-radius: var(--acms-radius);
}

.acms-coupons-row-logo-fallback svg {
  width: 100%;
  height: 100%;
  color: var(--acms-text-muted);
}

.acms-coupons-row-main {
  min-width: 0;
}

.acms-coupons-row-title {
  margin: 0;
  font-size: var(--acms-text-2xl);
  font-weight: 700;
  line-height: 1.25;
  color: var(--acms-text);
}

.acms-coupons-row-store {
  display: block;
  margin-top: var(--acms-space-1);
  font-size: var(--acms-text-sm);
  font-weight: 600;
  color: var(--acms-primary);
  text-decoration: none;
}

/* Tên store là link sang trang riêng của store khi brand đã có bài, nên cần trạng thái hover
   rõ ràng; không có bài thì nó là <span>, hai rule dưới không chạm tới. */
a.acms-coupons-row-store:hover {
  color: var(--acms-primary-hover);
  text-decoration: underline;
}

/* Secondary info the reference row doesn't carry (Exclusive/Verified, Expires, Details):
 * grouped into 1 small muted meta line under the store name so it never competes with the
 * logo/title/button structure being matched size for size. */
.acms-coupons-row-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--acms-space-2);
  margin-top: var(--acms-space-2);
}

.acms-coupons-badge {
  flex: 0 0 auto;
  padding: 2px var(--acms-space-2);
  font-size: var(--acms-text-xs);
  font-weight: 700;
  color: #fff;
  background: var(--acms-warning);
  border-radius: var(--acms-radius-sm);
  white-space: nowrap;
}

.acms-coupons-badge-verified {
  background: var(--acms-success);
}

.acms-coupons-expires {
  font-size: var(--acms-text-xs);
  color: var(--acms-text-muted);
}

.acms-coupons-details-toggle {
  padding: 0;
  font-size: var(--acms-text-xs);
  font-weight: 600;
  color: var(--acms-primary);
  background: none;
  border: none;
  text-decoration: underline;
  cursor: pointer;
}

.acms-coupons-details {
  margin-top: var(--acms-space-2);
  font-size: var(--acms-text-sm);
  color: var(--acms-text-secondary);
}

.acms-coupons-details[hidden] {
  display: none;
}

/* CTA: chip code nằm PHÍA SAU nút trong cùng khung 208x48, nút phủ 180px tính từ mép trái
 * nên chỉ hở đuôi code; hover nút co còn 164px, hé thêm ký tự, đúng tín hiệu "bấm để lộ
 * code" của trang tham khảo. */
.acms-coupons-row-cta {
  position: relative;
  display: flex;
  align-items: center;
  width: 208px;
  height: 48px;
}

.acms-coupons-code {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 0 var(--acms-space-1);
  overflow: hidden;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: var(--acms-text-2xl);
  font-weight: 600;
  color: var(--acms-text);
  background: var(--acms-bg-alt);
  border: 1px dashed var(--acms-border);
  border-radius: var(--acms-radius-sm);
  cursor: pointer;
}

.acms-coupons-code.acms-coupons-copied::after {
  content: " \2713";
  color: var(--acms-success);
}

/* Style nền của nút để ở 1 class, vì nút này dùng ở NHIỀU ngữ cảnh: feed `/coupons/` (trong
 * .acms-coupons), card coupon trên trang store, và nút "Shop at ..." ở cột phải trang store.
 * Gắn cứng vào .acms-coupons như trước thì nút trên trang store mất sạch style và bị chip code
 * phủ lên. Phần chống theme cha đè (`.page-body a{...}`) tách xuống rule riêng ngay dưới. */
.acms-coupons-btn {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 180px;
  height: 48px;
  padding: 0 var(--acms-space-2);
  font-size: var(--acms-text-sm);
  font-weight: 700;
  white-space: nowrap;
  color: #fff;
  background: var(--acms-primary);
  border-radius: var(--acms-radius-sm) 0 0 var(--acms-radius-sm);
  text-decoration: none;
  text-align: center;
  transition: width var(--acms-transition-slow), background var(--acms-transition);
}

.acms-coupons-row:hover .acms-coupons-btn {
  width: 164px;
}

.acms-coupons-btn:hover {
  background: var(--acms-primary-hover);
  color: #fff;
}

/* Trang bài/Page bọc nội dung trong .page-body và có rule chung `.page-body a{color:...;
 * text-decoration:underline}` cho mọi link trong bài (đúng rule brand link đen + gạch chân).
 * Specificity (0,1,1) của nó cao hơn 1 class đơn (0,1,0) nên sẽ đè mất màu chữ trắng và bỏ gạch
 * chân của nút. 2 class (0,2,0) thắng mà không cần !important. */
.page-body .acms-coupons-btn,
.acms-coupons .acms-coupons-btn,
.acms-coupons-row-cta .acms-coupons-btn {
  color: #fff;
  text-decoration: none;
}

/* Deal không có code thì không có gì để hé: nút chiếm trọn khung, bo đủ 4 góc. */
.acms-coupons-row-cta-deal .acms-coupons-btn,
.acms-coupons-row:hover .acms-coupons-row-cta-deal .acms-coupons-btn {
  width: 100%;
  border-radius: var(--acms-radius-sm);
}

/* Pager: ô 36x36, ô trang hiện tại nền accent chữ trắng, mũi tên đầu/cuối mờ đi khi hết
 * đường. Selector 2 class vì lý do specificity y như nút CTA ở trên. */
.acms-coupons-pager {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--acms-space-1);
  margin-top: var(--acms-space-6);
}

.acms-coupons .acms-coupons-pager-item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  padding: 0 var(--acms-space-2);
  font-size: var(--acms-text-sm);
  font-weight: 500;
  color: var(--acms-text);
  background: var(--acms-surface-raised);
  border: 1px solid var(--acms-border);
  border-radius: var(--acms-radius-sm);
  text-decoration: none;
  transition: background var(--acms-transition), color var(--acms-transition);
}

.acms-coupons .acms-coupons-pager-item:hover {
  color: var(--acms-text);
  background: var(--acms-bg-alt);
}

.acms-coupons .acms-coupons-pager-item.is-current,
.acms-coupons .acms-coupons-pager-item.is-current:hover {
  font-weight: 700;
  color: #fff;
  background: var(--acms-primary);
  border-color: var(--acms-primary);
}

.acms-coupons .acms-coupons-pager-item.is-disabled,
.acms-coupons .acms-coupons-pager-item.is-disabled:hover {
  background: var(--acms-surface-raised);
  opacity: 0.4;
  cursor: not-allowed;
}

.acms-coupons-pager-item svg {
  width: 16px;
  height: 16px;
}

.acms-coupons-pager-gap {
  min-width: 20px;
  text-align: center;
  color: var(--acms-text-muted);
}

.acms-coupons-empty {
  color: var(--acms-text-muted);
  font-style: italic;
}

@media (max-width: 600px) {
  /* Khổ điện thoại: 2 hàng thay vì 3 cột. Bản tham khảo giữ nguyên 3 cột ở mọi khổ màn với
   * khối CTA cố định 208px, nhưng card của mình rộng 351px (còn lề `.wrap`) nên cột chữ chỉ
   * còn 53px, tiêu đề cắt cụt và nút đè lên tên store (đo thật trong iframe 390px). Nên hàng 1
   * là logo + chữ, hàng 2 là nút full width. CƠ CHẾ GIẤU CODE GIỮ NGUYÊN: chip code vẫn nằm
   * `position:absolute` phía sau nút, chỉ hở phần đuôi, KHÔNG được để `position:static` in trọn
   * mã ra feed (lỗi đã mắc: mất trắng cú click affiliate vì ai cũng đọc được code). */
  .acms-coupons-row {
    grid-template-columns: auto 1fr;
    column-gap: 0;
    row-gap: var(--acms-space-3);
    min-height: 0;
  }

  .acms-coupons-row-logo,
  .acms-coupons-row-logo-fallback {
    width: 72px;
    height: 72px;
  }

  .acms-coupons-row-logo-fallback {
    padding: var(--acms-space-3);
  }

  /* Cột chữ tự cách logo bằng padding của chính nó, đúng cách bản tham khảo làm (`pl-2` trên
   * khối chữ chứ không phải gap của lưới). */
  .acms-coupons-row-main {
    padding-left: var(--acms-space-3);
  }

  /* Cắt 2 dòng như `line-clamp-2` trên h3 của bản tham khảo, cỡ chữ `text-lg` mobile so với
   * `md:text-2xl` desktop. */
  .acms-coupons-row-title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: var(--acms-text-lg);
  }

  .acms-coupons-row-store,
  .acms-coupons-expires,
  .acms-coupons-details {
    font-size: var(--acms-text-xs);
  }

  .acms-coupons-row-cta {
    grid-column: 1 / -1;
    width: 100%;
  }

  /* Nút chừa lại đúng khoảng hở như desktop (28px thường, 44px khi chạm) để đuôi code ló ra. */
  .acms-coupons-btn {
    width: calc(100% - 28px);
  }

  .acms-coupons-row:hover .acms-coupons-btn {
    width: calc(100% - 44px);
  }

  /* Deal không có code thì không có gì để hé, nút chiếm trọn hàng. Khai lại trong media query
   * vì rule bản desktop đứng trước nên cùng specificity sẽ thua rule ngay trên. */
  .acms-coupons-row-cta-deal .acms-coupons-btn,
  .acms-coupons-row:hover .acms-coupons-row-cta-deal .acms-coupons-btn {
    width: 100%;
  }
}

/* ============================================================
 * Trang chi tiết store (StorePage.php)
 *
 * Card coupon ở đây KHÁC card ở feed `/coupons/`: cả trang chỉ có một brand nên bỏ logo lặp,
 * chỗ đó nhường cho khối mức giảm cỡ lớn, và phần mô tả hiện sẵn thay vì giấu sau nút. Kích
 * thước bám theo số đo thật của trang tham khảo (card ~849x174, mức giảm 42px/20px, tiêu đề
 * 24px). Màu vẫn là token brand, không lấy bảng màu của họ.
 * ============================================================ */
.acms-store-section {
  margin-bottom: var(--acms-space-8);
}

.acms-store-section-title {
  margin: 0 0 var(--acms-space-4);
  font-size: var(--acms-text-xl);
  font-weight: 700;
  color: var(--acms-text);
}

.acms-store-section-subtitle {
  margin: var(--acms-space-5) 0 var(--acms-space-2);
  font-size: var(--acms-text-lg);
  font-weight: 700;
  color: var(--acms-text);
}

.acms-store-offers {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--acms-space-4);
}

.acms-store-offer {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--acms-space-5);
  padding: var(--acms-space-4);
  background: var(--acms-surface-raised);
  border: 1px solid var(--acms-border);
  border-radius: var(--acms-radius-lg);
  box-shadow: 0 4px 6px -1px rgba(17, 24, 39, 0.1), 0 2px 4px -2px rgba(17, 24, 39, 0.1);
}

.acms-store-offer-value {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--acms-space-1);
  text-align: center;
}

.acms-store-offer-amount {
  font-size: 2.625rem;
  font-weight: 700;
  line-height: 1;
  color: var(--acms-primary);
}

.acms-store-offer-unit {
  font-size: var(--acms-text-xl);
  font-weight: 600;
  color: var(--acms-text-secondary);
}

.acms-store-offer-brand {
  display: block;
  font-size: var(--acms-text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--acms-text-muted);
}

.acms-store-offer-title {
  margin: var(--acms-space-1) 0 0;
  font-size: var(--acms-text-2xl);
  font-weight: 700;
  line-height: 1.25;
  color: var(--acms-text);
}

.acms-store-offer-desc {
  margin: var(--acms-space-2) 0 0;
  font-size: var(--acms-text-base);
  line-height: 1.5;
  color: var(--acms-text-secondary);
}

.acms-store-offer-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--acms-space-2);
  margin-top: var(--acms-space-2);
  font-size: var(--acms-text-sm);
  color: var(--acms-text-muted);
}

.acms-store-offer-verified {
  font-weight: 600;
  color: var(--acms-success);
}

/* Coupon đã chết: card mờ đi và KHÔNG có nút dẫn ra link mua. */
.acms-store-offers-expired .acms-store-offer {
  box-shadow: none;
  opacity: 0.7;
}

.acms-store-offer-dead {
  display: inline-flex;
  align-items: center;
  height: 36px;
  padding: 0 var(--acms-space-4);
  font-size: var(--acms-text-sm);
  font-weight: 700;
  color: var(--acms-text-muted);
  background: var(--acms-bg-alt);
  border-radius: var(--acms-radius-sm);
}

/* Khối cột phải: số liệu, FAQ, nút sang store. */
.acms-store-card {
  padding: var(--acms-space-4);
  margin-bottom: var(--acms-space-5);
  background: var(--acms-surface-raised);
  border: 1px solid var(--acms-border);
  border-radius: var(--acms-radius-lg);
}

.acms-store-card-title {
  margin: 0 0 var(--acms-space-3);
  font-size: var(--acms-text-lg);
  font-weight: 700;
  color: var(--acms-text);
}

.acms-store-stats {
  margin: 0;
}

.acms-store-stat {
  display: flex;
  justify-content: space-between;
  gap: var(--acms-space-3);
  padding: var(--acms-space-2) 0;
  border-bottom: 1px solid var(--acms-border);
}

.acms-store-stat:last-child {
  border-bottom: none;
}

.acms-store-stat dt {
  font-size: var(--acms-text-sm);
  color: var(--acms-text-secondary);
}

.acms-store-stat dd {
  margin: 0;
  font-size: var(--acms-text-sm);
  font-weight: 700;
  color: var(--acms-text);
}

.acms-store-faq + .acms-store-faq {
  margin-top: var(--acms-space-4);
}

.acms-store-faq-q {
  margin: 0 0 var(--acms-space-1);
  font-size: var(--acms-text-sm);
  font-weight: 700;
  color: var(--acms-text);
}

.acms-store-faq-a {
  margin: 0;
  font-size: var(--acms-text-sm);
  line-height: 1.55;
  color: var(--acms-text-secondary);
}

/* Bảng tóm tắt: khung cuộn ngang riêng để khổ điện thoại không vỡ layout. */
.acms-store-table-scroll {
  overflow-x: auto;
}

.acms-store-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--acms-text-sm);
}

.acms-store-table th,
.acms-store-table td {
  padding: var(--acms-space-3);
  text-align: left;
  border-bottom: 1px solid var(--acms-border);
}

.acms-store-table th {
  font-weight: 700;
  color: var(--acms-text);
  background: var(--acms-bg-alt);
  white-space: nowrap;
}

.acms-store-table td:first-child {
  font-weight: 700;
  color: var(--acms-primary);
  white-space: nowrap;
}

.acms-store-steps {
  margin: 0;
  /* Khai list-style rõ ràng: theme hay reset `ol{list-style:none}`, mất số thứ tự thì các bước
   * đọc như một danh sách rời rạc chứ không phải quy trình. */
  list-style: decimal;
  padding-left: var(--acms-space-5);
  font-size: var(--acms-text-base);
  line-height: 1.6;
  color: var(--acms-text-secondary);
}

.acms-store-steps li {
  margin-bottom: var(--acms-space-2);
}

.acms-store-howto p {
  font-size: var(--acms-text-base);
  line-height: 1.6;
  color: var(--acms-text-secondary);
}

.acms-store-similar {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--acms-space-2);
}

.acms-store-similar a {
  display: inline-flex;
  align-items: center;
  height: 36px;
  padding: 0 var(--acms-space-4);
  font-size: var(--acms-text-sm);
  font-weight: 600;
  color: var(--acms-text);
  background: var(--acms-surface-raised);
  border: 1px solid var(--acms-border);
  border-radius: var(--acms-radius-full);
  text-decoration: none;
}

.acms-store-similar a:hover {
  color: var(--acms-primary);
  border-color: var(--acms-primary);
}

@media (max-width: 760px) {
  .acms-store-offer {
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--acms-space-3);
    padding: var(--acms-space-3);
  }

  .acms-store-offer-amount {
    font-size: var(--acms-text-2xl);
  }

  .acms-store-offer-unit {
    font-size: var(--acms-text-sm);
  }

  .acms-store-offer-title {
    font-size: var(--acms-text-lg);
  }

  .acms-store-offer-desc {
    font-size: var(--acms-text-sm);
  }

  /* Nút xuống hàng riêng, đúng cách feed `/coupons/` làm ở khổ điện thoại: nút giãn hết hàng
   * nhưng vẫn chừa 28px để đuôi code ló ra, deal không có code thì chiếm trọn. */
  .acms-store-offer-cta {
    grid-column: 1 / -1;
  }

  .acms-store-offer-cta .acms-coupons-row-cta {
    width: 100%;
  }

  .acms-store-offer-cta .acms-coupons-btn {
    width: calc(100% - 28px);
  }

  .acms-store-offer-cta .acms-coupons-row-cta-deal .acms-coupons-btn {
    width: 100%;
  }
}

/* ============================================================
 * Hộp hé mã coupon (frontend.js, CouponReveal)
 *
 * Mở ở tab mới sau khi bấm, hoặc mở tại chỗ khi trình duyệt chặn cửa sổ bật lên / brand chưa có
 * trang store. Dùng thẻ <dialog> của trình duyệt nên lớp phủ và bẫy tiêu điểm có sẵn.
 * ============================================================ */
.acms-coupon-modal {
  /* `margin:auto` là thứ căn giữa một <dialog> mở bằng showModal() (UA đặt inset:0 rồi để margin
   * tự chia đều). Theme có reset `*{margin:0}` nên mất căn giữa, hộp dính góc trên trái: phải
   * khai lại ở đây, không dựa vào mặc định của trình duyệt. */
  margin: auto;
  width: min(440px, calc(100vw - 32px));
  padding: var(--acms-space-6);
  color: var(--acms-text);
  background: var(--acms-surface-raised);
  border: none;
  border-radius: var(--acms-radius-lg);
  box-shadow: 0 20px 40px -12px rgba(17, 24, 39, 0.35);
}

.acms-coupon-modal::backdrop {
  background: rgba(17, 24, 39, 0.55);
}

.acms-coupon-modal-close {
  position: absolute;
  top: var(--acms-space-2);
  right: var(--acms-space-3);
  padding: 0;
  font-size: var(--acms-text-2xl);
  line-height: 1;
  color: var(--acms-text-muted);
  background: none;
  border: none;
  cursor: pointer;
}

.acms-coupon-modal-close:hover {
  color: var(--acms-text);
}

.acms-coupon-modal-brand {
  margin: 0;
  font-size: var(--acms-text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--acms-primary);
}

.acms-coupon-modal-title {
  margin: var(--acms-space-2) 0 0;
  font-size: var(--acms-text-xl);
  font-weight: 700;
  line-height: 1.3;
  color: var(--acms-text);
}

.acms-coupon-modal-hint {
  margin: var(--acms-space-2) 0 var(--acms-space-4);
  font-size: var(--acms-text-sm);
  color: var(--acms-text-secondary);
}

/* Ô mã: viền đứt như tem giảm giá, mã cỡ lớn để đọc và chép tay được. */
.acms-coupon-modal-code {
  display: flex;
  align-items: stretch;
  gap: var(--acms-space-2);
  margin-bottom: var(--acms-space-4);
}

.acms-coupon-modal-code[hidden] {
  display: none;
}

.acms-coupon-modal-code-text {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 0 var(--acms-space-3);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: var(--acms-text-2xl);
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--acms-text);
  background: var(--acms-bg-alt);
  border: 1px dashed var(--acms-border);
  border-radius: var(--acms-radius-sm);
  word-break: break-all;
}

.acms-coupon-modal-copy {
  flex: 0 0 auto;
  min-width: 92px;
  padding: 0 var(--acms-space-4);
  font-size: var(--acms-text-sm);
  font-weight: 700;
  color: #fff;
  background: var(--acms-primary);
  border: none;
  border-radius: var(--acms-radius-sm);
  cursor: pointer;
}

.acms-coupon-modal-copy:hover {
  background: var(--acms-primary-hover);
}

.acms-coupon-modal-go {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  font-size: var(--acms-text-base);
  font-weight: 700;
  color: var(--acms-text);
  background: var(--acms-surface-raised);
  border: 1px solid var(--acms-border);
  border-radius: var(--acms-radius-sm);
  text-decoration: none;
}

.acms-coupon-modal-go:hover {
  color: var(--acms-primary);
  border-color: var(--acms-primary);
}

.acms-coupon-modal-desc {
  margin: var(--acms-space-4) 0 0;
  font-size: var(--acms-text-sm);
  line-height: 1.55;
  color: var(--acms-text-secondary);
}

.acms-coupon-modal-desc[hidden] {
  display: none;
}

/* Cả ô coupon bấm được, đúng như trang tham khảo (thẻ bọc của họ có cursor:pointer), không chỉ
   riêng cái nút. */
.acms-coupons-row[data-acms-out],
.acms-store-offer[data-acms-out] {
  cursor: pointer;
}