/* ==========================================================================
   Theme: Editorial Market
   Vibe:   Wholesale-marketplace editorial. Forest green +
           warm paper, refined serif headings, generous whitespace, airy
           borderless product cards, and a split hero (text panel + photo).
   Target: Curated retailers / boutique outfitters positioning as an elevated,
           magazine-style storefront.

   NOTE ON STRUCTURE:
   Unlike the other personas, this theme also carries *structural* overrides
   (the split hero, the borderless product row). They are ALL scoped under
   [data-theme="editorial-market"], so selecting any other theme leaves the
   storefront's default centered-band hero and bordered cards untouched. The
   only shared markup hooks this relies on are:
     • .hero-content  — a wrapper that is `display: contents` by default
                        (zero layout effect) and becomes the left panel here.
     • --ot-hero-image — a CSS var carrying the hero image URL, set inline by
                        HeroSection so this theme can render it as a side photo.
   ========================================================================== */

[data-theme="editorial-market"] {
    /* ── Brand: deep forest green ─────────────────────────────────────────── */
    --ot-color-primary:           #1d3c2e;
    --ot-color-primary-light:     #2f5641;
    --ot-color-primary-dark:      #12281e;
    --ot-color-primary-contrast:  #ffffff;

    /* ── Accent: warm cream (the white-on-green CTA hallmark) ─────────────── */
    --ot-color-accent:            #f3efe6;
    --ot-color-accent-light:      #ffffff;
    --ot-color-accent-dark:       #e4ddcd;
    --ot-color-accent-contrast:   #1d3c2e;

    --ot-color-secondary:         #2b2b2b;
    --ot-color-secondary-light:   #444444;
    --ot-color-secondary-dark:    #1a1a1a;
    --ot-color-secondary-contrast:#ffffff;

    /* ── Surfaces: clean white + warm paper ──────────────────────────────── */
    --ot-color-bg:                #ffffff;
    --ot-color-bg-alt:            #faf8f3;
    --ot-color-bg-elevated:       #ffffff;
    --ot-color-surface:           #ffffff;
    --ot-color-surface-hover:     #f7f4ee;
    --ot-color-surface-active:    #efeae0;

    /* ── Chrome: white editorial header, forest-green footer ─────────────── */
    --ot-color-header-bg:         #ffffff;
    --ot-color-header-text:       #1a1a1a;
    --ot-color-header-border:     #ece8df;
    --ot-color-footer-bg:         #1d3c2e;
    --ot-color-footer-text:       #e9e4d8;
    --ot-color-footer-heading:    #ffffff;
    --ot-color-footer-link:       #cdd8cf;
    --ot-color-footer-link-hover: #ffffff;

    /* ── Text ─────────────────────────────────────────────────────────────── */
    --ot-color-text:              #1a1a1a;
    --ot-color-text-secondary:    #5b5b54;
    --ot-color-text-muted:        #8a8a80;
    --ot-color-text-inverse:      #ffffff;
    --ot-color-text-link:         #1d3c2e;
    --ot-color-text-link-hover:   #2f5641;

    /* ── Border ───────────────────────────────────────────────────────────── */
    --ot-color-border:            #ece8df;
    --ot-color-border-strong:     #d9d3c6;
    --ot-color-border-focus:      #1d3c2e;

    /* ── Typography: refined editorial serif headings, no uppercase ───────── */
    --ot-font-heading:            'Playfair Display', Georgia, 'Times New Roman', serif;
    --ot-heading-transform:       none;
    --ot-tracking-wide:           -0.01em;
    --ot-weight-bold:             600;   /* serif reads better a touch lighter */

    /* ── Shape: minimal, modern radius ───────────────────────────────────── */
    --ot-radius-button:           6px;
    --ot-radius-card:             8px;
    --ot-radius-input:            6px;
}

/* ==========================================================================
   Hero layout: editorial-market's signature split hero now lives in the
   theme-independent `.hero--layout-split-left` class in site.css. This theme
   simply DEFAULTS heroes to that layout (see HeroLayouts.DefaultForTheme), and
   the panel/photo pick up this theme's tokens (forest-green primary, etc.).
   A per-hero override in Hero Content can choose a different layout.
   ========================================================================== */

/* ==========================================================================
   STRUCTURAL — Airy, borderless product row
   Targets ONLY image-bearing product cards via :has(.card-img). Course cards
   and the shop filter card (no .card-img) keep their default chrome.
   ========================================================================== */
[data-theme="editorial-market"] .card:has(.card-img) {
    background: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
    overflow: visible;
}

[data-theme="editorial-market"] .card:has(.card-img):hover {
    box-shadow: none;
}

[data-theme="editorial-market"] .card:has(.card-img) .card-img {
    border-radius: var(--ot-radius-card);
    height: 240px;
    transition: transform var(--ot-transition-base);
}

[data-theme="editorial-market"] .card:has(.card-img):hover .card-img {
    transform: translateY(-3px);
}

[data-theme="editorial-market"] .card:has(.card-img) .card-body {
    padding: var(--ot-space-3) var(--ot-space-1) 0;
}

/* Product name: quiet, small, sentence-style — the price does the talking. */
[data-theme="editorial-market"] .card:has(.card-img) .card-body h4 {
    font-family: var(--ot-font-body);
    font-weight: var(--ot-weight-normal);
    font-size: var(--ot-text-sm);
    color: var(--ot-color-text-secondary);
    letter-spacing: 0;
}

[data-theme="editorial-market"] .card:has(.card-img) .price {
    font-family: var(--ot-font-body);
    font-size: var(--ot-text-base);
    font-weight: var(--ot-weight-semibold);
    color: var(--ot-color-text);
}