/* RISITEX product page — only what the compiled live CSS (rx-app.css) lacks. Colours come from the design
   tokens, so light/dark follow [data-theme] automatically. */

/* utilities the live bundle doesn't carry */
.shadow-sm { box-shadow: var(--shadow-rest); }
.shadow-xl { box-shadow: var(--shadow-modal); }
.hover\:shadow-md:hover { box-shadow: var(--shadow-raised); }
.focus-visible\:ring-ring\/50:focus-visible { box-shadow: var(--focus-ring-halo); }

/* next/image "fill" */
.rx-fill { position: absolute; inset: 0; width: 100%; height: 100%; color: transparent; }

/* wishlist heart */
.rx-heart:hover, .rx-heart.is-on { color: #ef4444; }
.rx-heart.is-on svg { fill: currentColor; }
.rx-heart:active { transform: scale(0.92); }

/* WhatsApp glyph */
.rx-wa-green { color: #25D366; }

/* colour tiles (live: w-[112px], h-[120px] image well, thin scrollbar) */
.rx-colour-tile { width: 112px; text-align: center; }
.rx-colour-tile__img { height: 120px; }
.rx-colour-strip { -webkit-overflow-scrolling: touch; scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; }
.rx-colour-strip::-webkit-scrollbar { height: 6px; }
.rx-colour-strip::-webkit-scrollbar-track { background: transparent; }
.rx-colour-strip::-webkit-scrollbar-thumb { border-radius: 9999px; background: var(--border-strong); }

/* bulk order grid */
.rx-step { width: 32px; height: 32px; background: var(--surface-raised); }
.rx-step:not(:disabled):hover { background: var(--surface-sunken); }
.rx-qty { width: 44px; -moz-appearance: textfield; appearance: textfield; }
.rx-qty::-webkit-inner-spin-button, .rx-qty::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.rx-grid th, .rx-grid td { white-space: nowrap; }

/* form fields */
.rx-input { outline: none; transition: border-color var(--motion-duration-fast) var(--motion-ease-standard), box-shadow var(--motion-duration-fast) var(--motion-ease-standard); }
.rx-input::placeholder { color: var(--text-muted); }
.rx-input:focus-visible, .rx-input:focus { border-color: var(--border-focus); box-shadow: var(--focus-ring-halo); }
textarea.rx-input { resize: vertical; min-height: 88px; }

/* stars + rating bars */
.rx-star { fill: none; stroke: var(--border-strong); stroke-width: 1.5; }
.rx-star.is-on { fill: var(--text-primary); stroke: var(--text-primary); }
.rx-star.is-muted { fill: var(--text-muted); stroke: none; }
.rx-star-btn { background: none; border: 0; cursor: pointer; border-radius: 4px; }
.rx-bar { height: 6px; }

/* size guide modal */
.rx-modal { z-index: 1060; background: rgba(0, 0, 0, 0.5); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.rx-modal__panel { max-width: 48rem; max-height: 92vh; }
.rx-sg-head { border-bottom: 2px solid var(--border-strong); }

/* image lightbox */
.rx-lightbox { z-index: 1070; background: rgba(0, 0, 0, 0.85); }
.rx-lightbox__close { background: rgba(255, 255, 255, 0.1); color: #fff; transition: background-color 140ms; }
.rx-lightbox__close:hover { background: rgba(255, 255, 255, 0.2); }
.rx-lightbox__frame { max-width: 92vw; max-height: 92vh; }
.rx-lightbox__img { max-width: 88vw; max-height: 88vh; object-fit: contain; cursor: zoom-in; transition: transform var(--motion-duration-base) var(--motion-ease-standard); }
.rx-lightbox__img.is-zoomed { transform: scale(1.8); cursor: zoom-out; }
.rx-lightbox__dot { background: rgba(255, 255, 255, 0.4); border: 0; padding: 0; }
.rx-lightbox__dot:hover { background: rgba(255, 255, 255, 0.7); }
.rx-lightbox__dot.is-active { background: #fff; }

/* phones: keep the grid and long titles inside the viewport */
@media (max-width: 639px) {
	.rx-pdp .text-display-lg { font-size: 1.75rem; line-height: 1.15; }
	.rx-qty { width: 36px; }
	.rx-step { width: 28px; height: 28px; }
	.rx-grid th, .rx-grid td { padding-left: 8px; padding-right: 8px; }
}