/** Shopify CDN: Minification failed

Line 460:3 Expected "}" to go with "{"

**/
/* ============================================================
   AYAME LUXURY — Custom Brand Stylesheet
   Where power blooms.
   Drop this entire file into Shopify Edit Code:
   Atelier > assets > New asset > "ayame-custom.css"
   Then add this to theme.liquid before </head>:
   {{ 'ayame-custom.css' | asset_url | stylesheet_tag }}
   ============================================================ */

/* ---- 1. Brand tokens ---- */
:root{
  --ayame-burgundy:        #401f28;
  --ayame-burgundy-dark:   #2a1219;
  --ayame-burgundy-deep:   #0d0608;
  --ayame-burgundy-2:      #693241;
  --ayame-cream:           #e9e2da;
  --ayame-rose:            #b9948a;
  --ayame-gold:            #c9a96e;
  --ayame-gold-bright:     #e6c98a;
  --ayame-shadow:          0 18px 60px rgba(64,31,40,0.18);
}

/* ---- 2. Typography rhythm ---- */
body{
  font-family: 'Jost', system-ui, sans-serif;
  font-weight: 400;
  letter-spacing: 0.01em;
  color: var(--ayame-burgundy);
}
h1,h2,h3,h4,h5,h6,
.h1,.h2,.h3,.h4,.h5,.h6{
  font-family: 'Cormorant Garamond','Cormorant', serif;
  font-weight: 300;
  letter-spacing: 0.04em;
}

/* ---- 3. All buttons: Jost uppercase, gold shimmer on hover ---- */
.button, button.button, a.button,
.shopify-payment-button__button{
  font-family: 'Jost', sans-serif !important;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-weight: 500;
  position: relative;
  overflow: hidden;
  transition: color .35s ease, background .35s ease, border-color .35s ease;
}
.button::before, button.button::before, a.button::before{
  content:'';
  position:absolute;
  top:0; left:-120%;
  width:60%;
  height:100%;
  background: linear-gradient(120deg,
    transparent 0%,
    rgba(201,169,110,0.0) 30%,
    rgba(201,169,110,0.55) 50%,
    rgba(201,169,110,0.0) 70%,
    transparent 100%);
  transform: skewX(-20deg);
  transition: left .9s ease;
  pointer-events:none;
}
.button:hover::before, button.button:hover::before, a.button:hover::before{
  left: 130%;
}
.button--gold-outline{
  background: transparent;
  color: var(--ayame-gold);
  border: 1px solid var(--ayame-gold);
}
.button--gold-outline:hover{
  background: var(--ayame-gold);
  color: var(--ayame-burgundy-deep);
}

/* ---- 4. Hero (full-screen, dark, falling crystals) ---- */
.ayame-hero{
  position: relative;
  min-height: 100vh;
  background:
    radial-gradient(ellipse at center, var(--ayame-burgundy) 0%, var(--ayame-burgundy-deep) 75%);
  color: var(--ayame-cream);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 80px 24px;
}
.ayame-hero__logo-mark{
  width: 96px;
  height: auto;
  margin-bottom: 32px;
  opacity: 0.95;
}
.ayame-hero__title{
  font-family: 'Cormorant Garamond','Cormorant', serif;
  font-weight: 300;
  font-size: clamp(64px, 16vw, 220px);
  letter-spacing: 0.16em;
  line-height: 1;
  margin: 0;
  color: var(--ayame-cream);
}
.ayame-hero__title .letter{
  display: inline-block;
  opacity: 0;
  transform: translateY(40px);
  animation: ayameLetterIn .9s cubic-bezier(.2,.8,.2,1) forwards;
}
.ayame-hero__title .letter:nth-child(1){ animation-delay: .15s; }
.ayame-hero__title .letter:nth-child(2){ animation-delay: .30s; }
.ayame-hero__title .letter:nth-child(3){ animation-delay: .45s; }
.ayame-hero__title .letter:nth-child(4){ animation-delay: .60s; }
.ayame-hero__title .letter:nth-child(5){ animation-delay: .75s; }
@keyframes ayameLetterIn{
  to{ opacity:1; transform: translateY(0); }
}
.ayame-hero__tagline{
  font-family: 'Cormorant Garamond','Cormorant', serif;
  font-style: italic;
  font-weight: 300;
  font-size: clamp(20px, 2.4vw, 30px);
  letter-spacing: 0.06em;
  margin: 24px 0 12px;
  color: var(--ayame-cream);
  opacity: 0;
  animation: ayameLetterIn 1s ease 1.05s forwards;
}
.ayame-hero__sub{
  font-family: 'Jost', sans-serif;
  font-size: 13px;
  letter-spacing: 3px;
  text-transform: uppercase;
  margin: 8px 0 36px;
  color: rgba(233,226,218,0.7);
  opacity: 0;
  animation: ayameLetterIn 1s ease 1.25s forwards;
}
.ayame-hero__cta{
  display: inline-block;
  padding: 18px 44px;
  border: 1px solid var(--ayame-gold);
  color: var(--ayame-gold);
  background: transparent;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-family: 'Jost', sans-serif;
  font-size: 13px;
  text-decoration: none;
  position: relative;
  overflow: hidden;
  opacity: 0;
  animation: ayameLetterIn 1s ease 1.45s forwards;
  transition: color .4s ease, background .4s ease;
}
.ayame-hero__cta:hover{
  background: var(--ayame-gold);
  color: var(--ayame-burgundy-deep);
}

