/* =========================
   Dynamic WC Product Table – Clean Light (DIV layout)
   File: assets/css/dwcpt-frontend.css
   Version: 1.2.9
   ========================= */
:root{
  --dwcpt-text:#0f172a; --dwcpt-text-2:#475569; --dwcpt-text-muted:#6b7280;
  --dwcpt-surface:#ffffff; --dwcpt-surface-2:#f8fafc; --dwcpt-border:#e5e7eb;
  --dwcpt-primary:#606060; --dwcpt-primary-hover:#1d4ed8; --dwcpt-focus:#93c5fd;
  --dwcpt-success:#16a34a; --dwcpt-error:#dc2626;
  --dwcpt-radius:12px; --dwcpt-backdrop:rgba(2,6,23,.55);
}

#dwcpt-app-wrapper{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans","Liberation Sans",sans-serif;
  color:var(--dwcpt-text);
  font-size:15px; line-height:1.55; margin-bottom:1em;
}
#dwcpt-app-wrapper *{ box-sizing:border-box }

/* ===== Header (categories + search/cart) ===== */
#dwcpt-app-wrapper .dwcpt-header{
  position:relative; background:var(--dwcpt-surface);
  border:1px solid var(--dwcpt-border); border-radius:var(--dwcpt-radius);
  overflow:hidden; margin-bottom:12px;
}
#dwcpt-app-wrapper .dwcpt-catbar{
  padding:8px; background:var(--dwcpt-surface); border-bottom:1px solid var(--dwcpt-border);
}
#dwcpt-app-wrapper .dwcpt-cat-scroll{
  overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none;
}
#dwcpt-app-wrapper .dwcpt-cat-scroll::-webkit-scrollbar{ display:none }
#dwcpt-app-wrapper .dwcpt-category-tabs{
  display:flex; gap:8px; list-style:none; margin:0; padding:0;
}
#dwcpt-app-wrapper .dwcpt-category-tabs li a{
  display:inline-block; padding:8px 12px; color:var(--dwcpt-text-2); text-decoration:none;
  border:1px solid var(--dwcpt-border); background:var(--dwcpt-surface);
  border-radius:999px; font-weight:700; font-size:12.5px; white-space:nowrap;
}
#dwcpt-app-wrapper .dwcpt-category-tabs li.active a{
  color:var(--dwcpt-text); border-color:var(--dwcpt-primary); background:var(--dwcpt-surface-2);
  box-shadow:0 0 0 2px rgba(37,99,235,.08) inset;
}
#dwcpt-app-wrapper .dwcpt-searchrow{
  display:grid; grid-template-columns:1fr 44px; gap:8px; align-items:center;
  padding:8px 12px; background:var(--dwcpt-surface);
}
#dwcpt-app-wrapper .dwcpt-search{
  height:40px; border:1px solid var(--dwcpt-border); border-radius:999px;
  padding:0 12px; font-size:14px; color:var(--dwcpt-text); background:var(--dwcpt-surface-2);
}
#dwcpt-app-wrapper .dwcpt-search:focus{ outline:none; box-shadow:0 0 0 3px var(--dwcpt-focus) }
#dwcpt-app-wrapper .dwcpt-cart-btn{
  width:44px; height:40px; border:1px solid var(--dwcpt-border); border-radius:12px;
  background:var(--dwcpt-surface-2); display:flex; align-items:center; justify-content:center;
  position:relative; text-decoration:none; color:var(--dwcpt-text);
}
#dwcpt-app-wrapper .dwcpt-cart-icon{ font-size:18px }
#dwcpt-app-wrapper .dwcpt-cart-badge{
  position:absolute; top:-6px; right:-6px; background:#d63638; color:#fff;
  font-size:11px; border-radius:999px; padding:2px 6px; line-height:1;
}

/* ===== List & rows ===== */
#dwcpt-app-wrapper .dwcpt-menu-list{
  display:block; border:1px solid var(--dwcpt-border); border-radius:var(--dwcpt-radius);
  background:var(--dwcpt-surface); overflow:hidden;
}
#dwcpt-app-wrapper .dwcpt-loading-row{ padding:24px; text-align:center; color:#6b7280 }
#dwcpt-app-wrapper .dwcpt-menu-row{
  display:grid; grid-template-columns:3fr 2fr; gap:10px; align-items:start;
  padding:10px 12px; border-bottom:1px solid var(--dwcpt-border);
}
#dwcpt-app-wrapper .dwcpt-menu-row:last-child{ border-bottom:0 }

/* ===== Image (hidden on mobile, visible on desktop) ===== */
#dwcpt-app-wrapper .dwcpt-image{ display:none }
#dwcpt-app-wrapper .dwcpt-image img{
  max-width:64px; height:auto; border-radius:8px; border:1px solid var(--dwcpt-border); background:#fff;
}
/* Placeholder when no image on desktop (uses Font Awesome icon) */
#dwcpt-app-wrapper .dwcpt-fa-placeholder{
  display:inline-flex; width:64px; height:64px; align-items:center; justify-content:center;
  font-size:28px; color:#9aa0a6; background:#f1f5f9; border:1px solid var(--dwcpt-border); border-radius:8px;
}

