/* Boutique - editorial: centered serif masthead, centered accent-gradient hero with CTA,
   2-col asymmetric grid with first product featured, minimal sign-off footer.
   Refined and airy. Builds on _parts/storefront.css; scoped under .uxc-shop-tpl-boutique.
   Identity: serif voice (Georgia), borderless image-led cards, hairline rails, a centered
   monogram sign-off footer (deliberately minimal vs. the standard 3-column scaffold footer). */
.uxc-shop-tpl-boutique { font-family: Georgia, 'Times New Roman', serif; max-width: 1140px; }

/* ---- Editorial masthead (centered, serif) --------------------------------------------- */
.uxc-shop-tpl-boutique .uxc-shop-header { position: static; background: var(--uxc-bg); border-bottom: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
.uxc-shop-tpl-boutique .uxc-boutique-thread { background: transparent; color: var(--uxc-text-dim); border-bottom: 1px solid var(--uxc-card-border); font-style: italic; font-family: Georgia, 'Times New Roman', serif; letter-spacing: .02em; }
.uxc-shop-tpl-boutique .uxc-boutique-masthead-inner { max-width: 1140px; margin: 0 auto; padding: 0 24px; display: flex; flex-direction: column; align-items: center; min-width: 0; }

/* Decorative top rail: edition tag left, index right, hairline above the wordmark. */
.uxc-shop-tpl-boutique .uxc-boutique-toprail { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 10px 4px; border-bottom: 1px solid var(--uxc-card-border); font-family: Inter, system-ui, sans-serif; font-size: 10px; letter-spacing: .22em; text-transform: uppercase; color: var(--uxc-text-dim); }

/* Centered masthead wordmark. */
.uxc-shop-tpl-boutique .uxc-boutique-wordmark { text-align: center; padding: 26px 12px 8px; max-width: 100%; }
.uxc-shop-tpl-boutique .uxc-boutique-wordmark img { max-height: 52px; max-width: 100%; width: auto; margin: 0 auto; display: block; }
.uxc-shop-tpl-boutique .uxc-boutique-wordmark-text { display: inline-block; font-family: Georgia, 'Times New Roman', serif; font-weight: 400; font-size: clamp(28px, 4vw, 40px); letter-spacing: .04em; color: var(--uxc-text); text-decoration: none; transition: color .2s ease; }
.uxc-shop-tpl-boutique .uxc-boutique-wordmark:hover .uxc-boutique-wordmark-text { color: var(--uxc-accent); }

/* Nav as a horizontal pill row, centered under the wordmark. */
.uxc-shop-tpl-boutique .uxc-boutique-navrow { margin: 18px auto 24px; justify-content: center; gap: 6px; flex-wrap: wrap; }
.uxc-shop-tpl-boutique .uxc-boutique-navrow a { font-family: Inter, system-ui, sans-serif; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--uxc-text-dim); padding: 8px 16px; border-radius: 999px; transition: color .15s ease, background .15s ease; }
.uxc-shop-tpl-boutique .uxc-boutique-navrow a:hover { color: var(--uxc-text); background: color-mix(in srgb, var(--uxc-accent) 16%, transparent); }

/* Hide the base chrome hooks the masthead replaces. */
.uxc-shop-tpl-boutique .uxc-shop-brand,
.uxc-shop-tpl-boutique .uxc-shop-nav-hamburger { display: none; }
.uxc-shop-tpl-boutique .uxc-shop-header-inner { display: none; }

