/** Shopify CDN: Minification failed

Line 1568:0 Unexpected "{"
Line 1568:1 Expected identifier but found "%"
Line 1569:10 Unexpected "/"
Line 1570:30 Unterminated string token
Line 1573:1 Expected identifier but found "%"
Line 1575:0 Unexpected "<"
Line 1577:3 Expected identifier but found "%"
Line 1577:38 Expected identifier but found "%"
Line 1578:2 Unexpected "<"
Line 1586:3 Expected identifier but found "%"
... and 18 more hidden warnings

**/
/* ============================================
   SLAB'DUSA — THEME.CSS
   Design system foundation
   All custom properties defined here.
   Every other CSS file inherits from this.
============================================ */

/* --- Google Fonts --- */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap');

/* --- Design Tokens --- */
:root {
  /* Colors */
  --color-bg:          #0D0D0D;
  --color-bg-surface:  #1A1A1A;
  --color-bg-dark:     #000000;
  --color-text:        #F5F3EE;
  --color-text-muted:  #8A8880;
  --color-text-light:  #F5F3EE;
  --color-accent:      #C9A84C;
  --color-accent-dark: #A8872E;
  --color-border:      #2A2A2A;

  /* Typography */
  --font-display: 'Songster', serif;
  --font-body:    'Inter', sans-serif;

  /* Font sizes */
  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-lg:   1.125rem;
  --text-xl:   1.25rem;
  --text-2xl:  1.5rem;
  --text-3xl:  2rem;
  --text-4xl:  2.75rem;
  --text-5xl:  3.75rem;

  /* Spacing */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-24: 6rem;

  /* Layout */
  --max-width:        1400px;
  --max-width-text:   720px;
  --border-radius:    4px;
  --border-radius-lg: 8px;

  /* Transitions */
  --transition: 200ms ease;
}

/* --- Reset --- */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--color-text);
  background-color: var(--color-bg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, video {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  cursor: pointer;
  border: none;
  background: none;
  font-family: inherit;
}

ul, ol {
  list-style: none;
}

/* --- Typography --- */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.15;
  color: var(--color-text);
}

h1 { font-size: var(--text-5xl); }
h2 { font-size: var(--text-4xl); }
h3 { font-size: var(--text-3xl); }
h4 { font-size: var(--text-2xl); }
h5 { font-size: var(--text-xl); }
h6 { font-size: var(--text-lg); }

p {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.7;
  color: var(--color-text);
}

/* --- Layout Utilities --- */
.container {
  width: 100%;
  max-width: var(--max-width);
  margin-inline: auto;
  padding-inline: var(--space-6);
}

.container--narrow {
  max-width: var(--max-width-text);
}

/* --- Buttons --- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: var(--space-3) var(--space-8);
  border-radius: var(--border-radius);
  transition: background-color var(--transition),
              color var(--transition),
              border-color var(--transition);
  white-space: nowrap;
}

.btn--primary {
  background-color: var(--color-text);
  color: var(--color-bg);
  border: 1px solid var(--color-text);
}

.btn--primary:hover {
  background-color: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-bg);
}

.btn--outline {
  background-color: transparent;
  color: var(--color-text);
  border: 1px solid var(--color-border);
}

.btn--outline:hover {
  border-color: var(--color-text);
}

.btn--accent {
  background-color: var(--color-accent);
  color: var(--color-bg);
  border: 1px solid var(--color-accent);
}

.btn--accent:hover {
  background-color: var(--color-accent-dark);
  border-color: var(--color-accent-dark);
}

/* --- Visually Hidden --- */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ============================================
   HEADER
============================================ */
.site-header {
  position: sticky;
  top: 0;
  z-index: auto;
  background-color: var(--color-bg-dark);
  border-bottom: 1px solid var(--color-border);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 90px;
  gap: var(--space-8);
}

.site-header__logo {
  flex-shrink: 0;
}

.site-header__logo-img {
  height: 70px;
  width: auto;
  display: block;
}

.site-header__logo-text {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  color: var(--color-text);
  letter-spacing: 0.02em;
}

/* --- Desktop Nav --- */
.site-nav {
  flex: 1;
  display: flex;
  justify-content: center;
}

.site-nav__list {
  display: flex;
  align-items: center;
  gap: var(--space-8);
}

.site-nav__item {
  position: relative;
}

