@media only screen and (max-width: 768px) { .ywbc-action-results table.ywbc-search-by-products .ywbc-search-row td{
width: 100%;
text-align: center;
}
.ywbc-stock-unit-description{
display: block;
}
}
table.ywbc-shortcode-table td{
border: unset !important;
}
table.ywbc-shortcode-table{
border: none;
margin: 2em 1em;
}
.ywbc-search-row{
font-size: 14px;
}
.ywbc-search-row a{
text-decoration: none;
}
.ywgc-shortcode-product-image-name-container{
display: inline-flex;
}
.ywgc-shortcode-product-name{
margin-left: 10px;
}
.ywbc-search-product-row-title, .ywbc-search-order-row-title{
font-size: 14px;
}
tr.ywbc-search-row div.ywbc-search-product-barcode-value, tr.ywbc-search-row div.ywbc-search-order-barcode-value{
text-align: center;
}
#ywbc-stock-unit{
min-width: unset;
width: 5em;
font-size: 14px;
}
.ywbc-stock-input-container{
margin-bottom: 1em;
display: block;
}
.ywbc-stock-unit-description{
font-size: 12px;
display: block;
margin-top: 5px;
}
.ywbc-booking-info{
width: 15em;
}
.select-store-id-container{
margin-bottom: 2em;
} .ywbc-shortcode-form:not(.open) {
text-align: center;
background-color: #f2f2f2;
padding: 50px 30px;
border-radius: 5px;
margin-left: auto;
margin-right: auto;
width: 50%;
}
.ywbc-shortcode-form.open {
text-align: center;
background-color: #f2f2f2;
padding: 50px 0 0 0;
border-radius: 5px;
margin-left: auto;
margin-right: auto;
width: 100%;
}
.ywbc-shortcode-form-title{
text-transform: uppercase;
margin: 0;
font-size: 15px;
text-align: left;
margin-left: 10%;
margin-bottom: 10px;
}
.ywbc-shortcode-form-label{
display: block;
font-weight: bold;
text-align: left;
margin-left: 10%;
}
.ywbc-shortcode-text-input{
margin: 10px 0;
width: 80%;
}
.ywbc-shortcode-actions-container{
width: 100%;
display: flow-root;
background-color: #eaeaea;
}
.ywbc-shortcode-actions-div{
float: right;
margin-left: 10px;
}
.ywbc-shortcode-actions-div button.ywbc-action{
margin-top: 15px;
}
td.ywbc-order-purchased-products{
width: 25%;
}
.ywbc-stock-manage-container{
display: flex;
margin-top: 5px;
}
.ywbc-stock-input-container{
margin: 0 5px;
}
button.ywbc-action svg {
width: 30px;
height: 35px;
}
.ywbc-stock-buttons-actions-div .ywbc-action{
padding: 0;
margin: 0 !important;
color: #448a85;
background-color: #f2f2f2;
border: unset;
}
.ywbc-product-stock-value{
margin-left: 20%;
}
input#ywbc-stock-unit::-webkit-outer-spin-button,
input#ywbc-stock-unit::-webkit-inner-spin-button { -webkit-appearance: none;
margin: 0; }
input#ywbc-stock-unit {
-moz-appearance:textfield; text-align: center;
}
th.ywbc-product-title{
width: 30%
}
th.ywbc-product-price{
width: 10%
}
th.ywbc-barcode-value{
width: 20%
}
th.ywbc-barcode-status{
width: 20%
}
th.ywbc-product-status{
width: 10%
}
td.ywbc-product-barcode {
text-align: center !important;
}:root {
--tw-bg: #f5f9fc;
--tw-bg-soft: #edf5f8;
--tw-panel: #ffffff;
--tw-panel-2: #f7fafc;
--tw-text: #0b2942;
--tw-text-soft: #5d7385;
--tw-border: #d6e4ea;
--tw-accent: #00a8c6;
--tw-accent-2: #e58a2b;
--tw-header-bg: #ffffff;
--tw-header-text: #0b2942;
--tw-footer-bg: #061725;
--tw-footer-text: #edf7fb;
--tw-button-text: #ffffff;
--tw-danger: #c74343;
--tw-success: #1f9d68;
--tw-shadow: 0 16px 40px rgba(4, 42, 66, .09);
--tw-radius: 18px;
--tw-container: 1460px;
}*,
*::before,
*::after {
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
}
body {
margin: 0;
background: var(--tw-bg);
color: var(--tw-text);
font-size: 16px;
line-height: 1.55;
}
img {
max-width: 100%;
height: auto;
display: block;
}
a {
color: inherit;
text-decoration: none;
}
.tw-container {
width: min(100% - 24px, var(--tw-container));
margin-inline: auto;
}
.tw-main {
min-height: 60vh;
}
.tw-content-wrap {
padding: 32px 0 48px;
}
.tw-card {
background: linear-gradient(180deg, var(--tw-panel), var(--tw-panel-2));
border: 1px solid var(--tw-border);
border-radius: var(--tw-radius);
padding: 24px;
box-shadow: var(--tw-shadow);
}
.tw-loop {
display: grid;
gap: 18px;
}
.tw-page-title,
.tw-post-title,
.tw-section-head h2 {
margin: 0 0 12px;
}
.tw-post-title a:hover {
color: var(--tw-accent-2);
}
.tw-post-excerpt,
.tw-page-content,
.tw-section-head p {
color: var(--tw-text-soft);
}
.tw-section-head {
margin-bottom: 20px;
}
.tw-section-kicker {
display: inline-block;
margin-bottom: 10px;
color: var(--tw-accent-2);
font-weight: 700;
letter-spacing: .04em;
text-transform: uppercase;
font-size: .82rem;
}
.tw-home-section {
padding: 26px 0;
}
.tw-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
min-height: 46px;
padding: 0 18px;
border-radius: 12px;
border: 1px solid var(--tw-border);
transition: .2s ease;
font-weight: 700;
}
.tw-btn:hover {
transform: translateY(-1px);
}
.tw-btn--accent {
background: linear-gradient(135deg, var(--tw-accent), var(--tw-accent-2));
color: #141414;
border-color: transparent;
}
.tw-btn--ghost {
background: rgba(255,255,255,.03);
color: var(--tw-text);
}
.tw-btn--small {
min-height: 40px;
padding: 0 14px;
font-size: .92rem;
}
.tw-pagination {
margin-top: 24px;
}
.tw-footer {
margin-top: 40px;
background:
radial-gradient(circle at top left, rgba(1, 176, 204, .14), transparent 32%),
radial-gradient(circle at top right, rgba(220, 129, 36, .14), transparent 28%),
linear-gradient(180deg, #07111d 0%, #081521 52%, #071019 100%);
border-top: 1px solid rgba(255,255,255,.08);
color: #eef6fb;
}
.tw-footer__top {
padding: 30px 0 20px;
}
.tw-footer__grid {
display: grid;
grid-template-columns: minmax(0, 1.05fr) minmax(0, 1.05fr) minmax(0, .9fr);
gap: 20px;
align-items: start;
}
.tw-footer__card {
position: relative;
overflow: hidden;
background: linear-gradient(180deg, rgba(255,255,255,.06) 0%, rgba(255,255,255,.03) 100%);
border: 1px solid rgba(255,255,255,.10);
border-radius: 22px;
padding: 24px;
box-shadow: 0 22px 54px rgba(0,0,0,.22);
backdrop-filter: blur(8px);
}
.tw-footer__card::before {
content: "";
position: absolute;
inset: 0 auto auto 0;
width: 100%;
height: 1px;
background: linear-gradient(90deg, rgba(1,176,204,.55), rgba(220,129,36,.55), transparent 90%);
}
.tw-footer__eyebrow {
display: inline-flex;
align-items: center;
min-height: 30px;
padding: 0 12px;
border-radius: 999px;
border: 1px solid rgba(255,255,255,.10);
background: rgba(255,255,255,.05);
color: #9fe8f2;
font-size: .75rem;
font-weight: 800;
letter-spacing: .1em;
text-transform: uppercase;
}
.tw-footer__title {
margin: 16px 0 10px;
font-size: clamp(1.65rem, 2.8vw, 2.25rem);
line-height: 1.08;
color: #ffffff;
}
.tw-footer__lead {
margin: 0;
color: rgba(238,246,251,.82);
font-size: 1rem;
line-height: 1.72;
}
.tw-footer__quick-actions {
display: grid;
gap: 12px;
margin-top: 22px;
}
.tw-footer__action {
display: flex;
flex-direction: column;
gap: 4px;
padding: 14px 16px;
border-radius: 16px;
border: 1px solid rgba(255,255,255,.10);
background: rgba(255,255,255,.04);
color: #fff;
transition: transform .18s ease, border-color .18s ease, background .18s ease;
}
.tw-footer__action:hover {
transform: translateY(-1px);
border-color: rgba(1,176,204,.45);
background: rgba(255,255,255,.06);
}
.tw-footer__action--accent {
background: linear-gradient(135deg, rgba(1,176,204,.20), rgba(220,129,36,.18));
}
.tw-footer__action-label {
font-size: .76rem;
font-weight: 800;
letter-spacing: .08em;
text-transform: uppercase;
color: rgba(238,246,251,.68);
}
.tw-footer__action strong {
font-size: 1rem;
line-height: 1.35;
}
.tw-footer__info-list {
display: grid;
gap: 14px;
margin-top: 18px;
}
.tw-footer__info-item strong,
.tw-footer__card-title {
display: block;
margin: 0 0 6px;
color: #fff;
font-size: .98rem;
font-weight: 800;
}
.tw-footer__info-item p {
margin: 0;
color: rgba(238,246,251,.82);
line-height: 1.68;
}
.tw-footer__info-item a:hover,
.tw-footer__links-list a:hover,
.tw-footer-nav a:hover,
.tw-footer__map-link:hover {
color: #9fe8f2;
}
.tw-footer__map-wrap {
margin-top: 18px;
border-radius: 18px;
overflow: hidden;
border: 1px solid rgba(255,255,255,.10);
background: rgba(0,0,0,.18);
}
.tw-footer__map {
display: block;
width: 100%;
height: 190px;
border: 0;
}
.tw-footer__map-link {
display: inline-flex;
align-items: center;
gap: 8px;
margin-top: 14px;
font-weight: 700;
color: #f2f8fc;
}
.tw-footer__links-columns {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 18px;
margin-top: 18px;
}
.tw-footer__links-list,
.tw-footer-nav {
list-style: none;
margin: 0;
padding: 0;
display: grid;
gap: 10px;
}
.tw-footer__links-list a,
.tw-footer-nav a {
color: rgba(238,246,251,.84);
line-height: 1.5;
}
.tw-footer__note-bar {
border-top: 1px solid rgba(255,255,255,.08);
border-bottom: 1px solid rgba(255,255,255,.08);
background: rgba(255,255,255,.03);
}
.tw-footer__note-inner {
padding: 16px 0;
}
.tw-footer__note {
color: rgba(238,246,251,.82);
font-size: .96rem;
line-height: 1.7;
}
.tw-footer__note strong {
color: #ffffff;
}
.tw-footer__bottom {
padding: 16px 0 20px;
}
.tw-footer__bottom-inner {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
gap: 12px 18px;
align-items: center;
}
.tw-footer__copy,
.tw-footer__credit {
margin: 0;
color: rgba(238,246,251,.66);
font-size: .9rem;
line-height: 1.6;
}
.tw-footer__credit {
text-align: right;
}
@media (max-width: 1100px) {
.tw-footer__grid {
grid-template-columns: 1fr 1fr;
}
.tw-footer__card--links {
grid-column: 1 / -1;
}
}
@media (max-width: 767px) {
.tw-footer {
margin-top: 28px;
}
.tw-footer__top {
padding-top: 24px;
}
.tw-footer__grid,
.tw-footer__links-columns {
grid-template-columns: 1fr;
}
.tw-footer__card {
padding: 20px;
border-radius: 18px;
}
.tw-footer__map {
height: 210px;
}
.tw-footer__bottom-inner {
flex-direction: column;
align-items: flex-start;
}
.tw-footer__credit {
text-align: left;
}
}.tw-topbar {
border-bottom: 1px solid rgba(14, 171, 250, 0.14);
background:
linear-gradient(90deg, rgba(15, 53, 104, 0.38), rgba(26, 33, 43, 0.88)),
#1A212B;
font-size: .92rem;
}
.tw-topbar__inner {
min-height: 40px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
}
.tw-topbar__left {
color: #C8D4E0;
}
.tw-topbar__right {
display: flex;
align-items: center;
gap: 14px;
}
.tw-topbar__right a {
color: #F5F8FB;
font-weight: 600;
transition: color .18s ease, opacity .18s ease;
}
.tw-topbar__right a:hover {
color: #0EABFA;
}
.tw-header {
position: sticky;
top: 0;
z-index: 50;
background: color-mix(in srgb, var(--tw-bg-soft) 84%, white 16%);
backdrop-filter: blur(14px);
border-bottom: 1px solid color-mix(in srgb, var(--tw-border) 88%, var(--tw-text) 12%);
box-shadow: 0 8px 22px rgba(0, 0, 0, 0.06);
transition:
background .22s ease,
border-color .22s ease,
box-shadow .22s ease;
}
.tw-header.is-scrolled {
background: color-mix(in srgb, var(--tw-panel) 90%, white 10%);
border-bottom-color: color-mix(in srgb, var(--tw-border) 84%, var(--tw-text) 16%);
box-shadow: 0 12px 26px rgba(0, 0, 0, 0.08);
}
.tw-main-header {
display: block;
position: relative;
z-index: 80;
}
.tw-main-header__inner {
position: relative;
z-index: 81;
overflow: visible;
min-height: 88px;
display: grid;
grid-template-columns: 220px minmax(420px, 1fr) auto;
align-items: center;
gap: 18px;
}
.tw-site-brand,
.custom-logo-link {
display: inline-flex;
align-items: center;
}
.tw-site-brand {
font-size: 1.35rem;
font-weight: 800;
color: var(--tw-text);
letter-spacing: .01em;
}
.tw-site-brand:hover {
color: var(--tw-accent);
} .tw-search-form {
position: relative;
width: 100%;
margin: 0;
}
.tw-search-form--live {
position: relative;
z-index: 90;
}
.tw-main-header__search {
position: relative;
z-index: 85;
overflow: visible;
}
.tw-search-shell {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: stretch;
gap: 10px;
}
.tw-search-input-wrap {
position: relative;
min-width: 0;
}
.tw-search-input-icon {
position: absolute;
left: 15px;
top: 50%;
transform: translateY(-50%);
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--tw-text-soft);
pointer-events: none;
transition: color .18s ease, transform .18s ease;
}
.tw-search-input {
width: 100%;
min-height: 46px;
height: 46px;
border: 1px solid color-mix(in srgb, var(--tw-border) 86%, var(--tw-text) 14%);
border-radius: 5px;
background: var(--tw-panel);
color: var(--tw-text);
padding: 0 42px 0 44px;
outline: none;
font-size: .95rem;
font-weight: 600;
transition:
border-color .18s ease,
box-shadow .18s ease,
background .18s ease,
transform .18s ease;
}
.tw-search-input::placeholder {
color: var(--tw-text-soft);
}
.tw-search-input:hover {
border-color: color-mix(in srgb, var(--tw-accent) 28%, var(--tw-border) 72%);
}
.tw-search-input:focus {
border-color: color-mix(in srgb, var(--tw-accent) 48%, var(--tw-border) 52%);
box-shadow:
0 0 0 3px color-mix(in srgb, var(--tw-accent) 12%, transparent),
0 8px 18px rgba(0, 0, 0, 0.05);
background: color-mix(in srgb, var(--tw-panel) 94%, white 6%);
}
.tw-search-input-wrap:focus-within .tw-search-input-icon {
color: var(--tw-accent);
transform: translateY(-50%) scale(1.04);
}
.tw-search-clear {
position: absolute;
right: 10px;
top: 50%;
transform: translateY(-50%);
width: 24px;
height: 24px;
border: 1px solid color-mix(in srgb, var(--tw-border) 78%, white 22%);
border-radius: 4px;
background: color-mix(in srgb, var(--tw-bg-soft) 74%, white 26%);
color: var(--tw-text-soft);
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 17px;
line-height: 1;
cursor: pointer;
transition:
background .18s ease,
color .18s ease,
transform .18s ease,
border-color .18s ease;
}
.tw-search-clear:hover {
background: color-mix(in srgb, var(--tw-accent) 14%, white 86%);
color: var(--tw-text);
border-color: color-mix(in srgb, var(--tw-accent) 32%, var(--tw-border) 68%);
transform: translateY(-50%);
}
.tw-search-button {
min-height: 46px;
height: 46px;
padding: 0 14px;
border: 1px solid color-mix(in srgb, var(--tw-accent) 38%, var(--tw-border) 62%);
border-radius: 5px;
background: var(--tw-accent);
color: #ffffff;
cursor: pointer;
font-weight: 800;
font-size: .90rem;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 7px;
white-space: nowrap;
transition:
transform .18s ease,
box-shadow .18s ease,
border-color .18s ease,
background .18s ease;
box-shadow: 0 6px 14px rgba(0, 0, 0, 0.10);
}
.tw-search-button:hover {
transform: translateY(-1px);
border-color: color-mix(in srgb, var(--tw-accent-2) 42%, var(--tw-accent) 58%);
background: color-mix(in srgb, var(--tw-accent) 86%, var(--tw-accent-2) 14%);
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.12);
}
.tw-search-button:focus-visible {
outline: none;
box-shadow:
0 0 0 4px color-mix(in srgb, var(--tw-accent) 16%, transparent),
0 12px 22px rgba(0, 0, 0, 0.12);
}
.tw-search-button__icon {
display: inline-flex;
align-items: center;
justify-content: center;
}
.tw-search-button__text {
line-height: 1;
} .tw-search-live-panel {
position: absolute;
top: calc(100% + 10px);
left: 0;
width: 100%;
z-index: 99999;
}
.tw-search-live-panel__inner {
background: var(--tw-panel);
border: 1px solid color-mix(in srgb, var(--tw-border) 84%, var(--tw-text) 16%);
border-radius: 6px;
box-shadow: 0 16px 30px rgba(0, 0, 0, 0.10);
overflow: hidden;
backdrop-filter: blur(12px);
}
.tw-search-live-state {
padding: 16px 18px;
color: var(--tw-text-soft);
font-size: .94rem;
}
.tw-search-live-results {
display: grid;
gap: 0;
}
.tw-search-live-item {
display: grid;
grid-template-columns: 58px minmax(0, 1fr) auto;
align-items: center;
gap: 12px;
padding: 12px 14px;
border-bottom: 1px solid color-mix(in srgb, var(--tw-border) 72%, white 28%);
transition: background .18s ease;
}
.tw-search-live-item:last-child {
border-bottom: 0;
}
.tw-search-live-item:hover {
background: color-mix(in srgb, var(--tw-accent) 6%, white 94%);
}
.tw-search-live-thumb {
width: 58px;
height: 58px;
border-radius: 4px;
overflow: hidden;
background: color-mix(in srgb, var(--tw-bg-soft) 70%, white 30%);
border: 1px solid color-mix(in srgb, var(--tw-border) 72%, white 28%);
display: flex;
align-items: center;
justify-content: center;
}
.tw-search-live-thumb img {
width: 100%;
height: 100%;
object-fit: cover;
}
.tw-search-live-content {
min-width: 0;
display: grid;
gap: 5px;
}
.tw-search-live-title {
color: var(--tw-text);
font-weight: 800;
font-size: .94rem;
line-height: 1.22;
text-decoration: none;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.tw-search-live-title:hover {
color: var(--tw-accent);
}
.tw-search-live-meta {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 8px 10px;
}
.tw-search-live-price {
color: var(--tw-accent-2);
font-weight: 800;
font-size: .94rem;
}
.tw-search-live-stock {
display: inline-flex;
align-items: center;
gap: 6px;
min-height: 24px;
padding: 0 8px;
border-radius: 3px;
font-size: .76rem;
font-weight: 800;
letter-spacing: .01em;
border: 1px solid transparent;
}
.tw-search-live-stock--in {
color: #148A47;
background: rgba(20, 138, 71, 0.10);
border-color: rgba(20, 138, 71, 0.18);
}
.tw-search-live-stock--out {
color: #B54A4A;
background: rgba(181, 74, 74, 0.10);
border-color: rgba(181, 74, 74, 0.16);
}
.tw-search-live-actions {
display: flex;
align-items: center;
justify-content: flex-end;
}
.tw-search-live-add {
min-height: 34px;
padding: 0 11px;
border-radius: 4px;
border: 1px solid color-mix(in srgb, var(--tw-accent) 26%, var(--tw-border) 74%);
background: color-mix(in srgb, var(--tw-bg-soft) 78%, white 22%);
color: var(--tw-text);
font-size: .82rem;
font-weight: 800;
text-decoration: none;
display: inline-flex;
align-items: center;
justify-content: center;
transition:
transform .18s ease,
background .18s ease,
border-color .18s ease,
box-shadow .18s ease,
color .18s ease;
}
.tw-search-live-add:hover {
transform: translateY(-1px);
border-color: color-mix(in srgb, var(--tw-accent) 34%, var(--tw-border) 66%);
background:
linear-gradient(180deg, color-mix(in srgb, var(--tw-accent) 16%, white 84%), color-mix(in srgb, var(--tw-panel) 82%, var(--tw-accent) 18%));
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.08);
color: var(--tw-accent);
}
.tw-search-live-footer {
padding: 12px 14px 14px;
border-top: 1px solid color-mix(in srgb, var(--tw-border) 72%, white 28%);
background: color-mix(in srgb, var(--tw-bg-soft) 84%, white 16%);
}
.tw-search-live-footer__all {
width: 100%;
min-height: 40px;
border: 1px solid color-mix(in srgb, var(--tw-accent) 26%, var(--tw-border) 74%);
border-radius: 4px;
background: color-mix(in srgb, var(--tw-panel) 92%, white 8%);
color: var(--tw-text);
font-weight: 800;
cursor: pointer;
transition:
transform .18s ease,
color .18s ease,
border-color .18s ease,
background .18s ease;
}
.tw-search-live-footer__all:hover {
transform: translateY(-1px);
color: var(--tw-accent);
border-color: color-mix(in srgb, var(--tw-accent) 34%, var(--tw-border) 66%);
background:
linear-gradient(180deg, color-mix(in srgb, var(--tw-panel) 90%, white 10%), color-mix(in srgb, var(--tw-accent) 14%, white 86%));
} .tw-main-header__actions {
display: flex;
align-items: center;
gap: 10px;
flex-wrap: nowrap;
justify-content: flex-end;
}
.tw-action-link {
min-height: 42px;
padding: 0 13px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
border-radius: 5px;
background: var(--tw-panel);
border: 1px solid color-mix(in srgb, var(--tw-border) 86%, var(--tw-text) 14%);
color: var(--tw-text);
font-weight: 700;
transition:
transform .18s ease,
border-color .18s ease,
box-shadow .18s ease,
color .18s ease,
background .18s ease;
}
.tw-action-link:hover {
transform: translateY(-1px);
color: var(--tw-accent);
border-color: color-mix(in srgb, var(--tw-accent) 35%, var(--tw-border) 65%);
background: color-mix(in srgb, var(--tw-panel) 90%, white 10%);
box-shadow: 0 8px 18px rgba(0, 0, 0, 0.06);
}
.tw-action-link--wa {
position: relative;
background: color-mix(in srgb, var(--tw-panel) 90%, white 10%);
border-color: color-mix(in srgb, var(--tw-accent) 32%, var(--tw-border) 68%);
color: var(--tw-text);
}
.tw-action-link--wa::before {
content: "";
width: 17px;
height: 17px;
display: inline-block;
flex: 0 0 17px;
background-repeat: no-repeat;
background-position: center;
background-size: contain;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath fill='%2325D366' d='M19.11 17.21c-.27-.13-1.61-.79-1.86-.88-.25-.09-.43-.13-.61.13-.18.27-.7.88-.86 1.06-.16.18-.31.2-.58.07-.27-.13-1.12-.41-2.13-1.31-.79-.7-1.32-1.57-1.48-1.84-.15-.27-.02-.41.11-.54.12-.12.27-.31.4-.47.13-.16.18-.27.27-.45.09-.18.04-.34-.02-.47-.07-.13-.61-1.47-.83-2.01-.22-.53-.45-.46-.61-.47h-.52c-.18 0-.47.07-.72.34-.25.27-.95.93-.95 2.26s.97 2.62 1.11 2.8c.13.18 1.9 2.9 4.61 4.06.64.28 1.15.45 1.54.57.65.21 1.24.18 1.71.11.52-.08 1.61-.66 1.84-1.29.23-.63.23-1.17.16-1.29-.06-.11-.24-.18-.51-.31Z'/%3E%3Cpath fill='%2325D366' d='M27.06 4.9A15.83 15.83 0 0 0 16.02.5C7.48.5.55 7.42.55 15.96c0 2.72.71 5.39 2.06 7.73L.5 31.5l7.99-2.09a15.36 15.36 0 0 0 7.53 1.92h.01c8.54 0 15.47-6.93 15.47-15.47 0-4.14-1.61-8.03-4.44-10.96Zm-11.03 23.8h-.01a12.9 12.9 0 0 1-6.57-1.79l-.47-.28-4.74 1.24 1.27-4.62-.31-.48a12.87 12.87 0 0 1-1.98-6.82C3.22 8.84 8.9 3.16 16.03 3.16c3.44 0 6.67 1.34 9.1 3.77a12.79 12.79 0 0 1 3.76 9.1c0 7.13-5.68 12.81-12.86 12.81Z'/%3E%3C/svg%3E");
}
.tw-action-link--wa:hover {
color: var(--tw-accent);
border-color: color-mix(in srgb, var(--tw-accent) 44%, var(--tw-border) 56%);
background: linear-gradient(180deg, color-mix(in srgb, var(--tw-accent) 18%, white 82%), color-mix(in srgb, var(--tw-panel-2) 82%, var(--tw-accent) 18%));
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
}
.tw-action-link--cart:hover {
color: var(--tw-accent);
} @media (min-width: 992px) {
.tw-main-header__inner {
gap: 16px;
}
.tw-action-link,
.tw-search-button,
.tw-search-input,
.tw-search-live-add,
.tw-search-live-footer__all,
.tw-dropdown-panel__links a {
letter-spacing: .01em;
}
.tw-action-link,
.tw-search-button {
min-height: 44px;
}
.tw-dropdown-panel,
.tw-search-live-panel__inner {
outline: 1px solid color-mix(in srgb, var(--tw-border) 72%, white 28%);
outline-offset: -1px;
}
}
.tw-mobile-header {
display: none;
}
.tw-mobile-header__inner {
min-height: 68px;
display: grid;
grid-template-columns: 52px 1fr 52px;
align-items: center;
gap: 12px;
}
.tw-mobile-toggle,
.tw-mobile-cart,
.tw-mobile-close {
min-width: 42px;
min-height: 42px;
border-radius: 8px;
border: 1px solid rgba(14, 171, 250, 0.14);
background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.04));
color: #F5F8FB;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition:
transform .18s ease,
border-color .18s ease,
color .18s ease,
background .18s ease;
}
.tw-mobile-toggle:hover,
.tw-mobile-cart:hover,
.tw-mobile-close:hover {
transform: translateY(-1px);
color: #0EABFA;
border-color: rgba(14, 171, 250, 0.28);
background: linear-gradient(180deg, rgba(255,255,255,.14), rgba(14,171,250,.06));
}
.tw-mobile-search {
padding-bottom: 14px;
}
.tw-action-dropdown {
position: relative;
display: block;
flex: 0 0 auto;
overflow: visible;
padding-bottom: 10px;
margin-bottom: -10px;
}
.tw-dropdown-panel {
position: absolute;
top: calc(100% + 2px);
left: auto;
right: 0;
transform: none;
width: 260px;
min-width: 260px;
max-width: calc(100vw - 24px);
margin: 0;
background: var(--tw-panel);
border: 1px solid color-mix(in srgb, var(--tw-border) 84%, var(--tw-text) 16%);
border-radius: 6px;
box-shadow: 0 16px 30px rgba(0, 0, 0, 0.10);
padding: 12px;
z-index: 9999;
}
.tw-dropdown-panel__head {
display: grid;
gap: 3px;
padding: 2px 2px 12px;
border-bottom: 1px solid var(--tw-border);
margin-bottom: 12px;
}
.tw-dropdown-panel__head strong {
color: var(--tw-text);
font-size: .98rem;
}
.tw-dropdown-panel__head span {
color: var(--tw-text-soft);
font-size: .88rem;
}
.tw-dropdown-panel__links {
display: grid;
gap: 8px;
}
.tw-dropdown-panel__links a {
display: block;
padding: 10px 12px;
border-radius: 4px;
color: var(--tw-text);
background: color-mix(in srgb, var(--tw-panel) 92%, white 8%);
border: 1px solid color-mix(in srgb, var(--tw-border) 84%, white 16%);
transition: color .18s ease, border-color .18s ease, background .18s ease, transform .18s ease;
}
.tw-dropdown-panel__links a:hover {
color: var(--tw-accent);
border-color: color-mix(in srgb, var(--tw-accent) 30%, var(--tw-border) 70%);
background: linear-gradient(180deg, color-mix(in srgb, var(--tw-panel) 90%, white 10%), color-mix(in srgb, var(--tw-accent) 8%, var(--tw-panel-2) 92%));
transform: translateY(-1px);
} .tw-action-dropdown--categories {
padding-bottom: 14px;
margin-bottom: -14px;
}
.tw-action-dropdown--categories .tw-action-link--categories {
min-width: 176px !important;
padding: 0 16px !important;
border-radius: 5px !important;
border: 1px solid var(--tw-header-cats-border, var(--tw-accent)) !important;
background:
linear-gradient(
180deg,
color-mix(in srgb, var(--tw-header-cats-bg, var(--tw-accent)) 88%, white 12%),
var(--tw-header-cats-bg, var(--tw-accent))
) !important;
color: var(--tw-header-cats-text, #ffffff) !important;
box-shadow: 0 10px 22px rgba(0, 0, 0, 0.10) !important;
}
.tw-action-dropdown--categories .tw-action-link--categories:hover {
transform: translateY(-1px);
border-color: color-mix(in srgb, var(--tw-header-cats-border, var(--tw-accent)) 76%, var(--tw-header-cats-bg, var(--tw-accent)) 24%) !important;
background:
linear-gradient(
180deg,
color-mix(in srgb, var(--tw-header-cats-bg, var(--tw-accent)) 82%, white 18%),
color-mix(in srgb, var(--tw-header-cats-bg, var(--tw-accent)) 92%, black 8%)
) !important;
color: var(--tw-header-cats-text, #ffffff) !important;
box-shadow: 0 14px 26px rgba(0, 0, 0, 0.14) !important;
}
.tw-action-dropdown--categories .tw-action-link--categories .tw-action-link__icon {
opacity: 0.96;
}
.tw-dropdown-panel--category-tree {
width: min(380px, calc(100vw - 28px)) !important;
min-width: 320px !important;
max-width: calc(100vw - 28px) !important;
padding: 14px !important;
border-radius: 0 0 8px 8px !important;
border: 1px solid color-mix(in srgb, var(--tw-border) 78%, var(--tw-accent) 22%) !important;
border-top: 0 !important;
background:
linear-gradient(
180deg,
color-mix(in srgb, var(--tw-panel) 94%, white 6%),
color-mix(in srgb, var(--tw-panel) 90%, var(--tw-bg-soft) 10%)
) !important;
box-shadow: 0 22px 44px rgba(0, 0, 0, 0.16) !important;
overflow: visible !important;
}
.tw-dropdown-panel--category-tree > div:first-child {
padding: 2px 2px 12px !important;
margin-bottom: 12px !important;
border-bottom: 1px solid color-mix(in srgb, var(--tw-border) 84%, white 16%) !important;
}
.tw-dropdown-panel--category-tree .tw-category-node + .tw-category-node {
margin-top: 7px;
}
.tw-dropdown-panel--category-tree .tw-category-node > a {
min-height: 48px !important;
padding: 11px 12px !important;
border-radius: 5px !important;
border: 1px solid color-mix(in srgb, var(--tw-border) 82%, white 18%) !important;
background:
linear-gradient(
180deg,
color-mix(in srgb, var(--tw-panel) 95%, white 5%),
color-mix(in srgb, var(--tw-panel) 92%, var(--tw-bg-soft) 8%)
) !important;
box-shadow: none !important;
}
.tw-dropdown-panel--category-tree .tw-category-node > a:hover {
background:
linear-gradient(
180deg,
color-mix(in srgb, var(--tw-accent) 12%, white 88%),
color-mix(in srgb, var(--tw-panel) 88%, var(--tw-accent) 12%)
) !important;
border-color: color-mix(in srgb, var(--tw-accent) 34%, var(--tw-border) 66%) !important;
color: var(--tw-accent) !important;
box-shadow: 0 10px 18px rgba(0, 0, 0, 0.06) !important;
}
.tw-dropdown-panel--category-tree .tw-category-node > a .tw-category-link__main {
min-width: 0;
}
.tw-dropdown-panel--category-tree .tw-category-node > a .tw-category-link__main > span:last-child {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.tw-dropdown-panel--category-tree .tw-category-node > a .tw-category-link__arrow {
color: color-mix(in srgb, var(--tw-text-soft) 86%, var(--tw-accent) 14%) !important;
}
.tw-dropdown-panel--category-tree .tw-category-submenu {
min-width: 286px !important;
padding: 12px !important;
border-radius: 0 8px 8px 8px !important;
border: 1px solid color-mix(in srgb, var(--tw-border) 78%, var(--tw-accent) 22%) !important;
background:
linear-gradient(
180deg,
color-mix(in srgb, var(--tw-panel) 95%, white 5%),
color-mix(in srgb, var(--tw-panel) 92%, var(--tw-bg-soft) 8%)
) !important;
box-shadow: 0 18px 34px rgba(0, 0, 0, 0.14) !important;
}
.tw-dropdown-panel--category-tree .tw-category-submenu__head {
padding: 0 0 10px !important;
margin-bottom: 10px !important;
border-bottom: 1px solid color-mix(in srgb, var(--tw-border) 84%, white 16%) !important;
}
.tw-dropdown-panel--category-tree .tw-category-submenu__subtitle {
color: var(--tw-text-soft) !important;
}
@media (max-width: 1199.98px) {
.tw-action-dropdown--categories .tw-action-link--categories {
min-width: 162px !important;
}
.tw-dropdown-panel--category-tree {
width: min(340px, calc(100vw - 24px)) !important;
min-width: 300px !important;
}
} .tw-main-header__logo {
display: flex;
align-items: center;
gap: 12px;
min-width: 0;
}
.tw-main-header__logo .custom-logo-link,
.tw-main-header__logo .tw-site-brand {
flex: 0 1 auto;
min-width: 0;
}
.tw-main-header__logo img,
.tw-site-brand img,
.custom-logo-link img {
max-height: 58px;
width: auto;
}
.tw-main-header__signal {
display: inline-flex;
align-items: center;
gap: 8px;
min-width: 0;
padding-left: 2px;
}
.tw-main-header__signal strong {
display: block;
font-size: .78rem;
letter-spacing: .08em;
text-transform: uppercase;
color: var(--tw-accent-2);
font-weight: 900;
}
.tw-main-header__signal span {
min-width: 0;
}
.tw-main-header__signal > span:last-child {
display: grid;
gap: 1px;
min-width: 0;
line-height: 1;
}
.tw-main-header__signal > span:last-child span {
display: block;
font-size: .76rem;
color: var(--tw-text-soft);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 230px;
}
.tw-main-header__inner {
grid-template-columns: minmax(220px, auto) minmax(360px, 1fr) auto;
}
.tw-main-header__search {
min-width: 0;
}
.tw-search-shell {
gap: 8px;
}
.tw-search-input {
min-width: 0;
}
.tw-main-header__actions {
min-width: 0;
gap: 8px;
}
.tw-action-link {
min-height: 44px;
padding: 0 12px;
border-radius: 4px;
font-size: .92rem;
}
.tw-action-link > span:last-child {
white-space: nowrap;
}
.tw-action-link--account,
.tw-action-link--cart,
.tw-action-link--wa {
backdrop-filter: blur(10px);
}
.tw-action-link--account {
background: linear-gradient(180deg, color-mix(in srgb, var(--tw-panel) 96%, white 4%), color-mix(in srgb, var(--tw-bg-soft) 86%, white 14%));
}
.tw-action-link--cart {
border-color: color-mix(in srgb, var(--tw-accent) 24%, var(--tw-border) 76%);
}
.tw-dropdown-panel {
border-radius: 8px;
box-shadow: 0 18px 36px rgba(0, 0, 0, 0.12);
}
.tw-dropdown-panel--account,
.tw-dropdown-panel--wa,
.tw-dropdown-panel--cart {
overflow: hidden;
}
.tw-dropdown-panel__links a {
border-radius: 5px;
font-weight: 700;
}
.tw-search-live-panel__inner,
.tw-dropdown-panel {
background: color-mix(in srgb, var(--tw-panel) 95%, white 5%);
}
.tw-search-live-item {
align-items: stretch;
}
.tw-search-live-content {
align-content: center;
}
.tw-search-live-add {
min-width: 94px;
}
.tw-search-live-footer__all {
border-radius: 4px;
}
@media (max-width: 1399.98px) {
.tw-main-header__inner {
grid-template-columns: minmax(200px, auto) minmax(300px, 1fr) auto;
gap: 14px;
}
.tw-main-header__signal > span:last-child span {
max-width: 180px;
}
}
@media (max-width: 1199.98px) {
.tw-main-header__inner {
grid-template-columns: minmax(180px, auto) minmax(260px, 1fr) auto;
gap: 12px;
min-height: 84px;
}
.tw-main-header__signal {
display: none;
}
.tw-action-link {
padding: 0 11px;
}
.tw-action-link > span:last-child {
max-width: 110px;
overflow: hidden;
text-overflow: ellipsis;
}
}
@media (max-width: 991.98px) {
.tw-main-header {
display: none;
}
.tw-mobile-header {
display: block;
}
} .tw-header {
overflow: visible;
}
.tw-auth-hangtab-wrap {
position: absolute;
right: clamp(14px, 3vw, 36px);
bottom: -18px;
z-index: 96;
pointer-events: none;
}
.tw-auth-hangtab {
position: relative;
pointer-events: auto;
appearance: none;
-webkit-appearance: none;
border: 0;
min-height: 48px;
padding: 0 18px 0 14px;
display: inline-flex;
align-items: center;
gap: 10px;
border-radius: 0 0 10px 10px;
background: linear-gradient(180deg, #e23b30 0%, #c62020 100%);
color: #fff;
cursor: pointer;
box-shadow: 0 14px 28px rgba(139, 0, 0, 0.22);
transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.tw-auth-hangtab::before {
content: "";
position: absolute;
top: -8px;
right: 16px;
width: 82px;
height: 10px;
border-radius: 8px 8px 0 0;
background: #8f1414;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.18);
}
.tw-auth-hangtab:hover,
.tw-auth-hangtab:focus-visible {
transform: translateY(2px);
box-shadow: 0 10px 20px rgba(139, 0, 0, 0.24);
filter: saturate(1.03);
}
.tw-auth-hangtab:focus-visible {
outline: 0;
box-shadow:
0 0 0 4px rgba(226, 59, 48, 0.18),
0 10px 20px rgba(139, 0, 0, 0.24);
}
.tw-auth-hangtab__flag {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 64px;
min-height: 28px;
padding: 0 10px;
border-radius: 999px;
background: rgba(255,255,255,0.16);
border: 1px solid rgba(255,255,255,0.24);
font-size: .73rem;
font-weight: 900;
letter-spacing: .04em;
text-transform: uppercase;
white-space: nowrap;
}
.tw-auth-hangtab__text {
font-size: .88rem;
font-weight: 900;
line-height: 1;
white-space: nowrap;
}
@media (max-width: 991px) {
.tw-auth-hangtab-wrap {
position: fixed;
right: 12px;
bottom: 78px;
top: auto;
}
.tw-auth-hangtab {
min-height: 44px;
padding: 0 14px 0 12px;
border-radius: 999px;
}
.tw-auth-hangtab::before {
display: none;
}
.tw-auth-hangtab__flag {
min-width: 58px;
min-height: 24px;
font-size: .68rem;
}
.tw-auth-hangtab__text {
font-size: .8rem;
}
}
@media (max-width: 520px) {
.tw-auth-hangtab {
gap: 8px;
padding: 0 12px;
}
.tw-auth-hangtab__text {
font-size: .76rem;
}
} .tw-topbar--announcement{
position:relative;
z-index:95;
border:0;
border-bottom:1px solid rgba(0,76,130,.08);
background:linear-gradient(90deg,#002c52 0%,#014964 55%,#0d6f78 100%);
color:#fff;
font-size:.84rem;
}
.tw-topbar--announcement .tw-topbar__inner{
min-height:34px;
justify-content:center;
position:relative;
gap:14px;
}
.tw-topbar__message{display:flex;align-items:center;justify-content:center;gap:10px;min-width:0}
.tw-topbar__badge{display:inline-flex;align-items:center;min-height:22px;padding:0 8px;border-radius:999px;background:rgba(255,255,255,.13);border:1px solid rgba(255,255,255,.18);font-size:.67rem;font-weight:900;letter-spacing:.07em;text-transform:uppercase;white-space:nowrap}
.tw-topbar__text{font-weight:750;letter-spacing:.005em;text-align:center}
.tw-topbar__cta{display:inline-flex;align-items:center;gap:6px;color:#fff!important;font-size:.78rem;font-weight:900;text-decoration:none;white-space:nowrap;opacity:.92}
.tw-topbar__cta:hover{color:#fff!important;opacity:1;text-decoration:underline;text-underline-offset:3px}
.tw-brand-logo{display:inline-flex;align-items:center;justify-content:flex-start;text-decoration:none;line-height:0;max-width:100%}
.tw-brand-logo img{display:block;width:auto;height:auto;object-fit:contain;filter:drop-shadow(0 5px 12px rgba(0,44,82,.10))}
.tw-main-header__logo{align-items:center!important}
.tw-main-header__logo .tw-brand-logo--header{width:min(100%,250px)}
.tw-main-header__logo .tw-brand-logo--header img{width:100%;max-height:76px}
.tw-main-header__inner{min-height:96px}
.tw-main-header__search{align-self:center}
.tw-main-header__actions{align-self:center}
@media (max-width:1399.98px) and (min-width:1101px){
.tw-main-header__logo .tw-brand-logo--header{width:min(100%,220px)}
.tw-main-header__logo .tw-brand-logo--header img{max-height:68px}
}
@media (max-width:1100px){
.tw-topbar--announcement .tw-topbar__inner{min-height:31px;padding:5px 12px}
.tw-topbar__badge{display:none}
.tw-topbar__text{font-size:.76rem;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tw-topbar__cta{font-size:.73rem}
}
@media (max-width:520px){
.tw-topbar--announcement .tw-topbar__inner{justify-content:center}
.tw-topbar__message{max-width:78vw}
.tw-topbar__cta{font-size:0;gap:0}
.tw-topbar__cta span{font-size:.88rem}
}.tw-desktop-nav,
.tw-mobile-panel {
--tw-nav-deep: #002C52;
--tw-nav-deep-2: #004662;
--tw-nav-teal: #11A9A7;
--tw-nav-cyan: #01B0CC;
--tw-nav-cyan-2: #01BDE8;
--tw-nav-orange: #DC8124;
--tw-nav-bronze: #AA7333;
--tw-nav-ink: #F3F6FA;
--tw-nav-ink-soft: rgba(243, 246, 250, 0.76);
--tw-nav-line: rgba(255, 255, 255, 0.10);
--tw-nav-line-strong: rgba(1, 176, 204, 0.26);
--tw-nav-radius: 0;
--tw-nav-shadow: 0 16px 34px rgba(0, 0, 0, 0.18);
--tw-nav-surface:
linear-gradient(180deg, color-mix(in srgb, var(--tw-panel, #1d212b) 92%, #ffffff 8%), color-mix(in srgb, var(--tw-panel-2, #252b36) 94%, #ffffff 6%));
--tw-nav-surface-soft:
linear-gradient(180deg, color-mix(in srgb, var(--tw-panel, #1d212b) 95%, #ffffff 5%), color-mix(in srgb, var(--tw-bg-soft, #171a21) 94%, #ffffff 6%));
--tw-nav-surface-light:
linear-gradient(180deg, rgba(255,255,255,0.985), rgba(246,249,252,0.985));
--tw-nav-border-soft: color-mix(in srgb, var(--tw-nav-cyan) 20%, var(--tw-border, rgba(255,255,255,.08)) 80%);
}
.tw-desktop-nav {
position: relative;
z-index: 36;
overflow: visible;
border-top: 1px solid color-mix(in srgb, var(--tw-nav-cyan) 10%, var(--tw-border, rgba(255,255,255,.08)) 90%);
border-bottom: 1px solid color-mix(in srgb, var(--tw-nav-cyan) 16%, var(--tw-border, rgba(255,255,255,.08)) 84%);
background: var(--tw-nav-surface);
box-shadow: inset 0 1px 0 rgba(255,255,255,0.05);
}
.tw-desktop-nav .tw-container,
.tw-desktop-nav__layout,
.tw-desktop-nav__menu,
.tw-desktop-nav__menu-shell {
overflow: visible;
}
.tw-desktop-nav__layout {
min-height: 58px;
}
.tw-desktop-nav__menu-shell {
position: relative;
}
.tw-action-link--categories-nav {
min-height: 46px !important;
border-radius: 0 !important;
background: linear-gradient(180deg, var(--tw-nav-cyan), color-mix(in srgb, var(--tw-nav-cyan) 74%, var(--tw-nav-deep) 26%)) !important;
border: 1px solid color-mix(in srgb, var(--tw-nav-cyan) 42%, var(--tw-nav-deep) 58%) !important;
color: #ffffff !important;
letter-spacing: .01em;
transition:
transform .18s ease,
filter .18s ease,
box-shadow .18s ease,
border-color .18s ease;
}
.tw-action-link--categories-nav:hover,
.tw-action-link--categories-nav:focus-visible {
transform: translateY(-1px);
filter: brightness(1.02);
box-shadow: 0 12px 24px rgba(0, 52, 84, 0.18);
}
.tw-action-link--categories-nav:focus-visible,
.tw-primary-menu > li > a:focus-visible,
.tw-primary-menu .sub-menu a:focus-visible,
.tw-mega-column__title:focus-visible,
.tw-mega-links__item:focus-visible,
.tw-mega-featured__button:focus-visible,
.tw-desktop-nav__categories-all:focus-visible,
.tw-mobile-panel__close:focus-visible,
.tw-mobile-panel__menu a:focus-visible,
.tw-mobile-extra-links a:focus-visible,
.tw-mobile-quick-links a:focus-visible {
outline: 2px solid var(--tw-nav-cyan);
outline-offset: 2px;
}
.tw-primary-menu,
.tw-mobile-menu,
.tw-mobile-panel__menu {
list-style: none;
margin: 0;
padding: 0;
}
.tw-primary-menu {
display: flex;
align-items: center;
justify-content: inherit;
gap: 6px;
min-height: 58px;
padding: 6px 0;
flex-wrap: nowrap;
}
.tw-primary-menu > li {
position: relative;
flex: 0 0 auto;
}
.tw-primary-menu > li > a {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
min-height: 44px;
padding: 0 15px;
color: var(--tw-text, #F3F6FA);
font-size: .93rem;
font-weight: 800;
line-height: 1;
letter-spacing: .01em;
border-radius: 0;
border: 1px solid transparent;
background: transparent;
transition:
color .18s ease,
background .18s ease,
border-color .18s ease,
transform .18s ease,
box-shadow .18s ease;
}
.tw-primary-menu > li:hover > a,
.tw-primary-menu > li:focus-within > a,
.tw-primary-menu > li.current-menu-item > a,
.tw-primary-menu > li.current-menu-ancestor > a,
.tw-primary-menu > li.current-menu-parent > a {
color: #ffffff;
background: linear-gradient(180deg, rgba(1,176,204,.18), rgba(0,44,82,.26));
border-color: color-mix(in srgb, var(--tw-nav-cyan) 32%, var(--tw-border, rgba(255,255,255,.08)) 68%);
}
.tw-primary-menu > li:hover > a,
.tw-primary-menu > li:focus-within > a {
transform: translateY(-1px);
box-shadow: 0 10px 18px rgba(0,0,0,.10);
}
.tw-primary-menu > li.current-menu-item::after,
.tw-primary-menu > li.current-menu-ancestor::after,
.tw-primary-menu > li.current-menu-parent::after,
.tw-primary-menu > li:hover::after,
.tw-primary-menu > li:focus-within::after {
content: "";
position: absolute;
left: 12px;
right: 12px;
bottom: 4px;
height: 2px;
background: linear-gradient(90deg, var(--tw-nav-cyan), var(--tw-nav-orange));
}
.tw-primary-menu > li.menu-item-has-children > a::after {
content: "";
width: 7px;
height: 7px;
border-right: 1.5px solid currentColor;
border-bottom: 1.5px solid currentColor;
transform: rotate(45deg) translateY(-1px);
opacity: .74;
transition: transform .18s ease, opacity .18s ease;
}
.tw-primary-menu > li.menu-item-has-children:hover > a::after,
.tw-primary-menu > li.menu-item-has-children:focus-within > a::after,
.tw-primary-menu > li.current-menu-ancestor > a::after {
transform: rotate(225deg) translateY(-1px);
opacity: 1;
}
.tw-primary-menu .sub-menu {
list-style: none;
margin: 0;
padding: 10px;
position: absolute;
top: calc(100% + 2px);
left: 0;
min-width: 250px;
background: var(--tw-nav-surface-light);
border: 1px solid rgba(0, 70, 98, 0.12);
box-shadow: 0 20px 34px rgba(0,0,0,.12);
display: grid;
gap: 6px;
opacity: 0;
visibility: hidden;
pointer-events: none;
transform: translateY(8px);
transition: opacity .18s ease, transform .18s ease, visibility .18s ease;
z-index: 80;
}
.tw-primary-menu > li:hover > .sub-menu,
.tw-primary-menu > li:focus-within > .sub-menu,
.tw-primary-menu .sub-menu > li:hover > .sub-menu,
.tw-primary-menu .sub-menu > li:focus-within > .sub-menu {
opacity: 1;
visibility: visible;
pointer-events: auto;
transform: translateY(0);
}
.tw-primary-menu .sub-menu li {
position: relative;
}
.tw-primary-menu .sub-menu a {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
min-height: 42px;
padding: 10px 12px;
color: #17364b;
font-weight: 700;
background: transparent;
border: 1px solid rgba(0, 70, 98, 0.10);
border-radius: 0;
line-height: 1.25;
transition:
color .18s ease,
background .18s ease,
border-color .18s ease,
transform .18s ease,
box-shadow .18s ease;
}
.tw-primary-menu .sub-menu a:hover,
.tw-primary-menu .sub-menu li:hover > a,
.tw-primary-menu .sub-menu li:focus-within > a {
color: var(--tw-nav-deep);
background: linear-gradient(180deg, rgba(1,176,204,.08), rgba(1,176,204,.03));
border-color: rgba(1,176,204,.26);
transform: translateX(1px);
box-shadow: 0 8px 16px rgba(0,0,0,.05);
}
.tw-primary-menu .sub-menu .menu-item-has-children > a::after {
content: "";
width: 7px;
height: 7px;
margin-left: auto;
border-right: 1.5px solid currentColor;
border-bottom: 1.5px solid currentColor;
transform: rotate(-45deg);
opacity: .78;
}
.tw-primary-menu .sub-menu .sub-menu {
top: -11px;
left: calc(100% - 1px);
}
.tw-menu-item--mega {
position: static !important;
}
.tw-mega-panel {
position: absolute;
top: calc(100% + 2px);
left: 0;
z-index: 95;
width: min(1180px, calc(100vw - 48px));
opacity: 0;
visibility: hidden;
pointer-events: none;
transform: translateY(10px);
transition: opacity .18s ease, transform .18s ease, visibility .18s ease;
}
.tw-menu-item--mega:hover > .tw-mega-panel,
.tw-menu-item--mega:focus-within > .tw-mega-panel {
opacity: 1;
visibility: visible;
pointer-events: auto;
transform: translateY(0);
}
.tw-primary-menu > .tw-menu-item--mega:last-child .tw-mega-panel,
.tw-primary-menu > .tw-menu-item--mega:nth-last-child(2) .tw-mega-panel {
left: auto;
right: 0;
}
.tw-mega-panel--narrow {
width: min(920px, calc(100vw - 48px));
}
.tw-mega-panel--wide {
width: min(1180px, calc(100vw - 48px));
}
.tw-mega-panel__inner {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(240px, 290px);
gap: 0;
background: var(--tw-nav-surface-light);
border: 1px solid rgba(0, 70, 98, 0.12);
box-shadow: 0 24px 42px rgba(0,0,0,.14);
overflow: hidden;
}
.tw-mega-panel__main {
min-width: 0;
}
.tw-mega-panel__top {
display: grid;
gap: 6px;
padding: 18px 22px 14px;
border-bottom: 1px solid rgba(0, 70, 98, 0.08);
background: linear-gradient(180deg, rgba(0, 70, 98, 0.03), rgba(1, 176, 204, 0.02));
}
.tw-mega-panel__eyebrow {
display: inline-flex;
align-items: center;
width: fit-content;
min-height: 24px;
padding: 0 9px;
font-size: .72rem;
font-weight: 800;
letter-spacing: .08em;
text-transform: uppercase;
color: var(--tw-nav-cyan);
background: rgba(1,176,204,.08);
border: 1px solid rgba(1,176,204,.18);
}
.tw-mega-panel__title {
margin: 0;
color: var(--tw-nav-deep);
font-size: 1.38rem;
line-height: 1.15;
font-weight: 900;
}
.tw-mega-panel__text {
margin: 0;
max-width: 72ch;
color: #4c6476;
font-size: .95rem;
line-height: 1.55;
}
.tw-mega-panel__empty {
margin: 18px 22px 22px;
padding: 14px 16px;
color: #4c6476;
background: rgba(1,176,204,.05);
border: 1px dashed rgba(1,176,204,.22);
}
.tw-mega-grid {
display: grid;
grid-template-columns: repeat(var(--tw-mega-grid-cols, 4), minmax(0, 1fr));
gap: 0;
}
.tw-mega-column {
min-width: 0;
padding: 18px 18px 20px;
border-right: 1px solid rgba(0, 70, 98, 0.08);
}
.tw-mega-column:last-child {
border-right: 0;
}
.tw-mega-column__head {
display: grid;
gap: 5px;
margin-bottom: 12px;
}
.tw-mega-column__title {
display: inline-flex;
align-items: center;
width: fit-content;
color: var(--tw-nav-deep);
font-size: .94rem;
font-weight: 900;
line-height: 1.2;
text-decoration: none;
}
.tw-mega-column__title:hover {
color: var(--tw-nav-cyan);
}
.tw-mega-column__desc {
margin: 0;
color: #678092;
font-size: .78rem;
line-height: 1.45;
}
.tw-mega-links {
display: grid;
gap: 8px;
}
.tw-mega-links__item {
display: flex;
align-items: flex-start;
gap: 10px;
min-height: 50px;
padding: 11px 12px;
color: #17364b;
text-decoration: none;
background: transparent;
border: 1px solid rgba(0, 70, 98, 0.09);
transition:
background .18s ease,
border-color .18s ease,
transform .18s ease,
box-shadow .18s ease,
color .18s ease;
}
.tw-mega-links__item:hover {
color: var(--tw-nav-deep);
background: linear-gradient(180deg, rgba(1,176,204,.08), rgba(1,176,204,.03));
border-color: rgba(1,176,204,.26);
transform: translateY(-1px);
box-shadow: 0 10px 18px rgba(0,0,0,.05);
}
.tw-mega-links__copy {
display: grid;
gap: 4px;
min-width: 0;
flex: 1 1 auto;
}
.tw-mega-links__copy strong {
display: block;
font-size: .88rem;
line-height: 1.28;
font-weight: 800;
}
.tw-mega-links__copy small {
display: block;
color: #678092;
font-size: .74rem;
line-height: 1.45;
}
.tw-mega-links__thumb {
display: inline-flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
flex: 0 0 36px;
overflow: hidden;
background: linear-gradient(180deg, rgba(1,176,204,.10), rgba(1,176,204,.04));
border: 1px solid rgba(1,176,204,.18);
}
.tw-mega-links__thumb img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.tw-mega-links__thumb--icon,
.tw-mega-links__arrow {
color: var(--tw-nav-cyan);
}
.tw-mega-links__arrow {
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 16px;
margin-top: 1px;
}
.tw-mega-featured {
display: grid;
align-content: start;
gap: 12px;
padding: 16px;
background:
radial-gradient(circle at top right, rgba(1,176,204,.14) 0%, transparent 34%),
linear-gradient(180deg, rgba(0,44,82,.97), rgba(0,70,98,.96));
color: #ffffff;
}
.tw-mega-featured__badge {
display: inline-flex;
width: fit-content;
align-items: center;
min-height: 25px;
padding: 0 10px;
background: rgba(255,255,255,.10);
border: 1px solid rgba(255,255,255,.16);
color: #ffffff;
font-size: .72rem;
font-weight: 800;
letter-spacing: .04em;
text-transform: uppercase;
}
.tw-mega-featured__media {
overflow: hidden;
min-height: 156px;
background: rgba(255,255,255,.06);
border: 1px solid rgba(255,255,255,.12);
}
.tw-mega-featured__media img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.tw-mega-featured__body {
display: grid;
gap: 9px;
}
.tw-mega-featured__body h4 {
margin: 0;
font-size: 1.08rem;
line-height: 1.22;
font-weight: 900;
}
.tw-mega-featured__body p {
margin: 0;
color: rgba(255,255,255,.82);
font-size: .85rem;
line-height: 1.58;
}
.tw-mega-featured__button {
display: inline-flex;
align-items: center;
justify-content: center;
width: fit-content;
min-height: 42px;
padding: 0 16px;
background: linear-gradient(180deg, var(--tw-nav-orange), color-mix(in srgb, var(--tw-nav-orange) 78%, var(--tw-nav-bronze) 22%));
border: 1px solid color-mix(in srgb, var(--tw-nav-orange) 48%, var(--tw-nav-deep) 52%);
color: #ffffff;
text-decoration: none;
font-size: .88rem;
font-weight: 900;
letter-spacing: .01em;
transition: transform .18s ease, filter .18s ease, box-shadow .18s ease;
}
.tw-mega-featured__button:hover {
transform: translateY(-1px);
filter: brightness(1.02);
box-shadow: 0 10px 18px rgba(0,0,0,.14);
}
.tw-dropdown-panel--category-tree {
background: var(--tw-nav-surface-light) !important;
border: 1px solid rgba(0, 70, 98, 0.12) !important;
border-top: 0 !important;
box-shadow: 0 20px 34px rgba(0,0,0,.12) !important;
}
.tw-desktop-nav__categories-head {
display: grid;
gap: 4px;
padding: 0 2px 12px;
margin-bottom: 12px;
border-bottom: 1px solid rgba(0, 70, 98, 0.08);
}
.tw-desktop-nav__categories-head strong {
color: var(--tw-nav-deep);
font-size: .95rem;
font-weight: 900;
}
.tw-desktop-nav__categories-head span {
color: #678092;
font-size: .78rem;
line-height: 1.45;
}
.tw-desktop-nav__categories-scroll {
max-height: min(66vh, 620px);
overflow: auto;
padding-right: 2px;
}
.tw-header-cats-tree,
.tw-header-cat-submenu__body {
display: grid;
gap: 7px;
}
.tw-header-cat-node {
position: relative;
}
.tw-header-cat-link {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
min-height: 46px;
padding: 10px 12px;
color: #17364b;
text-decoration: none;
background: transparent;
border: 1px solid rgba(0, 70, 98, 0.09);
transition: background .18s ease, border-color .18s ease, transform .18s ease, box-shadow .18s ease, color .18s ease;
}
.tw-header-cat-link:hover,
.tw-header-cat-node:hover > .tw-header-cat-link,
.tw-header-cat-node:focus-within > .tw-header-cat-link {
color: var(--tw-nav-deep);
background: linear-gradient(180deg, rgba(1,176,204,.08), rgba(1,176,204,.03));
border-color: rgba(1,176,204,.26);
transform: translateY(-1px);
box-shadow: 0 10px 18px rgba(0,0,0,.05);
}
.tw-header-cat-link__main {
display: flex;
align-items: center;
gap: 10px;
min-width: 0;
flex: 1 1 auto;
}
.tw-header-cat-link__thumb,
.tw-header-cat-link__icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 34px;
height: 34px;
flex: 0 0 34px;
overflow: hidden;
background: linear-gradient(180deg, rgba(1,176,204,.10), rgba(1,176,204,.04));
border: 1px solid rgba(1,176,204,.18);
color: var(--tw-nav-cyan);
}
.tw-header-cat-link__thumb img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.tw-header-cat-link__label {
display: block;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: .88rem;
line-height: 1.25;
font-weight: 800;
}
.tw-header-cat-link__arrow {
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 16px;
color: var(--tw-nav-cyan);
}
.tw-header-cat-submenu {
display: none;
position: absolute;
top: 0;
left: calc(100% + 8px);
width: min(320px, 44vw);
padding: 12px;
background: var(--tw-nav-surface-light);
border: 1px solid rgba(0, 70, 98, 0.12);
box-shadow: 0 20px 34px rgba(0,0,0,.12);
z-index: 10;
}
.tw-header-cat-node:hover > .tw-header-cat-submenu,
.tw-header-cat-node:focus-within > .tw-header-cat-submenu {
display: block;
}
.tw-header-cat-submenu__inner {
display: grid;
gap: 10px;
}
.tw-header-cat-submenu__head {
display: grid;
gap: 3px;
padding-bottom: 10px;
border-bottom: 1px solid rgba(0, 70, 98, 0.08);
}
.tw-header-cat-submenu__head strong {
color: var(--tw-nav-deep);
font-size: .9rem;
font-weight: 900;
}
.tw-header-cat-submenu__head span {
color: #678092;
font-size: .76rem;
line-height: 1.4;
}
.tw-desktop-nav__categories-footer {
padding-top: 12px;
margin-top: 12px;
border-top: 1px solid rgba(0, 70, 98, 0.08);
}
.tw-desktop-nav__categories-all {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 40px;
padding: 0 14px;
color: var(--tw-nav-deep);
text-decoration: none;
font-weight: 900;
background: rgba(1,176,204,.06);
border: 1px solid rgba(1,176,204,.18);
transition: background .18s ease, border-color .18s ease, transform .18s ease;
}
.tw-desktop-nav__categories-all:hover {
background: rgba(1,176,204,.10);
border-color: rgba(1,176,204,.28);
transform: translateY(-1px);
}
.tw-mobile-panel[hidden] {
display: none !important;
}
.tw-mobile-panel {
position: fixed;
inset: 0;
z-index: 999;
}
.tw-mobile-panel__overlay {
position: absolute;
inset: 0;
background: rgba(0,0,0,.58);
backdrop-filter: blur(2px);
}
.tw-mobile-panel__drawer {
position: absolute;
top: 0;
left: 0;
width: min(90vw, 380px);
height: 100%;
background:
radial-gradient(circle at top right, rgba(1,176,204,.12) 0%, transparent 30%),
linear-gradient(180deg, rgba(0,44,82,.98), rgba(0,70,98,.96));
border-right: 1px solid rgba(1,176,204,.16);
box-shadow: 0 18px 40px rgba(0,0,0,.30);
display: flex;
flex-direction: column;
}
.tw-mobile-panel__head {
min-height: 66px;
padding: 0 16px;
border-bottom: 1px solid rgba(255,255,255,.10);
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
color: #F3F6FA;
}
.tw-mobile-panel__head strong {
font-size: 1rem;
font-weight: 900;
}
.tw-mobile-panel__head span,
.tw-mobile-panel__head small {
color: rgba(243,246,250,.76);
}
.tw-mobile-panel__close {
display: inline-flex;
align-items: center;
justify-content: center;
width: 38px;
height: 38px;
border: 1px solid rgba(255,255,255,.16);
background: rgba(255,255,255,.06);
color: #F3F6FA;
}
.tw-mobile-panel__body {
padding: 14px;
overflow-y: auto;
}
.tw-mobile-panel__menu,
.tw-mobile-menu {
display: grid;
gap: 8px;
}
.tw-mobile-panel__menu li,
.tw-mobile-menu li {
list-style: none;
}
.tw-mobile-panel__menu a,
.tw-mobile-menu li a,
.tw-mobile-extra-links a,
.tw-mobile-quick-links a {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
min-height: 46px;
padding: 11px 13px;
color: #F3F6FA;
text-decoration: none;
background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.03));
border: 1px solid rgba(1,176,204,.16);
transition: color .18s ease, border-color .18s ease, background .18s ease, transform .18s ease;
}
.tw-mobile-panel__menu a:hover,
.tw-mobile-menu li a:hover,
.tw-mobile-extra-links a:hover,
.tw-mobile-quick-links a:hover {
color: #ffffff;
border-color: rgba(1,176,204,.32);
background: linear-gradient(180deg, rgba(1,176,204,.14), rgba(255,255,255,.04));
transform: translateY(-1px);
}
.tw-mobile-panel__menu .sub-menu,
.tw-mobile-menu .sub-menu {
display: grid;
gap: 7px;
padding: 8px 0 0 14px;
}
.tw-mobile-panel__menu .sub-menu a,
.tw-mobile-menu .sub-menu a {
min-height: 42px;
background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.025));
border-color: rgba(255,255,255,.10);
}
.tw-mobile-extra-links,
.tw-mobile-quick-links {
display: grid;
gap: 10px;
margin-top: 18px;
}
.tw-mobile-extra-links a {
border-color: rgba(220,129,36,.22);
background: linear-gradient(180deg, rgba(220,129,36,.16), rgba(255,255,255,.03));
}
.tw-mobile-extra-links a:hover {
border-color: rgba(220,129,36,.34);
background: linear-gradient(180deg, rgba(220,129,36,.22), rgba(255,255,255,.04));
}
@media (max-width: 1200px) {
.tw-mega-panel,
.tw-mega-panel--wide,
.tw-mega-panel--narrow {
width: min(1020px, calc(100vw - 40px));
}
}
@media (max-width: 1100px) {
.tw-mega-panel__inner {
grid-template-columns: minmax(0, 1fr);
}
.tw-mega-featured {
display: none;
}
.tw-mega-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 991.98px) {
.tw-desktop-nav,
.tw-mega-panel,
.tw-header-cat-submenu {
display: none !important;
}
}
@media (max-width: 680px) {
.tw-mobile-panel__drawer {
width: min(92vw, 360px);
}
}
@media (prefers-reduced-motion: reduce) {
.tw-desktop-nav *,
.tw-mobile-panel * {
transition: none !important;
animation: none !important;
scroll-behavior: auto !important;
}
}.tw-mobile-header,
.tw-mobile-panel,
.tw-mobile-search-panel,
.tw-mobile-cart-panel,
.tw-mobile-bottom-bar {
display: none;
}
.tw-mobile-panel[hidden],
.tw-mobile-search-panel[hidden],
.tw-mobile-cart-panel[hidden] {
display: none !important;
}
@media (max-width: 1100px) {
.tw-main-header__inner {
grid-template-columns: 180px minmax(220px, 1fr) auto;
}
.tw-category-grid {
grid-template-columns: repeat(3, 1fr);
}
.tw-product-grid {
grid-template-columns: repeat(3, 1fr);
}
.tw-promo-strip__grid,
.tw-trust-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 1100px) {
body {
padding-bottom: calc(92px + env(safe-area-inset-bottom, 0px));
}
.tw-main-header,
.tw-desktop-nav {
display: none;
}
.tw-mobile-bottom-bar {
display: grid;
}
.tw-mobile-panel.is-open,
.tw-mobile-cart-panel.is-open {
display: block;
}
.tw-mobile-search-panel.is-open {
display: block;
}
.tw-mobile-header {
display: block;
position: sticky;
top: 0;
z-index: 70;
background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(247,250,252,0.96));
border-bottom: 1px solid rgba(0, 70, 98, 0.10);
box-shadow: 0 10px 24px rgba(0, 44, 82, 0.08);
backdrop-filter: blur(10px);
}
.tw-mobile-header__inner {
min-height: 62px;
display: grid;
grid-template-columns: 42px 1fr auto;
align-items: center;
gap: 10px;
padding: 10px 0;
}
.tw-mobile-logo {
display: flex;
align-items: center;
justify-content: center;
min-width: 0;
}
.tw-mobile-logo .custom-logo-link,
.tw-mobile-logo .tw-site-brand {
display: inline-flex;
align-items: center;
justify-content: center;
max-width: 100%;
}
.tw-mobile-logo img,
.tw-mobile-logo .custom-logo {
max-height: 34px;
width: auto;
object-fit: contain;
}
.tw-mobile-actions {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 8px;
}
.tw-mobile-header__conversion-links {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
padding: 0 0 12px;
}
.tw-mobile-header__conversion-links .tw-mobile-panel__quicklink {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 12px;
border-radius: 12px;
text-decoration: none;
color: #002C52;
background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(245,248,251,0.98));
border: 1px solid rgba(0, 70, 98, 0.10);
box-shadow: 0 10px 18px rgba(0, 44, 82, 0.05);
transition:
transform .18s ease,
border-color .18s ease,
background .18s ease,
color .18s ease,
box-shadow .18s ease;
}
.tw-mobile-header__conversion-links .tw-mobile-panel__quicklink:first-child {
background: linear-gradient(135deg, #01B0CC, #11A9A7);
border-color: rgba(1, 73, 100, 0.10);
color: #ffffff;
}
.tw-mobile-header__conversion-links .tw-mobile-panel__quicklink:last-child {
background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(247,250,252,0.98));
}
.tw-mobile-header__conversion-links .tw-mobile-panel__quicklink:hover {
transform: translateY(-1px);
color: #014964;
border-color: rgba(1, 176, 204, 0.22);
background: linear-gradient(180deg, rgba(255,255,255,1), rgba(241,248,250,1));
box-shadow: 0 14px 24px rgba(0, 44, 82, 0.08);
}
.tw-mobile-header__conversion-links .tw-mobile-panel__quickicon {
width: 38px;
height: 38px;
border-radius: 12px;
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 38px;
background: linear-gradient(180deg, rgba(1,176,204,0.14), rgba(17,169,167,0.10));
border: 1px solid rgba(1, 73, 100, 0.10);
color: #014964;
font-size: .98rem;
font-weight: 900;
}
.tw-mobile-header__conversion-links .tw-mobile-panel__quicklink:first-child .tw-mobile-panel__quickicon {
width: 38px;
height: 38px;
border-radius: 12px;
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 38px;
background: linear-gradient(180deg, rgba(1,176,204,0.14), rgba(17,169,167,0.10));
border: 1px solid rgba(1, 73, 100, 0.10);
color: #014964;
font-size: .98rem;
font-weight: 900;
}
.tw-mobile-header__conversion-links .tw-mobile-panel__quicklink:last-child .tw-mobile-panel__quickicon {
width: 38px;
height: 38px;
border-radius: 12px;
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 38px;
background: linear-gradient(180deg, rgba(1,176,204,0.14), rgba(17,169,167,0.10));
border: 1px solid rgba(1, 73, 100, 0.10);
color: #014964;
font-size: .98rem;
font-weight: 900;
}
.tw-mobile-header__conversion-links .tw-mobile-panel__quicktext {
gap: 4px;
}
.tw-mobile-header__conversion-links .tw-mobile-panel__quicktext strong {
color: inherit;
font-size: .93rem;
line-height: 1.1;
}
.tw-mobile-header__conversion-links .tw-mobile-panel__quicktext small {
color: #5B6E80;
font-size: .78rem;
line-height: 1.2;
}
.tw-mobile-offers-cta {
position: relative;
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
margin: 0 0 12px;
padding: 13px 14px;
border-radius: 16px;
text-decoration: none;
color: #ffffff;
background: linear-gradient(135deg, #f97316 0%, #ea580c 38%, #172554 100%);
border: 1px solid rgba(234, 88, 12, 0.28);
box-shadow: 0 14px 26px rgba(23, 37, 84, 0.16);
}
.tw-mobile-offers-cta.is-active {
background: linear-gradient(135deg, #fb923c 0%, #f97316 24%, #1d4ed8 100%);
}
.tw-mobile-offers-cta__copy {
display: flex;
flex-direction: column;
gap: 4px;
min-width: 0;
}
.tw-mobile-offers-cta__eyebrow {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: .72rem;
font-weight: 900;
text-transform: uppercase;
letter-spacing: .12em;
color: rgba(255,255,255,0.78);
}
.tw-mobile-offers-cta__copy strong {
display: block;
color: #ffffff;
font-size: .98rem;
line-height: 1.12;
font-weight: 900;
}
.tw-mobile-offers-cta__copy small {
display: block;
color: rgba(255,255,255,0.88);
font-size: .79rem;
line-height: 1.28;
}
.tw-mobile-offers-cta__badge {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 44px;
height: 44px;
padding: 0 12px;
border-radius: 999px;
background: rgba(255,255,255,0.16);
border: 1px solid rgba(255,255,255,0.28);
color: #ffffff;
font-size: 1rem;
font-weight: 900;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
flex: 0 0 auto;
}
.tw-mobile-offers-cta:hover {
color: #ffffff;
transform: translateY(-1px);
box-shadow: 0 18px 30px rgba(23, 37, 84, 0.2);
}
.tw-mobile-toggle,
.tw-mobile-search-trigger,
.tw-mobile-wa,
.tw-mobile-close {
min-width: 40px;
width: 40px;
min-height: 40px;
height: 40px;
border-radius: 12px;
border: 1px solid rgba(0, 70, 98, 0.10);
background: linear-gradient(180deg, rgba(255,255,255,0.96), rgba(244,247,250,0.96));
color: #002C52;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
text-decoration: none;
transition:
transform .18s ease,
border-color .18s ease,
color .18s ease,
background .18s ease,
box-shadow .18s ease;
position: relative;
box-shadow: 0 8px 18px rgba(0, 44, 82, 0.06);
}
.tw-mobile-action-icon {
display: inline-flex;
align-items: center;
justify-content: center;
line-height: 1;
}
.tw-mobile-search-trigger .tw-mobile-action-icon svg {
width: 23px;
height: 23px;
}
.tw-mobile-wa .tw-mobile-action-icon svg {
width: 19px;
height: 19px;
}
.tw-mobile-toggle:hover,
.tw-mobile-search-trigger:hover,
.tw-mobile-wa:hover,
.tw-mobile-close:hover,
.tw-mobile-search-trigger.is-active {
transform: translateY(-1px);
color: #014964;
border-color: rgba(1, 176, 204, 0.24);
background: linear-gradient(180deg, rgba(255,255,255,1), rgba(239,247,249,0.98));
box-shadow: 0 10px 20px rgba(1, 73, 100, 0.10);
}
.tw-mobile-wa {
border-color: rgba(37, 211, 102, 0.20);
background: linear-gradient(180deg, rgba(240,255,246,0.98), rgba(230,250,237,0.98));
color: #147a43;
}
.tw-mobile-wa:hover {
color: #0f6a3a;
border-color: rgba(37, 211, 102, 0.30);
background: linear-gradient(180deg, rgba(244,255,248,1), rgba(232,251,240,1));
box-shadow: 0 10px 20px rgba(37, 211, 102, 0.10);
}
.tw-mobile-search-panel {
border-top: 1px solid rgba(0, 70, 98, 0.08);
background: linear-gradient(180deg, rgba(248,250,252,0.99), rgba(242,246,249,0.98));
box-shadow: inset 0 1px 0 rgba(255,255,255,.80);
}
.tw-mobile-search {
padding: 12px 0 14px;
}
.tw-mobile-search .tw-search-form {
width: 100%;
}
.tw-mobile-search .tw-search-shell {
grid-template-columns: minmax(0, 1fr);
gap: 10px;
}
.tw-mobile-search .tw-search-input {
min-height: 48px;
height: 48px;
border-radius: 10px;
padding: 0 42px 0 44px;
font-size: .96rem;
}
.tw-mobile-search .tw-search-input-icon {
left: 14px;
}
.tw-mobile-search .tw-search-clear {
right: 10px;
width: 24px;
height: 24px;
font-size: 16px;
}
.tw-mobile-search .tw-search-button {
width: 100%;
min-height: 46px;
height: 46px;
padding: 0 14px;
border-radius: 10px;
font-size: .90rem;
gap: 7px;
}
.tw-mobile-search .tw-search-live-panel {
position: static;
top: auto;
left: auto;
width: 100%;
margin-top: 8px;
}
.tw-mobile-search .tw-search-live-panel__inner {
border-radius: 14px;
box-shadow: 0 18px 30px rgba(0, 44, 82, 0.10);
max-height: min(68vh, 560px);
display: flex;
flex-direction: column;
overflow: hidden;
}
.tw-mobile-search .tw-search-live-state {
padding: 14px 14px;
font-size: .90rem;
flex: 0 0 auto;
}
.tw-mobile-search .tw-search-live-results {
display: grid;
gap: 0;
overflow-y: auto;
overscroll-behavior: contain;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
-ms-overflow-style: none;
max-height: min(54vh, 440px);
}
.tw-mobile-search .tw-search-live-results::-webkit-scrollbar {
width: 0;
height: 0;
display: none;
}
.tw-mobile-search .tw-search-live-item {
grid-template-columns: 50px minmax(0, 1fr) auto;
gap: 10px;
padding: 11px 12px;
}
.tw-mobile-search .tw-search-live-thumb {
width: 50px;
height: 50px;
border-radius: 7px;
}
.tw-mobile-search .tw-search-live-title {
font-size: .90rem;
}
.tw-mobile-search .tw-search-live-price {
font-size: .88rem;
}
.tw-mobile-search .tw-search-live-stock {
min-height: 22px;
border-radius: 6px;
font-size: .70rem;
}
.tw-mobile-search .tw-search-live-add {
min-height: 32px;
padding: 0 10px;
border-radius: 7px;
font-size: .79rem;
}
.tw-mobile-search .tw-search-live-footer {
padding: 11px 12px 12px;
flex: 0 0 auto;
border-top: 1px solid rgba(0,70,98,.08);
background: linear-gradient(180deg, rgba(248,250,252,1), rgba(243,247,250,1));
}
.tw-mobile-search .tw-search-live-footer__all {
min-height: 40px;
border-radius: 8px;
font-size: .88rem;
font-weight: 800;
}
.tw-mobile-panel {
position: fixed;
inset: 0;
z-index: 90;
}
.tw-mobile-panel__backdrop {
position: absolute;
inset: 0;
background: rgba(0, 26, 48, 0.34);
backdrop-filter: blur(4px);
}
.tw-mobile-panel__dialog {
position: absolute;
top: 0;
left: 0;
width: min(86vw, 356px);
height: 100%;
background: linear-gradient(180deg, rgba(251,253,255,1), rgba(245,248,251,1));
border-right: 1px solid rgba(0, 70, 98, 0.10);
box-shadow: 16px 0 32px rgba(0, 44, 82, 0.14);
display: flex;
flex-direction: column;
overflow: hidden;
}
.tw-mobile-panel__head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 16px 14px 14px;
border-bottom: 1px solid rgba(0,70,98,.08);
background: linear-gradient(180deg, rgba(255,255,255,0.94), rgba(248,251,253,0.94));
}
.tw-mobile-panel__brand {
display: flex;
align-items: center;
gap: 10px;
min-width: 0;
}
.tw-mobile-panel__brand-icon {
width: 38px;
height: 38px;
border-radius: 12px;
display: inline-flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, #01B0CC, #11A9A7);
border: 1px solid rgba(1, 73, 100, 0.08);
color: #ffffff;
font-size: 1rem;
font-weight: 900;
flex: 0 0 38px;
box-shadow: 0 10px 18px rgba(1, 73, 100, 0.10);
}
.tw-mobile-panel__brand-text {
display: grid;
gap: 2px;
min-width: 0;
}
.tw-mobile-panel__brand-text strong {
color: #002C52;
font-size: .98rem;
line-height: 1.1;
}
.tw-mobile-panel__brand-text span {
color: #5B6E80;
font-size: .80rem;
line-height: 1.15;
}
.tw-mobile-panel__body {
flex: 1;
overflow: auto;
padding: 16px 14px 20px;
background: linear-gradient(180deg, rgba(248,250,252,0.98), rgba(243,247,250,0.98));
}
.tw-mobile-panel__quicklinks {
display: grid;
gap: 10px;
}
.tw-mobile-panel__quicklinks--top {
margin-bottom: 16px;
padding-bottom: 14px;
border-bottom: 1px solid rgba(0,70,98,.08);
}
.tw-mobile-panel__quicklink {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 12px;
border-radius: 12px;
text-decoration: none;
color: #002C52;
background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(245,248,251,0.98));
border: 1px solid rgba(0, 70, 98, 0.10);
box-shadow: 0 10px 18px rgba(0, 44, 82, 0.05);
transition:
transform .18s ease,
border-color .18s ease,
background .18s ease,
color .18s ease,
box-shadow .18s ease;
}
.tw-mobile-panel__quicklink:hover {
transform: translateY(-1px);
color: #014964;
border-color: rgba(1, 176, 204, 0.22);
background: linear-gradient(180deg, rgba(255,255,255,1), rgba(241,248,250,1));
box-shadow: 0 14px 24px rgba(0, 44, 82, 0.08);
}
.tw-mobile-panel__quickicon {
width: 38px;
height: 38px;
border-radius: 12px;
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 38px;
background: linear-gradient(180deg, rgba(1,176,204,0.14), rgba(17,169,167,0.10));
border: 1px solid rgba(1, 73, 100, 0.10);
color: #014964;
font-size: .98rem;
font-weight: 900;
}
.tw-mobile-panel__quicktext {
display: grid;
gap: 2px;
min-width: 0;
}
.tw-mobile-panel__quicktext strong {
color: inherit;
font-size: .93rem;
line-height: 1.1;
}
.tw-mobile-panel__quicktext small {
color: #5B6E80;
font-size: .78rem;
line-height: 1.2;
}
.tw-mobile-panel__menu,
.tw-mobile-panel__menu .sub-menu {
margin-top: 8px;
display: grid;
gap: 6px;
padding-left: 10px;
border-left: 2px solid rgba(1, 176, 204, 0.12);
}
.tw-mobile-panel__menu {
display: grid;
gap: 8px;
}
.tw-mobile-panel__menu > li > a {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
min-height: 46px;
padding: 0 12px;
border-radius: 12px;
text-decoration: none;
color: #002C52;
font-weight: 800;
background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(245,248,251,0.98));
border: 1px solid rgba(0, 70, 98, 0.10);
box-shadow: 0 8px 16px rgba(0, 44, 82, 0.04);
transition:
transform .18s ease,
color .18s ease,
border-color .18s ease,
background .18s ease,
box-shadow .18s ease;
}
.tw-mobile-panel__menu > li > a:hover {
transform: translateY(-1px);
color: #014964;
border-color: rgba(1, 176, 204, 0.22);
background: linear-gradient(180deg, rgba(255,255,255,1), rgba(241,248,250,1));
box-shadow: 0 12px 18px rgba(0, 44, 82, 0.06);
}
.tw-mobile-panel__menu .sub-menu {
margin-top: 8px;
display: grid;
gap: 6px;
padding-left: 10px;
border-left: 2px solid rgba(1, 176, 204, 0.12);
}
.tw-mobile-panel__menu .sub-menu a {
display: flex;
align-items: center;
min-height: 38px;
padding: 0 10px;
border-radius: 10px;
text-decoration: none;
color: #415567;
font-weight: 600;
background: rgba(255,255,255,.72);
border: 1px solid rgba(0,70,98,.08);
}
.tw-mobile-panel__menu .sub-menu a:hover {
color: #014964;
border-color: rgba(1, 176, 204, 0.18);
background: rgba(238,248,250,1);
}
.tw-mobile-panel__nav {
margin-top: 4px;
display: grid;
gap: 10px;
}
.tw-mobile-panel__nav::before {
content: 'Explor¨˘ por secciones';
display: block;
margin: 2px 0 2px;
color: #5B6E80;
font-size: .76rem;
font-weight: 800;
letter-spacing: .08em;
text-transform: uppercase;
}
.tw-mobile-panel__menu {
margin-top: 0;
padding-left: 0;
border-left: 0;
}
.tw-mobile-panel__menu > li {
position: relative;
list-style: none;
}
.tw-mobile-panel__menu > li > a {
padding-right: 54px;
}
.tw-mobile-panel__menu > li.current-menu-item > a,
.tw-mobile-panel__menu > li.current-menu-ancestor > a,
.tw-mobile-panel__menu > li.current_page_item > a,
.tw-mobile-panel__menu > li.current_page_ancestor > a {
color: #002C52;
border-color: rgba(1, 176, 204, 0.26);
background: linear-gradient(180deg, rgba(255,255,255,1), rgba(237,247,250,1));
box-shadow: 0 12px 22px rgba(0, 44, 82, 0.07);
}
.tw-mobile-panel__menu > li.has-mobile-submenu.is-open > a {
border-color: rgba(1, 176, 204, 0.26);
background: linear-gradient(180deg, rgba(255,255,255,1), rgba(237,247,250,1));
box-shadow: 0 12px 22px rgba(0, 44, 82, 0.07);
}
.tw-mobile-submenu-toggle {
position: absolute;
top: 50%;
right: 10px;
transform: translateY(-50%);
width: 34px;
height: 34px;
border-radius: 10px;
border: 1px solid rgba(0, 70, 98, 0.10);
background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(245,248,251,0.98));
color: #014964;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
box-shadow: 0 6px 12px rgba(0, 44, 82, 0.05);
transition:
transform .18s ease,
border-color .18s ease,
background .18s ease,
color .18s ease,
box-shadow .18s ease;
}
.tw-mobile-submenu-toggle:hover {
border-color: rgba(1, 176, 204, 0.22);
background: linear-gradient(180deg, rgba(255,255,255,1), rgba(239,248,250,1));
box-shadow: 0 10px 16px rgba(0, 44, 82, 0.08);
}
.tw-mobile-submenu-toggle span {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 14px;
font-size: 1rem;
line-height: 1;
font-weight: 900;
}
.tw-mobile-panel__menu > li.is-open > .tw-mobile-submenu-toggle {
color: #ffffff;
border-color: #01B0CC;
background: linear-gradient(135deg, #01B0CC, #11A9A7);
box-shadow: 0 10px 18px rgba(1, 73, 100, 0.14);
}
.tw-mobile-panel__menu .sub-menu {
margin-top: 10px;
margin-left: 8px;
padding: 4px 0 0 12px;
border-left: 2px solid rgba(1, 176, 204, 0.18);
}
.tw-mobile-panel__menu .sub-menu li {
list-style: none;
position: relative;
}
.tw-mobile-panel__menu .sub-menu li::before {
content: '';
position: absolute;
top: 17px;
left: -12px;
width: 8px;
height: 1px;
background: rgba(1, 176, 204, 0.22);
}
.tw-mobile-panel__menu .sub-menu a {
min-height: 40px;
}
.tw-mobile-panel__menu .sub-menu .current-menu-item > a,
.tw-mobile-panel__menu .sub-menu .current-menu-ancestor > a,
.tw-mobile-panel__menu .sub-menu .current_page_item > a,
.tw-mobile-panel__menu .sub-menu .current_page_ancestor > a {
color: #014964;
border-color: rgba(1, 176, 204, 0.18);
background: rgba(236, 248, 250, 1);
}
.tw-mobile-cart-panel {
position: fixed;
inset: 0;
z-index: 92;
}
.tw-mobile-cart-panel__backdrop {
position: absolute;
inset: 0;
background: rgba(0, 26, 48, 0.30);
backdrop-filter: blur(4px);
}
.tw-mobile-cart-panel__dialog {
position: absolute;
top: 0;
right: 0;
width: min(90vw, 368px);
height: 100%;
background: linear-gradient(180deg, rgba(251,253,255,1), rgba(245,248,251,1));
border-left: 1px solid rgba(0, 70, 98, 0.10);
box-shadow: -16px 0 32px rgba(0, 44, 82, 0.14);
display: flex;
flex-direction: column;
overflow: hidden;
}
.tw-mobile-cart-panel__head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 16px 14px 14px;
border-bottom: 1px solid rgba(0,70,98,.08);
background: linear-gradient(180deg, rgba(255,255,255,0.94), rgba(248,251,253,0.94));
}
.tw-mobile-cart-panel__titlewrap {
display: grid;
gap: 2px;
}
.tw-mobile-cart-panel__titlewrap strong {
color: #002C52;
font-size: 1rem;
line-height: 1.1;
}
.tw-mobile-cart-panel__titlewrap span {
color: #5B6E80;
font-size: .82rem;
line-height: 1.1;
}
.tw-mobile-cart-panel__body {
flex: 1;
overflow: auto;
padding: 14px;
background: linear-gradient(180deg, rgba(248,250,252,0.98), rgba(243,247,250,0.98));
}
.tw-mobile-cart-panel__items {
display: grid;
gap: 10px;
}
.tw-mobile-cart-card {
padding: 12px;
border-radius: 14px;
background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(245,248,251,0.98));
border: 1px solid rgba(0, 70, 98, 0.10);
box-shadow: 0 10px 18px rgba(0, 44, 82, 0.05);
}
.tw-mobile-cart-card__top {
display: grid;
grid-template-columns: 54px 1fr auto;
gap: 11px;
align-items: start;
}
.tw-mobile-cart-card__thumb {
width: 54px;
height: 54px;
border-radius: 10px;
overflow: hidden;
background: rgba(255,255,255,.90);
border: 1px solid rgba(0,70,98,.08);
}
.tw-mobile-cart-card__thumb img {
width: 100%;
height: 100%;
object-fit: cover;
}
.tw-mobile-cart-card__content {
min-width: 0;
display: grid;
gap: 4px;
}
.tw-mobile-cart-card__title,
.tw-mobile-cart-card__title a {
color: #002C52;
font-weight: 800;
font-size: .90rem;
line-height: 1.2;
text-decoration: none;
}
.tw-mobile-cart-card__price {
color: #5B6E80;
font-size: .82rem;
line-height: 1.15;
}
.tw-mobile-cart-card__total {
color: #DC8124;
font-size: .90rem;
font-weight: 900;
line-height: 1.1;
}
.tw-mobile-cart-card__remove {
width: 30px;
height: 30px;
border: 1px solid rgba(0,70,98,.08);
border-radius: 10px;
background: rgba(255,255,255,.88);
color: #002C52;
display: inline-flex;
align-items: center;
justify-content: center;
font-weight: 900;
cursor: pointer;
transition:
transform .18s ease,
border-color .18s ease,
background .18s ease;
}
.tw-mobile-cart-card__remove:hover {
transform: translateY(-1px);
border-color: rgba(220,129,36,.18);
background: rgba(255,248,241,1);
}
.tw-mobile-cart-card__bottom {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
margin-top: 12px;
padding-top: 10px;
border-top: 1px solid rgba(0,70,98,.08);
}
.tw-mobile-cart-card__qty {
display: flex;
align-items: center;
gap: 8px;
}
.tw-mobile-cart-card__qty button {
width: 30px;
height: 30px;
border: 1px solid rgba(1,176,204,.16);
border-radius: 10px;
background: rgba(255,255,255,.88);
color: #002C52;
display: inline-flex;
align-items: center;
justify-content: center;
font-weight: 900;
cursor: pointer;
transition:
transform .18s ease,
border-color .18s ease,
background .18s ease,
color .18s ease;
}
.tw-mobile-cart-card__qty button:hover {
transform: translateY(-1px);
border-color: rgba(1,176,204,.28);
color: #014964;
background: rgba(238,248,250,1);
}
.tw-mobile-cart-card__qty span {
min-width: 28px;
text-align: center;
color: #002C52;
font-weight: 900;
font-size: .90rem;
}
.tw-mobile-cart-card__hint {
color: #5B6E80;
font-size: .78rem;
line-height: 1.1;
}
.tw-mobile-cart-panel__subtotal {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
margin-top: 14px;
padding-top: 12px;
border-top: 1px solid rgba(0,70,98,.08);
}
.tw-mobile-cart-panel__subtotal strong:first-child {
color: #002C52;
}
.tw-mobile-cart-panel__subtotal strong:last-child {
color: #DC8124;
font-size: 1rem;
}
.tw-mobile-cart-panel__actions {
display: grid;
gap: 10px;
margin-top: 14px;
}
.tw-mobile-cart-panel__link {
display: flex;
align-items: center;
justify-content: center;
min-height: 42px;
padding: 0 14px;
border-radius: 12px;
border: 1px solid rgba(0,70,98,.10);
background: linear-gradient(180deg, rgba(255,255,255,1), rgba(245,248,251,1));
color: #002C52;
text-decoration: none;
font-weight: 800;
box-shadow: 0 8px 16px rgba(0, 44, 82, 0.05);
}
.tw-mobile-cart-panel__checkout {
display: flex;
align-items: center;
justify-content: center;
min-height: 46px;
padding: 0 14px;
border-radius: 12px;
background: linear-gradient(135deg, #01B0CC, #11A9A7);
color: #ffffff;
text-decoration: none;
font-weight: 900;
border: 1px solid rgba(1,73,100,.10);
box-shadow: 0 14px 24px rgba(1,73,100,.12);
}
.tw-mobile-cart-panel__empty {
padding: 16px 14px;
border-radius: 14px;
color: #5B6E80;
background: linear-gradient(180deg, rgba(255,255,255,1), rgba(245,248,251,1));
border: 1px solid rgba(0,70,98,.10);
text-align: center;
}
.tw-mobile-bottom-bar {
position: fixed;
left: 10px;
right: 10px;
bottom: calc(8px + env(safe-area-inset-bottom, 0px));
z-index: 80;
min-height: 68px;
display: grid;
grid-template-columns: repeat(5, 1fr);
align-items: stretch;
gap: 6px;
padding: 7px;
border-radius: 18px;
background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(244,247,250,0.97));
border: 1px solid rgba(0, 70, 98, 0.10);
box-shadow: 0 18px 34px rgba(0, 44, 82, 0.12);
backdrop-filter: blur(12px);
}
.tw-mobile-bottom-bar__item {
position: relative;
min-height: 52px;
border-radius: 13px;
color: #002C52;
text-decoration: none;
border: 1px solid transparent;
background: transparent;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 4px;
font: inherit;
cursor: pointer;
transition:
transform .18s ease,
border-color .18s ease,
background .18s ease,
color .18s ease,
box-shadow .18s ease;
}
.tw-mobile-bottom-bar__item:hover,
.tw-mobile-bottom-bar__item.is-active {
transform: translateY(-1px);
color: #014964;
background: rgba(1,176,204,.06);
border-color: rgba(1, 176, 204, 0.12);
}
.tw-mobile-bottom-bar__item--menu {
background: linear-gradient(135deg, #01B0CC, #11A9A7);
color: #ffffff;
border-color: rgba(1, 73, 100, 0.10);
box-shadow: 0 12px 22px rgba(1, 73, 100, 0.14);
}
.tw-mobile-bottom-bar__item--menu:hover,
.tw-mobile-bottom-bar__item--menu.is-active {
color: #ffffff;
background: linear-gradient(135deg, #01BDE8, #11A9A7);
border-color: rgba(1, 73, 100, 0.16);
}
.tw-mobile-request-trigger {
border-color: rgba(1, 176, 204, 0.22);
background: linear-gradient(180deg, rgba(1,176,204,0.12), rgba(17,169,167,0.10));
color: #014964;
}
.tw-mobile-request-trigger:hover,
.tw-mobile-request-trigger:focus-visible {
color: #003b57;
border-color: rgba(1, 176, 204, 0.32);
background: linear-gradient(180deg, rgba(1,176,204,0.16), rgba(17,169,167,0.14));
box-shadow: 0 10px 20px rgba(1, 73, 100, 0.12);
}
.tw-mobile-bottom-bar__item--home {
color: #002C52;
}
.tw-mobile-bottom-bar__item--home .tw-mobile-bottom-bar__icon {
display: inline-flex;
align-items: center;
justify-content: center;
}
.tw-mobile-bottom-bar__item--home .tw-mobile-bottom-bar__icon svg {
width: 18px;
height: 18px;
}
.tw-mobile-bottom-bar__item--wa {
color: #147a43;
}
.tw-mobile-bottom-bar__item--wa svg {
width: 18px;
height: 18px;
}
.tw-mobile-bottom-bar__icon {
font-size: 1.08rem;
line-height: 1;
display: inline-flex;
align-items: center;
justify-content: center;
}
.tw-mobile-bottom-bar__label {
font-size: .70rem;
font-weight: 800;
line-height: 1;
letter-spacing: -0.01em;
}
.tw-mobile-bottom-bar__badge {
position: absolute;
top: 4px;
right: 8px;
min-width: 18px;
height: 18px;
padding: 0 4px;
border-radius: 999px;
background: linear-gradient(180deg, #DC8124, #AA7333);
color: #ffffff;
font-size: .70rem;
font-weight: 900;
display: inline-flex;
align-items: center;
justify-content: center;
box-shadow: 0 6px 14px rgba(170, 115, 51, 0.18);
}
.tw-hero__grid,
.tw-whatsapp-cta__inner {
grid-template-columns: 1fr;
}
.tw-category-grid,
.tw-product-grid,
.tw-repair-grid,
.tw-trust-grid,
.tw-promo-strip__grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 640px) {
body {
padding-bottom: calc(88px + env(safe-area-inset-bottom, 0px));
}
.tw-mobile-header__inner {
grid-template-columns: 38px 1fr auto;
gap: 8px;
min-height: 58px;
padding: 9px 0;
}
.tw-mobile-logo img,
.tw-mobile-logo .custom-logo {
max-height: 30px;
}
.tw-mobile-actions {
gap: 6px;
min-width: 0;
}
.tw-mobile-repairs-trigger,
.tw-mobile-request-trigger {
flex: 0 1 auto;
min-width: 0;
}
.tw-mobile-action-text {
max-width: 112px;
overflow: hidden;
text-overflow: ellipsis;
}
.tw-mobile-toggle,
.tw-mobile-search-trigger,
.tw-mobile-wa,
.tw-mobile-close {
min-width: 38px;
width: 38px;
min-height: 38px;
height: 38px;
border-radius: 11px;
}
.tw-mobile-search-trigger .tw-mobile-action-icon svg {
width: 22px;
height: 22px;
}
.tw-mobile-header__conversion-links {
grid-template-columns: 1fr;
gap: 8px;
padding-bottom: 10px;
}
.tw-mobile-header__conversion-links .tw-mobile-panel__quicklink {
min-height: 68px;
border-radius: 12px;
}
.tw-mobile-search .tw-search-input {
min-height: 46px;
height: 46px;
font-size: .95rem;
}
.tw-mobile-search .tw-search-button {
min-height: 44px;
height: 44px;
font-size: .88rem;
}
.tw-mobile-search .tw-search-live-item {
grid-template-columns: 46px minmax(0, 1fr);
align-items: start;
}
.tw-mobile-search .tw-search-live-thumb {
width: 46px;
height: 46px;
}
.tw-mobile-search .tw-search-live-actions {
grid-column: 2;
justify-content: flex-start;
margin-top: 2px;
}
.tw-mobile-panel__dialog {
width: min(88vw, 320px);
}
.tw-mobile-cart-panel__dialog {
width: min(92vw, 340px);
}
.tw-mobile-bottom-bar {
left: 8px;
right: 8px;
bottom: calc(6px + env(safe-area-inset-bottom, 0px));
min-height: 64px;
gap: 5px;
padding: 6px;
border-radius: 16px;
}
.tw-mobile-bottom-bar__item {
min-height: 48px;
border-radius: 11px;
}
.tw-mobile-bottom-bar__icon {
font-size: 1rem;
}
.tw-mobile-bottom-bar__label {
font-size: .66rem;
}
.tw-mobile-bottom-bar__badge {
top: 3px;
right: 6px;
}
.tw-category-grid,
.tw-product-grid,
.tw-repair-grid,
.tw-trust-grid,
.tw-promo-strip__grid {
grid-template-columns: 1fr;
}
.tw-main {
overflow-x: hidden;
}
}
@media (max-width: 420px) {
body {
padding-bottom: calc(84px + env(safe-area-inset-bottom, 0px));
}
.tw-mobile-header__inner {
min-height: 56px;
gap: 7px;
padding: 8px 0;
}
.tw-mobile-logo img,
.tw-mobile-logo .custom-logo {
max-height: 28px;
}
.tw-mobile-toggle,
.tw-mobile-search-trigger,
.tw-mobile-wa,
.tw-mobile-close {
min-width: 36px;
width: 36px;
min-height: 36px;
height: 36px;
border-radius: 10px;
}
.tw-mobile-search-trigger .tw-mobile-action-icon svg {
width: 21px;
height: 21px;
}
.tw-mobile-header__conversion-links .tw-mobile-panel__quicklink {
min-height: 64px;
padding: 12px 12px 11px;
}
.tw-mobile-header__conversion-links .tw-mobile-panel__quicktext strong {
font-size: .88rem;
}
.tw-mobile-header__conversion-links .tw-mobile-panel__quicktext small {
font-size: .74rem;
}
.tw-mobile-search .tw-search-input {
min-height: 44px;
height: 44px;
font-size: .92rem;
}
.tw-mobile-search .tw-search-button {
min-height: 42px;
height: 42px;
font-size: .84rem;
}
.tw-mobile-search .tw-search-live-title {
font-size: .86rem;
}
.tw-mobile-search .tw-search-live-price {
font-size: .84rem;
}
.tw-mobile-search .tw-search-live-add {
min-height: 30px;
font-size: .76rem;
}
.tw-mobile-panel__dialog {
width: min(90vw, 300px);
}
.tw-mobile-cart-panel__dialog {
width: min(94vw, 320px);
}
.tw-mobile-bottom-bar {
left: 7px;
right: 7px;
bottom: calc(5px + env(safe-area-inset-bottom, 0px));
min-height: 60px;
padding: 6px;
gap: 4px;
border-radius: 15px;
}
.tw-mobile-bottom-bar__item {
min-height: 46px;
}
.tw-mobile-bottom-bar__icon {
font-size: .96rem;
}
.tw-mobile-bottom-bar__label {
font-size: .62rem;
}
} @media (max-width: 1100px) {
.tw-mobile-actions {
gap: 6px;
}
.tw-mobile-repairs-trigger,
.tw-mobile-request-trigger {
min-height: 40px;
padding: 0 12px;
border-radius: 12px;
border: 1px solid rgba(0, 70, 98, 0.10);
background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(244,247,250,0.98));
color: #002C52;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
text-decoration: none;
box-shadow: 0 8px 18px rgba(0, 44, 82, 0.06);
transition:
transform .18s ease,
border-color .18s ease,
color .18s ease,
background .18s ease,
box-shadow .18s ease;
}
.tw-mobile-repairs-trigger:hover,
.tw-mobile-repairs-trigger:focus-visible,
.tw-mobile-request-trigger:hover,
.tw-mobile-request-trigger:focus-visible {
transform: translateY(-1px);
color: #014964;
border-color: rgba(1, 176, 204, 0.24);
background: linear-gradient(180deg, rgba(255,255,255,1), rgba(239,247,249,0.98));
box-shadow: 0 10px 20px rgba(1, 73, 100, 0.10);
}
.tw-mobile-repairs-trigger .tw-mobile-action-icon,
.tw-mobile-request-trigger .tw-mobile-action-icon {
width: 16px;
height: 16px;
flex: 0 0 16px;
}
.tw-mobile-repairs-trigger .tw-mobile-action-icon svg,
.tw-mobile-request-trigger .tw-mobile-action-icon svg {
width: 16px;
height: 16px;
}
.tw-mobile-action-text {
display: inline-block;
font-size: .74rem;
font-weight: 800;
line-height: 1;
letter-spacing: .01em;
white-space: nowrap;
}
.tw-mobile-header__conversion-links {
grid-template-columns: 1fr;
padding-bottom: 12px;
}
.tw-mobile-header__conversion-links .tw-mobile-panel__quicklink:last-child {
display: none;
}
.tw-mobile-search-panel {
border-top: 1px solid rgba(0, 70, 98, 0.08);
}
.tw-mobile-search {
padding-top: 12px;
padding-bottom: 14px;
}
.tw-mobile-search__head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-bottom: 10px;
}
.tw-mobile-search__head strong {
color: #002C52;
font-size: .92rem;
line-height: 1.1;
}
.tw-mobile-search__close {
min-width: 36px;
width: 36px;
min-height: 36px;
height: 36px;
border: 1px solid rgba(0, 70, 98, 0.10);
border-radius: 11px;
background: linear-gradient(180deg, rgba(255,255,255,0.96), rgba(244,247,250,0.96));
color: #002C52;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
box-shadow: 0 8px 18px rgba(0, 44, 82, 0.06);
transition:
transform .18s ease,
border-color .18s ease,
color .18s ease,
background .18s ease,
box-shadow .18s ease;
}
.tw-mobile-search__close:hover,
.tw-mobile-search__close:focus-visible {
transform: translateY(-1px);
color: #014964;
border-color: rgba(1, 176, 204, 0.24);
background: linear-gradient(180deg, rgba(255,255,255,1), rgba(239,247,249,0.98));
box-shadow: 0 10px 20px rgba(1, 73, 100, 0.10);
}
.tw-mobile-search__close span {
font-size: 1.35rem;
line-height: 1;
transform: translateY(-1px);
}
.tw-mobile-bottom-bar__item--wa {
color: #128c4a;
border-color: rgba(37, 211, 102, 0.18);
background: linear-gradient(180deg, rgba(244,255,248,0.98), rgba(233,250,239,0.98));
}
.tw-mobile-bottom-bar__item--wa:hover,
.tw-mobile-bottom-bar__item--wa.is-active {
color: #0f6a3a;
border-color: rgba(37, 211, 102, 0.28);
background: linear-gradient(180deg, rgba(246,255,249,1), rgba(236,251,241,1));
box-shadow: 0 12px 24px rgba(37, 211, 102, 0.14);
}
.tw-mobile-bottom-bar__item--wa .tw-mobile-bottom-bar__icon {
display: inline-flex;
align-items: center;
justify-content: center;
}
.tw-mobile-bottom-bar__item--wa .tw-mobile-bottom-bar__icon svg {
width: 18px;
height: 18px;
}
}
@media (max-width: 640px) {
.tw-mobile-repairs-trigger,
.tw-mobile-request-trigger {
padding: 0 10px;
gap: 6px;
}
.tw-mobile-action-text {
font-size: .70rem;
}
}
@media (max-width: 390px) {
.tw-mobile-search-trigger,
.tw-mobile-repairs-trigger,
.tw-mobile-request-trigger,
.tw-mobile-toggle {
min-height: 38px;
height: 38px;
}
.tw-mobile-repairs-trigger,
.tw-mobile-request-trigger {
padding: 0 9px;
}
.tw-mobile-repairs-trigger .tw-mobile-action-icon svg,
.tw-mobile-request-trigger .tw-mobile-action-icon svg {
width: 15px;
height: 15px;
}
.tw-mobile-action-text {
font-size: .67rem;
}
.tw-mobile-search__head strong {
font-size: .86rem;
}
.tw-mobile-bottom-bar__label {
letter-spacing: 0;
}
}
@media (max-width: 1100px) {
.tw-mobile-header__inner {
grid-template-columns: 1fr auto 1fr;
}
.tw-mobile-logo {
grid-column: 2;
}
.tw-mobile-actions {
grid-column: 3;
justify-self: end;
}
}
@media (max-width: 1100px) {
.tw-mobile-header__inner {
grid-template-columns: 44px minmax(0, 1fr) auto;
gap: 10px;
}
.tw-mobile-header__left {
grid-column: 1;
display: flex;
align-items: center;
justify-content: flex-start;
}
.tw-mobile-logo {
grid-column: 2;
justify-content: center;
}
.tw-mobile-actions {
grid-column: 3;
justify-self: end;
}
.tw-mobile-logo img,
.tw-mobile-logo .custom-logo {
max-height: 40px;
}
.tw-mobile-search-trigger {
border-color: rgba(198, 40, 40, 0.22);
}
.tw-mobile-search-trigger .tw-mobile-action-icon {
color: #002C52;
}
.tw-mobile-search-trigger .tw-mobile-action-icon svg {
width: 22px;
height: 22px;
}
}
@media (max-width: 640px) {
.tw-mobile-header__inner {
grid-template-columns: 40px minmax(0, 1fr) auto;
gap: 8px;
}
.tw-mobile-logo img,
.tw-mobile-logo .custom-logo {
max-height: 38px;
}
}
@media (max-width: 420px) {
.tw-mobile-header__inner {
grid-template-columns: 38px minmax(0, 1fr) auto;
}
.tw-mobile-logo img,
.tw-mobile-logo .custom-logo {
max-height: 36px;
}
}
@media (max-width: 480px) {
.tw-mobile-offers-cta {
padding: 12px 13px;
gap: 12px;
margin-bottom: 10px;
}
.tw-mobile-offers-cta__copy strong {
font-size: .93rem;
}
.tw-mobile-offers-cta__copy small {
font-size: .75rem;
}
.tw-mobile-offers-cta__badge {
min-width: 40px;
height: 40px;
padding: 0 10px;
}
} @media (max-width: 1100px) {
body {
padding-bottom: 0 !important;
}
.tw-mobile-bottom-bar,
.tw-auth-hangtab-mobile {
display: none !important;
}
.tw-mobile-header {
background: rgba(255,255,255,.98);
border-bottom: 1px solid rgba(0,44,82,.09);
box-shadow: 0 4px 18px rgba(0,44,82,.07);
backdrop-filter: blur(14px);
}
.tw-mobile-header__inner {
position: relative;
min-height: 64px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 8px 0;
}
.tw-mobile-logo {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: min(34vw, 138px);
pointer-events: auto;
}
.tw-mobile-logo .custom-logo-link,
.tw-mobile-logo .tw-site-brand {
width: 100%;
display: flex;
justify-content: center;
}
.tw-mobile-logo img,
.tw-mobile-logo .custom-logo {
display: block;
width: auto;
max-width: 100%;
max-height: 37px;
object-fit: contain;
}
.tw-mobile-header__right {
display: flex;
align-items: center;
gap: 3px;
margin-left: auto;
}
.tw-mobile-header__icon-button,
.tw-mobile-toggle,
.tw-mobile-search-trigger,
.tw-mobile-cart-trigger {
position: relative;
width: 42px;
height: 42px;
min-width: 42px;
padding: 0;
border: 0;
border-radius: 12px;
background: transparent;
color: #0d2f43;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
box-shadow: none;
transition: background .16s ease, color .16s ease, transform .16s ease;
}
.tw-mobile-header__icon-button:hover,
.tw-mobile-header__icon-button:focus-visible,
.tw-mobile-header__icon-button.is-active,
.tw-mobile-toggle:hover,
.tw-mobile-toggle:focus-visible,
.tw-mobile-toggle.is-active {
color: #014964;
background: #f0f6f8;
outline: none;
transform: none;
box-shadow: none;
}
.tw-mobile-action-icon,
.tw-mobile-action-icon svg {
display: block;
}
.tw-mobile-cart-badge {
position: absolute;
top: 2px;
right: 1px;
min-width: 18px;
height: 18px;
padding: 0 4px;
border-radius: 999px;
display: inline-flex;
align-items: center;
justify-content: center;
background: #d92d20;
color: #fff;
border: 2px solid #fff;
font-size: .66rem;
line-height: 1;
font-weight: 800;
box-shadow: 0 2px 6px rgba(217,45,32,.22);
}
.tw-mobile-search-panel {
border-top: 1px solid rgba(0,44,82,.07);
background: #fff;
box-shadow: 0 12px 22px rgba(0,44,82,.08);
}
.tw-mobile-search {
padding-top: 12px;
padding-bottom: 14px;
}
.tw-mobile-search__head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-bottom: 10px;
}
.tw-mobile-search__head strong {
color: #183b4d;
font-size: .93rem;
font-weight: 800;
}
.tw-mobile-search__close {
width: 34px;
height: 34px;
border: 0;
border-radius: 9px;
background: #f3f6f7;
color: #355565;
font: inherit;
font-size: 1.35rem;
line-height: 1;
cursor: pointer;
}
.tw-mobile-panel__backdrop {
background: rgba(12, 31, 43, .42);
backdrop-filter: blur(3px);
}
.tw-mobile-panel__dialog {
width: min(88vw, 360px);
background: #fff;
border-right: 0;
box-shadow: 18px 0 44px rgba(0, 34, 54, .18);
}
.tw-mobile-panel__head {
min-height: 70px;
padding: 14px 16px;
border-bottom: 1px solid #edf1f3;
background: #fff;
}
.tw-mobile-panel__brand-text {
gap: 3px;
}
.tw-mobile-panel__brand-text strong {
color: #102f40;
font-size: 1.08rem;
font-weight: 850;
}
.tw-mobile-panel__brand-text span {
color: #71838c;
font-size: .76rem;
}
.tw-mobile-close {
width: 38px;
height: 38px;
min-width: 38px;
border: 0;
border-radius: 10px;
background: #f3f6f7;
color: #284a5a;
box-shadow: none;
}
.tw-mobile-panel__body {
padding: 12px 14px calc(22px + env(safe-area-inset-bottom, 0px));
background: #fff;
}
.tw-mobile-pro-nav {
display: grid;
gap: 2px;
}
.tw-mobile-pro-nav__item {
position: relative;
min-height: 54px;
display: grid;
grid-template-columns: 36px minmax(0, 1fr) auto auto;
align-items: center;
gap: 10px;
padding: 7px 8px;
border-radius: 12px;
color: #183b4d;
text-decoration: none;
border: 1px solid transparent;
background: transparent;
transition: background .15s ease, border-color .15s ease;
}
.tw-mobile-pro-nav__item:hover,
.tw-mobile-pro-nav__item:focus-visible {
background: #f4f8f9;
border-color: #edf2f4;
outline: none;
}
.tw-mobile-pro-nav__item--shop {
background: #f3f9fa;
}
.tw-mobile-pro-nav__icon {
width: 36px;
height: 36px;
border-radius: 10px;
display: inline-flex;
align-items: center;
justify-content: center;
background: #f1f5f6;
color: #0a5f72;
}
.tw-mobile-pro-nav__item--shop .tw-mobile-pro-nav__icon {
color: #fff;
background: #047c91;
}
.tw-mobile-pro-nav__icon svg {
width: 19px;
height: 19px;
fill: none;
stroke: currentColor;
stroke-width: 1.8;
stroke-linecap: round;
stroke-linejoin: round;
}
.tw-mobile-pro-nav__label {
min-width: 0;
color: inherit;
font-size: .94rem;
font-weight: 760;
line-height: 1.15;
}
.tw-mobile-pro-nav__arrow {
color: #93a2a9;
font-size: 1.45rem;
line-height: 1;
font-weight: 400;
}
.tw-mobile-pro-nav__badge {
min-width: 22px;
height: 22px;
padding: 0 7px;
border-radius: 999px;
display: inline-flex;
align-items: center;
justify-content: center;
background: #fff0e5;
color: #a95215;
font-size: .69rem;
font-weight: 850;
}
.tw-mobile-pro-actions {
display: grid;
gap: 9px;
margin-top: 18px;
padding-top: 16px;
border-top: 1px solid #edf1f3;
}
.tw-mobile-pro-actions__primary,
.tw-mobile-pro-actions__secondary {
min-height: 48px;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
gap: 9px;
padding: 0 15px;
text-decoration: none;
font-size: .90rem;
font-weight: 820;
}
.tw-mobile-pro-actions__primary {
justify-content: space-between;
background: #047c91;
color: #fff;
box-shadow: 0 8px 18px rgba(4,124,145,.16);
}
.tw-mobile-pro-actions__secondary {
color: #176f46;
background: #f1faf5;
border: 1px solid #dcefe4;
}
.tw-mobile-pro-actions__secondary svg {
width: 20px;
height: 20px;
fill: none;
stroke: currentColor;
stroke-width: 1.8;
stroke-linecap: round;
stroke-linejoin: round;
}
.tw-mobile-cart-panel__dialog {
width: min(92vw, 390px);
background: #fff;
}
.tw-mobile-cart-panel__head {
background: #fff;
}
}
@media (max-width: 390px) {
.tw-mobile-header__inner {
min-height: 60px;
}
.tw-mobile-logo {
width: min(31vw, 116px);
}
.tw-mobile-header__icon-button,
.tw-mobile-toggle,
.tw-mobile-search-trigger,
.tw-mobile-cart-trigger {
width: 39px;
height: 39px;
min-width: 39px;
}
.tw-mobile-header__right {
gap: 0;
}
} @media (max-width:1100px){
.tw-mobile-header__inner{min-height:72px;padding:8px 0}
.tw-mobile-logo{width:min(42vw,176px)}
.tw-mobile-logo .tw-brand-logo--mobile{display:flex;width:100%;justify-content:center;align-items:center}
.tw-mobile-logo .tw-brand-logo--mobile img{display:block;width:100%;max-width:100%;max-height:56px;height:auto;object-fit:contain;filter:drop-shadow(0 4px 10px rgba(0,44,82,.10))}
}
@media (max-width:520px){
.tw-mobile-header__inner{min-height:68px}
.tw-mobile-logo{width:min(39vw,156px)}
.tw-mobile-logo .tw-brand-logo--mobile img{max-height:50px}
}
@media (max-width:390px){
.tw-mobile-logo{width:min(36vw,138px)}
.tw-mobile-logo .tw-brand-logo--mobile img{max-height:46px}
} @media (max-width:1100px){
.tw-mobile-taxonomy{border:0;margin:0;padding:0}
.tw-mobile-taxonomy>summary{list-style:none;cursor:pointer}
.tw-mobile-taxonomy>summary::-webkit-details-marker{display:none}
.tw-mobile-taxonomy[open]>summary{background:#f4f9fa;border-color:#e8f0f2}
.tw-mobile-taxonomy[open]>summary .tw-mobile-pro-nav__arrow{transform:rotate(180deg)}
.tw-mobile-taxonomy__links{display:grid;grid-template-columns:1fr 1fr;gap:6px;padding:6px 8px 10px 54px}
.tw-mobile-taxonomy__links a{display:flex;align-items:center;min-height:38px;padding:7px 9px;border:1px solid #e7eef1;border-radius:10px;background:#fbfdfe;color:#315064;font-size:.84rem;font-weight:740;line-height:1.2}
.tw-mobile-taxonomy__links a:hover,.tw-mobile-taxonomy__links a:focus-visible{background:#f0f8fa;border-color:#d5e9ee;color:#006f87;outline:0}
.tw-mobile-taxonomy__links .tw-mobile-taxonomy__more{grid-column:1/-1;justify-content:center;background:#002c52;border-color:#002c52;color:#fff;font-weight:850}
.tw-mobile-taxonomy__links--brands{max-height:260px;overflow:auto}
}
@media (max-width:420px){
.tw-mobile-taxonomy__links{grid-template-columns:1fr;padding-left:46px}
} @media (max-width:1100px){
.tw-mobile-offers-trigger{
position:relative;
text-decoration:none !important;
color:#e85d04 !important;
background:#fff8f1 !important;
}
.tw-mobile-offers-trigger:hover,
.tw-mobile-offers-trigger:focus-visible{
color:#c2410c !important;
background:#fff2e6 !important;
}
.tw-mobile-offers-badge{
position:absolute;
top:0;
right:-1px;
min-width:19px;
height:19px;
padding:0 5px;
border-radius:999px;
display:inline-flex;
align-items:center;
justify-content:center;
background:#dc2626;
color:#fff;
border:2px solid #fff;
font-size:.65rem;
line-height:1;
font-weight:950;
box-shadow:0 3px 8px rgba(220,38,38,.28);
animation:tecnosMobileOfferNudge 2.8s ease-in-out infinite;
}
@keyframes tecnosMobileOfferNudge{
0%,72%,100%{transform:scale(1)}
78%{transform:scale(1.12)}
84%{transform:scale(.98)}
90%{transform:scale(1.07)}
}
}
@media (max-width:390px){
.tw-mobile-offers-trigger.tw-mobile-header__icon-button{
width:37px;
height:37px;
min-width:37px;
}
.tw-mobile-offers-badge{
min-width:18px;
height:18px;
font-size:.61rem;
}
}:root {
--tw-shadow: 0 16px 40px rgba(4, 42, 66, .09);
--tw-shadow-soft: 0 8px 24px rgba(4, 42, 66, .07);
--tw-shadow-hover: 0 22px 52px rgba(4, 42, 66, .13);
--tw-radius: 18px;
--tw-radius-sm: 12px;
--tw-radius-lg: 24px;
--tw-focus: 0 0 0 4px color-mix(in srgb, var(--tw-accent) 16%, transparent);
}
html { background: var(--tw-bg); }
body {
background:
radial-gradient(circle at 12% 0%, color-mix(in srgb, var(--tw-accent) 5%, transparent), transparent 30rem),
var(--tw-bg);
color: var(--tw-text);
font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
::selection {
background: color-mix(in srgb, var(--tw-accent) 24%, transparent);
color: var(--tw-text);
}
.tw-container { width: min(100% - clamp(24px, 4vw, 48px), var(--tw-container)); }
.tw-main { overflow: clip; }
.tw-content-wrap { padding: clamp(34px, 5vw, 64px) 0; }
.tw-card,
.tw-category-card,
.tw-product-card,
.tw-repair-card,
.tw-trust-item,
.tw-shop-card {
border-color: color-mix(in srgb, var(--tw-border) 88%, white 12%);
box-shadow: var(--tw-shadow-soft);
}
.tw-card { border-radius: var(--tw-radius-lg); }
.tw-section-kicker {
color: var(--tw-accent);
letter-spacing: .11em;
font-weight: 850;
}
.tw-section-head h2,
.tw-page-title,
.tw-post-title {
letter-spacing: -.035em;
line-height: 1.08;
}
.tw-btn {
min-height: 48px;
border-radius: 14px;
padding-inline: 20px;
font-weight: 800;
letter-spacing: -.01em;
box-shadow: none;
}
.tw-btn:hover { transform: translateY(-2px); box-shadow: var(--tw-shadow-soft); }
.tw-btn:focus-visible { outline: none; box-shadow: var(--tw-focus); }
.tw-btn--accent {
background: linear-gradient(135deg, var(--tw-accent), color-mix(in srgb, var(--tw-accent) 74%, var(--tw-accent-2) 26%));
color: var(--tw-button-text);
}
.tw-btn--ghost { background: var(--tw-panel); } .tw-header {
background: color-mix(in srgb, var(--tw-header-bg) 94%, transparent) !important;
border-bottom-color: color-mix(in srgb, var(--tw-border) 82%, transparent) !important;
box-shadow: 0 10px 32px rgba(4, 42, 66, .07) !important;
backdrop-filter: blur(18px) saturate(1.15);
}
.tw-header.is-scrolled {
background: color-mix(in srgb, var(--tw-header-bg) 97%, transparent) !important;
box-shadow: 0 12px 36px rgba(4, 42, 66, .10) !important;
}
.tw-main-header__inner {
min-height: 82px;
grid-template-columns: 205px minmax(360px, 1fr) auto;
gap: clamp(14px, 2vw, 24px);
}
.tw-site-brand,
.custom-logo-link { transition: transform .18s ease, opacity .18s ease; }
.tw-site-brand:hover,
.custom-logo-link:hover { transform: translateY(-1px); } .tw-search-shell { gap: 8px; }
.tw-search-input {
min-height: 50px;
height: 50px;
border-radius: 15px;
border-color: color-mix(in srgb, var(--tw-border) 90%, var(--tw-accent) 10%);
background: color-mix(in srgb, var(--tw-panel) 96%, var(--tw-bg-soft) 4%);
padding-left: 46px;
font-size: .96rem;
font-weight: 650;
box-shadow: inset 0 1px 0 rgba(255,255,255,.62);
}
.tw-search-input:hover { border-color: color-mix(in srgb, var(--tw-accent) 34%, var(--tw-border) 66%); }
.tw-search-input:focus {
border-color: var(--tw-accent);
background: var(--tw-panel);
box-shadow: var(--tw-focus), 0 12px 28px rgba(4, 42, 66, .08);
}
.tw-search-input-icon { left: 17px; }
.tw-search-clear {
right: 11px;
width: 28px;
height: 28px;
border: 0;
border-radius: 9px;
background: var(--tw-bg-soft);
}
.tw-search-button {
height: 50px;
min-height: 50px;
border: 0;
border-radius: 15px;
padding-inline: 18px;
background: linear-gradient(135deg, var(--tw-accent), color-mix(in srgb, var(--tw-accent) 72%, var(--tw-accent-2) 28%));
color: var(--tw-button-text);
box-shadow: 0 10px 22px color-mix(in srgb, var(--tw-accent) 18%, transparent);
}
.tw-search-button:hover {
transform: translateY(-2px);
box-shadow: 0 14px 30px color-mix(in srgb, var(--tw-accent) 22%, transparent);
}
.tw-search-live-panel { top: calc(100% + 12px); }
.tw-search-live-panel__inner {
border-radius: 18px;
border-color: color-mix(in srgb, var(--tw-border) 88%, var(--tw-accent) 12%);
box-shadow: 0 24px 60px rgba(2, 31, 50, .18);
background: color-mix(in srgb, var(--tw-panel) 97%, transparent);
backdrop-filter: blur(20px) saturate(1.08);
}
.tw-search-live-results { max-height: min(520px, 64vh); overflow: auto; overscroll-behavior: contain; }
.tw-search-live-item { padding: 13px 15px; gap: 14px; }
.tw-search-live-item + .tw-search-live-item { border-top-color: color-mix(in srgb, var(--tw-border) 76%, transparent); }
.tw-search-live-item:hover { background: color-mix(in srgb, var(--tw-accent) 5%, var(--tw-panel) 95%); }
.tw-search-live-thumb { border-radius: 12px; overflow: hidden; background: var(--tw-bg-soft); }
.tw-search-live-title { font-weight: 800; letter-spacing: -.01em; }
.tw-search-live-stock--in { color: var(--tw-success); }
.tw-search-live-stock--out { color: var(--tw-danger); }
.tw-search-live-add {
border-radius: 11px !important;
min-height: 36px;
padding-inline: 13px !important;
font-weight: 800 !important;
}
.tw-search-live-footer { border-top-color: var(--tw-border); background: color-mix(in srgb, var(--tw-bg-soft) 55%, var(--tw-panel) 45%); }
.tw-search-live-footer__all { border-radius: 10px; } .tw-desktop-nav {
background: color-mix(in srgb, var(--tw-header-bg) 96%, var(--tw-bg-soft) 4%);
border-top: 1px solid color-mix(in srgb, var(--tw-border) 78%, transparent);
border-bottom: 1px solid color-mix(in srgb, var(--tw-border) 86%, transparent);
box-shadow: none;
}
.tw-desktop-nav__layout,
.tw-primary-menu { min-height: 54px; }
.tw-primary-menu { gap: 4px; padding-block: 5px; }
.tw-primary-menu > li > a {
min-height: 42px;
border-radius: 11px;
color: var(--tw-header-text);
padding-inline: 14px;
font-weight: 780;
}
.tw-primary-menu > li:hover > a,
.tw-primary-menu > li:focus-within > a,
.tw-primary-menu > li.current-menu-item > a,
.tw-primary-menu > li.current-menu-ancestor > a,
.tw-primary-menu > li.current-menu-parent > a {
color: var(--tw-text);
background: color-mix(in srgb, var(--tw-accent) 9%, var(--tw-panel) 91%);
border-color: color-mix(in srgb, var(--tw-accent) 18%, var(--tw-border) 82%);
box-shadow: none;
}
.tw-primary-menu > li.current-menu-item::after,
.tw-primary-menu > li.current-menu-ancestor::after,
.tw-primary-menu > li.current-menu-parent::after,
.tw-primary-menu > li:hover::after,
.tw-primary-menu > li:focus-within::after { bottom: 2px; left: 16px; right: 16px; border-radius: 999px; }
.tw-action-link--categories-nav {
min-height: 42px !important;
border-radius: 12px !important;
background: var(--tw-accent) !important;
border-color: transparent !important;
box-shadow: none !important;
}
.tw-primary-menu .sub-menu,
.tw-mega-menu,
.tw-desktop-nav__categories-panel {
border-radius: 16px !important;
border-color: color-mix(in srgb, var(--tw-border) 88%, var(--tw-accent) 12%) !important;
box-shadow: 0 22px 52px rgba(3, 34, 54, .16) !important;
overflow: hidden;
} .tw-home-section { padding: clamp(34px, 5vw, 68px) 0; }
.tw-home-section + .tw-home-section { border-top: 1px solid color-mix(in srgb, var(--tw-border) 56%, transparent); }
.tw-hero { padding-top: clamp(30px, 5vw, 58px); padding-bottom: clamp(30px, 5vw, 58px); }
.tw-hero__content h1,
.tw-home-slider__content h1 {
font-size: clamp(2.2rem, 4.7vw, 4.6rem);
line-height: .99;
letter-spacing: -.055em;
text-wrap: balance;
}
.tw-hero__content p,
.tw-home-slider__content p { font-size: clamp(1rem, 1.4vw, 1.14rem); line-height: 1.65; }
.tw-hero-card,
.tw-home-slider__visual,
.tw-home-slider__card { border-radius: var(--tw-radius-lg); }
.tw-category-grid { gap: 18px; }
.tw-category-card {
min-height: 136px;
border-radius: 18px;
background: var(--tw-panel);
padding: 20px 16px;
}
.tw-category-card:hover {
transform: translateY(-5px);
border-color: color-mix(in srgb, var(--tw-accent) 30%, var(--tw-border) 70%);
box-shadow: var(--tw-shadow-hover);
}
.tw-category-card span { font-size: 1.7rem; }
.tw-category-card strong { letter-spacing: -.015em; }
.tw-promo-item {
border-radius: 14px;
background: var(--tw-panel);
box-shadow: 0 6px 18px rgba(4, 42, 66, .04);
}
.tw-product-card,
.tw-repair-card,
.tw-trust-item {
border-radius: 18px;
background: var(--tw-panel);
}
.tw-product-card:hover,
.tw-repair-card:hover { transform: translateY(-5px); box-shadow: var(--tw-shadow-hover); }
.tw-product-card__body { padding: 18px; }
.tw-product-card__price { color: var(--tw-accent-2); }
.tw-repair-card__media,
.tw-repair-card__thumb { border-radius: 0; }
.tw-repair-card__body,
.tw-repair-card__content { padding: 20px 20px 22px; } .tw-shop-page { padding-top: clamp(28px, 4vw, 48px); }
.tw-shop-page__head {
border-radius: 22px !important;
background: color-mix(in srgb, var(--tw-panel) 96%, var(--tw-bg-soft) 4%) !important;
border-color: var(--tw-border) !important;
box-shadow: var(--tw-shadow-soft) !important;
}
.tw-shop-page__title { letter-spacing: -.04em; }
.tw-shop-page__ordering select,
.woocommerce select,
.woocommerce input.input-text,
.woocommerce textarea,
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea {
border-radius: 12px !important;
border-color: var(--tw-border) !important;
background: var(--tw-panel) !important;
color: var(--tw-text) !important;
}
.tw-shop-card {
border-radius: 18px !important;
background: var(--tw-panel) !important;
overflow: hidden;
}
.tw-shop-card:hover { transform: translateY(-5px) !important; box-shadow: var(--tw-shadow-hover) !important; }
.tw-shop-card__image { background: color-mix(in srgb, var(--tw-bg-soft) 74%, white 26%) !important; }
.tw-shop-card__body { padding: 18px !important; }
.tw-shop-card__title { letter-spacing: -.02em; }
.tw-shop-card__buy,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit {
border-radius: 12px !important;
font-weight: 800 !important;
}
.tw-shop-card__buy:not(.tw-shop-card__buy--secondary),
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt {
background: var(--tw-accent) !important;
color: var(--tw-button-text) !important;
}
.tw-shop-card__stock-fill,
.tw-shop-stock__fill,
.tw-shop-card__stock-value { background: var(--tw-success) !important; }
.tw-single-product__media-card,
.tw-single-product__summary-card,
.woocommerce-cart .cart_totals,
.woocommerce-checkout #order_review,
.woocommerce-checkout .woocommerce-billing-fields,
.woocommerce-account .woocommerce-MyAccount-content {
border-radius: 20px !important;
} .tw-footer {
margin-top: clamp(44px, 7vw, 86px);
background:
radial-gradient(circle at 12% 0%, color-mix(in srgb, var(--tw-accent) 18%, transparent), transparent 28rem),
radial-gradient(circle at 88% 12%, color-mix(in srgb, var(--tw-accent-2) 14%, transparent), transparent 25rem),
var(--tw-footer-bg) !important;
color: var(--tw-footer-text);
}
.tw-footer__card {
border-radius: 20px;
box-shadow: 0 18px 46px rgba(0,0,0,.18);
}
.tw-footer__lead,
.tw-footer__info-item p,
.tw-footer__links-list a,
.tw-footer-nav a,
.tw-footer__note,
.tw-footer__copy,
.tw-footer__credit { color: color-mix(in srgb, var(--tw-footer-text) 78%, transparent); }
.tw-footer__title,
.tw-footer__info-item strong,
.tw-footer__card-title,
.tw-footer__note strong { color: var(--tw-footer-text); } a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible { outline: none; box-shadow: var(--tw-focus); }
@media (max-width: 1100px) {
.tw-main-header__inner { grid-template-columns: 180px minmax(300px, 1fr) auto; }
}
@media (max-width: 991px) {
.tw-container { width: min(100% - 24px, var(--tw-container)); }
.tw-mobile-header {
background: color-mix(in srgb, var(--tw-header-bg) 96%, transparent) !important;
backdrop-filter: blur(18px);
}
.tw-mobile-search .tw-search-input { border-radius: 14px; }
.tw-search-live-panel { position: fixed; left: 12px; right: 12px; width: auto; top: 118px; }
.tw-search-live-panel__inner { max-height: calc(100vh - 145px); overflow: auto; }
.tw-home-section { padding: 34px 0; }
}
@media (max-width: 767px) {
:root { --tw-radius: 16px; --tw-radius-lg: 20px; }
.tw-hero__content h1,
.tw-home-slider__content h1 { font-size: clamp(2rem, 10vw, 3.1rem); }
.tw-category-card,
.tw-product-card,
.tw-repair-card,
.tw-shop-card { border-radius: 16px !important; }
.tw-search-button__text { display: none; }
.tw-search-button { width: 50px; padding: 0; }
.tw-footer__card { border-radius: 18px; }
}
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
} .tw-topbar {
background: color-mix(in srgb, var(--tw-footer-bg) 94%, var(--tw-accent) 6%) !important;
border-bottom-color: color-mix(in srgb, var(--tw-accent) 18%, transparent) !important;
}
.tw-topbar__left,
.tw-topbar__right a { color: color-mix(in srgb, var(--tw-footer-text) 82%, transparent) !important; }
.tw-topbar__right a:hover { color: color-mix(in srgb, var(--tw-accent) 76%, white 24%) !important; }
.tw-auth-hangtab {
background: linear-gradient(135deg, var(--tw-accent-2), color-mix(in srgb, var(--tw-accent-2) 72%, var(--tw-accent) 28%)) !important;
color: var(--tw-button-text) !important;
box-shadow: 0 14px 30px color-mix(in srgb, var(--tw-accent-2) 24%, transparent) !important;
}
.tw-auth-hangtab::before {
background: color-mix(in srgb, var(--tw-accent-2) 72%, black 28%) !important;
} @media (max-width: 767px) {
.tw-shop-card .js-tw-shop-buy,
.tw-shop-card .js-tw-shop-buy:link,
.tw-shop-card .js-tw-shop-buy:visited {
background: linear-gradient(180deg, #014964 0%, #002c52 100%) !important;
border-color: #002c52 !important;
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
text-shadow: none !important;
}
.tw-shop-card .js-tw-shop-buy:hover,
.tw-shop-card .js-tw-shop-buy:focus,
.tw-shop-card .js-tw-shop-buy:active {
background: linear-gradient(180deg, #016082 0%, #013b59 100%) !important;
border-color: #013b59 !important;
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
}
.tw-single-product .single_add_to_cart_button,
.tw-single-product button.single_add_to_cart_button,
.tw-single-product .button.alt {
background: linear-gradient(180deg, #dc8124 0%, #b96d1f 100%) !important;
border-color: #b96d1f !important;
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
}
} @media (min-width: 1101px) {
html { font-size: 15px; }
.tw-container {
width: min(100% - 32px, var(--tw-container));
}
.tw-topbar__inner { min-height: 34px; }
.tw-topbar { font-size: .86rem; }
.tw-main-header__inner {
min-height: 72px;
grid-template-columns: 190px minmax(340px, 1fr) auto;
gap: 16px;
}
.tw-main-header__logo .tw-brand-logo--header { width: min(100%, 215px); }
.tw-main-header__logo .tw-brand-logo--header img { max-height: 60px; }
.tw-search-input,
.tw-search-button {
min-height: 44px;
height: 44px;
border-radius: 11px;
}
.tw-search-input {
padding-left: 42px;
font-size: .92rem;
}
.tw-search-input-icon { left: 15px; }
.tw-search-button { padding-inline: 15px; }
.tw-content-wrap { padding: 30px 0 44px; }
.tw-home-section { padding: 30px 0; }
.tw-hero { padding-top: 30px; padding-bottom: 30px; }
.tw-hero__content h1,
.tw-home-slider__content h1 {
font-size: clamp(2rem, 3.5vw, 3.55rem);
line-height: 1.01;
}
.tw-hero__content p,
.tw-home-slider__content p {
font-size: clamp(.94rem, 1.05vw, 1.04rem);
}
.tw-category-card {
min-height: 116px;
padding: 16px 14px;
}
.tw-product-card__body { padding: 15px; }
.tw-btn { min-height: 44px; padding-inline: 17px; }
}