/* ---- Centered accent-gradient hero ---------------------------------------------------- */
.uxc-shop-tpl-boutique .uxc-shop-section-hero { padding: 110px 32px 100px; text-align: center; background-color: var(--uxc-card); background-image: radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--uxc-accent) 28%, transparent), transparent 60%), linear-gradient(180deg, color-mix(in srgb, var(--uxc-card) 40%, transparent), var(--uxc-bg)); position: relative; overflow: hidden; }
.uxc-shop-tpl-boutique .uxc-shop-section-hero::before { display: none; }
.uxc-shop-tpl-boutique .uxc-shop-section-hero::after { content: ""; position: absolute; left: 50%; top: 36px; transform: translateX(-50%); width: 56px; height: 1px; background: var(--uxc-accent); opacity: .7; }
.uxc-shop-tpl-boutique .uxc-shop-section-hero .uxc-shop-section-heading { font-family: Georgia, 'Times New Roman', serif; font-weight: 400; letter-spacing: -.015em; line-height: 1.08; margin: 0 auto 18px; max-width: 760px; }
.uxc-shop-tpl-boutique .uxc-shop-section-hero .uxc-shop-section-body { font-family: Inter, system-ui, sans-serif; font-size: 17px; opacity: .78; max-width: 560px; margin: 0 auto 32px; }
.uxc-shop-tpl-boutique .uxc-shop-section-hero .uxc-shop-cta { font-family: Inter, system-ui, sans-serif; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; padding: 15px 38px; border-radius: 999px; background: var(--uxc-accent); color: #fff; transition: transform .18s ease, box-shadow .18s ease, background .18s ease; }
/* The hero CTA sits on the tinted card surface (not an image), so it needs an always-contrast
   fill: accent bg + #fff text reads on any theme. Hover lifts and adds an accent glow. */
.uxc-shop-tpl-boutique .uxc-shop-section-hero .uxc-shop-cta:hover { transform: translateY(-2px); box-shadow: 0 10px 24px color-mix(in srgb, var(--uxc-accent) 42%, transparent); }

.uxc-shop-tpl-boutique .uxc-shop-section-heading { font-family: Georgia, 'Times New Roman', serif; font-weight: 400; letter-spacing: -.01em; text-align: center; }
.uxc-shop-tpl-boutique .uxc-shop-section-body { font-family: Inter, system-ui, sans-serif; }
.uxc-shop-tpl-boutique .uxc-shop-intro { text-align: center; }
.uxc-shop-tpl-boutique .uxc-shop-intro .uxc-shop-page-title { font-family: Georgia, 'Times New Roman', serif; font-weight: 400; }

/* ---- 2-column asymmetric grid; first product featured wide --------------------------- */
.uxc-shop-tpl-boutique .uxc-shop-grid { grid-template-columns: 1fr 1fr; gap: 56px 40px; }
.uxc-shop-tpl-boutique .uxc-shop-card:first-child { grid-column: 1 / -1; min-width: 0; }
.uxc-shop-tpl-boutique .uxc-shop-card:first-child .uxc-shop-card-img { aspect-ratio: 16/7; }

/* Card treatment: borderless, image-led, serif title, sans body. */
.uxc-shop-tpl-boutique .uxc-shop-card { border: none; background: transparent; border-radius: 0; min-width: 0; }
.uxc-shop-tpl-boutique .uxc-shop-card:hover { transform: translateY(-4px); box-shadow: none; }
.uxc-shop-tpl-boutique .uxc-shop-card-img { aspect-ratio: 4/3; border-radius: var(--uxc-radius); }
.uxc-shop-tpl-boutique .uxc-shop-card-body { padding: 18px 2px 0; }
.uxc-shop-tpl-boutique .uxc-shop-card-title { font-family: Georgia, 'Times New Roman', serif; font-weight: 400; font-size: 22px; letter-spacing: -.005em; }
.uxc-shop-tpl-boutique .uxc-shop-card-title a { border-bottom: 1px solid transparent; transition: border-color .15s ease; }
.uxc-shop-tpl-boutique .uxc-shop-card:hover .uxc-shop-card-title a { border-bottom-color: var(--uxc-accent); }
.uxc-shop-tpl-boutique .uxc-shop-card-desc { font-family: Inter, system-ui, sans-serif; font-size: 13px; }
.uxc-shop-tpl-boutique .uxc-shop-card .uxc-price { font-family: Inter, system-ui, sans-serif; font-size: 14px; font-weight: 500; letter-spacing: .02em; }
.uxc-shop-tpl-boutique .uxc-shop-card .uxc-price-currency { color: var(--uxc-accent); opacity: 1; font-weight: 600; }
/* Compare-at strikethrough in the editorial voice: faint, italic serif counterpoint to the price. */
.uxc-shop-tpl-boutique .uxc-shop-card .uxc-price-compare { font-family: Georgia, 'Times New Roman', serif; font-style: italic; font-weight: 400; font-size: 13px; }
/* CTA as a quiet text arrow (not the base accent-fill pill), matching the borderless editorial card. */
.uxc-shop-tpl-boutique .uxc-shop-card .uxc-shop-card-cta { display: inline-block; margin-top: 14px; padding: 0; background: transparent; color: var(--uxc-accent); font-family: Inter, system-ui, sans-serif; font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; border-radius: 0; transition: opacity .15s ease; }
.uxc-shop-tpl-boutique .uxc-shop-card .uxc-shop-card-pricerow .uxc-shop-card-cta { margin-top: 0; white-space: nowrap; }
.uxc-shop-tpl-boutique .uxc-shop-card .uxc-shop-card-cta::after { content: " \2192"; display: inline-block; transition: transform .15s ease; }
.uxc-shop-tpl-boutique .uxc-shop-card .uxc-shop-card-cta:hover { opacity: 1; box-shadow: none; transform: none; }
.uxc-shop-tpl-boutique .uxc-shop-card .uxc-shop-card-cta:hover::after { transform: translateX(4px); }
/* Badge: square-cut editorial tag, accent fill with always-contrast #fff text (sits on a product image). */
.uxc-shop-tpl-boutique .uxc-shop-card-badge { border-radius: 0; font-family: Inter, system-ui, sans-serif; letter-spacing: .1em; text-transform: uppercase; font-size: 10px; padding: 4px 9px; }

/* ---- Minimal sign-off footer ---------------------------------------------------------- */
/* The boutique footer is deliberately a minimal editorial colophon (monogram + social + copy)
   rather than the standard 3-column scaffold footer. That minimalism IS the layout's identity;
   elevating it below instead of bolting on link columns/payment badges. */
.uxc-shop-tpl-boutique .uxc-boutique-signoff { margin-top: 80px; padding: 48px 24px 40px; border-top: 1px solid var(--uxc-card-border); background: var(--uxc-bg); text-align: center; }
.uxc-shop-tpl-boutique .uxc-boutique-signoff::before { display: none; }
.uxc-shop-tpl-boutique .uxc-boutique-signoff-inner { max-width: 1140px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: 20px; }
.uxc-shop-tpl-boutique .uxc-boutique-monogram { font-family: Georgia, 'Times New Roman', serif; font-size: 30px; line-height: 1; color: var(--uxc-accent); border: 1px solid var(--uxc-card-border); width: 64px; height: 64px; display: flex; align-items: center; justify-content: center; border-radius: 50%; transition: border-color .2s ease, color .2s ease; }
/* The monogram is aria-hidden, so the footer's hover state is what signals the accent. */
.uxc-shop-tpl-boutique .uxc-shop-footer:hover .uxc-boutique-monogram { border-color: var(--uxc-accent); }
.uxc-shop-tpl-boutique .uxc-boutique-social { justify-content: center; gap: 22px; margin-bottom: 0; flex-wrap: wrap; }
.uxc-shop-tpl-boutique .uxc-boutique-social a { font-family: Inter, system-ui, sans-serif; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--uxc-text-dim); transition: color .15s ease; }
.uxc-shop-tpl-boutique .uxc-boutique-social a:hover { color: var(--uxc-accent); }
.uxc-shop-tpl-boutique .uxc-boutique-copy { font-family: Georgia, 'Times New Roman', serif; font-style: italic; font-size: 13px; color: var(--uxc-text-dim); }

