/** Shopify CDN: Minification failed

Line 554:13 Expected identifier but found whitespace
Line 554:14 Unexpected "var("

**/
/* ============================================================
   HASNY SHOPPE - CUSTOM STYLES & OVERRIDES (HYPER CERAMIDE THEME)
   ============================================================ */

/* Base Adjustments */
body {
  font-family: var(--font-body--family);
  color: var(--color-text);
  background-color: var(--color-background);
  font-size: var(--font-body-size);
  letter-spacing: -0.01em;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading--family);
  color: var(--color-primary);
  font-weight: 500;
}

@media (max-width: 768px) {
  h1 {
    font-size: clamp(24px, 6vw, 48px);
  }
  h2 {
    font-size: clamp(20px, 5vw, 36px);
  }
  h3 {
    font-size: clamp(18px, 4vw, 28px);
  }
  h4, h5, h6 {
    font-size: clamp(16px, 3vw, 22px);
  }
}

/* Mobile-Responsive Containers & Sections */
@media (max-width: 768px) {
  .container,
  .section-wrapper,
  .container-max,
  [class*="container"],
  [class*="section"]:not(.shopify-section) {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  /* Shopify's own section wrapper must stay edge-to-edge — each section
     manages its own inner padding-inline. The rule above used to match
     .shopify-section too (it contains "section"), forcing a 12px gap on
     every section on mobile, site-wide. Same problem hits any other wrapper
     whose class happens to contain "container"/"section" as a substring —
     .capsules-section, .countdown-cat-grid-container,
     .essentials-carousel-container and .trending-now-container all manage
     their own inner spacing and were getting this extra 12px forced on top,
     which is what showed up as a visible white gap on mobile.

     Specificity note: [class*="section"]:not(.shopify-section) above has
     specificity (0,2,0) — one attribute selector plus one class inside
     :not(). A plain single-class selector here (0,1,0) loses that fight
     regardless of !important or source order, since ties between
     !important declarations are broken by specificity first. Doubling each
     class below (.foo.foo) bumps this rule to (0,2,0) so it actually wins. */
  .shopify-section.shopify-section,
  .s4-hero__slider-container.s4-hero__slider-container,
  .s4-cp__container.s4-cp__container,
  .capsules-section.capsules-section,
  .countdown-cat-grid-container.countdown-cat-grid-container,
  .essentials-carousel-container.essentials-carousel-container,
  .trending-now-container.trending-now-container {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

/* Buttons */
.btn {
  font-family: var(--font-body--family);
  font-weight: 600;
  border-radius: var(--border-radius-btn);
  padding: 12px 28px;
  transition: var(--transition);
  letter-spacing: normal;
  text-transform: none;
}
@media (max-width: 768px) {
  .btn {
    padding: 10px 20px;
    font-size: 14px;
  }
}
.btn--primary {
  background: var(--color-primary);
  color: #fff;
  border: 1px solid var(--color-primary);
}
.btn--primary:hover {
  background: #0d3d50;
  border-color: #0d3d50;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(var(--color-base-text), 0.15);
}
.btn--secondary {
  background: var(--color-secondary);
  color: var(--color-primary);
  border: 1px solid var(--color-border);
}
.btn--secondary:hover {
  background: #e8e8e8;
  color: var(--color-primary);
  transform: translateY(-2px);
}

/* Header & Utility Bar: structure and colors fully defined in base.css using
   the CSS custom properties above (--color-primary, --color-accent, --color-blush). */

/* ═══════════════════════════════════════════════════════
   PREMIUM MENU DRAWER
═══════════════════════════════════════════════════════ */
.menu-drawer {
  background: rgba(255, 255, 255, 0.82) !important;
  -webkit-backdrop-filter: blur(28px) saturate(160%) !important;
  backdrop-filter: blur(28px) saturate(160%) !important;
  border-right: 1px solid rgba(255, 255, 255, 0.5) !important;
  box-shadow: 8px 0 40px rgba(0, 0, 0, 0.12) !important;
}

.menu-drawer__menu-item {
  font-size: 1.05rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.01em !important;
  padding-block: 14px !important;
  color: #1a1a1a !important;
  transition: color 0.2s !important;
}

.menu-drawer__menu-item:hover {
  color: #2f4b4f !important;
}

/* ═══════════════════════════════════════════════════════
   PREMIUM SEARCH OVERLAY
═══════════════════════════════════════════════════════ */
.search-modal__form input[type="search"],
.field__input[type="search"] {
  border-radius: 50px !important;
  padding-inline: 20px !important;
  font-size: 1rem !important;
}

.predictive-search__item {
  border-radius: 12px !important;
  transition: background 0.15s !important;
}
.predictive-search__item:hover {
  background: rgba(47, 75, 79, 0.06) !important;
}

/* ═══════════════════════════════════════════════════════
   PREMIUM CART PAGE
═══════════════════════════════════════════════════════ */
.cart__checkout-button,
button[name="checkout"] {
  background: linear-gradient(135deg, #2f4b4f 0%, #1d3134 100%) !important;
  color: #fff !important;
  border-radius: 50px !important;
  font-weight: 700 !important;
  letter-spacing: 0.03em !important;
  box-shadow: 0 6px 20px rgba(47,75,79,0.3) !important;
  transition: transform 0.15s, box-shadow 0.15s !important;
}
.cart__checkout-button:hover,
button[name="checkout"]:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 10px 28px rgba(47,75,79,0.35) !important;
}

.cart-item {
  border-bottom: 1px solid rgba(0,0,0,0.07) !important;
}


/* Hero Section */
.hero-slider__slide {
  background-size: cover;
  background-position: center;
  position: relative;
  min-height: 600px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--border-radius-card);
  margin: 15px;
  overflow: hidden;
}
.hero-slider__content {
  max-width: 540px;
  padding: 40px;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(10px);
  border-radius: 12px;
  margin-left: 50px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.05);
}
.hero-slider__eyebrow {
  font-size: 14px;
  text-transform: uppercase;
  color: var(--color-accent);
  font-weight: 600;
  margin-bottom: 12px;
  letter-spacing: 0.1em;
}
.hero-slider__title {
  font-size: 48px;
  line-height: 1.1;
  margin-bottom: 20px;
}
@media (max-width: 768px) {
  .hero-slider__slide {
    min-height: 380px;
    margin: 0;
  }
  .hero-slider__content {
    max-width: 100%;
    padding: 24px;
    margin-left: 0;
    margin-right: 0;
    width: calc(100% - 48px);
    border-radius: 8px;
  }
  .hero-slider__eyebrow {
    font-size: 12px;
    margin-bottom: 8px;
  }
  .hero-slider__title {
    font-size: 28px;
    line-height: 1.2;
    margin-bottom: 12px;
  }
  .hero-slider__description {
    font-size: 14px;
    line-height: 1.4;
  }
}

/* Collection Capsules (category circles row) */
.capsules-section {
  position: relative;
  background: var(--color-background);
  color: var(--color-foreground);
  border-bottom: 1px solid var(--color-border);
}
.capsule-list {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 28px 64px 24px;
  overflow-x: auto;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.capsule-list::-webkit-scrollbar { display: none; }
.capsule-item {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  cursor: pointer;
  min-width: 84px;
}
.capsule-item:hover .capsule-icon {
  transform: scale(1.06);
}
.capsule-icon {
  width: 84px;
  height: 84px;
  border-radius: 50%;
  background: #f4f3f1;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition);
  overflow: hidden;
}
.capsule-icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}
@media (max-width: 768px) {
  .capsules-section {
    padding: 12px 0;
  }
  .capsule-list {
    padding: 16px 12px;
    gap: 12px;
  }
  .capsule-item {
    min-width: 70px;
    gap: 8px;
  }
  .capsule-icon {
    width: 70px;
    height: 70px;
  }
  .capsule-name {
    font-size: 12px;
    font-weight: 600;
  }
}
.capsule-icon .placeholder-svg {
  width: 44px;
  height: 44px;
  opacity: 0.35;
}
.capsule-item--sale .capsule-icon {
  background: var(--color-accent);
}
.capsule-icon__text {
  color: #fff;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: 0.01em;
}
.capsule-name {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 14.5px;
  font-weight: 500;
  color: var(--color-primary);
  white-space: nowrap;
}
.capsule-name__chevron { flex-shrink: 0; margin-top: 1px; }
.capsules-arrow {
  position: absolute;
  top: 66px;
  transform: translateY(-50%);
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid var(--color-border);
  box-shadow: 0 2px 8px rgba(var(--color-base-text), 0.08);
  color: var(--color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 5;
  transition: var(--transition);
}
.capsules-arrow:hover { background: var(--color-secondary); }
.capsules-arrow--prev { left: 12px; }
.capsules-arrow--next { right: 12px; }
@media (max-width: 768px) {
  .capsules-arrow { display: none; }
  .capsule-list {
    padding: 20px 20px 18px;
    gap: 14px;
    scroll-snap-type: x mandatory;
  }
  .capsule-item {
    scroll-snap-align: center;
    min-width: 76px;
  }
  .capsule-icon {
    width: 76px;
    height: 76px;
    background: linear-gradient(135deg, #f8f7f5 0%, #efede9 100%);
    box-shadow: 0 4px 12px rgba(0,0,0,0.06), 0 1px 3px rgba(0,0,0,0.04);
    transition: all 0.3s ease;
  }
  .capsule-item--sale .capsule-icon {
    background: linear-gradient(135deg, var(--color-accent) 0%, #d4434a 100%);
    box-shadow: 0 4px 14px rgba(212, 67, 74, 0.25);
  }
  .capsule-icon__text {
    font-size: 15px;
    letter-spacing: 0.03em;
  }
  .capsule-name {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.02em;
  }
}

/* Tabbed Products Grid */
.tabbed-products__header {
  margin-bottom: 40px;
}
.tabbed-products__tab {
  font-family: var(--font-heading--family);
  font-size: 24px;
  color: var(--color-subtext);
  border-bottom: 2px solid transparent;
  padding-bottom: 6px;
  margin-right: 30px;
  cursor: pointer;
  transition: var(--transition);
}
.tabbed-products__tab.active {
  color: var(--color-primary);
  border-color: var(--color-primary);
}
.product-card {
  background: #ffffff;
  border-radius: var(--border-radius-card);
  padding: 16px;
  border: 1px solid var(--color-border);
  transition: var(--transition);
  position: relative;
}
.product-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 30px rgba(var(--color-base-text), 0.08);
}
.product-card__image {
  border-radius: 12px;
  overflow: hidden;
  background: var(--color-secondary);
  margin-bottom: 16px;
}
.product-card__title {
  font-family: var(--font-body--family);
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 8px;
}
.product-card__price {
  font-weight: 700;
  color: var(--color-primary);
  font-size: 15px;
}
.product-card__compare-at {
  text-decoration: line-through;
  color: var(--color-subtext);
  font-size: 13px;
  margin-left: 8px;
}
@media (max-width: 768px) {
  .tabbed-products__header {
    margin-bottom: 24px;
  }
  .tabbed-products__tab {
    font-size: 16px;
    margin-right: 20px;
    padding-bottom: 4px;
  }
  .product-card {
    padding: 12px;
  }
  .product-card__image {
    margin-bottom: 12px;
  }
  .product-card__title {
    font-size: 14px;
    margin-bottom: 6px;
  }
  .product-card__price {
    font-size: 14px;
  }
  .product-card__compare-at {
    font-size: 12px;
  }
}

/* Trust Bar / Perks */
.trust-bar {
  background-color: var(--color-secondary);
  padding: 40px 0;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}
.trust-bar__grid {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  gap: 20px;
}
.trust-bar__item {
  display: flex;
  align-items: center;
  gap: 12px;
  font-weight: 500;
  font-size: 15px;
}
@media (max-width: 768px) {
  .trust-bar {
    padding: 24px 0;
  }
  .trust-bar__grid {
    gap: 12px;
  }
  .trust-bar__item {
    font-size: 13px;
    gap: 8px;
    flex: 0 0 calc(50% - 6px);
  }
}

/* Interactive Bundle Builder */
.bundle-builder {
  background: #ffffff;
  padding: 80px 0;
}
.bundle-builder__container {
  max-width: 900px;
  margin: 0 auto;
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius-card);
  padding: 40px;
  box-shadow: 0 8px 32px rgba(var(--color-base-text), 0.05);
}
.bundle-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin: 30px 0;
}
.bundle-item {
  border: 2px solid var(--color-border);
  border-radius: 12px;
  padding: 20px;
  text-align: center;
  cursor: pointer;
  transition: var(--transition);
}
@media (max-width: 768px) {
  .bundle-builder {
    padding: 40px 0;
  }
  .bundle-builder__container {
    padding: 20px;
    margin: 0 12px;
  }
  .bundle-grid {
    grid-template-columns: 1fr;
    gap: 12px;
    margin: 20px 0;
  }
  .bundle-item {
    padding: 16px;
  }
}
  background: var(--color-secondary);
}
.bundle-item.selected {
  border-color: var(--color-primary);
  background: #edf4f6;
}
.bundle-item__checkbox {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid var(--color-subtext);
  margin: 0 auto 15px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.bundle-item.selected .bundle-item__checkbox {
  background: var(--color-primary);
  border-color: var(--color-primary);
}
.bundle-item.selected .bundle-item__checkbox::after {
  content: '✓';
  color: #fff;
  font-size: 12px;
  font-weight: bold;
}
.bundle-item__image {
  height: 120px;
  object-fit: contain;
  margin-bottom: 15px;
}
.bundle-summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid var(--color-border);
  padding-top: 25px;
  margin-top: 25px;
}
.bundle-price-box {
  text-align: left;
}
.bundle-price {
  font-size: 24px;
  font-weight: 700;
  color: var(--color-primary);
}

