/* ============================================================
   product.css — Storefront: product cards, product modal,
   homepage sections, search suggestions, filter drawer, and
   recommendation carousels.
   ============================================================ */

/* Card hover lift */
.product-card { transition: transform 0.2s ease, box-shadow 0.2s ease; }
.product-card:hover { transform: translateY(-4px); box-shadow: 0 12px 32px rgba(79,70,229,0.12); }

/* Wishlist heart (used on cards + product modal) */
.wish-btn { transition: color 0.15s, transform 0.15s; }
.wish-btn:hover { transform: scale(1.2); color: #ef4444; }
.wish-btn.active { color: #ef4444; }

/* Search bar (shop page) */
.search-wrap input:focus { box-shadow: 0 0 0 3px rgba(79,70,229,0.15); }

/* ── PRODUCT DETAIL MODAL ── */
#product-modal { display:none; }
#product-modal.open { display:flex; }
#product-modal-box { animation: modalSlideUp 0.25s cubic-bezier(.22,1,.36,1) forwards; }
.color-swatch { transition: transform 0.15s, box-shadow 0.15s; cursor:pointer; }
.color-swatch:hover { transform: scale(1.15); }
.color-swatch.selected { box-shadow: 0 0 0 3px #fff, 0 0 0 5px #4f46e5; transform: scale(1.15); }
.size-btn { transition: all 0.15s; }
.size-btn.selected { background:#4f46e5; color:#fff; border-color:#4f46e5; }
.size-btn:hover:not(.selected) { border-color:#4f46e5; color:#4f46e5; }

/* Star rating */
.star { cursor:pointer; transition:color 0.1s; }
.star:hover, .star.active { color:#f59e0b; }

/* Out of stock overlay */
.oos-overlay { background:rgba(255,255,255,0.75); }

/* ── HOMEPAGE SECTIONS ── */
.trust-icon { width:52px; height:52px; border-radius:16px; display:flex; align-items:center; justify-content:center; background:#eef2ff; color:#4f46e5; font-size:22px; }
.cat-tile { position:relative; border-radius:18px; overflow:hidden; aspect-ratio:3/4; cursor:pointer; transition:transform 0.3s ease, box-shadow 0.3s ease; }
.cat-tile:hover { transform:translateY(-4px); box-shadow:0 16px 36px rgba(17,24,39,0.15); }
.cat-tile img { width:100%; height:100%; object-fit:cover; transition:transform 0.5s ease; }
.cat-tile:hover img { transform:scale(1.08); }
.cat-tile-overlay { position:absolute; inset:0; background:linear-gradient(to top, rgba(17,24,39,0.75), rgba(17,24,39,0) 55%); display:flex; align-items:flex-end; padding:16px; }
.testimonial-card { background:#fff; border:1px solid #f3f4f6; border-radius:18px; padding:24px; box-shadow:0 2px 10px rgba(17,24,39,0.04); }
.insta-tile { aspect-ratio:1/1; border-radius:12px; overflow:hidden; position:relative; cursor:pointer; }
.insta-tile img { width:100%; height:100%; object-fit:cover; transition:transform 0.3s ease; }
.insta-tile:hover img { transform:scale(1.1); }
.insta-tile-overlay { position:absolute; inset:0; background:rgba(79,70,229,0.55); opacity:0; display:flex; align-items:center; justify-content:center; color:#fff; font-size:20px; transition:opacity 0.2s ease; }
.insta-tile:hover .insta-tile-overlay { opacity:1; }
.accordion-item.open .accordion-chevron { transform:rotate(180deg); }
.accordion-chevron { transition:transform 0.2s ease; }
.accordion-body { display:none; }
.accordion-item.open .accordion-body { display:block; }

/* ── PRODUCT CARD v2 ── */
.pcard-badge { font-size:10px; font-weight:700; letter-spacing:0.02em; padding:3px 8px; border-radius:9999px; }
.pcard-quickview { opacity:0; transform:translateY(6px); transition:opacity 0.2s ease, transform 0.2s ease; }
.product-card:hover .pcard-quickview { opacity:1; transform:translateY(0); }
.pcard-color-dot { width:14px; height:14px; border-radius:50%; border:1.5px solid #fff; box-shadow:0 0 0 1px #e5e7eb; margin-left:-6px; }
.pcard-color-dot:first-child { margin-left:0; }

/* ── PRODUCT MODAL v2 ── */
/* Base (mobile-first) layout — desktop two-column override lives in responsive.css */
#product-modal-box { display:flex; flex-direction:column; }
#pm-gallery-wrap { position:relative; background:#f3f4f6; }
#pm-image-track { display:flex; height:100%; width:100%; overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
#pm-image-track::-webkit-scrollbar { display:none; }
.pm-image-slide { flex:0 0 100%; scroll-snap-align:center; position:relative; overflow:hidden; touch-action:pan-y pinch-zoom; }
.pm-image-slide img { width:100%; height:100%; object-fit:cover; display:block; transition:transform 0.25s ease; cursor:zoom-in; }
.pm-image-slide img.zoomed { transform:scale(2); cursor:zoom-out; }
#pm-image-dots { position:absolute; bottom:10px; left:0; right:0; display:flex; justify-content:center; gap:5px; z-index:5; }
.pm-dot { width:6px; height:6px; border-radius:50%; background:rgba(255,255,255,0.55); transition:all 0.2s ease; }
.pm-dot.active { background:#fff; width:16px; border-radius:3px; }
#pm-zoom-hint { position:absolute; bottom:10px; right:10px; background:rgba(17,24,39,0.55); color:#fff; font-size:10px; padding:3px 8px; border-radius:9999px; pointer-events:none; z-index:5; }
/* Sticky bottom action bar — shown only on mobile (see responsive.css) */
#pm-sticky-bar { display:none; }
.qty-btn { width:32px; height:32px; border-radius:9px; border:1px solid #d1d5db; display:flex; align-items:center; justify-content:center; font-weight:600; color:#374151; transition:background 0.15s; flex-shrink:0; }
.qty-btn:hover { background:#f3f4f6; }

/* ── SEARCH SUGGESTIONS ── */
#search-suggestions { display:none; position:absolute; top:calc(100% + 8px); left:0; right:0; background:#fff; border:1px solid #e5e7eb; border-radius:14px; box-shadow:0 16px 40px rgba(17,24,39,0.12); z-index:70; max-height:420px; overflow-y:auto; }
#search-suggestions.open { display:block; }
.search-sugg-label { padding:10px 14px 4px; font-size:11px; font-weight:700; letter-spacing:0.05em; text-transform:uppercase; color:#9ca3af; }
.search-sugg-item { display:flex; align-items:center; gap:10px; padding:8px 14px; cursor:pointer; transition:background 0.15s; }
.search-sugg-item:hover { background:#f5f6ff; }
.search-sugg-chip { display:inline-flex; align-items:center; gap:4px; font-size:12px; background:#f3f4f6; color:#4b5563; padding:5px 10px; border-radius:9999px; margin:2px 4px 2px 0; cursor:pointer; transition:background 0.15s; }
.search-sugg-chip:hover { background:#e5e7eb; }

/* ── FILTER DRAWER ── */
#filter-overlay { display:none; position:fixed; inset:0; background:rgba(17,24,39,0.5); z-index:150; opacity:0; transition:opacity 0.25s ease; }
#filter-overlay.open { display:block; opacity:1; }
#filter-drawer { position:fixed; top:0; right:0; bottom:0; width:88%; max-width:340px; background:#fff; z-index:151; transform:translateX(105%); transition:transform 0.3s cubic-bezier(.22,1,.36,1); display:flex; flex-direction:column; box-shadow:-8px 0 40px rgba(0,0,0,0.15); }
#filter-overlay.open #filter-drawer { transform:translateX(0); }
.filter-chip { display:inline-flex; align-items:center; gap:6px; font-size:12.5px; font-weight:500; padding:6px 12px; border-radius:9999px; border:1.5px solid #e5e7eb; color:#4b5563; cursor:pointer; transition:all 0.15s; }
.filter-chip.selected { background:#eef2ff; border-color:#4f46e5; color:#4f46e5; }
.filter-color-chip { width:28px; height:28px; border-radius:50%; border:2px solid transparent; box-shadow:0 0 0 1px #e5e7eb; cursor:pointer; position:relative; transition:transform 0.15s; }
.filter-color-chip.selected { box-shadow:0 0 0 2px #4f46e5; transform:scale(1.08); }
.active-filter-tag { display:inline-flex; align-items:center; gap:5px; font-size:12px; font-weight:500; background:#eef2ff; color:#4f46e5; padding:5px 10px; border-radius:9999px; }

/* ── RECOMMENDATION CAROUSELS ── */
.rec-scroll { display:flex; gap:14px; overflow-x:auto; scroll-snap-type:x proximity; padding-bottom:6px; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
.rec-scroll::-webkit-scrollbar { display:none; }
.rec-card { flex:0 0 160px; scroll-snap-align:start; cursor:pointer; }
.rec-card img { width:100%; aspect-ratio:3/4; object-fit:cover; border-radius:12px; transition:transform 0.25s ease; }
.rec-card:hover img { transform:scale(1.04); }