/* Fresh Mart storefront – Phase 1 (2026-10-30). Loaded after storefront-grid. */

/* Item 2: category landing pages rendered from the shared template */
.category-hero{grid-column:1/-1;background:#fff;border:1px solid var(--line);border-radius:12px;padding:14px 16px;margin:0 0 12px}
.category-hero .breadcrumb{font-size:12.5px;color:var(--muted);margin-bottom:4px}
.category-hero .breadcrumb a{color:var(--green-d);font-weight:600;text-decoration:underline;text-underline-offset:2px}
.category-hero h1{font-family:'Plus Jakarta Sans',system-ui,sans-serif;font-weight:800;font-size:clamp(19px,4.6vw,26px);line-height:1.25;color:var(--green-d);margin:0 0 6px}
.category-hero p{font-size:13.5px;line-height:1.55;color:var(--ink);margin:0;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.category-hero p.category-count{margin-top:6px;color:var(--muted);font-size:12.5px;font-weight:600}
@media (min-width:900px){.category-hero p{-webkit-line-clamp:unset;display:block}}

/* Item 3: app-style product grid – 2 cols on phones, 3 on tablets, 4 on desktop */
#productGrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;padding:8px}
@media (min-width:600px){#productGrid{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;padding:10px}}
@media (min-width:900px){#productGrid{grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}}
#productGrid .product-card.pc{position:relative;border:1px solid var(--line);border-radius:12px;box-shadow:none;padding:10px 10px 12px;background:#fff;display:flex;flex-direction:column}
#productGrid .product-card.pc:hover{box-shadow:0 4px 14px rgba(22,36,29,.08)}
#productGrid .pc .product-img-wrap{padding-top:0;aspect-ratio:1/1;height:auto;border-radius:8px;background:#fafcfa;overflow:hidden}
#productGrid .pc .product-img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;padding:4px;transform:none}
#productGrid .pc .badge-discount{left:6px;right:auto;top:6px;background:var(--red);color:#fff;border-radius:4px;padding:2px 6px;font-family:'Plus Jakarta Sans',system-ui,sans-serif;font-weight:800;font-size:11px;line-height:16px}
#productGrid .pc .badge-best{position:absolute;right:6px;top:6px;left:auto;z-index:2;background:var(--gold,#f4b740);color:#123629;border-radius:4px;padding:2px 6px;font-size:10.5px;font-weight:700;line-height:16px}
#productGrid .pc .product-info{padding:0;flex:1 1 auto;display:flex;flex-direction:column;min-width:0}
#productGrid .pc .product-name{margin:8px 0 0;font-family:Inter,system-ui,sans-serif;font-weight:500;font-size:13.5px;line-height:18px;height:36px;min-height:36px;color:var(--ink);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}
#productGrid .pc .product-name a{display:inline;min-height:0;color:inherit;text-decoration:none}
/* Whole card is the link target (like the app); buttons sit above it. */
#productGrid .pc .product-name a::after{content:"";position:absolute;inset:0;z-index:1;border-radius:12px}
#productGrid .pc .product-name a:focus-visible{outline:none}
#productGrid .pc .product-name a:focus-visible::after{outline:3px solid var(--green-d);outline-offset:-3px}
#productGrid .pc .pc-unit{margin-top:2px;height:16px;font-size:11.5px;line-height:16px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#productGrid .pc .search-approximate{position:static;display:inline;padding:0;background:none;color:#8a5a00;font-size:11.5px;font-weight:600}
#productGrid .pc .pc-foot{margin-top:auto;padding-top:8px;display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:6px;min-height:52px}
#productGrid .pc .product-price-row{display:flex;flex-direction:column;align-items:flex-start;gap:2px;min-height:0;min-width:0;margin:0}
/* Gold shelf-edge price ticket from the app's PriceTag */
#productGrid .pc .product-price{position:relative;display:inline-flex;align-items:center;height:24px;padding:0 6px 0 15px;background:var(--gold,#f4b740);color:#123629;border-radius:2px 6px 6px 2px;font-family:'Plus Jakarta Sans',system-ui,sans-serif;font-weight:800;font-size:13px;letter-spacing:-.2px;font-variant-numeric:tabular-nums;white-space:nowrap;line-height:1}
#productGrid .pc .product-price::before{content:"";position:absolute;left:5px;top:50%;width:5px;height:5px;margin-top:-2.5px;border-radius:50%;background:#fff}
#productGrid .pc .product-old-price{font-size:11.5px;line-height:16px;color:var(--red);text-decoration:line-through;font-weight:500}
#productGrid .pc .pc-action{position:relative;z-index:2;margin-left:auto;display:flex;align-items:flex-end;min-height:34px}
#productGrid .pc .add-circle{position:relative;inset:auto;width:44px;height:44px;min-width:44px;min-height:44px;margin:-5px -5px -5px 0}
#productGrid .pc .add-circle::before{width:34px;height:34px;background:var(--green);box-shadow:none}
#productGrid .pc .add-circle svg{width:18px;height:18px;stroke-width:2.5}
.pc-stepper{display:inline-flex;align-items:center;height:34px;border-radius:999px;background:var(--green-d);color:#fff;overflow:hidden}
.pc-step{width:34px;height:34px;display:inline-flex;align-items:center;justify-content:center;border:0;background:transparent;color:#fff;cursor:pointer;padding:0}
.pc-step svg{width:16px;height:16px;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.pc-step:hover{background:rgba(255,255,255,.12)}
.pc-step:focus-visible{outline:2px solid #fff;outline-offset:-4px;border-radius:999px}
.pc-step:disabled{opacity:.4;cursor:not-allowed}
.pc-qty{min-width:22px;text-align:center;font-family:'Plus Jakarta Sans',system-ui,sans-serif;font-weight:800;font-size:14px;font-variant-numeric:tabular-nums}
/* Skeleton uses the exact same box model as a real card */
#productGrid .pc.product-skeleton .product-info{height:auto;flex:1 1 auto}
#productGrid .pc.product-skeleton .product-img-wrap{background:#e4ece6}
.pc .skeleton-name{width:86%;height:14px;margin:2px 0 6px}
.pc .skeleton-unit{width:46%;height:10px;margin-top:3px}
.pc .skeleton-price{width:64px;height:24px}
.pc .skeleton-add{width:34px;height:34px;border-radius:50%}
@media (min-width:600px){
 #productGrid .pc .product-name{font-size:14px;line-height:18px}
 #productGrid .pc .product-price{font-size:14px;height:26px}
}

/* Item 4: no fake "Qty: 100" pill; sold-out state only when in_stock === false */
#productGrid .stock-pill{display:none}
#productGrid .pc .pc-sold-out{position:absolute;inset:0;z-index:2;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.72);color:var(--muted);font-family:'Plus Jakarta Sans',system-ui,sans-serif;font-weight:700;font-size:13px}
#productGrid .pc.is-sold-out .product-img{filter:grayscale(.6)}