.site-nav__link {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text);
  padding: var(--space-2) 0;
  transition: color var(--transition);
}

.site-nav__link:hover {
  color: var(--color-accent);
}

/* Dropdown */
.site-nav__dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 12px);
  left: 50%;
  transform: translateX(-50%);
  min-width: 200px;
  background-color: var(--color-bg-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius-lg);
  padding: var(--space-2) 0;
  z-index: 200;
}

.site-nav__item--has-dropdown:hover .site-nav__dropdown {
  display: block;
}

.site-nav__dropdown-link {
  display: block;
  padding: var(--space-2) var(--space-6);
  font-size: var(--text-sm);
  color: var(--color-text);
  transition: color var(--transition), background-color var(--transition);
}

.site-nav__dropdown-link:hover {
  color: var(--color-accent);
  background-color: var(--color-bg);
}

.site-nav__dropdown-divider {
  height: 1px;
  background-color: var(--color-border);
  margin: var(--space-2) 0;
}

/* --- Header Actions --- */
.site-header__actions {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex-shrink: 0;
}

.header-icon {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text);
  transition: color var(--transition);
}

.header-icon:hover {
  color: var(--color-accent);
}

.cart-count {
  position: absolute;
  top: -6px;
  right: -8px;
  background-color: var(--color-accent);
  color: var(--color-bg);
  font-size: 10px;
  font-weight: 600;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* --- Mobile Nav Toggle --- */
.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: var(--space-2);
}

.nav-toggle__bar {
  display: block;
  width: 22px;
  height: 1.5px;
  background-color: var(--color-text);
  transition: transform var(--transition), opacity var(--transition);
}

/* --- Mobile Nav Drawer --- */
.nav-drawer {
  display: none;
  position: fixed;
  top: 90px;
  left: 0;
  width: 100%;
  height: calc(100vh - 90px);
  background-color: var(--color-bg);
  overflow-y: auto;
  z-index: 99;
  padding: var(--space-6);
  transform: translateX(-100%);
  transition: transform 300ms ease;
}

.nav-drawer[aria-hidden="false"] {
  transform: translateX(0);
}

.nav-drawer__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.nav-drawer__link {
  display: block;
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  color: var(--color-text);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--color-border);
}

.nav-drawer__sub {
  padding: var(--space-2) 0 var(--space-4) var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.nav-drawer__sub-link {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  letter-spacing: 0.04em;
}

/* --- Responsive --- */
@media (max-width: 768px) {
  .site-nav {
    display: none;
  }

  .nav-toggle {
    display: flex;
  }

  .nav-drawer {
    display: block;
  }

  body.nav-open {
    overflow: hidden;
  }
}

/* ============================================
   HERO
============================================ */
.hero {
  min-height: calc(100vh - 90px);
  display: flex;
  align-items: center;
  background-color: var(--color-bg-dark);
  position: relative;
  overflow: hidden;
}

.hero__content {
  position: relative;
  z-index: 2;
  max-width: 800px;
}

.hero__eyebrow {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: var(--space-6);
  display: block;
}

.hero__headline {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 5.5vw, 5rem);
  line-height: 1.05;
  color: var(--color-text);
  margin-bottom: var(--space-6);
}

.hero__subheadline {
  font-family: var(--font-body);
  font-size: var(--text-lg);
  color: var(--color-text-muted);
  line-height: 1.7;
  margin-bottom: var(--space-8);
  max-width: 560px;
}

.hero__actions {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
}

.hero__divider {
  width: 40px;
  height: 1px;
  background-color: var(--color-border);
  margin: var(--space-8) 0;
}

.hero__pillars {
  display: flex;
  gap: var(--space-8);
}

.hero__pillar {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}
/* ============================================
   FOOTER
============================================ */
.site-footer {
  background-color: var(--color-bg-dark);
  border-top: 1px solid var(--color-border);
  padding-top: var(--space-16);
  padding-bottom: var(--space-8);
}

.footer__top {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: var(--space-16);
  padding-bottom: var(--space-12);
  border-bottom: 1px solid var(--color-border);
}

.footer__brand {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.footer__logo img {
  height: 60px;
  width: auto;
}

.footer__tagline {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.6;
  font-style: italic;
}

.footer__verse {
  font-size: var(--text-xs);
  color: var(--color-accent);
  letter-spacing: 0.06em;
  font-family: var(--font-body);
}

.footer__nav {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-8);
}

