/* ==========================================================================
   PawMart theme - inspired by TMRW/Veirdo storefront
   Primary #01ab68 · Accent #8f54f0 · Font: IBM Plex Sans
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600;700&display=swap');

:root {
  --green:        #01ab68;
  --green-dark:   #018c55;
  --green-deep:   #0b3d2a;
  --green-text:   #01794B;   /* WCAG AA green for text/fills under white text */
  --green-text-dark: #015E3A;
  --green-off:    #007A2F;   /* WCAG AA "% off" green */
  --ink-strike:   #6B6F72;   /* WCAG AA strikethrough MRP */
  --tint-1:       #F0FBF6;
  --tint-2:       #E6F7F0;
  --purple:       #8f54f0;
  --purple-tint:  #f3ecff;
  --ink:          #131814;
  --ink-2:        #51575C;
  --ink-3:        #6E7275;
  --ink-4:        #AFB2B4;
  --line:         #c9cbcc;
  --hairline:     .5px solid var(--line);
  --off:          #00B53A;
  --offer-bg-1:   rgba(230,254,244,.7);
  --offer-bg-2:   rgba(230,254,244,.2);
  --danger:       #FF6062;
  --radius:       12px;
  --radius-lg:    16px;
  --shadow-hard:  2px 2px 0 0 rgba(1,171,104,.9);
  --shadow-card:  0 4px 16px rgba(19,24,20,.06);
  --header-h:     64px;
}

* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  font-family:'IBM Plex Sans', system-ui, -apple-system, sans-serif;
  color:var(--ink);
  background:#fff;
  font-size:15px;
  line-height:1.45;
  -webkit-font-smoothing:antialiased;
}
img { display:block; max-width:100%; }
a { color:inherit; text-decoration:none; }
button { font-family:inherit; cursor:pointer; border:none; background:none; }
input, select, textarea { font-family:inherit; font-size:inherit; color:inherit; }
ul { list-style:none; }

.container { width:100%; max-width:1280px; margin-inline:auto; padding-inline:12px; }
@media(min-width:1024px){ .container { padding-inline:32px; } }

.muted { color:var(--ink-3); }
.hidden { display:none !important; }

/* ======================= Announcement marquee ======================= */
.announce {
  background:var(--green-text); color:#fff; overflow:hidden; white-space:nowrap;
  font-size:12px; font-weight:600; text-transform:uppercase;
  letter-spacing:.4px; padding:8px 0;
}
.announce-track { display:inline-flex; animation:marquee 28s linear infinite; }
.announce-track span { padding-right:56px; }
@keyframes marquee { from { transform:translateX(0);} to { transform:translateX(-50%);} }

/* ============================== Header ============================== */
.site-header {
  position:sticky; top:0; z-index:900; background:#fff;
  border-bottom:.5px solid #eceef0;
}
.header-bar {
  display:flex; align-items:center; gap:16px;
  height:var(--header-h); padding:0 12px;
}
@media(min-width:1024px){ .header-bar{ padding:0 32px; gap:28px;} }

.burger { display:flex; flex-direction:column; gap:5px; padding:6px; }
.burger i { display:block; width:22px; height:2px; background:var(--ink); border-radius:2px; transition:.25s; }
@media(min-width:1024px){ .burger { display:none; } }

.logo { display:flex; align-items:center; gap:8px; font-weight:700; font-size:22px; letter-spacing:-.5px; }
.logo svg { width:34px; height:34px; }
.logo b { color:var(--green-dark); }

.main-nav { display:none; gap:22px; font-size:13.5px; font-weight:500; }
.main-nav a { padding:8px 2px; border-bottom:2px solid transparent; transition:.2s; text-transform:uppercase; letter-spacing:.3px; }
.main-nav a:hover { color:var(--green); border-color:var(--green); }
.main-nav a.active { color:var(--green); border-color:var(--green); }
@media(min-width:1024px){ .main-nav { display:flex; } }

