/* ═══════════════════════════════════════════════════════════════════
   CRAFTS LUXE THEME  v1.0
   ───────────────────────────────────────────────────────────────────
   Design language: premium editorial
   · Warm stone-charcoal (#1c1917) as primary — replaces blue
   · Rich old-gold (#ca8a04) as accent — replaces orange
   · Warm ivory (#fffbf5) page background
   · Cormorant Garamond (serif italic) for headings — editorial weight
   · Outfit (geometric sans) for body — clean and modern
   · Architectural corners — radius 2–6 px instead of 6–20 px
   · Soft natural shadows — no blue tint
   Inspired by: Restoration Hardware, B&B Italia, Arhaus
═══════════════════════════════════════════════════════════════════ */

/* ── Google Fonts ─────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,600;0,700;1,400;1,600;1,700&family=Outfit:wght@300;400;500;600;700;800;900&display=swap');

/* ── Design tokens ────────────────────────────────────────────── */
:root {
    /* Palette */
    --blue:       #1c1917;   /* warm near-black (stone-900) */
    --blue-dk:    #0c0a09;   /* deepest stone */
    --orange:     #ca8a04;   /* old gold (yellow-600) */
    --orange-dk:  #a87000;   /* dark gold hover */
    --dark:       #0c0a09;   /* headings */
    --ink:        #1c1917;   /* primary text */
    --body:       #44403c;   /* secondary text (stone-600) */
    --muted:      #78716c;   /* labels (stone-500) */
    --faint:      #a8a29e;   /* placeholders (stone-400) */
    --green:      #166534;   /* success */
    --red:        #b91c1c;   /* error */

    /* Surfaces */
    --bg:         #fffbf5;   /* warm ivory */
    --card:       #ffffff;   /* white */
    --border:     #e7e5e4;   /* stone-200 */
    --border-lt:  #f5f5f4;   /* stone-100 */

    /* Shape — architectural, not pill */
    --radius-sm:  2px;
    --radius:     4px;
    --radius-lg:  6px;

    /* Shadows — warm-toned, natural depth */
    --shadow-sm:  0 1px 3px rgba(28,25,23,.06), 0 1px 2px rgba(28,25,23,.04);
    --shadow:     0 4px 20px rgba(28,25,23,.08), 0 1px 4px rgba(28,25,23,.04);
    --shadow-lg:  0 16px 52px rgba(28,25,23,.12), 0 4px 12px rgba(28,25,23,.06);

    --transition: .22s cubic-bezier(.4,0,.2,1);
}

