/* Box style for the store (2026-11-05). Mirrors the homepage language:
   square corners, no drop shadows, hairline borders, wine hover.
   See docs/DESIGN-SYSTEM.md. Loaded last on every store page. */
/* tokens come from /assets/css/tokens.css */

body *, body *::before, body *::after {
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* The circles that stay (footer social buttons match the main site: 44px circles) */
.store-spinner, .store-spinner-small, .loading-spinner, .color-swatch, .ae-social a,
.checkout-progress-number, .shipping-progress-number, .badge-icon::before, .store-cart-count, [class*="avatar"] {
  border-radius: 50% !important;
}

/* Panels that relied on a shadow to separate from the page get a hairline instead */
.store-cart-sidebar { border-left: 1px solid var(--ae-line); }
.checkout-modal, .checkout-modal-content, .store-modal, .shipping-calculator, .store-product-full-description,
.product-gallery-main, .product-main-media, .store-search-wrapper, .store-filters-panel {
  border: 1px solid var(--ae-line);
}
.media-thumbnail, .gallery-thumbnail { border: 1px solid var(--ae-line); }
.media-thumbnail.active, .gallery-thumbnail.active { border-color: var(--ae-ink); }

/* Inputs and buttons */
input[type="text"], input[type="email"], input[type="search"], input[type="tel"], input[type="number"], select, textarea {
  border: 1px solid var(--ae-ink);
  background: #fff;
}
.store-btn, .store-btn-primary, .store-btn-secondary, #add-to-cart-btn, .grid-cta-button {
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-size: 11px;
}
.store-btn-primary, #add-to-cart-btn { background: var(--ae-ink); border: 1px solid var(--ae-ink); color: #fff; }
.store-btn-secondary { background: transparent; border: 1px solid var(--ae-ink); color: var(--ae-ink); }

/* Category tiles instead of pills */
.store-category-pill { border: 1px solid #e2d3d5; background: transparent; }
.store-category-pill.active, .store-category-pill[aria-pressed="true"] { background: var(--ae-ink); color: #fff; border-color: var(--ae-ink); }

/* Keyboard focus without shadow rings */
:is(a, button, input, select, textarea, summary):focus-visible { outline: 2px solid var(--ae-wine); outline-offset: 3px; }

/* Search and sort controls: an inline style block on the catalog page outranks the wildcard rule */
#store-search-input, #store-sort { border-radius: 0 !important; border: 1px solid var(--ae-ink); }

/* Page heading matches the rest of the site (2026-11-06): eyebrow, Cormorant h1 at the homepage scale, muted intro. */
.store-page-header { margin: 24px 0 48px; text-align: center; }
.store-page-header .ae-eyebrow { margin: 0 0 20px; }
.store-page-header h1 { margin: 0; font: 500 clamp(48px, 5vw, 76px) / 1.08 var(--ae-serif); letter-spacing: 0.005em; color: var(--ae-ink); }
.store-page-description { max-width: 660px; margin: 20px auto 0; font: 400 17px / 1.8 var(--ae-sans); color: var(--ae-muted); }
@media (max-width: 768px) {
  .store-page-header { margin: 16px 0 36px; }
  .store-page-header h1 { font-size: clamp(2.5rem, 10.5vw, 3.2rem); }
  .store-page-description { font-size: 15px; }
}

/* ------------------------------------------------------------------ breadcrumb bar (2026-11-06)
   One treatment for every breadcrumb: flush under the header, wine band, white text, no margin below.
   Covers .service-refresh__breadcrumb, .about-refresh__breadcrumb, .customer-page .breadcrumb,
   .store-breadcrumbs, .commerce-policy-breadcrumbs and the legacy Tailwind breadcrumb. */
body #main-wrapper > .ae-header-shell + nav[aria-label="Breadcrumb" i],
body #main-wrapper > .ae-header-shell + script + nav[aria-label="Breadcrumb" i],
body #main-wrapper > .ae-header-shell + main:has(> nav[aria-label="Breadcrumb" i]:first-child),
body #main-wrapper > .ae-header-shell + script + main:has(> nav[aria-label="Breadcrumb" i]:first-child),
body #main-wrapper > nav[aria-label="Breadcrumb" i] + main { margin-top: 0 !important; }
body #main-wrapper > nav[aria-label="Breadcrumb" i] + main.store-main { padding-top: 0; }
body nav[aria-label="Breadcrumb" i] {
  display: block; margin: 0; padding: 13px clamp(1.5rem, 5vw, 5rem);
  background: var(--ae-wine); color: rgba(255, 255, 255, 0.78);
  font: 500 11px/1.5 var(--ae-sans); letter-spacing: 0.14em; text-transform: uppercase;
  border: 0; border-radius: 0; overflow: hidden; gap: 0.5rem;
}
body nav[aria-label="Breadcrumb" i] ol { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin: 0; padding: 0; list-style: none; }
body nav[aria-label="Breadcrumb" i] li { display: inline; margin: 0; padding: 0; color: inherit; font: inherit; letter-spacing: inherit; }
body nav[aria-label="Breadcrumb" i] a {
  display: inline; min-height: 0; min-width: 0; margin: 0; padding: 0; border: 0;
  color: rgba(255, 255, 255, 0.78); font: inherit; letter-spacing: inherit; text-decoration: none; background: none;
}
body nav[aria-label="Breadcrumb" i] a:hover, body nav[aria-label="Breadcrumb" i] a:focus-visible { color: #fff !important; text-decoration: underline; text-underline-offset: 0.25rem; }
body nav[aria-label="Breadcrumb" i] a:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
body nav[aria-label="Breadcrumb" i] [aria-current], body nav[aria-label="Breadcrumb" i] li:last-child { color: #fff; }
body nav[aria-label="Breadcrumb" i] li + li::before { content: '/'; margin-right: 0.5rem; color: rgba(255, 255, 255, 0.5); }
body .store-breadcrumbs li:not(:last-child)::after { content: none; }
body nav[aria-label="Breadcrumb" i] > span[aria-hidden], body nav[aria-label="Breadcrumb" i] .sep, body nav[aria-label="Breadcrumb" i] ol span.px-2 { margin: 0 0.5rem; color: rgba(255, 255, 255, 0.5); }
body nav[aria-label="Breadcrumb" i] svg { display: none; }
body #main-wrapper > nav[aria-label="Breadcrumb" i] { margin-bottom: 0 !important; }
@media (max-width: 600px) { body nav[aria-label="Breadcrumb" i] { padding: 12px 20px; font-size: 10px; letter-spacing: 0.1em; } }