/* ═══════════════════════════════════════════
   JEYA DECOR POSTER SHOP — Frontend Styles
   Font: Poppins
   Brand: yellow #F5C518, pink #FF6B9D,
          green #7ED957, blue #5BA4F5,
          orange #FF9A3C, purple #B97FE8
═══════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800;900&display=swap');

:root {
  --jds-yellow:  #F5C518;
  --jds-pink:    #FF6B9D;
  --jds-green:   #7ED957;
  --jds-blue:    #5BA4F5;
  --jds-orange:  #FF9A3C;
  --jds-purple:  #B97FE8;
  --jds-dark:    #1a1a1a;
  --jds-gray:    #f4f4f4;
  --jds-border:  #e8e8e8;
  --jds-text:    #222;
  --jds-muted:   #888;
  --jds-white:   #fff;
  --jds-wa:      #25d366;
  --jds-wa-dark: #128c7e;
  --jds-radius:  16px;
  --jds-shadow:  0 2px 12px rgba(0,0,0,.08);
  --jds-shadow-hover: 0 6px 24px rgba(0,0,0,.14);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

.jds-wrap {
  font-family: 'Poppins', sans-serif;
  color: var(--jds-text);
  background: #fafafa;
  min-height: 60vh;
  padding-bottom: 100px;
  position: relative;
}

/* ── HOME TITLE ── */
.jds-home { padding: 28px 16px 8px; }
.jds-home-title {
  font-family: 'Poppins', sans-serif;
  font-size: clamp(22px,5vw,32px);
  font-weight: 800;
  color: var(--jds-dark);
  margin-bottom: 20px;
  letter-spacing: -.3px;
}

/* ── CATEGORY GRID ── */
.jds-cat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 14px;
}
@media (max-width: 480px) { .jds-cat-grid { grid-template-columns: repeat(2,1fr); gap:10px; } }
@media (min-width: 768px) { .jds-cat-grid { grid-template-columns: repeat(auto-fill, minmax(200px,1fr)); gap:18px; } }

.jds-cat-tile {
  border-radius: var(--jds-radius);
  overflow: hidden;
  cursor: pointer;
  background: var(--jds-white);
  box-shadow: var(--jds-shadow);
  transition: transform .22s ease, box-shadow .22s ease;
  position: relative;
}
.jds-cat-tile:hover { transform: translateY(-4px); box-shadow: var(--jds-shadow-hover); }

.jds-cat-tile:nth-child(6n+1) .jds-cat-img-wrap::after { background: var(--jds-yellow); }
.jds-cat-tile:nth-child(6n+2) .jds-cat-img-wrap::after { background: var(--jds-pink); }
.jds-cat-tile:nth-child(6n+3) .jds-cat-img-wrap::after { background: var(--jds-green); }
.jds-cat-tile:nth-child(6n+4) .jds-cat-img-wrap::after { background: var(--jds-blue); }
.jds-cat-tile:nth-child(6n+5) .jds-cat-img-wrap::after { background: var(--jds-orange); }
.jds-cat-tile:nth-child(6n+0) .jds-cat-img-wrap::after { background: var(--jds-purple); }

.jds-cat-img-wrap {
  position: relative;
  aspect-ratio: 3/4;
  overflow: hidden;
  background: var(--jds-gray);
}
.jds-cat-img-wrap::after {
  content:'';
  position:absolute;
  bottom:0; left:0; right:0;
  height:4px;
}
.jds-cat-img-wrap img {
  width:100%; height:100%;
  object-fit:cover;
  display:block;
  transition: transform .4s ease;
}
.jds-cat-tile:hover .jds-cat-img-wrap img { transform: scale(1.06); }
.jds-cat-img-placeholder {
  width:100%; height:100%;
  display:flex; align-items:center; justify-content:center;
  color: var(--jds-muted);
}
.jds-cat-img-placeholder svg { width:40px; height:40px; }

.jds-cat-tile-name {
  padding: 10px 12px;
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .03em;
  text-align: center;
  color: var(--jds-dark);
}

/* ── CATEGORY VIEW ── */
.jds-cat-view { padding: 0 0 20px; }
.jds-cat-view-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px 16px 14px;
  border-bottom: 2px solid var(--jds-border);
  background: var(--jds-white);
  position: sticky;
  top: 0;
  z-index: 90;
}
.jds-back-btn {
  display: flex; align-items: center; gap: 5px;
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 13px;
  color: var(--jds-blue);
  background: #eff6ff;
  border: none;
  border-radius: 100px;
  padding: 7px 14px 7px 10px;
  cursor: pointer;
  transition: background .18s;
  flex-shrink: 0;
}
.jds-back-btn:hover { background: #dbeafe; }
.jds-back-btn svg { width: 18px; height: 18px; }

.jds-cat-view-title {
  font-family: 'Poppins', sans-serif;
  font-weight: 800;
  font-size: clamp(20px,5vw,28px);
  letter-spacing: -.2px;
}

/* ── PRODUCT GRID ── */
.jds-product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 14px;
  padding: 20px 16px;
}
@media (max-width: 480px) { .jds-product-grid { grid-template-columns: repeat(2,1fr); gap:10px; padding:14px 10px; } }
@media (min-width: 768px) { .jds-product-grid { grid-template-columns: repeat(auto-fill, minmax(200px,1fr)); gap:18px; } }

.jds-product-card {
  background: var(--jds-white);
  border-radius: var(--jds-radius);
  overflow: hidden;
  box-shadow: var(--jds-shadow);
  transition: transform .22s ease, box-shadow .22s ease;
  display: flex;
  flex-direction: column;
}
.jds-product-card:hover { transform: translateY(-3px); box-shadow: var(--jds-shadow-hover); }

.jds-product-img-wrap {
  aspect-ratio: 3/4;
  overflow: hidden;
  background: var(--jds-gray);
}
.jds-product-img-wrap img {
  width:100%; height:100%;
  object-fit: cover;
  display: block;
  transition: transform .38s ease;
}
.jds-product-card:hover .jds-product-img-wrap img { transform: scale(1.05); }

.jds-product-body {
  padding: 11px 12px 13px;
  display: flex;
  flex-direction: column;
  gap: 9px;
  flex: 1;
}

.jds-product-price-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.jds-product-price {
  font-family: 'Poppins', sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: var(--jds-dark);
}
.jds-product-price strong {
  font-size: 17px;
  font-weight: 700;
}
.jds-product-code {
  font-family: 'Poppins', sans-serif;
  font-size: 11px;
  font-weight: 700;
  color: var(--jds-pink);
  background: #fff0f6;
  padding: 3px 9px;
  border-radius: 100px;
  letter-spacing: .04em;
}

/* ══════════════════════════════════
   FIX 1 — Size Buttons
   Pink active, light grey hover (not blue)
══════════════════════════════════ */
.jds-size-row { display: flex; gap: 7px; }
.jds-size {
  flex: 1;
  padding: 7px 4px;
  border-radius: 8px;
  border: 2px solid var(--jds-border);
  background: var(--jds-white);
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: 13px;
  color: #999;
  cursor: pointer;
  transition: all .16s ease;
  text-align: center;
}
/* Hover — soft dark fill, no blue */
.jds-size:hover {
  border-color: #bbb;
  background: #f0f0f0;
  color: var(--jds-dark);
}
/* Active — pink fill like screenshot */
.jds-size.active {
  border-color: var(--jds-pink);
  background: var(--jds-pink);
  color: #fff;
}

