/* ==========================================================================
   Peptology — storefront theme
   Palette: deep navy chrome + cyan/teal accent, clean white product cards.
   Layered on top of Bootstrap 5.3.
   ========================================================================== */
:root {
    --brand-teal:      #12b0c4;
    --brand-teal-dark: #0e93a3;
    --brand-teal-soft: #e7f7fa;
    --navy:            #16232e;   /* buttons, dark headings */
    --navy-header:     #0d1922;   /* top nav / footer background */
    --navy-2:          #1d2b38;
    --ink:             #1a2430;   /* body text */
    --muted-grey:      #6c757d;
    --line:            #e6e9ee;
    --light-bg:        #f4f6f8;
    --primary-white:   #ffffff;
    /* Backward-compat aliases so any legacy var() references still resolve */
    --brand-red:       var(--brand-teal);
    --brand-red-dark:  var(--brand-teal-dark);
    --primary-black:   var(--navy-header);
    --primary-blue:    var(--brand-teal);
    --primary-yellow:  var(--brand-teal);
}

body {
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    background-color: var(--primary-white);
    color: var(--ink);
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}
a { color: var(--brand-teal); text-decoration: none; }
a:hover { color: var(--brand-teal-dark); }
.text-teal { color: var(--brand-teal) !important; }
.bg-navy { background-color: var(--navy-header) !important; }