/* FAQ Accordion */
.faq-section {
  padding: 80px 0;
  background-color: var(--color-secondary);
}
.faq-container {
  max-width: 760px;
  margin: 0 auto;
}
.faq-item {
  background: #ffffff;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  margin-bottom: 12px;
  overflow: hidden;
}
.faq-question {
  width: 100%;
  padding: 20px;
  text-align: left;
  font-size: 16px;
  font-weight: 600;
  color: var(--color-primary);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.faq-question::after {
  content: '+';
  font-size: 20px;
  color: var(--color-subtext);
  transition: transform 0.2s;
}
.faq-item.active .faq-question::after {
  content: '-';
}
.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease-out;
  padding: 0 20px;
  color: var(--color-subtext);
  line-height: 1.6;
}
.faq-item.active .faq-answer {
  padding-bottom: 20px;
  max-height: 200px;
}
@media (max-width: 768px) {
  .faq-section {
    padding: 40px 0;
  }
  .faq-container {
    padding: 0 12px;
  }
  .faq-item {
    margin-bottom: 8px;
  }
  .faq-question {
    padding: 16px;
    font-size: 14px;
  }
  .faq-question::after {
    font-size: 18px;
  }
  .faq-answer {
    padding: 0 16px;
  }
  .faq-item.active .faq-answer {
    padding-bottom: 16px;
  }
}

