/* Storefront type roles and intrinsic layout constraints. Keep the existing brand/font. */
:root { --store-text-muted: #526071; --store-text-brand: #b31561; }
body { font-size: 1rem; line-height: 1.75; }
h1, h2, h3 { text-wrap: balance; overflow-wrap: anywhere; }
p { text-wrap: pretty; }
main, main :where(div, section, article, form, nav), footer :where(div, section), #site-header :where(div, nav) { min-width: 0; }
main :where(img, video) { max-width: 100%; }
main :is(input:not([type='radio']):not([type='checkbox']), select, textarea) { min-width: 0; max-width: 100%; font-size: 1rem; }
main :is(.text-xs, .text-\[10px\], .text-\[11px\]), footer :is(.text-xs, .text-\[10px\], .text-\[11px\]) { font-size: .75rem; line-height: 1.67; }
main :is(.text-sm), footer :is(.text-sm) { font-size: .875rem; line-height: 1.72; }
:where(main, footer, #mini-cart, #quick-add-overlay, #site-header, #recently-viewed) :is(.text-gray-400, .text-gray-500, .text-slate-400, .text-slate-500) { color: var(--store-text-muted); }
:where(main, footer, #site-header, #recently-viewed, #quick-add-overlay) :is(.text-pink-500, .text-pink-600) { color: var(--store-text-brand); }
main .text-amber-600 { color: #854d0e; }
main :is(.text-green-500, .text-green-600, .text-emerald-600) { color: #167042; }
main :where(input, textarea)::placeholder { color: #626b79; opacity: 1; }
:where(a, button, input, textarea, select, [tabindex]):focus-visible { outline: 3px solid #9d174d; outline-offset: 3px; }
::selection { color: #831843; background: #fce7f3; }
input, textarea { caret-color: #b31561; }
.tnum, [data-money] { font-variant-numeric: tabular-nums; }
button:disabled { cursor: not-allowed; opacity: .65; }
#cart-anchor, #mobile-menu-btn, #site-header button[aria-label], #mini-cart button[aria-label], #address-modal-container button[aria-label], main button[aria-label] { min-width: 44px; min-height: 44px; }
main nav[aria-label] a, main a.category-guide-link { display: inline-flex; align-items: center; min-height: 44px; }
#product-image-opener { padding: 0; border: 0; }
#product-image-opener > .product-img { aspect-ratio: 1; }
#product-image-opener, #original-gallery, #variation-gallery { max-width: 100%; }
#address-form :where(.flex), #shipping-options-container label { flex-wrap: wrap; }
#address-form a, #address-form button { display: inline-flex; align-items: center; min-height: 44px; }
#shipping-options-container label > div { min-width: 0; }
#shipping-options-container label { gap: .5rem; }
#shipping-options-container label > div:first-child { flex: 1 1 10rem; }
@media (max-width: 639px) {
    #site-header .header-bar > div > .flex { height: auto; min-height: 64px; flex-wrap: wrap; padding-block: .5rem; gap: .5rem; }
    main .flex:has(> #discount-code) { flex-wrap: wrap; }
    #discount-code { flex-basis: 12rem; }
}

.variation-option { max-width: 100%; min-width: 0; }
.variation-card { min-width: min(140px, 100%); overflow-wrap: anywhere; }

main .flex.items-baseline { flex-wrap: wrap; }
main .text-4xl.tnum, main .text-4xl.text-pink-600 { font-size: clamp(1.125rem, 6vw, 2.25rem); overflow-wrap: anywhere; }
main .inline-flex { max-width: 100%; flex-wrap: wrap; }
main .form-input { min-height: 44px; }
.variation-option:focus-within .variation-card { outline: 3px solid #9d174d; outline-offset: 3px; }
#add-to-cart-form > .flex { flex-wrap: wrap; }
.qty-input-group { max-width: 100%; width: 14rem; }
.qty-input-group .qty-btn { flex: 0 0 44px; padding: 10px; min-height: 44px; }
.qty-input-group .qty-btn svg { width: 24px; height: 24px; }
.qty-input-group input { flex: 1 1 4rem; width: 4rem; }

#recently-viewed :is(.text-\[9px\], .text-\[10px\], .text-\[11px\]) { font-size: .75rem; line-height: 1.67; }

#summary-total-label { overflow-wrap: anywhere; }
#summary-total-label + div { min-width: 0; }
#summary-total-label + div .text-xl { overflow-wrap: anywhere; }
#quick-add-overlay button[aria-label] { min-width: 44px; min-height: 44px; }

main form[method="get"] .flex.items-end { flex-wrap: wrap; }
main summary.flex { flex-wrap: wrap; gap: .5rem; }
main summary.flex svg { flex-shrink: 0; width: 24px; height: 24px; }
#contact-page .flex.items-start { flex-wrap: wrap; gap: 1rem; }
#contact-page .flex.items-start > .mr-4 { margin-inline: 0; flex: 1 1 10rem; overflow-wrap: anywhere; }
#contact-page a, #contact-page p { overflow-wrap: anywhere; }
#mobile-sticky-bar { flex-wrap: wrap; }
#mobile-sticky-bar > button { max-width: 100%; flex-shrink: 1; }
main summary.flex > span { min-width: 0; flex: 1 1 10rem; overflow-wrap: anywhere; }
#address-form > label { gap: .75rem; }
#address-form > label > div { margin-inline: 0; flex: 1 1 10rem; overflow-wrap: anywhere; }
#address-form span { min-width: 0; overflow-wrap: anywhere; }

.product-purchase-details { container-type: inline-size; }
@container (max-width: 22rem) {
    .product-service-facts { grid-template-columns: minmax(0, 1fr); }
}
.product-service-facts > div { flex-wrap: wrap; }
.product-service-facts p { overflow-wrap: anywhere; }
.faq-acc summary > span { flex-wrap: wrap; }
.faq-acc > div { padding-inline-start: 0; overflow-wrap: anywhere; }
/* Cap the incumbent column count, allowing fewer columns as text grows. */
main .grid:has(> :is(.product-card, .category-card, .feature-card)) {
    --card-columns: 2;
    gap: 1.5rem;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, max(10rem, calc((100% - (var(--card-columns) - 1) * 1.5rem) / var(--card-columns)))), 1fr));
}
@media (min-width: 768px) {
    main .grid.md\:grid-cols-4:has(> :is(.product-card, .category-card, .feature-card)) { --card-columns: 4; }
    main .grid.md\:grid-cols-6:has(> :is(.product-card, .category-card, .feature-card)) { --card-columns: 6; }
}
@media (min-width: 1024px) {
    main .grid.lg\:grid-cols-6:has(> .category-card) { --card-columns: 6; }
}
main .flex.justify-between:has(> h2) { flex-wrap: wrap; gap: 1rem; }
main .flex.justify-between:has(> h2) > a { flex-shrink: 0; }
main p { overflow-wrap: anywhere; }
main .btn { white-space: normal; overflow-wrap: anywhere; }

/* Visibility is a state boundary: make it immediate so opening focus is reliable. */
#product-lightbox, #quick-add-overlay, #mini-cart { transition-property: opacity, transform, translate; }

:where(main, #quick-add-overlay) .text-red-500 { color: #b91c1c; }