/* ---- 5. Falling crystals canvas ---- */
.ayame-crystals{
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}
.ayame-hero > *:not(.ayame-crystals){ position: relative; z-index: 1; }

/* ---- 6. Click ripple (diamond) ---- */
.ayame-ripple{
  position: fixed;
  width: 24px;
  height: 24px;
  pointer-events: none;
  z-index: 9999;
  transform: translate(-50%,-50%) rotate(45deg) scale(0.4);
  border: 1px solid var(--ayame-gold);
  background: rgba(201,169,110,0.10);
  opacity: 0.9;
  animation: ayameRipple .9s cubic-bezier(.2,.8,.2,1) forwards;
}
@keyframes ayameRipple{
  to{
    transform: translate(-50%,-50%) rotate(45deg) scale(2.4);
    opacity: 0;
  }
}

/* ---- 7. Sticky navigation: transparent over hero, dark on scroll ---- */
.section-header,
.shopify-section-group-header-group,
header.section-header{
  position: sticky;
  top: 0;
  z-index: 50;
  background: transparent;
  transition: background .35s ease, backdrop-filter .35s ease, box-shadow .35s ease;
}
body.ayame-scrolled .section-header,
body.ayame-scrolled .shopify-section-group-header-group,
body.ayame-scrolled header.section-header{
  background: rgba(13,6,8,0.85);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 1px 0 rgba(201,169,110,0.18);
}

/* ---- 8. Announcement marquee bar ---- */
.ayame-announcement{
  background: var(--ayame-burgundy);
  color: var(--ayame-cream);
  padding: 10px 0;
  overflow: hidden;
  font-family: 'Jost', sans-serif;
  font-size: 12px;
  letter-spacing: 3px;
  text-transform: uppercase;
}
.ayame-announcement__track{
  display: inline-flex;
  white-space: nowrap;
  animation: ayameMarquee 38s linear infinite;
  padding-left: 100%;
}
.ayame-announcement__item{
  margin: 0 36px;
}
.ayame-announcement__sep{
  color: var(--ayame-gold);
  margin: 0 12px;
}
@keyframes ayameMarquee{
  0%{ transform: translateX(0); }
  100%{ transform: translateX(-100%); }
}

/* ---- 9. Product cards: slow zoom on hover, gold border reveal ---- */
.card-wrapper, .product-card, .product-grid-item{
  position: relative;
  overflow: hidden;
  border: 1px solid transparent;
  transition: border-color .5s ease, transform .5s ease;
}
.card-wrapper:hover, .product-card:hover, .product-grid-item:hover{
  border-color: var(--ayame-gold);
}
.card-wrapper img,
.product-card img,
.product-grid-item img{
  transition: transform .6s ease;
}
.card-wrapper:hover img,
.product-card:hover img,
.product-grid-item:hover img{
  transform: scale(1.03);
}

/* ---- 10. Product badges ---- */
.ayame-badge{
  display: inline-block;
  padding: 6px 14px;
  font-family: 'Jost', sans-serif;
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
}
.ayame-badge--limited{
  background: var(--ayame-burgundy);
  color: var(--ayame-cream);
}
.ayame-badge--core{
  background: var(--ayame-gold);
  color: var(--ayame-burgundy-deep);
}

