/* ShanurTheme: small additions for the catalog and product pages that the design system CSS (shanur-theme.css) does not cover.
   Kept in its own file so that re-exporting the design system does not overwrite it. Tokens only, no own colours. */

/* category links in the filter: look like radio rows, the active one is filled */
.sh-check--link { color: inherit; text-decoration: none; }
.sh-check--link:hover { color: var(--primary); }
.sh-check__box { width: 20px; height: 20px; flex: none; border: 1.5px solid var(--line-strong); border-radius: 50%; background: var(--surface); }
.sh-check--link.is-active { font-weight: 700; }
.sh-check--link.is-active .sh-check__box { background: var(--primary); border-color: var(--primary); box-shadow: inset 0 0 0 4px var(--surface); }

/* colour filter: multi-select circles (not .sh-swatch: the design JS treats those as single-choice) */
.sh-fswatches { display: flex; flex-wrap: wrap; gap: 10px; }
.sh-fswatch { position: relative; width: 28px; height: 28px; cursor: pointer; }
.sh-fswatch input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.sh-fswatch__dot { display: block; width: 100%; height: 100%; border-radius: var(--radius-pill); background: var(--sw, #ccc); box-shadow: inset 0 0 0 1px rgba(31, 25, 20, .18); }
.sh-fswatch input:checked + .sh-fswatch__dot { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--ink); }
.sh-fswatch input:focus-visible + .sh-fswatch__dot { outline: 2px solid var(--focus); outline-offset: 3px; }
.sh-chip__dot { display: inline-block; width: 12px; height: 12px; border-radius: var(--radius-pill); background: var(--sw, #ccc); box-shadow: inset 0 0 0 1px rgba(31, 25, 20, .25); }
.sh-visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* filters as links inside the drawer and the chips row: no underline */
.sh-chips a.sh-chip, .sh-active-filters a.sh-chip { text-decoration: none; }

/* pagination: disabled arrow */
.sh-pagination .is-disabled { opacity: .45; pointer-events: none; }

/* reviews */
.sh-review__photos { display: flex; flex-wrap: wrap; gap: 8px; }
.sh-review__photos img { width: 72px; height: 72px; object-fit: cover; border-radius: var(--radius-sm); }
.sh-review__reply { padding: 12px 14px; border-radius: var(--radius-md); background: var(--surface-muted); font-size: 14px; }
.sh-review__reply p { margin-top: 4px; }

/* product page: the heart in the buy row shows its state, buttons while a request runs */
.sh-btn.is-active[data-sh-fav] { color: var(--danger); }
.sh-btn.is-active[data-sh-fav] .sh-icon { fill: currentColor; }
.sh-pdp [hidden], .sh-sticky-buy[hidden] { display: none !important; }
.sh-pdp__info .sh-btn.is-loading, .sh-sticky-buy .sh-btn.is-loading { opacity: .6; pointer-events: none; }

/* lightweight modal built by JS (delivery method for "buy now") */
.sh-modal__dialog .sh-options { margin: var(--space-4) 0; }

/* cart and checkout */
.sh-app [hidden] { display: none !important; }
.sh-line .sh-check input { margin-top: 3px; }
.sh-line__meta .sh-dot { display: inline-block; width: 12px; height: 12px; margin-right: 6px; border-radius: var(--radius-pill); background: var(--sw, #ccc); box-shadow: inset 0 0 0 1px rgba(31, 25, 20, .25); vertical-align: -1px; }
.sh-summary .sh-link[data-sh-coupon-remove] { margin-left: 6px; font-size: 18px; line-height: 1; }
.sh-btn[disabled] { opacity: .45; pointer-events: none; }
.sh-btn.is-loading { opacity: .6; pointer-events: none; }
.sh-modal__dialog [data-sh-offline-fields] .sh-summary__total { margin: 0; }

/* the default theme hides every radio (custom.css: [type="radio"]:not(.show) -> 1px, absolute); undo it for the design system's radios.
   Specificity (0,4,1) beats (0,2,0) without !important. */
.sh-app .sh-option > input[type="radio"]:not(.show),
.sh-app .sh-check input[type="radio"]:not(.show) { position: static; width: 20px; height: 20px; margin: 0; padding: 0; overflow: visible; clip: auto; border: 1.5px solid var(--line-strong); }
.sh-app .sh-option > input[type="radio"]:not(.show) { margin-top: 2px; }
/* ... and it draws a ring after the span that follows each radio ([type="radio"]:not(.show) + span:after) */
.sh-app [type="radio"]:not(.show) + span::after { content: none; display: none; }
.sh-app .sh-option > input[type="radio"]:not(.show):checked,
.sh-app .sh-check input[type="radio"]:not(.show):checked { border-color: var(--primary); }

/* sign-in, sign-up, code and password pages: the default captcha (input + image built by google-recaptcha-init.js) in the field style */
.sh-captcha .dynamic-default-and-recaptcha-section { margin: 0; }
.sh-captcha .default-captcha-container { max-width: none; height: 48px; margin: 0; border: 1px solid var(--line-strong); border-radius: var(--radius-md); background: var(--surface); }
.sh-captcha .default-captcha-container:focus-within { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }
.sh-captcha .default-captcha-container input { height: 46px; padding: 0 150px 0 var(--space-4); background: transparent; color: var(--ink); font: inherit; }
.sh-captcha .default-captcha-container input:focus { outline: none; box-shadow: none; }
.sh-captcha .default-captcha-container .captcha-image-container { top: 3px; inset-inline-end: 3px; }
.sh-auth__box .sh-success { padding: 0; }

/* promo banner on the primary colour (flash deal): the default theme colours headings and paragraphs itself */
.sh-promo.sh-promo--solid { background: var(--primary); color: var(--on-primary); }
.sh-promo.sh-promo--solid h1, .sh-promo.sh-promo--solid h2, .sh-promo.sh-promo--solid p, .sh-promo.sh-promo--solid .sh-overline { color: inherit; }
.sh-promo.sh-promo--solid .sh-overline { opacity: .85; }