:root {
  /* Keep the original Webflow color tokens available as CSS vars too. */
  --lime: #00a294;
  --lime-deep: #007a70;
  --teal: #34c3ea;
  --pink: #e94370;
  --blue: #00b5a9;
  --red: #bf2253;
  --orange: #fc6e1f;
  --light-purple: #f6f1f6;
  --ink: #1a1a0e;
  --text-soft: #4a4a3a;
  --bg: #f7f3ea;
  --bg-2: #efe9dc;
  --muted: #8a8a78;
  --border: rgba(26, 26, 14, .1);
  --border-strong: rgba(26, 26, 14, .18);
}

/* Our cart drawer + spin wheel + auth panel — sits on top of Webflow.
   Uses pg- prefix to avoid collisions with Webflow's .w- / .pg- / .wc- classes. */
.pg-cart-pill, .pg-spin-trigger, .pg-wa-fab, .pg-account {
  font-family: 'Open Sans', system-ui, sans-serif;
}

/* Hide the original Ecwid cart widget that the Webflow page used.
   Our CartDrawer replaces it. */
.ec-cart-widget,
.html-embed-7 { display: none !important; }

/* Cart trigger in the Webflow nav — sits in .navigation-right-block next to
   the menu button. Sized to match the original Ecwid widget footprint. */
.pg-cart-pill {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 40px;
  min-width: 40px;
  padding: 0 14px;
  margin-right: 8px;
  background: #00a294;
  color: #fff;
  border: 0;
  border-radius: 999px;
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  transition: transform .2s ease, background .2s ease;
}
.pg-cart-pill:hover { background: #007a70; transform: translateY(-1px); }
.pg-cart-pill-count {
  position: absolute;
  top: -4px; right: -4px;
  min-width: 18px; height: 18px;
  border-radius: 9px;
  background: #bf2253;
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  line-height: 18px;
  padding: 0 5px;
}
.pg-account {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  margin-right: 8px;
  background: transparent;
  border: 1px solid rgba(0,0,0,.12);
  border-radius: 999px;
  color: var(--ink);
  font-size: 16px;
  text-decoration: none;
  transition: background .2s ease, transform .2s ease;
}
.pg-account:hover { background: var(--bg-2); transform: translateY(-1px); }

.drawer-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.55);opacity:0;pointer-events:none;z-index:10000000;transition:opacity .3s ease}
.drawer-backdrop.show{opacity:1;pointer-events:auto}
.drawer{position:fixed;top:0;right:0;bottom:0;width:min(420px,100vw);background:#ffffff;border-left:1px solid var(--border);z-index:10000001;transform:translateX(100%);transition:transform .35s cubic-bezier(.2,.8,.2,1);display:flex;flex-direction:column;box-shadow:-24px 0 60px -24px rgba(16,32,43,.35)}
.drawer.open{transform:translateX(0)}
.drawer-head{display:flex;justify-content:space-between;align-items:center;padding:20px 22px;border-bottom:1px solid var(--border);background:#fff}
.drawer-head h3{margin:0;font-family:var(--montserrat),'Red Hat Display';font-weight:800;font-size:20px;color:var(--ink)}
.drawer-close{background:#f1f5f4;color:var(--ink);border:0;font-size:17px;cursor:pointer;width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;transition:background .15s ease}
.drawer-close:hover{background:#e4eae8}
.drawer-body{flex:1;overflow-y:auto;padding:14px 22px;background:#fff}
.drawer-empty{text-align:center;padding:60px 0;color:var(--muted)}
.drawer-empty p{margin:14px 0 20px}
.drawer-line{display:grid;grid-template-columns:60px 1fr auto;gap:14px;padding:16px 0;border-bottom:1px solid var(--border);align-items:flex-start}
.drawer-line img{width:60px;height:60px;border-radius:12px;background:linear-gradient(160deg,#f3f6f4,#e7efec);object-fit:contain;padding:6px}
.drawer-line-info{display:flex;flex-direction:column;gap:4px;min-width:0}
.drawer-line-info b{font-size:14px;line-height:1.25;font-weight:700;color:var(--ink)}
.drawer-line-info .muted{font-size:12px;color:var(--muted)}
.drawer .qty{display:inline-flex;align-items:center;gap:6px;margin-top:8px;background:#f1f5f4;border-radius:999px;padding:3px}
.drawer .qty button{background:#fff;color:var(--lime);border:0;width:28px;height:28px;border-radius:50%;cursor:pointer;font-weight:800;font-size:15px;line-height:1;box-shadow:0 1px 3px rgba(16,32,43,.12);transition:transform .12s ease}
.drawer .qty button:hover{transform:scale(1.08)}
.drawer .qty button:disabled{opacity:.4;box-shadow:none}
.drawer .qty span{min-width:20px;text-align:center;font-weight:800;font-size:14px;color:var(--ink)}
.drawer-rm{margin-left:8px;background:transparent !important;color:var(--pink) !important;font-size:11px !important;text-decoration:underline;width:auto !important;padding:0 !important;cursor:pointer}
.drawer-line-total{font-family:var(--montserrat),'Red Hat Display';font-weight:800;font-size:15px;color:var(--ink)}
.drawer-gift{background:linear-gradient(135deg,rgba(0,162,148,.1),rgba(52,195,234,.1));border:1px dashed rgba(0,162,148,.4);border-radius:14px;padding:14px;margin-bottom:8px}
.drawer-gift-icon{width:60px;height:60px;border-radius:12px;background:linear-gradient(135deg,var(--lime),var(--teal));display:flex;align-items:center;justify-content:center;font-size:32px;line-height:1}
.drawer-gift-tag{display:inline-block;margin-top:6px;background:var(--lime);color:#fff;font-size:10px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;padding:4px 8px;border-radius:6px}
.drawer-gift-total{color:var(--lime-deep);font-size:14px;letter-spacing:.04em;font-weight:800}
.drawer-foot{padding:18px 22px;border-top:1px solid var(--border);display:flex;flex-direction:column;gap:12px;background:#fafbfa}
.drawer-foot input{background:#fff;border:1px solid var(--border);color:var(--ink);padding:12px 14px;border-radius:10px;font-size:14px;font-family:inherit}
.drawer-foot input:focus{outline:none;border-color:var(--lime);box-shadow:0 0 0 3px rgba(0,162,148,.14)}
.drawer-eta{display:flex;align-items:center;gap:12px;padding:12px 14px;background:rgba(0,162,148,.08);border:1px solid rgba(0,162,148,.22);border-radius:12px;color:var(--ink)}
.drawer-eta-icon{font-size:22px;line-height:1}
.drawer-eta b{display:block;font-size:14px;font-weight:700;line-height:1.2;color:var(--ink)}
.drawer-eta small{display:block;font-size:12px;color:var(--text-soft);margin-top:2px}
.drawer-subtotal{display:flex;justify-content:space-between;align-items:center;font-size:14px;color:var(--text-soft)}
.drawer-subtotal b{font-family:var(--montserrat),'Red Hat Display';font-size:24px;color:var(--ink)}
.drawer-clear{background:transparent;color:var(--muted);border:0;font-size:12px;text-decoration:underline;cursor:pointer;padding:4px}
.drawer-note{margin:0;text-align:center;color:var(--muted);font-size:12px}
.drawer-err{margin:0;color:var(--pink);font-size:13px;text-align:center}




#petguel-storefront { font-family:'Open Sans',system-ui,sans-serif; color:#1a1a0e; }
#petguel-storefront * { box-sizing:border-box; }
#petguel-storefront .cart-pill { display:none; }
#petguel-storefront .cta { display:inline-flex; align-items:center; justify-content:center; gap:10px; border:0; border-radius:999px; padding:16px 24px; background:#00a294; color:#fff; font-weight:700; cursor:pointer; }
.pg-legacy-cart-controls { display:flex; align-items:center; flex-shrink:0; }
.navigation-right-block { flex-shrink:0; }
.pg-faq summary { cursor:pointer; list-style:none; display:flex; align-items:center; gap:16px; }
.pg-faq summary::-webkit-details-marker { display:none; }
.pg-faq .faq-content { position:static!important; width:100%; height:auto!important; opacity:1!important; display:block; overflow:visible; background:transparent; }
.pg-faq .faq-toggle { white-space:normal; padding-right:24px; }
.pg-faq .w-icon-dropdown-toggle { display:none; }
.pg-faq:focus-within { outline:2px solid #007a70; outline-offset:3px; }
@media(max-width:479px) { .pg-account { display:none; } .pg-cart-pill { padding:0 10px; min-width:36px; } }
@media(prefers-reduced-motion:reduce) { .drawer,.drawer-backdrop { transition:none; } }
/* Content requested in the deck must remain visible even if scroll effects fail. */
.pg-about .image-wrapper.pink-cocktail, .pg-about .image-wrapper.founders,
.pg-about .fact-content-wrapper, .pg-about .heading-reveal-animation,
.pg-about .about-us-founders [style*="transform"] { transform:none!important; opacity:1!important; }
.pg-faq summary { flex-direction:row; padding:0; }
.pg-faq summary::after { content:none; }
.pg-faq .accordion-title-wrapper { width:100%; }
.pg-faq[open] .faq-arrow { transform:rotate(180deg); }
.pg-faq .faq-content-wrapper { padding:20px 12px; line-height:1.7; }

.pg-about .about-us-extra-info .background-overlay-reveal { display:none!important; }
.pg-about .about-us-extra-info .image-wrapper { transform:none!important; opacity:1!important; }