/* =========================================================
   VELA — Curated Living | Storefront Brand Overlay
   High-end home-lifestyle: warm gold / ivory / serif
   Loaded via <link> AFTER the bundled theme CSS.
   ========================================================= */

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

:root {
    --vela-gold:        #a8843a;
    --vela-gold-deep:   #7c6126;
    --vela-gold-soft:   #c9ab6a;
    --vela-ink:         #221c13;
    --vela-sand:        #f4efe4;
    --vela-cream:       #fcf9f2;
    --vela-stone:       #8f897b;
    --vela-line:        #e7dfca;
    --vela-white:       #ffffff;
}

html { scroll-behavior: smooth; }

body {
    background-color: var(--vela-cream);
    color: var(--vela-ink);
    font-family: 'Jost', 'Avenir Next', 'Segoe UI', Helvetica, Arial, sans-serif;
    letter-spacing: .01em;
    -webkit-font-smoothing: antialiased;
}

/* ---- Serif display headings ---- */
h1, h2, h3, h4, h5, h6,
.font-dmserif,
[class*="font-dmserif"] {
    font-family: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
    letter-spacing: .01em;
    color: var(--vela-ink);
}

/* =========================================================
   PRIMARY PALETTE: navyBlue (deep blue) -> VELA warm gold
   ========================================================= */
.bg-navyBlue,
.hover\:bg-navyBlue:hover,
.group:hover .group-hover\:bg-navyBlue {
    background-color: var(--vela-gold) !important;
}
.text-navyBlue,
.hover\:text-navyBlue:hover,
.group:hover .group-hover\:text-navyBlue {
    color: var(--vela-gold-deep) !important;
}
.border-navyBlue,
.hover\:border-navyBlue:hover,
.group:hover .group-hover\:border-navyBlue {
    border-color: var(--vela-gold) !important;
}
/* any inline element carrying the brand-navy color variable */
.refuse-navy { }

/* =========================================================
   PAGE SURFACE
   ========================================================= */
#main,
main#main,
main.bg-white,
body > div,
main > .m-0.mx-auto {
    background-color: transparent;
}
#main, main#main {
    background-color: var(--vela-cream) !important;
}

/* Sections that use white fill -> subtle ivory */
section.bg-white,
div.bg-white {
    background-color: var(--vela-cream) !important;
}

/* =========================================================
   HEADER / NAVIGATION
   ========================================================= */
header,
header.bg-white {
    background-color: var(--vela-sand) !important;
    border-bottom: 1px solid var(--vela-line);
    box-shadow: 0 1px 0 rgba(168,132,58,.10);
}
header .bg-white {
    background-color: transparent !important;
}
header a, header button, header span, header p {
    color: var(--vela-ink);
}
header nav > div a[class*="border-b-4"] {
    border-bottom-color: transparent;
}
header nav a:hover {
    color: var(--vela-gold-deep) !important;
}
header .hover\:border-navyBlue:hover,
header .hover\:border-navyBlue:hover {
    border-bottom-color: var(--vela-gold) !important;
}

/* =========================================================
   BUTTONS
   ========================================================= */
.primary-btn,
button[type="submit"].primary-btn,
a.bg-navyBlue,
button.bg-navyBlue,
[class*="bg-navyBlue"].cursor-pointer {
    background-color: var(--vela-gold) !important;
    border-color: var(--vela-gold) !important;
    color: #fff !important;
    font-family: 'Cormorant Garamond', Georgia, serif;
    letter-spacing: .08em;
    text-transform: uppercase;
    font-weight: 600;
}
button.bg-navyBlue:hover,
a.bg-navyBlue:hover,
.primary-btn:hover {
    background-color: var(--vela-gold-deep) !important;
    border-color: var(--vela-gold-deep) !important;
}

/* Secondary / outline button (border-navyBlue + white) */
[class*="border-navyBlue"].bg-white,
a.border-navyBlue {
    border-color: var(--vela-gold) !important;
    color: var(--vela-gold-deep) !important;
    background-color: transparent !important;
}
[class*="border-navyBlue"].bg-white:hover {
    background-color: var(--vela-gold) !important;
    color: #fff !important;
}

/* =========================================================
   PRODUCT CARDS & BORDERS
   ========================================================= */
[class*="border-black"] {
    border-color: var(--vela-line) !important;
}
.group:hover {
    box-shadow: 0 16px 36px rgba(168,132,58,.16);
    border-color: var(--vela-gold) !important;
}

/* =========================================================
   SECTION HEADERS (inline DM Serif / navy text)
   ========================================================= */
[class*="top-collection"], .top-collection-header h2 {
    color: var(--vela-ink) !important;
    font-family: 'Cormorant Garamond', Georgia, serif !important;
}
.top-collection-header {
    color: var(--vela-ink) !important;
}

/* =========================================================
   FOOTER -> warm ink + gold
   ========================================================= */
footer,
footer.bg-navyBlue {
    background-color: var(--vela-ink) !important;
    color: var(--vela-cream) !important;
    border-top: 2px solid var(--vela-gold);
}
footer a, footer p, footer span, footer li {
    color: var(--vela-stone);
    transition: color .2s ease;
}
footer a:hover {
    color: var(--vela-gold-soft);
}
footer .bg-navyBlue {
    background-color: transparent !important;
}

/* =========================================================
   MISC REFINEMENTS
   ========================================================= */
hr, .divider {
    border-color: var(--vela-line) !important;
}
a:hover {
    color: var(--vela-gold-deep);
}
input, select, textarea {
    border-color: var(--vela-line) !important;
    outline: none;
}
input:focus, select:focus, textarea:focus,
[class*="border"]:focus {
    border-color: var(--vela-gold) !important;
    box-shadow: 0 0 0 1px var(--vela-gold);
}

