/** Shopify CDN: Minification failed

Line 616:19 Unexpected "*"

**/
/* ============================================================
   KAYA. — Brand CSS Overrides
   Applied on top of Dawn theme defaults via theme.liquid
   ============================================================ */

/* --- Typography ------------------------------------------- */
:root {
  --font-heading-family: 'Figtree', sans-serif;
  --font-heading-style: normal;
  --font-heading-weight: 500;
  --font-body-family: 'Figtree', sans-serif;
  --font-body-style: normal;
  --font-body-weight: 400;
}

body,
.body,
button,
input,
select,
textarea {
  font-family: 'Figtree', sans-serif;
  font-weight: 400;
  letter-spacing: 0.03em;
  color: #272727;
}

h1, h2, h3, h4, h5, h6,
.h0, .h1, .h2, .h3, .h4, .h5,
.hxl,
.header__heading-link {
  font-family: 'Figtree', sans-serif;
  font-weight: 500;
  letter-spacing: 0.01786em;
  text-transform: none;
}

/* Ensure heading weight 600 for larger headings */
h1, .h0, .h1, .hxl {
  font-weight: 600;
}

/* --- Global Layout --------------------------------------- */
:root {
  --page-width: 1200px;
}

/* Force 0 border radius everywhere */
*,
*::before,
*::after {
  border-radius: 0 !important;
}

/* Remove all box shadows */
.card,
.card__inner,
.button,
.field,
.drawer,
.popup,
.modal,
.header,
.cart-drawer {
  box-shadow: none !important;
}

/* --- Color Scheme --------------------------------------- */
body {
  background-color: #F9F7F3;
}

/* --- Announcement Bar ------------------------------------ */
.utility-bar,
.announcement-bar {
  background-color: #272727;
  color: #FFFFFF;
}

.announcement-bar__link,
.announcement-bar__message {
  color: #FFFFFF;
  font-family: 'Figtree', sans-serif;
  font-weight: 400;
  font-size: 0.8125rem;
  letter-spacing: 0.05em;
}

/* --- Header ---------------------------------------------- */

.header__heading-link {
  font-family: 'Figtree', sans-serif;
  font-weight: 600;
  letter-spacing: 0.01786em;
  color: #272727;
  text-decoration: none;
}

/* Mega Menu Styling */
.mega-menu__content {
  background-color: #FFFFFF;
  border-top: 1px solid rgba(39, 39, 39, 0.08);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05) !important;
}

.mega-menu__link {
  font-family: 'Figtree', sans-serif;
  font-size: 0.875rem;
  font-weight: 400;
  letter-spacing: 0.03em;
  color: #272727;
  text-decoration: none;
}

.mega-menu__link--level-2 {
  font-weight: 500;
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 0.75rem;
}

.mega-menu__link:hover {
  color: #272727;
  opacity: 0.7;
}

.header__menu-item {
  font-family: 'Figtree', sans-serif;
  font-weight: 500;
  font-size: 0.875rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #272727;
}


@media screen and (min-width: 990px) {
  .mega-menu__content {
    width: min(1180px, calc(100vw - 48px));
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    padding: 2.75rem 3rem 3rem;
  }

  .mega-menu__list,
  .mega-menu__list--condensed {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.75rem 4rem;
    align-items: start;
  }

  .mega-menu__list--condensed > li,
  .mega-menu__list > li {
    min-width: 0;
  }
}

/* --- Buttons --------------------------------------------- */
.button,
.shopify-challenge__button,
.customer button,
button.button {
  font-family: 'Figtree', sans-serif;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 0.8125rem;
  border-radius: 0 !important;
  transition: opacity 0.2s ease;
}

.button--primary {
  background-color: #272727;
  color: #FFFFFF;
  border: 1px solid #272727;
}

.button--primary:hover {
  background-color: #272727;
  color: #FFFFFF;
  opacity: 0.85;
}

.button--secondary {
  background-color: transparent;
  color: #272727;
  border: 1px solid #272727;
}

