/** Shopify CDN: Minification failed

Line 785:0 Expected "}" to go with "{"

**/
/* Varkun Theme - Premium Modernization */
@import url("https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&family=Playfair+Display:ital,wght@0,400;0,600;0,700;1,400&display=swap");

:root {
  /* Typography Overrides */
  --font-body-family: "Outfit", sans-serif;
  --font-heading-family: "Playfair Display", serif;
  --font-body-weight: 400;
  --font-heading-weight: 600;

  /* Color Refinement - User Specified */
  --color-foreground: 232, 232, 232; /* #E8E8E8 - Text */
  --color-background: 13, 13, 13; /* #0D0D0D - Background 1 */
  --color-background-2: 28, 28, 28; /* #1C1C1C - Background 2 */

  --color-button: 255, 31, 31; /* #FF1F1F - Accent 1 */
  --color-button-text: 255, 255, 255; /* #FFFFFF */
  --color-base-outline-button-labels: 255, 255, 255;

  --color-base-accent-1: 255, 31, 31; /* #FF1F1F */
  --color-base-accent-2: 255, 242, 0; /* #FFF200 */

  --color-border: 255, 255, 255; /* Base for rgba calculation */
  --border-opacity: 0.15;

  /* Spacing & Layout */
  --page-width: 1400px;
  --grid-desktop-vertical-spacing: 40px;
  --grid-desktop-horizontal-spacing: 30px;

  /* UI Elements */
  --border-radius: 8px;
  --button-radius: 8px;
  --inputs-radius: 8px;
  --card-radius: 12px;

  /* Shadows */
  --shadow-soft: 0 10px 30px rgba(0, 0, 0, 0.05);
  --shadow-hover: 0 20px 40px rgba(0, 0, 0, 0.08);

  /* Spacing Scale (4px base - checklist.design baseline) */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;
  --space-3xl: 64px;
}

/* Global Reset & Base */
body {
  font-family: var(--font-body-family);
  color: rgb(var(--color-foreground)) !important;
  background-color: rgb(var(--color-background)) !important;
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-heading-family);
  font-weight: var(--font-heading-weight);
  letter-spacing: -0.02em; /* Modern tight tracking */
}

/* Button Modernization */
.button,
.shopify-payment-button__button--unbranded {
  border-radius: var(--button-radius) !important;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: none; /* Remove uppercase if present */
  transition: all 0.2s ease;
  box-shadow: none !important; /* Remove default harsh shadows */
}

.button:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
}

.button:active {
  transform: scale(0.98);
}

/* Input Modernization */
.field__input,
.select__select,
.customer .field input {
  border-radius: var(--inputs-radius) !important;
  border: 1px solid rgba(var(--color-border), var(--border-opacity));
  box-shadow: none !important;
  transition: border-color 0.2s ease;
}

.field__input:focus,
.select__select:focus {
  border-color: rgb(var(--color-foreground));
  outline: none;
  box-shadow: 0 0 0 1px rgb(var(--color-foreground)) !important;
}

/* Link Animation */
.link,
.header__menu-item {
  position: relative;
  text-decoration: none;
}

.link::after,
.header__menu-item::after {
  content: "";
  position: absolute;
  width: 100%;
  transform: scaleX(0);
  height: 1px;
  bottom: 0;
  left: 0;
  background-color: currentColor;
  transform-origin: bottom right;
  transition: transform 0.25s ease-out;
}

.link:hover::after,
.header__menu-item:hover::after {
  transform: scaleX(1);
  transform-origin: bottom left;
}

/* Product Card Modernization */
.card-wrapper {
  height: 100%;
}

.card {
  position: relative;
  border: 1px solid transparent;
  border-radius: var(--card-radius);
  transition: all 0.3s ease;
  overflow: hidden; /* Ensure content respects radius */
  background-color: rgb(var(--color-background));
}

.card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-hover);
  border-color: rgba(var(--color-border), 0.3);
}

.card:hover .media img {
  transform: scale(1.05);
  transition: transform 0.5s ease;
}

.card .media img {
  transition: transform 0.5s ease;
}

.card__inner {
  border-radius: var(--card-radius) var(--card-radius) 0 0 !important;
}