/* Add to cart */
.jds-atc-btn {
  width: 100%;
  display: flex; align-items: center; justify-content: center; gap: 7px;
  padding: 10px;
  background: var(--jds-yellow);
  color: var(--jds-dark);
  border: none;
  border-radius: 10px;
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
  transition: background .18s, transform .14s;
}
.jds-atc-btn svg { width: 15px; height: 15px; }
.jds-atc-btn:hover { background: #e6b800; transform: scale(1.02); }
.jds-atc-btn.added { background: var(--jds-green); color: #1a4f0a; animation: jds-pop .3s ease; }
@keyframes jds-pop { 0%{transform:scale(1)} 50%{transform:scale(.93)} 100%{transform:scale(1)} }

/* ── FLOATING CART BUTTON ── */
.jds-fab {
  position: fixed;
  bottom: 24px; right: 20px;
  z-index: 9990;
  width: 58px; height: 58px;
  border-radius: 50%;
  background: var(--jds-dark);
  color: var(--jds-yellow);
  border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 20px rgba(0,0,0,.3);
  transition: transform .2s, box-shadow .2s;
}
.jds-fab:hover { transform: scale(1.08); box-shadow: 0 6px 28px rgba(0,0,0,.4); }
.jds-fab svg { width: 24px; height: 24px; }
.jds-badge {
  position: absolute; top: -4px; right: -4px;
  background: var(--jds-pink);
  color: white;
  font-family: 'Poppins', sans-serif;
  font-weight: 700; font-size: 11px;
  width: 22px; height: 22px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid white;
}
.jds-badge.pop { animation: jds-pop .3s ease; }

/* ── CART OVERLAY ── */
.jds-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.45);
  z-index: 9991;
  opacity: 0; pointer-events: none;
  transition: opacity .3s ease;
}
.jds-overlay.open { opacity: 1; pointer-events: all; }

/* ── CART PANEL ── */
.jds-panel {
  position: fixed;
  top: 0; right: 0;
  width: min(420px, 100vw);
  height: 100%;
  background: var(--jds-white);
  z-index: 9992;
  display: flex; flex-direction: column;
  box-shadow: -6px 0 40px rgba(0,0,0,.15);
  transform: translateX(100%);
  transition: transform .34s cubic-bezier(.4,0,.2,1);
  overflow: hidden;
}
.jds-panel.open { transform: translateX(0); }

/* ══════════════════════════════════
   FIX 4 — Panel header: close button always visible
   Dark bg + explicit yellow color + solid border
══════════════════════════════════ */
.jds-panel-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px;
  flex-shrink: 0;
  background: var(--jds-dark);
  color: var(--jds-yellow);
  /* Ensure nothing clips the close button */
  overflow: visible;
}
.jds-panel-title {
  display: flex; align-items: center; gap: 10px;
  font-family: 'Poppins', sans-serif;
  font-weight: 700; font-size: 18px;
  color: var(--jds-yellow);
}
.jds-panel-title svg { width: 22px; height: 22px; color: var(--jds-yellow); stroke: var(--jds-yellow); }
.jds-panel-count {
  font-family: 'Poppins', sans-serif;
  font-size: 10px; font-weight: 700;
  letter-spacing: .06em;
  background: var(--jds-yellow);
  color: var(--jds-dark);
  padding: 2px 9px;
  border-radius: 100px;
}
/* Fixed close button — solid yellow border, always visible */
.jds-panel-close {
  width: 36px; height: 36px;
  border-radius: 8px;                        /* square-ish, not oval */
  border: 2px solid var(--jds-yellow);       /* always visible border */
  background: transparent;
  color: var(--jds-yellow);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: background .18s;
  outline: none;
}
.jds-panel-close:hover {
  background: var(--jds-yellow);
  color: var(--jds-dark);
}
.jds-panel-close svg {
  width: 18px; height: 18px;
  display: block;
  stroke: currentColor;
  flex-shrink: 0;
}

/* ── CART ITEMS SCROLL ── */
.jds-items { flex: 1; overflow-y: auto; padding: 12px 20px; scrollbar-width: thin; }
.jds-empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  height: 200px; gap: 12px; color: var(--jds-muted);
}
.jds-empty svg { width: 48px; height: 48px; }
.jds-empty p { font-family: 'Poppins', sans-serif; font-size: 14px; font-weight: 500; }

.jds-cart-item {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--jds-border);
  animation: jds-slidein .25s ease;
}
@keyframes jds-slidein { from{opacity:0;transform:translateX(16px)} to{opacity:1;transform:translateX(0)} }