.button--secondary:hover {
  background-color: #272727;
  color: #FFFFFF;
}

/* --- Product Cards (Collection Grid) --------------------- */
.card-wrapper {
  position: relative;
}

.card__heading a {
  font-family: 'Figtree', sans-serif;
  font-weight: 500;
  font-size: 0.875rem;
  letter-spacing: 0.02em;
  color: #272727;
  text-decoration: none;
}

.price__regular .price-item,
.price .price-item {
  font-family: 'Figtree', sans-serif;
  font-weight: 400;
  font-size: 0.875rem;
  color: #272727;
}

/* Product card hover: show second image */
.card__media .media > img + img {
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
}

.card-wrapper:hover .card__media .media > img + img {
  opacity: 1;
}

/* --- Product Page ---------------------------------------- */
.product__title {
  font-family: 'Figtree', sans-serif;
  font-weight: 600;
  font-size: 1.5rem;
  letter-spacing: 0.01786em;
  color: #272727;
}

.product__text {
  font-family: 'Figtree', sans-serif;
  font-weight: 400;
  letter-spacing: 0.03em;
  color: #272727;
}

/* Color swatches on product page */
.product-form__input--swatch .swatch {
  width: 28px;
  height: 28px;
  border: 1px solid rgba(39, 39, 39, 0.15);
}

.product-form__input--swatch input:checked + label .swatch {
  border: 2px solid #272727;
  outline: 2px solid #FFFFFF;
  outline-offset: -3px;
}

/* Collapsible tabs (accordion) styling */
.product__accordion .accordion__title,
.collapsible-content .accordion__title {
  font-family: 'Figtree', sans-serif;
  font-weight: 500;
  font-size: 0.875rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #272727;
  border-top: 1px solid rgba(39, 39, 39, 0.12);
  padding: 1rem 0;
}

.product__accordion .accordion__content,
.collapsible-content .accordion__content {
  font-size: 0.875rem;
  line-height: 1.6;
  color: #272727;
}

/* Vertical thumbnail gallery adjustments */
.product--thumbnail .product__media-list {
  gap: 8px;
}

.product--thumbnail .thumbnail-list {
  gap: 8px;
}

.product--thumbnail .thumbnail-list__item .thumbnail {
  border: 1px solid transparent;
  transition: border-color 0.2s ease;
}

.product--thumbnail .thumbnail-list__item .thumbnail.is-active,
.product--thumbnail .thumbnail-list__item .thumbnail:hover {
  border: 1px solid #272727;
}

/* --- Collection Page ------------------------------------- */
.collection-hero__title {
  font-family: 'Figtree', sans-serif;
  font-weight: 600;
  letter-spacing: 0.01786em;
  color: #272727;
}

/* Horizontal filter pills (CSB-style) */
.facets__form .disclosure-has-popup {
  border: 1px solid rgba(39, 39, 39, 0.15);
  background: transparent;
}

.facets__summary {
  font-family: 'Figtree', sans-serif;
  font-weight: 400;
  font-size: 0.8125rem;
  letter-spacing: 0.03em;
  color: #272727;
}

.facets__display {
  background: #FFFFFF;
  border: 1px solid rgba(39, 39, 39, 0.08);
}

/* Active filter tag */
.active-facets__button {
  background-color: #272727;
  color: #FFFFFF;
  border: none;
  font-family: 'Figtree', sans-serif;
  font-size: 0.75rem;
  letter-spacing: 0.03em;
}

/* --- Cart Drawer ----------------------------------------- */
.cart-drawer {
  background-color: #FFFFFF;
}

.cart-drawer__head {
  border-bottom: 1px solid rgba(39, 39, 39, 0.08);
}

.cart-drawer .cart-item__name {
  font-family: 'Figtree', sans-serif;
  font-weight: 500;
  font-size: 0.875rem;
  color: #272727;
}

.cart-drawer .totals__total-value {
  font-weight: 600;
  color: #272727;
}

/* --- Footer ---------------------------------------------- */
.footer {
  background-color: #F9F7F3;
  border-top: 1px solid rgba(39, 39, 39, 0.08);
}

