/* ==========================================================================
   SHOP PAGE DESIGN TOKENS & UTILITY STYLES (shop-root.css)
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Barlow:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&display=swap');

:root {
  /* Colors */
  --color-1: #080808;        /* BLACK: Primary dark / text */
  --color-2: #1F1F1F;        /* COAL: Dark neutral */
  --color-3: #414141;        /* GREY 2: Dark gray border / icon */
  --color-4: #757575;        /* GREY 1: Mid gray body secondary */
  --color-5: #A8A8A8;        /* GREY 0: Light gray border / placeholder */
  --color-6: #FFFFFF;        /* WHITE: Pure white card / text */
  --color-7: #AD1A24;        /* ENGINE RED: Primary accent brand red */
  --color-8: #FE372C;        /* TOMATO: Bright red accent / alert */
  --color-9: #F9F2E8;        /* CREAM: Light cream background */
  --color-10: #FFFBF5;       /* LIGHT CREAM: Ultra light cream background */

  /* Typography */
  --font-primary-1: 'font-primary-1', sans-serif;
  --font-family-1: var(--font-primary-1, 'Barlow', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
  --fs-h1: 58px;
  --fs-h2: 50px;
  --fs-h3: 42px;
  --fs-h4: 32px;
  --fs-h5: 24px;
  --fs-h6: 20px;
  --fs-body: 16px;
  --fs-body-sm: 14px;
  --fs-body-xs: 13px;
  --fs-small: 12px;

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  --lh-none: 1.0;
  --lh-tight: 1.1;
  --lh-snug: 1.2;
  --lh-normal: 1.3;
  --lh-body-sm: 1.4;

  /* Spacing */
  --sp-xl: 80px;
  --sp-lg: 64px;
  --sp-md: 48px;
  --sp-base: 32px;
  --sp-sm: 24px;
  --sp-xs: 16px;
  --sp-2xs: 12px;
  --sp-3xs: 8px;
  --sp-4xs: 4px;

  /* Transitions & Shadows */
  --transition-fast: 0.15s ease;
  --transition-normal: 0.25s ease;
  --shadow-card: 0 4px 16px rgba(0, 0, 0, 0.06);

  /* Layout & Sticky Dimensions */
  --shop-header-h: 112px;
  --shop-adminbar-h: 0px;
  --shop-tabs-h: 74px;
  --shop-sticky-controls-h: 104px;
  --shop-sticky-gap: 24px;
}

@media (max-width: 991.98px) {
  :root {
    --shop-header-h: 80px;
    --shop-tabs-h: 62px;
    --shop-sticky-controls-h: 90px;
    --shop-sticky-gap: 16px;
  }
}

body.admin-bar {
  --shop-adminbar-h: 32px;
}

@media (max-width: 782px) {
  body.admin-bar {
    --shop-adminbar-h: 46px;
  }
}

.ff-1, .font-primary-1 { font-family: var(--font-primary-1, var(--font-family-1)); }
.fs-h4 { font-size: var(--fs-h4); }
.fs-h5 { font-size: var(--fs-h5); }
.fs-body { font-size: var(--fs-body); }
.fs-body-sm { font-size: var(--fs-body-sm); }
.fs-small { font-size: var(--fs-small); }

.fw-regular { font-weight: var(--fw-regular); }
.fw-medium { font-weight: var(--fw-medium); }
.fw-semibold { font-weight: var(--fw-semibold); }
.fw-bold { font-weight: var(--fw-bold); }

.lh-none { line-height: var(--lh-none); }
.lh-tight { line-height: var(--lh-tight); }
.lh-snug { line-height: var(--lh-snug); }
.lh-normal { line-height: var(--lh-normal); }
.lh-body-sm { line-height: var(--lh-body-sm); }

.text-color-1 { color: var(--color-1); }
.text-color-3 { color: var(--color-3); }
.text-color-4 { color: var(--color-4); }
.text-color-5 { color: var(--color-5); }
.text-color-7 { color: var(--color-7); }

.bg-color-6 { background-color: var(--color-6); }
.bg-color-9 { background-color: var(--color-9); }

.sp-px-lg { padding-left: var(--sp-lg); padding-right: var(--sp-lg); }
.sp-py-xl { padding-top: var(--sp-xl); padding-bottom: var(--sp-xl); }
.sp-px-sm { padding-left: var(--sp-sm); padding-right: var(--sp-sm); }
.sp-py-xs { padding-top: var(--sp-xs); padding-bottom: var(--sp-xs); }
.sp-py-sm { padding-top: var(--sp-sm); padding-bottom: var(--sp-sm); }
.sp-p-sm { padding: var(--sp-sm); }
.sp-pt-xs { padding-top: var(--sp-xs); }
.sp-pt-base { padding-top: var(--sp-base); }
.sp-pb-xl { padding-bottom: var(--sp-xl); }

.sp-mb-base { margin-bottom: var(--sp-base); }
.sp-mb-lg { margin-bottom: var(--sp-lg); }
.sp-mb-sm { margin-bottom: var(--sp-sm); }
.sp-mb-xs { margin-bottom: var(--sp-xs); }
.sp-mt-4xs { margin-top: var(--sp-4xs); }

.sp-gap-sm { gap: var(--sp-sm); }
.sp-gap-xs { gap: var(--sp-xs); }
.sp-gap-base { gap: var(--sp-base); }
.sp-gap-3xs { gap: var(--sp-3xs); }
.sp-gap-4xs { gap: var(--sp-4xs); }

.container-1440 {
  max-width: 1440px;
  margin-left: auto;
  margin-right: auto;
}

.no-scrollbar::-webkit-scrollbar {
  display: none;
}
.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.cursor-pointer { cursor: pointer; }
.cursor-not-allowed { cursor: not-allowed; }