/* Badge Modernization */
.badge {
  border-radius: 50px !important; /* Pill shape */
  padding: 6px 12px !important;
  font-size: 1.1rem !important;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border: none !important;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.badge--bottom-left {
  bottom: 1.5rem !important;
  left: 1.5rem !important;
}

/* Price Styling */
.price-item--regular {
  font-weight: 500;
  color: rgb(var(--color-foreground));
}

.price-item--sale {
  font-weight: 600;
  color: rgb(var(--color-base-accent-2)); /* #FFF200 - Accent 2 */
}

/* Quick Add Button */
.quick-add__submit {
  border-radius: var(--button-radius) !important;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  transition: all 0.3s ease;
}

.quick-add__submit:hover {
  background-color: rgb(var(--color-foreground));
  color: rgb(var(--color-background));
  transform: translateY(-2px);
}

/* Header Refinement */
.shopify-section-header-sticky .header-wrapper {
  background-color: rgba(13, 13, 13, 0.85) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  transition: all 0.3s ease;
}

.header__icon .icon {
  transform: scale(1);
  transition: transform 0.2s ease;
}

.header__icon:hover .icon {
  transform: scale(1.1);
}

.header__menu-item {
  font-weight: 500;
  letter-spacing: 0.02em;
}

/* Search Modal Polish */
.search-modal__content {
  border-radius: 0 0 var(--card-radius) var(--card-radius);
  box-shadow: var(--shadow-soft);
}

.search__input.field__input {
  border-radius: var(--inputs-radius);
}

/* Marquee Interactions */
.horizontal-ticker:hover .horizontal-ticker__content {
  animation-play-state: paused !important;
}

.horizontal-ticker {
  border-top: 2px solid #b00000;
  border-bottom: 2px solid #b00000;
  background: #000;
  color: #fff;
  font-family: "Courier New", monospace;
  text-transform: uppercase;
  letter-spacing: 2px;
}

.horizontal-ticker__item {
  position: relative;
  padding: 0 2rem;
}

.horizontal-ticker__item::after {
  content: "///";
  color: #b00000;
  margin-left: 2rem;
}

/* Phase 2: UX Polish - Button Reveal */
.card__inner {
  position: relative;
  overflow: hidden;
}

.quick-add {
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 1rem;
  z-index: 2;
  transform: translateY(100%);
  transition: transform 0.3s ease-out;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.6), transparent);
}

.card:hover .quick-add {
  transform: translateY(0);
}

