/* =========================================================
   Storefront — phone layout (e-commerce app style)

   Loaded only on small screens (media attribute on the <link>), so desktop
   never downloads or applies it. All colours come from the shop's own
   palette (--sf-green primary, --sf-gold secondary), so it follows the
   admin's Theme colour; nothing here hard-codes a brand colour.
   ========================================================= */

:root{
    --ap-bg: color-mix(in srgb, var(--sf-green, #5cb527) 4%, #f6f6f4);
    --ap-tint: color-mix(in srgb, var(--sf-green, #5cb527) 9%, #fff);
    --ap-line: color-mix(in srgb, var(--sf-green, #5cb527) 9%, #e7e7e4);
    --ap-ink: color-mix(in srgb, var(--sf-green-darker, #3d7d1a) 35%, #0c120d);
    --ap-text: #161a17;
    --ap-muted: #7a817b;
    --ap-on: var(--sf-on-primary, #fff);
    --ap-r-lg: 22px;
    --ap-r-md: 16px;
    --ap-shadow: 0 1px 2px rgba(20,26,20,.05), 0 6px 20px rgba(20,26,20,.07);
    --ap-nav-h: 64px;
    --ap-safe-b: env(safe-area-inset-bottom, 0px);
    --ap-font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --sf-section-gap: 24px;
}

/* ---------- Base ---------- */
html{ -webkit-text-size-adjust: 100%; }
body.sf-body{
    font-family: var(--ap-font); font-size: 15px; color: var(--ap-text); background: var(--ap-bg);
    -webkit-tap-highlight-color: transparent; touch-action: manipulation;
    padding-bottom: calc(var(--ap-nav-h) + var(--ap-safe-b) + 20px);
}
body.sf-body [hidden]{ display: none !important; }
.sf-app-only{ display: revert; }
.sf-desktop-only{ display: none !important; }
.sf-container{ padding: 0 16px; }
a:hover{ color: inherit; }
:focus-visible{ outline: 2px solid var(--sf-green); outline-offset: 2px; }
.sf-topbar, .sf-header, .sf-navbar, .sf-breadcrumb, .sf-cat-sidebar{ display: none !important; }
.ap-i{ width: 22px; height: 22px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- Header ---------- */
.ap-header{ position: sticky; top: 0; z-index: 50; padding: 10px 16px 12px; background: #fff; box-shadow: 0 1px 0 var(--ap-line); }
.ap-header__row{ display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 44px; }
.ap-brand{ flex: 1; min-width: 0; display: flex; justify-content: center; font-size: 20px; font-weight: 800; letter-spacing: -.02em; color: var(--ap-text); }
.ap-brand img{ height: 32px; width: auto; max-width: 150px; object-fit: contain; }
.ap-iconbtn{
    position: relative; width: 42px; height: 42px; flex: none; padding: 0; display: grid; place-items: center;
    border-radius: 50%; background: var(--ap-bg); color: var(--ap-text); border: 0; transition: transform .12s ease;
}
.ap-iconbtn:active{ transform: scale(.92); }
.ap-badge{
    position: absolute; top: -3px; right: -4px; z-index: 2; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 99px;
    display: grid; place-items: center; line-height: 1; background: var(--sf-gold); color: var(--sf-on-gold, #2a2000);
    font-size: 11px; font-weight: 800; border: 2px solid #fff;
}
.ap-search{ display: flex; align-items: center; gap: 10px; height: 46px; margin-top: 10px; padding: 0 16px; border-radius: 99px; background: var(--ap-bg); color: var(--ap-muted); }
.ap-search input{ flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font: inherit; font-size: 16px; color: var(--ap-text); }
.ap-search input::-webkit-search-cancel-button{ display: none; }

/* ---------- Bottom navigation ---------- */
.ap-nav{
    position: fixed; z-index: 60; left: 0; right: 0; bottom: 0; display: flex; padding: 8px 12px calc(8px + var(--ap-safe-b));
    background: #fff; border-radius: 22px 22px 0 0; box-shadow: 0 -1px 0 var(--ap-line), 0 -10px 30px rgba(20,26,20,.08);
}
.ap-nav__item{ flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 4px 0; font-size: 11.5px; font-weight: 600; color: #8a918b; }
.ap-nav__ic{ position: relative; width: 44px; height: 28px; display: grid; place-items: center; border-radius: 99px; transition: background .2s ease; }
.ap-nav__ic .ap-i{ width: 23px; height: 23px; }
.ap-nav__item.is-active{ color: var(--sf-green-dark); }
.ap-nav__item.is-active .ap-nav__ic{ background: var(--ap-tint); }
.ap-nav__item.is-active .ap-i{ fill: color-mix(in srgb, var(--sf-green) 22%, transparent); }
.ap-nav .ap-badge{ top: -4px; right: 0; }

/* ---------- Menu sheet ---------- */
.ap-sheet{ position: fixed; inset: 0; z-index: 100; }
.ap-sheet__backdrop{ position: absolute; inset: 0; background: rgba(10,14,10,.5); opacity: 0; transition: opacity .25s ease; }
.ap-sheet.is-open .ap-sheet__backdrop{ opacity: 1; }
.ap-sheet__panel, .ap-panel{
    position: absolute; left: 0; right: 0; bottom: 0; max-height: 86vh; max-height: 86dvh; overflow-y: auto; overscroll-behavior: contain;
    background: var(--ap-bg); border-radius: 26px 26px 0 0; padding: 16px 16px calc(20px + var(--ap-safe-b));
    transform: translateY(100%); transition: transform .32s cubic-bezier(.22,1,.36,1);
}
.ap-sheet.is-open .ap-sheet__panel{ transform: none; }
.ap-sheet__head{ display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; font-size: 20px; font-weight: 800; }
.ap-list{ background: #fff; border-radius: var(--ap-r-lg); box-shadow: var(--ap-shadow); overflow: hidden; }
.ap-row{ width: 100%; display: flex; align-items: center; gap: 14px; padding: 14px 16px; background: transparent; border: 0; color: inherit; font: inherit; font-size: 16px; font-weight: 550; text-align: left; }
.ap-row + .ap-row{ border-top: 1px solid var(--ap-line); }
.ap-row > span:not(.ap-row__ic):not(.ap-seg){ flex: 1; min-width: 0; }
.ap-row__ic{ width: 38px; height: 38px; flex: none; display: grid; place-items: center; border-radius: 12px; background: var(--ap-tint); color: var(--sf-green-dark); }
.ap-row__ic .ap-i{ width: 20px; height: 20px; }
.ap-row__go{ width: 18px; height: 18px; color: #9aa39b; }
.ap-row__val{ color: var(--ap-muted); font-weight: 500; }
.ap-seg{ display: inline-flex; padding: 3px; border-radius: 99px; background: var(--ap-bg); }
.ap-seg a{ padding: 7px 14px; border-radius: 99px; font-size: 13.5px; font-weight: 700; color: var(--ap-muted); }
.ap-seg a.is-on{ background: var(--sf-green); color: var(--ap-on); }
.ap-btn{ display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 22px; border: 0; border-radius: 99px; font: inherit; font-size: 15px; font-weight: 700; cursor: pointer; transition: transform .12s ease; }
.ap-btn:active{ transform: scale(.97); }
.ap-btn--primary{ background: var(--sf-green); color: var(--ap-on); }
.ap-btn--soft{ background: var(--ap-tint); color: var(--sf-green-dark); }
.ap-btn--block{ width: 100%; margin-top: 14px; }

/* ---------- Page structure ---------- */
main{ padding-top: 14px; }
.sf-section{ padding-top: 12px; padding-bottom: 4px; }
.sf-container > .sf-section{ padding: 0; margin-bottom: var(--sf-section-gap); }
.sf-section-head{ flex-wrap: wrap; gap: 10px 12px; margin: 0 0 12px; padding: 0; border: 0; }
.sf-section-title{ gap: 0; white-space: normal; text-transform: none; letter-spacing: -.01em; font-size: 20px; font-weight: 800; color: var(--ap-text); }
.sf-section-title::before{ display: none; }
.sf-section-link{ margin-left: auto; font-size: 13.5px; font-weight: 700; color: var(--sf-green-dark); }
.sf-head-tools{ width: 100%; margin: 0; min-width: 0; }
.sf-tabs-nav{ gap: 8px; margin: 0 -16px; width: calc(100% + 32px); padding: 2px 16px; scroll-padding-inline: 16px; }
.sf-tabs-nav button{ padding: 9px 18px; border-radius: 99px; background: #fff; color: var(--ap-text); border: 1px solid var(--ap-line); font-size: 14px; font-weight: 600; }
.sf-tabs-nav button.active{ background: var(--sf-green); border-color: var(--sf-green); color: var(--ap-on); }
.sf-carousel-nav{ display: none; }

/* ---------- Home ---------- */
.ap-cats{ display: flex; gap: 14px; margin: 0 -16px; padding: 2px 16px 6px; overflow-x: auto; scrollbar-width: none; scroll-padding-inline: 16px; }
.ap-cats::-webkit-scrollbar{ display: none; }
.ap-cat{ flex: none; width: 72px; display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
.ap-cat__img{ position: relative; width: 66px; height: 66px; display: grid; place-items: center; border-radius: 20px; overflow: hidden; background: var(--ap-tint); color: var(--sf-green-dark); }
.ap-cat__img img{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #fff; }
.ap-cat > span:last-child{ font-size: 12px; font-weight: 600; line-height: 1.2; max-width: 72px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }

.sf-home-layout{ display: block; margin: 0 0 20px; }
.sf-hero-row{ display: block; height: auto; margin-top: 0; }
.sf-hero-main{ height: auto; aspect-ratio: 16 / 9.5; border: 0; border-radius: var(--ap-r-lg); box-shadow: var(--ap-shadow); }
.sf-hero-main > img, .sf-hero-slide > img{ object-position: center; }
.sf-hero-main-text{ inset: auto 0 0 0; width: auto; justify-content: flex-end; padding: 48px 18px 18px; background: linear-gradient(0deg, rgba(8,12,8,.78), rgba(8,12,8,0)); }
.sf-hero-main-text h2{ margin: 0 0 6px; font-size: 21px; color: #fff; text-shadow: 0 1px 6px rgba(0,0,0,.35); }
.sf-hero-main-text p{ display: none; }
.sf-hero-main-text .sf-btn{ padding: 0 18px; min-height: 38px; font-size: 13px; }
.sf-hero-arrow{ display: none; }
.sf-hero-dots{ left: auto; right: 16px; bottom: 18px; transform: none; }
.sf-hero-side{ flex-direction: row; gap: 12px; margin: 12px -16px 0; padding: 0 16px 6px; overflow-x: auto; scrollbar-width: none; scroll-padding-inline: 16px; }
.sf-hero-side::-webkit-scrollbar{ display: none; }
.sf-hero-side-item{ flex: 0 0 60%; height: auto; border: 0; border-radius: var(--ap-r-lg); box-shadow: var(--ap-shadow); }
.sf-hero-side-img{ aspect-ratio: 5 / 3; flex: none; }
.sf-hero-side-text{ text-align: left; padding: 10px 14px 14px; }
.sf-hero-side-text span{ color: var(--ap-text); }
.sf-hero-side-text .sf-btn{ display: inline-flex; padding: 0 16px; min-height: 34px; font-size: 12px; }
.sf-flash-banner{ height: auto; min-height: 240px; border-radius: var(--ap-r-lg); margin-bottom: var(--sf-section-gap); box-shadow: var(--ap-shadow); }
.sf-flash-banner-overlay{ padding: 20px; align-items: flex-end; background: linear-gradient(180deg, rgba(8,12,8,.3), rgba(8,12,8,.88)); }
.sf-flash-banner-content h2{ font-size: 22px; }
.sf-flash-banner-content p{ display: none; }
.sf-flash-banner-content .sf-flash-banner-meta{ margin-bottom: 14px; }
.sf-flash-page-banner{ height: 220px; }
.sf-promo-row-2{ grid-template-columns: 1fr; gap: 12px; }
.sf-promo-banner{ min-height: 150px; border-radius: var(--ap-r-lg); box-shadow: var(--ap-shadow); }

/* ---------- Product cards ---------- */
.sf-carousel{ gap: 12px; margin: 0 -16px; padding: 4px 16px 14px; scroll-padding-inline: 16px; }
.sf-carousel > *{ flex: 0 0 44%; }
.sf-carousel--four > *{ flex: 0 0 76%; }
.sf-carousel--2row{ display: grid; grid-auto-flow: row; grid-template-rows: none; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-columns: auto; margin: 0; padding: 4px 0 8px; overflow: visible; }
.sf-carousel--2row > *{ flex: none; }
.sf-grid, .sf-grid-4{ grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.sf-grid[data-view="list"]{ grid-template-columns: 1fr; }

.sf-product-card{ border: 0; border-radius: var(--ap-r-lg); box-shadow: var(--ap-shadow); text-align: left; background: #fff; }
.sf-product-thumb{ border: 0; margin: 8px 8px 0; border-radius: 16px; background: var(--ap-tint); }
.sf-product-thumb img{ inset: 10px; width: calc(100% - 20px); height: calc(100% - 20px); }
.sf-badge{
    top: 8px; left: 8px; right: auto; padding: 4px 10px; border-radius: 99px; background: var(--sf-green); color: var(--ap-on);
    font-size: 11.5px; font-weight: 700;
}
.sf-badge.sf-badge-new{ background: var(--sf-gold); color: var(--sf-on-gold, #2a2000); }
.sf-product-body{ position: relative; align-items: stretch; gap: 4px; padding: 10px 12px 12px; }
.sf-product-name{ min-height: 38px; font-size: 14px; font-weight: 600; line-height: 1.35; color: var(--ap-text); }
.sf-product-price{ justify-content: flex-start; padding-right: 44px; flex-wrap: wrap; gap: 0 8px; }
.sf-price-now{ font-size: 17px; font-weight: 800; color: var(--sf-green-dark); }
.sf-price-old{ font-size: 12.5px; }
.sf-product-actions{ position: static; margin: 0; padding: 0; }
.sf-qty-label, .sf-product-actions .sf-qty-input{ display: none; }
.sf-cart-btn{
    position: absolute; right: 10px; bottom: 10px; width: 36px; height: 36px; border-radius: 12px; border: 0;
    background: var(--sf-green); color: var(--ap-on); transition: transform .12s ease;
}
.sf-cart-btn:active{ transform: scale(.88); }
.sf-cart-btn:disabled{ background: #d6dad4; color: #fff; opacity: 1; }

.sf-cat-grid{ grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.sf-cat-tile{ border: 0; border-radius: var(--ap-r-md); box-shadow: var(--ap-shadow); padding: 14px 8px; }
.sf-cat-tile img{ width: 52px; height: 52px; }
.sf-cat-tile span{ font-size: 12px; }
.sf-brand-strip{ display: flex; overflow-x: auto; margin: 0 -16px; padding: 4px 16px 10px; scrollbar-width: none; scroll-padding-inline: 16px; }
.sf-brand-strip::-webkit-scrollbar{ display: none; }
.sf-brand-strip > *{ flex: 0 0 96px; }
.sf-brand-strip > :nth-child(n+13){ display: block; }
.sf-blog-card{ background: #fff; border-radius: var(--ap-r-lg); overflow: hidden; box-shadow: var(--ap-shadow); }
.sf-blog-thumb{ border-radius: 0; }
.sf-blog-body{ padding: 12px 14px 14px; }
.sf-blog-body h4{ font-size: 14.5px; text-transform: none; letter-spacing: 0; }

/* ---------- Generic cards, forms, buttons ---------- */
.sf-btn{ min-height: 46px; justify-content: center; padding: 0 22px; border-radius: 99px; font-size: 15px; transition: transform .12s ease; }
.sf-btn:active{ transform: scale(.97); }
.sf-btn-outline{ background: #fff; }
.sf-card, .sf-cart-summary, .sf-filter-box, .sf-toolbar, .sf-cat-head, .sf-detail-tabs, .sf-sidebar{ border: 0; border-radius: var(--ap-r-lg); box-shadow: var(--ap-shadow); background: #fff; }
.sf-card{ padding: 18px; }
.sf-form-group label{ font-size: 13.5px; margin-bottom: 7px; }
.sf-form-group input, .sf-form-group textarea, .sf-form-group select, .sf-field textarea, .sf-field input[type="text"]{
    width: 100%; padding: 13px 16px; border-radius: 14px; border: 1px solid var(--ap-line); background: #fff; font-size: 16px; font-family: inherit; color: var(--ap-text);
}
.sf-form-group select{ padding-right: 40px; background-position: right 16px center; }
.sf-form-group input[type="checkbox"], .sf-form-group input[type="radio"]{ width: 20px; height: 20px; padding: 0; }
.sf-form-group input:focus, .sf-form-group textarea:focus, .sf-form-group select:focus{ border-color: var(--sf-green); box-shadow: 0 0 0 3px color-mix(in srgb, var(--sf-green) 18%, transparent); }
.sf-alert{ border-radius: 14px; }
.sf-empty{ padding: 44px 16px; }
.sf-pay-option{ padding: 14px 16px; border-radius: 14px; font-size: 15px; }
.sf-checkout-address-grid{ grid-template-columns: 1fr; }
.sf-checkout-login-hint{ border-radius: 14px; }

/* ---------- Listing / category ---------- */
.sf-layout, .sf-layout--account, .sf-layout--aside, .sf-layout--cart, .sf-layout--contact{ display: block; }
.sf-layout > * + *, .sf-layout--cart > * + *{ margin-top: 14px; }
.sf-sidebar{ display: none; }
.sf-toolbar{ display: flex; flex-wrap: nowrap; gap: 8px; padding: 8px; margin-bottom: 14px; }
.sf-toolbar .sf-view-switch, .sf-toolbar-right label:nth-of-type(2){ display: none; }
.sf-toolbar-right{ flex: 1; min-width: 0; gap: 8px; flex-wrap: nowrap; }
.sf-toolbar-right label{ flex: 1; min-width: 0; font-size: 0; }
.sf-toolbar-right select{ width: 100%; height: 42px; padding: 0 12px; border-radius: 99px; border: 1px solid var(--ap-line); font-size: 14px; font-weight: 600; background: var(--ap-bg); }
.ap-filterbtn{ flex: none; display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 16px; border: 0; border-radius: 99px; background: var(--sf-green); color: var(--ap-on); font: inherit; font-size: 14px; font-weight: 700; }
.ap-filterbtn .ap-i{ width: 18px; height: 18px; }
.ap-chiprow{ display: flex; gap: 8px; margin: 0 -16px 14px; padding: 2px 16px 6px; overflow-x: auto; scrollbar-width: none; scroll-padding-inline: 16px; }
.ap-chiprow::-webkit-scrollbar{ display: none; }
.ap-chipbtn{ flex: none; padding: 9px 18px; border-radius: 99px; background: #fff; border: 1px solid var(--ap-line); font-size: 14px; font-weight: 600; white-space: nowrap; }
.ap-chipbtn.is-on{ background: var(--sf-green); border-color: var(--sf-green); color: var(--ap-on); }
#sf-sort{ height: 42px; padding: 0 14px !important; border-radius: 99px !important; border: 1px solid var(--ap-line) !important; background: #fff; font-size: 14px !important; font-weight: 600; }
.sf-section-head > form{ margin-left: auto; }
.sf-section-head > form label{ display: none; }
.sf-filters{ display: block; }
.ap-panel{ position: fixed; z-index: 101; visibility: hidden; transition: transform .32s cubic-bezier(.22,1,.36,1), visibility 0s .32s; }
.ap-panel.is-open{ transform: none; visibility: visible; transition: transform .32s cubic-bezier(.22,1,.36,1), visibility 0s; }
.ap-scrim{ position: fixed; inset: 0; z-index: 100; background: rgba(10,14,10,.5); opacity: 0; pointer-events: none; transition: opacity .25s ease; }
.ap-scrim.is-on{ opacity: 1; pointer-events: auto; }
.ap-panel__head{ display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; font-size: 20px; font-weight: 800; }
.ap-panel .sf-filter-box{ margin-bottom: 14px; }
.ap-panel .sf-cat-list a{ padding: 14px 16px; font-size: 15px; }
.sf-refine-options label{ font-size: 15px; padding: 4px 0; }
.sf-refine-options input[type="checkbox"]{ width: 20px; height: 20px; }
.sf-price-range input{ height: 46px; border-radius: 14px; font-size: 16px; }
.sf-layout > .ap-panel + *{ margin-top: 0; }
.sf-pagination-row{ flex-direction: column; }
.sf-pagination .page-item .page-link{ border-radius: 12px; border: 0; box-shadow: var(--ap-shadow); }

/* ---------- Product detail ---------- */
.sf-product-detail{ gap: 16px; margin-bottom: 18px; }
.sf-gallery-main{ border: 0; border-radius: var(--ap-r-lg); box-shadow: var(--ap-shadow); background: var(--ap-tint); padding: 16px; }
.sf-gallery-thumbs{ flex-wrap: nowrap; overflow-x: auto; margin: 0 -16px; padding: 4px 16px; scrollbar-width: none; }
.sf-gallery-thumbs::-webkit-scrollbar{ display: none; }
.sf-gallery-thumbs button{ flex: none; width: 62px; height: 62px; border-radius: 14px; border: 2px solid transparent; background: #fff; box-shadow: var(--ap-shadow); }
.sf-gallery-thumbs button.active{ border-color: var(--sf-green); }
.sf-product-summary h1{ font-size: 22px; line-height: 1.25; text-transform: none; letter-spacing: -.01em; font-weight: 800; color: var(--ap-text); }
.sf-detail-price .sf-price-now{ font-size: 28px; font-weight: 800; color: var(--sf-green-dark); }
.sf-detail-price{ border-bottom: 0; padding-bottom: 6px; margin-bottom: 8px; }
.sf-product-meta{ border: 0; background: #fff; border-radius: var(--ap-r-lg); box-shadow: var(--ap-shadow); padding: 16px; margin-top: 4px; }
.sf-tabs-head{ gap: 8px; padding: 12px; flex-wrap: nowrap; overflow-x: auto; border: 0; scrollbar-width: none; }
.sf-tabs-head button{ flex: none; border: 0; border-radius: 99px; padding: 9px 18px; background: var(--ap-bg); color: var(--ap-text); font-weight: 600; }
.sf-tabs-head button.active{ background: var(--sf-green); color: var(--ap-on); }
.sf-tab-body{ padding: 6px 18px 20px; }
body:has(.sf-product-detail) .sf-buy-row{
    position: fixed; z-index: 55; left: 12px; right: 12px; margin: 0; flex-wrap: nowrap; gap: 10px;
    bottom: calc(var(--ap-nav-h) + var(--ap-safe-b) + 10px); padding: 10px; border-radius: 20px; background: #fff; box-shadow: 0 10px 30px rgba(20,26,20,.2);
}
body:has(.sf-product-detail) .sf-buy-row .sf-qty-label{ display: none; }
body:has(.sf-product-detail) .sf-buy-row .sf-btn{ flex: 1; }
body:has(.sf-product-detail) .sf-buy-row .sf-btn:disabled{ background: #d6dad4; }
body:has(.sf-product-detail){ padding-bottom: calc(var(--ap-nav-h) + var(--ap-safe-b) + 96px); }
.sf-qty-box{ border-radius: 99px; background: var(--ap-bg); border: 0; padding: 2px; }
.sf-qty-box button{ width: 38px; height: 40px; font-size: 20px; color: var(--ap-text); }
.sf-qty-box input{ width: 36px; background: transparent; font-size: 16px; font-weight: 700; }

/* ---------- Cart ---------- */
.sf-cart-table, .sf-cart-table tbody{ display: block; background: transparent; }
.sf-cart-table thead{ display: none; }
.sf-cart-table tbody{ display: grid; gap: 12px; }
.sf-cart-table tr{ display: grid; grid-template-columns: 1fr auto auto; grid-template-areas: "prod prod rm" "qty price total"; align-items: center; gap: 12px 10px; padding: 14px; background: #fff; border-radius: var(--ap-r-lg); box-shadow: var(--ap-shadow); }
.sf-cart-table td{ display: block; padding: 0; border: 0; }
.sf-cart-table td:nth-child(1){ grid-area: prod; }
.sf-cart-table td:nth-child(2){ grid-area: price; color: var(--ap-muted); font-size: 13.5px; text-align: right; }
.sf-cart-table td:nth-child(3){ grid-area: qty; }
.sf-cart-table td:nth-child(4){ grid-area: total; font-weight: 800; font-size: 17px; color: var(--sf-green-dark); text-align: right; }
.sf-cart-table td:nth-child(5){ grid-area: rm; }
.sf-cart-product{ gap: 14px; align-items: center; }
.sf-cart-product img{ width: 70px; height: 70px; border-radius: 14px; border: 0; background: var(--ap-tint); object-fit: contain; padding: 4px; }
.sf-cart-product a{ font-size: 15px; line-height: 1.3; }
.sf-remove-btn{ width: 34px; height: 34px; border-radius: 50%; background: #fdecea; font-size: 0; position: relative; }
.sf-remove-btn::before{ content: "\00d7"; position: absolute; inset: 0; display: grid; place-items: center; font-size: 22px; line-height: 1; color: #b32a24; }
div[style*="overflow-x:auto"]{ overflow: visible !important; }
.sf-cart-summary{ padding: 18px; }
.sf-summary-row.sf-total{ font-size: 18px; }
.ap-cartbar{
    position: fixed; z-index: 55; left: 12px; right: 12px; bottom: calc(var(--ap-nav-h) + var(--ap-safe-b) + 10px);
    display: flex; align-items: center; gap: 12px; padding: 10px 10px 10px 18px; border-radius: 22px; background: #fff; box-shadow: 0 10px 30px rgba(20,26,20,.2);
}
.ap-cartbar small{ display: block; font-size: 12px; color: var(--ap-muted); }
.ap-cartbar b{ font-size: 19px; color: var(--ap-text); }
.ap-cartbar .ap-btn{ margin-left: auto; background: var(--sf-green); color: var(--ap-on); }
body:has(.ap-cartbar){ padding-bottom: calc(var(--ap-nav-h) + var(--ap-safe-b) + 96px); }

/* ---------- Account / orders ---------- */
.sf-layout--account .sf-sidebar{ display: none; }
.ap-account{ display: grid; gap: 16px; }
.ap-profile{ display: flex; align-items: center; gap: 14px; padding: 16px; background: #fff; border-radius: var(--ap-r-lg); box-shadow: var(--ap-shadow); }
.ap-avatar{ width: 52px; height: 52px; flex: none; display: grid; place-items: center; border-radius: 50%; font-weight: 800; font-size: 18px; color: var(--sf-green-dark); background: var(--ap-tint); }
.ap-profile__tx{ min-width: 0; flex: 1; }
.ap-profile__tx b{ display: block; font-size: 17px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ap-profile__tx small{ color: var(--ap-muted); overflow: hidden; text-overflow: ellipsis; display: block; }
.ap-orders{ display: grid; gap: 10px; }
.ap-order{ display: flex; align-items: center; gap: 14px; padding: 14px; background: #fff; border-radius: var(--ap-r-lg); box-shadow: var(--ap-shadow); }
.ap-order__ic{ width: 46px; height: 46px; flex: none; display: grid; place-items: center; border-radius: 14px; background: var(--ap-tint); color: var(--sf-green-dark); }
.ap-order__tx{ min-width: 0; flex: 1; }
.ap-order__tx b{ display: block; font-size: 15.5px; }
.ap-order__tx small{ color: var(--ap-muted); }
.ap-order__amt{ text-align: right; }
.ap-order__amt b{ display: block; font-size: 16px; color: var(--sf-green-dark); }
.ap-status{ display: inline-block; margin-top: 3px; padding: 3px 10px; border-radius: 99px; font-size: 11.5px; font-weight: 700; background: var(--ap-tint); color: var(--sf-green-dark); }
.ap-status--pending{ background: #fff4d6; color: #8a6200; }
.ap-status--declined{ background: #fdecea; color: #b32a24; }

/* ---------- Footer ---------- */
.sf-feature-strip{ background: transparent; margin-top: 6px; }
.sf-feature-strip .sf-container{ flex-wrap: nowrap; overflow-x: auto; gap: 10px; padding: 4px 16px 10px; scrollbar-width: none; scroll-padding-inline: 16px; }
.sf-feature-strip .sf-container::-webkit-scrollbar{ display: none; }
.sf-feature-item{ flex: 0 0 76%; padding: 14px; background: #fff; border-radius: var(--ap-r-md); box-shadow: var(--ap-shadow); }
.sf-feature-item strong{ color: var(--ap-text); }
.sf-feature-item span{ color: var(--ap-muted); }
.sf-feature-item i, .sf-feature-item svg{ color: var(--sf-green-dark); }
.sf-footer{ margin: 20px 12px 0; border-radius: var(--ap-r-lg); overflow: hidden; background: var(--ap-ink); }
.sf-feature-strip + .sf-footer{ margin-top: 20px; }
.sf-footer-top{ padding: 22px 8px; }
.sf-footer-grid{ grid-template-columns: 1fr 1fr; gap: 22px 16px; }
.sf-footer-grid > :first-child, .sf-footer-grid > :last-child{ grid-column: 1 / -1; }
.sf-footer-bottom{ padding: 16px 8px; flex-direction: column; align-items: flex-start; }
.sf-newsletter-form input{ border-radius: 99px 0 0 99px; padding: 13px 16px; font-size: 16px; }
.sf-newsletter-form button{ border-radius: 0 99px 99px 0; padding: 0 20px; }

/* ---------- Toasts ---------- */
#toast-container{ left: 12px !important; right: 12px !important; top: auto !important; bottom: 96px !important; }
#toast-container > div{ width: auto !important; max-width: none; margin: 0 0 8px; border-radius: 14px; box-shadow: 0 10px 30px rgba(0,0,0,.2); opacity: 1; }

@media (prefers-reduced-motion: reduce){ *{ animation-duration: .01ms !important; transition-duration: .01ms !important; } }
.ap-cat__img{ background: #fff; box-shadow: var(--ap-shadow); }

.ap-brand--title{ justify-content: flex-start; padding-left: 4px; font-size: 21px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; line-height: 44px; }

/* ---------- Refinements ---------- */
.sf-product-thumb{ background: #fff; border: 1px solid var(--ap-line); }
.sf-product-card{ background: #fff; }
.sf-cart-product img, .sf-gallery-main, .sf-gallery-thumbs button{ background: #fff; }

/* Side promo banners: image only, compact */
.sf-hero-side-item{ flex: 0 0 46%; }
.sf-hero-side-img{ aspect-ratio: 4 / 3; }
.sf-hero-side-text{ padding: 8px 12px 10px; }
.sf-hero-side-text .sf-btn{ display: none; }

/* Footer: compact, inset from the sides. Link columns and the newsletter
   live in the menu / account pages on a phone, so they are hidden here. */
.sf-feature-strip{ display: none; }
.sf-footer{ margin: 20px 16px 0; border-radius: var(--ap-r-lg); }
.sf-footer-top{ padding: 16px 16px 6px; }
.sf-footer-grid{ display: block; }
.sf-footer-grid > div:not(:first-child){ display: none; }
.sf-footer-grid > :first-child{ display: grid; grid-template-columns: 1fr 1fr; gap: 2px 14px; align-items: start; }
.sf-footer-grid > :first-child h5{ grid-column: 1 / -1; margin: 0 0 8px; font-size: 13px; }
.sf-footer-grid > :first-child p{ margin: 0; font-size: 12.5px; line-height: 1.5; word-break: break-word; }
.sf-footer-bottom{ padding: 10px 16px 14px; flex-direction: row; flex-wrap: wrap; justify-content: space-between; gap: 2px 12px; font-size: 11.5px; border-top-color: rgba(255,255,255,.1); }
.sf-footer-contact a{ padding: 0 !important; display: inline !important; }
/* Previously hid every page number except the active one, leaving no way
   to see how many pages exist or jump ahead — just "< 1 >" no matter the
   total. Now shows the same compact "1 2 ... 15 16" numbers (with ellipsis)
   as desktop (see resources/views/vendor/pagination/storefront.blade.php),
   just horizontally scrollable so it never wraps or overflows the screen. */
.sf-pagination .pagination{ gap: 10px; flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: 2px; }
.sf-pagination .pagination::-webkit-scrollbar{ display: none; }
.sf-pagination .page-item{ flex: none; }
.sf-pagination .page-item .page-link{ min-width: 44px; height: 44px; }
.sf-pagination-summary{ text-align: center; font-size: 12.5px; }

/* ---------- Table booking = primary action (cafe / bar / restaurant) ---------- */
.ap-book-cta{ display: flex; align-items: center; gap: 14px; margin: 12px 16px 0; padding: 14px 16px; border-radius: 20px; background: var(--sf-green); color: var(--ap-on, #fff) !important; text-decoration: none !important; box-shadow: 0 10px 24px color-mix(in srgb, var(--sf-green) 38%, transparent); }
.ap-book-cta__ic{ flex: none; width: 46px; height: 46px; display: grid; place-items: center; border-radius: 14px; background: rgba(255,255,255,.22); }
.ap-book-cta__ic .ap-i{ width: 26px; height: 26px; }
.ap-book-cta__tx{ flex: 1; min-width: 0; }
.ap-book-cta__tx b{ display: block; font-size: 17px; font-weight: 800; line-height: 1.2; }
.ap-book-cta__tx small{ display: block; font-size: 13px; font-weight: 500; opacity: .92; line-height: 1.3; }
.ap-book-cta__go{ flex: none; width: 22px; height: 22px; opacity: .9; }
/* raised centre tab in the bottom bar */
.ap-nav__item--book{ margin-top: -26px; color: var(--sf-green-dark); font-weight: 800; }
.ap-nav__item--book .ap-nav__ic{ width: 58px; height: 58px; border-radius: 50%; background: var(--sf-green); color: var(--ap-on, #fff); box-shadow: 0 8px 20px color-mix(in srgb, var(--sf-green) 45%, transparent), 0 0 0 5px #fff; }
.ap-nav__item--book .ap-nav__ic .ap-i{ width: 27px; height: 27px; fill: none; }
.ap-nav__item--book.is-active .ap-nav__ic{ background: var(--sf-green-dark); }
.ap-nav__item--book.is-active .ap-i{ fill: none; }
.ap-row--primary{ background: color-mix(in srgb, var(--sf-green) 14%, #fff); }
.ap-row--primary b{ color: var(--sf-green-dark); }