/* ── Base typography ──────────────────────────────────────────── */
body {
    font-family: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-weight: 400;
    letter-spacing: .01em;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ── Serif for editorial headings ─────────────────────────────── */
.hero-title,
.sec-title,
.promo-tile-title,
.offer-card-left h3,
.split-right h3,
.team-content h3,
.testi-quote,
.insta-head h2,
.footer-brand .footer-logo {
    font-family: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
}

/* ══════════════════════════════════════════════════════════════
   HEADER
══════════════════════════════════════════════════════════════ */
.logo {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-style: italic;
    font-weight: 700;
    letter-spacing: .04em;
    font-size: 30px;
}
.logo:hover { color: var(--orange); }
.logo-dot { background: var(--orange); width: 6px; height: 6px; }

/* Search bar — straight edges */
.search-shell {
    border-radius: 2px;
    background: #faf9f8;
}
.search-btn { border-radius: 1px; margin: 3px; }
.cat-btn { color: var(--muted); font-weight: 600; }

/* Header action icons — square */
.hdr-icon { border-radius: 3px; }

/* Microbar — tighter tracking */
.microbar { letter-spacing: .05em; font-size: 11.5px; }

/* ══════════════════════════════════════════════════════════════
   NAVIGATION
══════════════════════════════════════════════════════════════ */
.nav-inner a {
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: .16em;
    font-weight: 700;
    padding: 14px 16px;
}
.nav-inner a.active  { color: var(--orange); border-bottom-color: var(--orange); }
.nav-inner a:hover   { color: var(--orange); }
.nav-inner .nav-sale { color: var(--red) !important; }

/* ══════════════════════════════════════════════════════════════
   CATEGORY STRIP (quick cats)
══════════════════════════════════════════════════════════════ */
.cat-circle {
    border-radius: 3px;           /* square category circles */
    width: 60px; height: 60px;
    border-color: var(--border);
    background: linear-gradient(145deg, #f5f4f0, #ede9e3);
}
.cat-pill:hover .cat-circle {
    border-color: var(--orange);
    box-shadow: 0 4px 14px rgba(202,138,4,.2);
    background: linear-gradient(145deg, #fef3c7, #fde68a);
}
.cat-pill { font-size: 11px; letter-spacing: .03em; }

/* ══════════════════════════════════════════════════════════════
   HERO BANNER
══════════════════════════════════════════════════════════════ */
.hero { border-radius: var(--radius-lg); }

/* Kicker — gold underline, tight tracking */
.hero-kicker {
    font-size: 10px;
    letter-spacing: .26em;
    text-transform: uppercase;
}
.hero-kicker::before { background: var(--orange); width: 24px; height: 1.5px; }

/* Headline — large italic serif */
.hero-title {
    font-size: 64px;
    font-style: italic;
    font-weight: 700;
    letter-spacing: -.5px;
    line-height: .93;
}
.hero-title span { color: var(--orange); }

/* Sub text */
.hero-sub { font-size: 15px; letter-spacing: .01em; }

/* CTA — rectangular, uppercase */
.hero-cta {
    background: var(--orange);
    border-radius: 2px;
    text-transform: uppercase;
    letter-spacing: .14em;
    font-size: 12px;
    font-weight: 800;
    padding: 16px 40px;
    color: #fff;
}
.hero-cta:hover {
    background: var(--orange-dk);
    box-shadow: 0 12px 32px rgba(202,138,4,.38);
    transform: translateY(-2px);
}

/* Dots — gold active */
.hero-dot { border-color: rgba(255,255,255,.35); }
.hero-dot.active { background: var(--orange); border-color: var(--orange); }

/* Stats */
.hero-stat-num { font-family: 'Cormorant Garamond', serif; font-size: 30px; }

/* ══════════════════════════════════════════════════════════════
   FLASH SALE
══════════════════════════════════════════════════════════════ */
.flash-inner {
    background: linear-gradient(135deg, #0c0a09 0%, #1c1917 60%, #292524 100%);
    border-radius: var(--radius-lg);
}
.flash-badge {
    background: var(--orange);
    color: #0c0a09;
    border-radius: 2px;
    font-weight: 900;
    letter-spacing: .08em;
}
.flash-clock { letter-spacing: 4px; font-family: 'Cormorant Garamond', serif; font-size: 48px; }
.flash-code-btn { background: var(--orange); color: #0c0a09; border-radius: 2px; font-weight: 900; }
.flash-code-btn:hover { background: var(--orange-dk); }

/* ══════════════════════════════════════════════════════════════
   SECTION HEADINGS
══════════════════════════════════════════════════════════════ */
.sec-title {
    font-size: 40px;
    font-style: italic;
    font-weight: 700;
    letter-spacing: -.2px;
}
.sec-sub { font-size: 14px; letter-spacing: .02em; }
.see-all {
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: .14em;
    color: var(--orange);
}
.see-all:hover { color: var(--orange-dk); }

/* ══════════════════════════════════════════════════════════════
   PRODUCT CARDS
══════════════════════════════════════════════════════════════ */
.prod-card {
    border-radius: var(--radius);
    border-color: var(--border);
}
.prod-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 44px rgba(28,25,23,.11);
}
.prod-img-wrap { border-radius: 0; background: linear-gradient(145deg,#f9f8f6,#f0ede8); }
.prod-name { font-family: 'Outfit', sans-serif; font-weight: 600; }
.prod-price { font-family: 'Cormorant Garamond', serif; font-size: 20px; font-weight: 700; }
.prod-off { color: var(--orange); }

/* Badges — sharp corners */
.badge-sale { border-radius: 1px; background: #1c1917; }
.badge-new  { border-radius: 1px; }
.badge-off  { border-radius: 1px; }
.rating-pill { border-radius: 2px; background: var(--orange); }

/* Buttons */
.btn-cart {
    background: var(--dark);
    border-radius: 2px;
    text-transform: uppercase;
    font-size: 10.5px;
    letter-spacing: .09em;
    font-weight: 800;
}
.btn-cart:hover { background: var(--orange); }
.btn-view {
    border-radius: 2px;
    text-transform: uppercase;
    font-size: 10.5px;
    letter-spacing: .07em;
    font-weight: 700;
    border-color: var(--border);
}
.btn-view:hover { border-color: var(--orange); color: var(--orange); }

/* ══════════════════════════════════════════════════════════════
   PROMO TILE (New Arrivals sidebar)
══════════════════════════════════════════════════════════════ */
.promo-tile {
    background: linear-gradient(155deg, #1c1917 0%, #0c0a09 100%);
    border-radius: var(--radius-lg);
}
.promo-tile::before { background: rgba(202,138,4,.1); }
.promo-tile::after  { background: rgba(255,255,255,.04); }
.promo-tile-tag { color: var(--orange); letter-spacing: .2em; font-size: 9.5px; }
.promo-tile-title { font-style: italic; letter-spacing: -.5px; }
.promo-btn {
    background: var(--orange) !important;
    color: #0c0a09 !important;
    border-radius: 2px;
    text-transform: uppercase;
    letter-spacing: .12em;
    font-size: 11px;
    font-weight: 900;
}
.promo-btn:hover { background: var(--orange-dk) !important; transform: translateY(-1px); }

/* Arrivals tabs */
.arrivals-tab {
    border-radius: 2px;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .1em;
    font-weight: 700;
}
.arrivals-tab.active { background: var(--dark); border-color: var(--dark); }

/* ══════════════════════════════════════════════════════════════
   CATEGORY GRID
══════════════════════════════════════════════════════════════ */
.cat-grid { border-radius: var(--radius); }
.cat-grid-item { font-size: 11.5px; font-weight: 700; letter-spacing: .03em; }
.cat-grid-item:hover { background: #fef9ec; color: var(--orange); }
.cat-grid-circle {
    border-radius: 3px;
    background: linear-gradient(145deg, #f5f4f0, #ede9e3);
    border-color: var(--border);
}
.cat-grid-item:hover .cat-grid-circle {
    background: linear-gradient(145deg, #fef3c7, #fde68a);
    box-shadow: 0 6px 18px rgba(202,138,4,.22);
    border-color: var(--orange);
}

/* ══════════════════════════════════════════════════════════════
   OFFER BANNERS
══════════════════════════════════════════════════════════════ */
.offer-card { border-radius: var(--radius-lg); }
.offer-card-left h3 { font-size: 42px; font-style: italic; letter-spacing: -.3px; }
.offer-save-tag { font-family: 'Cormorant Garamond', serif; font-style: italic; }

/* ══════════════════════════════════════════════════════════════
   FILTER CHIPS
══════════════════════════════════════════════════════════════ */
.chip {
    border-radius: 2px;
    font-size: 11px;
    letter-spacing: .08em;
    text-transform: uppercase;
    font-weight: 700;
    border-color: var(--border);
}
.chip:hover {
    background: var(--dark);
    border-color: var(--dark);
    box-shadow: 0 4px 14px rgba(28,25,23,.18);
}

/* ══════════════════════════════════════════════════════════════
   SPLIT FEATURE
══════════════════════════════════════════════════════════════ */
.split-feature { border-radius: var(--radius-lg); }
.split-right .eyebrow {
    color: var(--orange);
    text-transform: uppercase;
    letter-spacing: .2em;
    font-size: 10.5px;
}
.split-right h3 {
    font-size: 44px;
    font-style: italic;
    letter-spacing: -.3px;
}
.split-right p { letter-spacing: .015em; line-height: 1.8; }

/* ══════════════════════════════════════════════════════════════
   TICKER
══════════════════════════════════════════════════════════════ */
.ticker-wrap {
    border-top: 2px solid var(--orange);
    border-bottom: 2px solid var(--orange);
    background: #0c0a09;
}
.ticker-track { color: rgba(255,255,255,.07); font-family: 'Cormorant Garamond', serif; font-style: italic; }
.ticker-track span { color: rgba(255,255,255,.9); }

/* ══════════════════════════════════════════════════════════════
   GALLERY / STORIES
══════════════════════════════════════════════════════════════ */
.g-card { border-radius: var(--radius); }
.g-card-label { font-family: 'Outfit', sans-serif; letter-spacing: .02em; }

/* ══════════════════════════════════════════════════════════════
   INSTAGRAM SECTION
══════════════════════════════════════════════════════════════ */
.insta-section { background: linear-gradient(135deg, #0c0a09 0%, #1c1917 50%, #292524 100%); }
.insta-head h2 { font-style: italic; font-size: 44px; }
.insta-card { border-radius: var(--radius); }

/* ══════════════════════════════════════════════════════════════
   FEATURED COLLECTION
══════════════════════════════════════════════════════════════ */
.fc-wrap { border-radius: var(--radius-lg); }
.fc-eyebrow {
    color: var(--orange);
    text-transform: uppercase;
    letter-spacing: .2em;
    font-size: 10.5px;
}
.fc-tab {
    font-family: 'Cormorant Garamond', serif;
    font-size: 20px;
    font-style: italic;
    font-weight: 600;
}
.fc-tab.active { color: var(--dark); }
.fc-tab.active::before { color: var(--orange); }
.fc-thumb { border-radius: 2px; }
.fc-thumb.active { border-color: var(--orange); box-shadow: 0 0 0 2px var(--orange); }

/* ══════════════════════════════════════════════════════════════
   OUR TEAM
══════════════════════════════════════════════════════════════ */
.team-content { border-radius: var(--radius-lg); }
.team-eyebrow {
    color: var(--orange);
    text-transform: uppercase;
    letter-spacing: .2em;
    font-size: 10.5px;
}
.team-content h3 {
    font-size: 44px;
    font-style: italic;
    font-weight: 700;
    letter-spacing: -.3px;
}
.team-content p { letter-spacing: .01em; line-height: 1.85; }
.team-bullets li::before { background: var(--orange); border-radius: 0; width: 6px; height: 6px; }
.team-bullets li { font-size: 13.5px; letter-spacing: .02em; }
.btn-contact {
    background: var(--dark);
    border-radius: 2px;
    text-transform: uppercase;
    letter-spacing: .14em;
    font-size: 11.5px;
    font-weight: 800;
}
.btn-contact:hover { background: var(--orange); transform: translateY(-2px); }

/* ══════════════════════════════════════════════════════════════
   TESTIMONIAL
══════════════════════════════════════════════════════════════ */
.testi-wrap {
    background: linear-gradient(135deg, #fef9ec 0%, #fef3c7 50%, #fde68a22 100%);
    border-radius: var(--radius-lg);
}
.testi-wrap::before { color: rgba(202,138,4,.12); font-size: 220px; }
.testi-eyebrow {
    color: var(--orange);
    letter-spacing: .22em;
    text-transform: uppercase;
    font-size: 10px;
}
.testi-stars { color: var(--orange); font-size: 20px; letter-spacing: 4px; }
.testi-quote {
    font-size: 28px;
    font-style: italic;
    font-weight: 700;
    color: var(--dark);
    letter-spacing: -.2px;
    line-height: 1.38;
}
.testi-author-name { font-family: 'Outfit', sans-serif; font-weight: 700; color: var(--dark); }
.testi-author-loc  { color: var(--muted); }

/* ══════════════════════════════════════════════════════════════
   FOOTER
══════════════════════════════════════════════════════════════ */
.site-footer { background: #0c0a09; }
.footer-top-strip { background: #080604; border-bottom-color: rgba(255,255,255,.04); }
.svc-icon-wrap { background: rgba(202,138,4,.12); }

/* Brand logo in footer — serif italic */
.footer-brand .footer-logo {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-style: italic;
    font-size: 32px;
    font-weight: 700;
    letter-spacing: .04em;
}
.footer-brand .footer-logo span { color: var(--orange); }
.footer-brand p { line-height: 1.8; }

/* Newsletter */
.newsletter-form input:focus { border-color: var(--orange); }
.newsletter-form button { background: var(--orange); color: #0c0a09; font-weight: 900; border-radius: 2px; }
.newsletter-form button:hover { background: var(--orange-dk); }

/* Footer columns */
.footer-col a:hover { color: var(--orange); }

/* Footer bottom */
.footer-bottom { border-top-color: rgba(255,255,255,.05); }

/* ══════════════════════════════════════════════════════════════
   DRAWER (mobile nav)
══════════════════════════════════════════════════════════════ */
.drawer-head .logo { font-size: 24px; }
.drawer nav a { font-size: 14px; letter-spacing: .03em; }
.drawer nav a:hover { background: #fef9ec; color: var(--orange); }
.drawer-footer a:hover { background: #fef3c7; color: #a87000; }

/* ══════════════════════════════════════════════════════════════
   CONTACT PAGE
══════════════════════════════════════════════════════════════ */
.page-hero h1 {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-style: italic;
    font-size: 52px;
}
.page-hero {
    background: linear-gradient(135deg, #0c0a09 0%, #1c1917 50%, #292524 100%);
}
.page-hero::before { background: rgba(202,138,4,.06); }
.info-icon.orange { background: #fef9ec; }
.info-icon.blue   { background: #fef9ec; }
.info-icon.green  { background: #f0fdf4; }
.btn-submit {
    background: var(--dark);
    border-radius: 2px;
    text-transform: uppercase;
    letter-spacing: .13em;
    font-size: 12.5px;
    font-weight: 800;
}
.btn-submit:hover { background: var(--orange); transform: translateY(-1px); }
.field-group input:focus,
.field-group select:focus,
.field-group textarea:focus { border-color: var(--orange); box-shadow: 0 0 0 3px rgba(202,138,4,.12); }

/* ══════════════════════════════════════════════════════════════
   MISCELLANEOUS
══════════════════════════════════════════════════════════════ */
/* Special rail sidebar */
.special-rail { background: linear-gradient(180deg, var(--orange), var(--orange-dk)); color: #0c0a09; }

/* Scroll reveal — same timing */
.reveal { transition: opacity .7s ease, transform .7s ease; }

/* Selection highlight */
::selection { background: rgba(202,138,4,.18); color: var(--dark); }

/* Focus ring */
:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }