:root {
    --accent: 0 0 0;
    --contrast-accent: 255 255 255;
    --font-family: "Inter", "Helvetica", "Arial", sans-serif;
    --color: 0 0 0;
    --primary: var(--color);
    --contrast-primary: 255 255 255;
    --filled: 255 255 255;
    --contrast-filled: var(--color);
    --body-bg: #fff;
    --active-bg: rgb(var(--color) / var(--gray-1));
    --border-alpha: 1;
    --preview-ratio: 16/10;
}

html {
    scroll-behavior: smooth;
}

body {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    font-family: var(--font-family);
    font-size: 1rem;
    line-height: 1.3;
    -webkit-overflow-scrolling: touch;
}

h1, h2 {
    margin: 0;
    padding: 0;
    font-size: 2.5rem;
    line-height: 1.2;
}

h1 {
    font-size: 2.5rem;
    line-height: 1.2;
    font-weight: 400;
}

h2 {
    font-size: 1.5rem;
    line-height: 1.3;
    font-weight: 400;
}

h3 {
    font-size: 1.25rem;
    line-height: 1.6;
    font-weight: 400;
}

h4 {
    font-size: 1rem;
    line-height: 1.5;
    font-weight: 400;
}

h5 {
    font-size: 0.875rem;
    line-height: 1.3;
    font-weight: 400;
}

h6 {
    font-size: 0.75rem;
    line-height: 1.2;
    font-weight: 400;
}

p {
    margin: 0;
    white-space: pre-line;
}

a {
    color: #000;
    text-decoration: underline;
}

a:link {
    color: #000;
}

a:visited {
    color: #000;
}

a:hover {
    color: #000;
}

a:active {
    color: #000;
}

header {
    padding: 1.5rem;
}

#root, #app {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
}

main {
	display: flex;
	flex-direction: column;
	align-items: stretch;
}

main > *:not(:last-child) {
	border-bottom: solid 1px #000;
}

main > * {
	padding: 1.5rem max((100% - 71.25rem)/2, 1.5rem);
}

.page, section {
    display: flex;
    flex-direction: column;
}

.page > section {
    padding-top: 2rem;
    padding-bottom: 2rem;
}

.page > *:not(:last-child):not(:first-child) {
	border-bottom: solid 1px #000;
}

.page-head {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding-top: 0px;
    padding-bottom: 0px;
    position: sticky;
    top: 0px;
    z-index: 9;
    box-shadow: 0 1px #000;
    background: #FFF;
    
    
}

.head-body {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.head-body .title {
    display: none;
}

.head-body .rating {
    display: none;
}

.head-left {
    display: flex;
    flex-direction: row;
    justify-content: start;
    align-items: center;
    gap: 16px;
}

.head-left > *:first-child {
    flex-shrink: 0;
}

.head-right {
    flex-direction: row;
    display: flex;
    justify-content: end;
    align-items: center;
    gap: 16px;
    flex-shrink: 0;
}

.price {
    display: block;
    padding: 4px 8px;
    padding-right: 30px;
    color: rgb(var(--contrast-accent));
    position: relative;
    border: solid 1px rgb(var(--color)/var(--border-alpha));
    border-right: 0;
    background-image: linear-gradient(to left, transparent 16px, rgb(var(--accent)) 16px);
    background-repeat: no-repeat;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 14px;
}

.price::before, .price::after {
    content: "";
    top: 0;
    bottom: 0;
    position: absolute;
    border-style: solid;
    border-width: 13px;
}

.price::before {
    border-color: rgb(var(--color)/var(--border-alpha));
    right: 0;
    border-left-width: 1px;
}

.price::after {
    border-color: rgb(var(--accent));
    right: 1px;
    border-left: none;
}

.price::before, .price::after {
    border-right: solid transparent 16px;
}

.discount {
    color: rgb(var(--contrast-accent)/0.5);
}

.rating-stars {
    display: flex;
    flex-direction: row;
    margin-top: -2px;
    gap: 4px;
}

.rating-stars > .icon-solid-star {
    background: #000;
    width: 14px;
    height: 14px;
    background-repeat: no-repeat;
    -webkit-mask-position: 50% 50%;
    mask-position: 50% 50%;
    -webkit-mask-size: 120%;
    mask-size: 120%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

.icon {
    background: #000;
    width: 20px;
    height: 20px;
    background-repeat: no-repeat;
    -webkit-mask-position: 50% 50%;
    mask-position: 50% 50%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    display: inline-block;
    -webkit-mask-size: 100%;
    mask-size: 100%;
}

.sell-platform-icon {
    background: #000;
    width: 20px;
    height: 20px;
    background-repeat: no-repeat;
    -webkit-mask-position: 50% 50%;
    mask-position: 50% 50%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    display: inline-block;
    -webkit-mask-size: 100%;
    mask-size: 100%;
    margin-bottom: 6px;
}

.sell-platform-icon-xl {
    background: #000;
    width: 24px;
    height: 24px;
    background-repeat: no-repeat;
    -webkit-mask-position: 50% 50%;
    mask-position: 50% 50%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    display: inline-block;
    -webkit-mask-size: 100%;
    mask-size: 100%;
}

.icon-star {
    -webkit-mask-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBMaWNlbnNlOiBQRC4gTWFkZSBieSBNYXJ5IEFrdmVvOiBodHRwczovL21hcnlha3Zlby5jb20vIC0tPgo8c3ZnIGZpbGw9IiMwMDAwMDAiIHdpZHRoPSI4MDBweCIgaGVpZ2h0PSI4MDBweCIgdmlld0JveD0iMCAwIDI0IDI0IiBpZD0ic3RhciIgZGF0YS1uYW1lPSJMaW5lIENvbG9yIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGNsYXNzPSJpY29uIGxpbmUtY29sb3IiPjxwb2x5Z29uIGlkPSJwcmltYXJ5IiBwb2ludHM9IjEyIDQgOS4yMiA5LjI3IDMgMTAuMTEgNy41IDE0LjIxIDYuNDQgMjAgMTIgMTcuMjcgMTcuNTYgMjAgMTYuNSAxNC4yMSAyMSAxMC4xMSAxNC43OCA5LjI3IDEyIDQiIHN0eWxlPSJmaWxsOiBub25lOyBzdHJva2U6IHJnYigwLCAwLCAwKTsgc3Ryb2tlLWxpbmVjYXA6IHJvdW5kOyBzdHJva2UtbGluZWpvaW46IHJvdW5kOyBzdHJva2Utd2lkdGg6IDI7Ij48L3BvbHlnb24+PC9zdmc+);
    mask-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBMaWNlbnNlOiBQRC4gTWFkZSBieSBNYXJ5IEFrdmVvOiBodHRwczovL21hcnlha3Zlby5jb20vIC0tPgo8c3ZnIGZpbGw9IiMwMDAwMDAiIHdpZHRoPSI4MDBweCIgaGVpZ2h0PSI4MDBweCIgdmlld0JveD0iMCAwIDI0IDI0IiBpZD0ic3RhciIgZGF0YS1uYW1lPSJMaW5lIENvbG9yIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGNsYXNzPSJpY29uIGxpbmUtY29sb3IiPjxwb2x5Z29uIGlkPSJwcmltYXJ5IiBwb2ludHM9IjEyIDQgOS4yMiA5LjI3IDMgMTAuMTEgNy41IDE0LjIxIDYuNDQgMjAgMTIgMTcuMjcgMTcuNTYgMjAgMTYuNSAxNC4yMSAyMSAxMC4xMSAxNC43OCA5LjI3IDEyIDQiIHN0eWxlPSJmaWxsOiBub25lOyBzdHJva2U6IHJnYigwLCAwLCAwKTsgc3Ryb2tlLWxpbmVjYXA6IHJvdW5kOyBzdHJva2UtbGluZWpvaW46IHJvdW5kOyBzdHJva2Utd2lkdGg6IDI7Ij48L3BvbHlnb24+PC9zdmc+);
}

.icon-lazada {
    -webkit-mask-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBMaWNlbnNlOiBBcGFjaGUuIE1hZGUgYnkgbGF3bmNoYWlybGF1bmNoZXI6IGh0dHBzOi8vZ2l0aHViLmNvbS9sYXduY2hhaXJsYXVuY2hlci9sYXduaWNvbnMgLS0+Cjxzdmcgd2lkdGg9IjgwMHB4IiBoZWlnaHQ9IjgwMHB4IiB2aWV3Qm94PSIwIDAgNTAuOCA1MC44IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxwYXRoIGQ9Ik0yOC4wNDggMTQuNDM0YzEuMDQxLS41NTUgNy41MzYtNC42MjUgNy43NzItNC43Ni4wMi0uMDEyLjUwOS0uMzQ4IDEuMTU2LjAyMi45MDIuNDg2IDcuMDU1IDQuMjUyIDcuMzEgNC40MzcuNDM5LjI1NC42OTMuNzE3LjY5MyAxLjIyNXYxMy40OTZhMS4zNzEgMS4zNzEgMCAwIDEtLjc4NiAxLjExYy0uNTc4LjMyMy0xNS44OSA5LjkzNi0xNy45OTUgMTEuMDkyLS40ODYuMy0xLjA4Ny4zLTEuNTk2LjAyMy0yLjA1OS0xLjIwMi0xNy40MTctMTAuODE1LTE3Ljk5NS0xMS4wOTNhMS40MDcgMS40MDcgMCAwIDEtLjc4Ni0xLjEzMnYtMTMuNTJjMC0uNDg0LjI1NC0uOTQ3LjY0Ny0xLjJsNy4zNTYtNC40NmMuMzctLjIwOS43ODYtLjIzMiAxLjE1Ni0uMDI0LjE4NS4wOTIgNi45NjIgNC41MyA4LjAyNiA0Ljk0NSAxLjU3My43MTcgMy41MzkuNjcgNS4wNDItLjE2MXoiIHN0eWxlPSJmaWxsOm5vbmU7c3Ryb2tlOiMwMDAwMDA7c3Ryb2tlLXdpZHRoOjMuMTc0OTE7c3Ryb2tlLWxpbmVjYXA6YnV0dDtzdHJva2UtbGluZWpvaW46cm91bmQ7c3Ryb2tlLW1pdGVybGltaXQ6NDtzdHJva2UtZGFzaGFycmF5Om5vbmU7c3Ryb2tlLW9wYWNpdHk6MSIvPjwvc3ZnPg==);
    mask-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBMaWNlbnNlOiBBcGFjaGUuIE1hZGUgYnkgbGF3bmNoYWlybGF1bmNoZXI6IGh0dHBzOi8vZ2l0aHViLmNvbS9sYXduY2hhaXJsYXVuY2hlci9sYXduaWNvbnMgLS0+Cjxzdmcgd2lkdGg9IjgwMHB4IiBoZWlnaHQ9IjgwMHB4IiB2aWV3Qm94PSIwIDAgNTAuOCA1MC44IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxwYXRoIGQ9Ik0yOC4wNDggMTQuNDM0YzEuMDQxLS41NTUgNy41MzYtNC42MjUgNy43NzItNC43Ni4wMi0uMDEyLjUwOS0uMzQ4IDEuMTU2LjAyMi45MDIuNDg2IDcuMDU1IDQuMjUyIDcuMzEgNC40MzcuNDM5LjI1NC42OTMuNzE3LjY5MyAxLjIyNXYxMy40OTZhMS4zNzEgMS4zNzEgMCAwIDEtLjc4NiAxLjExYy0uNTc4LjMyMy0xNS44OSA5LjkzNi0xNy45OTUgMTEuMDkyLS40ODYuMy0xLjA4Ny4zLTEuNTk2LjAyMy0yLjA1OS0xLjIwMi0xNy40MTctMTAuODE1LTE3Ljk5NS0xMS4wOTNhMS40MDcgMS40MDcgMCAwIDEtLjc4Ni0xLjEzMnYtMTMuNTJjMC0uNDg0LjI1NC0uOTQ3LjY0Ny0xLjJsNy4zNTYtNC40NmMuMzctLjIwOS43ODYtLjIzMiAxLjE1Ni0uMDI0LjE4NS4wOTIgNi45NjIgNC41MyA4LjAyNiA0Ljk0NSAxLjU3My43MTcgMy41MzkuNjcgNS4wNDItLjE2MXoiIHN0eWxlPSJmaWxsOm5vbmU7c3Ryb2tlOiMwMDAwMDA7c3Ryb2tlLXdpZHRoOjMuMTc0OTE7c3Ryb2tlLWxpbmVjYXA6YnV0dDtzdHJva2UtbGluZWpvaW46cm91bmQ7c3Ryb2tlLW1pdGVybGltaXQ6NDtzdHJva2UtZGFzaGFycmF5Om5vbmU7c3Ryb2tlLW9wYWNpdHk6MSIvPjwvc3ZnPg==);
}

.icon-tiktok {
    -webkit-mask-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMTkuMzIxIDUuNTYyYTUgNSAwIDAgMS0uNDQzLS4yNTggNi4yIDYuMiAwIDAgMS0xLjEzNy0uOTY2Yy0uODQ5LS45NzEtMS4xNjYtMS45NTYtMS4yODItMi42NDVoLjAwNGMtLjA5Ny0uNTczLS4wNTctLjk0My0uMDUtLjk0M2gtMy44NjV2MTQuOTQzcS4wMDIuMy0uMDA4LjU5NWwtLjAwNC4wNzNxMCAuMDE2LS4wMDMuMDMzdi4wMDlhMy4yOCAzLjI4IDAgMCAxLTEuNjUgMi42MDQgMy4yIDMuMiAwIDAgMS0xLjYuNDIyYy0xLjggMC0zLjI2LTEuNDY4LTMuMjYtMy4yODFzMS40Ni0zLjI4MiAzLjI2LTMuMjgyYy4zNDEgMCAuNjguMDU0IDEuMDA0LjE2bC4wMDUtMy45MzZhNy4xOCA3LjE4IDAgMCAwLTUuNTMyIDEuNjIgNy42IDcuNiAwIDAgMC0xLjY1NSAyLjA0Yy0uMTYzLjI4MS0uNzc5IDEuNDEyLS44NTMgMy4yNDYtLjA0NyAxLjA0LjI2NiAyLjEyLjQxNSAyLjU2NXYuMDFjLjA5My4yNjIuNDU3IDEuMTU4IDEuMDQ5IDEuOTEzYTcuOSA3LjkgMCAwIDAgMS42NzQgMS41OHYtLjAxbC4wMDkuMDFjMS44NyAxLjI3IDMuOTQ1IDEuMTg3IDMuOTQ1IDEuMTg3LjM1OS0uMDE1IDEuNTYyIDAgMi45MjgtLjY0NyAxLjUxNS0uNzE4IDIuMzc3LTEuNzg3IDIuMzc3LTEuNzg3YTcuNCA3LjQgMCAwIDAgMS4yOTYtMi4xNTNjLjM1LS45Mi40NjYtMi4wMjIuNDY2LTIuNDYyVjguMjczYy4wNDcuMDI4LjY3Mi40NDEuNjcyLjQ0MXMuOS41NzcgMi4zMDMuOTUyYzEuMDA2LjI2NyAyLjM2My4zMjQgMi4zNjMuMzI0VjYuMTUzYy0uNDc1LjA1Mi0xLjQ0LS4wOTgtMi40MjktLjU5IiBmaWxsPSIjMDAwIi8+PC9zdmc+Cg==);
    mask-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMTkuMzIxIDUuNTYyYTUgNSAwIDAgMS0uNDQzLS4yNTggNi4yIDYuMiAwIDAgMS0xLjEzNy0uOTY2Yy0uODQ5LS45NzEtMS4xNjYtMS45NTYtMS4yODItMi42NDVoLjAwNGMtLjA5Ny0uNTczLS4wNTctLjk0My0uMDUtLjk0M2gtMy44NjV2MTQuOTQzcS4wMDIuMy0uMDA4LjU5NWwtLjAwNC4wNzNxMCAuMDE2LS4wMDMuMDMzdi4wMDlhMy4yOCAzLjI4IDAgMCAxLTEuNjUgMi42MDQgMy4yIDMuMiAwIDAgMS0xLjYuNDIyYy0xLjggMC0zLjI2LTEuNDY4LTMuMjYtMy4yODFzMS40Ni0zLjI4MiAzLjI2LTMuMjgyYy4zNDEgMCAuNjguMDU0IDEuMDA0LjE2bC4wMDUtMy45MzZhNy4xOCA3LjE4IDAgMCAwLTUuNTMyIDEuNjIgNy42IDcuNiAwIDAgMC0xLjY1NSAyLjA0Yy0uMTYzLjI4MS0uNzc5IDEuNDEyLS44NTMgMy4yNDYtLjA0NyAxLjA0LjI2NiAyLjEyLjQxNSAyLjU2NXYuMDFjLjA5My4yNjIuNDU3IDEuMTU4IDEuMDQ5IDEuOTEzYTcuOSA3LjkgMCAwIDAgMS42NzQgMS41OHYtLjAxbC4wMDkuMDFjMS44NyAxLjI3IDMuOTQ1IDEuMTg3IDMuOTQ1IDEuMTg3LjM1OS0uMDE1IDEuNTYyIDAgMi45MjgtLjY0NyAxLjUxNS0uNzE4IDIuMzc3LTEuNzg3IDIuMzc3LTEuNzg3YTcuNCA3LjQgMCAwIDAgMS4yOTYtMi4xNTNjLjM1LS45Mi40NjYtMi4wMjIuNDY2LTIuNDYyVjguMjczYy4wNDcuMDI4LjY3Mi40NDEuNjcyLjQ0MXMuOS41NzcgMi4zMDMuOTUyYzEuMDA2LjI2NyAyLjM2My4zMjQgMi4zNjMuMzI0VjYuMTUzYy0uNDc1LjA1Mi0xLjQ0LS4wOTgtMi40MjktLjU5IiBmaWxsPSIjMDAwIi8+PC9zdmc+Cg==);
}

