/* Ganapathy Foods — custom additions on top of the Cake template (css/style.css) */ :root { --gf-primary: #f08632; --gf-secondary: #0c2b4b; --gf-border: #e1e1e1; } /* ---------- Sticky header ---------- */ /* position:sticky released partway down the page because the vendor stylesheet sets `html, body { height: 100%; }` — that caps the header's containing block at one viewport height, so sticky stops working past that point even though the page keeps scrolling. position:fixed is always relative to the viewport instead, so it can't be affected by that. js/custom.js pads by the header's real rendered height so fixed content doesn't sit under it. z-index 40 keeps it below the offcanvas overlay/panel (98/99) and search modal (99999) so those still layer correctly on top when opened. */ .header { position: fixed; top: 0; left: 0; width: 100%; z-index: 40; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); } /* scoped to storefront-only pages (see includes/header.php) so this doesn't push down the admin panel, which uses its own separate header */ body.storefront-body { padding-top: 165px; } /* static fallback before js/custom.js measures the real height; prevents a flash of content under the header */ @media (max-width: 767px) { body.storefront-body { padding-top: 110px; } } /* ---------- Header: Track Order button ---------- */ .header__track-btn { display: inline-block; background: none; color: var(--gf-secondary) !important; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .3px; padding: 7px 15px; border: 1px solid var(--gf-secondary); border-radius: 3px; transition: background .2s ease, color .2s ease; } .header__track-btn:hover { background: var(--gf-secondary); color: #fff !important; } /* ---------- Header: cart count badge ---------- */ /* Vendor default was plain text absolutely placed inside the icon's outline — fine for a single digit, but a 2-digit count overlapped the icon artwork. Turn it into a proper small pill badge sitting at the icon's corner instead. */ .header__top__right__cart a span, .offcanvas__cart__item a span { left: auto; right: -8px; top: -6px; min-width: 16px; height: 16px; padding: 0 3px; background: var(--gf-primary); color: #fff; font-size: 10px; font-weight: 700; border-radius: 8px; display: flex; align-items: center; justify-content: center; line-height: 1; box-sizing: border-box; } /* ---------- Header: Sign in / My Account button ---------- */ /* Was plain default-blue link text next to the search icon — barely visible against the white header bar. Give it real button styling. */ .header__top__right__links a { margin-right: 14px; } /* was 56px, sized for the old plain text link */ .header__signin-btn { display: inline-block; background: var(--gf-primary); color: #fff; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .3px; padding: 8px 16px; border-radius: 3px; transition: background .2s ease; } .header__signin-btn:hover { background: var(--gf-secondary); color: #fff; } /* The button is wider than the plain text link it replaced, so the row can run out of room and wrap "Cart: ₹ ..." onto its own line at tablet widths. */ .header__top__right { white-space: nowrap; } .header__top__right__cart, .header__top__right__cart .cart__price { white-space: nowrap; } @media (min-width: 768px) and (max-width: 991px) { .header__signin-btn { padding: 8px 12px; font-size: 12px; } .header__top__right__links a { margin-right: 8px; } } /* ---------- Logo (circular badge, replaces template's rectangular default) ---------- */ .header__logo img, .offcanvas__logo img, .footer__about .footer__logo img { width: 84px; height: 84px; } .footer__about .footer__logo img { width: 90px; height: 90px; } @media (min-width: 768px) { .header__logo { margin-left: -42px; /* half of the 84px logo width, keeps it centered */ top: 9px; /* vertically centers an 84px badge in the 102px header bar */ } } /* ---------- General helpers ---------- */ .alert { border-radius: 0; padding: 14px 18px; margin-bottom: 20px; font-size: 14px; } .alert-success { background: #eaf7ea; color: #1f6d2c; border: 1px solid #bfe6bf; } .alert-danger { background: #fbeaea; color: #8a1f1f; border: 1px solid #f0bcbc; } .mt-3 { margin-top: 15px; } .mt-4 { margin-top: 25px; } .mb-0 { margin-bottom: 0; } .d-inline { display: inline; } /* ---------- Product card image link ---------- */ /* product__item__pic is an here (clickable through to details) instead of the template's original

— defaults to display:inline, which makes the vendor stylesheet's `height: 270px` on .product__item__pic a no-op. Restore block. */ .product__item__pic { display: block; } /* ---------- Breadcrumb banner (used on every interior page) ---------- */ /* Vendor default was padding-top:60px plus a 50px heading and an 80px section below it — far too much dead space for a dense listing page. */ .breadcrumb-option { padding-top: 28px; padding-bottom: 18px; } .breadcrumb__text h2 { font-size: 32px; } .breadcrumb__links { padding-top: 6px; } /* ---------- Active filter chips (search term, category, occasion, price) ---------- */ .active-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 20px; } .active-filters__chip { display: inline-flex; align-items: center; gap: 6px; background: #f5f5f5; color: #333; font-size: 13px; padding: 6px 10px; border-radius: 3px; border: 1px solid var(--gf-border); } .active-filters__chip:hover { background: #eee; color: #333; } .active-filters__chip span { color: #999; font-size: 15px; line-height: 1; } .active-filters__chip:hover span { color: var(--gf-primary); } .active-filters__clearall { font-size: 13px; color: var(--gf-primary); text-decoration: underline; margin-left: 4px; } /* ---------- Shop sidebar / filters ---------- */ .shop { padding-top: 25px; } .shop__sidebar { border: 1px solid var(--gf-border); padding: 25px; } .shop__sidebar__widget { margin-bottom: 30px; } .shop__sidebar__widget:last-child { margin-bottom: 0; } .shop__sidebar__widget h5 { font-size: 16px; font-weight: 700; margin-bottom: 15px; text-transform: uppercase; letter-spacing: .5px; } .shop__sidebar__categories { list-style: none; padding: 0; margin: 0; } .shop__sidebar__categories li { margin-bottom: 8px; } .shop__sidebar__categories li a { color: #5c5c5c; font-size: 14px; } .shop__sidebar__categories li.active a, .shop__sidebar__categories li a:hover { color: var(--gf-primary); font-weight: 600; } .shop__sidebar__price { display: flex; gap: 10px; margin-bottom: 12px; } .shop__sidebar__price input { width: 50%; border: 1px solid var(--gf-border); padding: 8px 10px; } .shop__filter__apply { width: 100%; text-align: center; padding: 10px; border: none; cursor: pointer; } .shop__result__count { padding-top: 12px; color: #5c5c5c; } /* The sort