/** Shopify CDN: Minification failed

Line 473:0 All "@import" rules must come first

**/
/* ============================================================
   TECH BUZZ � Premium Black & Gold Design System
   Custom CSS Override for Shopify Ritual Theme
   ============================================================ */

/* ------------------------------------------------------------
   1. CSS CUSTOM PROPERTIES � TECH BUZZ BRAND TOKENS
   ------------------------------------------------------------ */
:root {
  --tb-black:         #080808;
  --tb-surface:       #111111;
  --tb-card:          #151515;
  --tb-charcoal:      #1B1B1B;
  --tb-gold:          #C9A24A;
  --tb-gold-premium:  #D4AF63;
  --tb-gold-light:    #E5C77A;
  --tb-white:         #F5F5F5;
  --tb-text-muted:    #A8A8A8;
  --tb-border:        rgba(201, 162, 74, 0.20);
  --tb-border-subtle: rgba(245, 245, 245, 0.08);
  --tb-transition-fast:   200ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --tb-transition-normal: 350ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --tb-transition-slow:   500ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* ------------------------------------------------------------
   2. GLOBAL BASE OVERRIDES
   ------------------------------------------------------------ */
html, body { background-color: var(--tb-black) !important; }
body { color: var(--tb-white); -webkit-font-smoothing: antialiased; }
::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: var(--tb-black); }
::-webkit-scrollbar-thumb { background: var(--tb-gold); border-radius: 2px; }
::selection { background: rgba(201, 162, 74, 0.25); color: var(--tb-white); }
:focus-visible { outline: 1.5px solid var(--tb-gold); outline-offset: 3px; }
a { color: inherit; text-decoration: none; transition: color var(--tb-transition-fast); }
a:hover { color: var(--tb-gold-premium); }
h1, h2, h3, h4, h5, h6 { color: var(--tb-white); letter-spacing: -0.02em; }
p, li, span { color: var(--tb-text-muted); }

/* ------------------------------------------------------------
   3. ANNOUNCEMENT BAR
   ------------------------------------------------------------ */
.announcement-bar { background-color: var(--tb-charcoal) !important; border-bottom: 1px solid var(--tb-border) !important; }
.announcement-bar p, .announcement-bar span, .announcement-bar a { color: var(--tb-text-muted) !important; font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; }
.announcement-bar strong, .announcement-bar b { color: var(--tb-gold-premium) !important; }

/* ------------------------------------------------------------
   4. HEADER
   ------------------------------------------------------------ */
#header-component, header-component {
  background-color: rgba(8, 8, 8, 0.92) !important;
  backdrop-filter: blur(16px) saturate(1.2);
  -webkit-backdrop-filter: blur(16px) saturate(1.2);
  border-bottom: 1px solid var(--tb-border) !important;
  transition: background-color var(--tb-transition-normal), border-color var(--tb-transition-normal);
}
.header__menu-item > a, .header__inline-menu a, nav-menu a {
  color: var(--tb-white) !important;
  font-size: 13px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase;
  position: relative; transition: color var(--tb-transition-fast);
}
.header__menu-item > a::after, .header__inline-menu a::after {
  content: ''; position: absolute; bottom: -2px; left: 0;
  width: 0; height: 1px; background: var(--tb-gold);
  transition: width var(--tb-transition-normal);
}
.header__menu-item > a:hover, .header__inline-menu a:hover { color: var(--tb-gold-premium) !important; }
.header__menu-item > a:hover::after, .header__inline-menu a:hover::after { width: 100%; }
.header__icon svg, .header-actions__icon svg, .header__action-icon svg { color: var(--tb-white); transition: color var(--tb-transition-fast); }
.header__icon:hover svg, .header-actions__icon:hover svg, .header__action-icon:hover svg { color: var(--tb-gold-premium); }
.cart-count-bubble, .cart-bubble { background: var(--tb-gold) !important; color: var(--tb-black) !important; font-weight: 700; }
.header__submenu, .mega-menu, .mega-menu__wrapper { background-color: var(--tb-surface) !important; border: 1px solid var(--tb-border) !important; border-top: 2px solid var(--tb-gold) !important; }
.mega-menu a, .header__submenu a { color: var(--tb-text-muted) !important; transition: color var(--tb-transition-fast), padding-left var(--tb-transition-fast); }
.mega-menu a:hover, .header__submenu a:hover { color: var(--tb-gold-premium) !important; padding-left: 4px; }

/* ------------------------------------------------------------
   5. MOBILE DRAWER
   ------------------------------------------------------------ */
.header-drawer, details-drawer, .theme-drawer { background-color: var(--tb-surface) !important; border-right: 1px solid var(--tb-border) !important; }
.header-drawer a, details-drawer a { color: var(--tb-white) !important; border-bottom: 1px solid rgba(245,245,245,0.06); }
.header-drawer a:hover, details-drawer a:hover { color: var(--tb-gold-premium) !important; }

/* ------------------------------------------------------------
   6. BUTTONS
   ------------------------------------------------------------ */
.button, .btn, button[type="submit"], .product-form__submit { transition: all var(--tb-transition-normal) !important; }
.button--primary, .btn--primary, .product-form__submit {
  background-color: var(--tb-gold-premium) !important; color: var(--tb-black) !important;
  border: 1px solid var(--tb-gold-premium) !important; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase; font-size: 12px;
}
.button--primary:hover, .btn--primary:hover, .product-form__submit:hover {
  background-color: var(--tb-gold-light) !important; border-color: var(--tb-gold-light) !important;
  color: var(--tb-black) !important; transform: translateY(-1px);
  box-shadow: 0 8px 24px rgba(201, 162, 74, 0.25) !important;
}
.button--secondary, .btn--secondary {
  background-color: transparent !important; color: var(--tb-white) !important;
  border: 1px solid var(--tb-gold) !important; font-weight: 500;
  letter-spacing: 0.1em; text-transform: uppercase; font-size: 12px;
}
.button--secondary:hover, .btn--secondary:hover {
  background-color: rgba(201, 162, 74, 0.08) !important; color: var(--tb-gold-premium) !important;
  border-color: var(--tb-gold-premium) !important; transform: translateY(-1px);
}
.product-form__submit { border-radius: 2px !important; }

/* ------------------------------------------------------------
   7. PRODUCT CARDS
   ------------------------------------------------------------ */
.product-card, .card {
  background-color: var(--tb-card) !important; border: 1px solid var(--tb-border-subtle) !important;
  border-radius: 2px; overflow: hidden;
  transition: border-color var(--tb-transition-normal), transform var(--tb-transition-normal), box-shadow var(--tb-transition-normal) !important;
}
.product-card:hover, .card:hover {
  border-color: var(--tb-border) !important; transform: translateY(-3px);
  box-shadow: 0 16px 48px rgba(0,0,0,0.4), 0 0 0 1px rgba(201,162,74,0.12) !important;
}
.product-card .media img, .card .media img { transition: transform var(--tb-transition-slow) !important; }
.product-card:hover .media img, .card:hover .media img { transform: scale(1.04) !important; }
.product-card__info, .card__content, .card-information { padding: 14px 16px 16px !important; background-color: var(--tb-card) !important; }
.product-card__title, .card__heading, .card-information__text { color: var(--tb-white) !important; font-size: 14px; font-weight: 500; }
.product-card__vendor, .card__vendor { color: var(--tb-gold) !important; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; }
.price, .price__regular { color: var(--tb-white) !important; font-weight: 600; font-size: 15px; }
.price--on-sale .price__sale { color: var(--tb-gold-premium) !important; }
.price__compare { color: var(--tb-text-muted) !important; text-decoration: line-through; }
.badge { background-color: var(--tb-gold-premium) !important; color: var(--tb-black) !important; font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; border-radius: 1px; padding: 2px 6px; }
.badge--sold-out { background-color: var(--tb-charcoal) !important; color: var(--tb-text-muted) !important; border: 1px solid var(--tb-border) !important; }
.quick-add-button, .quick-add__trigger { background-color: var(--tb-gold-premium) !important; color: var(--tb-black) !important; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 600; transition: all var(--tb-transition-fast) !important; }
.quick-add-button:hover, .quick-add__trigger:hover { background-color: var(--tb-gold-light) !important; }

/* ------------------------------------------------------------
   8. COLLECTION CARDS
   ------------------------------------------------------------ */
.collection-card { position: relative; overflow: hidden; border-radius: 2px; border: 1px solid var(--tb-border-subtle) !important; transition: border-color var(--tb-transition-normal) !important; }
.collection-card:hover { border-color: var(--tb-border) !important; }
.collection-card::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(8,8,8,0.85) 0%, rgba(8,8,8,0.3) 60%, transparent 100%); transition: opacity var(--tb-transition-normal); }
.collection-card img, .collection-card .media img { transition: transform var(--tb-transition-slow) !important; }
.collection-card:hover img, .collection-card:hover .media img { transform: scale(1.06) !important; }
.collection-card__title, .collection-card h2, .collection-card h3 { color: var(--tb-white) !important; position: relative; z-index: 2; font-weight: 700; }
.collection-card__link-text { color: var(--tb-gold-premium) !important; font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 500; position: relative; z-index: 2; }

/* ------------------------------------------------------------
   9. SEARCH MODAL
   ------------------------------------------------------------ */
.search-modal, .predictive-search { background-color: var(--tb-surface) !important; border: 1px solid var(--tb-border) !important; }
.search-modal input, .predictive-search input[type="search"] { background-color: var(--tb-charcoal) !important; border-color: var(--tb-border) !important; color: var(--tb-white) !important; }
.search-modal input::placeholder, .predictive-search input::placeholder { color: var(--tb-text-muted) !important; }
.predictive-search__item:hover { background-color: rgba(201, 162, 74, 0.06) !important; }

/* ------------------------------------------------------------
   10. CART DRAWER
   ------------------------------------------------------------ */
.cart-drawer, .cart-drawer__inner { background-color: var(--tb-surface) !important; border-left: 1px solid var(--tb-border) !important; }
.cart-drawer__header { border-bottom: 1px solid var(--tb-border) !important; }
.cart-drawer__header h2, .cart-drawer__header h3 { color: var(--tb-white) !important; }
.cart-item__name, .cart-item__title { color: var(--tb-white) !important; font-weight: 500; }
.cart-item__price { color: var(--tb-gold-premium) !important; font-weight: 600; }
.cart-summary__checkout-btn, .cart__ctas .button--primary { background-color: var(--tb-gold-premium) !important; color: var(--tb-black) !important; width: 100%; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; border-color: var(--tb-gold-premium) !important; }
.cart-summary__checkout-btn:hover { background-color: var(--tb-gold-light) !important; }
.cart-drawer__footer { background-color: var(--tb-charcoal) !important; border-top: 1px solid var(--tb-border) !important; }

/* ------------------------------------------------------------
   11. PRODUCT PAGE
   ------------------------------------------------------------ */
.product-media-thumbnail { border: 1px solid var(--tb-border-subtle) !important; transition: border-color var(--tb-transition-fast) !important; }
.product-media-thumbnail:hover, .product-media-thumbnail--selected { border-color: var(--tb-gold) !important; }
.product__title, .product-information__title { color: var(--tb-white) !important; font-weight: 700; font-size: clamp(22px, 3vw, 36px); letter-spacing: -0.02em; }
.product__vendor, .product-information__vendor { color: var(--tb-gold) !important; letter-spacing: 0.12em; text-transform: uppercase; font-size: 11px; font-weight: 600; }
.variant-button, .swatch-button { background-color: var(--tb-charcoal) !important; color: var(--tb-white) !important; border: 1px solid var(--tb-border-subtle) !important; transition: all var(--tb-transition-fast) !important; }
.variant-button:hover, .swatch-button:hover { border-color: var(--tb-gold) !important; color: var(--tb-gold-premium) !important; }
.variant-button--selected, .swatch-button--selected { background-color: var(--tb-gold-premium) !important; color: var(--tb-black) !important; border-color: var(--tb-gold-premium) !important; font-weight: 700; }
.quantity-selector, .quantity__button { background-color: var(--tb-charcoal) !important; border-color: var(--tb-border) !important; color: var(--tb-white) !important; }
.quantity-selector input { background-color: transparent !important; color: var(--tb-white) !important; border-color: var(--tb-border) !important; }
details summary { color: var(--tb-white) !important; border-bottom: 1px solid var(--tb-border) !important; padding: 16px 0; transition: color var(--tb-transition-fast); }
details summary:hover { color: var(--tb-gold-premium) !important; }
details[open] summary { color: var(--tb-gold-premium) !important; }
details .content, details .accordion__content { color: var(--tb-text-muted) !important; padding: 12px 0 16px; line-height: 1.7; }

/* ------------------------------------------------------------
   12. COLLECTION FILTER PAGE
   ------------------------------------------------------------ */