.jds-ci-img { width: 54px; height: 72px; border-radius: 8px; object-fit: cover; flex-shrink: 0; }
.jds-ci-info { flex: 1; min-width: 0; }
.jds-ci-name {
  font-family: 'Poppins', sans-serif;
  font-size: 13px; font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.jds-ci-meta {
  font-family: 'Poppins', sans-serif;
  font-size: 11px; font-weight: 700;
  color: var(--jds-pink); margin-top: 2px;
}
.jds-ci-price {
  font-family: 'Poppins', sans-serif;
  font-size: 13px; font-weight: 700; margin-top: 4px;
}
.jds-ci-qty {
  display: flex; align-items: center; gap: 8px; margin-top: 7px;
}

/* ══════════════════════════════════
   FIX 3 — Quantity buttons
   Solid square shape, yellow hover fill
══════════════════════════════════ */
.jds-qty-btn {
  width: 28px; height: 28px;
  border-radius: 6px;                   /* square with soft corners — not oval */
  border: 2px solid var(--jds-border);
  background: var(--jds-white);
  color: var(--jds-text);
  font-size: 16px; font-weight: 700;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s, border-color .15s, color .15s;
  line-height: 1;
  flex-shrink: 0;
}
.jds-qty-btn:hover {
  background: var(--jds-yellow);        /* yellow fill on hover — on brand */
  border-color: var(--jds-yellow);
  color: var(--jds-dark);
}
.jds-qty-num {
  font-family: 'Poppins', sans-serif;
  font-size: 14px; font-weight: 700;
  min-width: 22px; text-align: center;
}

.jds-ci-del {
  width: 30px; height: 30px;
  border-radius: 6px;
  border: none; background: transparent; color: var(--jds-muted);
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; transition: color .15s, background .15s;
}
.jds-ci-del:hover { color: var(--jds-pink); background: #fff0f5; }
.jds-ci-del svg { width: 16px; height: 16px; }

/* ── PANEL FOOTER ── */
.jds-panel-foot {
  padding: 14px 20px 18px;
  border-top: 2px solid var(--jds-border);
  flex-shrink: 0;
}
.jds-totals { margin-bottom: 14px; }
.jds-subtotal-row {
  display: flex; justify-content: space-between;
  font-family: 'Poppins', sans-serif;
  font-size: 13px; color: var(--jds-muted); margin-bottom: 6px;
}
.jds-total-row {
  display: flex; justify-content: space-between;
  font-family: 'Poppins', sans-serif;
  font-size: 15px; font-weight: 700;
}
.jds-total-row strong { font-size: 22px; font-weight: 800; }
.jds-clear-btn {
  background: none; border: none;
  color: var(--jds-pink);
  font-family: 'Poppins', sans-serif;
  font-size: 11px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; cursor: pointer;
  padding: 4px 0; margin-top: 6px;
  text-decoration: underline;
}
.jds-wa-btn {
  width: 100%;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  padding: 15px;
  background: var(--jds-wa);
  color: white;
  border: none; border-radius: 12px;
  font-family: 'Poppins', sans-serif;
  font-weight: 700; font-size: 14px; letter-spacing: .03em; text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(37,211,102,.3);
  transition: background .2s, transform .15s;
}
.jds-wa-btn svg { width: 20px; height: 20px; flex-shrink: 0; }
.jds-wa-btn:hover { background: var(--jds-wa-dark); transform: translateY(-1px); }

/* Toast */
.jds-toast {
  position: fixed; bottom: 90px; right: 20px;
  background: var(--jds-dark); color: var(--jds-yellow);
  padding: 10px 18px; border-radius: 10px;
  font-family: 'Poppins', sans-serif;
  font-size: 13px; font-weight: 600;
  z-index: 10000; opacity: 0; transform: translateY(10px);
  pointer-events: none; transition: opacity .25s, transform .25s;
  max-width: 260px;
}
.jds-toast.show { opacity: 1; transform: translateY(0); }

.jds-no-content {
  color: var(--jds-muted);
  font-family: 'Poppins', sans-serif;
  font-size: 14px; padding: 40px 0; text-align: center;
}