/* ============================================================
   Sourdough.my — Storefront Brand CSS
   Malaysian Kuih Muih Traditional Snacks
   Color palette: Artisan Sepia + Wheat Caramel + Cream (matches official logo)
   ============================================================ */

/* CSS Custom Properties */
:root {
    --kl-green-dark:    #4A3524;
    --kl-green-mid:     #6F4E37;
    --kl-green-light:   #D9C7A8;
    --kl-gold:          #A9814F;
    --kl-gold-light:    #C9A874;
    --kl-cream:         #FEFCF7;
    --kl-tan:           #F5EFE3;
    --kl-tan-mid:       #EBE1CE;
    --kl-tan-dark:      #D8C7AC;
    --kl-brown-text:    #2E2015;
    --kl-brown-muted:   #6B5A47;
}

/* ─── STOREFRONT LOGO (header, mobile drawer, auth pages, checkout) ─── */
/* Default markup renders the logo at 131x29 (wordmark aspect); the official
   logo is a square emblem, so give it room to be legible instead of squished. */
img[alt="Sourdough"] {
    width: 120px !important;
    height: 120px !important;
    object-fit: contain;
}

/* ─── GLOBAL BODY ─── */
body {
    background-color: var(--kl-cream) !important;
}

main#main {
    background-color: var(--kl-cream) !important;
    min-height: 60vh;
}

/* ─── OVERRIDE BAGISTO navyBlue (#060C3B) → Sourdough Deep Green ─── */
.text-navyBlue  { color: var(--kl-green-dark) !important; }
.bg-navyBlue    { background-color: var(--kl-green-dark) !important; }
.border-navyBlue { border-color: var(--kl-green-dark) !important; }

/* Category nav hover underline */
.hover\:border-b-4.hover\:border-navyBlue:hover,
[class*="hover:border-navyBlue"]:hover {
    border-color: var(--kl-green-dark) !important;
}

/* Selection highlight */
::selection {
    background-color: rgba(27, 67, 50, 0.18) !important;
}

/* ─── BUTTONS ─── */
.primary-button {
    background-color: var(--kl-green-dark) !important;
    border-color: var(--kl-green-dark) !important;
    color: #fff !important;
    border-radius: 0.75rem !important;
    transition: background-color 0.2s, opacity 0.2s !important;
}
.primary-button:hover {
    background-color: var(--kl-green-mid) !important;
    opacity: 1 !important;
}

.secondary-button {
    color: var(--kl-green-dark) !important;
    border-color: var(--kl-green-dark) !important;
    background-color: transparent !important;
}
.secondary-button:hover {
    background-color: rgba(27, 67, 50, 0.06) !important;
}

/* ─── HEADER TOPBAR ─── */
/* Top bar border + subtle green top stripe */
[class*="border-b"][class*="px-16"] {
    border-top: 3px solid var(--kl-green-dark) !important;
    background-color: var(--kl-cream) !important;
}

/* ─── HEADER BOTTOM (NAV BAR) ─── */
/* Main nav container border */
.flex.min-h-\[78px\].w-full.justify-between {
    background-color: #fff !important;
    border-color: var(--kl-tan-mid) !important;
}

/* Category nav item hover border */
.group.relative.flex.h-\[77px\] {
    border-color: transparent !important;
}
.group.relative.flex.h-\[77px\]:hover {
    border-bottom-color: var(--kl-green-dark) !important;
}

/* Static nav links (Home / About Us / FAQ / Contact) flanking the category dropdown */
.sourdough-nav-link {
    display: flex;
    align-items: center;
    height: 77px;
    padding: 0 4px;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--kl-brown-text);
    border-bottom: 4px solid transparent;
    white-space: nowrap;
}
.sourdough-nav-link:hover {
    border-bottom-color: var(--kl-green-dark);
    color: var(--kl-green-dark);
}

/* Category link text */
.group.relative.flex.h-\[77px\] a {
    color: var(--kl-brown-text);
    font-weight: 500;
    font-family: 'Poppins', sans-serif;
    font-size: 0.78rem;
    letter-spacing: 0.07em;
}
.group.relative.flex.h-\[77px\]:hover a {
    color: var(--kl-green-dark) !important;
}

/* Search input */
input[name="query"] {
    background-color: var(--kl-tan) !important;
    border-color: var(--kl-tan-dark) !important;
    color: var(--kl-brown-text) !important;
}
input[name="query"]:hover,
input[name="query"]:focus {
    border-color: var(--kl-green-dark) !important;
}