.footer__nav-heading {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text);
  margin-bottom: var(--space-4);
}

.footer__nav-col ul {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.footer__nav-link {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  transition: color var(--transition);
}

.footer__nav-link:hover {
  color: var(--color-accent);
}

.footer__nav-link--external {
  color: var(--color-text-muted);
}

.footer__middle {
  padding: var(--space-8) 0;
  border-bottom: 1px solid var(--color-border);
  display: flex;
  justify-content: center;
}

.footer__pillars {
  display: flex;
  align-items: center;
  gap: var(--space-6);
}

.footer__pillar {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  color: var(--color-text-muted);
  letter-spacing: 0.04em;
}

.footer__pillar-dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background-color: var(--color-accent);
  flex-shrink: 0;
}

.footer__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: var(--space-6);
}

.footer__copy {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

.footer__powered {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  font-style: italic;
}

@media (max-width: 768px) {
  .footer__top {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }

  .footer__nav {
    grid-template-columns: repeat(2, 1fr);
  }

  .footer__bottom {
    flex-direction: column;
    gap: var(--space-3);
    text-align: center;
  }
}
/* ============================================
   COLLECTION CAROUSEL
============================================ */
.collection-carousel {
  padding: var(--space-16) 0;
  border-bottom: 1px solid var(--color-border);
}

.carousel__header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: var(--space-8);
}

.carousel__header-left {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.carousel__eyebrow {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-accent);
}

.carousel__heading {
  font-family: var(--font-display);
  font-size: var(--text-4xl);
  color: var(--color-text);
  line-height: 1.1;
}

.carousel__view-all {
  flex-shrink: 0;
}

.carousel__track-wrap {
  position: relative;
}

.carousel__track {
  display: flex;
  gap: var(--space-4);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding-bottom: var(--space-2);
}

.carousel__track::-webkit-scrollbar {
  display: none;
}

.carousel__slide {
  flex: 0 0 calc(25% - var(--space-3));
  scroll-snap-align: start;
  min-width: 220px;
}

/* Product Card */
.product-card {
  display: block;
  background-color: var(--color-bg-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius-lg);
  overflow: hidden;
  transition: border-color var(--transition), transform var(--transition);
}

.product-card:hover {
  border-color: var(--color-accent);
  transform: translateY(-2px);
}

.product-card__image-wrap {
  position: relative;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background-color: var(--color-bg-dark);
}

.product-card__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 400ms ease;
}

.product-card:hover .product-card__image {
  transform: scale(1.03);
}

.product-card__image-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-muted);
  font-size: var(--text-xs);
}

.product-card__badge {
  position: absolute;
  top: var(--space-3);
  left: var(--space-3);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 2px;
}

.product-card__badge--sale {
  background-color: var(--color-accent);
  color: var(--color-bg);
}

.product-card__info {
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.product-card__title {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--color-text);
  line-height: 1.4;
}

.product-card__price-wrap {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.product-card__price {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-accent);
}

.product-card__compare-price {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  text-decoration: line-through;
}

/* Carousel Buttons */
.carousel__btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: var(--color-bg-surface);
  border: 1px solid var(--color-border);
  color: var(--color-text);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color var(--transition), color var(--transition);
  z-index: 2;
}

.carousel__btn:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
}

.carousel__btn--prev {
  left: -20px;
}

.carousel__btn--next {
  right: -20px;
}

