/* ============================================
   Origins by Hawwa — Main Stylesheet v3.0
   Exact pixel-match to HTML design files
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400;1,500&family=Jost:wght@200;300;400;500&display=swap');

/* ═══ CSS Variables ═══ */
:root {
    --cream: #F8F4EE;
    --warm-white: #FDFAF6;
    --sand: #E8DDD0;
    --taupe: #C4B5A5;
    --mink: #9B8B7E;
    --deep: #3D2E28;
    --espresso: #2A1F1A;
    --gold: #B8986A;
    --gold-light: #D4B896;
    --sage: #8A9E8C;
    --transition: all 0.3s ease;
}

/* ═══ Reset ═══ */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
img { max-width: 100%; height: auto; display: block; }

/* ═══ GLOBAL LINK FIX — no blue anywhere ═══ */
a { color: inherit; text-decoration: none; }
a:visited { color: inherit; }
a:hover { color: var(--gold); }

/* ═══ Body ═══ */
body {
    font-family: 'Jost', sans-serif;
    background: var(--warm-white);
    color: var(--espresso);
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
h1, h2, h3, h4, h5, h6 { font-family: 'Cormorant Garamond', serif; font-weight: 300; }

/* ═══ Container ═══ */
.container { max-width: 1300px; margin: 0 auto; padding: 0 60px; }

/* ═══ Typography helpers ═══ */
.overline {
    font-family: 'Jost', sans-serif; font-size: 10px; font-weight: 400;
    letter-spacing: 4px; text-transform: uppercase; color: var(--gold);
    margin-bottom: 22px; display: block;
}
.section-title { font-family: 'Cormorant Garamond', serif; font-size: 50px; font-weight: 300; line-height: 1.15; color: var(--espresso); margin-bottom: 26px; }
.section-title em { font-style: italic; color: var(--gold); }
.section-body { font-family: 'Jost', sans-serif; font-size: 14px; font-weight: 300; line-height: 2; color: var(--mink); }

/* ═══ Buttons ═══ */
.btn-primary {
    background: var(--gold); color: #fff;
    font-family: 'Jost', sans-serif; font-size: 11px; font-weight: 400;
    letter-spacing: 3px; text-transform: uppercase;
    padding: 16px 36px; border: none; cursor: pointer;
    text-decoration: none; display: inline-block; transition: background 0.3s;
}
.btn-primary:hover { background: var(--mink); color: #fff; }

.btn-outline-gold {
    color: var(--gold); font-family: 'Jost', sans-serif;
    font-size: 11px; font-weight: 300; letter-spacing: 2px; text-transform: uppercase;
    text-decoration: none; border-bottom: 1px solid var(--gold);
    padding-bottom: 3px; transition: color 0.3s, border-color 0.3s; display: inline-block;
}
.btn-outline-gold:hover { color: var(--espresso); border-color: var(--espresso); }

.btn-esp {
    background: var(--espresso); color: #fff;
    font-family: 'Jost', sans-serif; font-size: 11px; font-weight: 400;
    letter-spacing: 3px; text-transform: uppercase;
    padding: 16px 36px; border: none; cursor: pointer; transition: background 0.3s; display: inline-block;
}
.btn-esp:hover { background: var(--deep); color: #fff; }

.btn-ghost {
    color: var(--taupe); font-family: 'Jost', sans-serif;
    font-size: 11px; font-weight: 300; letter-spacing: 2px; text-transform: uppercase;
    text-decoration: none; display: inline-flex; align-items: center; gap: 8px; transition: color 0.3s;
}
.btn-ghost::after { content: '→'; font-size: 14px; }
.btn-ghost:hover { color: var(--gold); }

/* ═══ Header / Nav ═══ */
.site-header {
    background: var(--warm-white); position: sticky; top: 0; z-index: 1000;
    border-bottom: 1px solid var(--sand); transition: box-shadow 0.3s;
}
.site-header.scrolled { box-shadow: 0 4px 20px rgba(42,31,26,0.06); }

.main-navigation {
    display: flex; align-items: center; justify-content: space-between;
    padding: 22px 60px; max-width: 1400px; margin: 0 auto;
}
.site-logo a { display: inline-block; }
.site-logo svg, .custom-logo { max-height: 60px; width: auto; }

.main-navigation nav ul, nav ul.nav-links {
    display: flex; gap: 38px; list-style: none; margin: 0; padding: 0; align-items: center;
}
.main-navigation nav ul a, nav ul.nav-links a {
    font-family: 'Jost', sans-serif; font-size: 11px; font-weight: 400;
    letter-spacing: 2.5px; text-transform: uppercase; color: var(--espresso);
    text-decoration: none; transition: color 0.3s; position: relative;
}
.main-navigation nav ul a:hover, nav ul.nav-links a:hover,
.main-navigation nav ul .current-menu-item > a,
nav ul.nav-links .current-menu-item > a { color: var(--gold); }
.main-navigation nav ul a::after, nav ul.nav-links a::after {
    content: ''; position: absolute; bottom: -4px; left: 0;
    width: 0; height: 1px; background: var(--gold); transition: width 0.3s;
}
.main-navigation nav ul a:hover::after,
.main-navigation nav ul .current-menu-item > a::after { width: 100%; }

.nav-right { display: flex; align-items: center; gap: 22px; }
.nav-icon { width: 20px; height: 20px; stroke: var(--espresso); fill: none; stroke-width: 1.5; cursor: pointer; transition: stroke 0.3s; display: block; flex-shrink: 0; }
.nav-icon:hover { stroke: var(--gold); }
.cart-wrap { position: relative; }
.cart-count {
    position: absolute; top: -8px; right: -12px;
    width: 18px; height: 18px; background: var(--gold); border-radius: 50%;
    font-size: 10px; color: white; display: flex; align-items: center; justify-content: center;
    font-family: 'Jost', sans-serif; font-weight: 400; pointer-events: none;
}

/* ═══ Mobile Toggle ═══ */
.mobile-menu-toggle { display: none; flex-direction: column; gap: 5px; cursor: pointer; background: none; border: none; padding: 4px; }
.mobile-menu-toggle span { width: 24px; height: 1.5px; background: var(--espresso); display: block; transition: var(--transition); }

/* ═══ Mobile Menu ═══ */
.mobile-menu-overlay { position: fixed; top: 0; left: -100%; width: 100%; height: 100%; background: var(--espresso); z-index: 2000; transition: left 0.4s ease; overflow-y: auto; }
.mobile-menu-overlay.active { left: 0; }
.mobile-menu-container { padding: 28px 28px 40px; position: relative; }
.mobile-menu-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 40px; }
.mobile-menu-logo { display: block; line-height: 0; }
.mobile-menu-logo svg { width: 110px; height: auto; }
.mobile-menu-close { background: none; border: none; font-family: 'Jost', sans-serif; font-size: 11px; font-weight: 400; color: var(--taupe); letter-spacing: 2px; text-transform: uppercase; cursor: pointer; line-height: 1; padding: 0; margin: 0; outline: none; -webkit-appearance: none; }
.mobile-menu-overlay ul.mobile-nav-links { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0; }
.mobile-nav-links li { border-bottom: 1px solid rgba(255,255,255,0.06); position: relative; }
.mobile-nav-links a { display: block; position: relative; padding: 16px 30px 16px 0; font-family: 'Cormorant Garamond', serif; font-size: 36px; font-weight: 300; color: var(--cream) !important; text-decoration: none; transition: color 0.2s; }
.mobile-nav-links a:hover { color: var(--gold) !important; }
.mobile-nav-links a::after { content: '→'; font-family: 'Jost', sans-serif; font-size: 16px; color: var(--gold); position: absolute; right: 0; top: 50%; transform: translateY(-50%); }
.mobile-nav-links li.current-menu-item > a { color: var(--cream) !important; }
.mobile-nav-links li.current-menu-item > a:hover { color: var(--gold) !important; }
.mobile-menu-social-footer { margin-top: 40px; display: flex; gap: 20px; }
.mobile-menu-social-link { font-family: 'Jost', sans-serif; font-size: 10px; font-weight: 400; color: var(--mink); letter-spacing: 2px; text-transform: uppercase; text-decoration: none; }
.mobile-menu-social-link:hover { color: var(--gold); }
.mobile-cart-info { display: none; }
.mobile-cart-link, .mobile-checkout-link { font-family: 'Jost', sans-serif; font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: var(--taupe); text-decoration: none; transition: color 0.3s; }
.mobile-cart-link:hover, .mobile-checkout-link:hover { color: var(--gold); }

/* ═══ Search Overlay ═══ */
.search-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(42,31,26,0.96); z-index: 1500; display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; transition: all 0.3s; }
.search-overlay.active { opacity: 1; visibility: visible; }
.search-container { width: 90%; max-width: 600px; position: relative; }
.search-container input[type="search"], .search-container .search-field {
    width: 100%; padding: 20px 0; font-size: 24px; font-family: 'Jost', sans-serif;
    border: none; border-bottom: 1px solid rgba(184,152,106,0.5); background: transparent;
    color: white; outline: none; transition: border-color 0.3s;
}
.search-container input[type="search"]:focus { border-color: var(--gold); }
.search-container input::placeholder { color: rgba(255,255,255,0.3); }
.search-container .search-submit { display: none; }
.search-close { position: absolute; top: -50px; right: 0; background: none; border: none; font-size: 28px; color: rgba(255,255,255,0.6); cursor: pointer; transition: color 0.3s; line-height: 1; }
.search-close:hover { color: white; }

/* ═══ Hero ═══ */
.hero { display: grid; grid-template-columns: 1fr 1fr; min-height: 88vh; overflow: hidden; }
.hero-left {
    background: var(--espresso); display: flex; flex-direction: column;
    justify-content: center; padding: 90px 70px; position: relative; overflow: hidden;
}
.hero-left::before { content: ''; position: absolute; top: -80px; right: -80px; width: 320px; height: 320px; border-radius: 50%; border: 1px solid rgba(184,152,106,0.1); pointer-events: none; }
.hero-left::after { content: ''; position: absolute; bottom: -60px; left: -50px; width: 240px; height: 240px; border-radius: 50%; border: 1px solid rgba(184,152,106,0.07); pointer-events: none; }
.hero-eyebrow { font-family: 'Jost', sans-serif; font-size: 10px; font-weight: 300; letter-spacing: 5px; text-transform: uppercase; color: var(--gold); margin-bottom: 28px; display: flex; align-items: center; gap: 14px; }
.hero-eyebrow::before { content: ''; display: block; width: 30px; height: 1px; background: var(--gold); }
.hero-title { font-family: 'Cormorant Garamond', serif; font-size: 68px; font-weight: 300; line-height: 1.08; color: var(--cream); margin-bottom: 30px; letter-spacing: -1px; }
.hero-title em { font-style: italic; color: var(--gold-light); }
.hero-desc { font-family: 'Jost', sans-serif; font-size: 13px; font-weight: 300; line-height: 1.95; color: var(--taupe); max-width: 360px; margin-bottom: 50px; }
.hero-cta { display: flex; gap: 22px; align-items: center; }
.hero-right { position: relative; overflow: hidden; }
.hero-visual { width: 100%; height: 100%; min-height: 88vh; background: linear-gradient(150deg, #EDE4D8 0%, #D4C4B0 40%, #B8A898 80%, #9B8B7E 100%); position: relative; display: flex; align-items: flex-end; }
.hero-visual img.hero-image { width: 100%; height: 100%; object-fit: cover; position: absolute; top: 0; left: 0; }
.hero-arabic { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 280px; font-family: serif; color: rgba(255,255,255,0.05); line-height: 1; pointer-events: none; z-index: 1; user-select: none; }
.hero-tag { position: absolute; bottom: 36px; left: 36px; background: white; padding: 18px 24px; box-shadow: 0 20px 60px rgba(0,0,0,0.12); display: flex; align-items: center; gap: 16px; z-index: 2; }
.tag-dot { width: 8px; height: 8px; background: var(--sage); border-radius: 50%; flex-shrink: 0; }
.tag-text strong { display: block; font-family: 'Jost', sans-serif; font-size: 13px; font-weight: 500; color: var(--espresso); margin-bottom: 3px; }
.tag-text span { font-family: 'Jost', sans-serif; font-size: 11px; font-weight: 300; color: var(--mink); }

/* ═══ Marquee ═══ */
.marquee-strip { background: var(--gold); padding: 13px 0; overflow: hidden; white-space: nowrap; }
.marquee-inner { display: inline-flex; gap: 56px; animation: marquee 30s linear infinite; }
@keyframes marquee { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }
.marquee-item { font-family: 'Cormorant Garamond', serif; font-size: 15px; font-style: italic; font-weight: 300; color: white; letter-spacing: 1px; display: flex; align-items: center; gap: 18px; }
.marquee-item::after { content: '✦'; font-size: 9px; font-style: normal; opacity: 0.55; }

/* ═══ Philosophy ═══ */
.philosophy-section { background: var(--warm-white); }
.philosophy { display: grid; grid-template-columns: 1fr 1fr; max-width: 1300px; margin: 0 auto; padding: 110px 60px; gap: 80px; align-items: center; }
.philosophy-right { border-left: 1px solid var(--sand); padding-left: 70px; }
.arabic-quote { font-size: 44px; line-height: 1.5; color: var(--gold); font-family: serif; text-align: right; margin-bottom: 18px; direction: rtl; }
.arabic-translation { font-family: 'Cormorant Garamond', serif; font-size: 16px; font-style: italic; color: var(--mink); text-align: right; line-height: 1.7; }

/* ═══════════════════════════════════════════════
   HOMEPAGE — FEATURED PRODUCT CARDS
   Split card: left=image, right=info
   ═══════════════════════════════════════════════ */
.products-section { background: var(--cream); padding: 100px 60px; }
.products-header {
    display: flex; justify-content: space-between; align-items: flex-end;
    max-width: 1300px; margin: 0 auto 56px; padding-bottom: 40px; border-bottom: 1px solid var(--sand);
}
.products-title { font-family: 'Cormorant Garamond', serif; font-size: 48px; font-weight: 300; color: var(--espresso); }
.products-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px; max-width: 1300px; margin: 0 auto; }

.product-card {
    background: white; display: grid; grid-template-columns: 1fr 1fr;
    overflow: hidden; transition: transform 0.4s ease, box-shadow 0.4s ease;
    box-shadow: 0 4px 24px rgba(42,31,26,0.05); cursor: pointer;
}
.product-card:hover { transform: translateY(-5px); box-shadow: 0 20px 50px rgba(42,31,26,0.1); }

.product-img { height: 420px; position: relative; overflow: hidden; }
.product-img-bg { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; transition: transform 0.5s ease; }
.product-img-bg img { width: 100%; height: 100%; object-fit: cover; }
.product-card:hover .product-img-bg { transform: scale(1.04); }

.product-badge { position: absolute; top: 18px; left: 18px; background: var(--espresso); color: white; font-family: 'Jost', sans-serif; font-size: 9px; font-weight: 400; letter-spacing: 2px; text-transform: uppercase; padding: 5px 11px; }
.product-badge.gold { background: var(--gold); }

/* ── .product-wish / .product-wish-wrap removed — replaced by .card-heart-btn ──
   card-heart-btn styles are defined below in the shared section */

.product-info { padding: 40px 32px; display: flex; flex-direction: column; justify-content: center; border-left: 1px solid var(--sand); }
.product-collection { font-family: 'Jost', sans-serif; font-size: 9px; font-weight: 400; letter-spacing: 3.5px; text-transform: uppercase; color: var(--taupe); margin-bottom: 12px; }
.product-name { font-family: 'Cormorant Garamond', serif; font-size: 30px; font-weight: 300; color: var(--espresso); line-height: 1.15; margin-bottom: 6px; }
.product-shade { font-family: 'Cormorant Garamond', serif; font-size: 15px; font-style: italic; color: var(--mink); margin-bottom: 22px; }
.product-swatch { width: 26px; height: 26px; border-radius: 50%; border: 2px solid rgba(0,0,0,0.08); margin-bottom: 22px; box-shadow: 0 2px 8px rgba(0,0,0,0.1); }
.product-price { font-family: 'Cormorant Garamond', serif; font-size: 26px; font-weight: 400; color: var(--deep); margin-bottom: 22px; }
.product-divider { height: 1px; background: var(--sand); margin-bottom: 22px; }
.product-spec { font-family: 'Jost', sans-serif; font-size: 11px; font-weight: 300; color: var(--mink); margin-bottom: 8px; display: flex; align-items: center; gap: 8px; }
.product-spec::before { content: '—'; color: var(--gold); flex-shrink: 0; }
.product-add {
    background: var(--espresso); color: white; border: none;
    font-family: 'Jost', sans-serif; font-size: 10px; font-weight: 400; letter-spacing: 3px;
    text-transform: uppercase; padding: 13px 26px; cursor: pointer; transition: background 0.3s;
    align-self: flex-start; margin-top: 10px; text-decoration: none; display: inline-block;
}
.product-add:hover { background: var(--gold); color: white; }

/* ═══════════════════════════════════════════════
   SHOP / CATEGORY — CAT GRID (3 columns desktop)
   ═══════════════════════════════════════════════ */
.cat-hero { background: var(--espresso); padding: 70px 60px; display: flex; justify-content: space-between; align-items: flex-end; }
.cat-eyebrow { font-family: 'Jost', sans-serif; font-size: 10px; font-weight: 300; letter-spacing: 5px; text-transform: uppercase; color: var(--gold); margin-bottom: 22px; display: flex; align-items: center; gap: 14px; }
.cat-eyebrow::before { content: ''; display: block; width: 30px; height: 1px; background: var(--gold); }
.cat-title { font-family: 'Cormorant Garamond', serif; font-size: 72px; font-weight: 300; color: var(--cream); line-height: 1.05; letter-spacing: -1px; }
.cat-title em { font-style: italic; color: var(--gold-light); }
.cat-hero-r { text-align: right; }
.cat-count { font-family: 'Cormorant Garamond', serif; font-size: 100px; font-weight: 300; line-height: 1; color: rgba(184,152,106,0.14); }
.cat-desc { font-family: 'Jost', sans-serif; font-size: 13px; font-weight: 300; color: var(--taupe); line-height: 1.9; max-width: 280px; margin-left: auto; margin-top: 10px; }

.filter-bar { background: var(--cream); padding: 22px 60px; display: flex; align-items: center; gap: 14px; border-bottom: 1px solid var(--sand); flex-wrap: wrap; }
.filter-label { font-family: 'Jost', sans-serif; font-size: 10px; letter-spacing: 3px; text-transform: uppercase; color: var(--mink); }
.filter-divider { width: 1px; height: 18px; background: var(--sand); }
/* filter-pill works as <button> or <a> */
.filter-pill, a.filter-pill { font-family: 'Jost', sans-serif; font-size: 10px; letter-spacing: 2px; text-transform: uppercase; padding: 8px 18px; border: 1px solid var(--sand); background: transparent; color: var(--mink); cursor: pointer; transition: all 0.2s; text-decoration: none; display: inline-block; }
.filter-pill.active, .filter-pill:hover, a.filter-pill.active, a.filter-pill:hover { background: var(--espresso); color: white; border-color: var(--espresso); }
.filter-sort { margin-left: auto; display: flex; align-items: center; gap: 8px; font-family: 'Jost', sans-serif; font-size: 10px; letter-spacing: 2px; text-transform: uppercase; color: var(--mink); position: relative; }
.filter-sort form { display: flex; align-items: center; gap: 6px; }
.filter-sort select, .filter-sort select.orderby { font-family: 'Jost', sans-serif; font-size: 10px; letter-spacing: 1.5px; color: var(--espresso); border: none; background: transparent; cursor: pointer; outline: none; appearance: none; -webkit-appearance: none; padding-right: 18px; }

.cat-grid-wrap { background: var(--cream); padding: 50px 60px 100px; }

/* ═══ THE KEY FIX: cat-grid forced 3 columns, overrides WooCommerce ═══ */
.cat-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 24px !important;
    max-width: 1300px;
    margin: 0 auto !important;
    list-style: none !important;
    padding: 0 !important;
}

/* WC archive uses ul.products — force same layout */
.woocommerce ul.products.cat-grid,
.woocommerce-page ul.products.cat-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 24px !important;
    margin: 0 auto !important;
    padding: 0 !important;
    float: none !important;
}

