/* Amazon Price Tracker — public-facing styles.
 * Uses CSS logical properties so the layout works correctly in both LTR (English) and RTL (Arabic).
 * Colors live in CSS variables so they can be tweaked in one place.
 */

:root {
    --apt-bg: #f8fafc;
    --apt-surface: #ffffff;
    --apt-surface-alt: #f1f5f9;
    --apt-border: #e2e8f0;
    --apt-primary: #0a4d3a;        /* dark forest green — main brand color (v0.6.2) */
    --apt-primary-hover: #0d6147;
    --apt-text: #1a202c;
    --apt-muted: #64748b;
    --apt-accent: #ff9900;         /* Amazon orange — used only on the Amazon CTA button */
    --apt-accent-hover: #ffac33;
    --apt-success: #047857;
    --apt-success-bg: #d1fae5;
    --apt-success-border: #6ee7b7;
    --apt-danger: #b91c1c;
    --apt-danger-bg: #fee2e2;
    --apt-danger-border: #fca5a5;
    --apt-info: #1e3a8a;           /* deeper blue, replaces old hot blue */
}

/* --- Custom page wrapper (used by templates/single-tracked-product.php) --- */

.apt-page {
    padding: 36px 16px 64px;
    background: var(--apt-bg);
    min-height: 60vh;
}
.apt-page-inner {
    max-width: 960px;
    margin: 0 auto;
}
.apt-page-header {
    margin-block-end: 24px;
}

/* v0.15.0 — Inline breadcrumb on category pages. Same visual language as the
   single-product breadcrumb at the top of the product page, but inside the
   header so it groups with the category name visually. */
.apt-cat-crumbs {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 6px;
    align-items: center;
    font-size: 13px;
    margin-bottom: 8px;
    color: var(--apt-muted);
}
.apt-cat-crumbs .apt-breadcrumb-link {
    color: var(--apt-primary);
    text-decoration: none;
    padding: 2px 6px;
    border-radius: 6px;
}
.apt-cat-crumbs .apt-breadcrumb-link:hover { background: rgba(10, 77, 58, 0.08); }
.apt-cat-crumbs .apt-breadcrumb-current { color: var(--apt-text); font-weight: 700; padding: 2px 6px; }
.apt-cat-crumbs .apt-breadcrumb-sep { color: #cbd5e1; }

/* v0.15.0 — Mode toggle on department category pages. Lets visitors switch
   between "browse by subcategory" (department layout) and "see all products
   in this department flat" so deep parents are not just stairwells. */
.apt-cat-mode-toggle {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 6px;
    background: var(--apt-surface-alt);
    padding: 4px;
    border-radius: 999px;
    margin-top: 12px;
    border: 1px solid var(--apt-border);
}
.apt-cat-mode {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    border-radius: 999px;
    text-decoration: none;
    font-weight: 700;
    font-size: 13px;
    color: var(--apt-muted);
    transition: background 0.15s ease, color 0.15s ease;
}
.apt-cat-mode:hover,
.apt-cat-mode:focus {
    color: var(--apt-primary);
    text-decoration: none;
}
.apt-cat-mode-active {
    background: #ffffff !important;
    color: var(--apt-primary) !important;
    box-shadow: 0 1px 3px rgba(10, 77, 58, 0.12);
}
@media (max-width: 720px) {
    .apt-cat-mode-toggle { width: 100%; justify-content: stretch; }
    .apt-cat-mode { flex: 1 1 auto; justify-content: center; font-size: 12px; padding: 8px 10px; }
}
.apt-page-title {
    font-size: clamp(24px, 4vw, 34px);
    font-weight: 700;
    margin: 0 0 8px;
    color: var(--apt-primary);
    line-height: 1.2;
}
.apt-page-subtitle {
    color: #6b7177;
    font-size: 13px;
    margin: 0;
}
.apt-asin-label {
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-size: 11px;
    font-weight: 600;
    color: #6b7177;
}
.apt-asin-code {
    background: #eef0f3;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 12px;
    color: #1a1a1a;
}
.apt-subtitle-sep {
    color: #b8bcc2;
    margin: 0 6px;
}
.apt-page-body {
    margin-block-start: 28px;
    padding: 24px;
    background: #fff;
    border: 1px solid #e3e5e8;
    border-radius: 10px;
}
.apt-section-title {
    margin-block-start: 0;
    margin-block-end: 12px;
    font-size: 18px;
    color: #1a1a1a;
}
.apt-body-content {
    color: #333;
    line-height: 1.65;
}
.apt-body-content > *:first-child { margin-block-start: 0; }
.apt-body-content > *:last-child  { margin-block-end: 0; }

/* --- Product panel (used inside the page wrapper or as a shortcode) --- */

.apt-product-panel {
    font-family: inherit;
    margin-block-end: 2em;
    color: #222;
}

.apt-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    align-items: flex-start;
    padding: 20px;
    background: var(--apt-surface);
    border: 1px solid var(--apt-border);
    border-radius: 12px;
    margin-block-end: 24px;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
}

.apt-image {
    flex: 0 0 200px;
    max-width: 200px;
}
.apt-image img {
    max-width: 100%;
    height: auto;
    border-radius: 6px;
    background: #fff;
    padding: 8px;
    border: 1px solid #e3e5e8;
}