/* ---- 11. Kanji watermarks (subtle background per product section) ---- */
.ayame-kanji-bg{
  position: relative;
  overflow: hidden;
}
.ayame-kanji-bg::before{
  content: attr(data-kanji);
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(280px, 38vw, 540px);
  color: var(--ayame-burgundy);
  opacity: 0.04;
  pointer-events: none;
  user-select: none;
  white-space: nowrap;
  z-index: 0;
}
.ayame-kanji-bg > *{ position: relative; z-index: 1; }

/* ---- 12. Scroll-triggered fade-up sections ---- */
.ayame-fade-up{
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 1s ease, transform 1s cubic-bezier(.2,.8,.2,1);
}
.ayame-fade-up.is-visible{
  opacity: 1;
  transform: translateY(0);
}

/* ---- 13. Collections strip (two side-by-side) ---- */
.ayame-collections{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
}
.ayame-collections__card{
  position: relative;
  min-height: 60vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 60px 24px;
  color: var(--ayame-cream);
  text-decoration: none;
  overflow: hidden;
}
.ayame-collections__card--limited{ background: var(--ayame-burgundy); }
.ayame-collections__card--core{
  background: var(--ayame-rose);
  color: var(--ayame-burgundy-deep);
}
.ayame-collections__card h2{
  font-family: 'Cormorant Garamond', serif;
  font-weight: 300;
  font-size: clamp(36px, 5vw, 64px);
  letter-spacing: 0.04em;
  margin-bottom: 16px;
}
.ayame-collections__card span{
  font-family: 'Jost', sans-serif;
  font-size: 11px;
  letter-spacing: 3px;
  text-transform: uppercase;
  opacity: 0.85;
}
@media (max-width: 768px){
  .ayame-collections{ grid-template-columns: 1fr; }
}

/* ---- 14. Brand story / Why Ayame ---- */
.ayame-story{
  background: var(--ayame-cream);
  color: var(--ayame-burgundy);
  padding: 120px 24px;
  text-align: center;
}
.ayame-story h2{
  font-family: 'Cormorant Garamond', serif;
  font-weight: 300;
  font-size: clamp(32px, 4.4vw, 56px);
  max-width: 880px;
  margin: 0 auto 28px;
  font-style: italic;
}
.ayame-story p{
  max-width: 640px;
  margin: 0 auto;
  font-size: 16px;
  line-height: 1.8;
  color: var(--ayame-burgundy-2);
}
.ayame-values{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 60px;
  max-width: 1100px;
  margin: 80px auto 0;
}
.ayame-values h3{
  font-family: 'Cormorant Garamond', serif;
  font-weight: 300;
  font-size: 28px;
  letter-spacing: 0.04em;
  margin-bottom: 14px;
  color: var(--ayame-burgundy);
}
.ayame-values .ayame-divider{
  display: block;
  width: 40px;
  height: 1px;
  background: var(--ayame-gold);
  margin: 0 auto 18px;
}
@media (max-width: 768px){
  .ayame-values{ grid-template-columns: 1fr; gap: 40px; }
}

/* ---- 15. Gold dividers ---- */
.ayame-gold-line{
  width: 60px; height: 1px;
  background: var(--ayame-gold);
  margin: 24px auto;
}

/* ---- 16. Footer ---- */
.shopify-section-group-footer-group{
  background: #1a0a10;
  color: var(--ayame-cream);
}
.shopify-section-group-footer-group a{
  color: var(--ayame-cream);
  transition: color .3s ease;
}
.shopify-section-group-footer-group a:hover{
  color: var(--ayame-gold);
}

/* ---- 17. Floating WhatsApp button ---- */
.ayame-whatsapp{
  position: fixed;
  bottom: 28px;
  right: 28px;
  width: 60px; height: 60px;
  border-radius: 50%;
  background: #25D366;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9998;
  box-shadow: 0 10px 30px rgba(37,211,102,0.4);
  text-decoration: none;
  transition: transform .3s ease;
}
.ayame-whatsapp:hover{ transform: scale(1.08); }
.ayame-whatsapp svg{ width: 32px; height: 32px; fill: #fff; }

/* ---- 18. Reduce-motion respect ---- */
@media (prefers-reduced-motion: reduce){
  .ayame-hero__title .letter,
  .ayame-hero__tagline,
  .ayame-hero__sub,
  .ayame-hero__cta,
  .ayame-fade-up,
  .ayame-announcement__track,
  .ayame-ripple,
  .card-wrapper img{
    animation: none !important;
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }