/*
 * Donut Depot — Glitch theme custom layer
 * Override: cleaner, Minecraft store aesthetic
 */

/* ==================== FONTS ==================== */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=Outfit:wght@400;500;600;700;800;900&display=swap');

/* Apply Inter to text — BUT exclude Font Awesome icons (they need their icon font) */
html body,
html body p, html body span, html body div,
html body a, html body button,
html body input, html body select, html body textarea,
html body nav, html body nav *,
html body header, html body header *,
html body footer, html body footer *,
html body .text-t-primary,
html body .navbar, html body .navbar * {
  font-family: 'Inter', system-ui, -apple-system, sans-serif !important;
  letter-spacing: -0.005em !important;
}

/* Font Awesome — RESTORE icon font (we broke it with the * override before) */
i, i.fa, i.fab, i.fas, i.far, i.fal,
[class*="fa-"], [class^="fa-"],
.fa, .fab, .fas, .far, .fal {
  font-family: 'Font Awesome 6 Free', 'Font Awesome 6 Brands', 'FontAwesome' !important;
  font-weight: 900 !important;
}
.fab, [class*="fa-cc-"], [class^="fab"] {
  font-family: 'Font Awesome 6 Brands', 'FontAwesome' !important;
  font-weight: 400 !important;
}

/* Headers — Outfit bold, no all-caps */
h1, h2, h2 span,
section.component h2,
section.component h1 {
  font-family: 'Outfit', 'Inter', system-ui, sans-serif !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em !important;
  text-transform: none !important;
}

/* Eyebrow text (small section labels above titles) */
section.component p.text-sm.text-gray-300,
section.component p.text-xs.font-mono {
  font-family: 'Inter', system-ui, sans-serif !important;
  font-weight: 600 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
}

/* Prices, item counts — keep Chivo Mono for the receipt feel */
.font-mono,
[x-text*="price"],
[x-text*="cost"],
[x-text*="$"] {
  font-family: 'Chivo Mono', 'Courier New', monospace !important;
}

/* ==================== ROUND CORNERS — GLOBAL (Minecraft store look) ==================== */
/* Kill ALL angular glitch clip-paths site-wide. Buttons are handled separately below. */
.corner,
.corner-xs,
[class*="corner"]:not(.glitch-btn):not(.glitch-btn *),
section.component [style*="clip-path"]:not(.glitch-btn):not(.glitch-btn *) {
  clip-path: none !important;
  -webkit-clip-path: none !important;
  border-radius: 12px !important;
}
.corner-xs { border-radius: 8px !important; }

/* Nested corners get smaller radius so they don't look weird */
.corner .corner,
.corner-xs .corner-xs { border-radius: 8px !important; }

/* ==================== CARDS & PANELS — chunky Minecraft depth ==================== */
/* Product cards */
.product-card, [class*="product-card"] {
  clip-path: none !important;
  -webkit-clip-path: none !important;
  border-radius: 14px !important;
  border: 1px solid rgba(251,191,36,0.10) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.03), 0 4px 0 -1px rgba(0,0,0,0.45), 0 8px 18px -6px rgba(0,0,0,0.5) !important;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease !important;
}
.product-card:hover, [class*="product-card"]:hover {
  transform: translateY(-3px) !important;
  border-color: rgba(251,191,36,0.45) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 6px 0 -1px rgba(0,0,0,0.45), 0 14px 28px -8px rgba(251,191,36,0.18) !important;
}

/* Generic content panels (calculator box, free-coins card, stats cards,
   FAQ items, feedback cards, socials cards, etc.) — give them depth + amber-tinted border */
section.component .bg-b-secondary.corner,
section.component .bg-b-tertiary.corner,
section.component .p-0\.5.bg-border.corner,
section.component .bg-b-secondary.corner-xs,
section.component .bg-b-tertiary.corner-xs {
  border: 1px solid rgba(251,191,36,0.10) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.025), 0 4px 0 -2px rgba(0,0,0,0.4), 0 8px 20px -8px rgba(0,0,0,0.45) !important;
}