.quick-add__submit {
  background-color: #ffffff !important;
  color: #121212 !important;
  border: none !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.quick-add__submit:hover {
  background-color: #f2f2f2 !important;
  transform: translateY(-2px);
}

/* ================================================
   BUTTON SYSTEM (checklist.design baseline)
   ================================================ */

/* Secondary Button (Outline Variant) */
.button--secondary {
  background: transparent !important;
  color: #b00000 !important;
  border: 2px solid #b00000 !important;
}

.button--secondary:hover {
  background: #b00000 !important;
  color: #ffffff !important;
}

/* Focus States (Accessibility) */
.button:focus,
button:focus,
a.button:focus,
input[type="submit"]:focus {
  outline: 2px solid #b00000;
  outline-offset: 2px;
  box-shadow: 0 0 0 4px rgba(176, 0, 0, 0.2);
}

/* Disabled States */
.button:disabled,
.button[disabled],
button:disabled,
button[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

/* Link Focus States */
a:focus {
  outline: 2px solid #b00000;
  outline-offset: 2px;
}

/* Input Focus States */
input:focus,
textarea:focus,
select:focus {
  outline: 2px solid #b00000;
  outline-offset: 0;
  border-color: #b00000;
}

/* ================================================
   COLLECTION PAGE FIXES - ULTRA AGGRESSIVE
   ================================================ */

/* Ensure page-width class centers content */
.page-width {
  max-width: 1400px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* FORCE 4 COLUMN GRID ON DESKTOP */
@media screen and (min-width: 990px) {
  .product-grid.grid--4-col-desktop {
    grid-template-columns: repeat(4, 1fr) !important;
  }

  #product-grid.grid--4-col-desktop {
    grid-template-columns: repeat(4, 1fr) !important;
  }
}

/* ===== FILTER BUTTON - ULTRA SPECIFIC ===== */
.facet-filters__button,
.facets__summary,
button.facets__summary,
summary.facets__summary,
.facet-filters summary,
.mobile-facets__summary {
  background-color: #1a1a1a !important;
  background: #1a1a1a !important;
  border: 2px solid #ffffff !important;
  color: #ffffff !important;
  padding: 14px 24px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  border-radius: 6px !important;
  cursor: pointer !important;
}

.facet-filters__button:hover,
.facets__summary:hover {
  background-color: #b00000 !important;
  background: #b00000 !important;
  border-color: #b00000 !important;
}

/* Filter icon and text */
.facets__summary svg,
.facet-filters__button svg {
  fill: #ffffff !important;
  stroke: #ffffff !important;
}

/* ===== SORT DROPDOWN - ULTRA SPECIFIC ===== */
.facet-filters__label,
.facet-filters__field label,
label[for="SortBy"],
.facet-filters sorting caption {
  color: #ffffff !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  margin-bottom: 8px !important;
  display: block !important;
}

.facet-filters__sort select,
.facet-filters__field select,
select#SortBy,
.select__select {
  background-color: #1a1a1a !important;
  background: #1a1a1a !important;
  border: 2px solid #ffffff !important;
  color: #ffffff !important;
  padding: 14px 40px 14px 16px !important;
  font-size: 14px !important;
  border-radius: 6px !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
}

.facet-filters__sort select:hover,
select#SortBy:hover {
  background-color: #2a2a2a !important;
  border-color: #b00000 !important;
}

/* Select dropdown arrow */
.select svg,
.facet-filters__sort svg {
  fill: #ffffff !important;
  stroke: #ffffff !important;
}

/* Product count */
.product-count,
.product-count__text,
#ProductCount,
#ProductCountDesktop {
  color: #cccccc !important;
  font-size: 14px !important;
}

/* ===== FILTER DRAWER (when opened) ===== */
.facets__form,
.facets-container,
.facets-vertical,
#FacetsWrapperDesktop,
.drawer__inner {
  background-color: #0d0d0d !important;
  background: #0d0d0d !important;
}

.facets__heading,
.facets__heading-text,
.facets__label,
.facet-checkbox label,
.facets__summary,
.facets__price {
  color: #ffffff !important;
}

.facets__disclosure {
  border-bottom: 1px solid rgba(255, 255, 255, 0.15) !important;
}

.facets__display {
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  color: #ffffff !important;
}

.price-filter__input,
input.field__input {
  background: rgba(255, 255, 255, 0.1) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  color: #ffffff !important;
}

.drawer__close svg,
.modal__close-button svg {
  fill: #ffffff !important;
}

