@import 'https://fonts.googleapis.com/css2?family=Baloo+2:wght@500;600;700&family=Inter:wght@400;500;600&display=swap';

/* ===================================================
   AK MART BRAND THEME — overlay on top of style.css
   =================================================== */

:root {
    --ak-navy: #1B1F5E;
    --ak-navy-dark: #12153F;
    --ak-navy-light: #EBEBF4;
    --ak-green: #1E8A3E;
    --ak-green-dark: #146B2F;
    --ak-green-light: #E6F3E9;
    --ak-marigold: #F2994A;
    --ak-marigold-dark: #C9762E;
    --ak-marigold-light: #FDECDC;
    --ak-cream: #FBFAF6;
    --ak-text: #1A1A2E;
}

body {
    background-color: var(--ak-cream) !important;
}

h1, h2, h3, h4, h5, h6,
.osahan-main-nav .navbar-brand,
.section-title,
.hero-title {
    font-family: 'Baloo 2', ubuntu, sans-serif;
}

/* ============ HEADER / NAV ============ */
.osahan-main-nav,
.osahan-header {
    background-color: #fff !important;
}

.bg-color-head {
    background-color: var(--ak-navy) !important;
    position: relative;
    margin-bottom: 10px;
}

/* Scalloped "market awning" edge — signature brand touch, pure CSS, no markup change */
.bg-color-head::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -9px;
    width: 100%;
    height: 10px;
    background-image: radial-gradient(circle at 9px 0, transparent 9px, var(--ak-navy) 9.5px);
    background-size: 18px 10px;
    background-repeat: repeat-x;
}

.bg-color-head .nav-link {
    color: #EDEDF7 !important;
    transition: color .15s ease;
}

.bg-color-head .nav-link:hover {
    color: #fff !important;
}

.bg-offer {
    background-color: var(--ak-marigold) !important;
    color: var(--ak-navy-dark) !important;
    border-radius: 6px 6px 6px 0;
}

.osahan-header .btn-success,
.search-box .btn-success {
    background-color: var(--ak-green) !important;
    border-color: var(--ak-green) !important;
}

/* ============ GENERAL BOOTSTRAP COLOR OVERRIDES ============ */
.text-success {
    color: var(--ak-green) !important;
}

.btn-success {
    background-color: var(--ak-green) !important;
    border-color: var(--ak-green) !important;
}

.btn-success:hover,
.btn-success:focus {
    background-color: var(--ak-green-dark) !important;
    border-color: var(--ak-green-dark) !important;
}

.btn-outline-success {
    color: var(--ak-green) !important;
    border-color: var(--ak-green) !important;
}

.btn-outline-success:hover {
    background-color: var(--ak-green) !important;
    color: #fff !important;
}

.badge-danger {
    background-color: var(--ak-marigold) !important;
}

/* ============ HERO / PROMO BANNER ============ */
.hero-banner,
.osahan-slider,
.slick-slide img.promo-banner {
    border-radius: 12px;
}

.hero-scallop-wrap {
    position: relative;
    background-color: var(--ak-navy);
    border-radius: 12px;
    overflow: hidden;
    padding-bottom: 22px;
}

.hero-scallop-wrap .hero-scallop-edge {
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 100%;
    height: 22px;
    display: block;
}

.hero-eyebrow {
    color: var(--ak-marigold);
    font-size: 12px;
    letter-spacing: .04em;
    font-weight: 600;
    text-transform: uppercase;
}

/* ============ PRODUCT CARDS (.list-card is the real markup class) ============ */
.list-card {
    border-radius: 12px !important;
    border: 1px solid #eee !important;
    transition: box-shadow .15s ease, transform .15s ease;
}

.list-card:hover {
    box-shadow: 0 4px 16px rgba(27, 31, 94, 0.08);
    transform: translateY(-2px);
}

.list-card-image .price,
.list-card-image .price.text-success {
    color: var(--ak-navy) !important;
    font-weight: 600;
}

/* "Add to cart" pill button — was orange #ff6000, now brand green */
.list-card-image a.btn,
.addBtn {
    border: 1px solid var(--ak-green) !important;
    color: var(--ak-green) !important;
    background: #fff !important;
}

.list-card-image a.btn:hover,
.list-card-image a.btn:focus,
.addBtn:hover,
.addBtn:focus {
    background: var(--ak-green) !important;
    color: #fff !important;
}

/* Variant selector pills — was bootstrap green #28a745, now brand green */
.variantBox.active {
    border-color: var(--ak-green) !important;
}

.product-fresh-tag {
    position: absolute;
    top: 8px;
    left: 8px;
    background-color: var(--ak-marigold);
    color: var(--ak-navy-dark);
    font-size: 10px;
    font-weight: 600;
    padding: 3px 9px;
    border-radius: 5px 5px 5px 0;
    z-index: 2;
}

/* ============ CATEGORY CHIPS ============ */
.category-chip {
    background-color: var(--ak-green-light);
    color: var(--ak-green-dark);
    font-size: 12px;
    font-weight: 500;
    padding: 6px 14px;
    border-radius: 20px;
    white-space: nowrap;
    display: inline-block;
}

.category-chip.is-inactive {
    background-color: #F1EFE8;
    color: #5F5E5A;
}

/* ============ FOOTER ============ */
footer,
.osahan-footer {
    background-color: var(--ak-navy-dark) !important;
}

footer a,
.osahan-footer a {
    color: #C7C9E8 !important;
}

footer a:hover,
.osahan-footer a:hover {
    color: var(--ak-marigold) !important;
}