/* ================================================================
   ORIGINS BY HAWWA — MOBILE MATCH v3.0
   Pixel-perfect 1:1 match to mobile.html reference design
   Enqueued LAST — overrides everything on mobile
   ================================================================ */

/* ─── FONT IMPORT ─── */
@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 — exact match to mobile.html :root ─── */
:root {
  --cream:      #F8F4EE;
  --warm-white: #FDFAF6;
  --sand:       #E8DDD0;
  --taupe:      #C4B5A5;
  --mink:       #9B8B7E;
  --deep:       #3D2E28;
  --espresso:   #2A1F1A;
  --gold:       #B8986A;
  --gold-light: #D4B896;
  --sage:       #8A9E8C;
}

/* ================================================================
   <= 768px  ALL MOBILE OVERRIDES
   Every value taken directly from mobile.html
   ================================================================ */
@media (max-width: 768px) {

  /* BODY */
  body { font-family: 'Jost', sans-serif !important; background: var(--warm-white) !important; -webkit-font-smoothing: antialiased !important; }
  html, body { overflow-x: hidden !important; }
  * { box-sizing: border-box !important; }
  img { max-width: 100% !important; height: auto !important; }
  .container { padding: 0 20px !important; }

  /* ── NAVIGATION — pad 14px 18px, warm-white, border sand ── */
  .site-header, .m-nav { background: var(--warm-white) !important; border-bottom: 1px solid var(--sand) !important; position: sticky !important; top: 0 !important; z-index: 100 !important; box-shadow: none !important; }
  .main-navigation { display: flex !important; align-items: center !important; justify-content: space-between !important; padding: 14px 18px !important; max-width: 100% !important; margin: 0 !important; }
  .main-navigation nav, .nav-links-desktop, .desktop-nav { display: none !important; }
  .nav-right { display: flex !important; gap: 14px !important; align-items: center !important; }
  .nav-icon { width: 18px !important; height: 18px !important; stroke: var(--espresso) !important; fill: none !important; stroke-width: 1.5 !important; }
  .mobile-menu-toggle { display: flex !important; flex-direction: column !important; gap: 4px !important; cursor: pointer !important; }
  .mobile-menu-toggle span { display: block !important; width: 20px !important; height: 1.5px !important; background: var(--espresso) !important; }

  /* ── MOBILE MENU — espresso, pad 60px 28px 40px ── */
  .mobile-menu-overlay, .mobile-menu-overlay.active { background: var(--espresso) !important; padding: 0 !important; }
  .mobile-menu-container { padding: 60px 28px 40px !important; }
  .mobile-menu-header { display: flex !important; justify-content: space-between !important; align-items: center !important; margin-bottom: 50px !important; }
  .mobile-menu-close { font-family: 'Jost', sans-serif !important; font-size: 11px !important; color: var(--taupe) !important; letter-spacing: 2px !important; text-transform: uppercase !important; background: none !important; border: none !important; cursor: pointer !important; }
  .mobile-nav-links a, .mobile-menu-overlay ul.mobile-nav-links li a { font-family: 'Cormorant Garamond', serif !important; font-size: 36px !important; font-weight: 300 !important; color: var(--cream) !important; text-decoration: none !important; padding: 16px 0 !important; border-bottom: 1px solid rgba(255,255,255,0.06) !important; display: flex !important; justify-content: space-between !important; align-items: center !important; line-height: 1 !important; }
  .mobile-nav-links a:hover, .mobile-nav-links .current-menu-item > a { color: var(--gold) !important; }
  .mobile-nav-links a::after { content: '\2192' !important; font-family: 'Jost', sans-serif !important; font-size: 16px !important; color: var(--gold) !important; position: static !important; transform: none !important; }
  .mobile-menu-social-footer { margin-top: 40px !important; display: flex !important; gap: 20px !important; }
  .mobile-menu-social-link { font-family: 'Jost', sans-serif !important; font-size: 10px !important; color: var(--mink) !important; letter-spacing: 2px !important; text-transform: uppercase !important; text-decoration: none !important; }

  /* ── HERO — espresso bg, pad 40px 22px 36px, min-h 420px ── */
  .hero { background: var(--espresso) !important; padding: 40px 22px 36px !important; min-height: 420px !important; display: flex !important; flex-direction: column !important; justify-content: flex-end !important; grid-template-columns: 1fr !important; }
  .hero-left { background: var(--espresso) !important; padding: 40px 22px 36px !important; min-height: 420px !important; display: flex !important; flex-direction: column !important; justify-content: flex-end !important; }
  .hero-right { display: none !important; }
  .hero-eyebrow { font-family: 'Jost', sans-serif !important; font-size: 8px !important; font-weight: 300 !important; letter-spacing: 4px !important; text-transform: uppercase !important; color: var(--gold) !important; margin-bottom: 12px !important; display: flex !important; align-items: center !important; gap: 8px !important; }
  .hero-eyebrow::before { content: '' !important; display: block !important; width: 20px !important; height: 1px !important; background: var(--gold) !important; }
  .hero-title { font-family: 'Cormorant Garamond', serif !important; font-size: 38px !important; font-weight: 300 !important; line-height: 1.08 !important; color: var(--cream) !important; margin-bottom: 14px !important; letter-spacing: 0 !important; }
  .hero-title em { font-style: italic !important; color: var(--gold-light) !important; }
  .hero-desc { font-family: 'Jost', sans-serif !important; font-size: 11px !important; font-weight: 300 !important; line-height: 1.85 !important; color: var(--taupe) !important; margin-bottom: 24px !important; max-width: 100% !important; }
  .hero-cta { display: flex !important; gap: 14px !important; align-items: center !important; flex-wrap: wrap !important; }
  .btn-primary { background: var(--gold) !important; color: white !important; font-family: 'Jost', sans-serif !important; font-size: 9px !important; font-weight: 400 !important; letter-spacing: 2.5px !important; text-transform: uppercase !important; padding: 12px 22px !important; border: none !important; cursor: pointer !important; display: inline-block !important; }
  .btn-ghost { color: var(--taupe) !important; font-family: 'Jost', sans-serif !important; font-size: 9px !important; font-weight: 300 !important; letter-spacing: 2px !important; text-transform: uppercase !important; text-decoration: none !important; }
  .btn-ghost::after { display: none !important; }
  .btn-esp { background: var(--espresso) !important; color: white !important; font-family: 'Jost', sans-serif !important; font-size: 9px !important; font-weight: 400 !important; letter-spacing: 2.5px !important; text-transform: uppercase !important; padding: 12px 22px !important; border: none !important; }

  /* ── MARQUEE — gold bg, pad 9px 0, Cormorant 11px italic ── */
  .marquee-strip { background: var(--gold) !important; padding: 9px 0 !important; overflow: hidden !important; white-space: nowrap !important; }
  .marquee-inner { display: inline-flex !important; gap: 30px !important; animation: marquee 20s linear infinite !important; }
  .marquee-item { font-family: 'Cormorant Garamond', serif !important; font-size: 11px !important; font-style: italic !important; color: white !important; display: flex !important; align-items: center !important; gap: 12px !important; }
  .marquee-item::after { content: '\2736' !important; font-size: 7px !important; font-style: normal !important; opacity: 0.6 !important; }

  /* ── OVERLINE — Jost 8px ls4px gold mb14px ── */
  .overline { font-family: 'Jost', sans-serif !important; font-size: 8px !important; letter-spacing: 4px !important; text-transform: uppercase !important; color: var(--gold) !important; margin-bottom: 14px !important; display: block !important; }

  /* ── SECTION TITLES — Cormorant 28px weight 300 lh1.2 ── */
  .section-title, h2.section-title, .products-title { font-family: 'Cormorant Garamond', serif !important; font-size: 28px !important; font-weight: 300 !important; line-height: 1.2 !important; color: var(--espresso) !important; margin-bottom: 14px !important; letter-spacing: 0 !important; }
  .section-title em, h2.section-title em { font-style: italic !important; color: var(--gold) !important; }

  /* ── BODY TEXT — Jost 11px 300 lh1.9 mink ── */
  .section-body, .philosophy p, .story-body p, .story-p { font-family: 'Jost', sans-serif !important; font-size: 11px !important; font-weight: 300 !important; line-height: 1.9 !important; color: var(--mink) !important; }

  /* ── ARABIC BLOCK — border-left 2px gold pad 28px 20px ── */
  .story-quote-block, .philosophy-right, .m-arabic-block { padding: 28px 20px !important; border-left: 2px solid var(--gold) !important; margin: 24px 0 !important; border-top: none !important; }
  .arabic-quote, .story-quote, .m-arabic-text { font-size: 28px !important; color: var(--gold) !important; font-family: serif !important; text-align: right !important; margin-bottom: 10px !important; line-height: 1.5 !important; }
  .arabic-translation, .story-quote-trans, .m-arabic-translation { font-family: 'Cormorant Garamond', serif !important; font-size: 13px !important; font-style: italic !important; color: var(--mink) !important; line-height: 1.7 !important; }

  /* ── HOMEPAGE PRODUCTS — 2-col, img 150px, info pad 10px 10px 14px ── */
  .products-section { background: var(--cream) !important; padding: 24px 20px !important; }
  .products-header { flex-direction: column !important; align-items: flex-start !important; gap: 14px !important; margin-bottom: 22px !important; padding-bottom: 0 !important; }
  .products-grid { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 10px !important; margin-bottom: 20px !important; }
  .product-card { background: white !important; overflow: hidden !important; box-shadow: 0 4px 20px rgba(42,31,26,0.07) !important; grid-template-columns: unset !important; display: flex !important; flex-direction: column !important; }
  .product-img { height: 150px !important; position: relative !important; display: flex !important; align-items: center !important; justify-content: center !important; overflow: hidden !important; aspect-ratio: unset !important; }
  .product-badge { position: absolute !important; top: 14px !important; left: 14px !important; background: var(--espresso) !important; color: white !important; font-family: 'Jost', sans-serif !important; font-size: 7px !important; letter-spacing: 2px !important; text-transform: uppercase !important; padding: 4px 10px !important; }
  .product-badge.gold { background: var(--gold) !important; }
  .product-info { padding: 10px 10px 14px !important; border-left: none !important; border-top: none !important; display: flex !important; flex-direction: column !important; justify-content: flex-start !important; }
  .product-collection { font-family: 'Jost', sans-serif !important; font-size: 7px !important; letter-spacing: 3px !important; text-transform: uppercase !important; color: var(--taupe) !important; margin-bottom: 4px !important; }
  .product-name { font-family: 'Cormorant Garamond', serif !important; font-size: 14px !important; font-weight: 300 !important; color: var(--espresso) !important; margin-bottom: 2px !important; line-height: 1.2 !important; }
  .product-shade { font-family: 'Cormorant Garamond', serif !important; font-size: 11px !important; font-style: italic !important; color: var(--mink) !important; margin-bottom: 8px !important; }
  .product-price { font-family: 'Cormorant Garamond', serif !important; font-size: 16px !important; font-weight: 400 !important; color: var(--deep) !important; margin-bottom: 0 !important; }
  .product-add { background: var(--espresso) !important; color: white !important; font-family: 'Jost', sans-serif !important; font-size: 7px !important; letter-spacing: 2px !important; text-transform: uppercase !important; padding: 7px 10px !important; border: none !important; cursor: pointer !important; margin-top: 6px !important; align-self: flex-start !important; }
  .product-divider { display: none !important; }
  .product-spec { display: none !important; }
  .product-swatch { width: 20px !important; height: 20px !important; margin-bottom: 8px !important; }

  /* ── CATEGORY PAGE — espresso hero pad 28px 20px 24px ── */
  .cat-hero { background: var(--espresso) !important; padding: 28px 20px 24px !important; flex-direction: column !important; align-items: flex-start !important; gap: 0 !important; position: relative !important; overflow: hidden !important; }
  .cat-eyebrow { font-family: 'Jost', sans-serif !important; font-size: 8px !important; letter-spacing: 4px !important; text-transform: uppercase !important; color: var(--gold) !important; margin-bottom: 10px !important; }
  .cat-title { font-family: 'Cormorant Garamond', serif !important; font-size: 36px !important; font-weight: 300 !important; color: var(--cream) !important; line-height: 1.05 !important; margin-bottom: 0 !important; }
  .cat-title em { font-style: italic !important; color: var(--gold-light) !important; }
  .cat-desc, .cat-hero p { font-family: 'Jost', sans-serif !important; font-size: 10px !important; font-weight: 300 !important; color: var(--taupe) !important; line-height: 1.7 !important; margin-top: 14px !important; margin-left: 0 !important; max-width: 100% !important; }
  .cat-result-count { margin-top: 14px !important; font-family: 'Jost', sans-serif !important; font-size: 9px !important; color: var(--mink) !important; letter-spacing: 1.5px !important; }

  /* Filter bar — pad 10px 14px */
  .filter-bar { background: var(--cream) !important; border-bottom: 1px solid var(--sand) !important; padding: 10px 14px !important; display: flex !important; align-items: center !important; justify-content: space-between !important; flex-wrap: nowrap !important; gap: 6px !important; position: sticky !important; top: 52px !important; z-index: 90 !important; overflow: hidden !important; }
  .filter-pill, a.filter-pill { font-family: 'Jost', sans-serif !important; font-size: 8px !important; letter-spacing: 1px !important; text-transform: uppercase !important; padding: 5px 10px !important; border: 1px solid var(--sand) !important; background: transparent !important; color: var(--mink) !important; white-space: nowrap !important; }
  .filter-pill.active, a.filter-pill.active { background: var(--espresso) !important; color: white !important; border-color: var(--espresso) !important; }

  /* Cat grid — 2 cols gap 10px */
  .cat-grid, .woocommerce ul.products, .woocommerce-page ul.products, ul.products { display: grid !important; grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; padding: 0 !important; margin: 0 !important; list-style: none !important; float: none !important; }
  .cat-grid-wrap { padding: 14px 14px 0 !important; background: var(--cream) !important; }
  .cat-card, .woocommerce ul.products li.product { background: white !important; overflow: hidden !important; box-shadow: 0 4px 20px rgba(42,31,26,0.07) !important; margin: 0 !important; padding: 0 !important; float: none !important; width: auto !important; }
  .cat-img, .woocommerce ul.products li.product img { height: 150px !important; width: 100% !important; object-fit: cover !important; aspect-ratio: unset !important; }
  .cat-body { padding: 10px 10px 14px !important; }
  .cat-col { font-family: 'Jost', sans-serif !important; font-size: 7px !important; letter-spacing: 3px !important; text-transform: uppercase !important; color: var(--taupe) !important; margin-bottom: 4px !important; }
  .cat-name, .woocommerce ul.products li.product .woocommerce-loop-product__title { font-family: 'Cormorant Garamond', serif !important; font-size: 14px !important; font-weight: 300 !important; color: var(--espresso) !important; margin-bottom: 2px !important; line-height: 1.2 !important; padding: 0 !important; }
  .cat-shade { font-family: 'Cormorant Garamond', serif !important; font-size: 11px !important; font-style: italic !important; color: var(--mink) !important; margin-bottom: 8px !important; }
  .cat-price, .woocommerce ul.products li.product .price, .woocommerce ul.products li.product .price .amount { font-family: 'Cormorant Garamond', serif !important; font-size: 16px !important; font-weight: 400 !important; color: var(--deep) !important; display: block !important; }
  .cat-add, .woocommerce ul.products li.product .add_to_cart_button { background: var(--espresso) !important; color: white !important; font-family: 'Jost', sans-serif !important; font-size: 7px !important; letter-spacing: 2px !important; text-transform: uppercase !important; padding: 7px 10px !important; border: none !important; cursor: pointer !important; display: inline-block !important; margin-top: 6px !important; }
  .swatch-dot { width: 14px !important; height: 14px !important; }

  /* ── SINGLE PRODUCT PAGE ── */
  .single-product-wrap { padding: 0 0 60px !important; }
  .product-page { display: flex !important; flex-direction: column !important; gap: 0 !important; }
  .product-gallery-wrap { height: 320px !important; display: flex !important; align-items: center !important; justify-content: center !important; position: relative !important; }
  .woocommerce-breadcrumb, .product-breadcrumb { font-family: 'Jost', sans-serif !important; font-size: 9px !important; color: var(--taupe) !important; margin-bottom: 16px !important; letter-spacing: 1px !important; padding: 16px 20px 0 !important; }
  .product-summary { padding: 22px 20px !important; }
  .product-title, .woocommerce div.product .product_title { font-family: 'Cormorant Garamond', serif !important; font-size: 34px !important; font-weight: 300 !important; color: var(--espresso) !important; line-height: 1.1 !important; margin-bottom: 6px !important; }
  .product-detail-shade { font-family: 'Cormorant Garamond', serif !important; font-size: 15px !important; font-style: italic !important; color: var(--mink) !important; margin-bottom: 14px !important; }
  .star-rating, .woocommerce .star-rating { color: var(--gold) !important; font-size: 11px !important; width: auto !important; }
  .rating-count { font-family: 'Jost', sans-serif !important; font-size: 10px !important; color: var(--mink) !important; }
  .product-price-display, .woocommerce div.product p.price, .woocommerce div.product p.price .amount, .woocommerce div.product span.price .amount { font-family: 'Cormorant Garamond', serif !important; font-size: 32px !important; font-weight: 400 !important; color: var(--espresso) !important; margin: 16px 0 !important; display: block !important; line-height: 1 !important; }
  .shade-circle { width: 26px !important; height: 26px !important; border-radius: 50% !important; border: 2px solid rgba(0,0,0,0.1) !important; }
  .shade-name { font-family: 'Jost', sans-serif !important; font-size: 11px !important; color: var(--mink) !important; font-weight: 300 !important; }
  .shade-row { display: flex !important; align-items: center !important; gap: 10px !important; margin-bottom: 20px !important; }
  .m-size, .product-size-option, .size-option { padding: 8px 14px !important; border: 1px solid var(--sand) !important; font-family: 'Jost', sans-serif !important; font-size: 10px !important; color: var(--espresso) !important; background: white !important; cursor: pointer !important; }
  .size-option.active { background: var(--espresso) !important; color: white !important; border-color: var(--espresso) !important; }
  .sizes-wrap { display: flex !important; gap: 8px !important; margin-bottom: 22px !important; flex-wrap: wrap !important; }
  .product-atc-wrap .single_add_to_cart_button, .single_add_to_cart_button, .woocommerce div.product form.cart button[type=submit], .btn-atc-full { width: 100% !important; background: var(--espresso) !important; color: white !important; font-family: 'Jost', sans-serif !important; font-size: 10px !important; letter-spacing: 2.5px !important; text-transform: uppercase !important; padding: 15px !important; border: none !important; margin-bottom: 10px !important; cursor: pointer !important; display: block !important; text-align: center !important; }
  .btn-add-wishlist, .btn-outline-full { width: 100% !important; background: transparent !important; color: var(--espresso) !important; border: 1px solid var(--sand) !important; font-family: 'Jost', sans-serif !important; font-size: 10px !important; letter-spacing: 2.5px !important; text-transform: uppercase !important; padding: 15px !important; cursor: pointer !important; display: block !important; text-align: center !important; }
  .product-meta-list { display: flex !important; flex-direction: column !important; gap: 9px !important; margin-top: 18px !important; }
  .product-meta-list li { font-family: 'Jost', sans-serif !important; font-size: 11px !important; color: var(--mink) !important; display: flex !important; gap: 8px !important; list-style: none !important; }
  .product-meta-list li::before { content: '\2736' !important; color: var(--gold) !important; font-size: 9px !important; flex-shrink: 0 !important; }
  .m-divider { height: 1px !important; background: var(--sand) !important; margin: 16px 0 !important; }

  /* ── STORY HERO — espresso pad 50px 22px 40px center ── */
  .story-hero, .story-hero-new { background: var(--espresso) !important; padding: 50px 22px 40px !important; text-align: center !important; position: relative !important; overflow: hidden !important; }
  .story-eyebrow, .story-eyebrow-centered { font-family: 'Jost', sans-serif !important; font-size: 8px !important; letter-spacing: 5px !important; text-transform: uppercase !important; color: var(--gold) !important; margin-bottom: 18px !important; display: flex !important; align-items: center !important; justify-content: center !important; gap: 10px !important; }
  .story-eyebrow::before, .story-eyebrow::after { content: '' !important; display: block !important; width: 20px !important; height: 1px !important; background: var(--gold) !important; flex-shrink: 0 !important; }
  .story-title, .story-hero-title { font-family: 'Cormorant Garamond', serif !important; font-size: 38px !important; font-weight: 300 !important; color: var(--cream) !important; line-height: 1.1 !important; margin-bottom: 18px !important; }
  .story-title em, .story-hero-title em { font-style: italic !important; color: var(--gold-light) !important; }
  .story-hero-subtitle, .story-hero-quote { font-family: 'Cormorant Garamond', serif !important; font-size: 14px !important; font-style: italic !important; color: var(--taupe) !important; line-height: 1.7 !important; }
  .story-body, .story-body-new { padding: 32px 20px !important; }
  .story-heading { font-family: 'Cormorant Garamond', serif !important; font-size: 26px !important; font-weight: 300 !important; color: var(--espresso) !important; margin-bottom: 10px !important; }
  .story-values { padding: 24px 0 0 !important; }
  .story-values-new { padding: 24px 0 0 !important; }

  /* ── VALUES — stacked white cards pad 24px 20px ── */
  .values-grid, .values-grid-new { display: flex !important; flex-direction: column !important; gap: 2px !important; margin-top: 20px !important; }
  .value-card-new, .value-item, .m-value { background: white !important; padding: 24px 20px !important; margin-bottom: 2px !important; text-align: left !important; border: none !important; }
  .value-card-num, .value-item .value-num, .m-value-num { font-family: 'Cormorant Garamond', serif !important; font-size: 42px !important; font-weight: 300 !important; color: rgba(184,152,106,0.2) !important; line-height: 1 !important; margin-bottom: 10px !important; }
  .value-card-name, .value-title, .m-value-name { font-family: 'Cormorant Garamond', serif !important; font-size: 22px !important; color: var(--espresso) !important; margin-bottom: 10px !important; font-weight: 300 !important; }
  .value-card-desc, .value-body, .m-value-desc { font-family: 'Jost', sans-serif !important; font-size: 11px !important; color: var(--mink) !important; line-height: 1.85 !important; font-weight: 300 !important; }
  .value-card-arabic, .m-value-arabic { font-family: serif !important; font-size: 26px !important; color: var(--gold) !important; text-align: right !important; margin-top: 12px !important; opacity: 0.7 !important; }
  .value-icon { display: none !important; }

  /* ── BLOG / JOURNAL ── */
  .blog-hero { padding: 32px 20px 0 !important; background: var(--cream) !important; }
  .blog-hero-left h1 { font-family: 'Cormorant Garamond', serif !important; font-size: 30px !important; font-weight: 300 !important; color: var(--espresso) !important; line-height: 1.3 !important; margin-bottom: 10px !important; }
  .blog-hero-left h1 em { font-style: italic !important; color: var(--gold) !important; }
  .blog-hero-right, .blog-hero-desc { font-family: 'Jost', sans-serif !important; font-size: 11px !important; color: var(--mink) !important; line-height: 1.75 !important; margin-bottom: 20px !important; text-align: left !important; font-weight: 300 !important; }
  .blog-cats { display: flex !important; gap: 6px !important; overflow-x: auto !important; padding-bottom: 16px !important; scrollbar-width: none !important; }
  .blog-cats::-webkit-scrollbar { display: none !important; }
  .blog-cat-btn { font-family: 'Jost', sans-serif !important; font-size: 8px !important; letter-spacing: 1.5px !important; text-transform: uppercase !important; padding: 7px 14px !important; white-space: nowrap !important; background: transparent !important; color: var(--mink) !important; border: 1px solid var(--sand) !important; cursor: pointer !important; }
  .blog-cat-btn.active, .blog-cat-btn:hover { background: var(--espresso) !important; color: white !important; border-color: var(--espresso) !important; }
  .blog-grid, .blog-preview-grid { grid-template-columns: 1fr !important; gap: 16px !important; }
  .blog-grid-section { padding: 20px 20px 60px !important; background: var(--cream) !important; }
  .blog-featured-wrap { padding: 0 20px !important; background: var(--cream) !important; }
  .blog-card { background: white !important; margin-bottom: 16px !important; overflow: hidden !important; }
  .blog-card-img { height: 180px !important; position: relative !important; overflow: hidden !important; }
  .blog-card-cat { position: absolute !important; bottom: 12px !important; left: 12px !important; background: white !important; font-family: 'Jost', sans-serif !important; font-size: 8px !important; letter-spacing: 2px !important; text-transform: uppercase !important; color: var(--espresso) !important; padding: 4px 10px !important; }
  .blog-card-body { padding: 18px 18px 22px !important; }
  .blog-card-title { font-family: 'Cormorant Garamond', serif !important; font-size: 18px !important; color: var(--espresso) !important; line-height: 1.3 !important; margin-bottom: 10px !important; font-weight: 300 !important; }
  .blog-card-excerpt { font-family: 'Jost', sans-serif !important; font-size: 11px !important; color: var(--mink) !important; line-height: 1.75 !important; margin-bottom: 14px !important; font-weight: 300 !important; }
  .blog-card-footer { display: flex !important; justify-content: space-between !important; border-top: 1px solid var(--sand) !important; padding-top: 12px !important; }
  .blog-card-date { font-family: 'Jost', sans-serif !important; font-size: 10px !important; color: var(--taupe) !important; }
  .blog-card-link { font-family: 'Jost', sans-serif !important; font-size: 10px !important; color: var(--gold) !important; letter-spacing: 1.5px !important; text-transform: uppercase !important; text-decoration: none !important; }
  .blog-feat-title { font-family: 'Cormorant Garamond', serif !important; font-size: 19px !important; color: var(--espresso) !important; line-height: 1.25 !important; margin-bottom: 12px !important; font-weight: 300 !important; }
  .blog-feat-excerpt { font-family: 'Jost', sans-serif !important; font-size: 10px !important; color: var(--mink) !important; line-height: 1.75 !important; margin-bottom: 16px !important; font-weight: 300 !important; }
  .blog-feat-read { font-family: 'Jost', sans-serif !important; font-size: 10px !important; letter-spacing: 2px !important; text-transform: uppercase !important; color: var(--espresso) !important; text-decoration: none !important; border-bottom: 1px solid var(--espresso) !important; padding-bottom: 2px !important; }

  /* ── STYLING GUIDE — espresso bg, stacked style cards 300px ── */
  .styling-section, .sg-page { background: var(--espresso) !important; padding: 0 !important; }
  .sg-hero { padding: 32px 20px 28px !important; text-align: center !important; }
  .sg-overline { font-family: 'Jost', sans-serif !important; font-size: 8px !important; letter-spacing: 4px !important; text-transform: uppercase !important; color: var(--gold) !important; margin-bottom: 16px !important; display: block !important; text-align: center !important; }
  .sg-h1 { font-family: 'Cormorant Garamond', serif !important; font-size: 32px !important; font-weight: 300 !important; color: var(--cream) !important; line-height: 1.1 !important; margin-bottom: 10px !important; text-align: center !important; }
  .sg-h1 em { font-style: italic !important; color: var(--gold-light) !important; }
  .sg-sub { font-family: 'Jost', sans-serif !important; font-size: 11px !important; font-weight: 300 !important; color: var(--taupe) !important; line-height: 1.85 !important; text-align: center !important; margin-top: 10px !important; }
  .sg-cards-wrap { padding: 0 !important; }
  .sg-cards-grid { grid-template-columns: 1fr !important; gap: 0 !important; }
  .sg-card, .m-style-card { height: 300px !important; position: relative !important; overflow: hidden !important; margin-bottom: 2px !important; }
  .sg-card-content, .m-style-content { position: absolute !important; bottom: 0 !important; left: 0 !important; right: 0 !important; padding: 22px !important; z-index: 2 !important; }
  .sg-card-num, .m-style-look { font-family: 'Jost', sans-serif !important; font-size: 8px !important; letter-spacing: 4px !important; text-transform: uppercase !important; color: var(--gold) !important; margin-bottom: 8px !important; }
  .sg-card-title, .m-style-name { font-family: 'Cormorant Garamond', serif !important; font-size: 24px !important; color: white !important; line-height: 1.2 !important; margin-bottom: 6px !important; font-weight: 300 !important; }
  .sg-card-exc, .m-style-desc { font-family: 'Jost', sans-serif !important; font-size: 11px !important; font-weight: 300 !important; color: rgba(255,255,255,0.55) !important; line-height: 1.6 !important; }
  .sg-steps-wrap { padding: 32px 20px !important; }
  .sg-steps-grid { grid-template-columns: 1fr !important; gap: 0 !important; }
  .sg-step { padding: 0 !important; margin-bottom: 22px !important; }
  .sg-step-n { font-family: 'Cormorant Garamond', serif !important; font-size: 42px !important; color: rgba(184,152,106,0.18) !important; line-height: 1 !important; margin-bottom: 8px !important; }
  .sg-step-h { font-family: 'Cormorant Garamond', serif !important; font-size: 18px !important; color: var(--cream) !important; margin-bottom: 6px !important; font-weight: 300 !important; }
  .sg-step-p { font-family: 'Jost', sans-serif !important; font-size: 11px !important; font-weight: 300 !important; color: var(--taupe) !important; line-height: 1.8 !important; }

  /* ── NEWSLETTER — sand bg, pad 32px 20px, center ── */
  .newsletter { padding: 32px 20px !important; background: var(--sand) !important; text-align: center !important; }
  .newsletter h2 { font-family: 'Cormorant Garamond', serif !important; font-size: 26px !important; font-weight: 300 !important; color: var(--espresso) !important; margin-bottom: 10px !important; line-height: 1.2 !important; }
  .newsletter h2 em { font-style: italic !important; color: var(--gold) !important; }
  .newsletter p { font-family: 'Jost', sans-serif !important; font-size: 11px !important; color: var(--mink) !important; margin-bottom: 22px !important; line-height: 1.8 !important; font-weight: 300 !important; }
  .newsletter-form { display: flex !important; border: 1px solid var(--taupe) !important; overflow: hidden !important; flex-direction: row !important; max-width: 100% !important; gap: 0 !important; }
  .newsletter-input { flex: 1 !important; background: white !important; border: none !important; padding: 12px 14px !important; font-family: 'Jost', sans-serif !important; font-size: 12px !important; color: var(--espresso) !important; outline: none !important; width: auto !important; box-sizing: border-box !important; }
  .newsletter-btn { background: var(--espresso) !important; color: white !important; border: none !important; padding: 12px 16px !important; font-family: 'Jost', sans-serif !important; font-size: 9px !important; letter-spacing: 2px !important; text-transform: uppercase !important; width: auto !important; cursor: pointer !important; flex-shrink: 0 !important; }

  /* ── FOOTER — espresso pad 50px 20px 30px ── */
  .site-footer { background: var(--espresso) !important; padding: 50px 20px 30px !important; }
  .footer-top { grid-template-columns: 1fr !important; text-align: left !important; gap: 32px !important; }
  .footer-col-title { font-family: 'Jost', sans-serif !important; font-size: 10px !important; font-weight: 500 !important; letter-spacing: 3px !important; text-transform: uppercase !important; color: var(--cream) !important; margin-bottom: 18px !important; }
  .footer-links a, .footer-col ul a, .footer-col .menu a { font-family: 'Jost', sans-serif !important; font-size: 13px !important; font-weight: 300 !important; color: var(--taupe) !important; }
  .footer-tagline { font-family: 'Cormorant Garamond', serif !important; font-size: 14px !important; font-style: italic !important; color: var(--taupe) !important; line-height: 1.75 !important; }
  .footer-copy { font-family: 'Jost', sans-serif !important; font-size: 11px !important; color: rgba(155,139,126,0.5) !important; }
  .footer-bottom { flex-direction: column !important; gap: 16px !important; text-align: center !important; }
  .footer-social { justify-content: flex-start !important; }
  .footer-policy-links { justify-content: center !important; flex-wrap: wrap !important; gap: 14px !important; }
  .footer-policy-links a { font-family: 'Jost', sans-serif !important; font-size: 11px !important; color: rgba(155,139,126,0.5) !important; }

  /* ── CART — pad 32px 20px ── */
  .basket-main { padding: 32px 20px !important; }
  .basket-summary { padding: 24px 20px !important; }
  .basket-page-title { font-family: 'Cormorant Garamond', serif !important; font-size: 36px !important; font-weight: 300 !important; color: var(--espresso) !important; margin-bottom: 6px !important; }
  .basket-count { font-family: 'Jost', sans-serif !important; font-size: 11px !important; letter-spacing: 2.5px !important; text-transform: uppercase !important; color: var(--mink) !important; }
  .basket-item { grid-template-columns: 90px 1fr !important; }
  .basket-item-name { font-family: 'Cormorant Garamond', serif !important; font-size: 20px !important; font-weight: 300 !important; color: var(--espresso) !important; }
  .basket-item-shade { font-family: 'Cormorant Garamond', serif !important; font-size: 13px !important; font-style: italic !important; color: var(--mink) !important; }
  .basket-item-price { font-family: 'Cormorant Garamond', serif !important; font-size: 22px !important; font-weight: 400 !important; color: var(--espresso) !important; grid-column: 1 / -1 !important; }
  .summary-title { font-family: 'Cormorant Garamond', serif !important; font-size: 28px !important; font-weight: 300 !important; color: var(--espresso) !important; }
  .summary-total { font-family: 'Cormorant Garamond', serif !important; font-size: 28px !important; }

  /* ── CONTACT ── */
  .contact-hero, .contact-body { padding: 50px 22px !important; }
  .contact-title { font-family: 'Cormorant Garamond', serif !important; font-size: 40px !important; font-weight: 300 !important; color: var(--cream) !important; line-height: 1.08 !important; }
  .contact-subtitle { font-family: 'Jost', sans-serif !important; font-size: 11px !important; font-weight: 300 !important; color: var(--taupe) !important; line-height: 1.85 !important; }
  .channel-value { font-family: 'Cormorant Garamond', serif !important; font-size: 17px !important; font-weight: 300 !important; color: var(--cream) !important; }
  .channel-label { font-family: 'Jost', sans-serif !important; font-size: 9px !important; letter-spacing: 3px !important; text-transform: uppercase !important; color: var(--gold) !important; }
  .cf-title { font-family: 'Cormorant Garamond', serif !important; font-size: 28px !important; font-weight: 300 !important; color: var(--espresso) !important; }
  .cf-label { font-family: 'Jost', sans-serif !important; font-size: 10px !important; letter-spacing: 3px !important; text-transform: uppercase !important; color: var(--espresso) !important; }
  .cf-input, .cf-textarea { font-family: 'Jost', sans-serif !important; font-size: 13px !important; color: var(--espresso) !important; }

  /* ── FAQ ── */
  .faq-hero { padding: 60px 22px !important; }
  .faq-hero-title { font-family: 'Cormorant Garamond', serif !important; font-size: 44px !important; font-weight: 300 !important; color: var(--cream) !important; line-height: 1.08 !important; }
  .faq-hero-sub { font-family: 'Jost', sans-serif !important; font-size: 11px !important; color: var(--taupe) !important; line-height: 1.85 !important; }
  .faq-body { padding: 40px 20px !important; gap: 24px !important; }
  .faq-cat-title, .faq-section-title { font-family: 'Cormorant Garamond', serif !important; font-size: 26px !important; font-weight: 300 !important; color: var(--espresso) !important; }
  .faq-q { font-family: 'Jost', sans-serif !important; font-size: 13px !important; font-weight: 400 !important; color: var(--espresso) !important; padding: 18px 0 !important; }
  .faq-a { font-family: 'Jost', sans-serif !important; font-size: 12px !important; font-weight: 300 !important; color: var(--mink) !important; line-height: 1.9 !important; }
  .faq-cat-item { font-family: 'Jost', sans-serif !important; font-size: 10px !important; letter-spacing: 2px !important; text-transform: uppercase !important; color: var(--mink) !important; padding: 8px 14px !important; }

  /* ── WISHLIST ── */
  .wish-hero { padding: 40px 20px 30px !important; flex-direction: column !important; align-items: flex-start !important; gap: 8px !important; }
  .wish-grid-wrap { padding: 20px 14px 60px !important; }
  .wish-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; }
  .wish-title { font-family: 'Cormorant Garamond', serif !important; font-size: 40px !important; font-weight: 300 !important; color: var(--espresso) !important; }
  .wish-name { font-family: 'Cormorant Garamond', serif !important; font-size: 17px !important; font-weight: 300 !important; color: var(--espresso) !important; }
  .wish-price { font-family: 'Cormorant Garamond', serif !important; font-size: 17px !important; font-weight: 400 !important; color: var(--deep) !important; }
  .wish-add { font-family: 'Jost', sans-serif !important; font-size: 9px !important; letter-spacing: 3px !important; text-transform: uppercase !important; padding: 10px !important; }

  /* ── PHILOSOPHY ── */
  .philosophy-section .philosophy, .philosophy { background: var(--warm-white) !important; padding: 32px 20px !important; grid-template-columns: 1fr !important; gap: 24px !important; }
  .philosophy-right { border-left: 2px solid var(--gold) !important; padding-left: 20px !important; border-top: none !important; padding-top: 0 !important; }

  /* ── RELATED PRODUCTS ── */
  .product-related-wrap ul.products, .related.products ul.products, .woocommerce .related ul.products { grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; }
  .product-related-wrap h2, .related.products h2 { font-family: 'Cormorant Garamond', serif !important; font-size: 26px !important; font-weight: 300 !important; color: var(--espresso) !important; margin-bottom: 20px !important; }

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

  /* ── SINGLE BLOG POST ── */
  .single-post-hero { padding: 50px 22px !important; background: var(--espresso) !important; }
  .single-post-hero h1 { font-family: 'Cormorant Garamond', serif !important; font-size: 32px !important; font-weight: 300 !important; color: var(--cream) !important; line-height: 1.1 !important; }
  .single-post-content { padding: 32px 20px !important; }
  .single-post-content p { font-family: 'Jost', sans-serif !important; font-size: 13px !important; font-weight: 300 !important; line-height: 1.9 !important; color: var(--mink) !important; }

  /* ── 404 ── */
  .nf-title { font-family: 'Cormorant Garamond', serif !important; font-size: 52px !important; font-weight: 300 !important; color: var(--cream) !important; }
  .nf-sub { font-family: 'Jost', sans-serif !important; font-size: 13px !important; color: var(--taupe) !important; line-height: 1.85 !important; }

  /* ── PAGE CONTENT ── */
  .page-title { font-family: 'Cormorant Garamond', serif !important; font-size: 32px !important; font-weight: 300 !important; color: var(--espresso) !important; padding-bottom: 18px !important; }
  .page-content h2, .entry-content h2 { font-size: 24px !important; }
  .page-content h3, .entry-content h3 { font-size: 18px !important; }
  .page-content p, .entry-content p { font-family: 'Jost', sans-serif !important; font-size: 13px !important; font-weight: 300 !important; color: var(--mink) !important; line-height: 1.9 !important; }

  /* ── SEPARATOR UTILITIES ── */
  .m-sep { height: 3px !important; background: linear-gradient(to right, var(--gold), var(--taupe), var(--gold)) !important; }
  .m-divider { height: 1px !important; background: var(--sand) !important; margin: 16px 0 !important; }

  /* ── WOOCOMMERCE ── */
  .woocommerce nav.woocommerce-pagination ul li a, .woocommerce nav.woocommerce-pagination ul li span { font-family: 'Jost', sans-serif !important; font-size: 11px !important; padding: 8px 12px !important; min-width: 36px !important; }

} /* end 768px */

/* ================================================================
   <= 480px SMALL MOBILE
   ================================================================ */
@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-body, .product-info { padding: 8px 8px 10px !important; }
  .cat-name, .product-name { font-size: 13px !important; }
  .cat-price, .product-price { font-size: 13px !important; }
  .cat-shade, .product-shade { font-size: 10px !important; }
  .product-img { height: 140px !important; }
  .cat-img, .woocommerce ul.products li.product img { height: 140px !important; }
  .cat-grid-wrap { padding: 10px 10px 50px !important; }
  .hero-title { font-size: 34px !important; }
  .newsletter { padding: 32px 16px !important; }
  .newsletter h2 { font-size: 22px !important; }
  .section-title, h2.section-title { font-size: 24px !important; }
  .story-title, .story-hero-title { font-size: 32px !important; }
  .sg-h1 { font-size: 28px !important; }
  .faq-hero-title { font-size: 36px !important; }
  .cat-title { font-size: 30px !important; }
  .container { padding: 0 16px !important; }
}