.active-facets__button {
  background: rgba(176, 0, 0, 0.2) !important;
/* Secondary Button (Outline Variant) */
.button--secondary {
  background: transparent !important;
  color: #b00000 !important;
  border: 2px solid #b00000 !important;
}

.button--secondary:hover {
  background: #b00000 !important;
  color: #ffffff !important;
}

/* Focus States (Accessibility) */
.button:focus,
button:focus,
a.button:focus,
input[type="submit"]:focus {
  outline: 2px solid #b00000;
  outline-offset: 2px;
  box-shadow: 0 0 0 4px rgba(176, 0, 0, 0.2);
}

/* Disabled States */
.button:disabled,
.button[disabled],
button:disabled,
button[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

/* Link Focus States */
a:focus {
  outline: 2px solid #b00000;
  outline-offset: 2px;
}

/* Input Focus States */
input:focus,
textarea:focus,
select:focus {
  outline: 2px solid #b00000;
  outline-offset: 0;
  border-color: #b00000;
}

/* ================================================
   COLLECTION PAGE FIXES - ULTRA AGGRESSIVE
   ================================================ */

/* Ensure page-width class centers content */
.page-width {
  max-width: 1400px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* FORCE 4 COLUMN GRID ON DESKTOP */
@media screen and (min-width: 990px) {
  .product-grid.grid--4-col-desktop {
    grid-template-columns: repeat(4, 1fr) !important;
  }

  #product-grid.grid--4-col-desktop {
    grid-template-columns: repeat(4, 1fr) !important;
  }
}

/* ===== FILTER BUTTON - ULTRA SPECIFIC ===== */
.facet-filters__button,
.facets__summary,
button.facets__summary,
summary.facets__summary,
.facet-filters summary,
.mobile-facets__summary {
  background-color: #1a1a1a !important;
  background: #1a1a1a !important;
  border: 2px solid #ffffff !important;
  color: #ffffff !important;
  padding: 14px 24px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  border-radius: 6px !important;
  cursor: pointer !important;
}

.facet-filters__button:hover,
.facets__summary:hover {
  background-color: #b00000 !important;
  background: #b00000 !important;
  border-color: #b00000 !important;
}

/* Filter icon and text */
.facets__summary svg,
.facet-filters__button svg {
  fill: #ffffff !important;
  stroke: #ffffff !important;
}

/* ===== SORT DROPDOWN - ULTRA SPECIFIC ===== */
.facet-filters__label,
.facet-filters__field label,
label[for="SortBy"],
.facet-filters sorting caption {
  color: #ffffff !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  margin-bottom: 8px !important;
  display: block !important;
}

.facet-filters__sort select,
.facet-filters__field select,
select#SortBy,
.select__select {
  background-color: #1a1a1a !important;
  background: #1a1a1a !important;
  border: 2px solid #ffffff !important;
  color: #ffffff !important;
  padding: 14px 40px 14px 16px !important;
  font-size: 14px !important;
  border-radius: 6px !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
}

.facet-filters__sort select:hover,
select#SortBy:hover {
  background-color: #2a2a2a !important;
  border-color: #b00000 !important;
}

/* Select dropdown arrow */
.select svg,
.facet-filters__sort svg {
  fill: #ffffff !important;
  stroke: #ffffff !important;
}

/* Product count */
.product-count,
.product-count__text,
#ProductCount,
#ProductCountDesktop {
  color: #cccccc !important;
  font-size: 14px !important;
}

/* ===== FILTER DRAWER (when opened) ===== */
.facets__form,
.facets-container,
.facets-vertical,
#FacetsWrapperDesktop,
.drawer__inner {
  background-color: #0d0d0d !important;
  background: #0d0d0d !important;
}

.facets__heading,
.facets__heading-text,
.facets__label,
.facet-checkbox label,
.facets__summary,
.facets__price {
  color: #ffffff !important;
}

.facets__disclosure {
  border-bottom: 1px solid rgba(255, 255, 255, 0.15) !important;
}

.facets__display {
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  color: #ffffff !important;
}

.price-filter__input,
input.field__input {
  background: rgba(255, 255, 255, 0.1) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  color: #ffffff !important;
}

.drawer__close svg,
.modal__close-button svg {
  fill: #ffffff !important;
}

.active-facets__button {
  background: rgba(176, 0, 0, 0.2) !important;
  border: 1px solid #b00000 !important;
  color: #ffffff !important;
}

.facets__selected {
  background: #b00000 !important;
  color: #ffffff !important;
}

/* ================================================
   PHASE 1: TEXTURE & DEPTH (Godly UI)
   ================================================ */

/* Global Noise Overlay */
body::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 9999;
  opacity: 0.04; /* Subtle grain */
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
}

/* Glassmorphism Utility */
.glass {
  background: rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
}

/* Refined Header Glass - Overrides previous styles */
.shopify-section-header-sticky .header-wrapper {
  background-color: rgba(13, 13, 13, 0.6) !important; /* More transparent for depth */
  backdrop-filter: blur(20px) !important; /* Stronger blur */
  -webkit-backdrop-filter: blur(20px) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
}

/* Floating Elements Glass Effect */
.quick-add,
.card:hover .quick-add {
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  background: linear-gradient(to top, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.4));
}

/* ================================================
   PHASE 3: IMMERSIVE PRODUCT CARDS
   ================================================ */

.media__hover-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 0.4s ease;
  z-index: 2;
  pointer-events: none; /* Let clicks pass through to link */
}

.card:hover .media__hover-video {
  opacity: 1;
}

.hover-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Mobile Bottom Nav Spacing */
@media screen and (max-width: 749px) {
  body {
    padding-bottom: 60px; /* Height of bottom nav */
  }
}