/**
 * WifeLife Shop Engine — CSS
 * Covers: product grid, product card, filter bar, archetype sections, FTC disclosure.
 */

:root {
    --sovereign:      #D4AF37;
    --sovereign-dark: #B8963B;
    --obsidian:       #020B13;
    --obsidian-mid:   #060e18;
    --obsidian-light: #0a1520;
    --obsidian-card:  #0d1a27;
    --text-primary:   rgba(255,255,255,0.95);
    --text-secondary: rgba(255,255,255,0.60);
    --text-muted:     rgba(255,255,255,0.38);
    --border-subtle:  rgba(212,175,55,0.15);
    --border-accent:  rgba(212,175,55,0.35);
    --red-bravo:      #C0392B;
    --green-steal:    #27AE60;
    --purple-dupe:    #8E44AD;
    --blue-trending:  #2980B9;
}

/* ═══════════════════════════════════════════════════════
   PRODUCT GRID
   ═══════════════════════════════════════════════════════ */
.wse-product-grid {
    display: grid;
    gap: 1.5rem;
    margin: 2rem 0;
}
.wse-product-grid.columns-2 { grid-template-columns: repeat(2, 1fr); }
.wse-product-grid.columns-3 { grid-template-columns: repeat(3, 1fr); }
.wse-product-grid.columns-4 { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 1100px) {
    .wse-product-grid.columns-4 { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 768px) {
    .wse-product-grid.columns-3,
    .wse-product-grid.columns-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
    .wse-product-grid.columns-2,
    .wse-product-grid.columns-3,
    .wse-product-grid.columns-4 { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════
   PRODUCT CARD
   ═══════════════════════════════════════════════════════ */
.wse-product-card {
    background:    var(--obsidian-card);
    border:        1px solid var(--border-subtle);
    border-radius: 6px;
    overflow:      hidden;
    display:       flex;
    flex-direction: column;
    transition:    border-color .25s ease, transform .25s ease, box-shadow .25s ease;
    position:      relative;
}
.wse-product-card:hover {
    border-color:  var(--border-accent);
    transform:     translateY(-3px);
    box-shadow:    0 12px 30px rgba(0,0,0,.45);
}

/* Image area */
.wse-card-img-wrap {
    position:        relative;
    padding-top:     120%;  /* 5:6 portrait ratio */
    overflow:        hidden;
    background:      var(--obsidian-light);
}
.wse-card-img-wrap img {
    position:   absolute;
    inset:      0;
    width:      100%;
    height:     100%;
    object-fit: cover;
    transition: transform .45s ease;
}
.wse-product-card:hover .wse-card-img-wrap img {
    transform: scale(1.04);
}
.wse-card-img-placeholder {
    position:        absolute;
    inset:           0;
    display:         flex;
    align-items:     center;
    justify-content: center;
    color:           var(--text-muted);
}
.wse-card-img-placeholder svg { width: 56px; height: 56px; opacity: .35; }
.wse-card-img-overlay {
    position:   absolute;
    inset:      0;
    background: linear-gradient(to top, rgba(2,11,19,.85) 0%, transparent 55%);
}

/* Badge row (top-left of image) */
.wse-card-badges {
    position: absolute;
    top:      .6rem;
    left:     .6rem;
    right:    .6rem;
    display:  flex;
    flex-wrap: wrap;
    gap:      .35rem;
    z-index:  2;
}
.wse-badge {
    display:       inline-block;
    padding:       .18rem .55rem;
    border-radius: 2px;
    font-size:     .68rem;
    font-family:   'JetBrains Mono', monospace;
    font-weight:   600;
    letter-spacing:.04em;
    text-transform: uppercase;
    color:         #fff;
    background:    rgba(2,11,19,.82);
    border:        1px solid currentColor;
}
.wse-badge.badge-seen-on-bravo   { color: var(--red-bravo);   border-color: var(--red-bravo); }
.wse-badge.badge-luxury-dupe     { color: #c39bd3; border-color: var(--purple-dupe); }
.wse-badge.badge-steal           { color: #a9dfbf; border-color: var(--green-steal); }
.wse-badge.badge-trending        { color: #aed6f1; border-color: var(--blue-trending); }
.wse-badge.badge-splurge         { color: var(--sovereign); border-color: var(--sovereign); }
.wse-badge.badge-under-100       { color: #a9dfbf; border-color: var(--green-steal); }

/* Archetype chip (bottom-right of image) */
.wse-card-archetype-chip {
    position:   absolute;
    bottom:     .6rem;
    right:      .6rem;
    z-index:    2;
    background: rgba(212,175,55,.15);
    border:     1px solid rgba(212,175,55,.45);
    color:      var(--sovereign);
    font-size:  .66rem;
    font-family:'JetBrains Mono', monospace;
    letter-spacing:.03em;
    text-transform: uppercase;
    padding:    .15rem .45rem;
    border-radius: 2px;
    max-width:  60%;
    white-space: nowrap;
    overflow:   hidden;
    text-overflow: ellipsis;
}

/* Card body */
.wse-card-body {
    padding:        1rem 1.1rem 0;
    flex:           1;
    display:        flex;
    flex-direction: column;
}
.wse-card-brand {
    font-family:    'JetBrains Mono', monospace;
    font-size:      .7rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color:          var(--sovereign);
    margin:         0 0 .3rem;
}
.wse-card-title {
    font-family:  'Playfair Display', serif;
    font-size:    1.05rem;
    font-weight:  400;
    color:        var(--text-primary);
    margin:       0 0 .5rem;
    line-height:  1.3;
}
.wse-card-title a {
    color:          inherit;
    text-decoration:none;
}
.wse-card-title a:hover { color: var(--sovereign); }

/* Wife + franchise row */
.wse-card-meta {
    display:     flex;
    flex-wrap:   wrap;
    gap:         .5rem;
    margin:      .3rem 0 .6rem;
    font-size:   .78rem;
    color:       var(--text-secondary);
}
.wse-card-meta-item {
    display:     flex;
    align-items: center;
    gap:         .25rem;
}
.wse-card-meta-item svg { width: 12px; height: 12px; opacity: .6; }
.wse-card-meta a {
    color:          var(--text-secondary);
    text-decoration:none;
}
.wse-card-meta a:hover { color: var(--sovereign); }

/* Price */
.wse-card-price {
    font-family:  'Playfair Display', serif;
    font-size:    1.15rem;
    color:        var(--text-primary);
    margin:       auto 0 .8rem;
    padding-top:  .5rem;
}
.wse-card-price.no-price { color: var(--text-muted); font-size: .85rem; font-style: italic; }

/* CTA */
.wse-card-footer {
    padding:    0 1.1rem 1.1rem;
    display:    flex;
    flex-direction: column;
    gap:        .5rem;
}
.wse-card-cta {
    display:         flex;
    align-items:     center;
    justify-content: center;
    gap:             .4rem;
    padding:         .7rem 1rem;
    background:      var(--sovereign);
    color:           var(--obsidian);
    font-family:     'JetBrains Mono', monospace;
    font-size:       .78rem;
    font-weight:     700;
    letter-spacing:  .06em;
    text-transform:  uppercase;
    text-decoration: none;
    border-radius:   3px;
    transition:      background .2s ease, color .2s ease;
}
.wse-card-cta:hover {
    background: var(--sovereign-dark);
    color:      var(--obsidian);
}
.wse-card-cta svg { width: 14px; height: 14px; flex-shrink: 0; }
.wse-card-ftc {
    font-size:   .62rem;
    color:       var(--text-muted);
    text-align:  center;
    line-height: 1.4;
}
.wse-card-ftc a { color: inherit; text-decoration: underline; }

/* ═══════════════════════════════════════════════════════
   FILTER BAR
   ═══════════════════════════════════════════════════════ */
.wse-filter-bar {
    background:    var(--obsidian-mid);
    border-top:    1px solid var(--border-subtle);
    border-bottom: 1px solid var(--border-subtle);
    padding:       1.25rem 2rem;
    margin:        0 0 2rem;
}
.wse-filter-form {
    display:   flex;
    flex-wrap: wrap;
    gap:       1rem;
    align-items: flex-end;
}
.wse-filter-group {
    display:        flex;
    flex-direction: column;
    gap:            .3rem;
    flex:           1;
    min-width:      160px;
}
.wse-filter-label {
    font-family:    'JetBrains Mono', monospace;
    font-size:      .68rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color:          var(--sovereign);
}
.wse-filter-select {
    background:    var(--obsidian-card);
    border:        1px solid var(--border-subtle);
    color:         var(--text-primary);
    padding:       .55rem .8rem;
    border-radius: 3px;
    font-size:     .88rem;
    appearance:    none;
    background-image:    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23D4AF37'/%3E%3C/svg%3E");
    background-repeat:   no-repeat;
    background-position: right .75rem center;
    padding-right:       2rem;
}
.wse-filter-select:focus {
    outline:      none;
    border-color: var(--sovereign);
}
.wse-filter-actions {
    display:     flex;
    gap:         .6rem;
    align-items: flex-end;
}
.wse-filter-btn {
    background:  var(--sovereign);
    color:       var(--obsidian);
    border:      none;
    padding:     .6rem 1.4rem;
    font-family: 'JetBrains Mono', monospace;
    font-size:   .78rem;
    font-weight: 700;
    letter-spacing:.06em;
    text-transform:uppercase;
    border-radius:3px;
    cursor:      pointer;
    transition:  background .2s ease;
}
.wse-filter-btn:hover { background: var(--sovereign-dark); }
.wse-filter-clear {
    font-size:      .78rem;
    color:          var(--text-muted);
    text-decoration:underline;
    padding:        .6rem 0;
    white-space:    nowrap;
}
.wse-filter-clear:hover { color: var(--text-secondary); }

/* Active filter chips */
.wse-active-filters {
    display:     flex;
    flex-wrap:   wrap;
    gap:         .5rem;
    align-items: center;
    margin-top:  .75rem;
    font-size:   .8rem;
    color:       var(--text-secondary);
}
.wse-active-label {
    font-family:    'JetBrains Mono', monospace;
    font-size:      .68rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    color:          var(--text-muted);
}
.wse-active-tag {
    display:      inline-flex;
    align-items:  center;
    gap:          .35rem;
    background:   rgba(212,175,55,.1);
    border:       1px solid var(--border-accent);
    color:        var(--sovereign);
    padding:      .2rem .55rem;
    border-radius:2px;
    font-size:    .75rem;
}
.wse-tag-remove {
    color:          var(--sovereign);
    text-decoration:none;
    font-weight:    700;
    line-height:    1;
}
.wse-tag-remove:hover { color: #fff; }

/* ═══════════════════════════════════════════════════════
   SECTION TITLES & ARCHETYPE SECTIONS
   ═══════════════════════════════════════════════════════ */
.wse-section-title {
    font-family:  'Playfair Display', serif;
    font-size:    clamp(1.6rem, 3vw, 2.2rem);
    font-weight:  400;
    color:        var(--text-primary);
    margin:       0 0 .5rem;
    line-height:  1.15;
}
.wse-section-desc {
    color:      var(--text-secondary);
    font-size:  .95rem;
    margin:     0 0 1.5rem;
    font-style: italic;
}
.wse-archetype-shop-section {
    margin: 3.5rem 0;
    padding: 2.5rem 0;
    border-top: 1px solid var(--border-subtle);
}
.wse-archetype-header {
    display:      flex;
    align-items:  baseline;
    flex-wrap:    wrap;
    gap:          1rem;
    margin-bottom:1.5rem;
}
.wse-archetype-name {
    font-family:  'Playfair Display', serif;
    font-size:    clamp(1.4rem, 2.5vw, 1.9rem);
    font-weight:  400;
    color:        var(--text-primary);
    margin:       0;
}
.wse-archetype-desc {
    color:      var(--text-secondary);
    font-style: italic;
    font-size:  .9rem;
    margin:     0;
    flex-basis: 100%;
}
.wse-archetype-cta {
    font-family:    'JetBrains Mono', monospace;
    font-size:      .75rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    color:          var(--sovereign);
    text-decoration:none;
    border-bottom:  1px solid var(--border-accent);
    padding-bottom: .1rem;
    white-space:    nowrap;
    margin-left:    auto;
}
.wse-archetype-cta:hover { color: #fff; }

/* ═══════════════════════════════════════════════════════
   WIFE SHOP SECTION
   ═══════════════════════════════════════════════════════ */
.wse-wife-shop-header {
    display:      flex;
    align-items:  baseline;
    justify-content: space-between;
    gap:          1rem;
    flex-wrap:    wrap;
    margin-bottom:1.25rem;
}
.wse-wife-shop-header h2 {
    font-family: 'Playfair Display', serif;
    font-size:   clamp(1.4rem,2.5vw,1.9rem);
    font-weight: 400;
    color:       var(--text-primary);
    margin:      0;
}
.wse-wife-link {
    font-family:    'JetBrains Mono', monospace;
    font-size:      .72rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    color:          var(--sovereign);
    text-decoration:none;
}
.wse-wife-link:hover { color: #fff; }

/* ═══════════════════════════════════════════════════════
   FTC DISCLOSURE
   ═══════════════════════════════════════════════════════ */
.wse-ftc-disclosure {
    background:  rgba(212,175,55,.04);
    border:      1px solid var(--border-subtle);
    border-radius:3px;
    padding:     .7rem 1rem;
    margin:      1.5rem 0;
    font-size:   .78rem;
    color:       var(--text-muted);
    line-height: 1.5;
}
.wse-ftc-disclosure a {
    color:          var(--text-muted);
    text-decoration:underline;
}
.wse-ftc-disclosure strong { color: var(--text-secondary); }

/* ═══════════════════════════════════════════════════════
   NO-RESULTS
   ═══════════════════════════════════════════════════════ */
.wse-no-results {
    text-align:   center;
    color:        var(--text-secondary);
    font-style:   italic;
    padding:      3rem 0;
    grid-column:  1 / -1;
}

/* ═══════════════════════════════════════════════════════
   SHOP SUB-PAGE HERO (shared across shop-*.php templates)
   ═══════════════════════════════════════════════════════ */
.wse-shop-page {
    background: var(--obsidian);
    color:      var(--text-primary);
    min-height: 100vh;
}
.wse-shop-page-hero {
    background:      linear-gradient(135deg, var(--obsidian) 0%, #080f18 100%);
    border-bottom:   1px solid var(--border-subtle);
    padding:         4rem 2rem 3rem;
    text-align:      center;
    position:        relative;
    overflow:        hidden;
}
.wse-shop-page-hero::before {
    content:  '';
    position: absolute;
    inset:    0;
    background:
        radial-gradient(ellipse 60% 50% at 50% 0%, rgba(212,175,55,.07) 0%, transparent 70%);
    pointer-events: none;
}
.wse-shop-page-hero .wse-eyebrow {
    font-family:    'Playfair Display', serif;
    font-size:      .9rem;
    font-style:     italic;
    color:          var(--sovereign);
    display:        block;
    margin-bottom:  1rem;
}
.wse-shop-page-hero h1 {
    font-family:   'Playfair Display', serif;
    font-size:     clamp(2.2rem, 5vw, 3.5rem);
    font-weight:   400;
    color:         var(--text-primary);
    margin:        0 0 1rem;
    line-height:   1.1;
}
.wse-shop-page-hero p {
    font-size:  1rem;
    color:      var(--text-secondary);
    max-width:  600px;
    margin:     0 auto;
    line-height:1.7;
}
.wse-shop-page-content {
    max-width: 1280px;
    margin:    0 auto;
    padding:   2.5rem 2rem 4rem;
}

/* ═══════════════════════════════════════════════════════
   PAGINATION
   ═══════════════════════════════════════════════════════ */
.wse-pagination {
    display:         flex;
    justify-content: center;
    gap:             .5rem;
    margin:          2.5rem 0;
}
.wse-pagination a,
.wse-pagination span {
    display:       flex;
    align-items:   center;
    justify-content:center;
    width:         2.4rem;
    height:        2.4rem;
    border:        1px solid var(--border-subtle);
    border-radius: 3px;
    font-size:     .85rem;
    color:         var(--text-secondary);
    text-decoration:none;
    transition:    border-color .2s, color .2s;
}
.wse-pagination a:hover    { border-color: var(--border-accent); color: var(--sovereign); }
.wse-pagination span.current { border-color: var(--sovereign); color: var(--sovereign); }

/* ═══════════════════════════════════════════════════════
   RESULT COUNT
   ═══════════════════════════════════════════════════════ */
.wse-result-count {
    font-family:    'JetBrains Mono', monospace;
    font-size:      .72rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    color:          var(--text-muted);
    margin:         0 0 1.5rem;
}

@media (max-width: 768px) {
    .wse-filter-bar    { padding: 1rem; }
    .wse-filter-form   { flex-direction: column; }
    .wse-filter-group  { min-width: 100%; }
}