/** Shopify CDN: Minification failed

Line 500:180 Expected "}" to go with "{"

**/
/* ============================================================
   ASTEYA AYURCEUTICALS — Shopify Custom CSS (Affair Theme)

   Paste the ENTIRE contents of this file into:
   Online Store > Themes > Edit Code > Assets > custom.css

   Written specifically for Affair's CSS variable system.
   ============================================================ */


/* ── 1. GLOBAL COLOUR OVERRIDES ───────────────────────────────
   Affair uses RGB-format CSS variables for all colours.
   Overriding them here changes every element that references
   them — the most reliable way to apply brand colours.
   NOTE: Affair's theme editor may also set some of these.
   Our rules below will take precedence.
   ────────────────────────────────────────────────────────── */
:root {
  /* Page background — Dusk cream */
  --color-background: 245, 240, 248;

  /* Primary body text — Plum */
  --color-foreground: 58, 16, 80;

  /* Heading text — Plum */
  --color-foreground-title: 58, 16, 80;

  /* Secondary/muted text — Plum Mid */
  --color-foreground-secondary: 106, 72, 128;

  /* Primary button background — Gulabi pink */
  --color-button: 184, 72, 112;
  --color-button-text: 245, 240, 248;
  --color-button-hover: 154, 48, 88;
  --color-button-text-hover: 245, 240, 248;

  /* Secondary button — Plum */
  --color-button-secondary: 58, 16, 80;
  --color-button-secondary-text: 245, 240, 248;
  --color-button-secondary-hover: 74, 32, 96;
  --color-button-secondary-text-hover: 245, 240, 248;

  /* Tertiary / outline button — transparent with Plum border */
  --color-button-tertiary: 58, 16, 80;
  --color-button-tertiary-text: 58, 16, 80;
  --color-button-tertiary-hover: 58, 16, 80;
  --color-button-tertiary-text-hover: 245, 240, 248;

  /* Announcement bar background — Plum */
  --color-background-secondary: 58, 16, 80;

  /* Borders */
  --color-border: 216, 204, 236;
  --color-border-input: 216, 204, 236;
  --color-border-input-hover: 106, 72, 128;

  /* Input fields */
  --color-background-input: 245, 240, 248;

  /* Links */
  --color-link: 184, 72, 112;

  /* Overlay/scrim */
  --color-overlay: 58, 16, 80;
}


/* ── 2. ANNOUNCEMENT BAR ──────────────────────────────────────
   Plum background via --color-background-secondary above.
   Text must be Gold — catches all Affair wrapper elements.
   ────────────────────────────────────────────────────────── */
.announcement-bar,
.section-announcement .announcement-bar {
  color: rgb(212, 174, 86) !important;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-size: 1.1rem;
}

.announcement-bar__message,
.announcement-bar__text,
.announcement-bar__text p,
.announcement-bar__text span,
[class*="announcement"] {
  color: rgb(212, 174, 86) !important;
  font-weight: 500;
}

.announcement-bar__text a {
  color: rgb(212, 174, 86) !important;
}

/* Close button on announcement bar */
.announcement-bar__close .icon,
.announcement-bar__close svg {
  color: rgb(212, 174, 86) !important;
  stroke: rgb(212, 174, 86) !important;
}


/* ── 3. HEADER & NAVIGATION ───────────────────────────────────
   ────────────────────────────────────────────────────────── */

/* Nav background — Heather */
.shopify-section-header,
.shopify-section-header-sticky,
.header-wrapper {
  background-color: rgb(216, 204, 236) !important;
}

/* Nav links — Plum, Regular weight */
.header__menu-item,
.header__menu-item span,
.list-menu--inline .header__menu-item {
  color: rgb(58, 16, 80);
  font-weight: 400;
}

/* Hover state — Gulabi */
.header__menu-item:hover,
.header__menu-item span:hover {
  color: rgb(184, 72, 112) !important;
}

/* Active page — Gulabi text */
.header__active-menu-item,
.header__active-menu-item span,
[aria-current="page"] .header__menu-item,
[aria-current="page"],
a[aria-current="page"],
.header__menu-item[aria-current="page"],
.header__menu-item[aria-current="page"] span {
  color: rgb(184, 72, 112) !important;
}

/* Active page — Gulabi underline bar */
.header__active-menu-item .link-hover-line::after,
.list-menu--inline .list-menu-item .header__active-menu-item .link-hover-line::after,
[aria-current="page"] .link-hover-line::after {
  background-color: rgb(184, 72, 112) !important;
}

/* Logo sub-text "AYURCEUTICALS" */
.header__heading-link span,
.header__heading span {
  font-weight: 400 !important;
  letter-spacing: 0.22em;
}

/* Cart and icon colours */
.header__icon .icon,
.header__icon svg {
  color: rgb(58, 16, 80);
}