.apt-stats {
    flex: 1 1 280px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

@media (max-width: 600px) {
    .apt-stats { grid-template-columns: repeat(2, 1fr); }
    .apt-image { flex: 0 0 100%; max-width: 100%; text-align: center; }
}

.apt-stat {
    background: var(--apt-surface-alt);
    padding: 14px 16px;
    border-radius: 10px;
    border: 1px solid var(--apt-border);
    text-align: center;
}
.apt-stat-label {
    display: block;
    font-size: 11px;
    color: var(--apt-muted);
    margin-block-end: 6px;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    font-weight: 600;
}
.apt-stat-value {
    display: block;
    font-size: 22px;
    font-weight: 700;
    color: var(--apt-primary);
}
.apt-stat-current .apt-stat-value { color: var(--apt-success); }
.apt-stat-lowest  .apt-stat-value { color: var(--apt-primary); }
.apt-stat-highest .apt-stat-value { color: var(--apt-danger); }

.apt-buy-button {
    grid-column: 1 / -1;
    display: inline-block;
    padding: 14px 22px;
    background: var(--apt-accent);
    color: #111;
    text-decoration: none;
    border-radius: 10px;
    text-align: center;
    font-weight: 700;
    font-size: 15px;
    border: 1px solid #e58c00;
    transition: background-color 0.15s ease, transform 0.15s ease;
}
.apt-buy-button:hover,
.apt-buy-button:focus {
    background: var(--apt-accent-hover);
    color: #111;
    text-decoration: none;
    transform: translateY(-1px);
}

.apt-chart-wrap {
    padding: 20px;
    background: var(--apt-surface);
    border: 1px solid var(--apt-border);
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
}
.apt-chart-wrap h3 {
    margin-block-start: 0;
    margin-block-end: 14px;
    font-size: 18px;
    color: var(--apt-primary);
}
.apt-no-history,
.apt-thin-history {
    color: #6b7177;
    font-style: italic;
    margin: 0 0 12px;
    font-size: 13px;
}
.apt-chart-container-thin {
    opacity: 0.85;
}

/* "vs lowest" badge */
.apt-stat-badge-wrap {
    margin-block-start: 8px;
}
.apt-badge {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.3px;
    text-transform: uppercase;
}
.apt-badge-at-lowest {
    background: var(--apt-success-bg);
    color: var(--apt-success);
    border: 1px solid var(--apt-success-border);
}
.apt-badge-above-lowest {
    background: var(--apt-danger-bg);
    color: var(--apt-danger);
    border: 1px solid var(--apt-danger-border);
}

/* --- Products grid (shortcode [apt_products_grid]) --- */

.apt-products-grid {
    display: grid;
    grid-template-columns: repeat(var(--apt-grid-cols, 4), minmax(0, 1fr));
    gap: 14px;
    margin-block: 24px;
    max-width: 1200px;
    margin-inline: auto;
}
@media (max-width: 1080px) {
    .apt-products-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
}
@media (max-width: 820px) {
    /* v0.13.1 — !important added because LiteSpeed CSS minify/combine was
     * reordering rules so the inline-style --apt-grid-cols:4 var-driven base
     * rule was winning over the media query. Cards rendered 4-per-row on
     * iPhone (visible in Ahmed's screenshot of /tracker/ on iOS Safari).
     * !important guarantees the mobile rule wins regardless of cascade order. */
    .apt-products-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (max-width: 600px) {
    /* v0.8.0 — keep TWO cards per row on phones (Amazon.sa mobile pattern).
       Previous build dropped to 1 card per row, which made the home page
       feel huge and required lots of scrolling. */
    .apt-products-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px !important; }
    .apt-card-body { padding: 9px 10px 11px !important; gap: 4px !important; }
    .apt-card-title { font-size: 12px !important; min-height: 2.6em !important; }
    .apt-card-price { font-size: 15px !important; }
    .apt-card-cta { display: none !important; } /* "View details" line — saves vertical space */
    /* v0.15.0 — keep the rebuilt price-signal compact on 2-card mobile grid. */
    .apt-card-signal { gap: 4px !important; margin-block-start: 2px !important; }
    .apt-card-signal-headline { font-size: 10px !important; padding: 3px 7px !important; line-height: 1.25 !important; }
    .apt-card-meter-row { gap: 4px !important; }
    .apt-card-meter-end { font-size: 8px !important; letter-spacing: 0.2px !important; }
    .apt-card-meter { height: 5px !important; }
    .apt-card-meter-marker { width: 2px !important; top: -3px !important; bottom: -3px !important; margin-inline-start: -1px !important; }
    .apt-card-range { font-size: 9px !important; }
    .apt-card-range-stable { font-size: 10px !important; }
    .apt-card-buy { padding: 8px 8px !important; font-size: 11px !important; }
}
@media (max-width: 360px) {
    /* Very small phones (SE-class) — single column is fine here. */
    .apt-products-grid { grid-template-columns: 1fr !important; }
}

.apt-card {
    display: flex;
    flex-direction: column;
    background: var(--apt-surface);
    border: 1px solid var(--apt-border);
    border-radius: 10px;
    overflow: hidden;
    color: var(--apt-text);
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.apt-card:hover,
.apt-card:focus-within {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.08);
    border-color: #cbd5e1;
}
.apt-card-link {
    display: flex;
    flex-direction: column;
    flex: 1;
    text-decoration: none;
    color: inherit;
}
.apt-card-link:hover,
.apt-card-link:focus {
    text-decoration: none;
    color: inherit;
}
.apt-card-image {
    aspect-ratio: 1 / 1;
    background: var(--apt-surface-alt);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
    overflow: hidden;
}
.apt-card-image img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
}
.apt-card-image-placeholder {
    width: 100%;
    height: 100%;
    background:
        linear-gradient(135deg, rgba(15, 23, 42, 0.04) 0%, rgba(15, 23, 42, 0.10) 100%);
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--apt-muted);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    font-weight: 600;
}
.apt-card-body {
    padding: 11px 13px 13px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1;
}
.apt-card-title {
    font-size: 13px;
    font-weight: 600;
    margin: 0;
    color: var(--apt-primary);
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 2.7em;
}
.apt-card-price {
    font-size: 17px;
    font-weight: 700;
    color: var(--apt-success);
    margin-block-start: auto;
}
.apt-card-price-empty {
    font-size: 14px;
    color: var(--apt-muted);
    font-style: italic;
    font-weight: normal;
}
/* v0.15.0 — Rebuilt card price signal. Friend-tested feedback on v0.11/v0.12
   was that the gradient bar + tiny pill needed explanation. The new block leads
   with a tone-colored HEADLINE sentence ("📈 15% above lowest price") so the
   meaning is the first thing a reader sees; the bar below is now flanked by
   explicit "Low" / "High" tags (translated) with a vertical-line marker that
   reads as a value tick, and SAR endpoints sit inline at each end of the bar.
   Removed the duplicate .apt-card-badge pill — the headline already carries
   the tone. */

.apt-card-signal {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-block-start: 4px;
}

.apt-card-signal-headline {
    display: inline-block;
    align-self: flex-start;
    padding: 4px 9px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: 0.1px;
    border: 1px solid transparent;
    max-width: 100%;
}
.apt-card-signal-headline-good {
    background: var(--apt-success-bg);
    color: var(--apt-success);
    border-color: var(--apt-success-border);
}
.apt-card-signal-headline-mid {
    background: #fff7ed;
    color: #c2410c;
    border-color: #fed7aa;
}
.apt-card-signal-headline-high {
    background: var(--apt-danger-bg);
    color: var(--apt-danger);
    border-color: var(--apt-danger-border);
}
.apt-card-signal-headline-stable {
    background: #f1f5f9;
    color: #475569;
    border-color: #cbd5e1;
}

/* Meter row: [Low label] [───gradient bar with vertical marker───] [High label].
   The end labels and SAR amounts together explain the bar without a chart key. */
.apt-card-meter-row {
    display: flex;
    align-items: center;
    gap: 6px;
}
.apt-card-meter-end {
    flex: 0 0 auto;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    color: var(--apt-muted);
    line-height: 1;
}
.apt-card-meter-end-low  { color: var(--apt-success); }
.apt-card-meter-end-high { color: var(--apt-danger); }

