/* ═══════════════════════════════════════════════════════════════════════════
 * TITANCART SHOP PAGE — BRAND OVERRIDES (TCT)
 *
 * Layers brand styling on top of the plugin's default shop CSS
 * (titancart/assets/css/titancart.css). The plugin keeps its neutral
 * defaults so other users running TitanCart with a different theme aren't
 * affected. This file applies the same dark-mode-first SaaS spec the
 * homepage uses, so the shop page reads as part of the same brand.
 *
 * Tokens consumed:
 *   --tct-home-* tokens — defined in homepage.css :root, available
 *     site-wide because homepage.css is enqueued globally in functions.php
 *   --tct-* base tokens — defined in theme.css :root with dark/light
 *     variants under [data-theme="dark|light"], auto-switch via the
 *     theme toggle in the header
 *
 * All component classes targeted here (`.tc-shop__*`, `.product-card*`,
 * `.product-title`, `.product-price`, etc.) are owned by the plugin.
 *
 * Strategy: prefix all overrides with `[data-theme="dark"]` so light
 * mode keeps the plugin's existing white-card defaults (which look fine
 * on the white light-mode body). Specificity (0,2,0) beats the plugin's
 * unprefixed rules (0,1,0) without needing !important on most properties.
 * !important is retained on the few properties where the plugin uses
 * inline-style fallbacks or where multiple plugin rules compete (e.g.
 * cart-btn hover states).
 * ═══════════════════════════════════════════════════════════════════════════ */

/* ── Toolbar: Found X items / Sort by / View toggle ────────────────────── */
/* The "Found 8 items" text and "Sort by:" label both default to a dark
   muted color which disappears against the dark body. Switch to the
   theme's secondary text token (auto-switching). */
[data-theme="dark"] .tc-shop__found,
[data-theme="dark"] .tc-shop__sort-label {
    color: var(--tct-text-secondary);
}

/* Sort dropdown: dark gradient surface, light text, white-translucent
   border to match the rest of the dark UI. The native dropdown chevron
   is replaced via background-image since the browser default is a dark
   chevron that disappears on dark bg. */
[data-theme="dark"] .tc-shop__sort-select {
    background-color: var(--tct-home-feature-bg);
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23a3a3a3' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    color: var(--tct-text);
    border-color: var(--tct-home-card-border);
}
[data-theme="dark"] .tc-shop__sort-select:focus {
    outline: none;
    border-color: var(--tct-brand);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
}

/* View toggle (grid / list / compact) pill */
[data-theme="dark"] .tc-shop__view-toggle {
    background: var(--tct-home-feature-bg);
    border-color: var(--tct-home-card-border);
}
[data-theme="dark"] .tc-shop__view-btn {
    color: var(--tct-text-secondary);
    background: transparent;
}
[data-theme="dark"] .tc-shop__view-btn:hover {
    color: var(--tct-text);
    background: rgba(255, 255, 255, 0.05);
}
[data-theme="dark"] .tc-shop__view-btn--active {
    background: var(--tct-home-card-bg);
    color: var(--tct-text);
    box-shadow: inset 0 0 0 1px var(--tct-home-card-border);
}

/* ── Filter toggle (rotated pill on left edge) ─────────────────────────── */
[data-theme="dark"] .tc-shop__filter-toggle {
    background: var(--tct-home-card-bg);
    color: var(--tct-text);
    border-color: var(--tct-home-card-border);
}
[data-theme="dark"] .tc-shop__filter-toggle:hover {
    background: var(--tct-home-feature-bg);
    border-color: rgba(255, 255, 255, 0.12);
}

/* ── Product cards ─────────────────────────────────────────────────────── */
/* Match the homepage product card surface: gradient bg, subtle border,
   16px radius. White cards on dark body was the biggest contrast issue
   pre-redesign — this is the headline visual change. */
