/* ==========================================================
   Lambspun Florals — shop.css (SHOP PAGE ONLY)
   Grid/List layout, view toggle, product cards, buttons,
   + Themed "Colors Chosen" summary
   ========================================================== */

/* VIEW TOGGLE */
.grid-wrap{ position:relative; width:min(92vw,1280px); margin-inline:auto; }
.grid-wrap .product-grid{ padding-top:56px; }
.view-toggle{ position:absolute; top:10px; right:10px; display:flex; gap:6px; z-index:10; }
.toggle-btn{
  width:2.6rem; height:2.6rem; border:1.5px solid var(--card-border);
  background:#fff6f9; color:var(--ink-2); border-radius:8px;
  display:flex; align-items:center; justify-content:center; font-size:1.1rem; cursor:pointer;
}
.toggle-btn.active{ background:var(--accent-1); color:#fff; }
@media (max-width:768px){ .view-toggle{ display:none !important; } .grid-wrap .product-grid{ padding-top:0; } }

/* =============== GRID VIEW =============== */
.product-grid.grid-view{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:1.6em;
  margin:2rem auto;
  padding:1rem;
  width:min(92vw,1280px);
}
.product-card{
  background:#fff5fa;
  border:1px solid #f0d7ea;
  border-radius:16px;
  box-shadow:0 4px 10px rgba(209,107,165,.12);
  text-align:center;
  padding:1rem;
  transition:transform .2s,box-shadow .2s;
}
.product-card:hover{ transform:translateY(-3px); box-shadow:0 8px 18px rgba(209,107,165,.22); }

/* Grid thumbnails: consistent square */
.product-card > .thumb,
.product-card > img.thumb{
  width:85%;
  aspect-ratio:1/1;
  object-fit:contain;
  background:#ffe1ee;
  border-radius:12px;
  padding:6px;
  margin:0 auto .5rem;
}

.product-card .title{ font-size:1.05rem; color:#8f5a87; margin:.4rem 0; }
.product-card .price{ color:#9e6a94; font-weight:600; margin-bottom:.4rem; }

/* =============== LIST VIEW =============== */
.product-grid.list-view{
  display:flex; flex-direction:column; gap:18px;
  margin:1.5rem auto; max-width:min(95vw,1200px); padding:0 1rem;
}
.product-grid.list-view .product-card{
  display:flex; align-items:center; justify-content:space-between;
  text-align:left;
  background:#fff0f6; border-radius:16px;
  box-shadow:0 3px 18px rgba(209,107,165,.07);
  padding:16px 22px; transition:.25s;
}
.product-grid.list-view .product-card:hover{
  transform:translateY(-2px); box-shadow:0 6px 22px rgba(209,107,165,.12);
}

/* List thumbnails: uniform, square, centered */
.product-grid.list-view .product-card > .thumb,
.product-grid.list-view .product-card > img.thumb{
  flex:0 0 160px;
  width:160px; aspect-ratio:1/1;
  object-fit:cover;
  background:#ffe1ee; border-radius:12px; padding:6px;
  margin:0 24px 0 0; display:flex; align-items:center; justify-content:center;
}

.product-grid.list-view .body{
  flex:1; display:flex; flex-direction:column; justify-content:center; gap:6px;
}
.product-grid.list-view .actions{
  flex:0 0 auto; display:flex; flex-direction:column; align-items:flex-end; gap:10px;
}

@media (max-width:768px){
  .product-grid.list-view .product-card{ flex-direction:column; text-align:center; align-items:center; }
  .product-grid.list-view .product-card > .thumb{ margin:0 0 12px; }
  .product-grid.list-view .actions{ align-items:center; }
}

/* =============== VARIANT SUMMARY (NEW) =============== */
.variant-summary{
  margin:.35rem 0 .5rem;
  padding:8px 10px;
  border:1px solid #f0d7ea;
  border-radius:12px;
  background:rgba(255,255,255,.65);
  box-shadow:inset 0 1px 0 #fff;
  text-align:left;
  font-family:"Quicksand",sans-serif;
}
.variant-summary:empty{ display:none; }

.vs-label{
  font-weight:800;
  color:#7f3d68;
  margin-right:6px;
}
.vs-list{ display:inline; }
.vs-chip{
  display:inline-flex; align-items:center; gap:6px;
  background:#fff;
  border:1px solid #efd6e7;
  border-radius:999px;
  padding:.25rem .55rem;
  margin:2px 4px 0 0;
  color:#a25d8a; font-weight:600; white-space:nowrap;
  box-shadow:0 2px 6px rgba(209,107,165,.07);
}
.vs-dot{
  width:10px; height:10px; border-radius:50%;
  border:1px solid #e7cde3; display:inline-block;
}

/* =============== BUTTON THEMES =============== */
/* Customize Colors (vp-quick) — themed consistently */
.vp-quick[data-toggle="picker"]{
  --btn-bg:linear-gradient(180deg,#fff4f8,#ffe9f2);
  --btn-hover:linear-gradient(180deg,#ffe6f0,#ffd9ec);
  --btn-border:#f9b6cc;
  --btn-shadow:rgba(240,156,181,0.3);
  display:inline-flex; align-items:center; justify-content:center; gap:.4rem;
  font-family:"Quicksand",sans-serif; font-weight:600; font-size:.9rem; color:#a44a6a;
  border:1px solid var(--btn-border); border-radius:999px; padding:.45rem .9rem;
  background:var(--btn-bg); box-shadow:0 4px 10px var(--btn-shadow);
  cursor:pointer; transition:all .25s ease;
}
.vp-quick[data-toggle="picker"]::before{ content:"🎨"; font-size:1.05rem; line-height:1; }
.vp-quick[data-toggle="picker"]:hover{ background:var(--btn-hover); transform:translateY(-1px); box-shadow:0 6px 12px rgba(238,122,162,.3); }

/* Add-to-Cart / Choose — themed in BOTH views */
.product-grid.grid-view .product-card .actions > .add-to-cart-btn,
.product-grid.list-view .product-card .actions > .add-to-cart-btn{
  -webkit-appearance:none; appearance:none;
  display:inline-flex; align-items:center; justify-content:center;
  background:linear-gradient(180deg,var(--btn-fill-1,#a2716c),var(--btn-fill-2,#b677a2));
  color:#fff; border:none; border-radius:8px;
  padding:.6em 1.1em;
  font:600 .95rem "Quicksand",sans-serif;
  box-shadow:0 6px 16px rgba(209,107,165,.25);
  cursor:pointer; transition:filter .15s, transform .05s;
  line-height:1; min-width:8.5rem;
}
.product-grid.grid-view .product-card .actions > .add-to-cart-btn:hover,
.product-grid.list-view .product-card .actions > .add-to-cart-btn:hover{
  filter:brightness(1.05); transform:translateY(-1px);
}
.product-grid .product-card .actions > .add-to-cart-btn[disabled]{ opacity:.55; cursor:not-allowed; }

/* Fade-in nicety */
@keyframes fadeUp{ to{ opacity:1; transform:translateY(0); } }
.product-card{ opacity:0; transform:translateY(10px); animation:fadeUp .35s ease forwards; }
.product-card:nth-child(2){ animation-delay:.05s; }
.product-card:nth-child(3){ animation-delay:.1s; }
.product-card:nth-child(4){ animation-delay:.15s; }

/* Small-device compact grid */
@media (max-width:600px){
  .product-grid.grid-view{
    grid-template-columns:repeat(2,1fr);
    gap:.7rem; padding:.7rem;
  }
  .product-card{ padding:.55rem; border-radius:10px; }
  .product-card > .thumb{ width:92%; }
  .product-card .title{ font-size:.95rem; }
  .product-card .price{ font-size:.9rem; }
  .product-grid .product-card .actions > .add-to-cart-btn{
    font-size:.85rem; padding:.45em .9em; min-width:auto;
  }
}