/* ==================== INPUTS — rounded, dark, amber focus ==================== */
section.component input[type="text"],
section.component input[type="number"],
section.component input[type="email"],
section.component select,
section.component textarea {
  clip-path: none !important;
  -webkit-clip-path: none !important;
  border-radius: 10px !important;
  transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
}
section.component input[type="number"]:focus,
section.component input[type="text"]:focus,
section.component textarea:focus {
  border-color: #FBBF24 !important;
  box-shadow: 0 0 0 3px rgba(251,191,36,0.15) !important;
  outline: none !important;
}

/* ==================== NAVBAR CURRENCY SELECTOR — matches dark button ==================== */
.currency-selector select,
nav select {
  clip-path: none !important;
  -webkit-clip-path: none !important;
  border-radius: 10px !important;
  background: #1C1D21 !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  box-shadow: 0 4px 0 0 rgba(0,0,0,0.45), 0 5px 10px -3px rgba(0,0,0,0.3) !important;
  color: #F5F5F5 !important;
  font-weight: 700 !important;
  transition: filter 0.1s ease !important;
}
.currency-selector select:hover,
nav select:hover { filter: brightness(1.1); }

/* ==================== FAQ ACCORDION — rounded item cards ==================== */
section.component[data-component-id="faq"] .corner,
section.component[data-component-id="faq"] [class*="corner"],
[data-component-id="faq-page"] .corner,
[data-component-id="faq-page"] [class*="corner"] {
  border-radius: 12px !important;
  clip-path: none !important;
  -webkit-clip-path: none !important;
}

/* ==================== MINECRAFT-STORE BUTTONS (glitch-btn rebuild) ==================== */
/* The theme's .glitch-btn has 3 layers: .invisible (width), .content (text+bg), .anim (slide).
   We remove the angular clip, kill the slide animation, and make a clean chunky button. */

