/* Lambspun Florals — style.css (streamlined) */

/* Fonts */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;600&family=Quicksand:wght@400;600&family=Pacifico&family=Great+Vibes&display=swap');

/* Tokens */
:root{
  --bg-grad-a:#eb62d4; --bg-grad-b:#daac8c;
  --ink-1:#553947; --ink-2:#a25d8a; --ink-3:#8f5a87;
  --accent-1:#d16ba5; --accent-2:#b677a2;
  --shadow-1:rgba(209,107,165,.11); --shadow-2:rgba(185,140,166,.06);
  --card-border:#edd3ee; --chip-bg:#fff6f9; --badge:#dc3163; --panel:#fff0f6;

  --page-max:1280px; --page-pad:1rem; --r-lg:16px;
  --fs-body:clamp(16px,1.1vw,18px); --fs-nav:clamp(14px,1.05vw,18px);
  --fs-h1:clamp(28px,3vw,42px); --fs-h2:clamp(20px,1.6vw,26px);

  /* set via JS for sticky spacing */
  --nav-h:60px; --stick-h:260px; --toggle-gap:10px;

  /* button theme */
  --btn-bg:#fff9fd; --btn-ink:#7f3d68; --btn-br:var(--card-border);
  --btn-fill-1:#a2716c; --btn-fill-2:#b677a2;
}

/* Base */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html,body{ height:100%; width:100%; }
html,body{ overflow-x:clip; } @supports not (overflow-x:clip){ html,body{ overflow-x:hidden; } }
html{ scroll-behavior:smooth; }
body{
  font-family:'Cormorant Garamond',serif; text-align:center;
  background:linear-gradient(120deg,var(--bg-grad-a),var(--bg-grad-b));
  color:var(--ink-1); font-size:var(--fs-body); line-height:1.6;
}
a{ color:inherit; text-decoration:none; }
img,iframe{ display:block; max-width:100%; }

/* Page width helpers */
.hero-inner,.hero-wrap,.navbar-container,.grid-wrap,.product-grid,.map-container,footer.site-footer{
  width:min(92vw,var(--page-max)); margin:0 auto; padding-inline:var(--page-pad);
}

/*----- Sticky wrapper (hero + navbar) -----*/
/*.header-stick{ position:static; z-index:120; } */
/*@media (min-width:1024px){ .header-stick{ position:sticky; top:0; z-index:120; } } */