.icon-shopee {
    -webkit-mask-image: url(data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMjQgMjQiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTE1Ljk0MSAxNy45NjNjLjIzLTEuODc5LS45OC0zLjA3Ny00LjE3NS00LjA5Ny0xLjU0OC0uNTI4LTIuMjc3LTEuMjItMi4yNi0yLjE3MS4wNjUtMS4wNTYgMS4wNDgtMS44MjUgMi4zNTItMS44NWE1LjMgNS4zIDAgMCAxIDIuODgzLjg5Yy4xMTYuMDcyLjE5Ny4wNi4yNjMtLjA0LjA5LS4xNDQuMzE1LS40OTMuMzktLjYyLjA1MS0uMDguMDYxLS4xODYtLjA2OC0uMjgtLjE4NS0uMTM3LS43MDQtLjQxNS0uOTgzLS41MzJhNi41IDYuNSAwIDAgMC0yLjUxMS0uNTE0Yy0xLjkxLjAwOC0zLjQxMyAxLjIxNS0zLjU0IDIuODI2cS0uMTIyIDEuNzQ2IDEuNzMgMi44MjdjLjI2My4xNTIgMS42OC43MTYgMi4yNDQuODkyIDEuNzc0LjU1MiAyLjY5NSAxLjU0MiAyLjQ3OCAyLjY5Ny0uMTk3IDEuMDQ3LTEuMjk5IDEuNzI0LTIuODE4IDEuNzQ0LTEuMjAzLS4wNDYtMi4yODctLjUzNy0zLjEyNy0xLjE5bC0uMTQxLS4xMWMtLjEwNC0uMDgtLjIxOC0uMDc1LS4yODcuMDMtLjA1LjA3Ny0uMzc2LjU0Ny0uNDU4LjY3LS4wNzcuMTA4LS4wMzUuMTY4LjA0NS4yMzQuMzUuMjkzLjgxNy42MTMgMS4xMzQuNzc1YTYuNyA2LjcgMCAwIDAgMi44MjkuNzI3IDQuOSA0LjkgMCAwIDAgMi4wNzUtLjM1NGMxLjA5NS0uNDY1IDEuODAzLTEuMzk0IDEuOTQ1LTIuNTU0TTEyIDEuNDAxYy0yLjA2OCAwLTMuNzU0IDEuOTUtMy44MzMgNC4zOWg3LjY2NUMxNS43NTEgMy4zNSAxNC4wNjYgMS40IDEyIDEuNG03Ljg1MSAyMi41OTgtLjA4LjAwMS0xNS43ODQtLjAwMmMtMS4wNzQtLjA0LTEuODYzLS45MS0xLjk3MS0xLjk5MWwtLjAxLS4xOTUtLjcwNy0xNS41MjZhLjQ2LjQ2IDAgMCAxIC40NS0uNDk0aDQuOTc1QzYuODQ1IDIuNTY4IDkuMTYgMCAxMiAwczUuMTUzIDIuNTY5IDUuMjc1IDUuNzloNC45NjhhLjQ2LjQ2IDAgMCAxIC40NTguNDgzbC0uNzczIDE1LjU4OC0uMDA3LjEzMWMtLjA5NCAxLjA5NC0uOTc5IDEuOTc3LTIuMDcgMi4wMDYiLz48L3N2Zz4=);
    mask-image: url(data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMjQgMjQiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTE1Ljk0MSAxNy45NjNjLjIzLTEuODc5LS45OC0zLjA3Ny00LjE3NS00LjA5Ny0xLjU0OC0uNTI4LTIuMjc3LTEuMjItMi4yNi0yLjE3MS4wNjUtMS4wNTYgMS4wNDgtMS44MjUgMi4zNTItMS44NWE1LjMgNS4zIDAgMCAxIDIuODgzLjg5Yy4xMTYuMDcyLjE5Ny4wNi4yNjMtLjA0LjA5LS4xNDQuMzE1LS40OTMuMzktLjYyLjA1MS0uMDguMDYxLS4xODYtLjA2OC0uMjgtLjE4NS0uMTM3LS43MDQtLjQxNS0uOTgzLS41MzJhNi41IDYuNSAwIDAgMC0yLjUxMS0uNTE0Yy0xLjkxLjAwOC0zLjQxMyAxLjIxNS0zLjU0IDIuODI2cS0uMTIyIDEuNzQ2IDEuNzMgMi44MjdjLjI2My4xNTIgMS42OC43MTYgMi4yNDQuODkyIDEuNzc0LjU1MiAyLjY5NSAxLjU0MiAyLjQ3OCAyLjY5Ny0uMTk3IDEuMDQ3LTEuMjk5IDEuNzI0LTIuODE4IDEuNzQ0LTEuMjAzLS4wNDYtMi4yODctLjUzNy0zLjEyNy0xLjE5bC0uMTQxLS4xMWMtLjEwNC0uMDgtLjIxOC0uMDc1LS4yODcuMDMtLjA1LjA3Ny0uMzc2LjU0Ny0uNDU4LjY3LS4wNzcuMTA4LS4wMzUuMTY4LjA0NS4yMzQuMzUuMjkzLjgxNy42MTMgMS4xMzQuNzc1YTYuNyA2LjcgMCAwIDAgMi44MjkuNzI3IDQuOSA0LjkgMCAwIDAgMi4wNzUtLjM1NGMxLjA5NS0uNDY1IDEuODAzLTEuMzk0IDEuOTQ1LTIuNTU0TTEyIDEuNDAxYy0yLjA2OCAwLTMuNzU0IDEuOTUtMy44MzMgNC4zOWg3LjY2NUMxNS43NTEgMy4zNSAxNC4wNjYgMS40IDEyIDEuNG03Ljg1MSAyMi41OTgtLjA4LjAwMS0xNS43ODQtLjAwMmMtMS4wNzQtLjA0LTEuODYzLS45MS0xLjk3MS0xLjk5MWwtLjAxLS4xOTUtLjcwNy0xNS41MjZhLjQ2LjQ2IDAgMCAxIC40NS0uNDk0aDQuOTc1QzYuODQ1IDIuNTY4IDkuMTYgMCAxMiAwczUuMTUzIDIuNTY5IDUuMjc1IDUuNzloNC45NjhhLjQ2LjQ2IDAgMCAxIC40NTguNDgzbC0uNzczIDE1LjU4OC0uMDA3LjEzMWMtLjA5NCAxLjA5NC0uOTc5IDEuOTc3LTIuMDcgMi4wMDYiLz48L3N2Zz4=);
}

.icon-facebook {
    -webkit-mask-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MCA1MCIgd2lkdGg9IjUwIiBoZWlnaHQ9IjUwIj48cGF0aCBkPSJNMjUgM0MxMi44NSAzIDMgMTIuODUgMyAyNWMwIDExLjAzIDguMTI1IDIwLjEzNyAxOC43MTIgMjEuNzI4VjMwLjgzMWgtNS40NDN2LTUuNzgzaDUuNDQzVjIxLjJjMC02LjM3MSAzLjEwNC05LjE2OCA4LjM5OS05LjE2OCAyLjUzNiAwIDMuODc3LjE4OCA0LjUxMi4yNzR2NS4wNDhoLTMuNjEyYy0yLjI0OCAwLTMuMDMzIDIuMTMxLTMuMDMzIDQuNTMzdjMuMTYxaDYuNTg4bC0uODk0IDUuNzgzaC01LjY5NHYxNS45NDRDMzguNzE2IDQ1LjMxOCA0NyAzNi4xMzcgNDcgMjVjMC0xMi4xNS05Ljg1LTIyLTIyLTIyIi8+PC9zdmc+);
    mask-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MCA1MCIgd2lkdGg9IjUwIiBoZWlnaHQ9IjUwIj48cGF0aCBkPSJNMjUgM0MxMi44NSAzIDMgMTIuODUgMyAyNWMwIDExLjAzIDguMTI1IDIwLjEzNyAxOC43MTIgMjEuNzI4VjMwLjgzMWgtNS40NDN2LTUuNzgzaDUuNDQzVjIxLjJjMC02LjM3MSAzLjEwNC05LjE2OCA4LjM5OS05LjE2OCAyLjUzNiAwIDMuODc3LjE4OCA0LjUxMi4yNzR2NS4wNDhoLTMuNjEyYy0yLjI0OCAwLTMuMDMzIDIuMTMxLTMuMDMzIDQuNTMzdjMuMTYxaDYuNTg4bC0uODk0IDUuNzgzaC01LjY5NHYxNS45NDRDMzguNzE2IDQ1LjMxOCA0NyAzNi4xMzcgNDcgMjVjMC0xMi4xNS05Ljg1LTIyLTIyLTIyIi8+PC9zdmc+);
}

.icon-solid-star {
    -webkit-mask-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTEyLjAyNCAyLjQ0MWMtLjU3MSAwLTEuMTU0LjM1NS0xLjUgMS4wNjJMOC40MDEgNy44NzZsLTQuODQyLjY4N2MtMS41NTYuMjE3LTIuMDYgMS43NDQtLjkzNyAyLjg0MmwzLjQ5OSAzLjQwNS0uODEyIDQuNzhjLS4yNjggMS41NDYgMS4wMTUgMi40ODEgMi40MDUgMS43NDguNTM2LS4yODQgMy4yOTYtMS43MTQgNC4zMS0yLjI0OWw0LjMxIDIuMjVjMS4zOS43MzIgMi42NzgtLjIwMiAyLjQwNS0xLjc1bC0uODQzLTQuNzc5IDMuNDk4LTMuNDA1YzEuMTMtMS4wOTQuNjUxLTIuNjItLjkwNi0yLjg0MmwtNC44NzItLjY4Ny0yLjA5My00LjM3M2MtLjM0NS0uNzA3LS45MjgtMS4wNjEtMS41LTEuMDYyWiIgZmlsbD0iIzAwMCIvPjwvc3ZnPg==);
    mask-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTEyLjAyNCAyLjQ0MWMtLjU3MSAwLTEuMTU0LjM1NS0xLjUgMS4wNjJMOC40MDEgNy44NzZsLTQuODQyLjY4N2MtMS41NTYuMjE3LTIuMDYgMS43NDQtLjkzNyAyLjg0MmwzLjQ5OSAzLjQwNS0uODEyIDQuNzhjLS4yNjggMS41NDYgMS4wMTUgMi40ODEgMi40MDUgMS43NDguNTM2LS4yODQgMy4yOTYtMS43MTQgNC4zMS0yLjI0OWw0LjMxIDIuMjVjMS4zOS43MzIgMi42NzgtLjIwMiAyLjQwNS0xLjc1bC0uODQzLTQuNzc5IDMuNDk4LTMuNDA1YzEuMTMtMS4wOTQuNjUxLTIuNjItLjkwNi0yLjg0MmwtNC44NzItLjY4Ny0yLjA5My00LjM3M2MtLjM0NS0uNzA3LS45MjgtMS4wNjEtMS41LTEuMDYyWiIgZmlsbD0iIzAwMCIvPjwvc3ZnPg==);
}

