img[src*="prodimg/"],img[data-protected-img]{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-user-drag:none;-webkit-tap-highlight-color:transparent}.product-card img,.product-img,.prod-feature-img,.category-card img{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}

/* GRIDFIX (v7.1.0-gridfix): demo.css loads BEFORE this file and forces
   .products-grid AND .grid to unconditional 1fr 1fr, which beat the
   layout.css breakpoints at every width (that was the real reason the
   home grid stayed 2 columns on desktop after the app.js fix).
   This file loads LAST, so these rules win with equal specificity.
   Values mirror layout.css exactly. demo.css is deliberately untouched. */
@media (max-width:480px){.products-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important}}
@media (min-width:481px) and (max-width:768px){.products-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}}
@media (min-width:769px) and (max-width:1024px){.products-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}}
@media (min-width:1025px) and (max-width:1280px){.products-grid{grid-template-columns:repeat(5,minmax(0,1fr));gap:18px}}
@media (min-width:1281px){.products-grid{grid-template-columns:repeat(6,minmax(0,1fr));gap:20px}}

/* OFFERS CAROUSEL (2026-10-26, cardfix): horizontal scroll row in the deal place.
   Native touch scroll, RTL-aware (scrolls both directions). Cards reuse
   the deal .banner look at full width, one card per viewport, exactly
   like the old single deal card. Empty state: no row is rendered at all (see app.js). */
.panda-offers{margin-bottom:20px}
.panda-offers-track{display:flex;gap:12px;overflow:hidden;padding-bottom:4px}
.panda-offers-track .banner{flex:0 0 100%;scroll-snap-align:start;margin-bottom:0}
.panda-offers-dots{display:flex;gap:8px;justify-content:center;align-items:center;padding:10px 0 2px}
.panda-offers-dots button{width:8px;height:8px;padding:0;border:0;border-radius:50%;background:rgba(255,255,255,.3);cursor:pointer}
.panda-offers-dots button.active{background:#fff;transform:scale(1.3)}