/* ═══════════════════════════════════════════
   STUDIO VELOURIA — main.css
═══════════════════════════════════════════ */

/* ── VARIABLES ─────────────────────────── */
:root {
    --serif: 'Playfair Display', Georgia, serif;
    --sans: 'Inter', -apple-system, sans-serif;
    --black: #111;
    --dark: #444;
    --mid: #888;
    --light: #ccc;
    --border: #e4e4e4;
    --border2: #ddd;
    --bg: #fff;
    --bg2: #f5f5f5;
    --bg3: #ebebeb;
    --blue-banner: #d6ecf7;
    --blue-text: #1a4a5e;
    --green: #2a7a3b;
    --nav-h: 68px;
}

/* ── RESET ─────────────────────────────── */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { font-family: var(--sans); color: var(--black); background: var(--bg); -webkit-font-smoothing: antialiased; }
img { max-width:100%; height:auto; display:block; }
a { color: inherit; text-decoration: none; }
button { font-family: var(--sans); cursor: pointer; background: none; border: none; }

/* ── BUTTONS ───────────────────────────── */
.sv-btn {
    display: inline-flex; align-items: center; justify-content: center;
    font-family: var(--sans); font-size: 11px; font-weight: 600;
    letter-spacing: 1.2px; text-transform: uppercase;
    padding: 13px 28px; border-radius: 2px; cursor: pointer;
    transition: all .15s; white-space: nowrap; border: none;
}
.sv-btn-dark  { background: var(--black); color: #fff; }
.sv-btn-dark:hover { background: #333; }
.sv-btn-outline { background: transparent; color: var(--black); border: 1.5px solid var(--black); }
.sv-btn-outline:hover { background: var(--bg2); }
.sv-btn-outline-white { background: transparent; color: #fff; border: 1.5px solid #fff; }
.sv-btn-outline-white:hover { background: rgba(255,255,255,.1); }
.sv-btn-white { background: #fff; color: var(--black); }
.sv-btn-white:hover { background: #f0f0f0; }
.sv-btn-full { width: 100%; padding: 15px; }

/* ── BANNER ────────────────────────────── */
.sv-banner {
    background: var(--blue-banner);
    text-align: center;
    padding: 10px 20px;
    font-size: 12px;
    color: var(--blue-text);
    letter-spacing: .3px;
}
.sv-banner a { color: #0f3347; font-weight: 600; text-decoration: underline; }

/* ── HEADER / NAV ──────────────────────── */
.sv-header {
    position: sticky;
    top: 0;
    z-index: 300;
    background: var(--bg);
    border-bottom: 1px solid var(--border);
}
.sv-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 32px;
    height: var(--nav-h);
    gap: 16px;
}
.sv-logo {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    flex-shrink: 0;
}
.sv-logo-text { display: flex; flex-direction: column; line-height: 1; }
.sv-logo-studio { font-size: 8px; font-weight: 600; letter-spacing: 3.5px; text-transform: uppercase; color: #999; }
.sv-logo-name  { font-family: var(--serif); font-size: 20px; font-weight: 400; color: var(--black); margin-top: 2px; }

/* ── NAV MENU ──────────────────────────── */
.sv-menu, .sv-mobile-nav { list-style: none; }
.sv-menu { display: flex; gap: 14px; align-items: center; flex-wrap: nowrap; }
.sv-menu li a {
    font-size: 10px; font-weight: 600; letter-spacing: .7px;
    text-transform: uppercase; color: #555;
    padding: 4px 0; border-bottom: 2px solid transparent;
    transition: all .15s; display: block; white-space: nowrap;
}
.sv-menu li a:hover,
.sv-menu li.current-menu-item a,
.sv-menu li.current_page_item a { color: var(--black); border-bottom-color: var(--black); }
.sv-menu li.sv-sale-link a { color: #c00; }
.sv-menu li.sv-sale-link a:hover { color: #900; border-bottom-color: #c00; }


.sv-nav-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.sv-nav-icon {
    display: flex; align-items: center; justify-content: center;
    width: 36px; height: 36px; border-radius: 4px;
    color: #555; transition: all .15s; position: relative;
}
.sv-nav-icon:hover { color: var(--black); background: var(--bg2); }
.sv-nav-icon svg { width: 20px; height: 20px; }
.cart-badge {
    position: absolute; top: -2px; right: -4px;
    background: var(--black); color: #fff;
    font-size: 9px; font-weight: 700;
    width: 16px; height: 16px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    pointer-events: none;
}
.sv-mobile-toggle { display: none; }

/* ── SEARCH BAR ────────────────────────── */
.sv-search-bar {
    display: none;
    padding: 12px 48px;
    border-top: 1px solid var(--border);
    background: var(--bg);
    align-items: center;
    gap: 12px;
}
.sv-search-bar.open { display: flex; }
.sv-search-form {
    display: flex; align-items: center;
    border: 1px solid var(--border2); border-radius: 2px;
    overflow: hidden; flex: 1; max-width: 560px;
}
.sv-search-form input {
    flex: 1; padding: 10px 16px; font-family: var(--sans);
    font-size: 14px; border: none; outline: none; color: var(--black);
}
.sv-search-form button {
    padding: 10px 14px; background: var(--black); color: #fff;
    display: flex; align-items: center;
}
.sv-search-close {
    font-size: 24px; color: var(--mid); line-height: 1;
    padding: 4px 8px;
}
.sv-search-close:hover { color: var(--black); }

/* ── MOBILE MENU ───────────────────────── */
.sv-mobile-menu {
    position: fixed; top: 0; right: -320px; width: 300px; height: 100%;
    background: var(--bg); z-index: 500; transition: right .3s ease;
    box-shadow: -4px 0 20px rgba(0,0,0,.1);
    display: flex; flex-direction: column;
}
.sv-mobile-menu.open { right: 0; }
.sv-mobile-menu-inner { padding: 24px; overflow-y: auto; flex: 1; }
.sv-mobile-close {
    font-size: 28px; color: var(--mid); display: block;
    text-align: right; margin-bottom: 20px; line-height: 1;
}
.sv-mobile-close:hover { color: var(--black); }
.sv-mobile-nav { list-style: none; }
.sv-mobile-nav li { border-bottom: 1px solid var(--border); }
.sv-mobile-nav li a {
    display: block; padding: 14px 0;
    font-size: 14px; font-weight: 500; color: var(--black);
}
.sv-mobile-extras { margin-top: 24px; display: flex; flex-direction: column; gap: 12px; }
.sv-mobile-extras a { font-size: 13px; color: var(--mid); }
.sv-overlay {
    display: none; position: fixed; inset: 0;
    background: rgba(0,0,0,.4); z-index: 499;
}
.sv-overlay.open { display: block; }

/* ── SECTION UTILITIES ──────────────────── */
.sv-section-eyebrow { font-size: 10px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; color: #bbb; margin-bottom: 20px; }
.sv-section-header { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 24px; }
.sv-section-header h2 { font-family: var(--serif); font-size: 26px; font-weight: 400; }
.sv-section-header a { font-size: 12px; color: var(--mid); }
.sv-section-header a:hover { color: var(--black); text-decoration: underline; }

/* ── PRODUCT CARDS ──────────────────────── */
.sv-product-grid { display: grid; gap: 18px; align-items: stretch; }
.sv-grid-4 { grid-template-columns: repeat(4, 1fr); }
.sv-grid-3 { grid-template-columns: repeat(3, 1fr); }

/* WooCommerce product list item */
.sv-product-grid li.product,
.sv-product-grid .sv-card {
    list-style: none;
    border: 1px solid #eee; border-radius: 4px;
    overflow: hidden; background: var(--bg);
    transition: box-shadow .2s; cursor: pointer;
    display: flex; flex-direction: column;
    height: 100%;
}
.sv-product-grid li.product:hover { box-shadow: 0 6px 24px rgba(0,0,0,.1); }

.woocommerce-loop-product__link { display: block; }
.woocommerce-loop-product__link img {
    width: 100% !important;
    height: auto !important;
    max-width: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover; object-position: top center;
    transition: transform .4s;
    display: block;
}
.sv-product-grid li.product:hover img { transform: scale(1.04); }

.woocommerce-loop-product__title {
    font-family: var(--sans);
    font-size: 13px; color: var(--mid);
    padding: 12px 14px 0; font-weight: 400;
    line-height: 1.4;
}

.sv-product-brand {
    font-size: 10px; font-weight: 700;
    text-transform: uppercase; letter-spacing: .8px;
    color: var(--black); padding: 10px 14px 0;
}

/* Price */
.price {
    display: flex; align-items: baseline; gap: 8px;
    padding: 6px 14px 14px; font-family: var(--sans);
    flex-wrap: wrap;
}
.price ins { text-decoration: none; }
.price ins .woocommerce-Price-amount { font-size: 18px; font-weight: 700; color: var(--black); }
.price del { opacity: 1; }
.price del .woocommerce-Price-amount { font-size: 14px; font-weight: 500; color: #999; text-decoration: line-through; }
.price .woocommerce-Price-amount { font-size: 18px; font-weight: 700; color: var(--black); }

/* Loop "Add to cart" button — always pinned to the bottom of the card */
.sv-product-grid li.product > a.button,
.sv-product-grid li.product > a.add_to_cart_button,
.sv-product-grid li.product > .added_to_cart {
    display: block;
    margin: auto 14px 14px;
    text-align: center;
    background: var(--black) !important;
    color: #fff !important;
    font-family: var(--sans) !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 10px 16px !important;
    border-radius: 2px !important;
    text-decoration: none !important;
    transition: background .15s;
    line-height: 1.2;
}
.sv-product-grid li.product > a.button:hover,
.sv-product-grid li.product > a.add_to_cart_button:hover {
    background: #333 !important;
}
.sv-product-grid li.product > .added_to_cart {
    background: transparent !important;
    color: var(--mid) !important;
    border: 1px solid var(--border2);
    margin-top: 8px;
}

/* Badges */
.onsale {
    background: var(--black) !important; color: #fff !important;
    font-size: 9px !important; font-weight: 700 !important;
    padding: 3px 8px !important; border-radius: 2px !important;
    letter-spacing: .8px; text-transform: uppercase;
    position: absolute; top: 10px; left: 10px; z-index: 2;
}

/* ── HOME HERO ──────────────────────────── */
.sv-hero {
    display: grid; grid-template-columns: 1fr 420px;
    min-height: 440px; background: var(--black); overflow: hidden;
}
.sv-hero-text {
    padding: 72px 56px; display: flex; flex-direction: column; justify-content: center;
}
.sv-hero-text h1 {
    font-family: var(--serif); font-size: 52px; font-weight: 400;
    line-height: 1.05; color: #fff; margin-bottom: 18px;
}
.sv-hero-text h1 em { font-style: italic; color: #999; }
.sv-eyebrow { font-size: 10px; font-weight: 600; letter-spacing: 2.5px; text-transform: uppercase; color: #888; margin-bottom: 20px; }
.sv-hero-text > p { font-size: 14px; color: #888; line-height: 1.8; margin-bottom: 32px; max-width: 400px; }
.sv-hero-btns { display: flex; gap: 12px; }
.sv-hero-photo { overflow: hidden; position: relative; }
.sv-hero-photo img { width: 100%; height: 100%; object-fit: cover; object-position: top center; filter: grayscale(100%); display: block; }
.sv-hero-photo::after { content:''; position:absolute; inset:0; background: linear-gradient(to right, rgba(17,17,17,.35) 0%, transparent 45%); pointer-events:none; }
.sv-hero-placeholder {
    width: 100%; height: 100%; min-height: 440px;
    background: #1a1a1a;
    display: flex; align-items: center; justify-content: center;
    color: #444;
}
.sv-hero-placeholder::before {
    content: '';
    display: block; width: 120px; height: 120px;
    background-color: #333;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5'%3E%3Crect x='3' y='8' width='18' height='12' rx='2'/%3E%3Cpath d='M8 8V6a4 4 0 0 1 8 0v2'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5'%3E%3Crect x='3' y='8' width='18' height='12' rx='2'/%3E%3Cpath d='M8 8V6a4 4 0 0 1 8 0v2'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* ── HOME CATEGORY PILLS ────────────────── */
.sv-home-cats { padding: 52px 48px 40px; border-bottom: 1px solid var(--border); }
.sv-cat-pills { display: flex; gap: 10px; flex-wrap: wrap; }
.sv-cat-pill {
    border: 1px solid var(--border2); padding: 10px 22px;
    border-radius: 2px; font-size: 12px; font-weight: 500;
    cursor: pointer; color: var(--dark); background: var(--bg);
    transition: all .12s;
}
.sv-cat-pill:hover { background: var(--black); color: #fff; border-color: var(--black); }

/* ── HOME LISTINGS ──────────────────────── */
.sv-home-listings { padding: 52px 48px 64px; }

/* ── PROMO BAND ─────────────────────────── */
.sv-promo-band {
    margin: 0 48px 64px;
    background: var(--black); color: #fff;
    padding: 48px 56px;
    display: flex; align-items: center; justify-content: space-between;
    border-radius: 4px;
}
.sv-promo-band h2 { font-family: var(--serif); font-size: 32px; font-weight: 400; margin-bottom: 8px; }
.sv-promo-band h2 em { font-style: italic; color: #aaa; }
.sv-promo-band p { font-size: 14px; color: #777; }

/* ── BLOG GRID ──────────────────────────── */
.sv-home-blog { padding: 0 48px 64px; }
.sv-blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.sv-blog-card { border: 1px solid var(--border); border-radius: 4px; overflow: hidden; }
.sv-blog-img img { width: 100%; height: 200px; object-fit: cover; filter: grayscale(100%); }
.sv-blog-info { padding: 18px; }
.sv-blog-date { font-size: 11px; color: #aaa; margin-bottom: 6px; }
.sv-blog-info h3 { font-family: var(--serif); font-size: 18px; font-weight: 400; margin-bottom: 8px; }
.sv-blog-info h3 a:hover { text-decoration: underline; }
.sv-blog-excerpt { font-size: 13px; color: var(--mid); line-height: 1.7; }

/* ── SHOP LAYOUT ────────────────────────── */
.sv-shop-layout { display: flex; align-items: flex-start; min-height: 80vh; }
.sv-shop-sidebar {
    width: 248px; flex-shrink: 0;
    padding: 32px 28px; border-right: 1px solid var(--border);
    position: sticky; top: var(--nav-h);
    max-height: calc(100vh - var(--nav-h));
    overflow-y: auto;
}

/* Sidebar groups */
.sv-sidebar-group { margin-bottom: 24px; }
.sv-sidebar-title {
    font-size: 10px; font-weight: 700; letter-spacing: 2px;
    text-transform: uppercase; color: #bbb;
    margin-bottom: 14px; cursor: pointer;
    display: flex; align-items: center; justify-content: space-between;
    user-select: none;
}
.sv-chevron { transition: transform .2s; font-size: 10px; }
.sv-sidebar-group.collapsed .sv-chevron { transform: rotate(-90deg); }
.sv-sidebar-group.collapsed .sv-sidebar-body { display: none; }

.sv-filter-item { display: flex; align-items: center; gap: 9px; margin-bottom: 8px; }
.sv-filter-item input[type=checkbox] { accent-color: var(--black); cursor: pointer; width: 14px; height: 14px; flex-shrink: 0; }
.sv-filter-item label { font-size: 13px; color: var(--dark); cursor: pointer; display: flex; align-items: center; justify-content: space-between; flex: 1; }
.sv-filter-count { font-size: 11px; color: #bbb; }

/* Price slider */
.sv-price-labels { display: flex; justify-content: space-between; font-size: 12px; color: var(--mid); margin-bottom: 8px; }
.sv-price-slider {
    width: 100%; accent-color: var(--black);
    margin: 4px 0; cursor: pointer; display: block;
}

.sv-clear-filters {
    font-size: 11px; color: #aaa; cursor: pointer;
    text-decoration: underline; margin-top: 16px; display: block;
    background: none; border: none; padding: 0;
}
.sv-clear-filters:hover { color: var(--black); }

/* Shop main */
.sv-shop-main { flex: 1; padding: 32px 40px; min-width: 0; }
.sv-shop-topbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
.sv-topbar-left { display: flex; align-items: baseline; gap: 12px; }
.sv-shop-title { font-family: var(--serif); font-size: 26px; font-weight: 400; }
.sv-item-count { font-size: 13px; color: var(--mid); }
.sv-item-count .woocommerce-result-count { font-size: 13px; color: var(--mid); }

/* WooCommerce ordering select */
.woocommerce-ordering select, .sort-select {
    font-family: var(--sans); font-size: 12px;
    border: 1px solid var(--border2); padding: 8px 14px;
    border-radius: 2px; color: var(--dark); background: var(--bg);
    cursor: pointer; outline: none;
}

/* Quick chips */
.sv-quick-chips { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 24px; }
.sv-chip {
    border: 1px solid var(--border2); border-radius: 20px;
    padding: 7px 16px; font-size: 11px; font-weight: 500;
    cursor: pointer; background: var(--bg); color: #555;
    transition: all .12s; display: inline-block;
}
.sv-chip:hover { border-color: #999; color: var(--black); }
.sv-chip.active { background: var(--black); color: #fff; border-color: var(--black); }
.sv-chip.sv-sale-chip { color: #c00; border-color: #c00; }
.sv-chip.sv-sale-chip:hover,
.sv-chip.sv-sale-chip.active { background: #c00; color: #fff; border-color: #c00; }
.sv-cat-pill.sv-sale-pill { color: #c00; border-color: #c00; }
.sv-cat-pill.sv-sale-pill:hover { background: #c00; color: #fff; border-color: #c00; }

/* Shop grid */
.sv-shop-grid { grid-template-columns: repeat(3, 1fr); }

/* No results */
.sv-no-results { text-align: center; padding: 56px 0; }
.sv-no-results p { font-size: 14px; color: var(--mid); margin-bottom: 16px; }
.sv-no-products { font-size: 14px; color: var(--mid); padding: 32px 0; }

/* WooCommerce pagination */
.woocommerce-pagination { margin-top: 48px; display: flex; justify-content: center; }
.woocommerce-pagination ul { list-style: none; display: flex; gap: 8px; }
.woocommerce-pagination ul li a,
.woocommerce-pagination ul li span {
    display: flex; align-items: center; justify-content: center;
    width: 36px; height: 36px; border: 1px solid var(--border2);
    font-size: 13px; color: var(--dark); border-radius: 2px;
    transition: all .12s;
}
.woocommerce-pagination ul li a:hover,
.woocommerce-pagination ul li span.current {
    background: var(--black); color: #fff; border-color: var(--black);
}

/* ── BREADCRUMB ─────────────────────────── */
.sv-breadcrumb {
    padding: 20px 48px 0;
    font-size: 12px; color: #aaa;
    display: flex; align-items: center; flex-wrap: wrap; gap: 4px;
}
.sv-breadcrumb a:hover { color: var(--black); }
.sv-breadcrumb .sep { color: var(--border2); }
.sv-breadcrumb .current { color: var(--black); }

/* ── PRODUCT DETAIL ─────────────────────── */
.sv-detail-layout {
    display: grid; grid-template-columns: 1fr 400px;
    gap: 56px; padding: 28px 48px 64px;
}
.sv-detail-main-img { border-radius: 6px; overflow: hidden; margin-bottom: 12px; background: var(--bg3); }
.sv-product-main-img, .sv-detail-main-img img {
    width: 100% !important; height: auto !important;
    aspect-ratio: 4 / 5;
    object-fit: cover; object-position: top center;
    display: block; transition: opacity .2s;
}
.sv-detail-thumbs { display: flex; gap: 10px; }
.sv-detail-thumb {
    width: 80px; height: 96px; border-radius: 4px;
    overflow: hidden; cursor: pointer;
    border: 2px solid transparent; background: var(--bg3);
    flex-shrink: 0; transition: border-color .15s;
}
.sv-detail-thumb img { width: 100%; height: 100%; object-fit: cover; }
.sv-detail-thumb.active { border-color: var(--black); }
.sv-detail-thumb:hover:not(.active) { border-color: var(--light); }

.sv-detail-brand { font-size: 10px; font-weight: 700; letter-spacing: 1.8px; text-transform: uppercase; color: #aaa; margin-bottom: 10px; }
.sv-detail-name { font-family: var(--serif); font-size: 28px; font-weight: 400; line-height: 1.2; margin-bottom: 10px; }
.sv-detail-price-row { display: flex; align-items: baseline; gap: 12px; margin-bottom: 22px; flex-wrap: wrap; }
.sv-detail-price-row .price { padding: 0; }
.sv-detail-price-row .price .woocommerce-Price-amount,
.sv-detail-price-row .price ins .woocommerce-Price-amount { font-size: 28px; font-weight: 700; }
.sv-detail-price-row .price del .woocommerce-Price-amount { font-size: 18px; font-weight: 500; color: #999; }
.sv-detail-pct { font-size: 12px; background: var(--bg2); color: #555; padding: 4px 10px; border-radius: 3px; font-weight: 600; }
.sv-detail-divider { border: none; border-top: 1px solid var(--border); margin: 20px 0; }
.sv-detail-meta-row { display: flex; justify-content: space-between; font-size: 13px; margin-bottom: 12px; }
.sv-detail-meta-row .lbl { color: #aaa; }
.sv-detail-meta-row .val { font-weight: 600; }

/* ── ThredUp-style meta pills & condition badge ── */
.sv-meta-pills { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.sv-meta-pill {
    display: inline-flex; align-items: center;
    border: 1px solid var(--border2); border-radius: 20px;
    padding: 6px 16px; font-size: 12px; font-weight: 500;
    color: var(--dark); background: var(--bg);
}
.sv-condition-badge {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 12px; font-weight: 600; color: var(--black);
    margin-bottom: 18px;
}
.sv-condition-badge::before {
    content: ''; display: inline-block; width: 8px; height: 8px;
    border-radius: 50%; background: var(--green);
}

/* ── Accordion-style item details (ThredUp pattern) ── */
.sv-accordion { border-top: 1px solid var(--border); margin-top: 24px; }
.sv-accordion-item { border-bottom: 1px solid var(--border); }
.sv-accordion-item summary {
    display: flex; align-items: center; justify-content: space-between;
    padding: 16px 0; cursor: pointer; list-style: none;
    font-size: 11px; font-weight: 700; letter-spacing: 1.5px;
    text-transform: uppercase; color: var(--black);
}
.sv-accordion-item summary::-webkit-details-marker { display: none; }
.sv-accordion-item summary::after {
    content: '+'; font-size: 18px; font-weight: 400; color: #999;
    line-height: 1; transition: transform .2s;
}
.sv-accordion-item[open] summary::after { content: '\2212'; }
.sv-accordion-body { padding: 0 0 18px; font-size: 13px; color: #666; line-height: 1.9; }
.sv-accordion-body ul { padding-left: 18px; }
.sv-accordion-body li { margin-bottom: 4px; }

/* WooCommerce add-to-cart on detail page */
.single_add_to_cart_button {
    background: var(--black) !important; color: #fff !important;
    font-family: var(--sans) !important; font-size: 11px !important;
    font-weight: 600 !important; letter-spacing: 1.2px !important;
    text-transform: uppercase !important; padding: 15px 28px !important;
    border-radius: 2px !important; width: 100%; margin-top: 4px;
    transition: background .15s !important;
}
.single_add_to_cart_button:hover { background: #333 !important; }
.quantity { margin-bottom: 12px; }
.quantity input { border: 1px solid var(--border2); padding: 10px 14px; font-family: var(--sans); font-size: 14px; width: 80px; border-radius: 2px; text-align: center; }

.sv-wishlist-btn, .sv-fav-btn { margin-top: 10px; margin-bottom: 4px; }
.sv-fav-btn { width: 100%; padding: 14px; }
.sv-fav-btn.active { background: var(--black); color: #fff; border-color: var(--black); }

.sv-detail-desc { font-size: 14px; color: #666; line-height: 1.9; margin-top: 20px; }

/* Related */
.sv-related-section { padding: 0 48px 64px; }
.sv-related-section h2 { font-family: var(--serif); font-size: 26px; font-weight: 400; margin-bottom: 24px; }

/* ── ABOUT PAGE ─────────────────────────── */
.sv-about-hero {
    background: var(--black); color: #fff;
    display: grid; grid-template-columns: 1fr 1fr; min-height: 480px; overflow: hidden;
}
.sv-about-hero-text { padding: 80px 64px; display: flex; flex-direction: column; justify-content: center; }
.sv-about-hero-text h1 { font-family: var(--serif); font-size: 46px; font-weight: 400; margin-bottom: 20px; line-height: 1.1; }
.sv-about-hero-text h1 em { font-style: italic; color: #888; }
.sv-about-hero-text p { font-size: 15px; color: #777; line-height: 1.9; max-width: 400px; }
.sv-about-hero-img { overflow: hidden; }
.sv-about-hero-img img { width: 100%; height: 100%; object-fit: cover; object-position: top; filter: grayscale(100%); }
.sv-about-img-placeholder {
    width: 100%; height: 100%; background: #1a1a1a;
    display: flex; align-items: center; justify-content: center;
}
.sv-about-img-placeholder::before {
    content: '';
    display: block; width: 140px; height: 140px;
    background-color: #333;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5'%3E%3Crect x='3' y='8' width='18' height='12' rx='2'/%3E%3Cpath d='M8 8V6a4 4 0 0 1 8 0v2'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5'%3E%3Crect x='3' y='8' width='18' height='12' rx='2'/%3E%3Cpath d='M8 8V6a4 4 0 0 1 8 0v2'/%3E%3C/svg%3E") center / contain no-repeat;
}

.sv-about-body { max-width: 720px; margin: 0 auto; padding: 64px 48px; }
.sv-about-stats { display: grid; grid-template-columns: repeat(3,1fr); gap: 3px; margin-bottom: 56px; }
.sv-stat-block { background: var(--bg2); padding: 36px 28px; text-align: center; }
.sv-stat-number { font-family: var(--serif); font-size: 44px; font-weight: 400; color: var(--black); margin-bottom: 8px; }
.sv-stat-label { font-size: 11px; color: #aaa; text-transform: uppercase; letter-spacing: 1.5px; }
.sv-about-content h2 { font-family: var(--serif); font-size: 28px; font-weight: 400; margin: 40px 0 16px; }
.sv-about-content h2:first-child { margin-top: 0; }
.sv-about-content p { font-size: 15px; color: #555; line-height: 1.9; margin-bottom: 16px; }

/* ── CONTACT PAGE ───────────────────────── */
.sv-contact-layout { display: grid; grid-template-columns: 1fr 1fr; min-height: 560px; }
.sv-contact-left { padding: 64px 56px; background: var(--bg2); }
.sv-contact-left h1 { font-family: var(--serif); font-size: 38px; font-weight: 400; line-height: 1.15; margin-bottom: 16px; }
.sv-contact-left p { font-size: 14px; color: #666; line-height: 1.8; margin-bottom: 32px; max-width: 360px; }
.sv-contact-info { display: flex; flex-direction: column; gap: 18px; }
.sv-contact-item { display: flex; align-items: flex-start; gap: 14px; }
.sv-contact-item svg { color: #888; flex-shrink: 0; margin-top: 2px; }
.ci-label { font-size: 10px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: #bbb; margin-bottom: 3px; }
.ci-val { font-size: 13px; color: #333; }
.sv-contact-form { padding: 64px 56px; }
.sv-contact-form h2 { font-family: var(--serif); font-size: 24px; font-weight: 400; margin-bottom: 28px; }

/* ── CONTACT FORM 7 STYLES ──────────────── */
.wpcf7 .wpcf7-form { display: flex; flex-direction: column; gap: 0; }
.wpcf7 p { margin-bottom: 16px; }
.wpcf7 label { display: block; font-size: 10px; font-weight: 600; letter-spacing: 1.2px; text-transform: uppercase; color: #888; margin-bottom: 6px; }
.wpcf7 input[type=text],
.wpcf7 input[type=email],
.wpcf7 textarea,
.wpcf7 select {
    width: 100%; border: 1px solid var(--border2);
    padding: 11px 14px; font-family: var(--sans); font-size: 13px;
    color: var(--black); border-radius: 2px; outline: none;
    transition: border-color .15s; background: var(--bg);
}
.wpcf7 input:focus, .wpcf7 textarea:focus { border-color: var(--black); }
.wpcf7 textarea { height: 120px; resize: vertical; }
.wpcf7 input[type=submit] {
    background: var(--black); color: #fff;
    font-family: var(--sans); font-size: 11px; font-weight: 600;
    letter-spacing: 1.2px; text-transform: uppercase;
    padding: 15px 28px; border-radius: 2px; cursor: pointer;
    border: none; width: 100%; transition: background .15s;
}
.wpcf7 input[type=submit]:hover { background: #333; }

/* Generic forms */
.sv-page-form .form-group { margin-bottom: 16px; }
.sv-page-form label { display: block; font-size: 10px; font-weight: 600; letter-spacing: 1.2px; text-transform: uppercase; color: #888; margin-bottom: 6px; }
.sv-page-form input,
.sv-page-form textarea,
.sv-page-form select { width: 100%; border: 1px solid var(--border2); padding: 11px 14px; font-family: var(--sans); font-size: 13px; color: var(--black); border-radius: 2px; outline: none; background: var(--bg); }
.sv-page-form input:focus, .sv-page-form textarea:focus { border-color: var(--black); }

/* ── GENERIC PAGE ───────────────────────── */
.sv-page-wrap { padding: 56px 48px 72px; }
.sv-page-inner { max-width: 720px; }
.sv-page-title { font-family: var(--serif); font-size: 36px; font-weight: 400; margin-bottom: 32px; }
.sv-page-content { font-size: 15px; color: #555; line-height: 1.9; }
.sv-page-content h2 { font-family: var(--serif); font-size: 26px; font-weight: 400; margin: 32px 0 14px; }
.sv-page-content p { margin-bottom: 16px; }

/* ── 404 ────────────────────────────────── */
.sv-404 { display: flex; align-items: center; justify-content: center; min-height: 60vh; padding: 64px 48px; text-align: center; }
.sv-404-inner h1 { font-family: var(--serif); font-size: 48px; font-weight: 400; margin-bottom: 16px; }
.sv-404-inner p { font-size: 14px; color: var(--mid); margin-bottom: 28px; }

/* ── SEARCH RESULTS ─────────────────────── */
.sv-search-results-wrap { padding: 40px 48px 72px; }
.sv-search-result { border: 1px solid var(--border); padding: 20px; border-radius: 4px; margin-bottom: 16px; }
.sv-search-result h2 { font-family: var(--serif); font-size: 20px; font-weight: 400; margin-bottom: 8px; }
.sv-search-result h2 a:hover { text-decoration: underline; }

/* ── WooCommerce CART / CHECKOUT PAGES ──── */
.sv-woo-wrap { padding: 40px 48px 72px; }
.sv-woo-inner { max-width: 1100px; margin: 0 auto; }

.woocommerce table.shop_table { border: 1px solid var(--border); border-collapse: collapse; width: 100%; font-size: 14px; }
.woocommerce table.shop_table th { font-size: 10px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: #888; padding: 14px 16px; border-bottom: 2px solid var(--border); text-align: left; }
.woocommerce table.shop_table td { padding: 16px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.woocommerce table.shop_table .product-thumbnail img { width: 80px; height: 96px; object-fit: cover; border-radius: 3px; }

.woocommerce a.button,
.woocommerce button.button {
    background: var(--black) !important; color: #fff !important;
    font-family: var(--sans) !important; font-size: 11px !important;
    font-weight: 600 !important; letter-spacing: 1.2px !important;
    text-transform: uppercase !important; padding: 13px 28px !important;
    border-radius: 2px !important; transition: background .15s !important;
    border: none !important; cursor: pointer !important;
}
.woocommerce a.button:hover,
.woocommerce button.button:hover { background: #333 !important; }

.woocommerce input[type=text],
.woocommerce input[type=email],
.woocommerce input[type=password],
.woocommerce input[type=tel],
.woocommerce textarea,
.woocommerce select {
    border: 1px solid var(--border2) !important; padding: 11px 14px !important;
    font-family: var(--sans) !important; font-size: 13px !important;
    border-radius: 2px !important; outline: none !important; width: 100%;
}
.woocommerce input:focus, .woocommerce textarea:focus { border-color: var(--black) !important; }

.woocommerce .woocommerce-message,
.woocommerce .woocommerce-info {
    background: var(--blue-banner) !important; color: var(--blue-text) !important;
    border-color: transparent !important; border-radius: 3px;
}
.woocommerce .woocommerce-error {
    background: #fff3f3 !important; color: #c00 !important;
    border-color: transparent !important; border-radius: 3px;
}

/* ── FOOTER ─────────────────────────────── */
.sv-footer { background: var(--black); color: #777; margin-top: 72px; padding: 52px 48px 28px; }
.sv-footer-inner {}
.sv-footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 40px; margin-bottom: 40px; }
.sv-footer-brand { }
.sv-footer-logo { display: block; margin-bottom: 12px; }
.sv-footer-tagline { font-size: 12px; color: #555; line-height: 1.8; margin-top: 12px; }
.sv-footer-col h4, .footer-widget-title { font-size: 10px; font-weight: 600; color: #fff; margin-bottom: 16px; text-transform: uppercase; letter-spacing: 1.8px; }
.sv-footer-col ul { list-style: none; }
.sv-footer-col ul li a { font-size: 12px; color: #777; display: block; padding: 4px 0; line-height: 1.9; transition: color .12s; }
.sv-footer-col ul li a:hover { color: #fff; }
.sv-footer-bottom { border-top: 1px solid #222; padding-top: 22px; display: flex; justify-content: space-between; font-size: 11px; color: #444; flex-wrap: wrap; gap: 8px; }
.sv-footer-bottom a { color: #444; }
.sv-footer-bottom a:hover { color: #777; }

/* ── RESPONSIVE ─────────────────────────── */
@media (max-width: 1100px) {
    .sv-grid-4 { grid-template-columns: repeat(3, 1fr); }
    .sv-hero { grid-template-columns: 1fr 320px; }
    .sv-hero-text h1 { font-size: 40px; }
    .sv-detail-layout { grid-template-columns: 1fr 340px; gap: 32px; }
    .sv-footer-grid { grid-template-columns: 1fr 1fr; gap: 28px; }
}
@media (max-width: 900px) {
    .sv-nav { padding: 0 24px; }
    .sv-nav-links { display: none; }
    .sv-mobile-toggle { display: flex !important; }
    .sv-hero { grid-template-columns: 1fr; }
    .sv-hero-photo { display: none; }
    .sv-hero-text { padding: 52px 32px; }
    .sv-hero-text h1 { font-size: 36px; }
    .sv-shop-layout { flex-direction: column; }
    .sv-shop-sidebar { width: 100%; position: static; max-height: none; border-right: none; border-bottom: 1px solid var(--border); display: none; }
    .sv-shop-sidebar.mobile-open { display: block; }
    .sv-detail-layout { grid-template-columns: 1fr; }
    .sv-about-hero { grid-template-columns: 1fr; }
    .sv-about-hero-img { display: none; }
    .sv-contact-layout { grid-template-columns: 1fr; }
    .sv-grid-4, .sv-grid-3, .sv-shop-grid { grid-template-columns: repeat(2, 1fr); }
    .sv-home-cats { padding: 32px 24px; }
    .sv-home-listings, .sv-related-section, .sv-promo-band, .sv-home-blog { padding-left: 24px; padding-right: 24px; }
    .sv-breadcrumb { padding: 16px 24px 0; }
    .sv-detail-layout { padding: 20px 24px 48px; }
    .sv-footer-grid { grid-template-columns: 1fr 1fr; }
    .sv-footer { padding: 40px 24px 20px; }
}
@media (max-width: 560px) {
    .sv-grid-4, .sv-grid-3, .sv-shop-grid { grid-template-columns: 1fr; }
    .sv-promo-band { flex-direction: column; gap: 20px; text-align: center; }
    .sv-footer-grid { grid-template-columns: 1fr; }
    .sv-about-hero-text h1 { font-size: 32px; }
    .sv-about-stats { grid-template-columns: 1fr; gap: 2px; }
    .sv-contact-left, .sv-contact-form { padding: 40px 24px; }
    .wc-tabs li a { font-size: 12px; }
}