.apt-card-meter {
    position: relative;
    flex: 1 1 auto;
    height: 7px;
    border-radius: 4px;
    background: linear-gradient(to right, #16a34a 0%, #f59e0b 55%, #dc2626 100%);
    overflow: visible;
}
[dir="rtl"] .apt-card-meter {
    background: linear-gradient(to left, #16a34a 0%, #f59e0b 55%, #dc2626 100%);
}

/* Vertical-line marker (replaces the dot — reads more like a value tick). */
.apt-card-meter-marker {
    position: absolute;
    top: -4px;
    bottom: -4px;
    inset-inline-start: 0;
    width: 3px;
    margin-inline-start: -1.5px;
    background: var(--apt-primary);
    border-radius: 2px;
    box-shadow: 0 0 0 2px #fff, 0 1px 3px rgba(15, 23, 42, 0.3);
}

/* SAR endpoint labels: small text inline with the bar, on each side. */
.apt-card-range {
    display: flex;
    justify-content: space-between;
    gap: 6px;
    font-size: 11px;
    font-weight: 700;
    color: var(--apt-muted);
    letter-spacing: 0.2px;
}
.apt-card-range-low  { color: var(--apt-success); }
.apt-card-range-high { color: var(--apt-danger); }

/* Stable-price branch — no bar (nothing to show); just headline + centered SAR. */
.apt-card-range-stable {
    text-align: center;
    color: #475569;
    font-weight: 700;
    font-size: 12px;
}

.apt-card-cta {
    margin-block-start: 4px;
    font-size: 10px;
    color: var(--apt-muted);
    text-transform: uppercase;
    letter-spacing: 0.8px;
    font-weight: 700;
}

/* v0.11.0 — secondary "Check on Amazon" button at the bottom of each card.
   Outline style so it stays visually subordinate to the main product page
   tap target, but uses Amazon orange so it reads as the Amazon link. */
.apt-card-buy {
    display: block;
    text-align: center;
    background: transparent;
    color: #b45309;
    border-top: 1px solid var(--apt-border);
    padding: 9px 10px;
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
    letter-spacing: 0.2px;
    transition: background 0.15s ease, color 0.15s ease;
}
.apt-card-buy:hover,
.apt-card-buy:focus {
    background: var(--apt-accent);
    color: #1f2937;
    text-decoration: none;
}

/* v0.12.0 — sort dropdown above the products grid. Renders as a compact
   inline form (label + native <select>) flush to the inline-end edge so it
   doesn't fight the centered grid below for visual weight. The native
   select handles touch + accessibility for free; onchange auto-submits. */
.apt-sort {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    max-width: 1200px;
    margin: 0 auto 14px;
    padding: 0 4px;
}
.apt-sort-label {
    font-size: 12px;
    font-weight: 700;
    color: var(--apt-muted);
    text-transform: uppercase;
    letter-spacing: 0.6px;
}
.apt-sort-select {
    background: var(--apt-surface);
    border: 1px solid var(--apt-border);
    border-radius: 8px;
    padding: 7px 12px;
    font-size: 13px;
    font-weight: 600;
    color: var(--apt-text);
    cursor: pointer;
    min-width: 180px;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.apt-sort-select:hover,
.apt-sort-select:focus {
    border-color: var(--apt-primary);
    box-shadow: 0 0 0 3px rgba(10, 77, 58, 0.12);
    outline: none;
}
.apt-sort-submit {
    background: var(--apt-primary);
    color: #fff;
    border: 0;
    border-radius: 8px;
    padding: 7px 14px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
}
@media (max-width: 600px) {
    .apt-sort { gap: 6px; padding: 0 12px; }
    .apt-sort-label { font-size: 10px; }
    .apt-sort-select { font-size: 12px; padding: 6px 10px; min-width: 0; flex: 1; }
}

.apt-grid-empty {
    padding: 48px 24px;
    text-align: center;
    background: var(--apt-surface);
    border: 1px dashed var(--apt-border);
    border-radius: 12px;
    color: var(--apt-muted);
    font-style: italic;
}

/* --- Category tiles (above the products grid) --- */

.apt-cat-tiles {
    display: flex;
    flex-wrap: nowrap;
    gap: 12px;
    max-width: 1200px;
    margin: 20px auto 18px;
    padding: 4px 4px 8px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: thin;
}
/* v0.13.0 — Hide the cramped category strip on phones. The strip works fine
 * on desktop but on mobile it crowds the screen and the tiles look small.
 * Mobile visitors now reach categories via the dedicated bottom-nav 📁 item
 * which leads to the full categories landing page with big visual tiles. */
@media (max-width: 720px) {
    .apt-cat-tiles {
        display: none;
    }
}
.apt-cat-tiles::-webkit-scrollbar { height: 6px; }
.apt-cat-tiles::-webkit-scrollbar-track { background: transparent; }
.apt-cat-tiles::-webkit-scrollbar-thumb { background: var(--apt-border); border-radius: 3px; }

.apt-cat-tile {
    flex: 0 0 110px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 14px 8px 12px;
    background: var(--apt-surface);
    border: 1px solid var(--apt-border);
    border-radius: 14px;
    text-decoration: none;
    color: var(--apt-text);
    text-align: center;
    scroll-snap-align: start;
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease, background-color 0.15s ease;
}
.apt-cat-tile:hover,
.apt-cat-tile:focus {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(15, 23, 42, 0.08);
    border-color: #cbd5e1;
    color: var(--apt-primary);
    text-decoration: none;
}
.apt-cat-tile-active {
    background: var(--apt-primary);
    border-color: var(--apt-primary);
    color: #ffffff !important;
}
.apt-cat-tile-active:hover,
.apt-cat-tile-active:focus {
    background: var(--apt-primary-hover);
    border-color: var(--apt-primary-hover);
    color: #ffffff !important;
}
.apt-cat-tile-emoji {
    font-size: 32px;
    line-height: 1;
    display: block;
    /* prevent the emoji from being flipped or treated as RTL text */
    direction: ltr;
    unicode-bidi: isolate;
}
.apt-cat-tile-name {
    font-size: 12.5px;
    font-weight: 700;
    line-height: 1.25;
    min-height: 2.5em;
    display: flex;
    align-items: center;
    justify-content: center;
    color: inherit;
    /* clamp to 2 lines */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-break: break-word;
}
.apt-cat-tile-count {
    background: rgba(15, 23, 42, 0.08);
    color: inherit;
    padding: 1px 9px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    min-width: 22px;
    text-align: center;
}
.apt-cat-tile-active .apt-cat-tile-count {
    background: rgba(255, 255, 255, 0.22);
}
@media (max-width: 600px) {
    .apt-cat-tile { flex: 0 0 96px; padding: 12px 6px 10px; }
    .apt-cat-tile-emoji { font-size: 28px; }
    .apt-cat-tile-name { font-size: 11.5px; }
}

/* ============================================================
 * v0.13.0 — Categories landing page (/categories/).
 * Big visual tiles, one per top-level department + an "All
 * products" tile. 4-column desktop grid, 2-column mobile grid.
 * Designed to be the primary mobile entry point to category
 * browsing (mobile bottom nav 📁 item links here).
 * ============================================================ */
.apt-cat-landing {
    max-width: 1100px;
    margin: 0 auto;
    padding: 24px 16px 40px;
}
.apt-cat-landing-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}
.apt-cat-landing-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 28px 14px 22px;
    background: var(--apt-surface, #ffffff);
    border: 1px solid var(--apt-border, #e2e8f0);
    border-radius: 16px;
    text-decoration: none;
    color: var(--apt-text, #0f172a);
    text-align: center;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
    min-height: 160px;
}
.apt-cat-landing-tile:hover,
.apt-cat-landing-tile:focus {
    transform: translateY(-3px);
    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.10);
    border-color: #0a4d3a;
    color: #0a4d3a;
    text-decoration: none;
}
.apt-cat-landing-tile-all {
    background: linear-gradient(135deg, #0a4d3a 0%, #0d6147 100%);
    color: #ffffff;
    border-color: #0a4d3a;
}
.apt-cat-landing-tile-all:hover,
.apt-cat-landing-tile-all:focus {
    color: #ffffff;
    border-color: #0d6147;
}
.apt-cat-landing-emoji {
    font-size: 44px;
    line-height: 1;
}
.apt-cat-landing-name {
    font-weight: 700;
    font-size: 16px;
    line-height: 1.3;
}
.apt-cat-landing-count {
    font-size: 12px;
    color: var(--apt-muted, #64748b);
    font-weight: 500;
}
.apt-cat-landing-tile-all .apt-cat-landing-count {
    color: rgba(255, 255, 255, 0.85);
}

/* Tablet — 3 columns. */
@media (max-width: 1080px) {
    .apt-cat-landing-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* Mobile — 2 columns, slightly tighter tiles. */
@media (max-width: 720px) {
    .apt-cat-landing {
        padding: 16px 12px 32px;
    }
    .apt-cat-landing-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }
    .apt-cat-landing-tile {
        min-height: 140px;
        padding: 22px 10px 18px;
        border-radius: 14px;
    }
    .apt-cat-landing-emoji {
        font-size: 38px;
    }
    .apt-cat-landing-name {
        font-size: 14px;
    }
    .apt-cat-landing-count {
        font-size: 11px;
    }
}

/* --- Numbered pagination (below the products grid) --- */

.apt-pagination {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
    max-width: 1200px;
    margin: 24px auto 8px;
}
.apt-page-item .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 38px;
    padding: 8px 12px;
    background: var(--apt-surface);
    border: 1px solid var(--apt-border);
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    color: var(--apt-text);
    text-decoration: none;
    line-height: 1.2;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.apt-page-item .page-numbers:hover,
.apt-page-item .page-numbers:focus {
    background: var(--apt-surface-alt);
    border-color: #cbd5e1;
    color: var(--apt-primary);
    text-decoration: none;
}
.apt-page-item .page-numbers.current {
    background: var(--apt-primary);
    border-color: var(--apt-primary);
    color: #ffffff;
}
.apt-page-item .page-numbers.dots {
    background: transparent;
    border-color: transparent;
    color: var(--apt-muted);
}

/* --- Category badges (on the single product page header) --- */

.apt-cat-badges {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-inline-start: 4px;
    vertical-align: middle;
}
.apt-cat-badge {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    background: var(--apt-surface-alt);
    border: 1px solid var(--apt-border);
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    color: var(--apt-primary);
    text-decoration: none;
    line-height: 1.4;
}
.apt-cat-badge:hover,
.apt-cat-badge:focus {
    background: var(--apt-primary);
    color: #ffffff;
    border-color: var(--apt-primary);
    text-decoration: none;
}

/* ============================================================
 * Wishlist (Session 2)
 * ============================================================ */

.apt-wishlist-box {
    margin-block-start: 24px;
    padding: 22px;
    background: var(--apt-surface);
    border: 1px solid var(--apt-border);
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
}
.apt-wishlist-loggedout {
    background: linear-gradient(135deg, var(--apt-surface) 0%, var(--apt-surface-alt) 100%);
}
.apt-wishlist-tracking {
    background: linear-gradient(135deg, #ffffff 0%, #f0fdf4 100%);
    border-color: var(--apt-success-border);
}
.apt-wishlist-title {
    margin: 0 0 8px;
    font-size: 18px;
    color: var(--apt-primary);
    font-weight: 700;
}
.apt-wishlist-tracked-icon {
    color: var(--apt-success);
    margin-inline-end: 6px;
}
.apt-wishlist-text {
    color: var(--apt-muted);
    margin: 0 0 14px;
    font-size: 14px;
}
.apt-wishlist-hit-target {
    background: var(--apt-success-bg);
    color: var(--apt-success);
    border: 1px solid var(--apt-success-border);
    padding: 10px 14px;
    border-radius: 8px;
    font-weight: 700;
    margin: 0 0 14px;
    font-size: 14px;
}
.apt-wishlist-row {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-block-end: 14px;
    flex-wrap: wrap;
}
.apt-wishlist-label {
    font-size: 14px;
    color: var(--apt-text);
    font-weight: 600;
    flex: 1 1 220px;
}
.apt-wishlist-input-wrap {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.apt-wishlist-input-wrap input[type="number"] {
    width: 140px;
    padding: 9px 12px;
    border: 1px solid var(--apt-border);
    border-radius: 8px;
    font-size: 15px;
    font-family: inherit;
    color: var(--apt-text);
    background: var(--apt-surface);
}
.apt-wishlist-input-wrap input[type="number"]:focus {
    outline: 2px solid var(--apt-primary);
    outline-offset: -1px;
    border-color: var(--apt-primary);
}
.apt-wishlist-currency {
    color: var(--apt-muted);
    font-weight: 600;
    font-size: 13px;
}
.apt-wishlist-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.apt-wishlist-btn {
    display: inline-block;
    padding: 10px 18px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 700;
    font-size: 14px;
    cursor: pointer;
    border: 1px solid transparent;
    transition: background-color 0.15s ease, transform 0.15s ease, color 0.15s ease;
    font-family: inherit;
    line-height: 1.2;
}
.apt-wishlist-btn-primary {
    background: var(--apt-primary);
    color: #ffffff !important;
}
.apt-wishlist-btn-primary:hover,
.apt-wishlist-btn-primary:focus {
    background: var(--apt-primary-hover);
    color: #ffffff !important;
    text-decoration: none;
    transform: translateY(-1px);
}
.apt-wishlist-btn-secondary {
    background: var(--apt-surface);
    color: var(--apt-primary) !important;
    border-color: var(--apt-border);
}
.apt-wishlist-btn-secondary:hover,
.apt-wishlist-btn-secondary:focus {
    background: var(--apt-surface-alt);
    color: var(--apt-primary) !important;
    text-decoration: none;
    border-color: #cbd5e1;
}
.apt-wishlist-btn-link {
    background: none;
    color: var(--apt-danger);
    padding: 8px 0;
    text-decoration: underline;
    border: none;
    font-weight: 600;
}
.apt-wishlist-btn-link:hover {
    color: var(--apt-danger);
    text-decoration: none;
}
.apt-wishlist-hint {
    color: var(--apt-muted);
    font-size: 12px;
    margin: 8px 0 0;
}
.apt-wishlist-update-form,
.apt-wishlist-remove-form {
    margin: 14px 0 0;
}

/* Flash messages */
.apt-flash {
    padding: 12px 16px;
    border-radius: 8px;
    margin-block-end: 16px;
    font-weight: 600;
    font-size: 14px;
}
.apt-flash-success {
    background: var(--apt-success-bg);
    color: var(--apt-success);
    border: 1px solid var(--apt-success-border);
}
.apt-flash-info {
    background: #dbeafe;
    color: #1e40af;
    border: 1px solid #93c5fd;
}

/* My Wishlist page */
.apt-my-wishlist {
    max-width: 1200px;
    margin: 0 auto;
    padding: 28px 16px;
}
.apt-my-wishlist-title {
    color: var(--apt-primary);
    margin: 0 0 18px;
    font-size: clamp(20px, 3vw, 26px);
}
.apt-wishlist-page-empty {
    text-align: center;
    padding: 48px 24px;
    background: var(--apt-surface);
    border: 1px dashed var(--apt-border);
    border-radius: 12px;
}
.apt-wishlist-page-empty h2 {
    margin: 0 0 10px;
    color: var(--apt-primary);
}
.apt-wishlist-page-empty p {
    color: var(--apt-muted);
    margin: 0 0 18px;
}
.apt-wishlist-page-empty-text {
    text-align: center;
    padding: 32px;
    color: var(--apt-muted);
    background: var(--apt-surface-alt);
    border-radius: 12px;
    font-style: italic;
}

/* Wishlist card (on My Wishlist page) */
.apt-wishlist-card { position: relative; }
.apt-wishlist-card-link {
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
    flex: 1;
}
.apt-wishlist-card-link:hover { text-decoration: none; color: inherit; }
.apt-wishlist-card-target {
    font-size: 11px;
    color: var(--apt-muted);
    margin-block-start: 4px;
}
.apt-wishlist-card-target-hit {
    color: var(--apt-success);
    font-weight: 700;
    background: var(--apt-success-bg);
    padding: 3px 8px;
    border-radius: 6px;
    display: inline-block;
}
.apt-wishlist-card-remove {
    position: absolute;
    top: 6px;
    inset-inline-end: 6px;
    margin: 0;
    z-index: 2;
}
.apt-wishlist-btn-mini {
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid var(--apt-border);
    border-radius: 6px;
    padding: 4px 8px;
    font-size: 10px;
    color: var(--apt-danger);
    cursor: pointer;
    font-weight: 700;
    font-family: inherit;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.apt-wishlist-btn-mini:hover {
    background: var(--apt-danger-bg);
    border-color: var(--apt-danger-border);
}
.apt-chart-container {
    position: relative;
    height: 340px;
    width: 100%;
}
.apt-chart {
    width: 100% !important;
    height: 100% !important;
}

/* RTL fine-tuning — most layout already works via flex/grid + logical properties. */
[dir="rtl"] .apt-buy-button::after { content: ""; }

/* ============================================================
 * Homepage section rows (v0.6.2): title + "see more" link + 4 cards.
 * Modeled on Amazon.sa's stacked-row homepage layout.
 * ============================================================ */
.apt-homepage-sections {
    max-width: 1200px;
    margin: 0 auto;
    padding: 8px 16px 48px;
    display: flex;
    flex-direction: column;
    gap: 28px;
}
.apt-section {
    background: var(--apt-surface);
    border: 1px solid var(--apt-border);
    border-radius: 14px;
    padding: 22px 22px 18px;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
}
.apt-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-block-end: 16px;
    padding-block-end: 10px;
    border-bottom: 1px solid var(--apt-border);
}
.apt-section-title {
    margin: 0;
    font-size: clamp(18px, 2.4vw, 22px);
    font-weight: 800;
    color: var(--apt-primary);
    line-height: 1.25;
}
/* v0.15.0 — Dark-green outlined pill. Friend-tested feedback was that the
   previous gray-on-gray "المزيد" link didn't read as a call-to-action. The new
   styling uses a 2px brand-green outline + brand-green text on white so it
   stands out on the section row, and fills with brand green on hover. */
.apt-section-more {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    background: #ffffff;
    border: 2px solid var(--apt-primary);
    border-radius: 999px;
    color: var(--apt-primary) !important;
    text-decoration: none;
    font-weight: 700;
    font-size: 13px;
    white-space: nowrap;
    box-shadow: 0 1px 2px rgba(10, 77, 58, 0.08);
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
.apt-section-more:hover,
.apt-section-more:focus {
    background: var(--apt-primary);
    color: #fff !important;
    border-color: var(--apt-primary);
    text-decoration: none;
    box-shadow: 0 2px 6px rgba(10, 77, 58, 0.22);
}
.apt-section-more-arrow {
    font-size: 14px;
    line-height: 1;
}
.apt-section-grid {
    /* tighter inside a card — overrides the outer-grid defaults */
    margin-block: 4px 0;
    max-width: none;
}
@media (max-width: 820px) {
    .apt-section { padding: 16px 14px 14px; border-radius: 10px; }
    .apt-section-head { margin-block-end: 12px; padding-block-end: 8px; }
}

/* ============================================================
 * v0.8.0 — Mobile section rows scroll horizontally
 *
 * On mobile, each [apt_section] becomes a swipeable carousel
 * (4 cards in a row, scroll-snap, soft scrollbar) instead of
 * stacking 4 cards vertically. Matches Amazon.sa, Noon, Jarir.
 * Desktop layout (4-up grid) is preserved above the breakpoint.
 * ============================================================ */
@media (max-width: 720px) {
    .apt-section { padding: 14px 12px 14px; }
    .apt-section-title { font-size: 17px; }
    .apt-section-more { padding: 5px 10px; font-size: 12px; }

    .apt-section .apt-section-grid,
    .apt-section .apt-products-grid {
        display: flex !important;
        grid-template-columns: none !important;
        overflow-x: auto;
        overflow-y: hidden;
        scroll-snap-type: x mandatory;
        gap: 10px;
        padding-block-end: 8px;
        /* Bleed the scroll area to the section's edges so the last card
           snaps fully into view without an awkward gap. */
        margin-inline: -12px;
        padding-inline: 12px;
        -webkit-overflow-scrolling: touch;
    }
    .apt-section .apt-products-grid::-webkit-scrollbar {
        height: 5px;
    }
    .apt-section .apt-products-grid::-webkit-scrollbar-thumb {
        background: rgba(15, 23, 42, 0.18);
        border-radius: 3px;
    }
    .apt-section .apt-products-grid > .apt-card {
        flex: 0 0 46%;
        max-width: 220px;
        scroll-snap-align: start;
    }
}

/* ============================================================
 * v0.8.0 — Mobile product page: sticky Buy on Amazon button.
 *
 * On phones, when the visitor scrolls the chart and history,
 * the orange CTA scrolls out of view. Make a duplicate sticky
 * button at the bottom of the viewport that's always visible.
 *
 * Implemented as a CSS-only "position: sticky" approach by
 * promoting the existing .apt-buy-button to the bottom on
 * narrow screens. The original button stays in the summary
 * panel; sticky positioning kicks in on mobile.
 *
 * NOTE: This relies on the buy button being a direct child of
 * .apt-summary. If the HTML structure changes, this rule may
 * need to target a different element.
 * ============================================================ */
@media (max-width: 720px) {
    .apt-product-panel {
        /* Leave room for the sticky mobile bottom nav (64px) AND the
           sticky Buy button (about 60px) — total ~128px breathing room
           at the bottom of the product page so nothing is hidden. */
        padding-bottom: 140px;
    }
    .apt-summary {
        padding: 14px;
        gap: 14px;
    }
    .apt-stats { gap: 8px; }
    .apt-stat { padding: 10px 8px; }
    .apt-stat-value { font-size: 18px; }
    .apt-stat-label { font-size: 10px; }

    .apt-buy-button {
        position: fixed;
        inset-inline: 12px;
        bottom: 72px; /* sits above the mobile bottom nav */
        z-index: 9985;
        margin: 0;
        padding: 14px 20px;
        font-size: 16px;
        box-shadow: 0 4px 14px rgba(229, 140, 0, 0.35);
        border-radius: 12px;
        display: block;
    }
    .apt-chart-wrap { padding: 14px; }
    .apt-chart-wrap h3 { font-size: 16px; }
}

/* ============================================================
 * v0.8.0 — Mobile font + tap-target polish
 * ============================================================ */
@media (max-width: 600px) {
    .apt-card-image { padding: 6px; }
    .apt-section-head { flex-wrap: wrap; gap: 6px; }
    /* Ensure interactive elements meet 44px tap target. */
    .apt-section-more,
    .apt-buy-button,
    .apt-card,
    .apt-mb-item {
        min-height: 44px;
    }
}

/* ============================================================
 * v0.9.0 — Breadcrumb on single product page
 * Home › All Products › Category › Subcategory › Product title
 * Acts as back-navigation; on mobile, the leading ← arrow gives
 * a visible "back to home" anchor.
 * ============================================================ */
.apt-breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--apt-muted);
    margin-block-end: 18px;
    padding-block: 4px;
}
.apt-breadcrumb-link {
    color: var(--apt-primary);
    text-decoration: none;
    padding: 4px 6px;
    border-radius: 4px;
    transition: background-color 0.15s ease, color 0.15s ease;
}
.apt-breadcrumb-link:hover,
.apt-breadcrumb-link:focus {
    background: var(--apt-surface-alt);
    color: var(--apt-primary);
    text-decoration: none;
}
.apt-breadcrumb-back {
    display: inline-block;
    margin-inline-end: 4px;
    font-weight: 700;
}
.apt-breadcrumb-sep {
    color: #cbd5e1;
    font-weight: 700;
}
.apt-breadcrumb-current {
    color: var(--apt-text);
    font-weight: 600;
}
@media (max-width: 600px) {
    .apt-breadcrumb { font-size: 12px; gap: 4px; }
    .apt-breadcrumb-link { padding: 6px 8px; min-height: 32px; }
    /* On mobile, hide intermediate steps when there's too many — keep
       Home (with ← arrow) and current title for one-thumb back nav. */
    .apt-breadcrumb-link:not(:first-of-type) { display: none; }
    .apt-breadcrumb-sep:not(:first-of-type) { display: none; }
}

/* ============================================================
 * v0.9.0 — Search results page styles
 * (Template: templates/search.php)
 * ============================================================ */
.apt-search-section-title {
    margin-block: 28px 14px;
    padding-block-end: 8px;
    border-bottom: 1px solid var(--apt-border);
    font-size: 18px;
    font-weight: 700;
    color: var(--apt-primary);
}
.apt-search-count {
    color: var(--apt-muted);
    font-weight: 500;
    font-size: 14px;
    margin-inline-start: 6px;
}
.apt-search-other {
    list-style: none;
    padding: 0;
    margin: 0;
}
.apt-search-other li {
    padding: 14px 16px;
    background: var(--apt-surface);
    border: 1px solid var(--apt-border);
    border-radius: 8px;
    margin-block-end: 10px;
}
.apt-search-other a {
    font-weight: 700;
    color: var(--apt-primary);
    text-decoration: none;
}
.apt-search-other-excerpt {
    color: var(--apt-muted);
    font-size: 13px;
    margin: 4px 0 0;
}
.apt-search-empty {
    padding: 48px 24px;
    text-align: center;
    background: var(--apt-surface);
    border: 1px dashed var(--apt-border);
    border-radius: 10px;
    color: var(--apt-muted);
}

/* v0.12.5 — "Request it now" call-to-action on empty search results. */
.apt-search-empty-cta {
    padding: 40px 20px;
    max-width: 560px;
    margin: 24px auto;
    background: var(--apt-surface);
    border: 1px solid var(--apt-border);
    border-radius: 14px;
    box-shadow: 0 1px 3px rgba(15,23,42,0.04);
    text-align: center;
}
.apt-search-empty-headline {
    color: var(--apt-text);
    font-size: clamp(18px, 2.4vw, 22px);
    font-weight: 700;
    margin: 0 0 8px;
}
.apt-search-empty-sub {
    color: var(--apt-muted);
    font-size: 15px;
    margin: 0 0 22px;
    line-height: 1.55;
}
.apt-search-empty-btn {
    display: inline-block;
    background: #0a4d3a;
    color: #fff;
    text-decoration: none;
    font-weight: 600;
    font-size: 16px;
    padding: 13px 28px;
    border-radius: 10px;
    transition: background 0.15s ease;
    min-width: 200px;
}
.apt-search-empty-btn:hover,
.apt-search-empty-btn:focus {
    background: #0d6147;
    color: #fff;
}
.apt-search-empty-secondary {
    margin: 18px 0 0;
    font-size: 14px;
}
.apt-search-empty-secondary a {
    color: var(--apt-muted);
    text-decoration: underline;
    text-underline-offset: 3px;
}
.apt-search-empty-secondary a:hover {
    color: var(--apt-primary);
}

/* Mobile — bigger tap target, full-width button. */
@media (max-width: 720px) {
    .apt-search-empty-cta {
        padding: 32px 16px;
        margin: 16px auto;
        border-radius: 12px;
    }
    .apt-search-empty-btn {
        display: block;
        width: 100%;
        padding: 15px 20px;
        font-size: 17px;
        min-width: 0;
    }
}

/* ============================================================
 * v0.10.3 — Out of stock (نفد من المخزون) state.
 *
 * Three places to indicate it:
 *   1. Product page: yellow/grey banner above the summary panel +
 *      Buy button stays present but greyed (so visitors can still
 *      hop over to Amazon to check restock).
 *   2. Card in any grid: image-corner "نفد" ribbon + greyed price.
 *   3. Last-known price is still shown so the chart context makes
 *      sense to visitors.
 * ============================================================ */
.apt-oos-banner {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    background: #fdf4e3;
    border: 1px solid #f0c674;
    border-inline-start: 4px solid #d9863d;
    color: #6b4a1e;
    padding: 14px 16px;
    border-radius: 10px;
    margin-block-end: 16px;
}
.apt-oos-banner-icon {
    font-size: 22px;
    line-height: 1;
    flex: 0 0 auto;
}
.apt-oos-banner-text {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 14px;
    line-height: 1.45;
}
.apt-oos-banner-text strong {
    font-size: 16px;
    color: #5b3a14;
}
.apt-oos-banner-sub {
    color: #6b4a1e;
    font-size: 13px;
}
.apt-product-panel-oos .apt-stat-current .apt-stat-value {
    color: #8a6a52;
    text-decoration: line-through;
    text-decoration-thickness: 1px;
}
.apt-buy-button-oos {
    background: #e6e1d8 !important;
    color: #5b4033 !important;
    border-color: #d2c9bb !important;
}
.apt-buy-button-oos:hover,
.apt-buy-button-oos:focus {
    background: #d9d0c0 !important;
    color: #3b2a1f !important;
}

/* Card overlay */
.apt-card-oos .apt-card-image {
    position: relative;
}
.apt-card-oos .apt-card-image img,
.apt-card-oos .apt-card-image-placeholder {
    filter: grayscale(0.6) opacity(0.7);
}
.apt-card-oos-ribbon {
    position: absolute;
    top: 8px;
    inset-inline-start: 8px;
    background: rgba(91, 64, 51, 0.92);
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    padding: 3px 8px;
    border-radius: 4px;
    text-transform: none;
    letter-spacing: 0.2px;
    z-index: 2;
}
.apt-card-price-oos {
    color: #8a6a52 !important;
    font-weight: 700;
    font-size: 14px;
}

@media (max-width: 600px) {
    .apt-oos-banner { padding: 12px 14px; gap: 10px; border-radius: 8px; }
    .apt-oos-banner-text strong { font-size: 15px; }
    .apt-oos-banner-sub { font-size: 12px; }
    .apt-card-oos-ribbon { font-size: 10px; padding: 2px 6px; top: 6px; }
}

/* =====================================================================
 * v0.16.0 — Pack-size variants & color swatches
 *
 * Colors render as a row of small image-or-text chips above the chart.
 * Variants render as a compact 3-column table (label / price / per-unit)
 * with the "currently shown" variant tinted and the cheapest-per-unit
 * row marked with a green "best value" pill.
 *
 * Mobile: stack into a vertical card list at ≤600px (table layout cramps
 * Arabic labels). All mobile overrides use !important to survive
 * LiteSpeed CSS-Combine reordering (see feedback_litespeed_css_combine_breaks_cascade).
 * =================================================================== */

/* ---- Color chips ---- */
.apt-colors-row {
    margin: 18px 0 10px;
    padding: 14px 18px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 14px;
}
.apt-colors-label {
    font-weight: 700;
    color: #0a4d3a;
    font-size: 13px;
}
.apt-color-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.apt-color-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px 4px 4px;
    background: #fff;
    border: 1px solid #d8dee3;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    color: #1f2937;
    transition: border-color 0.15s ease;
}
.apt-color-chip:hover { border-color: #0a4d3a; }
.apt-color-chip-swatch {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background-size: cover;
    background-position: center;
    background-color: #e5e7eb;
    border: 1px solid rgba(0, 0, 0, 0.08);
    flex: 0 0 24px;
}
.apt-color-chip-swatch-empty {
    background: repeating-linear-gradient(45deg, #f3f4f6, #f3f4f6 4px, #e5e7eb 4px, #e5e7eb 8px);
}
.apt-color-chip-name { white-space: nowrap; max-width: 140px; overflow: hidden; text-overflow: ellipsis; }

/* ---- Variants table ---- */
.apt-variants-row {
    margin: 18px 0 22px;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    overflow: hidden;
}
.apt-variants-heading {
    margin: 0;
    padding: 14px 18px;
    background: #f0f7f3;
    border-bottom: 1px solid #d6e7df;
    color: #0a4d3a;
    font-size: 16px;
    font-weight: 800;
}
.apt-variants-table {
    width: 100%;
    border-collapse: collapse;
    background: #fff;
}
.apt-variants-table th,
.apt-variants-table td {
    padding: 12px 18px;
    text-align: start;
    font-size: 14px;
    border-bottom: 1px solid #f1f5f9;
    vertical-align: middle;
}
.apt-variants-table thead th {
    background: #fafafa;
    color: #64748b;
    font-weight: 700;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.apt-variants-table tbody tr:last-child td { border-bottom: 0; }
.apt-variant-label { font-weight: 700; color: #0f172a; }
.apt-variant-row-current { background: #ecfdf5; }
.apt-variant-row-current .apt-variant-label { color: #047857; }
.apt-variant-row-best td:last-child { color: #047857; font-weight: 800; }
.apt-variant-flag {
    display: inline-block;
    margin-inline-start: 8px;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    vertical-align: middle;
}
.apt-variant-flag-current { background: #d1fae5; color: #047857; }
.apt-variant-flag-best    { background: #fef3c7; color: #92400e; }
.apt-variant-na { color: #94a3b8; }
.apt-variants-note {
    margin: 0;
    padding: 10px 18px;
    background: #fafafa;
    border-top: 1px solid #f1f5f9;
    color: #64748b;
    font-size: 12px;
    font-style: italic;
}

@media (max-width: 600px) {
    .apt-colors-row {
        padding: 10px 12px !important;
        gap: 8px 10px !important;
    }
    .apt-color-chip-name { max-width: 90px !important; font-size: 11px !important; }
    .apt-color-chip-swatch { width: 20px !important; height: 20px !important; flex-basis: 20px !important; }

    /* On phones, collapse the variants table into stacked rows. Each row
     * becomes a card with label on top, then a price+per-unit line. */
    .apt-variants-heading { font-size: 14px !important; padding: 12px 14px !important; }
    .apt-variants-table thead { display: none !important; }
    .apt-variants-table,
    .apt-variants-table tbody,
    .apt-variants-table tr,
    .apt-variants-table td {
        display: block !important;
        width: 100% !important;
    }
    .apt-variants-table tr {
        padding: 12px 14px !important;
        border-bottom: 1px solid #f1f5f9 !important;
    }
    .apt-variants-table td {
        padding: 2px 0 !important;
        border-bottom: 0 !important;
        font-size: 13px !important;
    }
    .apt-variants-table td:first-child { font-size: 14px !important; margin-bottom: 4px !important; }
    .apt-variants-table td:nth-child(2)::before {
        content: attr(data-label);
        display: inline;
    }
    /* Use a small inline label before the price + per-unit on mobile rows */
    .apt-variants-table td:nth-child(2) { color: #0a4d3a !important; font-weight: 700 !important; }
    .apt-variants-table td:nth-child(3) { color: #64748b !important; font-size: 12px !important; }
}

/* =====================================================================
 * v0.16.2 — Card-level variants/colors indicator pill strip
 *
 * Small chip row between the price and the meter on grid cards, so a
 * visitor browsing the homepage / category can see at a glance that a
 * product has multiple pack sizes or colors before clicking in.
 * =================================================================== */
.apt-card-variants-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin: 6px 0 4px;
}
.apt-card-variants-pill {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 8px;
    background: #f0f7f3;
    color: #0a4d3a;
    border: 1px solid #d6e7df;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.4;
    white-space: nowrap;
}
.apt-card-variants-pill-colors {
    background: #fef3e7;
    color: #92400e;
    border-color: #f9d8b0;
}

@media (max-width: 600px) {
    .apt-card-variants-pill { font-size: 10px !important; padding: 2px 6px !important; }
    .apt-card-variants-strip { gap: 4px !important; margin: 4px 0 2px !important; }
}

/* =====================================================================
 * v0.17.0 — Linked variant products (cross-variant table)
 *
 * Same table layout as the legacy inline variants table, plus:
 *   - a 4th column for the per-variant history badge
 *   - clickable size cells that link to each sibling product
 *   - distinctive "currently viewing" + "best value" flags side by side
 * =================================================================== */
.apt-variants-table-linked th:nth-child(4),
.apt-variants-table-linked td:nth-child(4) {
    text-align: start;
}
.apt-variant-link {
    color: #0a4d3a;
    text-decoration: none;
    font-weight: 700;
    border-bottom: 1px dashed transparent;
    transition: border-color 0.15s ease;
}
.apt-variant-link:hover,
.apt-variant-link:focus {
    border-bottom-color: #0a4d3a;
}
.apt-variant-history {
    display: inline-block;
    padding: 2px 9px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}
.apt-variant-history-low   { background: #d1fae5; color: #047857; }
.apt-variant-history-good  { background: #ecfdf5; color: #047857; }
.apt-variant-history-mid   { background: #fef3c7; color: #92400e; }
.apt-variant-history-above { background: #fee2e2; color: #b91c1c; }
.apt-variant-history-high  { background: #fee2e2; color: #991b1b; }

@media (max-width: 600px) {
    /* Mobile collapse adds a 4th display:block row for history. */
    .apt-variants-table-linked td:nth-child(4) {
        font-size: 11px !important;
        margin-top: 3px !important;
    }
    .apt-variant-history { font-size: 10px !important; padding: 1px 6px !important; }
}

/* =====================================================================
 * v0.18.0 — Family hub product page
 *
 * Each linked variant group renders one product page with all sibling
 * variants pre-rendered as stacked panels (.apt-hub-panel) and a pill row
 * (.apt-hub-pills) that toggles which panel is visible. Per-pack table
 * sits below.
 *
 * Pills row uses the same horizontal-scroll pattern as homepage sections
 * (feedback_litespeed_css_combine_breaks_cascade: !important on mobile
 * overrides to survive LiteSpeed CSS Combine reordering).
 * =================================================================== */
.apt-product-hub { display: block; margin: 0 0 18px; }

.apt-hub-banner {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #fef9c3;
    color: #713f12;
    border: 1px solid #fde68a;
    border-radius: 10px;
    padding: 10px 14px;
    margin: 0 0 14px;
    font-size: 14px;
    line-height: 1.5;
}
.apt-hub-banner-icon { font-size: 20px; line-height: 1; flex: 0 0 auto; }
.apt-hub-banner-text { flex: 1 1 auto; }

.apt-hub-pills {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin: 0 0 16px;
    padding: 4px 0;
}
.apt-hub-pill {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    padding: 10px 16px;
    background: #ffffff;
    color: #0a4d3a;
    border: 2px solid #d6e7df;
    border-radius: 14px;
    font-family: inherit;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease, transform 0.1s ease;
    min-width: 88px;
    text-align: start;
}
.apt-hub-pill:hover,
.apt-hub-pill:focus-visible {
    border-color: #0a4d3a;
    background: #f0f7f3;
}
.apt-hub-pill-active {
    background: #0a4d3a;
    color: #ffffff;
    border-color: #0a4d3a;
    box-shadow: 0 2px 8px rgba(10, 77, 58, 0.18);
}
.apt-hub-pill-active:hover,
.apt-hub-pill-active:focus-visible {
    background: #0d6147;
    border-color: #0d6147;
}
.apt-hub-pill-label {
    font-size: 13px;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: 0.01em;
}
.apt-hub-pill-price {
    font-size: 12px;
    font-weight: 600;
    line-height: 1.2;
    opacity: 0.9;
}
/* v0.18.1 — "Best value" badge on the cheapest-per-unit pill. Sits above
 * the label (the pill is already a vertical flex column). Same colours as
 * the per-pack table's "best value" row flag for visual continuity. */
.apt-hub-pill-best-badge {
    align-self: flex-start;
    background: #fef3c7;
    color: #92400e;
    padding: 1px 6px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.02em;
    line-height: 1.4;
    text-transform: none;
}
.apt-hub-pill-best {
    border-color: #f59e0b;
}
.apt-hub-pill-best.apt-hub-pill-active .apt-hub-pill-best-badge {
    background: #fde68a;
    color: #78350f;
}

.apt-hub-pill-oos {
    opacity: 0.65;
}
.apt-hub-pill-oos .apt-hub-pill-price { color: #b91c1c; }
.apt-hub-pill-oos.apt-hub-pill-active .apt-hub-pill-price { color: #fecaca; }
.apt-hub-pill-oos-tag {
    background: #fee2e2;
    color: #b91c1c;
    padding: 1px 6px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 700;
}
.apt-hub-pill-active .apt-hub-pill-oos-tag {
    background: #fecaca;
    color: #7f1d1d;
}

.apt-hub-panels { display: block; }
.apt-hub-panel { display: block; }
.apt-hub-panel[hidden] { display: none !important; }

/* Mobile (≤720px): pills row becomes a horizontal scroll strip. Use the
 * proven .apt-section overflow pattern. !important to win against the
 * LiteSpeed Combine reordering documented in
 * feedback_litespeed_css_combine_breaks_cascade.md. */
@media (max-width: 720px) {
    .apt-hub-pills {
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x mandatory;
        gap: 8px !important;
        padding: 4px 4px 10px !important;
        margin: 0 -4px 12px !important;
    }
    .apt-hub-pill {
        scroll-snap-align: start;
        flex: 0 0 auto !important;
        min-width: 92px !important;
        padding: 8px 12px !important;
        border-radius: 12px !important;
    }
    .apt-hub-pill-label { font-size: 12px !important; }
    .apt-hub-pill-price { font-size: 11px !important; }
    .apt-hub-banner {
        font-size: 13px !important;
        padding: 8px 12px !important;
        line-height: 1.45 !important;
    }
    .apt-hub-banner-icon { font-size: 18px !important; }
}
@media (max-width: 600px) {
    .apt-hub-pills { padding: 4px 4px 8px !important; }
}