/* Hero */
.hero-banner{
  width:100%; position:relative; text-align:center; padding:.8rem 1rem .9rem; overflow:; isolation:isolate;
  background:
    radial-gradient(1200px 500px at 10% -10%, rgba(255,255,255,.65), transparent 60%),
    radial-gradient(900px 400px at 90% 10%, rgba(255,255,255,.45), transparent 60%),
    linear-gradient(135deg,#ffd5e6 0%,#ffe1cc 45%,#ffd1e8 100%);
}
.hero-banner::after{
  content:""; position:absolute; inset:-40% -2px auto -2px; height:70%;
  background:linear-gradient(to bottom, rgba(255,255,255,.55), transparent 60%);
  transform:skewY(-8deg); pointer-events:none; mix-blend-mode:screen;
}
.hero-wrap{ max-width:1100px; }
.hero-title{
  font-family:"Great Vibes","Pacifico",cursive;
  font-size:clamp(2.4rem,5.2vw,4.85rem);
  line-height:1.05; letter-spacing:.02em;
  background:linear-gradient(#fff 0%,#fff 45%,#ececec 60%,#fff 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  text-shadow:0 1px 0 rgba(255,255,255,.9), 0 2px 0 rgba(255,200,220,.55), 0 8px 18px rgba(0,0,0,.18);
  filter:drop-shadow(0 2px 4px rgba(255,255,255,.35));
}
.hero-sub{
  display:inline-block; margin-top:.6rem; padding:.45rem .9rem;
  font:600 clamp(.95rem,2.2vw,1.12rem)/1 "Quicksand",system-ui,sans-serif; letter-spacing:.06em; color:#6b4c5c;
  background:rgba(255,255,255,.78); border-radius:999px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9), 0 8px 18px rgba(0,0,0,.08);
}

/* Navbar */
.navbar{
  width:100%; background:#ffe9f5;
  border-bottom:1.5px solid var(--card-border); box-shadow:0 2px 8px var(--shadow-2);
}
.navbar-container{ display:grid; grid-template-columns:1fr auto 1fr; align-items:center; padding:.6em var(--page-pad); }
.navbar-brand{ grid-column:1; justify-self:start; font-family:'Pacifico',cursive; font-size:clamp(18px,1.6vw,24px); color:var(--ink-1); display:flex; gap:.45em; }

.navbar-links{
  grid-column:2; display:flex; align-items:center; justify-content:center;
  gap:0; list-style:none;
}
.navbar-links li{ display:flex; align-items:center; line-height:1; }
.navbar-links li + li::before{
  content:"•"; display:inline-flex; align-items:center; justify-content:center;
  margin:0 14px; opacity:.55; font-size:18px; line-height:1;
}
.navbar-links a{
  display:inline-flex; align-items:center; gap:.45rem;
  font:600 var(--fs-nav)/1.15 "Quicksand",sans-serif; color:var(--ink-2);
  padding:.45rem .75rem; border-radius:12px; white-space:nowrap;
  transition:background .15s,color .15s,box-shadow .15s;
}
.navbar-links a:hover{ background:rgba(208,122,163,.20); box-shadow:inset 0 0 0 1px rgba(208,122,163,.35); color:#7f3d68; }
.cart-link .cart-icon{ width:22px; height:22px; display:block; }
.cart-badge{ position:absolute; top:-6px; right:2px; background:var(--badge); color:#fff; font-weight:700; font-size:.8em; padding:2px 6px; border-radius:50%; line-height:1; }

.navbar-toggle{ display:none; background:none; border:0; font-size:1.8em; color:var(--accent-1); cursor:pointer; }
@media (max-width:768px){
  .navbar-container{ display:flex; align-items:center; justify-content:space-between; }
  .navbar-toggle{ display:block; }
  .navbar-links{
    position:absolute; top:100%; left:0; right:0; display:none; flex-direction:column;
    background:#fff9fc; box-shadow:0 8px 24px rgba(233,196,225,.36); padding:.8em 1em; z-index:110;
  }
  .navbar-links.show{ display:flex; }
  .navbar-links li + li::before{ content:none; }
  .navbar-links a{ width:100%; padding:.8em 1em; font-size:1rem; }
}

/* View toggle */
.grid-wrap{ position:relative; width:min(92vw,var(--page-max)); margin-inline:auto; }
.grid-wrap .product-grid{ padding-top:calc(40px + var(--toggle-gap)); }
.view-toggle{
  position:absolute; top:var(--toggle-gap); right:var(--page-pad);
  display:flex; gap:6px; z-index:10;
}
.toggle-btn{
  width:2.8rem; height:2.8rem; 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.2rem; cursor:pointer;
}
.toggle-btn:hover{ background:#f2e6ed; }
.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; }
}

/* Product grid + cards */
.product-grid.grid-view{
  display:grid; gap:1.5em; grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  margin:2rem auto; padding:1rem;
}
.product-grid.list-view{
  display:grid; grid-template-columns:1fr; gap:12px; margin:12px auto; padding:0;
}
.product-card{
  background:#feddd4; border-radius:var(--r-lg); padding:1rem;
  box-shadow:0 3px 18px rgba(209,107,165,.07);
  display:flex; flex-direction:column; align-items:stretch; text-align:center; min-height:400px;
  transition:transform .25s, box-shadow .2s;
}
.product-card:hover{ transform:translateY(-4px); box-shadow:0 6px 24px rgba(209,107,165,.15); }
.product-card img{ width:100%; height:230px; object-fit:contain; border-radius:12px; margin-bottom:1rem; }
.product-card .body{ display:flex; flex-direction:column; gap:.6rem; text-align:left; flex:1 1 auto; }
.product-card h2{ font-family:'Cormorant Garamond',serif; color:var(--accent-2); font-size:var(--fs-h2); }
.product-card .variant-summary{ min-height:1.2em; }
.product-card .actions{ margin-top:auto; }
.add-to-cart-btn{ background:#a2716c; color:#fff; padding:.8em 1.2em; border:0; border-radius:6px; cursor:pointer; }
.add-to-cart-btn:hover{ background:#b6777c; }

/* List view specifics */
.product-grid.list-view .product-card{
  display:grid; grid-template-columns:140px minmax(0,1fr) 128px;
  grid-template-areas:"thumb meta actions";
  align-items:start; gap:12px; padding:12px 14px; text-align:left; min-height:auto;
}
.product-grid.list-view .product-card img{
  grid-area:thumb; width:128px; height:128px; object-fit:contain;
  margin:0; justify-self:center; border-radius:10px; background:#ffe1ee; padding:6px;
}
.product-grid.list-view .product-card .body{
  grid-area:meta; display:grid; grid-template-rows:auto auto auto 1fr; row-gap:6px; max-height:200px; overflow:hidden;
}
.product-grid.list-view .product-card h2{
  margin:0; color:var(--ink-3); font-size:1.06rem; line-height:1.15;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.product-grid.list-view .product-card .price{ margin:0; color:#9e6a94; font-size:.95rem; font-weight:600; }
.product-grid.list-view .product-card .variant-summary{ min-height:1em; }
.product-grid.list-view .product-card .actions,
.product-grid.list-view .product-card .add-to-cart-btn{ grid-area:actions; justify-self:end; }
.product-grid.list-view .product-card .add-to-cart-btn{ padding:.6em .9em; font-size:.95rem; border-radius:8px; min-width:110px; }
@media (max-width:680px){
  .product-grid.list-view .product-card{ grid-template-columns:110px minmax(0,1fr) 110px; }
  .product-grid.list-view .product-card img{ width:110px; height:110px; }
}

/* Friendly title wrapping */
.product-card h2,.product-card .title,.product-card .title a{
  overflow-wrap:anywhere; word-break:normal; hyphens:auto; text-wrap:balance;
}

/* Inline variant picker */
.vp{
  background:var(--chip-bg); border:1px solid var(--card-border); border-radius:12px;
  padding:10px; margin:.5rem 0; display:none; max-height:240px; overflow:auto; padding-right:6px;
}
.vp.open{ display:block; }
.vp-row{ display:flex; align-items:center; gap:8px; padding:6px 4px; }
.vp-dot{ width:18px; height:18px; border-radius:50%; border:1px solid #e7cde3; box-shadow:0 0 0 2px #fff inset; }
.vp-name{ min-width:110px; text-align:left; color:var(--ink-3); }
.vp-qty{ display:flex; align-items:center; gap:6px; margin-left:auto; }
.vp-btn{ width:28px; height:28px; border:1px solid #e7cde3; background:#fff; border-radius:8px; cursor:pointer; }
.vp-num{ width:42px; text-align:center; border:1px solid #e7cde3; border-radius:8px; padding:3px 6px; background:#fff; }
.product-card .vp-quick[data-toggle="picker"]{
  appearance:none; align-self:flex-start; display:inline-flex; align-items:center; gap:.45rem;
  padding:.6rem 1rem; border:1.5px solid var(--card-border); border-radius:12px;
  background:linear-gradient(180deg,#fff,#fff9fd); color:var(--ink-2);
  font:600 .95rem/1 "Quicksand",system-ui,sans-serif;
  box-shadow:inset 0 1px 0 #fff, 0 3px 10px var(--shadow-1);
  transition:background .2s, color .2s, box-shadow .2s, transform .05s; width:auto; max-width:100%;
}
.product-card .vp-quick[data-toggle="picker"]{ }
.product-card .vp-quick[data-toggle="picker"]:hover{
  background:rgba(208,122,163,.20); color:#7f3d68;
  box-shadow:inset 0 0 0 1px rgba(208,122,163,.35), 0 4px 12px var(--shadow-1);
}

/* Color drawer (desktop + tablet too) */
#cd-backdrop,.cd-backdrop{
  position:fixed; inset:0; display:none; background:rgba(0,0,0,.18);
  backdrop-filter:blur(1.5px); z-index:800;
}
#cd-backdrop.show,.cd-backdrop.show{ display:block; }

.color-drawer{
  position:fixed; left:50%; transform:translateX(-50%);
  top:var(--nav-h,64px); width:min(92vw,var(--page-max));
  background:var(--panel); border:1px solid var(--card-border);
  border-radius:16px; box-shadow:0 10px 22px rgba(209,107,165,.18);
  z-index:900; display:none; max-height:340px; overflow:hidden;
  grid-template-rows:auto 1fr auto;
}
.color-drawer.show{ display:grid; }

.color-drawer .cd-head{
  position:relative; display:flex; align-items:center; justify-content:center;
  padding:10px 16px; border-bottom:1px solid var(--card-border);
  background:rgba(255,255,255,.6);
}
.color-drawer .cd-title{ font:600 1rem "Quicksand",system-ui,sans-serif; color:#7b4b6f; }
.color-drawer .cd-close,
.color-drawer .close,
.color-drawer [data-close],
.color-drawer [data-dismiss]{
  position:absolute; top:8px; right:10px; width:34px; height:34px;
  border:0; background:transparent; color:#8f5a87; line-height:1; border-radius:8px; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; font-size:20px;
}
.color-drawer .cd-close:hover,
.color-drawer .close:hover,
.color-drawer [data-close]:hover,
.color-drawer [data-dismiss]:hover{ background:rgba(208,122,163,.12); }

.color-drawer .cd-row{
  display:flex !important; gap:16px; padding:12px 16px;
  overflow:auto hidden; scroll-snap-type:x proximity; -webkit-overflow-scrolling:touch;
}
.color-drawer .cd-row::-webkit-scrollbar{ height:10px; }
.color-drawer .cd-row::-webkit-scrollbar-thumb{ background:#e7cde3; border-radius:999px; }

.color-drawer .cd-item{
  flex:0 0 260px; scroll-snap-align:start;
  display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:10px;
  padding:10px 12px; background:#fff; border:1px solid var(--card-border); border-radius:14px;
  box-shadow:0 2px 6px var(--shadow-2);
}
.color-drawer .cd-item.is-picked{ outline:2px solid rgba(209,107,165,.35); background:#fffafc; }
.color-drawer .cd-dot{ width:24px; height:24px; border-radius:50%; border:1px solid #e7cde3; box-shadow:0 0 0 2px #fff inset; }
.color-drawer .cd-name{ font:600 .95rem "Quicksand",system-ui,sans-serif; color:#6f3f61; }
.color-drawer .cd-qty{ display:inline-flex; align-items:center; gap:6px; }
.color-drawer .cd-btn{
  width:30px; height:30px; border:1.5px solid var(--card-border); background:#fff; color:#7f3d68;
  border-radius:10px; display:inline-flex; align-items:center; justify-content:center; font-size:18px; line-height:1; cursor:pointer;
}
.color-drawer .cd-btn:active{ transform:translateY(1px); }
.color-drawer .cd-num{
  width:54px; text-align:center; border:1.5px solid var(--card-border); border-radius:10px;
  padding:4px 6px; background:#fff; color:#7f3d68; font:600 .95rem "Quicksand",system-ui,sans-serif;
}

.color-drawer .cd-foot{ padding:8px 12px 12px; border-top:1px solid var(--card-border); display:grid; gap:8px; }
.color-drawer .cd-remaining{ font:500 .95rem/1.4 "Cormorant Garamond",serif; color:#8f5a87; text-align:center; }
.color-drawer .cd-actions{ display:flex; gap:8px; justify-content:center; }
.color-drawer .cd-actions .cd-quick,
.color-drawer .cd-quick,
.color-drawer .cd-apply{
  appearance:none; border:1.5px solid var(--card-border);
  background:linear-gradient(180deg,#fff,#fff9fd); color:#7f3d68;
  padding:.6rem 1rem; border-radius:12px;
  font:600 .95rem "Quicksand",system-ui,sans-serif;
  box-shadow:inset 0 1px 0 #fff, 0 3px 10px var(--shadow-1); cursor:pointer;
}
.color-drawer .cd-quick:hover{ background:#f7eaf1; }
.color-drawer .cd-apply{ background:var(--accent-1); color:#fff; border-color:transparent; box-shadow:0 6px 16px rgba(209,107,165,.25); }
.color-drawer .cd-apply:hover{ filter:brightness(.98); }

/* =======================================================
   Lambspun Florals — Floating Cart Overlay & FAB (v2)
   Refined: overlays navbar + hero, smooth slide-in, pastel styling
   ======================================================= */

.floating-cart-overlay {
  position: fixed;
  top: 0;
  right: 0;
  width: 340px;
  max-width: 95vw;
  height: 100vh;
  background: #fff;
  box-shadow: -4px 0 20px rgba(0, 0, 0, 0.12),
              0 0 0 3px rgba(255, 255, 255, 0.6) inset;
  display: flex;
  flex-direction: column;
  z-index: 12000; /* 🟣 Above navbar + hero */
  transform: translateX(100%);
  opacity: 0;
  pointer-events: none;
  transition: transform 0.35s ease, opacity 0.25s ease;
}

/* When active */
.floating-cart-overlay.show {
  transform: translateX(0);
  opacity: 1;
  pointer-events: all;
}

/* Optional dimmed background for better focus */
.floating-cart-overlay::before {
  content: "";
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.25);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  z-index: -1;
}

/* Header */
.floating-cart-header {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 1em 1.3em;
  border-bottom: 1px solid #ffe9f5;
  font-family: 'Pacifico', cursive;
  color: var(--accent-2);
  background: linear-gradient(180deg, #fff9fd 0%, #fff3f8 100%);
  box-shadow: 0 1px 3px rgba(209, 107, 165, 0.08);
}

.floating-remove-btn {
  margin-left: auto;
  width: 34px;
  height: 34px;
  border: 0;
  background: transparent;
  color: var(--accent-1);
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.1s ease;
}
.floating-remove-btn:hover {
  background: rgba(208, 122, 163, 0.12);
  transform: scale(1.05);
}

/* Items list */
.floating-cart-items {
  flex: 1;
  overflow-y: auto;
  padding: 0.9em 1.3em;
  font-family: 'Cormorant Garamond', serif;
  color: var(--ink-1);
  background: #fffafc;
  scrollbar-width: thin;
  scrollbar-color: rgba(209,107,165,0.3) transparent;
}
.floating-cart-items::-webkit-scrollbar {
  width: 6px;
}
.floating-cart-items::-webkit-scrollbar-thumb {
  background: rgba(209, 107, 165, 0.3);
  border-radius: 8px;
}

/* Footer */
.floating-cart-footer {
  padding: 0.9em 1.3em 1.3em;
  display: flex;
  flex-direction: column;
  gap: 0.7em;
  border-top: 1px solid #ffe9f5;
  background: linear-gradient(180deg, #fff8fb 0%, #fff0f6 100%);
}
.floating-cart-total {
  font-weight: bold;
  color: var(--ink-2);
  font-family: 'Quicksand', sans-serif;
  font-size: 1rem;
  text-align: right;
}
.go-to-cart-btn {
  background: linear-gradient(180deg, var(--accent-1), var(--accent-2));
  color: #fff;
  padding: 10px;
  border-radius: 8px;
  text-align: center;
  cursor: pointer;
  font: 600 0.95rem "Quicksand", sans-serif;
  box-shadow: 0 6px 16px rgba(209, 107, 165, 0.25);
  transition: filter 0.2s, transform 0.1s;
}
.go-to-cart-btn:hover {
  filter: brightness(1.05);
  transform: translateY(-1px);
}

/* Floating Action Button (FAB) */
#floating-cart-fab,
.floating-cart-fab {
  position: fixed;
  right: 18px;
  bottom: 18px;
  width: 56px;
  height: 56px;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--accent-1), var(--accent-2));
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 22px rgba(209, 107, 165, 0.35);
  cursor: pointer;
  z-index: 12010; /* 🟣 Slightly above overlay edge */
  transition: transform 0.08s ease, filter 0.15s ease;
}
#floating-cart-fab:hover,
.floating-cart-fab:hover {
  filter: brightness(1.06);
  transform: translateY(-1px);
}

/* Cart Badge */
#fab-badge,
.floating-cart-fab .badge {
  position: absolute;
  top: -4px;
  right: -4px;
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  background: #dc3163;
  color: #fff;
  border-radius: 50%;
  font: 700 0.75rem/1 "Quicksand", system-ui, sans-serif;
  border: 2px solid #fff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

/* Map + sections */
.map-container{
  width:600px; height:600px; max-width:92vw; margin:2rem auto;
  overflow:hidden; border-radius:12px; box-shadow:0 2px 8px rgba(0,0,0,.1); background:#fff;
}
.map-container iframe{ width:100%; height:100%; border:0; display:block; }
h1,.faq h1{ text-align:center; margin:2rem auto 1rem; font-size:var(--fs-h1); }
.faq{ width:min(92vw,800px); margin:2rem auto; font-family:'Quicksand',sans-serif; }
footer.site-footer{ padding:1.5rem 1rem; }

/* Buttons (unified) */
.btn{
  appearance:none; border:1.5px solid var(--btn-br);
  background:var(--btn-bg); color:var(--btn-ink);
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  padding:.65rem 1.1rem; border-radius:12px; text-decoration:none;
  font:600 .95rem "Quicksand",system-ui,sans-serif;
  box-shadow:inset 0 1px 0 #fff; cursor:pointer; transition:filter .15s, transform .05s, box-shadow .2s;
}
a.btn{ text-decoration:none; }
.btn:hover{ filter:brightness(.98); box-shadow:inset 0 0 0 1px rgba(208,122,163,.35), 0 6px 16px rgba(209,107,165,.20); }
.btn:active{ transform:translateY(1px); }
.btn[disabled],.btn:disabled{ opacity:.55; pointer-events:none; }
.btn-primary{
  border-color:transparent; color:#fff;
  background:linear-gradient(180deg,var(--btn-fill-1),var(--btn-fill-2));
  box-shadow:0 6px 16px rgba(209,107,165,.25);
}
.btn-primary:hover{ filter:brightness(1.03); }

/* Cart table + qty controls */
.cart-table{
  width:100%; max-width:600px; margin:0 auto 2em; border-collapse:collapse; background:#fff;
  border-radius:12px; overflow:hidden; box-shadow:0 2px 10px rgba(0,0,0,.05); text-align:left;
}
.cart-table th,.cart-table td{ padding:1em; border-bottom:1px solid #f1dcea; color:#5e406d; font-size:1rem; }
.cart-table th{ background:#fdf4f9; font-weight:700; }
.cart-table tr:last-child td{ border-bottom:none; }
.cart-table .qty-cell,.cart-table .qty-control{ display:flex; align-items:center; gap:6px; white-space:nowrap; }
.cart-table .btn-qty,.cart-table .qty-cell button{
  width:32px; height:32px; padding:0; border:1.5px solid var(--btn-br);
  background:#fff; color:var(--btn-ink); border-radius:10px; display:inline-flex; align-items:center; justify-content:center;
  font:700 .95rem "Quicksand",system-ui,sans-serif; line-height:1; cursor:pointer;
}
.cart-table input[type="number"]{
  width:64px; text-align:center; border:1.5px solid var(--btn-br); border-radius:10px; padding:.35rem .4rem; background:#fff;
}
.cart-table .link-remove,.link-remove.btn,.btn-danger{
  background:#fff0f3; border-color:#f0c2d6; color:#a03c63; border-radius:10px; padding:.35rem .6rem;
}
.cart-table .link-remove:hover,.btn-danger:hover{ background:#ffe6ee; }

/* Utilities */
html.drawer-open,body.drawer-open{ overflow:hidden; }

/* Mobile tweaks */
@media (max-width:768px){
  .product-grid.list-view{ grid-template-columns:1fr !important; }
  .product-grid.grid-view{ grid-template-columns:repeat(2,minmax(0,1fr)) !important; }
  .product-grid{ gap:1rem !important; margin:1rem auto !important; padding:0 1rem !important; }
  .product-card{ padding:.9rem; border-radius:14px; }
  .product-card img{ height:210px; }
}
/* Cart: make the middle-column "Remove" compact */
.cart-table .qty-cell .remove-line { display:inline-block; }
.cart-table .qty-cell .link-remove{
  padding:.25rem .5rem !important;
  font-size:.85rem !important;
  line-height:1 !important;
  border-radius:8px !important;
  background:#fff6f9 !important;
  border:1px solid #efd6e7 !important;
}
.cart-table .qty-cell .link-remove:hover{
  background:#f7eaf1 !important;
}
/* Cart: don't style "Remove" like the +/- buttons */
.cart-table td.qty-cell button.link-remove{
  width:auto !important;
  height:auto !important;
  min-width:0 !important;
  padding:.2rem .45rem !important;   /* tweak smaller chip size */
  border:1px solid #efd6e7 !important;
  background:#fff6f9 !important;
  border-radius:8px !important;
  line-height:1.1 !important;
  box-shadow:none !important;
}

/* --- Page title spacing: make Cart + Checkout uniform --- */
.cart-card > h2,
main > h2 {              /* both pages use one of these */
  margin: 0 0 2rem;      /* no extra top space; 1rem below */
  line-height: 1.2;
}

/* kill any extra top margin on the first block after the title -- This makes the gap under Your Cart and Checkout match, regardless of what the next element is (table, .wrap, etc.). If you prefer a tighter or looser look, just tweak the 1rem.*/
.cart-card > h2 + *,
main > h2 + * {
  margin-top: 0;
}
/* ================= MOBILE NAV: OPEN-IN-VIEW, NO SCROLL, SNUG LINKS ================= */
@media (max-width: 768px) {
  /* Keep the nav bar fixed to the top on mobile */
  .navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 10010; /* above banners/hero */
  }

  /* Prevent the hero/banner from pushing content under the fixed nav */
  .banner:first-of-type {
    margin-top: calc(var(--nav-height, 56px));
  }

  /* Base menu panel: fixed directly under the nav bar */
  .navbar-menu {
    position: fixed;
    top: var(--nav-height, 56px); /* adjust if your nav is taller */
    left: 0;
    right: 0;
    max-height: calc(100dvh - var(--nav-height, 56px));
    overflow-y: auto;
    margin: 0;
    padding: 4px 0;
    z-index: 10009;
    background: #fff;          /* ensure readable over hero image */
    box-shadow: 0 10px 20px rgba(0,0,0,.12);
    transform: none !important; /* kill slide-down transforms that push out of view */
    opacity: 1 !important;
    visibility: visible !important;
  }

  /* Tighten list spacing */
  .navbar-menu ul { margin: 0; padding: 0; list-style: none; }
  .navbar-menu li { margin: 0; padding: 0; border: 0; }
  .navbar-menu a {
    display: block;
    padding: 10px 14px;   /* snug but tappable */
    line-height: 1.2;
    font-size: 16px;
  }

  /* Optional: subtle separators without big frames */
  .navbar-menu li + li a { border-top: 1px solid rgba(0,0,0,.06); }

  /* When menu is closed, hide it completely.
     Cover common "open" toggles so this works with your current JS. */
  .navbar-menu { display: none; }
  .navbar.open .navbar-menu,
  .navbar-menu.open,
  .navbar-menu[aria-hidden="false"],
  .navbar-menu[aria-expanded="true"],
  .navbar-toggle[aria-expanded="true"] ~ .navbar-menu {
    display: block;
  }

  /* Lock background scroll when menu is open (if your JS toggles .menu-open on <body>) */
  body.menu-open { overflow: hidden; }

  /* If your page content jumps under the fixed nav, give the main flow a top padding */
  main, .page, .content { padding-top: calc(var(--nav-height, 56px)); }
}
/* Title strip just below the banner */
.page-head{
  max-width: 1100px;       /* match your content width */
  margin: 0 auto;
  padding: 10px 16px 0;    /* tiny breathing room from the nav */
}
.page-head h2{
  margin: 0;
  text-align: center;
  line-height: 1.2;
  font-size: clamp(24px, 2.4vw, 36px);
}

/* Trim top spacing of the content now that the title moved out */
.page-head + .cart-wrap{ padding-top: .5rem !important; }
.page-head + main{ margin-top: .5rem; }
/* Put nav directly below hero and (optionally) make nav sticky */

.navbar{
  margin: 0;
  position: sticky;   /* remove if you don't want it sticky */
  top: 0;
  z-index: 1000;
}

/* Prevent surprise top spacing left over from the old wrapper */
.header-stick{ all: unset; }            /* neutralize if it still exists in DOM */
:root{ --stick-h: 0px; }                /* harmless if referenced elsewhere */

/* If any page content was offset for the old wrapper, reset it */
main, .cart-wrap, .container{ margin-top: 0 !important; padding-top: 0 !important; }

body {
  background: linear-gradient(to bottom right, peachpuff, pink, lavender);
  font-family: sans-serif;
  margin: 0;
  display: flex;
  flex-direction: column;  /* vertical stacking */
  min-height: 100vh;
}

#game-wrapper {
  flex: 1;                 /* takes all space above footer */
  display: flex;
  flex-direction: row;
}

#left-panel { width: 250px; }
#game-area { flex: 1; }

/* =======================================================
   LAMBSPUN — COLOR PICKER BEAUTIFICATION
   ======================================================= */

/* Container: soft pop-out with slight lift */
.vp {
  display: none;
  margin-top: .75rem;
  padding: .75rem 1rem;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid #f0cfe1;
  box-shadow: 0 6px 20px rgba(209,107,165,0.12);
  backdrop-filter: blur(4px);
  animation: vpSlideDown 0.25s ease;
}
.vp.open {
  display: block;
}
@keyframes vpSlideDown {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Each row = one color line */
.vp-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 6px 0;
  border-bottom: 1px dashed rgba(209,107,165,.12);
}
.vp-row:last-child {
  border-bottom: none;
}

/* Dot + color label */
.vp-dot {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1.5px solid #efd6e7;
  box-shadow: 0 0 0 2px #fff inset;
}
.vp-name {
  flex-grow: 1;
  text-align: left;
  color: var(--ink-3);
  font-family: "Quicksand", sans-serif;
  font-weight: 600;
  letter-spacing: .02em;
}

/* Qty controls: pastel pill-shaped */
.vp-qty {
  display: flex;
  align-items: center;
  gap: 6px;
}
.vp-btn {
  width: 30px;
  height: 30px;
  border: 1.5px solid #efd6e7;
  background: linear-gradient(180deg, #fff, #fff6f9);
  border-radius: 999px;
  color: #7f3d68;
  font-size: 1rem;
  line-height: 1;
  font-weight: 700;
  box-shadow: 0 3px 6px rgba(209,107,165,.08);
  cursor: pointer;
  transition: all .15s ease;
}
.vp-btn:hover {
  background: #ffe9f5;
  transform: translateY(-1px);
}
.vp-num {
  width: 44px;
  height: 30px;
  text-align: center;
  border: 1.5px solid #efd6e7;
  border-radius: 10px;
  background: #fff;
  font: 600 .9rem/1 "Quicksand", sans-serif;
  color: #7f3d68;
}

/* Customize button itself: make it feel clickable & cute */
.vp-quick[data-toggle="picker"] {
  margin-top: .5rem;
  font-size: .95rem;
  border-radius: 999px;
  background: linear-gradient(180deg, #fff, #fff9fd);
  border: 1.5px solid #f0cfe1;
  padding: .5rem 1rem;
  color: #7f3d68;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  box-shadow: 0 4px 10px rgba(209,107,165,.12);
  transition: all .2s ease;
}
/* 🎨 Pastel Customize Colors Button (Lambspun Florals Theme) */
.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: 0.4rem;
  font-family: "Quicksand", sans-serif;
  font-weight: 600;
  font-size: 0.9rem;
  color: #a44a6a;
  border: 1px solid var(--btn-border);
  border-radius: 999px;
  padding: 0.4rem 0.9rem;
  background: var(--btn-bg);
  cursor: pointer;
  box-shadow: 0 4px 10px var(--btn-shadow);
  transition: all 0.25s ease;
}

.vp-quick[data-toggle="picker"]:hover {
  background: var(--btn-hover);
  transform: translateY(-1px);
  box-shadow: 0 6px 12px rgba(238, 122, 162, 0.3);
}

/* 🎨 single emoji only, centered nicely */
.vp-quick[data-toggle="picker"]::before {
  content: "🎨";
  font-size: 1.1rem;
  line-height: 1;
  margin-right: 0.25rem;
}

.vp-quick[data-toggle="picker"]:hover {
  background: rgba(208,122,163,.20);
  box-shadow: 0 6px 16px rgba(209,107,165,.22);
}

/* Responsive tuning */
@media (max-width: 768px) {
  .vp {
    margin-top: .5rem;
    padding: .6rem .8rem;
    max-height: 240px;
    overflow-y: auto;
  }
  .vp-row {
    flex-wrap: wrap;
    gap: 8px;
  }
  .vp-name {
    width: 100%;
    font-size: .9rem;
  }
  .vp-qty {
    justify-content: flex-end;
    width: 100%;
  }
}
/* =======================================================
   Lambspun Florals — Floating Color Picker Drawer (Themed)
   ======================================================= */

@media (min-width: 900px) {
  .color-drawer {
    position: fixed;
    top: calc(var(--nav-h, 70px) + 40px);
    left: 50%;
    transform: translateX(-50%);
    width: min(780px, 90vw);
    background: linear-gradient(135deg, #fff8fb 0%, #ffe9f4 60%, #fffafc 100%);
    border: 2px solid rgba(209, 107, 165, 0.25);
    border-radius: 24px;
    box-shadow:
      0 8px 24px rgba(209, 107, 165, 0.15),
      0 0 0 6px rgba(255, 255, 255, 0.5) inset;
    z-index: 1200;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, -20px);
    transition: all 0.3s ease;
  }

  .color-drawer.show {
    opacity: 1;
    pointer-events: all;
    transform: translate(-50%, 0);
  }

  /* Dim the background */
  .cd-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(255, 220, 240, 0.4);
    backdrop-filter: blur(3px);
    z-index: 1190;
  }

  /* Panel layout */
  .cd-panel {
    display: flex;
    flex-direction: column;
    max-height: 75vh;
    overflow: hidden;
  }

  /* Header */
  .cd-head {
    display: flex;
    justify-content: center;
    align-items: center;
    background: rgba(255, 255, 255, 0.6);
    border-bottom: 1.5px solid rgba(209, 107, 165, 0.25);
    padding: 14px 20px;
    position: relative;
  }
  .cd-title {
    font-family: "Quicksand", sans-serif;
    font-weight: 700;
    color: #7b4b6f;
    font-size: 1.2rem;
    letter-spacing: 0.03em;
  }

  .cd-close {
    position: absolute;
    right: 14px;
    top: 10px;
    width: 36px;
    height: 36px;
    font-size: 20px;
    color: #9a6288;
    border: 1.5px solid rgba(209, 107, 165, 0.25);
    border-radius: 10px;
    background: #fff9fc;
    box-shadow: 0 3px 8px rgba(209, 107, 165, 0.1);
    cursor: pointer;
    transition: background 0.2s, transform 0.1s;
  }
  .cd-close:hover {
    background: #ffeaf4;
    transform: scale(1.05);
  }

  /* Body content (scrollable) */
  .cd-body {
    overflow-y: auto;
    padding: 16px 20px;
    scrollbar-width: thin;
    scrollbar-color: rgba(209, 107, 165, 0.3) rgba(255, 245, 250, 0.9);
  }
  .cd-body::-webkit-scrollbar {
    width: 8px;
  }
  .cd-body::-webkit-scrollbar-thumb {
    background: rgba(209, 107, 165, 0.3);
    border-radius: 8px;
  }

  /* Rows */
  .cd-row {
    background: #fff;
    margin: 8px 0;
    padding: 10px 12px;
    border-radius: 12px;
    border: 1.5px solid #efd6e7;
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: box-shadow 0.2s;
  }
  .cd-row:hover {
    box-shadow: 0 0 0 2px rgba(209, 107, 165, 0.25);
  }

  .cd-dot {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 1.5px solid #e7cde3;
    box-shadow: 0 0 0 2px #fff inset;
  }
  .cd-name {
    font-family: "Quicksand", sans-serif;
    color: #7f3d68;
    flex: 1;
    padding-left: 10px;
  }
  .cd-qty {
    display: flex;
    align-items: center;
    gap: 6px;
  }
  .cd-btn {
    width: 32px;
    height: 32px;
    border: 1.5px solid #e7cde3;
    border-radius: 10px;
    background: #fff;
    color: #a25d8a;
    font-weight: 700;
    font-size: 16px;
    cursor: pointer;
    transition: background 0.15s, transform 0.1s;
  }
  .cd-btn:hover {
    background: #ffe6f2;
    transform: translateY(-1px);
  }
  .cd-num {
    width: 50px;
    text-align: center;
    border: 1.5px solid #e7cde3;
    border-radius: 10px;
    background: #fff;
    color: #7f3d68;
    font-weight: 600;
  }

  /* Footer */
  .cd-foot {
    border-top: 1.5px solid rgba(209, 107, 165, 0.25);
    padding: 16px;
    display: flex;
    justify-content: center;
    background: rgba(255, 255, 255, 0.6);
  }
  .cd-apply {
    appearance: none;
    border: 0;
    background: linear-gradient(180deg, #d16ba5, #b677a2);
    color: #fff;
    font: 600 1rem "Quicksand", sans-serif;
    border-radius: 12px;
    padding: 10px 24px;
    cursor: pointer;
    box-shadow: 0 6px 16px rgba(209, 107, 165, 0.25);
    transition: filter 0.15s, transform 0.1s;
  }
  .cd-apply:hover {
    filter: brightness(1.05);
    transform: translateY(-1px);
  }
}
/* =======================================================
   Lambspun Florals — Unified Drawer Fix (Mobile + Tablet)
   ======================================================= */
@media (max-width: 820px) and (orientation: portrait) {
  /* Force drawer to be visible and floating mid-screen on tablets */
  .color-drawer {
    position: fixed !important;
    inset: auto 0 auto 0 !important;
    top: 8vh !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 92% !important;
    max-height: 82vh !important;
    background: linear-gradient(180deg, #fff9fd 0%, #fff3f9 100%) !important;
    border-radius: 24px !important;
    border: 2px solid rgba(255,182,210,0.5) !important;
    box-shadow: 0 10px 50px rgba(208,130,170,0.25) !important;
    z-index: 1200 !important;
    opacity: 1 !important;
    transform-origin: center !important;
    transition: opacity 0.3s ease, transform 0.3s ease !important;
  }

  /* Ensure it's fully visible when .show is active */
  .color-drawer.show {
    transform: translateX(-50%) !important;
    opacity: 1 !important;
  }

  /* Make the color list scroll properly */
  .color-drawer .cd-body {
    max-height: 60vh;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: rgba(209,107,165,0.3) transparent;
  }
  .color-drawer .cd-body::-webkit-scrollbar {
    width: 6px;
  }
  .color-drawer .cd-body::-webkit-scrollbar-thumb {
    background: rgba(209,107,165,0.3);
    border-radius: 8px;
  }

  /* Slightly stronger blur for better focus contrast */
  .cd-backdrop {
    background: rgba(0, 0, 0, 0.25);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
    z-index: 1190;
  }
}
.cart-thumb {
  width: 60px;
  height: 60px;
  border-radius: 8px;
  object-fit: cover;
  margin-right: 10px;
  box-shadow: 0 2px 6px rgba(0,0,0,.08);
  display: inline-block;
  vertical-align: middle;
}
.cart-item-title {
  font-weight: 600;
  color: #7f3d68;
  display: inline-block;
  vertical-align: middle;
}