/* Retail Styles
   Scope: Retail pages (category bar, two-column retail layout, product detail page)
   Depends on: /css/styles.css (tokens, fonts). This file assumes :root tokens are defined there.
   Load order: styles.css → retail-styles.css → inc-header-nav.css → page-specific overrides (e.g., inc-grid-styles.asp)
   Breakpoints used: 1100px, 980px, 900px, 820px, 640px, 520px
*/

/* ===========================
   Base
   =========================== */
* { box-sizing:border-box; }

body {
  margin:0;
  background:var(--bg);
  color:var(--text);
  font:16px/1.5 system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial;
}

/* (Anchor base lives in styles.css) */

/* ===========================
   Category Bar
   =========================== */
.catbar {
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  background:var(--panel);
}
.catbar .wrap { max-width:var(--wrap-max); margin:0 auto; padding:0 16px; }
.catbar ul {
  display:flex; gap:18px; overflow:auto; scrollbar-width:none;
  margin:0; padding:0; list-style:none;
}
.catbar ul::-webkit-scrollbar { display:none; }
.catbar li { flex:0 0 auto; }
.catbar a {
  display:block; white-space:nowrap;
  padding:12px 8px;
  color:var(--text); font-weight:600;
  border-bottom:2px solid transparent; text-decoration:none;
}
.catbar a:hover { color:var(--gold); }
.catbar a.active { color:var(--gold); border-color:var(--gold); }

/* ===========================
   Promo Strip
   =========================== */
.promo {
  max-width:var(--wrap-max);
  margin:6px auto 24px;
  /* grid settings moved to GRID-SPECIFIC section at bottom */
  padding:0 16px;
}
.promo .badge {
  position:absolute; top:10px; left:10px;
  padding:4px 8px; border-radius:999px;
  background:var(--gold); color:#111;
  font-weight:700; font-size:.75rem; letter-spacing:.03em;
}