.icon-close {
    -webkit-mask-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBMaWNlbnNlOiBNSVQuIE1hZGUgYnkgbWljaGFlbGFtcHI6IGh0dHBzOi8vZ2l0aHViLmNvbS9taWNoYWVsYW1wci9qYW0gLS0+CjxzdmcgZmlsbD0iIzAwMDAwMCIgd2lkdGg9IjgwMHB4IiBoZWlnaHQ9IjgwMHB4IiB2aWV3Qm94PSItNiAtNiAyNCAyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJ4TWluWU1pbiIgY2xhc3M9ImphbSBqYW0tY2xvc2UiPjxwYXRoIGQ9J003LjMxNCA1LjlsMy41MzUtMy41MzZBMSAxIDAgMSAwIDkuNDM1Ljk1TDUuODk5IDQuNDg1IDIuMzY0Ljk1QTEgMSAwIDEgMCAuOTUgMi4zNjRsMy41MzUgMy41MzVMLjk1IDkuNDM1YTEgMSAwIDEgMCAxLjQxNCAxLjQxNGwzLjUzNS0zLjUzNSAzLjUzNiAzLjUzNWExIDEgMCAxIDAgMS40MTQtMS40MTRMNy4zMTQgNS44OTl6JyAvPjwvc3ZnPg==);
    mask-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBMaWNlbnNlOiBNSVQuIE1hZGUgYnkgbWljaGFlbGFtcHI6IGh0dHBzOi8vZ2l0aHViLmNvbS9taWNoYWVsYW1wci9qYW0gLS0+CjxzdmcgZmlsbD0iIzAwMDAwMCIgd2lkdGg9IjgwMHB4IiBoZWlnaHQ9IjgwMHB4IiB2aWV3Qm94PSItNiAtNiAyNCAyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJ4TWluWU1pbiIgY2xhc3M9ImphbSBqYW0tY2xvc2UiPjxwYXRoIGQ9J003LjMxNCA1LjlsMy41MzUtMy41MzZBMSAxIDAgMSAwIDkuNDM1Ljk1TDUuODk5IDQuNDg1IDIuMzY0Ljk1QTEgMSAwIDEgMCAuOTUgMi4zNjRsMy41MzUgMy41MzVMLjk1IDkuNDM1YTEgMSAwIDEgMCAxLjQxNCAxLjQxNGwzLjUzNS0zLjUzNSAzLjUzNiAzLjUzNWExIDEgMCAxIDAgMS40MTQtMS40MTRMNy4zMTQgNS44OTl6JyAvPjwvc3ZnPg==);
}

.icon-share {
    -webkit-mask-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBMaWNlbnNlOiBQRC4gTWFkZSBieSBtb25vLWNvbXBhbnk6IGh0dHBzOi8vZ2l0aHViLmNvbS9tb25vLWNvbXBhbnkvbW9uby1pY29ucyAtLT4KPHN2ZyB3aWR0aD0iODAwcHgiIGhlaWdodD0iODAwcHgiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMTEuMjkzIDIuMjkzYTEgMSAwIDAgMSAxLjQxNCAwbDMgM2ExIDEgMCAwIDEtMS40MTQgMS40MTRMMTMgNS40MTRWMTVhMSAxIDAgMSAxLTIgMFY1LjQxNEw5LjcwNyA2LjcwN2ExIDEgMCAwIDEtMS40MTQtMS40MTRsMy0zek00IDExYTIgMiAwIDAgMSAyLTJoMmExIDEgMCAwIDEgMCAySDZ2OWgxMnYtOWgtMmExIDEgMCAxIDEgMC0yaDJhMiAyIDAgMCAxIDIgMnY5YTIgMiAwIDAgMS0yIDJINmEyIDIgMCAwIDEtMi0ydi05eiIgZmlsbD0iIzBEMEQwRCIvPjwvc3ZnPg==);
    mask-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBMaWNlbnNlOiBQRC4gTWFkZSBieSBtb25vLWNvbXBhbnk6IGh0dHBzOi8vZ2l0aHViLmNvbS9tb25vLWNvbXBhbnkvbW9uby1pY29ucyAtLT4KPHN2ZyB3aWR0aD0iODAwcHgiIGhlaWdodD0iODAwcHgiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMTEuMjkzIDIuMjkzYTEgMSAwIDAgMSAxLjQxNCAwbDMgM2ExIDEgMCAwIDEtMS40MTQgMS40MTRMMTMgNS40MTRWMTVhMSAxIDAgMSAxLTIgMFY1LjQxNEw5LjcwNyA2LjcwN2ExIDEgMCAwIDEtMS40MTQtMS40MTRsMy0zek00IDExYTIgMiAwIDAgMSAyLTJoMmExIDEgMCAwIDEgMCAySDZ2OWgxMnYtOWgtMmExIDEgMCAxIDEgMC0yaDJhMiAyIDAgMCAxIDIgMnY5YTIgMiAwIDAgMS0yIDJINmEyIDIgMCAwIDEtMi0ydi05eiIgZmlsbD0iIzBEMEQwRCIvPjwvc3ZnPg==);
}


.button {
    background: rgb(var(--accent));
    padding: 12px 16px;
    border: solid 10px 1px;
    color: rgb(var(--contrast-accent));
    border: solid 0.0625rem rgb(var(--color)/var(--border-alpha));
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    -webkit-text-decoration: none;
    text-decoration: none;
    gap: 4px;
    font-size: 1rem;
    line-height: 1.5;
}

.button:hover {
    transition-timing-function: ease-out;
    transition-duration: 0.14s;
    transform: translate(-0.25rem, -0.25rem);
    box-shadow: 0.25rem 0.25rem 0rem #000;
}

.button > a {
    color: rgb(var(--contrast-accent));
    -webkit-text-decoration: none;
    text-decoration: none;
}

.buy-button > .sell-platform-icon {
    background: rgb(var(--contrast-accent));
}

.button > .icon {
    margin-bottom: 4px;
}

.button-text {
    background: rgb(var(--contrast-primary));
    padding: 12px 16px;
    border: solid 10px 1px;
    color: rgb(var(--primary));
    border: solid 0.0625rem rgb(var(--color)/0);
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    -webkit-text-decoration: none;
    text-decoration: none;
    gap: 4px;
    font-size: 1rem;
    line-height: 1.5;
}

.button-text:hover {
    transition-timing-function: ease-out;
    transition-duration: 0.14s;
    transform: translate(-0.25rem, -0.25rem);
    box-shadow: 0.25rem 0.25rem 0rem #000;
    border: solid 0.0625rem rgb(var(--color)/var(--border-alpha));
}

.button-text > a {
    -webkit-text-decoration: none;
    text-decoration: none;
}

.buy-button > .sell-platform-icon {
    background: rgb(var(--contrast-accent));
}

.button-text > .icon {
    margin-bottom: 4px;
}

.rating {
    display: flex;
    flex-direction: row;
    gap: 4px;
    align-items: center;
}

.rating-count {
    color: #000;
}

.product {
    border-radius: 0.25rem;
    border: 1px solid;
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

.product > *:not(:last-child) {
    border-bottom: solid 1px #000;
}

.product > section {
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

.product > article {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    flex-wrap: wrap;
}

.product > article .left {
    flex: 2;
    box-shadow: 0 0 0 1px #000;
    clip-path: inset(0px -1px 0px 0px);
}

.product > article .right {
    flex: 1;
    gap: 0.5rem;
}

.product > article .right > section {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1.5rem;
}

.product > article .right > .sub-section {
    font-size: 0.875rem;
}

.product > article .right > section > header {
    padding: 0rem;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

.product > article .right > section > header > * {
    margin: 0;
    padding: 0;
}

.preview {
    display: flex;
    aspect-ratio: var(--preview-ratio);
    width: 100%;
    align-items: end;
    justify-content: center;
    overflow: hidden;
}

.preview > .items {
    display: flex;
    flex-direction: row;
    height: 100%;
    transition: transform 0.3s ease-in-out;
}

.preview-overlay .overlay-action {
    position: absolute;
    cursor: pointer;
    display: flex;
}

.preview .preview-overlay {
    width: 100%;
    height: 100%;
    color: #FFF;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}

.preview-overlay svg {
    width: 88px;
    height: 88px;
    line-height: 88px;
    fill: #FFF;
    border: 4px solid #FFF;
}

.preview-overlay svg:hover {
    transition-timing-function: ease-out;
    transition-duration: 0.14s;
    transform: translate(-0.25rem, -0.25rem);
    box-shadow: 0.25rem 0.25rem 0rem rgb(var(--contrast-accent));
}

.preview-content {
    scroll-snap-align: start;
    flex: 1 0 100%;
    min-height: 1px;
    display: flex;
    justify-content: center;
    padding: unset;
    margin-top: unset;
}

.preview-content > * {
    border: none;
    overflow: hidden;
    width: 100%;
    height: 100%;
}

.preview-content img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    -webkit-border-radius: 0.25rem;
    -moz-border-radius: 0.25rem;
    border-radius: 0.25rem;
}

.preview-content iframe {
    border: none;
    overflow: hidden;
    width: 100%;
    height: 100%;
}

.preview .tablist {
    z-index: 1;
    display: flex;
    flex-direction: row;
    position: absolute;
    gap: 16px;
    margin-bottom: 8px;
    align-items: center;
}

.preview .tab {
    width: 4px;
    height: 4px;
    display: block;
    border: solid 0.0625rem #000;
    padding: 0.5rem;
    border-radius: 10rem;
    background: #FFF;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition-timing-function: ease-out;
    transition-duration: 0.14s;
}

.preview .tab-selected {
    width: 4px;
    height: 4px;
    display: block;
    border: solid 0.0625rem #000;
    padding: 0.5rem;
    border-radius: 10rem;
    background: #000;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition-timing-function: ease-out;
    transition-duration: 0.14s;
}

.product-title {
    border-bottom: solid 1px #000;
}

.product .details {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    border-bottom: solid 1px #000;
}

.avatar {
    border-radius: 10rem;
    width: 24px;
    height: 24px;
    aspect-ratio: 1;
    flex-shrink: 0;
    border: solid 0.0625rem #000;
    object-fit: cover;
}

.user {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    gap: 4px;
    padding: 1rem 1.5rem;
}

.user > .a {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 4px;
}

.details > .rating {
    padding: 1rem 1.5rem;
}

.divider-vertical {
    width: 1px;
    height: 100%;
    background: #000;
}

.divider-vertical-l {
    width: 2px;
    height: 100%;
    background: #000;
}

.divider-horizontal {
    height: 1px;
    width: 100%;
    background: #000;
}

.divider-horizontal-l {
    height: 2px;
    width: 100%;
    background: #000;
}

.rich-content {
	overflow: auto;
}

.rich-content {
    font-size: 1rem;
    line-height: 1.5;
    padding: 1.5rem;
}

.rich-content > *, .rich-content ul {
    margin-bottom: 1rem;
    margin-top: 0rem;
}

.rich-content li ul {
    margin-bottom: 1rem;
    margin-top: 1rem;
}

.rich-content h1 {
    margin-bottom: 1.5rem;
}

.rich-content h2, .rich-content h3 {
    margin-top: 2rem;
}

.rich-content h2:first-child, .rich-content h3:first-child {
    margin-top: 0;
}

.rich-content ul:not(.inline), .rich-content ol {
    margin-left: 0rem;
}

.rich-content li:not(:last-child) {
    margin-bottom: 1rem;
}

.rich-content hr {
    margin: 2rem 0;
}

.rich-content p {
    margin-bottom: 1rem;
}

.rich-content blockquote {
    padding-left: 2rem;
}

.rich-content figure {
    margin-bottom: 1.5rem;
}

.rich-content figure img {
    width: 100%;
    object-fit: contain;
    border-radius: 0.25rem;
}

.rich-content figure figcaption {
    font-size: 0.875rem;
    line-height: 1.3;
    padding-left: 0.25rem;
    margin: 0.75rem 0 0;
}

.rich-content pre {
    border: solid 0.0625rem rgb(var(--color)/var(--border-alpha));
    border-radius: 0.25rem;
    margin-bottom: 1rem;
    padding: 0.5rem 0.75rem;
    white-space: pre-wrap;
}

.rich-content img {
    width: 100%;
}

.rich-content table {
	display: block;
    border-collapse: collapse;
	overflow: auto;
}

.rich-content th, td {
    border: 1px solid black;
    border-collapse: collapse;
    padding: 1rem;
}

#blog .rich-content {
	padding: 0;
}

.info {
    background-color: rgba(144, 168, 237, 0.5);
    border: solid 0.0625rem #90a8ed;
    border-radius: 0.25rem;
    padding: 0.75rem;
    font-size: 0.875rem;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 4px;
}

.icon-info {
    width: 24px;
    height: 24px;
    -webkit-mask-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTEyIDIuMDJjLTUuNTI0IDAtMTAgNC40NzctMTAgMTBzNC40NzYgMTAgMTAgMTBjNS41MjIgMCAxMC00LjQ3NyAxMC0xMHMtNC40NzgtMTAtMTAtMTBabTAgNWExIDEgMCAxIDEtLjAwMSAyIDEgMSAwIDAgMSAwLTJabTAgM2ExIDEgMCAwIDEgMSAxdjVhMSAxIDAgMCAxLTIgMHYtNWExIDEgMCAwIDEgMS0xWiIgZmlsbD0iIzAwMCIvPjwvc3ZnPg==);
    mask-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTEyIDIuMDJjLTUuNTI0IDAtMTAgNC40NzctMTAgMTBzNC40NzYgMTAgMTAgMTBjNS41MjIgMCAxMC00LjQ3NyAxMC0xMHMtNC40NzgtMTAtMTAtMTBabTAgNWExIDEgMCAxIDEtLjAwMSAyIDEgMSAwIDAgMSAwLTJabTAgM2ExIDEgMCAwIDEgMSAxdjVhMSAxIDAgMCAxLTIgMHYtNWExIDEgMCAwIDEgMS0xWiIgZmlsbD0iIzAwMCIvPjwvc3ZnPg==);
    background: #90a8ed;
}