/* Footer styling */
.footer {
  background-color: var(--color-primary);
  color: #ffffff;
  padding: 80px 0 40px;
}
.footer h3, .footer h4 {
  color: #ffffff;
}
.footer-grid {
  display: grid;
  grid-template-columns: 2fr repeat(3, 1fr);
  gap: 40px;
  margin-bottom: 60px;
}
.footer-col__nav a {
  display: block;
  margin-bottom: 10px;
  color: #b0c2cb;
  transition: var(--transition);
}
.footer-col__nav a:hover {
  color: #ffffff;
}
@media (max-width: 768px) {
  .footer {
    padding: 40px 0 24px;
  }
  .footer-grid {
    grid-template-columns: 1fr;
    gap: 24px;
    margin-bottom: 32px;
  }
  .footer-col__nav a {
    margin-bottom: 8px;
    font-size: 14px;
  }
}
.footer-bottom {
  border-top: 1px solid #14495e;
  padding-top: 30px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #8faebc;
  font-size: 14px;
}

/* ============================================================
   PREMIUM INTERACTION LAYER
   Unified motion language: one easing system, one hover
   vocabulary, scroll-reveal cascade, reduced-motion safety.
   ============================================================ */

:root {
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast: 0.25s;
  --dur-med: 0.5s;
  --dur-slow: 0.9s;
  --shadow-card-rest: 0 1px 2px rgba(var(--color-base-text), 0.04);
  --shadow-card-hover: 0 14px 40px -8px rgba(var(--color-base-text), 0.16), 0 4px 12px -4px rgba(var(--color-base-text), 0.08);
  --ring-accent: 0 0 0 3px rgba(var(--color-base-accent), 0.14);
}

/* --- Selection + focus: small details that read as intentional --- */
::selection {
  background: rgba(var(--color-base-accent), 0.16);
  color: var(--color-primary);
}
:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 3px;
  border-radius: 4px;
}

/* --- Scroll-reveal cascade (driven by theme.js) --- */
.pre-reveal {
  opacity: 0;
  transform: translateY(26px);
  transition:
    opacity var(--dur-slow) var(--ease-out),
    transform var(--dur-slow) var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
}
.pre-reveal.animate-in {
  opacity: 1;
  transform: none;
}

/* --- Unified card hover: gentle lift + layered shadow --- */
.product-card:hover,
.trending-card:hover,
.trending-now-card:hover,
.countdown-cat-card:hover,
.essentials-prod-card:hover,
.bundle-prod-card:hover,
.review-grid-card:hover,
.video-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-card-hover);
}

/* --- Image zoom: slow, cinematic, consistent everywhere --- */
.product-card__image-wrap img,
.collection-card__image-wrap img,
.trending-now-card img,
.countdown-cat-card img,
.essentials-prod-card img,
.promo-card-v2__bg {
  transition: transform 1.2s var(--ease-out);
}
.product-card:hover .product-card__image-wrap img,
.collection-card:hover .collection-card__image-wrap img,
.trending-now-card:hover img,
.countdown-cat-card:hover img,
.essentials-prod-card:hover img {
  transform: scale(1.06);
}
.promo-card-v2:hover .promo-card-v2__bg {
  transform: scale(1.05);
}

/* --- Hero: staggered content entrance per slide --- */
.hero-slide__content > * {
  opacity: 0;
  transform: translateY(22px);
}
.hero-slide.is-active .hero-slide__content > * {
  animation: heroRise 0.85s var(--ease-out) both;
}
.hero-slide.is-active .hero-slide__content > :nth-child(1) { animation-delay: 0.05s; }
.hero-slide.is-active .hero-slide__content > :nth-child(2) { animation-delay: 0.16s; }
.hero-slide.is-active .hero-slide__content > :nth-child(3) { animation-delay: 0.27s; }
.hero-slide.is-active .hero-slide__content > :nth-child(4) { animation-delay: 0.38s; }
@keyframes heroRise {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: translateY(0); }
}
.hero-slide__image-wrap img {
  transition: transform 1.6s var(--ease-out);
}
.hero-slide:hover .hero-slide__image-wrap img {
  transform: scale(1.03);
}

/* --- Hero controls: livelier active bar --- */
.hero-slideshow__dot {
  transition: all 0.45s var(--ease-out);
}
.hero-slideshow__dot:hover {
  background: var(--color-primary, #072835);
  transform: scale(1.3);
}
.hero-slideshow__dot.is-active:hover { transform: none; }
.hero-slideshow__arrow {
  transition: transform var(--dur-fast) var(--ease-out), opacity var(--dur-fast) ease;
}
.hero-slideshow__arrow:hover {
  opacity: 1;
  transform: scale(1.18);
}

/* --- Buttons: lift + shadow + press state --- */
.btn {
  transition:
    transform var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-fast) var(--ease-out),
    background-color var(--dur-fast) ease,
    color var(--dur-fast) ease,
    border-color var(--dur-fast) ease;
}
.btn--primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px -6px rgba(var(--color-base-text), 0.35);
}
.btn--primary:active,
.btn--secondary:active {
  transform: translateY(0) scale(0.98);
  box-shadow: none;
}
.btn--secondary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px -6px rgba(var(--color-base-text), 0.18);
}

