:root{
  --pc-bg: #ffffff;
  --pc-fg: #111111;
  --pc-muted: #6b7280;
  --pc-border: #e8e8e8;
  --pc-surface: #ffffff;
  --pc-surface-2: #fafafa;
  --pc-accent: #6C2BD9;
  --pc-accent-weak: rgba(108, 43, 217, 0.10);
  --pc-accent-border: rgba(108, 43, 217, 0.45);
  --pc-accent-border-soft: rgba(108, 43, 217, 0.28);
  --pc-accent-border-strong: rgba(108, 43, 217, 0.65);
  --pc-accent-focus: rgba(108, 43, 217, 0.55);
  --pc-on-accent: #ffffff;
  --pc-text-secondary: rgba(17, 17, 17, 0.72);
  --pc-text-tertiary: rgba(17, 17, 17, 0.55);
  --pc-placeholder: rgba(17, 17, 17, 0.45);
  --pc-success: #0f766e;
  --pc-danger: #b91c1c;
  --pc-font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans";
  --pc-font-weight-medium: 600;
  --pc-font-weight-semibold: 700;
  --pc-font-weight-bold: 800;
  --pc-font-weight-heavy: 900;
  --pc-font-weight-display: 950;
  --pc-text-2xs: 0.78rem;
  --pc-text-xs: 0.8125rem;
  --pc-text-sm: 0.875rem;
  --pc-text-md: 1rem;
  --pc-text-lg: 1.125rem;
  --pc-text-xl: 1.375rem;
  --pc-text-2xl: 1.75rem;
  --pc-text-3xl: clamp(1.75rem, 3vw, 2.15rem);
  --pc-text-4xl: clamp(2.1rem, 4vw, 2.85rem);
  --pc-leading-tight: 1.12;
  --pc-tracking-tight: -0.03em;
  --pc-tracking-label: -0.015em;
  --pc-s-1: 4px;
  --pc-s-2: 8px;
  --pc-s-3: 12px;
  --pc-s-4: 16px;
  --pc-s-5: 20px;
  --pc-s-6: 24px;
  --pc-s-8: 32px;
  --pc-s-10: 40px;
  --pc-s-12: 48px;
  --pc-s-16: 64px;
  --pc-section-y: clamp(48px, 6vw, 88px);
  --pc-radius-xs: 8px;
  --pc-radius-sm: 10px;
  --pc-radius-md: 14px;
  --pc-radius-lg: 16px;
  --pc-radius-xl: 24px;
  --pc-radius-pill: 999px;
  --pc-shadow-1: 0 1px 2px rgba(0,0,0,.04);
  --pc-shadow-2: 0 12px 40px rgba(17,17,17,.07);
  --pc-shadow-3: 0 24px 80px rgba(17,17,17,.08);
  --pc-shadow-header: 0 10px 28px rgba(17,17,17,.05);
  --pc-focus-ring: 0 0 0 3px rgba(108, 43, 217, 0.12);
  --pc-container: 1120px;
  --pc-container-wide: 1280px;
  --pc-container-narrow: 680px;
  /* Global storefront header (fixed, Mango-like) — single source of truth.
   * .pc-site__header sits position:fixed at the top of the viewport on every
   * page, body.pc-body compensates with padding-top so content never sits
   * under the header. Storefront pages override --pc-header-h to match
   * the storefront header height. */
  --pc-header-h: 110px;
}
body.pc-has-storefront-header{
  --pc-header-h: clamp(76px, 7.8vw, 84px);
}

*{ box-sizing: border-box; }
html, body{ height: 100%; }
body.pc-body{
  margin: 0;
  background: var(--pc-bg);
  color: var(--pc-fg);
  font-family: var(--pc-font-sans);
  font-size: var(--pc-text-md);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  /* Compensate for the globally fixed storefront header so page content
   * never starts hidden behind it. Homepage opts out (home.css) so the
   * full-bleed hero can overlay the transparent/floating header. */
  padding-top: var(--pc-header-h);
}
img{ max-width: 100%; height: auto; }
a{ color: inherit; }

.pc-container{
  max-width: var(--pc-container);
  margin: 0 auto;
  padding-left: var(--pc-s-5);
  padding-right: var(--pc-s-5);
}
.pc-container--narrow{ max-width: var(--pc-container-narrow); }
.pc-container--wide{ max-width: var(--pc-container-wide); }

.pc-site{ min-height: 100vh; display: flex; flex-direction: column; }
.pc-site__main{ flex: 1; padding-top: var(--pc-s-8); padding-bottom: var(--pc-s-12); }

.pc-site__header,
.pc-site__footer{
  background: var(--pc-surface);
  border-bottom: 1px solid var(--pc-border);
}
.pc-site__footer{ border-top: 1px solid var(--pc-border); border-bottom: none; }
/* Global fixed header: stays visible on scroll across all storefront pages
 * (home, PLP, PDP, cart, favorites). position:sticky on .pc-header-sticky
 * was unreliable inside the .pc-site flex column; switching .pc-site__header
 * itself to position:fixed gives Mango-like rock-solid behavior. */
.pc-site__header{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 60;
  background: var(--pc-surface);
}