/* ---------- Pre-header ---------- */
.pre-header {
    background-color: var(--navy-header);
    color: rgba(255,255,255,.75);
    padding: 7px 0;
    font-size: 13px;
    border-bottom: 1px solid rgba(255,255,255,.06);
}
.pre-header a { color: var(--brand-teal); text-decoration: none; }
.pre-header a:hover { color: #fff; }
.pre-header .ph-icon { font-size: 16px; color: var(--brand-teal); }
.pre-header .ph-phone { white-space: nowrap; }
@media (max-width: 575.98px) {
    .pre-header { font-size: 11px; }
    .pre-header .ph-icon { font-size: 13px; }
    .pre-header .ph-text { margin-right: .75rem !important; }
}

/* ---------- Header / navbar ---------- */
.navbar {
    background-color: var(--navy-header);
    padding: .35rem 0;
    box-shadow: 0 2px 10px rgba(0,0,0,.15);
}
.navbar .navbar-brand img { height: 44px; width: auto; }
.navbar .nav-link {
    color: #eaf0f4 !important;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 13.5px;
    letter-spacing: .3px;
    padding: .9rem .9rem !important;
    position: relative;
}
.navbar .nav-link:hover,
.navbar .nav-link.active { color: var(--brand-teal) !important; }
.navbar .nav-link.dropdown-toggle::after { vertical-align: middle; }
.navbar .navbar-toggler { border-color: rgba(255,255,255,.3); }
.navbar .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255,255,255,0.85)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}
.header-icon { color: #eaf0f4; display:inline-flex; align-items:center; }
.header-icon:hover { color: var(--brand-teal); }

/* Mega-menu dropdown (dark, wide) */
.navbar .dropdown-menu.mega-menu {
    background: var(--navy-2);
    border: 0;
    border-radius: 12px;
    padding: 18px 22px;
    margin-top: 6px;
    min-width: 460px;
    box-shadow: 0 18px 50px rgba(0,0,0,.4);
}
.navbar .mega-menu a {
    color: #d7dee4;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 12.5px;
    padding: 8px 10px;
    border-radius: 8px;
    white-space: normal;
    display: block;
}
.navbar .mega-menu a:hover { background: rgba(255,255,255,.06); color: var(--brand-teal); }
@media (min-width: 992px) {
    .navbar .mega-cols { column-count: 2; column-gap: 24px; }
    .navbar .mega-cols li { break-inside: avoid; }
}

/* Header search */
.header-search { width: 280px; }
.header-search .form-control { border: 0; box-shadow: none; font-size: 14px; }
.header-search .form-control:focus { box-shadow: none; }
.header-search .form-control::placeholder { color:#9aa4ac; }
.header-search .input-group { border-radius: 30px; overflow: hidden; background:#fff; }
.header-search .input-group-text { border: 0; background:#fff; }
@media (max-width: 991.98px) { .header-search { width: 100%; } }

/* ---------- Buttons ---------- */
.btn-navy, .btn.checkout {
    background-color: var(--navy);
    border-color: var(--navy);
    color: #fff;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .4px;
    border-radius: 8px;
    padding: 10px 20px;
    font-size: 14px;
    border: none;
}
.btn-navy:hover, .btn.checkout:hover { background-color: var(--navy-2); color: #fff; }
.btn-teal {
    background-color: var(--brand-teal);
    border-color: var(--brand-teal);
    color: #fff;
    font-weight: 700;
    border-radius: 8px;
}
.btn-teal:hover { background-color: var(--brand-teal-dark); border-color: var(--brand-teal-dark); color:#fff; }
.btn-outline-teal {
    color: var(--brand-teal); border: 2px solid var(--brand-teal);
    font-weight: 700; border-radius: 8px; background: transparent;
}
.btn-outline-teal:hover { background: var(--brand-teal); color:#fff; }
.btn#purchase {
    background-color: var(--brand-teal); color:#fff; font-weight:700;
    padding: 15px 30px; font-size: 18px; border-radius: 8px; border:none; width:100%;
    text-transform: uppercase;
}
.btn#purchase:hover { background-color: var(--brand-teal-dark); }

/* ---------- Section helpers ---------- */
.section { padding: 56px 0; }
.section.alt { background: var(--light-bg); }
.section-title {
    text-align: center;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: var(--navy);
    margin-bottom: 34px;
}
.section-title.left { text-align: left; }

/* ---------- Hero slider ---------- */
.hero { position: relative; overflow: hidden; }
.hero .carousel-item { min-height: 460px; }
.hero-slide {
    min-height: 460px;
    display: flex;
    align-items: center;
    background-size: cover;
    background-position: center;
    color: #fff;
    position: relative;
}
.hero-slide::before {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(90deg, rgba(8,19,26,.72) 0%, rgba(8,19,26,.35) 55%, rgba(8,19,26,.15) 100%);
}
.hero-slide .container { position: relative; z-index: 2; }
.hero-slide h1 { font-weight: 800; font-size: clamp(1.8rem, 4vw, 3.1rem); line-height: 1.08; }
.hero-slide h1 .accent { color: var(--brand-teal); }
.hero-slide p.lead { max-width: 560px; opacity: .95; }
.hero-slide.plain { background-color: var(--navy-header); }
.hero .carousel-indicators [data-bs-target] { background-color: var(--brand-teal); }

/* ---------- Trust badge bar ---------- */
.badge-bar { margin-top: -34px; position: relative; z-index: 3; }
.badge-item {
    background:#fff; border:1px solid var(--line); border-radius: 12px;
    padding: 18px 20px; display:flex; gap:14px; align-items:center; height:100%;
    box-shadow: 0 8px 24px rgba(16,32,44,.06);
}
.badge-item .material-icons { color: var(--brand-teal); font-size: 30px; }
.badge-item .bi-title { font-weight: 700; color: var(--navy); font-size: 14.5px; line-height:1.15; }
.badge-item .bi-sub { color: var(--muted-grey); font-size: 12.5px; }

/* ---------- Category grid ---------- */
.cat-card {
    display:block; border-radius: 14px; overflow:hidden; position:relative;
    box-shadow: 0 10px 28px rgba(16,32,44,.08); background:#fff; height:100%;
}
.cat-card img { width:100%; height: 210px; object-fit: cover; display:block; transition: transform .4s; }
.cat-card:hover img { transform: scale(1.05); }
.cat-card .cat-body { padding: 16px; }
.cat-card .cat-name { font-weight: 700; color: var(--navy); font-size: 15px; }
.cat-card .cat-more { color: var(--brand-teal); font-weight: 700; font-size: 12.5px; text-transform: uppercase; }

/* ---------- Product card ---------- */
.product-card {
    background:#fff; border:1px solid var(--line); border-radius: 14px;
    display:flex; flex-direction:column; overflow:hidden; transition: box-shadow .2s, transform .2s;
    position: relative; height:100%;
}
.product-card:hover { box-shadow: 0 14px 34px rgba(16,32,44,.12); transform: translateY(-3px); }
.product-card .img-wrapper {
    display:block; background: var(--light-bg); aspect-ratio: 1/1; overflow:hidden;
}
.product-card .img-wrapper img { width:100%; height:100%; object-fit: contain; padding: 14px; }
.product-card .card-body { padding: 16px; display:flex; flex-direction:column; gap:8px; flex:1; }
.product-card .product-title {
    color: var(--navy); font-weight: 700; font-size: 14px; line-height:1.3;
    display:block; min-height: 2.6em; text-decoration:none;
}
.product-card .product-title:hover { color: var(--brand-teal); }
.product-card .product-price { font-weight: 800; color: var(--brand-teal); font-size: 15px; margin-top:auto; }
.product-card .product-price del { color: var(--muted-grey); font-weight:600; font-size: 13px; margin-right:6px; }
.sale-badge {
    position:absolute; top:10px; left:10px; z-index:2;
    background: var(--brand-teal); color:#fff; font-weight:700; font-size:11px;
    padding: 3px 9px; border-radius: 6px; text-transform: uppercase;
}

/* ---------- About section ---------- */
.about-section { background: var(--light-bg); }
.about-eyebrow { color: var(--brand-teal); font-weight:700; text-transform:uppercase; letter-spacing:1px; font-size:12px; }
.about-section h2 { font-weight: 800; color: var(--navy); }
.about-badges { display:flex; flex-wrap:wrap; gap:8px; }
.about-badges .pill {
    background:#fff; border:1px solid var(--line); border-radius:30px;
    padding:6px 14px; font-size:12.5px; font-weight:600; color: var(--navy);
}
.about-img { border-radius: 16px; overflow:hidden; box-shadow: 0 16px 40px rgba(16,32,44,.14); }
.about-img img { width:100%; height:100%; object-fit:cover; }

/* ---------- Blog ---------- */
.blog-card {
    background:#fff; border:1px solid var(--line); border-radius: 14px; overflow:hidden; height:100%;
    display:flex; flex-direction:column; transition: box-shadow .2s;
}
.blog-card:hover { box-shadow: 0 14px 34px rgba(16,32,44,.12); }
.blog-card .thumb { aspect-ratio: 16/10; overflow:hidden; background: var(--light-bg); }
.blog-card .thumb img { width:100%; height:100%; object-fit:cover; }
.blog-card .blog-body { padding: 16px; display:flex; flex-direction:column; gap:8px; flex:1; }
.blog-card .blog-title { font-weight:700; color: var(--navy); font-size: 15px; line-height:1.3; }
.blog-card .blog-title:hover { color: var(--brand-teal); }
.blog-card .blog-meta { color: var(--muted-grey); font-size: 12px; }
.blog-card .blog-excerpt { color:#556; font-size: 13px; }
.article-body { font-size: 16px; line-height: 1.75; color: #2a3541; }
.article-body img { max-width:100%; height:auto; border-radius: 10px; }
.article-body h2, .article-body h3 { color: var(--navy); font-weight: 700; margin-top: 1.4em; }

/* ---------- Shop / listing + filters ---------- */
.filter-group { border:1px solid var(--line); border-radius: 12px; margin-bottom: 16px; overflow:hidden; }
.filter-group > .filter-head {
    background: var(--light-bg); padding: 12px 16px; font-weight: 700; color: var(--navy);
    font-size: 13px; text-transform: uppercase; letter-spacing:.4px;
    display:flex; justify-content:space-between; align-items:center;
}
.filter-group .filter-body { padding: 12px 16px; }
.filter-group .filter-body a { display:block; color:#3a4650; padding: 5px 0; font-size: 14px; }
.filter-group .filter-body a:hover, .filter-group .filter-body a.active { color: var(--brand-teal); font-weight:600; }
.shop-toolbar {
    display:flex; justify-content:space-between; align-items:center; gap:12px;
    border:1px solid var(--line); border-radius: 10px; padding: 10px 14px; margin-bottom: 20px; flex-wrap:wrap;
}
.category-seo { margin-top: 40px; color:#33404b; line-height:1.7; }
.category-seo h1, .category-seo h2, .category-seo h3 { color: var(--navy); font-weight:700; }

/* ---------- Product detail ---------- */
.product-tabs .nav-link {
    color: var(--navy); font-weight: 700; text-transform: uppercase; font-size: 13px;
    border: 0; border-bottom: 3px solid transparent; border-radius: 0; background: transparent;
}
.product-tabs .nav-link.active { color: var(--brand-teal); border-bottom-color: var(--brand-teal); background: transparent; }
.product-detail .price-lg { font-size: 1.9rem; font-weight: 800; color: var(--brand-teal); }
.product-detail .price-lg del { font-size: 1.1rem; color: var(--muted-grey); font-weight:600; margin-right:10px; }
.product-gallery .main-img { border:1px solid var(--line); border-radius: 14px; background: var(--light-bg); aspect-ratio: 1/1; overflow:hidden; }
.product-gallery .main-img img { width:100%; height:100%; object-fit: contain; padding: 18px; }
.product-gallery .thumb { border:1px solid var(--line); border-radius:10px; overflow:hidden; cursor:pointer; background:#fff; }
.product-gallery .thumb img { width:100%; height:70px; object-fit: contain; padding:6px; }
.stock-pill { display:inline-flex; align-items:center; gap:6px; font-weight:600; font-size:13px; }
.stock-pill.in { color:#159c6a; }
.stock-pill.out { color:#c0392b; }

/* Size variant picker */
.variant-options { display:flex; flex-wrap:wrap; gap:10px; }
.variant-opt { position:relative; cursor:pointer; margin:0; }
.variant-opt input { position:absolute; opacity:0; width:0; height:0; }
.variant-opt span {
    display:inline-block; padding:10px 20px; border:2px solid var(--line); border-radius:10px;
    font-weight:700; font-size:14px; color:var(--navy); background:#fff; transition:all .15s;
    min-width:64px; text-align:center;
}
.variant-opt:hover span { border-color: var(--brand-teal); }
.variant-opt input:checked + span { border-color: var(--brand-teal); background: var(--brand-teal-soft); color: var(--brand-teal-dark); }
.variant-opt.disabled span { opacity:.45; text-decoration:line-through; cursor:not-allowed; }
.variant-opt.disabled:hover span { border-color: var(--line); }
.product-description img { max-width: 100%; height: auto; }
.product-description img.emoji {
    display: inline !important; border: none !important; box-shadow: none !important;
    height: 1em !important; width: 1em !important; margin: 0 .07em !important;
    vertical-align: -.1em !important; background: none !important; padding: 0 !important;
}

/* ---------- Checkout ---------- */
.checkout-form-wrapper { background:#fff; padding:30px; border-radius:14px; box-shadow: 0 4px 15px rgba(0,0,0,.05); border:1px solid var(--line); }

/* ---------- Footer ---------- */
footer {
    background-color: var(--navy-header);
    color: #aeb9c2;
    padding: 54px 0 0;
    margin-top: auto;
}
footer h5 { color:#fff; font-weight:700; font-size: 14px; letter-spacing:.5px; }
footer a { color:#aeb9c2; text-decoration:none; }
footer a:hover { color: var(--brand-teal); }
footer .footer-social-icon {
    width:38px; height:38px; border-radius:50%; background: rgba(255,255,255,.08);
    display:inline-flex; align-items:center; justify-content:center; color:#fff !important;
    transition: background-color .2s, transform .2s;
}
footer .footer-social-icon:hover { background: var(--brand-teal); color:#fff !important; transform: translateY(-2px); }
.footer-fb-embed { max-width: 100%; overflow: hidden; }
.footer-fb-embed iframe { max-width: 100% !important; }
.bottom-footer {
    border-top: 1px solid rgba(255,255,255,.08); margin-top: 30px; padding: 18px 0;
    text-align:center; font-size: 13px; color:#8996a1;
}

/* ---------- Cookie banner ---------- */
.cookie-banner {
    position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 1080;
    background: #fff; border:1px solid var(--line); border-radius: 14px;
    box-shadow: 0 18px 50px rgba(0,0,0,.22);
    padding: 16px 18px; display:flex; gap:16px; align-items:center; flex-wrap:wrap;
    max-width: 760px; margin: 0 auto;
}
.cookie-banner p { margin:0; font-size: 13.5px; color:#33404b; flex:1; min-width: 220px; }
.cookie-banner .actions { display:flex; gap:10px; }

/* ---------- Breadcrumb ---------- */
.crumbs { background: var(--light-bg); padding: 10px 0; font-size: 13px; }
.crumbs a { color: var(--muted-grey); }
.crumbs a:hover { color: var(--brand-teal); }
.crumbs .sep { color:#c3ccd3; margin:0 6px; }

/* ---------- Pagination ---------- */
.pagination .page-link { color: var(--navy); border-color: var(--line); }
.pagination .page-item.active .page-link { background: var(--brand-teal); border-color: var(--brand-teal); }

/* ---------- Carousel controls ---------- */
.carousel-control-prev, .carousel-control-next { width: 5%; }