/* --- Category capsules: ring + lift + label shift --- */
.capsule-item .capsule-icon {
  transition:
    transform 0.45s var(--ease-out),
    box-shadow 0.45s var(--ease-out);
}
.capsule-item:hover .capsule-icon {
  transform: translateY(-4px) scale(1.05);
  box-shadow: 0 10px 24px -6px rgba(var(--color-base-text), 0.18);
}
.capsule-item--sale:hover .capsule-icon {
  box-shadow: 0 10px 24px -6px rgba(var(--color-base-accent), 0.4), var(--ring-accent);
}
.capsule-item .capsule-name {
  transition: color var(--dur-fast) ease;
}
.capsule-item:hover .capsule-name {
  color: var(--color-accent, #c4301c);
}
.capsules-arrow {
  transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) ease, background var(--dur-fast) ease;
}
.capsules-arrow:hover {
  transform: scale(1.1);
  box-shadow: 0 6px 16px rgba(var(--color-base-text), 0.14);
}

/* --- Header: underline slide for utility links, icon feedback --- */
.utility-bar__links a {
  position: relative;
  transition: opacity var(--dur-fast) ease;
}
.utility-bar__links a::after {
  content: '';
  position: absolute;
  left: 0;
  right: 100%;
  bottom: -2px;
  height: 1px;
  background: currentColor;
  transition: right 0.3s var(--ease-out);
}
.utility-bar__links a:hover { text-decoration: none; }
.utility-bar__links a:hover::after { right: 0; }
.site-header__icon-btn,
.site-header__action {
  transition: transform var(--dur-fast) var(--ease-out), opacity var(--dur-fast) ease;
}
.site-header__icon-btn:hover,
.site-header__action:hover {
  transform: translateY(-1px);
  opacity: 0.75;
}
.cart-count {
  transition: transform 0.3s var(--ease-out);
}
.site-header__icon-btn:hover .cart-count {
  transform: scale(1.12);
}

/* --- Nav: smooth dropdown --- */
.site-nav__dropdown {
  transition: opacity 0.28s var(--ease-out), transform 0.28s var(--ease-out);
}

/* --- Collection cards: arrow slide --- */
.collection-card__arrow {
  transition: transform 0.35s var(--ease-out), background 0.35s ease, color 0.35s ease;
}
.collection-card:hover .collection-card__arrow {
  transform: translate(2px, -2px);
}

/* --- Trending / list card arrows nudge --- */
.trending-card__arrow,
.trending-now-card__arrow {
  transition: transform 0.3s var(--ease-out);
}
.trending-card:hover .trending-card__arrow,
.trending-now-card:hover .trending-now-card__arrow {
  transform: translateX(3px);
}
@media (max-width: 768px) {
  .trending-card__arrow {
    display: none;
  }
}

/* --- FAQ: smoother open feel --- */
.faq-item__trigger,
.faq-item__question {
  transition: color var(--dur-fast) ease, background var(--dur-fast) ease;
}
.faq-item__icon {
  transition: transform 0.4s var(--ease-out);
}

/* --- Footer social circles: lift --- */
.social-circle,
.site-footer__social-link {
  transition: transform var(--dur-fast) var(--ease-out), background var(--dur-fast) ease, color var(--dur-fast) ease, border-color var(--dur-fast) ease;
}
.social-circle:hover,
.site-footer__social-link:hover {
  transform: translateY(-3px);
}

/* --- Announcement ticker: pause on hover so it stays readable --- */
.announcement-bar:hover .announcement-bar__track {
  animation-play-state: paused;
}

/* --- Compositing niceties --- */
.hero-slide__image-wrap,
.promo-card-v2,
.collection-card__image-wrap {
  transform: translateZ(0);
  backface-visibility: hidden;
}

/* --- Reduced motion: respect the user, kill the choreography --- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .pre-reveal {
    opacity: 1;
    transform: none;
  }
  .hero-slide__content > * {
    opacity: 1;
    transform: none;
    animation: none !important;
  }
  .announcement-bar__track {
    animation: none !important;
  }
}

/* ============================================================
   SIGNATURE INTERACTIONS
   (Originally ported in from another storefront's theme.css; the rules below
   are self-contained and load nothing from outside this shop.)
   - Button fill-sweep (.4s ease color flip)
   - Product card dual-image crossfade (1.2s / .85s cubic)
   - Quick-add reveal from image bottom (.54s cubic)
   - Rotating close icons, scaling social icons
   - text-underlined sweep on view-all links
   ============================================================ */

/* --- Button fill-sweep: inverse color slides in from the left,
       text flips color. The original theme's signature move. --- */