[data-theme="dark"] .product-card {
    background: var(--tct-home-card-bg);
    border: 1px solid var(--tct-home-card-border);
    border-radius: 16px;
}
[data-theme="dark"] .product-card:hover {
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
    border-color: rgba(255, 255, 255, 0.12);
}

/* Image placeholder bg (when a product has no image yet) */
[data-theme="dark"] .product-img-placeholder {
    background: var(--tct-home-feature-bg);
    color: var(--tct-text-tertiary);
}

/* ── Product card text ─────────────────────────────────────────────────── */
[data-theme="dark"] .product-title {
    color: var(--tct-text);
}
[data-theme="dark"] .product-title:hover {
    color: var(--tct-brand);
}
[data-theme="dark"] .product-price {
    color: var(--tct-text);
}
[data-theme="dark"] .product-original-price {
    color: var(--tct-text-tertiary);
}
[data-theme="dark"] .product-card__tax-note,
[data-theme="dark"] .product-card__sku,
[data-theme="dark"] .product-card__review-count {
    color: var(--tct-text-tertiary);
}
[data-theme="dark"] .product-card__feature-label {
    color: var(--tct-text-tertiary);
}
[data-theme="dark"] .product-card__short-desc {
    color: var(--tct-text-secondary);
}

/* ── Add to Cart button ────────────────────────────────────────────────── */
/* Match homepage's primary indigo gradient (`--tct-home-primary`). The
   plugin default is solid black `#0e1115` which clashes with the new
   brand palette. */
[data-theme="dark"] .product-card__cart-btn {
    background: var(--tct-home-primary) !important;
    border-radius: 10px;
    box-shadow: var(--tct-home-primary-glow);
    transition: background 0.15s ease, transform 0.15s ease,
                box-shadow 0.2s ease, filter 0.2s ease;
}
[data-theme="dark"] .product-card__cart-btn:hover {
    background: var(--tct-home-primary-hover) !important;
    filter: brightness(1.05);
    transform: translateY(-1px);
    box-shadow: 0 14px 32px rgba(79, 70, 229, 0.45);
}
[data-theme="dark"] .product-card__cart-btn--disabled {
    background: rgba(255, 255, 255, 0.08) !important;
    color: rgba(255, 255, 255, 0.4);
    box-shadow: none;
    filter: none;
    transform: none;
}

/* List view's inline cart button — same treatment */
[data-theme="dark"] .product-card__list-cart-btn {
    background: var(--tct-home-primary);
    border-radius: 10px;
    box-shadow: var(--tct-home-primary-glow);
    transition: background 0.15s ease, transform 0.15s ease,
                box-shadow 0.2s ease, filter 0.2s ease;
}
[data-theme="dark"] .product-card__list-cart-btn:hover {
    background: var(--tct-home-primary-hover);
    filter: brightness(1.05);
    transform: translateY(-1px);
}

/* List view's row icons (wishlist, compare, etc. on the right) */
[data-theme="dark"] .product-card__control-icon {
    background: var(--tct-home-feature-bg);
    border-color: var(--tct-home-card-border);
    color: var(--tct-text-secondary);
}
[data-theme="dark"] .product-card__control-icon:hover {
    border-color: var(--tct-brand);
    color: var(--tct-brand);
}

/* ── Hover action circles (eye/swap/heart over the image) ──────────────── */
/* Already use rgba(0,0,0,0.7) which works on either bg. Bump opacity in
   dark mode so they read clearly on the gradient card. */
[data-theme="dark"] .btn-action-circle {
    background: rgba(0, 0, 0, 0.85);
    color: var(--tct-text);
}
[data-theme="dark"] .btn-action-circle:hover {
    background: #000;
}

/* Wishlist active state stays red — but the white bg from plugin default
   (border-color: #fca5a5; background: #fff) doesn't work on dark. Flip
   bg to a dark surface and keep the heart red. */