/* Every product li in WC loop */
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
    width: 100% !important;
    float: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* ═══ The cat-card card styling ═══ */
.cat-card {
    background: white; overflow: hidden; cursor: pointer;
    box-shadow: 0 4px 20px rgba(42,31,26,0.04);
    transition: transform 0.35s ease, box-shadow 0.35s ease;
    position: relative; display: flex; flex-direction: column;
}
.cat-card:hover { transform: translateY(-5px); box-shadow: 0 20px 50px rgba(42,31,26,0.1); }

/* Hidden full-overlay link */
.cat-card-link { position: absolute; inset: 0; z-index: 0; }
.cat-body-link { text-decoration: none; color: inherit; display: block; z-index: 1; position: relative; }
.cat-img-link  { position: absolute; inset: 0; z-index: 1; display: block; }

.cat-img {
    /* aspect-ratio scales correctly at every card width — no stretching */
    aspect-ratio: 4 / 5;
    height: auto;
    width: 100%;
    position: relative; overflow: hidden;
    display: block;
}
.cat-img-inner {
    position: absolute;
    inset: 0;
    width: 100%; height: 100%;
    transition: transform 0.5s ease;
}
.cat-img-inner img, .cat-product-img {
    position: absolute;
    inset: 0;
    width: 100% !important; height: 100% !important;
    object-fit: cover !important;
    object-position: center top !important;
    display: block !important;
}
.cat-card:hover .cat-img-inner { transform: scale(1.04); }

.cat-badge { position: absolute; top: 16px; left: 16px; background: var(--espresso); color: white; font-family: 'Jost', sans-serif; font-size: 9px; font-weight: 400; letter-spacing: 2px; text-transform: uppercase; padding: 5px 11px; z-index: 2; }
.cat-badge.gold { background: var(--gold); }

/* ── Legacy .cat-wish (fallback, kept for compatibility) ── */
.cat-wish {
    position: absolute; top: 12px; right: 12px; width: 32px; height: 32px;
    background: rgba(0,0,0,0.35); border-radius: 50%; display: flex; align-items: center; justify-content: center;
    border: none; cursor: pointer; z-index: 3; transition: background 0.25s;
}
.cat-wish:hover { background: var(--gold); }
.cat-wish svg { width: 14px; height: 14px; display: block; }

/* ════ CARD HEART BUTTON — white heart, fills brown on click ════ */
.card-heart-btn {
    position: absolute;
    top: 12px; right: 12px;
    width: 34px; height: 34px;
    border-radius: 50%;
    background: rgba(0,0,0,0.30);
    border: none;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    z-index: 3;
    transition: background 0.25s, transform 0.18s;
    padding: 0;
    backdrop-filter: blur(2px);
}
.card-heart-btn:hover {
    background: rgba(0,0,0,0.55);
    transform: scale(1.1);
}
.card-heart-btn:hover .heart-outline {
    stroke: white !important;
}
.card-heart-btn.wishlisted {
    background: #B8986A;
}
.card-heart-btn.wishlisted:hover {
    background: #a0845a;
}
.card-heart-btn .heart-outline,
.card-heart-btn .heart-filled {
    display: block;
    flex-shrink: 0;
}
.card-heart-btn.wishlisted .heart-outline { display: none; }
.card-heart-btn.wishlisted .heart-filled  { display: block !important; }
/* Added state — filled white heart on gold background */
.cat-wish-wrap .yith-wcwl-wishlistadded a::after {
    content: '' !important; display: block !important; width: 14px !important; height: 14px !important; flex-shrink: 0 !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white' stroke='white' stroke-width='1.5'%3E%3Cpath d='M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important; background-size: contain !important; background-position: center !important;
}
/* Hide YITH notice text */
.cat-wish-wrap .yith_wcwl_notice { display: none !important; }
.cat-body { padding: 24px 26px 28px; flex: 1; }
.cat-col { font-family: 'Jost', sans-serif; font-size: 9px; font-weight: 400; letter-spacing: 3.5px; text-transform: uppercase; color: var(--taupe); margin-bottom: 8px; display: block; }
.cat-name { font-family: 'Cormorant Garamond', serif; font-size: 26px; font-weight: 300; color: var(--espresso); line-height: 1.1; margin-bottom: 5px; }
.cat-shade { font-family: 'Cormorant Garamond', serif; font-size: 15px; font-style: italic; color: var(--mink); margin-bottom: 16px; }
.cat-row { display: flex; justify-content: space-between; align-items: center; }
.cat-price { font-family: 'Cormorant Garamond', serif; font-size: 24px; font-weight: 400; color: var(--deep); }
.cat-swatches { display: flex; gap: 6px; }
.swatch-dot { width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid rgba(0,0,0,0.08); display: inline-block; }

/* ═══════════════════════════════════════════════
   SINGLE PRODUCT PAGE
   Add to Cart ABOVE Add to Wishlist — stacked rows
   ═══════════════════════════════════════════════ */
.single-product-wrap { max-width: 1300px; margin: 0 auto; padding: 50px 60px 100px; }

.product-page { display: grid; grid-template-columns: 1fr 1fr; gap: 70px; align-items: start; margin-bottom: 80px; }

/* Gallery */
.product-gallery { position: sticky; top: 100px; }
.gallery-inner { display: flex; gap: 16px; }
.gallery-thumbs { display: flex; flex-direction: column; gap: 10px; width: 78px; flex-shrink: 0; }
.product-thumbnail { cursor: pointer; border: 1px solid transparent; transition: border-color 0.2s, opacity 0.2s; opacity: 0.55; overflow: hidden; }
.product-thumbnail.active, .product-thumbnail:hover { opacity: 1; border-color: var(--gold); }
.product-thumbnail img { width: 100% !important; height: 90px !important; object-fit: cover !important; display: block !important; }
.gallery-main { flex: 1; overflow: hidden; }
.product-main-image img { width: 100%; height: auto; display: block; }
.product-img-placeholder { height: 580px; display: flex; align-items: center; justify-content: center; }

/* Summary */
.product-summary {}
.product-collection { font-family: 'Jost', sans-serif; font-size: 9px; font-weight: 400; letter-spacing: 3.5px; text-transform: uppercase; color: var(--taupe); margin-bottom: 12px; display: block; }
.product-collection a { color: var(--taupe) !important; text-decoration: none; }
.product-title { font-family: 'Cormorant Garamond', serif; font-size: 46px; font-weight: 300; color: var(--espresso); line-height: 1.1; margin-bottom: 8px; }
.product-shade { font-family: 'Cormorant Garamond', serif; font-size: 16px; font-style: italic; color: var(--mink); margin-bottom: 20px; }

.product-rating-row { display: flex; align-items: center; gap: 10px; margin-bottom: 20px; }
.star-rating { color: var(--gold); font-size: 13px; }
.rating-count { font-family: 'Jost', sans-serif; font-size: 12px; font-weight: 300; color: var(--mink) !important; text-decoration: none; }

.product-price-display {
    font-family: 'Cormorant Garamond', serif;
    font-size: 34px; font-weight: 400; color: var(--deep);
    margin-bottom: 20px; display: block;
}
/* Override WC price inside our display div */
.product-price-display .woocommerce-Price-amount,
.product-price-display .price { font-family: inherit !important; font-size: inherit !important; color: inherit !important; }

.product-shade-chip { display: flex; align-items: center; gap: 12px; margin-bottom: 24px; padding: 14px 0; border-top: 1px solid var(--sand); border-bottom: 1px solid var(--sand); }
.shade-circle { width: 26px; height: 26px; border-radius: 50%; border: 2px solid rgba(0,0,0,0.08); flex-shrink: 0; display: inline-block; }
.shade-name { font-family: 'Jost', sans-serif; font-size: 12px; font-weight: 300; color: var(--mink); }
.low-stock { color: #c0392b; }

.product-short-desc { font-family: 'Jost', sans-serif; font-size: 13px; font-weight: 300; line-height: 1.9; color: var(--mink); margin-bottom: 24px; }

/* ═══ ROW 1: Add to Cart form ═══ */
.product-atc-wrap {
    display: flex; flex-direction: column; gap: 0; margin-bottom: 0;
    width: 100%;
}
.product-atc-wrap .cart { display: flex; align-items: center; gap: 12px; margin: 0; flex-wrap: wrap; }
.product-atc-wrap .quantity { flex-shrink: 0; }
.product-atc-wrap .single_add_to_cart_button { flex: 1; text-align: center; }

/* ═══ ROW 2: Add to Wishlist button — full width, right below cart ═══ */
.btn-add-wishlist {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    margin-top: 12px;
    padding: 13px 24px;
    background: transparent;
    border: 1px solid var(--sand);
    font-family: 'Jost', sans-serif;
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--espresso);
    cursor: pointer;
    transition: all 0.3s;
}
.btn-add-wishlist:hover {
    background: var(--cream);
    border-color: var(--gold);
    color: var(--gold);
}
.btn-add-wishlist svg { stroke: currentColor; fill: none; stroke-width: 1.5; width: 15px; height: 15px; flex-shrink: 0; }
.btn-add-wishlist.wished { background: var(--cream); border-color: var(--gold); color: var(--gold); }
.btn-add-wishlist.wished svg { fill: var(--gold); }

/* Product meta specs */
.product-meta-list { list-style: none; padding: 0; margin: 24px 0; border-top: 1px solid var(--sand); }
.product-meta-list li { font-family: 'Jost', sans-serif; font-size: 12px; font-weight: 300; color: var(--mink); padding: 9px 0; border-bottom: 1px solid var(--sand); display: flex; align-items: center; gap: 10px; }
.product-meta-list li::before { content: '✦'; color: var(--gold); font-size: 8px; flex-shrink: 0; }
.product_meta { font-family: 'Jost', sans-serif; font-size: 11px; font-weight: 300; color: var(--mink); margin-top: 20px; }
.product_meta a { color: var(--gold) !important; }
.product_meta .label { color: var(--espresso); font-weight: 400; }

/* Tabs */
.product-tabs-wrap { border-top: 1px solid var(--sand); padding-top: 60px; margin-top: 20px; }

/* Related products */
.product-related-wrap { padding: 60px 0; border-top: 1px solid var(--sand); margin-top: 40px; }
.product-related-wrap h2, .related.products h2 { font-family: 'Cormorant Garamond', serif; font-size: 36px; font-weight: 300; color: var(--espresso); margin-bottom: 32px; }

/* Related products grid — 4 per row desktop, 2 per row mobile */
.product-related-wrap ul.products,
.related.products ul.products,
.woocommerce .related ul.products {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 20px !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    float: none !important;
}

/* ═══ Newsletter ═══ */
.newsletter { background: var(--sand); padding: 80px 60px; text-align: center; }
.newsletter h2 { font-family: 'Cormorant Garamond', serif; font-size: 42px; font-weight: 300; color: var(--espresso); margin-bottom: 12px; }
.newsletter h2 em { font-style: italic; color: var(--gold); }
.newsletter p { font-family: 'Jost', sans-serif; font-size: 13px; font-weight: 300; color: var(--mink); margin-bottom: 36px; }
.newsletter-form { display: flex; max-width: 480px; margin: 0 auto; border: 1px solid var(--taupe); overflow: hidden; }
.newsletter-input { flex: 1; background: white; border: none; padding: 16px 22px; font-family: 'Jost', sans-serif; font-size: 13px; color: var(--espresso); outline: none; }
.newsletter-btn { background: var(--espresso); color: white; border: none; padding: 16px 26px; font-family: 'Jost', sans-serif; font-size: 11px; font-weight: 400; letter-spacing: 2.5px; text-transform: uppercase; cursor: pointer; transition: background 0.3s; white-space: nowrap; }
.newsletter-btn:hover { background: var(--deep); }

/* ═══ Footer — see full block below ═══ */
.footer-policy a, .footer-policy-links a { font-family: 'Jost', sans-serif; font-size: 11px; font-weight: 300; color: rgba(155,139,126,0.5) !important; text-decoration: none; }

