/*
Theme Name: TikTok Shop Editable Singapore
Author: OpenAI
Description: Editable single-product storefront for WooCommerce and CheckoutWC, adapted from the supplied static source.
Version: 1.1.23
Requires at least: 6.3
Requires PHP: 7.4
Text Domain: tiktok-shop-editable
WC requires at least: 8.0
WC tested up to: 10.0
*/

html,
body {
    margin: 0;
    padding: 0;
}

body.admin-bar .shop-app {
    min-height: calc(100vh - 32px);
}

.tts-app-header {
    position: sticky;
    top: 0;
    z-index: 90;
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 56px;
    padding: 0 8px;
    border-bottom: 1px solid #ededed;
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

body.admin-bar .tts-app-header {
    top: 32px;
}

.tts-app-brand {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    min-width: 0;
    max-width: calc(100% - 188px);
    color: #121212;
}

.tts-app-brand strong {
    overflow: hidden;
    font-size: 16px;
    font-weight: 750;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tts-app-brand-mark,
.tts-app-brand-mark svg {
    display: block;
    width: 24px;
    height: 24px;
}

.tts-app-verified,
.tts-app-verified svg {
    display: block;
    width: 14px;
    height: 14px;
}

.tts-app-header-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin-left: auto;
}

.tts-app-header-button {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 44px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: #121212;
    text-decoration: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.tts-app-header-button:active {
    background: #f3f3f3;
}

.tts-app-header-button svg {
    display: block;
    width: 24px;
    height: 24px;
}

.tts-app-more > span {
    position: relative;
    top: -3px;
    font-size: 21px;
    font-weight: 700;
    letter-spacing: 2px;
    line-height: 1;
}

.tts-decoration-only {
    cursor: default;
    pointer-events: none;
    user-select: none;
    -webkit-user-select: none;
}

.tts-decoration-only:active {
    background: transparent;
}

.tts-app-cart-count {
    position: absolute;
    top: 4px;
    right: 1px;
    min-width: 17px;
    height: 17px;
    padding: 0 4px;
    border: 2px solid #fff;
    border-radius: 10px;
    background: #fe2c55;
    color: #fff;
    font-size: 9px;
    font-weight: 700;
    line-height: 13px;
    text-align: center;
}

.tts-app-toast {
    position: fixed;
    top: 68px;
    left: 50%;
    z-index: 10100;
    transform: translate(-50%, -8px);
    min-width: 120px;
    padding: 9px 14px;
    border-radius: 18px;
    background: rgba(18, 18, 18, 0.9);
    color: #fff;
    font-size: 12px;
    text-align: center;
    opacity: 0;
    transition: opacity 0.18s ease, transform 0.18s ease;
    pointer-events: none;
}

.tts-app-toast.is-visible {
    transform: translate(-50%, 0);
    opacity: 1;
}

.tts-app-toast[hidden] {
    display: none !important;
}

.tts-deal-strip {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 40px;
    padding: 9px 16px;
    background: linear-gradient(90deg, #ffe9ef 0%, #fff2f5 100%);
    color: #fe2c55;
    font-size: 13px;
}

.tts-deal-primary {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-weight: 750;
    white-space: nowrap;
}

.tts-deal-primary svg {
    width: 15px;
    height: 15px;
}

.tts-deal-secondary {
    overflow: hidden;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.product-title-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.product-title-row .product-title {
    flex: 1;
    min-width: 0;
}

.product-title-actions {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 2px;
}

.product-action-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    margin: -5px 0 0;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: #222;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.product-action-button:active {
    background: #f4f4f4;
}

.product-action-button svg {
    display: block;
    width: 22px;
    height: 22px;
}

.product-action-button.is-saved svg path {
    fill: currentColor;
}

.gallery-nav[hidden],
.photo-lightbox-nav[hidden] {
    display: none !important;
}

.promo-tags {
    flex-wrap: nowrap;
    overflow-x: auto;
    margin-right: -16px;
    padding-right: 16px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}

.promo-tags::-webkit-scrollbar {
    display: none;
}

.promo-tag {
    flex: 0 0 auto;
    white-space: nowrap;
}

.tts-notice,
.tts-empty-product {
    max-width: 720px;
    margin: 48px auto;
    padding: 24px;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.tts-empty-product a {
    color: #fe2c55;
}

.description-content img {
    max-width: 100%;
    height: auto;
}

.description-content iframe,
.description-content video {
    width: 100%;
    max-width: 100%;
}

.tts-review-hidden {
    display: none;
}

.tts-review-empty {
    margin: 0;
    color: #777;
    font-size: 13px;
}

.tts-cart-form {
    margin: 0 0 16px;
}

.tts-cart-form.is-simple {
    height: 0;
    margin: 0;
    overflow: hidden;
}

.tts-cart-form.has-options {
    margin: 0 -16px;
    padding: 16px;
    border-top: 8px solid #f5f5f5;
}

.tts-cart-form .quantity,
.tts-cart-form form.cart > .single_add_to_cart_button,
.tts-cart-form .woocommerce-variation-add-to-cart .single_add_to_cart_button {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

.tts-cart-form table.variations {
    width: 100%;
    border-collapse: collapse;
    margin: 0;
}

.tts-cart-form table.variations th,
.tts-cart-form table.variations td {
    display: block;
    padding: 0;
    text-align: left;
}

.tts-cart-form table.variations th {
    margin: 0 0 8px;
    font-size: 14px;
    font-weight: 600;
}

.tts-cart-form table.variations tr + tr th {
    margin-top: 14px;
}

.tts-cart-form table.variations select {
    width: 100%;
    min-height: 44px;
    padding: 8px 36px 8px 12px;
    border: 1px solid #ddd;
    border-radius: 8px;
    background: #fff;
    color: #121212;
    font-size: 14px;
}

.tts-cart-form table.variations select.tts-variation-select-enhanced {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

.tts-variation-selected-label {
    color: #777;
    font-weight: 400;
}

.tts-variation-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.tts-variation-chip {
    min-width: 62px;
    min-height: 42px;
    padding: 8px 14px;
    border: 1px solid #dedede;
    border-radius: 7px;
    background: #fff;
    color: #121212;
    font: inherit;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.25;
    text-align: center;
    cursor: pointer;
    transition: border-color 0.15s ease, box-shadow 0.15s ease,
        background 0.15s ease;
    -webkit-tap-highlight-color: transparent;
}

.tts-variation-chip.is-active {
    border-color: #121212;
    box-shadow: inset 0 0 0 1px #121212;
    background: #fafafa;
}

.tts-variation-chip:disabled {
    border-color: #eee;
    background: #f7f7f7;
    color: #b5b5b5;
    cursor: not-allowed;
    text-decoration: line-through;
}

.tts-variation-chip:focus-visible {
    outline: 2px solid #fe2c55;
    outline-offset: 2px;
}

.tts-cart-form .reset_variations {
    display: inline-block;
    margin-top: 8px;
    color: #777;
    font-size: 12px;
}

.tts-cart-form .woocommerce-variation-price {
    margin: 10px 0;
    font-weight: 700;
}

.btn-buy-cta[disabled] {
    cursor: not-allowed;
    opacity: 0.55;
}

.photo-lightbox[hidden],
.wheel-overlay[hidden] {
    display: none !important;
}

.photo-lightbox:not([hidden]) {
    opacity: 1;
    visibility: visible;
}

.photo-lightbox-image {
    display: block;
    margin: auto;
    max-width: min(92vw, 960px);
    max-height: 88vh;
    object-fit: contain;
}

.review-photos-scroll {
    scroll-snap-type: x proximity;
    scrollbar-width: none;
}

.review-photos-scroll::-webkit-scrollbar {
    display: none;
}

.review-photo-card {
    scroll-snap-align: start;
}

.review-photo-card:focus-visible,
.review-entry-photo-stack:focus-visible {
    outline: 2px solid #fe2c55;
    outline-offset: 3px;
}

.review-entry-photo-stack {
    border: 0;
    background: transparent;
    padding: 0;
}

.review-lightbox[hidden]:not(.open) {
    pointer-events: none;
}

.review-lightbox.open {
    pointer-events: auto;
}

.wheel-close {
    position: absolute;
    top: -8px;
    right: 0;
    z-index: 10;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.18);
    color: #fff;
    font-size: 26px;
    line-height: 34px;
    cursor: pointer;
}

/* Exact mobile proportions from the supplied reference screenshots. */
.shop-app {
    width: 100%;
    box-shadow: 0 0 0 1px rgba(18, 18, 18, 0.04),
        0 12px 40px rgba(18, 18, 18, 0.08);
}

.shop-body {
    padding-top: 14px;
}

.buy-bar {
    padding-bottom: max(14px, env(safe-area-inset-bottom));
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

.btn-buy-cta {
    min-height: 50px;
    box-shadow: 0 4px 12px rgba(254, 44, 85, 0.18);
}

.reviews-module-title,
.store-section-title,
.description-section > h2,
.shop-services-title,
.shop-protection-title {
    letter-spacing: -0.01em;
}

.store-card {
    overflow: hidden;
}

.store-official-badge svg {
    width: 14px;
    height: 14px;
}

.store-metric-value svg {
    width: 14px;
    height: 14px;
}

.description-content > :first-child {
    margin-top: 0;
}

.description-content ol,
.description-content ul {
    padding-left: 18px;
    margin: 0 0 12px;
}

.description-content li {
    margin: 2px 0;
}

.description-content h2,
.description-content h3 {
    margin: 14px 0 6px;
    color: #121212;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.5;
}

.description-content .tts-description-image {
    display: block;
    width: 100%;
    margin: 28px 0 0;
}

.tts-product-attributes {
    margin: 0 0 16px;
    border-top: 1px solid #f0f0f0;
}

.tts-product-attributes table {
    width: 100%;
    margin: 0;
    border: 0;
    border-collapse: collapse;
}

.tts-product-attributes tr {
    border-bottom: 1px solid #f0f0f0;
}

.tts-product-attributes th,
.tts-product-attributes td {
    padding: 10px 0;
    border: 0;
    background: transparent;
    font-size: 13px;
    line-height: 1.45;
    text-align: left;
    vertical-align: top;
}

.tts-product-attributes th {
    width: 34%;
    padding-right: 12px;
    color: #888;
    font-weight: 400;
}

.tts-product-attributes td {
    color: #222;
    font-weight: 500;
}

.tts-product-attributes p {
    margin: 0;
}

@media (max-width: 480px) {
    .buy-bar {
        padding-bottom: max(14px, env(safe-area-inset-bottom));
    }

    .reviews-module {
        padding-right: 16px;
        padding-left: 16px;
    }

    .review-photos-scroll {
        margin-right: -16px;
        padding-right: 16px;
    }
}

@media (max-width: 380px) {
    .review-photo-card,
    .review-photo-card img {
        width: 92px;
        height: 92px;
        min-width: 92px;
        min-height: 92px;
        max-width: 92px;
        max-height: 92px;
    }

    .review-entry-body {
        gap: 8px;
    }
}

/* v1.1.9 — refined promotional materials and motion. */
.wheel-overlay {
    background:
        radial-gradient(circle at 50% 8%, rgba(255, 243, 151, 0.48), transparent 22%),
        radial-gradient(circle at 14% 80%, rgba(255, 210, 77, 0.2), transparent 25%),
        radial-gradient(circle at 87% 75%, rgba(255, 222, 92, 0.2), transparent 27%),
        linear-gradient(150deg, #f92f4a 0%, #ff433e 48%, #ff633c 100%);
    opacity: 0;
    transition: opacity 0.18s ease;
}

.wheel-popup {
    border: 1px solid rgba(255, 235, 152, 0.96);
    background:
        radial-gradient(circle at 50% -8%, rgba(255, 217, 79, 0.24), transparent 34%),
        linear-gradient(180deg, #fffdf7 0%, #fff7e8 58%, #fff0db 100%);
    box-shadow:
        0 0 0 4px rgba(255, 103, 57, 0.12),
        0 1px 0 rgba(255, 255, 255, 0.92) inset,
        0 24px 64px rgba(161, 33, 25, 0.26);
    transform: translateY(16px) scale(0.95);
    transition: opacity 0.22s ease, transform 0.42s cubic-bezier(0.16, 1.06, 0.3, 1);
}

.wheel-popup::after {
    content: '';
    position: absolute;
    top: 1px;
    right: 28px;
    left: 28px;
    z-index: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.95), transparent);
    pointer-events: none;
}

.wheel-overlay.is-ready .wheel-stage:not(.is-dimmed) {
    animation: tts-refined-stage-enter 0.5s cubic-bezier(0.16, 1.08, 0.3, 1) 0.03s both;
}

@keyframes tts-refined-stage-enter {
    from { opacity: 0.4; transform: scale(0.86); }
    to { opacity: 1; transform: scale(1); }
}

.wheel-disc {
    background:
        repeating-conic-gradient(from -22.5deg, transparent 0deg 44.15deg, rgba(255, 255, 255, 0.52) 44.15deg 45deg),
        conic-gradient(
            from -22.5deg,
            #ff4a52 0deg 45deg,
            #ffda4e 45deg 90deg,
            #ff4a52 90deg 135deg,
            #ffda4e 135deg 180deg,
            #ff4a52 180deg 225deg,
            #ffda4e 225deg 270deg,
            #ff4a52 270deg 315deg,
            #ffda4e 315deg 360deg
        );
    box-shadow:
        inset 0 0 0 2px rgba(255, 255, 255, 0.5),
        inset 0 0 26px rgba(181, 53, 28, 0.08),
        0 12px 28px rgba(200, 48, 35, 0.2);
}

.wheel-rim {
    border: 9px solid #ffd13f;
    background: transparent;
    box-shadow:
        0 0 0 3px #f48b2d,
        inset 0 0 0 2px rgba(255, 250, 190, 0.9),
        inset 0 -4px 7px rgba(221, 105, 13, 0.18),
        0 7px 20px rgba(211, 70, 31, 0.2);
}

.wheel-rim::before {
    opacity: 0.94;
    filter: drop-shadow(0 1px 1px rgba(235, 129, 29, 0.16));
}

.wheel-overlay.is-spinning .wheel-pointer {
    animation: none;
}

.wheel-pointer {
    border-top-color: #f23843;
    filter: drop-shadow(0 2px 1px #bd2630) drop-shadow(0 0 4px rgba(255, 90, 64, 0.22));
}

.wheel-pointer.is-ticking {
    animation: tts-refined-pointer-tick 0.095s cubic-bezier(0.22, 0.72, 0.22, 1);
}

@keyframes tts-refined-pointer-tick {
    0% { transform: translateX(-50%) rotate(-2deg); }
    48% { transform: translateX(-50%) rotate(7deg); }
    100% { transform: translateX(-50%) rotate(0deg); }
}

.wheel-hub-button {
    border: 4px solid #fff4af;
    background:
        radial-gradient(circle at 36% 26%, rgba(255, 255, 255, 0.34), transparent 26%),
        linear-gradient(180deg, #ff5a64 0%, #f52e43 58%, #e52338 100%);
    box-shadow:
        0 4px 0 #c61f31,
        0 8px 18px rgba(195, 44, 39, 0.22),
        0 0 0 2px rgba(255, 202, 58, 0.32),
        inset 0 2px 4px rgba(255, 255, 255, 0.34);
}

.wheel-hub-button::before {
    content: '';
    position: absolute;
    inset: 8px;
    border-radius: 50%;
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.12), transparent 50%);
    pointer-events: none;
}

.wheel-hub-button span {
    position: relative;
    z-index: 2;
}

.wheel-overlay.is-ready:not(.is-spinning):not(.is-landed) .wheel-hub-button:not(:disabled) {
    animation: tts-refined-hub-breathe 1.55s ease-in-out 0.45s infinite;
}

@keyframes tts-refined-hub-breathe {
    0%, 100% { transform: scale(1); box-shadow: 0 4px 0 #c61f31, 0 8px 18px rgba(195, 44, 39, 0.22), 0 0 0 2px rgba(255, 202, 58, 0.28); }
    50% { transform: scale(1.045); box-shadow: 0 4px 0 #c61f31, 0 10px 22px rgba(195, 44, 39, 0.25), 0 0 0 6px rgba(255, 205, 62, 0.12); }
}

.wheel-hub-button.is-spinning {
    animation: none;
    transform: scale(0.97);
}

.wheel-stage.is-settling {
    animation: tts-refined-wheel-settle 0.28s cubic-bezier(0.22, 0.82, 0.22, 1);
}

@keyframes tts-refined-wheel-settle {
    0% { transform: scale(1); }
    48% { transform: scale(1.025); }
    100% { transform: scale(1); }
}

.wheel-overlay.is-landed .wheel-stage::after {
    animation: tts-refined-win-ring 0.72s cubic-bezier(0.18, 0.82, 0.2, 1) forwards;
}

@keyframes tts-refined-win-ring {
    0% { opacity: 0; transform: scale(0.68); }
    28% { opacity: 0.78; transform: scale(0.96); }
    100% { opacity: 0; transform: scale(1.18); }
}

.wheel-prize-card {
    overflow: hidden;
    border: 1px solid #ffcc42;
    background:
        radial-gradient(circle at 50% 0%, rgba(255, 223, 82, 0.34), transparent 36%),
        linear-gradient(180deg, #fffdf2 0%, #fff2bc 100%);
    box-shadow: 0 0 0 5px rgba(255, 79, 61, 0.11), 0 15px 34px rgba(195, 48, 36, 0.22);
}

.wheel-prize-card::after {
    content: '';
    position: absolute;
    top: -40%;
    left: -55%;
    width: 34%;
    height: 180%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.7), transparent);
    transform: skewX(-18deg);
    opacity: 0;
    pointer-events: none;
}

.wheel-prize-card.is-active::after {
    animation: tts-refined-result-shine 0.85s ease 0.24s forwards;
}

@keyframes tts-refined-result-shine {
    0% { left: -55%; opacity: 0; }
    25% { opacity: 0.7; }
    100% { left: 125%; opacity: 0; }
}

.wheel-prize-amount.is-revealed {
    animation: tts-refined-prize-reveal 0.54s cubic-bezier(0.16, 0.88, 0.25, 1.12) forwards;
}

@keyframes tts-refined-prize-reveal {
    0% { opacity: 0; filter: blur(7px); transform: translateY(10px) scale(0.34); }
    34% { opacity: 1; filter: blur(0); transform: translateY(-2px) scale(1.25); }
    55% { opacity: 1; filter: blur(0); transform: translateY(1px) scale(0.92); }
    75% { opacity: 1; transform: translateY(0) scale(1.08); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}

.wheel-prize-reserved strong {
    animation: tts-refined-timer-pulse 1s ease-in-out infinite;
}

@keyframes tts-refined-timer-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.72; }
}

.wheel-win-confetti {
    position: absolute;
    inset: 0;
    z-index: 20;
    overflow: visible;
    pointer-events: none;
}

.wheel-win-confetti span {
    position: absolute;
    top: 54%;
    left: 50%;
    width: 8px;
    height: 13px;
    border-radius: 2px;
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.25);
    will-change: transform, opacity;
}

.wheel-win-confetti span:nth-child(4n) {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

.wheel-win-confetti span:nth-child(1),
.wheel-win-confetti span:nth-child(5),
.wheel-win-confetti span:nth-child(9),
.wheel-win-confetti span:nth-child(13),
.wheel-win-confetti span:nth-child(17) { background: #ffd83f; }

.wheel-win-confetti span:nth-child(2),
.wheel-win-confetti span:nth-child(6),
.wheel-win-confetti span:nth-child(10),
.wheel-win-confetti span:nth-child(14),
.wheel-win-confetti span:nth-child(18) { background: #ff4a4c; }

.wheel-win-confetti span:nth-child(3),
.wheel-win-confetti span:nth-child(7),
.wheel-win-confetti span:nth-child(11),
.wheel-win-confetti span:nth-child(15) { background: #fff; }

.wheel-win-confetti span:nth-child(4),
.wheel-win-confetti span:nth-child(8),
.wheel-win-confetti span:nth-child(12),
.wheel-win-confetti span:nth-child(16) { background: #ff9f32; }

.wheel-win-confetti span:nth-child(1)  { --confetti-x: -155px; --confetti-y: -112px; --confetti-r: -230deg; --confetti-delay: 0ms; }
.wheel-win-confetti span:nth-child(2)  { --confetti-x: -125px; --confetti-y: -158px; --confetti-r: 250deg; --confetti-delay: 35ms; }
.wheel-win-confetti span:nth-child(3)  { --confetti-x: -92px; --confetti-y: -122px; --confetti-r: -310deg; --confetti-delay: 70ms; }
.wheel-win-confetti span:nth-child(4)  { --confetti-x: -55px; --confetti-y: -174px; --confetti-r: 210deg; --confetti-delay: 15ms; }
.wheel-win-confetti span:nth-child(5)  { --confetti-x: -24px; --confetti-y: -132px; --confetti-r: -260deg; --confetti-delay: 95ms; }
.wheel-win-confetti span:nth-child(6)  { --confetti-x: 32px; --confetti-y: -168px; --confetti-r: 290deg; --confetti-delay: 45ms; }
.wheel-win-confetti span:nth-child(7)  { --confetti-x: 70px; --confetti-y: -128px; --confetti-r: -240deg; --confetti-delay: 80ms; }
.wheel-win-confetti span:nth-child(8)  { --confetti-x: 112px; --confetti-y: -158px; --confetti-r: 330deg; --confetti-delay: 20ms; }
.wheel-win-confetti span:nth-child(9)  { --confetti-x: 152px; --confetti-y: -105px; --confetti-r: -280deg; --confetti-delay: 65ms; }
.wheel-win-confetti span:nth-child(10) { --confetti-x: -166px; --confetti-y: -38px; --confetti-r: 260deg; --confetti-delay: 110ms; }
.wheel-win-confetti span:nth-child(11) { --confetti-x: -132px; --confetti-y: 18px; --confetti-r: -320deg; --confetti-delay: 50ms; }
.wheel-win-confetti span:nth-child(12) { --confetti-x: -82px; --confetti-y: 48px; --confetti-r: 240deg; --confetti-delay: 90ms; }
.wheel-win-confetti span:nth-child(13) { --confetti-x: -38px; --confetti-y: 66px; --confetti-r: -280deg; --confetti-delay: 25ms; }
.wheel-win-confetti span:nth-child(14) { --confetti-x: 38px; --confetti-y: 70px; --confetti-r: 300deg; --confetti-delay: 75ms; }
.wheel-win-confetti span:nth-child(15) { --confetti-x: 82px; --confetti-y: 48px; --confetti-r: -250deg; --confetti-delay: 105ms; }
.wheel-win-confetti span:nth-child(16) { --confetti-x: 126px; --confetti-y: 16px; --confetti-r: 285deg; --confetti-delay: 40ms; }
.wheel-win-confetti span:nth-child(17) { --confetti-x: 164px; --confetti-y: -36px; --confetti-r: -300deg; --confetti-delay: 85ms; }
.wheel-win-confetti span:nth-child(18) { --confetti-x: 8px; --confetti-y: -196px; --confetti-r: 340deg; --confetti-delay: 120ms; }

.wheel-overlay.is-landed .wheel-win-confetti span {
    animation: tts-refined-confetti-burst 1.18s cubic-bezier(0.12, 0.7, 0.18, 1) var(--confetti-delay) forwards;
}

@keyframes tts-refined-confetti-burst {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) rotate(0deg) scale(0.18);
    }
    8% { opacity: 1; }
    38% {
        opacity: 1;
        transform: translate(calc(-50% + var(--confetti-x)), calc(-50% + var(--confetti-y))) rotate(var(--confetti-r)) scale(1.08);
    }
    68% {
        opacity: 1;
        transform: translate(calc(-50% + var(--confetti-x)), calc(-50% + var(--confetti-y) + 62px)) rotate(calc(var(--confetti-r) + 190deg)) scale(1);
    }
    100% {
        opacity: 0;
        transform: translate(calc(-50% + var(--confetti-x)), calc(-50% + var(--confetti-y) + 168px)) rotate(calc(var(--confetti-r) + 460deg)) scale(0.82);
    }
}

@media (prefers-reduced-motion: reduce) {
    .wheel-win-confetti span {
        animation-duration: 0.01ms !important;
    }
}

.tts-shop-archive {
    max-width: 1180px;
    margin: 0 auto;
    padding: 32px 20px 80px;
    background: #fff;
    min-height: 100vh;
}

@media (max-width: 782px) {
    body.admin-bar .shop-app {
        min-height: calc(100vh - 46px);
    }

    body.admin-bar .tts-app-header {
        top: 46px;
    }
}

/* v1.1.7 — casino-game promotional wheel. */
.wheel-overlay {
    opacity: 0;
    background:
        radial-gradient(circle at 50% 15%, rgba(255, 199, 76, 0.16), transparent 25%),
        radial-gradient(circle at 12% 78%, rgba(164, 0, 29, 0.28), transparent 30%),
        radial-gradient(circle at 88% 70%, rgba(145, 0, 24, 0.24), transparent 26%),
        linear-gradient(145deg, rgba(8, 2, 3, 0.96) 0%, rgba(58, 3, 13, 0.96) 52%, rgba(11, 2, 4, 0.97) 100%);
    transition: opacity 0.42s ease;
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}

.wheel-overlay.is-ready {
    opacity: 1;
}

.wheel-overlay.is-hidden {
    opacity: 0;
}

.wheel-popup {
    box-sizing: border-box;
    max-width: 368px;
    padding: 28px 20px 22px;
    border: 2px solid #d6a138;
    border-radius: 28px;
    background:
        radial-gradient(circle at 50% 0%, rgba(151, 19, 41, 0.55), transparent 35%),
        linear-gradient(180deg, #3b0710 0%, #180306 48%, #0f0204 100%);
    box-shadow:
        0 0 0 3px rgba(72, 40, 8, 0.88),
        0 0 34px rgba(255, 188, 59, 0.25),
        0 32px 90px rgba(0, 0, 0, 0.55);
    opacity: 0;
    transform: translateY(22px) scale(0.93);
    transition: opacity 0.34s ease, transform 0.52s cubic-bezier(0.16, 1.12, 0.32, 1);
    overflow: visible;
}

.wheel-popup::before {
    content: '';
    position: absolute;
    inset: 5px;
    z-index: 0;
    border: 1px solid rgba(255, 225, 143, 0.22);
    border-radius: 21px;
    pointer-events: none;
}

.wheel-popup > * {
    position: relative;
    z-index: 1;
}

.wheel-overlay.is-ready .wheel-popup {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.wheel-title {
    margin-bottom: 7px;
    color: #ffd66b;
    font-size: clamp(1.55rem, 6.7vw, 1.95rem);
    font-weight: 850;
    letter-spacing: 0.035em;
    text-transform: uppercase;
    text-shadow: 0 1px 0 #7a3d00, 0 0 16px rgba(255, 195, 70, 0.34);
}

.wheel-subtitle {
    margin-bottom: 20px;
    padding: 0;
    background: transparent;
    box-shadow: none;
    color: #f3d7a1;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0;
}

.wheel-stage {
    width: min(304px, 80vw);
    height: min(304px, 80vw);
    margin-bottom: 22px;
    filter: none;
    transition: opacity 0.48s ease, transform 0.52s cubic-bezier(0.22, 0.72, 0.22, 1), filter 0.48s ease;
}

.wheel-stage::before {
    content: '';
    position: absolute;
    inset: 12%;
    border-radius: 50%;
    background: rgba(156, 0, 27, 0.32);
    box-shadow: 0 0 60px 28px rgba(255, 182, 46, 0.14), 0 0 90px 38px rgba(127, 0, 20, 0.2);
    pointer-events: none;
    transform: scale(0.96);
    transition: opacity 0.35s ease, transform 0.35s ease;
}

.wheel-stage::after {
    content: '';
    position: absolute;
    inset: -12%;
    z-index: 3;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 234, 147, 0.7) 0%, rgba(255, 191, 49, 0.25) 34%, transparent 67%);
    opacity: 0;
    transform: scale(0.55);
    pointer-events: none;
}

.wheel-overlay.is-landed .wheel-stage::after {
    animation: tts-casino-win-flash 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

@keyframes tts-casino-win-flash {
    0% { opacity: 0; transform: scale(0.55); }
    34% { opacity: 0.78; transform: scale(1); }
    100% { opacity: 0; transform: scale(1.16); }
}

.wheel-overlay.is-spinning .wheel-stage::before {
    opacity: 0.88;
    transform: scale(1.04);
}

.wheel-confetti span:nth-child(1),
.wheel-confetti span:nth-child(4) {
    background: #ffd35e;
}

.wheel-confetti span:nth-child(2),
.wheel-confetti span:nth-child(5) {
    background: #fff1b3;
}

.wheel-confetti span:nth-child(3),
.wheel-confetti span:nth-child(6) {
    background: #c91532;
}

.wheel-confetti span:nth-child(1) { --casino-burst-x: -22px; --casino-burst-y: -28px; }
.wheel-confetti span:nth-child(2) { --casino-burst-x: 20px; --casino-burst-y: -30px; }
.wheel-confetti span:nth-child(3) { --casino-burst-x: -26px; --casino-burst-y: 22px; }
.wheel-confetti span:nth-child(4) { --casino-burst-x: 24px; --casino-burst-y: 26px; }
.wheel-confetti span:nth-child(5) { --casino-burst-x: -32px; --casino-burst-y: -5px; }
.wheel-confetti span:nth-child(6) { --casino-burst-x: 32px; --casino-burst-y: 3px; }

.wheel-overlay.is-landed .wheel-confetti span {
    animation: tts-casino-confetti-burst 0.78s cubic-bezier(0.12, 0.72, 0.2, 1) forwards;
}

@keyframes tts-casino-confetti-burst {
    0% { opacity: 0; transform: translate(0, 0) rotate(0deg) scale(0.45); }
    24% { opacity: 1; }
    100% { opacity: 0; transform: translate(var(--casino-burst-x), var(--casino-burst-y)) rotate(220deg) scale(0.9); }
}

.wheel-stage.is-dimmed {
    opacity: 0.2;
    transform: scale(0.91);
    filter: saturate(0.72) blur(1.8px);
}

.wheel-disc {
    background: conic-gradient(
        from -22.5deg,
        #171012 0deg 45deg,
        #a8001d 45deg 90deg,
        #171012 90deg 135deg,
        #a8001d 135deg 180deg,
        #171012 180deg 225deg,
        #a8001d 225deg 270deg,
        #171012 270deg 315deg,
        #a8001d 315deg 360deg
    );
    box-shadow: inset 0 0 0 2px rgba(255, 222, 128, 0.3), inset 0 0 28px rgba(0, 0, 0, 0.28), 0 14px 38px rgba(0, 0, 0, 0.5);
    will-change: transform;
}

.wheel-rim {
    inset: -7px;
    border: 10px solid #d9a22d;
    box-shadow: 0 0 0 3px #633606, inset 0 0 0 2px #ffe8a1, 0 0 24px rgba(255, 190, 50, 0.32), 0 10px 30px rgba(0, 0, 0, 0.44);
}

.wheel-rim::before {
    background: repeating-conic-gradient(from 11deg, #fff2ae 0deg 4deg, transparent 4deg 22.5deg);
    opacity: 0.95;
}

.wheel-overlay.is-spinning .wheel-rim {
    animation: tts-casino-rim-pulse 0.6s ease-in-out infinite alternate;
}

@keyframes tts-casino-rim-pulse {
    from { filter: brightness(0.94); }
    to { filter: brightness(1.16) drop-shadow(0 0 8px rgba(255, 204, 86, 0.34)); }
}

.wheel-pointer {
    top: -2px;
    border-left-width: 14px;
    border-right-width: 14px;
    border-top: 28px solid #ffd15c;
    filter: drop-shadow(0 2px 1px #6b3400) drop-shadow(0 0 5px rgba(255, 213, 91, 0.45));
    transform-origin: 50% 0;
}

.wheel-overlay.is-spinning .wheel-pointer {
    animation: tts-wheel-pointer-tick 0.14s ease-in-out infinite alternate;
}

@keyframes tts-wheel-pointer-tick {
    from { transform: translateX(-50%) rotate(-3deg); }
    to { transform: translateX(-50%) rotate(4deg); }
}

.wheel-hub {
    width: 54px;
    height: 54px;
    margin: -27px 0 0 -27px;
    border: 3px solid #fff0b0;
    background: radial-gradient(circle at 35% 28%, #fff2a8 0%, #ffc83f 42%, #b66a06 100%);
    box-shadow: 0 5px 18px rgba(0, 0, 0, 0.42), 0 0 16px rgba(255, 199, 61, 0.25);
}

.wheel-hub svg {
    width: 25px;
    height: 25px;
    fill: #6a0713;
}

.wheel-segment-thanks {
    color: #ffd978;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.75);
}

.wheel-segment-badge {
    color: #5b1700;
    background: linear-gradient(180deg, #fff0a1 0%, #ffc33b 100%);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.28);
}

.wheel-disc.is-stopped {
    filter: saturate(1.08);
}

.wheel-overlay.is-landed .wheel-disc.is-stopped {
    animation: tts-wheel-land 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
}

@keyframes tts-wheel-land {
    0% { filter: saturate(1); }
    45% { filter: saturate(1.35) brightness(1.18) drop-shadow(0 0 13px rgba(255, 202, 67, 0.68)); }
    100% { filter: saturate(1.08); }
}

.wheel-overlay.is-landed .wheel-segment-label.is-win .wheel-segment-price {
    animation: tts-winning-number-glow 0.7s ease-in-out 2 alternate;
}

@keyframes tts-winning-number-glow {
    from { color: #fff; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.45); }
    to { color: #ffe77f; text-shadow: 0 0 8px #ffc43f, 0 0 16px rgba(255, 181, 32, 0.75); }
}

.wheel-btn {
    min-width: 214px;
    padding: 13px 34px;
    position: relative;
    overflow: hidden;
    border: 1px solid #fff0a5;
    background: linear-gradient(180deg, #ffe884 0%, #ffc637 48%, #e3940b 100%);
    box-shadow: 0 4px 0 #8d4d00, 0 10px 24px rgba(0, 0, 0, 0.35), 0 0 18px rgba(255, 196, 48, 0.2);
    color: #5a1305;
    font-size: 1rem;
    letter-spacing: 0.045em;
    transition: opacity 0.3s ease, transform 0.3s ease, box-shadow 0.15s ease;
}

.wheel-btn::before {
    content: '';
    position: absolute;
    top: -70%;
    left: -45%;
    width: 34%;
    height: 240%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.75), transparent);
    transform: skewX(-20deg);
    animation: tts-casino-button-shine 2.2s ease-in-out infinite;
    pointer-events: none;
}

@keyframes tts-casino-button-shine {
    0%, 55% { left: -45%; opacity: 0; }
    65% { opacity: 0.9; }
    100% { left: 120%; opacity: 0; }
}

.wheel-btn:active:not(:disabled) {
    transform: translateY(2px) scale(0.99);
    box-shadow: 0 2px 0 #8d4d00, 0 6px 14px rgba(0, 0, 0, 0.3);
}

.wheel-btn:disabled {
    opacity: 0.86;
}

.wheel-btn.is-spinning {
    transform: scale(0.985);
    box-shadow: 0 2px 0 #8d4d00, 0 6px 14px rgba(0, 0, 0, 0.3);
}

.wheel-btn.is-finished {
    opacity: 0;
    transform: translateY(5px);
    pointer-events: none;
}

.wheel-close {
    top: 12px;
    right: 12px;
    width: 32px;
    height: 32px;
    border: 1px solid rgba(255, 213, 105, 0.35);
    background: rgba(0, 0, 0, 0.3);
    color: #e8c875;
    font-size: 23px;
    line-height: 30px;
}

.wheel-overlay.is-spinning .wheel-close,
.wheel-overlay.is-landed .wheel-close {
    opacity: 0.42;
    pointer-events: none;
}

.wheel-prize-reveal {
    position: absolute;
    top: 50%;
    right: 22px;
    left: 22px;
    z-index: 12;
    min-height: 0;
    margin: 0;
    opacity: 0;
    transform: translateY(-46%);
    transition: opacity 0.34s ease, transform 0.46s cubic-bezier(0.22, 0.72, 0.22, 1);
}

.wheel-prize-reveal.is-visible {
    opacity: 1;
    transform: translateY(-50%);
}

.wheel-prize-card {
    margin: 0;
    padding: 19px 17px 18px;
    border: 2px solid #d6a138;
    border-radius: 19px;
    background: radial-gradient(circle at 50% 0%, #6d1020 0%, #2a050b 50%, #130204 100%);
    box-shadow: 0 0 0 4px rgba(97, 56, 10, 0.66), 0 18px 46px rgba(0, 0, 0, 0.48), 0 0 24px rgba(255, 191, 45, 0.18);
    opacity: 0;
    transform: scale(0.86);
    transition: opacity 0.34s ease, transform 0.5s cubic-bezier(0.18, 1.22, 0.3, 1);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

.wheel-prize-card.is-active {
    opacity: 1;
    transform: scale(1);
}

.wheel-prize-kicker {
    margin: 5px 0 7px;
    color: #f4deb0;
    font-size: 0.82rem;
    font-weight: 650;
}

.wheel-prize-check {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    margin: -36px auto 8px;
    border: 4px solid #4a2305;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 28%, #fff1a1, #ffc331 55%, #b86b05 100%);
    box-shadow: 0 5px 14px rgba(0, 0, 0, 0.38), 0 0 16px rgba(255, 196, 43, 0.35);
    color: #65110d;
    opacity: 0;
    transform: scale(0.7);
    transition: opacity 0.3s ease 0.08s, transform 0.4s cubic-bezier(0.2, 0.9, 0.25, 1.25) 0.08s;
}

.wheel-prize-card.is-active .wheel-prize-check {
    opacity: 1;
    transform: scale(1);
}

.wheel-prize-check svg {
    width: 21px;
    height: 21px;
}

.wheel-prize-amount {
    color: #ffd45c;
    opacity: 0;
    filter: blur(5px);
    transform: translateY(9px) scale(0.82);
    transition: none;
}

.wheel-prize-amount.is-revealed {
    color: #ffd45c;
    text-shadow: 0 0 9px rgba(255, 195, 49, 0.58), 0 0 20px rgba(255, 159, 21, 0.28);
    animation: tts-prize-soft-reveal 0.68s cubic-bezier(0.2, 0.78, 0.2, 1) forwards;
}

@keyframes tts-prize-soft-reveal {
    0% {
        opacity: 0;
        filter: blur(6px);
        transform: translateY(9px) scale(0.82);
    }
    58% {
        opacity: 0.92;
        filter: blur(0.6px);
        transform: translateY(0) scale(1.08);
    }
    100% {
        opacity: 1;
        filter: blur(0);
        transform: translateY(0) scale(1);
    }
}

@media (max-height: 680px) {
    .wheel-popup {
        padding-top: 20px;
        padding-bottom: 18px;
    }

    .wheel-title {
        font-size: 1.45rem;
    }

    .wheel-subtitle {
        margin-bottom: 14px;
    }

    .wheel-stage {
        width: min(258px, 72vw);
        height: min(258px, 72vw);
        margin-bottom: 16px;
    }
}

@media (max-width: 380px) {
    .wheel-popup {
        max-width: 344px;
        padding-right: 16px;
        padding-left: 16px;
        border-radius: 24px;
    }

    .wheel-stage {
        width: min(282px, 78vw);
        height: min(282px, 78vw);
    }

    .wheel-prize-reveal {
        right: 18px;
        left: 18px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .wheel-overlay,
    .wheel-popup,
    .wheel-stage,
    .wheel-prize-reveal,
    .wheel-prize-card,
    .wheel-prize-amount {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
    }
}

/* v1.1.8 — high-conversion red/yellow promotional wheel. */
.wheel-overlay {
    background:
        radial-gradient(circle at 50% 9%, rgba(255, 237, 116, 0.44), transparent 24%),
        radial-gradient(circle at 10% 78%, rgba(255, 211, 70, 0.18), transparent 27%),
        radial-gradient(circle at 92% 72%, rgba(255, 224, 103, 0.2), transparent 28%),
        linear-gradient(155deg, #ff2f4d 0%, #ff493e 54%, #ff6037 100%);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
}

.wheel-popup {
    max-width: 372px;
    padding: 17px 18px 20px;
    border: 2px solid rgba(255, 225, 92, 0.92);
    border-radius: 28px;
    background:
        radial-gradient(circle at 50% -10%, rgba(255, 216, 71, 0.24), transparent 35%),
        linear-gradient(180deg, #fffaf0 0%, #fff3df 100%);
    box-shadow: 0 0 0 4px rgba(210, 42, 38, 0.16), 0 26px 70px rgba(150, 24, 20, 0.28);
    transform: translateY(18px) scale(0.94);
    transition: opacity 0.28s ease, transform 0.45s cubic-bezier(0.16, 1.08, 0.3, 1);
}

.wheel-popup::before {
    inset: 6px;
    border: 1px solid rgba(255, 97, 71, 0.14);
    border-radius: 20px;
}

.wheel-promo-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 24px;
    margin: 1px auto 7px;
    padding: 3px 12px;
    border-radius: 999px;
    background: linear-gradient(180deg, #ffe96d, #ffd646);
    box-shadow: 0 3px 8px rgba(224, 80, 25, 0.12);
    color: #db2c31;
    font-size: 11px;
    font-weight: 850;
    line-height: 1.15;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.wheel-title {
    margin: 0 40px 4px;
    color: #ef303c;
    font-size: clamp(1.65rem, 7vw, 2rem);
    font-weight: 900;
    letter-spacing: -0.035em;
    text-transform: none;
    text-shadow: 0 2px 0 rgba(255, 203, 55, 0.2);
}

.wheel-subtitle {
    margin: 0 0 17px;
    color: #a95a3e;
    font-size: 0.78rem;
    font-weight: 650;
}

.wheel-stage {
    width: min(310px, 82vw);
    height: min(310px, 82vw);
    margin: 0 auto 3px;
    transition: opacity 0.38s ease, transform 0.44s cubic-bezier(0.22, 0.72, 0.22, 1), filter 0.38s ease;
}

.wheel-stage::before {
    inset: 5%;
    background: rgba(255, 83, 56, 0.2);
    box-shadow: 0 0 38px 15px rgba(255, 77, 55, 0.16);
}

.wheel-stage::after {
    inset: -10%;
    z-index: 3;
    background: radial-gradient(circle, rgba(255, 238, 96, 0.7) 0%, rgba(255, 208, 52, 0.3) 34%, transparent 66%);
}

.wheel-overlay.is-landed .wheel-stage::after {
    animation: tts-promo-win-flash 0.62s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

@keyframes tts-promo-win-flash {
    0% { opacity: 0; transform: scale(0.58); }
    38% { opacity: 0.9; transform: scale(1); }
    100% { opacity: 0; transform: scale(1.14); }
}

.wheel-stage.is-dimmed {
    opacity: 0.2;
    transform: scale(0.92);
    filter: saturate(0.72) blur(1.2px);
}

.wheel-disc {
    background: conic-gradient(
        from -22.5deg,
        #ff4a52 0deg 45deg,
        #ffd94a 45deg 90deg,
        #ff4a52 90deg 135deg,
        #ffd94a 135deg 180deg,
        #ff4a52 180deg 225deg,
        #ffd94a 225deg 270deg,
        #ff4a52 270deg 315deg,
        #ffd94a 315deg 360deg
    );
    box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.42), 0 11px 25px rgba(205, 46, 37, 0.22);
}

.wheel-rim {
    inset: -7px;
    border: 10px solid #ffc83d;
    box-shadow: 0 0 0 3px #f28a2d, inset 0 0 0 2px #fff1a2, 0 6px 18px rgba(215, 62, 30, 0.23);
    filter: none;
}

.wheel-rim::before {
    background: repeating-conic-gradient(from 11deg, #fff 0deg 4deg, transparent 4deg 22.5deg);
    opacity: 0.98;
}

.wheel-overlay.is-spinning .wheel-rim {
    animation: tts-promo-bulb-pulse 0.38s ease-in-out infinite alternate;
}

@keyframes tts-promo-bulb-pulse {
    from { filter: brightness(0.96); }
    to { filter: brightness(1.12) drop-shadow(0 0 5px rgba(255, 219, 76, 0.46)); }
}

.wheel-pointer {
    top: -3px;
    border-left-width: 15px;
    border-right-width: 15px;
    border-top: 30px solid #f23b43;
    filter: drop-shadow(0 2px 1px #c91f2b) drop-shadow(0 0 4px rgba(255, 79, 65, 0.25));
}

.wheel-overlay.is-spinning .wheel-pointer {
    animation: tts-promo-pointer-tick 0.12s ease-in-out infinite alternate;
}

@keyframes tts-promo-pointer-tick {
    from { transform: translateX(-50%) rotate(-4deg); }
    to { transform: translateX(-50%) rotate(5deg); }
}

.wheel-segment-thanks {
    color: #fff;
    text-shadow: 0 1px 2px rgba(177, 31, 38, 0.25);
}

.wheel-segment-label.is-price .wheel-segment-price,
.wheel-segment-label.is-win .wheel-segment-price {
    color: #db3034;
    text-shadow: none;
}

.wheel-segment-badge {
    color: #fff6a9;
    background: #ec3540;
    box-shadow: 0 2px 4px rgba(183, 37, 35, 0.18);
}

.wheel-hub-button {
    width: 80px;
    height: 80px;
    margin: -40px 0 0 -40px;
    padding: 0 10px;
    border: 5px solid #fff3aa;
    border-radius: 50%;
    background: linear-gradient(180deg, #ff5360 0%, #f52f43 58%, #e7273b 100%);
    box-shadow: 0 5px 0 #c52232, 0 8px 18px rgba(202, 48, 41, 0.24), inset 0 2px 4px rgba(255, 255, 255, 0.32);
    color: #fff;
    cursor: pointer;
    font: inherit;
    font-size: 12px;
    font-weight: 900;
    line-height: 1.05;
    letter-spacing: 0.02em;
    text-align: center;
    text-transform: uppercase;
    transition: opacity 0.22s ease, transform 0.16s ease, box-shadow 0.16s ease;
    -webkit-tap-highlight-color: transparent;
}

.wheel-hub-button::after {
    content: '';
    position: absolute;
    inset: 5px;
    border: 1px solid rgba(255, 255, 255, 0.32);
    border-radius: 50%;
    pointer-events: none;
}

.wheel-hub-button:active:not(:disabled) {
    transform: translateY(2px) scale(0.97);
    box-shadow: 0 3px 0 #c52232, 0 5px 12px rgba(202, 48, 41, 0.2);
}

.wheel-hub-button.is-spinning {
    opacity: 0.86;
    animation: tts-promo-hub-pulse 0.62s ease-in-out infinite alternate;
}

.wheel-hub-button.is-finished {
    opacity: 0;
    pointer-events: none;
}

@keyframes tts-promo-hub-pulse {
    from { filter: brightness(0.96); }
    to { filter: brightness(1.11); }
}

.wheel-overlay.is-landed .wheel-disc.is-stopped {
    animation: tts-promo-wheel-land 0.42s cubic-bezier(0.2, 0.8, 0.2, 1);
}

@keyframes tts-promo-wheel-land {
    0% { filter: saturate(1); }
    48% { filter: saturate(1.22) brightness(1.12) drop-shadow(0 0 9px rgba(255, 214, 56, 0.6)); }
    100% { filter: saturate(1.04); }
}

.wheel-confetti span:nth-child(1),
.wheel-confetti span:nth-child(4) { background: #ffd83f; }
.wheel-confetti span:nth-child(2),
.wheel-confetti span:nth-child(5) { background: #fff; }
.wheel-confetti span:nth-child(3),
.wheel-confetti span:nth-child(6) { background: #ff4b49; }

.wheel-overlay.is-landed .wheel-confetti span {
    animation-duration: 0.68s;
}

.wheel-close {
    top: 10px;
    right: 10px;
    width: 30px;
    height: 30px;
    border: 0;
    background: rgba(237, 54, 55, 0.08);
    color: #d96c56;
    font-size: 22px;
    line-height: 28px;
}

.wheel-prize-reveal {
    top: 54%;
    right: 22px;
    left: 22px;
    transform: translateY(-46%) scale(0.96);
    transition: opacity 0.26s ease, transform 0.38s cubic-bezier(0.18, 1.12, 0.3, 1);
}

.wheel-prize-reveal.is-visible {
    transform: translateY(-50%) scale(1);
}

.wheel-prize-card {
    padding: 20px 15px 15px;
    border: 2px solid #ffcf42;
    border-radius: 20px;
    background: linear-gradient(180deg, #fffce9 0%, #fff2bc 100%);
    box-shadow: 0 0 0 5px rgba(255, 81, 63, 0.13), 0 16px 34px rgba(207, 50, 39, 0.25);
    transform: scale(0.86);
    transition: opacity 0.24s ease, transform 0.4s cubic-bezier(0.18, 1.2, 0.3, 1);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.wheel-prize-check {
    width: 36px;
    height: 36px;
    margin: -40px auto 5px;
    border: 4px solid #fff4ae;
    background: #f33b47;
    box-shadow: 0 4px 10px rgba(212, 56, 44, 0.24);
    color: #fff;
}

.wheel-prize-congrats {
    margin: 4px 0 1px;
    color: #ed303b;
    font-size: 17px;
    font-weight: 900;
    line-height: 1.1;
    letter-spacing: 0.02em;
}

.wheel-prize-kicker {
    margin: 2px 0 3px;
    color: #a65d3d;
    font-size: 12px;
    font-weight: 650;
}

.wheel-prize-amount-slot {
    min-height: 3.2rem;
    margin: 0;
}

.wheel-prize-amount,
.wheel-prize-amount.is-revealed {
    color: #ed303b;
    text-shadow: 0 2px 0 rgba(255, 204, 48, 0.48);
}

.wheel-prize-amount {
    font-size: clamp(2rem, 9vw, 2.7rem);
    transform: translateY(8px) scale(0.78);
}

.wheel-prize-amount.is-revealed {
    animation: tts-promo-prize-pop 0.52s cubic-bezier(0.16, 0.9, 0.26, 1.18) forwards;
}

@keyframes tts-promo-prize-pop {
    0% { opacity: 0; filter: blur(5px); transform: translateY(8px) scale(0.78); }
    62% { opacity: 1; filter: blur(0); transform: translateY(0) scale(1.08); }
    100% { opacity: 1; filter: blur(0); transform: translateY(0) scale(1); }
}

.wheel-prize-note {
    margin: 1px 0 7px;
    color: #8d634c;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.3;
}

.wheel-prize-reserved {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin: 0;
    padding: 5px 9px;
    border-radius: 999px;
    background: #ffe870;
    color: #c93a32;
    font-size: 11px;
    font-weight: 700;
}

.wheel-prize-reserved strong {
    font-size: 12px;
    font-weight: 900;
}

@media (max-height: 680px) {
    .wheel-popup {
        padding-top: 13px;
        padding-bottom: 14px;
    }

    .wheel-promo-chip {
        margin-bottom: 4px;
    }

    .wheel-title {
        font-size: 1.5rem;
    }

    .wheel-subtitle {
        margin-bottom: 10px;
    }

    .wheel-stage {
        width: min(270px, 74vw);
        height: min(270px, 74vw);
    }
}

@media (max-width: 380px) {
    .wheel-popup {
        max-width: 348px;
        padding-right: 14px;
        padding-left: 14px;
    }

    .wheel-stage {
        width: min(286px, 78vw);
        height: min(286px, 78vw);
    }

    .wheel-hub-button {
        width: 74px;
        height: 74px;
        margin: -37px 0 0 -37px;
    }
}

/* v1.1.9 final cascade — keep the refined motion/material layer above legacy wheel skins. */
.wheel-overlay {
    background:
        radial-gradient(circle at 50% 8%, rgba(255, 243, 151, 0.48), transparent 22%),
        radial-gradient(circle at 14% 80%, rgba(255, 210, 77, 0.2), transparent 25%),
        radial-gradient(circle at 87% 75%, rgba(255, 222, 92, 0.2), transparent 27%),
        linear-gradient(150deg, #f92f4a 0%, #ff433e 48%, #ff633c 100%);
    transition: opacity 0.18s ease;
}

.wheel-popup {
    border: 1px solid rgba(255, 235, 152, 0.96);
    background:
        radial-gradient(circle at 50% -8%, rgba(255, 217, 79, 0.24), transparent 34%),
        linear-gradient(180deg, #fffdf7 0%, #fff7e8 58%, #fff0db 100%);
    box-shadow:
        0 0 0 4px rgba(255, 103, 57, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.92),
        0 24px 64px rgba(161, 33, 25, 0.26);
    transform: translateY(16px) scale(0.95);
    transition: opacity 0.22s ease, transform 0.42s cubic-bezier(0.16, 1.06, 0.3, 1);
}

.wheel-disc {
    background:
        repeating-conic-gradient(from -22.5deg, transparent 0deg 44.15deg, rgba(255, 255, 255, 0.52) 44.15deg 45deg),
        conic-gradient(from -22.5deg,
            #ff4a52 0deg 45deg, #ffda4e 45deg 90deg,
            #ff4a52 90deg 135deg, #ffda4e 135deg 180deg,
            #ff4a52 180deg 225deg, #ffda4e 225deg 270deg,
            #ff4a52 270deg 315deg, #ffda4e 315deg 360deg);
    box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.5), inset 0 0 26px rgba(181, 53, 28, 0.08), 0 12px 28px rgba(200, 48, 35, 0.2);
}

.wheel-rim {
    border: 9px solid #ffd13f;
    background: transparent;
    box-shadow: 0 0 0 3px #f48b2d, inset 0 0 0 2px rgba(255, 250, 190, 0.9), inset 0 -4px 7px rgba(221, 105, 13, 0.18), 0 7px 20px rgba(211, 70, 31, 0.2);
}

.wheel-rim::before {
    opacity: 0.94;
    filter: drop-shadow(0 1px 1px rgba(235, 129, 29, 0.16));
}

.wheel-overlay.is-spinning .wheel-pointer {
    animation: none;
}

.wheel-overlay.is-spinning .wheel-pointer.is-ticking {
    animation: tts-refined-pointer-tick 0.095s cubic-bezier(0.22, 0.72, 0.22, 1);
}

.wheel-hub-button {
    border: 4px solid #fff4af;
    background: radial-gradient(circle at 36% 26%, rgba(255, 255, 255, 0.34), transparent 26%), linear-gradient(180deg, #ff5a64 0%, #f52e43 58%, #e52338 100%);
    box-shadow: 0 4px 0 #c61f31, 0 8px 18px rgba(195, 44, 39, 0.22), 0 0 0 2px rgba(255, 202, 58, 0.32), inset 0 2px 4px rgba(255, 255, 255, 0.34);
}

.wheel-overlay.is-ready:not(.is-spinning):not(.is-landed) .wheel-hub-button:not(:disabled) {
    animation: tts-refined-hub-breathe 1.55s ease-in-out 0.45s infinite;
}

.wheel-hub-button.is-spinning {
    opacity: 0.9;
    animation: none;
    transform: scale(0.97);
}

.wheel-stage.is-settling {
    animation: tts-refined-wheel-settle 0.28s cubic-bezier(0.22, 0.82, 0.22, 1);
}

.wheel-overlay.is-landed .wheel-stage::after {
    animation: tts-refined-win-ring 0.72s cubic-bezier(0.18, 0.82, 0.2, 1) forwards;
}

.wheel-prize-card {
    border: 1px solid #ffcc42;
    background: radial-gradient(circle at 50% 0%, rgba(255, 223, 82, 0.34), transparent 36%), linear-gradient(180deg, #fffdf2 0%, #fff2bc 100%);
    box-shadow: 0 0 0 5px rgba(255, 79, 61, 0.11), 0 15px 34px rgba(195, 48, 36, 0.22);
}

.wheel-prize-amount.is-revealed {
    animation: tts-refined-prize-reveal 0.54s cubic-bezier(0.16, 0.88, 0.25, 1.12) forwards;
}

.wheel-prize-reserved strong {
    animation: tts-refined-timer-pulse 1s ease-in-out infinite;
}

/* v1.1.10 — keep the animated disc visible and guarantee win effects sit above it. */
.wheel-popup > .wheel-win-confetti {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    z-index: 18;
    overflow: visible;
}

.wheel-popup > .wheel-prize-reveal {
    z-index: 14;
}

.wheel-overlay.is-landed .wheel-win-confetti span {
    animation: tts-refined-confetti-burst 1.95s cubic-bezier(0.12, 0.7, 0.18, 1) var(--confetti-delay) forwards;
}

/* v1.1.11 — stronger prize impact and a longer visible confetti celebration. */
.wheel-win-confetti span {
    width: 9px;
    height: 15px;
    box-shadow: 0 1px 2px rgba(132, 45, 20, 0.15);
}

.wheel-prize-amount {
    position: relative;
    isolation: isolate;
    will-change: transform, opacity, filter;
}

.wheel-prize-amount::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 0;
    width: 150%;
    height: 175%;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 224, 75, 0.72) 0%, rgba(255, 111, 48, 0.22) 42%, transparent 70%);
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.25);
    pointer-events: none;
}

.wheel-prize-amount > * {
    position: relative;
    z-index: 1;
}

.wheel-prize-amount.is-revealed {
    animation: tts-refined-prize-reveal 0.82s cubic-bezier(0.18, 0.86, 0.22, 1.1) forwards;
}

.wheel-prize-amount.is-revealed::before {
    animation: tts-prize-impact-halo 0.9s ease-out forwards;
}

.wheel-prize-card.is-impacting {
    animation: tts-prize-card-impact 0.72s cubic-bezier(0.18, 0.86, 0.22, 1.1);
}

@keyframes tts-prize-impact-halo {
    0% { opacity: 0; transform: translate(-50%, -50%) scale(0.25); }
    24% { opacity: 0.95; }
    100% { opacity: 0; transform: translate(-50%, -50%) scale(1.35); }
}

@keyframes tts-prize-card-impact {
    0% { transform: scale(1); }
    30% { transform: scale(1.055); box-shadow: 0 0 0 8px rgba(255, 210, 55, 0.2), 0 18px 42px rgba(210, 52, 36, 0.28); }
    58% { transform: scale(0.985); }
    100% { transform: scale(1); }
}

/* v1.1.21 — TikTok Shop-style compact review presentation. */
.review-photos-section {
    margin-bottom: 22px;
}

.review-photos-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}

.review-photos-heading .review-photos-title {
    margin: 0;
}

.review-photos-see-all {
    flex-shrink: 0;
    padding: 2px 0;
    border: 0;
    background: transparent;
    color: #666;
    font: inherit;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.3;
    cursor: pointer;
}

.review-list-title {
    margin: 0 0 4px;
    font-size: 15px;
}

.review-entries {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.review-entry {
    padding: 16px 0 17px;
    border-bottom: 1px solid #ededed;
}

.review-entry:last-child {
    padding-bottom: 8px;
    border-bottom: 0;
}

.review-entry-head {
    gap: 9px;
    margin-bottom: 8px;
}

.review-entry-name-row {
    margin-bottom: 4px;
}

.review-entry-name {
    font-size: 13px;
    font-weight: 700;
}

.review-verified {
    color: #999;
    font-size: 11.5px;
    font-weight: 400;
}

.review-entry-stars {
    font-size: 11px;
    letter-spacing: 0.8px;
}

.review-entry-country {
    margin-top: 5px;
    color: #929292;
    font-size: 11.5px;
    line-height: 1.2;
}

.review-entry-body {
    display: block;
}

.review-entry-text {
    width: 100%;
    font-size: 14px;
    line-height: 1.45;
}

.review-entry-text p {
    margin: 0;
}

.review-entry-text p + p {
    margin-top: 6px;
}

.review-entry-photos {
    display: flex;
    gap: 6px;
    width: max-content;
    max-width: 100%;
    margin-top: 10px;
    border: 0;
    background: transparent;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.review-entry-photo-thumb {
    position: relative;
    display: block;
    width: 72px;
    height: 72px;
    flex: 0 0 72px;
    overflow: hidden;
    border-radius: 7px;
    background: #f1f1f1;
}

.review-entry-photo-thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.review-entry-photos .review-photo-more {
    background: rgba(255, 255, 255, 0.78);
    font-size: 14px;
}

.review-entry-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 10px;
    color: #999;
    font-size: 11.5px;
    line-height: 1.3;
}

.review-entry-item {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.review-entry-date {
    flex-shrink: 0;
    white-space: nowrap;
}

.review-photos-see-all:focus-visible,
.review-entry-photos:focus-visible {
    outline: 2px solid #fe2c55;
    outline-offset: 3px;
}

/* v1.1.22 — compact PDP review media sits beside the review copy. */
.review-entry-body {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.review-entry-text {
    flex: 1 1 auto;
    min-width: 0;
    width: auto;
}

.review-entry-photo-stack {
    position: relative;
    width: 72px;
    height: 72px;
    flex: 0 0 72px;
    margin: 0 0 0 auto;
    padding: 0;
    overflow: visible;
    border: 0;
    background: transparent;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.review-entry-photo-stack.is-single {
    width: 64px;
    height: 64px;
    flex-basis: 64px;
}

.review-entry-photo-stack.has-multiple::before,
.review-entry-photo-stack.has-multiple::after {
    position: absolute;
    width: 62px;
    height: 62px;
    border: 1px solid #e4e4e4;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    content: "";
}

.review-entry-photo-stack.has-multiple::before {
    top: 7px;
    left: 0;
    z-index: 0;
}

.review-entry-photo-stack.has-multiple::after {
    top: 4px;
    left: 4px;
    z-index: 1;
}

.review-entry-photo-stack .review-entry-photo-thumb {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 2;
    width: 64px;
    height: 64px;
    overflow: hidden;
    border: 2px solid #fff;
    border-radius: 8px;
    background: #f1f1f1;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.14);
}

.review-entry-photo-stack .review-entry-photo-thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
}

.review-entry-photo-stack .review-photo-more {
    position: absolute;
    top: 0;
    right: 0;
    bottom: auto;
    left: auto;
    z-index: 3;
    display: flex;
    width: 64px;
    height: 64px;
    align-items: center;
    justify-content: center;
    border-radius: 7px;
    background: rgba(255, 255, 255, 0.72);
    color: #121212;
    font-size: 14px;
    font-weight: 700;
    pointer-events: none;
}

.review-entry-footer {
    margin-top: 8px;
}

.review-entry-photo-stack[hidden],
.review-photo-card[hidden] {
    display: none !important;
}

.review-entry-photo-stack:focus-visible {
    outline: 2px solid #fe2c55;
    outline-offset: 3px;
}

/* v1.1.23 — keep reviewer identity and metadata at native mobile proportions. */
img.review-avatar,
.woocommerce img.review-avatar,
.woocommerce-page img.review-avatar {
    display: block;
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    min-height: 32px !important;
    max-width: 32px !important;
    max-height: 32px !important;
    flex: 0 0 32px;
    aspect-ratio: 1 / 1;
    border-radius: 50% !important;
    object-fit: cover !important;
    object-position: center center;
}

.review-entry-head {
    align-items: flex-start;
    gap: 9px;
    margin-bottom: 8px;
}

.review-entry-meta {
    min-width: 0;
    padding-top: 1px;
}

.review-entry-name-row {
    min-height: 16px;
    margin-bottom: 3px;
    line-height: 1.25;
}

.review-entry-name {
    font-size: 13px;
    line-height: 1.25;
}

.review-verified {
    color: #8f8f8f;
    font-size: 11.5px;
    line-height: 1.25;
}

.review-entry-stars {
    min-height: 12px;
    font-size: 11px;
    line-height: 12px;
}

.review-entry-country {
    margin-top: 4px;
    color: #8f8f8f;
    font-size: 11.5px;
    line-height: 1.2;
}

.review-entry-text {
    color: #121212;
    font-size: 14px;
    line-height: 1.45;
}

.review-entry-footer {
    margin-top: 8px;
    color: #969696;
    font-size: 11.5px;
    line-height: 1.25;
}