/* Hide checkboxes in product cards */
.product-card input[type="checkbox"],
.product-card input[type="checkbox"] + label,
.product-card .form-check,
.product-card .form-check-input,
.product-card .form-check-label,
.product-card [type="checkbox"] {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    position: absolute !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    background: none !important;
}

/* Hide number input spinners */
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
input[type=number] {
    -moz-appearance: textfield;
    appearance: textfield;
}

/* Global font stack (uses loaded Google Fonts in product.html) */
body {
    font-family: "Inter", "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
}

/* Footer specific styles */
.footer-section {
    background-color: #f8f8f8; /* light background */
    color: #333333; /* dark text */
    position: relative;
    z-index: 1; /* ensure footer sits above any accidental page overlap */
}
.footer-section .footer-brand i {
    font-size: 1.4rem;
    color: #ff6b35;
}
.footer-section .footer-brand span {
    vertical-align: middle;
}

.footer-section p.text-muted {
    color: #666666 !important;
    font-size: 16px;
}

/* Ensure any .text-muted used inside footer is readable against light background */
.footer-section .text-muted {
    color: #666666 !important;
    font-size: 16px;
}

/* Make all links inside footer clearly visible (override .text-muted anchors) */
.footer-section a {
    color: #333333 !important;
    text-decoration: none;
}
.footer-section a:hover,
.footer-section a:focus {
    color: #000000 !important;
    text-decoration: underline;
}

.footer-links li a {
    /* stronger contrast to ensure links are readable on light background */
    color: #333333 !important;
    transition: color .15s ease, transform .15s ease;
    font-size: 16px;
    font-weight: 400;
}
.footer-links li a:hover {
    color: #000000;
    text-decoration: none;
    transform: translateX(3px);
}

/* Filter Section Styling */
.filter-section {
    background-color: #0d6efd !important;
    color: white !important;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(13, 110, 253, 0.3);
    padding: 1.5rem;
    margin-bottom: 2rem;
}

.filter-section .card {
    border: none;
    box-shadow: none;
    background-color: transparent;
}

.filter-section .card-header {
    background-color: transparent;
    border: none;
    padding: 0.5rem 0;
    margin-bottom: 1rem;
    border-bottom: 1px solid #e9ecef;
}

.filter-section .card-header h5 {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 600;
    color: #15139f;
}

.filter-section .form-check {
    margin-bottom: 0.5rem;
    padding-left: 1.5rem;
}

.filter-section .form-check-input:checked {
    background-color: #0d6efd;
    border-color: #0d6efd;
}

.filter-section .form-check-label {
    color: #495057;
    cursor: pointer;
    transition: color 0.2s;
}

.filter-section .form-check-label:hover {
    color: #0d6efd;
}

.filter-section .form-select, 
.filter-section .form-control {
    border-radius: 4px;
    border: 1px solid #ced4da;
    padding: 0.375rem 0.75rem;
}

.filter-section .form-select:focus, 
.filter-section .form-control:focus {
    border-color: #ff6b35;
    box-shadow: 0 0 0 0.25rem rgba(255, 107, 53, 0.25);
}

.filter-section .btn-apply {
    background-color: #0d6efd;
    color: white;
    border: none;
    padding: 0.5rem 1.5rem;
    border-radius: 4px;
    font-weight: 500;
    transition: background-color 0.2s;
}

.filter-section .btn-apply:hover {
    background-color: #0b5ed7;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .filter-section {
        margin-top: 1.5rem;
    }
}

.footer-section .social-links a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background-color: rgba(0,0,0,0.05);
    color: #666666;
    transition: background-color .15s ease, transform .12s ease;
}
.footer-section .social-links a:hover {
    background-color: rgba(255, 107, 53, 0.12);
    transform: translateY(-2px);
}

.footer-section hr.border-secondary {
    border-color: rgba(0,0,0,0.1) !important;
}

/* Footer bottom links */
.footer-section a.text-muted.small {
    color: #666666;
}
.footer-section a.text-muted.small:hover {
    color: #000000;
}

/* Ensure footer columns are visible even if other styles try to dim them */
.footer-section .row > [class*="col-"] {
    opacity: 1 !important;
    visibility: visible !important;
}

/* Icons color in contact list */
.footer-section .bi {
    color: #ff6b35;
}

