/** Shopify CDN: Minification failed

Line 21:0 All "@import" rules must come first

**/
/* =========================================================
   AZZA EXCLUSIVE — custom theme styling
   Add this file as: assets/custom-azza.css
   Then load it in layout/theme.liquid (see README for the line to add)
========================================================= */

:root{
  --azza-ink:#141414;
  --azza-ink-soft:#6f6f6f;
  --azza-line:#e9e7e3;
  --azza-surface:#f5f4f2;
  --azza-sale:#b23b3b;
}

/* Import fonts — remove if you set these as theme fonts in Theme Settings > Typography instead */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;500;600;700&family=Inter:wght@400;500;600;700&display=swap');

body{
  font-family:'Inter', sans-serif;
  color:var(--azza-ink);
}

/* Headings + logo use the serif display face.
   Dawn's heading classes are usually .h1 .h2 .h3, and the header logo is .header__heading-link */
h1,h2,h3,.h1,.h2,.h3,
.header__heading-link,
.hero__title{
  font-family:'Cormorant Garamond', serif !important;
}

/* -----------------------------------------------------
   PRODUCT CARD HOVER — zoom the image + dim its siblings
   Dawn's product grid uses .card, .card__media, .grid
   If your Dawn version uses different class names, right-click
   a product card > Inspect, and swap the selectors below to match.
----------------------------------------------------- */
.card{
  transition:opacity .3s ease;
}
.card__media img,
.card__media .media img{
  transition:transform .5s cubic-bezier(.2,.7,.3,1) !important;
}
.card:hover .card__media img{
  transform:scale(1.08);
}
.grid:has(.card:hover) .card:not(:hover){
  opacity:.45;
}

/* Collection tiles (Shop by Category) — same treatment if you reuse .card there */
.collection-list__item:hover img,
.collection-card:hover img{
  transform:scale(1.08);
}

/* -----------------------------------------------------
   Reusable page styling — Contact / Sell With Us / FAQ / Policy pages
   Wrap page content in <div class="azza-page"> ... </div>
   with an <div class="azza-page-head"> for the header block
----------------------------------------------------- */
.azza-page{
  max-width:720px;
  margin:0 auto;
  padding:0 24px 90px;
}
.azza-page-head{
  text-align:center;
  padding:50px 0 32px;
  border-bottom:1px solid var(--azza-line);
  margin-bottom:44px;
}
.azza-page-head .azza-eyebrow{
  font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--azza-ink-soft);margin-bottom:6px;
}
.azza-page-head h1{
  font-family:'Cormorant Garamond', serif !important;
  font-size:36px;margin:0;font-weight:600;
}
.azza-prose{
  font-size:14px;line-height:1.8;color:var(--azza-ink-soft);
}
.azza-prose h2{
  font-family:'Cormorant Garamond', serif !important;
  color:var(--azza-ink);font-size:22px;margin:34px 0 6px;font-weight:600;
}
.azza-prose h3{
  color:var(--azza-ink);font-size:16px;margin:24px 0 8px;font-weight:600;
  font-family:'Inter', sans-serif !important;
  text-transform:uppercase;letter-spacing:.04em;
}
.azza-prose p{ margin:0 0 14px; }
.azza-prose ul{ padding-left:20px;margin:0 0 14px; }
.azza-prose li{ margin-bottom:6px; }
.azza-prose strong{ color:var(--azza-ink); }
.azza-prose a{ color:var(--azza-ink);text-decoration:underline; }
.azza-divider{
  border:none;border-top:1px solid var(--azza-line);margin:34px 0;
}
.azza-contact-block{
  text-align:center;padding:24px 0;
}
.azza-contact-block h2{ margin-top:0; }
.price__sale .price-item--sale,
.price--on-sale .price-item--sale{
  color:var(--azza-sale) !important;
}

/* -----------------------------------------------------
   Announcement bar — solid black like the demo
   Dawn class is usually .announcement-bar
----------------------------------------------------- */
.announcement-bar{
  background:var(--azza-ink) !important;
}
.announcement-bar__message{
  letter-spacing:.1em;
  text-transform:uppercase;
  font-size:11.5px !important;
}

/* -----------------------------------------------------
   Buttons — solid ink, inverts on hover (matches demo)
----------------------------------------------------- */
.button,
.button--primary{
  background:var(--azza-ink) !important;
  border-color:var(--azza-ink) !important;
  color:#fff !important;
  letter-spacing:.12em;
  text-transform:uppercase;
  font-size:11.5px !important;
  transition:all .15s ease;
}
.button:hover,
.button--primary:hover{
  background:#fff !important;
  color:var(--azza-ink) !important;
}
.menu-list__item{
  text-transform:uppercase !important;
  letter-spacing:.1em !important;
  font-size:12px !important;
}