/* ═══ Cart — see design-match.css for full basket/cart block ═══ */

/* ═══ Contact ═══ */
.contact-hero { background: var(--espresso); padding: 90px 60px; display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; }
.contact-eyebrow { font-family: 'Jost', sans-serif; font-size: 10px; font-weight: 300; letter-spacing: 5px; text-transform: uppercase; color: var(--gold); margin-bottom: 24px; display: flex; align-items: center; gap: 14px; }
.contact-eyebrow::before { content: ''; display: block; width: 30px; height: 1px; background: var(--gold); }
.contact-title { font-family: 'Cormorant Garamond', serif; font-size: 62px; font-weight: 300; color: var(--cream); line-height: 1.08; margin-bottom: 20px; letter-spacing: -1px; }
.contact-title em { font-style: italic; color: var(--gold-light); }
.contact-subtitle { font-family: 'Jost', sans-serif; font-size: 13px; font-weight: 300; color: var(--taupe); line-height: 1.95; max-width: 380px; }
.contact-channels { display: flex; flex-direction: column; gap: 16px; }
.channel-card { background: rgba(255,255,255,0.04); border: 1px solid rgba(184,152,106,0.14); padding: 26px 30px; display: flex; gap: 20px; align-items: flex-start; }
.channel-icon { width: 20px; height: 20px; stroke: var(--gold); fill: none; stroke-width: 1.5; flex-shrink: 0; margin-top: 3px; }
.channel-label { font-family: 'Jost', sans-serif; font-size: 9px; letter-spacing: 3px; text-transform: uppercase; color: var(--gold); margin-bottom: 6px; display: block; }
.channel-value { font-family: 'Cormorant Garamond', serif; font-size: 20px; font-weight: 300; color: var(--cream); margin-bottom: 4px; display: block; }
.channel-note { font-family: 'Jost', sans-serif; font-size: 12px; font-weight: 300; color: var(--taupe); display: block; }
.contact-body { padding: 80px 60px; max-width: 1300px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 80px; }
.cf-title { font-family: 'Cormorant Garamond', serif; font-size: 38px; font-weight: 300; color: var(--espresso); margin-bottom: 8px; }
.cf-sub { font-family: 'Jost', sans-serif; font-size: 13px; font-weight: 300; color: var(--mink); line-height: 1.9; margin-bottom: 36px; }
.cf-group { margin-bottom: 22px; }
.cf-label { display: block; font-family: 'Jost', sans-serif; font-size: 10px; letter-spacing: 3px; text-transform: uppercase; color: var(--espresso); margin-bottom: 9px; }
.cf-input, .cf-select, .cf-textarea { width: 100%; border: 1px solid var(--sand); background: white; padding: 14px 18px; font-family: 'Jost', sans-serif; font-size: 13px; color: var(--espresso); outline: none; transition: border-color 0.2s; border-radius: 0; }
.cf-input:focus, .cf-textarea:focus { border-color: var(--gold); }
.cf-select { appearance: none; cursor: pointer; }
.cf-textarea { resize: none; height: 150px; line-height: 1.8; }
.cf-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.cf-side-title { font-family: 'Cormorant Garamond', serif; font-size: 30px; font-weight: 300; color: var(--espresso); margin-bottom: 22px; }
.cf-faq-item { padding: 18px 0; border-bottom: 1px solid var(--sand); cursor: pointer; }
.cf-faq-q { font-family: 'Jost', sans-serif; font-size: 13px; font-weight: 400; color: var(--espresso); display: flex; justify-content: space-between; align-items: center; }
.cf-faq-q::after { content: '+'; color: var(--gold); font-size: 20px; font-weight: 200; flex-shrink: 0; }
.cf-hours { background: var(--cream); padding: 28px 30px; margin-top: 30px; }
.cf-hours-label { font-family: 'Jost', sans-serif; font-size: 9px; letter-spacing: 3px; text-transform: uppercase; color: var(--gold); margin-bottom: 16px; display: block; }
.cf-hours-row { display: flex; justify-content: space-between; font-family: 'Jost', sans-serif; font-size: 13px; font-weight: 300; color: var(--mink); margin-bottom: 10px; }
.cf-hours-row span { font-weight: 400; color: var(--espresso); }

/* ═══ FAQ ═══ */
.faq-hero { background: var(--espresso); padding: 90px 60px; text-align: center; position: relative; overflow: hidden; }
.faq-hero::before { content: '؟'; position: absolute; font-size: 360px; font-family: serif; color: rgba(184,152,106,0.04); top: 50%; left: 50%; transform: translate(-50%,-50%); pointer-events: none; }
.faq-hero-eyebrow { font-family: 'Jost', sans-serif; font-size: 10px; font-weight: 300; letter-spacing: 5px; text-transform: uppercase; color: var(--gold); margin-bottom: 24px; display: flex; align-items: center; justify-content: center; gap: 14px; position: relative; z-index: 2; }
.faq-hero-eyebrow::before, .faq-hero-eyebrow::after { content: ''; display: block; width: 30px; height: 1px; background: var(--gold); }
.faq-hero-title { font-family: 'Cormorant Garamond', serif; font-size: 66px; font-weight: 300; color: var(--cream); line-height: 1.08; position: relative; z-index: 2; }
.faq-hero-title em { font-style: italic; color: var(--gold-light); }
.faq-hero-sub { font-family: 'Jost', sans-serif; font-size: 13px; font-weight: 300; color: var(--taupe); max-width: 420px; margin: 16px auto 0; line-height: 1.95; position: relative; z-index: 2; }

.faq-body { padding: 80px 60px; max-width: 1300px; margin: 0 auto; display: grid; grid-template-columns: 220px 1fr; gap: 60px; align-items: start; }
.faq-cats { display: flex; flex-direction: column; gap: 4px; position: sticky; top: 100px; }
.faq-cat-item { font-family: 'Jost', sans-serif; font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: var(--mink); padding: 10px 16px; cursor: pointer; transition: all 0.2s; border-left: 2px solid transparent; }
.faq-cat-item.active, .faq-cat-item:hover { color: var(--espresso); border-left-color: var(--gold); }
.faq-category { display: none; }
.faq-category.active { display: block; }
.faq-cat-title { font-family: 'Cormorant Garamond', serif; font-size: 32px; font-weight: 300; color: var(--espresso); margin-bottom: 32px; }
.faq-q { font-family: 'Jost', sans-serif; font-size: 13px; font-weight: 400; color: var(--espresso); padding: 22px 0; border-bottom: 1px solid var(--sand); cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px; user-select: none; }
.faq-q-icon { width: 16px; height: 16px; stroke: var(--gold); fill: none; stroke-width: 2; transition: transform 0.3s; flex-shrink: 0; }
.faq-q.open .faq-q-icon { transform: rotate(45deg); }
.faq-a { font-family: 'Jost', sans-serif; font-size: 13px; font-weight: 300; color: var(--mink); line-height: 1.9; max-height: 0; overflow: hidden; transition: max-height 0.35s ease, padding 0.35s ease; }
.faq-a.open { max-height: 400px; padding: 16px 0 24px; }

/* ═══════════════════════════════════════════════════
   OUR STORY PAGE — v2 (matches indexing.html Page 4)
═══════════════════════════════════════════════════ */

/* ── HERO ── */
.story-hero-new {
    min-height: 60vh;
    background: var(--espresso);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    text-align: center;
    padding: 100px 60px;
}
.story-hero-arabic {
    position: absolute;
    font-size: 300px;
    font-family: serif;
    color: rgba(255, 255, 255, 0.03);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    white-space: nowrap;
    line-height: 1;
    user-select: none;
}
.story-hero-inner {
    position: relative;
    z-index: 2;
    max-width: 740px;
    margin: 0 auto;
}
.story-eyebrow-centered {
    font-family: 'Jost', sans-serif;
    font-size: 10px;
    font-weight: 300;
    letter-spacing: 6px;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
}
.story-eyebrow-line {
    display: block;
    width: 30px;
    height: 1px;
    background: var(--gold);
    flex-shrink: 0;
}
.story-hero-title {
    font-family: 'Cormorant Garamond', serif;
    font-size: 72px;
    font-weight: 300;
    line-height: 1.08;
    color: var(--cream);
    margin-bottom: 24px;
    letter-spacing: -1px;
}
.story-hero-title em { font-style: italic; color: var(--gold-light); }
.story-hero-subtitle {
    font-family: 'Cormorant Garamond', serif;
    font-size: 20px;
    font-style: italic;
    font-weight: 300;
    color: var(--taupe);
    max-width: 560px;
    margin: 0 auto;
    line-height: 1.75;
}

/* ── STORY BODY WRAPPER ── */
.story-body-new {
    max-width: 1200px;
    margin: 0 auto;
    padding: 100px 60px;
}

/* ── STORY GRID ROWS ── */
.story-grid-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 100px;
    align-items: center;
    margin-bottom: 100px;
}
.story-grid-row--reverse {
    direction: rtl;
}
.story-grid-row--reverse > * { direction: ltr; }

/* ── TEXT BLOCK ── */
.story-text-block .overline { margin-bottom: 18px; }
.story-text-block--inset { padding-left: 60px; }
.story-heading {
    font-family: 'Cormorant Garamond', serif;
    font-size: 42px;
    font-weight: 300;
    line-height: 1.2;
    color: var(--espresso);
    margin-bottom: 24px;
}
.story-heading em { font-style: italic; color: var(--gold); }
.story-p {
    font-family: 'Jost', sans-serif;
    font-size: 14px;
    font-weight: 300;
    line-height: 2.1;
    color: var(--mink);
    margin-bottom: 18px;
}

/* ── IMAGE BLOCK ── */
.story-img-block { position: relative; }
.story-img-frame {
    height: 500px;
    overflow: hidden;
    position: relative;
}
.story-img-frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.story-img-caption {
    position: absolute;
    bottom: 24px;
    left: 24px;
    background: white;
    padding: 14px 20px;
    font-family: 'Cormorant Garamond', serif;
    font-size: 14px;
    font-style: italic;
    color: var(--mink);
    max-width: calc(100% - 48px);
}
.story-img-caption--dark {
    background: var(--espresso);
    color: var(--taupe);
}

/* Optional editor content block */
.story-editor-content {
    padding: 0 0 80px;
}
.story-editor-content p {
    font-family: 'Jost', sans-serif;
    font-size: 15px;
    font-weight: 300;
    line-height: 2;
    color: var(--mink);
    margin-bottom: 26px;
    max-width: 720px;
}

/* ── VALUES SECTION ── */
.story-values-new {
    background: var(--cream);
    padding: 80px 60px;
}
.story-values-inner {
    max-width: 1200px;
    margin: 0 auto;
}
.story-values-header {
    margin-bottom: 0;
}
.story-values-header .overline {
    display: block;
    text-align: center;
    margin-bottom: 16px;
}

/* ── VALUES GRID — 3 cards with gap-2px seam ── */
.values-grid-new {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2px;
    margin-top: 60px;
}
.value-card-new {
    background: white;
    padding: 50px 40px;
}
.value-card-num {
    font-family: 'Cormorant Garamond', serif;
    font-size: 52px;
    font-weight: 300;
    color: rgba(184, 152, 106, 0.2);
    line-height: 1;
    margin-bottom: 20px;
}
.value-card-name {
    font-family: 'Cormorant Garamond', serif;
    font-size: 26px;
    font-weight: 400;
    color: var(--espresso);
    margin-bottom: 14px;
}
.value-card-desc {
    font-family: 'Jost', sans-serif;
    font-size: 13px;
    font-weight: 300;
    color: var(--mink);
    line-height: 1.9;
}
.value-card-arabic {
    font-size: 32px;
    font-family: serif;
    color: var(--gold);
    text-align: right;
    margin-top: 20px;
    opacity: 0.6;
    direction: rtl;
}

/* ── FOUNDERS NOTE ── */
.story-founders-section { background: var(--warm-white); padding: 80px 60px; }
.story-founders-inner { max-width: 720px; margin: 0 auto; text-align: center; }
.story-founders-note {
    font-family: 'Cormorant Garamond', serif;
    font-size: 24px;
    font-style: italic;
    font-weight: 300;
    color: var(--espresso);
    line-height: 1.65;
    margin-bottom: 28px;
}
.story-founders-signature {
    font-family: 'Jost', sans-serif;
    font-size: 12px;
    font-weight: 300;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--mink);
}

/* ── Legacy selectors — keep for backward compat ── */
.story-hero { background: var(--espresso); padding: 110px 60px; display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; }
.story-eyebrow { font-family: 'Jost', sans-serif; font-size: 10px; font-weight: 300; letter-spacing: 5px; text-transform: uppercase; color: var(--gold); margin-bottom: 26px; display: flex; align-items: center; gap: 14px; }
.story-eyebrow::before { content: ''; display: block; width: 30px; height: 1px; background: var(--gold); }
.story-title { font-family: 'Cormorant Garamond', serif; font-size: 64px; font-weight: 300; color: var(--cream); line-height: 1.08; letter-spacing: -1px; margin-bottom: 26px; }
.story-title em { font-style: italic; color: var(--gold-light); }
.story-intro { font-family: 'Jost', sans-serif; font-size: 14px; font-weight: 300; line-height: 1.95; color: var(--taupe); max-width: 380px; }
.story-quote-block { border-left: 2px solid var(--gold); padding-left: 32px; }
.story-quote { font-family: serif; font-size: 44px; line-height: 1.5; color: var(--gold); text-align: right; direction: rtl; margin-bottom: 16px; }
.story-quote-trans { font-family: 'Cormorant Garamond', serif; font-size: 16px; font-style: italic; color: var(--taupe); text-align: right; line-height: 1.7; }
.story-body { padding: 100px 60px; max-width: 1300px; margin: 0 auto; }
.story-body p { font-family: 'Jost', sans-serif; font-size: 15px; font-weight: 300; line-height: 2; color: var(--mink); max-width: 720px; margin: 0 auto 26px; }
.story-values { background: var(--cream); padding: 100px 60px; }
.values-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; max-width: 1300px; margin: 40px auto 0; }
.value-item { text-align: center; }
.value-icon { width: 52px; height: 52px; margin: 0 auto 20px; border: 1px solid var(--gold); border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.value-icon svg { stroke: var(--gold); fill: none; stroke-width: 1.5; width: 20px; height: 20px; }
.value-title { font-family: 'Cormorant Garamond', serif; font-size: 26px; font-weight: 300; color: var(--espresso); margin-bottom: 12px; }
.value-body { font-family: 'Jost', sans-serif; font-size: 13px; font-weight: 300; color: var(--mink); line-height: 1.9; }

/* ═══ Blog ═══ */
.blog-hero { background: var(--cream); padding: 80px 60px 0; }
.blog-hero-inner { max-width: 1300px; margin: 0 auto; }
.blog-hero-top { display: flex; justify-content: space-between; align-items: flex-end; padding-bottom: 50px; border-bottom: 1px solid var(--sand); }
.blog-hero-left h1 { font-family: 'Cormorant Garamond', serif; font-size: 60px; font-weight: 300; color: var(--espresso); line-height: 1.1; }
.blog-hero-left h1 em { font-style: italic; color: var(--gold); }
.blog-hero-right { font-family: 'Jost', sans-serif; font-size: 13px; font-weight: 300; color: var(--mink); line-height: 1.9; max-width: 360px; }
.blog-featured { max-width: 1300px; margin: 50px auto 0; display: grid; grid-template-columns: 1.4fr 1fr; background: white; overflow: hidden; box-shadow: 0 8px 40px rgba(42,31,26,0.06); }
.blog-feat-img { height: 520px; position: relative; overflow: hidden; }
.blog-feat-img img { width: 100%; height: 100%; object-fit: cover; }
.blog-feat-tag { position: absolute; top: 24px; left: 24px; background: var(--gold); color: white; font-family: 'Jost', sans-serif; font-size: 9px; letter-spacing: 2.5px; text-transform: uppercase; padding: 6px 14px; }
.blog-feat-content { padding: 60px 50px; display: flex; flex-direction: column; justify-content: center; }
.blog-feat-cat { font-family: 'Jost', sans-serif; font-size: 9px; letter-spacing: 4px; text-transform: uppercase; color: var(--gold); margin-bottom: 18px; display: block; }
.blog-feat-title { font-family: 'Cormorant Garamond', serif; font-size: 36px; font-weight: 300; color: var(--espresso); line-height: 1.2; margin-bottom: 18px; }
.blog-feat-excerpt { font-family: 'Jost', sans-serif; font-size: 13px; font-weight: 300; color: var(--mink); line-height: 1.9; margin-bottom: 30px; }
.blog-feat-meta { display: flex; gap: 16px; margin-bottom: 32px; }
.blog-feat-author, .blog-feat-date { font-family: 'Jost', sans-serif; font-size: 12px; font-weight: 300; color: var(--mink); }
.blog-feat-read { font-family: 'Jost', sans-serif; font-size: 11px; font-weight: 400; letter-spacing: 2.5px; text-transform: uppercase; color: var(--espresso); text-decoration: none; display: inline-flex; align-items: center; gap: 8px; border-bottom: 1px solid var(--espresso); padding-bottom: 2px; align-self: flex-start; }
.blog-feat-read::after { content: '→'; }
.blog-grid-section { background: var(--cream); padding: 60px 60px 100px; }
.blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; max-width: 1300px; margin: 0 auto; }
.blog-card { background: white; overflow: hidden; cursor: pointer; transition: transform 0.3s, box-shadow 0.3s; }
.blog-card:hover { transform: translateY(-4px); box-shadow: 0 16px 40px rgba(42,31,26,0.1); }
.blog-card-img { height: 220px; overflow: hidden; position: relative; }
.blog-card-img-inner { width: 100%; height: 100%; transition: transform 0.5s; }
.blog-card-img-inner img { width: 100%; height: 100%; object-fit: cover; }
.blog-card:hover .blog-card-img-inner { transform: scale(1.05); }
.blog-card-cat { position: absolute; bottom: 16px; left: 16px; background: white; font-family: 'Jost', sans-serif; font-size: 9px; letter-spacing: 2.5px; text-transform: uppercase; color: var(--espresso); padding: 5px 12px; }
.blog-card-body { padding: 28px 28px 32px; }
.blog-card-title { font-family: 'Cormorant Garamond', serif; font-size: 22px; font-weight: 400; color: var(--espresso); line-height: 1.3; margin-bottom: 12px; }
.blog-card-excerpt { font-family: 'Jost', sans-serif; font-size: 12px; font-weight: 300; color: var(--mink); line-height: 1.8; margin-bottom: 20px; }
.blog-card-footer { display: flex; justify-content: space-between; align-items: center; border-top: 1px solid var(--sand); padding-top: 16px; }
.blog-card-date { font-family: 'Jost', sans-serif; font-size: 11px; color: var(--taupe); }
.blog-card-link { font-family: 'Jost', sans-serif; font-size: 11px; font-weight: 400; letter-spacing: 1.5px; text-transform: uppercase; color: var(--gold) !important; }