.footer__title {
  font-family: 'Figtree', sans-serif;
  font-weight: 500;
  font-size: 0.8125rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #272727;
}

.footer-block__details-content a,
.footer .list-menu__item a {
  font-family: 'Figtree', sans-serif;
  font-weight: 400;
  font-size: 0.8125rem;
  color: #272727;
  opacity: 0.7;
  text-decoration: none;
}

.footer-block__details-content a:hover,
.footer .list-menu__item a:hover {
  opacity: 1;
}

/* Newsletter in footer */
.footer .newsletter-form__field-wrapper {
  max-width: 320px;
}

.footer .newsletter-form__field-wrapper input {
  background: transparent;
  border: 1px solid rgba(39, 39, 39, 0.3);
  color: #272727;
  font-family: 'Figtree', sans-serif;
}

/* Trust badges: now using .kaya-icon-bar class (see bottom of file) */

/* --- Password Page --------------------------------------- */
.password-main {
  background-color: #F9F7F3;
}

.password-header__heading,
.password-content .h2,
.password-login label {
  font-family: 'Figtree', sans-serif;
  color: #272727;
}

/* --- Newsletter Popup ------------------------------------ */
.newsletter-popup-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 9998;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.newsletter-popup-overlay.is-visible {
  opacity: 1;
  visibility: visible;
}

.newsletter-popup {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.95);
  background: #FFFFFF;
  z-index: 9999;
  width: 90%;
  max-width: 480px;
  padding: 3rem 2.5rem;
  text-align: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease;
}

.newsletter-popup.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, -50%) scale(1);
}

.newsletter-popup__close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  background: none;
  border: none;
  font-size: 1.5rem;
  cursor: pointer;
  color: #272727;
  line-height: 1;
  padding: 0.25rem;
}

.newsletter-popup__close:hover {
  opacity: 0.7;
}

.newsletter-popup__heading {
  font-family: 'Figtree', sans-serif;
  font-weight: 600;
  font-size: 1.5rem;
  letter-spacing: 0.01786em;
  color: #272727;
  margin-bottom: 0.5rem;
}

.newsletter-popup__subtext {
  font-family: 'Figtree', sans-serif;
  font-weight: 400;
  font-size: 0.9375rem;
  color: #272727;
  opacity: 0.7;
  margin-bottom: 1.5rem;
  line-height: 1.5;
}

.newsletter-popup__discount {
  font-family: 'Figtree', sans-serif;
  font-weight: 600;
  font-size: 2rem;
  color: #272727;
  margin-bottom: 1.5rem;
}