.carousel__empty {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

@media (max-width: 768px) {
  .carousel__slide {
    flex: 0 0 calc(50% - var(--space-2));
  }

  .carousel__btn {
    display: none;
  }

  .carousel__header {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-4);
  }
  /* ============================================
   COLLECTION PAGE
============================================ */
.collection-header {
  padding: var(--space-8) 0 var(--space-6);
  border-bottom: 1px solid var(--color-border);
}

.breadcrumb {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}

.breadcrumb__link {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transition: color var(--transition);
}

.breadcrumb__link:hover {
  color: var(--color-accent);
}

.breadcrumb__sep {
  font-size: var(--text-xs);
  color: var(--color-border);
}

.breadcrumb__current {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.collection-header__title {
  font-family: var(--font-display);
  font-size: var(--text-5xl);
  color: var(--color-text);
  margin-bottom: var(--space-3);
}

.collection-header__desc {
  color: var(--color-text-muted);
  font-size: var(--text-base);
  max-width: var(--max-width-text);
  margin-bottom: var(--space-3);
}

.collection-header__count {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  letter-spacing: 0.06em;
}

.collection-grid-section {
  padding: var(--space-8) 0 var(--space-16);
}

.collection-grid {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
  gap: var(--space-4);
}

.collection-grid__empty {
  color: var(--color-text-muted);
  grid-column: 1 / -1;
  text-align: center;
  padding: var(--space-16) 0;
}

.product-card__badge--graded {
  background-color: var(--color-bg-surface);
  color: var(--color-accent);
  border: 1px solid var(--color-accent);
  top: var(--space-3);
  right: var(--space-3);
  left: auto;
}

.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  margin-top: var(--space-12);
}

.pagination__info {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

@media (max-width: 1024px) {
  .collection-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 768px) {
  .collection-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .collection-header__title {
    font-size: var(--text-4xl);
  }
}

@media (max-width: 480px) {
  .collection-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-3);
  }
}
}
/* ============================================
   PRODUCT PAGE
============================================ */
.product-main {
  padding: var(--space-8) 0 var(--space-16);
}

.product-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-16);
  align-items: start;
}

.product-gallery__main {
  background-color: var(--color-bg-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius-lg);
  overflow: hidden;
  aspect-ratio: 3 / 4;
  display: flex;
  align-items: center;
  justify-content: center;
}

.product-gallery__main-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: transform 400ms ease;
}

.product-gallery__main-img:hover {
  transform: scale(1.03);
}

.product-gallery__thumbs {
  display: flex;
  gap: var(--space-2);
  margin-top: var(--space-3);
  flex-wrap: wrap;
}

.product-gallery__thumb {
  width: 72px;
  height: 96px;
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius);
  overflow: hidden;
  padding: 0;
  transition: border-color var(--transition);
  flex-shrink: 0;
}

.product-gallery__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.product-gallery__thumb.active,
.product-gallery__thumb:hover {
  border-color: var(--color-accent);
}

.product-info {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.product-grade-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  background-color: var(--color-bg-surface);
  border: 1px solid var(--color-accent);
  border-radius: var(--border-radius);
  padding: var(--space-2) var(--space-4);
  width: fit-content;
}

.product-grade-badge__company {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--color-accent);
}

.product-grade-badge__grade {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  color: var(--color-text);
  line-height: 1;
}

.product-info__title {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  color: var(--color-text);
  line-height: 1.2;
}

.product-info__price {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
}

.product-info__price-current {
  font-family: var(--font-body);
  font-size: var(--text-2xl);
  font-weight: 600;
  color: var(--color-accent);
}

.product-info__price-compare {
  font-size: var(--text-base);
  color: var(--color-text-muted);
  text-decoration: line-through;
}

.product-info__price-save {
  font-size: var(--text-sm);
  color: var(--color-accent);
  font-weight: 500;
}

.product-details {
  background-color: var(--color-bg-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius-lg);
  overflow: hidden;
}

.product-details__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-border);
}

.product-details__row:last-child {
  border-bottom: none;
}

.product-details__label {
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.product-details__value {
  font-size: var(--text-sm);
  color: var(--color-text);
}

.product-details__value--accent {
  color: var(--color-accent);
  font-weight: 600;
  font-size: var(--text-lg);
}

.product-info__atc {
  width: 100%;
  padding: var(--space-4) var(--space-8);
  font-size: var(--text-base);
  letter-spacing: 0.08em;
}

.product-trust {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-4) 0;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}

.product-trust__item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.product-trust__item svg {
  color: var(--color-accent);
  flex-shrink: 0;
}

.product-description__heading {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: var(--space-3);
}

.product-description__body {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.8;
}

/* ============================================
   CART DRAWER
============================================ */
.cart-drawer {
  position: fixed;
  inset: 0;
  z-index: 500;
  pointer-events: none;
}

.cart-drawer[aria-hidden="false"] {
  pointer-events: all;
}

.cart-drawer__overlay {
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.7);
  opacity: 0;
  transition: opacity 300ms ease;
}

.cart-drawer[aria-hidden="false"] .cart-drawer__overlay {
  opacity: 1;
}

.cart-drawer__panel {
  position: absolute;
  top: 0;
  right: 0;
  width: 420px;
  max-width: 100%;
  height: 100%;
  background-color: var(--color-bg-surface);
  border-left: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 300ms ease;
}