[data-theme="dark"] .tc-wishlist-toggle--active {
    background: var(--tct-home-feature-bg) !important;
    border-color: rgba(239, 68, 68, 0.4) !important;
    color: #ef4444 !important;
}

/* ── Stock badges (in / out / low) ─────────────────────────────────────── */
/* Plugin uses near-white tint backgrounds (#fef2f2, #f0fdf4) which are
   invisible on dark. Switch to translucent versions of the same hue
   so the color signal carries through. */
[data-theme="dark"] .product-card__stock-badge--out,
[data-theme="dark"] .product-card__body-stock--out {
    background: rgba(220, 38, 38, 0.15);
    color: #f87171;
}
[data-theme="dark"] .product-card__stock-badge--count,
[data-theme="dark"] .product-card__body-stock--in {
    background: rgba(22, 163, 74, 0.15);
    color: #4ade80;
}

/* ── Sale badge (red ribbon top-left of card) ──────────────────────────── */
/* Already #dc2626 red — fine on either bg, no override needed. */

/* ── Pagination ────────────────────────────────────────────────────────── */
/* Plugin pagination defaults to dark text on white pills. Flip to light
   text on dark surface in dark mode. */
[data-theme="dark"] .tc-pagination__page,
[data-theme="dark"] .tc-pagination__nav {
    background: var(--tct-home-feature-bg);
    border-color: var(--tct-home-card-border);
    color: var(--tct-text-secondary);
}
[data-theme="dark"] .tc-pagination__page:hover,
[data-theme="dark"] .tc-pagination__nav:hover {
    background: var(--tct-home-card-bg);
    color: var(--tct-text);
    border-color: rgba(255, 255, 255, 0.12);
}
[data-theme="dark"] .tc-pagination__page--active {
    background: var(--tct-home-primary);
    color: #fff;
    border-color: transparent;
    box-shadow: var(--tct-home-primary-glow);
}

/* ── Empty state (no products found) ───────────────────────────────────── */
[data-theme="dark"] .tc-shop__empty {
    color: var(--tct-text-secondary);
}
[data-theme="dark"] .tc-shop__empty-title {
    color: var(--tct-text);
}

/* ── Banner: dark-mode image variant ───────────────────────────────────── */
/* When the user sets BOTH a light and dark banner image in the Customizer
   (Appearance → Customize → Shop Page Banner), the plugin's archive.php
   adds class `.tc-shop__banner--has-dark-image` to the section element
   and stores the dark image URL inline as `--tc-banner-img-dark:url(...)`.
   This rule swaps `background-image` to the dark URL whenever the site
   is in dark mode.

   `!important` is required because the light banner URL is also set
   inline via the `style` attribute (specificity 1,0,0,0). Without
   !important the inline style wins regardless of selector specificity.

   When only the light image is set (no dark variant), this class isn't
   added and this rule has no effect — the light image stays in both
   modes, matching the pre-existing single-image behavior. */
[data-theme="dark"] .tc-shop__banner--has-dark-image {
    background-image: var(--tc-banner-img-dark) !important;
}

/* ── Banner: subtle bottom separator + glow in dark mode (S152 R3.4 / R3.5)
   In dark mode the page bg sits flush against the bottom of the banner image
   with no visual seam. R3.4 added a hairline 6%-white border to define the
   edge; R3.5 follows up with a soft glow below it for a more polished
   "light bleeding through the seam" effect. Mirrors the same treatment now
   applied to .tct-home-hero in homepage.css.

   The next section below every banner page (search results / shop archive
   / blog archive / single post / cart / checkout / dashboard / sub-pages /
   order-received) is a transparent wrapper, so the box-shadow renders
   cleanly against the page bg without being clipped by another section's
   own background. Light mode left alone (white-on-white at this opacity
   would be invisible anyway). */
[data-theme="dark"] .tc-shop__banner {
    border-bottom: 1px solid rgba(255, 255, 255, 0.10);
    box-shadow: 0 4px 24px rgba(255, 255, 255, 0.05);
}