.newsletter-popup__form {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.newsletter-popup__input {
  width: 100%;
  padding: 0.875rem 1rem;
  border: 1px solid rgba(39, 39, 39, 0.3);
  background: transparent;
  font-family: 'Figtree', sans-serif;
  font-size: 0.875rem;
  color: #272727;
  outline: none;
}

.newsletter-popup__input:focus {
  border-color: #272727;
}

.newsletter-popup__input::placeholder {
  color: rgba(39, 39, 39, 0.5);
}

.newsletter-popup__submit {
  width: 100%;
  padding: 0.875rem 1rem;
  background: #272727;
  color: #FFFFFF;
  border: 1px solid #272727;
  font-family: 'Figtree', sans-serif;
  font-weight: 500;
  font-size: 0.8125rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: opacity 0.2s ease;
}

.newsletter-popup__submit:hover {
  opacity: 0.85;
}

.newsletter-popup__no-thanks {
  margin-top: 1rem;
  background: none;
  border: none;
  font-family: 'Figtree', sans-serif;
  font-size: 0.75rem;
  color: rgba(39, 39, 39, 0.5);
  cursor: pointer;
  text-decoration: underline;
}

/* --- Misc ------------------------------------------------ */
/* Remove underlines from links */
a {
  text-decoration: none;
}

/* Breadcrumbs */
.breadcrumbs a,
.breadcrumbs span {
  font-family: 'Figtree', sans-serif;
  font-size: 0.75rem;
  letter-spacing: 0.03em;
  color: #272727;
  opacity: 0.6;
}

/* Page titles */
.main-page-title,
.collection-hero__title,
.template-page .page-title {
  font-family: 'Figtree', sans-serif;
  font-weight: 600;
  letter-spacing: 0.01786em;
  color: #272727;
}

/* Selection/highlight color */
::selection {
  background: rgba(39, 39, 39, 0.15);
  color: #272727;
}

/* --- Color Swatch Fallbacks ------------------------------ */
/* Override swatch colors in case Shopify auto-detection is wrong */
.swatch[style*="Black"],
[data-option-value="Black"] .swatch {
  --swatch--background: rgb(0, 0, 0) !important;
}

.swatch[style*="Navy"],
[data-option-value="Navy"] .swatch {
  --swatch--background: rgb(27, 38, 64) !important;
}

.swatch[style*="Burgundy"],
[data-option-value="Burgundy"] .swatch {
  --swatch--background: rgb(92, 26, 27) !important;
}

/* ============================================================
   FORCE CREAM BACKGROUND EVERYWHERE — Override Dawn defaults
   ============================================================ */

/* Base page background */
html, body {
  background-color: #F9F7F3 !important;
}

/* All sections default to cream */
.section-template--*,
.shopify-section,
.shopify-section > div,
.shopify-section > section {
  background-color: #F9F7F3;
}

/* Cards should be white (contrast against cream) */
.card,
.card__inner,
.product-card-wrapper .card {
  background-color: #FFFFFF;
}

/* Product grid / collection background */
.collection,
.template--collection,
.collection-product-list {
  background-color: #F9F7F3;
}

/* Footer — slightly darker cream or keep scheme */
.footer,
.section-footer {
  background-color: #F0EDE7;
  border-top: 1px solid #E5E0D8;
}

/* Ensure color scheme 1 variables propagate */
.color-scheme-1 {
  --color-background: 249 247 243;
  --color-foreground: 39 39 39;
}

/* Image banner overlay — ensure text readable on dark overlay */
.banner__content {
  color: #FFFFFF;
}

/* Featured collection section */
.featured-collection {
  background-color: #F9F7F3;
}

/* Newsletter/email signup */
.newsletter,
.email-signup-banner {
  background-color: #F9F7F3;
}

/* Cart drawer background */
.drawer {
  background-color: #FFFFFF;
}

/* Product page */
.product {
  background-color: #F9F7F3;
}

/* Trust badges bar */
.trust-badges {
  background-color: #F9F7F3;
  padding: 24px 0;
  text-align: center;
  font-size: 0.9em;
  letter-spacing: 0.05em;
  color: #272727;
  border-top: 1px solid #E5E0D8;
  border-bottom: 1px solid #E5E0D8;
}

/* Collection list cards — subtle border */
.collection-list .card {
  border: 1px solid #E5E0D8;
}

/* Buttons — ensure solid black style */
.button--primary,
.shopify-challenge__button,
button.button {
  background-color: #272727 !important;
  color: #FFFFFF !important;
  border: 1px solid #272727 !important;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 500;
}

.button--primary:hover,
button.button:hover {
  background-color: #000000 !important;
  border-color: #000000 !important;
}

/* Secondary/outline buttons */
.button--secondary {
  background-color: transparent !important;
  color: #272727 !important;
  border: 1px solid #272727 !important;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.button--secondary:hover {
  background-color: #272727 !important;
  color: #FFFFFF !important;
}

/* Product card text — clean typography */
.card__heading,
.card-information__text,
.card__heading a {
  font-weight: 400;
  letter-spacing: 0.02em;
  text-transform: none;
}

.price .money {
  font-weight: 400;
}

/* Mega menu dropdown — cream background */
.mega-menu__content {
  background-color: #F9F7F3;
  border-top: 1px solid #E5E0D8;
}

.mega-menu__link {
  color: #272727;
  font-weight: 400;
  letter-spacing: 0.02em;
}

.mega-menu__link--level-2 {
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 0.85em;
}

/* Color variant swatches */
.swatch {
  width: 24px;
  height: 24px;
  border: 1px solid #E5E0D8;
}

.swatch.is-active,
.swatch:hover {
  border-color: #272727;
  outline: 1px solid #272727;
  outline-offset: 2px;
}

/* Size pills */
.variant-input .variant-input__input:checked + label {
  background-color: #272727;
  color: #FFFFFF;
  border-color: #272727;
}

/* Collapsible tabs on product page */
.product__accordion .accordion__title {
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 500;
  font-size: 0.85em;
}

/* ============================================================
   MOBILE FIXES
   ============================================================ */

/* Product page: prevent header from overlapping hero image on mobile */
@media screen and (max-width: 749px) {
  .product__media-wrapper,
  .product__media-list {
    padding-top: 0;
  }
  
  /* Add spacing after sticky header on mobile */
  .section-template--product {
    padding-top: 0;
  }
  
  /* Ensure announcement bar + header don't overlap content */
  .shopify-section-group-header-group + main .main-product-section:first-child,
  .shopify-section-group-header-group + main > .shopify-section:first-child {
    margin-top: 8px;
  }
}

/* Ensure product image counter badge doesn't overlap with header */
.product__media-toggle {
  z-index: 1;
}

/* ============================================================
   POLISH PASS — Additional refinements
   ============================================================ */

/* --- Hide "Powered by Shopify" --- */
.copyright__content a[href*="shopify"],
.copyright__content a[href*="Shopify"] {
  display: none !important;
}

/* --- Footer darker cream background --- */
.footer,
.section-footer,
.footer-group-footer,
.shopify-section-group-footer-group {
  background-color: #F0EDE7 !important;
  border-top: 1px solid #E5E0D8;
}

/* --- Button polish --- */
.button,
.shopify-challenge__button,
.customer button,
button.button,
.cart__checkout-button,
.product-form__submit {
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  transition: all 200ms ease !important;
}

/* Add to Cart button — prominent */
.product-form__submit {
  background-color: #272727 !important;
  color: #FFFFFF !important;
  border: 1px solid #272727 !important;
  font-size: 0.9375rem !important;
  font-weight: 500 !important;
  padding: 1rem 2rem !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  min-height: 52px !important;
}

.product-form__submit:hover {
  background-color: #000000 !important;
  border-color: #000000 !important;
}

/* --- Product card titles: clean, not uppercase --- */
.card__heading,
.card__heading a,
.card-information__text {
  text-transform: none !important;
  font-weight: 400 !important;
  font-size: 0.875rem !important;
  letter-spacing: 0.02em !important;
}

/* --- Price: subtle, not bold --- */
.price .price-item,
.price__regular .price-item,
.price .money,
.price-item--regular {
  font-weight: 400 !important;
  font-size: 0.8125rem !important;
  color: rgba(39, 39, 39, 0.7) !important;
}

/* Product page price — slightly bigger */
.product .price .price-item,
.product .price .money {
  font-size: 1.125rem !important;
  font-weight: 500 !important;
  color: #272727 !important;
}

/* --- Mega menu hover states --- */
.mega-menu__link {
  transition: opacity 200ms ease, color 200ms ease !important;
}

.mega-menu__link:hover {
  opacity: 0.65;
}

.header__menu-item > a,
.header__menu-item > summary {
  transition: opacity 200ms ease !important;
}

.header__menu-item > a:hover,
.header__menu-item > summary:hover {
  opacity: 0.65;
}

/* --- Card hover transitions --- */
.card-wrapper,
.card,
.card__inner {
  transition: transform 200ms ease, box-shadow 200ms ease !important;
}

.card-wrapper:hover .card__inner {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06) !important;
}

