/* ELEV808 chrome layer for the Shopify store (shop.elev808designs.com).
   Loaded last by the theme's layout/theme.liquid, after the Sleek + ghost-mode styles, so the store matches
   elev808designs.com: black and liquid chrome, Michroma display type, Geist body, Geist Mono labels, no neon yellow.
   Fonts come from Google Fonts (linked next to this file in theme.liquid). Edit here, then deploy the Netlify site. */

:root {
  --x-bg: #030304;
  --x-bg-2: #08080a;
  --x-surface: #0b0b0d;
  --x-line: rgba(255, 255, 255, .09);
  --x-line-2: rgba(255, 255, 255, .18);
  --x-text: #e7e8eb;
  --x-muted: #8d9097;
  --x-ink: #030304;
  --x-chrome: linear-gradient(180deg, #ffffff 0%, #f1f4f7 16%, #c4cad3 38%, #7d8692 49%, #4b535d 50.5%, #a7afb9 53%, #e9edf1 72%, #ffffff 86%, #b9c0c9 100%);
  --x-chrome-flat: linear-gradient(100deg, #aab2bc 0%, #eef1f4 16%, #c9cfd6 32%, #ffffff 48%, #d4d9df 60%, #f5f7f9 78%, #a3abb5 100%);
  --x-plate: linear-gradient(160deg, #eef0f3 0%, #d9dde2 55%, #c5cad1 100%);
  --x-display: 'Michroma', 'Geist', system-ui, sans-serif;
  --x-ui: 'Geist', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --x-mono: 'Geist Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --x-c: 9px;
  --x-chamfer: polygon(var(--x-c) 0, 100% 0, 100% calc(100% - var(--x-c)), calc(100% - var(--x-c)) 100%, 0 100%, 0 var(--x-c));
  --x-ease: cubic-bezier(.2, .7, 0, 1);

  /* ghost-mode tokens */
  --gm-bg: var(--x-bg);
  --gm-fg: var(--x-text);
  --gm-dim: var(--x-muted);
  --gm-line: var(--x-line);
  --gm-accent: #ffffff;
  --gm-mono: var(--x-mono);
  --gm-display: var(--x-display);

  /* Sleek type tokens */
  --font-body-family: var(--x-ui) !important;
  --font-heading-family: var(--x-display) !important;
  --font-heading-weight: 400 !important;
  --font-heading-letter-spacing: .02em !important;
  --font-heading-scale: .82 !important;
  --font-heading-mobile-scale: .7 !important;
  --font-subheading-family: var(--x-mono) !important;
  --font-navigation-family: var(--x-mono) !important;
  --font-button-family: var(--x-mono) !important;
  --font-button-weight: 500 !important;
  --buttons-letter-spacing: .14em !important;
  --buttons-transform: uppercase !important;
  --buttons-height: 4.8rem !important;
}

/* Sleek colour schemes: yellow highlights become white light on chrome */
:root, .color-scheme-1, .color-scheme-inverse, body .desktop-color-scheme-1 {
  --color-background: 3, 3, 4 !important;
  --color-secondary-background: 11, 11, 13 !important;
  --color-primary: 231, 232, 235 !important;
  --color-text-heading: 231, 232, 235 !important;
  --color-foreground: 231, 232, 235 !important;
  --color-border: 30, 31, 34 !important;
  --color-button-hover-background: 255, 255, 255 !important;
  --color-button-before: #ffffff !important;
  --color-field: 11, 11, 13 !important;
  --color-field-text: 231, 232, 235 !important;
  --color-link: 231, 232, 235 !important;
  --color-link-hover: 255, 255, 255 !important;
  --color-foreground-lighten-60: #8d9097 !important;
  --color-foreground-lighten-19: #2a2b2f !important;
}
.color-scheme-7 { --color-button: 231, 232, 235 !important; }

html, body, body.ghost-mode, body.ghost-mode .site-wrapper { background-color: var(--x-bg) !important; }
body {
  font-family: var(--x-ui) !important;
  color: var(--x-text);
  -webkit-font-smoothing: antialiased;
  background-image: radial-gradient(110% 55% at 50% -12%, rgba(214, 226, 245, .07), transparent 62%) !important;
  background-attachment: fixed !important;
}
::selection { background: #e7e8eb !important; color: var(--x-ink) !important; }
body.ghost-mode ::selection { background: #e7e8eb !important; color: var(--x-ink) !important; }
:focus-visible { outline-color: #fff; }

/* ---------- type ---------- */
h1, h2, h3, h4, .h1, .h2, .h3, .h4, .hd1, .hd2, .hd3, .product__title {
  font-family: var(--x-display) !important;
  font-weight: 400 !important;
  letter-spacing: .02em !important;
  text-transform: uppercase;
}
h5, h6, .h5, .h6 { font-family: var(--x-mono) !important; font-weight: 500 !important; letter-spacing: .14em !important; text-transform: uppercase; }

/* big headlines in polished chrome */
.product__title h1, h1.product__title, .gm-statement__word, .gm-statement__sub, .gm-soon__title, .cart__title, main .hd1, main .hd2,
.related-products h2, .product-recommendations h2, .main-collection h1, .collection-hero__title, .main-search h1 {
  color: transparent !important;
  -webkit-text-fill-color: transparent;
  background-image: var(--x-chrome);
  background-size: 100% 1lh; /* one chrome band per line, so wrapped headlines stay even */
  background-repeat: repeat-y;
  -webkit-background-clip: text;
  background-clip: text;
}
/* hero titles sit on artwork: solid bright silver reads better than chrome there */
.gm-hero__title { font: 400 clamp(30px, 5vw, 76px)/1 var(--x-display) !important; letter-spacing: .02em !important; color: #f4f6f8 !important; }
.gm-statement__word { font: 400 clamp(40px, 10vw, 180px)/.95 var(--x-display) !important; letter-spacing: 0 !important; }
.gm-statement__sub { font: 400 clamp(14px, 1.8vw, 26px)/1.1 var(--x-display) !important; letter-spacing: .04em !important; }
.gm-soon__title { font: 400 clamp(32px, 7vw, 120px)/.95 var(--x-display) !important; letter-spacing: 0 !important; }
.gm-hero__kicker, .gm-hero__meta { font: 500 11px/1.4 var(--x-mono) !important; letter-spacing: .16em !important; }
.gm-hero__text, .gm-statement__body, .gm-soon__text, .gm-soon__kicker { font-family: var(--x-mono) !important; font-weight: 400 !important; letter-spacing: .14em !important; }
.product__title h1, h1.product__title { font-size: clamp(20px, 2.1vw, 30px) !important; line-height: 1.15 !important; }
.rte, .rte p, .product__description { font-family: var(--x-ui) !important; }

/* ---------- ticker (the old yellow bar) ---------- */
.custom-header { background: #000 !important; border-bottom: 1px solid var(--x-line); padding: 8px 0 !important; }
.custom-header .header-title {
  font: 500 11px/1.4 var(--x-mono) !important; letter-spacing: .2em !important; text-transform: uppercase;
  color: transparent !important; -webkit-text-fill-color: transparent;
  background: var(--x-chrome-flat) 0 0 / 220% 100%; -webkit-background-clip: text; background-clip: text;
  animation: x-sheen 6s linear infinite;
}
.custom-header .social-icons a { color: var(--x-muted) !important; transition: color .2s, transform .2s ease; }
.custom-header .social-icons a:hover { color: #fff !important; }
@keyframes x-sheen { to { background-position: 220% 0; } }

/* ---------- header ---------- */
.header-section, .header-section .header, header.header {
  background: rgba(3, 3, 4, .82) !important;
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  backdrop-filter: blur(14px) saturate(1.2);
  border-bottom-color: var(--x-line) !important;
}
body.ghost-mode .section-header, body.ghost-mode .header-section { border-bottom: 1px solid var(--x-line) !important; }
html body header summary .menu__item, html body header summary .reversed-link.font-navigation, html body .header__menu a, .header__menu .reversed-link, .dropdown__nav a {
  font-family: var(--x-mono) !important; font-size: 11px !important; font-weight: 500 !important;
  letter-spacing: .16em !important; text-transform: uppercase; color: #b9bdc4 !important; transition: color .2s;
}
html body header summary:hover .reversed-link, .header__menu a:hover, .dropdown__nav a:hover { color: #fff !important; }
.dropdown__container { background: rgba(8, 8, 10, .96) !important; border: 1px solid var(--x-line) !important; -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.header__icons svg, .header__buttons svg { color: #d4d9df; }
.cart-count { background: var(--x-chrome-flat) !important; color: var(--x-ink) !important; font: 600 9px/1 var(--x-mono) !important; }

/* chrome logo: the store's own logo file becomes a mask over the chrome gradient, sized like elev808designs.com */
.header-section { --logo-width: 118px !important; --logo-width-mobile: 104px !important; }
.header__logo--image { position: relative; }
.header__logo--image img { opacity: 0 !important; }
.header__logo--image::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: var(--x-chrome);
  -webkit-mask: url('https://shop.elev808designs.com/cdn/shop/files/808_White_Logo.svg?v=1740701251') center / contain no-repeat;
  mask: url('https://shop.elev808designs.com/cdn/shop/files/808_White_Logo.svg?v=1740701251') center / contain no-repeat;
  filter: drop-shadow(0 0 10px rgba(214, 226, 245, .25));
}

/* ---------- buttons ---------- */
.btn--primary, .product-form__submit, .btn--neon, .menu-drawer--dark .btn--primary, .quick-view .product-form__submit,
.sticky-atc-bar .product-form__submit, .newsletter-form__button, button[name="checkout"], .cart__checkout-button, .drawer__footer-buttons .btn {
  position: relative;
  background: var(--x-chrome-flat) 0 0 / 220% 100% !important;
  color: var(--x-ink) !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), inset 0 -1px 0 rgba(0, 0, 0, .28) !important;
  clip-path: var(--x-chamfer);
  font: 500 11.5px/1 var(--x-mono) !important;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;
  transition: background-position .7s var(--x-ease), transform .1s !important;
}
.btn--primary:hover, .product-form__submit:hover, .btn--neon:hover, .newsletter-form__button:hover, button[name="checkout"]:hover, .drawer__footer-buttons .btn:hover {
  background-position: 100% 0 !important; color: var(--x-ink) !important;
}
.btn--primary:active, .product-form__submit:active { transform: scale(.985); }
.btn--primary::before, .btn--primary::after, .product-form__submit::before, .product-form__submit::after,
.newsletter-form__button::before, .newsletter-form__button::after, .drawer__footer-buttons .btn::before, .drawer__footer-buttons .btn::after { display: none !important; }
.product-form__submit span, .btn--primary span { color: var(--x-ink) !important; }
.product-form__submit[disabled], .product-form__submit[aria-disabled="true"] { background: #1a1b1f !important; color: #5a5d63 !important; box-shadow: none !important; }
.product-form__submit[disabled] span { color: #5a5d63 !important; }

.btn--secondary:not(.product-form__submit), .gm-btn {
  background: rgba(255, 255, 255, .05) !important; color: var(--x-text) !important;
  border: 1px solid var(--x-line-2) !important; border-radius: 0 !important;
  font: 500 11px/1 var(--x-mono) !important; letter-spacing: .14em !important; text-transform: uppercase !important;
}
.gm-btn:hover, .gm-btn:focus-visible { background: var(--x-chrome-flat) !important; color: var(--x-ink) !important; border-color: transparent !important; }
.gm-link:hover, .gm-card__link:hover .gm-card__title { color: #fff !important; }
.shopify-payment-button__more-options { font-family: var(--x-mono) !important; letter-spacing: .1em; color: var(--x-muted) !important; }

/* ---------- product page ---------- */
.section--breadcrumb, .breadcrumbs { background: var(--x-bg-2) !important; }
.section--breadcrumb { border-bottom: 1px solid var(--x-line); }
.breadcrumbs, .breadcrumbs a, .breadcrumbs span { font: 500 11px/1.4 var(--x-mono) !important; letter-spacing: .12em !important; text-transform: uppercase; color: var(--x-muted) !important; }
.breadcrumbs a:hover { color: #fff !important; }
.f-price-item { font-family: var(--x-mono) !important; font-weight: 500 !important; letter-spacing: .04em; }
.f-price--large .f-price-item { font: 400 clamp(18px, 1.6vw, 24px)/1.2 var(--x-display) !important; letter-spacing: .02em !important; }
.form__label, .product-form__input legend { font: 500 11px/1.4 var(--x-mono) !important; letter-spacing: .14em !important; text-transform: uppercase; color: var(--x-muted); }
.form__label .font-body-bold { color: var(--x-text); font-weight: 500 !important; }
.product-form__input--button input[type=radio] + label {
  border: 1px solid var(--x-line-2) !important; background: transparent !important; color: var(--x-text) !important;
  font: 500 11px/1 var(--x-mono) !important; letter-spacing: .1em; min-width: 46px !important; min-height: 40px !important;
  text-decoration: none !important; transition: background .2s, border-color .2s, color .2s;
}
.product-form__input--button input[type=radio] + label:hover { border-color: #fff !important; background: rgba(255, 255, 255, .06) !important; color: #fff !important; }
.product-form__input--button input[type=radio]:checked + label {
  background: var(--x-chrome-flat) !important; color: var(--x-ink) !important; border-color: transparent !important;
  box-shadow: 0 0 16px rgba(214, 226, 245, .35) !important;
}
.product-form__input--button input[type=radio]:disabled + label, .product-form__input--button input[type=radio].disabled + label { color: #3a3c41 !important; border-color: #1e1f22 !important; }
.quantity, .quantity__input, .quantity__button { border-color: var(--x-line-2) !important; background: transparent !important; color: var(--x-text) !important; font-family: var(--x-mono) !important; border-radius: 0 !important; }
/* quick view (search / collection cart icon): the old theme forces a white quantity box and #121212 panels */
body .quick-view .product-form__input .quantity, body .quick-view quantity-input.quantity, body .quick-view .quantity__button, body .quick-view .quantity__input {
  background-color: transparent !important; color: var(--x-text) !important;
}
body .quick-view quantity-input.quantity { border: 1px solid var(--x-line-2) !important; }
body .quick-view .drawer__inner, body .quick-view__content, body .quick-view .drawer__footer, body .quick-view .product__view-details.btn.btn--with-icon { background-color: var(--x-bg-2) !important; }
.accordion-details__summary, .accordion-details summary { font-family: var(--x-display) !important; letter-spacing: .04em !important; border-color: var(--x-line) !important; }
.product__block--collapsible_tab, .accordion-details { border-color: var(--x-line) !important; }
.product__media img, .product__media-item img, .media img { background: transparent; }
.product__media-item, .product__media, .product-media-modal__content { background: var(--x-bg); }

/* ---------- product grids ---------- */
body.ghost-mode .products-list.f-grid, .gm-grid { border-color: var(--x-line) !important; }
.gm-grid__head { background: var(--x-bg-2); border-bottom-color: var(--x-line) !important; }
.gm-grid__heading {
  font: 400 13px/1.2 var(--x-display) !important; letter-spacing: .08em !important;
  color: transparent !important; -webkit-text-fill-color: transparent; background: var(--x-chrome); -webkit-background-clip: text; background-clip: text;
}
.gm-card, body.ghost-mode .products-list > .f-column { border-color: var(--x-line) !important; }
.gm-card__link { padding: 12px !important; transition: background .3s; }
.gm-card__link:hover { background: rgba(255, 255, 255, .03); }
.gm-card__media, .product-card__image-wrapper .media-wrapper {
  background: var(--x-plate) !important;
  clip-path: var(--x-chamfer);
}
.gm-card__img:not(.gm-card__img--alt), .product-card__image--main img { mix-blend-mode: multiply; }
.gm-card__info, .gm-card__title, .gm-card__price, body.ghost-mode .product-card__title, body.ghost-mode .product-card .price, .text-pcard-title, .product-card .f-price-item {
  font: 500 11px/1.35 var(--x-mono) !important; letter-spacing: .1em !important; text-transform: uppercase;
}
.gm-card__price, body.ghost-mode .product-card .price { color: var(--x-text) !important; }
.gm-card--soldout .gm-card__title, .gm-card--soldout .gm-card__price { color: #5a5d63 !important; }
.badge, .product-card__badge { background: var(--x-chrome-flat) !important; color: var(--x-ink) !important; font: 600 10px/1 var(--x-mono) !important; letter-spacing: .12em; border-radius: 0 !important; }

/* ---------- hero / statement / coming soon ---------- */
.gm-hero, .gm-statement, .gm-soon { border-bottom-color: var(--x-line) !important; }
.gm-statement, .gm-soon { background: radial-gradient(70% 120% at 50% 0%, rgba(214, 226, 245, .07), transparent 60%), var(--x-bg) !important; }
.gm-statement__logo { filter: drop-shadow(0 0 18px rgba(214, 226, 245, .25)); }

/* ---------- forms ---------- */
input.form-control, .field__input, .search__input, select, textarea, .newsletter-form input[type=email] {
  background: var(--x-surface) !important; color: var(--x-text) !important; border: 1px solid var(--x-line-2) !important;
  border-radius: 0 !important; font-family: var(--x-ui) !important;
}
input.form-control:focus, .search__input:focus, .newsletter-form input[type=email]:focus { border-color: #fff !important; outline: none; }
::placeholder { color: #5a5d63 !important; }
body.ghost-mode .disclosure__toggle { font-family: var(--x-mono) !important; border-color: var(--x-line-2) !important; }
body.ghost-mode .disclosure-list { background: var(--x-bg-2) !important; border-color: var(--x-line) !important; }
body.ghost-mode .disclosure-list__option { font-family: var(--x-mono) !important; }

/* ---------- drawers (cart, menu, search) ---------- */
/* only the sliding panel: the .drawer/.modal wrappers are transparent full-size layers (share, ask-a-question) */
.drawer__inner { background-color: var(--x-bg-2) !important; }
.drawer__header, .drawer__footer, .cart-drawer__footer, .menu-drawer__item { border-color: var(--x-line) !important; }
.drawer__heading { font-family: var(--x-display) !important; letter-spacing: .04em !important; }
.menu-drawer__item-link, .menu-drawer a { font-family: var(--x-mono) !important; letter-spacing: .14em !important; text-transform: uppercase; }

/* ---------- footer ---------- */
.footer, .footer__wrapper, .footer__top, .footer__bottom, .shopify-section-group-footer-group { background-color: var(--x-bg) !important; border-color: var(--x-line) !important; }
.footer { border-top: 1px solid var(--x-line); }
.footer-block__heading {
  font: 400 13px/1.3 var(--x-display) !important; letter-spacing: .06em !important; text-transform: uppercase;
  color: transparent !important; -webkit-text-fill-color: transparent; background: var(--x-chrome); -webkit-background-clip: text; background-clip: text;
}
.footer a, .footer p, .footer li, .footer .rte { font-family: var(--x-ui) !important; color: var(--x-muted) !important; letter-spacing: .01em; }
.footer a:hover { color: #fff !important; }
.footer__copyright, .footer__copyright-content { font: 500 10.5px/1.5 var(--x-mono) !important; letter-spacing: .14em !important; text-transform: uppercase; color: #5a5d63 !important; }

/* page-load curtain: black with a chrome scan line instead of a white flash */
page-transition.loading-bar { background-color: var(--x-bg) !important; }
page-transition.loading-bar::after {
  content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 1px;
  background: var(--x-chrome-flat) 0 0 / 220% 100%; opacity: .55; animation: x-sheen 1.6s linear infinite;
}

@media (max-width: 749px) {
  .gm-hero__meta { font-size: 9px !important; letter-spacing: .08em !important; gap: 12px; }
}

/* ---------- misc ---------- */
.cart__title, .cart-item__name { font-family: var(--x-display) !important; }
.cart-item__name { font-size: 13px !important; letter-spacing: .03em !important; }
hr, .separator { border-color: var(--x-line) !important; }
* { scrollbar-color: #2a2b2f transparent; }
@media (prefers-reduced-motion: reduce) { .custom-header .header-title { animation: none; } }