:root {
 --gold: #ffd700;
}

.product-grid {
 --product-card-width: min(78vw, 280px);
 display: flex;
 flex-wrap: nowrap;
 gap: 16px;
 max-width: none;
 margin: 0 calc(-1 * max(var(--home-page-x), env(safe-area-inset-left, 0px)));
 padding: 4px max(var(--home-page-x), env(safe-area-inset-left, 0px)) 12px;
 overflow-x: auto;
 overflow-y: hidden;
 scroll-snap-type: x mandatory;
 scroll-padding-inline: max(var(--home-page-x), env(safe-area-inset-left, 0px));
 -webkit-overflow-scrolling: touch;
 scrollbar-width: none;
}

.product-grid::-webkit-scrollbar {
 display: none;
}

.product-grid::before,
.product-grid::after {
 content: '';
 flex: 0 0 auto;
 width: calc((100% - var(--product-card-width)) / 2);
 scroll-snap-align: none;
 pointer-events: none;
}

.product-card {
 position: relative;
 flex: 0 0 var(--product-card-width);
 width: var(--product-card-width);
 aspect-ratio: 3 / 4;
 scroll-snap-align: center;
 perspective: 1200px;
 cursor: pointer;
 outline: none;
 -webkit-tap-highlight-color: transparent;
 overflow: hidden;
 border-radius: 12px;
 isolation: isolate;
}

.product-grid-slider .product-card.is-flipped {
 z-index: 3;
}

.product-card-inner {
 position: absolute;
 inset: 0;
 transform-style: preserve-3d;
 -webkit-transform-style: preserve-3d;
 transition: transform 0.6s cubic-bezier(0.4, 0.2, 0.2, 1);
}

.product-card.is-flipped .product-card-inner {
 transform: rotateY(180deg);
}

.product-card-face {
 position: absolute;
 inset: 0;
 display: flex;
 flex-direction: column;
 overflow: hidden;
 border-radius: 12px;
 background: #121212;
 border: 1px solid rgba(255, 255, 255, 0.06);
 box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35);
 backface-visibility: hidden;
 -webkit-backface-visibility: hidden;
 transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.product-card-face--front {
 display: grid;
 grid-template-rows: minmax(0, 3fr) minmax(0, 1fr);
 grid-template-columns: minmax(0, 1fr);
 width: 100%;
 max-width: 100%;
 min-width: 0;
 box-sizing: border-box;
 transform: rotateY(0deg) translateZ(1px);
}

.product-card-face--back {
 transform: rotateY(180deg) translateZ(1px);
 padding: 22px 16px 24px;
 gap: 12px;
 pointer-events: none;
}

.product-card-face--back:has(.lukisan-tier-switch) {
 padding-top: 46px;
}

.product-card.is-flipped .product-card-face--back { pointer-events: auto; }
.product-card.is-flipped .product-card-face--front { pointer-events: none; }

.product-card:hover .product-card-face,
.product-card:focus-visible .product-card-face {
 border-color: rgba(255, 215, 0, 0.28);
 box-shadow: 0 16px 36px rgba(0, 0, 0, 0.45);
}

.product-card:focus-visible .product-card-face {
 box-shadow: 0 0 0 3px rgba(255, 215, 0, 0.35), 0 16px 36px rgba(0, 0, 0, 0.45);
}

/* Front — art ~75% height, edge-to-edge like Figma */
.product-card-art-frame {
 position: relative;
 min-height: 0;
 overflow: hidden;
 padding-top: 16px;
}

/* Lukisan — segmented Personal / Business toggle, top-left */
.product-card-face .lukisan-tier-switch.product-card-tier-toggle {
 position: absolute;
 top: 10px;
 left: 10px;
 z-index: 5;
 display: inline-flex;
 align-items: stretch;
 margin: 0;
 padding: 3px;
 gap: 2px;
 border: 1px solid rgba(255, 255, 255, 0.18);
 border-radius: 999px;
 background: rgba(12, 12, 14, 0.72);
 box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
 backdrop-filter: blur(8px);
 -webkit-backdrop-filter: blur(8px);
 cursor: pointer;
 line-height: 1;
 -webkit-tap-highlight-color: transparent;
}