/* Subtle lift on product card hover */
.card-wrapper:hover {
  transform: translateY(-2px);
}

/* --- Product card secondary image hover --- */
.card__media .media img:nth-child(2) {
  opacity: 0;
  transition: opacity 300ms ease-in-out !important;
}

.card-wrapper:hover .card__media .media img:nth-child(2) {
  opacity: 1;
}

/* --- Announcement bar link styling --- */
.announcement-bar a,
.announcement-bar__link {
  color: #FFFFFF !important;
  text-decoration: none !important;
}

.announcement-bar a:hover {
  opacity: 0.85;
}

/* --- Page content styling (FAQ, size guide, etc.) --- */
.page-width .rte table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.5rem 0;
}

.page-width .rte table th {
  background: #272727;
  color: #FFFFFF;
  padding: 0.75rem 1rem;
  text-align: center;
  font-weight: 500;
  letter-spacing: 0.03em;
  font-size: 0.875rem;
}

.page-width .rte table td {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid rgba(39, 39, 39, 0.1);
  text-align: center;
  font-size: 0.875rem;
}

/* FAQ accordion styling */
.faq-page details {
  border-bottom: 1px solid rgba(39, 39, 39, 0.1);
}

.faq-page summary {
  font-weight: 500;
  letter-spacing: 0.02em;
}