.header-search { display:none; flex:1; max-width:520px; position:relative; }
@media(min-width:1024px){ .header-search { display:block; } }
.search-input-wrap {
  display:flex; align-items:center; gap:8px;
  background:var(--tint-1); border:.5px solid var(--green);
  border-radius:10px; padding:10px 14px;
}
.search-input-wrap svg { width:18px; height:18px; stroke:var(--ink-3); flex:none; }
.search-input-wrap input {
  flex:1; background:transparent; border:none; outline:none;
  font-size:13.5px; font-weight:500;
}
.search-input-wrap input::placeholder { color:#9db8ac; }

.predictive {
  position:absolute; top:calc(100% + 8px); left:0; right:0;
  background:#fff; border-radius:var(--radius);
  box-shadow:0 12px 40px rgba(19,24,20,.14), 0 0 0 .5px var(--tint-2);
  max-height:420px; overflow:auto; z-index:60;
}
.predictive-item { display:flex; gap:12px; align-items:center; padding:10px 14px; cursor:pointer; }
.predictive-item:hover, .predictive-item.sel { background:var(--tint-1); }
.predictive-item img { width:44px; height:62px; object-fit:cover; border-radius:8px; border:.5px solid #eee; background:#f6f6f6; }
.predictive-item .pi-name { font-size:13px; font-weight:500; }
.predictive-item .pi-price { font-size:12.5px; font-weight:600; color:var(--green-text); margin-top:2px; }
.predictive-empty { padding:18px 16px; font-size:13px; color:var(--ink-3); }

.header-actions { display:flex; align-items:center; gap:4px; margin-left:auto; }
.icon-btn {
  position:relative; display:flex; align-items:center; justify-content:center;
  width:42px; height:42px; border-radius:50%; transition:.2s;
}
.icon-btn:hover { background:var(--tint-1); }
.icon-btn svg { width:21px; height:21px; stroke:var(--ink); fill:none; stroke-width:1.7; }
.cart-count {
  position:absolute; top:2px; right:0;
  min-width:17px; height:17px; padding:0 4px;
  background:var(--purple); color:#fff; font-size:10.5px; font-weight:700;
  border-radius:99px; display:flex; align-items:center; justify-content:center;
}
.mobile-search-btn { display:flex; }
@media(min-width:1024px){ .mobile-search-btn { display:none; } }

/* ============================ Drawers =============================== */
.overlay {
  position:fixed; inset:0; background:rgba(19,24,20,.44);
  opacity:0; pointer-events:none; transition:.3s; z-index:990;
}
.overlay.show { opacity:1; pointer-events:auto; }

.drawer {
  position:fixed; top:0; bottom:0; width:min(360px,86vw); background:var(--tint-1);
  z-index:1000; transition:transform .32s cubic-bezier(.4,0,.2,1);
  display:flex; flex-direction:column;
}
.drawer-left  { left:0;  transform:translateX(-105%); box-shadow:4px 0 24px rgba(0,0,0,.08); }
.drawer-right { right:0; transform:translateX(105%);  box-shadow:-4px 0 24px rgba(0,0,0,.10); }
.drawer.open { transform:translateX(0); }
.drawer-head {
  display:flex; align-items:center; justify-content:space-between;
  padding:16px; background:#fff; border-bottom:.5px solid #e7ebe9;
}
.drawer-head h3 { font-size:15px; font-weight:700; text-transform:uppercase; letter-spacing:.5px; }
.drawer-close { width:36px; height:36px; border-radius:50%; display:flex; align-items:center; justify-content:center; }
.drawer-close:hover { background:#f0f2f1; }
.drawer-close svg { width:18px; height:18px; stroke:var(--ink); stroke-width:2; }
.drawer-body { flex:1; overflow-y:auto; padding:14px; }

/* menu accordion */
.mmenu > li > details, .mmenu > li > a {
  background:#fff; border-radius:10px; margin-bottom:8px;
  border:.5px solid #eef1ef; overflow:hidden;
}
.mmenu summary, .mmenu .mlink {
  display:flex; justify-content:space-between; align-items:center;
  padding:14px 16px; font-size:13px; font-weight:600;
  text-transform:uppercase; letter-spacing:.4px; cursor:pointer; list-style:none;
}
.mmenu summary::-webkit-details-marker { display:none; }
.mmenu summary svg, .mmenu .mlink svg { width:16px; height:16px; stroke:var(--ink-2); transition:.25s; }
.mmenu details[open] summary svg.arrow { transform:rotate(180deg); }
.mmenu-sub { padding:4px 16px 14px; display:flex; flex-direction:column; gap:2px; }
.mmenu-sub a { font-size:13px; color:var(--ink-2); padding:8px 0; border-top:.5px solid #f1f4f2; }
.mmenu-sub a:first-child { border-top:none; }
.mmenu-sub a:hover { color:var(--green); }
.mmenu-foot { padding:16px; font-size:12.5px; color:var(--ink-2); }

/* ========================= Cart drawer ============================== */
.free-ship-bar { padding:12px 14px; background:#fff; border-bottom:.5px solid #eef1ef; }
.fs-track { height:6px; background:#eef1ef; border-radius:99px; margin-top:8px; overflow:hidden; }
.fs-fill { height:100%; background:linear-gradient(90deg,var(--green),#35d492); border-radius:99px; transition:width .4s; }
.fs-text { font-size:12.5px; color:var(--ink-2); }
.fs-text b { color:var(--green-text); }

.cd-item { display:flex; gap:12px; background:#fff; border-radius:12px; padding:10px; margin-bottom:10px; border:.5px solid #eef1ef; }
.cd-item img { width:72px; height:100px; object-fit:cover; border-radius:8px; background:#f6f6f6; }
.cd-info { flex:1; min-width:0; }
.cd-name { font-size:13px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cd-price { font-size:13.5px; font-weight:700; margin-top:4px; }
.cd-mrp { font-size:11.5px; color:var(--ink-strike); text-decoration:line-through; font-weight:500; margin-left:6px; }
.cd-row { display:flex; align-items:center; justify-content:space-between; margin-top:10px; }
.qty { display:inline-flex; align-items:center; border:.5px solid var(--line); border-radius:8px; overflow:hidden; }
.qty button { width:28px; height:28px; font-size:15px; color:var(--ink-2); }
.qty button:hover { background:var(--tint-1); color:var(--green); }
.qty span { min-width:30px; text-align:center; font-size:13px; font-weight:600; }
.cd-remove { font-size:12px; color:var(--danger); font-weight:500; }
.cd-remove:hover { text-decoration:underline; }

.cd-empty { text-align:center; padding:48px 20px; color:var(--ink-3); }
.cd-empty img, .cd-empty svg { width:110px; margin:0 auto 16px; opacity:.85; }

.cd-foot { padding:14px; background:#fff; border-top:.5px solid #eceef0; }
.cd-total { display:flex; justify-content:space-between; font-size:15px; font-weight:700; margin-bottom:12px; }
.cd-note { font-size:11.5px; color:var(--ink-3); text-align:center; margin-top:10px; }

/* ============================= Buttons ============================== */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:12px 22px; border-radius:10px;
  font-size:14px; font-weight:600; letter-spacing:.3px;
  transition:.2s; text-transform:uppercase;
}
.btn-primary { background:var(--green-text); color:#fff; box-shadow:var(--shadow-hard); }
.btn-primary:hover { background:var(--green-text-dark); transform:translateY(-1px); }
.btn-outline { border:1.5px solid var(--green); color:var(--green); background:#fff; }
.btn-outline:hover { background:var(--tint-1); }
.btn-block { width:100%; }
.btn-sm { padding:8px 14px; font-size:12px; border-radius:8px; }
.btn[disabled] { opacity:.55; pointer-events:none; }

/* ========================== Hero slider ============================= */
.hero { margin:14px auto 0; }
.hero-viewport { overflow:hidden; border-radius:var(--radius-lg); }
.hero-track { display:flex; transition:transform .5s cubic-bezier(.4,0,.2,1); }
.hero-slide { min-width:100%; }
.hero-slide img { width:100%; height:auto; aspect-ratio:1200/480; object-fit:cover; }
@media(max-width:767px){ .hero-slide img { aspect-ratio:800/640; } }
.hero-dots { display:flex; justify-content:center; gap:8px; margin-top:12px; }
.hero-dot { width:8px; height:8px; border-radius:99px; background:#d6dbd8; transition:.25s; }
.hero-dot.on { width:22px; background:var(--green); }

/* ======================= Category circles =========================== */
.cats { display:flex; gap:18px; overflow-x:auto; padding:22px 12px 8px; scrollbar-width:none; }
.cats::-webkit-scrollbar { display:none; }
.cat-circle { display:flex; flex-direction:column; align-items:center; gap:8px; flex:none; width:84px; }
.cat-circle img { width:68px; height:68px; border-radius:50%; transition:.25s; border:.5px solid #e3e8e5; }
.cat-circle:hover img { transform:scale(1.07); box-shadow:var(--shadow-card); }
.cat-circle span { font-size:12.5px; font-weight:600; color:var(--ink-2); }
@media(min-width:1024px){
  .cats { justify-content:center; gap:34px; }
  .cat-circle { width:104px; }
  .cat-circle img { width:92px; height:92px; }
}

/* =========================== Sections =============================== */
.section { margin-top:40px; }
.section-head { display:flex; align-items:baseline; justify-content:space-between; margin-bottom:16px; }
.section-title {
  font-size:17px; font-weight:700; text-transform:uppercase; letter-spacing:.8px;
  position:relative; padding-left:14px;
}
.section-title::before {
  content:''; position:absolute; left:0; top:3px; bottom:3px; width:5px;
  background:var(--green); border-radius:3px;
}
.view-all { font-size:13px; font-weight:600; color:var(--green-text); display:flex; align-items:center; gap:4px; }
.view-all:hover { text-decoration:underline; }

.rail { display:grid; grid-auto-flow:column; grid-auto-columns:46%; gap:12px;
        overflow-x:auto; padding:2px 12px 10px; scrollbar-width:none; scroll-snap-type:x mandatory; }
.rail::-webkit-scrollbar { display:none; }
.rail > * { scroll-snap-align:start; }
@media(min-width:768px){ .rail { grid-auto-columns:31%; } }
.grid-products { display:grid; grid-template-columns:repeat(2,1fr); gap:12px; }
@media(min-width:768px){ .grid-products { grid-template-columns:repeat(3,1fr); } }
@media(min-width:1024px){ .grid-products { grid-template-columns:repeat(4,1fr); gap:18px; } }
@media(min-width:1280px){ .grid-products { grid-template-columns:repeat(5,1fr); } }
.rail-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:12px; }
@media(min-width:768px){ .rail-grid { grid-template-columns:repeat(3,1fr);} }
@media(min-width:1024px){ .rail-grid { grid-template-columns:repeat(5,1fr); gap:18px;} }

/* ========================= Product cards ============================ */
.pcard {
  display:flex; flex-direction:column; border-radius:var(--radius);
  border:var(--hairline); background:#fff; overflow:hidden;
  transition:box-shadow .25s, transform .25s; position:relative;
}
.pcard:hover { box-shadow:var(--shadow-card); transform:translateY(-2px); }
.pcard-media { position:relative; display:block; aspect-ratio:2/3; background:#f6f6f6; overflow:hidden; }
.pcard-media img { width:100%; height:100%; object-fit:cover; transition:transform .5s; }
.pcard:hover .pcard-media img { transform:scale(1.05); }

.ptags { position:absolute; top:8px; left:8px; display:flex; flex-direction:column; gap:4px; align-items:flex-start; z-index:2; }
.ptag {
  font-size:8.5px; font-weight:600; text-transform:uppercase; letter-spacing:.3px;
  padding:3px 7px; border-radius:4px; background:#fff; box-shadow:0 1px 4px rgba(0,0,0,.08);
}
.ptag.promo { color:#6A3AC4; background:var(--purple-tint); }
.ptag.badge { color:var(--green-text); background:var(--tint-2); }

.rating-pill {
  position:absolute; left:8px; bottom:8px; z-index:2;
  display:flex; align-items:center; gap:4px;
  background:rgba(255,255,255,.94); border-radius:6px; padding:3px 6px;
  font-size:11px; font-weight:600; color:var(--ink-2);
}
.rating-pill .star { width:12px; height:12px; color:#f5a623; }
.rating-pill i { width:2px; height:9px; background:#c4c8ca; border-radius:2px; }

.swatches { position:absolute; right:8px; bottom:8px; z-index:2; display:flex; gap:3px; align-items:center; }
.swatch-dot { width:13px; height:13px; border-radius:50%; border:1.5px solid #fff; box-shadow:0 0 0 .5px #ddd; }

.quick-add {
  position:absolute; left:8px; right:8px; bottom:38px; z-index:3;
  background:var(--green-text); color:#fff; font-size:12.5px; font-weight:600;
  padding:9px; border-radius:8px; opacity:0; transform:translateY(6px);
  transition:.22s; text-transform:uppercase; letter-spacing:.4px;
  display:flex; align-items:center; justify-content:center; gap:6px;
}
.pcard:hover .quick-add { opacity:1; transform:translateY(0); }
.quick-add:hover { background:var(--green-text-dark); }
.quick-add.added { background:var(--purple); }
@media(hover:none){ .quick-add { display:none; } }

.wish-btn {
  position:absolute; top:8px; right:8px; z-index:2;
  width:30px; height:30px; border-radius:50%;
  background:rgba(255,255,255,.94); display:flex; align-items:center; justify-content:center;
  opacity:0; transition:.2s;
}
.pcard:hover .wish-btn { opacity:1; }
@media(hover:none){ .wish-btn { opacity:1; } }
.wish-btn svg { width:16px; height:16px; stroke:var(--ink-2); fill:none; stroke-width:1.8; transition:.2s; }
.wish-btn.on svg { fill:var(--danger); stroke:var(--danger); }

.pcard-info { padding:10px 10px 12px; display:flex; flex-direction:column; gap:5px; flex:1; }
.price-row { display:flex; align-items:baseline; gap:7px; flex-wrap:wrap; }
.price-now { font-size:15px; font-weight:700; }
.price-mrp { font-size:12px; color:var(--ink-strike); text-decoration:line-through; font-weight:500; }
.price-off { font-size:11px; font-weight:600; color:var(--green-off); text-transform:uppercase; }

.offer-strip {
  display:flex; align-items:center; gap:6px;
  background:linear-gradient(90deg,var(--offer-bg-1),var(--offer-bg-2));
  border-radius:7px; padding:4px 8px;
  font-size:11px; color:#008040; font-weight:500; width:fit-content;
}
.offer-strip b { font-weight:700; }

.pcard-name {
  font-size:12.5px; color:var(--ink-3);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

/* ======================== Promo banner strip ======================== */
.promo-strip { margin-top:44px; }
.promo-strip img { width:100%; border-radius:var(--radius-lg); }

/* ============================ USPs ================================== */
.usps { display:grid; grid-template-columns:repeat(2,1fr); gap:10px; margin-top:44px; }
.usp { display:flex; gap:10px; align-items:center; background:var(--tint-1); border-radius:var(--radius); padding:14px; }
.usp svg { width:26px; height:26px; stroke:var(--green); fill:none; stroke-width:1.6; flex:none; }
.usp b { display:block; font-size:13px; }
.usp small { font-size:11.5px; color:var(--ink-3); }
@media(min-width:1024px){ .usps { grid-template-columns:repeat(4,1fr); } }

/* ====================== Listing / filters =========================== */
.listing-layout { display:grid; grid-template-columns:1fr; gap:20px; margin-top:22px; }
@media(min-width:1024px){ .listing-layout { grid-template-columns:250px 1fr; } }
.filters { display:none; }
@media(min-width:1024px){ .filters { display:block; } }
.filter-card { background:#fff; border:var(--hairline); border-radius:var(--radius); padding:16px; margin-bottom:14px; }
.filter-card h4 { font-size:12px; text-transform:uppercase; letter-spacing:.6px; margin-bottom:12px; color:var(--ink-2); }
.f-check { display:flex; align-items:center; gap:9px; padding:6px 0; font-size:13.5px; cursor:pointer; color:var(--ink-2); }
.f-check input { accent-color:var(--green); width:15px; height:15px; }
.f-check:hover { color:var(--ink); }
.price-vals { display:flex; justify-content:space-between; font-size:12.5px; color:var(--ink-2); margin-bottom:8px; }

.listing-toolbar { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:14px; flex-wrap:wrap; }
.result-count { font-size:13px; color:var(--ink-3); }
.sort-select {
  border:var(--hairline); border-radius:9px; padding:9px 12px;
  font-size:13px; font-weight:600; background:#fff; outline:none; cursor:pointer;
}
.filter-open-btn { display:inline-flex; align-items:center; gap:7px; border:var(--hairline);
  border-radius:9px; padding:9px 14px; font-size:13px; font-weight:600; }
@media(min-width:1024px){ .filter-open-btn { display:none; } }

.pagination { display:flex; justify-content:center; gap:6px; margin-top:28px; }
.page-link { min-width:38px; height:38px; display:flex; align-items:center; justify-content:center;
  border:var(--hairline); border-radius:9px; font-size:13.5px; font-weight:600; color:var(--ink-2); }
.page-link.cur { background:var(--green); border-color:var(--green); color:#fff; }
.page-link:hover:not(.cur) { border-color:var(--green); color:var(--green); }

/* mobile filter sheet */
.sheet {
  position:fixed; left:0; right:0; bottom:0; z-index:1000;
  background:#fff; border-radius:18px 18px 0 0; transform:translateY(105%);
  transition:transform .3s cubic-bezier(.4,0,.2,1); max-height:80vh; display:flex; flex-direction:column;
}
.sheet.open { transform:translateY(0); }
.sheet-head { display:flex; justify-content:space-between; align-items:center; padding:16px; border-bottom:.5px solid #eee; font-weight:700; }
.sheet-body { overflow-y:auto; padding:16px; flex:1; }
.sheet-foot { padding:14px 16px; border-top:.5px solid #eee; display:flex; gap:10px; }

/* ========================== PDP ==================================== */
.breadcrumbs { font-size:12.5px; color:var(--ink-3); padding:16px 0 4px; }
.breadcrumbs a:hover { color:var(--green); }
.breadcrumbs span { margin:0 6px; color:var(--ink-4); }

.pdp { display:grid; grid-template-columns:1fr; gap:24px; margin-top:14px; }
@media(min-width:1024px){ .pdp { grid-template-columns:1.05fr 1fr; } }
.gallery { display:flex; gap:12px; }
.gallery-main { flex:1; border:var(--hairline); border-radius:var(--radius-lg); overflow:hidden; aspect-ratio:2/3; background:#f6f6f6; }
.gallery-main img { width:100%; height:100%; object-fit:cover; }
.gallery-thumbs { display:flex; flex-direction:column; gap:10px; }
.gthumb { width:64px; border:1.5px solid transparent; border-radius:10px; overflow:hidden; aspect-ratio:2/3; background:#f6f6f6; }
.gthumb img { width:100%; height:100%; object-fit:cover; }
.gthumb.on { border-color:var(--green); }

.pdp-info h1 { font-size:20px; line-height:1.3; font-weight:700; }
@media(min-width:1024px){ .pdp-info h1 { font-size:24px; } }
.pdp-brand { font-size:12.5px; color:var(--ink-3); text-transform:uppercase; letter-spacing:.6px; margin-bottom:6px; font-weight:600; }
.pdp-rating { display:flex; align-items:center; gap:8px; margin:10px 0 2px; }
.stars { display:inline-flex; gap:1px; }
.stars svg { width:15px; height:15px; color:#f5a623; }
.pdp-rating .rcount { font-size:12.5px; color:var(--ink-3); }

.pdp-price { display:flex; align-items:baseline; gap:10px; margin:14px 0 6px; }
.pp-now { font-size:26px; font-weight:700; }
.pp-mrp { font-size:15px; color:var(--ink-4); text-decoration:line-through; }
.pp-off { font-size:14px; color:var(--green-off); font-weight:600; }
.tax-note { font-size:11.5px; color:var(--ink-3); }
.pdp-offer { margin:12px 0; }
.stock-line { font-size:13px; font-weight:600; margin:10px 0; }
.stock-line.ok { color:var(--green-text); } .stock-line.low { color:#e08a00; } .stock-line.out { color:var(--danger); }

.opt-label { font-size:12.5px; font-weight:600; text-transform:uppercase; letter-spacing:.5px; margin:16px 0 8px; color:var(--ink-2); }
.size-chips { display:flex; gap:8px; flex-wrap:wrap; }
.chip { border:1.5px solid var(--line); border-radius:8px; padding:8px 16px; font-size:13px; font-weight:600; transition:.15s; }
.chip:hover { border-color:var(--green); }
.chip.on { border-color:var(--green); background:var(--tint-1); color:var(--green-text); }

.color-chips { display:flex; gap:10px; flex-wrap:wrap; }
.color-chip { display:flex; align-items:center; gap:7px; border:1.5px solid var(--line); border-radius:8px; padding:7px 12px; font-size:12.5px; font-weight:600; transition:.15s; }
.color-chip i { width:15px; height:15px; border-radius:50%; box-shadow:inset 0 0 0 .5px rgba(0,0,0,.15); }
.color-chip.on { border-color:var(--green); background:var(--tint-1); }

.buy-row { display:flex; gap:12px; margin-top:22px; }
.buy-row .qty { height:47px; }
.buy-row .qty button { width:38px; height:100%; font-size:17px; }
.buy-row .qty span { min-width:38px; font-size:15px; }
.buy-row .btn { flex:1; }

.pincheck { display:flex; gap:8px; margin-top:20px; }
.pincheck input { flex:1; max-width:220px; border:var(--hairline); border-radius:9px; padding:11px 12px; font-size:13.5px; outline:none; }
.pincheck input:focus { border-color:var(--green); }
.pin-result { font-size:12.5px; margin-top:8px; font-weight:600; }
.pin-result.ok { color:var(--green-text); } .pin-result.err { color:var(--danger); }

.accordions { margin-top:26px; border:var(--hairline); border-radius:var(--radius); overflow:hidden; }
.acc { border-bottom:.5px solid #eceef0; }
.acc:last-child { border-bottom:none; }
.acc summary { list-style:none; display:flex; justify-content:space-between; align-items:center;
  padding:15px 16px; font-size:13.5px; font-weight:600; cursor:pointer; }
.acc summary::-webkit-details-marker { display:none; }
.acc summary svg { width:16px; height:16px; stroke:var(--ink-2); transition:.25s; }
.acc[open] summary svg { transform:rotate(45deg); }
.acc-body { padding:0 16px 16px; font-size:13.5px; color:var(--ink-2); line-height:1.65; }

.atc-sticky {
  position:fixed; left:0; right:0; bottom:0; z-index:800;
  display:flex; gap:10px; padding:10px 12px calc(10px + env(safe-area-inset-bottom));
  background:#fff; box-shadow:0 -6px 20px rgba(0,0,0,.08); transform:translateY(0); transition:.3s;
}
.atc-sticky.hide { transform:translateY(110%); }
.atc-sticky .btn { flex:1; padding:13px; }
@media(min-width:1024px){ .atc-sticky { display:none; } }

/* related rail uses .rail + .pcard */

/* ====================== Cart & checkout ============================= */
.cart-layout { display:grid; grid-template-columns:1fr; gap:20px; margin-top:20px; }
@media(min-width:1024px){ .cart-layout { grid-template-columns:1fr 380px; align-items:start; } }
.panel { background:#fff; border:var(--hairline); border-radius:var(--radius-lg); }
.panel-pad { padding:18px; }
.summary-row { display:flex; justify-content:space-between; font-size:14px; padding:7px 0; color:var(--ink-2); }
.summary-row.total { font-size:17px; font-weight:700; color:var(--ink); border-top:.5px dashed var(--line); margin-top:8px; padding-top:14px; }
.summary-row .free { color:var(--green-text); font-weight:600; }
.summary-row .minus { color:var(--green-off); font-weight:600; }

.coupon-box { display:flex; gap:8px; margin-top:14px; }
.coupon-box input { flex:1; border:var(--hairline); border-radius:9px; padding:10px 12px; font-size:13px; text-transform:uppercase; outline:none; }
.coupon-box input:focus { border-color:var(--green); }
.coupon-msg { font-size:12.5px; font-weight:600; margin-top:8px; }
.coupon-msg.ok { color:var(--green-text); } .coupon-msg.err { color:var(--danger); }
.coupon-applied { display:flex; justify-content:space-between; align-items:center; background:var(--tint-1); border-radius:9px; padding:10px 12px; font-size:13px; font-weight:600; color:var(--green-text); margin-top:14px; }
.coupon-applied button { color:var(--danger); font-size:12px; font-weight:600; }

.form-grid { display:grid; grid-template-columns:1fr; gap:14px; }
@media(min-width:640px){ .form-grid.two { grid-template-columns:1fr 1fr; } }
.field label { display:block; font-size:12.5px; font-weight:600; margin-bottom:6px; color:var(--ink-2); }
.field label em { color:var(--danger); font-style:normal; }
.field input, .field select, .field textarea {
  width:100%; border:var(--hairline); border-radius:9px; padding:12px 14px;
  font-size:14px; outline:none; transition:border-color .15s; background:#fff;
}
.field input:focus, .field select:focus, .field textarea:focus { border-color:var(--green); }
.field.err input { border-color:var(--danger); }
.field .msg { font-size:12px; color:var(--danger); margin-top:5px; display:none; }
.field.err .msg { display:block; }

.pay-options { display:flex; flex-direction:column; gap:10px; }
.pay-opt { display:flex; align-items:center; gap:12px; border:1.5px solid var(--line); border-radius:10px; padding:14px; cursor:pointer; transition:.15s; font-weight:600; font-size:14px; }
.pay-opt small { display:block; font-weight:400; color:var(--ink-3); font-size:12px; margin-top:2px; }
.pay-opt input { accent-color:var(--green); width:17px; height:17px; }
.pay-opt.on { border-color:var(--green); background:var(--tint-1); }

.empty-state { text-align:center; padding:70px 20px; }
.empty-state svg { width:130px; margin:0 auto 18px; }
.empty-state h3 { font-size:18px; margin-bottom:6px; }
.empty-state p { color:var(--ink-3); font-size:14px; margin-bottom:20px; }

/* ========================== Account ================================= */
.account-tabs { display:flex; gap:8px; margin:22px 0 18px; background:var(--tint-1); padding:5px; border-radius:12px; width:fit-content; }
.account-tab { padding:10px 22px; border-radius:9px; font-size:13.5px; font-weight:600; color:var(--ink-2); transition:.2s; }
.account-tab.on { background:#fff; color:var(--green-text); box-shadow:var(--shadow-card); }
.auth-panel { max-width:430px; }
.auth-panel form { display:flex; flex-direction:column; gap:14px; }
.order-card { border:var(--hairline); border-radius:var(--radius); padding:16px; margin-bottom:12px; background:#fff; }
.order-head { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:8px; margin-bottom:10px; }
.order-no { font-weight:700; font-size:14px; }
.status-badge { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.5px; padding:4px 10px; border-radius:99px; }
.status-pending   { background:#fff4e0; color:#b97a00; }
.status-confirmed { background:#e3f0ff; color:#1668c9; }
.status-shipped   { background:var(--purple-tint); color:var(--purple); }
.status-delivered { background:var(--tint-2); color:var(--green-text); }
.status-cancelled { background:#ffe5e6; color:var(--danger); }
.order-meta { font-size:12.5px; color:var(--ink-3); }
.order-items-mini { display:flex; gap:8px; margin-top:10px; flex-wrap:wrap; }
.order-items-mini img { width:42px; height:58px; border-radius:6px; object-fit:cover; border:.5px solid #eee; }

/* =========================== Footer ================================= */
.site-footer { background:var(--green-deep); color:#cfe8dc; margin-top:56px; }
.footer-newsletter { display:grid; grid-template-columns:1fr; gap:18px; padding:36px 0; border-bottom:.5px solid rgba(255,255,255,.09); }
@media(min-width:1024px){ .footer-newsletter { grid-template-columns:1fr 1fr; align-items:center; } }
.footer-newsletter h3 { color:#fff; font-size:20px; margin-bottom:6px; }
.newsletter-form { display:flex; gap:8px; }
.newsletter-form input { flex:1; border:none; border-radius:10px; padding:13px 16px; font-size:14px; outline:none; background:rgba(255,255,255,.1); color:#fff; }
.newsletter-form input::placeholder { color:#9fc4b3; }
.footer-cols { display:grid; grid-template-columns:repeat(2,1fr); gap:28px; padding:34px 0; }
@media(min-width:1024px){ .footer-cols { grid-template-columns:repeat(4,1fr); } }
.footer-cols h4 { color:#fff; font-size:13px; text-transform:uppercase; letter-spacing:.8px; margin-bottom:14px; }
.footer-cols a { display:block; font-size:13.5px; padding:5px 0; color:#a9cdbb; }
.footer-cols a:hover { color:#fff; }
.footer-base { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:18px 0 26px; font-size:12.5px; color:#8fb8a3; flex-wrap:wrap; }

/* =========================== Toasts ================================= */
.toasts { position:fixed; bottom:20px; left:50%; transform:translateX(-50%); z-index:2000; display:flex; flex-direction:column; gap:8px; align-items:center; pointer-events:none; }
.toast {
  background:var(--ink); color:#fff; font-size:13.5px; font-weight:500;
  padding:11px 20px; border-radius:99px; box-shadow:0 8px 24px rgba(0,0,0,.25);
  animation:toastIn .3s cubic-bezier(.4,0,.2,1); display:flex; gap:8px; align-items:center;
  max-width:88vw;
}
.toast.success::before, .toast.error::before, .toast.info::before {
  content:''; width:8px; height:8px; border-radius:50%; flex:none;
}
.toast.success::before { background:#35d492; }
.toast.error::before   { background:var(--danger); }
.toast.info::before    { background:#4fc3f7; }
.toast.leaving { animation:toastOut .3s forwards; }
@keyframes toastIn  { from { opacity:0; transform:translateY(14px);} to { opacity:1; transform:none;} }
@keyframes toastOut { to { opacity:0; transform:translateY(14px);} }

/* flash (server-rendered toast) */
[data-flash] { display:none; }

/* ========================== Admin =================================== */
.admin-body { background:#f4f6f5; }
.admin-shell { display:grid; grid-template-columns:1fr; min-height:100vh; }
.admin-side { background:var(--green-deep); padding:20px 14px; }
.admin-side .logo { color:#fff; margin-bottom:26px; font-size:19px; }
.admin-nav a { display:flex; align-items:center; gap:10px; color:#a9cdbb; padding:11px 12px; border-radius:9px; font-size:14px; font-weight:500; margin-bottom:4px; }
.admin-nav a.on, .admin-nav a:hover { background:rgba(255,255,255,.1); color:#fff; }
.admin-nav svg { width:18px; height:18px; stroke:currentColor; fill:none; stroke-width:1.7; }
.admin-main { padding:20px 16px 40px; }
@media(min-width:1024px){
  .admin-shell { grid-template-columns:240px 1fr; }
  .admin-main { padding:28px 32px 48px; }
}
.stat-cards { display:grid; grid-template-columns:repeat(2,1fr); gap:14px; }
@media(min-width:900px){ .stat-cards { grid-template-columns:repeat(4,1fr); } }
.stat-card { background:#fff; border-radius:var(--radius-lg); padding:18px; border:.5px solid #e7ebe9; }
.stat-card small { color:var(--ink-3); font-size:12.5px; font-weight:600; text-transform:uppercase; letter-spacing:.5px; }
.stat-card b { display:block; font-size:24px; margin-top:6px; }
.stat-card.green b { color:var(--green-text); }
.table-wrap { overflow-x:auto; background:#fff; border-radius:var(--radius-lg); border:.5px solid #e7ebe9; }
table.adm { width:100%; border-collapse:collapse; font-size:13.5px; min-width:640px; }
table.adm th { text-align:left; font-size:11.5px; text-transform:uppercase; letter-spacing:.6px; color:var(--ink-3); padding:13px 16px; border-bottom:.5px solid #e7ebe9; white-space:nowrap; }
table.adm td { padding:12px 16px; border-bottom:.5px solid #f1f4f2; vertical-align:middle; }
table.adm tr:last-child td { border-bottom:none; }
table.adm tr:hover td { background:#fafcfb; }
.timg { width:38px; height:52px; object-fit:cover; border-radius:6px; border:.5px solid #eee; background:#f6f6f6; }
.row-actions { display:flex; gap:6px; }
.mini-btn { border:var(--hairline); border-radius:7px; padding:6px 11px; font-size:12px; font-weight:600; color:var(--ink-2); transition:.15s; }
.mini-btn:hover { border-color:var(--green-text); color:var(--green-text); }
.mini-btn.danger:hover { border-color:var(--danger); color:var(--danger); }
.admin-head { display:flex; justify-content:space-between; align-items:center; gap:14px; margin-bottom:18px; flex-wrap:wrap; }
.admin-head h1 { font-size:20px; }
select.mini-select, input.mini-input { border:var(--hairline); border-radius:8px; padding:8px 10px; font-size:13px; outline:none; }
input.mini-input:focus, select.mini-select:focus { border-color:var(--green); }

/* misc */
.page-title { font-size:20px; font-weight:700; margin:20px 0 4px; }

/* admin order detail responsive split */
.order-detail-grid { display:grid; grid-template-columns:1fr 360px; gap:20px; align-items:start; margin-top:6px; }
@media(max-width:1023px){ .order-detail-grid { grid-template-columns:1fr; } }

/* smooth touch scrolling in drawers */
.drawer-body, .sheet-body { -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
.back-link { display:inline-flex; align-items:center; gap:6px; font-size:13px; color:var(--ink-3); margin-top:14px; }
.back-link:hover { color:var(--green-text); }

/* ==========================================================================
   MOBILE OPTIMIZATION LAYER
   ========================================================================== */

/* --- global touch hygiene --- */
html, body { overflow-x: clip; }
a, button, input, select, label, summary { -webkit-tap-highlight-color: transparent; }
button, .qty button, .icon-btn, .chip, .color-chip, .page-link,
.hero-dot, .gthumb, .wish-btn, .drawer-close, .f-check {
  touch-action: manipulation;
}

/* larger, safer hit targets for controls */
.drawer-close { width: 40px; height: 40px; }
.qty button   { min-width: 34px; }

/* hero dots: visual pill inside a 24px finger target */
.hero-dot {
  position: relative; width: 24px; height: 24px;
  background: none; display: flex; align-items: center; justify-content: center;
}
.hero-dot::before {
  content: ''; width: 8px; height: 8px; border-radius: 99px;
  background: #d6dbd8; transition: .25s;
}
.hero-dot.on::before { width: 24px; background: var(--green); }

/* safe-area aware surfaces */
.cd-foot    { padding-bottom: calc(14px + env(safe-area-inset-bottom)); }
.sheet-foot { padding-bottom: calc(14px + env(safe-area-inset-bottom)); }
.toasts     { bottom: calc(20px + env(safe-area-inset-bottom)); }

/* --- phones --- */
@media (max-width: 767px) {
  :root { --header-h: 56px; }

  body { font-size: 14.5px; }

  /* prevent iOS focus auto-zoom on text fields */
  input[type="text"], input[type="email"], input[type="tel"],
  input[type="number"], input[type="password"], input[type="search"]:not(.search-input-wrap input),
  textarea {
    font-size: max(16px, 1em);
  }
  .pincheck input, .coupon-box input, .newsletter-form input,
  .field input, .field textarea, #checkoutForm input {
    font-size: 16px;
  }

  .logo { font-size: 19px; letter-spacing: -.4px; }
  .logo svg { width: 29px; height: 29px; }
  .header-bar { gap: 10px; }
  .icon-btn { width: 38px; height: 38px; }
  .announce { font-size: 11px; padding: 7px 0; }

  .container { padding-inline: 12px; }
  .section { margin-top: 30px; }
  .section-title { font-size: 15px; }
  .hero { margin-top: 10px; }
  .cats { gap: 14px; padding-top: 18px; }
  .cat-circle { width: 72px; }
  .cat-circle img { width: 58px; height: 58px; }

  .grid-products { gap: 10px; }
  .pcard-info { padding: 8px 8px 10px; }
  .price-now { font-size: 14px; }
  .price-mrp { font-size: 11px; }
  .offer-strip { font-size: 10px; }
  .rating-pill { font-size: 10px; padding: 2px 5px; }
  .ptag { font-size: 8px; }

  /* PDP: main image on top, thumbnails become horizontal strip below */
  .gallery { flex-direction: column-reverse; gap: 10px; }
  .gallery-thumbs { flex-direction: row; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; }
  .gallery-thumbs::-webkit-scrollbar { display: none; }
  .gthumb { width: 54px; flex: none; }
  .pdp { gap: 16px; }
  .pdp-info h1 { font-size: 19px; }
  .pp-now { font-size: 23px; }

  /* buy row stacks cleanly */
  .buy-row { flex-wrap: wrap; }
  .buy-row .btn { flex: 1 1 46%; min-height: 47px; }

  .accordions summary { padding: 14px; }

  .cart-layout { gap: 14px; }
  .panel-pad { padding: 14px; }
  .cd-item { padding: 10px; }
  .cd-item img { width: 74px; height: 104px; }

  .summary-row.total { font-size: 16px; }

  .account-tabs { width: 100%; display: flex; }
  .account-tab { flex: 1; text-align: center; padding: 11px 6px; }

  .empty-state { padding: 48px 14px; }
  .footer-newsletter { padding: 26px 0; }
  .footer-cols { gap: 22px; padding: 26px 0; }

  /* toasts sit above sticky bars */
  .toasts { bottom: calc(78px + env(safe-area-inset-bottom)); }
  .toast { font-size: 13px; }

  .listing-toolbar { gap: 8px; }
  .result-count { font-size: 12.5px; }

  .pagination { flex-wrap: wrap; }
}

/* --- small phones --- */
@media (max-width: 374px) {
  .grid-products { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .logo { font-size: 17px; }
  .main-nav, .header-search { display: none; }
  .pp-now { font-size: 21px; }
}

/* --- tablets --- */
@media (min-width: 768px) and (max-width: 1023px) {
  .rail-grid { grid-template-columns: repeat(3, 1fr); }
  .grid-products { grid-template-columns: repeat(3, 1fr); }
  .pdp { grid-template-columns: 1fr 1fr; }
}

/* --- admin: compact top nav on small screens --- */
@media (max-width: 1023px) {
  .admin-side {
    display: flex; align-items: center; gap: 12px;
    overflow-x: auto; padding: 12px 14px;
    position: sticky; top: 0; z-index: 500;
  }
  .admin-side .logo { margin-bottom: 0; flex: none; font-size: 17px; }
  .admin-nav { display: flex; gap: 4px; }
  .admin-nav a { white-space: nowrap; margin-bottom: 0; padding: 9px 12px; font-size: 13px; }
  .admin-side form { margin: 0 0 0 auto !important; }
  .admin-side form button { margin-top: 0 !important; padding: 6px 8px !important; }
  .stat-cards { gap: 10px; }
  .stat-card b { font-size: 20px; }
}

/* --- reduced motion respect (CSS layers) --- */
@media (prefers-reduced-motion: reduce) {
  .announce-track { animation: none; }
  .hero-track { transition: none; }
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* --- tablet refinements --- */
@media (min-width:768px) and (max-width:1023px){
  body{font-size:15px}
  .hero-slide img{aspect-ratio:16/9}
  .cats{gap:24px}
  .section{margin-top:36px}
  .pdp-info h1{font-size:21px}
  .footer-cols{grid-template-columns:repeat(3,1fr)}
}

/* --- SEO chip cloud + FAQ --- */
.chip-cloud{display:flex;flex-wrap:wrap;gap:8px}
.seo-chip{border:.5px solid var(--line);border-radius:999px;padding:8px 15px;font-size:13px;
  font-weight:500;color:var(--ink-2);background:#fff;transition:.2s;display:inline-block}
.seo-chip:hover{border-color:var(--green-text);color:var(--green-text)}
.faq-list{max-width:780px}