.wrapper[data-v-5c4ccef8]{display:flex;--gap: 2rem;gap:var(--gap)}.wrapper .left-section[data-v-5c4ccef8]{width:calc(40% - var(--gap) / 2)}.wrapper .left-section .sticky[data-v-5c4ccef8]{position:sticky;top:calc(var(--app-bar-height, 60px) + 1rem)}.wrapper .left-section .preview[data-v-5c4ccef8]{border-radius:var(--border-radius-lg);box-shadow:var(--box-shadow-light);border:1px solid var(--light);width:100%;aspect-ratio:1/1;max-height:460px;overflow:hidden}.wrapper .left-section .preview img[data-v-5c4ccef8]{width:100%;height:100%;-o-object-fit:contain;object-fit:contain}.wrapper .left-section .images[data-v-5c4ccef8]{white-space:nowrap;overflow-x:auto;overflow-y:hidden;max-width:100%;padding-top:1.2rem;padding-bottom:1rem}.wrapper .left-section .images button[data-v-5c4ccef8]{padding:0;background:transparent;border:none;margin-right:.6rem;cursor:pointer;border-radius:var(--border-radius);box-shadow:var(--box-shadow);height:100px;width:100px;-o-object-fit:cover;object-fit:cover;will-change:opacity;overflow:hidden}.wrapper .left-section .images button.active[data-v-5c4ccef8]{opacity:.7}.wrapper .left-section .images button img[data-v-5c4ccef8]{width:100%;height:100%;-o-object-fit:cover;object-fit:cover}.wrapper .right-section[data-v-5c4ccef8]{width:calc(60% - var(--gap) / 2)}.wrapper .right-section .rating[data-v-5c4ccef8]{margin-bottom:.8rem}.wrapper .right-section .rating .rating-icon[data-v-5c4ccef8]{font-size:1.3rem;color:#ff9529}.wrapper .right-section .price-wrapper[data-v-5c4ccef8]{margin-top:1rem;color:var(--dark)}.wrapper .right-section .price-wrapper .new-price[data-v-5c4ccef8]{font-weight:700}.wrapper .right-section .price-wrapper .old-price[data-v-5c4ccef8]{font-size:80%;text-decoration:line-through;margin-left:.5rem}.wrapper .right-section .price-wrapper .discount[data-v-5c4ccef8]{font-size:80%;font-weight:600;margin-left:.6rem}.wrapper .right-section .variants[data-v-5c4ccef8]{display:flex;flex-wrap:wrap;--gap: 1rem;gap:var(--gap);margin-top:1.2rem}.wrapper .right-section .variants .variant[data-v-5c4ccef8]{display:flex;align-items:center;width:calc(50% - var(--gap) / 2);padding:.8rem;border-radius:var(--border-radius);border:1px solid var(--light);transition:var(--transition);background:transparent;text-align:left;color:var(--dark);gap:.8rem;cursor:pointer}.wrapper .right-section .variants .variant[data-v-5c4ccef8]:hover{border-color:var(--primary)}.wrapper .right-section .variants .variant.active[data-v-5c4ccef8]{border-color:var(--primary);background:rgba(var(--primary-rgb),.08)}.wrapper .right-section .variants .variant.active[data-v-5c4ccef8]:hover{background:rgba(var(--primary-rgb),.1)}.wrapper .right-section .variants .variant .thumbnail[data-v-5c4ccef8]{width:60px;height:60px;border-radius:var(--border-radius-sm);-o-object-fit:cover;object-fit:cover}.wrapper .right-section .variants .variant .title[data-v-5c4ccef8]{font-size:1rem;font-weight:600;margin-bottom:.2rem;word-wrap:break-word}.wrapper .right-section .variants .variant .price-wrapper[data-v-5c4ccef8]{margin-top:0}.wrapper .right-section .variants .variant .price-wrapper .discount[data-v-5c4ccef8]{font-size:86%}.wrapper .right-section .variants .variant .details[data-v-5c4ccef8]{flex:1}@media (max-width: 992px){.wrapper .right-section .variants[data-v-5c4ccef8]{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}.wrapper .right-section .variants .variant[data-v-5c4ccef8]{width:100%}}@media (max-width: 768px){.wrapper .right-section .variants .variant[data-v-5c4ccef8]{padding:.6rem}.wrapper .right-section .variants .variant .thumbnail[data-v-5c4ccef8]{width:50px;height:50px}}.wrapper .right-section .action-buttons[data-v-5c4ccef8]{display:none;position:sticky;bottom:0;z-index:5;background:var(--bg-color);padding:.7rem 1rem;border-top:1px solid var(--light);margin-left:-1rem;margin-right:-1rem}@media (max-width: 768px){.wrapper[data-v-5c4ccef8]{flex-direction:column;gap:1rem}.wrapper .left-section[data-v-5c4ccef8]{width:100%}.wrapper .left-section .images[data-v-5c4ccef8]{padding-top:.8rem;padding-bottom:.6rem}.wrapper .left-section .images button[data-v-5c4ccef8]{height:80px;width:80px}.wrapper .left-section .action-buttons[data-v-5c4ccef8]{display:none}.wrapper .right-section[data-v-5c4ccef8]{width:100%}.wrapper .right-section .action-buttons[data-v-5c4ccef8]{display:grid}}