.stack {
    display: flex;
    flex-direction: column;
    background-color: #FFF;
    color: #000;
    border: solid 0.0625rem #000;
    border-radius: 0.25rem;
    font-size: 0.875rem;
}

.stack > div {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding: 1rem;
}

.stack > div > span:first-child {
    font-weight: 700;
}

.stack > div > span:last-child {
    text-align: right;
}

.stack > div:not(:last-child) {
    border-bottom: solid 1px #000;
}

section.histogram {
    gap: 1rem;
}

section.histogram > div {
    display: flex;
    flex-direction: row;
    justify-content: stretch;
    align-items: center;
    gap: 1rem;
}

section.histogram > div > meter {
    flex: 1;
}

section.histogram > div > *:last-child {
    width: 32px;
}

meter {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background: 0 0;
    border: solid 0.0625rem rgb(var(--color)/var(--border-alpha));
    border-radius: 0.25rem;
}

meter::-webkit-meter-inner-element, meter::-webkit-meter-bar {
    display: contents;
}

meter::-webkit-meter-optimum-value {
    background: rgb(var(--accent));
    border-radius: 0.25rem;
}

meter::-moz-meter-bar {
    background: rgb(var(--accent));
    border-radius: 0.25rem;
}

.rating {
    font-size: 0.875rem;
}

.rating-contents {
    gap: 1rem;
    font-size: 0.875rem;
}

.rating-contents {
    gap: 1rem;
    font-size: 0.875rem;
}

.rating-content-media {
    display: flex;
    flex-direction: row;
    gap: 4px;
    justify-content: start;
    align-self: start;
}

.rating-content-media-list {
    display: flex;
    flex-direction: row;
    gap: 4px;
}

.rating-contents > section {
    gap: 8px;
}

.rating-contents > section:not(:last-child) {
    border-bottom: solid 1px #000;
    padding-bottom: 1rem;
}

.rating-contents .user {
    display: flex;
    flex-direction: row;
    padding: 0rem;
    align-items: center;
    gap: 1rem;
}

.rating-contents .rating-info {
    display: flex;
    flex-direction: row;
    padding: 0rem;
    align-items: center;
    gap: 0.25rem;
}

.rating-contents time {
    color: rgb(var(--color)/0.5);
}

.rating-verify-by {
    align-self: start;
    color: rgb(var(--accent));
    font-weight: 700;
    font-size: 12px;
    line-height: 16px;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.25rem;
}

.rating-verify-by .icon {
    background: #000;
    width: 14px;
    height: 14px;
    background-repeat: no-repeat;
    -webkit-mask-position: 50% 50%;
    mask-position: 50% 50%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    display: inline-block;
    -webkit-mask-size: 100%;
    mask-size: 100%;
    margin-bottom: 0px;
    margin-top: 2px;

    display: none; /*hide fornow*/
}


.a {
    color: #000;
    text-decoration: underline;
    cursor: pointer;
}

/*tooltip*/

.has-tooltip {
    position: relative;
    display: inline-grid;
}

.has-tooltip [role=tooltip] {
    display: none;
    z-index: 30;
    background-color: #000;
    color: #FFF;
    font-size: 0.875rem;
    line-height: 1.3;
    padding: 0.75rem;
    border: solid 0.0625rem #000;
    border-radius: 0.25rem;
    width: 10rem;
    max-width: -moz-max-content;
    max-width: max-content;
    bottom: unset;
    top: calc(100% + 0.5rem);
}

.has-tooltip [role=tooltip]::before, .has-tooltip [role=tooltip]::after {
    border: solid 0.5rem transparent;
    border-top: none;
    border-bottom-color: rgb(var(--color)/var(--border-alpha));
    top: unset;
    bottom: 100%;
}

.has-tooltip [role=tooltip]::after {
    border-bottom-color: #000;
    border-width: 0.4375rem;
}

.has-tooltip [role=tooltip], .has-tooltip [role=tooltip]::before, .has-tooltip [role=tooltip]::after {
    position: absolute;
    left: 50%;
    transform: translate(-50%, 0);
}

.has-tooltip [role=tooltip]::before, .has-tooltip [role=tooltip]::after {
    content: "";
}

.has-tooltip.top [role=tooltip] {
    top: unset;
    bottom: calc(100% + 0.5rem);
}

.has-tooltip.top [role=tooltip]::before, .has-tooltip.top [role=tooltip]::after {
    border: solid 0.5rem transparent;
    border-bottom: none;
    border-top-color: rgb(var(--color)/var(--border-alpha));
    bottom: unset;
    top: 100%;
}

.has-tooltip.top [role=tooltip]::after {
    border-top-color: #000;
    border-width: 0.4375rem;
}

.has-tooltip.right [role=tooltip] {
    right: unset;
    left: calc(100% + 0.5rem);
}

.has-tooltip.right [role=tooltip], .has-tooltip.right [role=tooltip]::before, .has-tooltip.right [role=tooltip]::after {
    transform: translate(0, -50%);
    top: 50%;
}

.has-tooltip.right [role=tooltip]::before, .has-tooltip.right [role=tooltip]::after {
    border: solid 0.5rem transparent;
    border-left: none;
    border-right-color: rgb(var(--color)/var(--border-alpha));
    left: unset;
    right: 100%;
}

.has-tooltip.right [role=tooltip]::after {
    border-right-color: #000;
    border-width: 0.4375rem;
}

.has-tooltip.left [role=tooltip] {
    left: unset;
    right: calc(100% + 0.5rem);
}

.has-tooltip.left [role=tooltip], .has-tooltip.left [role=tooltip]::before, .has-tooltip.left [role=tooltip]::after {
    transform: translate(0, -50%);
    top: 50%;
}

.has-tooltip.left [role=tooltip]::before, .has-tooltip.left [role=tooltip]::after {
    border: solid 0.5rem transparent;
    border-right: none;
    border-left-color: rgb(var(--color)/var(--border-alpha));
    right: unset;
    left: 100%;
}

.has-tooltip.left [role=tooltip]::after {
    border-left-color: #000;
    border-width: 0.4375rem;
}

.has-tooltip:hover [role=tooltip], .has-tooltip:focus-within [role=tooltip] {
    display: block;
}

.has-tooltip [role=tooltip] .discount {
    color: rgb(var(--contrast-primary)/0.5);
}

.sell-platform-more {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 8px;
}

.sell-platform-more > .button {
    min-width: 48px;
    padding: 0px 0px;
    aspect-ratio: 1/1;
    background: #FFF;
    border: solid 0.0625rem rgb(var(--color)/0);
}

.sell-platform-more > .button:hover {
    border: solid 0.0625rem rgb(var(--color)/var(--border-alpha));
}

.review-platform-more {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 8px;
}

.review-platform-more > .button {
    min-width: 48px;
    padding: 0px 0px;
    aspect-ratio: 1/1;
    background: #FFF;
    border: solid 0.0625rem rgb(var(--color)/0);
}

.review-platform-more > .button:hover {
    border: solid 0.0625rem rgb(var(--color)/var(--border-alpha));
}

.rating-content a {
    text-decoration: none;
}

.rating-info a {
    text-decoration: none;
}

/* review page */

.rating-helpful {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    font-size: 0.875rem;
}

.rating-helpful .button {
    padding: 4px 16px;
    background: #FFF;
}

.rating-helpful .button a {
    color: #000;
}

.rating-helpful > div:last-child {
    display: flex;
    flex-direction: row;
    gap: 1rem;
    align-items: center;
}

.rating-helpful > div:last-child > .hcs-share-btn {
    cursor: pointer;
}


.noscroll {
    overflow: hidden;
}

.hide {
    display: none;
}

#review > header {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    font-size: 16px;
}

#review > header .review-media-featured {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 4px;
}

#review strong {
    font-size: 18px;
    font-weight: 700;
}

#review > header > div {
    display: flex;
    flex-direction: row;
    gap: 2rem;
    flex-wrap: wrap;
}

#review > header > div > section {
    flex: 1;
    display: flex;
    gap: 2rem;
}

#review > header > div > section:nth-child(2) {
    flex: unset;
    display: flex;
    flex-direction: row;
    justify-content: center;
}

#review > header .rating {
    font-size: 16px;
    padding: 0px;
    gap: 1rem;
}

#review > header .rating > span:first-child {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
}

#review > header .rating .icon-solid-star {
    width: 16px;
    height: 16px;
    margin-bottom: 2px;
}

#review > main > header {
	border-bottom: solid 2px #000;
}

#review > section {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

#review > section > header {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

#review > main > header > div:first-child {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
}

#review > main > header > div:first-child div {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
	width: 100%;
}

#review > main > header > div:first-child div select {
	padding: 4px 32px 4px 4px;
	width: 100%;
}

#review select {
    cursor: pointer;
    background-repeat: no-repeat;
    background-position-x: 100%;
    background-position-y: 50%;
    border: none;
    padding: 0 24px 0 12px;
    appearance: none;
    color: inherit;
    -webkit-appearance: none;
    background-color: transparent;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg fill='currentColor' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3C/svg%3E");
    outline-offset: 4px;
}

#review .user {
    font-size: 16px;
    display: flex;
    flex-direction: row;
    gap: 1rem;
}

#review .user .avatar {
    width: 48px;
    height: 48px;
}

#review .user .user-name {
    font-weight: 700;
}

#review .user > div {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.25rem;
}

.icon-like {
    -webkit-mask-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBMaWNlbnNlOiBDQyBBdHRyaWJ1dGlvbi4gTWFkZSBieSBzYWxlc2ZvcmNlOiBodHRwczovL2xpZ2h0bmluZ2Rlc2lnbnN5c3RlbS5jb20vIC0tPgo8c3ZnIGZpbGw9IiMwMDAwMDAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgCgkgd2lkdGg9IjgwMHB4IiBoZWlnaHQ9IjgwMHB4IiB2aWV3Qm94PSIwIDAgNTIgNTIiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDUyIDUyIiB4bWw6c3BhY2U9InByZXNlcnZlIj4KPGc+Cgk8cGF0aCBkPSJNMTAuNSwyMWgtNUM0LjcsMjEsNCwyMS43LDQsMjIuNXYyM0M0LDQ2LjMsNC43LDQ3LDUuNSw0N0g4YzIuMiwwLDQtMS44LDQtNFYyMi41QzEyLDIxLjcsMTEuMywyMSwxMC41LDIxCgkJeiIvPgoJPHBhdGggZD0iTTQ0LDIyaC02Yy0yLjIsMC00LTEuOC00LTRWOGMwLTIuMi0xLjgtNC00LTRoLTIuNUMyNi43LDQsMjYsNC43LDI2LDUuNXY2YzAsNS4zLTMuNywxMC41LTguNSwxMC41CgkJYy0wLjgsMC0xLjUsMC43LTEuNSwxLjV2MjBjMCwwLjgsMC42LDEuNSwxLjQsMS41YzYuOCwwLjMsOS4xLDMsMTYuMiwzYzcuNSwwLDE0LjQtMC44LDE0LjQtOS41di01VjI2QzQ4LDIzLjgsNDYuMiwyMiw0NCwyMnoiLz4KPC9nPgo8L3N2Zz4=);
    mask-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBMaWNlbnNlOiBDQyBBdHRyaWJ1dGlvbi4gTWFkZSBieSBzYWxlc2ZvcmNlOiBodHRwczovL2xpZ2h0bmluZ2Rlc2lnbnN5c3RlbS5jb20vIC0tPgo8c3ZnIGZpbGw9IiMwMDAwMDAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgCgkgd2lkdGg9IjgwMHB4IiBoZWlnaHQ9IjgwMHB4IiB2aWV3Qm94PSIwIDAgNTIgNTIiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDUyIDUyIiB4bWw6c3BhY2U9InByZXNlcnZlIj4KPGc+Cgk8cGF0aCBkPSJNMTAuNSwyMWgtNUM0LjcsMjEsNCwyMS43LDQsMjIuNXYyM0M0LDQ2LjMsNC43LDQ3LDUuNSw0N0g4YzIuMiwwLDQtMS44LDQtNFYyMi41QzEyLDIxLjcsMTEuMywyMSwxMC41LDIxCgkJeiIvPgoJPHBhdGggZD0iTTQ0LDIyaC02Yy0yLjIsMC00LTEuOC00LTRWOGMwLTIuMi0xLjgtNC00LTRoLTIuNUMyNi43LDQsMjYsNC43LDI2LDUuNXY2YzAsNS4zLTMuNywxMC41LTguNSwxMC41CgkJYy0wLjgsMC0xLjUsMC43LTEuNSwxLjV2MjBjMCwwLjgsMC42LDEuNSwxLjQsMS41YzYuOCwwLjMsOS4xLDMsMTYuMiwzYzcuNSwwLDE0LjQtMC44LDE0LjQtOS41di01VjI2QzQ4LDIzLjgsNDYuMiwyMiw0NCwyMnoiLz4KPC9nPgo8L3N2Zz4=);
}

.icon-tick-circle {
    -webkit-mask-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTcuMS4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+CjwhLS0gTGljZW5zZTogQ0MwLiBNYWRlIGJ5IFNWRyBSZXBvOiBodHRwczovL3d3dy5zdmdyZXBvLmNvbS9zdmcvOTg2MzQvdGljayAtLT4KPHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJDYXBhXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHZpZXdCb3g9IjAgMCAxOTEuNjY3IDE5MS42NjciIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDE5MS42NjcgMTkxLjY2NzsiIHhtbDpzcGFjZT0icHJlc2VydmUiPgo8cGF0aCBkPSJNOTUuODMzLDBDNDIuOTkxLDAsMCw0Mi45OSwwLDk1LjgzM3M0Mi45OTEsOTUuODM0LDk1LjgzMyw5NS44MzRzOTUuODMzLTQyLjk5MSw5NS44MzMtOTUuODM0UzE0OC42NzYsMCw5NS44MzMsMHoKCSBNMTUwLjg2Miw3OS42NDZsLTYwLjIwNyw2MC4yMDdjLTIuNTYsMi41Ni01Ljk2MywzLjk2OS05LjU4MywzLjk2OWMtMy42MiwwLTcuMDIzLTEuNDA5LTkuNTgzLTMuOTY5bC0zMC42ODUtMzAuNjg1CgljLTIuNTYtMi41Ni0zLjk3LTUuOTYzLTMuOTctOS41ODNjMC0zLjYyMSwxLjQxLTcuMDI0LDMuOTctOS41ODRjMi41NTktMi41Niw1Ljk2Mi0zLjk3LDkuNTgzLTMuOTdjMy42MiwwLDcuMDI0LDEuNDEsOS41ODMsMy45NzEKCWwyMS4xMDEsMjEuMWw1MC42MjMtNTAuNjIzYzIuNTYtMi41Niw1Ljk2My0zLjk2OSw5LjU4My0zLjk2OWMzLjYyLDAsNy4wMjMsMS40MDksOS41ODMsMy45NjkKCUMxNTYuMTQ2LDY1Ljc2NSwxNTYuMTQ2LDc0LjM2MiwxNTAuODYyLDc5LjY0NnoiLz4KPC9zdmc+Cg==);
    mask-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTcuMS4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+CjwhLS0gTGljZW5zZTogQ0MwLiBNYWRlIGJ5IFNWRyBSZXBvOiBodHRwczovL3d3dy5zdmdyZXBvLmNvbS9zdmcvOTg2MzQvdGljayAtLT4KPHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJDYXBhXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHZpZXdCb3g9IjAgMCAxOTEuNjY3IDE5MS42NjciIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDE5MS42NjcgMTkxLjY2NzsiIHhtbDpzcGFjZT0icHJlc2VydmUiPgo8cGF0aCBkPSJNOTUuODMzLDBDNDIuOTkxLDAsMCw0Mi45OSwwLDk1LjgzM3M0Mi45OTEsOTUuODM0LDk1LjgzMyw5NS44MzRzOTUuODMzLTQyLjk5MSw5NS44MzMtOTUuODM0UzE0OC42NzYsMCw5NS44MzMsMHoKCSBNMTUwLjg2Miw3OS42NDZsLTYwLjIwNyw2MC4yMDdjLTIuNTYsMi41Ni01Ljk2MywzLjk2OS05LjU4MywzLjk2OWMtMy42MiwwLTcuMDIzLTEuNDA5LTkuNTgzLTMuOTY5bC0zMC42ODUtMzAuNjg1CgljLTIuNTYtMi41Ni0zLjk3LTUuOTYzLTMuOTctOS41ODNjMC0zLjYyMSwxLjQxLTcuMDI0LDMuOTctOS41ODRjMi41NTktMi41Niw1Ljk2Mi0zLjk3LDkuNTgzLTMuOTdjMy42MiwwLDcuMDI0LDEuNDEsOS41ODMsMy45NzEKCWwyMS4xMDEsMjEuMWw1MC42MjMtNTAuNjIzYzIuNTYtMi41Niw1Ljk2My0zLjk2OSw5LjU4My0zLjk2OWMzLjYyLDAsNy4wMjMsMS40MDksOS41ODMsMy45NjkKCUMxNTYuMTQ2LDY1Ljc2NSwxNTYuMTQ2LDc0LjM2MiwxNTAuODYyLDc5LjY0NnoiLz4KPC9zdmc+Cg==);
}

.icon-verify-circle {
    -webkit-mask-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBMaWNlbnNlOiBNSVQuIE1hZGUgYnkgU2FyZ2FtIEljb25zOiBodHRwczovL2dpdGh1Yi5jb20vcGxhbmV0YWJoaS9zYXJnYW0taWNvbnMgLS0+Cjxzdmcgd2lkdGg9IjgwMHB4IiBoZWlnaHQ9IjgwMHB4IiB2aWV3Qm94PSIwIDAgMjQgMjQiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0yMS4wMDcgOC4yN0MyMi4xOTQgOS4xMjUgMjMgMTAuNDUgMjMgMTJjMCAxLjU1LS44MDYgMi44NzYtMS45OTMgMy43My4yNCAxLjQ0Mi0uMTM0IDIuOTU4LTEuMjI3IDQuMDUtMS4wOTUgMS4wOTUtMi42MSAxLjQ1OS00LjA0NiAxLjIyNUMxNC44ODMgMjIuMTk2IDEzLjU0NiAyMyAxMiAyM2MtMS41NSAwLTIuODc4LS44MDctMy43MzEtMS45OTYtMS40MzguMjM1LTIuOTU0LS4xMjgtNC4wNS0xLjIyNC0xLjA5NS0xLjA5NS0xLjQ1OS0yLjYxMS0xLjIxNy00LjA1QzEuODE2IDE0Ljg3NyAxIDEzLjU1MSAxIDEycy44MTYtMi44NzggMi4wMDItMy43M2MtLjI0Mi0xLjQzOS4xMjItMi45NTUgMS4yMTgtNC4wNSAxLjA5My0xLjA5NCAyLjYxLTEuNDY3IDQuMDU3LTEuMjI3QzkuMTI1IDEuODA0IDEwLjQ1MyAxIDEyIDFjMS41NDUgMCAyLjg4LjgwMyAzLjczMiAxLjk5MyAxLjQ0Mi0uMjQgMi45NTYuMTM1IDQuMDQ4IDEuMjI3IDEuMDkzIDEuMDkyIDEuNDY4IDIuNjA4IDEuMjI3IDQuMDVabS00LjQyNi0uMDg0YTEgMSAwIDAgMSAuMjMzIDEuMzk1bC01IDdhMSAxIDAgMCAxLTEuNTIxLjEyNmwtMy0zYTEgMSAwIDAgMSAxLjQxNC0xLjQxNGwyLjE2NSAyLjE2NSA0LjMxNC02LjA0YTEgMSAwIDAgMSAxLjM5NS0uMjMyWiIgZmlsbD0iIzAwMDAwMCIvPjwvc3ZnPg==);
    mask-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBMaWNlbnNlOiBNSVQuIE1hZGUgYnkgU2FyZ2FtIEljb25zOiBodHRwczovL2dpdGh1Yi5jb20vcGxhbmV0YWJoaS9zYXJnYW0taWNvbnMgLS0+Cjxzdmcgd2lkdGg9IjgwMHB4IiBoZWlnaHQ9IjgwMHB4IiB2aWV3Qm94PSIwIDAgMjQgMjQiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0yMS4wMDcgOC4yN0MyMi4xOTQgOS4xMjUgMjMgMTAuNDUgMjMgMTJjMCAxLjU1LS44MDYgMi44NzYtMS45OTMgMy43My4yNCAxLjQ0Mi0uMTM0IDIuOTU4LTEuMjI3IDQuMDUtMS4wOTUgMS4wOTUtMi42MSAxLjQ1OS00LjA0NiAxLjIyNUMxNC44ODMgMjIuMTk2IDEzLjU0NiAyMyAxMiAyM2MtMS41NSAwLTIuODc4LS44MDctMy43MzEtMS45OTYtMS40MzguMjM1LTIuOTU0LS4xMjgtNC4wNS0xLjIyNC0xLjA5NS0xLjA5NS0xLjQ1OS0yLjYxMS0xLjIxNy00LjA1QzEuODE2IDE0Ljg3NyAxIDEzLjU1MSAxIDEycy44MTYtMi44NzggMi4wMDItMy43M2MtLjI0Mi0xLjQzOS4xMjItMi45NTUgMS4yMTgtNC4wNSAxLjA5My0xLjA5NCAyLjYxLTEuNDY3IDQuMDU3LTEuMjI3QzkuMTI1IDEuODA0IDEwLjQ1MyAxIDEyIDFjMS41NDUgMCAyLjg4LjgwMyAzLjczMiAxLjk5MyAxLjQ0Mi0uMjQgMi45NTYuMTM1IDQuMDQ4IDEuMjI3IDEuMDkzIDEuMDkyIDEuNDY4IDIuNjA4IDEuMjI3IDQuMDVabS00LjQyNi0uMDg0YTEgMSAwIDAgMSAuMjMzIDEuMzk1bC01IDdhMSAxIDAgMCAxLTEuNTIxLjEyNmwtMy0zYTEgMSAwIDAgMSAxLjQxNC0xLjQxNGwyLjE2NSAyLjE2NSA0LjMxNC02LjA0YTEgMSAwIDAgMSAxLjM5NS0uMjMyWiIgZmlsbD0iIzAwMDAwMCIvPjwvc3ZnPg==);
}

.icon-media {
    -webkit-mask-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBMaWNlbnNlOiBDQyBBdHRyaWJ1dGlvbi4gTWFkZSBieSBzYWxlc2ZvcmNlOiBodHRwczovL2xpZ2h0bmluZ2Rlc2lnbnN5c3RlbS5jb20vIC0tPgo8c3ZnIGZpbGw9IiMwMDAwMDAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgCgkgd2lkdGg9IjgwMHB4IiBoZWlnaHQ9IjgwMHB4IiB2aWV3Qm94PSIwIDAgNTIgNTIiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDUyIDUyIiB4bWw6c3BhY2U9InByZXNlcnZlIj4KPHBhdGggZD0iTTUwLDEwYzAtMi4yLTEuOC00LTQtNEg2Yy0yLjIsMC00LDEuOC00LDR2MzJjMCwyLjIsMS44LDQsNCw0aDQwYzIuMiwwLDQtMS44LDQtNFYxMHogTTM5LjYsMzhoLTI5CgljLTEuMiwwLTEuOS0xLjMtMS4zLTIuM2w4LjgtMTUuM2MwLjQtMC43LDEuMy0wLjcsMS43LDBsNS4zLDkuMWMwLjQsMC42LDEuMywwLjcsMS43LDAuMWw0LjMtNi4yYzAuNC0wLjYsMS4zLTAuNiwxLjcsMEw0MC43LDM2CglDNDEuMywzNi45LDQwLjcsMzgsMzkuNiwzOHogTTM3LDIwYy0yLjIsMC00LTEuOC00LTRzMS44LTQsNC00czQsMS44LDQsNFMzOS4yLDIwLDM3LDIweiIvPgo8L3N2Zz4=);
    mask-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBMaWNlbnNlOiBDQyBBdHRyaWJ1dGlvbi4gTWFkZSBieSBzYWxlc2ZvcmNlOiBodHRwczovL2xpZ2h0bmluZ2Rlc2lnbnN5c3RlbS5jb20vIC0tPgo8c3ZnIGZpbGw9IiMwMDAwMDAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgCgkgd2lkdGg9IjgwMHB4IiBoZWlnaHQ9IjgwMHB4IiB2aWV3Qm94PSIwIDAgNTIgNTIiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDUyIDUyIiB4bWw6c3BhY2U9InByZXNlcnZlIj4KPHBhdGggZD0iTTUwLDEwYzAtMi4yLTEuOC00LTQtNEg2Yy0yLjIsMC00LDEuOC00LDR2MzJjMCwyLjIsMS44LDQsNCw0aDQwYzIuMiwwLDQtMS44LDQtNFYxMHogTTM5LjYsMzhoLTI5CgljLTEuMiwwLTEuOS0xLjMtMS4zLTIuM2w4LjgtMTUuM2MwLjQtMC43LDEuMy0wLjcsMS43LDBsNS4zLDkuMWMwLjQsMC42LDEuMywwLjcsMS43LDAuMWw0LjMtNi4yYzAuNC0wLjYsMS4zLTAuNiwxLjcsMEw0MC43LDM2CglDNDEuMywzNi45LDQwLjcsMzgsMzkuNiwzOHogTTM3LDIwYy0yLjIsMC00LTEuOC00LTRzMS44LTQsNC00czQsMS44LDQsNFMzOS4yLDIwLDM3LDIweiIvPgo8L3N2Zz4=);
}

#review .rating-content .rating-wrapper {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    font-size: 14px;
}

#review .rating-content .content-wrapper {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    font-size: 16px;
    align-items: stretch;
}

#review .rating-content .content-wrapper > *:first-child {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 1.5rem;
    flex: 1;
}

#review .rating-content .content {
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: 1rem;
    font-size: 16px;
}

#review .rating-content .content > p {
    font-size: 18px;
    text-align: justify;
}

#review .rating-content> :first-child {
    flex-basis: 300px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

#review .rating-content > section:not(:last-child) {
    border-right: solid 2px #000;
}

#review .rating-content .rating-product {
    display: flex;
    flex-direction: row;
    gap: 1rem;
    text-decoration: none;
}

#review .rating-content .rating-product > img {
    width: 48px;
    height: 48px;
    border: solid 2px #000;
    object-fit: cover;
}

#review .rating-content .rating-product > div {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

#review .rating-content .rating-product > div > *:first-child {
    font-size: 16px;
    font-weight: 700;
}

#review .rating-content .icon-like {
    background: #FFF;
    width: 10px;
    height: 10px;
    background-repeat: no-repeat;
    -webkit-mask-position: 50% 50%;
    mask-position: 50% 50%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    display: inline-block;
    -webkit-mask-size: 100%;
    mask-size: 100%;
    margin-bottom: 0px;
}

#review .rating-content .icon-wrapper {
    background: #000;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

#review .rating-contents {
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

#review .rating-contents > section {
    display: flex;
    flex-direction: row;
    gap: 1.5rem;
    flex-wrap: wrap;
}