/* ── Blog category filters (Journal page) ── */
.blog-cats {
    display: flex;
    gap: 8px;
    max-width: 1300px;
    margin: 40px auto 0;
    padding-top: 40px;
    border-top: 1px solid var(--sand);
    flex-wrap: wrap;
}
.blog-cat-btn {
    font-family: 'Jost', sans-serif;
    font-size: 10px;
    font-weight: 400;
    letter-spacing: 2px;
    text-transform: uppercase;
    padding: 8px 20px;
    border: 1px solid var(--sand);
    background: transparent;
    color: var(--mink);
    cursor: pointer;
    transition: all 0.2s;
    text-decoration: none;
    display: inline-block;
}
.blog-cat-btn.active,
.blog-cat-btn:hover {
    background: var(--espresso);
    color: white !important;
    border-color: var(--espresso);
}

/* Featured post wrapper — cream background padding */
.blog-featured-wrap {
    background: var(--cream);
    padding: 50px 60px 0;
}

/* Meta separator dot */
.blog-feat-meta-dot {
    color: var(--sand);
    font-family: 'Jost', sans-serif;
    font-size: 12px;
}

/* Pagination */
.nav-links {
    display: flex;
    gap: 8px;
    justify-content: center;
    margin: 60px auto 0;
    padding: 0;
    list-style: none;
}
.nav-links .page-numbers {
    font-family: 'Jost', sans-serif;
    font-size: 11px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--mink);
    padding: 10px 16px;
    border: 1px solid var(--sand);
    text-decoration: none;
    transition: all 0.2s;
    display: inline-block;
}
.nav-links .page-numbers.current,
.nav-links .page-numbers:hover { background: var(--espresso); color: white !important; border-color: var(--espresso); }

/* Blog preview on homepage */
.blog-preview-section { background: var(--warm-white); padding: 100px 60px; }
.section-header { max-width: 1300px; margin: 0 auto 56px; }
.blog-preview-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; max-width: 1300px; margin: 0 auto; }
.blog-preview-card { background: white; overflow: hidden; transition: transform 0.3s, box-shadow 0.3s; }
.blog-preview-card:hover { transform: translateY(-4px); box-shadow: 0 16px 40px rgba(42,31,26,0.1); }
.blog-preview-link { text-decoration: none; color: inherit; display: block; }
.blog-preview-image { height: 220px; overflow: hidden; background: var(--sand); }
.blog-preview-image img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s; }
.blog-preview-card:hover .blog-preview-image img { transform: scale(1.05); }
.placeholder-image { width: 100%; height: 100%; background: linear-gradient(150deg, var(--sand), var(--taupe)); }
.blog-preview-content { padding: 28px; }
.blog-preview-category { font-family: 'Jost', sans-serif; font-size: 9px; letter-spacing: 3px; text-transform: uppercase; color: var(--gold); margin-bottom: 12px; display: block; }
.blog-preview-title { font-family: 'Cormorant Garamond', serif; font-size: 22px; font-weight: 400; color: var(--espresso); line-height: 1.3; margin-bottom: 12px; }
.blog-preview-excerpt { font-family: 'Jost', sans-serif; font-size: 12px; font-weight: 300; color: var(--mink); line-height: 1.8; margin-bottom: 20px; }
.blog-preview-meta { display: flex; justify-content: space-between; border-top: 1px solid var(--sand); padding-top: 16px; }
.blog-preview-date { font-family: 'Jost', sans-serif; font-size: 11px; color: var(--taupe); }
.blog-preview-read-more { font-family: 'Jost', sans-serif; font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--gold); }
.blog-preview-footer { text-align: center; margin-top: 48px; }

/* ═══ Single post ═══ */
.single-post-hero { background: var(--espresso); padding: 90px 60px; }
.single-post-hero .post-cat { font-family: 'Jost', sans-serif; font-size: 9px; letter-spacing: 4px; text-transform: uppercase; color: var(--gold); margin-bottom: 22px; display: block; }
.single-post-hero h1 { font-family: 'Cormorant Garamond', serif; font-size: 60px; font-weight: 300; color: var(--cream); line-height: 1.08; max-width: 800px; margin-bottom: 24px; }
.single-post-content { max-width: 720px; margin: 0 auto; padding: 80px 20px; }
.single-post-content p { font-family: 'Jost', sans-serif; font-size: 15px; font-weight: 300; line-height: 2; color: var(--mink); margin-bottom: 26px; }
.single-post-content h2 { font-family: 'Cormorant Garamond', serif; font-size: 36px; font-weight: 300; color: var(--espresso); margin: 40px 0 20px; }
.single-post-content a { color: var(--gold) !important; }

/* ═══ Styling ═══ */
.styling-section { background: var(--espresso); padding: 100px 60px; }
.styling-hero-title { font-family: 'Cormorant Garamond', serif; font-size: 60px; font-weight: 300; color: var(--cream); line-height: 1.08; margin-bottom: 16px; }
.styling-hero-title em { font-style: italic; color: var(--gold-light); }
.styling-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; max-width: 1300px; margin: 56px auto 0; }
.styling-card { background: white; overflow: hidden; transition: transform 0.3s; }
.styling-card:hover { transform: translateY(-4px); }
.styling-img { height: 380px; overflow: hidden; }
.styling-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s; }
.styling-card:hover .styling-img img { transform: scale(1.04); }
.styling-body { padding: 28px 28px 32px; }
.styling-cat { font-family: 'Jost', sans-serif; font-size: 9px; letter-spacing: 3px; text-transform: uppercase; color: var(--gold); margin-bottom: 10px; display: block; }
.styling-title { font-family: 'Cormorant Garamond', serif; font-size: 26px; font-weight: 300; color: var(--espresso); line-height: 1.2; margin-bottom: 12px; }
.styling-excerpt { font-family: 'Jost', sans-serif; font-size: 12px; font-weight: 300; color: var(--mink); line-height: 1.8; margin-bottom: 20px; }

/* ═══ Wishlist ═══ */
.wish-hero { background: var(--cream); padding: 60px 60px 50px; border-bottom: 1px solid var(--sand); display: flex; justify-content: space-between; align-items: flex-end; }
.wish-title { font-family: 'Cormorant Garamond', serif; font-size: 56px; font-weight: 300; color: var(--espresso); }
.wish-title em { font-style: italic; color: var(--gold); }
.wish-count { font-family: 'Jost', sans-serif; font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: var(--mink); }
.wish-grid-wrap { background: var(--cream); padding: 50px 60px 100px; }
.wish-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; max-width: 1300px; margin: 0 auto; }

