/* Shared parts of the sable-pdp product pages. Colours and fonts come from each section's variables. */
[data-sable-pdp] { color: var(--ink); background: var(--bg); font-family: var(--f-body); -webkit-font-smoothing: antialiased; }
[data-sable-pdp] *, [data-sable-pdp] *::before, [data-sable-pdp] *::after { box-sizing: border-box; }
[data-sable-pdp] img, [data-sable-pdp] video { display: block; width: 100%; height: 100%; object-fit: cover; }

.sable-stars { --pct: 88%; position: relative; display: inline-block; font-size: 16px; line-height: 1; letter-spacing: .08em; color: color-mix(in srgb, var(--ink) 18%, transparent); }
.sable-stars::before { content: '★★★★★'; }
.sable-stars::after { content: '★★★★★'; position: absolute; inset: 0; width: var(--pct); overflow: hidden; color: var(--gold); white-space: nowrap; }
.sable-stars--lg { font-size: 24px; }

.sable-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; padding: 0 24px; border: 0; border-radius: 999px; font: 600 16px/1 var(--f-body); letter-spacing: .01em; text-decoration: none; cursor: pointer; transition: transform .15s ease, background-color .2s ease; }
.sable-btn:active { transform: scale(.98); }
.sable-btn--primary { background: var(--accent); color: var(--accent-ink); width: 100%; }
.sable-btn--primary:hover { background: color-mix(in srgb, var(--accent) 88%, #000); }
.sable-btn--primary[disabled] { opacity: .45; cursor: not-allowed; }
.sable-btn--ghost { border: 1.5px solid currentColor; background: transparent; color: inherit; }
.sable-btn .loading__spinner { width: 16px; height: 16px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: sable-spin .7s linear infinite; }
.sable-btn .loading__spinner.hidden { display: none; }
.sable-btn.loading > span:first-child { opacity: .6; }
@keyframes sable-spin { to { transform: rotate(360deg); } }

.sable-form { display: block; margin-top: 20px; }
.sable-form__row { display: flex; gap: 10px; }
.sable-form__label { display: block; font-size: 14px; margin-bottom: 6px; }
.sable-form__select { width: 100%; min-height: 48px; margin-bottom: 12px; padding: 0 16px; border-radius: 12px; border: 1px solid color-mix(in srgb, var(--ink) 25%, transparent); background: var(--card); color: var(--ink); font: inherit; }
.sable-form__error { margin-bottom: 12px; font-size: 14px; color: #b3261e; }
.sable-form__pay { margin-top: 10px; }
.sable-form__pay .shopify-payment-button__button { border-radius: 999px !important; min-height: 52px; overflow: hidden; }
.sable-form__pay .shopify-payment-button__more-options { color: inherit; font-size: 13px; }
.sable-amazon { width: 100%; margin-top: 10px; }

.sable-qty { display: flex; align-items: center; flex: 0 0 auto; border: 1.5px solid color-mix(in srgb, var(--ink) 22%, transparent); border-radius: 999px; background: var(--card); }
.sable-qty__btn { width: 40px; height: 49.6px; border: 0; background: none; color: inherit; font-size: 20px; cursor: pointer; }
.sable-qty__input { width: 28px; border: 0; background: none; color: inherit; font: 600 16px var(--f-body); text-align: center; -moz-appearance: textfield; }
.sable-qty__input::-webkit-outer-spin-button, .sable-qty__input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.sable-slide { position: relative; list-style: none; margin: 0; overflow: hidden; }
.sable-slide__tag { position: absolute; left: 12px; bottom: 12px; padding: 5.6px 11.2px; border-radius: 999px; background: rgba(0, 0, 0, .55); color: #fff; font-size: 12px; letter-spacing: .02em; backdrop-filter: blur(6px); }
.sable-thumb { position: relative; padding: 0; border: 0; background: none; cursor: pointer; }
.sable-thumb__play { position: absolute; inset: 0; display: grid; place-items: center; }
.sable-thumb__play::after { content: ''; width: 0; height: 0; border-left: 12px solid #fff; border-top: 8px solid transparent; border-bottom: 8px solid transparent; filter: drop-shadow(0 1px 2px rgba(0,0,0,.5)); }

[data-sable-sticky] { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; transform: translateY(110%); transition: transform .3s ease; }
[data-sable-sticky].is-visible { transform: none; }

[data-sable-pdp] details > summary { list-style: none; cursor: pointer; }
[data-sable-pdp] details > summary::-webkit-details-marker { display: none; }
@media (prefers-reduced-motion: reduce) { [data-sable-pdp] * { transition: none !important; animation: none !important; scroll-behavior: auto !important; } }

/* Keep the theme's global heading and quote styles out of these pages. */
[data-sable-pdp] h1, [data-sable-pdp] h2, [data-sable-pdp] h3 { color: inherit; }
[data-sable-pdp] blockquote { border: 0; padding: 0; font-style: normal; color: inherit; }
[data-sable-pdp] a { color: inherit; }

.sable-slide--diagram { display: grid; place-items: center; background: var(--card); color: var(--ink); }
.sable-diagram { position: relative; width: 100%; height: 100%; margin: 0; padding: 6% 8% 56px; }
.sable-diagram svg { display: block; width: 100%; height: 100%; }
.sable-diagram__photo { position: absolute; top: 16px; right: 16px; width: 28%; aspect-ratio: 1; border-radius: 12px; overflow: hidden; border: 3px solid var(--bg); }
.sable-diagram figcaption { position: absolute; left: 20px; right: 20px; bottom: 18px; font-size: 13px; line-height: 1.4; text-align: center; opacity: .8; }
.sable-thumb__size { display: grid; place-items: center; width: 100%; height: 100%; background: var(--card); color: var(--ink); font-weight: 700; font-size: 15px; }