.btn {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.btn--primary::before,
.btn--secondary::before,
.btn--white::before {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  width: 0;
  z-index: -1;
  border-radius: inherit;
  transition: width 0.4s ease;
}
.btn--primary::before { background-color: #ffffff; }
.btn--secondary::before { background-color: var(--color-primary, #072835); }
.btn--white::before { background-color: var(--color-primary, #072835); }

@media (hover: hover) and (pointer: fine) {
  .btn--primary:hover::before,
  .btn--secondary:hover::before,
  .btn--white:hover::before {
    width: 100%;
  }
  /* Text color flips as the sweep covers the button */
  .btn--primary:hover {
    background: var(--color-primary, #072835);
    border-color: var(--color-primary, #072835);
    color: var(--color-primary, #072835);
    transform: none;
    box-shadow: none;
  }
  .btn--secondary:hover {
    background: var(--color-secondary, #f6f6f6);
    color: #ffffff;
    transform: none;
    box-shadow: none;
  }
  .btn--white:hover {
    background: #ffffff;
    color: #ffffff;
    border-color: #ffffff;
    transform: none;
    box-shadow: none;
  }
}
.btn:active {
  transform: scale(0.98);
}

/* --- Product card: dual-image crossfade --- */
.product-card__image-wrap .product-card__image--main {
  transition: opacity 1.2s ease;
}
.product-card__image-wrap .product-card__image--second {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transform: scale3d(1.08, 1.08, 1);
  transition: 0.85s cubic-bezier(0.4, 0, 0.2, 1);
}
.product-card__image-wrap:hover:not(.product-card__image-wrap--main-only) .product-card__image--main {
  opacity: 0;
}
.product-card__image-wrap:hover .product-card__image--second {
  opacity: 1;
  visibility: visible;
  transform: scale3d(1, 1, 1);
}
/* Single-image products keep a soft zoom instead */
.product-card__image-wrap--main-only:hover .product-card__image--main {
  transform: scale(1.06);
}
.product-card__image-wrap--main-only .product-card__image--main {
  transition: transform 0.85s cubic-bezier(0.4, 0, 0.2, 1);
}

/* --- Quick-add: floating pill button reveals from image bottom --- */
.product-card__actions {
  background: none;
  inset-inline: 16px;
  left: 16px;
  right: 16px;
  bottom: 16px;
  top: auto;
  padding: 0;
  opacity: 0;
  transform: translateY(10px);
  transition: 0.3s all, 0.54s transform cubic-bezier(0.4, 0, 0.2, 1), 0.54s opacity cubic-bezier(0.4, 0, 0.2, 1);
}
.product-card:hover .product-card__actions,
.product-card__image-wrap:hover .product-card__actions {
  opacity: 1;
  transform: none;
}
.product-card__actions .btn {
  width: 100%;
  box-shadow: 0 4px 14px rgba(var(--color-base-text), 0.18);
}

/* --- Rotating close icons (drawer, modal, item remove) --- */
.cart-drawer__close svg,
.search-modal__close svg,
.mobile-menu__close svg,
.cart-drawer__item-remove svg {
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.cart-drawer__close:hover svg,
.search-modal__close:hover svg,
.mobile-menu__close:hover svg,
.cart-drawer__item-remove:hover svg {
  transform: rotate(180deg);
}

/* --- Social icons scale (original: scale 1.1 on hover) --- */
@media (hover: hover) {
  .utility-bar__social a:hover svg,
  .social-circle:hover svg,
  .site-footer__social-link:hover svg {
    transform: scale(1.1);
  }
  .utility-bar__social a svg,
  .social-circle svg,
  .site-footer__social-link svg {
    transition: transform 0.2s ease;
  }
}

/* --- View-all links: text-underlined sweep --- */
.trending-now__view-all,
.trending-list__view-all,
.brands-grid__view-all,
.essentials-carousel__view-all,
.tabbed-products__view-all {
  --transform-origin-start: left;
  --transform-origin-end: right;
  position: relative;
}
.trending-now__view-all::after,
.trending-list__view-all::after,
.brands-grid__view-all::after,
.essentials-carousel__view-all::after,
.tabbed-products__view-all::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: var(--transform-origin-start);
}
.trending-now__view-all:hover::after,
.trending-list__view-all:hover::after,
.brands-grid__view-all:hover::after,
.essentials-carousel__view-all:hover::after,
.tabbed-products__view-all:hover::after {
  transform: scaleX(1);
  animation: text-underlined 0.6s;
}
@keyframes text-underlined {
  0% { transform: scaleX(1); transform-origin: var(--transform-origin-end); }
  50% { transform: scaleX(0); transform-origin: var(--transform-origin-end); }
  51% { transform-origin: var(--transform-origin-start); }
  100% { transform: scaleX(1); }
}

/* --- Original keyframe library (available to sections) --- */
@keyframes zoom-fade {
  0% { opacity: 0; transform: scale(1.2); }
  50% { opacity: 1; }
  100% { opacity: 1; transform: scale(1); }
}
@keyframes move-up-down {
  0% { transform: translateY(0.8rem); }
  100% { transform: translateY(-0.8rem); }
}

/* --- Hero image: zoom-fade entrance on the wrapper (once per load) --- */
.hero-slide__image-wrap {
  animation: hero-zoom-fade 1.2s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes hero-zoom-fade {
  0% { opacity: 0; transform: scale(1.06); }
  60% { opacity: 1; }
  100% { opacity: 1; transform: scale(1); }
}

/* --- Reduced motion: also silence the ported effects --- */
@media (prefers-reduced-motion: reduce) {
  .product-card__actions {
    opacity: 1;
    transform: none;
  }
  .hero-slide__image-wrap {
    animation: none;
  }
}

/* --- Essentials carousel: crossfade + quick-add (ported) --- */
.essentials-img--main {
  transition: opacity 1.2s ease;
}
.essentials-img--second {
  position: absolute;
  inset: 0;
  margin: auto;
  max-width: 90%;
  max-height: 90%;
  object-fit: contain;
  opacity: 0;
  visibility: hidden;
  transform: scale3d(1.08, 1.08, 1);
  transition: 0.85s cubic-bezier(0.4, 0, 0.2, 1);
}
.essentials-prod-card__img-wrap:hover:not(.essentials-img--main-only) .essentials-img--main {
  opacity: 0;
}
.essentials-prod-card__img-wrap:hover .essentials-img--second {
  opacity: 1;
  visibility: visible;
  transform: scale3d(1, 1, 1);
}
.essentials-img--main-only:hover .essentials-img--main {
  transform: scale(1.06);
}
.essentials-img--main-only .essentials-img--main {
  transition: transform 0.85s cubic-bezier(0.4, 0, 0.2, 1);
}
.essentials-prod-card__actions {
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 10px;
  z-index: 3;
  opacity: 0;
  transform: translateY(10px);
  transition: 0.3s all, 0.54s transform cubic-bezier(0.4, 0, 0.2, 1), 0.54s opacity cubic-bezier(0.4, 0, 0.2, 1);
}
.essentials-prod-card:hover .essentials-prod-card__actions {
  opacity: 1;
  transform: none;
}
.essentials-prod-card__actions .btn {
  width: 100%;
  padding: 10px 16px;
  font-size: 12px;
  box-shadow: 0 4px 14px rgba(var(--color-base-text), 0.18);
  text-align: center;
  justify-content: center;
}
@media (prefers-reduced-motion: reduce) {
  .essentials-prod-card__actions {
    opacity: 1;
    transform: none;
  }
}

/* ============================================================
   FOOTER (site-footer*)
   Mobile-first: trust bar scrolls horizontally, link columns
   collapse to accordions, bottom bar stacks. Desktop = grid.
   ============================================================ */

.site-footer {
  background: var(--color-footer-bg, #0e2a35);
  color: var(--color-footer-text, #b0c2cb);
  font-size: 14px;
  line-height: 1.6;
  padding: 28px 0 24px;
}

.site-footer > * + * { margin-top: 0; }

/* Containers */
.footer-trust-container,
.footer-main-container,
.footer-bottom-container {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 20px;
}

/* ---------- Trust bar (top): horizontal scroll-snap on mobile ---------- */
.footer-trust-bar { padding: 4px 0 20px; }

.footer-trust-container {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 78%;
  gap: 12px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding-bottom: 6px;
}
.footer-trust-container::-webkit-scrollbar { display: none; }

.footer-trust-item {
  scroll-snap-align: start;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 14px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  min-height: 64px;
}
.footer-trust-icon {
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
  color: var(--color-footer-text, #b0c2cb);
}
.footer-trust-icon svg { width: 20px; height: 20px; }
.footer-trust-content { display: flex; flex-direction: column; min-width: 0; }
.footer-trust-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-footer-link-hover, #ffffff);
  letter-spacing: 0.01em;
}
.footer-trust-text {
  font-size: 12.5px;
  color: var(--color-footer-text, #b0c2cb);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Divider */
.footer-divider-container { padding: 0 20px; }
.footer-divider {
  height: 1px;
  background: rgba(255, 255, 255, 0.08);
  max-width: 1280px;
  margin: 0 auto;
}

/* ---------- Main bar: newsletter + links ---------- */
.footer-main-bar { padding: 24px 0 8px; }

.footer-main-container {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* Newsletter */
.footer-newsletter__title {
  font-family: var(--font-heading--family);
  font-size: 20px;
  font-weight: 500;
  color: var(--color-footer-link-hover, #ffffff);
  margin: 0 0 6px;
  letter-spacing: -0.01em;
}
.footer-newsletter__subtitle {
  margin: 0 0 14px;
  font-size: 13.5px;
  color: var(--color-footer-text, #b0c2cb);
}
.footer-newsletter__form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.footer-newsletter__input {
  width: 100%;
  height: 44px;
  padding: 0 14px;
  border-radius: var(--border-radius-btn, 8px);
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.04);
  color: var(--color-footer-link-hover, #ffffff);
  font: inherit;
  font-size: 14px;
  outline: none;
  transition: border-color 0.2s var(--ease-smooth, ease);
}
.footer-newsletter__input::placeholder { color: rgba(255, 255, 255, 0.45); }
.footer-newsletter__input:focus-visible {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(var(--color-base-accent), 0.25);
}
.footer-newsletter__btn {
  width: 100%;
  height: 44px;
  border: 0;
  border-radius: var(--border-radius-btn, 8px);
  background: var(--color-primary);
  color: #fff;
  font: inherit;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  transition: transform 0.15s var(--ease-out, ease), background 0.2s;
}
.footer-newsletter__btn:hover { background: var(--color-accent); }
.footer-newsletter__btn:active { transform: scale(0.98); }
.footer-newsletter__disclaimer {
  margin: 10px 0 0;
  font-size: 11.5px;
  color: rgba(255, 255, 255, 0.55);
  line-height: 1.5;
}
.footer-newsletter__disclaimer a {
  color: var(--color-footer-link, #b0c2cb);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Link columns: accordion on mobile */
.footer-links-grid {
  display: flex;
  flex-direction: column;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.footer-link-col {
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.footer-link-col__title {
  margin: 0;
  font-family: var(--font-body--family);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-footer-link-hover, #ffffff);
}
.footer-link-col__toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 16px 4px;
  background: none;
  border: 0;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  min-height: 48px;
  -webkit-tap-highlight-color: transparent;
}
.footer-link-col__toggle:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
  border-radius: 4px;
}
.footer-link-col__chevron {
  flex: 0 0 12px;
  width: 12px;
  height: 12px;
  color: var(--color-footer-text, #b0c2cb);
  transition: transform 0.25s var(--ease-out, ease);
}
.footer-link-col__toggle[aria-expanded="true"] .footer-link-col__chevron {
  transform: rotate(180deg);
}
.footer-link-col__list {
  list-style: none;
  margin: 0;
  padding: 0 4px 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.32s var(--ease-out, ease);
}
.footer-link-col__list li { margin: 0; }
.footer-link-col__list a {
  display: inline-block;
  padding: 4px 0;
  font-size: 14px;
  color: var(--color-footer-link, #b0c2cb);
  transition: color 0.15s ease;
  min-height: 28px;
}
.footer-link-col__list a:hover,
.footer-link-col__list a:focus-visible {
  color: var(--color-footer-link-hover, #ffffff);
}
.footer-link-col__list a:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ---------- Bottom bar: stack on mobile ---------- */
.footer-bottom-bar { padding: 18px 0 4px; }

.footer-bottom-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  text-align: center;
}

.footer-bottom-left,
.footer-bottom-right {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  width: 100%;
}

/* Currency selector */
.footer-currency-selector {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  font-size: 13px;
  color: var(--color-footer-text, #b0c2cb);
  background: rgba(255, 255, 255, 0.03);
  min-height: 40px;
  cursor: pointer;
}
.flag-icon { font-size: 16px; line-height: 1; }
.currency-chevron {
  width: 8px;
  height: 8px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  margin-left: 2px;
  margin-top: -2px;
}

/* Payment badges */
.footer-payment-icons {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
}
.pay-badge {
  display: inline-grid;
  place-items: center;
  min-width: 42px;
  height: 26px;
  padding: 0 8px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  background: #ffffff;
  color: #111;
  border-radius: 4px;
  border: 1px solid rgba(255, 255, 255, 0.4);
}
.pay-badge.mastercard { background: linear-gradient(90deg, #eb001b 50%, #f79e1b 50%); color: #fff; }
.pay-badge.amex { background: #2e77bb; color: #fff; }
.pay-badge.paypal { background: #003087; color: #ffc439; }
.pay-badge.discover { background: #ff6000; color: #fff; }
.pay-badge.diners { background: #0079be; color: #fff; }

/* Copyright */
.footer-copyright {
  margin: 0;
  font-size: 12.5px;
  color: rgba(255, 255, 255, 0.55);
}

/* Social icons — 44px tap targets */
.footer-social-icons {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}
.social-circle {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: var(--color-footer-link-hover, #ffffff);
  background: rgba(255, 255, 255, 0.03);
  transition: background 0.2s, border-color 0.2s, transform 0.15s var(--ease-out, ease);
}
.social-circle:hover {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
}
.social-circle:active { transform: scale(0.94); }
.social-circle:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 3px;
}

/* Legal links */
.footer-legal-links {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  justify-content: center;
  font-size: 12.5px;
}
.footer-legal-links a {
  color: var(--color-footer-link, #b0c2cb);
  padding: 4px 0;
  min-height: 28px;
  display: inline-flex;
  align-items: center;
}
.footer-legal-links a:hover { color: var(--color-footer-link-hover, #ffffff); }

/* ---------- Tablet (≥ 600px) ---------- */
@media (min-width: 600px) {
  .footer-trust-container {
    grid-auto-columns: 42%;
    gap: 14px;
  }
  .footer-newsletter__form {
    flex-direction: row;
    align-items: stretch;
  }
  .footer-newsletter__input { flex: 1 1 auto; }
  .footer-newsletter__btn { width: auto; padding: 0 22px; }
}

/* ---------- Desktop (≥ 900px) ---------- */
@media (min-width: 900px) {
  .site-footer { padding: 56px 0 32px; }

  /* Trust bar: 4 across, no scroll */
  .footer-trust-container {
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    overflow: visible;
    gap: 32px;
    padding: 0 20px;
  }
  .footer-trust-item {
    background: transparent;
    border: 0;
    padding: 0;
    min-height: 0;
  }
  .footer-trust-icon {
    width: 40px;
    height: 40px;
    flex-basis: 40px;
  }
  .footer-trust-text { white-space: normal; }

  /* Main bar: side-by-side */
  .footer-main-container {
    display: grid;
    grid-template-columns: minmax(280px, 1fr) 2fr;
    gap: 56px;
    align-items: start;
  }
  .footer-newsletter { padding-right: 16px; }
  .footer-newsletter__title { font-size: 22px; }

  /* Link columns: static grid, no accordion */
  .footer-links-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
    border-top: 0;
  }
  .footer-link-col { border-bottom: 0; }
  .footer-link-col__toggle {
    cursor: default;
    padding: 0 0 14px;
    pointer-events: none;
    min-height: 0;
  }
  .footer-link-col__chevron { display: none; }
  .footer-link-col__list {
    max-height: none;
    overflow: visible;
    padding: 0;
    gap: 10px;
  }

  /* Bottom bar: row */
  .footer-bottom-container {
    flex-direction: row;
    justify-content: space-between;
    text-align: left;
    align-items: center;
    gap: 24px;
  }
  .footer-bottom-left,
  .footer-bottom-right {
    flex-direction: row;
    align-items: center;
    width: auto;
  }
  .footer-currency-selector { margin-right: 8px; }
  .footer-payment-icons { justify-content: flex-start; }
  .footer-social-icons { justify-content: flex-end; }
  .footer-legal-links { justify-content: flex-end; }
  .footer-copyright { margin-left: 12px; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .footer-link-col__chevron,
  .footer-link-col__list,
  .footer-newsletter__input,
  .footer-newsletter__btn,
  .social-circle { transition: none; }
  .footer-link-col__toggle[aria-expanded="true"] .footer-link-col__chevron {
    transform: none;
  }
}

/* ============================================================
   PREMIUM SEARCH PAGE — MOBILE
   ============================================================ */
@media (max-width: 749px) {
  /* Search header: center the input, add breathing room */
  .search-page__header {
    padding: 16px 16px 0 !important;
  }
  .search-page__header .search-input {
    border-radius: 50px !important;
    padding: 14px 20px 14px 48px !important;
    font-size: 1rem !important;
    background: rgba(0,0,0,0.03) !important;
    border: 1.5px solid rgba(0,0,0,0.08) !important;
    transition: border-color 0.2s, box-shadow 0.2s !important;
  }
  .search-page__header .search-input:focus,
  .search-page__header .search-input:focus-visible {
    border-color: #2f4b4f !important;
    box-shadow: 0 0 0 3px rgba(47,75,79,0.12) !important;
    outline: none !important;
  }
  .search-page__header .predictive-search__icon {
    left: 18px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    color: #999 !important;
  }

  /* Results grid: 2 columns on mobile with premium cards */
  .product-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
    padding: 0 16px !important;
  }

  /* Product cards inside search results */
  .product-grid__item {
    background: #fff !important;
    border-radius: 14px !important;
    overflow: hidden !important;
    box-shadow: 0 2px 12px rgba(0,0,0,0.06) !important;
    transition: transform 0.25s ease, box-shadow 0.25s ease !important;
  }
  .product-grid__item:active {
    transform: scale(0.98) !important;
  }

  /* Product card image */
  .product-grid__item .product-card__image-wrap {
    background: #f8f6f3 !important;
  }
  .product-grid__item img {
    transition: transform 0.4s ease !important;
  }
  .product-grid__item:active img {
    transform: scale(1.04) !important;
  }

  /* Product card info */
  .product-grid__item .product-card__info {
    padding: 10px 12px 14px !important;
  }
  .product-grid__item .product-card__title {
    font-size: 14px !important;
    font-weight: 500 !important;
    line-height: 1.3 !important;
    margin-bottom: 4px !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
  }
  .product-grid__item .product-card__type {
    font-size: 10px !important;
    letter-spacing: 0.06em !important;
    color: #999 !important;
    text-transform: uppercase !important;
    margin-bottom: 2px !important;
  }
  .product-grid__item .price {
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #1a1a1a !important;
  }
  .product-grid__item .price--sale {
    color: #e85d04 !important;
  }
  .product-grid__item .price--compare {
    font-size: 12px !important;
    color: #aaa !important;
    text-decoration: line-through !important;
  }

  /* Badges */
  .product-grid__item .badge {
    position: absolute !important;
    top: 8px !important;
    left: 8px !important;
    padding: 3px 8px !important;
    border-radius: 6px !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    letter-spacing: 0.04em !important;
    z-index: 2 !important;
  }
  .product-grid__item .badge--sale {
    background: #e85d04 !important;
    color: #fff !important;
  }

  /* Filter/sort bar on mobile */
  .collection-wrapper .facets-horizontal {
    padding: 0 16px !important;
    margin-bottom: 4px !important;
  }
  .collection-wrapper .facets-horizontal__inner {
    gap: 6px !important;
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    padding-bottom: 4px !important;
  }
  .collection-wrapper .facets-horizontal__inner::-webkit-scrollbar {
    display: none !important;
  }
  .collection-wrapper .facets-horizontal .facets__button {
    white-space: nowrap !important;
    padding: 6px 14px !important;
    border-radius: 50px !important;
    border: 1px solid rgba(0,0,0,0.1) !important;
    background: #fff !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    transition: all 0.2s !important;
  }
  .collection-wrapper .facets-horizontal .facets__button--active {
    background: #2f4b4f !important;
    border-color: #2f4b4f !important;
    color: #fff !important;
  }

  /* Empty search state */
  .search-empty {
    text-align: center !important;
    padding: 40px 24px !important;
  }
  .search-empty h2 {
    font-size: 20px !important;
    font-weight: 500 !important;
    margin-bottom: 8px !important;
  }
  .search-empty p {
    font-size: 14px !important;
    color: #888 !important;
  }

  /* Pagination / load more */
  .product-grid-container .pagination {
    padding: 0 16px 24px !important;
  }
  .product-grid-container .pagination .button {
    border-radius: 50px !important;
    font-weight: 600 !important;
  }
}

/* ============================================================
   PREMIUM MOBILE MENU DRAWER — ENHANCED
   ============================================================ */
@media (max-width: 749px) {
  /* Frosted glass background for the drawer panel */
  .menu-drawer {
    background: rgba(255, 255, 255, 0.92) !important;
    -webkit-backdrop-filter: blur(32px) saturate(180%) !important;
    backdrop-filter: blur(32px) saturate(180%) !important;
    width: 88vw !important;
    max-width: 400px !important;
    box-shadow: 8px 0 48px rgba(0, 0, 0, 0.15) !important;
    border-right: 1px solid rgba(255, 255, 255, 0.6) !important;
  }

  /* Drawer slides in smoothly */
  .menu-drawer[open] {
    animation: drawer-slide-in 0.35s cubic-bezier(0.22, 1, 0.36, 1) forwards !important;
  }
  @keyframes drawer-slide-in {
    from { transform: translateX(-100%); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
  }

  /* Close button styling */
  .menu-drawer__close-button {
    position: absolute !important;
    top: 12px !important;
    right: 12px !important;
    z-index: 5 !important;
    width: 40px !important;
    height: 40px !important;
    border-radius: 50% !important;
    background: rgba(0, 0, 0, 0.04) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: background 0.2s, transform 0.2s !important;
  }
  .menu-drawer__close-button:hover {
    background: rgba(0, 0, 0, 0.08) !important;
    transform: rotate(90deg) !important;
  }

  /* Navigation spacing */
  .menu-drawer__navigation {
    padding: 56px 20px 24px !important;
  }

  /* Top-level menu items */
  .menu-drawer__menu-item--mainlist {
    font-size: 1.1rem !important;
    font-weight: 700 !important;
    letter-spacing: -0.01em !important;
    padding-block: 16px !important;
    color: #1a1a1a !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05) !important;
    transition: color 0.2s, padding-left 0.2s !important;
  }
  .menu-drawer__menu-item--mainlist:hover {
    color: #2f4b4f !important;
    padding-left: 4px !important;
  }

  /* Accordion / submenu caret styling */
  .menu-drawer__menu-item .icon-plus svg,
  .menu-drawer__menu-item .icon-caret svg {
    width: 16px !important;
    height: 16px !important;
    transition: transform 0.25s ease !important;
  }
  .menu-drawer__menu-container[open] .menu-drawer__menu-item .icon-caret svg {
    transform: rotate(90deg) !important;
  }

  /* Submenu items (child links) */
  .menu-drawer__menu-item--child {
    font-size: 0.95rem !important;
    font-weight: 500 !important;
    padding-block: 12px !important;
    color: #555 !important;
    transition: color 0.2s, padding-left 0.2s !important;
  }
  .menu-drawer__menu-item--child:hover {
    color: #2f4b4f !important;
    padding-left: 8px !important;
  }

  /* Parent items in submenu */
  .menu-drawer__menu-item--parent {
    font-size: 1rem !important;
    font-weight: 600 !important;
    padding-block: 14px !important;
    color: #333 !important;
    border-bottom: 1px solid rgba(0,0,0,0.04) !important;
  }
  .menu-drawer__menu-item--parent:hover {
    color: #2f4b4f !important;
  }

  /* Back button in nested menus */
  .menu-drawer__back-button {
    font-size: 0.95rem !important;
    font-weight: 600 !important;
    padding: 10px 0 !important;
    color: #2f4b4f !important;
    gap: 6px !important;
  }
  .menu-drawer__back-button svg {
    width: 18px !important;
    height: 18px !important;
  }

  /* Submenu containers */
  .menu-drawer__submenu {
    background: rgba(255, 255, 255, 0.96) !important;
    -webkit-backdrop-filter: blur(24px) !important;
    backdrop-filter: blur(24px) !important;
  }

  /* Divider between menu items */
  .menu-drawer__list-item--divider {
    border-bottom: 1px solid rgba(0, 0, 0, 0.05) !important;
  }

  /* Active menu item indicator */
  .menu-drawer__menu-item--active {
    color: #2f4b4f !important;
    position: relative !important;
  }
  .menu-drawer__menu-item--active::before {
    content: '' !important;
    position: absolute !important;
    left: -20px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 3px !important;
    height: 20px !important;
    background: #2f4b4f !important;
    border-radius: 0 3px 3px 0 !important;
  }

  /* Staggered animation for menu items */
  .menu-drawer__animated-element {
    opacity: 0 !important;
    animation: menu-item-fade 0.4s ease forwards !important;
  }
  .menu-drawer__animated-element:nth-child(1) { animation-delay: 0.05s !important; }
  .menu-drawer__animated-element:nth-child(2) { animation-delay: 0.08s !important; }
  .menu-drawer__animated-element:nth-child(3) { animation-delay: 0.11s !important; }
  .menu-drawer__animated-element:nth-child(4) { animation-delay: 0.14s !important; }
  .menu-drawer__animated-element:nth-child(5) { animation-delay: 0.17s !important; }
  .menu-drawer__animated-element:nth-child(6) { animation-delay: 0.20s !important; }
  .menu-drawer__animated-element:nth-child(7) { animation-delay: 0.23s !important; }
  .menu-drawer__animated-element:nth-child(8) { animation-delay: 0.26s !important; }
  .menu-drawer__animated-element:nth-child(9) { animation-delay: 0.29s !important; }
  .menu-drawer__animated-element:nth-child(10) { animation-delay: 0.32s !important; }

  @keyframes menu-item-fade {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
  }

  /* Grandchild links: smallest size */
  .menu-drawer__menu--grandchildlist .menu-drawer__menu-item--child {
    font-size: 0.9rem !important;
    padding-block: 10px !important;
    padding-left: 16px !important;
    color: #666 !important;
  }
}

/* ============================================================
   PREMIUM SEARCH OVERLAY — MOBILE ENHANCEMENTS
   ============================================================ */
@media (max-width: 749px) {
  /* Full-screen search modal on mobile */
  .search-modal__content {
    width: 100dvw !important;
    height: 100dvh !important;
    margin: 0 !important;
    border-radius: 0 !important;
    border: none !important;
    background: rgba(255, 255, 255, 0.96) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    backdrop-filter: blur(20px) !important;
  }

  .search-modal__content .predictive-search-form__header {
    padding: 16px 16px 8px !important;
    border-bottom: 1px solid rgba(0,0,0,0.06) !important;
  }

  .search-modal__content .search-input {
    border-radius: 50px !important;
    padding: 14px 20px 14px 48px !important;
    font-size: 1rem !important;
    background: rgba(0,0,0,0.04) !important;
    border: 1.5px solid transparent !important;
    transition: border-color 0.2s !important;
  }
  .search-modal__content .search-input:focus {
    border-color: #2f4b4f !important;
    background: #fff !important;
  }

  /* Predictive search results on mobile */
  .predictive-search-results__inner {
    padding: 8px 16px !important;
  }
  .predictive-search__item {
    padding: 12px !important;
    border-radius: 12px !important;
    margin-bottom: 4px !important;
  }

  /* Search suggestions highlight */
  .predictive-search__item--term {
    font-weight: 600 !important;
    color: #2f4b4f !important;
  }
}