/* ═══ Color utilities ═══ */
.bg-blush     { background: linear-gradient(150deg, #F0D8D2, #D4B0A8); }
.bg-sage      { background: linear-gradient(150deg, #9BB09D, #6A8C6E); }
.bg-midnight  { background: linear-gradient(150deg, #3C4A6A, #1E2538); }
.bg-champagne { background: linear-gradient(150deg, #E8DCC4, #C4B090); }
.bg-stone     { background: linear-gradient(150deg, #B0A498, #8A7E72); }
.bg-rose      { background: linear-gradient(150deg, #D4909A, #A86070); }
.bg-slate     { background: linear-gradient(150deg, #7A8A9A, #4A5A6A); }
.sil { opacity: 0.18; }

/* ═══════════════════════════════════════════
   RESPONSIVE BREAKPOINTS
   ═══════════════════════════════════════════ */

/* ── 1200px ── */
@media (max-width: 1200px) {
    .hero-title { font-size: 54px; }
    .section-title { font-size: 42px; }
    /* Homepage product cards: keep 2-col grid at 1200px */
    .products-grid { grid-template-columns: repeat(2, 1fr) !important; }
    .product-card { grid-template-columns: 1fr 1fr; }
    .product-img { height: 360px; }
    /* Archive: 2 cols */
    .cat-grid { grid-template-columns: repeat(2, 1fr) !important; }
    /* Related: 3 cols */
    .product-related-wrap ul.products,
    .related.products ul.products { grid-template-columns: repeat(3, 1fr) !important; }
    .blog-grid { grid-template-columns: repeat(2, 1fr); }
    .blog-preview-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ── 992px ── */
@media (max-width: 992px) {
    .main-navigation { padding: 15px 30px; }
    .main-navigation nav { display: none; }
    .mobile-menu-toggle { display: flex; }
    .hero { grid-template-columns: 1fr; min-height: auto; }
    .hero-right { display: none; }
    .hero-left { padding: 60px 40px; min-height: 70vh; }
    .hero-title { font-size: 44px; }
    .philosophy { grid-template-columns: 1fr; padding: 60px 40px; gap: 40px; }
    .philosophy-right { border-left: none; padding-left: 0; border-top: 1px solid var(--sand); padding-top: 40px; }
    .products-section { padding: 60px 40px; }
    /* Homepage: 2 cards per row, each card stacks image above info */
    .products-grid { grid-template-columns: repeat(2, 1fr) !important; }
    .product-card { grid-template-columns: 1fr !important; }
    .product-img { height: 260px; }
    .product-info { border-left: none; border-top: 1px solid var(--sand); padding: 24px 20px; }
    .newsletter { padding: 60px 40px; }
    .site-footer { padding: 60px 40px 40px; }
    .cat-hero { flex-direction: column; align-items: flex-start; gap: 24px; padding: 50px 40px; }
    /* Archive: 2 cols on tablet */
    .cat-grid { grid-template-columns: repeat(2, 1fr) !important; }
    .basket-layout { grid-template-columns: 1fr; }
    .basket-summary { position: static; }
    .contact-hero, .contact-body { grid-template-columns: 1fr; }
    .story-hero { grid-template-columns: 1fr; padding: 70px 40px; }
    .faq-body { grid-template-columns: 1fr; }
    .faq-cats { flex-direction: row; flex-wrap: wrap; position: static; }
    .blog-featured { grid-template-columns: 1fr; }
    .blog-feat-img { height: 300px; }
    .values-grid { grid-template-columns: 1fr; }
    .product-page { grid-template-columns: 1fr; }
    /* Related: 2 cols on tablet */
    .product-related-wrap ul.products,
    .related.products ul.products { grid-template-columns: repeat(2, 1fr) !important; }
    /* Story new — stack on tablet */
    .story-hero-new { padding: 70px 40px; min-height: auto; }
    .story-hero-title { font-size: 54px; }
    .story-body-new { padding: 70px 40px; }
    .story-grid-row { grid-template-columns: 1fr; gap: 50px; }
    .story-grid-row--reverse { direction: ltr; }
    .story-text-block--inset { padding-left: 0; }
    .story-img-frame { height: 380px; }
    .values-grid-new { grid-template-columns: 1fr; }
    .story-values-new { padding: 60px 40px; }
    .blog-featured-wrap { padding: 40px 40px 0; }
    .blog-cats { margin-top: 30px; padding-top: 30px; }
}

/* ── 768px (MOBILE) ── */
@media (max-width: 768px) {
    .main-navigation { padding: 14px 20px; }
    .hero-left { padding: 40px 24px; }
    .hero-title { font-size: 36px; }
    .hero-desc { font-size: 12px; }
    .section-title, .faq-hero-title { font-size: 34px; }

    /* ═══ MOBILE: Archive — 2 products per row ═══ */
    .cat-grid,
    .woocommerce ul.products,
    .woocommerce-page ul.products { grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; }
    /* .cat-img height removed — now uses aspect-ratio: 4/5 in base rule */
    .cat-body { padding: 12px 14px 16px; }
    .cat-name { font-size: 18px; }
    .cat-shade { font-size: 13px; margin-bottom: 10px; }
    .cat-price { font-size: 18px; }
    .swatch-dot { width: 14px; height: 14px; }

    /* ═══ MOBILE: Homepage featured product cards — 2 per row, stacked (image above info) ═══ */
    .products-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; }
    .product-card { grid-template-columns: 1fr !important; display: flex !important; flex-direction: column !important; }
    .product-img { height: 180px !important; }
    .product-info {
        border-left: none !important;
        border-top: 1px solid var(--sand) !important;
        padding: 14px 14px 18px !important;
        justify-content: flex-start !important;
    }
    .product-name { font-size: 18px !important; margin-bottom: 4px !important; }
    .product-shade { font-size: 13px !important; margin-bottom: 12px !important; }
    .product-price { font-size: 18px !important; margin-bottom: 12px !important; }
    .product-divider { display: none !important; }
    .product-spec { display: none !important; }
    .product-add { font-size: 9px !important; padding: 10px 14px !important; margin-top: 6px !important; }
    .product-swatch { width: 20px !important; height: 20px !important; margin-bottom: 12px !important; }
    .product-collection { font-size: 8px !important; margin-bottom: 8px !important; }

    /* ═══ MOBILE: Related products — 2 per row ═══ */
    .product-related-wrap ul.products,
    .related.products ul.products,
    .woocommerce .related ul.products { grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; }

    /* ═══ MOBILE: Wishlist grid — 2 per row ═══ */
    .wish-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; }

    .products-header { flex-direction: column; align-items: flex-start; gap: 16px; }
    .footer-policy, .footer-policy-links { justify-content: center; }
    .blog-grid, .blog-preview-grid, .styling-grid { grid-template-columns: 1fr; }
    .products-section, .blog-preview-section { padding: 50px 16px; }
    .newsletter { padding: 50px 24px; }
    .site-footer { padding: 50px 24px 30px; }
    .basket-main { padding: 40px 24px; }
    .basket-summary { padding: 32px 24px; }
    .cat-hero { padding: 40px 24px; }
    .cat-title { font-size: 44px; }
    .filter-bar { padding: 16px 24px; gap: 8px; flex-wrap: wrap; }
    .cat-grid-wrap { padding: 24px 16px 60px; }
    .contact-hero, .contact-body { padding: 50px 24px; }
    .faq-hero { padding: 60px 24px; }
    .faq-body { padding: 40px 24px; gap: 24px; }
    .blog-hero { padding: 50px 24px 0; }
    .blog-grid-section { padding: 40px 24px 60px; }
    .wish-hero { padding: 40px 24px 30px; flex-direction: column; align-items: flex-start; gap: 8px; }
    .wish-grid-wrap { padding: 32px 16px 60px; }
    .philosophy { padding: 50px 24px; }
    .story-hero { padding: 50px 24px; }
    .story-body { padding: 50px 24px; }
    .story-values { padding: 50px 24px; }
    .styling-section { padding: 60px 24px; }
    .single-product-wrap { padding: 0 0 60px !important; }
    .contact-title, .story-title { font-size: 42px; }
    .container { padding: 0 24px; }
    .basket-item { grid-template-columns: 90px 1fr; }
    .basket-item-price { grid-column: 1/-1; }
    .blog-hero-top { flex-direction: column; gap: 20px; }
    .single-post-hero { padding: 60px 24px; }
    .single-post-hero h1 { font-size: 38px; }
    .values-grid { grid-template-columns: 1fr; }
    /* Story new — mobile */
    .story-hero-new { padding: 60px 24px; }
    .story-hero-title { font-size: 40px; }
    .story-hero-arabic { font-size: 160px; }
    .story-hero-subtitle { font-size: 16px; }
    .story-body-new { padding: 50px 24px; }
    .story-grid-row { gap: 32px; margin-bottom: 60px; }
    .story-heading { font-size: 32px; }
    .story-img-frame { height: 300px; }
    .values-grid-new { grid-template-columns: 1fr; gap: 2px; }
    .story-values-new { padding: 50px 24px; }
    .blog-featured-wrap { padding: 30px 24px 0; }
    .blog-cats { gap: 6px; padding-top: 24px; margin-top: 24px; }
    .blog-cat-btn { font-size: 9px; padding: 7px 14px; }
}

/* ── 480px ── */
@media (max-width: 480px) {
    .cat-grid,
    .woocommerce ul.products,
    .woocommerce-page ul.products { grid-template-columns: repeat(2, 1fr) !important; gap: 8px !important; }
    /* .cat-img height removed — aspect-ratio handles this */
    .cat-body { padding: 10px 12px 14px !important; }
    .cat-name { font-size: 16px !important; }
    .product-related-wrap ul.products,
    .related.products ul.products { grid-template-columns: repeat(2, 1fr) !important; gap: 8px !important; }
    .wish-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 8px !important; }
    .products-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 8px !important; }
    .product-img { height: 160px !important; }
    .product-info { padding: 12px 12px 16px !important; }
    .product-name { font-size: 16px !important; }
    .product-price { font-size: 16px !important; }
}

/* ════════════════════════════════════════════
   GALLERY SLIDER — single product page
════════════════════════════════════════════ */
.gallery-layout {
    display: flex;
    gap: 16px;
    align-items: flex-start;
}

.gallery-thumbs {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 80px;
    flex-shrink: 0;
}

.gallery-thumb {
    cursor: pointer;
    border: 2px solid transparent;
    overflow: hidden;
    opacity: 0.55;
    transition: opacity 0.2s, border-color 0.2s;
    flex-shrink: 0;
}
.gallery-thumb:hover,
.gallery-thumb.active { opacity: 1; border-color: var(--gold); }
.gallery-thumb img {
    width: 100% !important;
    height: 88px !important;
    object-fit: cover !important;
    display: block !important;
}

.gallery-main-wrap {
    flex: 1;
    overflow: hidden;
    position: relative;
}

.gallery-main-image {
    position: relative;
    overflow: hidden;
    background: var(--cream);
    min-height: 520px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.gallery-main-img {
    width: 100% !important;
    height: auto !important;
    max-height: 620px;
    object-fit: cover;
    display: block !important;
    transition: opacity 0.15s ease;
}

.gallery-placeholder {
    min-height: 520px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}

/* Arrow buttons */
.gallery-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 38px;
    height: 38px;
    background: white;
    border: none;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 2px 12px rgba(0,0,0,0.14);
    z-index: 10;
    transition: background 0.2s, box-shadow 0.2s;
    opacity: 0;
    pointer-events: none;
}
.gallery-main-image:hover .gallery-arrow,
.gallery-arrow:focus { opacity: 1; pointer-events: auto; }
.gallery-arrow:hover { background: var(--espresso); }
.gallery-arrow:hover svg { stroke: white; }
.gallery-arrow svg { stroke: var(--espresso); }
.gallery-prev { left: 12px; }
.gallery-next { right: 12px; }

/* Dots */
.gallery-dots {
    position: absolute;
    bottom: 14px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 6px;
    z-index: 10;
}
.gallery-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(42,31,26,0.25);
    cursor: pointer;
    transition: background 0.2s, transform 0.2s;
}
.gallery-dot.active { background: var(--gold); transform: scale(1.3); }

/* ════════════════════════════════════════════
   SINGLE PRODUCT — wishlist button always visible
════════════════════════════════════════════ */
.product-atc-wrap {
    width: 100%;
    margin-bottom: 0;
}
.product-atc-wrap .cart {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 0;
    flex-wrap: wrap;
}
.product-atc-wrap .quantity { flex-shrink: 0; }
.product-atc-wrap .single_add_to_cart_button {
    flex: 1;
    text-align: center;
    min-width: 160px;
}

/* Wishlist button — full width, stacked directly below add-to-cart */
.btn-add-wishlist {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    margin-top: 12px;
    padding: 14px 24px;
    background: transparent;
    border: 1px solid var(--sand);
    font-family: 'Jost', sans-serif;
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--espresso);
    cursor: pointer;
    transition: all 0.3s;
    box-shadow: none;
    border-radius: 0;
    outline: none;
}
.btn-add-wishlist:hover,
.btn-add-wishlist:focus {
    background: var(--cream);
    border-color: var(--gold);
    color: var(--gold);
}
.btn-add-wishlist.wished {
    background: var(--cream);
    border-color: var(--gold);
    color: var(--gold);
}
.btn-add-wishlist.wished svg path { fill: var(--gold); stroke: var(--gold); }
.btn-add-wishlist svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 1.5; flex-shrink: 0; }

/* ════════════════════════════════════════════
   HIDE any stray WooCommerce product search
   widget that may appear outside the header
════════════════════════════════════════════ */
/* ═══ SUPPRESS ALL STRAY SEARCH FORMS ═══
   Only the .search-overlay version (in header) is allowed.
   Everything else — WC widget, WP widget, sidebar forms — hidden. */
.widget_product_search,
.widget_search,
#woocommerce_product_search-0,
.wp-block-search,
.wc-block-search,
.woocommerce-product-search { display: none !important; }

/* Hide any search form that is NOT inside our .search-container */
form.search-form:not(.search-container .search-form),
form[role="search"]:not(.search-container form[role="search"]),
.searchform:not(.search-container .searchform) { display: none !important; }

/* The search submit INSIDE the overlay: always hidden (Enter-key search) */
.search-container .search-submit,
.search-container button[type="submit"],
.search-container input[type="submit"] { display: none !important; }

/* Safety: hide any raw input[type=search] outside overlay */
input[type="search"]:not(.search-container input[type="search"]),
input[type="search"]:not(.search-field) { }
/* ^^ don't hide those — WooCommerce needs input[type=search] in checkout etc */

/* Nav icon buttons */
.nav-icon-btn {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

/* ════════════════════════════════════════════
   FOOTER — definitive styles
════════════════════════════════════════════ */
.site-footer {
    background: var(--espresso);
    padding: 80px 60px 40px;
}
.footer-inner {
    max-width: 1300px;
    margin: 0 auto;
}
.footer-top {
    display: grid;
    grid-template-columns: 1.6fr 1fr 1fr 1fr;
    gap: 60px;
    margin-bottom: 60px;
    align-items: start;
}

/* Brand column */
.footer-brand {
    display: flex;
    flex-direction: column;
}
.footer-logo {
    display: block;
    margin-bottom: 0;
    line-height: 1;
}
.footer-logo svg,
.footer-brand svg,
.footer-brand .custom-logo-link img {
    display: block;
    max-width: 170px;
    height: auto;
}
.footer-tagline {
    font-family: 'Cormorant Garamond', serif;
    font-size: 14px;
    font-style: italic;
    color: var(--taupe);
    line-height: 1.75;
    margin: 18px 0 24px;
    max-width: 280px;
}

/* Social icons */
.footer-social {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 4px;
}
.social-link {
    width: 36px;
    height: 36px;
    border: 1px solid rgba(255,255,255,0.18);
    border-radius: 50%;
    display: flex !important;
    align-items: center;
    justify-content: center;
    color: rgba(255,255,255,0.50) !important;
    text-decoration: none;
    background: rgba(255,255,255,0.04);
    transition: border-color 0.25s, color 0.25s, background 0.25s, transform 0.2s;
    flex-shrink: 0;
}
.social-link svg { width: 15px; height: 15px; display: block; flex-shrink: 0; }
.social-link:hover {
    border-color: var(--gold);
    color: var(--gold) !important;
    background: rgba(184,152,106,0.12);
    transform: translateY(-2px);
}

/* Link columns */
.footer-col { }
.footer-col-title {
    font-family: 'Jost', sans-serif;
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--cream);
    margin-bottom: 22px;
    display: block;
}
.footer-links,
.footer-col ul,
.footer-col .menu {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 13px;
}
.footer-links li,
.footer-col ul li,
.footer-col .menu li { margin: 0; padding: 0; }
.footer-links a,
.footer-col ul a,
.footer-col .menu a {
    font-family: 'Jost', sans-serif;
    font-size: 13px;
    font-weight: 300;
    color: var(--taupe) !important;
    text-decoration: none;
    transition: color 0.2s;
    display: block;
}
.footer-links a:hover,
.footer-col ul a:hover,
.footer-col .menu a:hover { color: var(--gold) !important; }

/* Bottom bar */
.footer-bottom {
    border-top: 1px solid rgba(255,255,255,0.07);
    padding-top: 28px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
}
.footer-copy {
    font-family: 'Jost', sans-serif;
    font-size: 11px;
    font-weight: 300;
    color: rgba(155,139,126,0.5);
    letter-spacing: 1px;
    margin: 0;
}
.footer-policy { display: flex; align-items: center; }
.footer-policy-links {
    display: flex;
    gap: 24px;
    list-style: none;
    padding: 0;
    margin: 0;
    flex-wrap: wrap;
}
.footer-policy-links li { margin: 0; }
.footer-policy-links a {
    font-family: 'Jost', sans-serif;
    font-size: 11px;
    font-weight: 300;
    color: rgba(155,139,126,0.5) !important;
    text-decoration: none;
    letter-spacing: 0.5px;
    transition: color 0.2s;
}
.footer-policy-links a:hover { color: var(--gold) !important; }

/* Responsive */
@media (max-width: 1024px) {
    .footer-top { grid-template-columns: 1fr 1fr; gap: 40px; }
    .footer-brand { grid-column: 1 / -1; flex-direction: row; align-items: flex-start; gap: 40px; }
    .footer-tagline { margin: 0; }
    .footer-social { margin-top: 0; align-self: flex-end; }
}
@media (max-width: 640px) {
    .site-footer { padding: 60px 24px 32px; }
    .footer-top { grid-template-columns: 1fr; gap: 32px; }
    .footer-brand { flex-direction: column; gap: 0; }
    .footer-tagline { margin: 16px 0 20px; }
    .footer-social { margin-top: 0; }
    .footer-bottom { flex-direction: column; text-align: center; }
    .footer-policy-links { justify-content: center; }
}
/* ════════════════════════════════════════════
   HOMEPAGE — product grid always 2 columns
   (duplicate block removed — defined above near line 213)
════════════════════════════════════════════ */

/* ════════════════════════════════════════════
   CONTACT PAGE — cf-faq-a expand/collapse
════════════════════════════════════════════ */
.cf-faq-item {
    padding: 18px 0;
    border-bottom: 1px solid var(--sand);
    cursor: pointer;
}
.cf-faq-q {
    font-family: 'Jost', sans-serif;
    font-size: 13px;
    font-weight: 400;
    color: var(--espresso);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    user-select: none;
    transition: color 0.2s;
}
.cf-faq-q::after {
    content: '+';
    color: var(--gold);
    font-size: 22px;
    font-weight: 200;
    flex-shrink: 0;
    transition: transform 0.3s;
    display: inline-block;
}
.cf-faq-item.open .cf-faq-q { color: var(--gold); }
.cf-faq-item.open .cf-faq-q::after { transform: rotate(45deg); }

.cf-faq-a {
    font-family: 'Jost', sans-serif;
    font-size: 13px;
    font-weight: 300;
    color: var(--mink);
    line-height: 1.9;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s ease;
    padding: 0;
}
.cf-faq-item.open .cf-faq-a {
    padding-top: 14px;
}

/* ════════════════════════════════════════════
   BODY overflow lock when mobile menu open
════════════════════════════════════════════ */
body.menu-open { overflow: hidden; }

/* ════════════════════════════════════════════
   RESPONSIVE — footer
════════════════════════════════════════════ */
@media (max-width: 1200px) {
    .footer-top { grid-template-columns: 1fr 1fr; gap: 40px; }
}
@media (max-width: 768px) {
    .site-footer { padding: 50px 24px 30px; }
    .footer-top { grid-template-columns: 1fr; text-align: center; gap: 32px; }
    .footer-social { justify-content: center; }
    .footer-bottom { flex-direction: column; gap: 16px; text-align: center; }
    .footer-policy, .footer-policy-links { justify-content: center; flex-wrap: wrap; gap: 14px; }
}

/* ════════════════════════════════════════════
   GALLERY — mobile responsive
════════════════════════════════════════════ */
@media (max-width: 768px) {
    .gallery-layout { flex-direction: column; }
    .gallery-thumbs {
        flex-direction: row;
        width: 100%;
        overflow-x: auto;
        gap: 8px;
        padding-bottom: 4px;
        order: 2;
    }
    .gallery-thumb { width: 60px; flex-shrink: 0; }
    .gallery-thumb img { height: 70px !important; }
    .gallery-main-wrap { order: 1; }
    .gallery-main-image { min-height: 300px; }
    .gallery-arrow { opacity: 1; pointer-events: auto; }
}

/* Always show arrows on touch devices */
@media (hover: none) {
    .gallery-arrow { opacity: 0.8; pointer-events: auto; }
}

/* ════════════════════════════════════════════
   CONTENT PAGES — Privacy, Refund, Terms, etc.
   Any page using the default page.php template
════════════════════════════════════════════ */
.site-main {
    padding-top: 80px;
    padding-bottom: 100px;
    min-height: 60vh;
}
.site-main .container {
    max-width: 860px;
}
.page-content {
    padding: 48px 0 80px;
}
.page-title {
    font-family: 'Cormorant Garamond', serif;
    font-size: 52px;
    font-weight: 300;
    color: var(--espresso);
    line-height: 1.12;
    letter-spacing: -0.5px;
    margin: 0 0 12px;
    padding-bottom: 22px;
    border-bottom: 1px solid var(--sand);
}
/* Headings inside page content */
.page-content h1,
.page-content h2,
.page-content h3,
.page-content h4,
.page-content h5,
.page-content h6,
.entry-content h1,
.entry-content h2,
.entry-content h3,
.entry-content h4 {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 400;
    color: var(--espresso);
    line-height: 1.2;
    margin: 36px 0 14px;
}
.page-content h2, .entry-content h2 { font-size: 30px; }
.page-content h3, .entry-content h3 { font-size: 22px; }
.page-content h4, .entry-content h4 { font-size: 17px; font-family: 'Jost', sans-serif; letter-spacing: 0.04em; font-weight: 500; }
/* Paragraphs */
.page-content p,
.entry-content p {
    font-family: 'Jost', sans-serif;
    font-size: 14px;
    font-weight: 300;
    color: var(--mink);
    line-height: 2;
    margin: 0 0 20px;
}
/* Lists */
.page-content ul,
.page-content ol,
.entry-content ul,
.entry-content ol {
    font-family: 'Jost', sans-serif;
    font-size: 14px;
    font-weight: 300;
    color: var(--mink);
    line-height: 2;
    padding-left: 22px;
    margin: 0 0 22px;
}
.page-content ul li,
.page-content ol li,
.entry-content ul li,
.entry-content ol li {
    margin-bottom: 8px;
}
/* Links */
.page-content a,
.entry-content a {
    color: var(--gold);
    text-decoration: underline;
    text-underline-offset: 3px;
    transition: color 0.2s;
}
.page-content a:hover,
.entry-content a:hover { color: var(--espresso); }
/* Strong / em */
.page-content strong, .entry-content strong {
    font-weight: 500;
    color: var(--espresso);
}
.page-content em, .entry-content em {
    font-style: italic;
    color: var(--deep);
}
/* Horizontal rule */
.page-content hr, .entry-content hr {
    border: none;
    border-top: 1px solid var(--sand);
    margin: 40px 0;
}
/* Blockquote */
.page-content blockquote,
.entry-content blockquote {
    border-left: 2px solid var(--gold);
    padding-left: 24px;
    margin: 32px 0;
    font-family: 'Cormorant Garamond', serif;
    font-size: 20px;
    font-style: italic;
    color: var(--espresso);
    line-height: 1.6;
}
/* Page hero image */
.page-hero {
    margin-bottom: 0;
    overflow: hidden;
    max-height: 380px;
}
.page-hero img {
    width: 100%;
    height: 380px;
    object-fit: cover;
    display: block;
}
/* Responsive */
@media (max-width: 1024px) {
    .site-main { padding-top: 60px; }
    .page-title { font-size: 40px; }
}
@media (max-width: 768px) {
    .site-main { padding-top: 40px; padding-bottom: 60px; }
    .site-main .container { padding: 0 24px; }
    .page-content { padding: 32px 0 60px; }
    .page-title { font-size: 32px; padding-bottom: 18px; }
    .page-content h2, .entry-content h2 { font-size: 24px; }
    .page-content h3, .entry-content h3 { font-size: 18px; }
    .page-content blockquote, .entry-content blockquote { font-size: 17px; }
}

/* ════════════════════════════════════════════
   OUR STORY PAGE — Improved layout & responsive
════════════════════════════════════════════ */
.story-hero {
    background: var(--espresso);
    padding: 110px 60px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center;
    max-width: 100%;
}
.story-body {
    padding: 100px 60px;
    max-width: 860px;
    margin: 0 auto;
}
.story-body p {
    font-family: 'Jost', sans-serif;
    font-size: 15px;
    font-weight: 300;
    line-height: 2;
    color: var(--mink);
    margin-bottom: 26px;
}
.story-body h2, .story-body h3 {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 400;
    color: var(--espresso);
    margin: 40px 0 16px;
}
.story-body h2 { font-size: 34px; }
.story-body h3 { font-size: 24px; }
.story-values { background: var(--cream); padding: 100px 60px; }
.values-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 48px;
    margin-top: 52px;
}
.value-item {
    padding: 36px 28px;
    background: white;
    border: 1px solid var(--sand);
    text-align: center;
}
.value-icon {
    width: 48px;
    height: 48px;
    background: var(--cream);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    color: var(--gold);
}
.value-title {
    font-family: 'Cormorant Garamond', serif;
    font-size: 22px;
    font-weight: 400;
    color: var(--espresso);
    margin: 0 0 12px;
}
.value-body {
    font-family: 'Jost', sans-serif;
    font-size: 13px;
    font-weight: 300;
    color: var(--mink);
    line-height: 1.9;
    margin: 0;
}
/* Story page responsive */
@media (max-width: 1024px) {
    .story-hero { padding: 80px 40px; gap: 50px; }
    .values-grid { grid-template-columns: 1fr 1fr; gap: 24px; }
}
@media (max-width: 768px) {
    .story-hero {
        grid-template-columns: 1fr;
        padding: 60px 24px;
        gap: 40px;
    }
    .story-title { font-size: 40px !important; }
    .story-quote { font-size: 32px; }
    .story-body { padding: 56px 24px; }
    .story-values { padding: 56px 24px; }
    .values-grid { grid-template-columns: 1fr; }
    .story-quote-block { border-left: none; border-top: 1px solid var(--gold); padding-left: 0; padding-top: 28px; }
}

/* ════════════════════════════════════════════
   WISHLIST PAGE — YITH integration styles
════════════════════════════════════════════ */
/* YITH table reskin */
.woocommerce table.wishlist_table {
    border-collapse: collapse;
    width: 100%;
    font-family: 'Jost', sans-serif;
}
.woocommerce table.wishlist_table thead th {
    font-family: 'Jost', sans-serif;
    font-size: 10px;
    font-weight: 300;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--mink);
    border-bottom: 1px solid var(--sand);
    padding: 14px 0;
    background: none;
}
.woocommerce table.wishlist_table tbody td {
    padding: 24px 10px;
    border-bottom: 1px solid var(--sand);
    vertical-align: middle;
    font-family: 'Jost', sans-serif;
    font-size: 13px;
    color: var(--espresso);
    background: none;
}
.woocommerce table.wishlist_table .product-name a {
    font-family: 'Cormorant Garamond', serif;
    font-size: 20px;
    font-weight: 400;
    color: var(--espresso);
    text-decoration: none;
}
.woocommerce table.wishlist_table .product-name a:hover { color: var(--gold); }
.woocommerce table.wishlist_table .product-price .amount {
    font-family: 'Cormorant Garamond', serif !important;
    font-size: 20px !important;
    color: var(--deep) !important;
}
.woocommerce table.wishlist_table .product-remove a,
table.wishlist_table .product-remove a {
    color: var(--mink);
    font-size: 18px;
}
.woocommerce table.wishlist_table .product-remove a:hover { color: var(--espresso); }
/* YITH add-to-cart in wishlist */
.woocommerce table.wishlist_table .btn-add-to-cart-wishlist,
.woocommerce table.wishlist_table button.button {
    font-family: 'Jost', sans-serif !important;
    font-size: 10px !important;
    letter-spacing: 2px !important;
    text-transform: uppercase !important;
    background: var(--espresso) !important;
    color: var(--cream) !important;
    border: none !important;
    padding: 12px 22px !important;
    cursor: pointer !important;
}
.yith-wcwl-wishlist-title { display: none; }
/* YITH share bar */
.yith-wcwl-share { margin-top: 30px; }
@media (max-width: 768px) {
    .woocommerce table.wishlist_table { display: block; overflow-x: auto; }
}

/* ════════════════════════════════════════════
   WISHLIST BUTTON — YITH Integration
   Override custom button to use YITH's own
════════════════════════════════════════════ */
/* YITH button on product cards */
/* Global YITH rule — scoped to NOT affect single product wishlist button */
/* YITH on product CARDS — heart icon only, no text */
.cat-wish-wrap .yith-wcwl-add-to-wishlist {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 10;
    margin: 0 !important;
}
.cat-wish-wrap .yith-wcwl-add-to-wishlist .add_to_wishlist,
.cat-wish-wrap .yith-wcwl-add-to-wishlist a {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 32px !important;
    height: 32px !important;
    background: white !important;
    border-radius: 50% !important;
    text-decoration: none !important;
    border: none !important;
    padding: 0 !important;
    font-size: 0 !important;
    color: transparent !important;
    letter-spacing: 0 !important;
    text-indent: -9999px !important;
    line-height: 1 !important;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1) !important;
    overflow: hidden !important;
}
.cat-wish-wrap .yith-wcwl-add-to-wishlist a:hover {
    background: var(--gold) !important;
}
.cat-wish-wrap .yith-wcwl-add-to-wishlist .add_to_wishlist::before,
.cat-wish-wrap .yith-wcwl-add-to-wishlist a::before {
    content: '';
    display: block;
    width: 13px;
    height: 13px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232A1F1A' stroke-width='1.5'%3E%3Cpath d='M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z'/%3E%3C/svg%3E") center/contain no-repeat;
}
.cat-wish-wrap .yith-wcwl-add-to-wishlist .yith-wcwl-wishlistadded::before,
.cat-wish-wrap .yith-wcwl-add-to-wishlist a.yith-wcwl-wishlistadded::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23B8986A' stroke='%23B8986A' stroke-width='1.5'%3E%3Cpath d='M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z'/%3E%3C/svg%3E");
}
/* YITH feedback/notice */
.cat-wish-wrap .yith-wcwl-add-to-wishlist .yith-wcwl-icon { display: none !important; }

/* ════════════════════════════════════════════
   WOOCOMMERCE — general missing responsive fixes
════════════════════════════════════════════ */
@media (max-width: 768px) {
    .single-product-wrap { padding: 0 0 60px; }
    .product-page { flex-direction: column; gap: 0; }
    .wish-hero {
        flex-direction: column;
        padding: 60px 24px 40px;
        gap: 24px;
        align-items: flex-start;
    }
    .wish-grid-wrap { padding: 0 24px 60px; }
}

/* ════════════════════════════════════════════
   STORY PAGE — Additional elements
════════════════════════════════════════════ */
.story-values-header { text-align: center; margin-bottom: 0; }
.story-values-header .overline { margin-bottom: 14px; }
.story-values-header .section-title { margin-bottom: 0; }

.story-body-section { background: var(--parchment, #FDFAF6); }
.story-body-section .story-body p,
.story-body-section .story-body h2,
.story-body-section .story-body h3,
.story-body-section .story-body h4 {
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
}
.story-body-section .story-body ul,
.story-body-section .story-body ol {
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
    font-family: 'Jost', sans-serif;
    font-size: 15px;
    font-weight: 300;
    line-height: 2;
    color: var(--mink);
    padding-left: 22px;
    margin-bottom: 26px;
}

/* Founders note */
.story-founders-section {
    background: var(--espresso);
    padding: 80px 60px;
}
.story-founders-inner {
    max-width: 640px;
    margin: 0 auto;
    text-align: center;
}
.story-founders-note {
    font-family: 'Cormorant Garamond', serif;
    font-size: 22px;
    font-style: italic;
    font-weight: 300;
    color: var(--cream);
    line-height: 1.7;
    margin-bottom: 28px;
}
.story-founders-signature {
    font-family: 'Jost', sans-serif;
    font-size: 11px;
    font-weight: 300;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--gold);
}
@media (max-width: 768px) {
    .story-founders-section { padding: 60px 24px; }
    .story-founders-note { font-size: 18px; }
}

/* ════════════════════════════════════════════
   WISHLIST COUNT BADGE — header nav
════════════════════════════════════════════ */
.nav-icon-btn { position: relative; display: inline-flex; align-items: center; }
.wishlist-count {
    position: absolute;
    top: -6px;
    right: -8px;
    background: var(--gold);
    color: white;
    font-family: 'Jost', sans-serif;
    font-size: 9px;
    font-weight: 400;
    line-height: 1;
    min-width: 16px;
    height: 16px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 3px;
}

/* ════════════════════════════════════════════
   FINAL CONSOLIDATED MOBILE FIXES
   Ensures 2-col product grids on ALL pages at ALL mobile breakpoints
   Overrides any conflicting earlier rules
════════════════════════════════════════════ */

/* ─── 768px and below ─── */
@media (max-width: 768px) {

    /* Grid wrap: owns the horizontal padding — cards never touch screen edges */
    .cat-grid-wrap {
        padding: 24px 16px 60px !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
        width: 100% !important;
    }

    /* ── All product archive / shop grids ── */
    .cat-grid,
    .woocommerce ul.products,
    .woocommerce-page ul.products,
    ul.products {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
        float: none !important;
        padding: 0 !important;
        /* Override desktop max-width centering — wrap handles spacing */
        max-width: 100% !important;
        width: 100% !important;
        margin: 0 !important;
        box-sizing: border-box !important;
    }

    /* ── All product list items ── */
    .woocommerce ul.products li.product,
    .woocommerce-page ul.products li.product,
    ul.products li.product,
    .cat-grid li.product,
    .cat-grid .cat-card {
        width: 100% !important;
        max-width: 100% !important;
        float: none !important;
        margin: 0 !important;
        padding: 0 !important;
        box-sizing: border-box !important;
        min-width: 0 !important;
        overflow: hidden !important;
    }

    /* ── Homepage featured product grid (2-col, card stacked) ── */
    .products-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
    }
    .product-card {
        display: flex !important;
        flex-direction: column !important;
        grid-template-columns: unset !important;
    }
    .product-img {
        height: 180px !important;
        width: 100% !important;
    }
    .product-info {
        border-left: none !important;
        border-top: 1px solid var(--sand) !important;
        padding: 14px 14px 18px !important;
        flex: 1;
    }
    .product-name  { font-size: 17px !important; }
    .product-price { font-size: 17px !important; margin-bottom: 10px !important; }
    .product-divider,
    .product-spec  { display: none !important; }
    .product-add   { font-size: 9px !important; padding: 10px 14px !important; }

    /* ── Related / upsells ── */
    .product-related-wrap ul.products,
    .related.products ul.products,
    .upsells.products ul.products,
    .woocommerce .related ul.products {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
    }

    /* ── Wishlist grid ── */
    .wish-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
    }

    /* ── Cat card image height ── */
    /* .cat-img height removed — aspect-ratio handles proportional sizing */
    .cat-body { padding: 12px 12px 16px !important; }
    .cat-name  { font-size: 17px !important; }
    .cat-shade { font-size: 12px !important; margin-bottom: 8px !important; }
    .cat-price { font-size: 17px !important; }

    /* ── Blog grid: 1 col on mobile (matches reference) ── */
    .blog-grid,
    .blog-preview-grid {
        grid-template-columns: 1fr !important;
    }

    /* ── Styling grid: 1 col on mobile ── */
    .styling-grid { grid-template-columns: 1fr !important; }
}

/* ─── 480px and below ─── */
@media (max-width: 480px) {
    .cat-grid,
    .woocommerce ul.products,
    .woocommerce-page ul.products,
    ul.products,
    .products-grid,
    .wish-grid,
    .product-related-wrap ul.products,
    .related.products ul.products {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px !important;
    }
    /* .cat-img height removed — aspect-ratio handles proportional sizing */
    .product-img { height: 155px !important; }
    .cat-body  { padding: 10px 10px 12px !important; }
    .cat-name  { font-size: 15px !important; }
    .cat-price { font-size: 15px !important; }
    .product-name  { font-size: 15px !important; }
    .product-price { font-size: 15px !important; }
    .cat-grid-wrap {
        padding: 16px 12px 50px !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
        width: 100% !important;
    }
    .cat-grid,
    .woocommerce ul.products,
    .woocommerce-page ul.products {
        max-width: 100% !important;
        margin: 0 !important;
        width: 100% !important;
    }
    .wish-grid-wrap { padding: 20px 12px 50px !important; }
}
/* ═══════════════════════════════════════════════════════
   FINAL FIXES — appended clean
   ═══════════════════════════════════════════════════════ */

/* 1. SINGLE PRODUCT — "Add to Wishlist" button with full text */
.single-wishlist-wrap .yith-wcwl-add-to-wishlist,
.single-wishlist-wrap .yith-wcwl-add-button { margin: 0 !important; }

.single-wishlist-wrap .yith-wcwl-add-to-wishlist a,
.single-wishlist-wrap .yith-wcwl-add-button a,
.single-wishlist-wrap .add_to_wishlist {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    width: 100% !important;
    margin-top: 12px !important;
    padding: 13px 24px !important;
    background: transparent !important;
    border: 1px solid var(--sand) !important;
    border-radius: 0 !important;
    font-family: 'Jost', sans-serif !important;
    font-size: 11px !important;
    font-weight: 400 !important;
    letter-spacing: 3px !important;
    text-transform: uppercase !important;
    color: var(--espresso) !important;
    text-decoration: none !important;
    text-indent: 0 !important;
    overflow: visible !important;
    cursor: pointer !important;
    transition: all 0.3s !important;
    box-shadow: none !important;
}
.single-wishlist-wrap .yith-wcwl-add-to-wishlist a:hover,
.single-wishlist-wrap .yith-wcwl-add-button a:hover {
    background: var(--cream) !important;
    border-color: var(--gold) !important;
    color: var(--gold) !important;
}
.single-wishlist-wrap .yith-wcwl-wishlistadded a {
    background: var(--cream) !important;
    border-color: var(--gold) !important;
    color: var(--gold) !important;
}
.single-wishlist-wrap .yith-wcwl-icon,
.single-wishlist-wrap img.yith-wcwl-icon { display: none !important; }

/* 2. PRODUCT CARDS — nuclear text hide on wishlist wrap
   Kills "Add to Wishlist" text that YITH renders as direct text node in <a> */
.cat-wish-wrap .yith-wcwl-add-to-wishlist a,
.cat-wish-wrap .yith-wcwl-add-button a,
.cat-wish-wrap .add_to_wishlist,
.cat-wish-wrap .yith-wcwl-wishlistadded a {
    font-size: 0 !important;
    color: transparent !important;
    letter-spacing: -999px !important;
    word-spacing: -999px !important;
    text-indent: -9999px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    width: 32px !important;
    height: 32px !important;
    padding: 0 !important;
    border-radius: 50% !important;
    background: white !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.12) !important;
    border: none !important;
    position: relative !important;
    cursor: pointer !important;
    transition: background 0.3s !important;
}
.cat-wish-wrap .yith-wcwl-add-to-wishlist a:hover,
.cat-wish-wrap .yith-wcwl-add-button a:hover { background: var(--gold) !important; }
.cat-wish-wrap .yith-wcwl-wishlistadded a { background: var(--gold) !important; }
/* Suppress any YITH popup/notice on cards */
.cat-card .yith-wcwl-popup,
.cat-card .yith-wcwl-message,
.cat-wish-wrap + .yith-wcwl-popup { display: none !important; }

/* 3. SINGLE PRODUCT — Add to Cart always visible */
.product-atc-wrap { display: block !important; }
.product-atc-wrap form.cart { display: flex !important; flex-wrap: wrap !important; gap: 12px !important; }
.product-atc-wrap .single_add_to_cart_button {
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
    flex: 1 !important;
}

/* 4. CART NEW PRODUCTS section styles */
.cart-new-products {
    padding: 70px 60px 80px;
    background: var(--warm-white);
    border-top: 1px solid var(--sand);
}
.cart-new-products .cnp-eyebrow {
    font-family: 'Jost', sans-serif;
    font-size: 10px;
    font-weight: 400;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: var(--gold);
    display: block;
    margin-bottom: 10px;
    text-align: center;
}
.cart-new-products .cnp-heading {
    font-family: 'Cormorant Garamond', serif;
    font-size: 38px;
    font-weight: 300;
    color: var(--espresso);
    text-align: center;
    margin-bottom: 40px;
    line-height: 1.15;
}
.cart-new-products .cnp-heading em { font-style: italic; color: var(--gold); }
.cart-new-products-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    max-width: 1300px;
    margin: 0 auto;
}
@media (max-width: 1100px) {
    .cart-new-products-grid { grid-template-columns: repeat(2, 1fr); }
    .cart-new-products { padding: 50px 30px 60px; }
}
@media (max-width: 600px) {
    .cart-new-products-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
    .cart-new-products { padding: 40px 16px 50px; }
    .cart-new-products .cnp-heading { font-size: 26px; }
}


/* ══════════════════════════════════════════════════════════════
   RELATED PRODUCTS — Mobile card fix (v2)
   Root cause: .cat-img had a fixed pixel height which caused
   images to stretch when cards are narrow in 2-col grid.
   Fix: base .cat-img now uses aspect-ratio:4/5 + absolute img.
   This block handles grid layout, text sizing, and padding.
   ══════════════════════════════════════════════════════════════ */

/* ── Prevent grid blowout on the wrap ── */
.product-related-wrap,
.woocommerce .related.products {
    box-sizing: border-box;
    width: 100%;
    overflow: hidden;
}

.product-related-wrap ul.products li.product,
.related.products ul.products li.product,
.woocommerce .related ul.products li.product {
    box-sizing: border-box;
    min-width: 0;
    overflow: hidden;
}

.product-related-wrap .cat-card,
.related.products .cat-card {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    overflow: hidden;
}

/* ── Mobile ≤ 768px ── */
@media (max-width: 768px) {

    .product-related-wrap {
        padding: 40px 16px 60px;
    }

    .product-related-wrap ul.products,
    .related.products ul.products,
    .woocommerce .related ul.products {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px !important;
        padding: 0 !important;
        margin: 0 !important;
        width: 100% !important;
        float: none !important;
    }

    .product-related-wrap h2,
    .related.products > h2 {
        font-size: 26px !important;
        margin-bottom: 20px !important;
        padding-top: 36px !important;
    }

    /* Card body text — scaled for ~160px wide cards */
    .product-related-wrap .cat-body,
    .related.products .cat-body {
        padding: 10px 10px 12px !important;
    }
    .product-related-wrap .cat-col,
    .related.products .cat-col {
        font-size: 8px !important;
        letter-spacing: 2px !important;
        margin-bottom: 3px !important;
    }
    .product-related-wrap .cat-name,
    .related.products .cat-name {
        font-size: 14px !important;
        line-height: 1.2 !important;
        margin-bottom: 3px !important;
        white-space: normal !important;
        word-break: break-word !important;
    }
    .product-related-wrap .cat-shade,
    .related.products .cat-shade {
        font-size: 11px !important;
        margin-bottom: 6px !important;
    }
    .product-related-wrap .cat-price,
    .related.products .cat-price {
        font-size: 13px !important;
    }
    .product-related-wrap .cat-row,
    .related.products .cat-row {
        flex-wrap: wrap !important;
        gap: 4px !important;
    }
    .product-related-wrap .swatch-dot,
    .related.products .swatch-dot {
        width: 12px !important;
        height: 12px !important;
    }
    .product-related-wrap .card-heart-btn,
    .related.products .card-heart-btn {
        width: 28px !important;
        height: 28px !important;
        top: 8px !important;
        right: 8px !important;
    }
}

/* ── Small mobile ≤ 480px ── */
@media (max-width: 480px) {
    .product-related-wrap {
        padding: 32px 12px 50px;
    }
    .product-related-wrap ul.products,
    .related.products ul.products,
    .woocommerce .related ul.products {
        gap: 8px !important;
    }
    .product-related-wrap .cat-body,
    .related.products .cat-body {
        padding: 8px 8px 10px !important;
    }
    .product-related-wrap .cat-name,
    .related.products .cat-name {
        font-size: 13px !important;
    }
    .product-related-wrap .cat-price,
    .related.products .cat-price {
        font-size: 12px !important;
    }
    .product-related-wrap .cat-shade,
    .related.products .cat-shade {
        display: none !important;
    }
}

/* ── Very small ≤ 375px ── */
@media (max-width: 375px) {
    .product-related-wrap .cat-name,
    .related.products .cat-name {
        font-size: 12px !important;
    }
    .product-related-wrap .cat-col,
    .related.products .cat-col {
        display: none !important;
    }
}
/* ══════════════════════════════════════════════════════════════════
   ORIGINS BY HAWWA — COMPREHENSIVE MOBILE FIX
   Matches the design reference from mobile.html & desktop pages HTML
   Covers: all "admin" pages (basket, account, wishlist, contact, faq)
   plus global layout fixes at all breakpoints.
   ══════════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────
   GLOBAL MOBILE NAV (≤ 992px)
───────────────────────────────────────── */
@media (max-width: 992px) {
    .main-navigation {
        padding: 14px 20px;
    }
}

/* ─────────────────────────────────────────
   GLOBAL FOOTER (≤ 768px)
───────────────────────────────────────── */
@media (max-width: 768px) {
    .site-footer {
        padding: 50px 24px 30px;
    }
    .footer-top {
        grid-template-columns: 1fr 1fr;
        gap: 40px;
        margin-bottom: 40px;
    }
    .footer-bottom {
        flex-direction: column;
        gap: 16px;
        text-align: center;
    }
    .footer-policy,
    .footer-policy-links {
        justify-content: center;
        flex-wrap: wrap;
        gap: 14px;
    }
    .footer-copy {
        text-align: center;
    }
}

@media (max-width: 480px) {
    .footer-top {
        grid-template-columns: 1fr;
        gap: 32px;
        text-align: center;
    }
    .footer-social {
        justify-content: center;
    }
}

/* ─────────────────────────────────────────
   NEWSLETTER (≤ 768px)
───────────────────────────────────────── */
@media (max-width: 768px) {
    .newsletter {
        padding: 50px 24px;
    }
    .newsletter h2 {
        font-size: 28px;
    }
    .newsletter-form {
        flex-direction: column;
        border: none;
    }
    .newsletter-input {
        border: 1px solid var(--taupe);
        padding: 14px 18px;
        width: 100%;
    }
    .newsletter-btn {
        padding: 14px 18px;
        width: 100%;
        text-align: center;
    }
}

/* ─────────────────────────────────────────
   PAGE A — PRODUCT CATEGORY (≤ 768px)
───────────────────────────────────────── */
@media (max-width: 768px) {
    .cat-hero {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
        padding: 40px 24px;
    }
    .cat-title {
        font-size: 44px;
        letter-spacing: -0.5px;
    }
    .cat-count {
        font-size: 60px;
    }
    .cat-hero-r {
        text-align: left;
    }
    .cat-desc {
        margin-left: 0;
        max-width: 100%;
    }
    .filter-bar {
        padding: 14px 16px;
        gap: 8px;
        flex-wrap: wrap;
        overflow-x: auto;
    }
    .filter-pill {
        font-size: 9px;
        padding: 7px 14px;
        white-space: nowrap;
    }
    .cat-grid-wrap {
        padding: 20px 16px 60px;
    }
}

@media (max-width: 480px) {
    .cat-title {
        font-size: 36px;
    }
}

/* ─────────────────────────────────────────
   PAGE B — BASKET / CART (≤ 768px)
───────────────────────────────────────── */
@media (max-width: 768px) {
    .basket-layout {
        grid-template-columns: 1fr;
    }
    .basket-summary {
        position: static;
        border-top: 3px solid var(--sand);
    }
    .basket-main {
        padding: 36px 24px 40px;
        border-right: none;
        border-bottom: 1px solid var(--sand);
    }
    .basket-page-title {
        font-size: 36px;
    }
    .basket-count {
        margin-bottom: 28px;
    }
    .basket-item {
        grid-template-columns: 90px 1fr;
        gap: 16px;
        padding: 24px 0;
    }
    .basket-item-price {
        grid-column: 1 / -1;
        display: flex;
        justify-content: flex-end;
        font-size: 22px;
    }
    .basket-img {
        height: 90px;
    }
    .basket-item-name {
        font-size: 20px;
    }
    .basket-summary {
        padding: 32px 24px;
    }
    .checkout-btn,
    .paypal-btn {
        padding: 16px;
    }
    /* WooCommerce cart table mobile */
    .woocommerce-cart table.cart {
        display: block !important;
        overflow-x: auto !important;
    }
    .woocommerce-cart .cart-collaterals {
        width: 100% !important;
        float: none !important;
    }
    .woocommerce-cart .cart_totals {
        width: 100% !important;
        float: none !important;
    }
    .cart-new-products {
        padding: 40px 16px 50px;
    }
    .cart-new-products .cnp-heading {
        font-size: 26px;
    }
    .cart-new-products-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }
}

