/* ================================================================
   WEAR ON SOUL — GLOBAL CSS
   Applied to ALL pages via child theme
   ================================================================ */

/* ── Google Fonts already enqueued via PHP ── */

/* ── Design Tokens ── */
:root {
    --wos-black   : #0a0a0a;
    --wos-dark    : #111111;
    --wos-mid     : #1a1a1a;
    --wos-mid2    : #222222;
    --wos-border  : #2a2a2a;
    --wos-cream   : #f0ede8;
    --wos-gold    : #c8a96e;
    --wos-gold-lt : #e2c98c;
    --wos-gold-dk : #a8894e;
    --wos-muted   : #888888;
    --wos-muted2  : #555555;
    --font-d      : 'Bebas Neue', 'Arial Black', sans-serif;
    --font-c      : 'Barlow Condensed', 'Arial Narrow', sans-serif;
    --font-b      : 'Inter', -apple-system, sans-serif;
    --transition  : .22s ease;
}

/* ── Full site dark override ── */
body.wos-theme {
    background : var(--wos-black) !important;
    color      : var(--wos-cream) !important;
    font-family: var(--font-b) !important;
}

/* ── Reset helpers ── */
.wos-theme *, .wos-theme *::before, .wos-theme *::after { box-sizing: border-box; }
.wos-theme img   { max-width: 100%; display: block; }
.wos-theme a     { color: inherit; text-decoration: none; }
.wos-theme ul    { list-style: none; margin: 0; padding: 0; }

/* ── Override Juliette white/light backgrounds ── */
.wos-theme .site,
.wos-theme #page,
.wos-theme .site-content,
.wos-theme main,
.wos-theme article { background: var(--wos-black) !important; }

/* ── HEADER ── */
.wos-theme #masthead,
.wos-theme .site-header,
.wos-theme header.header { background: var(--wos-black) !important; border-bottom: 1px solid var(--wos-border) !important; }

.wos-theme .main-navigation a,
.wos-theme .nav-menu a,
.wos-theme header nav a {
    color         : var(--wos-cream) !important;
    font-size     : 11px !important;
    font-weight   : 600 !important;
    letter-spacing: .14em !important;
    text-transform: uppercase !important;
    font-family   : var(--font-b) !important;
    opacity       : .8;
    transition    : opacity var(--transition) !important;
}
.wos-theme .main-navigation a:hover,
.wos-theme nav a:hover { opacity: 1 !important; color: var(--wos-gold) !important; }

.wos-theme .site-title,
.wos-theme .site-title a { color: var(--wos-cream) !important; font-family: var(--font-d) !important; font-size: 22px !important; letter-spacing: .1em !important; }

/* Cart icon */
.wos-theme .cart-count,
.wos-theme .woocommerce-cart-icon,
.wos-theme a.cart-contents { color: var(--wos-cream) !important; }

/* ── FOOTER ── */
.wos-theme footer,
.wos-theme .site-footer { background: var(--wos-black) !important; border-top: 1px solid var(--wos-border) !important; color: var(--wos-muted) !important; }
.wos-theme .site-footer a { color: var(--wos-muted) !important; transition: color var(--transition); }
.wos-theme .site-footer a:hover { color: var(--wos-gold) !important; }
.wos-theme .site-footer .widget-title,
.wos-theme .footer-widget-area .widget-title { color: var(--wos-cream) !important; font-family: var(--font-c) !important; font-size: 13px !important; font-weight: 800 !important; letter-spacing: .14em !important; text-transform: uppercase; }

/* ── SHARED BUTTONS ── */
.wos-btn {
    display       : inline-block;
    font-family   : var(--font-b);
    font-size     : 11px;
    font-weight   : 700;
    letter-spacing: .18em;
    text-transform: uppercase;
    padding       : 14px 34px;
    border        : none;
    cursor        : pointer;
    transition    : background var(--transition), color var(--transition), transform var(--transition);
    white-space   : nowrap;
    text-align    : center;
}
.wos-btn--gold    { background: var(--wos-gold);  color: var(--wos-black); }
.wos-btn--gold:hover { background: var(--wos-gold-lt); transform: translateY(-1px); }
.wos-btn--outline { background: transparent; border: 1px solid var(--wos-gold); color: var(--wos-gold); }
.wos-btn--outline:hover { background: var(--wos-gold); color: var(--wos-black); }
.wos-btn--dark    { background: var(--wos-mid); color: var(--wos-cream); }
.wos-btn--dark:hover { background: var(--wos-mid2); }
.wos-btn--border  { background: transparent; border: 1px solid var(--wos-border); color: var(--wos-cream); }
.wos-btn--border:hover { border-color: var(--wos-gold); color: var(--wos-gold); }

/* ── SECTION LAYOUT ── */
.wos-section          { padding: 64px 40px; }
.wos-section--no-top  { padding-top: 0; }
.wos-section--no-bot  { padding-bottom: 0; }
.wos-section--dark    { background: var(--wos-dark); }
.wos-section__head    { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 28px; }
.wos-section__title   { font-family: var(--font-c); font-size: 28px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--wos-cream); }
.wos-section__link    { font-size: 10px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--wos-gold); border-bottom: 1px solid var(--wos-gold); padding-bottom: 2px; transition: opacity var(--transition); }
.wos-section__link:hover { opacity: .65; }
.wos-center           { text-align: center; }

/* ── TRUST BAR ── */
.wos-trust { background: var(--wos-mid); border-bottom: 1px solid var(--wos-border); padding: 16px 40px; display: flex; justify-content: space-around; flex-wrap: wrap; gap: 14px; }
.wos-trust__item { display: flex; align-items: center; gap: 10px; }
.wos-trust__icon { width: 20px; height: 20px; color: var(--wos-gold); flex-shrink: 0; }
.wos-trust__label { font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--wos-cream); line-height: 1.3; }
.wos-trust__sub   { font-size: 10px; color: var(--wos-muted); }

/* ── PRODUCT CARDS (shared) ── */
.wos-card { cursor: pointer; }
.wos-card__img {
    position    : relative;
    overflow    : hidden;
    background  : var(--wos-mid);
    aspect-ratio: 3 / 4;
}
.wos-card__img img {
    width      : 100%;
    height     : 100%;
    object-fit : cover;
    transition : transform .44s ease;
    display    : block;
}
.wos-card:hover .wos-card__img img { transform: scale(1.05); }
.wos-card__badge {
    position      : absolute; top: 12px; left: 12px; z-index: 2;
    background    : var(--wos-gold); color: var(--wos-black);
    font-size     : 9px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
    padding       : 4px 9px;
}
.wos-card__sale {
    position      : absolute; top: 12px; right: 12px; z-index: 2;
    background    : #e44; color: #fff;
    font-size     : 9px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
    padding       : 4px 9px;
}
.wos-card__qv {
    position      : absolute; bottom: 0; left: 0; right: 0; z-index: 3;
    background    : rgba(10,10,10,.85); color: var(--wos-cream);
    font-size     : 10px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
    text-align    : center; padding: 12px; border: none; cursor: pointer; width: 100%;
    transform     : translateY(100%); transition: transform .28s ease;
}
.wos-card:hover .wos-card__qv { transform: translateY(0); }
.wos-card__name { display: block; margin-top: 12px; font-size: 13px; font-weight: 500; color: var(--wos-cream); transition: color var(--transition); line-height: 1.4; }
.wos-card__name:hover { color: var(--wos-gold); }
.wos-card__price { margin-top: 5px; font-size: 13px; color: var(--wos-muted); }
.wos-card__price ins { text-decoration: none; color: var(--wos-gold); }
.wos-card__price del { font-size: 11px; opacity: .6; margin-left: 4px; }
.wos-card__price .woocommerce-Price-amount { color: var(--wos-muted); }
.wos-card__rating { margin-top: 4px; }
.wos-card .star-rating { color: var(--wos-gold); font-size: 11px; }

/* ── PRODUCT GRID LAYOUTS ── */
.wos-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.wos-grid-5 { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; }
.wos-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }

/* ── QUICK VIEW MODAL ── */
.wos-modal { position: fixed; inset: 0; background: rgba(0,0,0,.9); z-index: 99999; display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transition: opacity .25s; }
.wos-modal.is-open { opacity: 1; pointer-events: all; }
.wos-modal__box { background: var(--wos-dark); border: 1px solid var(--wos-border); width: 92%; max-width: 900px; max-height: 92vh; overflow-y: auto; display: grid; grid-template-columns: 1fr 1fr; transform: translateY(22px); transition: transform .25s; }
.wos-modal.is-open .wos-modal__box { transform: translateY(0); }
.wos-modal__imgs { overflow: hidden; background: var(--wos-mid); aspect-ratio: 3/4; }
.wos-modal__imgs img { width: 100%; height: 100%; object-fit: cover; display: block; }
.wos-modal__body { padding: 36px 30px; display: flex; flex-direction: column; gap: 14px; overflow-y: auto; }
.wos-modal__close { align-self: flex-end; background: none; border: none; color: var(--wos-muted); cursor: pointer; width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; transition: color var(--transition); padding: 0; }
.wos-modal__close:hover { color: var(--wos-cream); }
.wos-modal__close svg { width: 18px; height: 18px; }
.wos-modal__title { font-family: var(--font-c); font-size: 26px; font-weight: 800; text-transform: uppercase; color: var(--wos-cream); line-height: 1.1; }
.wos-modal__price { font-size: 22px; font-weight: 600; color: var(--wos-gold); }
.wos-modal__price del { font-size: 14px; color: var(--wos-muted); font-weight: 400; margin-left: 8px; }
.wos-modal__features { display: flex; flex-direction: column; gap: 6px; }
.wos-modal__features li { font-size: 12px; color: var(--wos-muted); display: flex; align-items: center; gap: 8px; }
.wos-modal__features li::before { content: '✓'; color: var(--wos-gold); }
.wos-modal__attr-label { font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--wos-cream); margin-bottom: 8px; display: block; }
.wos-size-grid { display: flex; flex-wrap: wrap; gap: 8px; }
.wos-size-btn { width: 44px; height: 44px; border: 1px solid var(--wos-border); background: none; color: var(--wos-cream); font-size: 13px; font-weight: 600; cursor: pointer; transition: border-color var(--transition), background var(--transition), color var(--transition); font-family: var(--font-b); }
.wos-size-btn:hover, .wos-size-btn.is-active { border-color: var(--wos-gold); background: var(--wos-gold); color: var(--wos-black); }
.wos-size-btn:disabled { opacity: .3; cursor: not-allowed; }
.wos-qty-row { display: flex; align-items: center; gap: 12px; }
.wos-qty-btn { width: 38px; height: 38px; border: 1px solid var(--wos-border); background: none; color: var(--wos-cream); font-size: 18px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: border-color var(--transition); }
.wos-qty-btn:hover { border-color: var(--wos-gold); }
.wos-qty-btn svg { width: 16px; height: 16px; }
.wos-qty-val { font-size: 16px; font-weight: 600; min-width: 28px; text-align: center; color: var(--wos-cream); }
.wos-modal__add { width: 100%; padding: 16px; background: var(--wos-gold); color: var(--wos-black); font-size: 11px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; border: none; cursor: pointer; transition: background var(--transition); font-family: var(--font-b); }
.wos-modal__add:hover { background: var(--wos-gold-lt); }
.wos-modal__add:disabled { opacity: .5; cursor: not-allowed; }
.wos-modal__buy { display: block; text-align: center; width: 100%; padding: 15px; background: none; border: 1px solid var(--wos-border); color: var(--wos-cream); font-size: 11px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; transition: border-color var(--transition); }
.wos-modal__buy:hover { border-color: var(--wos-gold); color: var(--wos-gold); }
.wos-modal__meta { display: flex; gap: 16px; flex-wrap: wrap; }
.wos-modal__meta-item { display: flex; align-items: center; gap: 5px; font-size: 11px; color: var(--wos-muted); }
.wos-modal__meta-item svg { width: 13px; height: 13px; color: var(--wos-gold); }

/* ── TOAST ── */
.wos-toast { position: fixed; bottom: 28px; right: 28px; z-index: 100000; background: var(--wos-mid); border: 1px solid var(--wos-gold); padding: 14px 22px; font-size: 13px; color: var(--wos-cream); box-shadow: 0 8px 32px rgba(0,0,0,.7); transform: translateY(80px); opacity: 0; pointer-events: none; transition: transform .3s ease, opacity .3s ease; max-width: 300px; line-height: 1.55; border-radius: 1px; }
.wos-toast.is-visible { transform: translateY(0); opacity: 1; }
.wos-toast strong { color: var(--wos-gold); display: block; margin-bottom: 2px; }

/* ── WooCommerce global overrides ── */
.wos-theme .woocommerce-breadcrumb { color: var(--wos-muted) !important; font-size: 12px !important; padding: 14px 40px !important; background: var(--wos-dark) !important; border-bottom: 1px solid var(--wos-border) !important; }
.wos-theme .woocommerce-breadcrumb a { color: var(--wos-muted) !important; }
.wos-theme .woocommerce-breadcrumb a:hover { color: var(--wos-gold) !important; }

/* ── RESPONSIVE ── */
@media (max-width: 1200px) { .wos-grid-5 { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 1024px) { .wos-grid-4 { grid-template-columns: repeat(3, 1fr); } .wos-grid-5 { grid-template-columns: repeat(3, 1fr); } .wos-modal__box { grid-template-columns: 1fr; } .wos-modal__imgs { aspect-ratio: 4/3; } .wos-section { padding: 48px 24px; } .wos-trust { padding: 14px 24px; } }
@media (max-width: 768px) { .wos-grid-4, .wos-grid-5, .wos-grid-3 { grid-template-columns: repeat(2, 1fr); gap: 12px; } .wos-section { padding: 40px 16px; } .wos-section--no-top { padding-top: 0; } .wos-trust { padding: 12px 16px; gap: 10px; } }
@media (max-width: 480px) { .wos-grid-4, .wos-grid-5, .wos-grid-3 { grid-template-columns: repeat(2, 1fr); gap: 10px; } }