/* Works on BOTH <a> and <button> glitch buttons */
a.glitch-btn, button.glitch-btn {
  clip-path: none !important;
  -webkit-clip-path: none !important;
  border: none !important;
  border-radius: 9px !important;
  overflow: visible !important;
  transition: transform 0.07s ease-out, filter 0.1s ease-out !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

/* Kill the futuristic slide-in animation layer entirely */
.glitch-btn .anim {
  display: none !important;
}

/* The visible text+icon layer — round it, no clip */
.glitch-btn .content {
  clip-path: none !important;
  -webkit-clip-path: none !important;
  border-radius: 9px !important;
}

/* --- PRIMARY (gold) button --- clean flat gold, subtle solid drop */
.glitch-btn.bg-accent-500\/60 {
  background: transparent !important;
  box-shadow: 0 4px 0 0 #B45309, 0 5px 10px -2px rgba(0,0,0,0.35) !important;
}
.glitch-btn.bg-accent-500\/60 .content {
  background: #FFC833 !important;
  color: #2A1A05 !important;
}

/* --- SECONDARY (dark) button --- covers bg-b-secondary/60 AND bg-white/[0.03] variants --- */
.glitch-btn.bg-b-secondary\/60,
.glitch-btn[class*="bg-white"] {
  background: transparent !important;
  box-shadow: 0 4px 0 0 rgba(0,0,0,0.55), 0 5px 10px -2px rgba(0,0,0,0.3) !important;
}
.glitch-btn.bg-b-secondary\/60 .content,
.glitch-btn[class*="bg-white"] .content {
  background: #1C1D21 !important;
  color: #F5F5F5 !important;
}

/* Hover: brighten. Active: press down into the shadow. */
.glitch-btn:hover { filter: brightness(1.06); }
.glitch-btn:active {
  transform: translateY(3px) !important;
  box-shadow: 0 1px 0 0 #B45309, 0 2px 4px -2px rgba(0,0,0,0.35) !important;
}
.glitch-btn.bg-b-secondary\/60:active,
.glitch-btn[class*="bg-white"]:active {
  box-shadow: 0 1px 0 0 rgba(0,0,0,0.55), 0 2px 4px -2px rgba(0,0,0,0.3) !important;
}

/* Nav links (HOME / PRODUCTS / REVIEWS / STATUS / FAQ) stay plain text */
header nav a:not(.glitch-btn),
nav a:not(.glitch-btn):not([href*="discord"]) {
  background: transparent !important;
  box-shadow: none !important;
}

/* ==================== RAW GOLD BUTTONS (calculator Add-to-Cart, product Buy Now) ==================== */
/* These use bg-accent-500 directly (not glitch-btn) — give them the same chunky gold treatment */
section.component button.bg-accent-500:not(.anim):not(.content),
.product-card button[class*="bg-accent"],
.product-card a[class*="bg-accent"],
button.bg-accent-500.flex-1 {
  border-radius: 10px !important;
  background: #FFC833 !important;
  color: #2A1A05 !important;
  border: none !important;
  box-shadow: 0 4px 0 0 #B45309, 0 5px 10px -2px rgba(0,0,0,0.35) !important;
  transition: transform 0.07s ease-out, filter 0.1s ease-out !important;
}
section.component button.bg-accent-500:not(.anim):not(.content):hover,
.product-card button[class*="bg-accent"]:hover,
.product-card a[class*="bg-accent"]:hover {
  filter: brightness(1.06);
}
section.component button.bg-accent-500:not(.anim):not(.content):active,
.product-card button[class*="bg-accent"]:active,
.product-card a[class*="bg-accent"]:active {
  transform: translateY(3px) !important;
  box-shadow: 0 1px 0 0 #B45309, 0 2px 4px -2px rgba(0,0,0,0.35) !important;
}

/* ==================== SMALL CONTROL BUTTONS (calculator +/−, preset chips) ==================== */
section.component[data-component-id="calculator"] button {
  border-radius: 8px !important;
  transition: transform 0.07s ease-out, border-color 0.12s, color 0.12s !important;
}
section.component[data-component-id="calculator"] button:active {
  transform: translateY(2px) !important;
}
/* Reset button (dark, in calculator) gets subtle depth */
section.component[data-component-id="calculator"] button.bg-b-tertiary {
  box-shadow: 0 3px 0 0 rgba(0,0,0,0.4) !important;
}
section.component[data-component-id="calculator"] button.bg-b-tertiary:active {
  box-shadow: 0 1px 0 0 rgba(0,0,0,0.4) !important;
}

/* ==================== GLITCH HIGHLIGHT — SUBTLE amber, no big yellow blocks ==================== */
/* The [bracket] syntax wraps text in a span — remove the big yellow background, just color it amber */
.glitch-text-accent,
[class*="glitch"] [class*="accent"],
section.component h1 span:not(:only-child),
section.component h2 span:not(:only-child) {
  background: none !important;
  background-color: transparent !important;
  color: #FBBF24 !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Catch the typical Glitch theme bracket-highlight span — it usually has padding + amber bg */
section.component h1 [style*="background"],
section.component h2 [style*="background"],
section.component h1 [class*="bg-accent"],
section.component h2 [class*="bg-accent"] {
  background: none !important;
  background-color: transparent !important;
  color: #FBBF24 !important;
  padding: 0 !important;
}

/* ==================== HERO — SLIM band, not a giant section ==================== */
section.component[data-component-id="hero"] {
  min-height: auto !important;
  margin-bottom: 0 !important;
}
section.component[data-component-id="hero"] .container {
  padding-top: 2rem !important;
  padding-bottom: 1.25rem !important;
  margin-bottom: 0 !important;
}
section.component[data-component-id="hero"] h1 {
  font-size: clamp(1.75rem, 4vw, 2.75rem) !important;
  line-height: 1.15 !important;
  margin-bottom: 1.25rem !important;
  font-weight: 800 !important;
}
section.component[data-component-id="hero"] p.text-sm {
  margin-bottom: 0.5rem !important;
  font-size: 0.7rem !important;
  opacity: 0.55 !important;
}
section.component[data-component-id="hero"] p.text-base,
section.component[data-component-id="hero"] p:empty {
  display: none !important;
}

/* ==================== BROWSE — Minecraft block icons + tight layout ==================== */
.mc-block-icon {
  width: 100% !important;
  height: 100% !important;
  image-rendering: pixelated !important;
  image-rendering: -moz-crisp-edges !important;
  image-rendering: crisp-edges !important;
  display: block;
}
section.component[data-component-id="browse"] {
  margin-top: 0 !important;
}
section.component[data-component-id="browse"] .container {
  padding-top: 1.5rem !important;
}
section.component[data-component-id="browse"] button {
  border-width: 2px !important;
  border-radius: 14px !important;
}

/* Category-pill icons must stay 36px (the global .mc-block-icon 100% rule
   collapses tiny block textures fine but balloons larger icons like the crown) */
.mc-block-icon.shrink-0 {
  width: 36px !important;
  height: 36px !important;
  object-fit: contain !important;
}
/* smooth (non-pixelated) icons — e.g. the Membership crown */
.mc-block-icon.shrink-0[src*="966214"] {
  image-rendering: auto !important;
}

/* ==================== PRODUCT CARDS — chunky, lift on hover ==================== */
.product-card, [class*="product-card"] {
  border-radius: 14px !important;
  overflow: hidden !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}
.product-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 30px -6px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(251, 191, 36, 0.25) !important;
}

/* ==================== SECTION SPACING — less giant gaps ==================== */
.component .container.mb-32 { margin-bottom: 4rem !important; }
.component .container.lg\:mb-32 { margin-bottom: 4rem !important; }
@media (min-width: 1024px) {
  .component .container.lg\:mb-32 { margin-bottom: 5rem !important; }
}
.component .container.mb-16 { margin-bottom: 3rem !important; }
.component .container.lg\:mb-16 { margin-bottom: 3rem !important; }

/* Soften borders */
section.component .border-line {
  border-color: rgba(245, 245, 245, 0.08) !important;
}

/* ==================== MARQUEES (announcement bar + payment methods) ==================== */
@keyframes marquee {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
.animate-marquee {
  animation: marquee 22s linear infinite;
  will-change: transform;
}
.animate-marquee:hover { animation-play-state: paused; }

@keyframes payments-marquee {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
.animate-payments-marquee {
  animation: payments-marquee 50s linear infinite;
  will-change: transform;
}
.animate-payments-marquee:hover { animation-play-state: paused; }

/* Each payment method on a uniform white card — all visible, evenly sized, never squished */
.pm-card {
  flex-shrink: 0;
  width: 60px;
  height: 40px;
  background: #FFFFFF;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px 8px;
  box-shadow: 0 2px 6px -2px rgba(0,0,0,0.4);
}
.pm-card img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}

/* ==================== BACKGROUND + DETAILS ==================== */
body {
  background-image:
    radial-gradient(ellipse 80% 50% at 50% -10%, rgba(251, 191, 36, 0.08), transparent 70%),
    linear-gradient(rgba(245, 245, 245, 0.012) 1px, transparent 1px),
    linear-gradient(90deg, rgba(245, 245, 245, 0.012) 1px, transparent 1px);
  background-size: auto, 32px 32px, 32px 32px;
  background-position: top center, 0 0, 0 0;
  background-attachment: fixed;
}

::selection { background: #FBBF24; color: #0A0A0B; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: #0A0A0B; }
::-webkit-scrollbar-thumb { background: rgba(251, 191, 36, 0.25); }
::-webkit-scrollbar-thumb:hover { background: rgba(251, 191, 36, 0.45); }

/* ==================== FREE COINS BLOCK ==================== */
#free-coins { position: relative; }
#free-coins h2 {
  font-size: clamp(2rem, 4.5vw, 3.25rem) !important;
  line-height: 1.1 !important;
  letter-spacing: -0.02em;
  margin-bottom: 0 !important;
}
#free-coins p.text-gray-300 {
  color: #FBBF24 !important;
  font-weight: 700;
  letter-spacing: 0.2em;
  font-size: 0.85rem !important;
}
#free-coins > div > div > div:first-child {
  margin-bottom: 1.5rem !important;
  gap: 0.5rem !important;
}
#free-coins > div > div > div:has(p.text-base) {
  border: 1.5px solid rgba(251, 191, 36, 0.25);
  background: linear-gradient(180deg, rgba(251, 191, 36, 0.03), rgba(251, 191, 36, 0.01)) !important;
  padding: 2rem 1.5rem !important;
}
#free-coins .text-base.text-t-primary\/50 {
  color: rgba(245, 245, 245, 0.85) !important;
  font-size: 1rem !important;
  line-height: 1.6 !important;
  max-width: 38rem;
  margin-left: auto;
  margin-right: auto;
}
#free-coins > div > div > div:has(p.text-base) > div {
  gap: 1.5rem !important;
}
#free-coins .container::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 50% 60% at 50% 50%, rgba(251, 191, 36, 0.08), transparent 70%);
  pointer-events: none;
  z-index: -1;
}

