/* ============================================================================
   Apple Web Design System — Component styles
   components.css   (depends on colors_and_type.css)

   States documented: default + active/pressed + focus. Hover is intentionally
   subtle/undocumented per the system. Press = scale(0.95) everywhere.
   ============================================================================ */

/* ---------------------------------------------------------------------------
   BUTTONS
   --------------------------------------------------------------------------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 6px; cursor: pointer; border: none; text-decoration: none;
  font-family: var(--font-text); white-space: nowrap;
  transition: transform var(--dur-press) var(--ease-standard),
              opacity var(--dur-press) var(--ease-standard),
              background-color var(--dur-press) var(--ease-standard);
}
.btn:active { transform: var(--press-scale); }
.btn:focus-visible { outline: 2px solid var(--color-primary-focus); outline-offset: 2px; }

/* Signature blue pill — the system's primary action */
.btn-primary {
  background: var(--color-primary); color: var(--color-on-primary);
  font-size: 17px; font-weight: 400; line-height: 1.47; letter-spacing: -0.374px;
  border-radius: var(--radius-pill); padding: 11px 22px;
}
.btn-primary:hover { background: #0077e6; }

/* Ghost pill — the second CTA when two pills sit together */
.btn-secondary-pill {
  background: transparent; color: var(--color-primary);
  border: 1px solid var(--color-primary);
  font-size: 17px; font-weight: 400; line-height: 1.47; letter-spacing: -0.374px;
  border-radius: var(--radius-pill); padding: 10px 21px;
}
.btn-secondary-pill:hover { background: rgba(0, 102, 204, 0.06); }

/* Dark utility rect — global-nav actions (Sign In, Bag) */
.btn-dark-utility {
  background: var(--color-ink); color: var(--color-on-dark);
  font-size: 14px; font-weight: 400; line-height: 1.29; letter-spacing: -0.224px;
  border-radius: var(--radius-sm); padding: 8px 15px;
}

/* Pearl capsule — product-card secondary */
.btn-pearl-capsule {
  background: var(--color-surface-pearl); color: var(--color-ink-muted-80);
  border: 3px solid var(--color-divider-soft);
  font-size: 14px; font-weight: 400; line-height: 1.43; letter-spacing: -0.224px;
  border-radius: var(--radius-md); padding: 8px 14px;
}

/* Store hero CTA — larger, the rare weight 300 */
.btn-store-hero {
  background: var(--color-primary); color: var(--color-on-primary);
  font-size: 18px; font-weight: 300; line-height: 1.0; letter-spacing: 0;
  border-radius: var(--radius-pill); padding: 14px 28px;
}

/* Circular control chip — floats over photography */
.btn-icon-circular {
  background: var(--color-chip-translucent); color: var(--color-ink);
  width: 44px; height: 44px; border-radius: var(--radius-full);
  backdrop-filter: var(--backdrop-frost); -webkit-backdrop-filter: var(--backdrop-frost);
}

.btn:disabled, .btn[aria-disabled="true"] {
  color: var(--color-ink-muted-48); cursor: default; opacity: 0.55;
  pointer-events: none;
}

/* Inline text links */
.link        { color: var(--color-primary); text-decoration: none; font-family: var(--font-text); }
.link:hover  { text-decoration: underline; }
.link-on-dark { color: var(--color-primary-on-dark); text-decoration: none; font-family: var(--font-text); }
.link-on-dark:hover { text-decoration: underline; }

/* The "Learn more › / Buy ›" chevron link grammar */
.link-chevron::after { content: " ›"; }

/* ---------------------------------------------------------------------------
   NAVIGATION
   --------------------------------------------------------------------------- */

.global-nav {
  background: var(--color-surface-black); color: var(--color-on-dark);
  height: 44px; display: flex; align-items: center;
  padding: 0 22px; gap: 28px;
}
.global-nav a {
  color: var(--color-on-dark); opacity: 0.8; text-decoration: none;
  font-family: var(--font-text); font-size: 12px; font-weight: 400; letter-spacing: -0.12px;
  transition: opacity var(--dur-press) var(--ease-standard);
}
.global-nav a:hover { opacity: 1; }

.sub-nav {
  height: 52px; display: flex; align-items: center; justify-content: space-between;
  padding: 0 22px;
  background: rgba(245, 245, 247, 0.8);
  backdrop-filter: var(--backdrop-frost); -webkit-backdrop-filter: var(--backdrop-frost);
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  color: var(--color-ink);
}
.sub-nav .sub-nav-title { font-family: var(--font-display); font-size: 21px; font-weight: 600; letter-spacing: 0.231px; }
.sub-nav nav { display: flex; align-items: center; gap: 24px; }
.sub-nav nav a {
  color: var(--color-ink); text-decoration: none;
  font-family: var(--font-text); font-size: 14px; font-weight: 400; letter-spacing: -0.224px;
  opacity: 0.85;
}
.sub-nav nav a:hover { opacity: 1; }

/* ---------------------------------------------------------------------------
   PRODUCT TILES — full-bleed, zero gap, color change is the divider
   --------------------------------------------------------------------------- */

.tile {
  padding: var(--space-section) 24px; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  border-radius: var(--radius-none);
}
.tile .tile-h     { font-family: var(--font-display); font-size: 40px; font-weight: 600; line-height: 1.10; }
.tile .tile-sub   { font-family: var(--font-display); font-size: 28px; font-weight: 400; line-height: 1.14; letter-spacing: 0.196px; }
.tile .tile-ctas  { display: flex; gap: 18px; margin-top: 6px; }

.tile-light     { background: var(--color-canvas);           color: var(--color-ink); }
.tile-parchment { background: var(--color-canvas-parchment); color: var(--color-ink); }
.tile-dark      { background: var(--color-surface-tile-1);   color: var(--color-on-dark); }
.tile-dark-2    { background: var(--color-surface-tile-2);   color: var(--color-on-dark); }
.tile-dark-3    { background: var(--color-surface-tile-3);   color: var(--color-on-dark); }

/* On dark tiles, the chevron link uses Sky Link Blue */
.tile-dark .link, .tile-dark-2 .link, .tile-dark-3 .link { color: var(--color-primary-on-dark); }

/* The one shadow in the system — product imagery resting on a surface */
.product-shadow { box-shadow: var(--shadow-product); }

/* ---------------------------------------------------------------------------
   CARDS & CHIPS
   --------------------------------------------------------------------------- */

.store-card {
  background: var(--color-canvas); border: var(--hairline-border);
  border-radius: var(--radius-lg); padding: var(--space-lg);
  display: flex; flex-direction: column; gap: 6px;
}
.store-card .store-card-img { border-radius: var(--radius-sm); aspect-ratio: 1/1; width: 100%; object-fit: cover; }
.store-card .store-card-name  { font-family: var(--font-text); font-size: 17px; font-weight: 600; letter-spacing: -0.374px; }
.store-card .store-card-price { font-family: var(--font-text); font-size: 17px; font-weight: 400; letter-spacing: -0.374px; color: var(--color-ink-muted-80); }

.option-chip {
  background: var(--color-canvas); color: var(--color-ink);
  border: 1px solid var(--color-hairline); border-radius: var(--radius-pill);
  padding: 12px 16px; font-family: var(--font-text); font-size: 14px; letter-spacing: -0.224px;
  cursor: pointer; transition: border-color var(--dur-press) var(--ease-standard);
}
.option-chip[aria-selected="true"] { border: 2px solid var(--color-primary-focus); padding: 11px 15px; }

/* ---------------------------------------------------------------------------
   INPUTS
   --------------------------------------------------------------------------- */

.search-input {
  background: var(--color-canvas); color: var(--color-ink);
  border: 1px solid rgba(0, 0, 0, 0.08); border-radius: var(--radius-pill);
  padding: 12px 20px; height: 44px; min-width: 280px;
  font-family: var(--font-text); font-size: 17px; letter-spacing: -0.374px;
  display: inline-flex; align-items: center; gap: 8px;
}
.search-input input { border: none; outline: none; background: transparent; flex: 1; font: inherit; color: inherit; }
.search-input:focus-within { border-color: var(--color-primary-focus); }

/* ---------------------------------------------------------------------------
   FLOATING STICKY BAR — buy-page running total
   --------------------------------------------------------------------------- */

.sticky-bar {
  height: 64px; display: flex; align-items: center; justify-content: space-between;
  padding: 12px 32px;
  background: rgba(245, 245, 247, 0.8);
  backdrop-filter: var(--backdrop-frost); -webkit-backdrop-filter: var(--backdrop-frost);
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  color: var(--color-ink); font-family: var(--font-text); font-size: 17px; letter-spacing: -0.374px;
}

/* ---------------------------------------------------------------------------
   FOOTER — deliberately dense, relaxed link leading
   --------------------------------------------------------------------------- */

.footer {
  background: var(--color-canvas-parchment); color: var(--color-ink-muted-80);
  padding: 64px 22px;
}
.footer .footer-col-head { font-family: var(--font-text); font-size: 14px; font-weight: 600; letter-spacing: -0.224px; color: var(--color-ink); margin-bottom: 4px; }
.footer .footer-link { display: block; font-family: var(--font-text); font-size: 17px; font-weight: 400; line-height: 2.41; color: var(--color-ink-muted-80); text-decoration: none; }
.footer .footer-link:hover { color: var(--color-ink); text-decoration: underline; }
.footer .footer-legal { font-family: var(--font-text); font-size: 12px; font-weight: 400; letter-spacing: -0.12px; color: var(--color-ink-muted-48); }