/* ===== Left column (60%) ===== */
#dwcpt-app-wrapper .dwcpt-left{ text-align:left }
#dwcpt-app-wrapper .dwcpt-name{
  font-weight:700; color:var(--dwcpt-text); font-size:14.5px; line-height:1.35;
  margin-bottom:2px; display:flex; align-items:center; gap:8px;
}
#dwcpt-app-wrapper .dwcpt-name-text{ display:inline-block }
/* Info button (small "i") */
#dwcpt-app-wrapper .dwcpt-info-btn{
  display:inline-flex; align-items:center; justify-content:center;
  width:20px; height:20px; border-radius:999px;
  border:1px solid var(--dwcpt-border); background:var(--dwcpt-surface-2);
  color:var(--dwcpt-primary); font-weight:800; font-size:12px; margin-left:1px;
  cursor:pointer; vertical-align:middle;
}
#dwcpt-app-wrapper .dwcpt-info-btn:focus{ outline:none; box-shadow:0 0 0 3px var(--dwcpt-focus) }

#dwcpt-app-wrapper .dwcpt-desc-text{
  color:var(--dwcpt-text-2); font-size:12.5px; line-height:1.4;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}

/* ===== Tag icons + labels (replaces text tags) ===== */
#dwcpt-app-wrapper .dwcpt-tagicons{
  margin-top:6px; display:flex; flex-wrap:wrap; gap:1px; align-items:flex-start;
}
#dwcpt-app-wrapper .dwcpt-tagicon-wrap{
  display:inline-flex; flex-direction:column; align-items:center; justify-content:flex-start;
  min-width:34px; max-width:56px;
}
#dwcpt-app-wrapper .dwcpt-tagicon{
  width:30px; height:30px; object-fit:contain; display:inline-block;
  margin-bottom:4px; transition:transform 0.2s ease;
}
#dwcpt-app-wrapper .dwcpt-taglabel{
  font-size:10px; color:#555; line-height:1.2; word-break:break-word;
  text-align:center; display:block;
}

/* ===== Variations (checkbox list, horizontally scrollable) ===== */
#dwcpt-app-wrapper .dwcpt-options{ margin-top:6px; min-width:0 }
#dwcpt-app-wrapper .dwcpt-variations-list{
  list-style:none; margin:0; padding:0; display:flex; gap:10px; overflow-x:auto;
  white-space:nowrap; scrollbar-width:none;
}
#dwcpt-app-wrapper .dwcpt-variations-list::-webkit-scrollbar{ display:none }
#dwcpt-app-wrapper .dwcpt-variations-list label{ font-size:12.5px; color:var(--dwcpt-text-2); cursor:pointer }
#dwcpt-app-wrapper .dwcpt-variations-list input{ margin-right:6px }

/* ===== Right column (40%) – centered, tidy) ===== */
#dwcpt-app-wrapper .dwcpt-right{
  display:grid; grid-template-rows:auto auto; gap:8px; align-items:center; justify-items:center; text-align:center;
}
#dwcpt-app-wrapper .dwcpt-price{
  font-weight:800; color:var(--dwcpt-text); font-size:14.5px;
}
#dwcpt-app-wrapper .dwcpt-controls{
  display:grid; grid-template-columns:1fr; gap:6px; width:100%;
}
#dwcpt-app-wrapper .dwcpt-stepper{
  display:grid; grid-template-columns:36px 4.5ch 36px; gap:6px; align-items:center; justify-self:center;
}
#dwcpt-app-wrapper .dwcpt-btn-step{
  height:36px; border-radius:8px; border:1px solid var(--dwcpt-border); background:var(--dwcpt-surface-2);
  font-weight:800; font-size:16px; cursor:pointer; display:flex; align-items:center; justify-content:center;
}
#dwcpt-app-wrapper .dwcpt-btn-step:focus{ outline:none; box-shadow:0 0 0 3px var(--dwcpt-focus) }
#dwcpt-app-wrapper .quantity .qty,
#dwcpt-app-wrapper .dwcpt-stepper .qty{
  width:4.2ch; height:36px; border:1px solid var(--dwcpt-border); border-radius:8px; text-align:center; font-size:14px;
}
#dwcpt-app-wrapper .quantity .qty:focus,
#dwcpt-app-wrapper .dwcpt-stepper .qty:focus{ outline:none; box-shadow:0 0 0 3px var(--dwcpt-focus) }