/* ==================== STICKY FREE-COINS BUTTON ==================== */
#free-coins-sticky:hover { filter: brightness(1.06); }
#free-coins-sticky:active {
  transform: translateY(3px) !important;
  box-shadow: 0 1px 0 0 #B45309, 0 2px 6px -2px rgba(0,0,0,0.4) !important;
}
@media (max-width: 640px) {
  #free-coins-sticky {
    bottom: 1rem; left: 1rem;
    padding: 0.65rem 0.85rem !important;
    font-size: 0.72rem !important;
  }
}

/* ==================================================================== */
/* ============ PRODUCT PAGE — the money-maker, premium ============== */
/* ==================================================================== */

/* Product title — clean Outfit, not mono-uppercase */
section[data-component-id="product-page"] h1,
.component[data-component-id*="product"] h1 {
  font-family: 'Outfit', system-ui, sans-serif !important;
  text-transform: none !important;
  letter-spacing: -0.02em !important;
}

/* Image frame — rounded, amber-tinted border, soft depth (kill the harsh border-2) */
[data-component-id="product-page"] .splide__slide,
[data-component-id="product-page"] .border-2.border-border {
  border-radius: 14px !important;
  border: 1px solid rgba(251,191,36,0.15) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.03), 0 6px 16px -8px rgba(0,0,0,0.5) !important;
  overflow: hidden !important;
}
[data-component-id="product-page"] .splide.thumbnails .splide__slide {
  border-radius: 10px !important;
  cursor: pointer;
  transition: opacity 0.15s, border-color 0.15s !important;
}
[data-component-id="product-page"] .splide.thumbnails .splide__slide:hover {
  opacity: 1 !important;
  border-color: rgba(251,191,36,0.5) !important;
}

