/* ---------------------------
   Shoopy - Custom styles.css
   Drop this file into your theme settings (styles.css)
   Backup your original before uploading.
   --------------------------- */

/* ==============
   Theme variables
   ============== */
:root{
  --brand: #0b63ff;          /* primary brand color (blue) */
  --accent: #ff2d55;         /* accent / sale color */
  --muted: #6b7280;          /* muted text */
  --bg: #ffffff;             /* page background */
  --card-bg: #ffffff;        /* product card background */
  --surface: #f7f8fa;        /* surfaces / sections */
  --shadow: 0 6px 18px rgba(18, 24, 40, 0.06);
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  --text: #111827;
  --success: #16a34a;
  --danger: #ef4444;
}

/* ==============
   Base
   ============== */
*{box-sizing:border-box}
html,body{
  margin:0;
  padding:0;
  font-family:var(--font-sans);
  color:var(--text);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1.45;
}

/* Section container used in theme */
.container{
  max-width:1180px;
  margin:0 auto;
  padding:24px;
}

/* Headings */
h1,h2,h3{margin:0 0 12px 0}
h1{font-size:1.6rem}
h2{font-size:1.25rem}
h3{font-size:1rem}

/* Links */
a{color:var(--brand); text-decoration:none}
a:hover{text-decoration:underline}

/* ==============
   Top bar / Header
   ============== */
.header{
  background:var(--bg);
  border-bottom:1px solid rgba(15,23,42,0.04);
  padding:12px 0;
  position:sticky;
  top:0;
  z-index:40;
}
.header .header-inner{
  display:flex;
  align-items:center;
  gap:12px;
  justify-content:space-between;
}
.logo{font-weight:700; color:var(--text); font-size:1.05rem}

/* Nav / actions */
.header .actions{display:flex;align-items:center;gap:10px}
.icon-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:40px;height:40px;
  border-radius:10px;
  background:transparent;border:none;cursor:pointer;
}
.icon-btn:hover{background:var(--surface)}

/* Cart badge */
.cart-btn{position:relative}
.cart-badge{
  position:absolute;
  top:-6px; right:-6px;
  background:var(--accent);
  color:white;
  font-size:12px;
  padding:4px 6px;
  border-radius:999px;
  box-shadow:var(--shadow);
}

/* ==============
   Hero / banner
   ============== */
.hero{
  background:linear-gradient(90deg, rgba(11,99,255,0.06), rgba(255,45,85,0.03));
  padding:28px;
  border-radius:var(--radius-md);
  margin-bottom:20px;
  display:flex;
  align-items:center;
  gap:18px;
}
.hero .title{font-size:1.2rem;font-weight:600}
.hero .cta{margin-left:auto}

/* ==============
   Product grid + cards
   ============== */
.products-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:18px;
  margin-top:12px;
}

/* responsive */
@media (max-width:1100px){ .products-grid{grid-template-columns:repeat(3,1fr)} }
@media (max-width:800px){ .products-grid{grid-template-columns:repeat(2,1fr)} }
@media (max-width:480px){ .products-grid{grid-template-columns:repeat(1,1fr)} }

/* product card */
.product-card{
  background:var(--card-bg);
  border-radius:var(--radius-md);
  overflow:hidden;
  box-shadow:var(--shadow);
  display:flex;
  flex-direction:column;
  transition:transform .18s ease, box-shadow .18s ease;
  min-height:320px;
}
.product-card:hover{ transform:translateY(-6px) }

/* image area */
.product-card .media{
  background:linear-gradient(180deg, rgba(0,0,0,0.03), rgba(0,0,0,0.01));
  display:flex; align-items:center; justify-content:center;
  height:200px; overflow:hidden;
}
.product-card img{max-width:100%; max-height:100%; object-fit:contain}

/* body */
.product-card .body{
  padding:12px 14px;
  display:flex;flex-direction:column; gap:8px; flex:1;
}
.product-card .title{font-weight:600; font-size:0.98rem; color:var(--text)}
.product-card .meta{color:var(--muted); font-size:13px}

/* price row */
.price-row{display:flex; align-items:center; gap:8px; margin-top:auto}
.price{font-weight:700; color:var(--text)}
.compare{color:var(--muted); text-decoration:line-through; font-size:13px}

/* badges */
.badge{
  display:inline-block; font-size:12px; padding:6px 8px; border-radius:999px;
  background:rgba(11,99,255,0.08); color:var(--brand); font-weight:600;
}

/* ==============
   Buttons
   ============== */
.btn{
  display:inline-flex; align-items:center; gap:8px;
  border:0; cursor:pointer; padding:10px 14px; border-radius:var(--radius-sm);
  font-weight:600; font-size:14px;
  transition:transform .12s ease, box-shadow .12s ease;
}
.btn:active{transform:translateY(1px)}

/* primary */
.btn-primary{
  background:var(--brand);
  color:#fff;
  box-shadow:0 6px 20px rgba(11,99,255,0.12);
}
.btn-primary:hover{filter:brightness(.98)}

/* outline */
.btn-outline{
  background:transparent; border:1px solid rgba(15,23,42,0.06); color:var(--text);
}

/* small */
.btn-sm{padding:8px 10px; font-size:13px}

/* add-to-cart (specific) */
.add-cart{
  background:linear-gradient(90deg,var(--brand), #1366f9);
  color:white; border-radius:10px; padding:10px 12px; font-weight:700;
}

/* whatsapp button */
.btn-whatsapp{
  background:#25D366; color:white; border-radius:10px; padding:10px 12px;
}

/* ==============
   Product card actions row
   ============== */
.card-actions{
  display:flex; gap:8px; align-items:center;
}

/* ==============
   Filters / sidebar
   ============== */
.sidebar{
  background:var(--surface);
  padding:14px; border-radius:12px;
  border:1px solid rgba(15,23,42,0.03);
}
.filter-title{font-weight:700; margin-bottom:8px; font-size:14px}

/* color swatches */
.swatches{display:flex; gap:8px}
.swatch{
  width:36px; height:36px; border-radius:8px; border:2px solid transparent; cursor:pointer;
  box-shadow:0 6px 18px rgba(12,18,35,0.04);
}
.swatch.selected{outline:3px solid rgba(11,99,255,0.12); transform:scale(1.03)}

/* ==============
   Footer
   ============== */
.footer{
  margin-top:36px;
  padding:20px; background:transparent; color:var(--muted);
  border-top:1px solid rgba(15,23,42,0.03);
  font-size:13px;
}

/* ==============
   Utility classes
   ============== */
.row{display:flex; gap:12px; align-items:center}
.center{display:flex;align-items:center;justify-content:center}
.hidden{display:none !important}
.muted{color:var(--muted)}
.rounded-lg{border-radius:var(--radius-lg)}
.shadow-sm{box-shadow:0 4px 12px rgba(18,24,40,0.06)}

/* tiny helper for checkout total area */
.checkout-summary{
  background:linear-gradient(180deg, #fff, #fbfdff);
  padding:14px;border-radius:12px;border:1px solid rgba(15,23,42,0.03);
}

/* ==============
   Mobile tweaks
   ============== */
@media (max-width:600px){
  .container{padding:14px}
  .hero{flex-direction:column; align-items:flex-start}
  .header .header-inner{padding:0 6px}
  .product-card .media{height:160px}
}

/* ==============
   Quick theme overrides you can edit:
   - Brand color: change --brand
   - Accent/sale color: change --accent
   - Button radius: change --radius-sm / --radius-md
   ============== */

/* end of file */