.product-card-tier-opt {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 min-height: 22px;
 padding: 0 9px;
 border-radius: 999px;
 color: rgba(255, 255, 255, 0.72);
 font-size: 0.62rem;
 font-weight: 800;
 letter-spacing: 0.04em;
 text-transform: uppercase;
}

.lukisan-tier-switch.product-card-tier-toggle:not(.is-business) .product-card-tier-opt[data-tier="personal"],
.lukisan-tier-switch.product-card-tier-toggle.is-business .product-card-tier-opt[data-tier="business"] {
 color: #0c0c0c;
 background: linear-gradient(135deg, #fde68a 0%, #ffd700 55%, #f5d76e 100%);
}

.product-card-art-frame .lukisan-tier-switch__track,
.lukisan-tier-switch--in-bar .lukisan-tier-switch__track {
 display: none;
}

.lukisan-tier-switch__track {
 display: block;
 width: 2.75rem;
 height: 1.5rem;
 border-radius: 999px;
 background: rgba(12, 12, 14, 0.72);
 border: 1px solid rgba(255, 255, 255, 0.14);
 box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
 backdrop-filter: blur(8px);
 -webkit-backdrop-filter: blur(8px);
 position: relative;
 transition: background 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease;
}

.lukisan-tier-switch__thumb {
 position: absolute;
 top: 2px;
 left: 2px;
 width: 1.125rem;
 height: 1.125rem;
 border-radius: 50%;
 background: #f4f4f5;
 box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
 transition: transform 0.22s ease, background 0.22s ease, box-shadow 0.22s ease;
}

/* Personal (off) — high contrast on busy art */
.lukisan-tier-switch:not(.is-business) .lukisan-tier-switch__track {
 background: rgba(255, 255, 255, 0.28);
 border-color: rgba(255, 255, 255, 0.72);
 box-shadow:
  0 0 0 1px rgba(255, 255, 255, 0.35),
  0 4px 16px rgba(0, 0, 0, 0.45),
  0 0 18px rgba(255, 255, 255, 0.2);
}

.lukisan-tier-switch:not(.is-business) .lukisan-tier-switch__thumb {
 background: #ffffff;
 box-shadow:
  0 2px 8px rgba(0, 0, 0, 0.45),
  0 0 10px rgba(255, 255, 255, 0.55);
}

.lukisan-tier-switch.is-business .lukisan-tier-switch__track {
 background: rgba(255, 215, 0, 0.22);
 border-color: rgba(255, 215, 0, 0.45);
 box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
}

.lukisan-tier-switch.is-business .lukisan-tier-switch__thumb {
 transform: translateX(1.25rem);
 background: var(--gold, #ffd700);
 box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
}

.lukisan-tier-switch:focus-visible .lukisan-tier-switch__track {
 outline: 2px solid rgba(255, 215, 0, 0.55);
 outline-offset: 2px;
}

.lukisan-tier-switch--in-bar {
 position: static;
 top: auto;
 left: auto;
 flex-shrink: 0;
}

.product-card-back-tier-bar {
 display: flex;
 align-items: center;
 justify-content: space-between;
 gap: 10px;
 margin: 0 0 4px;
 flex-shrink: 0;
}

.product-card-tier-chip--back {
 flex-shrink: 0;
 margin-left: auto;
}

.product-card-title-stack {
 display: flex;
 flex-direction: column;
 align-items: flex-start;
 gap: 6px;
 margin-bottom: 0;
}

.product-card-tier-chip {
 display: inline-flex;
 align-items: center;
 padding: 3px 10px;
 border-radius: 999px;
 font-size: 0.625rem;
 font-weight: 800;
 letter-spacing: 0.08em;
 text-transform: uppercase;
 color: #0c0c0c;
 background: linear-gradient(135deg, #fde68a 0%, #ffd700 55%, #f5d76e 100%);
 box-shadow: 0 2px 8px rgba(255, 215, 0, 0.22);
}

.product-card-title-stack .product-card-name {
 margin: 0;
}

.product-card-art {
 position: absolute;
 left: 50%;
 bottom: 0;
 display: block;
 width: auto;
 height: 100%;
 max-width: none;
 --art-scale: 1.12;
 transform: translateX(-50%) scale(var(--art-scale));
 transform-origin: 50% 100%;
 object-fit: contain;
 object-position: center bottom;
 transition: transform 0.35s ease;
}

.product-card--lukisan_emas .product-card-art,
.product-card--custom_ea .product-card-art {
 width: 100%;
 height: auto;
 max-height: none;
 left: 0;
 right: 0;
 margin: 0 auto;
 --art-scale: 1;
 transform: none;
 object-fit: contain;
 object-position: center bottom;
}

.product-card--lukisan_emas .product-card-art,
.product-card--custom_ea .product-card-art {
 bottom: -45%;
 transform: scale(1.1);
 transform-origin: 50% 100%;
}

.product-card--auto_trade .product-card-art {
 --art-scale: 1.32;
 height: 85%;
 bottom: -10%;
 transform: translateX(-50%) scale(var(--art-scale));
}

.product-card--stop_loss .product-card-art {
 --art-scale: 1.6;
 --art-shift-x: -4%;
 height: 103%;
 bottom: -30%;
 transform: translateX(calc(-50% + var(--art-shift-x))) scale(var(--art-scale));
}

/* Admin-cropped illustrations — neutral frame fill (per-key transforms disabled) */
.product-card-art.product-card-art--custom {
 width: 100%;
 height: 100%;
 max-width: 100%;
 left: 0;
 right: 0;
 bottom: 0;
 --art-scale: 1;
 --art-shift-x: 0;
 transform: none;
 object-fit: cover;
 object-position: center center;
}

.product-card--auto_trade:hover .product-card-art {
 transform: translateX(-50%) scale(calc(var(--art-scale) + 0.02));
}

.product-card--stop_loss:hover .product-card-art {
 transform: translateX(calc(-50% + var(--art-shift-x))) scale(calc(var(--art-scale) + 0.02));
}

.product-card-art.product-card-art--custom:hover {
 transform: none;
}

.product-card--lukisan_emas:hover .product-card-art,
.product-card--custom_ea:hover .product-card-art {
 transform: scale(1.12);
 transform-origin: 50% 100%;
}

.product-card-face--front::after {
 content: '';
 position: absolute;
 inset: 32% 0 0 0;
 z-index: 1;
 background: linear-gradient(180deg, rgba(18, 18, 18, 0) 0%, rgba(18, 18, 18, 0.75) 38%, #121212 68%);
 pointer-events: none;
}

.product-card-flip-hint {
 display: none;
}

.product-card-front-body {
 position: relative;
 z-index: 2;
 display: flex;
 flex-direction: column;
 justify-content: flex-end;
 min-height: 0;
 min-width: 0;
 width: 100%;
 max-width: 100%;
 box-sizing: border-box;
 padding: 14px 16px 22px;
 text-align: left;
}

.product-card-front-actions {
 display: flex;
 gap: 8px;
 width: 100%;
 max-width: 100%;
 min-width: 0;
 box-sizing: border-box;
}

.product-card-front-actions--single .product-card-btn,
.product-card-back-actions--single .product-card-btn {
 flex: 1 1 100%;
 width: 100%;
 max-width: 100%;
 box-sizing: border-box;
}

.product-card-front-actions .product-card-btn {
 flex: 1;
 width: auto;
}

.product-card .product-card-name {
 margin: 0 0 4px;
 font-size: clamp(1.05rem, 2.2vw, 1.25rem);
 font-weight: 800;
 line-height: 1.2;
 color: var(--gold);
 min-width: 0;
 max-width: 100%;
 overflow: hidden;
 text-overflow: ellipsis;
 white-space: nowrap;
 box-sizing: border-box;
}

.product-card-front-price {
 margin: 2px 0 18px;
 min-height: 1.2em;
}

.product-card-front-price .plan-card-price {
 margin: 0;
 font-size: 0.9375rem;
 font-weight: 400;
 line-height: 1.25;
 letter-spacing: -0.01em;
 color: #e5e7eb;
}

.product-card-front-price .plan-card-price-unit {
 margin-left: 2px;
 font-size: 0.625rem;
 font-weight: 400;
 color: #9ca3af;
}

.product-card .product-card-tagline {
 margin: 0 0 12px;
 min-height: 1.35em;
 font-size: 0.8125rem;
 line-height: 1.4;
 color: #a3a3a3;
 overflow: hidden;
 text-overflow: ellipsis;
 white-space: nowrap;
 min-width: 0;
 max-width: 100%;
 box-sizing: border-box;
}

.product-card-btn {
 display: flex;
 align-items: center;
 justify-content: center;
 width: 100%;
 height: 40px;
 border: none;
 border-radius: 6px;
 background: #f9d949;
 color: #111;
 font-size: 0.8125rem;
 font-weight: 700;
 text-decoration: none;
 cursor: pointer;
 transition: background 0.2s ease, transform 0.2s ease;
}

.product-card-btn:hover {
 background: var(--gold);
 color: #000;
 transform: translateY(-1px);
}

.product-card-btn--ghost {
 background: transparent;
 color: #e5e7eb;
 border: 1px solid rgba(255, 255, 255, 0.16);
}

.product-card-btn--ghost:hover {
 background: rgba(255, 215, 0, 0.08);
 border-color: rgba(255, 215, 0, 0.45);
 color: var(--gold);
}

/* Back */
.product-card-back-head {
 display: flex;
 align-items: flex-start;
 justify-content: space-between;
 gap: 8px;
}

.product-card-back-head-main {
 flex: 1;
 min-width: 0;
}

.product-card-back-title {
 margin: 0;
 font-size: 1rem;
 font-weight: 800;
 color: var(--gold);
}

.product-card-flip-back {
 width: 30px;
 height: 30px;
 flex-shrink: 0;
 border-radius: 8px;
 border: 1px solid rgba(255, 255, 255, 0.1);
 background: rgba(255, 255, 255, 0.04);
 color: #cbd5e1;
 display: inline-flex;
 align-items: center;
 justify-content: center;
 font-size: 0.75rem;
 cursor: pointer;
}

.product-card-flip-back:hover { color: #fff; border-color: rgba(255, 255, 255, 0.25); }

.product-card-toggle {
 display: flex;
 gap: 4px;
 padding: 3px;
 border-radius: 8px;
 background: #111114;
 border: 1px solid rgba(255, 255, 255, 0.06);
}

.product-card-toggle button {
 flex: 1;
 height: 28px;
 border: none;
 border-radius: 6px;
 background: transparent;
 color: #9ca3af;
 font-size: 0.72rem;
 font-weight: 700;
 cursor: pointer;
 transition: background 0.2s ease, color 0.2s ease;
}

.product-card-toggle button:hover { color: #fff; }

.product-card-toggle button.active {
 background: rgba(255, 215, 0, 0.14);
 color: var(--gold);
}

.product-card-price .plan-card-price {
 margin: 0;
 font-size: 1.5rem;
 font-weight: 800;
 line-height: 1.1;
 letter-spacing: -0.02em;
 color: #fff;
}

.product-card-price .plan-card-price-unit {
 margin-left: 2px;
 font-size: 0.8125rem;
 font-weight: 600;
 color: #9ca3af;
}

.product-card-features {
 flex: 1;
 min-height: 0;
 margin: 0 -4px 0 0;
 padding: 0 4px 0 0;
 list-style: none;
 overflow-y: auto;
 overscroll-behavior: contain;
 scrollbar-width: thin;
 scrollbar-color: rgba(255, 255, 255, 0.15) transparent;
}

.product-card-features li {
 display: flex;
 align-items: flex-start;
 gap: 8px;
 padding: 4px 0;
 font-size: 0.78rem;
 line-height: 1.4;
 color: #d4d4d8;
}

.product-card-features li .fi {
 width: 16px;
 height: 16px;
 min-width: 16px;
 margin-top: 1px;
 border-radius: 50%;
 display: flex;
 align-items: center;
 justify-content: center;
 font-size: 9px;
 background: rgba(255, 215, 0, 0.16);
 color: var(--gold);
}

.product-card-back-actions {
 display: flex;
 gap: 8px;
}

.product-card-back-actions .product-card-btn { flex: 1; width: auto; }

/* Free trial card (light, ribbon, flippable) */
.product-card--free_trial .product-card-face {
 background: linear-gradient(165deg, #ecfdf5 0%, #ffffff 42%, #fefce8 100%);
 border-color: rgba(16, 185, 129, 0.32);
 box-shadow: 0 14px 32px rgba(16, 185, 129, 0.14);
}

.product-card--free_trial:hover .product-card-face,
.product-card--free_trial:focus-visible .product-card-face {
 border-color: rgba(16, 185, 129, 0.5);
 box-shadow: 0 16px 36px rgba(16, 185, 129, 0.2);
}

.product-card-trial-ribbon {
 position: absolute;
 top: 0;
 left: 0;
 right: 0;
 z-index: 3;
 padding: 7px 10px;
 text-align: center;
 font-size: 0.625rem;
 font-weight: 800;
 letter-spacing: 0.12em;
 text-transform: uppercase;
 color: #065f46;
 background: linear-gradient(90deg, #6ee7b7 0%, #fde68a 52%, #fcd34d 100%);
 border-bottom: 1px solid rgba(6, 95, 70, 0.15);
}

.product-card--free_trial .product-card-face--front::after {
 background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.82) 40%, #ffffff 68%);
}

.product-card--free_trial .product-card-art-frame {
 padding-top: 28px;
}

.product-card--free_trial .product-card-art {
 width: 100%;
 height: auto;
 left: 0;
 right: 0;
 margin: 0 auto;
 bottom: -60%;
 transform: translateX(-45%) scale(1.24) rotate(15deg);
 transform-origin: 50% 100%;
 object-fit: contain;
 object-position: center bottom;
}

.product-card--free_trial:hover .product-card-art {
 transform: translateX(-45%) scale(1.26) rotate(15deg);
}

.product-card--free_trial .product-card-name {
 color: #047857;
}

.product-card--free_trial .product-card-tagline {
 color: #475569;
}

.product-card--free_trial .product-card-front-body {
 padding: 14px 16px 22px;
 width: 100%;
 max-width: 100%;
 min-width: 0;
 box-sizing: border-box;
}

.product-card--free_trial .product-card-face--front .product-card-tagline {
 margin-bottom: 12px;
 width: 100%;
 max-width: 100%;
 min-width: 0;
 overflow: hidden;
 text-overflow: ellipsis;
 white-space: nowrap;
 box-sizing: border-box;
}

.product-card--free_trial .product-card-flip-hint {
 background: rgba(6, 95, 70, 0.12);
 color: #047857;
}

.product-card--free_trial .product-card-face--back {
 color: #334155;
}

.product-card--free_trial .product-card-back-title {
 color: #047857;
}

.product-card--free_trial .product-card-flip-back {
 color: #047857;
 border-color: rgba(6, 95, 70, 0.2);
 background: rgba(6, 95, 70, 0.06);
}

.product-card-trial-back-lead {
 margin: 0;
 font-size: 0.8125rem;
 line-height: 1.45;
 color: #475569;
}

.product-card-trial-back-price {
 display: flex;
 flex-direction: column;
 gap: 2px;
}

.product-card-trial-back-price .plan-card-price {
 margin: 0;
 font-size: 1.5rem;
 font-weight: 800;
 line-height: 1.1;
 color: #047857;
}

.product-card-trial-back-price span {
 font-size: 0.75rem;
 font-weight: 700;
 color: #64748b;
}

.product-card-features--trial li {
 color: #334155;
}

.product-card-features--trial li .fi {
 background: rgba(16, 185, 129, 0.16);
 color: #059669;
}

.product-card--free_trial .product-card-btn.btn-home-trial-banner {
 width: 100%;
 max-width: 100%;
 box-sizing: border-box;
 min-height: 40px;
 height: auto;
 padding: 10px 12px;
 font-size: 0.8125rem;
 font-weight: 700;
 line-height: 1.25;
 white-space: normal;
 text-align: center;
 background: linear-gradient(135deg, #111 0%, #1f2937 100%);
 color: #fff;
 border-radius: 6px;
 box-shadow: 0 8px 20px rgba(15, 23, 42, 0.22);
 margin: 0;
 display: flex;
 align-items: center;
 justify-content: center;
}

.product-card--free_trial .product-card-btn.btn-home-trial-banner:hover:not(:disabled) {
 background: linear-gradient(135deg, #000 0%, #111827 100%);
 color: #fff;
 transform: translateY(-1px);
}

.product-card--free_trial .product-card-btn.btn-home-trial-banner:disabled {
 background: #e5e7eb;
 color: #6b7280;
 box-shadow: none;
 cursor: not-allowed;
}

.product-grid-wrap {
 padding-bottom: 1.25rem;
}

/* Homepage membership slider — satu baris, geser horizontal (ukuran kartu tetap). */
.product-grid-slider {
 width: 100%;
 position: relative;
}

.product-grid-slider .product-grid-viewport {
 overflow-x: auto;
 overflow-y: hidden;
 -webkit-overflow-scrolling: touch;
 scroll-snap-type: x mandatory;
 scroll-padding-inline: max(var(--home-page-x, 1.25rem), env(safe-area-inset-left, 0px));
 margin-inline: calc(-1 * max(var(--home-page-x, 1.25rem), env(safe-area-inset-left, 0px)));
 padding-inline: max(var(--home-page-x, 1.25rem), env(safe-area-inset-left, 0px));
 scrollbar-width: none;
 outline: none;
 scroll-behavior: smooth;
}

.product-grid-slider .product-grid-viewport::-webkit-scrollbar {
 display: none;
}

/* Desktop horizontal scrolling improvements */
@media (min-width: 768px) {
 .product-grid-slider .product-grid-viewport {
  cursor: grab;
  scroll-snap-type: x proximity;
 }
 
 .product-grid-slider .product-grid-viewport:active {
  cursor: grabbing;
 }
 
 /* Show subtle scrollbar on desktop hover for better UX */
 .product-grid-slider .product-grid-viewport:hover {
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 215, 0, 0.3) transparent;
 }
 
 .product-grid-slider .product-grid-viewport:hover::-webkit-scrollbar {
  display: block;
  height: 6px;
 }
 
 .product-grid-slider .product-grid-viewport:hover::-webkit-scrollbar-track {
  background: transparent;
 }
 
 .product-grid-slider .product-grid-viewport:hover::-webkit-scrollbar-thumb {
  background: rgba(255, 215, 0, 0.3);
  border-radius: 3px;
 }
 
 .product-grid-slider .product-grid-viewport:hover::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 215, 0, 0.5);
 }
 
 /* Add gradient fade to indicate more content */
 .product-grid-slider::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 60px;
  background: linear-gradient(to right, transparent 0%, rgba(8, 8, 8, 0.8) 70%, rgba(8, 8, 8, 0.95) 100%);
  pointer-events: none;
  z-index: 2;
  opacity: 1;
  transition: opacity 0.3s ease;
 }
 
 .product-grid-slider.scrolled-to-end::after {
  opacity: 0;
 }
}

.product-grid-slider .product-grid {
 margin: 0;
 padding: 4px 0 12px;
 overflow: visible;
 scroll-snap-type: none;
 align-items: stretch;
 /* Ensure enough width for all cards */
 min-width: fit-content;
}

.product-grid-slider .product-grid::before {
 display: none;
}

.product-grid-slider .product-grid::after {
 display: block;
 content: '';
 flex: 0 0 auto;
 width: max(var(--home-page-x, 1.25rem), env(safe-area-inset-right, 0px));
 scroll-snap-align: none;
 pointer-events: none;
}

.product-grid-slider .product-card {
 scroll-snap-align: start;
}

.home-global-billing {
 width: min(100%, 14rem);
}

/* Horizontal scroll + preserve-3d breaks backface culling on WebKit (mirrored text). */
@media (max-width: 991px), ((hover: none) and (pointer: coarse)) {
 .product-card:not(.product-card--front-only) {
  perspective: none;
 }

 .product-card:not(.product-card--front-only) .product-card-inner {
  transform-style: flat;
  -webkit-transform-style: flat;
  transition: none;
 }

 .product-card:not(.product-card--front-only).is-flipped .product-card-inner {
  transform: none;
 }

 .product-card:not(.product-card--front-only) .product-card-face {
  backface-visibility: visible;
  -webkit-backface-visibility: visible;
  transition: opacity 0.25s ease, visibility 0.25s ease, border-color 0.2s ease,
   box-shadow 0.2s ease;
 }

 .product-card:not(.product-card--front-only) .product-card-face--front,
 .product-card:not(.product-card--front-only) .product-card-face--back {
  transform: none;
 }

 .product-card:not(.product-card--front-only) .product-card-face--back {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
 }

 .product-card:not(.product-card--front-only) .product-card-face--front {
  opacity: 1;
  visibility: visible;
 }

 .product-card:not(.product-card--front-only).is-flipped .product-card-face--front {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
 }

 .product-card:not(.product-card--front-only).is-flipped .product-card-face--back {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
 }
}

@media (prefers-reduced-motion: reduce) {
 .product-card-inner { transition: none; transform: none !important; }
 .product-card-face {
  backface-visibility: visible;
  -webkit-backface-visibility: visible;
  transition: opacity 0.15s ease;
 }
 .product-card-face--back { transform: none; opacity: 0; }
 .product-card.is-flipped .product-card-face--back { opacity: 1; }
 .product-card.is-flipped .product-card-face--front { opacity: 0; }
 .product-card-art,
 .product-card-flip-hint { transition: none; }
}

/* Front-only variant (cart line, upsell — no flip) */
.product-card--front-only {
 perspective: none;
 cursor: default;
 outline: none;
 -webkit-tap-highlight-color: transparent;
}

.product-card--front-only:hover .product-card-face,
.product-card--front-only:focus-visible .product-card-face {
 border-color: rgba(255, 255, 255, 0.06);
 box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35);
}

.product-card--front-only .product-card-face--front {
 position: relative;
 inset: auto;
 width: 100%;
 height: 100%;
}

/* Embedded horizontal row (cart upsell) */
.product-grid--embedded {
 --product-card-width: min(42vw, 220px);
 margin: 0;
 padding: 4px 0 10px;
 scroll-padding-inline: 0;
 scroll-snap-type: x proximity;
}

/* Cart “More products” — same cards as home membership row */
.product-grid-wrap--upsell {
 padding-bottom: 4px;
 overflow: hidden;
}

.product-grid--upsell {
 --product-card-width: min(78vw, 280px);
 margin: 0;
 padding: 4px 0 12px;
 scroll-padding-inline: 0;
 scroll-snap-type: x mandatory;
}

.product-grid--upsell::before,
.product-grid--upsell::after {
 display: none;
}

.product-grid--upsell .product-card {
 scroll-snap-align: start;
}

.product-grid--embedded::before,
.product-grid--embedded::after {
 display: none;
}

.product-grid--embedded .product-card {
 scroll-snap-align: start;
}

/* Cart / review row — mascot only (title lives beside the thumb) */
.product-card--cart-thumb {
 --product-card-width: 76px;
 width: 76px;
 flex: 0 0 76px;
 aspect-ratio: 3 / 4;
 border-radius: 12px;
 overflow: hidden;
 box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35);
}

.product-card--cart-thumb .product-card-face--front {
 display: block;
 height: 100%;
 min-height: 0;
}

.product-card--cart-thumb .product-card-art-frame {
 position: absolute;
 inset: 0;
 min-height: 0;
}

.product-card--cart-thumb .product-card-front-body,
.product-card--cart-thumb .product-card-face--front::after {
 display: none !important;
}

.product-card--upsell-compact .product-card-front-actions .product-card-btn {
 height: 34px;
 font-size: 0.72rem;
 padding: 0 8px;
}

.product-card--upsell-compact .product-card-tagline {
 margin-bottom: 8px;
 font-size: 0.72rem;
}