/* Description / Reviews tabs — rounded pill tabs */
[data-component-id="product-page"] .corner-sm {
  border-radius: 9px !important;
  clip-path: none !important;
}
[data-component-id="product-page"] [\:class*="activeTab"] {
  transition: all 0.15s ease !important;
}

/* Price box — premium gold-tinted panel */
[data-component-id="product-page"] .p-0\.5.bg-border.corner:first-of-type {
  background: linear-gradient(135deg, rgba(251,191,36,0.25), rgba(251,191,36,0.08)) !important;
  border-radius: 14px !important;
}

/* ---- VARIANT SELECTOR (package picker) — the #1 conversion element ---- */
/* Each variant = chunky rounded card. Selected = bold amber. */
#productForm [\:class*="activeVariant"],
form[\@submit] button[\@click*="activeVariant"],
.component[data-component-id="product-page"] button[\@click*="activeVariant"] {
  border-radius: 12px !important;
  border: 2px solid rgba(255,255,255,0.07) !important;
  background: #16171A !important;
  transition: transform 0.12s ease, border-color 0.12s ease, background 0.12s ease !important;
  padding: 0.85rem 1rem !important;
}
.component[data-component-id="product-page"] button[\@click*="activeVariant"]:hover {
  border-color: rgba(251,191,36,0.4) !important;
  transform: translateY(-2px) !important;
}
/* Selected variant — the theme adds ring-accent-500 ring-2; reinforce it strongly */
.component[data-component-id="product-page"] button[\@click*="activeVariant"].ring-2,
.component[data-component-id="product-page"] button[\:class*="activeVariant"][class*="ring-accent"] {
  border-color: #FBBF24 !important;
  background: linear-gradient(135deg, rgba(251,191,36,0.14), rgba(251,191,36,0.04)) !important;
  box-shadow: 0 0 0 1px #FBBF24, 0 4px 14px -4px rgba(251,191,36,0.35) !important;
}