/* --- Collection list card hover --- */
.collection-list .card-wrapper:hover .card {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06) !important;
}

/* --- Link underline on hover for content pages --- */
.rte a {
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 200ms ease;
}

.rte a:hover {
  border-bottom-color: #272727;
}

/* --- Smooth scroll behavior --- */
html {
  scroll-behavior: smooth;
}

/* --- Image banner text shadow for readability --- */
.banner__heading {
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
}

.banner__text {
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.2);
}

/* --- Newsletter form in footer --- */
.footer .newsletter-form__field-wrapper {
  max-width: 320px;
}

.footer .field__input {
  background: transparent !important;
  border: 1px solid rgba(39, 39, 39, 0.3) !important;
  font-family: 'Figtree', sans-serif !important;
}

.footer .newsletter-form__button {
  background: #272727 !important;
  color: #FFFFFF !important;
  border: 1px solid #272727 !important;
}

/* --- Cart drawer polish --- */
.cart-drawer .button {
  font-weight: 500 !important;
}

/* --- Password page styling --- */
.password-main .field__input {
  border: 1px solid rgba(39, 39, 39, 0.3) !important;
  background: transparent !important;
}


/* ================================================================
   TRANSPARENT HEADER — Overlay on hero
   Inspired by glazeactive.co.za + exercere.com
   ================================================================ */

/* --- Announcement bar: solid dark, always visible, hard edge --- */
.shopify-section-group-header-group .announcement-bar {
  background-color: #272727 !important;
  border-bottom: none !important;
}
.announcement-bar__link,
.announcement-bar__message,
.announcement-bar a {
  color: #FFFFFF !important;
}

/* --- Header group setup --- */
.shopify-section-group-header-group {
  position: relative;
  z-index: 100;
}

/* Homepage: transparent nav below announcement bar, hero pulled up behind it.
   NOTE: position is `relative` WITHOUT !important so Dawn's sticky reveal can
   take over — when StickyHeader adds .shopify-section-header-sticky to this
   section div, kaya-header.css §6 sets `position: sticky !important`, which
   must win. The previous `!important` here masked it and broke the scroll-up
   reveal (the section's computed position stayed `relative`). */
body.template-index .section-header {
  position: relative;
  z-index: 100;
}

/* Pull hero image up behind the transparent header (DESKTOP ONLY).
   On mobile the header is an opaque cream band (see kaya-header.css §8),
   so the hero must NOT slide up underneath it. */
@media screen and (min-width: 990px) {
  body.template-index main {
    margin-top: -131px !important;
  }
}

/* Announcement bar section always keeps its dark background */
.shopify-section-announcement-bar,
.announcement-bar-section {
  background-color: #272727 !important;
  position: relative;
  z-index: 5;
}

/* --- Hero: fills under the nav --- */
body.template-index main > .shopify-section:first-child {
  margin-top: 0 !important;
  padding-top: 0 !important;
}
body.template-index .banner,
body.template-index .slideshow,
body.template-index .image-banner {
  margin-top: 0 !important;
}

