/* ============================================================
   Enchanted Gen — recycled glass art theme
   Sea-glass palette: deep teal green, pale foam, molten amber.
   ============================================================ */

:root {
    --eg-ink:      #122a26;
    --eg-sea:      #0d6b5c;
    --eg-sea-deep: #094a40;
    --eg-seafoam:  #8fd8c4;
    --eg-foam:     #eef6f2;
    --eg-amber:    #d99a3d;
    --eg-amber-hi: #ecb35f;
    --eg-clay:     #b4562f;
    --eg-paper:    #faf8f3;
    --eg-sand:     #efe9dd;
    --eg-serif:    'Fraunces', Georgia, 'Times New Roman', serif;
    --eg-sans:     'Inter', system-ui, -apple-system, sans-serif;
}

/* ---------- base ---------- */
body {
    font-family: var(--eg-sans);
    background: var(--eg-ink);
    color: var(--eg-ink);
}
/* crushed-glass backdrop: a deep-teal gradient field on a fixed layer —
   every visible shard is drawn on the canvas above it and is in motion.
   Sits behind all page content. */
#eg-glass {
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(1200px 800px at 30% -10%, rgba(47,143,124,.35), transparent 60%),
        radial-gradient(900px 700px at 85% 110%, rgba(217,154,61,.10), transparent 55%),
        linear-gradient(180deg, #16322d 0%, #122a26 45%, #0c1f1c 100%);
}
#eg-fall {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}
/* keep the page content readable on the textured field —
   the route container is the .container that directly wraps #content */
#container div.container:has(> .row > #content) {
    background: var(--eg-paper);
    border-radius: 14px;
    padding: 18px 26px 30px;
    margin-top: 18px;
    margin-bottom: 28px;
    box-shadow: 0 18px 50px rgba(6, 24, 21, .45);
}
/* breadcrumb floats on the glass field — frosted pill so it's readable
   over the texture on every route */
#container .breadcrumb {
    background: rgba(250, 248, 241, .94);
    backdrop-filter: blur(6px);
    border-radius: 8px;
    padding: 8px 14px;
    width: fit-content;
    box-shadow: 0 4px 14px rgba(6, 24, 21, .35);
    --bs-breadcrumb-divider-color: var(--eg-sea);
}
#container .breadcrumb-item a { color: var(--eg-sea-deep) !important; }
#container .breadcrumb-item.active,
#container .breadcrumb-item + .breadcrumb-item::before { color: var(--eg-ink); }
@media (max-width: 767.98px) {
    #container div.container:has(> .row > #content) { border-radius: 0; padding-left: 12px; padding-right: 12px; }
}
h1, h2, h3, h4, h5, .h1, .h2, .h3 {
    font-family: var(--eg-serif);
    color: var(--eg-ink);
}
a { color: var(--eg-sea); }
a:hover { color: var(--eg-sea-deep); }

/* ---------- top strip ---------- */
#top {
    background: var(--eg-ink);
    border-bottom: 1px solid rgba(143, 216, 196, .18);
}
#top .list-inline-item > a,
#top .dropdown-toggle,
#top .list-inline-item span {
    color: var(--eg-seafoam) !important;
}
#top .dropdown-menu { background: var(--eg-sea-deep); }
#top .dropdown-item { color: var(--eg-foam); }
#top .dropdown-item:hover { background: var(--eg-sea); color: #fff; }

/* ---------- header band ---------- */
header {
    background: linear-gradient(120deg, var(--eg-sea-deep) 0%, var(--eg-sea) 70%, #148069 100%);
    padding: 14px 0;
}
#logo a { color: var(--eg-foam); text-decoration: none; }
#logo .eg-logo-mark {
    display: inline-block; vertical-align: middle;
    width: 54px; height: 54px; margin-right: 10px;
}
#logo .eg-logo-text {
    font-family: var(--eg-serif);
    font-size: 1.7rem; font-weight: 600;
    letter-spacing: .02em; vertical-align: middle;
}
#search .form-control,
#search input {
    background: rgba(255,255,255,.12);
    border: 1px solid rgba(143,216,196,.35);
    color: #fff;
}
#search input::placeholder { color: rgba(233,244,239,.6); }
#search .btn { background: var(--eg-amber); border-color: var(--eg-amber); color: var(--eg-ink); }
#search .btn:hover { background: var(--eg-amber-hi); }
#cart .btn { background: transparent; border: 1px solid var(--eg-seafoam); color: var(--eg-foam); }
#cart .btn:hover { background: rgba(143,216,196,.15); }
#cart .dropdown-menu { border: 1px solid var(--eg-sand); }

/* ---------- category nav ---------- */
#menu, .navbar {
    background: var(--eg-foam) !important;
    border-bottom: 2px solid var(--eg-seafoam);
}
#menu .nav-link, #menu .dropdown-toggle, #menu a.nav-link,
#menu .navbar-nav > .nav-item > .dropdown-item,
#menu .navbar-nav > li > a {
    color: var(--eg-sea-deep) !important;
    font-weight: 500; letter-spacing: .01em;
}
#menu .nav-link:hover, #menu .dropdown-toggle:hover,
#menu .navbar-nav > .nav-item > .dropdown-item:hover,
#menu .navbar-nav > li > a:hover {
    color: var(--eg-clay) !important;
    background: transparent;
}
#menu .dropdown-menu {
    background: #fff; border: 1px solid var(--eg-seafoam);
    box-shadow: 0 8px 24px rgba(18,42,38,.12);
}
#menu .dropdown-item:hover { background: var(--eg-foam); color: var(--eg-sea-deep); }
/* mobile: 'Categories' label + hamburger on the foam bar */
#menu #category { color: var(--eg-sea-deep) !important; font-weight: 600; }
#menu .navbar-toggler { border-color: var(--eg-sea) !important; }
#menu .navbar-toggler i, #menu .navbar-toggler .fa-bars { color: var(--eg-sea-deep) !important; }
/* collapsed mobile menu items keep the dark-on-foam palette */
#menu .navbar-collapse { background: var(--eg-foam); }
#menu .navbar-collapse .nav-item > a { color: var(--eg-sea-deep) !important; }

/* ---------- hero (home.twig) ---------- */
.eg-hero {
    background:
        radial-gradient(ellipse at 20% 30%, rgba(143,216,196,.25), transparent 55%),
        radial-gradient(ellipse at 85% 75%, rgba(217,154,61,.18), transparent 50%),
        linear-gradient(135deg, var(--eg-sea-deep) 0%, #0b5248 55%, var(--eg-ink) 100%);
    color: var(--eg-foam);
    padding: 72px 0 80px;
    margin-bottom: 40px;
}
.eg-hero h1 {
    font-family: var(--eg-serif);
    font-size: 3.1rem; font-weight: 600; color: #fff;
    letter-spacing: -.01em; margin-bottom: 14px;
}
.eg-hero .eg-tag {
    font-size: 1.15rem; color: var(--eg-seafoam);
    max-width: 560px; line-height: 1.55;
}
.eg-hero .eg-badges {
    margin-top: 26px; display: flex; gap: 22px; flex-wrap: wrap;
    font-size: .9rem; color: rgba(233,244,239,.85);
}
.eg-hero .eg-badges span i { color: var(--eg-amber); margin-right: 6px; }
.btn-eg {
    display: inline-block; margin-top: 28px;
    background: var(--eg-amber); color: var(--eg-ink) !important;
    font-weight: 600; padding: 13px 30px; border-radius: 4px;
    text-decoration: none; letter-spacing: .03em;
    transition: background .15s ease, transform .15s ease;
}
.btn-eg:hover { background: var(--eg-amber-hi); transform: translateY(-1px); }
.btn-eg-alt {
    display: inline-block; margin-top: 28px; margin-left: 12px;
    background: transparent; color: var(--eg-seafoam) !important;
    border: 1.5px solid var(--eg-seafoam);
    font-weight: 600; padding: 11px 26px; border-radius: 4px;
    text-decoration: none; letter-spacing: .03em;
    transition: background .15s ease, transform .15s ease;
}
.btn-eg-alt:hover { background: rgba(143,216,196,.15); transform: translateY(-1px); }

/* ---------- product cards ---------- */
.product-thumb {
    background: #fff;
    border: 1px solid var(--eg-sand) !important;
    border-radius: 10px;
    overflow: hidden;
    transition: box-shadow .2s ease, transform .2s ease;
}
.product-thumb:hover {
    box-shadow: 0 10px 28px rgba(13,107,92,.16);
    transform: translateY(-3px);
}
.product-thumb .image {
    background: var(--eg-foam);
}
.product-thumb h4 a, .product-thumb .description a {
    color: var(--eg-ink); text-decoration: none; font-family: var(--eg-serif);
}
.product-thumb .price { color: var(--eg-sea); font-weight: 600; }
.product-thumb .price-tax { color: #6b7280; }

/* ---------- buttons ---------- */
.btn-primary {
    background: var(--eg-sea); border-color: var(--eg-sea); color: #fff;
}
.btn-primary:hover, .btn-primary:focus {
    background: var(--eg-sea-deep); border-color: var(--eg-sea-deep); color: #fff;
}
.btn-light { background: var(--eg-foam); border-color: var(--eg-seafoam); color: var(--eg-sea-deep); }
.btn-light:hover { background: var(--eg-seafoam); }

/* ---------- breadcrumb / panels ---------- */
.breadcrumb { background: transparent; }
.breadcrumb-item a { color: var(--eg-sea); }
.list-group-item.active {
    background: var(--eg-sea); border-color: var(--eg-sea);
}
.card, .list-group-item { border-color: var(--eg-sand); }

/* ---------- footer ---------- */
footer {
    background: var(--eg-ink);
    color: rgba(233,244,239,.75);
    margin-top: 48px;
    padding-top: 40px;
}
footer h5, footer .h5 { color: var(--eg-seafoam); font-family: var(--eg-serif); }
footer a { color: rgba(233,244,239,.75); }
footer a:hover { color: var(--eg-amber-hi); }
footer hr { border-color: rgba(143,216,196,.2); }
footer .text-center, footer p { color: rgba(233,244,239,.55); }

/* ---------- headings / dividers ---------- */
#content > h3, #content > h2, .eg-section-title {
    font-family: var(--eg-serif); color: var(--eg-ink);
    border-bottom: 2px solid var(--eg-seafoam);
    padding-bottom: 10px; margin-bottom: 22px;
}

/* ---------- pagination / misc ---------- */
.page-link { color: var(--eg-sea); }
.page-item.active .page-link, .page-link.active {
    background: var(--eg-sea); border-color: var(--eg-sea); color: #fff;
}
.text-bg-primary, .badge.bg-primary { background: var(--eg-sea) !important; }