/* ── 4. FONT WEIGHT GLOBAL ────────────────────────────────────
   Affair uses CSS variables for font weights too.
   Overriding here bumps body copy from Light to Regular.
   ────────────────────────────────────────────────────────── */

/* Body text — bump from 300 to 400 */
body,
p,
li,
.rte p,
.rte li {
  font-weight: 400;
}

/* Eyebrow / subtitle labels — Medium for legibility */
.subtitle,
.card__subtitle,
.section-heading__subtitle {
  font-weight: 500;
  color: rgb(184, 72, 112);           /* Gulabi for eyebrow labels       */
  letter-spacing: 0.1em;
}

/* Headings stay at theme default weight (set via theme editor) */
/* Do NOT override font-weight on h1–h4 here                    */


/* ── 5. COLOUR CONTRAST FIXES ─────────────────────────────────
   Fixes low-contrast combinations from Affair's defaults.
   ────────────────────────────────────────────────────────── */

/* 5a. Body paragraphs — full Plum, not softened */
p {
  color: rgb(58, 16, 80);
}

/* 5b. Headings — full Plum */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  color: rgb(58, 16, 80);
}

/* 5c. Links */
a {
  color: rgb(184, 72, 112);
}
a:hover {
  color: rgb(58, 16, 80);
}

/* 5d. Prices — use darker gold for legibility on light bg */
.price,
.price__regular,
.price-item,
[class*="price"] {
  color: rgb(154, 120, 30) !important;  /* #9A781E — legible gold         */
}

/* 5e. Stars / ratings — bright gold is fine here (decorative) */
.spr-icon,
[class*="rating"] svg,
[class*="stars"] {
  color: rgb(212, 174, 86);
}

/* 5f. Card descriptions — ensure readable on any card bg */
.card__description,
.card-information__wrapper p,
[class*="card"] .description {
  color: rgb(106, 72, 128);
  font-weight: 400;
}

/* 5g. Card titles */
.card__heading,
.card-information__wrapper h3,
.card-information__wrapper h2 {
  color: rgb(58, 16, 80);
  font-weight: 400;
}

/* 5h. Section headings with gold subtitle above */
.section-heading__heading {
  color: rgb(58, 16, 80);
}


/* ── 6. BUTTONS ───────────────────────────────────────────────
   Affair's button colours are already set via CSS variables
   above (Section 1). These rules add letter-spacing and
   weight that the variables can't control.
   ────────────────────────────────────────────────────────── */
.button--primary,
.button--secondary,
.button--tertiary,
.shopify-challenge__button {
  letter-spacing: 0.15em;
  font-weight: 500;
  text-transform: uppercase;
}


/* ── 7. FOOTER ───────────────────────────────────────────────
   ────────────────────────────────────────────────────────── */

/* Footer headings — Gold (readable version) */
.footer__column h3,
.footer__column h4,
.footer-block__heading,
[class*="footer"] h3,
[class*="footer"] h4 {
  color: rgb(154, 120, 30);           /* darker gold — legible on Plum   */
  font-weight: 500;
  letter-spacing: 0.12em;
}

/* Footer body text — Dusk at 65% */
.footer p,
.footer-block p,
[class*="footer"] p {
  color: rgba(245, 240, 248, 0.65);
}

/* Footer links — Dusk at 68% */
.footer a,
.footer-block a,
[class*="footer"] a {
  color: rgba(245, 240, 248, 0.68);
  text-decoration: none;
}
.footer a:hover,
[class*="footer"] a:hover {
  color: rgb(245, 240, 248);
}

/* Footer bottom bar */
.footer__copyright,
[class*="footer__bottom"],
[class*="footer__copyright"] {
  color: rgba(245, 240, 248, 0.35);
  border-top-color: rgba(212, 174, 86, 0.1);
}


/* ── 8. PRODUCT CARDS ────────────────────────────────────────
   ────────────────────────────────────────────────────────── */
.card,
.card-wrapper,
.card--product {
  border-color: rgba(212, 174, 86, 0.15);
  transition: border-color 0.25s ease;
}
.card:hover,
.card-wrapper:hover {
  border-color: rgba(212, 174, 86, 0.5);
}


/* ── 9. ANNOUNCEMENT BAR TEXT FORCE ─────────────────────────
   Affair sometimes wraps announcement text in additional
   elements. This catches all of them with Gold.
   ────────────────────────────────────────────────────────── */
.section-announcement * {
  color: rgb(212, 174, 86) !important;
}
.section-announcement a {
  color: rgb(212, 174, 86) !important;
}


/* ── 10. NEWSLETTER / EMAIL SECTION ─────────────────────────
   ────────────────────────────────────────────────────────── */
[class*="newsletter"] h2,
[class*="newsletter"] .section-heading__heading {
  color: rgb(245, 240, 248);
}