/* ------------------------------------------------------------
   [REMOVED] Legacy header colour / logo / mega-menu / sticky blocks.
   The old transparent-header, white-text, vector-::after logo, maroon
   hover, and sticky-stays-transparent rules lived here. They are now
   fully owned by assets/kaya-header.css (the authoritative header
   stylesheet, loaded after this file). Deleted to stop them fighting
   the new state model (logo box, underline, wrong sticky colour).
   ------------------------------------------------------------ */

/* ============================================================
   ICON BAR — Above Footer (Free Shipping, Easy Returns, Premium Quality)
   Dark background, SVG line-art icons, matching Atelier style
   ============================================================ */
.kaya-icon-bar {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 80px;
  padding: 48px 40px;
  background-color: #272727;
  color: #FFFFFF;
}

.kaya-icon-bar__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;
  max-width: 260px;
}

.kaya-icon-bar__icon {
  width: 40px;
  height: 40px;
  margin-bottom: 4px;
}

.kaya-icon-bar__icon img {
  width: 100%;
  height: 100%;
  filter: invert(1);
}

.kaya-icon-bar__icon svg {
  width: 100%;
  height: 100%;
  color: #FFFFFF;
}

.kaya-icon-bar__title {
  font-family: 'Figtree', sans-serif;
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #FFFFFF;
}

.kaya-icon-bar__subtitle {
  font-family: 'Figtree', sans-serif;
  font-size: 0.75rem;
  font-weight: 400;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.7);
  line-height: 1.5;
}

@media screen and (max-width: 749px) {
  .kaya-icon-bar {
    flex-direction: column;
    align-items: center;
    gap: 32px;
    padding: 36px 20px;
  }
}

/* ============================================================
   HERO BANNER — Heading + CSB-style Button
   ============================================================ */

/* "CLASSIC COLLECTION" heading: regular weight, slightly smaller, spaced */
body.template-index .banner__heading {
  font-weight: 400 !important;
  font-size: 2.2rem !important;
  letter-spacing: 0.15em !important;
  text-transform: uppercase !important;
}

@media screen and (min-width: 750px) {
  body.template-index .banner__heading {
    font-size: 2.8rem !important;
  }
}

/* CSB-style transparent button with frosted hover */
body.template-index .banner__buttons .button,
body.template-index .banner__buttons .button--secondary {
  background: transparent !important;
  color: #FFFFFF !important;
  border: none !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.8) !important;
  padding: 14px 36px !important;
  font-size: 0.8125rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  transition: background-color 0.25s ease, backdrop-filter 0.25s ease, -webkit-backdrop-filter 0.25s ease, box-shadow 0.25s ease !important;
}

body.template-index .banner__buttons .button:hover,
body.template-index .banner__buttons .button--secondary:hover {
  background: rgba(255, 255, 255, 0.15) !important;
  backdrop-filter: blur(12px) saturate(120%);
  -webkit-backdrop-filter: blur(12px) saturate(120%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 1) !important;
  color: #FFFFFF !important;
}

/* ------------------------------------------------------------
   [REMOVED] Legacy mega-menu / nav-underline / vector-logo blocks.
   This region held the :has(details) colour swap, the ::after
   slide-underline (the underline defect), the level-2 border-bottom
   divider, the maroon hover, and the kaya-logo-vector-dark.svg
   ::after swap. All superseded by assets/kaya-header.css.
   Only the centred-layout nav alignment is preserved below.
   ------------------------------------------------------------ */

/* Nav links sit on the LEFT when the wordmark is centred (middle-center). */
.header--middle-center .header__inline-menu {
  justify-content: flex-start !important;
}

.header--middle-center .header__inline-menu .list-menu--inline {
  justify-content: flex-start !important;
}

/* VIDEO HERO styles moved to kaya-video-recovery.css (Task 15) — do not re-add hero rules here. */

/* Adjust the negative margin for the new hero (DESKTOP ONLY — mobile header
   is an opaque cream band, so the hero must not slide under it). */