.cart-drawer[aria-hidden="false"] .cart-drawer__panel {
  transform: translateX(0);
}

.cart-drawer__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-6);
  border-bottom: 1px solid var(--color-border);
}

.cart-drawer__title {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  color: var(--color-text);
}

.cart-drawer__close {
  color: var(--color-text-muted);
  transition: color var(--transition);
  padding: var(--space-2);
}

.cart-drawer__close:hover {
  color: var(--color-text);
}

.cart-drawer__body {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.cart-drawer__loading {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  text-align: center;
  padding: var(--space-8) 0;
}

.cart-drawer__empty {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  text-align: center;
  padding: var(--space-8) 0;
}

.cart-drawer__footer {
  padding: var(--space-6);
  border-top: 1px solid var(--color-border);
}

.cart-item {
  display: grid;
  grid-template-columns: 80px 1fr auto;
  gap: var(--space-4);
  align-items: start;
}

.cart-item__image {
  width: 80px;
  height: 106px;
  object-fit: cover;
  border-radius: var(--border-radius);
  background-color: var(--color-bg);
}

.cart-item__title {
  font-size: var(--text-sm);
  color: var(--color-text);
  line-height: 1.4;
  margin-bottom: var(--space-2);
}

.cart-item__price {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-accent);
}

.cart-item__remove {
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  transition: color var(--transition);
}

.cart-item__remove:hover {
  color: var(--color-text);
}

.cart-drawer__subtotal {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-4);
}

.cart-drawer__subtotal-label {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.cart-drawer__subtotal-price {
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--color-text);
}

.cart-drawer__checkout {
  display: block;
  width: 100%;
  text-align: center;
}

@media (max-width: 768px) {
  .product-layout {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }

  .product-info__title {
    font-size: var(--text-2xl);
  }
}

/* ============================================
   PAGE TEMPLATE
============================================ */

.page-main {
  padding: 6rem 0 8rem;
  min-height: 60vh;
}

.page-main__title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 5vw, 3.5rem);
  color: var(--color-text);
  margin-bottom: 2rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.page-main__content {
  max-width: 720px;
  color: var(--color-text-muted);
  line-height: 1.8;
  font-size: 1.0625rem;
}

.page-main__content p {
  margin-bottom: 1.5rem;
}

.page-main__content h2,
.page-main__content h3 {
  font-family: var(--font-display);
  color: var(--color-text);
  margin: 2rem 0 0.75rem;
  text-transform: uppercase;
}

.page-main__content strong {
  color: var(--color-accent);
  font-weight: 600;
}

/* ============================================
   404 PAGE
============================================ */

.not-found {
  padding: 8rem 0;
  text-align: center;
  min-height: 60vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.not-found__inner {
  max-width: 480px;
}

.not-found__code {
  font-family: var(--font-display);
  font-size: clamp(5rem, 15vw, 10rem);
  color: var(--color-accent);
  line-height: 1;
  margin-bottom: 1rem;
}

.not-found__title {
  font-size: var(--text-2xl);
  color: var(--color-text);
  margin-bottom: 1rem;
}

.not-found__text {
  color: var(--color-text-muted);
  margin-bottom: 2rem;
}

/* ============================================
   CART PAGE
============================================ */

.cart-page {
  padding: 4rem 0 6rem;
}

.cart-page__title {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 4vw, 2.5rem);
  text-transform: uppercase;
  margin-bottom: 2.5rem;
}

.cart-page__empty {
  text-align: center;
  padding: 4rem 0;
  color: var(--color-text-muted);
}

.cart-page__empty a {
  color: var(--color-accent);
  text-decoration: underline;
}

/* ============================================
   RTE (Rich Text Editor content)
============================================ */

.rte p { margin-bottom: 1rem; }
.rte ul, .rte ol { margin: 0 0 1rem 1.5rem; }
.rte li { margin-bottom: 0.25rem; color: var(--color-text-muted); }
.rte a { color: var(--color-accent); }
.rte strong { color: var(--color-text); }

/* ============================================
   VISUALLY HIDDEN
============================================ */

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
}

.skip-link.visually-hidden:focus {
  position: fixed;
  top: 1rem;
  left: 1rem;
  width: auto;
  height: auto;
  clip: auto;
  background: var(--color-accent);
  color: #000;
  padding: 0.5rem 1rem;
  z-index: 9999;
  border-radius: 4px;
}


