/* Antolim V4 minimal deployment-blocker patch. Carries forward V3 accessibility + AdSense-host CSS isolation. Adds review-star pointer hit-test hardening and skip-link focus clipping fix. First-party component, target-size and focus rules are scoped to .container. This prevents Google Auto Ads host-document controls injected directly under from inheriting Antolim's 44px/flex button rules. */ .container button, .container .btn, .container .checkout-btn, .container .cart-button, .container .checkout-button, .container input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]), .container select, .container textarea { min-height: 44px; } .container button, .container .btn, .container .checkout-btn, .container .cart-button, .container .checkout-button { min-width: 44px; display: inline-flex; align-items: center; justify-content: center; } .container .pagination a, .container .pagination span, .container .size-option, .container .color-option, .container .pagination button.page-btn { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; } .container nav a, .container header nav a, .container footer a, .container .policy-links a, .container .contact a { min-height: 44px; display: inline-flex; align-items: center; } .skip-link { min-width: 44px; min-height: 44px; } .skip-link:focus, .skip-link:focus-visible { left: 8px; top: 8px; border-radius: 6px; } /* High-contrast dual-colour focus indicator. Avoid currentColor because white button text can make the ring disappear against a white page. */ .skip-link:focus-visible, .container a:focus-visible, .container button:focus-visible, .container input:focus-visible, .container select:focus-visible, .container textarea:focus-visible, .container [tabindex]:focus-visible { outline: 2px solid transparent; outline-offset: 3px; box-shadow: 0 0 0 2px #fff, 0 0 0 5px #111827; } @media (forced-colors: active) { .skip-link:focus-visible, .container a:focus-visible, .container button:focus-visible, .container input:focus-visible, .container select:focus-visible, .container textarea:focus-visible, .container [tabindex]:focus-visible { outline: 3px solid CanvasText; outline-offset: 3px; box-shadow: none; } } [hidden] { display: none !important; } .container .pagination { flex-wrap: wrap; gap: 6px; max-width: 100%; } .container .pagination li { margin: 0; flex: 0 0 auto; } @media (max-width: 480px) { .container .pagination { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px; max-width: 100%; margin-left: auto; margin-right: auto; padding-left: 4px; padding-right: 4px; box-sizing: border-box; overflow: visible; list-style: none; } .container .pagination li { margin: 0; flex: 0 0 auto; } .container .pagination a, .container .pagination span, .container .pagination button.page-btn { min-width: 44px; min-height: 44px; padding: 8px 10px; box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; white-space: nowrap; } } .container footer .policy-links, .container .policy-links { display: flex; flex-direction: column; align-items: stretch; justify-content: center; gap: 4px; width: 100%; } .container footer .policy-links > a, .container footer .policy-links a, .container .policy-links a { display: flex; width: 100%; min-width: 44px; min-height: 44px; padding: 8px 4px; box-sizing: border-box; align-items: center; justify-content: center; text-align: center; white-space: normal; overflow-wrap: anywhere; } .container footer .copyright { margin-top: 10px; } .container footer .copyright p { line-height: 1.5; margin-top: 4px; margin-bottom: 4px; } .container header nav { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px; text-align: center; } .container header nav a { text-align: center; justify-content: center; } .container .review-pagination { margin: 0; } .container .pagination button.page-btn { padding: 8px 12px; box-sizing: border-box; background-color: #f0f0f0; color: #333; border: none; border-radius: 6px; font-family: inherit; font-size: 14px; line-height: 1.5; cursor: pointer; transition: background-color .3s; } .container .pagination button.page-btn:hover { background-color: #ddd; } .container .pagination li.active button.page-btn { background-color: #0056b3; color: #fff; } .container .star-rating label[for] { font-size: 0; color: #6b6b6b; cursor: pointer; min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; border-radius: 6px; } /* V4: visually-hidden native radios must not steal pointer clicks from the visible star labels. This keeps keyboard/screen-reader semantics intact while making mouse/touch activation select the intended value. */ .container .star-rating input[type="radio"] { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; } .container .star-rating label[for]::before { content: "\2606"; font-size: 26px; line-height: 1; } .container .star-rating input:checked ~ label[for], .container .star-rating label[for]:hover, .container .star-rating label[for]:hover ~ label[for] { color: #a16207; } .container .star-rating input:checked ~ label[for]::before, .container .star-rating label[for]:hover::before, .container .star-rating label[for]:hover ~ label[for]::before { content: "\2605"; } .container .star-rating input:focus-visible + label[for] { outline: 2px solid transparent; outline-offset: 3px; box-shadow: 0 0 0 2px #fff, 0 0 0 5px #111827; } @media (forced-colors: active) { .container .star-rating input:focus-visible + label[for] { outline: 3px solid CanvasText; outline-offset: 3px; box-shadow: none; } } .container .stars, .container .review-stars { color: #a16207; } .container .review-instructions { margin: 0 0 10px; color: #333; font-size: 14px; } .container .review-label { display: block; margin: 8px 0 5px; color: #222; font-size: 14px; font-weight: bold; } .container .field-error { color: #b91c1c; font-size: 14px; font-weight: bold; margin: 4px 0 10px; } .container .star-rating.has-error { outline: 2px solid #b91c1c; outline-offset: 2px; border-radius: 6px; } .container .review-form textarea[aria-invalid="true"] { border-color: #b91c1c; border-width: 2px; } .container .field-hint { margin: -10px 0 15px; color: #595959; font-size: 13px; line-height: 1.4; } .container #checkout-form [aria-invalid="true"] { border-color: #b91c1c; border-width: 2px; } .container form input, .container form textarea, .container .review-form textarea { border-color: #767676; } .container .sizes button:not(.selected), .container .colors button:not(.selected) { box-shadow: inset 0 0 0 1px #767676; }