/* ═══════════════════════════════════════════
   JEYA DECOR POSTER SHOP — Frontend Styles
   Font: Poppins | v2.2
═══════════════════════════════════════════ */
@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: transparent;
  padding-bottom: 80px;
  position: relative;
}

/* Title hidden */
.jds-home-title { display: none !important; }
.jds-home { padding: 0; }

/* ── 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;
}
.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:14px 0; border-bottom:2px solid var(--jds-border); background:transparent;
}
.jds-back-btn {
  display:inline-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;
  -webkit-tap-highlight-color:transparent;
}
.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(18px,5vw,26px); color:var(--jds-dark);
}

/* ── PRODUCT GRID ── */
.jds-product-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:14px; padding:16px 0 0; }
@media (max-width:480px) { .jds-product-grid { grid-template-columns:repeat(2,1fr); gap: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; }

/* ── SIZE BUTTONS ── */
.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; -webkit-tap-highlight-color:transparent; }
.jds-size:hover  { border-color:#bbb; background:#f0f0f0; color:var(--jds-dark); }
.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; -webkit-tap-highlight-color:transparent; }
.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 FAB
══════════════════════════════ */
.jds-fab {
  position: fixed;
  bottom: 24px; right: 20px;
  z-index: 99990;
  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,.35);
  -webkit-tap-highlight-color: transparent;
}
.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; }

/* ══════════════════════════════
   OVERLAY
══════════════════════════════ */
.jds-overlay {
  /* Use left:0 explicitly — some themes set right-only */
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,.55);
  z-index: 99991;
  opacity: 0; pointer-events: none;
  transition: opacity .3s ease;
  /* Prevent any transform issues */
  transform: none !important;
}
.jds-overlay.open { opacity:1; pointer-events:all; }

/* ══════════════════════════════════════════════
   CART PANEL
   ROOT CAUSE of mobile clipping:
   Many WordPress themes set overflow:hidden on
   <html> or <body> which clips position:fixed.
   Fix: use left:auto + right:0 + explicit width,
   and use a JS-injected wrapper at body level
   so it's outside any clipping context.
══════════════════════════════════════════════ */
.jds-panel {
  position: fixed;
  top: 0;
  right: 0;
  left: auto;              /* never let a theme override left:0 */
  bottom: 0;
  /* Explicit pixel width so vw calc can't be wrong */
  width: 100%;
  max-width: 420px;
  height: 100%;
  background: var(--jds-white);
  z-index: 99992;
  display: flex;
  flex-direction: column;
  box-shadow: -8px 0 40px rgba(0,0,0,.22);
  /* Slide OUT to the right by full width */
  transform: translateX(100%);
  transition: transform .34s cubic-bezier(.4,0,.2,1);
  overflow: hidden;
  /* Prevent any inherited transforms from parent */
  will-change: transform;
  /* Isolate stacking context */
  isolation: isolate;
}
.jds-panel.open { transform: translateX(0); }

/* On phones: truly full width */
@media (max-width: 480px) {
  .jds-panel {
    max-width: 100vw;
    width: 100vw;
    right: 0;
    left: 0;
    border-radius: 0;
  }
}

/* ── PANEL HEADER ── */
.jds-panel-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 20px;
  height: 60px;
  min-height: 60px;
  flex-shrink: 0;
  background: var(--jds-dark);
  color: var(--jds-yellow);
}
.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);
  /* Don't let the title push the close button off screen */
  min-width: 0; flex: 1;
}
.jds-panel-title svg { width:22px; height:22px; stroke:var(--jds-yellow); flex-shrink:0; }
.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; white-space:nowrap; flex-shrink:0;
}

/* Close button — always visible, never clipped */
.jds-panel-close {
  width: 36px; height: 36px;
  min-width: 36px; /* prevent flex from squishing it */
  border-radius: 8px;
  border: 2px solid var(--jds-yellow);
  background: transparent;
  color: var(--jds-yellow);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  margin-left: 12px; /* always keep gap from title */
  transition: background .18s, color .18s;
  -webkit-tap-highlight-color: transparent;
}
.jds-panel-close:hover,
.jds-panel-close:active { background:var(--jds-yellow); color:var(--jds-dark); }
.jds-panel-close svg { width:18px; height:18px; display:block; stroke:currentColor; }

/* ── SCROLLABLE ITEMS AREA ── */
.jds-items {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  padding: 12px 20px;
  min-height: 0; /* critical for flex scroll */
}

.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; }

/* ── CART ITEMS ── */
.jds-cart-item { display:flex; align-items:center; gap:12px; padding:12px 0; border-bottom:1px solid var(--jds-border); }
@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-blue); 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; }

.jds-qty-btn {
  width:28px; height:28px; border-radius:6px;
  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; -webkit-tap-highlight-color:transparent;
}
.jds-qty-btn:hover,
.jds-qty-btn:active { background:var(--jds-yellow); 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; -webkit-tap-highlight-color:transparent; }
.jds-ci-del:hover,.jds-ci-del:active { color:var(--jds-pink); background:#fff0f5; }
.jds-ci-del svg { width:16px; height:16px; }

/* ── PANEL FOOTER ── */
.jds-panel-foot {
  padding: 14px 20px 20px;
  border-top: 2px solid var(--jds-border);
  flex-shrink: 0;
  background: var(--jds-white);
}
.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; -webkit-tap-highlight-color:transparent; }
.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; -webkit-tap-highlight-color:transparent; }
.jds-wa-btn svg { width:20px; height:20px; flex-shrink:0; }
.jds-wa-btn:hover { background:var(--jds-wa-dark); }

/* 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:99999; 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; }