/* ---- QUANTITY STEPPER — chunky rounded ---- */
[data-component-id="product-page"] .flex.overflow-hidden:has(input[name="quantity"]) {
  border-radius: 10px !important;
  overflow: hidden !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
}
[data-component-id="product-page"] input[name="quantity"] {
  border-radius: 0 !important;
  background: rgba(255,255,255,0.04) !important;
}
[data-component-id="product-page"] button:has(svg path[d*="M19.5 12h-15"]),
[data-component-id="product-page"] button:has(svg path[d*="M12 4.5v15"]) {
  background: rgba(255,255,255,0.08) !important;
  transition: background 0.12s ease !important;
}
[data-component-id="product-page"] button:has(svg path[d*="M19.5 12h-15"]):hover,
[data-component-id="product-page"] button:has(svg path[d*="M12 4.5v15"]):hover {
  background: #FBBF24 !important;
  color: #2A1A05 !important;
}

/* Category + badges on product page — chunky pills */
[data-component-id="product-page"] .badges a,
[data-component-id="product-page"] .badges > div {
  border-radius: 9px !important;
  box-shadow: 0 3px 0 0 rgba(0,0,0,0.3) !important;
}

/* ==================================================================== */
/* ============ PRODUCTS PAGE (/products) grid polish ================ */
/* ==================================================================== */
[data-component-id="products-page"] h1,
[data-component-id="products-page"] h2 {
  font-family: 'Outfit', system-ui, sans-serif !important;
  text-transform: none !important;
}

/* ==================================================================== */
/* ============ FEEDBACK PAGE (/feedback) review cards =============== */
/* ==================================================================== */
[data-component-id="feedback-page"] h1,
[data-component-id="feedback-page"] h2 {
  font-family: 'Outfit', system-ui, sans-serif !important;
  text-transform: none !important;
}
/* Review cards — rounded with depth + amber-tinted border */
[data-component-id="feedback-page"] .corner,
[data-component-id="feedback-page"] [class*="corner"],
section.component[data-component-id="feedbacks"] .corner,
section.component[data-component-id="feedbacks"] [class*="corner"] {
  border-radius: 14px !important;
  clip-path: none !important;
}
[data-component-id="feedback-page"] .bg-b-secondary,
section.component[data-component-id="feedbacks"] .bg-b-secondary {
  border: 1px solid rgba(251,191,36,0.08) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.025), 0 4px 0 -2px rgba(0,0,0,0.4), 0 8px 18px -8px rgba(0,0,0,0.4) !important;
}

/* ==================================================================== */
/* ============ STATUS PAGE (/status) panels ======================== */
/* ==================================================================== */
[data-component-id="status-page"] h1,
[data-component-id="status-page"] h2 {
  font-family: 'Outfit', system-ui, sans-serif !important;
  text-transform: none !important;
}
[data-component-id="status-page"] .corner,
[data-component-id="status-page"] [class*="corner"] {
  border-radius: 12px !important;
  clip-path: none !important;
}
[data-component-id="status-page"] .bg-b-secondary {
  border: 1px solid rgba(251,191,36,0.08) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.025), 0 4px 0 -2px rgba(0,0,0,0.4) !important;
}

/* ==================== /products PAGE ==================== */
/* Products-page title — clean Outfit */
[data-component-id="products-page"] h1 {
  font-family: 'Outfit', system-ui, sans-serif !important;
  text-transform: none !important;
}
/* Trim the huge default top/bottom padding so products show sooner */
[data-component-id="products-page"] .container.py-24 {
  padding-top: 3rem !important;
  padding-bottom: 4rem !important;
}
[data-component-id="products-page"] .mb-24 {
  margin-bottom: 2.5rem !important;
}