/* Shared component corrections; colors always follow the active theme. */
/* Summary comes first in reading/tab order; desktop keeps its side-by-side layout. */
@media (min-width: 901px) {
    .checkout-layout > main { grid-column: 1; grid-row: 1; }
    .checkout-layout > .checkout-summary-card { grid-column: 2; grid-row: 1; }
}
@media (max-width: 900px) {
    .checkout-layout > .checkout-summary-card { position: static; order: 0; }
}
@media (max-width: 700px) {
    .product-purchase .product-actions { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 12px; align-items: center; }
    .product-actions > .quantity-control { grid-column: 1; grid-row: 1; width: 138px; max-width: 100%; height: 48px; }
    .product-actions > .product-wishlist { grid-column: 2; grid-row: 1; justify-self: end; width: 48px; height: 48px; }
    .product-actions > .product-add { grid-column: 1; grid-row: 2; }
    .product-actions > .buy-now-btn { grid-column: 2; grid-row: 2; }
    .product-actions > :is(.product-add, .buy-now-btn),
    .mobile-buybar > button { width: 100%; min-width: 0; min-height: 48px; padding: 12px 8px; font-size: 14px; line-height: 1.4; letter-spacing: 0; text-transform: none; white-space: nowrap; }
    .product-actions > :is(.product-add, .buy-now-btn) i { display: none; }
    .mobile-buybar { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 8px 12px; background: var(--surface); }
    .mobile-buybar > div { display: flex; grid-column: 1 / -1; align-items: baseline; justify-content: space-between; gap: 12px; min-width: 0; }
    .mobile-buybar > div small { flex: 1; min-width: 0; max-width: none; font-size: 12px; }
    .mobile-buybar > div strong { flex-shrink: 0; font-size: 14px; }
    .mobile-buybar > .add-to-cart-btn { grid-column: 1; grid-row: 2; }
    .mobile-buybar > .buy-now-btn { grid-column: 2; grid-row: 2; }
    .product-actions > .buy-now-btn, .mobile-buybar > .buy-now-btn { background: var(--surface); color: var(--ink); border: 1px solid var(--line-strong); }
    .product-actions > .buy-now-btn:not(:disabled):hover, .mobile-buybar > .buy-now-btn:not(:disabled):hover { background: var(--accent-soft); color: var(--ink); }
}
.directory-grid { align-items: start; }
.directory-card:nth-child(n) { margin-top: 0; }
.directory-card > div { aspect-ratio: 1; }
.directory-card > div img { display: block; width: 100%; height: 100%; aspect-ratio: auto; object-fit: contain; }
.account-feature { background: var(--surface); color: var(--ink); border: 1px solid var(--line); }
.account-feature > div > p:not(.eyebrow) { color: var(--ink-soft); }
.account-feature > i { color: var(--accent); opacity: .2; pointer-events: none; }
.account-feature .text-link { color: var(--accent); }

.product-rail-shell { position: relative; isolation: isolate; }
/* Contain raised cards below the sibling controls without changing their stacking. */
.product-rail-shell .product-rail { position: relative; z-index: 0; width: 100%; margin-inline: 0; padding-inline: 0; scroll-padding-inline: 0; }
.product-rail-shell .product-rail.rail-free-scroll { scroll-behavior: auto; scroll-snap-type: none; }
.product-rail-shell .rail-controls { position: absolute; inset: 38% clamp(16px, 2vw, 28px) auto; z-index: 1; justify-content: space-between; pointer-events: none; }
.product-rail-shell .rail-controls button { width: 48px; height: 48px; flex-shrink: 0; border-radius: 50%; background: var(--surface); color: var(--ink); border: 1px solid var(--line-strong); box-shadow: 0 4px 16px #0004; pointer-events: auto; cursor: pointer; transition: background .15s, color .15s; }
.product-rail-shell .rail-controls button:not(:disabled):hover { background: var(--accent); color: #fff; }
.product-rail-shell .rail-controls button:disabled { opacity: .45; cursor: default; }
.product-rail-shell .rail-controls button:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }

.checkout-shell .checkout-address-card strong,
.checkout-shell .checkout-summary-item a,
.checkout-shell .checkout-summary-item strong,
.checkout-shell .checkout-delivery-breakdown strong,
.checkout-shell .checkout-totals dd,
.checkout-shell .checkout-totals .total,
.checkout-shell .checkout-totals .total dd { color: var(--ink); }
.checkout-shell .checkout-delivery-total { background: var(--accent-soft) !important; color: var(--ink) !important; }
.checkout-shell .checkout-delivery-total span { color: var(--ink) !important; }
.checkout-shell .checkout-totals > div { border-color: var(--line); }
.checkout-shell .checkout-coupon-form label { color: var(--ink-soft); }
.checkout-shell input:not([type=checkbox]):not([type=radio]), .checkout-shell select { color: var(--ink); background-color: var(--paper); border-color: var(--line); }

.catalog-filters .filter-group { margin: 0; padding: 16px 0; min-inline-size: 0; }
.catalog-filters .filter-group legend { float: left; width: 100%; margin: 0 0 12px; padding: 0; line-height: 1.4; }
.catalog-filters .filter-group legend + * { clear: both; }
.catalog-filters .filter-group > label { min-height: 36px; margin: 0; }
.catalog-filters .filter-actions { position: static; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin: 0; padding: 12px 0; border-bottom: 1px solid var(--line); background: transparent; }
.catalog-filters .filter-actions > a { order: -1; padding: 7px 10px; border: 1px solid var(--line); border-radius: 6px; color: var(--ink); text-decoration: none; }
.catalog-filters .filter-auto-status { flex: 1; min-height: 2.9em; text-align: right; font-size: 11px; }
@media (max-width: 900px) {
    .catalog-toolbar .filter-toggle { display: inline-flex; min-height: 44px; gap: 8px; padding: 10px 16px; border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink); font-size: 13px; border-radius: 8px; }
    .catalog-toolbar .filter-toggle i { font-size: 18px; }
}

/* Optional Android link: retain the centred announcement and right-hand tracking. */
.announcement-bar.has-android-app { display: grid; grid-template-columns: 1fr auto 1fr; gap: 12px; }
.announcement-bar.has-android-app > a { position: static; display: inline-flex; align-items: center; gap: 5px; justify-self: end; white-space: nowrap; }
.announcement-bar.has-android-app > .android-app-link { justify-self: start; }
.announcement-bar.has-android-app > a:hover { opacity: 1; text-decoration: underline; }
.announcement-bar.has-android-app > a:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
@media (max-width: 700px) {
    .announcement-bar.has-android-app { grid-template-columns: 1fr auto; gap: 2px 12px; }
    .announcement-bar.has-android-app > a { grid-row: 1; min-height: 30px; font-size: 11px; }
    .announcement-bar.has-android-app > p { grid-row: 2; grid-column: 1 / -1; justify-self: center; }
}