@media screen and (min-width: 990px) {
  body.template-index main {
    margin-top: -131px !important;
  }
}

/* ============================================================
   DISCOVER CLASSIC — Side-by-side video + text section
   ============================================================ */
.kaya-discover {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  align-items: center;
  max-width: var(--page-width, 1200px);
  margin: 0 auto;
  padding: 48px 0;
  cursor: pointer;
}

.kaya-discover__media {
  position: relative;
  overflow: hidden;
  aspect-ratio: 1 / 1;
}

.kaya-discover__poster {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: opacity 0.6s ease;
  z-index: 1;
}

.kaya-discover__video {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.6s ease;
  z-index: 2;
}

.kaya-discover__content {
  padding: 48px 60px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}

.kaya-discover__heading {
  font-family: 'Figtree', sans-serif;
  font-weight: 500;
  font-size: 1.75rem;
  letter-spacing: 0.02em;
  color: #272727;
  margin: 0 0 1.25rem 0;
}

.kaya-discover__text {
  font-family: 'Figtree', sans-serif;
  font-weight: 400;
  font-size: 0.9rem;
  line-height: 1.7;
  color: rgba(39, 39, 39, 0.75);
  margin: 0 0 2rem 0;
  max-width: 440px;
}

.kaya-discover__button {
  display: inline-block;
  background: #272727;
  color: #FFFFFF;
  padding: 14px 36px;
  font-family: 'Figtree', sans-serif;
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  transition: opacity 0.2s ease;
}

.kaya-discover__button:hover {
  opacity: 0.85;
  color: #FFFFFF;
}

/* Remove padding from custom-liquid wrapper */
.shopify-section:has(.kaya-discover) > div[class*="padding"] {
  padding: 0 !important;
}

@media screen and (max-width: 749px) {
  .kaya-discover {
    grid-template-columns: 1fr;
    padding: 0;
  }
  .kaya-discover__content {
    padding: 32px 20px;
  }
}

/* ============================================================
   [REMOVED 2026-06-12] Legacy homepage header / mega-menu patches.
   The "FRONTAGE + STABLE MEGA MENU PATCH (2026-05-20)", the later
   REVERT / FINAL OVERLAY blocks, and their many stacked copies once
   lived here. They forced:
     - a fixed-height mega panel (height/min/max clamp 230-340px)  -> the tall, half-empty dropdown
     - border-top / border-bottom / border-left/right on the panel  -> divider lines
     - unconditional white header text + kaya-logo-vector-*.svg ::after plaque  -> the logo box + wrong states
     - repeated background/colour swaps fighting the state model.
   ALL of this is now owned by assets/kaya-header.css (authoritative,
   loaded after this file). Only the homepage hero pull-under and the
   announcement-bar/header-group transparency support are kept below.
   ============================================================ */

/* Homepage hero pull-under (DESKTOP ONLY): the transparent overlay header
   sits over the full-bleed hero. On mobile the header is an opaque cream
   band (kaya-header.css §8), so the hero must NOT slide up under it. */
@media screen and (min-width: 990px) {
  body.template-index main {
    margin-top: -131px !important;
  }
}

body.template-index main > .shopify-section:first-child {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* Header group / announcement bar backdrop on the homepage. */
body.template-index .shopify-section-group-header-group {
  position: relative !important;
  z-index: 200 !important;
  background: transparent !important;
}

body.template-index .shopify-section-group-header-group .announcement-bar {
  background: #272727 !important;
}

body.template-index .header-wrapper,
body.template-index .header,
body.template-index .header__inline-menu,
body.template-index .header__menu-item,
body.template-index .header__menu-item > summary,
body.template-index .header__menu-item > a {
  pointer-events: auto !important;
}

/* Keep header above the hero. */
body.template-index .header-wrapper,
body.template-index .header {
  z-index: 600 !important;
}

@media screen and (min-width: 990px) {
  .header__inline-menu details > .mega-menu__content {
    z-index: 650 !important;
  }
}