/* ============================================
   HEADER ICONS FIX
============================================ */

.site-header__icons {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.header-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  color: var(--color-text);
  background: none;
  border: none;
  cursor: pointer;
  position: relative;
  transition: color 0.2s;
  text-decoration: none;
}

.header-icon:hover {
  color: var(--color-accent);
}

.header-icon__badge {
  position: absolute;
  top: 0;
  right: 0;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  background: var(--color-accent);
  color: #000;
  font-size: 11px;
  font-weight: 700;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
@media (max-width: 749px) {
  .hero {
    --hero-bg-pos: 30% top;
  }
}
{% comment %}
  sections/about.liquid
  Slab'dUSA — Our Story page
  Full-width, brand-aligned layout. No sidebar. No clutter.
  Add to templates/page.about.json or assign via Shopify page template picker.
{% endcomment %}

<section class="about-page">

  {%- comment -%} ── HERO ── {%- endcomment -%}
  <div class="about-hero">
    <div class="about-container">
      <p class="about-eyebrow">Our Story</p>
      <h1 class="about-headline">Built by a collector.<br>For the collector.</h1>
      <div class="about-rule"></div>
    </div>
  </div>

  {%- comment -%} ── BODY ── {%- endcomment -%}
  <div class="about-body">
    <div class="about-container about-container--narrow">

      <p class="about-text">
        You know the feeling. The one right before you flip a card over. The half-second where anything is still possible — a gem mint surface, a clean auto, a pop-one slab that changes everything. That feeling is why we're here.
      </p>

      <p class="about-text">
        Slab'dUSA started the way most things in this hobby do — with a love for the cards themselves. Not the market. Not the hype cycle. The cards. The history they carry. The names on the front, the serial numbers on the back, the stories in between.
      </p>

      <blockquote class="about-pullquote">
        "We're not in this to flip culture. We're in it because the hobby is worth doing right."
      </blockquote>

      <p class="about-text">
        We've sat at the card show tables. We've pulled slabs out of penny sleeves at estate sales. We've refreshed grading submissions like the tracking page owes us something. We've felt the sting of a hairline on a card that should've been a 10. We know this world — not from the outside looking in, but from the middle of it, like you.
      </p>

      <p class="about-text">
        So when we built Slab'dUSA, we built it the way we wished more sellers operated. <strong>Honest descriptions. Fair pricing. Cards handled like they matter</strong> — because they do. Every slab that leaves our hands goes out the way we'd want one to arrive at ours.
      </p>

      <p class="about-text">
        The name says it all. From the pitcher's slab to the graded slab — this hobby connects generations, sports, and stories in a way nothing else does. We're here to honor that. To be a corner of the hobby you can trust.
      </p>

    </div>
  </div>

  {%- comment -%} ── PILLARS ── {%- endcomment -%}
  <div class="about-pillars-wrap">
    <div class="about-container">
      <div class="about-pillars">

        <div class="about-pillar">
          <p class="about-pillar__label">Preserve</p>
          <p class="about-pillar__body">Cards are artifacts. We treat them that way — from how we store them to how we ship them.</p>
        </div>

        <div class="about-pillar">
          <p class="about-pillar__label">Respect</p>
          <p class="about-pillar__body">Respect for the hobby, the history, and the people in it. That shapes every transaction we make.</p>
        </div>

        <div class="about-pillar">
          <p class="about-pillar__label">Trust</p>
          <p class="about-pillar__body">Our reputation is the only currency that matters. We earn it one card — one collector — at a time.</p>
        </div>

      </div>
    </div>
  </div>

  {%- comment -%} ── CLOSING ── {%- endcomment -%}
  <div class="about-body">
    <div class="about-container about-container--narrow">

      <p class="about-text">
        We're based in Tennessee, run by real people who actually collect. Not a warehouse operation. Not a bot-powered bulk flipper. Just a shop with standards, built on faith, and grateful for every order that comes through.
      </p>

      <p class="about-text about-text--center">
        <a href="/collections/all" class="about-cta">Shop the Collection</a>
      </p>

    </div>
  </div>

  {%- comment -%} ── FAITH FOOTER ── {%- endcomment -%}
  <div class="about-faith">
    <div class="about-container">
      <p class="about-faith__text">
        <span class="about-faith__verse">Jeremiah 29:11</span>
        <span class="about-faith__sep">&nbsp;·&nbsp;</span>
        Dist. TN, U.S.A.
      </p>
    </div>
  </div>

</section>


{% stylesheet %}

/* ─── Layout ─────────────────────────────────────────── */

.about-page {
  background-color: #0a0a0a;
  color: #F5F3EE;
}

.about-container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 2rem;
}

.about-container--narrow {
  max-width: 720px;
}

/* ─── Hero ─────────────────────────────────────────────── */

.about-hero {
  padding: 6rem 0 3rem;
  text-align: left;
}

.about-eyebrow {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #C9A84C;
  margin: 0 0 1.25rem;
}

.about-headline {
  font-family: 'EFCOSongster', 'Georgia', serif;
  font-size: clamp(36px, 6vw, 64px);
  font-weight: 400;
  line-height: 1.15;
  color: #F5F3EE;
  margin: 0 0 2rem;
  letter-spacing: -0.01em;
}

.about-rule {
  width: 48px;
  height: 2px;
  background: #C9A84C;
}

/* ─── Body ─────────────────────────────────────────────── */

.about-body {
  padding: 3rem 0;
}

.about-text {
  font-family: 'Inter', sans-serif;
  font-size: 17px;
  line-height: 1.85;
  color: rgba(245, 243, 238, 0.78);
  margin: 0 0 1.75rem;
}

.about-text strong {
  color: #F5F3EE;
  font-weight: 500;
}

.about-text--center {
  text-align: center;
  margin-top: 2.5rem;
}

/* ─── Pull Quote ───────────────────────────────────────── */

.about-pullquote {
  font-family: 'Georgia', serif;
  font-size: clamp(18px, 2.5vw, 22px);
  font-style: italic;
  line-height: 1.6;
  color: #F5F3EE;
  border-left: 2px solid #C9A84C;
  padding: 0.25rem 0 0.25rem 1.75rem;
  margin: 2.5rem 0 2.5rem;
}

/* ─── Pillars ──────────────────────────────────────────── */

.about-pillars-wrap {
  padding: 3rem 0;
  border-top: 1px solid rgba(201, 168, 76, 0.2);
  border-bottom: 1px solid rgba(201, 168, 76, 0.2);
}

.about-pillars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3rem;
}

.about-pillar {
  border-top: 1px solid #C9A84C;
  padding-top: 1.25rem;
}

.about-pillar__label {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #C9A84C;
  margin: 0 0 0.75rem;
}

.about-pillar__body {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  line-height: 1.7;
  color: rgba(245, 243, 238, 0.65);
  margin: 0;
}

/* ─── CTA ──────────────────────────────────────────────── */

.about-cta {
  display: inline-block;
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #0a0a0a;
  background: #C9A84C;
  padding: 0.875rem 2.5rem;
  text-decoration: none;
  transition: background 0.2s ease, color 0.2s ease;
}

.about-cta:hover {
  background: #F5F3EE;
  color: #0a0a0a;
}

/* ─── Faith Footer ─────────────────────────────────────── */

.about-faith {
  padding: 2.5rem 0 5rem;
  text-align: left;
}

.about-faith__text {
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(245, 243, 238, 0.4);
  margin: 0;
}

.about-faith__verse {
  color: #C9A84C;
}

.about-faith__sep {
  color: rgba(245, 243, 238, 0.25);
}

/* ─── Responsive ───────────────────────────────────────── */

@media (max-width: 768px) {

  .about-hero {
    padding: 4rem 0 2rem;
  }

  .about-pillars {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .about-pullquote {
    padding-left: 1.25rem;
  }

  .about-text {
    font-size: 16px;
  }

}

{% endstylesheet %}

.about-rte blockquote {
  color: #C9A84C;
  font-family: 'Songster', serif;
  font-size: 16px;
}
/* Shrink About page headline */
.about-rte h1 {
  font-size: clamp(24px, 4vw, 42px);
}
/* Fix CTA button text */
.btn--accent {
  color: #0a0a0a !important;
}
/* Hide default page title on Our Story page */
.template-page-about .page-main__title {
  display: none;
}
/* Fix dropdown z-index over collection header */
.site-header {
  z-index: auto;
  position: relative;
}

.site-nav__dropdown {
  z-index: 200;
  position: absolute;
}

.collection-header {
  z-index: 1;
  position: relative;
}
.site-header,
.site-header__inner,
.container {
  overflow: visible;
}