/* =========================================================
   ROUND-2 LOCAL REFINEMENTS (precise class targets)
   ========================================================= */

/* --- Brand buttons: theme abstracts via .primary-button / .secondary-button --- */
.primary-button, button.primary-button {
    background-color: var(--vela-gold) !important;
    border: 1px solid var(--vela-gold) !important;
    color: #fff !important;
    border-radius: 4px !important;
    font-family: 'Cormorant Garamond', Georgia, serif !important;
    font-size: 1.02rem !important;
    font-weight: 600 !important;
    letter-spacing: .08em;
    text-transform: uppercase;
    transition: background-color .25s ease, transform .25s ease, box-shadow .25s ease;
}
.primary-button:hover, button.primary-button:hover {
    background-color: var(--vela-gold-deep) !important;
    border-color: var(--vela-gold-deep) !important;
    box-shadow: 0 8px 22px rgba(168,132,58,.3);
    transform: translateY(-1px);
}
.secondary-button, button.secondary-button {
    background-color: transparent !important;
    border: 1px solid var(--vela-gold) !important;
    color: var(--vela-gold-deep) !important;
    border-radius: 4px !important;
    font-family: 'Cormorant Garamond', Georgia, serif !important;
    font-size: .98rem !important;
    letter-spacing: .06em;
    transition: background-color .25s ease, color .25s ease;
}
.secondary-button:hover {
    background-color: var(--vela-gold) !important;
    color: #fff !important;
}

/* --- Hero: soft dark vignette + readable warm title --- */
.home-offer {
    background: linear-gradient(180deg, rgba(22,18,10,.12) 0%, rgba(22,18,10,.20) 38%, rgba(22,18,10,.58) 100%);
}
.home-offer h1,
.home-offer .home-offer-title,
.hero-title {
    color: #fdf9f0 !important;
    text-shadow: 0 2px 20px rgba(0,0,0,.4);
    font-family: 'Cormorant Garamond', Georgia, serif !important;
}

/* --- Product titles -> refined serif --- */
[class*="break-words"][class*="text-base"],
main p[class*="break-words"] {
    font-family: 'Cormorant Garamond', Georgia, serif !important;
    font-size: 1.15rem !important;
    font-weight: 600 !important;
    color: var(--vela-ink) !important;
}
/* --- Product price -> serif, deep gold --- */
.final-price, [class*="final-price"] {
    font-family: 'Cormorant Garamond', Georgia, serif !important;
    font-weight: 600 !important;
    color: var(--vela-gold-deep) !important;
    letter-spacing: .02em;
}

/* --- Product image: nice radius + soft frame + smooth hover --- */
main [class*="group-hover:scale-105"],
main .group img {
    border-radius: 14px !important;
}
main .group {
    transition: box-shadow .3s ease, transform .3s ease;
}
main .group:hover {
    box-shadow: 0 18px 40px rgba(168,132,58,.16);
}

/* --- Header search -> cream pill + gold focus --- */
header form input,
header input[type="search"] {
    background-color: #f7f2e7 !important;
    border-color: transparent !important;
    border-radius: 999px !important;
    color: var(--vela-ink) !important;
}
header form input:focus {
    border-color: var(--vela-gold) !important;
    box-shadow: 0 0 0 1px var(--vela-gold);
}

/* --- Carousel dots -> gold --- */
[class*="rounded-full"][class*="bg-navyBlue"] {
    background-color: var(--vela-gold) !important;
}

/* --- Info-strip icon rings: warm border + gold tint --- */
[class*="border-black"][class*="rounded-full"] {
    border-color: var(--vela-line) !important;
}
[class*="border-black"][class*="rounded-full"] .icon-truck,
[class*="border-black"][class*="rounded-full"] .icon-product,
[class*="border-black"][class*="rounded-full"] .icon-* {
    color: var(--vela-gold) !important;
}

/* --- Footer newsletter on dark --- */
footer input {
    background-color: rgba(255,255,255,.07) !important;
    border: 1px solid rgba(168,132,58,.45) !important;
    color: #f0e8d8 !important;
    border-radius: 4px !important;
}
footer input::placeholder { color: rgba(240,232,216,.5); }
footer form button,
footer [type="submit"],
footer .secondary-button {
    background-color: var(--vela-gold) !important;
    border-color: var(--vela-gold) !important;
    color: #fff !important;
    border-radius: 4px !important;
    font-family: 'Cormorant Garamond', Georgia, serif !important;
    letter-spacing: .05em;
}
footer form button:hover,
footer [type="submit"]:hover,
footer .secondary-button:hover {
    background-color: var(--vela-gold-deep) !important;
    color: #fff !important;
}
/* Newsletter block heading -> serif */
footer h1, footer h2, footer h3 {
    font-family: 'Cormorant Garamond', Georgia, serif !important;
    letter-spacing: .02em;
}
footer ul a, footer ul li {
    color: var(--vela-stone) !important;
}
footer ul a:hover { color: var(--vela-gold-soft) !important; }

/* --- Popular-category strip: give cards breathing room & warm frames --- */
img[class*="group-hover:scale"] {
    border-radius: 10px !important;
}

/* --- "View all" link --- */
a[href*="/shop"], a[href*="sort=created_at-desc"] {
    font-family: 'Cormorant Garamond', Georgia, serif !important;
    letter-spacing: .04em;
    color: var(--vela-gold-deep) !important;
}
a[href*="/shop"]:hover { text-decoration: underline; }