.card {
  position:relative;
  display:flex; flex-direction:column;
  background:var(--panel);
  border:1px solid var(--panel-br);
  border-radius:18px;
  overflow:hidden;
  transition:.18s;
}
.card:hover { transform:translateY(-2px); box-shadow:0 8px 24px rgba(0,0,0,.25); }
.card img { display:block; width:100%; height:300px; object-fit:cover; background:#202429; }
.card .body { padding:12px 14px 14px; }
.promo-name { margin:0 0 6px; font-weight:600; }

.cover-link { position:absolute; inset:0; z-index:1; }

/* ===========================
   Two-Column Layout (List)
   =========================== */
.layout {
  max-width:var(--wrap-max);
  margin:0 auto 70px;
  /* grid settings moved to GRID-SPECIFIC section at bottom */
  padding:0 16px;
}

/* Sidebar */
.side {
  position:sticky; top:86px; height:max-content;
  background:var(--panel);
  border:1px solid var(--panel-br);
  border-radius:14px;
  padding:12px;
}
.side h3 { margin:0 0 10px; font-size:1.1rem; font-family:"EB Garamond",serif; }

.filter-toggle { display:none; }

@media (max-width:900px){
  .side { position:static; display:none; }
  .filter-toggle {
    display:inline-flex; align-items:center; gap:8px;
    padding:8px 10px; border-radius:10px;
    background:var(--panel); color:var(--text);
    border:1px solid var(--panel-br);
  }
  .filter-open .side { display:block; }
}

/* Side list */
.catlist { margin:0; padding:0; list-style:none; }
.catlist li { margin:2px 0; }
.catlist a {
  display:flex; justify-content:space-between; gap:8px;
  padding:8px 10px; border-radius:10px;
  color:var(--text); text-decoration:none;
  border:1px solid transparent;
}
.catlist a:hover { background:rgba(255,255,255,0.04); border-color:var(--panel-br); }
.catlist a.active { background:rgba(203,161,53,0.10); border-color:rgba(203,161,53,0.35); color:var(--text); }

/* Toolbar / chips / filters */
.toolbar {
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap;
  gap:10px; margin:0 0 10px;
}
.chips { display:flex; gap:8px; flex-wrap:wrap; }
.chip {
  padding:4px 9px; border-radius:999px;
  border:1px solid var(--panel-br);

  background:rgba(255,255,255,.02);
  color:var(--muted); font-size:.85rem;
}
.filters-inline { display:flex; align-items:center; gap:8px; }
.filters-inline select, .filters-inline label { font-size:.95rem; }
.filters-inline select {
  min-height:34px; padding:6px 8px;
  background:var(--panel); color:var(--text);
  border:1px solid var(--panel-br); border-radius:10px;
}

/* ===========================
   Product Cards (Grid)
   ===========================
   (shop.asp includes a page-specific grid override include)
*/

/* ===========================
   Footer
   =========================== */
/* (footer-basics live in styles.css) */

/* ===========================
   Pager
   =========================== */
.pager { display:flex; justify-content:center; margin:24px 0; }
.pager ul { display:flex; gap:8px; flex-wrap:wrap; margin:0; padding:0; list-style:none; }
.pager a, .pager span {
  display:inline-block; line-height:1;
  padding:6px 10px; border:1px solid var(--panel-br); border-radius:10px; text-decoration:none;
}
.pager a { color:var(--link); }
.pager a:hover { background:rgba(255,255,255,.04); }
.pager .active { background:rgba(203,161,53,.12); color:var(--gold); border-color:rgba(203,161,53,.35); font-weight:600; }
.pager .disabled { opacity:.55; border-style:dashed; }


/* ===========================
   PRODUCT DETAIL PAGE
   =========================== */
.pd-wrap { max-width:1100px; margin:0 auto; padding:28px 16px 60px; }

.pd-gallery {
  background:var(--panel);
  border:1px solid var(--panel-br);
  border-radius:18px;
  padding:16px;
}
.pd-hero { display:block; width:100%; height:min(600px,70vh); object-fit:cover; border-radius:12px; }

.pd-info {
  background:var(--panel);
  border:1px solid var(--panel-br);
  border-radius:18px;
  padding:18px 18px 20px;
}
.pd-brand { color:var(--muted); font-weight:600; margin-bottom:4px; letter-spacing:.02em; }
.pd-title { margin:0 0 6px; font-family:"EB Garamond",serif; font-size:clamp(22px,3.2vw,34px); letter-spacing:.2px; color:var(--gold); }
.pd-sub { margin:0 0 14px; color:var(--muted); }

/* Price + status */
.pd-price { display:flex; align-items:baseline; gap:10px; margin:8px 0 10px; }
.pd-price__main, .pd-price__sale { color:var(--gold); font-weight:800; font-size:1.25rem; }
.pd-price__strk { color:var(--muted); text-decoration:line-through; }

/* Inline badges */
.badge {
  display:inline-block; padding:4px 10px; border-radius:999px;
  font-size:.78rem; font-weight:700; letter-spacing:.02em;
  border:1px solid var(--panel-br); background:rgba(255,255,255,.06); color:var(--text);
}
.badge.in { background:rgba(60,140,80,.18); border-color:rgba(60,140,80,.35); }
.badge.out { background:rgba(200,80,60,.18); border-color:rgba(200,80,60,.35); }
.badge.promo { background:rgba(203,161,53,.18); border-color:rgba(203,161,53,.35); }
.badge.travel { background:rgba(150,150,150,.18); border-color:rgba(150,150,150,.35); }

.pd-status { display:flex; align-items:center; gap:8px; margin:6px 0 14px; }

/* Buy box */
.pd-buy { margin:8px 0 16px; }
.pd-buy label { margin-right:8px; font-size:.9rem; color:var(--muted); }
.pd-buy select {
  margin-right:10px; padding:6px 8px; border-radius:10px;
  background:#0f1012; color:var(--text);
  border:1px solid var(--panel-br);
}

.pd-actions { display:flex; gap:10px; margin-top:12px; }

/* Buttons (base .btn lives in styles.css) */
.btn:hover { background:rgba(255,255,255,.05); }
.btn:active { transform:translateY(1px); }
.btn.buy { background:var(--gold); color:#111; border-color:rgba(203,161,53,.65); }
.btn[disabled] { opacity:.55; cursor:not-allowed; }

/* Description + Ingredients */
.pd-desc { margin-top:18px; padding-top:14px; border-top:1px dashed var(--panel-br); }
.pd-desc .content p { margin:.4rem 0 .9rem; }

.pd-ingredients { margin-top:14px; padding-top:10px; border-top:1px dashed var(--panel-br); }
.pd-ingredients > summary {
  position:relative; cursor:pointer; user-select:none;
  padding:8px 10px; border-radius:10px; list-style:none; color:var(--text);
}
.pd-ingredients > summary::marker { content:""; display:none; }
.pd-ingredients > summary::after { content:"▸"; position:absolute; right:10px; top:8px; opacity:.8; }
.pd-ingredients[open] > summary::after { content:"▾"; }
.pd-ingredients .content { padding:6px 10px 10px; color:var(--muted); }

/* Utilities */
.small { font-size:.85rem; }
.sr { position:absolute !important; left:-9999px !important; width:1px; height:1px; overflow:hidden; }

/* ===========================
   GRID-SPECIFIC (moved here)
   Containers using CSS Grid
   =========================== */

/* Promo grid */
.promo{
  display:grid;
  gap:var(--gap);
  grid-template-columns:repeat(4,minmax(0,1fr));
}
@media (max-width:1100px){ .promo{ grid-template-columns:repeat(3,1fr) } }
@media (max-width:820px){  .promo{ grid-template-columns:repeat(2,1fr) } }
@media (max-width:520px){  .promo{ grid-template-columns:repeat(2,1fr) } }

/* Two-column page layout grid */
.layout{
  display:grid;
  gap:24px;
  grid-template-columns:260px 1fr;
}
@media (max-width:900px){ .layout{ grid-template-columns:1fr } }

/* Product detail: media + info grid */
.pd-grid {
  display:grid;
  gap:28px;
  grid-template-columns:1.25fr 1fr;
}
@media (max-width:980px){ .pd-grid{ grid-template-columns:1fr } }