/* ─── SOURDOUGH LOGO ─── */
.sourdough-logo {
    text-decoration: none !important;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    line-height: 1;
}
.sourdough-logo-name {
    font-family: 'DM Serif Display', serif !important;
    font-size: 1.9rem;
    color: var(--kl-green-dark);
    letter-spacing: -0.5px;
    line-height: 1;
}
.sourdough-logo-name span {
    color: var(--kl-gold);
}
.sourdough-logo-tagline {
    font-family: 'Poppins', sans-serif !important;
    font-size: 0.58rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--kl-gold);
    margin-top: 3px;
    font-weight: 600;
}

/* ─── DROPDOWN (profile/guest) ─── */
/* Welcome text in profile dropdown */
.font-dmserif {
    color: var(--kl-green-dark) !important;
}

/* Hover items in profile dropdown */
.hover\:bg-gray-100:hover {
    background-color: var(--kl-tan) !important;
}

/* ─── FOOTER ─── */
footer.mt-9 {
    background-color: var(--kl-tan) !important;
    border-top: 3px solid var(--kl-green-dark) !important;
}

/* Footer bottom bar */
.bg-\[\#F1EADF\] {
    background-color: var(--kl-green-dark) !important;
    color: var(--kl-cream) !important;
}

/* Footer bottom bar text */
.bg-\[\#F1EADF\] p,
.bg-\[\#F1EADF\] a {
    color: var(--kl-cream) !important;
}
.bg-\[\#F1EADF\] a:hover {
    color: var(--kl-gold-light) !important;
    text-decoration: none !important;
}

/* Footer newsletter background */
.bg-lightOrange {
    background-color: var(--kl-tan) !important;
}

/* Footer accordion border and header */
.border-\[\#e9decc\] { border-color: var(--kl-tan-dark) !important; }
.bg-\[\#F1EADF\].font-medium,
.rounded-t-lg.bg-\[\#F1EADF\] {
    background-color: var(--kl-tan-mid) !important;
    color: var(--kl-brown-text) !important;
}

/* Newsletter input in footer */
.border-\[\#e9decc\].bg-\[\#F1EADF\] {
    background-color: var(--kl-cream) !important;
    border-color: var(--kl-tan-dark) !important;
    color: var(--kl-brown-text) !important;
}

/* Newsletter subscribe button */
footer button[type="submit"] {
    background-color: var(--kl-green-dark) !important;
    color: #fff !important;
    border-radius: 0.75rem !important;
}
footer button[type="submit"]:hover {
    background-color: var(--kl-green-mid) !important;
}

/* Footer newsletter heading (italic) */
footer .text-navyBlue {
    color: var(--kl-green-dark) !important;
}

/* Footer links */
footer ul a {
    color: var(--kl-brown-muted);
    transition: color 0.2s;
}
footer ul a:hover {
    color: var(--kl-green-dark) !important;
}

/* ─── SERVICES / FEATURE BAR ─── */
/* The services/features bar between content and footer */
section[class*="bg-white"] + div,
.services-section {
    background-color: var(--kl-cream) !important;
}

/* ─── PRODUCT CARDS ─── */
/* Prevent white background clashing with cream body */
.rounded-xl.border {
    background-color: #fff;
}

/* ─── PRODUCT CAROUSEL HEADING (e.g. "Our Best Sellers") ─── */
.sd-carousel-heading {
    text-align: center;
    position: relative;
}
.sd-carousel-title {
    font-family: 'DM Serif Display', serif;
    font-size: 2.25rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--kl-brown-text);
    font-weight: 400;
}
.sd-carousel-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin: 14px auto 0;
    max-width: 220px;
}
.sd-carousel-divider span:not(.sd-carousel-divider-icon) {
    flex: 1 1 auto;
    height: 1px;
    background-color: var(--kl-tan-dark);
}
.sd-carousel-divider-icon {
    color: var(--kl-gold);
    font-size: 14px;
    line-height: 1;
    flex-shrink: 0;
}
.sd-carousel-subtitle {
    font-family: 'Poppins', sans-serif;
    font-size: 15px;
    color: var(--kl-brown-muted);
    margin-top: 14px;
}
@media (max-width: 768px) {
    .sd-carousel-title {
        font-size: 1.5rem;
    }
}

/* ─── PRODUCT CARD (grid mode: homepage carousels, search, categories) ─── */
.sd-product-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    padding: 4px 12px;
    font-family: 'Poppins', sans-serif;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #fff;
    z-index: 1;
}
.sd-product-badge.sd-badge-best-seller {
    background-color: var(--kl-green-dark);
}
.sd-product-badge.sd-badge-new {
    background-color: var(--kl-gold);
}
.sd-product-badge.sd-badge-sale {
    background-color: #B3452F;
}

