/* Shared helpers for the Tailwind-based pages (listing, product, checkout, account …),
   in the reference palette. The home page, header, footer, drawers and product cards
   are styled by shop.css. */

/* Custom scrollbar */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: #ececf2; }
::-webkit-scrollbar-thumb { background: #1c1b22; border-radius: 3px; }

/* Fade in (page sections) */
.fade-in { animation: fadeIn 0.5s ease forwards; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }

/* Banner gradient used by page heroes */
.hero-gradient { background: linear-gradient(135deg, #1c1b22 0%, #2a2733 55%, #3a2230 100%); }

/* Small pill badge */
.badge-sale { background: #e8435f; color: #fff; font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: 8px; }

/* Input focus ring */
input:focus, select:focus, textarea:focus { outline: none; border-color: #e8435f !important; box-shadow: 0 0 0 3px rgba(232,67,95,0.12); }

/* Buttons (reference: 10px radius, bold, accent) */
.btn-primary { background: #e8435f; color: #fff; padding: 12px 28px; border-radius: 10px; font-weight: 700; font-size: 15px; border: none; cursor: pointer;
               transition: background .2s, transform .1s; display: inline-flex; align-items: center; justify-content: center; gap: 8px; text-decoration: none; }
.btn-primary:hover { background: #cf2f4b; }
.btn-primary:active { transform: scale(.98); }
.btn-outline { border: 1px solid #e6e6ec; color: #1c1b22; padding: 11px 24px; border-radius: 10px; font-weight: 700; font-size: 15px; background: #fff;
               transition: border-color .2s, background .2s, color .2s; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 8px; text-decoration: none; }
.btn-outline:hover { border-color: #1c1b22; }

/* Star rating */
.stars { color: #f5a623; }

/* Hover dropdowns used on some pages */
.dropdown:hover .dropdown-menu { display: block; }
.dropdown-menu { display: none; }

/* Wide screens: same container width as the reference */
@media (min-width: 1360px) { .max-w-7xl { max-width: min(100% - 120px, 1640px) !important; } }

/* Product filters: sidebar on desktop, slide-in drawer below 1024px (products.php) */
.ev-fhead,.ev-ffoot{display:none}
.ev-fbtn{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 14px;border:1px solid #e6e6ec;border-radius:12px;background:#fff;font-size:14px;font-weight:600;color:#1c1b22;cursor:pointer}
.ev-fbtn span{min-width:20px;height:20px;border-radius:10px;background:#e8435f;color:#fff;font-size:11px;display:grid;place-items:center;padding:0 5px}
.ev-fov{display:none}
@media (max-width:1023px){
  .ev-fdrawer{position:fixed;top:0;bottom:0;left:0;width:min(380px,88vw);z-index:50;background:#fff;transform:translateX(-100%);visibility:hidden;
              transition:transform .45s cubic-bezier(.32,.72,0,1),visibility 0s .45s;box-shadow:12px 0 40px rgba(20,18,26,.18)}
  .ev-fdrawer.open{transform:none;visibility:visible;transition-delay:0s}
  .ev-fform{height:100%;display:flex;flex-direction:column}
  .ev-fhead{display:flex;align-items:center;justify-content:space-between;padding:12px 12px 12px 20px;border-bottom:1px solid #e6e6ec;font-size:19px}
  .ev-fbody{flex:1;overflow-y:auto;padding:18px 20px;overscroll-behavior:contain}
  .ev-ffoot{display:grid;grid-template-columns:1fr 1.4fr;gap:10px;padding:14px 20px calc(14px + env(safe-area-inset-bottom));border-top:1px solid #e6e6ec}
  .ev-fov{display:block;position:fixed;inset:0;z-index:45;background:rgba(20,18,26,.5);backdrop-filter:blur(2px);opacity:0;pointer-events:none;transition:opacity .4s}
  .ev-fov.on{opacity:1;pointer-events:auto}
}

/* Phones: page sections are plain blocks, not floating white cards (account, checkout, …) */
@media (max-width:640px){
  .ev-panel{background:transparent!important;border:0!important;border-radius:0!important;box-shadow:none!important;padding-left:0!important;padding-right:0!important}
  .ev-panel + .ev-panel{border-top:1px solid #e6e6ec!important;padding-top:24px!important}
}