.collection-header, .collection__header { background-color: var(--tb-surface) !important; border-bottom: 1px solid var(--tb-border) !important; padding: 40px 0; }
.collection-header h1, .collection__title { color: var(--tb-white) !important; font-weight: 800; }
.facets, .filter-panel { background-color: var(--tb-surface) !important; border: 1px solid var(--tb-border) !important; }
.facets__heading, .filter-group__heading { color: var(--tb-white) !important; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 600; }
.facets label, .filter-panel label { color: var(--tb-text-muted) !important; transition: color var(--tb-transition-fast); }
.facets label:hover, .filter-panel label:hover { color: var(--tb-gold-premium) !important; }
.active-facets__button { background-color: rgba(201, 162, 74, 0.1) !important; border: 1px solid var(--tb-gold) !important; color: var(--tb-gold-premium) !important; }

/* ------------------------------------------------------------
   13. FOOTER
   ------------------------------------------------------------ */
footer, .footer, .footer-group { background-color: var(--tb-surface) !important; border-top: 1px solid var(--tb-border) !important; }
.footer-section { background-color: var(--tb-surface) !important; }
.footer__heading, .footer-column__heading, .menu__heading__default { color: var(--tb-white) !important; font-size: 11px; letter-spacing: 0.15em; text-transform: uppercase; font-weight: 700; margin-bottom: 16px; }
.footer__menu-item a, .footer-column__link, .footer a { color: var(--tb-text-muted) !important; font-size: 13px; line-height: 2; transition: color var(--tb-transition-fast), padding-left var(--tb-transition-fast); }
.footer__menu-item a:hover, .footer-column__link:hover, .footer a:hover { color: var(--tb-gold-premium) !important; padding-left: 4px; }
.footer__copyright, .footer-utilities, .footer__bottom { background-color: var(--tb-black) !important; border-top: 1px solid var(--tb-border) !important; color: var(--tb-text-muted) !important; font-size: 11px; }
.newsletter-form input[type="email"], .footer-email-signup input { background-color: var(--tb-charcoal) !important; border: 1px solid var(--tb-border) !important; color: var(--tb-white) !important; border-radius: 1px !important; }
.newsletter-form input::placeholder { color: var(--tb-text-muted) !important; }
.newsletter-form .button, .footer-email-signup button { background-color: var(--tb-gold-premium) !important; color: var(--tb-black) !important; border-color: var(--tb-gold-premium) !important; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }
.newsletter-form .button:hover { background-color: var(--tb-gold-light) !important; }

/* ------------------------------------------------------------
   14. GLOBAL INPUTS
   ------------------------------------------------------------ */
input, textarea, select { background-color: var(--tb-charcoal) !important; border-color: var(--tb-border) !important; color: var(--tb-white) !important; border-radius: 2px !important; transition: border-color var(--tb-transition-fast) !important; }
input:focus, textarea:focus, select:focus { border-color: var(--tb-gold) !important; outline: none !important; box-shadow: 0 0 0 2px rgba(201,162,74,0.12) !important; }
input::placeholder, textarea::placeholder { color: var(--tb-text-muted) !important; }
label { color: var(--tb-text-muted) !important; font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; }

/* ------------------------------------------------------------
   15. PAGINATION
   ------------------------------------------------------------ */
.pagination .page-link, .pagination a, .pagination button { background-color: var(--tb-charcoal) !important; border: 1px solid var(--tb-border) !important; color: var(--tb-text-muted) !important; transition: all var(--tb-transition-fast) !important; }
.pagination .page-link:hover, .pagination a:hover { border-color: var(--tb-gold) !important; color: var(--tb-gold-premium) !important; }
.pagination .active, .pagination [aria-current="page"] { background-color: var(--tb-gold-premium) !important; border-color: var(--tb-gold-premium) !important; color: var(--tb-black) !important; }

/* ------------------------------------------------------------
   16. DIVIDERS
   ------------------------------------------------------------ */
.divider, hr { border-color: var(--tb-border) !important; }
.tb-gold-rule { width: 100%; height: 1px; background: linear-gradient(90deg, transparent, var(--tb-gold), transparent); margin: 0; }