#review .rating-contents > section:not(:last-child) {
    border-bottom: solid 2px #000;
    padding-bottom: 1.5rem;
}

#review .review-media-featured {
    display: grid;
    grid-template-columns: 1fr;
    gap: 4px;
}

#review header .review-media-featured .review-media {
	aspect-ratio: 1/1;
}

#review .review-media-featured .review-media:hover img {
    transform: scale(1.05);
}

#review .review-media-featured button {
    width: 100%;
    height: 100%;
    border-radius: 0;
    border: 0;
    margin: 0;
    padding: 0;
    box-shadow: none;
    background-color: transparent;
    cursor: pointer;
}

#review .review-media-featured img {
    width: 100%;
    height: 100%;
    aspect-ratio: 1/1;
    opacity: 1;
    transition: 0.1s ease-out;
    object-fit: cover;
}

#review .review-media-featured-wrapper:not(:has(.review-media-featured > *)) {
    display: none;
}

#review .rating-content .review-media-featured {
    display: grid;
    grid-template-columns: 1fr;
    gap: 4px 0px;
    width: 200px;
    aspect-ratio: 75/100;
}

#review .review-media {
    max-width: 100%;
    position: relative;
    width: auto;
    min-height: 50px;
    min-width: 50px;
}

#review .review-media .review-media-image {
    line-height: 0;
    overflow: hidden;
    width: 100%;
    height: 100%;
}

#review .rating-content .rating-reply {
    padding-top: 1.5rem;
    border-top: solid 2px #000;
}

#review .rating-reply .user {
    align-items: start;
}

#review .rating-reply p {
    font-size: 18px;
    text-align: justify;
}

#review .filter-summary {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
}

.modal {
    bottom: 0;
    left: 0;
    overflow: auto;
    position: fixed;
    right: 0;
    top: 0;
    z-index: 9;
    max-height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    padding: 40px 0 32px;
    display: flex;
    align-items: center;
    padding: 48px 0;
}

.modal .modal-content {
    max-width: 1000px;
    width: calc(100% - 64px);
    margin: auto;
    position: relative;
    will-change: transform, opacity;
}

.modal .modal-content-gallery {
    width: 100%;
    display: flex;
    flex-flow: row wrap;
    background: #FFF;
}

.modal .modal-content-gallery > .rating-media {
    order: 1;
}

.modal .modal-content-gallery > .modal-review {
    order: 2;
}

.modal .modal-content-gallery > .modal-content-nav {
    order: 3;
}

.modal .rating-media {
    width: 100%;
    height: 100%;
    flex: 3;
    order: 1;
}

.modal .modal-review {
    background: #FFF;
    flex: 2;
    order: 2;
}

.modal .modal-content-nav {
    display: flex;
    gap: 4px;
    padding: 4px;
    background: #000000;
    justify-content: start;
    overflow-x: auto;
    width: 100%;
}

.modal .modal-content-nav > .review-media {
    width: 100px;
    height: 100px;
    aspect-ratio: 1/1;
    border: solid 2px #000;
}

.modal .modal-content-nav > .review-media:hover img {
    transform: scale(1.05);
}

.modal .modal-content-nav .review-media.selected {
    border: solid 2px #FFF;
}

.modal .modal-content-nav button {
    border-radius: 0;
    border: 0;
    box-shadow: none;
    margin: 0;
    width: auto;
    min-width: auto;
    padding: 0;
    background-color: transparent;
    min-height: auto;
    cursor: pointer;
}

.modal .modal-content-nav img {
    width: 100%;
    aspect-ratio: 1/1;
    opacity: 1;
    transition: 0.1s ease-out;
    object-fit: cover;
}

.modal .media-image {
    display: flex;
    height: 300px;
}

.modal .rating-content .rating-reply {
    padding-top: 1.5rem;
    border-top: solid 2px #000;
}

.modal .rating-reply .user {
    align-items: start;
}

.modal .rating-reply p {
    font-size: 18px;
    text-align: justify;
}

#modal .user .user-name {
    font-weight: 700;
}

.modal .media-image img {
    object-fit: contain;
    height: 100%;
    width: 100%;
    object-position: center;
}

.modal .review-media-image {
    overflow: hidden;
    width: 100%;
    height: 100%;
}

.modal .modal-close {
    display: flex;
    flex-direction: row;
    justify-content: end;
}

.modal .modal-close > span {
    width: 32px;
    height: 32px;
    background: #FFF;
    display: inline-block;
    cursor: pointer;
}

.modal .rating-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    padding: 1.5rem;
}

.modal .rating-content > section {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.modal .rating-content > section> :first-child {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.modal .rating-content > section:not(:last-child) {
    border-bottom: solid 2px #000;
    padding-bottom: 1.5rem;
}

.modal .rating-content .user {
    flex-direction: row;
    align-items: stretch;
    gap: 1rem;
    padding: 0rem;
}

.modal .rating-content .user .avatar {
    width: 48px;
    height: 48px;
}

.modal .rating-content .rating-wrapper {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    font-size: 14px;
}

.modal .rating-content .content-wrapper {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    font-size: 16px;
}

.modal .rating-content .content-wrapper > *:first-child {
    display: flex;
    flex-direction: row;
    gap: 1.5rem;
}

.modal .rating-content .content {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    font-size: 16px;
    width: 100%;
}

.modal .rating-content .content > p {
    font-size: 18px;
    text-align: justify;
}

.modal .rating-content .rating-product {
    display: flex;
    flex-direction: row;
    gap: 1rem;
    text-decoration: none;
}

.modal .rating-content .rating-product > img {
    width: 48px;
    height: 48px;
    border: solid 2px #000;
    object-fit: cover;
}

.modal .rating-content .rating-product > div {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.modal .rating-content .rating-product > div > *:first-child {
    font-size: 16px;
    font-weight: 700;
}

.modal .rating-content .icon-like {
    background: #FFF;
    width: 10px;
    height: 10px;
    background-repeat: no-repeat;
    -webkit-mask-position: 50% 50%;
    mask-position: 50% 50%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    display: inline-block;
    -webkit-mask-size: 100%;
    mask-size: 100%;
    margin-bottom: 0px;
}

.modal .rating-content .icon-wrapper {
    background: #000;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}


/*TAB NAV*/
.tablist {
	display: flex;
	flex-direction: row;
    gap: 1rem .75rem;
}

.tab {
	padding: .5rem .75rem;
	border: solid .0625rem rgba(0, 0, 0, 0);
	border-radius: 10rem;
	flex-shrink: 0;
	cursor: pointer;
}

.tab:hover, .tab-selected {
    border-color: rgb(var(--color)/var(--border-alpha));
}

/*POST*/
.posts > * {
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
}

.posts > *:not(:last-child) {
    border-bottom: solid 1px #000;
}

.post {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	gap: 2rem;
}

.post > *:first-child {
	display: flex;
	flex-direction: column;
}

.post .thumbnail {
	width: 240px;
}

.post a {
    -webkit-text-decoration: none;
    text-decoration: none;
}

@media only screen and (min-width: 1024px) {
    .modal .media-image {
        height: 600px;
    }

    .modal .modal-review {
        max-height: 600px;
		overflow-y: auto;
    }
}

@media (min-width: 1024px) {
    body > header, header.sticky, main > * {
        padding: 4rem max((100% - 71.25rem)/2, 4rem);
    }

    .page > header {
		padding: 1.5rem max((100% - 71.25rem)/2, 4rem);
    }

    .head-body .title {
        display: flex;
    }

    .head-body .rating {
        display: flex;
    }

	main > header {
		padding-top: 2rem;
		padding-bottom: 2rem;
	}

	main > * {
		padding-left: max((100% - 71.25rem)/2, 4rem);
		padding-right: max((100% - 71.25rem)/2, 4rem);
	}

	#review > main > header > div:first-child div {
		width: unset;
	}

	#review > main > header > div:first-child div select {
		width: unset;
	}
}

@media (max-width: 1024px) {
    .page-head {
        padding: 1.5rem;
        order: 1;
        bottom: 0px;
        top: 0px;
        box-shadow: 0 -1px #000;
    }

    .preview-content img {
        -webkit-border-radius: 0rem;
        -moz-border-radius: 0rem;
        border-radius: 0rem;
    }
    .product {
        border-radius: 0rem;
    }

    .product > article .left {
		width: 100%;
    }

    #review .rating-contents > section> :first-child {
        width: 100%;
        flex-basis: unset;
    }

    #review .rating-contents > section > section:not(:last-child) {
        border-right: unset;
        border-bottom: solid 2px #000;
        padding-bottom: 1.5rem;
    }

    #review .rating-contents > section > div:has( > .divider-vertical-l) {
        display: none;
    }

    #review > header .rating {
        align-self: center;
    }

    .modal .modal-content-gallery > .rating-media {
        order: 1;
        flex: unset;
        width: 100%;
    }

    .modal .modal-content-gallery > .modal-review {
        order: 3;
        flex: unset;
        width: 100%;
    }

    .modal .modal-content-gallery > .modal-content-nav {
        order: 2;
        flex: unset;
        width: 100%;
    }

	#section-nav {
		padding-left: 1.5rem;
		padding-right: 1.5rem;
	}

	.post {
		flex-wrap: wrap;
	}

	.post .thumbnail {
		width: 100%;
	}

	.post > *:first-child {
		flex: 1;
	}

}

@media (max-width: 640px) {
    .modal {
        padding: 1.5rem;
        background-color: rgba(0, 0, 0, 50%);
    }

    .modal .modal-content {
        width: 100%;
    }

    #review > header > div > section {
        width: 100%;
    }

    #review .rating-contents .content {
        flex: unset;
        width: 100%;
    }

    #review header .review-media-featured {
        grid-template-columns: repeat(5, 1fr);
    }

    #review .rating-contents .review-media-featured {
        width: unset;
        aspect-ratio: unset;
        display: flex;
        flex-wrap: nowrap;
        gap: 4px;
        justify-content: flex-start;
        margin-bottom: -4px;
    }

    #review .rating-contents .review-media-featured img {
        aspect-ratio: unset;
    }
}