*,
*::before,
*::after {
box-sizing: border-box
}
* {
margin: 0;
padding: 0
}
html {
-webkit-text-size-adjust: 100%
}
html,
body {
max-width: 100vw
}
body {
font-family: var(--font-arimo);
font-size: 14px;
line-height: 1.5;
color: var(--color-text);
background: #fff;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale
}
img,
picture,
svg,
video {
display: block;
max-width: 100%
}
img {
height: auto
}
a {
color: inherit;
text-decoration: none
}
button {
background: none;
border: 0;
font: inherit;
cursor: pointer;
color: inherit
}
ul,
ol {
list-style: none
}
input,
textarea,
select {
font: inherit
}
:root {
--color-brand: #ffb000;
--color-brand-dark: #fdb414;
--color-brand-soft: #fdca5b;
--color-brand-tint: #fff7e6;
--color-danger: #e30019;
--color-link: #2271fa;
--color-text-strong: #1c2753;
--color-text: #333333;
--color-text-muted: #666666;
--color-text-meta: #999999;
--color-bg-soft: #f7f3ec;
--color-bg-table-label: #f7f7f7;
--color-bg-topbar: #232323;
--color-border-card: #ffb000;
--color-border-card-2: #fdb414;
--color-border-divider: #e0e0e0;
--color-border-light: #e8e8e8;
--color-border-input: #f7bc51;
--color-white: #ffffff;
--color-black: #000000;
--font-arimo: 'Gtsgr Text', 'Helvetica Neue', Arial, sans-serif;
--font-inter: 'Gtsgr Display', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;
--font-arial: 'Gtsgr Text', 'Helvetica Neue', Arial, sans-serif;
--space-2: 2px;
--space-4: 4px;
--space-6: 6px;
--space-8: 8px;
--space-10: 10px;
--space-12: 12px;
--space-14: 14px;
--space-16: 16px;
--space-18: 18px;
--space-20: 20px;
--space-22: 22px;
--space-24: 24px;
--space-29: 29px;
--space-32: 32px;
--space-36: 36px;
--space-40: 40px;
--space-43: 43px;
--space-48: 48px;
--space-62: 62px;
--space-74: 74px;
--space-86: 86px;
--space-99: 99px;
--space-104: 104px;
--space-127: 127px;
--space-154: 154px;
--space-190: 190px;
--space-219: 219px;
--space-238: 238px;
--space-260: 260px;
--space-280: 280px;
--space-322: 322px;
--space-355: 355px;
--space-460: 460px;
--space-513: 513px;
--space-532: 532px;
--space-545: 545px;
--space-611: 611px;
--space-643: 643px;
--container-max: 1200px;
--container-offset: 99px;
--radius-xs: 4px;
--radius-sm: 6px;
--radius-md: 8px;
--radius-lg: 12px;
--radius-pill: 9999px;
--border-thin: 1px solid var(--color-border-divider);
--border-card: 1px solid var(--color-border-card)
}
.h-page-title,
.h-section-title,
.h-card-title {
font-family: var(--font-inter);
font-weight: 700;
color: var(--color-text-strong);
letter-spacing: 0
}
.h-page-title {
font-size: 40px;
line-height: 1.2
}
.h-section-title {
font-size: 40px;
line-height: 40px
}
.h-card-title {
font-size: 20px;
line-height: 23px;
color: var(--color-text);
font-family: var(--font-arimo);
font-weight: 400
}
.container {
max-width: var(--container-max);
margin-inline: auto;
padding-inline: 16px;
width: 100%
}
@media (min-width: 1280px) {
.container {
padding-inline: 0
}
}
.site-header {
background: var(--color-white)
}
.topbar {
background: var(--color-bg-topbar);
height: var(--space-32);
color: var(--color-white);
font-family: var(--font-arial);
font-size: 13px;
display: flex;
align-items: center;
justify-content: center
}
.topbar-inner {
display: flex;
align-items: center;
height: 100%;
gap: 32px
}
.topbar-text {
font-size: 13px;
line-height: 24px;
color: var(--color-white)
}
.topbar-actions {
margin-left: auto;
display: flex;
align-items: center;
gap: 24px;
font-family: var(--font-arial);
font-size: 14px
}
.topbar-link {
display: inline-flex;
align-items: center;
gap: 8px;
color: var(--color-white);
line-height: 23px
}
.topbar-link img,
.topbar-link svg {
display: none
}
.main-header {
background: var(--color-white);
padding: 13px 0 16px
}
.main-header-inner {
display: flex;
align-items: center;
gap: 60px
}
.logo {
display: block;
flex-shrink: 0;
width: 300px;
height: 75px
}
.logo img {
display: block;
width: 100%;
height: 100%;
object-fit: contain;
object-position: left center
}
.search-form {
flex: 1;
max-width: 438px;
height: 40px;
display: flex;
border: 1px solid var(--color-border-input);
border-radius: 4px;
overflow: hidden
}
.search-input {
flex: 1;
padding: 0 16px;
border: 0;
background: transparent;
font-family: var(--font-inter);
font-size: 14px;
color: var(--color-text);
outline: none
}
.search-input::placeholder {
color: var(--color-text-subtle, #474747)
}
.search-btn {
width: 32px;
flex-shrink: 0;
display: grid;
place-items: center;
background: transparent;
margin-right: 10px
}
.search-btn img,
.search-btn svg {
width: 25px;
height: 25px
}
.header-actions {
margin-left: auto;
display: flex;
align-items: center;
gap: 0
}
.header-action {
display: flex;
align-items: center;
gap: 8px;
padding: 0 14px;
font-family: var(--font-arial)
}
a.header-action:hover {
opacity: 0.75
}
.header-action-icon {
width: 40px;
height: 40px;
flex-shrink: 0
}
.header-action-icon.location {
width: 30px;
height: 40px
}
.header-action-icon.cart {
width: 40px;
height: 40px
}
.header-action-text {
display: flex;
flex-direction: column
}
.header-action-label {
font-size: 13px;
font-weight: 400;
color: var(--color-text-strong);
text-transform: uppercase;
line-height: 23px;
letter-spacing: 0.2px
}
.header-action-value {
font-size: 12px;
color: var(--color-text-meta);
line-height: 16px
}
.main-nav {
background: var(--color-brand);
height: var(--space-62);
display: flex;
align-items: center;
justify-content: center
}
.main-nav-inner {
display: flex;
align-items: center;
height: 100%;
gap: 0
}
.nav-list {
display: flex;
align-items: center;
height: 100%;
margin: 0;
padding: 0;
gap: 40px;
list-style: none
}
.nav-item--has-dropdown {
position: relative
}
.nav-item--has-dropdown>.nav-link {
display: inline-flex;
align-items: center;
gap: 6px
}
.nav-caret {
font-size: 11px;
line-height: 1;
opacity: 0.85;
transition: transform 0.18s ease;
display: inline-block
}
.nav-item--has-dropdown:hover>.nav-link .nav-caret,
.nav-item--has-dropdown:focus-within>.nav-link .nav-caret {
transform: rotate(180deg)
}
.nav-dropdown {
position: absolute;
top: 100%;
left: 0;
min-width: 200px;
margin: 0;
padding: 8px 0;
list-style: none;
background: #fff;
border: 1px solid var(--color-border-divider, #e5e7eb);
border-radius: 6px;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
opacity: 0;
visibility: hidden;
transform: translateY(4px);
transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
z-index: 100
}
.nav-item--has-dropdown:hover>.nav-dropdown,
.nav-item--has-dropdown:focus-within>.nav-dropdown {
opacity: 1;
visibility: visible;
transform: translateY(0)
}
.nav-dropdown-item {
margin: 0
}
.nav-dropdown-link {
display: block;
padding: 10px 18px;
font-family: var(--font-arimo);
font-size: 14px;
font-weight: 400;
color: var(--color-text, #333);
text-decoration: none;
white-space: nowrap;
transition: background 0.15s, color 0.15s
}
.nav-dropdown-link:hover,
.nav-dropdown-link:focus-visible {
background: #f5f5f5;
color: var(--color-brand, #d61c1f)
}
.nav-item--has-dropdown>.nav-link:hover~.nav-dropdown,
.nav-item--has-dropdown:hover .nav-dropdown {
pointer-events: auto
}
.nav-item--has-dropdown>.nav-dropdown {
pointer-events: none
}
.nav-item--has-dropdown:hover>.nav-dropdown {
pointer-events: auto
}
.nav-item {
height: 100%;
display: flex;
align-items: center;
position: relative;
list-style: none
}
.nav-link {
font-family: var(--font-arial);
font-size: 14px;
font-weight: 400;
color: var(--color-text);
line-height: 23px;
display: inline-flex;
align-items: center;
height: 100%;
position: relative;
transition: color 0.15s;
vertical-align: middle
}
.nav-link:hover {
color: var(--color-text-strong)
}
.nav-link.is-active {
color: var(--color-text-strong);
font-weight: 700
}
.chip-more-chevron {
display: inline-block;
width: 0;
height: 0;
border-left: 4px solid transparent;
border-right: 4px solid transparent;
border-top: 5px solid currentColor;
vertical-align: middle;
line-height: 0
}
.video-play-triangle,
.play-triangle {
width: 0;
height: 0;
border-top: 12px solid transparent;
border-bottom: 12px solid transparent;
border-left: 18px solid #fff;
display: inline-block;
margin-left: 4px
}
.hero {
padding-top: 25px;
position: relative;
z-index: 99
}
.hero-inner {
display: grid;
grid-template-columns: minmax(0, 728px) minmax(0, 472px);
gap: 0;
align-items: stretch;
max-width: 1200px;
width: 100%
}
.hero-left {
position: relative;
height: 370px;
border-radius: var(--radius-xs);
overflow: hidden
}
.hero-slide {
position: absolute;
inset: 0;
background-size: cover;
background-position: center
}
.hero-slide.is-active {
opacity: 1
}
.hero-slide:not(.is-active) {
opacity: 0;
pointer-events: none
}
img.hero-slide {
width: 100%;
height: 100%;
object-fit: cover
}
.hero-nav {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 30px;
height: 48px;
border-radius: 0;
background: rgba(255, 255, 255, 0.85);
display: grid;
place-items: center;
z-index: 3;
border-radius: 4px
}
.hero-nav.prev {
left: 24px
}
.hero-nav.next {
right: 24px
}
.hero-nav img,
.hero-nav svg {
width: 24px;
height: 24px
}
.hero-right {
display: grid;
grid-template-rows: 1fr 1fr;
gap: 15px;
padding-left: 15px;
min-width: 0
}
.hero-side {
position: relative;
border-radius: 0;
overflow: hidden;
background-size: cover;
background-position: center;
height: 180px;
border-radius: var(--radius-xs)
}
.hero-dots {
position: absolute;
bottom: 16px;
left: 50%;
transform: translateX(-50%);
display: flex;
gap: 4px;
z-index: 3
}
.hero-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.4)
}
.hero-dot.is-active {
background: #fff
}
.product-category-hero {
padding-top: var(--space-43);
padding-bottom: var(--space-43)
}
.product-category-hero .hero-left {
width: 100%;
height: 250px;
overflow: hidden
}
@media (max-width: 768px) {
.product-category-hero .hero-left {
height: 200px
}
}
@media (max-width: 480px) {
.product-category-hero .hero-left {
height: 180px
}
}
.blog-category-hero .hero-left {
width: 100%;
height: 250px;
overflow: hidden
}
@media (max-width: 768px) {
.blog-category-hero .hero-left {
height: 200px
}
}
@media (max-width: 480px) {
.blog-category-hero .hero-left {
height: 180px
}
}
.section-header {
display: flex;
align-items: center;
justify-content: space-between;
height: 40px;
margin-bottom: 32px
}
.section-title-wrap {
display: flex;
align-items: center;
height: 40px;
padding-right: 24px
}
.section-title {
font-family: var(--font-inter);
font-size: 25px;
font-weight: 700;
line-height: 40px;
color: var(--color-text-strong)
}
.section-action {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 8px 12px;
border: 1px solid var(--color-brand);
font-family: var(--font-arimo);
font-size: 13px;
color: var(--color-brand-dark);
font-weight: 700;
text-decoration: none;
transition: color 0.18s ease, border-color 0.18s ease
}
.section-action img,
.section-action svg,
.sale-section__view-all svg {
width: 14px;
height: 14px;
flex-shrink: 0
}
.section-action:hover,
.section-action:focus-visible {
color: var(--color-brand);
border-color: var(--color-brand)
}
.product-section {
margin-top: 60px
}
.product-grid {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 16px
}
.product-card {
border: var(--border-card);
border-radius: 4px;
background: #fff;
overflow: hidden;
transition: transform 0.2s, box-shadow 0.2s;
min-width: 0;
max-width: 100%
}
.product-card:hover {
transform: translateY(-2px);
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08)
}
.product-card__link {
display: block;
color: inherit;
text-decoration: none
}
.product-grid--related {
grid-template-columns: repeat(5, minmax(0, 1fr))
}
.product-thumb-row {
display: flex;
align-items: center;
gap: 4px;
padding: 5px;
height: 40px
}
.product-thumb-row .thumb {
display: inline-flex;
align-items: center;
justify-content: center;
width: 34px;
height: 34px;
padding: 0;
margin: 0;
background: #f0f0f0;
border: 1px solid transparent;
cursor: pointer;
flex-shrink: 0;
overflow: hidden;
font: inherit;
line-height: 1;
-webkit-appearance: none;
appearance: none
}
.product-thumb-row .product-card__thumb {
background: transparent
}
.product-thumb-row .product-card__thumb img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center
}
.product-thumb-row .thumb.is-active {
border-color: var(--color-brand)
}
.product-image-wrap {
width: 100%;
aspect-ratio: 1 / 1;
background: #fff;
position: relative;
overflow: hidden
}
.product-image-wrap img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center
}
.product-card__image-placeholder {
width: 100%;
height: 100%;
background: linear-gradient(135deg, #f5f5f7 0%, #e9e9ee 100%);
display: flex;
align-items: center;
justify-content: center;
text-align: center;
padding: 12px
}
.product-card__image-placeholder-text {
font-size: 13px;
color: #8a8a90;
line-height: 1.4;
letter-spacing: 0.02em;
text-transform: uppercase
}
.product-image-wrap .product-card__image-img {
display: block;
width: 100%;
height: 100%
}
.product-info {
padding: 10px 12px 12px
}
.product-name {
font-family: var(--font-arimo);
font-size: 18px;
font-weight: 400;
line-height: 23px;
color: var(--color-text);
margin-bottom: 8px;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden
}
.product-price {
font-family: var(--font-arimo);
font-size: 18px;
font-weight: 700;
line-height: 26px;
color: var(--color-danger);
margin-bottom: 6px;
letter-spacing: -0.3px
}
.product-original-price-row {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 5px
}
.product-original-price {
font-family: var(--font-arimo);
font-size: 13px;
line-height: 22px;
color: var(--color-text-meta);
text-decoration: line-through
}
.discount-badge {
display: inline-flex;
align-items: center;
justify-content: center;
height: 15px;
padding: 0 3px;
background: var(--color-danger);
color: #fff;
font-family: var(--font-arimo);
font-size: 12px;
font-weight: 700;
border-radius: var(--radius-xs)
}
.product-rating {
display: flex;
align-items: center;
gap: 6px;
font-family: var(--font-arimo);
font-size: 13px;
color: var(--color-text-muted)
}
.product-rating .star {
width: 14px;
height: 14px;
display: inline-block;
background: url('../icons/ui/icon-star.svg') center/contain no-repeat
}
.product-information__description table {
width: 100%;
border-collapse: collapse;
margin: 15px 0;
}
.product-information__description th {
padding: 8px 10px;
background: #fdb414;
color: #222;
font-weight: 600;
text-align: left;
}
.product-information__description td {
padding: 11px 14px;
border-bottom: 1px solid #eee;
}
.product-information__description tbody tr:hover {
background: #fffaf0;
}
.product-information__description td:last-child {
color: #ff0c0c;
font-weight: 600;
white-space: nowrap;
}
.home-banner-slider {
position: relative;
width: 100%;
margin-top: 25px
}
.home-banner-slider__viewport {
position: relative;
width: 100%;
aspect-ratio: 1162 / 200;
overflow: hidden;
background-color: #f5f5f5
}
.home-banner-slider__track {
list-style: none;
margin: 0;
padding: 0;
width: 100%;
height: 100%;
position: relative
}
.home-banner-slider__slide {
position: absolute;
inset: 0;
opacity: 0;
pointer-events: none;
transition: opacity 0.45s cubic-bezier(0.4, 0, 0.2, 1)
}
.home-banner-slider__slide.is-active {
opacity: 1;
pointer-events: auto
}
.home-banner-slider__link {
display: block;
width: 100%;
height: 100%;
text-decoration: none;
color: inherit;
cursor: pointer
}
.home-banner-slider__link--nolink {
cursor: default
}
.home-banner-slider__picture,
.home-banner-slider__image {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center
}
.home-banner-slider .hero-nav {
background: rgba(255, 255, 255, 0.92);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12)
}
.home-banner-slider .hero-nav:hover {
background: var(--color-brand, #ffb000);
color: #fff
}
.home-banner-slider .hero-dots {
bottom: 12px
}
@media (prefers-reduced-motion: reduce) {
.home-banner-slider__slide {
transition: none
}
}
@media (max-width: 767px) {
.home-banner-slider__viewport {
aspect-ratio: 390 / 160
}
.home-banner-slider {
margin-bottom: 16px
}
}
.xuong-section {
margin-top: 76px
}
.xuong-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px
}
.xuong-card {
height: 420px;
border-radius: 0;
overflow: hidden;
background-size: cover;
background-position: center;
position: relative
}
.xuong-card::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(180deg, transparent 50%, rgba(0, 0, 0, 0.45) 100%)
}
.xuong-caption {
position: absolute;
left: 24px;
right: 24px;
bottom: 24px;
color: #fff;
z-index: 2
}
.xuong-caption h3 {
font-family: var(--font-arimo);
font-size: 20px;
font-weight: 700;
line-height: 26px;
margin-bottom: 6px
}
.xuong-caption p {
font-family: var(--font-arimo);
font-size: 14px;
line-height: 20px;
color: rgba(255, 255, 255, 0.85)
}
.video-section {
margin-top: 60px
}
.video-layout {
display: grid;
grid-template-columns: minmax(0, 624px) minmax(0, 576px);
gap: 24px;
align-items: stretch
}
.video-main {
position: relative;
width: 100%;
height: 0;
padding-top: 56.25%;
border-radius: var(--radius-xs);
overflow: hidden;
background: #000
}
.video-main__poster,
.video-main__frame {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
border: 0;
object-fit: cover;
display: block
}
.video-main__empty {
position: absolute;
inset: 0;
background: #111;
display: block
}
.video-main.is-playing .video-main__poster {
display: none
}
.video-main:not(.is-playing)::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(0, 0, 0, 0.15) 0%, rgba(0, 0, 0, 0.05) 40%, rgba(0, 0, 0, 0.55) 100%);
pointer-events: none;
z-index: 1
}
.video-main.is-playing::after {
display: none
}
.video-play {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 72px;
height: 72px;
border-radius: 50%;
border: 0;
padding: 0;
cursor: pointer;
background: rgba(0, 0, 0, 0.4);
display: grid;
place-items: center;
z-index: 3;
transition: background 0.2s ease, transform 0.2s ease
}
.video-play:hover,
.video-play:focus-visible {
background: rgba(0, 0, 0, 0.6);
transform: translate(-50%, -50%) scale(1.06)
}
.video-play[hidden] {
display: none
}
.video-play img,
.video-play svg {
width: 24px;
height: 24px
}
.video-main-caption p {
font-family: var(--font-arimo);
font-size: 14px;
line-height: 20px;
color: rgba(255, 255, 255, 0.85)
}
.video-tab-list {
display: flex;
flex-direction: column;
border: 1px solid var(--color-border-light);
border-radius: var(--radius-xs);
overflow: hidden
}
.video-tab-header {
height: 43px;
flex: 0 0 auto;
padding: 10px;
background: #1C2753;
display: flex;
align-items: center;
font-family: var(--font-inter);
font-size: 16px;
font-weight: 600;
color: #ffffff
}
.video-layout {
--video-header-h: 43px;
--video-tab-min-h: 54px
}
.video-main {
align-self: start
}
.video-tab {
display: flex;
align-items: center;
gap: 12px;
padding: 5px 16px;
flex: 1 1 auto;
min-height: var(--video-tab-min-h);
width: 100%;
border: 0;
margin: 0;
text-align: left;
font: inherit;
color: inherit;
cursor: pointer;
background: #FDCA5B;
transition: background 0.18s ease
}
.video-tab:last-child {
border-bottom: 0
}
.video-tab.is-active {
background: #FFB000
}
.video-tab:hover {
background: #FFC24D
}
.video-tab.is-active:hover {
background: #FFB000
}
.video-tab:focus-visible {
outline: 2px solid var(--color-brand, #FFB000);
outline-offset: -2px;
z-index: 1
}
.video-tab-thumb {
position: relative;
display: block;
width: 84px;
height: 47px;
border-radius: var(--radius-thumb, 8px);
background: #000;
overflow: hidden;
flex-shrink: 0
}
.video-tab-thumb img {
width: 100%;
height: 100%;
object-fit: cover;
display: block
}
.video-tab-thumb::after {
content: '';
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.1);
pointer-events: none
}
.video-tab-thumb .play {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 26px;
height: 26px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.2);
display: grid;
place-items: center;
z-index: 2
}
.video-tab-thumb .play img,
.video-tab-thumb .play svg {
width: 10px;
height: 10px
}
.video-tab-text {
font-family: var(--font-arimo);
font-size: 13px;
font-weight: 500;
line-height: 18px;
color: var(--color-text);
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden
}
.tintuc-section {
margin-top: 60px;
margin-bottom: 30px;
}
.chip-row {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 24px;
flex-wrap: wrap
}
.chip {
display: inline-flex;
align-items: center;
height: 36px;
padding: 0 20px;
border-radius: 4px;
font-family: var(--font-arimo);
font-size: 13px;
color: var(--color-text);
cursor: pointer
}
.chip.is-active {
background: var(--color-brand);
color: var(--color-text-strong);
font-weight: 700
}
.chip-more {
margin-left: auto;
font-family: var(--font-arimo);
font-size: 13px;
color: var(--color-text-muted);
display: inline-flex;
align-items: center;
gap: 4px
}
.blog-row {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 24px;
margin-top: 30px
}
.blog-card {
display: flex;
flex-direction: column;
background: #fff;
border-radius: 0;
overflow: hidden;
height: 446px
}
.blog-card--compact {
display: flex;
flex-direction: row;
align-items: flex-start;
gap: 12px;
height: auto;
min-height: 0;
background: transparent;
overflow: visible
}
.blog-card--compact .blog-card__link {
display: flex;
flex-direction: row;
align-items: flex-start;
gap: 12px;
width: 100%;
min-width: 0
}
.blog-card--compact .blog-card__image {
flex: 0 0 80px;
width: 80px;
height: 60px;
border-radius: var(--radius-xs);
background-size: cover;
background-position: center;
background-color: #eee;
aspect-ratio: auto
}
.post-card__thumb--placeholder {
flex: 0 0 80px;
width: 80px;
height: 60px;
border-radius: var(--radius-xs);
background: #e9ecef;
border: 1px dashed #c8c8c8
}
.blog-card--compact .blog-card__content {
flex: 1;
min-width: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 4px
}
.blog-card--compact .blog-card__title {
margin: 0;
font-size: 13px;
font-weight: 500;
line-height: 18px;
color: var(--color-text);
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
overflow-wrap: break-word;
word-break: normal
}
.blog-card--compact .blog-card__date {
margin: 0;
font-size: 12px;
color: var(--color-text-meta)
}
.blog-card-img {
width: 100%;
aspect-ratio: 16 / 9;
background-size: cover;
background-position: center;
background-color: #eee
}
.blog-card-body {
padding: 20px;
flex: 1
}
.blog-card-date {
font-family: var(--font-arimo);
font-size: 13px;
color: var(--color-text-meta);
margin-bottom: 16px
}
.blog-card-title {
font-family: var(--font-arimo);
font-size: 18px;
font-weight: 700;
line-height: 23px;
color: var(--color-text);
margin-bottom: 12px;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden
}
.blog-card-excerpt {
font-family: var(--font-arimo);
font-size: 13px;
line-height: 18px;
color: var(--color-text-muted);
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden
}
.search-keywords {
margin-top: 60px;
padding: 40px 0;
border-top: 1px solid var(--color-border-divider);
border-bottom: 1px solid var(--color-border-divider)
}
.search-keywords-grid {
display: flex;
flex-wrap: wrap;
gap: 8px
}
.search-keywords-grid .chip {
background: #f7f7f7;
color: var(--color-text)
}
.footer-search-keywords {
margin-top: 0;
padding: 24px 0 32px;
border-top: 0;
background: #ffb000
}
.footer-search-title {
font-family: var(--font-arimo);
font-size: 15px;
font-weight: 700;
color: var(--color-text-strong);
margin-bottom: 14px;
text-transform: uppercase;
letter-spacing: 0.5px
}
.site-footer {
background: #fff;
padding: 0;
border-top: 0
}
.site-footer>.container:first-child {
margin-bottom: 0
}
.footer-grid {
display: grid;
grid-template-columns: 300px 1fr 1fr 1fr;
gap: 56px;
padding-top: 56px;
padding-bottom: 56px;
max-width: 1200px;
margin-inline: auto;
align-items: start
}
.footer-col h4 {
font-family: var(--font-arimo);
font-size: 16px;
font-weight: 700;
color: var(--color-text-strong);
margin-bottom: 20px;
text-transform: uppercase
}
.footer-col ul li {
margin-bottom: 12px
}
.footer-col ul a {
font-family: var(--font-arimo);
font-size: 14px;
color: var(--color-text);
line-height: 20px;
transition: color 0.15s
}
.footer-col ul a:hover {
color: var(--color-brand)
}
.footer-brand .footer-logo {
display: block;
width: 272px;
height: 91px;
margin-bottom: 24px;
flex-shrink: 0
}
.footer-brand .footer-logo img {
display: block;
width: 100%;
height: 100%;
object-fit: contain;
object-position: left center
}
.footer-desc {
font-family: var(--font-arimo);
font-size: 14px;
line-height: 22px;
color: var(--color-text);
margin-bottom: 24px;
letter-spacing: 0.2px
}
.footer-contact {
font-family: var(--font-arimo);
font-size: 14px;
line-height: 22px;
color: var(--color-text);
margin-bottom: 16px
}
.footer-contact strong {
display: block;
font-weight: 700;
margin-bottom: 4px
}
.footer-social {
display: flex;
gap: 12px;
margin-bottom: 24px
}
.footer-social a {
display: grid;
place-items: center;
width: 36px;
height: 36px
}
.footer-social img {
width: 36px;
height: 36px
}
.footer-payment {
display: flex;
align-items: center;
gap: 12px;
margin-top: 16px
}
.footer-payment img {
height: 28px;
width: auto
}
.footer-bottom {
padding: 24px 0;
font-family: var(--font-arimo);
font-size: 13px;
color: var(--color-text-muted);
text-align: center
}
.footer-search-keywords .search-keywords-grid {
max-height: 84px;
overflow: hidden;
align-content: flex-start
}
.footer-search-keywords .search-keywords-grid .chip {
flex: 0 0 auto;
white-space: nowrap;
max-width: 100%;
text-overflow: ellipsis;
overflow: hidden
}
.footer-trade-image {
margin-top: 24px;
display: inline-block
}
.footer-trade-image img {
display: block;
max-width: 200px;
height: auto;
width: auto
}
.footer-trade-image a {
display: inline-block;
line-height: 0
}
.footer-google-map {
margin: 0 0 32px;
padding: 0
}
.footer-google-map__inner {
position: relative;
width: 100%;
aspect-ratio: 16 / 9;
max-height: 420px;
border-radius: var(--radius-xs, 4px);
overflow: hidden;
background: #f6f7f7
}
.footer-google-map__inner iframe {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
border: 0;
display: block
}
.footer-google-map__frame:not([data-map-loaded]) {
opacity: 0
}
.footer-google-map__frame[data-map-loaded] {
opacity: 1;
transition: opacity 0.25s ease
}
.page-heading {
padding: 24px 0;
background: #fafafa
}
.page-heading h1 {
font-family: var(--font-inter);
font-size: 36px;
font-weight: 700;
color: var(--color-text-strong);
line-height: 44px;
margin-bottom: 8px
}
.breadcrumb {
display: flex;
align-items: center;
gap: 8px;
font-family: var(--font-arimo);
font-size: 13px;
color: var(--color-text-muted)
}
.breadcrumb a {
color: var(--color-link);
transition: opacity 0.15s
}
.breadcrumb a:hover {
opacity: 0.7
}
.breadcrumb .sep {
color: var(--color-text-meta)
}
.breadcrumb .current {
color: var(--color-text)
}
.breadcrumb .last {
color: var(--color-text)
}
.breadcrumb .separator {
display: inline-flex;
align-items: center
}
.dmsp-layout {
margin-top: var(--space-43);
padding-bottom: var(--space-127)
}
.dmsp-layout>.container {
display: grid;
grid-template-columns: 260px minmax(0, 1fr);
gap: 32px
}
.dmsp-sidebar {
font-family: var(--font-arimo);
min-width: 0
}
.dmsp-sidebar h3 {
font-size: 16px;
font-weight: 700;
color: var(--color-text-strong);
margin-bottom: 16px;
padding-bottom: 12px;
border-bottom: 2px solid var(--color-brand)
}
.filter-group {
margin-bottom: 24px;
padding-bottom: 16px;
border-bottom: 1px solid var(--color-border-divider)
}
.filter-group h4 {
font-size: 14px;
font-weight: 700;
color: var(--color-text-strong);
margin-bottom: 12px
}
.filter-list li {
display: flex;
align-items: center;
gap: 8px;
padding: 6px 0;
font-size: 13px;
color: var(--color-text)
}
.filter-list input[type="checkbox"] {
accent-color: var(--color-brand)
}
.filter-list label {
cursor: pointer
}
.filter-list .count {
margin-left: auto;
color: var(--color-text-meta);
font-size: 12px
}
.filter-list__item {
display: flex;
align-items: center;
gap: 8px;
padding: 6px 0;
font-size: 13px
}
.filter-list__link {
display: inline-flex;
align-items: center;
gap: 8px;
flex: 1 1 auto;
min-width: 0;
color: var(--color-text);
text-decoration: none;
cursor: pointer
}
.filter-list__link:hover,
.filter-list__link:focus-visible {
color: var(--color-brand);
outline: none
}
.filter-list__link.is-active {
color: var(--color-brand);
font-weight: 600
}
.filter-list__checkbox {
accent-color: var(--color-brand);
flex-shrink: 0;
pointer-events: none
}
.filter-list__label {
display: inline-block;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap
}
.dmsp-main {
min-width: 0
}
.dmsp-main .product-grid {
grid-template-columns: repeat(var(--grid-columns-desktop, 4), minmax(0, 1fr));
gap: 20px
}
.dmsp-toolbar {
display: flex;
align-items: center;
justify-content: space-between;
padding-bottom: 16px;
border-bottom: 1px solid var(--color-border-divider);
margin-bottom: 24px
}
.dmsp-result-count {
font-size: 13px;
color: var(--color-text-muted)
}
.dmsp-sort {
display: flex;
align-items: center;
gap: 16px;
flex-wrap: wrap
}
.dmsp-sort-label {
font-size: 14px;
color: var(--color-text)
}
.dmsp-sort-options {
display: flex;
align-items: center;
gap: 20px;
flex-wrap: wrap
}
.dmsp-sort-item {
position: relative;
display: inline-flex;
align-items: center;
gap: 8px;
cursor: pointer;
font-size: 14px;
color: var(--color-text);
user-select: none
}
.dmsp-sort-item input[type="radio"] {
position: absolute;
opacity: 0;
width: 0;
height: 0;
margin: 0;
pointer-events: none
}
.dmsp-sort-radio {
width: 18px;
height: 18px;
border: 2px solid var(--color-border-divider);
border-radius: 50%;
background: #fff;
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
transition: border-color 0.15s
}
.dmsp-sort-radio::after {
content: "";
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--color-brand);
transform: scale(0);
transition: transform 0.15s
}
.dmsp-sort-item:hover .dmsp-sort-radio {
border-color: var(--color-brand)
}
.dmsp-sort-item input[type="radio"]:checked~.dmsp-sort-radio {
border-color: var(--color-brand)
}
.dmsp-sort-item input[type="radio"]:checked~.dmsp-sort-radio::after {
transform: scale(1)
}
.dmsp-sort-item input[type="radio"]:focus-visible~.dmsp-sort-radio {
outline: 2px solid var(--color-brand);
outline-offset: 2px
}
.ctsp-layout {
margin-top: 15px;
padding-bottom: 15px
}
.ctsp-layout>.container {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: 20px
}
.ctsp-gallery {
display: grid;
grid-template-columns: 80px minmax(0, 1fr);
gap: 16px;
align-items: start
}
@media (min-width: 768px) {
.ctsp-gallery {
position: relative;
align-self: start
}
.ctsp-main-img {
grid-column: 2;
grid-row: 1;
align-self: start
}
.ctsp-thumbs {
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: 80px;
height: auto;
min-height: 0;
max-height: none
}
}
@media (min-width: 1024px) {
.ctsp-gallery,
.product-detail__gallery.ctsp-gallery {
position: sticky;
top: 100px;
align-self: start
}
}
.ctsp-thumbs {
display: flex;
flex-direction: column;
gap: 12px;
align-content: start;
overflow-y: auto;
overflow-x: hidden;
scroll-behavior: smooth;
overflow-anchor: none;
scrollbar-width: none;
-ms-overflow-style: none
}
.ctsp-thumbs::-webkit-scrollbar {
display: none;
width: 0;
height: 0
}
@media (prefers-reduced-motion: reduce) {
.ctsp-thumbs {
scroll-behavior: auto
}
}
.ctsp-thumb {
width: 80px;
height: 80px;
flex: 0 0 80px;
border-radius: 0;
border: 2px solid transparent;
background-size: cover;
background-position: center;
background-color: #f0f0f0;
cursor: pointer;
overflow: hidden
}
.ctsp-thumb.is-active {
border-color: var(--color-brand)
}
.ctsp-thumb--video {
position: relative;
background-color: #1f1f1f
}
.ctsp-thumb-video-icon {
position: absolute;
inset: 0;
display: grid;
place-items: center;
color: #fff;
background: rgba(0, 0, 0, 0.32);
pointer-events: none
}
.ctsp-thumb-video-icon svg {
width: 26px;
height: 26px;
filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.5))
}
.ctsp-main-img {
width: 100%;
height: 600px;
max-height: 600px;
border-radius: 0;
background: #f7f7f7;
background-size: cover;
background-position: center;
position: relative
}
.ctsp-main-img--placeholder {
grid-column: 1 / -1
}
.ctsp-main-img-el {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
display: block
}
.ctsp-main-media {
position: absolute;
inset: 0;
background: #000
}
.ctsp-main-media[hidden] {
display: none
}
.ctsp-main-media-video {
display: block;
width: 100%;
height: 100%;
border: 0;
object-fit: contain
}
.ctsp-main-media-fallback {
position: absolute;
inset: 0;
display: grid;
place-items: center;
margin: 0;
color: #fff;
font-size: 14px;
text-align: center;
padding: 0 24px
}
.ctsp-main-media--postered {
background-size: cover;
background-position: center
}
.ctsp-main-media--bare {
background: #1f1f1f
}
.ctsp-main-media-play {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
display: grid;
place-items: center;
width: 72px;
height: 72px;
padding: 0;
border: 2px solid rgba(255, 255, 255, 0.9);
border-radius: 50%;
color: #fff;
background: rgba(0, 0, 0, 0.45);
cursor: pointer;
transition: transform 0.2s ease, background-color 0.2s ease
}
.ctsp-main-media-play:hover,
.ctsp-main-media-play:focus-visible {
background: rgba(0, 0, 0, 0.65);
transform: translate(-50%, -50%) scale(1.06)
}
.ctsp-main-media-play:focus-visible {
outline: 2px solid #fff;
outline-offset: 3px
}
@media (max-width: 767px) {
.ctsp-main-media-play {
width: 60px;
height: 60px
}
}
.ctsp-main-nav {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 30px;
height: 44px;
border-radius: 4px;
background: rgb(255 255 255 / 49%);
display: grid;
place-items: center
}
.ctsp-main-nav.prev {
left: 10px
}
.ctsp-main-nav.next {
right: 16px
}
.ctsp-main-nav img,
.ctsp-main-nav svg {
width: 20px;
height: 20px
}
.ctsp-info {
padding-top: 8px;
min-width: 0
}
.ctsp-title {
font-family: var(--font-inter);
font-size: 24px;
font-weight: 700;
line-height: 32px;
color: var(--color-text-strong);
margin-bottom: 10px
}
.ctsp-rating-row {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 10px;
font-size: 13px;
color: var(--color-text-muted)
}
.ctsp-rating-row .stars {
display: inline-flex;
gap: 2px
}
.ctsp-rating-row .stars img {
width: 14px;
height: 14px
}
.ctsp-rating-row .ctsp-star {
position: relative;
display: block;
width: 14px;
height: 14px;
flex: 0 0 14px
}
.ctsp-rating-row .ctsp-star--empty {
display: block;
width: 14px;
height: 14px;
max-width: none;
filter: grayscale(1) opacity(0.35)
}
.ctsp-rating-row .ctsp-star--fill {
position: absolute;
inset: 0 auto 0 0;
width: var(--ctsp-star-pct, 0%);
overflow: hidden;
pointer-events: none
}
.ctsp-rating-row .ctsp-star--fill>img {
display: block;
width: 14px;
height: 14px;
max-width: none;
flex: 0 0 14px;
filter: none
}
.ctsp-rating-text {
font-family: var(--font-arimo);
font-size: 13px;
line-height: 18px;
color: var(--color-text-muted);
white-space: nowrap
}
.ctsp-rating-spacer {
flex: 1 1 auto;
min-width: 8px
}
.ctsp-view-count {
display: inline-flex;
align-items: center;
gap: 6px;
flex: 0 0 auto;
white-space: nowrap;
font-family: var(--font-arimo);
font-size: 13px;
line-height: 18px;
color: var(--color-text-muted)
}
.ctsp-view-count-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 16px;
height: 16px;
flex: 0 0 16px;
color: var(--color-text-muted)
}
.ctsp-view-count-icon svg {
display: block;
width: 100%;
height: 100%
}
.ctsp-quantity {
display: flex;
align-items: center;
gap: 12px;
margin: 16px 0
}
.ctsp-quantity-label {
font-family: var(--font-arimo);
font-size: 14px;
line-height: 20px;
font-weight: 700;
color: var(--color-text-strong);
white-space: nowrap
}
.ctsp-quantity-control {
display: inline-flex;
align-items: center;
float: none;
width: auto;
margin: 0;
height: 36px;
border: 1px solid var(--color-border-divider);
border-radius: var(--radius-xs, 4px);
overflow: hidden;
background: #fff
}
.ctsp-quantity-control .qty {
-moz-appearance: textfield;
appearance: textfield;
width: 44px;
min-width: 0;
height: 100%;
margin: 0;
padding: 0;
border: 0;
border-radius: 0;
text-align: center;
font-family: var(--font-arimo);
font-size: 15px;
font-weight: 700;
line-height: 1;
color: var(--color-text-strong);
background: transparent;
box-shadow: none
}
.ctsp-quantity-control .qty:focus {
outline: 2px solid var(--color-brand);
outline-offset: -2px
}
.ctsp-quantity-control .qty:disabled {
color: var(--color-text-muted);
background: #f7f7f7
}
.ctsp-quantity-control .ctsp-qty-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 32px;
height: 100%;
flex: 0 0 32px;
padding: 0;
border: 0;
background: #fff;
color: var(--color-text-strong);
font-family: var(--font-arimo);
font-size: 18px;
font-weight: 400;
line-height: 1;
cursor: pointer;
transition: background 0.15s
}
.ctsp-quantity-control .ctsp-qty-btn:hover:not(:disabled) {
background: var(--color-brand-tint)
}
.ctsp-quantity-control .ctsp-qty-btn:focus-visible {
outline: 2px solid var(--color-brand);
outline-offset: -2px
}
.ctsp-quantity-control .ctsp-qty-btn:disabled {
color: #cccccc;
cursor: not-allowed
}
.ctsp-quantity-control .ctsp-qty-btn--plus {
border-left: 1px solid var(--color-border-divider)
}
.ctsp-quantity-control .ctsp-qty-btn--minus {
border-right: 1px solid var(--color-border-divider)
}
.woocommerce .ctsp-quantity-control,
.woocommerce div.product .ctsp-quantity-control {
display: inline-flex;
visibility: visible
}
.ctsp-variations .single_variation_wrap {
margin-top: 16px
}
.ctsp-variations .woocommerce-variation-price,
.ctsp-variations .woocommerce-variation-availability,
.ctsp-variations .woocommerce-variation-description {
margin-bottom: 12px
}
.ctsp-variations .woocommerce-variation-price {
font-family: var(--font-arimo);
font-size: 22px;
font-weight: 700;
line-height: 30px;
color: var(--color-danger)
}
.ctsp-variations .variations_button {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 12px
}
.ctsp-variations .variations_button .quantity {
display: inline-flex;
align-items: center;
float: none;
width: auto;
margin: 0;
height: 40px;
border: 1px solid var(--color-border-divider);
border-radius: var(--radius-xs, 4px);
overflow: hidden;
background: #fff
}
.ctsp-variations .variations_button .quantity .qty {
-moz-appearance: textfield;
appearance: textfield;
width: 56px;
min-width: 0;
height: 100%;
margin: 0;
padding: 0;
border: 0;
border-radius: 0;
text-align: center;
font-family: var(--font-arimo);
font-size: 15px;
font-weight: 700;
line-height: 1;
color: var(--color-text-strong);
background: transparent;
box-shadow: none
}
.ctsp-variations .variations_button .quantity .qty:focus {
outline: 2px solid var(--color-brand);
outline-offset: -2px
}
.ctsp-variation-qty-label {
font-family: var(--font-arimo);
font-size: 14px;
line-height: 20px;
font-weight: 700;
color: var(--color-text-strong);
white-space: nowrap;
flex: 0 0 auto
}
.ctsp-variations .variations_button .single_add_to_cart_button {
display: none
}
.ctsp-price-row {
display: flex;
align-items: baseline;
gap: 16px;
padding: 10px 0
}
.ctsp-price {
font-family: var(--font-arimo);
font-size: 28px;
font-weight: 700;
line-height: 30px;
color: var(--color-danger)
}
.ctsp-price del,
.ctsp-price ins {
display: none
}
.ctsp-price-original {
font-size: 16px;
line-height: 22px;
color: var(--color-text-meta);
text-decoration: line-through
}
.ctsp-discount {
font-size: 18px;
color: var(--color-danger);
font-weight: 700
}
.ctsp-banner {
margin: 16px 0;
line-height: 0
}
.ctsp-banner-img {
display: block;
width: 100%;
height: auto;
max-width: 100%;
border-radius: 0
}
.ctsp-actions {
display: flex;
gap: 12px;
margin: 24px 0
}
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
height: 56px;
padding: 0 32px;
border-radius: var(--radius-xs);
font-family: var(--font-arimo);
font-size: 16px;
font-weight: 700;
cursor: pointer;
transition: all 0.15s
}
.btn-primary {
background: var(--color-brand);
color: var(--color-text-strong)
}
.btn-primary:hover {
background: #ffc733
}
.btn-secondary {
background: var(--color-brand-dark);
color: #fff
}
.btn-secondary:hover {
background: #fdc033
}
.btn-outline {
border: 1px solid var(--color-brand);
color: var(--color-text-strong);
background: #fff
}
.btn-block {
flex: 1
}
.ctsp-actions .btn {
border: 0;
font-family: var(--font-arimo);
line-height: 1;
text-decoration: none
}
.ctsp-actions .btn-outline {
background: rgb(42 131 233);
color: #ffffff
}
.ctsp-actions .btn .ctsp-cta-icon {
width: 20px;
height: 20px;
flex: 0 0 auto;
display: block;
stroke: currentColor
}
.ctsp-actions .btn .ctsp-cta-icon {
margin-right: 10px
}
.ctsp-actions .btn.is-loading {
opacity: 0.7;
cursor: progress;
pointer-events: none
}
.ctsp-actions .btn.is-busy {
cursor: progress;
pointer-events: none;
opacity: 0.92
}
.ctsp-actions .btn.is-busy::before {
content: "";
width: 15px;
height: 15px;
flex: 0 0 auto;
margin-right: 8px;
border-radius: 50%;
border: 2px solid currentColor;
border-top-color: transparent;
opacity: 0.9;
animation: gtsg-toast-spin 0.7s linear infinite
}
@keyframes gtsg-toast-spin {
to {
transform: rotate(360deg)
}
}
.ctsp-actions .btn[disabled] {
opacity: 0.5;
cursor: not-allowed;
pointer-events: none;
background: var(--color-border-divider);
color: var(--color-text-muted)
}
.ctsp-actions .btn-outline[disabled] {
background: #fff
}
.ctsp-actions .btn.is-busy,
.ctsp-actions .btn.is-busy.btn-primary,
.ctsp-actions .btn.is-busy.btn-outline {
background: var(--color-brand);
color: #fff;
opacity: 0.92
}
.ctsp-actions .btn-outline.is-busy,
.ctsp-actions .btn-outline.is-busy.btn-outline {
background: #fff;
color: var(--color-text-strong)
}
a.added_to_cart,
a.added_to_cart.wc-forward,
.added_to_cart.wc-forward {
display: none !important
}
.ctsp-actions a.added_to_cart {
display: none !important
}
.gtsg-toast {
position: fixed;
top: 112px;
right: 20px;
z-index: 100000;
display: flex;
align-items: center;
gap: 12px;
max-width: 340px;
padding: 14px;
background: #fff;
border: 1px solid var(--color-border-divider);
border-radius: var(--radius-md, 8px);
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
font-family: var(--font-arimo);
color: var(--color-text-strong);
touch-action: pan-y;
transform: translateX(calc(100% + 40px));
transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1);
opacity: 0;
pointer-events: none
}
.gtsg-toast[hidden] {
display: none
}
.gtsg-toast.is-open {
transform: translateX(0);
opacity: 1;
pointer-events: auto;
will-change: transform
}
.gtsg-toast.is-dragging {
transition: none;
will-change: transform;
opacity: 1;
pointer-events: auto
}
.gtsg-toast.is-swiped {
transition: transform 0.22s cubic-bezier(0.4, 0, 1, 1)
}
.gtsg-toast.is-error {
border-color: var(--color-danger)
}
.gtsg-toast.is-error .gtsg-toast__icon {
color: var(--color-danger)
}
.gtsg-toast__inner {
flex: 1 1 auto;
min-width: 0;
position: relative;
padding-right: 26px
}
.gtsg-toast__img {
width: 48px;
height: 48px;
flex: 0 0 auto;
object-fit: cover;
border-radius: var(--radius-sm, 6px);
border: 1px solid var(--color-border-light, #eee);
background: #f6f7f7
}
.gtsg-toast__body {
display: flow-root;
min-width: 0
}
.gtsg-toast__title {
margin: 0;
font-family: var(--font-arimo);
font-size: 14px;
font-weight: 700;
line-height: 20px;
color: var(--color-brand)
}
.gtsg-toast.is-error .gtsg-toast__title {
color: var(--color-danger)
}
.gtsg-toast__name {
margin: 2px 0 0;
font-family: var(--font-arimo);
font-size: 13px;
font-weight: 400;
line-height: 18px;
color: var(--color-text-strong);
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
word-break: break-word
}
.gtsg-toast__price {
margin: 2px 0 0;
font-family: var(--font-arimo);
font-size: 13px;
font-weight: 700;
line-height: 18px;
color: var(--color-text-strong)
}
.gtsg-toast__text {
margin: 4px 0 0;
font-family: var(--font-arimo);
font-size: 12px;
font-weight: 400;
line-height: 16px;
color: var(--color-text-muted);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis
}
.gtsg-toast__cart {
display: inline-block;
margin-top: 8px;
font-family: var(--font-arimo);
font-size: 13px;
font-weight: 700;
line-height: 18px;
color: var(--color-brand);
text-decoration: none;
border-bottom: 1px solid currentColor;
transition: opacity 0.15s
}
.gtsg-toast__cart:hover,
.gtsg-toast__cart:focus-visible {
opacity: 0.7
}
.gtsg-toast__close {
position: absolute;
top: 0;
right: 0;
width: 24px;
height: 24px;
display: flex;
align-items: center;
justify-content: center;
padding: 0;
border: 0;
border-radius: var(--radius-xs, 4px);
background: transparent;
color: var(--color-text-muted);
cursor: pointer;
transition: background 0.15s, color 0.15s
}
.gtsg-toast__close svg {
width: 14px;
height: 14px;
display: block
}
.gtsg-toast__close:hover {
background: #f0f0f0;
color: var(--color-text-strong)
}
.gtsg-toast__close:focus-visible {
outline: 2px solid var(--color-brand);
outline-offset: 1px
}
.gtsg-toast__icon {
float: left;
width: 18px;
height: 18px;
margin: 1px 8px 0 0;
display: block;
color: var(--color-brand)
}
.gtsg-toast__icon svg {
width: 100%;
height: 100%;
display: block
}
@media (max-width: 767px) {
.gtsg-toast {
top: 112px;
left: 12px;
right: 12px;
max-width: none;
padding: 12px;
transform: translateX(calc(100% + 24px))
}
.gtsg-toast__img {
width: 44px;
height: 44px
}
.gtsg-toast__text {
white-space: normal
}
.gtsg-toast__close {
width: 30px;
height: 30px
}
.gtsg-toast__close svg {
width: 16px;
height: 16px
}
}
@media (prefers-reduced-motion: reduce) {
.gtsg-toast {
transition: opacity 0.2s linear
}
.gtsg-toast.is-open {
transform: translateX(0)
}
}
.info-table {
width: 100%;
border: 1px solid var(--color-border-divider);
border-radius: 0;
overflow: hidden;
margin: 32px 0
}
.info-table table {
width: 100%;
border-collapse: collapse
}
.info-table tr {
border-bottom: 1px solid var(--color-border-divider)
}
.info-table tr:last-child {
border-bottom: 0
}
.info-table td {
padding: 14px 20px;
font-family: var(--font-arimo);
font-size: 14px;
line-height: 22px;
vertical-align: top
}
.info-table td.label {
width: 200px;
background: var(--color-bg-table-label);
color: var(--color-text-strong);
font-weight: 700
}
.info-table td.value {
color: var(--color-text)
}
.product-information {
margin-top: 10px;
margin-bottom: 50px
}
.product-information>.container {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: 32px
}
.product-information__description,
.product-information__specifications {
min-width: 0
}
.product-information__description h2,
.product-information__specifications h2 {
font-family: var(--font-inter);
font-size: 22px;
font-weight: 700;
line-height: 30px;
color: var(--color-text-strong);
margin-bottom: 16px
}
.product-information__description p {
font-family: var(--font-arimo);
font-size: 14px;
line-height: 22px;
color: var(--color-text);
margin-bottom: 12px
}
.product-information__description ul {
list-style: disc;
padding-left: 20px;
margin-bottom: 12px
}
.product-information__description ul li {
font-family: var(--font-arimo);
font-size: 14px;
line-height: 22px;
color: var(--color-text);
margin-bottom: 6px
}
.product-spec-table {
width: 100%;
border: 1px solid var(--color-border-divider);
border-collapse: collapse
}
.product-spec-table th,
.product-spec-table td {
padding: 12px 16px;
font-family: var(--font-arimo);
font-size: 14px;
line-height: 22px;
text-align: left;
vertical-align: top;
border-bottom: 1px solid var(--color-border-divider)
}
.product-spec-table tr:last-child th,
.product-spec-table tr:last-child td {
border-bottom: 0
}
.product-spec-table th {
width: 180px;
background: var(--color-bg-table-label);
color: var(--color-text-strong);
font-weight: 700
}
.product-spec-table td {
color: var(--color-text)
}
.product-information__aside {
position: sticky;
top: 100px;
align-self: start;
max-height: calc(100vh - 120px);
overflow-y: auto;
overscroll-behavior: contain;
scrollbar-width: thin
}
.ctsp-feature-video+.product-information__specifications {
margin-top: 24px
}
.ctsp-feature-video {
min-width: 0
}
.ctsp-feature-video__title {
font-family: var(--font-inter);
font-size: 22px;
font-weight: 700;
line-height: 30px;
color: var(--color-text-strong);
margin-bottom: 16px
}
.ctsp-feature-video__frame {
position: relative;
aspect-ratio: 16 / 9;
width: 100%;
overflow: hidden;
border: 1px solid var(--color-border-divider);
border-radius: 4px;
background: #111
}
.ctsp-feature-video__poster {
display: block;
width: 100%;
height: 100%;
object-fit: cover
}
.ctsp-feature-video__play {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
width: 100%;
height: 100%;
padding: 0;
border: 0;
background: rgba(0, 0, 0, 0.32);
color: #fff;
font-family: var(--font-arimo);
font-size: 15px;
font-weight: 700;
cursor: pointer;
transition: background 0.2s ease
}
.ctsp-feature-video__play:hover {
background: rgba(0, 0, 0, 0.46)
}
.ctsp-feature-video__play:focus-visible {
outline: 3px solid var(--color-brand);
outline-offset: -3px
}
.product-information__description a {
color: #3b82f6;
}
.ctsp-feature-video__play-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 56px;
height: 56px;
flex: 0 0 56px;
border-radius: 50%;
background: #ffb000b0;
color: #000
}
.ctsp-feature-video__play-label {
white-space: nowrap
}
.ctsp-feature-video__noscript {
position: absolute;
left: 50%;
bottom: 12px;
transform: translateX(-50%);
padding: 8px 16px;
border-radius: var(--radius-xs);
background: #fff;
color: var(--color-text-strong);
font-family: var(--font-arimo);
font-size: 13px;
text-decoration: underline
}
.ctsp-feature-video__frame--playing .ctsp-feature-video__play,
.ctsp-feature-video__frame--playing .ctsp-feature-video__poster,
.ctsp-feature-video__frame--playing .ctsp-feature-video__noscript {
display: none
}
.ctsp-feature-video__frame--playing {
background: #000
}
.ctsp-feature-video__frame iframe,
.ctsp-feature-video__frame video {
display: block;
width: 100%;
height: 100%;
border: 0
}
.ctsp-feature-video__caption {
margin: 10px 0 0;
font-family: var(--font-arimo);
font-size: 13px;
line-height: 18px;
color: var(--color-text-muted)
}
@media (max-width: 1023px) {
.product-information>.container {
grid-template-columns: minmax(0, 1fr);
gap: 32px
}
.product-spec-table th {
width: 140px
}
.product-information__aside {
position: static;
max-height: none;
overflow: visible
}
}
.product-news {
margin-top: var(--space-43);
padding-bottom: var(--space-127)
}
.product-news__empty {
color: var(--color-text-muted);
font-size: 14px;
margin: 0
}
.dmb-layout {
margin-top: var(--space-43);
padding-bottom: var(--space-127)
}
.dmb-filters {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-bottom: 32px
}
.dmb-filters .chip {
background: #f7f7f7;
color: var(--color-text)
}
.dmb-filters .chip.is-active {
background: var(--color-brand);
color: var(--color-text-strong)
}
.dmb-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 24px
}
.dmb-card {
display: flex;
flex-direction: column;
background: #fff;
border-radius: 0;
overflow: hidden;
height: auto;
transition: transform 0.2s, box-shadow 0.2s
}
.dmb-card:hover {
transform: translateY(-2px);
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08)
}
.dmb-card-img {
width: 100%;
aspect-ratio: 16 / 9;
background-size: cover;
background-position: center;
background-color: #eee
}
.dmb-card-body {
padding: 5px 0px;
flex: 1
}
.dmb-card-date {
font-size: 13px;
color: var(--color-text-meta);
margin-bottom: 12px
}
.dmb-card-title {
font-size: 18px;
font-weight: 700;
line-height: 23px;
color: var(--color-text);
margin-bottom: 12px;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden
}
.dmb-card-excerpt {
font-size: 13px;
line-height: 18px;
color: var(--color-text-muted);
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden
}
.pagination {
display: flex;
justify-content: center;
gap: 8px;
margin-top: 48px
}
.pagination a {
display: grid;
place-items: center;
width: 36px;
height: 36px;
border: 1px solid var(--color-border-divider);
border-radius: var(--radius-xs);
font-size: 14px;
color: var(--color-text);
transition: all 0.15s
}
.pagination a:hover,
.pagination a.is-active {
background: var(--color-brand);
border-color: var(--color-brand);
color: var(--color-text-strong);
font-weight: 700
}
.product-category-description {
padding: var(--space-43) 0 var(--space-127);
background: #fafafa;
border-top: 1px solid var(--color-border-divider)
}
.product-category-description__inner {
max-width: 1000px;
margin-inline: auto;
width: 100%;
box-sizing: border-box;
padding-inline: 16px
}
.product-category-description__content img,
.product-category-description__content figure,
.product-category-description__content iframe,
.product-category-description__content table {
max-width: 100%;
height: auto
}
@media (max-width: 640px) {
.product-category-description__inner {
padding-inline: 12px
}
}
.product-category-description__title {
font-family: var(--font-inter);
font-size: 28px;
font-weight: 700;
color: var(--color-text-strong);
line-height: 36px;
margin: 0 0 16px
}
.product-category-description__content {
font-family: var(--font-arimo);
font-size: 15px;
line-height: 24px;
color: var(--color-text)
}
.product-category-description__content p {
margin: 0 0 16px
}
.product-category-description__content p:last-child {
margin-bottom: 0
}
.product-category-description__content--collapsed {
max-height: 120px;
overflow: hidden;
position: relative
}
@media (max-width: 768px) {
.product-category-description__content--collapsed {
max-height: 96px
}
}
.product-category-description__content--collapsed::after {
content: '';
position: absolute;
inset: auto 0 0 0;
height: 80px;
background: linear-gradient(180deg, rgba(250, 250, 250, 0) 0%, #fafafa 100%);
pointer-events: none
}
.product-category-description__toggle {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
margin: 16px auto 0;
padding: 10px 20px;
background: #fff;
border: 1px solid var(--color-brand);
border-radius: var(--radius-xs);
font-family: var(--font-arimo);
font-size: 14px;
font-weight: 600;
color: var(--color-text-strong);
cursor: pointer;
transition: all 0.15s ease
}
.product-category-description__toggle:hover {
background: var(--color-brand);
color: var(--color-text-strong)
}
.product-category-description__toggle-icon {
display: inline-grid;
place-items: center;
width: 18px;
height: 18px;
font-size: 18px;
line-height: 1;
transition: transform 0.2s ease
}
.product-category-description__toggle[aria-expanded="true"] .product-category-description__toggle-icon {
transform: rotate(45deg)
}
@media (max-width: 1024px) {
.product-category-description__title {
font-size: 24px;
line-height: 32px
}
}
@media (max-width: 768px) {
.product-category-description {
padding: 32px 0 64px
}
.product-category-description__title {
font-size: 22px;
line-height: 30px
}
.product-category-description__content {
font-size: 14px;
line-height: 22px
}
}
.home-content-section {
padding: var(--space-64) 0;
background: #fafafa;
padding: 30px;
}
.home-content-section__inner {
max-width: 1200px;
margin-inline: auto
}
@media (min-width: 1024px) {
.home-content-section__inner {
max-width: 1000px;
margin-inline: auto
}
}
.home-content-section__title {
font-family: var(--font-inter);
font-size: 28px;
font-weight: 700;
color: var(--color-text-strong);
line-height: 36px;
margin: 0 0 16px
}
.home-content-section__content {
font-family: var(--font-arimo);
font-size: 15px;
line-height: 24px;
color: var(--color-text);
overflow-wrap: anywhere;
word-break: break-word
}
.home-content-section__content>*:first-child {
margin-top: 0
}
.home-content-section__content>*:last-child {
margin-bottom: 0
}
.home-content-section__content p,
.home-content-section__content ul,
.home-content-section__content ol,
.home-content-section__content blockquote,
.home-content-section__content figure,
.home-content-section__content h2,
.home-content-section__content h3,
.home-content-section__content h4,
.home-content-section__content table {
margin: 0 0 16px
}
.home-content-section__content h2 {
font-family: var(--font-inter);
font-size: 22px;
font-weight: 700;
line-height: 30px;
color: var(--color-text-strong)
}
.home-content-section__content h3 {
font-family: var(--font-inter);
font-size: 18px;
font-weight: 700;
line-height: 26px;
color: var(--color-text-strong)
}
.home-content-section__content h4 {
font-family: var(--font-inter);
font-size: 16px;
font-weight: 700;
line-height: 24px;
color: var(--color-text-strong)
}
.home-content-section__content ul,
.home-content-section__content ol {
padding-left: 24px
}
.home-content-section__content li {
margin: 0 0 6px
}
.home-content-section__content a {
color: var(--color-brand);
text-decoration: underline;
text-underline-offset: 2px
}
.home-content-section__content a:hover {
color: var(--color-text-strong)
}
.home-content-section__content img,
.home-content-section__content figure img {
max-width: 100%;
height: auto;
border-radius: var(--radius-xs);
display: block;
margin-inline: auto
}
.home-content-section__content figure {
margin-block: 16px
}
.home-content-section__content figcaption {
font-size: 13px;
line-height: 20px;
color: var(--color-text-muted);
text-align: center;
margin-top: 8px
}
.home-content-section__content blockquote {
border-left: 3px solid var(--color-brand);
padding-left: 14px;
color: var(--color-text-muted);
font-style: italic
}
.home-content-section__content table {
width: 100%;
border-collapse: collapse;
font-size: 14px
}
.home-content-section__content th,
.home-content-section__content td {
border: 1px solid var(--color-border-divider);
padding: 8px 12px;
text-align: left
}
.home-content-section__content strong {
font-weight: 700
}
.home-content-section__content em {
font-style: italic
}
.home-content-section {
--home-content-collapse-h: 800px
}
.home-content-section__content--collapsed {
max-height: var(--home-content-collapse-h);
overflow: hidden;
position: relative
}
.home-content-section__content--collapsed::after {
content: '';
position: absolute;
inset: auto 0 0 0;
height: 120px;
background: linear-gradient(180deg, rgba(250, 250, 250, 0) 0%, #fafafa 100%);
pointer-events: none
}
.home-content-section__toggle {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
margin: 16px auto 0;
padding: 10px 20px;
background: #fff;
border: 1px solid var(--color-brand);
border-radius: var(--radius-xs);
font-family: var(--font-arimo);
font-size: 14px;
font-weight: 600;
color: var(--color-text-strong);
cursor: pointer;
transition: background-color 0.15s ease, color 0.15s ease
}
.home-content-section__toggle:hover,
.home-content-section__toggle:focus-visible {
background: var(--color-brand);
color: var(--color-text-strong);
outline: none
}
.home-content-section__toggle-icon {
display: inline-grid;
place-items: center;
width: 18px;
height: 18px;
font-size: 18px;
line-height: 1;
transition: transform 0.2s ease
}
.home-content-section__toggle[aria-expanded="true"] .home-content-section__toggle-icon {
transform: rotate(45deg)
}
.home-content-section__content .alignleft,
.home-content-section__content .alignright {
max-width: 50%
}
.home-content-section__content .aligncenter {
margin-inline: auto
}
.home-content-section__content .wp-caption {
max-width: 100%
}
@media (max-width: 1024px) {
.home-content-section__title {
font-size: 24px;
line-height: 32px
}
}
@media (max-width: 768px) {
.home-content-section {
padding: 32px 0 48px
}
.home-content-section__title {
font-size: 22px;
line-height: 30px
}
.home-content-section__content {
font-size: 14px;
line-height: 22px
}
.home-content-section__content .alignleft,
.home-content-section__content .alignright {
float: none;
max-width: 100%;
margin-inline: auto
}
}
@media (prefers-reduced-motion: reduce) {
.home-content-section__toggle,
.home-content-section__toggle-icon {
transition: none
}
}
.ctb-layout {
margin-top: var(--space-43);
padding-bottom: var(--space-127)
}
.ctb-layout>.container {
display: grid;
grid-template-columns: minmax(0, 1fr) 320px;
gap: 48px
}
.ctb-main {
max-width: 880px;
min-width: 0
}
.ctb-meta {
display: flex;
align-items: center;
gap: 16px;
margin-bottom: 16px;
font-size: 13px;
color: var(--color-text-muted)
}
.ctb-meta .chip {
background: var(--color-brand);
color: var(--color-text-strong);
font-weight: 700;
height: 28px;
padding: 0 14px;
font-size: 12px
}
.ctb-title {
font-family: var(--font-inter);
font-size: 36px;
font-weight: 700;
line-height: 46px;
color: var(--color-text-strong);
margin-bottom: 16px
}
.ctb-featured-img {
width: 100%;
height: 460px;
border-radius: var(--radius-xs);
background-size: cover;
background-position: center;
margin: 24px 0
}
.ctb-content {
font-family: var(--font-arimo);
font-size: 16px;
line-height: 28px;
color: var(--color-text)
}
.ctb-content h2 {
font-family: var(--font-inter);
font-size: 28px;
font-weight: 700;
line-height: 36px;
color: var(--color-text-strong);
margin: 32px 0 16px
}
.ctb-content h3 {
font-family: var(--font-inter);
font-size: 22px;
font-weight: 700;
line-height: 30px;
color: var(--color-text-strong);
margin: 24px 0 12px
}
.ctb-content p {
margin-bottom: 20px
}
.ctb-content img {
width: 100%;
border-radius: var(--radius-xs);
margin: 24px 0
}
.ctb-content ul,
.ctb-content ol {
margin: 16px 0 24px 24px;
list-style: disc
}
.ctb-content li {
margin-bottom: 8px
}
.ctb-tags {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 32px;
padding-top: 24px;
border-top: 1px solid var(--color-border-divider)
}
.ctb-tag {
display: inline-flex;
align-items: center;
height: 32px;
padding: 0 14px;
border-radius: var(--radius-pill);
background: #f7f7f7;
font-size: 13px;
color: var(--color-text)
}
.ctb-sidebar {
font-family: var(--font-arimo)
}
.ctb-sidebar-block {
margin-bottom: 32px;
padding-bottom: 24px;
border-bottom: 1px solid var(--color-border-divider)
}
.ctb-sidebar-block:last-child {
border-bottom: 0
}
.ctb-sidebar-title {
font-size: 16px;
font-weight: 700;
color: var(--color-text-strong);
margin-bottom: 16px;
padding-bottom: 12px;
border-bottom: 2px solid var(--color-brand)
}
.ctb-related {
display: flex;
flex-direction: column;
gap: 16px
}
.ctb-related-item {
display: flex;
gap: 12px
}
.ctb-related-img {
width: 80px;
height: 60px;
border-radius: var(--radius-xs);
background-size: cover;
background-position: center;
flex-shrink: 0
}
.ctb-related-info {
flex: 1;
min-width: 0
}
.ctb-related-title {
font-size: 13px;
font-weight: 500;
line-height: 18px;
color: var(--color-text);
margin-bottom: 4px;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden
}
.ctb-related-date {
font-size: 12px;
color: var(--color-text-meta)
}
@media (max-width: 1439px) {
.product-grid {
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 12px
}
.hero-inner {
grid-template-columns: 1fr 340px
}
.hero-left {
height: 370px
}
.hero-side {
height: 180px
}
.video-layout {
grid-template-columns: 1fr 380px
}
.blog-row,
.dmb-grid {
grid-template-columns: repeat(4, 1fr);
gap: 20px
}
.xuong-grid {
grid-template-columns: repeat(2, 1fr)
}
.footer-grid {
grid-template-columns: 260px 1fr 1fr 1fr;
gap: 32px
}
}
@media (max-width: 1279px) {
.nav-list {
gap: 24px
}
.nav-link {
font-size: 14px
}
.product-grid {
grid-template-columns: repeat(3, 1fr)
}
.hero-inner {
grid-template-columns: 1fr
}
.hero-right {
grid-template-columns: 1fr 1fr;
padding-left: 0;
padding-top: 16px
}
.video-layout {
grid-template-columns: 1fr
}
.blog-row,
.dmb-grid {
grid-template-columns: repeat(2, 1fr)
}
.xuong-grid {
grid-template-columns: 1fr 1fr
}
.footer-grid {
grid-template-columns: 1fr 1fr;
gap: 32px
}
.dmsp-layout>.container {
grid-template-columns: 240px 1fr
}
.dmsp-main .product-grid {
grid-template-columns: repeat(var(--grid-columns-desktop, 4), 1fr)
}
.ctsp-layout>.container {
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr)
}
.ctb-layout>.container {
grid-template-columns: 1fr 280px
}
}
@media (max-width: 1023px) {
.main-header-inner {
display: grid;
grid-template-columns: 1fr auto;
grid-template-rows: auto auto;
grid-template-areas: "logo actions" "search search";
column-gap: 16px;
row-gap: 12px;
align-items: center
}
.logo {
grid-area: logo;
width: auto;
max-width: 240px;
height: 48px;
align-self: center;
justify-self: start;
flex: 1 1 auto;
min-width: 0
}
.header-actions {
grid-area: actions;
justify-self: end;
align-self: center;
display: flex;
align-items: center;
gap: 8px;
flex: 0 0 auto
}
.mobile-search-row {
grid-area: search;
grid-column: 1 / -1;
display: flex;
align-items: center;
gap: 12px;
width: 100%
}
.mobile-menu-toggle {
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 35px;
width: 35px;
height: 35px;
margin-left: 0
}
.search-form {
flex: 1 1 auto;
min-width: 0;
max-width: 100%;
height: 48px;
order: 0
}
.header-action-label {
font-size: 11px
}
.header-action-value {
font-size: 10px
}
.header-action-text {
display: none
}
.main-nav-inner {
overflow-x: auto
}
.nav-list {
flex-wrap: nowrap;
gap: 16px
}
.product-grid {
grid-template-columns: repeat(2, 1fr)
}
.blog-row,
.dmb-grid {
grid-template-columns: repeat(2, 1fr)
}
.footer-grid {
grid-template-columns: 1fr 1fr;
gap: 24px
}
.dmsp-layout>.container {
grid-template-columns: 1fr
}
.dmsp-main .product-grid {
grid-template-columns: repeat(var(--grid-columns-mobile, 2), 1fr)
}
.dmsp-sidebar {
display: none
}
.ctsp-layout>.container {
grid-template-columns: minmax(0, 1fr)
}
.ctb-layout>.container {
grid-template-columns: 1fr
}
.xuong-grid {
grid-template-columns: 1fr
}
.xuong-card {
height: 320px
}
.section-title {
font-size: 28px;
line-height: 32px
}
.ctsp-main-img {
height: auto;
max-height: none;
aspect-ratio: 1 / 1
}
.product-name {
font-size: 18px;
line-height: 22px
}
}
@media (max-width: 767px) {
body {
font-size: 13px
}
.topbar {
height: 40px;
font-size: 11px
}
.topbar-inner {
gap: 12px
}
.topbar-text {
display: none
}
.main-header {
padding: 8px 0
}
.main-header-inner {
gap: 8px
}
.header-action {
padding: 0 6px
}
.header-action-icon {
width: 32px;
height: 32px
}
.header-action-icon.location {
width: 24px;
height: 26px
}
.header-action-icon.cart {
width: 32px;
height: 32px
}
.product-grid,
.blog-row,
.dmb-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px
}
.hero-right {
grid-template-columns: 1fr;
gap: 12px
}
.xuong-card {
height: 220px
}
.footer-grid {
grid-template-columns: 1fr;
gap: 24px
}
.video-play {
width: 56px;
height: 56px
}
.video-play img,
.video-play svg {
width: 18px;
height: 18px
}
.video-tab {
flex: 0 0 auto;
height: auto;
min-height: 72px;
padding: 10px 12px;
gap: 10px
}
.video-tab-thumb {
width: 96px;
height: 54px
}
.video-tab-thumb .play {
width: 26px;
height: 26px
}
.video-main-caption {
left: 16px;
right: 16px;
bottom: 16px
}
.section-title {
font-size: 22px;
line-height: 28px
}
.section-header {
margin-bottom: 16px
}
.page-heading h1 {
font-size: 24px;
line-height: 32px
}
.ctsp-title {
font-size: 25px;
line-height: 35px
}
.ctsp-main-img {
height: auto;
max-height: none;
aspect-ratio: 1 / 1
}
.ctsp-main-img--placeholder {
aspect-ratio: 1 / 1
}
.ctsp-gallery {
display: flex;
flex-direction: column;
gap: 12px;
align-items: stretch
}
.ctsp-thumbs {
flex-direction: row;
order: 2;
align-content: normal;
align-items: center;
position: static;
height: auto;
min-height: 0;
max-height: none;
overflow-x: auto;
overflow-y: hidden;
padding: 4px 2px;
-webkit-overflow-scrolling: touch;
scroll-behavior: smooth;
scrollbar-width: none;
-ms-overflow-style: none;
overflow-anchor: none
}
.ctsp-thumbs::-webkit-scrollbar {
display: none;
width: 0;
height: 0
}
.ctsp-thumb {
width: 64px;
height: 64px;
flex: 0 0 64px
}
.ctsp-main-img {
order: 1
}
.ctb-title {
font-size: 24px;
line-height: 32px
}
.ctb-featured-img {
height: 240px
}
.ctsp-actions {
flex-direction: row;
gap: 8px
}
.ctsp-actions .btn {
flex: 1 1 0;
min-width: 0;
min-height: 44px;
height: 44px;
padding: 0 12px;
font-size: 14px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis
}
.ctsp-actions .btn:first-child {
flex-grow: 1
}
.ctsp-actions .btn:last-child {
flex-grow: 2
}
.ctsp-actions .btn .ctsp-cta-icon {
width: 16px;
height: 16px;
margin-right: 6px
}
.ctsp-actions .btn.is-busy {
font-size: 13px
}
.ctsp-actions .btn.is-busy::before {
width: 14px;
height: 14px;
margin-right: 5px
}
The weights are 2.35 / 1. Measured at 320px against a 265px split (273px container − 8px gap),
13px label+19px spinner,
with a 129px content box on the busy button: busy button ....... 186px button → 162px box,
needs 117px OK (45px spare) sibling ........... 79px button → 55px box The sibling's own label (130px + 22px icon = 152px) cannot fit 55px,so it ellipsises to "Thêm và o g…". That is the one compromise this feature makes,and it is the right one: the busy state lasts ~400ms and the label that matters during it is the WAIT message,whereas the sibling' s full text returns the instant the request resolves. It is also strictly better than the alternative,
which showed the wait message itself truncated to "Bạn c…" . */ .ctsp-actions .btn.is-busy:first-child {
flex-grow: 2.35
}
.ctsp-actions .btn.is-busy:first-child+.btn {
flex-grow: 1
}
.ctsp-actions .btn:last-child.is-busy {
flex-grow: 2.35
}
.ctsp-actions .btn:last-child.is-busy+.btn,
.ctsp-actions .btn:last-child.is-busy~.btn {
flex-grow: 1
}
@media (max-width: 360px) {
.ctsp-actions .btn.is-busy {
font-size: 12px
}
.ctsp-actions .btn.is-busy::before {
margin-right: 4px
}
}
.info-table td.label {
width: 120px
}
.ctsp-rating-row {
flex-wrap: wrap;
row-gap: 6px
}
.ctsp-rating-spacer {
display: none
}
.ctsp-quantity {
gap: 10px;
margin: 14px 0
}
.woocommerce div.product .ctsp-quantity .ctsp-quantity-control .qty {
width: 40px
}
.woocommerce div.product .ctsp-quantity .ctsp-quantity-control .ctsp-qty-btn {
width: 30px;
flex-basis: 30px
}
}
.hide {
display: none !important
}
.text-center {
text-align: center
}
.mb-24 {
margin-bottom: 24px
}
.mt-24 {
margin-top: 24px
}
.about-intro {
padding: var(--space-64) 0
}
.about-intro-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 48px;
align-items: center
}
.about-lead {
font-family: var(--font-inter);
font-size: 18px;
line-height: 28px;
color: var(--color-text-strong);
margin-bottom: 16px;
font-weight: 500
}
.about-intro-text p {
font-family: var(--font-arial);
font-size: 15px;
line-height: 24px;
color: var(--color-text);
margin-bottom: 14px
}
.about-intro-image {
width: 100%;
aspect-ratio: 4 / 3;
background-size: cover;
background-position: center;
background-color: #eee;
border-radius: var(--radius-md)
}
.about-stats {
padding: 48px 0;
background: #fafafa;
border-top: 1px solid var(--color-border-divider);
border-bottom: 1px solid var(--color-border-divider)
}
.about-stats-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 32px;
text-align: center
}
.about-stat-number {
font-family: var(--font-arimo);
font-size: 36px;
font-weight: 700;
color: var(--color-brand);
letter-spacing: -0.5px;
margin-bottom: 4px
}
.about-stat-label {
font-size: 13px;
color: var(--color-text-meta)
}
.about-values {
padding: var(--space-64) 0
}
.about-values-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 32px;
margin-top: 32px
}
.about-value {
padding: 28px;
border: 1px solid var(--color-border-divider);
border-radius: var(--radius-md)
}
.about-value h3 {
font-family: var(--font-arimo);
font-size: 18px;
font-weight: 600;
color: var(--color-text-strong);
margin-bottom: 8px
}
.about-value p {
font-size: 14px;
line-height: 22px;
color: var(--color-text-meta);
margin: 0
}
.about-process {
padding: var(--space-64) 0;
background: #fafafa
}
.about-process-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 24px;
margin-top: 32px
}
.about-process-step {
padding: 24px 0 0;
border-top: 2px solid var(--color-brand)
}
.about-process-num {
font-family: var(--font-arimo);
font-size: 14px;
font-weight: 700;
color: var(--color-brand);
display: block;
margin-bottom: 12px
}
.about-process-step h3 {
font-family: var(--font-arimo);
font-size: 16px;
font-weight: 600;
color: var(--color-text-strong);
margin-bottom: 6px
}
.about-process-step p {
font-size: 13px;
line-height: 20px;
color: var(--color-text-meta);
margin: 0
}
.about-cta {
padding: var(--space-64) 0
}
.about-cta-inner {
padding: 48px;
background: var(--color-brand);
color: #fff;
border-radius: var(--radius-md);
text-align: center
}
.about-cta-inner h2 {
font-family: var(--font-inter);
font-size: 28px;
font-weight: 700;
color: #fff;
margin-bottom: 12px
}
.about-cta-inner p {
font-size: 15px;
color: rgba(255, 255, 255, 0.9);
margin-bottom: 24px;
max-width: 600px;
margin-left: auto;
margin-right: auto
}
.about-cta-actions {
display: flex;
gap: 12px;
justify-content: center
}
.about-cta-actions .btn-outline {
border-color: rgba(255, 255, 255, 0.5);
color: #fff
}
.about-cta-actions .btn-outline:hover {
background: rgba(255, 255, 255, 0.1);
border-color: #fff
}
@media (max-width: 1023px) {
.about-intro-grid,
.about-values-grid,
.about-process-grid {
grid-template-columns: repeat(2, 1fr)
}
.about-stats-grid {
grid-template-columns: repeat(2, 1fr)
}
}
@media (max-width: 767px) {
.about-intro-grid,
.about-values-grid,
.about-process-grid,
.about-stats-grid {
grid-template-columns: 1fr
}
.about-cta-inner {
padding: 32px 24px
}
.about-cta-inner h2 {
font-size: 22px
}
}
.cart-layout {
padding: var(--space-48) 0 var(--space-64)
}
.cart-layout>.container {
display: grid;
grid-template-columns: minmax(0, 1fr) 380px;
gap: 32px;
align-items: start
}
.cart-section-title {
font-family: var(--font-inter);
font-size: 24px;
font-weight: 700;
color: var(--color-text-strong);
margin-bottom: 24px
}
.cart-list {
border: 1px solid var(--color-border-divider);
border-radius: var(--radius-md);
overflow: hidden;
background: #fff
}
.cart-item {
display: grid;
grid-template-columns: 96px minmax(120px, 1fr) minmax(0, 110px) minmax(0, 92px) minmax(0, 100px) 40px;
gap: 16px;
padding: 16px;
align-items: center;
border-bottom: 1px solid var(--color-border-divider)
}
.cart-item:last-child {
border-bottom: 0
}
.cart-item-remove-wrap {
display: flex;
justify-content: flex-end;
align-items: center
}
.cart-item-image {
width: 96px;
height: 96px;
aspect-ratio: 1 / 1;
background-size: cover;
background-position: center;
background-color: #f0f0f0;
border-radius: var(--radius-xs)
}
.cart-item-info {
min-width: 0
}
.cart-item-name {
font-family: var(--font-arimo);
font-size: 15px;
font-weight: 500;
color: var(--color-text-strong);
margin-bottom: 4px;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden
}
.cart-item-variant {
font-size: 13px;
color: var(--color-text-meta)
}
.cart-item-price,
.cart-item-subtotal {
font-family: var(--font-arimo);
font-size: 15px;
font-weight: 600;
color: var(--color-danger)
}
.cart-item-price__label,
.cart-item-subtotal__label {
display: block;
font-family: var(--font-arimo);
font-size: 12px;
font-weight: 400;
color: var(--color-text-meta);
margin-bottom: 2px
}
.cart-item-price-old {
display: block;
font-size: 12px;
font-weight: 400;
color: var(--color-text-meta);
text-decoration: line-through;
margin-bottom: 2px
}
.cart-qty {
display: inline-flex;
align-items: center;
border: 1px solid var(--color-border-divider);
border-radius: var(--radius-xs);
overflow: hidden
}
.cart-qty button {
width: 32px;
height: 32px;
background: #fff;
border: 0;
font-size: 16px;
color: var(--color-text);
cursor: pointer;
flex: 0 0 auto
}
.cart-qty button:disabled {
color: var(--color-text-meta);
opacity: 0.45;
cursor: not-allowed
}
.cart-qty button:hover:not(:disabled) {
background: #f5f5f5
}
.cart-qty input {
-moz-appearance: textfield;
appearance: textfield;
width: 40px;
min-width: 0;
height: 32px;
border: 0;
border-left: 1px solid var(--color-border-divider);
border-right: 1px solid var(--color-border-divider);
text-align: center;
font-family: var(--font-arimo);
font-size: 14px;
color: var(--color-text);
background: #fff
}
.cart-qty input::-webkit-outer-spin-button,
.cart-qty input::-webkit-inner-spin-button {
-webkit-appearance: none;
appearance: none;
margin: 0
}
.cart-qty input[type="number"] {
-moz-appearance: textfield;
appearance: textfield
}
.cart-item-remove {
min-width: 40px;
min-height: 40px;
width: auto;
padding: 0 14px;
display: inline-flex;
align-items: center;
justify-content: center;
background: transparent;
border: 1px solid var(--color-border-divider);
color: var(--color-text-meta);
font-size: 14px;
font-weight: 500;
line-height: 1;
text-decoration: none;
white-space: nowrap;
cursor: pointer;
border-radius: var(--radius-xs)
}
.cart-item-remove:hover {
background: #fff0f0;
border-color: var(--color-danger);
color: var(--color-danger)
}
.cart-item-remove:focus-visible {
outline: 2px solid var(--color-brand);
outline-offset: 2px
}
.cart-actions {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 16px
}
.cart-continue {
display: inline-flex;
align-items: center;
gap: 8px;
color: var(--color-link);
font-size: 14px;
text-decoration: none
}
.cart-summary {
border: 1px solid var(--color-border-divider);
border-radius: var(--radius-md);
padding: 24px;
background: #fff;
position: sticky;
top: 16px
}
.cart-summary h2 {
font-family: var(--font-inter);
font-size: 18px;
font-weight: 600;
color: var(--color-text-strong);
margin-bottom: 16px;
padding-bottom: 16px;
border-bottom: 1px solid var(--color-border-divider)
}
.cart-summary-row {
display: flex;
justify-content: space-between;
font-size: 14px;
color: var(--color-text);
padding: 8px 0
}
.cart-summary-row.discount {
color: var(--color-success, #2e7d32)
}
.cart-summary-total {
display: flex;
justify-content: space-between;
align-items: baseline;
padding: 16px 0;
margin-top: 8px;
border-top: 1px solid var(--color-border-divider);
font-family: var(--font-arimo);
font-size: 16px;
font-weight: 600;
color: var(--color-text-strong)
}
.cart-summary-total-amount {
font-size: 22px;
color: var(--color-danger)
}
.cart-summary-note {
font-size: 12px;
color: var(--color-text-meta);
margin-top: 12px;
line-height: 18px
}
.cart-summary .btn {
width: 100%;
margin-top: 16px
}
.woocommerce-cart-page .cart-summary.cart-collaterals .cart_totals {
float: none;
width: 100%;
margin: 0;
text-align: left
}
.cart-summary>h2 {
font-family: var(--font-inter);
font-size: 18px;
font-weight: 600;
color: var(--color-text-strong);
margin-bottom: 16px
}
.cart-summary .cart_totals h2 {
display: none
}
.cart-summary .shop_table {
width: 100%;
max-width: 100%;
table-layout: auto;
border: 0;
margin: 0;
border-collapse: collapse
}
.cart-summary .shop_table th,
.cart-summary .shop_table td {
background: transparent;
border: 0;
padding: 8px 0;
font-family: var(--font-inter);
font-size: 14px;
font-weight: 400;
color: var(--color-text);
text-align: left;
vertical-align: top
}
.cart-summary .shop_table th {
color: var(--color-text-meta);
font-weight: 400
}
.cart-summary .shop_table td {
text-align: right
}
.cart-summary .cart-subtotal th,
.cart-summary .cart-subtotal td {
padding-bottom: 12px
}
.cart-summary .order-total th,
.cart-summary .order-total td {
padding-top: 16px;
border-top: 1px solid var(--color-border-divider);
font-family: var(--font-arimo);
font-size: 16px;
font-weight: 600;
color: var(--color-text-strong)
}
.cart-summary .order-total td .amount {
color: var(--color-danger);
font-size: 22px;
font-weight: 600
}
.cart-summary .woocommerce-shipping-totals,
.cart-summary .woocommerce-shipping-costs {
width: 100%;
border: 0;
margin: 0
}
.cart-summary .woocommerce-shipping-totals th,
.cart-summary .woocommerce-shipping-totals td {
background: transparent;
border: 0;
padding: 8px 0;
font-family: var(--font-inter);
font-size: 14px;
font-weight: 400;
text-align: left
}
.cart-summary .woocommerce-shipping-totals td {
text-align: right
}
.cart-summary .wc-proceed-to-checkout {
padding: 0;
margin: 0
}
.cart-summary .checkout-button {
width: 100%;
display: block;
text-align: center
}
.cart-summary .checkout-button .button,
.cart-summary .checkout-button a.checkout-button {
width: 100%;
display: block;
text-align: center;
font-family: var(--font-inter);
font-weight: 600
}
.cart-summary .cart-empty,
.cart-summary .return-to-shop {
border: 0;
padding: 0
}
.cart-empty {
text-align: center;
padding: 64px 24px;
border: 1px dashed var(--color-border-divider);
border-radius: var(--radius-md)
}
.cart-empty h3 {
font-family: var(--font-inter);
font-size: 20px;
color: var(--color-text-strong);
margin-bottom: 8px
}
.cart-empty p {
color: var(--color-text-meta);
margin-bottom: 24px
}
@media (max-width: 1023px) {
.cart-layout>.container {
grid-template-columns: 1fr
}
}
@media (min-width: 768px) and (max-width: 1023px) {
.cart-item {
grid-template-columns: 96px minmax(0, 1fr) 40px;
grid-template-areas: "img info remove" "img variant variant" "price price price" "qty qty subtotal";
gap: 12px 16px
}
.cart-item-image {
grid-area: img;
width: 96px;
height: 96px
}
.cart-item-info {
grid-area: info
}
.cart-item-remove,
.cart-item-remove-wrap {
grid-area: remove;
justify-self: end
}
.cart-item-variant {
grid-area: variant
}
.cart-item .cart-item-price {
grid-area: price;
justify-self: start
}
.cart-item .cart-qty {
grid-area: qty;
justify-self: start
}
.cart-item-subtotal {
grid-area: subtotal;
justify-self: end
}
}
.auth-page {
padding: var(--space-64) 0
}
.auth-card {
max-width: 440px;
margin: 0 auto;
padding: 40px;
border: 1px solid var(--color-border-divider);
border-radius: var(--radius-md);
background: #fff
}
.auth-logo {
display: flex;
justify-content: center;
margin-bottom: 24px
}
.auth-logo img {
height: 48px;
width: auto
}
.auth-title {
font-family: var(--font-inter);
font-size: 24px;
font-weight: 700;
color: var(--color-text-strong);
text-align: center;
margin-bottom: 8px
}
.auth-subtitle {
text-align: center;
color: var(--color-text-meta);
font-size: 14px;
margin-bottom: 28px
}
.form-field {
margin-bottom: 16px
}
.form-field label {
display: block;
font-size: 13px;
font-weight: 500;
color: var(--color-text);
margin-bottom: 6px
}
.form-field input {
width: 100%;
height: 44px;
padding: 0 14px;
border: 1px solid var(--color-border-divider);
border-radius: var(--radius-xs);
font-family: var(--font-arial);
font-size: 14px;
color: var(--color-text);
background: #fff;
transition: border-color 0.15s
}
.form-field input:focus {
outline: 0;
border-color: var(--color-brand)
}
.form-field textarea {
width: 100%;
min-height: 120px;
padding: 12px 14px;
border: 1px solid var(--color-border-divider);
border-radius: var(--radius-xs);
font-family: var(--font-arial);
font-size: 14px;
color: var(--color-text);
background: #fff;
resize: vertical;
transition: border-color 0.15s
}
.form-field textarea:focus {
outline: 0;
border-color: var(--color-brand)
}
.form-row {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
font-size: 13px
}
.form-row label {
display: inline-flex;
align-items: center;
gap: 6px;
color: var(--color-text);
cursor: pointer
}
.form-row input[type="checkbox"] {
width: 16px;
height: 16px;
accent-color: var(--color-brand)
}
.form-row a {
color: var(--color-link);
text-decoration: none
}
.auth-btn {
width: 100%;
height: 48px
}
.auth-footer {
text-align: center;
font-size: 14px;
color: var(--color-text-meta);
margin-top: 20px
}
.auth-footer a {
color: var(--color-link);
font-weight: 500;
text-decoration: none
}
.account-page {
padding: var(--space-48) 0 var(--space-64)
}
.account-layout {
display: grid;
grid-template-columns: 280px 1fr;
gap: 32px;
align-items: start
}
.account-layout:has(> .account-login-register:only-child) {
grid-template-columns: minmax(0, 440px);
justify-content: center
}
.account-layout:has(> .account-login-register:only-child) .account-login-register {
max-width: 440px;
width: 100%;
margin: 0 auto
}
.account-nav {
border: 1px solid var(--color-border-divider);
border-radius: var(--radius-md);
padding: 20px;
background: #fff
}
.account-nav__title {
font-family: var(--font-inter);
font-size: 18px;
font-weight: 700;
color: var(--color-text-strong);
margin: 0 0 16px;
padding-bottom: 12px;
border-bottom: 1px solid var(--color-border-divider)
}
.account-nav .woocommerce-MyAccount-navigation {
width: 100%
}
.account-nav .woocommerce-MyAccount-navigation ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 4px
}
.account-nav .woocommerce-MyAccount-navigation li a {
display: block;
padding: 10px 12px;
border-radius: var(--radius-xs);
font-size: 14px;
color: var(--color-text);
text-decoration: none;
transition: background-color 0.15s, color 0.15s
}
.account-nav .woocommerce-MyAccount-navigation li a:hover {
background: rgba(0, 0, 0, 0.04);
color: var(--color-text-strong)
}
.account-nav .woocommerce-MyAccount-navigation li.is-active a {
background: var(--color-brand);
color: #fff;
font-weight: 500
}
.account-content {
min-width: 0;
background: #fff;
border: 1px solid var(--color-border-divider);
border-radius: var(--radius-md);
padding: 28px
}
.account-content h2,
.account-content h3 {
font-family: var(--font-inter);
color: var(--color-text-strong);
margin-top: 0
}
.account-content .woocommerce-table {
font-size: 14px
}
.account-content .woocommerce-EditAccountForm fieldset {
margin-top: 20px;
padding: 16px;
border: 1px solid var(--color-border-divider);
border-radius: var(--radius-xs)
}
.account-content .woocommerce-EditAccountForm legend {
font-family: var(--font-inter);
font-weight: 600;
padding: 0 8px
}
.account-content .button {
background: var(--color-brand);
color: #fff;
border: 0;
border-radius: var(--radius-xs);
padding: 10px 20px;
font-family: var(--font-inter);
font-weight: 500;
cursor: pointer;
transition: opacity 0.15s
}
.account-content .button:hover {
opacity: 0.9
}
.account-content .woocommerce-Address {
border: 1px solid var(--color-border-divider);
border-radius: var(--radius-xs);
padding: 16px;
margin-bottom: 16px
}
.account-content .woocommerce-Address h3 {
font-size: 16px
}
.account-content .woocommerce-Address .edit,
.account-content .woocommerce-Address .button {
display: inline-block;
margin-top: 8px;
font-size: 13px;
padding: 6px 14px;
background: transparent;
color: var(--color-brand);
border: 1px solid var(--color-brand)
}
.account-content .woocommerce-Address .edit:hover,
.account-content .woocommerce-Address .button:hover {
background: var(--color-brand);
color: #fff;
opacity: 1
}
.account-login-register {
max-width: 440px;
margin: 0 auto
}
.account-login-register .auth-card {
border: 0;
padding: 0;
background: transparent
}
@media (max-width: 1023px) {
.account-layout {
grid-template-columns: 1fr;
gap: 24px
}
.account-nav {
padding: 16px
}
.account-nav .woocommerce-MyAccount-navigation ul {
flex-direction: row;
overflow-x: auto;
gap: 8px;
padding-bottom: 4px
}
.account-nav .woocommerce-MyAccount-navigation li {
flex: 0 0 auto
}
.account-nav .woocommerce-MyAccount-navigation li a {
padding: 8px 14px;
white-space: nowrap;
font-size: 13px
}
.account-content {
padding: 20px 16px
}
.account-layout:has(> .account-login-register:only-child) {
grid-template-columns: minmax(0, 1fr)
}
}
.contact-layout {
padding: var(--space-48) 0 var(--space-64)
}
.contact-layout>.container {
display: grid;
grid-template-columns: minmax(0, 1fr) 1fr;
gap: 48px
}
.contact-info-card {
padding: 32px;
border: 1px solid var(--color-border-divider);
border-radius: var(--radius-md);
background: #fff
}
.contact-info-card h2 {
font-family: var(--font-inter);
font-size: 22px;
font-weight: 700;
color: var(--color-text-strong);
margin-bottom: 24px
}
.contact-info-list {
display: flex;
flex-direction: column;
gap: 20px
}
.contact-info-social {
display: flex;
gap: 12px;
align-items: center;
margin-top: 28px;
padding-top: 24px;
border-top: 1px solid var(--color-border-divider)
}
.contact-map-section {
padding-bottom: var(--space-64)
}
.contact-map-placeholder iframe {
border: 0
}
.section-title--video-list {
margin-top: 56px
}
.contact-info-item {
display: flex;
gap: 16px;
align-items: flex-start
}
.contact-info-icon {
width: 44px;
height: 44px;
display: inline-flex;
align-items: center;
justify-content: center;
background: #fff7e6;
color: var(--color-brand);
border-radius: 50%;
flex-shrink: 0
}
.contact-info-icon img {
width: 22px;
height: 22px;
filter: brightness(0) saturate(100%) invert(60%) sepia(50%) saturate(500%) hue-rotate(0deg)
}
.contact-info-label {
font-size: 13px;
color: var(--color-text-meta);
margin-bottom: 2px
}
.contact-info-value {
font-family: var(--font-arimo);
font-size: 15px;
font-weight: 500;
color: var(--color-text-strong)
}
.contact-info-value a {
color: inherit;
text-decoration: none
}
.contact-form-card {
padding: 32px;
border: 1px solid var(--color-border-divider);
border-radius: var(--radius-md);
background: #fff
}
.contact-form-card h2 {
font-family: var(--font-inter);
font-size: 22px;
font-weight: 700;
color: var(--color-text-strong);
margin-bottom: 8px
}
.contact-form-card>p {
font-size: 14px;
color: var(--color-text-meta);
margin-bottom: 24px
}
.contact-map-placeholder {
margin-top: 32px;
border: 1px solid var(--color-border-divider);
border-radius: var(--radius-md);
overflow: hidden;
background: #fafafa
}
.contact-map-inner {
height: 320px;
display: flex;
align-items: center;
justify-content: center;
color: var(--color-text-meta);
font-size: 14px;
background: linear-gradient(135deg, transparent 49%, #e5e5e5 49%, #e5e5e5 51%, transparent 51%) 0 0/40px 40px, linear-gradient(45deg, transparent 49%, #e5e5e5 49%, #e5e5e5 51%, transparent 51%) 0 0/40px 40px
}
@media (max-width: 1023px) {
.contact-layout>.container {
grid-template-columns: 1fr
}
}
.video-page-intro {
padding: var(--space-48) 0 var(--space-32)
}
.video-page-intro h1 {
font-family: var(--font-inter);
font-size: 36px;
font-weight: 700;
color: var(--color-text-strong);
margin-bottom: 12px;
line-height: 44px
}
.video-page-intro p {
font-size: 15px;
line-height: 24px;
color: var(--color-text-meta);
max-width: 720px
}
.video-grid {
padding: var(--space-32) 0 var(--space-64)
}
.video-cards {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 24px
}
.video-card {
display: flex;
flex-direction: column
}
.video-thumb {
position: relative;
width: 100%;
aspect-ratio: 16 / 9;
background-size: cover;
background-position: center;
background-color: #1a1a1a;
border-radius: var(--radius-md);
overflow: hidden;
cursor: pointer
}
.video-thumb::after {
content: "";
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.15);
transition: background 0.15s
}
.video-thumb:hover::after {
background: rgba(0, 0, 0, 0.3)
}
.video-play-btn {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 56px;
height: 56px;
background: rgba(255, 255, 255, 0.95);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
z-index: 2
}
.video-play-btn::before {
content: "";
width: 0;
height: 0;
border-style: solid;
border-width: 10px 0 10px 16px;
border-color: transparent transparent transparent var(--color-text-strong);
margin-left: 4px
}
.video-duration {
position: absolute;
right: 8px;
bottom: 8px;
padding: 2px 6px;
background: rgba(0, 0, 0, 0.75);
color: #fff;
font-size: 11px;
font-weight: 500;
border-radius: var(--radius-xs);
z-index: 2
}
.video-card-body {
padding: 12px 0
}
.video-card-title {
font-family: var(--font-arimo);
font-size: 15px;
font-weight: 500;
color: var(--color-text-strong);
margin-bottom: 4px;
line-height: 22px;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden
}
.video-card-meta {
font-size: 13px;
color: var(--color-text-meta)
}
.video-featured {
display: grid;
grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
gap: 32px;
align-items: start
}
.video-featured-main .video-thumb {
border-radius: var(--radius-md)
}
.video-featured-info {
padding: 8px 0
}
.video-featured-info h2 {
font-family: var(--font-inter);
font-size: 24px;
font-weight: 700;
color: var(--color-text-strong);
margin-bottom: 12px;
line-height: 32px
}
.video-featured-info p {
font-size: 14px;
line-height: 22px;
color: var(--color-text-meta);
margin-bottom: 16px
}
.video-featured-meta {
display: flex;
gap: 16px;
font-size: 13px;
color: var(--color-text-meta)
}
.video-list-side {
display: flex;
flex-direction: column;
gap: 16px
}
@media (max-width: 1023px) {
.video-cards {
grid-template-columns: repeat(2, minmax(0, 1fr))
}
.video-featured {
grid-template-columns: 1fr
}
}
@media (max-width: 767px) {
.video-cards {
grid-template-columns: 1fr
}
}
.policy-layout {
padding: var(--space-48) 0 var(--space-64)
}
.policy-layout>.container {
display: grid;
grid-template-columns: 260px minmax(0, 1fr);
gap: 32px;
align-items: start
}
.policy-sidebar {
position: sticky;
top: 16px;
padding: 16px;
border: 1px solid var(--color-border-divider);
border-radius: var(--radius-md);
background: #fff
}
.policy-sidebar h2 {
font-family: var(--font-inter);
font-size: 14px;
font-weight: 600;
color: var(--color-text-strong);
text-transform: uppercase;
letter-spacing: 0.5px;
padding: 4px 12px 12px;
margin-bottom: 4px;
border-bottom: 1px solid var(--color-border-divider)
}
.policy-nav {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 2px
}
.policy-nav li a {
display: block;
padding: 10px 12px;
font-size: 14px;
color: var(--color-text);
border-radius: var(--radius-xs);
text-decoration: none;
transition: all 0.15s
}
.policy-nav li a:hover {
background: #fafafa;
color: var(--color-brand)
}
.policy-nav li a.is-active {
background: var(--color-brand);
color: #fff;
font-weight: 500
}
.policy-content {
padding: 32px;
border: 1px solid var(--color-border-divider);
border-radius: var(--radius-md);
background: #fff
}
.policy-content h1 {
font-family: var(--font-inter);
font-size: 28px;
font-weight: 700;
color: var(--color-text-strong);
margin-bottom: 16px
}
.policy-content h2 {
font-family: var(--font-arimo);
font-size: 18px;
font-weight: 600;
color: var(--color-text-strong);
margin: 28px 0 12px
}
.policy-content h3 {
font-family: var(--font-arimo);
font-size: 15px;
font-weight: 600;
color: var(--color-text-strong);
margin: 20px 0 8px
}
.policy-content p {
font-family: var(--font-arial);
font-size: 15px;
line-height: 24px;
color: var(--color-text);
margin-bottom: 14px
}
.policy-content ul,
.policy-content ol {
margin: 0 0 14px;
padding-left: 22px
}
.policy-content li {
font-family: var(--font-arial);
font-size: 15px;
line-height: 24px;
color: var(--color-text);
margin-bottom: 6px
}
.policy-content strong {
color: var(--color-text-strong)
}
@media (max-width: 1023px) {
.policy-layout>.container {
grid-template-columns: 1fr
}
.policy-sidebar {
position: static;
padding: 0;
border: 0;
background: transparent;
min-width: 0
}
.policy-sidebar h2 {
display: none
}
.policy-nav {
flex-direction: row;
overflow-x: auto;
gap: 8px;
padding-bottom: 8px;
max-width: 100%
}
.policy-nav li a {
white-space: nowrap;
border: 1px solid var(--color-border-divider);
padding: 8px 14px;
font-size: 13px
}
.policy-nav li a.is-active {
border-color: var(--color-brand)
}
}
@media (max-width: 767px) {
.policy-content {
padding: 24px 20px
}
.policy-content h1 {
font-size: 22px
}
}
.ctb-sidebar {
position: sticky;
top: 100px;
align-self: start;
max-height: calc(100vh - 120px);
overflow-y: auto
}
@media (max-width: 1023px) {
.ctb-sidebar {
position: static;
max-height: none;
overflow: visible
}
}
.ctb-sidebar-products .ctb-product-list {
display: flex;
flex-direction: column;
gap: 16px
}
.ctb-product-item {
display: flex;
gap: 12px
}
.ctb-product-item a {
display: flex;
gap: 12px;
width: 100%;
text-decoration: none;
color: inherit
}
.ctb-product-image {
width: 72px;
height: 72px;
flex-shrink: 0;
border-radius: var(--radius-xs);
background-size: cover;
background-position: center;
background-color: #f5f5f5
}
.ctb-product-info {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
justify-content: center
}
.ctb-product-info h4 {
font-size: 14px;
font-weight: 600;
line-height: 19px;
color: var(--color-text-strong);
margin: 0 0 6px;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden
}
.ctb-product-price {
font-size: 13px;
font-weight: 600;
color: var(--color-danger)
}
.ctb-meta-views,
.ctb-meta-author {
color: var(--color-text-meta);
font-size: 13px
}
.blog-comments {
padding: 32px 0 64px;
border-top: 1px solid var(--color-border-divider);
width: 100%;
max-width: 100%;
overflow: hidden;
box-sizing: border-box
}
.blog-comments .container {
position: relative;
max-width: var(--container-max);
overflow: hidden
}
.blog-comments .section-header {
margin-bottom: 24px
}
.blog-comments .section-header h2 {
font-size: 24px;
font-weight: 700;
line-height: 32px;
color: var(--color-text-strong)
}
.comment-form {
background: #fafafa;
border: 1px solid var(--color-border-divider);
border-radius: var(--radius-xs);
padding: 24px;
margin-bottom: 32px
}
.comment-form__row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
margin-bottom: 16px
}
.comment-form__field {
margin-bottom: 16px
}
.comment-form__field label {
display: block;
font-size: 14px;
font-weight: 600;
color: var(--color-text-strong);
margin-bottom: 6px
}
.comment-form__field input,
.comment-form__field textarea {
width: 100%;
padding: 10px 14px;
border: 1px solid var(--color-border-divider);
border-radius: var(--radius-xs);
background: #fff;
font-family: var(--font-arimo);
font-size: 14px;
color: var(--color-text);
transition: border-color 0.15s ease
}
.comment-form__field input:focus,
.comment-form__field textarea:focus {
outline: 0;
border-color: var(--color-brand)
}
.comment-form__field textarea {
min-height: 110px;
resize: vertical
}
.comment-form__security {
max-width: 240px
}
.comment-form__submit {
display: inline-flex;
align-items: center;
justify-content: center;
height: 44px;
padding: 0 28px;
background: var(--color-brand);
border: 0;
border-radius: var(--radius-xs);
font-family: var(--font-arimo);
font-size: 15px;
font-weight: 700;
color: var(--color-text-strong);
cursor: pointer;
transition: background 0.15s ease
}
.comment-form__submit:hover {
filter: brightness(0.95)
}
.comment-form__notice {
margin: 12px 0 0;
font-size: 12px;
color: var(--color-text-meta);
font-style: italic
}
@media (max-width: 600px) {
.comment-form__row {
grid-template-columns: 1fr
}
.comment-form {
padding: 16px
}
.comment-form__security {
max-width: 100%
}
}
.comment-list {
display: block;
gap: 20px;
min-width: 0;
width: 100%;
max-width: 100%;
box-sizing: border-box;
overflow: hidden
}
.comment-list>.comment-item+.comment-item {
margin-top: 20px
}
.comment-item {
display: flex;
gap: 14px;
padding: 16px;
background: #fff;
border: 1px solid var(--color-border-divider);
border-radius: var(--radius-xs);
overflow: hidden;
min-width: 0;
max-width: 100%;
box-sizing: border-box
}
.comment-avatar {
flex-shrink: 0;
width: 44px;
height: 44px;
border-radius: 50%;
background: var(--color-brand);
display: inline-grid;
place-items: center;
font-family: var(--font-arimo);
font-size: 14px;
font-weight: 700;
color: var(--color-text-strong)
}
.comment-body {
flex: 1;
min-width: 0;
overflow-wrap: anywhere;
word-break: break-word;
max-width: 100%;
box-sizing: border-box
}
.comment-header {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 6px
}
.comment-author {
font-size: 14px;
font-weight: 700;
color: var(--color-text-strong)
}
.comment-time {
font-size: 12px;
color: var(--color-text-meta)
}
.comment-text {
font-size: 14px;
line-height: 22px;
color: var(--color-text);
margin: 0;
overflow-wrap: anywhere;
word-break: break-word
}
.comment-text a,
.comment-text code,
.comment-text pre,
.comment-text img {
max-width: 100%;
overflow-wrap: anywhere;
word-break: break-word
}
.comment-text pre {
white-space: pre-wrap;
overflow-x: auto
}
.blog-related-section {
padding: 48px 0 64px;
background: #fafafa
}
.blog-related-section .section-header {
margin-bottom: 24px
}
.blog-related-section .section-header h2 {
font-size: 24px;
font-weight: 700;
line-height: 32px;
color: var(--color-text-strong)
}
.blog-related-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 24px
}
.blog-related-grid .blog-card {
height: auto
}
.blog-related-grid .blog-card__image {
width: 100%;
aspect-ratio: 16 / 9;
background-size: cover;
background-position: center;
background-color: #eee
}
.blog-related-grid .blog-card__content {
padding: 16px;
background: #fff
}
.blog-related-grid .blog-card__title {
font-size: 16px;
font-weight: 700;
line-height: 22px;
color: var(--color-text-strong);
margin: 6px 0 8px
}
.blog-related-grid .blog-card__excerpt {
font-size: 13px;
line-height: 19px;
color: var(--color-text-muted);
margin: 0;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden
}
.blog-related-grid .blog-card__date {
font-size: 12px;
color: var(--color-text-meta)
}
@media (max-width: 1023px) {
.blog-related-grid {
grid-template-columns: repeat(2, 1fr)
}
}
@media (max-width: 600px) {
.blog-related-grid {
grid-template-columns: 1fr
}
.blog-related-section {
padding: 32px 0 48px
}
}
.cart-recommendations {
padding: 48px 0 64px;
border-top: 1px solid var(--color-border-divider)
}
.cart-recommendations .section-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 24px
}
.cart-recommendations .section-header h2 {
font-size: 24px;
font-weight: 700;
line-height: 32px;
color: var(--color-text-strong)
}
.cart-recommendations .section-header__link {
font-size: 14px;
color: var(--color-text-strong);
text-decoration: none
}
.cart-recommendations .product-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 24px
}
@media (max-width: 1023px) {
.cart-recommendations .product-grid {
grid-template-columns: repeat(2, 1fr)
}
}
@media (max-width: 600px) {
.cart-recommendations .product-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px
}
.cart-recommendations {
padding: 32px 0 48px
}
}
.checkout-page {
padding: 24px 0 64px
}
.checkout-layout {
display: grid;
grid-template-columns: minmax(0, 1fr) 380px;
gap: 32px;
margin-top: 24px
}
.checkout-form {
background: #fff;
border: 1px solid var(--color-border-divider);
border-radius: var(--radius-xs);
padding: 32px
}
.checkout-form__header {
margin-bottom: 24px;
padding-bottom: 16px;
border-bottom: 1px solid var(--color-border-divider)
}
.checkout-form__header h2 {
font-size: 20px;
font-weight: 700;
line-height: 28px;
color: var(--color-text-strong);
margin: 0
}
.checkout-form__fields .checkout-form__field {
margin-bottom: 18px
}
.checkout-form__field label {
display: block;
font-size: 14px;
font-weight: 600;
color: var(--color-text-strong);
margin-bottom: 8px
}
.checkout-form__field input,
.checkout-form__field textarea {
width: 100%;
padding: 12px 14px;
border: 1px solid var(--color-border-divider);
border-radius: var(--radius-xs);
background: #fff;
font-family: var(--font-arimo);
font-size: 14px;
color: var(--color-text);
transition: border-color 0.15s ease
}
.checkout-form__field input:focus,
.checkout-form__field textarea:focus {
outline: 0;
border-color: var(--color-brand)
}
.checkout-form__field textarea {
min-height: 100px;
resize: vertical
}
.checkout-form__payment {
border: 1px solid var(--color-border-divider);
border-radius: var(--radius-xs);
padding: 16px;
margin: 24px 0
}
.checkout-form__payment legend {
font-size: 14px;
font-weight: 700;
color: var(--color-text-strong);
padding: 0 8px
}
.checkout-payment-option {
display: flex;
align-items: center;
gap: 12px;
padding: 12px;
border: 1px solid var(--color-border-divider);
border-radius: var(--radius-xs);
cursor: pointer;
background: #fafafa
}
.checkout-payment-option input[type="radio"] {
width: 18px;
height: 18px;
margin: 0;
accent-color: var(--color-brand)
}
.checkout-payment-info {
display: flex;
flex-direction: column;
gap: 2px
}
.checkout-payment-info strong {
font-size: 14px;
font-weight: 600;
color: var(--color-text-strong)
}
.checkout-payment-info small {
font-size: 12px;
color: var(--color-text-meta)
}
.checkout-form__notice {
margin: 12px 0 0;
font-size: 12px;
color: var(--color-text-meta);
font-style: italic
}
.checkout-form__submit {
display: inline-flex;
align-items: center;
justify-content: center;
height: 52px;
padding: 0 40px;
background: var(--color-brand);
border: 0;
border-radius: var(--radius-xs);
font-family: var(--font-arimo);
font-size: 16px;
font-weight: 700;
color: var(--color-text-strong);
cursor: pointer;
transition: filter 0.15s ease
}
.checkout-form__submit:hover {
filter: brightness(0.95)
}
.checkout-summary {
background: #fff;
border: 1px solid var(--color-border-divider);
border-radius: var(--radius-xs);
padding: 24px;
align-self: start;
position: sticky;
top: 100px
}
.checkout-summary h2 {
font-size: 18px;
font-weight: 700;
color: var(--color-text-strong);
margin: 0 0 16px;
padding-bottom: 12px;
border-bottom: 1px solid var(--color-border-divider)
}
.checkout-order-items {
display: flex;
flex-direction: column;
gap: 14px;
margin-bottom: 16px;
padding-bottom: 16px;
border-bottom: 1px solid var(--color-border-divider)
}
.checkout-order-item {
display: flex;
align-items: center;
gap: 12px
}
.checkout-order-image {
width: 56px;
height: 56px;
flex-shrink: 0;
border-radius: var(--radius-xs);
background-size: cover;
background-position: center;
background-color: #f5f5f5
}
.checkout-order-info {
flex: 1;
min-width: 0
}
.checkout-order-info h4 {
font-size: 13px;
font-weight: 600;
line-height: 18px;
color: var(--color-text-strong);
margin: 0 0 4px;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden
}
.checkout-order-variant {
font-size: 12px;
color: var(--color-text-meta)
}
.checkout-order-price {
flex-shrink: 0;
font-size: 14px;
font-weight: 600;
color: var(--color-danger)
}
.checkout-summary-row {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 14px;
color: var(--color-text);
margin-bottom: 10px
}
.checkout-summary-row strong {
font-weight: 600
}
.checkout-summary-row.discount strong {
color: var(--color-danger)
}
.checkout-total {
display: flex;
justify-content: space-between;
align-items: center;
padding-top: 14px;
margin-top: 14px;
border-top: 1px solid var(--color-border-divider);
font-size: 16px;
font-weight: 700;
color: var(--color-text-strong)
}
.checkout-total-amount {
color: var(--color-danger);
font-size: 18px
}
@media (max-width: 1023px) {
.checkout-layout {
grid-template-columns: 1fr
}
.checkout-summary {
position: static
}
.checkout-form {
padding: 20px
}
}
.mobile-menu-toggle {
display: none;
align-items: center;
justify-content: center;
width: 35px;
height: 35px;
padding: 0;
margin-left: 8px;
background: #ffb000;
border-radius: var(--radius-xs);
cursor: pointer;
color: var(--color-text-strong);
flex-shrink: 0
}
.mobile-menu-toggle:hover {
background: var(--color-brand)
}
.mobile-menu-toggle img {
width: 22px;
height: 22px;
display: block
}
.mobile-navigation {
display: none
}
@media (max-width: 767px) {
.main-header-inner {
display: grid;
grid-template-columns: 1fr auto;
grid-template-rows: auto auto;
grid-template-areas: "logo actions" "search search";
column-gap: 8px;
row-gap: 8px;
align-items: center
}
.logo {
grid-area: logo;
width: auto;
max-width: 220px;
height: 48px;
align-self: center;
justify-self: start;
flex: 1 1 auto;
min-width: 0
}
.logo img {
width: auto;
max-width: 100%;
height: 100%;
object-fit: contain;
object-position: left center
}
.header-actions {
grid-area: actions;
justify-self: end;
align-self: center;
display: flex;
align-items: center;
gap: 0;
flex: 0 0 auto
}
.mobile-search-row {
grid-area: search;
grid-column: 1 / -1;
display: flex;
align-items: center;
gap: 8px;
width: 100%
}
.mobile-menu-toggle {
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 35px;
width: 35px;
height: 35px;
margin-left: 0
}
.mobile-menu-toggle img {
width: 22px;
height: 22px
}
.search-form {
flex: 1 1 auto;
min-width: 0;
height: 35px;
max-width: 100%
}
.search-input {
font-size: 14px
}
.header-action-label,
.header-action-value {
display: none
}
.header-action {
padding: 0 4px
}
.header-action-icon {
width: 28px;
height: 28px
}
.header-action-icon.location {
width: 22px;
height: 24px
}
.header-action-icon.cart {
width: 28px;
height: 28px
}
.main-nav {
display: none
}
.mobile-navigation {
display: block;
position: fixed;
inset: 0;
top: auto;
background: #fff;
z-index: 100;
padding: 24px 16px;
overflow-y: auto;
border-top: 1px solid var(--color-border-divider);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08)
}
.mobile-navigation[hidden] {
display: none
}
.mobile-navigation.is-open {
display: block
}
.mobile-navigation__close {
display: flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
margin-left: auto;
margin-bottom: 16px;
background: transparent;
border-radius: var(--radius-xs);
cursor: pointer;
color: var(--color-text-strong)
}
.mobile-navigation__list {
list-style: none;
padding: 0;
margin: 0
}
.mobile-navigation__list>li {
border-bottom: 1px solid var(--color-border-divider)
}
.mobile-navigation__list>li:last-child {
border-bottom: 0
}
.mobile-navigation__list a {
display: block;
padding: 14px 8px;
font-size: 15px;
font-weight: 600;
color: var(--color-text-strong);
text-decoration: none
}
.mobile-navigation__list a:hover {
color: var(--color-text)
}
.mobile-navigation__sublist {
list-style: none;
padding: 0 0 8px 16px;
margin: 0
}
.mobile-navigation__sublist a {
padding: 8px 8px;
font-size: 14px;
font-weight: 500;
color: var(--color-text)
}
.main-header {
padding: 8px 0
}
.hero {
padding: 16px 0
}
.hero-left {
height: 220px
}
.hero-right {
grid-template-columns: 1fr;
gap: 12px
}
.hero-side {
height: 160px
}
.xuong-card {
height: 200px
}
.product-grid,
.blog-row,
.dmb-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px
}
.product-card__title {
font-size: 14px;
line-height: 19px
}
.product-card__sale-price,
.product-sale-price {
font-size: 15px
}
.product-detail__summary .product-sale-price {
font-size: 25px !important;
}
.product-card__regular-price,
.product-regular-price {
font-size: 12px
}
.product-detail__summary .product-regular-price {
font-size: 15px
}
.product-rating {
font-size: 11px
}
.discount-badge {
font-size: 11px;
padding: 1px 4px
}
.page-heading {
padding: 16px 0
}
.page-heading h1 {
font-size: 22px;
line-height: 30px
}
.breadcrumb {
font-size: 12px
}
.breadcrumb a,
.breadcrumb .current,
.breadcrumb .last {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap
}
.breadcrumb .sep {
flex: 0 0 auto
}
.footer-grid {
grid-template-columns: 1fr;
gap: 24px
}
.footer-col h4 {
margin-bottom: 8px
}
.search-keywords-grid {
gap: 8px
}
.search-keywords {
padding: 16px 0
}
.footer-search-keywords .search-keywords-grid {
max-height: 84px;
overflow: hidden
}
.footer-google-map__inner {
aspect-ratio: 4 / 3;
max-height: 280px
}
.section-title {
font-size: 22px;
line-height: 28px
}
.section-header {
margin-bottom: 16px;
flex-wrap: wrap;
gap: 8px
}
.pagination {
gap: 4px;
padding: 8px
}
.pagination a {
min-width: 32px;
height: 32px;
font-size: 13px
}
.topbar {
height: 32px;
font-size: 11px
}
.topbar-inner {
gap: 12px
}
.topbar-text {
display: none
}
}
@media (max-width: 767px) {
.filter-sidebar,
.product-sidebar,
aside[class*="sidebar"]:not(.single-post__sidebar):not(.ctb-sidebar):not(.checkout-summary) {
display: none
}
.mobile-product-filters {
display: inline-flex
}
.dmsp-sort {
display: none
}
.dmsp-sort-mobile {
display: flex;
align-items: center;
gap: 8px;
margin-top: 12px;
flex: 1 1 100%;
min-width: 0
}
.dmsp-sort-mobile__label {
font-size: 14px;
font-weight: 600;
color: var(--color-text-strong);
flex-shrink: 0
}
.dmsp-sort-mobile__select {
flex: 1;
min-width: 0;
height: 44px;
padding: 0 12px;
background: #fff;
border: 1px solid var(--color-border-divider);
border-radius: var(--radius-xs);
font-family: var(--font-arimo);
font-size: 14px;
color: var(--color-text-strong);
cursor: pointer;
appearance: none;
-webkit-appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23474747' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 12px center;
padding-right: 36px
}
.dmsp-toolbar {
flex-wrap: wrap;
gap: 8px
}
.dmsp-result-count {
flex: 1 1 100%
}
}
.dmsp-sort-mobile {
display: none
}
@media (min-width: 1024px) {
.mobile-search-row {
display: contents
}
}
@media (max-width: 767px) {
.cart-layout>.container {
display: flex;
flex-direction: column;
gap: 16px
}
.cart-item {
grid-template-columns: 80px minmax(0, 1fr) 40px;
grid-template-areas: "img info remove" "img variant variant" "price price price" "qty qty subtotal";
gap: 8px 12px;
padding: 12px
}
.cart-item-image {
grid-area: img;
width: 80px;
height: 80px
}
.cart-item-info {
grid-area: info
}
.cart-item-remove,
.cart-item-remove-wrap {
grid-area: remove;
justify-self: end
}
.cart-item-variant {
grid-area: variant
}
.cart-item .cart-item-price {
grid-area: price;
justify-self: start
}
.cart-item .cart-qty {
grid-area: qty;
justify-self: start
}
.cart-item-subtotal {
grid-area: subtotal;
justify-self: end
}
.cart-qty button {
width: 36px;
height: 36px
}
.cart-qty input {
width: 44px;
height: 36px
}
.cart-actions {
flex-direction: column;
gap: 8px
}
.cart-actions .btn,
.cart-actions .cart-continue {
width: 100%;
text-align: center
}
.cart-summary {
padding: 16px
}
}
@media (max-width: 1023px) {
.checkout-layout {
grid-template-columns: 1fr
}
.checkout-summary {
position: static
}
.checkout-form {
padding: 20px
}
}
@media (max-width: 767px) {
.checkout-form {
padding: 16px
}
.checkout-form__submit {
width: 100%
}
.checkout-summary {
padding: 16px
}
.checkout-payment-option {
padding: 10px
}
}
@media (max-width: 1023px) {
.ctb-sidebar {
position: static;
max-height: none;
overflow: visible
}
.ctb-layout>.container {
grid-template-columns: 1fr
}
}
@media (max-width: 767px) {
.single-post__header h1 {
font-size: 22px;
line-height: 30px
}
.ctb-featured-img {
height: 200px
}
.ctb-meta {
flex-wrap: wrap;
gap: 8px
}
.ctb-sidebar-block {
padding-bottom: 16px;
margin-bottom: 16px
}
.ctb-product-info h4 {
font-size: 13px
}
.blog-related-grid {
grid-template-columns: 1fr;
gap: 16px
}
.blog-related-section {
padding: 24px 0 32px
}
.blog-comments {
padding: 24px 0 32px
}
.blog-comments .section-header h2 {
font-size: 20px;
line-height: 28px
}
.comment-form {
padding: 16px
}
.comment-item {
padding: 12px;
gap: 10px
}
.comment-avatar {
width: 36px;
height: 36px;
font-size: 13px
}
}
@media (max-width: 767px) {
.ctsp-gallery,
.ctsp-info {
padding: 0
}
.info-table {
font-size: 13px
}
.ctsp-related-grid,
.video-cards {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px
}
}
@media (max-width: 767px) {
.policy-content {
padding: 24px 20px
}
.policy-content h1 {
font-size: 22px
}
.policy-layout>.container {
grid-template-columns: 1fr
}
.policy-sidebar {
padding: 0;
border: 0;
background: transparent
}
.policy-nav {
flex-direction: row;
overflow-x: auto;
gap: 8px;
padding-bottom: 8px
}
.policy-nav li a {
white-space: nowrap;
padding: 8px 14px;
font-size: 13px
}
.auth-page {
padding: 24px 0
}
.auth-card {
padding: 24px 16px
}
.auth-actions {
flex-direction: column;
gap: 12px;
align-items: stretch
}
.contact-page {
padding: 24px 0
}
.contact-layout {
grid-template-columns: 1fr;
gap: 16px
}
.contact-info {
padding: 16px
}
.about-intro-grid,
.about-values-grid {
grid-template-columns: 1fr;
gap: 16px
}
}
.skip-link {
position: absolute;
top: -40px;
left: 8px;
background: #1c2753;
color: #fff;
padding: 8px 16px;
border-radius: 4px;
font-family: var(--font-inter);
font-size: 14px;
text-decoration: none;
z-index: 9999;
transition: top 0.15s ease
}
.skip-link:focus {
top: 8px;
outline: 2px solid #ffb000
}
.gtsg-sr-only {
position: absolute !important;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0
}
.header-action-tel,
.footer-contact-tel,
.footer-contact-email {
color: inherit;
text-decoration: none
}
.header-action-tel:hover,
.footer-contact-tel:hover,
.footer-contact-email:hover {
text-decoration: underline
}
.xuong-grid--slider {
display: flex;
flex-wrap: nowrap;
overflow-x: auto;
overflow-y: hidden;
scroll-behavior: auto;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
-ms-overflow-style: none;
gap: 20px
}
.xuong-grid--slider::-webkit-scrollbar {
display: none
}
.xuong-grid--slider .xuong-card {
flex: 0 0 calc(25% - 15px);
min-width: 0
}
@media (max-width: 1279px) {
.xuong-grid--slider .xuong-card {
flex: 0 0 calc(40% - 10px)
}
}
@media (max-width: 767px) {
.xuong-grid--slider .xuong-card {
flex: 0 0 calc(40% - 10px)
}
}
.xuong-caption {
display: none !important
}
.video-main-caption {
position: absolute;
left: 32px;
right: 32px;
bottom: 32px;
color: #fff;
z-index: 2;
margin: 0;
padding: 0
}
.video-main-caption h3 {
font-family: var(--font-arimo);
font-size: 24px;
font-weight: 700;
line-height: 32px;
margin: 0;
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
}
.form-field {
display: flex;
flex-direction: column;
gap: 6px
}
.form-field label {
font-family: var(--font-arimo);
font-size: 14px;
font-weight: 600;
line-height: 20px;
color: var(--color-text-strong, #111);
display: flex;
align-items: center;
gap: 4px
}
.form-field--honeypot {
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
}
.sale-section {
width: 100%;
margin: 0;
padding: 50px 0;
position: relative;
isolation: isolate
}
.sale-section::before {
content: "";
position: absolute;
top: -150px;
left: 0;
right: 0;
height: calc(100% + 150px);
z-index: -1;
background-image: var(--gtsg-sale-bg, none);
background-size: cover;
background-position: center;
background-repeat: no-repeat
}
.sale-section .container {
position: relative
}
.sale-section__inner {
display: flex;
flex-direction: column;
gap: 24px
}
.sale-section__heading {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 16px;
flex-wrap: wrap
}
.sale-section__heading-text {
display: flex;
flex-direction: column;
gap: 6px
}
.sale-section__title {
font-family: var(--font-inter);
font-weight: 800;
font-size: 36px;
line-height: 1.1;
letter-spacing: 0.02em;
color: #ffffff;
text-transform: uppercase;
margin: 0
}
.sale-section__subtitle {
font-family: var(--font-inter);
font-weight: 700;
font-size: 22px;
line-height: 1.2;
color: #ffffff;
margin: 0
}
.sale-section__view-all {
display: inline-flex;
align-items: center;
gap: 8px;
font-family: var(--font-arimo);
font-weight: 600;
font-size: 14px;
line-height: 1;
color: var(--color-white, #ffffff);
text-decoration: none;
padding: 6px 0;
transition: color 0.18s ease
}
.sale-section__view-all:hover {
color: var(--color-brand, #ffb000)
}
.sale-section__view-all svg {
transition: none
}
.sale-section__grid-wrap {
background: var(--color-white, #ffffff);
padding: 20px;
box-shadow: 0 4px 24px rgba(0, 0, 0, 0.12)
}
.sale-section .product-grid--sale {
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 16px
}
.sale-countdown {
display: inline-flex;
align-items: center;
gap: 6px;
font-family: var(--font-inter)
}
.sale-countdown__label {
font-size: 13px;
font-weight: 600;
color: rgba(255, 255, 255, 0.85);
margin-right: 4px;
letter-spacing: 0.02em
}
.sale-countdown__box {
display: inline-flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-width: 48px;
padding: 6px 8px;
background: linear-gradient(180deg, #ff5a1f 0%, #ff8a00 100%);
border-radius: 6px;
color: #fff;
box-shadow: 0 2px 6px rgba(255, 90, 31, 0.35)
}
.sale-countdown__value {
font-size: 18px;
font-weight: 800;
line-height: 1;
font-variant-numeric: tabular-nums;
letter-spacing: 0.02em
}
.sale-countdown__unit {
font-size: 10px;
font-weight: 600;
margin-top: 2px;
opacity: 0.9;
text-transform: uppercase;
letter-spacing: 0.05em
}
.sale-countdown__sep {
font-size: 18px;
font-weight: 800;
color: rgba(255, 255, 255, 0.7);
margin: 0 -2px;
align-self: center;
line-height: 1
}
.sale-countdown.is-ended {
gap: 0
}
.sale-countdown__ended {
display: inline-block;
padding: 8px 14px;
background: rgba(255, 255, 255, 0.12);
border: 1px solid rgba(255, 255, 255, 0.25);
border-radius: 999px;
color: #fff;
font-size: 13px;
font-weight: 600;
letter-spacing: 0.02em
}
.product-slider {
position: relative;
overflow: hidden
}
.product-slider .hero-slide {
position: relative;
inset: auto;
opacity: 1 !important;
pointer-events: auto !important;
flex: 0 0 auto;
box-sizing: border-box
}
.product-slider .hero-slide {
display: flex
}
.product-slider .hero-slide>.product-card {
display: flex;
flex-direction: column;
flex: 1 1 auto;
width: 100%
}
.product-slider .hero-slide>.product-card>.product-card__link {
display: flex;
flex-direction: column;
flex: 1 1 auto
}
.product-slider .hero-slide>.product-card>.product-card__link>.product-info {
flex: 1 1 auto;
display: flex;
flex-direction: column
}
.product-slider .hero-slide>.product-card>.product-card__link>.product-info>.product-rating {
margin-top: auto
}
.product-slider__viewport {
overflow: hidden
}
.product-slider__track {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-wrap: nowrap;
gap: 16px;
transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
will-change: transform
}
.product-slider__slide {
list-style: none;
flex: 0 0 auto;
box-sizing: border-box
}
.product-slider .hero-nav {
background: rgba(255, 255, 255, 0.95);
color: #333;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
width: 30px;
height: 50px
}
.product-slider .hero-nav:hover {
background: var(--color-brand, #ffb000);
color: #fff
}
.product-slider .hero-dots {
position: static;
display: flex;
justify-content: center;
gap: 6px;
margin-top: 16px;
padding: 0
}
@media (prefers-reduced-motion: reduce) {
.product-slider__track {
transition: none !important
}
}
.sale-section__empty {
font-family: var(--font-arimo);
font-size: 14px;
color: var(--color-text-meta, #999);
text-align: center;
padding: 40px 0;
margin: 0
}
@media (max-width: 1023px) {
.sale-section {
padding: 48px 0
}
.sale-section__title {
font-size: 30px
}
.sale-section__subtitle {
font-size: 18px
}
.sale-section .product-grid--sale,
.product-slider__track {
grid-template-columns: repeat(3, minmax(0, 1fr))
}
.sale-countdown__value {
font-size: 16px
}
.sale-countdown__box {
min-width: 42px;
padding: 5px 6px
}
}
@media (max-width: 639px) {
.sale-section {
padding: 32px 0
}
.sale-section__inner {
gap: 16px
}
.sale-section__heading {
align-items: flex-start
}
.sale-section__title {
font-size: 24px
}
.sale-section__subtitle {
font-size: 16px
}
.sale-section__grid-wrap {
padding: 14px;
border-radius: var(--radius-sm, 6px)
}
.sale-section .product-grid--sale,
.product-slider__track {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px
}
.product-slider .hero-nav {
width: 32px;
height: 32px
}
.product-slider .hero-nav.prev {
left: 8px
}
.product-slider .hero-nav.next {
right: 8px
}
.sale-countdown {
gap: 4px
}
.sale-countdown__label {
display: none
}
.sale-countdown__value {
font-size: 15px
}
.sale-countdown__box {
min-width: 36px;
padding: 4px 5px
}
.sale-countdown__sep {
font-size: 15px
}
}
@media (max-width: 420px) {
.sale-section .product-grid--sale,
.product-slider__track {
grid-template-columns: minmax(0, 1fr);
gap: 12px
}
.sale-countdown__value {
font-size: 14px
}
.sale-countdown__box {
min-width: 32px;
padding: 4px 4px
}
.sale-countdown__sep {
display: none
}
}
@media (min-width: 1025px) {
.dmsp-sidebar.product-filters {
position: sticky;
top: 24px;
align-self: start;
max-height: calc(100vh - 48px);
overflow-y: auto;
scrollbar-width: thin
}
}
.product-category-archive .product-grid {
display: grid;
grid-template-columns: repeat(var(--grid-columns-desktop, 4), minmax(0, 1fr));
gap: 20px
}
@media (max-width: 1024px) {
.product-category-archive .product-grid {
grid-template-columns: repeat(var(--grid-columns-tablet, 3), minmax(0, 1fr));
gap: 16px
}
}
@media (max-width: 640px) {
.product-category-archive .product-grid {
grid-template-columns: repeat(var(--grid-columns-mobile, 2), minmax(0, 1fr));
gap: 12px
}
}
@media (min-width: 1025px) {
.mobile-product-filters {
display: none
}
}
@media (max-width: 1024px) {
.dmsp-sidebar {
display: none !important
}
}
.mobile-product-filters__toggle {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 8px 14px;
background: #fff;
border: 1px solid var(--color-brand, #b1252a);
color: var(--color-brand, #b1252a);
border-radius: 6px;
font-family: var(--font-arimo);
font-size: 14px;
font-weight: 600;
cursor: pointer;
transition: background-color 0.2s ease, color 0.2s ease;
white-space: nowrap;
min-height: 36px
}
.mobile-product-filters__toggle:hover,
.mobile-product-filters__toggle:focus-visible {
background: var(--color-brand, #b1252a);
color: #fff;
outline: 2px solid var(--color-brand, #b1252a);
outline-offset: 2px
}
.mobile-product-filters__toggle svg {
width: 18px;
height: 18px;
flex-shrink: 0
}
.mobile-product-filters__toggle-text {
display: inline-block;
line-height: 1
}
.mobile-product-filters__toggle[aria-expanded="true"] {
background: var(--color-brand, #b1252a);
color: #fff
}
.mobile-product-filters__popup[hidden] {
display: none
}
.mobile-product-filters__popup {
position: fixed;
inset: 0;
z-index: 9999;
display: flex;
flex-direction: column;
justify-content: flex-end
}
.mobile-product-filters__backdrop {
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.45);
cursor: pointer;
animation: gtsg-sheet-fade-in 250ms ease-out
}
.mobile-product-filters__dialog {
position: relative;
width: 100%;
max-width: 100%;
max-height: 85vh;
background: #fff;
display: flex;
flex-direction: column;
box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.18);
border-top-left-radius: 12px;
border-top-right-radius: 12px;
transform: translate3d(0, 100%, 0);
transition: transform 300ms cubic-bezier(0.22, 0.61, 0.36, 1);
will-change: transform;
padding-top: 8px
}
.mobile-product-filters__popup:not([hidden]) .mobile-product-filters__dialog {
transform: translate3d(0, 0, 0)
}
.mobile-product-filters__dialog::before {
content: "";
display: block;
width: 36px;
height: 4px;
background: var(--color-border-divider, #d6d6d6);
border-radius: 2px;
margin: 0 auto 4px
}
@keyframes gtsg-sheet-fade-in {
from {
opacity: 0
}
to {
opacity: 1
}
}
.mobile-product-filters__header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 16px 8px;
border-bottom: 1px solid var(--color-border-divider, #ececec)
}
.mobile-product-filters__title {
font-size: 16px;
font-weight: 700;
margin: 0;
color: var(--color-text-strong, #222)
}
.mobile-product-filters__close {
background: transparent;
border: 0;
padding: 4px;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center
}
.mobile-product-filters__close img {
width: 20px;
height: 20px
}
.mobile-product-filters__body {
flex: 1 1 auto;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
padding: 16px
}
.mobile-product-filters__footer {
display: flex;
gap: 12px;
padding: 12px 16px;
border-top: 1px solid var(--color-border-divider, #ececec);
background: #fff;
padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px))
}
.mobile-product-filters__clear,
.mobile-product-filters__apply {
flex: 1 1 0;
padding: 10px 16px;
border-radius: 6px;
font-weight: 600;
cursor: pointer;
font-size: 14px;
border: 1px solid var(--color-border-divider, #ececec);
background: #fff;
color: var(--color-text-strong, #222)
}
.mobile-product-filters__apply {
background: var(--color-brand, #b1252a);
color: #fff;
border-color: var(--color-brand, #b1252a)
}
@media (prefers-reduced-motion: reduce) {
.mobile-product-filters__dialog,
.mobile-product-filters__backdrop {
transition: none !important;
animation: none !important;
transform: none !important
}
.mobile-product-filters__popup[hidden] .mobile-product-filters__dialog {
transform: translate3d(0, 100%, 0) !important
}
}
.archive-header__inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
flex-wrap: wrap
}
.archive-header__title-wrap {
flex: 1 1 auto;
min-width: 0
}
.archive-header__title-wrap .page-heading__title {
margin: 0 0 4px
}
.archive-header__breadcrumb {
font-size: 13px
}
@media (max-width: 480px) {
.archive-header__inner {
gap: 8px
}
.archive-header__title-wrap .page-heading__title {
font-size: 18px;
line-height: 24px
}
}
@media (min-width: 1025px) {
.archive-header__inner {
flex-wrap: nowrap
}
}
@media (max-width: 1024px) {
.page-heading.archive-header {
padding-bottom: 16px
}
}
.ctsp-main-img {
width: 100%;
height: auto;
max-height: none;
aspect-ratio: 1 / 1;
border-radius: 0;
background: #f7f7f7;
background-size: cover;
background-position: center;
position: relative
}
.ctsp-main-img--placeholder {
grid-column: 1 / -1;
aspect-ratio: 1 / 1
}
.ctsp-quantity>.quantity.ctsp-quantity-control {
display: flex;
align-items: center;
gap: 0
}
.ctsp-quantity>.quantity.ctsp-quantity-control>.quantity {
display: contents;
float: none;
width: auto;
margin: 0;
padding: 0;
border: 0
}
.ctsp-quantity .ctsp-quantity-control .qty,
.ctsp-quantity .quantity.ctsp-quantity-control .qty {
-moz-appearance: textfield;
appearance: textfield;
width: 44px;
min-width: 0;
height: 36px;
margin: 0;
padding: 0;
border: 0;
border-radius: 0;
text-align: center;
font-family: var(--font-arimo);
font-size: 15px;
font-weight: 700;
line-height: 1;
color: var(--color-text-strong);
background: transparent;
box-shadow: none
}
.ctsp-quantity .ctsp-quantity-control .qty::-webkit-outer-spin-button,
.ctsp-quantity .ctsp-quantity-control .qty::-webkit-inner-spin-button,
.ctsp-quantity .quantity.ctsp-quantity-control .qty::-webkit-outer-spin-button,
.ctsp-quantity .quantity.ctsp-quantity-control .qty::-webkit-inner-spin-button {
-webkit-appearance: none;
appearance: none;
margin: 0;
padding: 0;
border: 0;
height: 100%;
width: 0;
display: none
}
.ctsp-quantity .ctsp-quantity-control .ctsp-qty-btn--minus {
border-right: 1px solid var(--color-border-divider)
}
.ctsp-quantity .ctsp-quantity-control .ctsp-qty-btn--plus {
border-left: 1px solid var(--color-border-divider)
}
.product-card__rating .star {
flex: 0 0 14px
}
.ctsp-consult {
margin: 0 0 24px
}
.ctsp-consult .form-field--honeypot {
display: none !important
}
.ctsp-consult__row {
display: flex;
gap: 8px;
align-items: stretch
}
.ctsp-consult__row {
flex-wrap: nowrap
}
.ctsp-consult__input--name {
flex-grow: 1.35
}
@media (max-width: 480px) {
.ctsp-consult__input--name,
.ctsp-consult__input--phone {
flex-grow: 1
}
.ctsp-consult__submit {
min-width: 64px;
padding: 0 12px
}
}
.ctsp-consult__input {
flex: 1 1 auto;
min-width: 0;
height: 40px;
padding: 0 12px;
border: 1px solid var(--color-border-input);
border-radius: var(--radius-xs);
background: var(--color-white);
font-family: var(--font-arimo);
font-size: 14px;
color: var(--color-text-strong);
-webkit-appearance: none;
appearance: none;
-moz-appearance: textfield
}
.ctsp-consult__input::placeholder {
color: var(--color-text-meta)
}
.ctsp-consult__input:focus {
outline: none;
border-color: var(--color-brand);
box-shadow: 0 0 0 3px rgba(255, 176, 0, 0.2)
}
.ctsp-consult__input[aria-invalid="true"] {
border-color: var(--color-danger)
}
.ctsp-consult__submit {
flex: 0 0 auto;
min-width: 72px;
padding: 0 16px;
height: 40px !important;
font-size: 14px
}
.ctsp-consult__submit:disabled {
opacity: 0.6;
cursor: not-allowed
}
.ctsp-consult__status {
display: block;
margin: 6px 0 0;
font-size: 12px;
line-height: 1.4;
color: var(--color-text-muted)
}
.ctsp-consult__status:empty {
margin: 0
}
.ctsp-consult__status--sending {
color: var(--color-text-muted)
}
.ctsp-consult__status--success {
color: #1a7f37
}
.ctsp-consult__status--error {
color: var(--color-danger)
}
.ctsp-notice {
width: 100%;
margin: 0 0 24px;
padding: 14px 16px;
background: var(--color-brand-tint);
border-radius: var(--radius-sm);
color: var(--color-text);
font-family: var(--font-arimo);
font-size: 14px;
line-height: 1.6;
box-sizing: border-box
}
.ctsp-notice__body>*:first-child {
margin-top: 0
}
.ctsp-notice__body>*:last-child {
margin-bottom: 0
}
.ctsp-notice__body ul,
.ctsp-notice__body ol {
margin: 0 0 12px;
padding-left: 20px
}
.ctsp-notice__body ul:last-child,
.ctsp-notice__body ol:last-child {
margin-bottom: 0
}
.ctsp-notice__body li {
margin: 0 0 6px
}
.ctsp-notice__body li:last-child {
margin-bottom: 0
}
.ctsp-notice__body p {
margin: 0 0 12px
}
.ctsp-notice__body p:last-child {
margin-bottom: 0
}
.ctsp-notice__body h1,
.ctsp-notice__body h2,
.ctsp-notice__body h3,
.ctsp-notice__body h4,
.ctsp-notice__body h5,
.ctsp-notice__body h6 {
margin: 0 0 8px;
color: var(--color-text-strong);
font-size: 15px;
line-height: 1.4
}
.ctsp-notice__body strong,
.ctsp-notice__body b {
color: var(--color-text-strong)
}
.ctsp-notice__body a {
color: var(--color-brand-dark)
}
.ctsp-notice__body img {
display: block;
max-width: 100%;
height: auto;
border-radius: var(--radius-xs);
margin: 8px 0
}
.ctsp-notice__body table {
width: 100%;
margin: 0 0 12px;
border-collapse: collapse;
font-size: 13px
}
.ctsp-notice__body table td,
.ctsp-notice__body table th {
padding: 6px 8px;
border: 1px solid var(--color-border-card);
text-align: left
}
@media (max-width: 768px) {
.ctsp-notice {
padding: 12px 14px;
font-size: 13px
}
.ctsp-notice__body ul,
.ctsp-notice__body ol {
padding-left: 18px
}
}
@media (max-width: 1023px) {
.header-action {
display: inline-flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
min-width: 44px;
min-height: 44px;
-webkit-tap-highlight-color: transparent
}
.header-action-icon {
flex: 0 0 auto
}
a.header-action:focus-visible {
outline: 2px solid var(--color-brand);
outline-offset: 2px;
border-radius: var(--radius-xs)
}
}
@media (max-width: 1023px) {
.mobile-menu-toggle {
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 35px;
width: 35px;
height: 35px
}
.main-nav {
display: none
}
.mobile-navigation {
display: block;
position: fixed;
inset: 0;
top: auto;
background: #fff;
z-index: 100;
padding: 24px 16px;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
border-top: 1px solid var(--color-border-divider);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08)
}
.mobile-navigation[hidden] {
display: none
}
}
@media (max-width: 1023px) {
.mobile-navigation__list {
list-style: none;
padding: 0;
margin: 0
}
.mobile-navigation__list>li {
border-bottom: 1px solid var(--color-border-divider)
}
.mobile-navigation__list>li:last-child {
border-bottom: 0
}
.mobile-navigation__list a {
display: block;
padding: 14px 8px;
font-size: 15px;
font-weight: 600;
color: var(--color-text-strong);
text-decoration: none
}
.mobile-navigation__list a:hover {
color: var(--color-text)
}
.mobile-navigation__list .current-menu-item>a,
.mobile-navigation__list .current_page_item>a,
.mobile-navigation__list .current-menu-ancestor>a {
color: var(--color-brand-dark, #fdb414)
}
}
@media (max-width: 1023px) {
.mobile-navigation__list .sub-menu,
.mobile-navigation__list .mobile-navigation__sublist {
list-style: none;
padding: 0 0 8px 16px;
margin: 0
}
.mobile-navigation__list .sub-menu a,
.mobile-navigation__list .mobile-navigation__sublist a {
padding: 8px 8px;
font-size: 14px;
font-weight: 500;
color: var(--color-text)
}
.mobile-navigation__list .sub-menu .sub-menu {
padding-left: 16px
}
}
@media (max-width: 1023px) {
.mobile-navigation__close {
display: flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
margin-left: auto;
margin-bottom: 16px;
background: transparent;
border-radius: var(--radius-xs);
cursor: pointer;
color: var(--color-text-strong);
flex-shrink: 0
}
.mobile-navigation__close img {
width: 18px;
height: 18px
}
}
@media (max-width: 1023px) {
.mobile-navigation a:focus-visible,
.mobile-navigation__close:focus-visible {
outline: 2px solid var(--color-brand);
outline-offset: -2px
}
}
.mobile-nav-overlay {
position: fixed;
inset: 0;
z-index: 1000;
pointer-events: none
}
.mobile-nav-overlay[hidden] {
display: none
}
.mobile-nav-backdrop {
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.45);
opacity: 0;
transition: opacity 0.28s ease;
cursor: pointer
}
.mobile-nav-overlay .mobile-navigation {
position: absolute;
top: 0;
left: 0;
width: 75%;
max-width: 360px;
min-width: 260px;
height: 100%;
inset: 0 auto 0 0;
background: #fff;
transform: translateX(-100%);
transition: transform 0.28s cubic-bezier(0.2, 0.8, 0.2, 1);
overflow-y: auto;
-webkit-overflow-scrolling: touch;
padding: 16px;
box-shadow: 4px 0 18px rgba(0, 0, 0, 0.18);
border-top: 0
}
.mobile-nav-overlay.is-opening,
.mobile-nav-overlay.is-open,
.mobile-nav-overlay.is-closing {
pointer-events: auto
}
.mobile-nav-overlay.is-opening .mobile-nav-backdrop,
.mobile-nav-overlay.is-open .mobile-nav-backdrop {
opacity: 1
}
.mobile-nav-overlay.is-opening .mobile-navigation,
.mobile-nav-overlay.is-open .mobile-navigation {
transform: translateX(0)
}
.mobile-nav-overlay.is-closing .mobile-navigation {
transform: translateX(-100%)
}
.mobile-nav-overlay.is-closing .mobile-nav-backdrop {
opacity: 0
}
@media (prefers-reduced-motion: reduce) {
.mobile-nav-overlay .mobile-navigation,
.mobile-nav-overlay .mobile-nav-backdrop {
transition: none
}
}
body.is-mobile-nav-open {
overflow: hidden
}
.mobile-nav-backdrop:focus-visible {
outline: 2px solid #fff;
outline-offset: -2px
}
.header-search {
position: relative;
flex: 1 1 auto;
min-width: 0
}
.header-search .search-form {
width: 100%
}
.search-suggest {
position: absolute;
left: 0;
right: 0;
top: calc(100% + 6px);
z-index: 1000;
display: none
}
.search-suggest:has(.search-suggest__panel:not([hidden])),
.search-suggest:has(.search-suggest__all:not([hidden])),
.search-suggest.is-open {
display: block
}
.search-suggest__panel {
background: #fff;
border: 1px solid var(--color-border-input, #d5d5d5);
max-height: 420px;
overflow-y: auto;
overscroll-behavior: contain;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
padding: 4px 0;
z-index: 1000
}
.search-suggest__panel[hidden],
.search-suggest__all[hidden] {
display: none
}
.search-suggest__item {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 12px;
min-height: 56px;
color: var(--color-text);
text-decoration: none;
border-bottom: 1px solid var(--color-border-divider, #ebebeb)
}
.search-suggest__item:last-child {
border-bottom: 0
}
.search-suggest__item:hover,
.search-suggest__item.is-active {
background: #f6f6f6
}
.search-suggest__item:focus-visible {
outline: 2px solid var(--color-brand);
outline-offset: -2px
}
.search-suggest__thumb {
width: 56px;
height: 56px;
flex: 0 0 56px;
display: block;
overflow: hidden;
background: #f0f0f0
}
.search-suggest__thumb img {
width: 100%;
height: 100%;
object-fit: cover;
display: block
}
.search-suggest__body {
flex: 1 1 auto;
min-width: 0;
display: flex;
flex-direction: column;
gap: 3px
}
.search-suggest__title {
font-family: var(--font-inter);
font-size: 14px;
line-height: 1.3;
color: var(--color-text);
display: -webkit-box;
-webkit-line-clamp: 1;
line-clamp: 1;
-webkit-box-orient: vertical;
overflow: hidden
}
.search-suggest__meta {
display: flex;
align-items: center;
gap: 8px;
font-family: var(--font-arial);
font-size: 12px;
color: var(--color-text-muted, #6b6b6b)
}
.search-suggest__price {
color: #c0392b;
font-weight: 700
}
.search-suggest__date {
color: var(--color-text-muted, #6b6b6b)
}
.search-suggest__tag {
flex: 0 0 auto;
font-family: var(--font-arial);
font-size: 10px;
line-height: 1;
letter-spacing: 0.04em;
text-transform: uppercase;
padding: 4px 7px;
border-radius: 999px;
border: 1px solid currentColor
}
.search-suggest__tag.is-product {
color: var(--color-brand)
}
.search-suggest__tag.is-post {
color: #6b6b6b
}
.search-suggest__empty {
margin: 0;
padding: 18px 14px;
font-family: var(--font-arial);
font-size: 13px;
color: var(--color-text-muted, #6b6b6b);
text-align: center
}
.search-suggest__all {
display: block;
padding: 11px 12px;
font-family: var(--font-inter);
font-size: 13px;
font-weight: 600;
text-align: center;
color: var(--color-brand);
text-decoration: none;
background: #fafafa;
border-top: 1px solid var(--color-border-divider, #ebebeb)
}
.search-suggest__all:hover {
background: #f1f1f1
}
@media (max-width: 1023px) {
.search-suggest__panel {
max-height: 60vh
}
.search-suggest__title {
-webkit-line-clamp: 2;
line-clamp: 2
}
}
.search-results__section {
margin-bottom: 40px
}
.search-results__section:last-of-type {
margin-bottom: 0
}
.search-results__heading {
margin: 0 0 18px
}
@media (max-width: 767px) {
.search-results__section {
margin-bottom: 32px
}
.search-results__count,
.search-results-count {
font-size: 13px
}
}
.error-404 {
font-family: var(--font-arimo);
color: var(--color-text);
font-size: 14px;
line-height: 1.6
}
.error-404__inner {
display: grid;
grid-template-columns: 360px minmax(0, 1fr);
gap: 48px;
align-items: center;
padding: 56px 0 64px
}
.error-404__visual {
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
text-align: center
}
.error-404__code {
font-family: var(--font-inter);
font-weight: 800;
font-size: 180px;
line-height: 1;
letter-spacing: -4px;
background: linear-gradient(135deg, var(--color-brand) 0%, var(--color-brand-soft) 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
margin: 0
}
.error-404__visual-label {
font-family: var(--font-inter);
font-size: 14px;
font-weight: 600;
color: var(--color-text-muted);
text-transform: uppercase;
letter-spacing: 0.12em;
margin: 0
}
.error-404__visual-line {
width: 64px;
height: 3px;
background: var(--color-brand);
border-radius: var(--radius-pill)
}
.error-404__body {
min-width: 0
}
.error-404__eyebrow {
display: inline-block;
font-family: var(--font-inter);
font-size: 12px;
font-weight: 700;
color: var(--color-brand-dark);
text-transform: uppercase;
letter-spacing: 0.1em;
margin-bottom: 12px;
padding: 4px 10px;
background: var(--color-brand-tint);
border-radius: var(--radius-pill)
}
.error-404__title {
font-family: var(--font-inter);
font-size: 32px;
line-height: 1.25;
font-weight: 700;
color: var(--color-text-strong);
margin: 0 0 12px
}
.error-404__desc {
font-size: 15px;
line-height: 1.7;
color: var(--color-text-muted);
margin: 0 0 24px;
max-width: 56ch
}
.error-404__search {
margin: 0 0 28px;
max-width: 480px
}
.error-404__search .search-form {
flex: 0 1 auto;
max-width: 100%;
width: 100%;
height: 48px;
border-color: var(--color-border-card);
border-radius: var(--radius-sm)
}
.error-404__search .search-field {
flex: 1 1 auto;
width: 100%;
height: 100%;
padding: 0 16px;
border: 0;
background: transparent;
font-family: var(--font-inter);
font-size: 14px;
color: var(--color-text);
outline: none
}
.error-404__search .search-field::placeholder {
color: var(--color-text-meta)
}
.error-404__search .search-submit {
flex: 0 0 auto;
height: 100%;
width: 56px;
border: 0;
background: var(--color-brand);
color: var(--color-text-strong);
font-family: var(--font-inter);
font-size: 0;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
transition: background 0.18s ease;
position: relative
}
.error-404__search .search-submit::before {
content: "";
width: 18px;
height: 18px;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: center;
background-size: contain
}
.error-404__search .search-submit:hover,
.error-404__search .search-submit:focus-visible {
background: var(--color-brand-dark);
outline: none
}
.error-404__search .search-submit:focus-visible {
box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--color-brand)
}
.error-404__quick-links-label {
font-family: var(--font-inter);
font-size: 13px;
font-weight: 600;
color: var(--color-text-muted);
text-transform: uppercase;
letter-spacing: 0.08em;
margin: 0 0 12px
}
.error-404__quick-links {
list-style: none;
margin: 0 0 28px;
padding: 0;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
max-width: 480px
}
.error-404__quick-links li {
list-style: none;
margin: 0;
padding: 0
}
.error-404__quick-links a {
display: flex;
align-items: center;
gap: 10px;
padding: 12px 14px;
background: #fff;
border: 1px solid var(--color-border-divider);
border-radius: var(--radius-sm);
font-family: var(--font-inter);
font-size: 14px;
font-weight: 500;
color: var(--color-text-strong);
text-decoration: none;
transition: border-color 0.18s ease, background 0.18s ease, transform 0.18s ease
}
.error-404__quick-links a::before {
content: "";
width: 8px;
height: 8px;
flex: 0 0 auto;
border-radius: 50%;
background: var(--color-brand)
}
.error-404__quick-links a::after {
content: "";
width: 14px;
height: 14px;
flex: 0 0 auto;
margin-left: auto;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: center;
background-size: contain;
transition: transform 0.18s ease
}
.error-404__quick-links a:hover,
.error-404__quick-links a:focus-visible {
border-color: var(--color-brand);
background: var(--color-brand-tint);
color: var(--color-text-strong);
outline: none
}
.error-404__quick-links a:hover::after,
.error-404__quick-links a:focus-visible::after {
transform: translateX(2px);
background-image: url("data:image/svg+xml;utf8,")
}
.error-404__actions {
display: flex;
flex-wrap: wrap;
gap: 12px;
align-items: center
}
.error-404__actions .btn {
height: 48px;
padding: 0 24px;
font-size: 15px;
text-decoration: none
}
.error-404__actions .btn-primary {
display: inline-flex;
align-items: center;
gap: 8px
}
.error-404__actions .btn-primary::after {
content: "";
width: 16px;
height: 16px;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: center;
background-size: contain;
transition: transform 0.18s ease
}
.error-404__actions .btn-primary:hover::after {
transform: translateX(2px)
}
.error-404__actions .error-404__back-link {
font-family: var(--font-inter);
font-size: 14px;
font-weight: 500;
color: var(--color-text-muted);
text-decoration: none;
padding: 8px 4px;
border-bottom: 1px solid transparent;
transition: color 0.18s ease, border-color 0.18s ease
}
.error-404__actions .error-404__back-link:hover,
.error-404__actions .error-404__back-link:focus-visible {
color: var(--color-text-strong);
border-bottom-color: var(--color-brand);
outline: none
}
@media (max-width: 1023px) {
.error-404__inner {
grid-template-columns: 1fr;
gap: 32px;
padding: 40px 0 48px
}
.error-404__code {
font-size: 140px
}
.error-404__title {
font-size: 28px
}
.error-404__quick-links {
grid-template-columns: repeat(2, minmax(0, 1fr))
}
}
@media (max-width: 767px) {
.error-404__inner {
gap: 24px;
padding: 32px 0 40px
}
.error-404__code {
font-size: 112px;
letter-spacing: -2px
}
.error-404__title {
font-size: 24px;
line-height: 1.3
}
.error-404__desc {
font-size: 14px
}
.error-404__quick-links {
grid-template-columns: 1fr
}
.error-404__actions .btn {
width: 100%;
justify-content: center
}
}
.site-header {
background: var(--color-white)
}
@media (min-width: 1024px) {
.site-header .main-nav {
transition: box-shadow 200ms ease
}
body.is-scrolled .site-header .main-nav {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 100;
height: 50px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06)
}
;
}
@media (max-width: 1023px) {
.site-header .mobile-search-row {
transition: box-shadow 200ms ease;
background: var(--color-white)
}
body.is-scrolled .site-header .mobile-search-row {
position: fixed;
top: 0;
padding: 5px;
left: 0;
right: 0;
z-index: 100;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06)
}
}
@media (prefers-reduced-motion: reduce) {
.site-header,
.site-header .topbar,
.site-header .main-header,
.site-header .main-nav,
.site-header .logo,
.site-header .mobile-search-row,
.site-header::after {
transition: none
}
}
.comment-form-trigger {
margin: 0 0 24px;
display: flex;
justify-content: flex-start
}
.comment-form-trigger__btn {
display: inline-flex;
align-items: center;
justify-content: center;
height: 44px;
padding: 0 28px;
background: var(--color-brand);
border: 0;
border-radius: var(--radius-xs);
font-family: var(--font-arimo);
font-size: 15px;
font-weight: 700;
color: var(--color-text-strong);
cursor: pointer;
transition: background 0.15s ease, transform 0.15s ease
}
.comment-form-trigger__btn:hover {
filter: brightness(0.95)
}
.comment-form-trigger__btn:active {
transform: translateY(1px)
}
.comment-form-trigger__btn:focus-visible {
outline: 2px solid var(--color-brand);
outline-offset: 2px
}
.comment-form-overlay {
position: fixed;
inset: 0;
z-index: 9999;
background: rgba(0, 0, 0, 0.55);
display: none;
align-items: center;
justify-content: center;
padding: 24px
}
.comment-form-overlay.is-open {
display: flex;
animation: gtsg-overlay-in 0.18s ease-out both
}
@keyframes gtsg-overlay-in {
from {
opacity: 0
}
to {
opacity: 1
}
}
.comment-form-overlay[hidden] {
display: none !important
}
.comment-form-modal {
background: #fff;
border-radius: 12px;
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.18);
width: 100%;
max-width: 640px;
max-height: calc(100vh - 48px);
overflow: hidden;
display: flex;
flex-direction: column;
animation: gtsg-modal-in 0.22s ease-out
}
@keyframes gtsg-modal-in {
from {
transform: translateY(16px);
opacity: 0
}
to {
transform: translateY(0);
opacity: 1
}
}
.comment-form-modal__head {
display: flex;
align-items: center;
justify-content: space-between;
padding: 16px 20px;
border-bottom: 1px solid var(--color-border-divider);
flex-shrink: 0
}
.comment-form-modal__title {
margin: 0;
font-family: var(--font-inter);
font-size: 18px;
font-weight: 700;
line-height: 26px;
color: var(--color-text-strong)
}
.comment-form-modal__close {
background: transparent;
border: 0;
width: 36px;
height: 36px;
border-radius: 50%;
font-size: 24px;
line-height: 1;
color: var(--color-text-strong);
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
transition: background 0.15s ease
}
.comment-form-modal__close:hover {
background: rgba(0, 0, 0, 0.05)
}
.comment-form-modal__close:focus-visible {
outline: 2px solid var(--color-brand);
outline-offset: 2px
}
.comment-form-modal__body,
.comment-form-modal .comment-respond,
.comment-form-modal #respond {
padding: 20px 24px 24px;
overflow-y: auto;
flex: 1;
background: transparent;
border: 0;
margin: 0
}
.comment-form-modal .comment-form {
background: transparent;
border: 0;
border-radius: 0;
padding: 0;
margin: 0
}
.comment-form-modal .comment-form__field {
margin-bottom: 16px
}
.comment-form-modal .comment-form__row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
margin-bottom: 16px
}
@media (max-width: 600px) {
.comment-form-modal .comment-form__row {
grid-template-columns: 1fr
}
}
.comment-form-modal__body #cancel-comment-reply-link,
.comment-form-modal #cancel-comment-reply-link {
margin-left: 8px;
font-size: 13px;
color: var(--color-text-meta)
}
.comment-form-modal .comment-reply-title,
.comment-form-modal #reply-title {
display: none
}
.comment-form-modal .comment-form p.comment-form-author,
.comment-form-modal .comment-form p.comment-form-email,
.comment-form-modal .comment-form p.comment-form-url,
.comment-form-modal .comment-form p.comment-form-cookies-consent,
.comment-form-modal .comment-form p.comment-notes {
margin: 0 0 16px;
font-size: 14px;
color: var(--color-text)
}
.comment-form-modal .comment-form p.comment-form-author label,
.comment-form-modal .comment-form p.comment-form-email label,
.comment-form-modal .comment-form p.comment-form-url label {
display: block;
margin-bottom: 6px;
font-weight: 600;
color: var(--color-text-strong)
}
.comment-form-modal .comment-form p.comment-form-author input,
.comment-form-modal .comment-form p.comment-form-email input,
.comment-form-modal .comment-form p.comment-form-url input {
width: 100%;
padding: 10px 12px;
border: 1px solid var(--color-border-divider);
border-radius: var(--radius-xs);
font-family: var(--font-arimo);
font-size: 14px;
background: #fff;
color: var(--color-text-strong);
box-sizing: border-box
}
.comment-form-modal .comment-form p.comment-form-author input:focus,
.comment-form-modal .comment-form p.comment-form-email input:focus,
.comment-form-modal .comment-form p.comment-form-url input:focus {
border-color: var(--color-brand);
outline: 0;
box-shadow: 0 0 0 3px rgba(208, 28, 28, 0.12)
}
.comment-form-modal .comment-form__submit-wrap {
display: flex;
align-items: center;
gap: 12px;
margin: 8px 0 0
}
.comment-form-modal .comment-form__submit {
background: var(--color-brand);
color: var(--color-text-strong);
border: 0;
padding: 0 28px;
height: 44px;
border-radius: var(--radius-xs);
font-family: var(--font-arimo);
font-size: 15px;
font-weight: 700;
cursor: pointer;
transition: filter 0.15s ease, transform 0.15s ease
}
.comment-form-modal .comment-form__submit:hover {
filter: brightness(0.95)
}
.comment-form-modal .comment-form__submit:active {
transform: translateY(1px)
}
.comment-form-modal .comment-form__submit:focus-visible {
outline: 2px solid var(--color-brand);
outline-offset: 2px
}
.comment-form-modal .comment-form textarea {
width: 100%;
min-height: 110px;
padding: 10px 12px;
border: 1px solid var(--color-border-divider);
border-radius: var(--radius-xs);
font-family: var(--font-arimo);
font-size: 14px;
background: #fff;
color: var(--color-text-strong);
box-sizing: border-box;
resize: vertical
}
.comment-form-modal .comment-form textarea:focus {
border-color: var(--color-brand);
outline: 0;
box-shadow: 0 0 0 3px rgba(208, 28, 28, 0.12)
}
.comment-form-modal .comment-form input[type="tel"] {
width: 100%;
padding: 10px 12px;
border: 1px solid var(--color-border-divider);
border-radius: var(--radius-xs);
font-family: var(--font-arimo);
font-size: 14px;
background: #fff;
color: var(--color-text-strong);
box-sizing: border-box
}
.comment-form-modal .comment-form input[type="tel"]:focus {
border-color: var(--color-brand);
outline: 0;
box-shadow: 0 0 0 3px rgba(208, 28, 28, 0.12)
}
@media (max-width: 767px) {
.comment-form-overlay {
padding: 0;
align-items: flex-end;
justify-content: stretch
}
.comment-form-modal {
max-width: 100%;
width: 100%;
max-height: 92vh;
height: auto;
border-radius: 16px 16px 0 0;
animation: gtsg-modal-sheet-up 0.28s cubic-bezier(0.22, 1, 0.36, 1)
}
@keyframes gtsg-modal-sheet-up {
from {
transform: translateY(100%)
}
to {
transform: translateY(0)
}
}
.comment-form-modal__head {
padding-top: 18px
}
.comment-form-modal__body {
padding: 16px 18px 24px
}
}
html.gtsg-modal-open,
html.gtsg-modal-open body {
overflow: hidden
}
@media (prefers-reduced-motion: reduce) {
.comment-form-overlay.is-open,
.comment-form-modal,
.comment-form-trigger__btn {
animation: none;
transition: none
}
}
.comment-phone {
margin: 8px 0 0;
font-size: 13px;
color: var(--color-text-meta)
}
.comment-phone a {
color: var(--color-brand);
text-decoration: none;
font-weight: 600
}
.comment-phone a:hover {
text-decoration: underline
}