/* ------------------------------------------------------------
   17. SCROLL ANIMATIONS
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: no-preference) {
  .tb-fade-up { opacity: 0; transform: translateY(24px); transition: opacity var(--tb-transition-slow), transform var(--tb-transition-slow); }
  .tb-fade-up.tb-visible { opacity: 1; transform: translateY(0); }
  .tb-stagger > * { opacity: 0; transform: translateY(20px); transition: opacity 0.5s ease, transform 0.5s ease; }
  .tb-stagger.tb-visible > *:nth-child(1) { transition-delay: 0ms; }
  .tb-stagger.tb-visible > *:nth-child(2) { transition-delay: 80ms; }
  .tb-stagger.tb-visible > *:nth-child(3) { transition-delay: 160ms; }
  .tb-stagger.tb-visible > *:nth-child(4) { transition-delay: 240ms; }
  .tb-stagger.tb-visible > *:nth-child(5) { transition-delay: 320ms; }
  .tb-stagger.tb-visible > *:nth-child(6) { transition-delay: 400ms; }
  .tb-stagger.tb-visible > *:nth-child(7) { transition-delay: 480ms; }
  .tb-stagger.tb-visible > *:nth-child(8) { transition-delay: 560ms; }
  .tb-stagger.tb-visible > * { opacity: 1; transform: translateY(0); }
}

/* ------------------------------------------------------------
   18. RESPONSIVE
   ------------------------------------------------------------ */
@media (max-width: 749px) {
  .header__icon, .header-actions__icon { min-width: 44px; min-height: 44px; display: flex; align-items: center; justify-content: center; }
  .product-grid, .collection-product-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 12px !important; }
  .product-form__submit { width: 100% !important; }
}

/* ------------------------------------------------------------
   19. UTILITIES
   ------------------------------------------------------------ */
.tb-gold-text { color: var(--tb-gold-premium) !important; }
.tb-muted-text { color: var(--tb-text-muted) !important; }
.tb-white-text { color: var(--tb-white) !important; }
.tb-surface-bg { background-color: var(--tb-surface) !important; }
.tb-card-bg { background-color: var(--tb-card) !important; }
.tb-border-bottom { border-bottom: 1px solid var(--tb-border); }
.tb-border-top { border-top: 1px solid var(--tb-border); }
.tb-eyebrow { color: var(--tb-gold) !important; font-size: 11px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; }
.skip-to-content-link { background-color: var(--tb-gold-premium) !important; color: var(--tb-black) !important; font-weight: 700; }

/* -- Additional overrides for section media backgrounds -- */
.hero__media-wrapper,
.hero__media,
.media-with-content__media,
.section--hero .media,
.carousel .media,
.product-card .media,
.product-card .media--placeholder,
.collection-card .media,
.card .media,
.featured-product .media {
  background-color: var(--tb-card) !important;
}

/* Ritual section backgrounds � override white backgrounds */
.section-background,
.shopify-section > .section,
.shopify-section > div:first-child:not(.tb-promo-section):not(.tb-editorial-section):not(.tb-features) {
  background-color: transparent !important;
}

/* Image placeholders dark */
.placeholder-svg,
svg.placeholder-svg {
  background-color: var(--tb-card);
  fill: var(--tb-charcoal);
}

/* Page background override */
.page-wrapper {
  background-color: var(--tb-black) !important;
}

/* Section specific backgrounds */
[data-section-type="product-list"],
[data-section-type="collection-list"],
[data-section-type="featured-blog-posts"] {
  background-color: var(--tb-surface) !important;
}

/* Featured product section dark override */
.featured-product-section {
  background-color: var(--tb-surface) !important;
}

/* -- TECH BUZZ Logo Asset Sizing --------------------------- */
.tb-asset-logo {
  height: 40px;
  width: auto;
  max-width: 180px;
  object-fit: contain;
  display: block;
}
@media (max-width: 749px) {
  .tb-asset-logo { height: 32px; max-width: 140px; }
}

/* -- Header: Force dark background on ALL pages ------------- */
/* Override Ritual's inline CSS variable --color-background that gets
   set per-section and can bleed into the header */
#header-component,
header-component,
.header,
.header--scrolled,
.shopify-section-group-header-group,
.shopify-section-group-header-group .header,
[data-section-id] .header {
  background-color: rgba(8, 8, 8, 0.96) !important;
  --color-background: 8, 8, 8 !important;
  color: #F5F5F5 !important;
}