/* Responsive tweaks */
@media (max-width: 991.98px) {
    .footer-section .footer-brand {
        margin-bottom: .5rem;
    }
}

@media (max-width: 575.98px) {
    .footer-section .social-links a {
        width: 32px;
        height: 32px;
        border-radius: 6px;
    }
    .footer-section .col-md-6 {
        text-align: left;
    }
}

/* Accessibility: ensure focus outlines on links */
a:focus {
    outline: 3px solid rgba(255, 107, 53, 0.18);
    outline-offset: 2px;
}

/* Small utility tweak for footer headings */
.footer-section h6 {
    color: #000000;
    font-weight: 900;
}

/* Header styles matching the provided design */
.site-header {
    background: linear-gradient(180deg,#f8f9fa 0,#e9ecef 100%); /* light gray gradient */
    padding: 12px 0;
    z-index: 1030;
    border-bottom: 1px solid #dee2e6;
}
.site-header .header-logo i {
    color: #333;
}
.site-header .header-logo span {
    color: #333;
    font-size: 1rem;
}
.deliver-text small { color: rgba(51,51,51,0.82); }
#deliverLabel { color: #333333; }
.header-nav .nav-link {
    color: rgba(51,51,51,0.85);
    font-weight: 600;
    letter-spacing: .2px;
}
.header-nav .nav-link:hover,
.header-nav .nav-link:focus,
.header-nav .nav-link.active {
    color: #0d6efd; /* blue tint */
}

.btn.btn-icon {
    background: rgba(51,51,51,0.08);
    border: none;
    color: #333;
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    transition: transform .12s ease, background-color .12s ease;
}
.btn.btn-icon:hover {
    transform: translateY(-3px);
    background: rgba(51,51,51,0.12);
}
.flag-icon { font-size: 1.1rem; line-height: 1; }

.cart-badge {
    top: -6px;
    right: -6px;
    font-size: 0.65rem;
    padding: 4px 6px;
    border-radius: 100px;
}

/* Responsive: show nav differently on small screens */
@media (max-width: 767.98px) {
    .header-nav { display: none !important; }
    .site-header .container { justify-content: space-between; }
}

@media (min-width: 768px) and (max-width: 991.98px) {
    .header-nav .nav-link { padding: 0 .6rem; }
}

/* Deliver selector dropdown: hidden by default and shown when the parent has .open */
.deliver-selector { position: relative; display: inline-block; }
.deliver-box { cursor: pointer; display: flex; align-items: center; gap: 8px; }
.deliver-dropdown {
    position: absolute;
    right: 0;
    top: calc(100% + 8px);
    background: #fff;
    color: #111;
    box-shadow: 0 6px 18px rgba(0,0,0,0.12);
    border-radius: 6px;
    padding: 12px;
    min-width: 260px;
    display: none;
    z-index: 1050;
}
.deliver-selector.open .deliver-dropdown { display: block; }
.deliver-dropdown[aria-hidden="true"] { display: none; }
.deliver-dropdown[aria-hidden="false"] { display: block; }
.dd-header { font-weight: 600; margin-bottom: 8px; color: #222; }
.dd-section { margin-bottom: 8px; }
.dd-section label { display: block; font-size: 0.85rem; margin-bottom: 4px; color: #333; }
.dd-section select, .dd-section input[type="text"] { width: 100%; padding: 6px 8px; border: 1px solid #d1d5db; border-radius: 4px; }
.dd-save { background: #0d6efd; color: #fff; border: none; padding: 8px 12px; border-radius: 4px; cursor: pointer; }

@media (max-width: 767.98px) {
    .deliver-dropdown { right: auto; left: 0; width: calc(100vw - 32px); max-width: 420px; }
}

/* Inline CSS removal utilities and components */
.hidden { display: none !important; }
.pos-relative { position: relative; }
.text-white { color: #fff !important; }
.cursor-pointer { cursor: pointer; }
.overflow-hidden { overflow: hidden; }
.object-center { object-position: center; }
.p-0 { padding: 0 !important; }
.py-20 { padding: 20px 0; }
.bg-white { background: #fff; }
.cursor-pointer { cursor: pointer; }

/* Logo */
.logo-link { text-decoration: none; color: inherit; display: flex; align-items: center; gap: 8px; }
.logo-img { height: 28px; width: auto; display: block; }
.logo-text { font-weight: 600; }

/* Search result items */
.sr-item { display: flex; gap: 12px; padding: 10px 12px; cursor: pointer; align-items: center; border-bottom: 1px solid #f0f2f5; }
.sr-title { font-weight: 600; color: var(--primary, #0b63d6); font-size: 14px; }
.sr-meta { font-size: 12px; color: #6b7280; }
.sr-price { white-space: nowrap; font-weight: 700; color: #111827; font-size: 14px; }
.sr-content { flex: 1; }

/* Search suggestions row (replaces inline styles in header.php) */
.ss-flex { flex: 1; }
.ss-name { font-weight: 600; color: #0b63d6; font-size: 14px; }
.ss-meta { font-size: 12px; color: #6b7280; }
.ss-price { white-space: nowrap; font-weight: 700; color: #111827; font-size: 14px; }

/* Banner overlay and gradient */
.banner-overlay { position: absolute; bottom: 0; left: 0; width: 100%; background: linear-gradient(to top, rgba(0,0,0,0.5), transparent); padding: 60px 20px 20px; color: white; text-align: center; }

/* Scroll buttons */
.scroll-btn { position: absolute; top: 50%; z-index: 10; transform: translateY(-50%); background: rgba(255,255,255,0.5); border: none; border-radius: 50%; width: 50px; height: 50px; font-size: 1.2rem; cursor: pointer; backdrop-filter: blur(4px); transition: background 0.3s; }
.scroll-btn.left-btn { left: 20px; }
.scroll-btn.right-btn { right: 20px; }

/* Buttons */
.btn { display: inline-block; border: none; cursor: pointer; }
.btn-pill { border-radius: 50px; }
.btn-shadow { box-shadow: 0 4px 15px rgba(0,0,0,0.3); }
.btn[disabled] { opacity: 0.5; cursor: not-allowed; }

/* Form controls */
.form-input, .form-select { width: 100%; padding: 8px; border: 1px solid #d1d5db; border-radius: 4px; background-color: #fff; }
.form-label { display: block; margin-bottom: 5px; font-weight: 500; color: #374151; }

/* Width helpers */
.w-110 { width: 110px; }
.w-180 { width: 180px; }

/* Object-fit and sizing */
.object-cover { object-fit: cover; }
.object-contain { object-fit: contain; }
.object-fill { object-fit: fill; }
.h-500 { height: 500px; }
.h-100 { height: 100%; }
.w-100 { width: 100%; }

/* Text helpers */
.text-center { text-align: center; }
.text-muted { color: #6b7280; }
.text-strike { text-decoration: line-through; }
.d-block { display: block; }
.mt-30 { margin-top: 30px; }
.fs-12 { font-size: 12px; }
.fs-18 { font-size: 18px; }
/* Banner overlay and gradient */
.banner-overlay { position: absolute; bottom: 0; left: 0; width: 100%; background: linear-gradient(to top, rgba(0,0,0,0.5), transparent); padding: 60px 20px 20px; color: white; text-align: center; }

/* Scroll buttons */
.scroll-btn { position: absolute; top: 50%; z-index: 10; transform: translateY(-50%); background: rgba(255,255,255,0.5); border: none; border-radius: 50%; width: 50px; height: 50px; font-size: 1.2rem; cursor: pointer; backdrop-filter: blur(4px); transition: background 0.3s; }
.scroll-btn.left-btn { left: 20px; }
.scroll-btn.right-btn { right: 20px; }

/* Buttons */
.btn { display: inline-block; border: none; cursor: pointer; }
.btn-pill { border-radius: 50px; }
.btn-shadow { box-shadow: 0 4px 15px rgba(0,0,0,0.3); }
.btn[disabled] { opacity: 0.5; cursor: not-allowed; }

/* Form controls */
.form-input, .form-select { width: 100%; padding: 8px; border: 1px solid #d1d5db; border-radius: 4px; background-color: #fff; }
.form-label { display: block; margin-bottom: 5px; font-weight: 500; color: #374151; }

/* Width helpers */
.w-110 { width: 110px; }
.w-180 { width: 180px; }

/* Object-fit and sizing */
.object-cover { object-fit: cover; }
.object-contain { object-fit: contain; }
.object-fill { object-fit: fill; }
.h-500 { height: 500px; }
.h-100 { height: 100%; }
.w-100 { width: 100%; }

/* Text helpers */
.text-center { text-align: center; }
.text-muted { color: #6b7280; }
.text-strike { text-decoration: line-through; }
.d-block { display: block; }
.mt-30 { margin-top: 30px; }
.fs-12 { font-size: 12px; }
.fs-18 { font-size: 18px; }
/* Banner overlay and gradient */
.banner-overlay { position: absolute; bottom: 0; left: 0; width: 100%; background: linear-gradient(to top, rgba(0,0,0,0.5), transparent); padding: 60px 20px 20px; color: white; text-align: center; }

/* Scroll buttons */
.scroll-btn { position: absolute; top: 50%; z-index: 10; transform: translateY(-50%); background: rgba(255,255,255,0.5); border: none; border-radius: 50%; width: 50px; height: 50px; font-size: 1.2rem; cursor: pointer; backdrop-filter: blur(4px); transition: background 0.3s; }
.scroll-btn.left-btn { left: 20px; }
.scroll-btn.right-btn { right: 20px; }

/* Buttons */
.btn { display: inline-block; border: none; cursor: pointer; }
.btn-pill { border-radius: 50px; }
.btn-shadow { box-shadow: 0 4px 15px rgba(0,0,0,0.3); }
.btn[disabled] { opacity: 0.5; cursor: not-allowed; }

/* Form controls */
.form-input, .form-select { width: 100%; padding: 8px; border: 1px solid #d1d5db; border-radius: 4px; background-color: #fff; }
.form-label { display: block; margin-bottom: 5px; font-weight: 500; color: #374151; }

/* Width helpers */
.w-110 { width: 110px; }
.w-180 { width: 180px; }

/* Object-fit and sizing */
.object-cover { object-fit: cover; }
.object-contain { object-fit: contain; }
.object-fill { object-fit: fill; }
.h-500 { height: 500px; }
.h-100 { height: 100%; }
.w-100 { width: 100%; }

/* Text helpers */
.text-center { text-align: center; }
.text-muted { color: #6b7280; }
.text-strike { text-decoration: line-through; }
.d-block { display: block; }
.mt-30 { margin-top: 30px; }
.lh-12 { line-height: 1.2; }
.lh-10 { line-height: 1; }
.fs-12 { font-size: 12px; }
.fs-18 { font-size: 18px; }
/* Banner overlay and gradient */
.banner-overlay { position: absolute; bottom: 0; left: 0; width: 100%; background: linear-gradient(to top, rgba(0,0,0,0.5), transparent); padding: 60px 20px 20px; color: white; text-align: center; }

/* Scroll buttons */
.scroll-btn { position: absolute; top: 50%; z-index: 10; transform: translateY(-50%); background: rgba(255,255,255,0.5); border: none; border-radius: 50%; width: 50px; height: 50px; font-size: 1.2rem; cursor: pointer; backdrop-filter: blur(4px); transition: background 0.3s; }
.scroll-btn.left-btn { left: 20px; }
.scroll-btn.right-btn { right: 20px; }

/* Buttons */
.btn { display: inline-block; border: none; cursor: pointer; }
.btn-pill { border-radius: 50px; }
.btn-shadow { box-shadow: 0 4px 15px rgba(0,0,0,0.3); }
.btn[disabled] { opacity: 0.5; cursor: not-allowed; }

/* Form controls */
.form-input, .form-select { width: 100%; padding: 8px; border: 1px solid #d1d5db; border-radius: 4px; background-color: #fff; }
.form-label { display: block; margin-bottom: 5px; font-weight: 500; color: #374151; }

/* Width helpers */
.w-110 { width: 110px; }
.w-180 { width: 180px; }

/* Object-fit and sizing */
.object-cover { object-fit: cover; }
.object-contain { object-fit: contain; }
.object-fill { object-fit: fill; }
.h-500 { height: 500px; }
.h-100 { height: 100%; }
.w-100 { width: 100%; }

/* Text helpers */
.text-center { text-align: center; }
.text-muted { color: #6b7280; }
.text-strike { text-decoration: line-through; }
.d-block { display: block; }
.mt-30 { margin-top: 30px; }
.fs-12 { font-size: 12px; }
.fs-18 { font-size: 18px; }
/* Banner overlay and gradient */
.banner-overlay { position: absolute; bottom: 0; left: 0; width: 100%; background: linear-gradient(to top, rgba(0,0,0,0.5), transparent); padding: 60px 20px 20px; color: white; text-align: center; }

/* Scroll buttons */
.scroll-btn { position: absolute; top: 50%; z-index: 10; transform: translateY(-50%); background: rgba(255,255,255,0.5); border: none; border-radius: 50%; width: 50px; height: 50px; font-size: 1.2rem; cursor: pointer; backdrop-filter: blur(4px); transition: background 0.3s; }
.scroll-btn.left-btn { left: 20px; }
.scroll-btn.right-btn { right: 20px; }

/* Buttons */
.btn { display: inline-block; border: none; cursor: pointer; }
.btn-pill { border-radius: 50px; }
.btn-shadow { box-shadow: 0 4px 15px rgba(0,0,0,0.3); }
.btn[disabled] { opacity: 0.5; cursor: not-allowed; }

/* Form controls */
.form-input, .form-select { width: 100%; padding: 8px; border: 1px solid #d1d5db; border-radius: 4px; background-color: #fff; }
.form-label { display: block; margin-bottom: 5px; font-weight: 500; color: #374151; }

/* Width helpers */
.w-110 { width: 110px; }
.w-180 { width: 180px; }

/* Object-fit and sizing */
.object-cover { object-fit: cover; }
.object-contain { object-fit: contain; }
.object-fill { object-fit: fill; }
.h-500 { height: 500px; }
.h-100 { height: 100%; }
.w-100 { width: 100%; }

/* Text helpers */
.text-center { text-align: center; }
.text-muted { color: #6b7280; }
.text-strike { text-decoration: line-through; }
.d-block { display: block; }
.mt-30 { margin-top: 30px; }
.fs-12 { font-size: 12px; }
.fs-18 { font-size: 18px; }
/* Banner overlay and gradient */
.banner-overlay { position: absolute; bottom: 0; left: 0; width: 100%; background: linear-gradient(to top, rgba(0,0,0,0.5), transparent); padding: 60px 20px 20px; color: white; text-align: center; }

/* Scroll buttons */
.scroll-btn { position: absolute; top: 50%; z-index: 10; transform: translateY(-50%); background: rgba(255,255,255,0.5); border: none; border-radius: 50%; width: 50px; height: 50px; font-size: 1.2rem; cursor: pointer; backdrop-filter: blur(4px); transition: background 0.3s; }
.scroll-btn.left-btn { left: 20px; }
.scroll-btn.right-btn { right: 20px; }

/* Buttons */
.btn { display: inline-block; border: none; cursor: pointer; }
.btn-pill { border-radius: 50px; }
.btn-shadow { box-shadow: 0 4px 15px rgba(0,0,0,0.3); }
.btn[disabled] { opacity: 0.5; cursor: not-allowed; }

/* Form controls */
.form-input, .form-select { width: 100%; padding: 8px; border: 1px solid #d1d5db; border-radius: 4px; background-color: #fff; }
.form-label { display: block; margin-bottom: 5px; font-weight: 500; color: #374151; }

/* Width helpers */
.w-110 { width: 110px; }
.w-180 { width: 180px; }

/* Object-fit and sizing */
.object-cover { object-fit: cover; }
.object-contain { object-fit: contain; }
.object-fill { object-fit: fill; }
.h-500 { height: 500px; }
.h-100 { height: 100%; }
.w-100 { width: 100%; }

/* Text helpers */
.text-center { text-align: center; }
.text-muted { color: #6b7280; }
.text-strike { text-decoration: line-through; }
.d-block { display: block; }
.mt-30 { margin-top: 30px; }
.fs-12 { font-size: 12px; }
.fs-18 { font-size: 18px; }
/* Banner overlay and gradient */
.banner-overlay { position: absolute; bottom: 0; left: 0; width: 100%; background: linear-gradient(to top, rgba(0,0,0,0.5), transparent); padding: 60px 20px 20px; color: white; text-align: center; }

/* Scroll buttons */
.scroll-btn { position: absolute; top: 50%; z-index: 10; transform: translateY(-50%); background: rgba(255,255,255,0.5); border: none; border-radius: 50%; width: 50px; height: 50px; font-size: 1.2rem; cursor: pointer; backdrop-filter: blur(4px); transition: background 0.3s; }
.scroll-btn.left-btn { left: 20px; }
.scroll-btn.right-btn { right: 20px; }

/* Buttons */
.btn { display: inline-block; border: none; cursor: pointer; }
.btn-pill { border-radius: 50px; }
.btn-shadow { box-shadow: 0 4px 15px rgba(0,0,0,0.3); }
.btn[disabled] { opacity: 0.5; cursor: not-allowed; }

/* Form controls */
.form-input, .form-select { width: 100%; padding: 8px; border: 1px solid #d1d5db; border-radius: 4px; background-color: #fff; }
.form-label { display: block; margin-bottom: 5px; font-weight: 500; color: #374151; }

/* Width helpers */
.w-110 { width: 110px; }
.w-180 { width: 180px; }

/* Object-fit and sizing */
.object-cover { object-fit: cover; }
.object-contain { object-fit: contain; }
.object-fill { object-fit: fill; }
.h-500 { height: 500px; }
.h-100 { height: 100%; }
.w-100 { width: 100%; }

/* Text helpers */
.text-center { text-align: center; }
.text-muted { color: #6b7280; }
.text-strike { text-decoration: line-through; }
.d-block { display: block; }
.mt-30 { margin-top: 30px; }
.lh-12 { line-height: 1.2; }
.lh-10 { line-height: 1; }
.fs-12 { font-size: 12px; }
.fs-18 { font-size: 18px; }
/* Banner overlay and gradient */
.banner-overlay { position: absolute; bottom: 0; left: 0; width: 100%; background: linear-gradient(to top, rgba(0,0,0,0.5), transparent); padding: 60px 20px 20px; color: white; text-align: center; }

/* Scroll buttons */
.scroll-btn { position: absolute; top: 50%; z-index: 10; transform: translateY(-50%); background: rgba(255,255,255,0.5); border: none; border-radius: 50%; width: 50px; height: 50px; font-size: 1.2rem; cursor: pointer; backdrop-filter: blur(4px); transition: background 0.3s; }
.scroll-btn.left-btn { left: 20px; }
.scroll-btn.right-btn { right: 20px; }

/* Buttons */
.btn { display: inline-block; border: none; cursor: pointer; }
.btn-pill { border-radius: 50px; }
.btn-shadow { box-shadow: 0 4px 15px rgba(0,0,0,0.3); }
.btn[disabled] { opacity: 0.5; cursor: not-allowed; }

/* Form controls */
.form-input, .form-select { width: 100%; padding: 8px; border: 1px solid #d1d5db; border-radius: 4px; background-color: #fff; }
.form-label { display: block; margin-bottom: 5px; font-weight: 500; color: #374151; }

/* Width helpers */
.w-110 { width: 110px; }
.w-180 { width: 180px; }

/* Object-fit and sizing */
.object-cover { object-fit: cover; }
.object-contain { object-fit: contain; }
.object-fill { object-fit: fill; }
.h-500 { height: 500px; }
.h-100 { height: 100%; }
.w-100 { width: 100%; }

/* Text helpers */
.text-center { text-align: center; }
.text-muted { color: #6b7280; }
.text-strike { text-decoration: line-through; }
.d-block { display: block; }
.mt-30 { margin-top: 30px; }
.fs-12 { font-size: 12px; }
.fs-18 { font-size: 18px; }
/* Banner overlay and gradient */
.banner-overlay { position: absolute; bottom: 0; left: 0; width: 100%; background: linear-gradient(to top, rgba(0,0,0,0.5), transparent); padding: 60px 20px 20px; color: white; text-align: center; }

/* Scroll buttons */
.scroll-btn { position: absolute; top: 50%; z-index: 10; transform: translateY(-50%); background: rgba(255,255,255,0.5); border: none; border-radius: 50%; width: 50px; height: 50px; font-size: 1.2rem; cursor: pointer; backdrop-filter: blur(4px); transition: background 0.3s; }
.scroll-btn.left-btn { left: 20px; }
.scroll-btn.right-btn { right: 20px; }

/* Buttons */
.btn { display: inline-block; border: none; cursor: pointer; }
.btn-pill { border-radius: 50px; }
.btn-shadow { box-shadow: 0 4px 15px rgba(0,0,0,0.3); }
.btn[disabled] { opacity: 0.5; cursor: not-allowed; }

/* Form controls */
.form-input, .form-select { width: 100%; padding: 8px; border: 1px solid #d1d5db; border-radius: 4px; background-color: #fff; }
.form-label { display: block; margin-bottom: 5px; font-weight: 500; color: #374151; }

/* Width helpers */
.w-110 { width: 110px; }
.w-180 { width: 180px; }

/* Object-fit and sizing */
.object-cover { object-fit: cover; }
.object-contain { object-fit: contain; }
.object-fill { object-fit: fill; }
.h-500 { height: 500px; }
.h-100 { height: 100%; }
.w-100 { width: 100%; }

/* Text helpers */
.text-center { text-align: center; }
.text-muted { color: #6b7280; }
.text-strike { text-decoration: line-through; }
.d-block { display: block; }
.mt-30 { margin-top: 30px; }

/* Utility and component classes for product-detail.php and profile.php */
/* Component: ratio */
.ratio-1x1 { aspect-ratio: 1 / 1; }

/* Utility: text decoration */
.no-underline { text-decoration: none; }

/* Utility: whitespace */
.nowrap { white-space: nowrap; }

/* Utility: flex and sizing */
.d-flex { display: flex; }
.flex-column { flex-direction: column; }
.justify-content-center { justify-content: center; }
.justify-content-end { justify-content: flex-end; }
.justify-content-between { justify-content: space-between; }
.align-items-center { align-items: center; }
.cursor-pointer { cursor: pointer; }
.flex-none { flex: 0 0 auto; }
.w-90 { width: 90px; }
.h-80 { height: 80px; }
.h-42 { height: 42px; }
.min-w-100 { min-width: 100px; }
.max-w-150 { max-width: 150px; }
.size-16 { width: 16px; height: 16px; }

/* Utility: rounded tweaks */
.rounded-l-none { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.rounded-r-none { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.rounded-full { border-radius: 50%; }

/* Utility: spacing */
.m-0 { margin: 0; }
.mt-0 { margin-top: 0; }
.mt-5 { margin-top: 5px; }
.mt-10 { margin-top: 10px; }
.mt-15 { margin-top: 15px; }
.mt-20 { margin-top: 20px; }
.mb-8 { margin-bottom: 8px; }
.mb-10 { margin-bottom: 10px; }
.mb-15 { margin-bottom: 15px; }
.mb-20 { margin-bottom: 20px; }
.p-8 { padding: 8px; }
.p-15 { padding: 15px; }
.p-20 { padding: 20px; }
.p-40 { padding: 40px; }
.pt-15 { padding-top: 15px; }
.py-10 { padding-top: 10px; padding-bottom: 10px; }
.pr-5px { padding-right: 5px; }
.gap-5 { gap: 5px; }
.gap-6 { gap: 6px; }
.gap-8 { gap: 8px; }
.gap-10 { gap: 10px; }
.gap-15 { gap: 15px; }
.gap-20 { gap: 20px; }

/* Utility: font-size */
.fs-14 { font-size: 14px; }
.fs-16 { font-size: 16px; }
.fs-64 { font-size: 4rem; }

/* Utility: opacity */
.op-80 { opacity: 0.8; }

/* Colors */
.badge-green { background-color: #10b981; color: #fff; }
.text-blue { color: #1a73e8; }
.text-gray-700 { color: #374151; }
.text-gray-600 { color: #6b7280; }
.bg-light { background-color: #f9fafb; }

/* Buttons */
.btn-outline-primary { background-color: rgba(13,110,253,0.1); color: var(--primary, #0d6efd); border: 1px solid var(--primary, #0d6efd); }

/* Modal components */
.modal { position: fixed; inset: 0; z-index: 9999; background: rgba(0,0,0,0.5); overflow-y: auto; }
.modal-panel { max-width: 800px; width: 95%; margin: 40px auto; padding: 20px; max-height: 90vh; background: #fff; display: flex; flex-direction: column; box-shadow: 0 10px 25px rgba(0,0,0,0.15); }
.modal-header { margin-top: 0; padding-bottom: 15px; border-bottom: 1px solid #e5e7eb; display: flex; justify-content: space-between; align-items: center; }
.modal-body { overflow-y: auto; flex: 1; padding-right: 5px; }
.btn-icon { border: none; background: none; cursor: pointer; }
.close-btn { font-size: 24px; color: #6b7280; }

/* Small utility borders and radius */
.border-gray { border: 1px solid #e5e7eb; }
.border-top-gray { border-top: 1px solid #e5e7eb; }
.rounded-6 { border-radius: 6px; }
.rounded-8 { border-radius: 8px; }

/* Component buttons used in delivery instructions */
.addr-type-btn { padding: 8px 16px; border-radius: 8px; border: 1px solid #d1d5db; background-color: #f3f4f6; color: #4b5563; cursor: pointer; }
.addr-type-btn.active { background-color: #1a73e8; color: #fff; }
.weekend-option-btn { padding: 6px 16px; border-radius: 6px; border: 1px solid #d1d5db; background-color: #f3f4f6; color: #4b5563; cursor: pointer; }

/* Checkout modal content utilities */
.co-modal-content { max-width: 800px; width: 95%; margin: 20px auto; padding: 20px; max-height: 90vh; display: flex; flex-direction: column; }
.co-modal-title { margin-top: 0; padding-bottom: 15px; border-bottom: 1px solid #e5e7eb; }

/* Profile avatar sizing */
.w-100px { width: 100px; }
.h-100px { height: 100px; }

/* Flash Banner — global styles */
.flash-banner { position: relative; width: 100%; height: 500px; overflow: hidden; }
.flash-banner .banner-img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }
.banner-title { margin: 0 0 8px; font-size: 2.5rem; font-weight: 700; text-shadow: 0 2px 4px rgba(0,0,0,0.5); }
.banner-subtitle { margin: 0; font-size: 1.2rem; text-shadow: 0 1px 2px rgba(0,0,0,0.5); }
/* CTA below banner */
.banner-cta { text-align: center; margin-top: 14px; }
.banner-cta .btn { display: inline-flex; }
@media (max-width: 576px) { .flash-banner { height: 340px; } }

/* Flash-sale section container: remove default padding in fallback block */
.flash-sale-section .section-container { padding: 0; }

/* Small utility: 2px margin-bottom */
.mb-2px { margin-bottom: 2px; }

/* Utility additions for product-detail inline style replacements */
.btn-pad-md { padding: 0.5rem 1rem; }
.no-right-radius { border-top-right-radius: 0 !important; border-bottom-right-radius: 0 !important; }
.no-left-radius { border-top-left-radius: 0 !important; border-bottom-left-radius: 0 !important; }
.minw-100 { min-width: 100px; }

/* New utility classes for inline CSS migration */
.text-capitalize { text-transform: capitalize; }
.mt-25 { margin-top: 25px; }
.h-200 { height: 200px; }

/* Order Management Modal (class-based, replaces inline styles) */
.om-modal { display: none; position: fixed; z-index: 1000; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.5); }
.om-modal-content { background-color: #fefefe; margin: 15% auto; padding: 20px; border: 1px solid #888; width: 80%; max-width: 500px; border-radius: 5px; }
.om-modal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; }
.om-modal-close { cursor: pointer; font-size: 24px; }
.om-mb-20 { margin-bottom: 20px; }
.om-select { width: 100%; padding: 8px; margin-top: 8px; border: 1px solid #ddd; border-radius: 4px; }
.om-modal-actions { display: flex; justify-content: flex-end; gap: 10px; }
.om-btn { padding: 8px 16px; border: none; border-radius: 4px; cursor: pointer; }
.om-btn-primary { background: #007bff; color: #fff; }
.om-btn-secondary { background: #6c757d; color: #fff; }

/* Utility: content manager inserted images */
.cm-img { max-width: 100%; height: auto; }

/* Utility additions for checkout modal columns and spacing */
.mb-15 { margin-bottom: 15px; }
.pr-15 { padding-right: 15px; }
.pl-15 { padding-left: 15px; }
.min-w-300 { min-width: 300px; }
.border-right-gray { border-right: 1px solid #e5e7eb; }