/* =====================================================================
   Farm Sourced Organic – storefront responsive fixes
   Loaded last (after style.css and the page CSS) so these targeted rules win.
   The look follows the existing Ogani theme: same colours, type and spacing.
   ===================================================================== */

:root {
    --fso-green: #7fad39;
    --fso-green-dark: #6a9632;
    --fso-ink: #1c1c1c;
    --fso-muted: #6f6f6f;
    --fso-line: #ebebeb;
    --fso-soft: #f5f5f5;
}

img { max-width: 100%; }

/* ---------- Account dropdown in the top bar ---------- */
/* Lift the top bar above the main header row so the menu opens over the cart icons. */
.header__top { position: relative; z-index: 30; }
.header__top__right__language ul { min-width: 160px; z-index: 1000; border-radius: 6px; box-shadow: 0 8px 24px rgba(0, 0, 0, .18); }
.header__top__right__language ul li a { display: block; white-space: nowrap; }
.header__top__right__language ul li a:hover { color: var(--fso-green); }

/* ---------- Product cards (home, shop, category, wishlist) ---------- */
.featured__item__pic { background-size: cover; background-repeat: no-repeat; border-radius: 8px; }
.product-badge {
    position: absolute; top: 10px; left: 10px; z-index: 2;
    background: var(--fso-green); color: #fff; font-size: 11px; font-weight: 700;
    text-transform: uppercase; letter-spacing: .03em; padding: 3px 9px; border-radius: 20px;
    pointer-events: none;
}
.product-badge-sale { background: #e8542f; }
.featured__item__text h6 a { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* ---------- Search bar (home + shop): input and button side by side ---------- */
.hero__search__form form { display: flex; flex-direction: row !important; flex: 1 1 auto; width: 100%; height: 100%; }
.hero__search__form form input { flex: 1 1 auto; min-width: 0 !important; width: auto; margin-bottom: 0 !important; color: var(--fso-ink); }
.hero__search__form form button { position: static; flex: 0 0 auto; width: auto !important; height: auto; padding-left: 22px; padding-right: 22px; }

/* ---------- Product detail ---------- */
.stock-note { font-size: 14px; color: #8a6d1f; background: #fff8e1; border-radius: 6px; padding: 9px 12px; margin-bottom: 16px; }
.stock-note-out { color: #a5282a; background: #fdecea; }
.btn-wishlist {
    margin-top: 12px; background: none; border: 1px solid var(--fso-line); color: var(--fso-ink);
    border-radius: 4px; padding: 10px 18px; font-size: 14px; font-weight: 600; cursor: pointer; transition: all .2s;
}
.btn-wishlist:hover { border-color: #e8542f; color: #e8542f; }
.btn-wishlist .fa-heart { color: #e8542f; }
.thumbnail-item { padding: 0; }
.product-actions button:disabled, .btn-wishlist:disabled { opacity: .6; cursor: progress; }

/* ---------- Cart ---------- */
.item-name a { color: inherit; }
.item-name a:hover { color: var(--fso-green); }
.stock-warning { color: #a35a05; font-size: 13px; font-weight: 600; }
.empty-cart-icon { font-size: 56px; color: #ddd; margin-bottom: 14px; display: block; }

/* ---------- Checkout: delivery / address / store choices ---------- */
.checkout__input__checkbox label {
    position: relative; display: block; padding: 14px 16px 14px 48px !important;
    border: 1px solid #e1e1e1; border-radius: 6px; cursor: pointer; line-height: 1.5; margin-bottom: 10px;
}
.checkout__input__checkbox label input {
    position: absolute; left: 0; top: 0; width: 1px; height: 1px; opacity: 0; visibility: visible; pointer-events: none;
}
.checkout__input__checkbox label .checkmark {
    left: 16px; top: 50%; width: 20px; height: 20px; margin-top: -10px; border-radius: 50%; border: 2px solid #b5b5b5; background: #fff;
}
.checkout__input__checkbox label .checkmark:after {
    left: 4px; top: 4px; width: 8px; height: 8px; border: 0; border-radius: 50%; background: #fff; transform: none;
}
.checkout__input__checkbox label input:checked ~ .checkmark { background: var(--fso-green); border-color: var(--fso-green); }
.checkout__input__checkbox label:has(input:checked) { border-color: var(--fso-green); background: #f7fbf1; }
.checkout__input__checkbox label input:focus-visible ~ .checkmark { box-shadow: 0 0 0 3px rgba(127, 173, 57, .35); }
.checkout__input__checkbox small { color: var(--fso-muted); }
.option-tag { display: inline-block; font-size: 11px; font-weight: 700; color: var(--fso-green-dark); background: #eef6e3; border-radius: 10px; padding: 1px 8px; margin-left: 4px; }

/* ---------- Checkout: pickup store finder ---------- */
.store-finder { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 8px; }
.store-finder__search { display: flex; flex: 1 1 260px; border: 1px solid #e1e1e1; border-radius: 6px; overflow: hidden; }
.checkout__input .store-finder__search input { border: 0; height: 44px; margin: 0; flex: 1; min-width: 0; padding-left: 14px; }
.store-finder__search .site-btn { padding: 0 18px; border-radius: 0; }
.store-finder__locate { background: #fff; border: 1px solid var(--fso-green); color: var(--fso-green-dark); border-radius: 6px; height: 44px; padding: 0 16px; font-weight: 700; cursor: pointer; }
.store-finder__locate:hover { background: #f7fbf1; }
.store-finder__locate:disabled { opacity: .7; cursor: progress; }
.store-finder__label { margin: 6px 0 10px; }
.store-finder__empty { border: 1px dashed #d9d9d9; border-radius: 8px; padding: 16px; }

/* ---------- Orders ---------- */
.order-items { list-style: none; padding: 0; margin: 0 0 10px; }
.order-items li { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--fso-line); }
.order-items li > span:last-child { margin-left: auto; font-weight: 700; white-space: nowrap; }
.order-item-thumb { width: 48px; height: 48px; object-fit: cover; border-radius: 6px; background: var(--fso-soft); flex: none; }
.order-item-name a { color: var(--fso-ink); }
.order-payment-note { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; border-radius: 8px; }
.order-detail-actions { display: grid; gap: 10px; }
.order-detail-actions .primary-btn { text-align: center; }
.badge { font-size: 12px; padding: .4em .7em; }
.badge-secondary { background: #8a929a; }
.order-actions-cell { white-space: nowrap; }
.order-actions-cell .primary-btn { padding: 8px 14px; }

/* ---------- Login / register ---------- */
.auth-header { box-shadow: 0 1px 0 var(--fso-line); }
.auth-header__bar { display: flex; align-items: center; justify-content: space-between; padding: 16px 0; }
.auth-header__logo img { height: 46px; width: auto; }
.auth-header__back { color: var(--fso-muted); font-size: 14px; font-weight: 600; }
.auth-header__back:hover { color: var(--fso-green); }
.login-section .login-form, .register-section .register-form { background: #fff; border-radius: 10px; }
.register-section .register-form { padding: 28px; box-shadow: 0 .5rem 1rem rgba(0,0,0,.08); }
.btn-google { background: #fff; border: 1px solid #dadce0; color: #3c4043; font-weight: 600; }
.btn-google:hover { background: #f8f9fa; color: #202124; }
.btn-google .fa-google { color: #ea4335; }

/* ---------- Mobile menu ---------- */
.humberger__menu__user { font-weight: 700; color: var(--fso-ink); }
.humberger__menu__user .fa { color: var(--fso-green); margin-right: 6px; }
.humberger__menu__contact a { color: inherit; }

/* =====================================================================
   Tablets and below
   ===================================================================== */
@media (max-width: 991.98px) {
    .header__logo { padding: 14px 0; }
    .header__logo img { max-height: 46px; width: auto; }
    .humberger__open { top: 18px; }
    .header__cart { padding: 0 0 14px; text-align: center; }

    .hero__search__form { width: 100%; float: none; }
    .hero__search__phone { float: none; margin-top: 14px; }
    .hero__item { min-height: 0; height: auto; aspect-ratio: 870 / 431; }

    .sticky-images { position: static !important; }
}

/* =====================================================================
   Phones
   ===================================================================== */
@media (max-width: 767.98px) {
    body { font-size: 15px; }
    .spad { padding-top: 40px; padding-bottom: 40px; }
    .footer.spad { padding-top: 40px; }

    /* Search */
    .hero { padding-bottom: 10px; }
    .hero__search { margin-bottom: 18px; }
    .hero__search__form { height: 48px; }
    .hero__search__form form input { height: 46px; padding-left: 14px; font-size: 15px; }
    .hero__search__form form button { padding: 0 16px; font-size: 13px; }
    .hero__search__phone { display: none; }
    .hero__item { border-radius: 8px; }

    /* Home filters */
    #category-title { font-size: 24px; margin-bottom: 14px; }
    .filter-controls { justify-content: stretch; gap: 10px; }
    .category-filter-wrapper, .sort-filter-wrapper { flex: 1 1 0; }
    .category-btn, .sort-btn { min-width: 0; width: 100%; padding: 10px 14px; font-size: 14px; }
    .featured { padding-top: 10px !important; }

    /* Product cards: square images, two per row */
    body .featured__item__pic { height: auto !important; aspect-ratio: 1 / 1; }
    .featured__item { margin-bottom: 18px; }
    .featured__item__text { padding-top: 10px !important; }
    .featured__item__text h6 { font-size: 14px; margin-bottom: 4px; }
    .featured__item__text h5 { font-size: 15px; }
    .container-fluid.px-3 .row > [class*="col-"], .container-fluid.px-4 .row > [class*="col-"] { padding-left: 8px; padding-right: 8px; }

    /* Shop sidebar becomes a scrollable chip row */
    .product .sidebar__item { padding: 12px 0 4px; margin-bottom: 16px; box-shadow: none; }
    .product .sidebar__item h4 { display: none; }
    .product .sidebar__item ul { display: flex; gap: 8px; overflow-x: auto; padding: 0 0 8px; margin: 0; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
    .product .sidebar__item ul::-webkit-scrollbar { display: none; }
    .product .sidebar__item ul li { flex: 0 0 auto; list-style: none; }
    .product .sidebar__item ul li a { display: block; white-space: nowrap; padding: 7px 14px; border: 1px solid #e1e1e1; border-radius: 20px; font-size: 14px; line-height: 1.3; color: var(--fso-ink); }
    .product .sidebar__item ul li.active a { background: var(--fso-green); border-color: var(--fso-green); color: #fff; }
    .filter__item { padding: 14px; margin-bottom: 18px; }
    .filter__item .filter__sort { margin-top: 12px; text-align: left; }
    .product__pagination a { margin-bottom: 8px; }

    /* Product detail */
    .product-detail-container { padding: 12px 15px !important; }
    .product-image-section, .product-info-section { padding: 0 !important; }
    .product-info-section { margin-top: 10px; }
    .product-title { font-size: 20px !important; }
    .current-price { font-size: 24px !important; }
    .btn-wishlist { width: 100%; }
    .product-tabs .nav-tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
    .product-tabs .nav-tabs::-webkit-scrollbar { display: none; }
    .product-tabs .nav-link { white-space: nowrap; }
    .specs-table { width: 100%; }
    .product-card img { height: auto !important; aspect-ratio: 1 / 1; object-fit: cover; }

    /* Cart: thumbnail beside details instead of a full-width photo */
    .cart-container { padding-left: 0; padding-right: 0; }
    .cart-item { flex-direction: row !important; align-items: flex-start; gap: 14px !important; }
    .cart-item .item-image { flex: 0 0 84px; }
    .cart-item .item-image img { width: 84px !important; height: 84px !important; max-height: none !important; object-fit: cover; border-radius: 6px; }
    .cart-item .item-details { min-width: 0; flex: 1; }
    .item-actions { flex-direction: row !important; flex-wrap: wrap; align-items: center !important; }
    .action-buttons { width: auto !important; }

    /* Wishlist actions stack inside the two-up cards */
    .wishlist-actions { flex-direction: column; }

    /* Checkout */
    .checkout__form h4 { font-size: 20px; }
    .checkout__input__checkbox label { font-size: 15px; }
    .checkout__order { padding: 24px 18px; margin-top: 10px; }

    /* Order history: each order becomes a card */
    .order-history-table table, .order-history-table tbody, .order-history-table tr, .order-history-table td { display: block; width: 100%; }
    .order-history-table thead { display: none; }
    .order-history-table tr { border: 1px solid var(--fso-line); border-radius: 8px; padding: 12px 14px; margin-bottom: 14px; }
    .order-history-table td {
        display: flex; justify-content: space-between; gap: 12px; text-align: right; padding: 6px 0 !important; border: 0 !important;
    }
    .order-history-table td::before { content: attr(data-label); font-weight: 700; color: var(--fso-ink); text-align: left; }
    .order-history-table td.order-actions-cell { justify-content: flex-start; gap: 8px; padding-top: 10px !important; }
    .order-history-table td.order-actions-cell::before { display: none; }

    /* Store locator */
    .store-search-box-banner h2 { font-size: 22px; }

    /* Footer */
    .footer__copyright { text-align: center; }
    .footer__copyright__payment > div { justify-content: center !important; }

    /* Auth */
    .auth-header__logo img { height: 40px; }
    .login-section .login-form, .register-section .register-form { padding: 22px !important; }
}

@media (max-width: 400px) {
    .hero__search__form form button { padding: 0 12px; }
    .featured__item__text h5 { font-size: 14px; }
}