#dwcpt-app-wrapper .dwcpt-add-btn{
  width:100%; height:36px; background:var(--dwcpt-primary); border:1px solid var(--dwcpt-primary);
  color:#fff; border-radius:10px; padding:10px 14px; font-weight:700; font-size:13.5px;
  transition:background .15s ease,border-color .15s ease,box-shadow .15s ease, opacity .15s ease;
}
#dwcpt-app-wrapper .dwcpt-add-btn:hover{ background:var(--dwcpt-primary-hover); border-color:var(--dwcpt-primary-hover) }
#dwcpt-app-wrapper .dwcpt-add-btn:focus{ outline:none; box-shadow:0 0 0 3px var(--dwcpt-focus) }
#dwcpt-app-wrapper .dwcpt-add-btn.is-loading{ opacity:.85; pointer-events:none }
#dwcpt-app-wrapper .dwcpt-add-btn.is-success{ background:var(--dwcpt-success); border-color:var(--dwcpt-success) }
#dwcpt-app-wrapper .dwcpt-add-btn.is-error{ background:var(--dwcpt-error); border-color:var(--dwcpt-error) }

/* ===== Tablet / Desktop ===== */
@media (min-width:768px){
  #dwcpt-app-wrapper .dwcpt-menu-row{
    grid-template-columns:64px 2fr 1.4fr; gap:16px; padding:14px 16px;
  }
  #dwcpt-app-wrapper .dwcpt-image{ display:flex; align-items:center; justify-content:center }
  #dwcpt-app-wrapper .dwcpt-name{ font-size:16px }
  #dwcpt-app-wrapper .dwcpt-desc-text{ font-size:14px }
  #dwcpt-app-wrapper .dwcpt-price{ font-size:16px }
  #dwcpt-app-wrapper .dwcpt-stepper{ grid-template-columns:36px 5ch 36px; justify-self:center }
  #dwcpt-app-wrapper .dwcpt-add-btn{ height:40px; padding:12px 16px }
}

/* ===== Modal (info with full description) ===== */
#dwcpt-app-wrapper .dwcpt-modal-backdrop{
  position:fixed; inset:0; background:var(--dwcpt-backdrop);
  opacity:0; visibility:hidden; transition:opacity .2s ease,visibility .2s ease; z-index:9998;
}
#dwcpt-app-wrapper .dwcpt-modal{
  position:fixed; inset:0; display:grid; place-items:center;
  opacity:0; visibility:hidden; transition:opacity .2s ease,visibility .2s ease; z-index:9999;
}
#dwcpt-app-wrapper .dwcpt-modal-card{
  width:min(560px,92vw); max-height:86vh; overflow:auto;
  background:var(--dwcpt-surface); border:1px solid var(--dwcpt-border);
  border-radius:14px; box-shadow:0 24px 60px rgba(15,23,42,.25);
}
#dwcpt-app-wrapper .dwcpt-modal-header{
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 14px; border-bottom:1px solid var(--dwcpt-border); background:var(--dwcpt-surface-2);
}
#dwcpt-app-wrapper .dwcpt-modal-title{ font-weight:800; font-size:16px }
#dwcpt-app-wrapper .dwcpt-modal-close{
  display:inline-flex; align-items:center; justify-content:center;
  width:32px; height:32px; border-radius:8px; border:1px solid var(--dwcpt-border);
  background:var(--dwcpt-surface); cursor:pointer; font-size:18px; line-height:1;
}
#dwcpt-app-wrapper .dwcpt-modal-close:focus{ outline:none; box-shadow:0 0 0 3px var(--dwcpt-focus) }
#dwcpt-app-wrapper .dwcpt-modal-body{ padding:14px }
#dwcpt-app-wrapper .dwcpt-modal-desc{ font-size:14px; color:var(--dwcpt-text) }
#dwcpt-app-wrapper .dwcpt-modal-footer{
  display:flex; gap:10px; padding:12px 14px; border-top:1px solid var(--dwcpt-border); background:var(--dwcpt-surface-2);
}

/* Reusable button in modal/toolbars */
#dwcpt-app-wrapper .dwcpt-btn{
  display:inline-block; border-radius:10px; padding:10px 14px;
  font-weight:700; font-size:13.5px; border:1px solid var(--dwcpt-border);
  cursor:pointer; background:var(--dwcpt-surface); color:var(--dwcpt-text);
}
#dwcpt-app-wrapper .dwcpt-btn:focus{ outline:none; box-shadow:0 0 0 3px var(--dwcpt-focus) }

/* Close button should fit its text (no stretching) */
#dwcpt-app-wrapper .dwcpt-modal-footer .dwcpt-btn{
  width:auto; white-space:nowrap; min-width:0;
}

/* When modal is open (body has class) */
.dwcpt-is-open #dwcpt-app-wrapper .dwcpt-modal-backdrop,
.dwcpt-is-open #dwcpt-app-wrapper .dwcpt-modal{
  opacity:1; visibility:visible;
}