/* Header inner top row (Ritual splits header into rows) */
.header__top-row,
.header__row,
.header--top {
  background-color: transparent !important;
}

/* Ritual color palette override on header � stop color1 from bleeding */
.shopify-section-group-header-group {
  --color-1: #D4AF63;
  --color-2: #1B1B1B;
  --color-background: 8, 8, 8;
  --color-foreground: 245, 245, 245;
  background-color: #080808 !important;
}

/* Ensure all text in header is white not gold */
.header a,
.header span,
.header button,
.header__action-item,
.header-actions__action {
  color: #F5F5F5 !important;
}
.header a:hover,
.header button:hover {
  color: #D4AF63 !important;
}

/* -- Fix: Collection / Product page featured sections ------- */
/* Some Ritual sections render with background-color from color-scheme
   which may pick up gold from color1 */
.color-scheme-1,
[data-color-scheme="1"] {
  --color-background: 8, 8, 8 !important;
  background-color: rgb(8, 8, 8) !important;
  color: #F5F5F5 !important;
}
.color-scheme-2,
[data-color-scheme="2"] {
  --color-background: 17, 17, 17 !important;
  background-color: rgb(17, 17, 17) !important;
}

/* -- Fix: Page container white flash ----------------------- */
.page-wrapper { background-color: #080808 !important; }
main, #MainContent, .main-content { background-color: #080808 !important; }

/* -- Fix: Gold color leaking into non-accent text ---------- */
/* Only gold on explicit accent elements */
.price, .price__sale, .price--sale { color: #F5F5F5 !important; }
.price ins, .price del { color: #A8A8A8 !important; }
/* Sale price in gold */
.price--sale .price__sale { color: var(--tb-gold-premium) !important; }

/* -- Product page: variant selectors ----------------------- */
.variant-button,
.swatch-button {
  border-color: rgba(245, 245, 245, 0.15) !important;
  background: #151515 !important;
  color: #F5F5F5 !important;
}
.variant-button[aria-checked="true"],
.swatch-button[aria-pressed="true"],
.variant-button.active,
.swatch-button.selected {
  border-color: #D4AF63 !important;
  color: #D4AF63 !important;
  background: rgba(212, 175, 99, 0.08) !important;
}

/* -- Fix: Media / image placeholder areas ------------------- */
.media,
.media--placeholder,
.placeholder-svg-wrapper,
.product__media,
.card__media {
  background-color: #151515 !important;
}

/* -- Fix: Quantity selector -------------------------------- */
.quantity,
quantity-input,
.quantity__input {
  background-color: #151515 !important;
  border-color: rgba(245, 245, 245, 0.12) !important;
  color: #F5F5F5 !important;
}
.quantity__button {
  color: #F5F5F5 !important;
}
.quantity__button:hover {
  color: #D4AF63 !important;
}

/* -- Fix: Section color scheme overrides ------------------- */
/* Ritual uses CSS rgb variables like rgb(var(--color-background)) */
.section,
[class*="section--"],
.shopify-section > div:not([class*="tb-"]) {
  --color-background: 8, 8, 8;
  --color-foreground: 245, 245, 245;
}

/* -- Collection listing page filter panel ----------------- */
.facets-wrapper,
.facets__summary,
.facets__form {
  background-color: #111111 !important;
  border-color: var(--tb-border) !important;
  color: #F5F5F5 !important;
}
.facets__header { border-color: var(--tb-border) !important; }
.facets__disclosure-vertical {
  border-color: var(--tb-border) !important;
}

/* -- Breadcrumbs ------------------------------------------- */
.breadcrumbs,
.breadcrumb,
nav[aria-label="breadcrumb"] {
  color: #A8A8A8 !important;
}
.breadcrumbs a:hover { color: #D4AF63 !important; }

/* ------------------------------------------------------------
   6. STITCH DESIGN SYSTEM TOKENS & TYPOGRAPHY
   ------------------------------------------------------------ */
@import url('https://fonts.googleapis.com/css2?family=Geist:wght@400;600&family=Hanken+Grotesk:wght@500;600;700&family=Inter:wght@400;500&display=swap');

:root {
  /* Colors from Stitch Design System */
  --stitch-surface-container: #201f1f;
  --stitch-on-surface: #e5e2e1;
  --stitch-primary: #ebc165;
  --stitch-surface-bright: #3a3939;
  --stitch-background: #131313;
  --stitch-tertiary-container: #a9a7a7;
  --stitch-surface-container-lowest: #0e0e0e;
  --stitch-inverse-on-surface: #313030;
  --stitch-outline: #9a8f7e;
  --stitch-surface-tint: #ebc165;
  --stitch-secondary-container: #5f4500;
  --stitch-surface-container-highest: #353534;
  --stitch-surface-container-high: #2a2a2a;
  --stitch-secondary: #e8c173;
  --stitch-on-background: #e5e2e1;
  --stitch-surface-container-low: #1c1b1b;
  --stitch-tertiary: #c8c6c5;
  --stitch-surface: #131313;
  --stitch-surface-variant: #353534;
  --stitch-tertiary-fixed: #e5e2e1;
  --stitch-inverse-surface: #e5e2e1;
  --stitch-primary-fixed: #ffdf9e;
  --stitch-primary-container: #c9a24a;
  --stitch-surface-dim: #131313;
  --stitch-outline-variant: #4e4637;
  
  /* Typography Variables */
  --font-hanken: 'Hanken Grotesk', sans-serif;
  --font-inter: 'Inter', sans-serif;
  --font-geist: 'Geist', monospace;
}

/* Typography Classes */
.stitch-display-lg { font-family: var(--font-hanken); font-size: 64px; font-weight: 700; line-height: 1.1; letter-spacing: -0.02em; }
.stitch-headline-lg { font-family: var(--font-hanken); font-size: 40px; font-weight: 600; line-height: 1.2; letter-spacing: -0.01em; }
.stitch-headline-md { font-family: var(--font-hanken); font-size: 24px; font-weight: 500; line-height: 1.3; }
.stitch-body-lg { font-family: var(--font-inter); font-size: 18px; font-weight: 400; line-height: 28px; }
.stitch-body-md { font-family: var(--font-inter); font-size: 16px; font-weight: 400; line-height: 24px; }
.stitch-label-caps { font-family: var(--font-geist); font-size: 11px; font-weight: 600; line-height: 16px; letter-spacing: 0.08em; text-transform: uppercase; }
.stitch-nav { font-family: var(--font-inter); font-size: 14px; font-weight: 500; line-height: 20px; letter-spacing: 0.05em; }
.stitch-product-info { font-family: var(--font-geist); font-size: 13px; font-weight: 400; line-height: 18px; letter-spacing: 0.01em; }

@media (max-width: 749px) {
  .stitch-display-lg { font-size: 48px; }
  .stitch-headline-lg { font-size: 32px; }
}

/* Base Styles */
.stitch-bg { background-color: var(--stitch-background); color: var(--stitch-on-background); }
.stitch-card { background-color: #151515; border: 1px solid rgba(201, 162, 74, 0.20); transition: all 0.3s ease; }
.stitch-card:hover { border-color: rgba(201, 162, 74, 0.50); background-color: #1a1a1a; }

/* ------------------------------------------------------------
   7. STITCH CART DRAWER
   ------------------------------------------------------------ */

/* Cart Drawer Background */
.theme-drawer__dialog {
  background-color: var(--stitch-surface-container-lowest) !important;
  border-left: 1px solid rgba(201, 162, 74, 0.20);
}

/* Cart Header */
.theme-drawer__header {
  border-bottom: 1px solid var(--stitch-surface-container-high);
}
.theme-drawer__title {
  font-family: var(--font-hanken) !important;
  color: var(--stitch-on-surface) !important;
}

/* Cart Items */
.cart-drawer__content {
  background-color: transparent !important;
}
.cart-items__table-row {
  border-bottom-color: var(--stitch-surface-container-high) !important;
}

/* Checkout Button */
.cart__checkout-button {
  background-color: var(--stitch-primary-container) !important;
  color: #080808 !important;
  font-family: var(--font-inter) !important;
  font-weight: 700 !important;
  border-radius: 0.25rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  transition: background-color 0.3s ease !important;
  border: none !important;
}
.cart__checkout-button:hover {
  background-color: #D4AF63 !important;
}

/* Cart Summary Area */
.cart-drawer__summary {
  background-color: var(--stitch-surface-container-lowest) !important;
  border-top: 1px solid var(--stitch-surface-container-high) !important;
}

/* Mobile Overflow Fix */
html, body { overflow-x: hidden !important;  }
.page-wrapper { overflow-x: hidden !important; }