/* =========================================================
   POLAR BEAR — BASE / RESET
   ========================================================= */

*, *::before, *::after { box-sizing: border-box; }

/* Defensive baseline: if a stylesheet ever fails to load (bad path, blocked
   request, opened without its asset folder), inline SVGs must never blow up
   to their raw intrinsic size and break the layout. This is a hard ceiling,
   not a replacement for each icon's own width/height. */
svg { max-width: 100%; height: auto; }

html {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

body {
  margin: 0;
  background: var(--pb-bg);
  color: var(--pb-body);
  font-family: var(--pb-font-body);
  font-size: var(--pb-fs-body);
  line-height: var(--pb-lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; display: block; }

a {
  color: inherit;
  text-decoration: none;
}

button {
  font-family: inherit;
  cursor: pointer;
}

ul, ol { margin: 0; padding: 0; list-style: none; }

h1, h2, h3, h4 {
  font-family: var(--pb-font-display);
  color: var(--pb-ink);
  margin: 0;
  font-weight: 600;
}

p { margin: 0; }

input, select, textarea {
  font-family: inherit;
  font-size: inherit;
}

/* Accessible focus ring — visible, brand-colored, never removed */
:focus-visible {
  outline: 2px solid var(--pb-terracotta);
  outline-offset: 3px;
  border-radius: 4px;
}

.pb-container {
  max-width: var(--pb-container);
  margin-inline: auto;
  padding-inline: var(--pb-space-5);
}

@media (max-width: 640px) {
  .pb-container { padding-inline: var(--pb-space-4); }
}

.pb-visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Section rhythm */
.pb-section {
  padding-block: var(--pb-space-8);
}
@media (max-width: 640px) {
  .pb-section { padding-block: var(--pb-space-6); }
}

.pb-section-head {
  text-align: center;
  margin-bottom: var(--pb-space-6);
}
.pb-section-head h2 {
  font-family: var(--pb-font-body);
  font-size: 1.05rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  display: inline-flex;
  align-items: center;
  gap: var(--pb-space-2);
  color: var(--pb-ink);
}
.pb-section-head p {
  color: var(--pb-muted);
  margin-top: var(--pb-space-1);
  font-size: var(--pb-fs-small);
}
.pb-heart {
  color: var(--pb-terracotta);
  font-size: 0.85em;
}

/* Buttons */
.pb-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--pb-space-2);
  padding: 14px 28px;
  border-radius: var(--pb-radius-pill);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  border: 1px solid transparent;
  transition: transform 260ms cubic-bezier(0.34, 1.56, 0.64, 1),
              box-shadow var(--pb-speed-fast) var(--pb-ease),
              background-color var(--pb-speed-fast) var(--pb-ease);
  white-space: nowrap;
}
.pb-btn:active { transform: scale(0.96); }

.pb-btn--primary {
  background: var(--pb-black);
  color: #fff;
  text-transform: uppercase;
}
.pb-btn--primary:hover {
  background: var(--pb-black-hover);
  box-shadow: var(--pb-shadow-hover);
  transform: translateY(-2px) scale(1.015);
}

.pb-btn--outline {
  background: transparent;
  color: var(--pb-ink);
  border-color: var(--pb-ink);
  text-transform: uppercase;
}
.pb-btn--outline:hover {
  background: var(--pb-ink);
  color: #fff;
}

.pb-btn--full { width: 100%; }

.pb-btn--success {
  background: var(--pb-success) !important;
  color: #fff !important;
}

/* Add to Cart — cute sage green, distinct from the black brand CTAs
   (Shop Collection, Buy Now, Place Order) so "add to cart" always reads
   as its own clear, friendly action. */
.pb-btn--cart {
  background: var(--pb-cart-green);
  color: #fff;
}
.pb-btn--cart:hover {
  background: var(--pb-cart-green-dark);
  box-shadow: 0 10px 22px rgba(122, 168, 116, 0.4);
  transform: translateY(-2px) scale(1.015);
}
.pb-btn--cart.pb-btn--success { background: var(--pb-success) !important; }

.pb-btn--sm {
  padding: 10px 16px;
  font-size: 0.72rem;
  border-radius: var(--pb-radius-sm);
}

.pb-icon-btn {
  width: 40px; height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(255,255,255,0.85);
  border: 1px solid var(--pb-border);
  transition: transform var(--pb-speed-fast) var(--pb-ease), box-shadow var(--pb-speed-fast) var(--pb-ease);
}
.pb-icon-btn:hover {
  transform: translateY(-2px);
  box-shadow: var(--pb-shadow-sm);
}

/* Star ratings */
.pb-stars {
  color: var(--pb-star);
  font-size: 0.8em;
  letter-spacing: 1px;
}
.pb-rating {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--pb-fs-small);
  color: var(--pb-muted);
}

/* Fade-up utility for the single orchestrated load-in — bouncier, more
   "alive" easing than a plain linear fade, still just transform+opacity
   (GPU-cheap, no layout thrash). */
.pb-reveal {
  opacity: 0;
  transform: translateY(18px) scale(0.985);
}
.pb-reveal.is-visible {
  animation: pbFadeUp 700ms cubic-bezier(0.22, 1.12, 0.36, 1) forwards;
}
@keyframes pbFadeUp {
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .pb-reveal { opacity: 1; transform: none; animation: none; }
}

/* Cart icon bump — plays once when an item is added */
@keyframes pbBump {
  0% { transform: scale(1) rotate(0); }
  30% { transform: scale(1.35) rotate(-8deg); }
  55% { transform: scale(0.92) rotate(6deg); }
  100% { transform: scale(1) rotate(0); }
}
.pb-bump { animation: pbBump 550ms cubic-bezier(0.34, 1.56, 0.64, 1); }
.pb-bump .pb-badge { animation: pbBump 550ms cubic-bezier(0.34, 1.56, 0.64, 1); }

/* Button pop — a tiny satisfying squash on the button itself, layered with
   the color change already in .pb-btn--success */
@keyframes pbPop {
  0% { transform: scale(1); }
  40% { transform: scale(1.045); }
  100% { transform: scale(1); }
}
.pb-btn--pop { animation: pbPop 400ms cubic-bezier(0.34, 1.56, 0.64, 1); }

/* Wishlist heart pop */
@keyframes pbHeartPop {
  0% { transform: scale(1); }
  35% { transform: scale(1.35); }
  60% { transform: scale(0.9); }
  100% { transform: scale(1); }
}
.pb-heart-pop svg { animation: pbHeartPop 420ms cubic-bezier(0.34, 1.56, 0.64, 1); }
.pb-card__wish.is-liked svg,
.pb-gallery__wish.is-liked svg {
  fill: var(--pb-sale);
  stroke: var(--pb-sale);
}

@media (prefers-reduced-motion: reduce) {
  .pb-bump, .pb-bump .pb-badge, .pb-btn--pop, .pb-heart-pop svg { animation: none; }
}