/* ==========================================================================
   refresh.css — storefront refinements for phones and tablets
   --------------------------------------------------------------------------
   Loads after style.css on every page except login.html.
   style.css owns the design tokens and every component; this file only adds
   layout behaviour that exists on the storefront alone (swipe rows, sticky
   product action bar, compact mobile footer, touch-device tweaks).
   Nothing here redefines a colour, radius or font: re-branding stays a
   one-file job (the Brand block in style.css).
   ========================================================================== */

/* ---- Touch devices: no hover "lift" (it sticks after a tap) ---- */
@media(hover:none){
  .product-card:hover,.cat-chip:hover{transform:none}
  .product-card:hover .product-media>img{transform:none}
}

/* ---- Home: categories become an edge-to-edge swipe row on phones ---- */
@media(max-width:767px){
  .section-categories-highlight{padding:20px 0}
  .cat-scroller{margin-inline:-16px;padding:6px 16px 14px;scroll-padding-inline:16px;gap:12px}
  .cat-chip{flex-basis:120px;width:120px;min-height:156px;padding:14px 8px 12px}
  .cat-chip .cat-icon{width:72px;height:72px;min-width:72px}
  .cat-chip span.name{font-size:.86rem}
}

/* ---- Home: product rows swipe on phones, exactly two cards in view ---- */
@media(max-width:767px){
  #featuredGrid,#offerGrid,#newGrid{display:flex;overflow-x:auto;gap:10px;margin-inline:-16px;padding:6px 16px 12px;scroll-padding-inline:16px;scroll-snap-type:x mandatory;scrollbar-width:none}
  #featuredGrid::-webkit-scrollbar,#offerGrid::-webkit-scrollbar,#newGrid::-webkit-scrollbar{display:none}
  #featuredGrid>.product-card,#offerGrid>.product-card,#newGrid>.product-card,
  #featuredGrid>.skeleton-card,#offerGrid>.skeleton-card,#newGrid>.skeleton-card{flex:0 0 calc(50% - 6px);width:calc(50% - 6px);max-width:calc(50% - 6px);scroll-snap-align:start}
}

/* ---- Product page: sticky action bar on phones and small tablets ---- */
@media(max-width:900px){
  .detail-actions{position:fixed;inset-inline:0;bottom:0;z-index:90;margin:0;padding:10px 16px calc(10px + env(safe-area-inset-bottom,0px));flex-wrap:nowrap;background:var(--surface);border-top:1px solid var(--border);box-shadow:0 -6px 20px rgba(15,23,42,.08)}
  .detail-actions .btn{flex:1;min-width:0;padding-inline:10px}
  body:has(#detailActions){padding-bottom:84px}
  body:has(#detailActions) .toast{bottom:92px}
  body:has(#detailActions) #backToTopBtn{bottom:100px}
}

/* ---- Footer: compact two-column layout on phones ---- */
@media(max-width:768px){
  .site-footer .footer-grid{grid-template-columns:1fr 1fr;gap:16px 14px;padding:24px 0 16px}
  .footer-grid>div:nth-child(1){grid-column:1/-1;padding-bottom:12px;border-bottom:1px solid rgba(255,255,255,.12)}
  .footer-grid>div:nth-child(1) .footer-brand{margin-bottom:6px}
  .footer-grid>div:nth-child(1) .footer-brand img{width:38px;height:38px;border-radius:10px}
  .footer-grid>div:nth-child(1) p{margin:0;line-height:1.5}
  .site-footer h4{font-size:.92rem;margin-bottom:8px}
  .site-footer ul{gap:6px}
  .site-footer li,.site-footer a{line-height:1.4}
  .footer-grid>div:nth-child(4){grid-column:1/-1;padding-top:12px;border-top:1px solid rgba(255,255,255,.12)}
  .footer-grid>div:nth-child(4) h4{margin-bottom:10px}
  .footer-grid>div:nth-child(4) ul{display:flex;flex-wrap:wrap;gap:8px}
  .footer-grid>div:nth-child(4) li{display:inline-flex;align-items:center;padding:5px 12px;border-radius:var(--radius-pill);background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16)}
  .footer-grid>div:nth-child(4) li a{color:#D5DEEB}
  .footer-bottom{padding:14px 0 24px;font-size:.75rem}
}

/* ---- Small phones ---- */
@media(max-width:360px){
  .product-actions .btn .btn-label{font-size:.76rem}
}
@media(max-width:650px){
  #backToTopBtn{bottom:20px;right:16px}
}