.pc-header-sticky{
  position: relative;
  z-index: 1;
  background: var(--pc-surface);
  isolation: isolate;
  box-shadow: var(--pc-shadow-header);
}

.pc-topbar{ border-bottom: 1px solid var(--pc-border); background: var(--pc-surface); }
.pc-topbar__inner{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--pc-s-4);
  padding: var(--pc-s-2) 0;
}
.pc-topbar__links{
  display: flex;
  flex-wrap: wrap;
  gap: var(--pc-s-3);
  font-size: var(--pc-text-xs);
  color: var(--pc-muted);
}
.pc-topbar__links a{ text-decoration: none; }
.pc-topbar__links a:hover{ text-decoration: underline; }

.pc-header{
  display: grid;
  grid-template-columns: minmax(0, 220px) 1fr minmax(0, 360px);
  align-items: center;
  gap: var(--pc-s-4);
  padding: var(--pc-s-4) 0;
}

.pc-promo{
  background: var(--pc-accent);
  border-top: 1px solid transparent;
  border-bottom: 1px solid transparent;
  overflow: hidden;
}
.pc-promo__inner{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--pc-s-4);
  padding: var(--pc-s-4) 0;
}
.pc-promo__left{
  display: inline-flex;
  align-items: center;
  gap: var(--pc-s-3);
  min-width: 0;
  color: #fff;
  font-weight: var(--pc-font-weight-semibold);
  font-size: var(--pc-text-sm);
}
.pc-promo__dot{
  width: 28px;
  height: 28px;
  border-radius: var(--pc-radius-pill);
  background: rgba(255,255,255,0.15);
  flex-shrink: 0;
}
.pc-promo__text{
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pc-promo__pill{
  display: inline-flex;
  padding: 8px 14px;
  border-radius: var(--pc-radius-sm);
  background: rgba(255,255,255,0.12);
  color: #fff;
  font-weight: var(--pc-font-weight-heavy);
  font-size: var(--pc-text-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.pc-footer{ padding: var(--pc-s-10) 0; }
.pc-footer__title{
  font-weight: var(--pc-font-weight-heavy);
  margin-bottom: var(--pc-s-3);
  letter-spacing: var(--pc-tracking-label);
}
.pc-footer__list{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--pc-s-2);
  color: var(--pc-muted);
  font-size: var(--pc-text-sm);
}
.pc-footer__list a{ text-decoration: none; }
.pc-footer__list a:hover{ text-decoration: underline; }

.pc-brand{
  font-weight: var(--pc-font-weight-bold);
  text-decoration: none;
  letter-spacing: var(--pc-tracking-tight);
}
.pc-brand__mark{ display: inline-flex; align-items: center; gap: var(--pc-s-2); }
.pc-brand__dot{
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: var(--pc-accent);
  box-shadow: 0 0 0 6px var(--pc-accent-weak);
}

.pc-menu{
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--pc-s-2);
}
.pc-menu a{
  display: inline-flex;
  padding: 8px 12px;
  border-radius: var(--pc-radius-pill);
  text-decoration: none;
  font-weight: var(--pc-font-weight-medium);
  font-size: 0.9375rem;
}
.pc-menu a:hover{ background: var(--pc-accent-weak); }

.pc-search form{
  display: flex;
  align-items: center;
  gap: var(--pc-s-2);
  width: 100%;
  max-width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--pc-border);
  border-radius: var(--pc-radius-pill);
  background: var(--pc-surface-2);
}
.pc-search input[type="search"]{
  border: 0;
  outline: 0;
  background: transparent;
  width: 100%;
  font-size: 0.9375rem;
}
.pc-search input[type="search"]::placeholder{ color: var(--pc-placeholder); }
.pc-search button{
  border: 0;
  background: var(--pc-accent);
  color: var(--pc-on-accent);
  border-radius: var(--pc-radius-pill);
  padding: 8px 14px;
  font-weight: var(--pc-font-weight-semibold);
  cursor: pointer;
}

.pc-action{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: var(--pc-radius-pill);
  text-decoration: none;
  font-weight: var(--pc-font-weight-semibold);
  font-size: 0.9375rem;
}
.pc-action:hover{ background: var(--pc-accent-weak); }

.pc-muted{ color: var(--pc-muted); }
.pc-stack{ display: grid; gap: var(--pc-s-6); }
.pc-stack--sm{ gap: var(--pc-s-3); }

.pc-card{
  background: var(--pc-surface);
  border: 1px solid var(--pc-border);
  border-radius: var(--pc-radius-md);
  padding: var(--pc-s-6);
  box-shadow: var(--pc-shadow-1);
}

.pc-h1{
  margin: 0;
  font-size: var(--pc-text-xl);
  line-height: var(--pc-leading-tight);
}
.pc-link{ text-decoration: none; }
.pc-link:hover{ text-decoration: underline; }

.pc-prose :where(p, ul, ol){ margin: 0; }
.pc-prose :where(p + p){ margin-top: var(--pc-s-4); }

@media (max-width: 900px){
  .pc-header{ grid-template-columns: 1fr; }
}
@media (max-width: 640px){
  :root{ --pc-container: 100%; }
  .pc-site__main{ padding-top: var(--pc-s-6); padding-bottom: var(--pc-s-10); }
}