[class*="newsletter"] p {
  color: rgba(245, 240, 248, 0.75);
}

[class*="newsletter"] input[type="email"] {
  border-color: rgba(212, 174, 86, 0.35);
  color: rgb(245, 240, 248);
}

[class*="newsletter"] .button--primary {
  background-color: rgb(212, 174, 86) !important;
  color: rgb(58, 16, 80) !important;
}

/* ── Fix badge + AM/PM row ── */
.ast-badge-ampm-row {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  justify-content: space-between !important;
  align-items: center !important;
  width: 100% !important;
}
.ast-badge-row {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  gap: 6px !important;
  align-items: center !important;
}
.ast-badge {
  padding: 4px 8px !important;
  font-size: 8px !important;
  white-space: nowrap !important;
}
.ast-ampm-row {
  display: flex !important;
  flex-direction: row !important;
  gap: 6px !important;
  flex-shrink: 0 !important;
  margin-left: auto !important;
}
/* ── LAYOUT: Affair correct two-column fix ── */
/* .product__outer is the real flex container, not .product.row */
@media screen and (min-width: 1100px) {
  .product__outer--static-column-aside,
  .product__outer--thumbs-aside,
  .product__outer--two-column-aside {
    gap: 2.4rem !important;
    padding-left: 2.4rem !important;
  }
  .product__outer--static-column-aside .product__main,
  .product__outer--thumbs-aside .product__main,
  .product__outer--two-column-aside .product__main {
    width: 55% !important;
  }
  .product__outer--static-column-aside .product__info-container,
  .product__outer--thumbs-aside .product__info-container,
  .product__outer--two-column-aside .product__info-container {
    width: 45% !important;
    position: relative !important;
    top: 0 !important;
    margin: 0 !important;
  }
}
@media screen and (min-width: 750px) {
  .product__outer--static-multicolumns-aside {
    gap: 2.4rem !important;
    padding-left: 2.4rem !important;
  }
  .product__outer--static-multicolumns-aside .product__main {
    width: 55% !important;
  }
  .product__outer--static-multicolumns-aside .product__info-container {
    width: 45% !important;
    position: relative !important;
    top: 0 !important;
    margin: 0 !important;
  }
/* ── Remove theme's cap on info content width ── */
@media screen and (min-width: 1100px) {
  .product__outer--static-column-aside .product__info-container .product__info-main,
  .product__outer--thumbs-aside .product__info-container .product__info-main,
  .product__outer--two-column-aside .product__info-container .product__info-main,
  .product__outer--static-multicolumns-aside .product__info-container .product__info-main {
    max-width: 100% !important;
    width: 100% !important;
    margin: 0 !important;
  }
  /* ── Top breathing room for info column ── */
.product__info-main_content {
  padding-top: 2.4rem !important;
}
}
/* ── Tighten line spacing on price note ── */
.ast-price-note {
  line-height: 1.4 !important;
}

/* ── 2. Product title — all caps, Cormorant SC, spacing ── */
.product__title,
h1.product__title {
  font-family: 'Cormorant SC', Georgia, serif !important;
  font-size: clamp(28px, 3vw, 42px) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
  line-height: 1.05 !important;
  color: #3A1050 !important;
  margin-bottom: 14px !important;
}

/* ── Space between title and subtitle ── */
.product__title__wrapper {
  margin-bottom: 18px !important;
}

/* ── 3. Price — plum, large, Cormorant SC ── */
.price__regular .price-item,
.price-item--regular,
.price .price-item--regular,
.price-item {
  font-family: 'Cormorant SC', Georgia, serif !important;
  font-size: clamp(30px, 3vw, 40px) !important;
  color: #3A1050 !important;
  font-weight: 400 !important;
  letter-spacing: 0.02em !important;
}

/* ── 4. Add to Cart — Gulabi, Jost, uppercase ── */
.product-form__submit,
button[name="add"] {
  background-color: #B84870 !important;
  color: #F5F0F8 !important;
  font-family: 'Jost', sans-serif !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  letter-spacing: 0.28em !important;
  text-transform: uppercase !important;
  border-radius: 0 !important;
  border: 1px solid #B84870 !important;
  transition: background 0.2s !important;
}
.product-form__submit:hover,
button[name="add"]:hover {
  background-color: #9A3058 !important;
  border-color: #9A3058 !important;
}
/* ── Floated product form: force ATC button ── */
.product-bar .product-form__submit,
.product-bar__form .product-form__submit,
.shopify-section--floated-product-form .product-form__submit {
  display: inline-flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

/* ── END OF ASTEYA CUSTOM CSS ────────────────────────────────
   To change a colour globally, update Section 1 (:root).
   Affair's RGB variable format: 255, 255, 255 (no # symbol)
   ────────────────────────────────────────────────────────── */