/* ─────────────────────────────────────────
   PAGE C — CONTACT (≤ 768px)
───────────────────────────────────────── */
@media (max-width: 768px) {
    .contact-hero {
        grid-template-columns: 1fr;
        padding: 50px 24px;
        gap: 40px;
    }
    .contact-title {
        font-size: 40px;
        letter-spacing: -0.5px;
    }
    .contact-body {
        grid-template-columns: 1fr;
        padding: 50px 24px;
        gap: 40px;
    }
    .cf-row {
        grid-template-columns: 1fr;
    }
    .cf-title {
        font-size: 28px;
    }
    .channel-card {
        padding: 20px 22px;
    }
    .channel-value {
        font-size: 17px;
    }
}

/* ─────────────────────────────────────────
   PAGE D — WISHLIST (≤ 768px)
───────────────────────────────────────── */
@media (max-width: 768px) {
    .wish-hero {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
        padding: 36px 24px 28px;
    }
    .wish-title {
        font-size: 40px;
    }
    .wish-subtitle {
        text-align: left;
        max-width: 100%;
        font-size: 12px;
    }
    .wish-grid-wrap {
        padding: 24px 16px 60px;
    }
    .wish-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
    }
    .wish-img {
        height: 190px;
    }
    .wish-body {
        padding: 14px 14px 18px;
    }
    .wish-name {
        font-size: 17px;
    }
    .wish-price {
        font-size: 17px;
        margin-bottom: 12px;
    }
    .wish-add {
        font-size: 9px;
        padding: 10px;
    }
    /* YITH wishlist table on mobile */
    .woocommerce table.wishlist_table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