.sd-product-card {
    background-color: #fff;
    border: 1px solid var(--kl-tan-mid);
    border-radius: 16px;
    overflow: hidden;
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.sd-product-card:hover {
    box-shadow: 0 8px 24px rgba(46, 32, 21, 0.1);
    transform: translateY(-2px);
}
.sd-product-card-image {
    position: relative;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background-color: var(--kl-tan);
}
.sd-product-card-image img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}
.sd-product-card:hover .sd-product-card-image img {
    transform: scale(1.05);
}

/* ─── PRODUCT CAROUSEL GRID (Tailwind grid-cols-4 isn't in the prebuilt bundle) ─── */
.sd-bestsellers-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 2rem;
    margin-top: 2.5rem;
}
@media (max-width: 1180px) {
    .sd-bestsellers-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}
@media (max-width: 1060px) {
    .sd-bestsellers-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
@media (max-width: 768px) {
    .sd-bestsellers-grid {
        justify-items: center;
        gap: 1rem;
        margin-top: 1.25rem;
    }
}
@media (max-width: 640px) {
    .sd-bestsellers-grid {
        gap: 0.75rem;
    }
}
.sd-product-card-body {
    padding: 16px;
}
.sd-product-card-name {
    font-family: 'Poppins', sans-serif;
    font-size: 15px;
    font-weight: 600;
    color: var(--kl-brown-text);
}
.sd-product-card-desc {
    font-family: 'Poppins', sans-serif;
    font-size: 13px;
    line-height: 1.5;
    color: var(--kl-brown-muted);
    margin-top: 4px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.sd-product-card-price {
    font-family: 'Poppins', sans-serif;
    font-size: 15px;
    font-weight: 600;
    color: var(--kl-brown-text);
    margin-top: 10px;
}
.sd-product-card-cart-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    margin-top: 12px;
    padding: 10px;
    border: 1px solid var(--kl-tan-dark);
    border-radius: 10px;
    background-color: transparent;
    color: var(--kl-brown-text);
    font-family: 'Poppins', sans-serif;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}
.sd-product-card-cart-btn:hover {
    background-color: var(--kl-tan);
    border-color: var(--kl-green-dark);
}
.sd-product-card-cart-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ─── SHIMMER / LOADING ─── */
/* Keep shimmer neutral, not too blue-tinted */
.shimmer {
    background: linear-gradient(90deg, var(--kl-tan) 25%, var(--kl-tan-mid) 50%, var(--kl-tan) 75%);
    background-size: 400% 100%;
    animation: shimmer-kl 1.6s infinite;
}
@keyframes shimmer-kl {
    0%   { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* ─── CATEGORY NAV DROPDOWN PANEL ─── */
/* Category mega-menu */
.pointer-events-none.absolute.top-\[78px\] {
    background-color: #fff !important;
    border-top-color: var(--kl-green-dark) !important;
}

/* Second-level category headings in mega-menu */
.pointer-events-none .font-medium.text-navyBlue {
    color: var(--kl-green-dark) !important;
}

/* ─── WISHLIST / CART / COMPARE ICONS ─── */
/* Ensure icon color follows brand */
.icon-compare,
.icon-users {
    color: var(--kl-green-dark) !important;
}

/* ─── FREE DELIVERY ANNOUNCEMENT BAR ─── */
.sourdough-announcement-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background-color: var(--kl-green-mid);
    color: var(--kl-cream);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.02em;
    padding: 10px 16px;
    text-align: center;
}

.sourdough-announcement-bar .icon-truck {
    font-size: 18px;
    line-height: 1;
}

.sourdough-announcement-bar strong {
    font-weight: 700;
}

/* ─── KUIH MUIH DECORATIVE BAND ─── */
/* Thin decorative stripe below header nav */
.sourdough-heritage-band {
    height: 4px;
    background: linear-gradient(90deg,
        var(--kl-green-dark) 0%,
        var(--kl-gold) 33%,
        var(--kl-green-dark) 66%,
        var(--kl-gold) 100%
    );
    background-size: 200% 100%;
}

/* ─── HOMEPAGE CAROUSEL AREA ─── */
/* Ensure carousel dots/controls use brand color */
[class*="carousel"] button:focus,
[class*="carousel"] button.active {
    background-color: var(--kl-green-dark) !important;
}

/* ─── MOBILE HEADER ─── */
/* Mobile nav hamburger / icons */
.icon-hamburger { color: var(--kl-green-dark) !important; }

/* ─── FORMS / INPUTS ─── */
input:focus, select:focus, textarea:focus {
    border-color: var(--kl-green-dark) !important;
    outline-color: var(--kl-green-dark) !important;
    box-shadow: 0 0 0 2px rgba(27, 67, 50, 0.12) !important;
}

/* ─── BREADCRUMB ─── */
.breadcrumb a,
[aria-label="Breadcrumb"] a {
    color: var(--kl-green-dark) !important;
}

/* ─── PAGINATION ─── */
.primary-button.rounded-full,
button[class*="primary-button"] {
    background-color: var(--kl-green-dark) !important;
    border-color: var(--kl-green-dark) !important;
}

/* ─── PRICES ─── */
/* Sale price / highlighted price */
.text-darkPink { color: var(--kl-gold) !important; }

/* ─── STAR RATINGS ─── */
.icon-star-fill { color: var(--kl-gold) !important; }

/* ─── ACCORDION ─── */
/* Category sidebar accordion */
.rounded-xl.border-2.border-\[\#e9decc\] {
    border-color: var(--kl-tan-dark) !important;
}

/* ─── MINI CART BADGE ─── */
/* Cart item count badge */
span[class*="bg-navyBlue"].rounded-full {
    background-color: var(--kl-green-dark) !important;
}

/* ─── CHECKOUT PAGE ─── */

/* Checkout header bar */
.kh-checkout ~ div,
body .flex-wrap:first-child {
    border-top: 3px solid var(--kl-green-dark);
}

/* Inputs, selects, textareas — checkout context */
.kh-checkout input[type="text"],
.kh-checkout input[type="email"],
.kh-checkout input[type="tel"],
.kh-checkout input[type="number"],
.kh-checkout input[type="password"],
.kh-checkout textarea {
    background: #fffdf9 !important;
    border-color: #cfc4ae !important;
    border-radius: 10px !important;
    color: var(--kl-brown-text) !important;
    transition: border-color 0.2s, box-shadow 0.2s !important;
}
.kh-checkout input[type="text"]:hover,
.kh-checkout input[type="email"]:hover,
.kh-checkout input[type="tel"]:hover,
.kh-checkout input[type="number"]:hover,
.kh-checkout textarea:hover {
    border-color: #a09080 !important;
}
.kh-checkout input[type="text"]:focus,
.kh-checkout input[type="email"]:focus,
.kh-checkout input[type="tel"]:focus,
.kh-checkout input[type="number"]:focus,
.kh-checkout textarea:focus {
    border-color: var(--kl-green-dark) !important;
    box-shadow: 0 0 0 3px rgba(27,67,50,0.10) !important;
    outline: none !important;
    background: #fff !important;
}

/* Select dropdowns */
.kh-checkout select {
    background: #fffdf9 !important;
    border-color: #cfc4ae !important;
    border-radius: 10px !important;
    color: var(--kl-brown-text) !important;
}
.kh-checkout select:focus {
    border-color: var(--kl-green-dark) !important;
    box-shadow: 0 0 0 3px rgba(27,67,50,0.10) !important;
}

/* Labels */
.kh-checkout label {
    color: var(--kl-green-dark) !important;
    font-family: 'Poppins', sans-serif !important;
    font-size: 0.8rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.03em !important;
    text-transform: uppercase !important;
    margin-bottom: 6px !important;
}
.kh-checkout label .required::after,
.kh-checkout label.required::after {
    color: var(--kl-gold) !important;
}

/* Section accordion card (Address wrapper) */
.kh-checkout .overflow-hidden.rounded-xl {
    background: #fff !important;
    border: 1px solid #e0d8cc !important;
    border-bottom: 1px solid #e0d8cc !important;
    border-radius: 14px !important;
    box-shadow: 0 2px 16px rgba(27,67,50,0.07) !important;
    padding: 28px 32px !important;
}
@media (max-width: 768px) {
    .kh-checkout .overflow-hidden.rounded-xl { padding: 16px !important; }
}

/* "Address" accordion toggle header */
.kh-checkout .overflow-hidden.rounded-xl h2.text-2xl {
    font-family: 'DM Serif Display', serif !important;
    font-size: 1.5rem !important;
    color: var(--kl-green-dark) !important;
    font-weight: 400 !important;
}
/* Arrow toggle icon */
.kh-checkout .overflow-hidden.rounded-xl .icon-arrow-up,
.kh-checkout .overflow-hidden.rounded-xl .icon-arrow-down {
    color: var(--kl-green-dark) !important;
}

/* "Billing Address" / "Shipping Address" sub-headings */
.kh-checkout h2.text-xl {
    font-family: 'Poppins', sans-serif !important;
    font-size: 0.78rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.14em !important;
    text-transform: uppercase !important;
    color: var(--kl-gold) !important;
    border-bottom: 1px solid #e8ddc8 !important;
    padding-bottom: 10px !important;
    margin-bottom: 20px !important;
}

/* Checkbox + "same as billing" row */
.kh-checkout input[type="checkbox"] {
    accent-color: var(--kl-green-dark) !important;
    width: 16px !important;
    height: 16px !important;
}
.kh-checkout .text-zinc-500 {
    color: var(--kl-brown-muted) !important;
}

/* Cart Summary panel */
.kh-checkout .sticky h1.text-2xl {
    font-family: 'DM Serif Display', serif !important;
    font-size: 1.4rem !important;
    color: var(--kl-green-dark) !important;
    font-weight: 400 !important;
    border-bottom: 2px solid var(--kl-gold) !important;
    padding-bottom: 12px !important;
    margin-bottom: 4px !important;
}

/* Summary labels (Subtotal, Delivery, etc.) */
.kh-checkout .sticky p.text-base:not(.font-medium) {
    color: var(--kl-brown-muted) !important;
}
.kh-checkout .sticky p.font-medium {
    color: var(--kl-brown-text) !important;
}

/* Grand Total row */
.kh-checkout .sticky .border-t p,
.kh-checkout .sticky .border-t span {
    color: var(--kl-green-dark) !important;
    font-family: 'DM Serif Display', serif !important;
}

/* Apply Coupon link */
.kh-checkout .sticky a {
    color: var(--kl-gold) !important;
    font-weight: 600 !important;
}
.kh-checkout .sticky a:hover {
    color: var(--kl-green-dark) !important;
}

/* Cart item name in summary */
.kh-checkout .sticky .text-navyBlue {
    color: var(--kl-brown-text) !important;
}

/* Product image in summary */
.kh-checkout .sticky img.rounded-xl {
    border-radius: 10px !important;
    border: 1px solid #e8ddc8 !important;
}

/* Checkout header logo area */
.kh-checkout ~ * .flex.w-full.justify-between,
.flex.w-full.justify-between.border-b {
    border-bottom-color: #e8ddc8 !important;
}

/* Continue / Save Address button */
.kh-checkout .primary-button {
    background-color: var(--kl-green-dark) !important;
    border-radius: 10px !important;
    padding: 12px 40px !important;
    font-family: 'Poppins', sans-serif !important;
    font-size: 0.9rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.05em !important;
}
.kh-checkout .primary-button:hover {
    background-color: var(--kl-green-mid) !important;
    box-shadow: 0 4px 14px rgba(27,67,50,0.25) !important;
    transform: translateY(-1px);
}

/* ─── LANGUAGE SWITCHER ─── */
.kh-lang-switcher {
    display: flex;
    align-items: center;
    gap: 0;
    background: #f5f5f0;
    border-radius: 20px;
    padding: 3px;
    font-family: 'Poppins', sans-serif;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
    border: 1px solid #e8e0d0;
}
.kh-lang-active {
    background: #1B4332;
    color: #FFF8EC;
    border-radius: 16px;
    padding: 4px 10px;
    cursor: default;
}
.kh-lang-link {
    color: #6b7280;
    padding: 4px 10px;
    border-radius: 16px;
    text-decoration: none;
    transition: color 0.15s;
}
.kh-lang-link:hover {
    color: #1B4332;
}