/* ---- Responsive: tablet (~900px) + mobile (~560px), no horizontal scroll ------------- */
@media (max-width: 900px) {
  .uxc-shop-tpl-boutique .uxc-shop-grid { grid-template-columns: 1fr 1fr; gap: 44px 28px; }
  .uxc-shop-tpl-boutique .uxc-shop-card:first-child .uxc-shop-card-img { aspect-ratio: 16/8; }
  .uxc-shop-tpl-boutique .uxc-shop-section-hero { padding: 80px 24px 72px; }
}
@media (max-width: 760px) {
  .uxc-shop-tpl-boutique .uxc-shop-grid { grid-template-columns: 1fr; gap: 44px; }
  .uxc-shop-tpl-boutique .uxc-boutique-navrow { flex-wrap: wrap; gap: 4px; }
  .uxc-shop-tpl-boutique .uxc-boutique-toprail { padding: 8px 2px; }
}
@media (max-width: 560px) {
  .uxc-shop-tpl-boutique .uxc-boutique-masthead-inner { padding: 0 16px; }
  .uxc-shop-tpl-boutique .uxc-shop-section-hero { padding: 60px 16px 52px; }
  .uxc-shop-tpl-boutique .uxc-shop-section-hero .uxc-shop-cta { padding: 13px 30px; }
  .uxc-shop-tpl-boutique .uxc-boutique-signoff { margin-top: 56px; padding: 36px 16px 32px; }
  .uxc-shop-tpl-boutique .uxc-shop-card:first-child .uxc-shop-card-img { aspect-ratio: 4/3; }
}