@media (max-width: 480px) {
    .wish-grid {
        gap: 8px !important;
    }
    .wish-img {
        height: 160px;
    }
    .wish-name {
        font-size: 15px;
    }
    .wish-price {
        font-size: 15px;
    }
}

/* ─────────────────────────────────────────
   PAGE E — MY ACCOUNT (≤ 768px)
   Both custom .account-* classes AND
   WooCommerce native .woocommerce-account
───────────────────────────────────────── */

/* Custom account layout (design reference) */
.account-layout {
    display: grid;
    grid-template-columns: 280px 1fr;
    min-height: 75vh;
}
.account-sidebar {
    background: var(--cream);
    border-right: 1px solid var(--sand);
    padding: 52px 36px;
}
.account-main {
    padding: 56px 64px;
}

@media (max-width: 992px) {
    .account-layout {
        grid-template-columns: 220px 1fr;
    }
    .account-sidebar {
        padding: 40px 24px;
    }
    .account-main {
        padding: 40px 36px;
    }
}

@media (max-width: 768px) {
    .account-layout {
        grid-template-columns: 1fr;
    }
    .account-sidebar {
        border-right: none;
        border-bottom: 3px solid var(--sand);
        padding: 32px 24px;
    }
    .account-nav {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 4px;
    }
    .account-nav a {
        padding: 10px 14px;
        font-size: 10px;
    }
    .account-main {
        padding: 36px 24px;
    }
    .account-section-h {
        font-size: 28px;
        margin-bottom: 24px;
    }
    .order-card {
        grid-template-columns: 1fr;
        gap: 14px;
        padding: 22px 20px;
    }
    .order-total {
        text-align: left;
    }
    .order-link {
        justify-content: flex-start;
    }
    .order-items {
        font-size: 16px;
    }

    /* WooCommerce native My Account — mobile stack */
    .woocommerce-account .woocommerce {
        padding: 0 24px !important;
        box-sizing: border-box !important;
    }
    .woocommerce-account .woocommerce-MyAccount-navigation {
        float: none !important;
        width: 100% !important;
        margin-bottom: 24px;
        border-bottom: 1px solid var(--sand);
        padding-bottom: 16px;
    }
    .woocommerce-account .woocommerce-MyAccount-navigation ul {
        display: flex;
        flex-wrap: wrap;
        gap: 4px;
    }
    .woocommerce-account .woocommerce-MyAccount-navigation ul li {
        border-bottom: none;
    }
    .woocommerce-account .woocommerce-MyAccount-navigation ul li a {
        display: inline-block !important;
        padding: 8px 14px !important;
        border: 1px solid var(--sand) !important;
        font-size: 10px !important;
        white-space: nowrap;
    }
    .woocommerce-account .woocommerce-MyAccount-navigation ul li.is-active a {
        background: var(--espresso) !important;
        color: white !important;
        border-color: var(--espresso) !important;
    }
    .woocommerce-account .woocommerce-MyAccount-content {
        float: none !important;
        width: 100% !important;
    }
    /* Account address grids */
    .woocommerce-account .woocommerce-Addresses {
        display: block !important;
    }
    .woocommerce-account .woocommerce-Address {
        width: 100% !important;
        float: none !important;
        margin-bottom: 24px !important;
    }
    /* Orders table */
    .woocommerce-account .woocommerce-orders-table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

/* ─────────────────────────────────────────
   PAGE F — FAQ (≤ 768px)
───────────────────────────────────────── */
@media (max-width: 768px) {
    .faq-hero {
        padding: 60px 24px;
    }
    .faq-hero-title {
        font-size: 44px;
    }
    .faq-search-wrap {
        padding: 24px 24px;
    }
    .faq-body {
        grid-template-columns: 1fr;
        padding: 36px 24px;
        gap: 28px;
    }
    .faq-cats {
        flex-direction: row;
        flex-wrap: wrap;
        position: static;
        gap: 8px;
    }
    .faq-cat-item {
        font-size: 10px;
        padding: 8px 14px;
        border: 1px solid var(--sand);
        border-bottom: none;
    }
    .faq-cat-item.active {
        background: var(--espresso);
        color: white;
    }
    .faq-cat-list {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
    }
    .faq-cat-item {
        border-bottom: 1px solid var(--sand) !important;
    }
    .faq-section-title,
    .faq-cat-title {
        font-size: 26px;
    }
    .faq-q {
        font-size: 13px;
        padding: 18px 0;
    }
    .faq-a {
        padding-right: 24px;
        font-size: 12px;
    }
}

/* ─────────────────────────────────────────
   PAGE G — 404 NOT FOUND (≤ 768px)
───────────────────────────────────────── */
@media (max-width: 768px) {
    .notfound {
        padding: 80px 24px;
        min-height: 70vh;
    }
    .nf-title {
        font-size: 52px;
    }
    .nf-sub {
        font-size: 13px;
    }
    .nf-btns {
        flex-direction: column;
        width: 100%;
    }
    .nf-btns .btn-primary,
    .nf-btns .btn-outline-cream {
        width: 100%;
        text-align: center;
    }
    .nf-suggest {
        flex-wrap: wrap;
        justify-content: center;
    }
}

/* ─────────────────────────────────────────
   CHECKOUT (≤ 768px)
───────────────────────────────────────── */
@media (max-width: 768px) {
    .woocommerce-checkout form.woocommerce-checkout {
        grid-template-columns: 1fr !important;
    }
    .woocommerce-checkout #payment {
        padding: 24px !important;
    }
    .woocommerce-checkout #payment ul.payment_methods {
        padding: 0 !important;
    }
}

/* ─────────────────────────────────────────
   SINGLE PRODUCT PAGE (≤ 768px)
───────────────────────────────────────── */
@media (max-width: 768px) {
    .single-product-wrap {
        padding: 24px 24px 60px;
    }
    .product-page {
        grid-template-columns: 1fr !important;
        gap: 32px;
        padding: 36px 0;
    }
    .gallery {
        grid-template-columns: 1fr;
    }
    .gallery-layout {
        flex-direction: column;
    }
    .gallery-thumbs {
        flex-direction: row;
        width: 100%;
        overflow-x: auto;
    }
    .gallery-thumb {
        flex-shrink: 0;
    }
    .gallery-thumb img {
        width: 64px !important;
        height: 64px !important;
    }
    .main-img,
    .gallery-main-wrap {
        height: 380px;
    }
    .detail-name {
        font-size: 36px;
    }
    .detail-price {
        font-size: 28px;
    }
    .add-btn {
        padding: 15px;
    }
    /* Breadcrumb */
    .breadcrumb {
        font-size: 10px;
    }
    /* Tabs */
    .woocommerce-tabs ul.tabs {
        padding: 0 !important;
    }
    .woocommerce-tabs ul.tabs li a {
        font-size: 10px !important;
        padding: 12px 14px !important;
    }
}

/* ─────────────────────────────────────────
   STYLING GUIDE PAGE (≤ 768px)
───────────────────────────────────────── */
@media (max-width: 768px) {
    .styling-section {
        padding: 60px 24px;
    }
    .styling-title {
        font-size: 38px;
    }
    .styling-grid {
        grid-template-columns: 1fr !important;
        gap: 2px;
    }
    .styling-card-img {
        height: 360px;
    }
    .steps {
        grid-template-columns: 1fr 1fr !important;
        gap: 24px;
        margin-top: 50px;
    }
    .step-num {
        font-size: 44px;
    }
    .step-title {
        font-size: 18px;
    }
}

@media (max-width: 480px) {
    .steps {
        grid-template-columns: 1fr !important;
    }
    .styling-card-img {
        height: 300px;
    }
}

/* ─────────────────────────────────────────
   BLOG / JOURNAL (≤ 768px)
───────────────────────────────────────── */
@media (max-width: 768px) {
    .blog-hero {
        padding: 50px 24px 0;
    }
    .blog-hero-top {
        flex-direction: column;
        gap: 20px;
        padding-bottom: 36px;
    }
    .blog-hero-left h1 {
        font-size: 40px;
    }
    .blog-hero-right {
        max-width: 100%;
    }
    .blog-grid-section {
        padding: 36px 24px 60px;
    }
    .blog-grid,
    .blog-preview-grid {
        grid-template-columns: 1fr !important;
        gap: 24px;
    }
    .blog-preview-section {
        padding: 50px 16px;
    }
    .single-post-hero {
        padding: 60px 24px;
    }
    .single-post-hero h1 {
        font-size: 32px;
    }
    .blog-featured {
        grid-template-columns: 1fr !important;
    }
    .blog-feat-img {
        height: 240px;
    }
}

/* ─────────────────────────────────────────
   PHILOSOPHY SECTION (≤ 768px)
───────────────────────────────────────── */
@media (max-width: 768px) {
    .philosophy {
        grid-template-columns: 1fr;
        padding: 50px 24px;
        gap: 36px;
    }
    .philosophy-right {
        border-left: none;
        border-top: 1px solid var(--sand);
        padding-left: 0;
        padding-top: 36px;
    }
    .arabic-quote {
        font-size: 32px;
    }
}

/* ─────────────────────────────────────────
   HOMEPAGE HERO (≤ 768px)
───────────────────────────────────────── */
@media (max-width: 768px) {
    .hero {
        grid-template-columns: 1fr;
        min-height: auto;
    }
    .hero-right {
        display: none;
    }
    .hero-left {
        padding: 50px 24px 44px;
        min-height: 80vw;
    }
    .hero-title {
        font-size: 38px;
        letter-spacing: -0.5px;
    }
    .hero-desc {
        font-size: 12px;
        margin-bottom: 32px;
    }
    .hero-cta {
        flex-direction: column;
        gap: 16px;
        align-items: flex-start;
    }
    .btn-primary {
        padding: 14px 28px;
    }
}

/* ─────────────────────────────────────────
   PRODUCTS SECTION / HOMEPAGE CARDS (≤ 768px)
───────────────────────────────────────── */
@media (max-width: 768px) {
    .products-section {
        padding: 44px 16px;
    }
    .products-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 14px;
        margin-bottom: 28px;
        padding-bottom: 24px;
    }
    .products-title {
        font-size: 32px;
    }
    .products-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
    }
    .product-card {
        grid-template-columns: 1fr !important;
        display: flex !important;
        flex-direction: column !important;
    }
    .product-img {
        height: 180px !important;
    }
    .product-info {
        border-left: none !important;
        border-top: 1px solid var(--sand) !important;
        padding: 12px 12px 16px !important;
    }
    .product-name    { font-size: 16px !important; margin-bottom: 3px !important; }
    .product-shade   { font-size: 12px !important; margin-bottom: 10px !important; }
    .product-price   { font-size: 16px !important; margin-bottom: 10px !important; }
    .product-divider { display: none !important; }
    .product-spec    { display: none !important; }
    .product-add     { font-size: 9px !important; padding: 9px 12px !important; }
    .product-swatch  { width: 18px !important; height: 18px !important; margin-bottom: 10px !important; }
    .product-collection { font-size: 8px !important; }
}

/* ─────────────────────────────────────────
   PAGE BAND (≤ 768px) — utility divider
───────────────────────────────────────── */
@media (max-width: 768px) {
    .page-band {
        padding: 14px 20px;
        flex-wrap: wrap;
        gap: 4px;
    }
    .page-band-title {
        font-size: 9px;
    }
    .page-band-sub {
        font-size: 11px;
    }
}

/* ─────────────────────────────────────────
   SEARCH PAGE (≤ 768px)
───────────────────────────────────────── */
@media (max-width: 768px) {
    .search-hero {
        padding: 50px 24px;
    }
    .search-form-wrap {
        padding: 20px 24px;
    }
}

/* ─────────────────────────────────────────
   GENERAL OVERFLOW GUARD (all screens)
───────────────────────────────────────── */
html, body {
    overflow-x: hidden;
}

* {
    box-sizing: border-box;
}

/* Prevent any grid from causing horizontal scroll */
@media (max-width: 768px) {
    .container,
    .page-content,
    .entry-content,
    .site-main {
        overflow-x: hidden;
        max-width: 100vw;
        box-sizing: border-box;
    }
}

/* ─────────────────────────────────────────
   TOUCH IMPROVEMENTS (all mobile)
───────────────────────────────────────── */
@media (max-width: 768px) {
    /* Tap targets — 44px on WRAPPER, icon SVG stays small */
    .nav-icon-btn,
    .qty-btn,
    .filter-pill,
    .size-btn {
        min-height: 44px;
        min-width: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
    .m-nav-icon,
    .nav-icon {
        min-height: unset !important;
        min-width: unset !important;
        width: 16px !important;
        height: 16px !important;
        display: block !important;
    }

    /* Remove hover-only effects that don't translate to touch */
    .product-card:hover,
    .cat-card:hover,
    .wish-card:hover {
        transform: none;
        box-shadow: 0 4px 24px rgba(42,31,26,0.05);
    }
}


/* ════════════════════════════════════════════════════════════════
   STYLING GUIDE PAGE — Origins by Hawwa
   Dark espresso background, portrait look-cards, numbered steps.
   All sg-* classes live here so they load with the main stylesheet.
   ════════════════════════════════════════════════════════════════ */

/* Page wrapper — espresso bg covers everything */
.sg-page {
    background: #2A1F1A !important;
    min-height: 60vh;
    color: #F8F4EE;
}

/* Ensure full dark bg on styling page body */
.page-template-page-styling body,
.post-type-archive-styling_guide body {
    background: #2A1F1A !important;
}

/* ── Hero ── */
.sg-hero {
    padding: 80px 70px 60px;
    text-align: center;
}
.sg-hero-inner {
    max-width: 680px;
    margin: 0 auto;
}
.sg-overline {
    display: block;
    font-family: 'Jost', sans-serif;
    font-size: 10px;
    font-weight: 400;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: #B8986A;
    margin-bottom: 20px;
}
.sg-h1 {
    font-family: 'Cormorant Garamond', serif;
    font-size: 60px;
    font-weight: 300;
    color: #F8F4EE;
    line-height: 1.1;
    margin: 0 0 22px;
    letter-spacing: -0.01em;
}
.sg-h1 em {
    font-style: italic;
    color: #D4B896;
}
.sg-sub {
    font-family: 'Jost', sans-serif;
    font-size: 13px;
    font-weight: 300;
    color: rgba(248,244,238,0.55);
    line-height: 1.85;
    margin: 0 auto;
    max-width: 540px;
}

/* ── Cards section ── */
.sg-cards-wrap {
    padding: 0 70px 72px;
}
.sg-cards-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    max-width: 1300px;
    margin: 0 auto;
}

/* ── Card ── */
.sg-card {
    display: block;
    text-decoration: none;
    color: inherit;
    overflow: hidden;
    transition: transform 0.35s ease;
    cursor: pointer;
}
.sg-card:not(.sg-card--static):hover {
    transform: translateY(-5px);
}

/* ── Card media — portrait 4:5 ratio ── */
.sg-card-media {
    position: relative;
    width: 100%;
    padding-top: 125%;
    overflow: hidden;
}

/* Real post thumbnail */
.sg-card-media .sg-card-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    display: block;
    transition: transform 0.55s ease;
}
.sg-card:not(.sg-card--static):hover .sg-card-img {
    transform: scale(1.04);
}

/* Colour placeholder when no image */
.sg-card-placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.sg-card-placeholder svg {
    width: 40%;
    max-width: 108px;
    display: block;
}
.sg-pal--beige { background: linear-gradient(155deg,#E8E0D5 0%,#C8BAA8 100%); }
.sg-pal--sage  { background: linear-gradient(155deg,#7A9B7A 0%,#587A58 100%); }
.sg-pal--navy  { background: linear-gradient(155deg,#2C3E5A 0%,#1A2A40 100%); }

/* Gradient overlay + text */
.sg-card-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 60px 22px 24px;
    background: linear-gradient(to top,
        rgba(10,6,4,0.92) 0%,
        rgba(10,6,4,0.45) 55%,
        transparent 100%);
}
.sg-card-num {
    display: block;
    font-family: 'Jost', sans-serif;
    font-size: 9px;
    font-weight: 400;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: rgba(255,255,255,0.48);
    margin-bottom: 8px;
}
.sg-card-title {
    font-family: 'Cormorant Garamond', serif;
    font-size: 22px;
    font-weight: 300;
    color: #ffffff;
    line-height: 1.2;
    margin: 0 0 7px;
}
.sg-card-exc {
    font-family: 'Jost', sans-serif;
    font-size: 11px;
    font-weight: 300;
    color: rgba(255,255,255,0.58);
    line-height: 1.65;
    margin: 0;
}

/* ── Divider ── */
.sg-rule-row {
    padding: 0 70px;
    max-width: calc(1300px + 140px);
    margin: 0 auto;
    box-sizing: border-box;
}
.sg-rule {
    height: 1px;
    background: rgba(255,255,255,0.10);
    border: none;
    margin: 0;
}

/* ── Steps ── */
.sg-steps-wrap {
    padding: 56px 70px 90px;
}
.sg-steps-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 36px;
    max-width: 1300px;
    margin: 0 auto;
}
.sg-step-n {
    display: block;
    font-family: 'Cormorant Garamond', serif;
    font-size: 52px;
    font-weight: 300;
    color: rgba(255,255,255,0.10);
    line-height: 1;
    margin-bottom: 16px;
}
.sg-step-h {
    font-family: 'Cormorant Garamond', serif;
    font-size: 18px;
    font-weight: 400;
    color: #F8F4EE;
    margin: 0 0 10px;
    line-height: 1.3;
}
.sg-step-p {
    font-family: 'Jost', sans-serif;
    font-size: 12px;
    font-weight: 300;
    color: rgba(248,244,238,0.50);
    line-height: 1.85;
    margin: 0;
}

/* ── Responsive ── */
@media (max-width: 1100px) {
    .sg-steps-grid { grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 960px) {
    .sg-hero           { padding: 60px 40px 48px; }
    .sg-cards-wrap     { padding: 0 40px 60px; }
    .sg-rule-row       { padding: 0 40px; }
    .sg-steps-wrap     { padding: 44px 40px 70px; }
    .sg-h1             { font-size: 46px; }
    .sg-cards-grid     { grid-template-columns: repeat(2,1fr); gap: 16px; }
}
@media (max-width: 640px) {
    .sg-hero           { padding: 48px 20px 36px; }
    .sg-cards-wrap     { padding: 0 16px 48px; }
    .sg-rule-row       { padding: 0 16px; }
    .sg-steps-wrap     { padding: 36px 16px 60px; }
    .sg-h1             { font-size: 36px; }
    .sg-cards-grid     { grid-template-columns: 1fr; gap: 14px; }
    .sg-steps-grid     { grid-template-columns: 1fr 1fr; gap: 24px; }
    .sg-card-title     { font-size: 20px; }
}
@media (max-width: 400px) {
    .sg-steps-grid { grid-template-columns: 1fr; }
}