/** Shopify CDN: Minification failed

Line 249:0 Unexpected "}"

**/
@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400..700;1,9..144,400..600&display=swap');

/* ============================================================
   Abhigya Art — Dawn-conflict overrides.
   Loaded AFTER abhigya.css + home.css. Keeps the design files
   pristine while neutralising Dawn base styles that bleed in.
   ============================================================ */

/* ── Display serif -> Fraunces (modern-vintage, characterful; opsz auto), loaded
   above. Body stays Mukta from abhigya.css. Overrides the design's :root font vars. ── */
:root {
  --serif:    'Fraunces', Georgia, serif;
  --wordmark: 'Fraunces', Georgia, serif;
  --body:     'Fraunces', Georgia, serif;
}

/* Dawn sets html{font-size:62.5%} (1rem=10px), which shrinks the design's entire
   rem-based type scale to 62.5%. The design assumes 1rem=16px. Restore it so the
   typography matches the mockup exactly. */
html { font-size: 100% !important; }

/* Dawn puts class="gradient" on <body> with its own background — restore ivory */
body.gradient { background: var(--ivory, #FBF4E6) !important; }

/* Dawn section wrappers shouldn't add their own surfaces/spacing */
.shopify-section { background: transparent; }

/* Skip-link / Dawn focus outlines shouldn't fight the design */
.skip-to-content-link { background: var(--maroon, #6B1126); color: var(--gold-light, #E6C97A); }

/* ── Dark-section headings: Dawn's base.css forces a dark heading color, which
   overrides the design's inherited light text on the maroon/peacock sections.
   Restore the light text the mockup uses (category banners, About hero, CTA band). ── */
.page-banner h1,
.about-hero h1,
.cta-band h2 { color: var(--ivory) !important; }
.about-hero h1 em,
.cta-band h2 em { color: var(--gold-light) !important; }
.page-banner .crumb { color: var(--gold-light) !important; }
.page-banner p,
.about-hero p,
.cta-band p { color: rgba(251, 244, 230, 0.82) !important; }

/* ── Product card hover: Dawn's own ".media" component absolutely-positions every
   ".media" child to top:0/left:0. That turned the design's slim bottom "Add to Bag"
   bar (.quick) into a full-size white overlay that hid the product image AND the
   golden stardust on hover. Restore .quick to the bottom bar so the image stays
   visible and the stardust twinkles through. ── */
.pcard .quick {
  position: absolute !important;
  top: auto !important;
  left: 14px !important;
  right: 14px !important;
  bottom: 14px !important;
  height: auto !important;
  width: auto !important;
}
/* Dawn's .media>* also balloons the circular wish button and the tag pills to
   full size — restore the design's dimensions/positions. */
.pcard .wish {
  top: 58px !important; right: 12px !important; left: auto !important; bottom: auto !important;
  width: 38px !important; height: 38px !important;
}
.pcard .tags {
  top: 12px !important; left: 12px !important; right: auto !important; bottom: auto !important;
  width: auto !important; height: auto !important;
}

/* ── Bestseller accordion: Dawn forces the panel labels dark, and the gradient
   scrim was collapsing to 0 height. Restore white labels + a full maroon gradient
   overlay (light at top → maroon at the bottom) so the labels read clearly. ── */
.bacc-scrim {
  display: block !important; /* Dawn hides empty divs; force it back */
  position: absolute !important;
  top: 0 !important; right: 0 !important; bottom: 0 !important; left: 0 !important;
  z-index: 1 !important;
  background: linear-gradient(180deg, rgba(71,10,24,0) 26%, rgba(71,10,24,.5) 62%, rgba(71,10,24,.92) 100%) !important;
}
.bacc-cap { z-index: 2 !important; }
.bacc-cap h3 { color: var(--ivory) !important; }
.bacc-cap .bx { color: var(--gold-light) !important; }

/* "New arrivals" heading in gold on the peacock band (Dawn forced it dark) */
.newarr-head h2 { color: var(--gold-light) !important; }

/* Mobile menu wordmark: the shared .name (maroon, for the light header) overrode
   .gold-text, leaving the logo dark maroon-on-maroon inside the dark overlay.
   Force it gold so it reads against the maroon menu background. */
.mobile-menu .mm-head .name,
.mobile-menu .mm-head .name b { color: var(--gold-light) !important; }

/* ── Brand logo (transparent gold lockup, theme-agnostic) ── */
/* Header: the stacked A + wordmark lockup reads best a touch smaller than the
   old horizontal logo's clamp(58,5vw,82). */
.brand-logo-img { height: clamp(48px, 4.4vw, 64px) !important; width: auto; }
/* Mobile-menu logo */
.mm-logo { display: inline-flex; align-items: center; }
.mm-logo img { height: 58px; width: auto; display: block; }
/* Reviews arch — the monogram mark replaces the abstract motif */
.say-visual .ph .say-logo { width: 42%; max-width: 190px; height: auto; display: block; }

/* Sold-out state on the product card. `.quick` is the hover "Add to Bag" bar;
   for unavailable products it becomes a non-interactive "Sold Out" label instead
   (no data-add-to-cart attribute, so aa-app.js never binds a click to it). */
.pcard .quick-out {
  cursor: not-allowed;
  background: rgba(20, 16, 12, .82) !important;
  color: var(--gold-light) !important;
  letter-spacing: .18em;
}
.pcard .quick-out:hover { background: rgba(20, 16, 12, .82) !important; color: var(--gold-light) !important; }

/* ===========================================================================
   Search overlay + Favourites panel
   Both were stubs: the magnifier had a hook with no handler, and the heart was
   just a link to /collections/bestsellers. Favourites live in localStorage so
   they work without a customer account.
   =========================================================================== */
/* CRITICAL: the `hidden` attribute loses to any CSS `display`, so without the
   [hidden] rule below this overlay stayed display:flex at opacity:0 over the whole
   viewport and swallowed every click and hover on the site. Same trap as .badge. */
.search-overlay[hidden] { display: none !important; }
.search-overlay:not(.show) { pointer-events: none; }
.search-overlay.show { pointer-events: auto; }

.search-overlay {
  position: fixed; inset: 0; z-index: 300;
  background: rgba(8, 6, 4, .82); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
  padding: clamp(70px, 16vh, 190px) 20px 20px;
  opacity: 0; transition: opacity .25s ease;
}
.search-overlay.show { opacity: 1; }
.search-overlay .search-box {
  width: 100%; max-width: 720px; display: flex; gap: 10px; align-items: center;
  background: var(--paper, #14100c); border: 1px solid var(--line-gold, #6b5836);
  border-radius: 6px; padding: 10px 12px;
}
.search-overlay input[type="search"] {
  flex: 1; min-width: 0; background: transparent; border: 0; outline: 0;
  font-family: var(--serif, Georgia), serif; font-size: clamp(1.05rem, .9rem + .6vw, 1.5rem);
  color: var(--ivory, #f4ecdf); padding: 8px 6px;
}
.search-overlay input[type="search"]::placeholder { color: var(--ink-soft, #9c8f7c); opacity: .8; }
.search-overlay input[type="search"]::-webkit-search-cancel-button { filter: invert(1) opacity(.5); }
.search-overlay .btn { white-space: nowrap; }
.search-hint {
  margin-top: 12px; font-family: var(--body, sans-serif); font-size: var(--t-2xs, .72rem);
  letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft, #9c8f7c);
}

.wish-panel {
  position: fixed; top: 0; right: 0; height: 100%; width: min(420px, 88vw);
  background: var(--paper, #14100c); border-left: 1px solid var(--line-gold, #6b5836);
  z-index: 260; display: flex; flex-direction: column;
  transform: translateX(103%); transition: transform .45s cubic-bezier(.16,1,.3,1);
}
.wish-panel { pointer-events: none; }
.wish-panel.open { transform: none; pointer-events: auto; }
.wish-body { flex: 1; overflow-y: auto; padding: 6px 18px 24px; }
.wish-line { display: flex; gap: 12px; align-items: center; padding: 13px 0; border-bottom: 1px solid var(--line, #2c2419); }
.wish-line:last-child { border-bottom: 0; }
.wish-line img, .wish-line .wish-ph {
  width: 58px; height: 70px; object-fit: cover; border-radius: 4px;
  background: var(--cream-deep, #221c14); flex: none;
}
.wish-meta { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.wish-meta a { font-family: var(--serif, Georgia), serif; color: var(--ivory, #f4ecdf); text-decoration: none; line-height: 1.2; }
.wish-meta a:hover { color: var(--gold-light, #e9ce86); }
.wish-meta span { font-family: var(--body, sans-serif); font-size: var(--t-xs, .8rem); color: var(--gold-light, #e9ce86); }
.wish-rm {
  background: none; border: 0; cursor: pointer; flex: none;
  font-family: var(--body, sans-serif); font-size: var(--t-2xs, .72rem);
  letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft, #9c8f7c);
}
.wish-rm:hover { color: var(--gold-light, #e9ce86); text-decoration: underline; }

/* saved state on the card heart - filled, not just tinted */
.pcard .wish.on { background: var(--gold-light, #e9ce86); }
.pcard .wish.on svg { fill: #7a1226; stroke: #7a1226; }

/* "See all N" under a truncated sub-category grid (Liquid caps a plain
   collection.products loop at 50, so large sub-collections need a way through). */
.cat-more { display: flex; justify-content: center; margin-top: clamp(22px, 3vw, 36px); }
.cat-more .sec-btn { text-decoration: none; }

/* The bag and favourites badges set the `hidden` attribute when empty, but
   `.badge { display: grid }` beat it, so an empty bag showed a "0". An explicit
   [hidden] rule is required whenever a CSS display is applied to the element. */
.badge[hidden] { display: none !important; }

/* ===========================================================================
   Value-card icons.
   No circle: the icon stands on its own. Each one animates when its CARD is
   hovered (not the icon), so the whole card is the target: hand waves,
   diamond spins on its axis, leaf rotates.
   =========================================================================== */
.value-card .vic {
  margin: 0 auto 20px;
  display: grid; place-items: center;
  /* space is reserved so removing the circle doesn't shift the text */
  min-height: 54px;
}
.value-card .vic svg {
  width: 46px; height: 46px;
  stroke-width: 1.7;
  transform-origin: center bottom;
  transition: transform .4s cubic-bezier(.16,1,.3,1);
}

@keyframes aa-hand-wave {
  0%, 100% { transform: rotate(0deg); }
  20% { transform: rotate(16deg); }
  40% { transform: rotate(-10deg); }
  60% { transform: rotate(13deg); }
  80% { transform: rotate(-6deg); }
}
@keyframes aa-gem-spin {
  from { transform: rotateY(0deg); }
  to   { transform: rotateY(360deg); }
}
@keyframes aa-leaf-rotate {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

.value-card:hover .vic-hand svg { animation: aa-hand-wave 1s ease-in-out; }
.value-card:hover .vic-gem  svg { animation: aa-gem-spin 1.1s cubic-bezier(.4,0,.3,1); transform-origin: center; }
.value-card:hover .vic-leaf svg { animation: aa-leaf-rotate 1.2s cubic-bezier(.4,0,.3,1); transform-origin: center; }
/* the gem turns about its vertical axis, so give it depth */
.value-card .vic-gem { perspective: 420px; }

@media (prefers-reduced-motion: reduce) {
  .value-card:hover .vic svg { animation: none !important; transform: none !important; }
}

/* "Skin-Safe & Lasting" wraps to two lines while the other two fit on one, which
   pushed its body copy down. Reserve two lines so all three bodies start level. */
.value-card h3 {
  line-height: 1.16;
  min-height: 2.32em;
  display: flex; align-items: center; justify-content: center;
}
}

/* ===========================================================================
   Search results page (sections/aa-search.liquid).
   Replaces Dawn's light-theme main-search, where titles/prices/labels rendered
   dark-on-dark and the sort control was a bare white box.
   =========================================================================== */
.aa-search-form {
  display: flex; gap: 10px; align-items: center;
  max-width: 560px; margin: 26px auto 0;
  background: rgba(255, 252, 244, .06);
  border: 1px solid var(--line-gold, #6b5836);
  border-radius: 6px; padding: 8px 10px;
}
.aa-search-form input[type="search"] {
  flex: 1; min-width: 0; background: transparent; border: 0; outline: 0;
  font-family: var(--serif, Georgia), serif; font-size: var(--t-md, 1rem);
  color: var(--ivory, #f4ecdf); padding: 7px 6px;
}
.aa-search-form input[type="search"]::placeholder { color: var(--ink-soft, #9c8f7c); opacity: .85; }
.aa-search-form input[type="search"]::-webkit-search-cancel-button { filter: invert(1) opacity(.5); }

.aa-search-empty { text-align: center; padding: clamp(30px, 6vw, 70px) 0 clamp(50px, 8vw, 90px); }
.aa-search-empty .vic {
  width: 92px; height: 92px; margin: 0 auto 22px; border-radius: 50%;
  border: 1px solid var(--line-gold, #6b5836); display: grid; place-items: center;
  color: var(--gold-light, #e9ce86);
}
.aa-search-empty .vic svg { width: 48px; height: 48px; }
.aa-search-empty h2 { font-family: var(--serif, Georgia), serif; font-weight: 500; color: var(--ivory, #f4ecdf); }
.aa-search-empty p { color: var(--ink-soft, #9c8f7c); margin: 12px auto 22px; max-width: 46ch; }
.aa-search-empty em { color: var(--gold-light, #e9ce86); font-style: italic; }

/* ===========================================================================
   Product reviews (end of the PDP) + real rating display.
   The theme used to print a hardcoded 5 stars everywhere; aa-rating.liquid now
   renders only genuine data, so these styles cover both the real state and the
   "no reviews yet" state.
   =========================================================================== */
.rate-real, .rate-none { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.rate-none .ct { color: var(--ink-soft, #9c8f7c); font-size: var(--t-xs, .8rem); letter-spacing: .06em; }

.pdp-reviews { padding: clamp(40px, 6vw, 84px) 0 clamp(50px, 8vw, 100px); }
.pdp-reviews .cat-sec-head { margin-bottom: clamp(22px, 3vw, 38px); }
.pdp-reviews-empty { text-align: center; padding: clamp(26px, 5vw, 54px) 0; }
.pdp-reviews-empty .vic {
  width: 84px; height: 84px; margin: 0 auto 18px; border-radius: 50%;
  border: 1px solid var(--line-gold, #6b5836); display: grid; place-items: center;
  color: var(--gold-light, #e9ce86);
}
.pdp-reviews-empty .vic svg { width: 42px; height: 42px; }
.pdp-reviews-empty h3 { font-family: var(--serif, Georgia), serif; font-weight: 500; color: var(--ivory, #f4ecdf); }
.pdp-reviews-empty p { color: var(--ink-soft, #9c8f7c); margin-top: 9px; }

/* Keep the review app's widget legible on the dark theme. Apps ship light-theme
   CSS, so force the text colours rather than letting them inherit dark-on-dark. */
.jdgm-widget, .jdgm-widget * { color: var(--ivory, #f4ecdf) !important; }
.jdgm-widget .jdgm-star { color: var(--gold-light, #e9ce86) !important; }
.jdgm-widget input, .jdgm-widget textarea, .jdgm-widget select {
  background: rgba(255, 252, 244, .06) !important;
  border: 1px solid var(--line-gold, #6b5836) !important;
  color: var(--ivory, #f4ecdf) !important;
}
.jdgm-widget .jdgm-write-rev-link, .jdgm-widget .jdgm-submit-rev {
  background: var(--gold-light, #e9ce86) !important;
  color: #17120A !important; border-color: var(--gold-light, #e9ce86) !important;
}

/* ===========================================================================
   Native reviews: list + submission form on the product page.
   .rev-card already picks up the caramel card treatment from aa-themes.css.
   =========================================================================== */
.rev-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; }
.rev-list .rev-card { padding: 22px 24px; border-radius: 3px; }
.rev-list .rev-card p { margin: 12px 0 14px; }
.rev-list .rev-card .who { display: flex; gap: 12px; align-items: baseline; flex-wrap: wrap; }
.rev-list .rev-card .nm { font-family: var(--serif, Georgia), serif; font-weight: 600; }
.rev-list .rev-card .ro { font-size: var(--t-2xs, .72rem); letter-spacing: .1em; text-transform: uppercase; opacity: .72; }

.rev-form-wrap { margin-top: clamp(26px, 4vw, 44px); text-align: center; }
.rev-form-wrap .sec-btn { cursor: pointer; }
.rev-form { max-width: 620px; margin: 22px auto 0; text-align: left; }
.rev-form-inner { display: grid; gap: 14px; }
.rev-form label { display: grid; gap: 6px; font-family: var(--body, sans-serif); font-size: var(--t-xs, .8rem);
  letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft, #9c8f7c); }
.rev-form .opt { text-transform: none; letter-spacing: 0; opacity: .7; }
.rev-form input[type="text"], .rev-form input[type="email"], .rev-form textarea {
  width: 100%; padding: 11px 13px; border-radius: 4px;
  background: rgba(255, 252, 244, .06); border: 1px solid var(--line-gold, #6b5836);
  color: var(--ivory, #f4ecdf); font-family: var(--serif, Georgia), serif; font-size: 1rem;
}
.rev-form input:focus, .rev-form textarea:focus { outline: 2px solid var(--gold-light, #e9ce86); outline-offset: -1px; }
.rev-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 600px) { .rev-row { grid-template-columns: 1fr; } }

/* star picker: radios laid out right-to-left so hovering fills the ones before it */
.rev-stars { border: 0; padding: 0; margin: 0; display: flex; align-items: center; gap: 4px; flex-direction: row-reverse; justify-content: flex-end; }
.rev-stars legend { float: left; width: 100%; font-family: var(--body, sans-serif); font-size: var(--t-xs, .8rem);
  letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft, #9c8f7c); margin-bottom: 6px; }
.rev-stars input { position: absolute; opacity: 0; width: 0; height: 0; }
.rev-stars label { font-size: 1.7rem; line-height: 1; cursor: pointer; color: rgba(233, 206, 134, .28); transition: color .18s; }
.rev-stars input:checked ~ label,
.rev-stars label:hover, .rev-stars label:hover ~ label { color: var(--gold-light, #e9ce86); }
.rev-stars input:focus-visible + label { outline: 2px solid var(--gold-light, #e9ce86); outline-offset: 2px; }

.rev-thanks { color: var(--gold-light, #e9ce86); font-family: var(--serif, Georgia), serif; }
.rev-error { color: #e2837f; }
.rev-note { font-size: var(--t-2xs, .72rem); color: var(--ink-soft, #9c8f7c); letter-spacing: .06em; }

/* ===========================================================================
   Welcome offer: the announcement bar's offer now links to the footer signup,
   which reveals the discount code on successful subscribe.
   =========================================================================== */
.announce-offer { color: inherit; opacity: .85; text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 1px; }
.announce-offer:hover { opacity: 1; }

.news-success { margin: 10px 0 4px; }
.news-thanks { color: var(--gold-light, #e9ce86); font-size: var(--t-sm, .9rem); }
.news-offer { color: rgba(251, 244, 230, .78); font-size: var(--t-sm, .9rem); margin-top: 6px; line-height: 1.7; }
.news-code {
  display: inline-block; margin-left: 6px; cursor: pointer;
  font-family: var(--body, sans-serif); font-weight: 700; letter-spacing: .14em;
  background: var(--gold-light, #e9ce86); color: #17120A;
  border: 0; border-radius: 3px; padding: 4px 10px;
}
.news-code:hover { filter: brightness(1.07); }
.news-code.copied { background: #9fd6ae; }
/* the signup is a jump target, so keep it clear of the sticky header */
#newsletter { scroll-margin-top: 120px; }

/* ===========================================================================
   Long-form text: policy pages (Shopify renders these, no template of ours)
   and the page-content fallback in aa-about.liquid. Dawn colours their
   headings with --color-foreground and links with --color-link, both near-
   black, so on the dark theme the headings and email links disappeared.
   Everything here uses the design tokens so it reads on either theme.
   =========================================================================== */
/* the banner rendered in theme.liquid replaces Dawn's plain title */
.page-banner ~ .shopify-policy__container .shopify-policy__title { display: none; }
.shopify-policy__container {
  max-width: 780px; margin: 0 auto;
  padding: clamp(24px, 4vw, 48px) clamp(20px, 5vw, 40px) clamp(56px, 8vw, 96px);
}
html :is(.shopify-policy__body, .aa-prose) {
  color: var(--ink-soft); font-family: var(--body); font-size: var(--t-base); line-height: 1.8; letter-spacing: .01em;
}
html :is(.shopify-policy__body, .aa-prose) :is(h1, h2, h3, h4, h5, h6) {
  font-family: var(--serif); font-weight: 500; line-height: 1.25; letter-spacing: 0;
  color: var(--maroon);
  margin: 2.2em 0 .6em; padding-top: 1.1em; border-top: 1px solid var(--line);
}
html :is(.shopify-policy__body, .aa-prose) :is(h1, h2, h3) { font-size: var(--t-xl); }
html :is(.shopify-policy__body, .aa-prose) :is(h4, h5, h6) { font-size: var(--t-lg); }
html :is(.shopify-policy__body, .aa-prose) .rte > :is(h1, h2, h3, h4, h5, h6):first-child,
html .aa-prose > :is(h1, h2, h3, h4, h5, h6):first-child { margin-top: 0; padding-top: 0; border-top: 0; }
html :is(.shopify-policy__body, .aa-prose) p { margin: 0 0 1em; }
html :is(.shopify-policy__body, .aa-prose) :is(strong, b) { color: var(--ink); font-weight: 600; }
html :is(.shopify-policy__body, .aa-prose) :is(ul, ol) { margin: .4em 0 1.2em; padding-left: 1.4em; }
html :is(.shopify-policy__body, .aa-prose) li { margin: .35em 0; padding-left: .2em; }
html :is(.shopify-policy__body, .aa-prose) li::marker { color: var(--gold); }
html :is(.shopify-policy__body, .aa-prose) a {
  color: var(--maroon); overflow-wrap: anywhere;
  text-decoration: underline; text-decoration-color: var(--line-gold);
  text-decoration-thickness: 1px; text-underline-offset: 4px;
  transition: text-decoration-color .25s;
}
html :is(.shopify-policy__body, .aa-prose) a:hover { color: var(--maroon); text-decoration-color: currentColor; }

/* ===========================================================================
   Contact page (sections/aa-contact.liquid)
   =========================================================================== */
/* Row 1 holds both headings, row 2 the cards and the form, so the two columns
   share a top line; row 2 items stretch so they share a bottom line too. */
.ct-grid {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  grid-template-areas: "head-info head-form" "info form";
  column-gap: clamp(32px, 5vw, 72px); row-gap: 28px;
  padding-top: clamp(36px, 5vw, 64px); padding-bottom: clamp(56px, 8vw, 110px);
}
.ct-head { align-self: end; }
.ct-head-info { grid-area: head-info; }
.ct-head-form { grid-area: head-form; }
.ct-info { grid-area: info; display: flex; flex-direction: column; gap: 28px; }
.ct-form-card { grid-area: form; }
@media (max-width: 860px) {
  .ct-grid { grid-template-columns: 1fr; grid-template-areas: "head-info" "info" "head-form" "form"; row-gap: 24px; }
  .ct-head-form { margin-top: 28px; }
}

.aa-contact .eyebrow { color: var(--gold); }
.aa-contact h2 {
  font-family: var(--serif); font-weight: 500; font-size: var(--t-2xl); line-height: 1.15;
  color: var(--maroon); margin: 12px 0 0; letter-spacing: 0;
}

.ct-channels { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.ct-card {
  display: flex; align-items: center; gap: 16px; padding: 16px 20px;
  background: var(--paper); border: 1px solid var(--line); border-radius: 3px;
  transition: border-color .3s var(--ease), transform .3s var(--ease);
}
.ct-card:hover { border-color: var(--line-gold); transform: translateY(-2px); }
.ct-ic {
  flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid var(--line-gold); color: var(--gold);
}
.ct-txt { display: grid; gap: 2px; min-width: 0; }
.ct-label {
  font-family: var(--body); font-size: var(--t-2xs); font-weight: 600;
  letter-spacing: .2em; text-transform: uppercase; color: var(--ink-mute);
}
/* long emails shrink a little on mid-size screens; if they still don't fit they wrap at the @ (<wbr> in the markup) */
.ct-value { font-family: var(--serif); font-size: clamp(1rem, .82rem + .45vw, 1.4rem); letter-spacing: .01em; color: var(--ink); overflow-wrap: anywhere; }

/* pinned to the bottom so it lines up with the form box when the form is taller */
.ct-help { margin-top: auto; padding: 20px 22px; border-left: 2px solid var(--gold); background: var(--paper); }
.aa-contact .ct-help h3 { font-family: var(--serif); font-weight: 500; font-size: var(--t-lg); color: var(--maroon); margin: 0; letter-spacing: 0; }
.ct-help p { color: var(--ink-soft); margin: 8px 0 10px; font-size: var(--t-sm); line-height: 1.7; }
.ct-help a {
  color: var(--maroon); font-size: var(--t-sm); text-decoration: underline;
  text-decoration-color: var(--line-gold); text-underline-offset: 4px;
}
.ct-help a:hover { text-decoration-color: currentColor; }

.ct-form-card {
  background: var(--paper); border: 1px solid var(--line); border-radius: 3px;
  padding: clamp(24px, 4vw, 44px); scroll-margin-top: 120px;
  display: flex; flex-direction: column;
}
/* the message box takes up any extra height, so the form ends level with the left column */
.ct-form { flex: 1; display: flex; flex-direction: column; gap: 16px; }
.ct-field.ct-field-msg { flex: 1; display: flex; flex-direction: column; }
.ct-field-msg textarea { flex: 1; }
.ct-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 600px) { .ct-row { grid-template-columns: 1fr; } }
.ct-field { display: grid; gap: 7px; }
.ct-field > span {
  font-family: var(--body); font-size: var(--t-xs); font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft);
}
.ct-opt { font-style: normal; font-weight: 400; letter-spacing: 0; text-transform: none; opacity: .75; }
.ct-field :is(input, textarea) {
  -webkit-appearance: none; appearance: none; width: 100%; margin: 0;
  padding: 13px 14px; border-radius: 2px; border: 1px solid var(--line-gold);
  background: transparent; color: var(--ink);
  font-family: var(--body); font-size: 1rem; line-height: 1.5;
  transition: border-color .25s, box-shadow .25s;
}
.ct-field textarea { resize: vertical; min-height: 150px; }
.ct-field :is(input, textarea):focus {
  outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(201, 162, 75, .2);
}
.ct-submit { align-self: flex-start; margin-top: 4px; }
@media (max-width: 600px) { .ct-submit { align-self: stretch; } }
.ct-status { padding: 14px 16px; border-radius: 2px; font-size: var(--t-sm); line-height: 1.6; }
.ct-success { border: 1px solid var(--line-gold); color: var(--maroon); }
.ct-error { border: 1px solid #c9635f; color: #e2837f; }
.ct-error ul { margin: 0; padding-left: 1.1em; }
/* Shopify sends the visitor back to #contact_form after submitting */
#contact_form { scroll-margin-top: 140px; }

/* ===========================================================================
   Off-screen chrome that leaked onto every page:
   - the closed cart drawer's shadow painted a dark strip down the right edge;
   - the hidden toast only moved 120% of its own height, which isn't enough to
     clear its 26px bottom offset, so an empty "✓" box sat at the bottom.
   =========================================================================== */
.drawer { box-shadow: none; visibility: hidden; transition: transform .5s var(--ease), visibility 0s linear .5s; }
.drawer.open { box-shadow: -20px 0 50px rgba(35, 7, 14, .25); visibility: visible; transition: transform .5s var(--ease); }
.toast { visibility: hidden; transition: transform .5s var(--ease), visibility 0s linear .5s; }
.toast.show { visibility: visible; transition: transform .5s var(--ease); }