@layer reset, tokens, vendor, base, layout, components, utilities, pages;@layer reset {
*,
*::before,
*::after {
box-sizing: border-box;
}* {
margin: 0;
}html {
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
}body {
min-height: 100vh;
min-height: 100dvh;
}img,
picture,
video,
canvas,
svg {
display: block;
max-width: 100%;
}img,
video {
height: auto;
}input,
button,
textarea,
select {
font: inherit;
color: inherit;
letter-spacing: inherit;
}button {
padding: 0;
border: 0;
background: none;
cursor: pointer;
}a {
color: inherit;
}ul[role="list"],
ol[role="list"] {
padding: 0;
list-style: none;
}p,
h1,
h2,
h3,
h4,
h5,
h6 {
overflow-wrap: break-word;
}table {
border-collapse: collapse;
}[hidden] {
display: none !important;
}
}
@layer tokens {
:root {
--color-brand-green: #79FF79;
--color-brand-cyan: #79FFFF;
--gradient-media-shade: linear-gradient(180deg, rgb(21 42 54 / 0) 30%, rgb(21 42 54 / .55) 60%, rgb(21 42 54 / .9));
--gradient-brand-line: linear-gradient(90deg, var(--color-brand-green), var(--color-brand-cyan));
--color-primary: #007C7D;
--color-primary-hover: #00696A;
--color-primary-soft: #E7F5F5;
--color-accent: #177A42;
--color-accent-soft: #EAF7EE;
--color-text: #152A36;
--color-text-2: #4A5B67;
--color-text-3: #5F6E79;
--color-border: #E3E9ED;
--color-border-strong: #CFD8DE;
--color-soft: #F4F7F9;
--color-scrollbar: #C3CDD4;
--color-scrollbar-hover: #8E9DA8;
--scrollbar-size: 12px;
--color-white: #FFFFFF;
--color-on-primary-muted: rgb(255 255 255 / .92);
--color-on-primary-line: rgb(255 255 255 / .2);
--color-on-primary-soft: rgb(255 255 255 / .12);
--map-tiles-filter: grayscale(1) opacity(.72);
--color-success: var(--color-accent);
--color-success-soft: var(--color-accent-soft);
--color-info: var(--color-primary);
--color-info-soft: var(--color-primary-soft);
--color-warning: #8A5300;
--color-warning-soft: #FFF3D6;
--color-danger: #B42318;
--color-danger-soft: #FDECEA;
--color-sale: #C2410C;
--color-open: #22A55B;
--color-whatsapp: #25D366;
--color-favorite: #D63A4A;
--font-sans: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
--font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
--text-hero: clamp(1.8rem, 1.25rem + 2.2vw, 2.75rem);
--text-h1: clamp(1.875rem, 1.45rem + 1.7vw, 2.5rem);
--text-h2: clamp(1.6875rem, 1.4rem + 1.1vw, 2.125rem);
--text-h3: 1.25rem;
--text-h4: 1.125rem;
--text-lg: 1.0625rem;
--text-body: 1rem;
--text-md: .9375rem;
--text-sm: .875rem;
--text-xs: .8125rem;
--text-2xs: .75rem;
--weight-regular: 400;
--weight-medium: 500;
--weight-semibold: 600;
--weight-bold: 700;
--weight-heavy: 800;
--leading-tight: 1.15;
--leading-heading: 1.25;
--leading-body: 1.6;
--tracking-tight: -.02em;
--tracking-wide: .02em;
--space-1: .25rem;
--space-2: .5rem;
--space-3: .75rem;
--space-4: 1rem;
--space-5: 1.25rem;
--space-6: 1.5rem;
--space-7: 2rem;
--space-8: 2.5rem;
--space-9: 3rem;
--space-10: 4rem;
--section-space: clamp(3.75rem, 2.7rem + 3.2vw, 5.5rem);
--container: 77.5rem;
--gutter: 1.25rem;
--admin-sidebar: 16rem;
--admin-aside: 22rem;
--admin-login: 26rem;
--admin-stat: 13rem;
--tile-min-h: 15rem;
--admin-chart: 11rem;
--admin-chart-sm: 6.5rem;
--admin-donut: 11rem;
--admin-spark: 2.25rem;
--admin-mail: 40rem;
--admin-mail-sm: 23.4375rem;
--admin-mail-h: 50rem;
--dropzone-thumb: 10rem;
--dropzone-tile: 9rem;
--drawer-lg: 72rem;
--editor-stage: 34rem;
--editor-tools: 20rem;
--editor-handle: .75rem;
--range-thumb: 1.25rem;
--range-track: .25rem;
--legal-box-h: 22rem;
--float-size: 3.5rem;
--pdp-bar-h: 4rem;
--consent-w: 26rem;
--chart-1: var(--color-primary);
--chart-2: #5FA9AA;
--chart-3: #B3D8D8;
--chart-area: rgb(0 124 125 / .1);
--chart-grid: var(--color-border);
--radius-sm: 8px;
--radius: 10px;
--radius-md: 12px;
--radius-lg: 16px;
--radius-xl: 24px;
--radius-pill: 999px;
--control-sm: 2.375rem;
--control-md: 2.75rem;
--control-lg: 3.125rem;
--shadow-sm: 0 2px 8px rgb(21 42 54 / .12);
--shadow: 0 10px 30px -12px rgb(21 42 54 / .18);
--shadow-lg: -16px 0 40px -16px rgb(21 42 54 / .28);
--color-overlay: rgb(21 42 54 / .45);
--color-overlay-soft: rgb(21 42 54 / .2);
--duration-fast: 180ms;
--duration-base: 250ms;
--duration-slow: 500ms;
--ease: cubic-bezier(.2, .8, .2, 1);
--z-dropdown: 20;
--z-floating: 30;
--z-header: 40;
--z-drawer: 50;
--z-toast: 60;
}
}
@font-face {
font-family: "Plus Jakarta Sans";
src: url("/assets/fonts/jakarta-latin-ext.woff2?v=3") format("woff2");
font-weight: 200 800;
font-style: normal;
font-display: swap;
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}@font-face {
font-family: "Plus Jakarta Sans";
src: url("/assets/fonts/jakarta-latin.woff2?v=3") format("woff2");
font-weight: 200 800;
font-style: normal;
font-display: swap;
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}@layer base {
html {
color-scheme: light;
scroll-behavior: smooth;
scrollbar-gutter: stable;
}
:where(section, article, div, form, h1, h2, h3, h4)[id] {
scroll-margin-top: calc(var(--header-sticky-height, 0px) + var(--space-6));
}body {
background: var(--color-white);
color: var(--color-text);
font-family: var(--font-sans);
font-size: var(--text-body);
line-height: var(--leading-body);
overflow-wrap: break-word;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}h1,
h2,
h3,
h4 {
font-weight: var(--weight-bold);
line-height: var(--leading-heading);
letter-spacing: -.01em;
text-wrap: balance;
}h1 { font-size: var(--text-h1); font-weight: var(--weight-heavy); letter-spacing: var(--tracking-tight); }
h2 { font-size: var(--text-h2); font-weight: var(--weight-heavy); letter-spacing: var(--tracking-tight); }
h3 { font-size: var(--text-h3); }
h4 { font-size: var(--text-h4); }p {
text-wrap: pretty;
}a {
color: inherit;
text-decoration: none;
}strong,
b {
font-weight: var(--weight-bold);
}small {
font-size: var(--text-sm);
}code,
kbd {
font-family: var(--font-mono);
font-size: .875em;
}hr {
border: 0;
border-top: 1px solid var(--color-border);
}address {
font-style: normal;
}:focus-visible {
outline: 2px solid var(--color-primary);
outline-offset: 2px;
}::selection {
background: var(--color-primary-soft);
color: var(--color-text);
}
@supports not selector(::-webkit-scrollbar) {
* {
scrollbar-color: var(--color-scrollbar) transparent;
scrollbar-width: thin;
}
}::-webkit-scrollbar {
width: var(--scrollbar-size);
height: var(--scrollbar-size);
}::-webkit-scrollbar-track,
::-webkit-scrollbar-corner {
background: transparent;
}::-webkit-scrollbar-thumb {
border: 3px solid transparent;
border-radius: var(--radius-pill);
background: var(--color-scrollbar) padding-box;
}::-webkit-scrollbar-thumb:hover {
background-color: var(--color-scrollbar-hover);
}::-webkit-scrollbar-button {
display: none;
}
}
@layer layout {
.container {
width: 100%;
max-width: calc(var(--container) + var(--gutter) * 2);
margin-inline: auto;
padding-inline: var(--gutter);
}
.section {
padding-block: var(--section-space);
}.section--soft {
background: var(--color-soft);
}.section--tight {
padding-block: var(--space-10);
}
.stack {
display: flex;
flex-direction: column;
gap: var(--stack-gap, var(--space-4));
}.stack > :is(.btn:not(.btn--block), .badge, .link) {
align-self: flex-start;
}
.cluster {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--cluster-gap, var(--space-3));
}
.grid {
--cols: 4;
--cols-lg: 3;
--cols-md: 2;
--cols-sm: 1;display: grid;
grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
gap: var(--grid-gap, var(--space-6));
}.grid--2 {
--cols: 2;
--cols-lg: 2;
}.grid--3 {
--cols: 3;
--cols-md: 1;
}.grid--4 {
--cols-lg: 2;
}.grid--5 {
--cols: 5;
--cols-md: 3;
--cols-sm: 2;
}
.grid--products {
--cols-sm: 2;
}@media (max-width: 37.49em) {
.grid--products {
--grid-gap: var(--space-3);
}
}@media (max-width: 73.74em) {
.grid {
grid-template-columns: repeat(var(--cols-lg), minmax(0, 1fr));
}
}@media (max-width: 61.99em) {
.grid {
grid-template-columns: repeat(var(--cols-md), minmax(0, 1fr));
gap: var(--grid-gap-md, var(--space-4));
}
}@media (max-width: 37.49em) {
.grid {
grid-template-columns: repeat(var(--cols-sm), minmax(0, 1fr));
}
}
.split {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
align-items: center;
gap: var(--split-gap, 4.5rem);
}@media (max-width: 61.99em) {
.split {
grid-template-columns: minmax(0, 1fr);
gap: var(--space-8);
}
}
.bento {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
grid-auto-rows: minmax(var(--tile-min-h), auto);
grid-auto-flow: dense;
gap: var(--grid-gap, var(--space-6));
}.bento > .is-lg {
grid-column: span 2;
grid-row: span 2;
}.bento > .is-wide {
grid-column: span 2;
}@media (max-width: 61.99em) {
.bento {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--space-4);
}
}@media (max-width: 37.49em) {
.bento {
grid-template-columns: minmax(0, 1fr);
grid-auto-rows: minmax(14rem, auto);
}.bento > :is(.is-lg, .is-wide) {
grid-column: auto;
}.bento > .is-lg {
grid-row: span 1;
}
}
}
@layer components {
.alert {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
align-items: start;
gap: var(--space-3);
padding: var(--space-4) var(--space-5);
border: 1px solid var(--alert-border);
border-radius: var(--radius-md);
background: var(--alert-bg);
color: var(--color-text);
}
.alert > .icon {
margin-top: calc((var(--text-sm) * var(--leading-body) - 1.25rem) / 2);
color: var(--alert-fg);
}.alert:has(.alert__title) > .icon {
margin-top: calc((var(--text-md) * var(--leading-body) - 1.25rem) / 2);
}.alert__body {
display: grid;
gap: 2px;
}.alert__title {
font-size: var(--text-md);
font-weight: var(--weight-bold);
}.alert__text {
color: var(--color-text-2);
font-size: var(--text-sm);
}.alert--success {
--alert-bg: var(--color-success-soft);
--alert-fg: var(--color-success);
--alert-border: rgb(23 122 66 / .18);
}.alert--info {
--alert-bg: var(--color-info-soft);
--alert-fg: var(--color-info);
--alert-border: rgb(0 124 125 / .18);
}.alert--warning {
--alert-bg: var(--color-warning-soft);
--alert-fg: var(--color-warning);
--alert-border: rgb(138 83 0 / .18);
}.alert--danger {
--alert-bg: var(--color-danger-soft);
--alert-fg: var(--color-danger);
--alert-border: rgb(180 35 24 / .18);
}
}
@layer components {
.badge {
display: inline-flex;
align-items: center;
gap: var(--space-1);
height: 1.5rem;
padding: 0 .5625rem;
border-radius: 6px;
background: var(--badge-bg);
box-shadow: var(--badge-ring, 0 0 #0000);
color: var(--badge-fg);
font-size: var(--text-2xs);
font-weight: var(--weight-bold);
line-height: 1;
white-space: nowrap;
}.badge .icon {
stroke-width: 2.2;
}
.badge--new {
--badge-bg: var(--color-brand-green);
--badge-fg: var(--color-text);
}.badge--sale {
--badge-bg: var(--color-sale);
--badge-fg: var(--color-white);
}.badge--neutral {
--badge-bg: var(--color-soft);
--badge-fg: var(--color-text-2);
--badge-ring: inset 0 0 0 1px var(--color-border);
}.badge--primary {
--badge-bg: var(--color-primary-soft);
--badge-fg: var(--color-primary);
}.badge--success {
--badge-bg: var(--color-success-soft);
--badge-fg: var(--color-success);
}.badge--warning {
--badge-bg: var(--color-warning-soft);
--badge-fg: var(--color-warning);
}.badge--danger {
--badge-bg: var(--color-danger-soft);
--badge-fg: var(--color-danger);
}
.status {
display: inline-flex;
align-items: center;
gap: var(--space-2);
color: var(--color-text-3);
font-size: var(--text-sm);
font-weight: var(--weight-semibold);
}.status::before {
content: "";
flex: none;
width: .5rem;
height: .5rem;
border-radius: var(--radius-pill);
background: var(--color-border-strong);
}.status.is-open {
color: var(--color-accent);
}
.status.is-open::before {
margin-inline-start: 4px;
background: var(--color-open);
box-shadow: 0 0 0 4px rgb(34 165 91 / .15);
}
}
@layer components {
.btn {
--btn-h: var(--control-md);
--btn-px: 1.25rem;display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--space-2);
min-height: var(--btn-h);
padding: 0 var(--btn-px);
border: 1.5px solid transparent;
border-radius: var(--radius);
font-family: var(--font-sans);
font-size: var(--text-md);
font-weight: var(--weight-semibold);
line-height: 1;
text-decoration: none;
white-space: nowrap;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
transition:
background-color var(--duration-fast) var(--ease),
border-color var(--duration-fast) var(--ease),
color var(--duration-fast) var(--ease),
box-shadow var(--duration-fast) var(--ease),
transform var(--duration-fast) var(--ease);
}@media (hover: hover) {
.btn:hover {
transform: translateY(-1px);
}
}.btn:active {
transform: translateY(0);
}.btn--sm {
--btn-h: var(--control-sm);
--btn-px: 1rem;font-size: var(--text-sm);
}.btn--lg {
--btn-h: var(--control-lg);
--btn-px: 1.625rem;
}.btn--block {
width: 100%;
}.btn--icon {
--btn-px: 0;width: var(--btn-h);
}
.btn--primary {
background: var(--color-primary);
color: var(--color-white);
}@media (hover: hover) {
.btn--primary:hover {
background: var(--color-primary-hover);
box-shadow: 0 8px 20px -10px rgb(0 124 125 / .7);
}
}
.btn--outline {
border-color: var(--color-border);
background: var(--color-white);
color: var(--color-text);
}@media (hover: hover) {
.btn--outline:hover {
border-color: var(--color-primary);
color: var(--color-primary);
}
}
.btn--white {
background: var(--color-white);
color: var(--color-primary);
}@media (hover: hover) {
.btn--white:hover {
box-shadow: 0 8px 20px -10px rgb(0 0 0 / .35);
}
}.btn--ghost {
border-color: rgb(255 255 255 / .45);
color: var(--color-white);
}@media (hover: hover) {
.btn--ghost:hover {
border-color: var(--color-white);
background: rgb(255 255 255 / .08);
}
}.btn:disabled,
.btn[aria-disabled="true"] {
opacity: .5;
cursor: not-allowed;
pointer-events: none;
}.btn[aria-busy="true"] {
position: relative;
pointer-events: none;
}.btn[aria-busy="true"] > * {
visibility: hidden;
}.btn[aria-busy="true"]::after {
content: "";
position: absolute;
inset: 0;
width: 1.125rem;
height: 1.125rem;
margin: auto;
border: 2px solid currentColor;
border-right-color: transparent;
border-radius: var(--radius-pill);
animation: btn-spin .7s linear infinite;
}
.link {
display: inline-flex;
align-items: center;
gap: 6px;
color: var(--color-primary);
font-size: var(--text-md);
font-weight: var(--weight-semibold);
}.link .icon {
transition: transform var(--duration-base) var(--ease);
}@media (hover: hover) {
.link:hover .icon {
transform: translateX(3px);
}
}
.icon-button {
display: inline-grid;
place-items: center;
width: 2.5rem;
height: 2.5rem;
border: 1px solid var(--color-border);
border-radius: var(--radius);
background: var(--color-white);
color: var(--color-text);
cursor: pointer;
transition: border-color var(--duration-fast), color var(--duration-fast);
}.icon-button .icon {
--icon-size: 1.125rem;
}@media (hover: hover) {
.icon-button:hover {
border-color: var(--color-primary);
color: var(--color-primary);
}
}
}@keyframes btn-spin {
to {
transform: rotate(360deg);
}
}
@layer components {
.service-card,
.category-card,
.product-card,
.info-card {
position: relative;
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
background: var(--color-white);
transition: box-shadow var(--duration-base) var(--ease), border-color var(--duration-base), transform var(--duration-base) var(--ease);
}@media (hover: hover) {
.service-card:hover,
.category-card:hover,
.product-card:hover,
.info-card:hover {
border-color: transparent;
box-shadow: var(--shadow);
}.service-card:hover {
transform: translateY(-4px);
}
}.card-media {
overflow: hidden;
background: var(--color-soft);
}.card-media img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform var(--duration-slow) var(--ease);
}@media (hover: hover) {
:is(.service-card, .category-card, .product-card):hover .card-media img {
transform: scale(1.05);
}
}
.service-card {
display: flex;
flex-direction: column;
overflow: hidden;
}
.service-card .card-media {
aspect-ratio: 4 / 3;
border-radius: calc(var(--radius-lg) - 1px) calc(var(--radius-lg) - 1px) 0 0;
}.service-card--row .card-media {
border-radius: calc(var(--radius-lg) - 1px) 0 0 calc(var(--radius-lg) - 1px);
}.service-card__body {
display: flex;
flex: 1;
flex-direction: column;
gap: var(--space-2);
padding: var(--space-5) var(--space-5) 1.375rem;
}.service-card__title {
font-size: var(--text-h4);
}@media (hover: hover) {
.service-card__title a:hover {
color: var(--color-primary);
}
}.service-card__text {
flex: 1;
color: var(--color-text-2);
font-size: var(--text-md);
line-height: 1.55;
}.service-card .link {
margin-top: 6px;
}
.service-card--cta {
justify-content: space-between;
gap: var(--space-5);
padding: var(--space-7);
border: 0;
background: linear-gradient(160deg, #008A8B, var(--color-primary) 60%, var(--color-primary-hover));
color: var(--color-white);
}.service-card--cta .service-card__title {
font-size: var(--text-h3);
line-height: 1.3;
}.service-card--cta .service-card__text {
flex: none;
margin-top: var(--space-2);
color: var(--color-on-primary-muted);
}.service-card--cta .btn {
align-self: flex-start;
}
.service-card--row {
display: grid;
grid-template-columns: minmax(0, 2fr) minmax(0, 3fr) auto;
align-items: stretch;
min-height: 12rem;
scroll-margin-top: calc(var(--header-sticky-height, 0px) + var(--space-6));
}.service-card--row .card-media {
display: block;
aspect-ratio: auto;
height: 100%;
}.service-card--row .service-card__body {
justify-content: center;
padding: var(--space-6) var(--space-2) var(--space-6) var(--space-7);
}.service-card--row .service-card__title {
font-size: var(--text-h3);
}.service-card--row .service-card__title a::after {
content: "";
position: absolute;
inset: 0;
z-index: 0;
}
.service-card--row .service-card__text {
display: -webkit-box;
flex: none;
overflow: hidden;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}.service-card__actions {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--space-2) var(--space-6);
margin-top: var(--space-2);
}.service-card__actions .link {
position: relative;
z-index: 1;
}.service-card__appointment {
color: var(--color-accent);
}.service-card__go {
display: grid;
align-self: center;
place-items: center;
width: 2.75rem;
height: 2.75rem;
margin-right: var(--space-6);
border: 1px solid var(--color-border);
border-radius: var(--radius-pill);
color: var(--color-primary);
transition: background-color var(--duration-base), color var(--duration-base), border-color var(--duration-base);
}.service-card__go .icon {
transition: transform var(--duration-base) var(--ease);
}@media (hover: hover) {
.service-card--row:hover .service-card__go {
border-color: var(--color-primary);
background: var(--color-primary);
color: var(--color-white);
}.service-card--row:hover .service-card__go .icon {
transform: translateX(2px);
}.service-card--row:hover .service-card__title a {
color: var(--color-primary);
}
}@media (max-width: 37.49em) {
.service-card--row {
grid-template-columns: minmax(0, 1fr);
}.service-card--row .card-media {
aspect-ratio: 16 / 9;
height: auto;
border-radius: calc(var(--radius-lg) - 1px) calc(var(--radius-lg) - 1px) 0 0;
}.service-card--row .service-card__body {
padding: var(--space-4) var(--space-5) var(--space-5);
}.service-card__go {
display: none;
}
}.service-card__icon {
flex: none;
display: grid;
place-items: center;
width: 3.25rem;
height: 3.25rem;
border-radius: 14px;
background: rgb(255 255 255 / .14);
}.service-card__icon .icon {
--icon-size: 1.5rem;
}
.service-tile {
position: relative;
display: flex;
align-items: flex-end;
overflow: hidden;
border-radius: var(--radius-lg);
background: var(--color-text);
color: var(--color-white);
isolation: isolate;
}.service-tile img {
position: absolute;
inset: 0;
z-index: -2;
width: 100%;
height: 100%;
object-fit: cover;
transition: transform var(--duration-slow) var(--ease);
}.service-tile::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background: var(--gradient-media-shade);
}.service-tile__body {
display: grid;
gap: var(--space-1);
width: 100%;
padding: var(--space-5);
}.service-tile__title {
color: inherit;
font-size: var(--text-h4);
line-height: 1.3;
}.service-tile__text {
display: -webkit-box;
overflow: hidden;
color: var(--color-on-primary-muted);
font-size: var(--text-sm);
line-height: 1.5;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}.service-tile__more {
display: inline-flex;
align-items: center;
gap: 6px;
margin-top: var(--space-2);
font-size: var(--text-sm);
font-weight: var(--weight-semibold);
}.service-tile__more .icon {
transition: transform var(--duration-base) var(--ease);
}.service-tile.is-lg .service-tile__body {
gap: var(--space-2);
padding: var(--space-7);
}.service-tile.is-lg .service-tile__title {
font-size: var(--text-h2);
line-height: 1.2;
}.service-tile.is-lg .service-tile__text {
max-width: 34rem;
font-size: var(--text-body);
-webkit-line-clamp: 3;
}@media (hover: hover) {
.service-tile:hover img {
transform: scale(1.05);
}.service-tile:hover .service-tile__more .icon {
transform: translateX(3px);
}
}.service-tile:focus-visible {
outline: 3px solid var(--color-primary);
outline-offset: 3px;
}
.bento > .service-card--cta {
justify-content: flex-start;
gap: var(--space-4);
padding: var(--space-6);
}.bento > .service-card--cta .btn {
margin-top: auto;
}.bento > .service-card--cta .service-card__title {
font-size: var(--text-h4);
}
@media (max-width: 37.49em) {
.service-tile.is-lg .service-tile__body {
padding: var(--space-5);
}.service-tile.is-lg .service-tile__title {
font-size: var(--text-h3);
}.service-tile.is-lg .service-tile__text {
font-size: var(--text-sm);
-webkit-line-clamp: 2;
}
}
.category-card {
display: block;
overflow: hidden;
padding: 0;
border: 0;
border-radius: 0;
}.category-card .card-media {
display: block;
aspect-ratio: 3 / 1;
}
.grid--2:has(> .category-card) {
grid-auto-rows: 1fr;
}.grid--2 > .category-card:last-child:nth-child(odd) {
grid-column: 1 / -1;
}.grid--2 > .category-card:last-child:nth-child(odd) .card-media {
position: relative;
height: 100%;
aspect-ratio: auto;
}.grid--2 > .category-card:last-child:nth-child(odd) img {
position: absolute;
inset: 0;
}.category-card:focus-visible {
outline: 3px solid var(--color-primary);
outline-offset: 3px;
}
.product-card {
display: flex;
flex-direction: column;
overflow: hidden;
content-visibility: auto;
contain-intrinsic-size: auto 36rem;
}
.product-card .card-media {
display: block;
aspect-ratio: 4 / 5;
border-bottom: 1px solid var(--color-border);
background: var(--color-white);
}.product-card .card-media img {
object-fit: contain;
}
.card-gallery {
position: relative;
display: block;
}.card-gallery__track {
display: flex;
height: 100%;
overflow-x: auto;
scroll-snap-type: x mandatory;
scrollbar-width: none;
}.card-gallery__track::-webkit-scrollbar {
display: none;
}.card-gallery__track img {
flex: 0 0 100%;
scroll-snap-align: start;
}@media (hover: hover) {
.product-card:hover .card-gallery img {
transform: none;
}
}
@media (hover: hover) and (pointer: fine) {
.card-gallery__track {
display: grid;
grid-template: minmax(0, 1fr) / minmax(0, 1fr);
overflow: hidden;
}.card-gallery__track img {
grid-area: 1 / 1;
opacity: 0;
transition: opacity var(--duration-fast) var(--ease);
}.card-gallery__track img.is-active {
opacity: 1;
}
}.card-gallery__dots {
position: absolute;
bottom: var(--space-3);
left: 50%;
display: flex;
gap: 4px;
padding: 4px 6px;
border-radius: var(--radius-pill);
background: rgb(21 42 54 / .35);
transform: translateX(-50%);
pointer-events: none;
}.card-gallery__dots span {
width: 6px;
height: 6px;
border-radius: var(--radius-pill);
background: rgb(255 255 255 / .55);
transition: width var(--duration-fast) var(--ease), background-color var(--duration-fast);
}.card-gallery__dots .is-active {
width: 14px;
background: var(--color-white);
}
.product-card__media {
position: relative;
}.product-card__strip {
position: absolute;
right: 0;
bottom: 0;
left: 0;
z-index: 1;
padding: 3px var(--space-2);
color: var(--color-white);
font-size: var(--text-xs);
font-weight: var(--weight-bold);
line-height: 1.5;
text-align: center;
pointer-events: none;
}.product-card__strip--low {
background: var(--color-warning);
}.product-card__strip--out {
background: var(--color-text);
}
.product-card__media:has(.product-card__strip--out) .card-media {
opacity: .55;
}.product-card__media:has(.product-card__strip) .card-gallery__dots {
bottom: calc(1.625rem + var(--space-2));
}.product-card__badges {
position: absolute;
top: var(--space-3);
left: var(--space-3);
display: flex;
flex-wrap: wrap;
gap: 6px;
max-width: calc(100% - 4rem);
}
.product-card__actions {
position: absolute;
top: .625rem;
right: .625rem;
display: grid;
gap: var(--space-2);
}.product-card__fav,
.product-card__quick {
display: grid;
place-items: center;
width: 2.375rem;
height: 2.375rem;
border: 0;
border-radius: var(--radius-pill);
background: var(--color-white);
box-shadow: var(--shadow-sm);
color: var(--color-text-2);
cursor: pointer;
transition: color var(--duration-fast), opacity var(--duration-fast) var(--ease);
}:is(.product-card__fav, .product-card__quick) .icon {
--icon-size: 1.3125rem;
}
@media (hover: hover) and (pointer: fine) {
.product-card__quick {
opacity: 0;
}.product-card:hover .product-card__quick,
.product-card__quick:focus-visible,
.product-card__quick[aria-expanded="true"] {
opacity: 1;
}
}
:is(.product-card__fav, .favorite-button)[aria-pressed="true"] {
color: var(--color-favorite);
}:is(.product-card__fav, .favorite-button)[aria-pressed="true"] .icon {
fill: currentColor;
}@media (hover: hover) {
.product-card__fav:hover {
color: var(--color-favorite);
}.product-card__quick:hover {
color: var(--color-primary);
}
}
.product-card__body {
display: flex;
flex: 1;
flex-direction: column;
gap: var(--space-2);
padding: var(--space-5);
}
.product-card__meta {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-2);
min-width: 0;
}.product-card__category {
overflow: hidden;
color: var(--color-text-3);
font-size: var(--text-xs);
line-height: 1.25;
text-overflow: ellipsis;
white-space: nowrap;
}.product-card__name {
overflow: hidden;
font-size: var(--text-body);
font-weight: var(--weight-semibold);
line-height: 1.25;
letter-spacing: 0;
white-space: nowrap;
mask-image: linear-gradient(90deg, #000 82%, transparent);
}@media (hover: hover) {
.product-card__name a:hover {
color: var(--color-primary);
}
}
.product-card__price {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 0 .625rem;
height: 1lh;
margin-bottom: var(--space-1);
overflow: hidden;
font-size: var(--text-h3);
line-height: 1.3;
}
.product-card__highlights {
--fade-start: 0px;
--fade-end: 28px;margin-top: 3px;
display: flex;
gap: var(--space-1);
height: calc(1lh + 4px);
overflow-x: auto;
overscroll-behavior-x: contain;
font-size: var(--text-xs);
scrollbar-width: none;
user-select: none;
mask-image: linear-gradient(90deg, transparent, #000 var(--fade-start), #000 calc(100% - var(--fade-end)), transparent);
}
.product-card__highlights::-webkit-scrollbar {
display: none;
}.product-card__highlights.is-scrollable {
cursor: grab;
}.product-card__highlights.is-dragging {
cursor: grabbing;
}
:is(.product-card__highlights, .quick-view__highlights) li {
flex: none;
padding: 2px var(--space-2);
border-radius: var(--radius-sm);
background: var(--color-primary-soft);
color: var(--color-primary);
font-weight: var(--weight-semibold);
white-space: nowrap;
}
.product-card__perks {
position: relative;
height: 1lh;
overflow: hidden;
margin-top: auto;
color: var(--color-accent);
font-size: var(--text-xs);
font-weight: var(--weight-semibold);
}.product-card__perks li {
position: absolute;
top: 0;
left: 0;
display: inline-flex;
align-items: center;
gap: var(--space-1);
white-space: nowrap;
opacity: 0;
transform: translateY(100%);
transition: transform var(--duration-slow) var(--ease), opacity var(--duration-slow) var(--ease);
}.product-card__perks li.is-active {
opacity: 1;
transform: none;
}.product-card__perks li.is-leaving {
opacity: 0;
transform: translateY(-100%);
}.product-card__price strong {
font-size: var(--text-h3);
font-weight: var(--weight-heavy);
letter-spacing: -.01em;
}.product-card__price del {
color: var(--color-text-3);
font-size: var(--text-sm);
}.product-card .btn {
--btn-h: 2.625rem;
}@media (hover: hover) {
.product-card .btn:hover {
border-color: var(--color-primary);
background: var(--color-primary);
color: var(--color-white);
}
}
@media (max-width: 37.49em) {
.product-card__body {
gap: 6px;
padding: var(--space-3);
}.product-card__name {
font-size: var(--text-sm);
}.product-card__price,
.product-card__price strong {
font-size: var(--text-lg);
}.product-card .btn {
--btn-h: var(--control-sm);
--btn-px: .625rem;font-size: var(--text-xs);
}.product-card .btn .icon {
display: none;
}
}
.info-card {
display: flex;
gap: var(--space-4);
padding: var(--space-6);
}.icon-box {
display: grid;
flex: none;
place-items: center;
width: 3.25rem;
height: 3.25rem;
border-radius: 14px;
background: var(--color-primary-soft);
color: var(--color-primary);
}.icon-box .icon {
--icon-size: 1.5rem;
}.icon-box--accent {
background: var(--color-accent-soft);
color: var(--color-accent);
}.info-card__body {
display: grid;
align-content: start;
gap: var(--space-1);
min-width: 0;
}.info-card__title {
font-size: var(--text-body);
}
.info-card--compact {
align-items: center;
}.info-card--compact .info-card__title {
color: var(--color-text-3);
font-size: var(--text-sm);
font-weight: var(--weight-medium);
}.info-card__text {
color: var(--color-text-2);
font-size: var(--text-md);
overflow-wrap: anywhere;
}.info-card__value {
color: var(--color-text);
overflow-wrap: anywhere;
font-size: var(--text-lg);
font-weight: var(--weight-bold);
}@media (hover: hover) {
a.info-card__value:hover {
color: var(--color-primary);
}
}.info-card .status,
.info-card .link {
justify-self: start;
}
.feature {
display: flex;
align-items: center;
gap: var(--space-4);
}.feature__title {
font-size: var(--text-body);
}.feature__text {
margin-top: 2px;
color: var(--color-text-2);
font-size: var(--text-md);
line-height: 1.5;
}
.checklist {
display: grid;
gap: var(--space-3);
}.checklist li {
display: flex;
align-items: flex-start;
gap: var(--space-3);
font-weight: var(--weight-semibold);
}.checklist .icon {
margin-top: calc((1lh - var(--icon-size, 1.25em)) / 2);
color: var(--color-accent);
}
.media-frame {
position: relative;
}.media-frame img {
width: 100%;
aspect-ratio: 8 / 9;
object-fit: cover;
border-radius: 20px;
}.media-frame__badge {
position: absolute;
bottom: 1.75rem;
left: -1.5rem;
display: flex;
align-items: center;
gap: .875rem;
padding: var(--space-4) 1.375rem var(--space-4) var(--space-4);
border-radius: var(--radius-lg);
background: var(--color-white);
box-shadow: var(--shadow);
color: var(--color-text-2);
font-size: var(--text-sm);
line-height: 1.35;
}.media-frame__badge strong {
display: block;
color: var(--color-text);
font-size: var(--text-body);
}.media-frame__badge .icon-box {
width: 2.875rem;
height: 2.875rem;
border-radius: var(--radius-md);
}@media (max-width: 61.99em) {
.media-frame__badge {
left: var(--space-4);
}
}
}
@layer components {
.chip {
display: inline-flex;
align-items: center;
gap: var(--space-2);
min-height: var(--control-sm);
padding: 0 var(--space-4);
border: 1.5px solid var(--color-border);
border-radius: var(--radius);
background: var(--color-white);
color: var(--color-text-2);
font-size: var(--text-sm);
font-weight: var(--weight-semibold);
white-space: nowrap;
cursor: pointer;
transition: border-color var(--duration-fast), color var(--duration-fast), background-color var(--duration-fast);
}@media (hover: hover) {
.chip:hover {
border-color: var(--color-primary);
color: var(--color-primary);
}
}
.chip--check {
position: relative;
cursor: pointer;
user-select: none;
}.chip__input {
position: absolute;
opacity: 0;
pointer-events: none;
}.chip--check:has(.chip__input:focus-visible) {
outline: 2px solid var(--color-primary);
outline-offset: 2px;
}.chip--check:has(.chip__input:checked),
.chip[aria-pressed="true"],
.chip[aria-current="page"] {
border-color: var(--color-primary);
background: var(--color-primary-soft);
color: var(--color-primary);
}
.chip__count {
min-width: 1.75rem;
padding: 1px var(--space-2);
border-radius: var(--radius-pill);
background: var(--color-soft);
color: var(--color-text-3);
font-size: var(--text-xs);
font-weight: var(--weight-semibold);
font-variant-numeric: tabular-nums;
text-align: center;
}.chip--check:has(.chip__input:checked) .chip__count,
.chip[aria-pressed="true"] .chip__count,
.chip[aria-current="page"] .chip__count {
background: var(--color-white);
color: var(--color-primary);
}
}
@layer components {
.consent {
--consent-lift: 0px;position: fixed;
left: var(--space-6);
bottom: calc(var(--space-6) + var(--consent-lift));
z-index: var(--z-floating);
display: grid;
gap: var(--space-4);
width: min(var(--consent-w), calc(100% - 2 * var(--space-6) - var(--float-size) - var(--space-4)));
padding: var(--space-5);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
background: var(--color-white);
box-shadow: var(--shadow);
transition: opacity var(--duration-base) var(--ease), transform var(--duration-base) var(--ease), bottom var(--duration-base) var(--ease);
}.consent[hidden] {
display: none;
}@starting-style {
.consent {
opacity: 0;
transform: translateY(12px);
}
}.consent.is-leaving {
opacity: 0;
transform: translateY(12px);
}.consent__text {
color: var(--color-text-2);
font-size: var(--text-sm);
line-height: var(--leading-body);
}.consent__text a {
color: var(--color-primary);
font-weight: var(--weight-semibold);
text-decoration: underline;
text-underline-offset: 2px;
}.consent__actions {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--space-2);
}
@media (max-width: 61.99em) {
:root.has-product-bar .consent {
--consent-lift: calc(var(--pdp-bar-h) + env(safe-area-inset-bottom, 0px));
}
}@media (max-width: 37.49em) {
.consent {
right: var(--space-4);
left: var(--space-4);
bottom: calc(var(--space-4) + var(--float-size) + var(--space-3) + var(--consent-lift));
width: auto;
padding: var(--space-4);
}
}
}
@layer components {
.content {
display: grid;
align-content: start;
justify-items: start;
gap: var(--space-5);
}.content > p {
color: var(--color-text-2);
}.content > .content__lead {
color: var(--color-text);
font-size: var(--text-lg);
font-weight: var(--weight-medium);
}.content > .checklist {
margin-block: 6px 10px;
}
.with-aside {
display: grid;
grid-template-columns: minmax(0, 1fr) 22.5rem;
align-items: start;
gap: var(--space-10);
}.with-aside__aside {
display: grid;
gap: var(--space-6);
}@media (max-width: 61.99em) {
.with-aside {
grid-template-columns: minmax(0, 1fr);
gap: var(--space-9);
}
}
.side-box {
display: grid;
gap: var(--space-4);
padding: var(--space-6);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
background: var(--color-white);
}.side-box__title {
font-size: var(--text-h4);
}.side-nav {
display: grid;
gap: 2px;
margin-inline: calc(var(--space-3) * -1);
}.side-nav a {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-3);
padding: .625rem var(--space-3);
border-radius: var(--radius-sm);
color: var(--color-text-2);
font-size: var(--text-md);
font-weight: var(--weight-medium);
transition: background-color var(--duration-fast), color var(--duration-fast);
}.side-nav .icon {
color: var(--color-text-3);
}@media (hover: hover) {
.side-nav a:hover {
background: var(--color-soft);
color: var(--color-primary);
}
}.side-nav a[aria-current="page"] {
background: var(--color-primary-soft);
color: var(--color-primary);
font-weight: var(--weight-semibold);
}.side-nav a[aria-current="page"] .icon {
color: currentcolor;
}
.form-card {
display: grid;
gap: var(--space-6);
padding: var(--space-8);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
background: var(--color-white);
}.form-card__head {
display: grid;
gap: var(--space-1);
}.form-card__head h2 {
font-size: var(--text-h3);
}.form-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--space-5);
}.form-grid__full {
grid-column: 1 / -1;
}@media (max-width: 37.49em) {
.form-card {
padding: var(--space-6) var(--space-5);
}.form-grid {
grid-template-columns: minmax(0, 1fr);
}
}
.map-frame {
overflow: hidden;
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
background: var(--color-soft);
}.map-frame iframe {
display: block;
width: 100%;
height: clamp(20rem, 40vw, 27.5rem);
border: 0;
}
.rich-text {
display: grid;
gap: var(--space-4);
color: var(--color-text-2);
}.rich-text > * {
min-width: 0;
}.rich-text h2 {
margin-top: var(--space-5);
color: var(--color-text);
font-size: var(--text-h3);
}.rich-text h3 {
margin-top: var(--space-2);
color: var(--color-text);
font-size: var(--text-h4);
}.rich-text > :first-child {
margin-top: 0;
}.rich-text ul,
.rich-text ol {
display: grid;
gap: var(--space-2);
padding-left: var(--space-5);
}.rich-text ul {
list-style: disc;
}.rich-text ol {
list-style: decimal;
}.rich-text li::marker {
color: var(--color-primary);
}.rich-text strong {
color: var(--color-text);
font-weight: var(--weight-semibold);
}.rich-text a {
color: var(--color-primary);
font-weight: var(--weight-semibold);
}.rich-text blockquote {
padding: var(--space-4) var(--space-5);
border-radius: var(--radius-md);
background: var(--color-soft);
color: var(--color-text);
}.rich-text__table {
overflow-x: auto;
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
}.rich-text table {
width: 100%;
border-collapse: collapse;
font-size: var(--text-sm);
}.rich-text th,
.rich-text td {
padding: var(--space-3) var(--space-4);
border-bottom: 1px solid var(--color-border);
text-align: left;
vertical-align: top;
}.rich-text tr:last-child td {
border-bottom: 0;
}.rich-text th {
background: var(--color-soft);
color: var(--color-text);
font-weight: var(--weight-semibold);
}
}
@layer components {
.cta-band {
padding-block: 3.5rem;
background: var(--color-primary);
color: var(--color-white);
}.cta-band__inner {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: var(--space-6);
}.cta-band__title {
font-size: clamp(1.5625rem, 1.3rem + 1vw, 1.875rem);
}.cta-band__text {
margin-top: var(--space-1);
color: var(--color-on-primary-muted);
font-size: var(--text-lg);
}
}
@layer components {
.document {
display: grid;
grid-template-columns: minmax(0, 17rem) minmax(0, 1fr);
align-items: start;
gap: var(--space-8);
}
.document--single {
grid-template-columns: minmax(0, 1fr);
}.document__toc {
position: sticky;
will-change: transform;
top: calc(var(--header-sticky-height, 0px) + var(--space-6));
display: grid;
gap: var(--space-3);
padding: var(--space-6);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
background: var(--color-white);
}.document__toc-title {
color: var(--color-text);
font-size: var(--text-sm);
font-weight: var(--weight-bold);
}.document__toc ol {
display: grid;
gap: var(--space-1);
}.document__toc a {
display: block;
padding-block: var(--space-1);
color: var(--color-text-2);
font-size: var(--text-sm);
text-decoration: none;
transition: color var(--duration-fast);
}@media (hover: hover) {
.document__toc a:hover {
color: var(--color-primary);
}
}.document__body {
display: grid;
gap: var(--space-8);
max-width: 46rem;
color: var(--color-text-2);
}.document__updated {
color: var(--color-text-3);
font-size: var(--text-sm);
}.document__section {
display: grid;
gap: var(--space-3);
}.document__section h2 {
color: var(--color-text);
font-size: var(--text-h3);
}.document__section ul,
.document__section ol {
display: grid;
gap: var(--space-2);
padding-left: var(--space-5);
}.document__section ul {
list-style: disc;
}.document__section ol {
list-style: decimal;
}.document__section li::marker {
color: var(--color-primary);
}.document__section strong {
color: var(--color-text);
font-weight: var(--weight-semibold);
}.document__section a {
color: var(--color-primary);
font-weight: var(--weight-semibold);
}
.document__facts {
display: grid;
grid-template-columns: minmax(0, 9rem) minmax(0, 1fr);
gap: var(--space-2) var(--space-4);
padding: var(--space-5) var(--space-6);
border-radius: var(--radius-md);
background: var(--color-soft);
}.document__facts dt {
color: var(--color-text-3);
}.document__facts dd {
color: var(--color-text);
font-weight: var(--weight-medium);
overflow-wrap: anywhere;
}
.document__table {
overflow-x: auto;
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
}.document__table table {
width: 100%;
border-collapse: collapse;
font-size: var(--text-sm);
}.document__table th,
.document__table td {
padding: var(--space-3) var(--space-4);
border-bottom: 1px solid var(--color-border);
text-align: left;
vertical-align: top;
}.document__table tr:last-child td {
border-bottom: 0;
}.document__table th {
background: var(--color-soft);
color: var(--color-text);
font-weight: var(--weight-semibold);
}@media (max-width: 61.99em) {
.document {
grid-template-columns: minmax(0, 1fr);
gap: var(--space-7);
}
.document__toc {
position: static;
will-change: auto;
}
}@media (max-width: 37.49em) {
.document__facts {
grid-template-columns: minmax(0, 1fr);
gap: 0;
}.document__facts dd + dt {
margin-top: var(--space-3);
}
}
}
@layer components {
.drawer {
position: fixed;
inset: 0 0 0 auto;
z-index: var(--z-drawer);
width: min(26rem, 100%);
max-width: 100%;
height: 100%;
max-height: none;
margin: 0;
padding: 0;
overflow: hidden;
border: 0;
background: var(--color-white);
color: var(--color-text);
box-shadow: var(--shadow-lg);
transform: translateX(100%);
transition:
transform var(--duration-base) var(--ease),
overlay var(--duration-base) allow-discrete,
display var(--duration-base) allow-discrete;
}.drawer[open] {
transform: none;
}@starting-style {
.drawer[open] {
transform: translateX(100%);
}
}.drawer::backdrop {
background: var(--color-overlay);
opacity: 0;
transition:
opacity var(--duration-base) var(--ease),
overlay var(--duration-base) allow-discrete,
display var(--duration-base) allow-discrete;
}.drawer[open]::backdrop {
opacity: 1;
}@starting-style {
.drawer[open]::backdrop {
opacity: 0;
}
}
.drawer--left {
inset: 0 auto 0 0;
width: min(22rem, 88%);
box-shadow: 16px 0 40px -16px rgb(21 42 54 / .28);
transform: translateX(-100%);
}@starting-style {
.drawer--left[open] {
transform: translateX(-100%);
}
}
.drawer--modal {
inset: 0;
width: min(28rem, calc(100% - 2 * var(--gutter)));
height: fit-content;
max-height: calc(100dvh - 2 * var(--gutter));
margin: auto;
border-radius: var(--radius-lg);
box-shadow: var(--shadow);
opacity: 0;
transform: translateY(var(--space-4));
transition:
opacity var(--duration-base) var(--ease),
transform var(--duration-base) var(--ease),
overlay var(--duration-base) allow-discrete,
display var(--duration-base) allow-discrete;
}.drawer--modal[open] {
opacity: 1;
transform: none;
}@starting-style {
.drawer--modal[open] {
opacity: 0;
transform: translateY(var(--space-4));
}
}.drawer--modal .drawer__panel {
height: auto;
max-height: calc(100dvh - 2 * var(--gutter));
}.drawer--modal .drawer__head {
padding-bottom: 0;
border-bottom: 0;
}
.drawer--modal.drawer--lg {
width: min(var(--drawer-lg), calc(100% - 2 * var(--gutter)));
}
:root:has(.drawer[open]) {
overflow: hidden;
scrollbar-gutter: stable;
}.drawer__panel {
display: grid;
grid-template-rows: auto minmax(0, 1fr);
height: 100%;
}.drawer__head {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-4);
padding: var(--space-4) var(--space-5);
border-bottom: 1px solid var(--color-border);
}
.drawer__title {
font-size: var(--text-h3);
font-weight: var(--weight-bold);
line-height: var(--leading-heading);
letter-spacing: -.01em;
}.drawer__body {
display: flex;
flex-direction: column;
overflow-y: auto;
overscroll-behavior: contain;
transition: opacity var(--duration-fast);
}.drawer[aria-busy="true"] .drawer__body {
opacity: .5;
}.drawer__scope {
display: flex;
flex: 1;
flex-direction: column;
}.drawer__list {
flex: 1;
padding-inline: var(--space-5);
}.drawer__list > :last-child {
border-bottom: 0;
}.drawer__foot {
position: sticky;
bottom: 0;
padding: var(--space-4) var(--space-5);
border-top: 1px solid var(--color-border);
background: var(--color-white);
}.drawer__error {
padding: var(--space-5);
color: var(--color-text-2);
}.drawer__empty {
display: grid;
justify-items: center;
gap: var(--space-3);
margin-block: auto;
padding: var(--space-8) var(--space-5);
color: var(--color-text-2);
text-align: center;
}.drawer__empty-title {
color: var(--color-text);
font-size: var(--text-h4);
font-weight: var(--weight-bold);
}
}
@layer components {
.dropzone {
display: grid;
gap: var(--space-3);
min-width: 0;
border-radius: var(--radius-lg);
}.dropzone:has(.dropzone__input:focus-visible) {
outline: 2px solid var(--color-primary);
outline-offset: 2px;
}.dropzone__area {
display: grid;
justify-items: center;
gap: var(--space-2);
padding: var(--space-7) var(--space-5);
border: 1.5px dashed var(--color-border-strong);
border-radius: var(--radius-lg);
background: var(--color-soft);
color: var(--color-text-2);
text-align: center;
cursor: pointer;
transition: border-color var(--duration-fast), background-color var(--duration-fast);
}.dropzone__area[hidden] {
display: none;
}.dropzone__icon {
display: grid;
place-items: center;
width: var(--control-lg);
height: var(--control-lg);
margin-bottom: var(--space-1);
border-radius: var(--radius-pill);
background: var(--color-white);
box-shadow: var(--shadow-sm);
color: var(--color-primary);
transition: transform var(--duration-base) var(--ease);
}.dropzone__icon .icon {
--icon-size: var(--space-6);
}.dropzone__text {
color: var(--color-text);
font-size: var(--text-md);
font-weight: var(--weight-semibold);
}.dropzone__pick {
color: var(--color-primary);
text-decoration: underline;
text-underline-offset: .2em;
}.dropzone__meta {
color: var(--color-text-3);
font-size: var(--text-xs);
}@media (hover: hover) {
.dropzone__area:hover {
border-color: var(--color-primary);
background: var(--color-primary-soft);
}
}.dropzone.is-dragover .dropzone__area {
border-color: var(--color-primary);
background: var(--color-primary-soft);
}.dropzone.is-dragover .dropzone__icon {
transform: translateY(calc(var(--space-1) * -1));
}.dropzone.is-dragover .dropzone__item {
border-color: var(--color-primary);
}.dropzone:has(.dropzone__input[aria-invalid="true"]) .dropzone__area {
border-color: var(--color-danger);
}
.dropzone__list {
display: grid;
gap: var(--space-3);
margin: 0;
padding: 0;
list-style: none;
}.dropzone__list:empty {
display: none;
}.dropzone__item {
display: flex;
align-items: center;
gap: var(--space-4);
min-width: 0;
padding: var(--space-3);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
background: var(--color-white);
transition: border-color var(--duration-fast);
}.dropzone__item[hidden] {
display: none;
}.dropzone__thumb {
display: grid;
flex: none;
place-items: center;
width: var(--dropzone-thumb);
aspect-ratio: var(--dropzone-ratio, 4 / 3);
overflow: hidden;
border-radius: var(--radius-md);
background: var(--color-soft);
color: var(--color-primary);
}.dropzone__thumb img {
width: 100%;
height: 100%;
object-fit: cover;
}.dropzone--contain .dropzone__thumb {
border: 1px solid var(--color-border);
background: var(--color-white);
}.dropzone--contain .dropzone__thumb img {
object-fit: contain;
}.dropzone--file .dropzone__thumb {
width: var(--control-lg);
aspect-ratio: 1;
background: var(--color-primary-soft);
}.dropzone__info {
display: grid;
flex: 1;
gap: var(--space-1);
min-width: 0;
}.dropzone__name {
overflow: hidden;
color: var(--color-text);
font-size: var(--text-sm);
font-weight: var(--weight-semibold);
text-overflow: ellipsis;
white-space: nowrap;
}.dropzone__detail {
color: var(--color-text-3);
font-size: var(--text-xs);
font-variant-numeric: tabular-nums;
}.dropzone__actions {
display: flex;
flex: none;
gap: var(--space-1);
}.dropzone__remove {
color: var(--color-danger);
}@media (hover: hover) {
.dropzone__remove:hover {
border-color: var(--color-danger);
color: var(--color-danger);
}
}
.dropzone--multiple .dropzone__list {
grid-template-columns: repeat(auto-fill, minmax(var(--dropzone-tile), 1fr));
}.dropzone--multiple .dropzone__item {
flex-direction: column;
align-items: stretch;
gap: var(--space-2);
padding: var(--space-2);
}.dropzone--multiple .dropzone__thumb {
width: 100%;
}.dropzone--multiple .dropzone__info {
padding-inline: var(--space-1);
}.dropzone--multiple .dropzone__actions {
justify-content: flex-end;
}@media (max-width: 37.49em) {
.dropzone:not(.dropzone--multiple, .dropzone--file) .dropzone__item {
flex-wrap: wrap;
}.dropzone:not(.dropzone--multiple, .dropzone--file) .dropzone__thumb {
width: 100%;
}
}
}
@layer components {
.field {
display: grid;
align-content: start;
gap: var(--space-2);
min-width: 0;
}.field__label {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: var(--space-3);
color: var(--color-text);
font-size: var(--text-sm);
font-weight: var(--weight-semibold);
}.field__required {
color: var(--color-danger);
}
.address-fields {
display: contents;
}.field__hint {
color: var(--color-text-3);
font-size: var(--text-xs);
}.field__error {
display: flex;
align-items: flex-start;
gap: 6px;
color: var(--color-danger);
font-size: var(--text-xs);
font-weight: var(--weight-semibold);
}.field__error .icon {
margin-top: calc((1lh - var(--icon-size, 1.25em)) / 2);
}.input {
width: 100%;
min-height: var(--control-lg);
padding: .75rem 1rem;
border: 1.5px solid var(--color-border);
border-radius: var(--radius);
background-color: var(--color-white);
color: var(--color-text);
font-family: var(--font-sans);
font-size: var(--text-body);
line-height: 1.4;
appearance: none;
transition: border-color var(--duration-fast), box-shadow var(--duration-fast), background-color var(--duration-fast);
}.input::placeholder {
color: var(--color-text-3);
opacity: 1;
}@media (hover: hover) {
.input:hover {
border-color: var(--color-border-strong);
}
}.input:focus {
border-color: var(--color-primary);
box-shadow: 0 0 0 4px var(--color-primary-soft);
outline: none;
}.input[aria-invalid="true"] {
border-color: var(--color-danger);
}.input[aria-invalid="true"]:focus {
box-shadow: 0 0 0 4px var(--color-danger-soft);
}.input:disabled {
background-color: var(--color-soft);
color: var(--color-text-3);
cursor: not-allowed;
}.input--soft {
border-color: transparent;
background-color: var(--color-soft);
}.input--soft:focus {
background-color: var(--color-white);
}textarea.input {
min-height: 8.5rem;
resize: vertical;
}
select.input {
padding-right: 2.75rem;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234A5B67' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
background-position: right 1rem center;
background-repeat: no-repeat;
background-size: 1.125rem;
cursor: pointer;
}
.input[type="date"] {
position: relative;
padding-right: 2.75rem;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234A5B67' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 2v3'/%3E%3Cpath d='M16 2v3'/%3E%3Crect x='3' y='3' width='18' height='18' rx='2'/%3E%3Cpath d='M3 9h18'/%3E%3C/svg%3E");
background-position: right 1rem center;
background-repeat: no-repeat;
background-size: 1.125rem;
cursor: pointer;
}.input[type="date"]::-webkit-calendar-picker-indicator {
position: absolute;
inset: 0;
width: auto;
height: auto;
opacity: 0;
cursor: pointer;
}.input-group {
position: relative;
display: flex;
align-items: center;
}.input-group .input {
padding-right: 3.25rem;
}.input-group__action {
position: absolute;
right: .375rem;
display: grid;
place-items: center;
width: 2.5rem;
height: 2.5rem;
border-radius: var(--radius-sm);
color: var(--color-text-2);
transition: background-color var(--duration-fast), color var(--duration-fast);
}@media (hover: hover) {
.input-group__action:hover {
background-color: var(--color-soft);
color: var(--color-primary);
}
}.fieldset {
display: grid;
gap: var(--space-3);
min-width: 0;
margin: 0;
padding: 0;
border: 0;
}.fieldset > legend {
float: left;
width: 100%;
margin-bottom: var(--space-3);
padding: 0;
}.fieldset > legend + * {
clear: both;
}.check {
display: inline-flex;
align-items: flex-start;
gap: var(--space-3);
color: var(--color-text-2);
font-size: var(--text-md);
line-height: 1.5;
cursor: pointer;
}.check a {
color: var(--color-primary);
font-weight: var(--weight-semibold);
}.check__control {
display: grid;
flex: none;
place-content: center;
width: 1.25rem;
height: 1.25rem;
margin: calc((1lh - 1.25rem) / 2) 0 0;
border: 1.5px solid var(--color-border-strong);
border-radius: 6px;
background: var(--color-white);
appearance: none;
cursor: pointer;
transition: background-color var(--duration-fast), border-color var(--duration-fast);
}.check__control[type="radio"] {
border-radius: var(--radius-pill);
}.check__control::before {
content: "";
width: .75rem;
height: .75rem;
background: var(--color-white);
transform: scale(0);
transition: transform var(--duration-fast) var(--ease);
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
}.check__control[type="radio"]::before {
width: .5rem;
height: .5rem;
border-radius: var(--radius-pill);
mask: none;
}.check__control:checked {
border-color: var(--color-primary);
background: var(--color-primary);
}.check__control:checked::before {
transform: scale(1);
}@media (hover: hover) {
.check:hover .check__control:not(:checked, :disabled) {
border-color: var(--color-primary);
}
}.check__control:focus-visible {
outline: 2px solid var(--color-primary);
outline-offset: 2px;
}.check__control[aria-invalid="true"] {
border-color: var(--color-danger);
}
.range {
width: 100%;
height: var(--range-thumb);
margin: 0;
background: transparent;
cursor: pointer;
appearance: none;
}.range::-webkit-slider-runnable-track {
height: var(--range-track);
border-radius: var(--radius-pill);
background: linear-gradient(90deg, var(--color-primary) var(--range-fill, 50%), var(--color-border-strong) var(--range-fill, 50%));
}.range::-moz-range-track {
height: var(--range-track);
border-radius: var(--radius-pill);
background: linear-gradient(90deg, var(--color-primary) var(--range-fill, 50%), var(--color-border-strong) var(--range-fill, 50%));
}.range::-webkit-slider-thumb {
width: var(--range-thumb);
height: var(--range-thumb);
margin-top: calc((var(--range-track) - var(--range-thumb)) / 2);
border: 2px solid var(--color-primary);
border-radius: var(--radius-pill);
background: var(--color-white);
box-shadow: var(--shadow-sm);
appearance: none;
transition: box-shadow var(--duration-fast);
}.range::-moz-range-thumb {
box-sizing: border-box;
width: var(--range-thumb);
height: var(--range-thumb);
border: 2px solid var(--color-primary);
border-radius: var(--radius-pill);
background: var(--color-white);
box-shadow: var(--shadow-sm);
transition: box-shadow var(--duration-fast);
}.range:focus-visible {
outline: none;
}
.range:focus-visible::-webkit-slider-thumb {
box-shadow: 0 0 0 2px var(--color-white), 0 0 0 4px var(--color-primary);
}.range:focus-visible::-moz-range-thumb {
box-shadow: 0 0 0 2px var(--color-white), 0 0 0 4px var(--color-primary);
}
}
@layer components {
.icon {
display: inline-block;
flex: none;
width: var(--icon-size, 1.25em);
height: var(--icon-size, 1.25em);
fill: none;
stroke: currentColor;
stroke-width: 1.8;
stroke-linecap: round;
stroke-linejoin: round;
vertical-align: middle;
}
}
@layer components {
.image-editor {
display: grid;
grid-template-columns: minmax(0, 1fr) var(--editor-tools);
gap: var(--space-5) var(--space-6);
padding: var(--space-5) var(--space-5) 0;
}.image-editor__stage {
position: relative;
height: var(--editor-stage);
overflow: hidden;
border-radius: var(--radius-md);
background: var(--color-soft);
}.image-editor__image {
display: block;
max-width: 100%;
}.image-editor__stage :is(.cropper-canvas, .cropper-view-box) img {
filter: var(--editor-filter, none);
}.image-editor[aria-busy="true"] .image-editor__stage {
opacity: .5;
}
.image-editor .cropper-modal {
background-color: var(--color-overlay);
opacity: 1;
}.image-editor .cropper-view-box {
outline: 2px solid var(--color-white);
outline-color: var(--color-white);
}.image-editor .cropper-dashed {
border-color: var(--color-white);
}.image-editor .cropper-center::before,
.image-editor .cropper-center::after {
background-color: var(--color-white);
}.image-editor .cropper-line {
background-color: var(--color-white);
}.image-editor .cropper-point {
width: var(--editor-handle);
height: var(--editor-handle);
border: 2px solid var(--color-white);
border-radius: var(--radius-pill);
background-color: var(--color-primary);
opacity: 1;
}.image-editor .cropper-point:is(.point-n, .point-s) {
left: 50%;
margin-left: calc(var(--editor-handle) / -2);
}.image-editor .cropper-point:is(.point-e, .point-w) {
top: 50%;
margin-top: calc(var(--editor-handle) / -2);
}.image-editor .cropper-point:is(.point-n, .point-ne, .point-nw) {
top: calc(var(--editor-handle) / -2);
}.image-editor .cropper-point:is(.point-s, .point-se, .point-sw) {
bottom: calc(var(--editor-handle) / -2);
}.image-editor .cropper-point:is(.point-e, .point-ne, .point-se) {
right: calc(var(--editor-handle) / -2);
}.image-editor .cropper-point:is(.point-w, .point-nw, .point-sw) {
left: calc(var(--editor-handle) / -2);
}
.image-editor__tools {
display: grid;
align-content: start;
gap: var(--space-5);
min-width: 0;
}.image-editor__summary {
display: grid;
gap: var(--space-2);
padding: var(--space-3) var(--space-4);
border-radius: var(--radius-md);
background: var(--color-soft);
font-size: var(--text-sm);
}.image-editor__fact {
display: flex;
justify-content: space-between;
gap: var(--space-3);
color: var(--color-text-2);
}.image-editor__fact strong {
color: var(--color-text);
font-weight: var(--weight-bold);
}.image-editor__warning {
display: flex;
align-items: flex-start;
gap: var(--space-2);
color: var(--color-warning);
font-size: var(--text-xs);
font-weight: var(--weight-semibold);
}.image-editor__warning .icon {
margin-top: calc((1lh - var(--icon-size, 1.25em)) / 2);
}.image-editor__group {
display: grid;
gap: var(--space-3);
min-width: 0;
margin: 0;
padding: 0;
border: 0;
}.image-editor__group[hidden] {
display: none;
}.image-editor__label {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-3);
padding: 0;
color: var(--color-text);
font-size: var(--text-sm);
font-weight: var(--weight-semibold);
}legend.image-editor__label {
float: left;
width: 100%;
}legend.image-editor__label + * {
clear: both;
}.image-editor__label output {
color: var(--color-text-3);
font-size: var(--text-xs);
}.image-editor__name {
display: inline-flex;
align-items: center;
gap: var(--space-2);
}.image-editor__name .icon {
color: var(--color-primary);
}.image-editor__row {
display: flex;
align-items: center;
gap: var(--space-3);
}.image-editor__row .btn {
flex: 1;
}.image-editor__toggle[aria-pressed="true"] {
border-color: var(--color-primary);
background: var(--color-primary-soft);
color: var(--color-primary);
}.image-editor__fit {
display: flex;
flex-wrap: wrap;
gap: var(--space-2);
}.image-editor__slider {
display: grid;
gap: var(--space-1);
}.image-editor__foot {
grid-column: 1 / -1;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: var(--space-3);
margin-inline: calc(var(--space-5) * -1);
}.image-editor__submit {
display: flex;
gap: var(--space-3);
}.image-editor__defs {
position: absolute;
width: 0;
height: 0;
overflow: hidden;
}@media (max-width: 61.99em) {
.image-editor {
grid-template-columns: minmax(0, 1fr);
}.image-editor__stage {
height: min(var(--editor-stage), 55dvh);
}
}@media (max-width: 37.49em) {
.image-editor__submit {
flex: 1;
}.image-editor__submit .btn {
flex: 1;
}
}
}
@layer components {
.logo {
--logo-mark: 2.875rem;
--logo-word: 1.0625rem;display: inline-flex;
flex: none;
align-items: center;
gap: var(--space-3);
color: var(--color-primary);
}.logo--sm {
--logo-mark: 2.5rem;
--logo-word: .875rem;
}.logo svg {
display: block;
}.logo__mark svg {
width: var(--logo-mark);
height: var(--logo-mark);
}.logo__word svg {
width: auto;
height: var(--logo-word);
}.logo .logo-disc {
fill: none;
}.logo .logo-ring,
.logo .logo-a {
fill: var(--color-primary);
}.logo .logo-b {
fill: var(--color-accent);
}
}
@layer components {
.map {
position: relative;
isolation: isolate;
min-height: 12rem;
background: var(--color-soft);
font: inherit;
}.map .leaflet-tile-pane {
filter: var(--map-tiles-filter);
}
.map .leaflet-control-attribution {
margin: 0 var(--space-4) var(--space-3) 0;
padding: 0 var(--space-2);
border-radius: var(--radius-sm);
color: var(--color-text-3);
font-size: var(--text-xs);
}.map .leaflet-control-attribution a {
color: inherit;
}.map__marker {
border: 0;
background: none;
}.map__pin {
display: grid;
place-items: center;
width: 100%;
height: 100%;
border: 3px solid var(--color-white);
border-radius: 50% 50% 50% 0;
background: var(--color-primary);
box-shadow: var(--shadow-sm);
transform: rotate(-45deg);
}.map__pin::after {
content: "";
width: .625rem;
height: .625rem;
border-radius: var(--radius-pill);
background: var(--color-white);
}
}
@layer components {
.nav {
position: relative;
}
.nav__item.nav__item--mega {
position: static;
}.mega {
position: absolute;
top: 100%;
right: 0;
left: 0;
z-index: var(--z-dropdown);
border-top: 1px solid var(--color-border);
background: var(--color-white);
box-shadow: var(--shadow);
opacity: 0;
visibility: hidden;
transform: translateY(-6px);
transition:
opacity var(--duration-fast) var(--ease),
transform var(--duration-fast) var(--ease),
visibility 0s linear var(--duration-fast);
}
.mega::after {
content: "";
position: absolute;
top: 100%;
right: 0;
left: 0;
height: 100vh;
background: var(--color-overlay-soft);
pointer-events: none;
}
.nav__item--mega:hover > .mega,
.nav__item--mega:has(:focus-visible) > .mega {
opacity: 1;
visibility: visible;
transform: none;
transition-delay: 90ms, 90ms, 0s;
}
@media (min-width: 62em) {
:root:has(.nav__item--mega:hover, .nav__item--mega :focus-visible) {
overflow: hidden;
scrollbar-gutter: stable;
}
}.nav__item--mega:hover > .nav__link .icon,
.nav__item--mega:has(:focus-visible) > .nav__link .icon {
transform: rotate(180deg);
}.mega__inner {
display: grid;
gap: var(--space-8);
padding-block: var(--space-7);
}.mega__inner--products {
grid-template-columns: 16rem minmax(0, 1fr);
}
.mega__side {
display: grid;
align-content: start;
gap: var(--space-2);
padding-right: var(--space-6);
border-right: 1px solid var(--color-border);
}.mega__label {
padding-inline: var(--space-3);
color: var(--color-text-3);
font-size: var(--text-xs);
font-weight: var(--weight-semibold);
}.mega__tabs {
display: grid;
gap: 2px;
}.mega__tab {
display: grid;
grid-template-columns: minmax(0, 1fr) auto auto;
align-items: center;
gap: var(--space-2);
min-height: var(--control-md);
padding: var(--space-2) var(--space-3);
border-radius: var(--radius-md);
color: var(--color-text);
font-size: var(--text-md);
font-weight: var(--weight-semibold);
line-height: 1.3;
transition: background-color var(--duration-fast), color var(--duration-fast);
}.mega__tab.is-active {
background: var(--color-soft);
color: var(--color-primary);
}
.mega__tab-name {
text-wrap: balance;
}.mega__tab-count {
color: var(--color-text-3);
font-size: var(--text-xs);
font-weight: var(--weight-medium);
}.mega__tab > .icon {
color: var(--color-primary);
opacity: 0;
transition: opacity var(--duration-fast), transform var(--duration-fast) var(--ease);
}.mega__tab.is-active > .icon {
opacity: 1;
transform: translateX(2px);
}.mega__all {
margin-top: var(--space-2);
padding-inline: var(--space-3);
}
.mega__panels {
display: grid;
}
.mega__panel {
grid-area: 1 / 1;
}.mega__panel:not(.is-active) {
visibility: hidden;
}.mega__panel-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-4);
margin-bottom: var(--space-4);
}.mega__panel-title {
font-size: var(--text-h4);
font-weight: var(--weight-bold);
}.mega__products {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: var(--space-4);
}.mega-product {
display: grid;
gap: var(--space-2);
}.mega-product__media {
display: block;
aspect-ratio: 4 / 5;
padding: var(--space-2);
overflow: hidden;
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
background: var(--color-white);
transition: border-color var(--duration-fast);
}.mega-product__media img {
width: 100%;
height: 100%;
object-fit: contain;
transition: transform var(--duration-base) var(--ease);
}.mega-product__name {
display: -webkit-box;
overflow: hidden;
font-size: var(--text-sm);
font-weight: var(--weight-semibold);
line-height: 1.35;
min-height: calc(2em * 1.35);
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
transition: color var(--duration-fast);
}.mega-product__price {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 0 var(--space-2);
font-size: var(--text-sm);
font-weight: var(--weight-bold);
}.mega-product__price del {
color: var(--color-text-3);
font-size: var(--text-xs);
font-weight: var(--weight-medium);
}@media (hover: hover) {
.mega__tab:hover {
color: var(--color-primary);
}.mega-product:hover .mega-product__media {
border-color: var(--color-primary);
}.mega-product:hover .mega-product__media img {
transform: scale(1.04);
}.mega-product:hover .mega-product__name {
color: var(--color-primary);
}
}
.mega__promo {
display: grid;
align-content: start;
justify-items: start;
gap: var(--space-3);
padding: var(--space-6);
border-radius: var(--radius-lg);
background: var(--color-soft);
}.mega__promo-title {
color: var(--color-text);
font-size: var(--text-h4);
font-weight: var(--weight-bold);
line-height: 1.3;
}.mega__promo-text {
color: var(--color-text-2);
font-size: var(--text-sm);
}
.mega__foot {
border-top: 1px solid var(--color-border);
background: var(--color-soft);
}.mega__foot-inner {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: var(--space-3) var(--space-6);
padding-block: var(--space-4);
font-size: var(--text-sm);
}.mega__perks {
display: flex;
flex-wrap: wrap;
gap: var(--space-2) var(--space-6);
color: var(--color-text-2);
}.mega__perks li {
display: flex;
align-items: center;
gap: var(--space-2);
}.mega__perks .icon {
color: var(--color-primary);
}.mega__foot .link {
font-size: var(--text-sm);
}.mega__promo--primary {
background: var(--color-primary);
}.mega__promo--primary .icon-box {
background: rgb(255 255 255 / .14);
color: var(--color-white);
}.mega__promo--primary .mega__promo-title {
color: var(--color-white);
}.mega__promo--primary .mega__promo-text,
.mega__promo--primary .status {
color: var(--color-on-primary-muted);
}.mega__promo-actions {
display: grid;
gap: var(--space-2);
width: 100%;
margin-top: auto;
}
.mega__services {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: var(--space-5);
}.mega-service {
display: grid;
align-content: start;
gap: var(--space-3);
}.mega-service__media {
display: block;
aspect-ratio: 16 / 9;
overflow: hidden;
border-radius: var(--radius-md);
background: var(--color-soft);
}.mega-service__media img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform var(--duration-slow) var(--ease);
}.mega-service__text {
display: grid;
gap: 2px;
}.mega-service__name {
font-size: var(--text-md);
font-weight: var(--weight-bold);
transition: color var(--duration-fast);
}.mega-service__summary {
display: -webkit-box;
overflow: hidden;
color: var(--color-text-2);
font-size: var(--text-sm);
line-height: 1.45;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}@media (hover: hover) {
.mega-service:hover .mega-service__media img {
transform: scale(1.05);
}.mega-service:hover .mega-service__name {
color: var(--color-primary);
}
}
.mega__services .mega__promo {
gap: var(--space-2);
padding: var(--space-5);
overflow: hidden;
contain: size;
}@media (max-width: 61.99em) {
.mega {
display: none;
}
}
}
@layer components {
.drawer__body:has(> .drawer__scope > .mobile-menu) {
overflow: hidden;
}.drawer__scope:has(> .mobile-menu) {
min-height: 0;
}.mobile-menu {
display: grid;
flex: 1;
align-content: start;
gap: var(--space-2);
min-height: 0;
padding: 0 var(--space-5) var(--space-5);
overflow-y: auto;
overscroll-behavior: contain;
scrollbar-width: none;
}.mobile-menu__list > li + li {
border-top: 1px solid var(--color-border);
}.mobile-menu__list--extra {
border-top: 1px solid var(--color-border);
}.mobile-menu__link {
display: flex;
align-items: center;
gap: var(--space-3);
width: 100%;
padding: var(--space-4) 0;
color: var(--color-text);
font: inherit;
font-weight: var(--weight-semibold);
text-align: left;
list-style: none;
cursor: pointer;
transition: color var(--duration-fast);
}.mobile-menu__link::-webkit-details-marker {
display: none;
}.mobile-menu__link[aria-current="page"],
.mobile-menu__link.is-active {
color: var(--color-primary);
}.mobile-menu__link .icon {
color: var(--color-text-3);
}summary.mobile-menu__link .icon {
margin-left: auto;
transition: transform var(--duration-base) var(--ease);
}.mobile-menu__group[open] > summary .icon {
transform: rotate(180deg);
}.mobile-menu__sub {
display: grid;
gap: var(--space-1);
padding: 0 0 var(--space-4) var(--space-4);
}.mobile-menu__sub a {
display: block;
padding-block: var(--space-2);
color: var(--color-text-2);
font-size: var(--text-md);
transition: color var(--duration-fast);
}@media (hover: hover) {
.mobile-menu__link:hover,
.mobile-menu__sub a:hover {
color: var(--color-primary);
}
}
}
@layer components {
.page-header {
padding-block: var(--space-9) var(--space-9);
border-bottom: 1px solid var(--color-border);
background: var(--color-soft);
}.page-header__inner {
display: grid;
gap: var(--space-3);
}.page-header__lead {
max-width: 40rem;
color: var(--color-text-2);
font-size: var(--text-lg);
}.breadcrumb ol {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--space-2);
margin: 0;
padding: 0;
color: var(--color-text-3);
font-size: var(--text-sm);
list-style: none;
}.breadcrumb li {
display: inline-flex;
align-items: center;
gap: var(--space-2);
}.breadcrumb li + li::before {
content: "/";
color: var(--color-border-strong);
}.breadcrumb a {
color: var(--color-text-2);
}@media (hover: hover) {
.breadcrumb a:hover {
color: var(--color-primary);
}
}.breadcrumb [aria-current="page"] {
color: var(--color-text);
font-weight: var(--weight-semibold);
}
}
@layer components {
.iti {
--iti-border-color: var(--color-border);
--iti-hover-color: var(--color-soft);
--iti-icon-color: var(--color-text-3);
--iti-spacer-horizontal: var(--space-3);
--iti-country-selector-bg: var(--color-white);display: block;
width: 100%;
}.iti__selected-country {
border-radius: var(--radius-md) 0 0 var(--radius-md);
}.iti__selected-dial-code {
color: var(--color-text-2);
}
.iti__country-selector {
overflow: hidden;
border-radius: var(--radius-md);
font-size: var(--text-sm);
transition:
opacity var(--duration-fast) var(--ease),
transform var(--duration-fast) var(--ease),
display var(--duration-fast) allow-discrete;
}.iti__country-selector.iti__hide {
opacity: 0;
transform: translateY(calc(-1 * var(--space-2)));
}@starting-style {
.iti__country-selector:not(.iti__hide) {
opacity: 0;
transform: translateY(calc(-1 * var(--space-2)));
}
}
.iti__arrow {
transition:
transform var(--duration-fast) var(--ease),
margin-top var(--duration-fast) var(--ease);
}.iti--inline-country-selector .iti__country-selector {
box-shadow: var(--shadow);
}.iti__search-input {
color: var(--color-text);
font: inherit;
}
@media (max-width: 61.99em) {
.iti__search-input {
font-size: var(--text-body);
}
}.iti__search-icon,
.iti__search-clear {
color: var(--color-text-3);
}.iti__search-icon .icon,
.iti__search-clear .icon {
--icon-size: 1rem;
}
.iti__country-list {
padding: var(--space-1);
overflow-y: auto;
overscroll-behavior: contain;
scrollbar-width: thin;
}.iti__country {
padding: var(--space-2) var(--space-3);
border-radius: var(--radius-sm);
}.iti__country.iti__highlight {
background: var(--color-soft);
}.iti__country[aria-selected="true"] {
color: var(--color-primary);
font-weight: var(--weight-semibold);
}.iti__dial-code {
color: var(--color-text-3);
}
}
@layer components {
.quick-view {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
align-items: start;
gap: var(--space-8);
padding: var(--space-5);
}.quick-view .gallery__main {
width: 22.5rem;
}.quick-view__info {
display: grid;
gap: var(--space-4);
}.quick-view__head {
display: grid;
gap: var(--space-2);
}
.quick-view__title {
font-size: var(--text-h3);
font-weight: var(--weight-bold);
line-height: var(--leading-heading);
text-wrap: balance;
}.quick-view__title a {
transition: color var(--duration-fast);
}@media (hover: hover) {
.quick-view__title a:hover {
color: var(--color-primary);
}
}
.quick-view__highlights {
display: flex;
flex-wrap: wrap;
gap: var(--space-1);
font-size: var(--text-xs);
}.quick-view__highlights li {
flex: 0 1 auto;
white-space: normal;
}
.quick-view__buy {
display: flex;
gap: var(--space-3);
}.quick-view__buy > .btn:not(.btn--icon) {
flex: 1;
min-width: 0;
}.quick-view__more {
justify-self: start;
}@media (max-width: 61.99em) {
.quick-view {
grid-template-columns: minmax(0, 1fr);
gap: var(--space-6);
}.quick-view .gallery__main {
width: auto;
aspect-ratio: 1;
}
}
@media (max-width: 37.49em) {
.quick-view__buy:has(.quantity) {
flex-wrap: wrap;
}.quick-view__buy:has(.quantity) > .btn:not(.btn--icon) {
flex-basis: 100%;
order: 1;
}
}
}
@layer components {
.section-title {
display: grid;
justify-items: center;
gap: var(--space-3);
max-width: 40rem;
margin: 0 auto var(--space-9);
text-align: center;
}.section-title__heading::after {
content: "";
display: block;
width: 3rem;
height: 4px;
margin: .875rem auto 0;
border-radius: 4px;
background: var(--gradient-brand-line);
}.section-title__lead,
.section-head__lead {
color: var(--color-text-2);
font-size: var(--text-lg);
}
.section-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-6);
margin-bottom: var(--space-8);
}.section-head__text {
display: grid;
gap: var(--space-2);
}.section-head > .btn {
flex: none;
}@media (max-width: 37.49em) {
.section-head {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: center;
gap: var(--space-2) var(--space-4);
}.section-head__text {
display: contents;
}.section-head__lead {
grid-column: 1 / -1;
}.section-head > .btn {
grid-row: 1;
grid-column: 2;
}.section-head > .btn {
--btn-h: var(--control-sm);
--btn-px: 1rem;font-size: var(--text-sm);
}.section-title {
margin-bottom: var(--space-8);
}
}
}
@layer components {
.select {
position: relative;
}.select__native {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
opacity: 0;
pointer-events: none;
}.select__button {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-3);
text-align: left;
cursor: pointer;
}.select__button[aria-expanded="true"] {
border-color: var(--color-primary);
box-shadow: 0 0 0 4px var(--color-primary-soft);
}.select__value {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}.select.is-placeholder .select__value {
color: var(--color-text-3);
}
.select__chevron {
flex: none;
width: 1.125rem;
height: 1.125rem;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234A5B67' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
transition: transform var(--duration-fast) var(--ease);
}.select.is-open .select__chevron {
transform: rotate(180deg);
}.select__panel {
position: absolute;
top: calc(100% + var(--space-2));
right: 0;
left: 0;
z-index: var(--z-dropdown);
overflow: hidden;
border: 1px solid var(--color-border);
border-radius: var(--radius);
background: var(--color-white);
box-shadow: var(--shadow);
opacity: 0;
visibility: hidden;
transform: translateY(calc(-1 * var(--space-2)));
transition:
opacity var(--duration-fast) var(--ease),
transform var(--duration-fast) var(--ease),
visibility var(--duration-fast);
}.select.is-above .select__panel {
top: auto;
bottom: calc(100% + var(--space-2));
transform: translateY(var(--space-2));
}.select.is-open .select__panel {
opacity: 1;
visibility: visible;
transform: none;
}.select__search {
padding: var(--space-2);
border-bottom: 1px solid var(--color-border);
}.select__list {
max-height: 16rem;
padding: var(--space-1);
overflow-y: auto;
overscroll-behavior: contain;
}.select__list [role="option"] {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-3);
padding: var(--space-2) var(--space-3);
border-radius: var(--radius-sm);
color: var(--color-text);
cursor: pointer;
}.select__list [role="option"].is-active {
background: var(--color-soft);
}.select__list [aria-selected="true"] {
color: var(--color-primary);
font-weight: var(--weight-semibold);
}
.select__list [aria-selected="true"]::after {
content: "";
flex: none;
width: 1rem;
height: 1rem;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23007C7D' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
}.select__list [aria-disabled="true"] {
color: var(--color-text-3);
cursor: not-allowed;
}
}
@layer components {
.footer {
border-top: 1px solid var(--color-border);
background: var(--color-soft);
color: var(--color-text-2);
font-size: var(--text-md);
}
.footer__top {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 32rem);
align-items: start;
gap: var(--space-8) var(--space-10);
padding-block: var(--space-9);
border-bottom: 1px solid var(--color-border);
}.footer__brand p {
max-width: 30rem;
}.footer__newsletter {
display: grid;
gap: var(--space-1);
}.footer__newsletter-title {
color: var(--color-text);
font-size: var(--text-h4);
}.newsletter-form {
display: grid;
gap: var(--space-3);
margin-top: var(--space-3);
font-size: var(--text-sm);
}.newsletter-form__row {
display: flex;
align-items: flex-start;
gap: var(--space-2);
}.newsletter-form__row .field {
flex: 1;
}.footer__grid {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: var(--space-8);
padding-block: var(--space-9);
}.footer__brand {
display: grid;
align-content: start;
justify-items: start;
gap: 1.125rem;
}.footer__social {
display: flex;
gap: var(--space-2);
}.footer__title {
margin-bottom: var(--space-4);
color: var(--color-text);
font-size: var(--text-md);
}.footer__links {
display: grid;
gap: .625rem;
}@media (hover: hover) {
.footer__links a:hover,
.footer__contact a:hover,
.footer__bottom a:hover {
color: var(--color-primary);
}
}
.footer__hours {
display: grid;
}.footer__hours > span {
white-space: nowrap;
}.footer__contact {
display: grid;
gap: .875rem;
}.footer__contact li {
display: flex;
align-items: flex-start;
gap: .625rem;
}.footer__contact li > :not(.icon) {
min-width: 0;
overflow-wrap: anywhere;
}.footer__contact .icon {
margin-top: calc((1lh - var(--icon-size, 1.25em)) / 2);
color: var(--color-primary);
}.footer__bottom {
border-top: 1px solid var(--color-border);
background: var(--color-white);
font-size: var(--text-sm);
}.footer__bottom-inner {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: var(--space-3) var(--space-6);
min-height: 3.75rem;
padding-block: var(--space-4);
}
.footer__credit {
display: inline-flex;
align-items: center;
gap: 5px;
margin-left: var(--space-2);
padding-left: var(--space-3);
border-left: 1px solid var(--color-border);
white-space: nowrap;
}.footer__credit img {
width: auto;
height: 1em;
transition: opacity var(--duration-fast);
}@media (hover: hover) {
.footer__credit a:hover img {
opacity: .75;
}
}
.footer__seller {
display: flex;
flex-wrap: wrap;
gap: 0 var(--space-2);
margin-top: 2px;
color: var(--color-text-3);
font-size: var(--text-xs);
}.footer__seller > span {
white-space: nowrap;
}.footer__seller > span + span::before {
content: "·";
margin-right: var(--space-2);
}
.footer__payments {
display: flex;
align-items: center;
gap: var(--space-2);
}
.footer__cards {
width: auto;
height: 2.25rem;
}
.wa-float {
position: fixed;
right: var(--space-6);
bottom: var(--space-6);
z-index: var(--z-floating);
display: grid;
place-items: center;
width: var(--float-size);
height: var(--float-size);
border-radius: var(--radius-pill);
background: var(--color-whatsapp);
box-shadow: 0 10px 24px -8px rgb(37 211 102 / .7);
color: var(--color-white);
transition: transform var(--duration-base) var(--ease);
}.wa-float .icon {
--icon-size: 1.875rem;
}@media (hover: hover) {
.wa-float:hover {
transform: scale(1.06);
}
}@media (max-width: 73.74em) {
.footer__grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}@media (max-width: 61.99em) {
.footer__top {
grid-template-columns: minmax(0, 1fr);
}.footer__grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.footer__grid > :last-child {
grid-column: 1 / -1;
}
}@media (max-width: 37.49em) {
.footer__grid {
grid-template-columns: minmax(0, 1fr);
gap: var(--space-7);
}.newsletter-form__row {
flex-direction: column;
align-items: stretch;
}.wa-float {
right: var(--space-4);
bottom: var(--space-4);
}
.footer__bottom-inner {
flex-direction: column;
align-items: center;
gap: var(--space-4);
padding-bottom: calc(var(--float-size) + var(--space-4));
text-align: center;
}.footer__legal-info {
display: grid;
justify-items: center;
gap: var(--space-2);
}.footer__credit {
display: flex;
justify-content: center;
margin: var(--space-1) 0 0;
padding: 0;
border: 0;
}.footer__seller {
display: grid;
gap: 2px;
}.footer__seller > span + span::before {
content: none;
}.footer__cards {
max-width: 100%;
height: auto;
max-height: 2rem;
}
}
}
@layer components {
.skip-link {
position: absolute;
top: var(--space-3);
left: var(--space-3);
z-index: calc(var(--z-header) + 1);
padding: .625rem 1rem;
border-radius: var(--radius);
background: var(--color-primary);
color: var(--color-white);
font-weight: var(--weight-semibold);
transform: translateY(-200%);
transition: transform var(--duration-base) var(--ease);
}.skip-link:focus-visible {
transform: translateY(0);
}
.site-header {
position: sticky;
top: calc(var(--topbar-offset, 0px) * -1);
z-index: var(--z-header);
background: var(--color-white);
transition: box-shadow var(--duration-base) var(--ease);
}.site-header[data-stuck] {
box-shadow: var(--shadow-sm);
}
.topbar {
position: relative;
border-bottom: 1px solid var(--color-border);
background: var(--color-soft);
color: var(--color-text-2);
font-size: var(--text-sm);
}.topbar::before {
content: "";
position: absolute;
inset: 0 0 auto;
height: 3px;
background: var(--gradient-brand-line);
}.topbar__inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-4);
min-height: 2.625rem;
padding-top: 3px;
}.topbar__info,
.topbar__side {
display: flex;
align-items: center;
gap: 1.375rem;
}.topbar__side {
gap: .875rem;
}
.topbar__info {
flex-wrap: wrap;
justify-content: center;
row-gap: 0;
}.topbar__info li,
.topbar__side > span {
display: inline-flex;
align-items: center;
gap: 7px;
white-space: nowrap;
}
.topbar__info li {
line-height: 1;
}.topbar__info .icon,
.topbar__side .icon {
display: block;
flex: none;
}.topbar .icon {
color: var(--color-primary);
}@media (hover: hover) {
.topbar a:hover {
color: var(--color-primary);
}
}.topbar__social {
display: inline-flex;
}.topbar__social .icon {
--icon-size: 1.0625rem;
color: var(--color-text-2);
}
.header-main {
display: flex;
align-items: center;
gap: var(--space-7);
min-height: 5.5rem;
}.header-main__menu {
display: none;
}.search {
position: relative;
flex: 1;
max-width: 35rem;
margin-inline: auto;
}.search .input {
min-height: 3rem;
padding-right: 6rem;
border-radius: var(--radius-md);
font-size: var(--text-md);
}
.search .input::-webkit-search-decoration,
.search .input::-webkit-search-cancel-button {
appearance: none;
}.search__clear {
position: absolute;
top: 50%;
right: calc(5px + 2.375rem + var(--space-1));
display: grid;
place-items: center;
width: 2rem;
height: 2rem;
border-radius: var(--radius-pill);
color: var(--color-text-3);
transform: translateY(-50%);
cursor: pointer;
transition: color var(--duration-fast), background-color var(--duration-fast);
}.search__clear .icon {
--icon-size: 1rem;
}.search .input:placeholder-shown ~ .search__clear {
display: none;
}@media (hover: hover) {
.search__clear:hover {
background: var(--color-soft);
color: var(--color-text);
}
}.search__button {
position: absolute;
top: 5px;
right: 5px;
display: grid;
place-items: center;
width: 2.375rem;
height: 2.375rem;
border: 0;
border-radius: 9px;
background: var(--color-primary);
color: var(--color-white);
cursor: pointer;
transition: background-color var(--duration-fast);
}.search__button .icon {
--icon-size: 1.125rem;
}@media (hover: hover) {
.search__button:hover {
background: var(--color-primary-hover);
}
}.header-main__actions {
display: flex;
align-items: center;
gap: 1.625rem;
}
.header-action {
display: inline-flex;
align-items: center;
gap: var(--space-4);
font-size: var(--text-sm);
font-weight: var(--weight-bold);
line-height: 1.2;
transition: color var(--duration-fast);
}
button:is(.header-action, .nav__link) {
border: 0;
background: none;
color: inherit;
font-family: inherit;
text-align: start;
cursor: pointer;
}.header-action .icon {
--icon-size: 1.625rem;
stroke-width: 1.6;
}
.header-action:not(:has(.header-action__count)) {
gap: var(--space-2);
}@media (hover: hover) {
.header-action:hover {
color: var(--color-primary);
}
}.header-action__label small {
display: block;
color: var(--color-text-3);
font-size: var(--text-xs);
font-weight: var(--weight-medium);
}.header-action__icon {
position: relative;
display: inline-flex;
}.header-action__count {
position: absolute;
top: -6px;
right: -8px;
min-width: 1.125rem;
height: 1.125rem;
padding: 0 5px;
border-radius: var(--radius-pill);
background: var(--color-primary);
color: var(--color-white);
font-size: 11px;
font-weight: var(--weight-bold);
line-height: 1.125rem;
text-align: center;
}
.nav {
border-top: 1px solid var(--color-border);
border-bottom: 1px solid var(--color-border);
background: var(--color-white);
}.nav__inner {
display: flex;
align-items: center;
justify-content: space-between;
min-height: 3.625rem;
}.nav__list {
display: flex;
align-self: stretch;
gap: 6px;
}.nav__item {
position: relative;
display: flex;
}.nav__link {
position: relative;
display: inline-flex;
align-items: center;
gap: 5px;
padding: 0 .875rem;
color: var(--color-text);
font-size: var(--text-md);
font-weight: var(--weight-semibold);
transition: color var(--duration-fast);
}.nav__link .icon {
color: var(--color-text-3);
transition: transform var(--duration-base) var(--ease);
}.nav__link::after {
content: "";
position: absolute;
right: .875rem;
bottom: -1px;
left: .875rem;
height: 2px;
border-radius: 2px;
background: var(--color-primary);
transform: scaleX(0);
transition: transform var(--duration-base) var(--ease);
}.nav__link[aria-current="page"] {
color: var(--color-primary);
}.nav__link[aria-current="page"]::after {
transform: scaleX(1);
}@media (hover: hover) {
.nav__link:hover {
color: var(--color-primary);
}.nav__link:hover::after {
transform: scaleX(1);
}.nav__item:hover .nav__link .icon {
transform: rotate(180deg);
}
}.dropdown {
position: absolute;
top: 100%;
left: 0;
z-index: var(--z-dropdown);
min-width: 16.25rem;
padding: var(--space-2);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
background: var(--color-white);
box-shadow: var(--shadow);
opacity: 0;
visibility: hidden;
transform: translateY(6px);
transition: opacity var(--duration-fast) var(--ease), transform var(--duration-fast) var(--ease), visibility var(--duration-fast);
}.nav__item:hover .dropdown,
.nav__item:focus-within .dropdown {
opacity: 1;
visibility: visible;
transform: translateY(0);
}.dropdown a {
display: block;
padding: 9px var(--space-3);
border-radius: var(--radius-sm);
color: var(--color-text-2);
font-size: var(--text-md);
font-weight: var(--weight-medium);
}@media (hover: hover) {
.dropdown a:hover {
background: var(--color-soft);
color: var(--color-primary);
}
}
@media (max-width: 61.99em) {
.topbar__info .topbar__hours {
display: none;
}.header-main {
flex-wrap: wrap;
gap: var(--space-3) var(--space-4);
min-height: 0;
padding-block: .875rem;
}.header-main__menu {
display: inline-grid;
}.header-main .logo {
--logo-mark: 2.5rem;
--logo-word: .875rem;
}.search {
order: 3;
flex-basis: 100%;
max-width: none;
}
.search .input {
font-size: var(--text-body);
}.header-main__actions {
gap: var(--space-4);
margin-left: auto;
}.header-action__label {
display: none;
}
.nav {
display: none;
}
}@media (max-width: 37.49em) {
.header-main {
column-gap: var(--space-3);
}.header-main__actions {
gap: var(--space-3);
}.topbar__inner {
justify-content: center;
}.topbar__side {
display: none;
}
.topbar {
font-size: var(--text-xs);
}.topbar__info {
flex-wrap: nowrap;
column-gap: var(--space-3);
min-width: 0;
}.topbar__info li {
gap: 5px;
}.topbar__mail {
min-width: 0;
}.topbar__mail a {
overflow: hidden;
text-overflow: ellipsis;
}
}}
@layer components {
.slider {
position: relative;
display: grid;
overflow: hidden;
border-radius: var(--radius-xl);
background: var(--color-soft);
}.slide {
grid-area: 1 / 1;
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);
min-height: 31.25rem;
opacity: 0;
visibility: hidden;
transition: opacity .6s var(--ease), visibility .6s;
}.slide.is-active {
opacity: 1;
visibility: visible;
}.slide__text {
display: flex;
flex-direction: column;
justify-content: center;
gap: 1.125rem;
padding: 3.5rem 3.5rem 6.5rem 4rem;
}.slide__title {
max-width: 14em;
font-size: var(--text-hero);
font-weight: var(--weight-heavy);
line-height: var(--leading-tight);
letter-spacing: var(--tracking-tight);
}.slide__lead {
max-width: 29.5rem;
color: var(--color-text-2);
font-size: var(--text-lg);
}.slide__actions {
display: flex;
flex-wrap: wrap;
gap: var(--space-3);
margin-top: var(--space-2);
}.slide__media img {
width: 100%;
height: 100%;
object-fit: cover;
}.slider__controls {
position: absolute;
bottom: 2.25rem;
left: 4rem;
z-index: 2;
display: flex;
align-items: center;
gap: .875rem;
}.slider__arrow {
display: grid;
place-items: center;
width: 2.5rem;
height: 2.5rem;
border: 1px solid var(--color-border);
border-radius: var(--radius-pill);
background: var(--color-white);
color: var(--color-text);
cursor: pointer;
transition: border-color var(--duration-fast), color var(--duration-fast);
}.slider__arrow .icon {
--icon-size: 1.125rem;
}@media (hover: hover) {
.slider__arrow:hover {
border-color: var(--color-primary);
color: var(--color-primary);
}
}.slider__dots {
display: flex;
gap: var(--space-2);
}.slider__dots button {
width: .5rem;
height: .5rem;
padding: 0;
border: 0;
border-radius: var(--radius-pill);
background: var(--color-border-strong);
cursor: pointer;
transition: width .3s var(--ease), background-color .3s;
}.slider__dots button[aria-current="true"] {
width: 1.625rem;
background: var(--color-primary);
}@media (max-width: 73.74em) {
.slide__title {
font-size: clamp(1.8rem, 1.25rem + 2vw, 2.375rem);
}
}@media (max-width: 61.99em) {
.slide {
grid-template-columns: minmax(0, 1fr);
min-height: 0;
}.slide__media {
order: -1;
aspect-ratio: 16 / 10;
}.slide__text {
padding: 1.75rem var(--space-6) 5.5rem;
}.slider__controls {
bottom: 1.75rem;
left: var(--space-6);
}
}
}
@layer components {
.stock-alert {
display: grid;
flex: 1;
gap: var(--space-3);
min-width: 0;
}.stock-alert__text {
color: var(--color-text-2);
font-size: var(--text-md);
}.stock-alert__form {
display: flex;
flex-wrap: wrap;
gap: var(--space-3);
}.stock-alert__form .field {
flex-basis: 100%;
}.stock-alert__form .btn:not(.btn--icon) {
flex: 1;
min-width: 0;
}.stock-alert__note a {
color: var(--color-primary);
font-weight: var(--weight-semibold);
}
}
@layer components {
.price-block {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: var(--space-2) var(--space-3);
}.price-block__current {
font-size: var(--text-h2);
font-weight: var(--weight-heavy);
letter-spacing: var(--tracking-tight);
line-height: var(--leading-tight);
}.price-block__old {
color: var(--color-text-3);
font-size: var(--text-lg);
}.price-block__note {
flex-basis: 100%;
color: var(--color-text-3);
font-size: var(--text-xs);
}
.gallery {
display: grid;
grid-template-columns: 4.5rem minmax(0, 1fr);
gap: var(--space-4);
}.gallery:not(:has(.gallery__thumbs)) {
grid-template-columns: minmax(0, 1fr);
}
.gallery__main {
position: relative;
display: grid;
grid-template: minmax(0, 1fr) / minmax(0, 1fr);
place-items: center;
aspect-ratio: 4 / 5;
max-width: 100%;
overflow: hidden;
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
background: var(--color-white);
}
.gallery__main img {
grid-area: 1 / 1;
width: 100%;
height: 100%;
object-fit: contain;
opacity: 0;
transition: opacity var(--duration-fast) var(--ease);
}.gallery__main img.is-active {
opacity: 1;
}
.gallery__thumbs {
display: flex;
flex-direction: column;
gap: var(--space-2);
height: 0;
min-height: 100%;
overflow-y: auto;
scrollbar-width: none;
}.gallery__thumb {
flex: none;
width: 100%;
aspect-ratio: 4 / 5;
padding: var(--space-1);
border: 1.5px solid var(--color-border);
border-radius: var(--radius-md);
background: var(--color-white);
cursor: pointer;
transition: border-color var(--duration-fast);
}.gallery__thumb img {
width: 100%;
height: 100%;
object-fit: contain;
}.gallery__thumb[aria-current="true"] {
border-color: var(--color-primary);
}.gallery__arrow {
position: absolute;
top: 50%;
display: grid;
place-items: center;
width: 2.75rem;
height: 2.75rem;
border: 1px solid var(--color-border);
border-radius: var(--radius-pill);
background: var(--color-white);
box-shadow: var(--shadow-sm);
color: var(--color-text);
opacity: 0;
transform: translateY(-50%);
cursor: pointer;
transition: opacity var(--duration-fast), color var(--duration-fast), border-color var(--duration-fast);
}.gallery__arrow--prev {
left: var(--space-3);
}.gallery__arrow--next {
right: var(--space-3);
}.gallery__main:hover .gallery__arrow,
.gallery__arrow:focus-visible {
opacity: 1;
}.gallery__count {
position: absolute;
right: var(--space-3);
bottom: var(--space-3);
padding: var(--space-1) var(--space-3);
border-radius: var(--radius-pill);
background: var(--color-overlay);
color: var(--color-white);
font-size: var(--text-xs);
font-weight: var(--weight-semibold);
}@media (hover: hover) {
.gallery__thumb:hover {
border-color: var(--color-border-strong);
}.gallery__arrow:hover {
border-color: var(--color-primary);
color: var(--color-primary);
}
}@media (hover: none) {
.gallery__arrow {
opacity: 1;
}
}@media (max-width: 61.99em) {
.gallery {
grid-template-columns: minmax(0, 1fr);
}.gallery__thumbs {
order: 2;
flex-direction: row;
height: auto;
min-height: 0;
overflow-x: auto;
}.gallery__thumb {
width: 4rem;
}
}
@media (max-width: 37.49em) {
.gallery__main {
aspect-ratio: 1;
}.gallery__arrow {
width: 2.25rem;
height: 2.25rem;
}.gallery__arrow--prev {
left: var(--space-2);
}.gallery__arrow--next {
right: var(--space-2);
}.gallery__count {
right: var(--space-2);
bottom: var(--space-2);
}
}
@media (min-width: 37.5em) and (max-width: 61.99em) {
.gallery {
justify-self: center;
width: min(100%, 36rem);
}
}
.quantity {
display: inline-flex;
align-items: center;
height: var(--control-lg);
border: 1.5px solid var(--color-border);
border-radius: var(--radius);
background: var(--color-white);
}.quantity button {
display: grid;
place-items: center;
width: 2.75rem;
height: 100%;
padding: 0;
border: 0;
background: none;
color: var(--color-text);
cursor: pointer;
transition: color var(--duration-fast);
}.quantity button .icon {
--icon-size: 1.125rem;
}@media (hover: hover) {
.quantity button:hover {
color: var(--color-primary);
}
}.quantity button:disabled {
color: var(--color-border-strong);
cursor: default;
}.quantity input {
width: 2.25rem;
padding: 0;
border: 0;
background: transparent;
color: var(--color-text);
font: inherit;
font-weight: var(--weight-semibold);
font-variant-numeric: tabular-nums;
text-align: center;
appearance: textfield;
}.quantity input::-webkit-inner-spin-button,
.quantity input::-webkit-outer-spin-button {
margin: 0;
appearance: none;
}.quantity--sm {
height: var(--control-sm);
}.quantity--sm button {
width: 2.25rem;
}
.summary-box {
display: grid;
gap: var(--space-5);
padding: var(--space-6);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
background: var(--color-white);
}.summary-box__title {
font-size: var(--text-h4);
}.summary-rows {
display: grid;
gap: var(--space-3);
margin: 0;
}.summary-row {
display: flex;
justify-content: space-between;
gap: var(--space-4);
color: var(--color-text-2);
font-size: var(--text-md);
}.summary-row dd {
margin: 0;
color: var(--color-text);
font-weight: var(--weight-semibold);
font-variant-numeric: tabular-nums;
text-align: right;
}.summary-row--total {
align-items: baseline;
padding-top: var(--space-4);
border-top: 1px solid var(--color-border);
color: var(--color-text);
font-weight: var(--weight-bold);
}.summary-row--total dd {
font-size: var(--text-h3);
font-weight: var(--weight-heavy);
}
.summary-row--tax {
margin-top: calc(-1 * var(--space-2));
font-size: var(--text-sm);
}.summary-note {
color: var(--color-text-3);
font-size: var(--text-xs);
}.summary-secure {
display: flex;
align-items: center;
justify-content: center;
gap: var(--space-2);
color: var(--color-text-3);
font-size: var(--text-xs);
}
.summary-items {
display: grid;
gap: var(--space-3);
}.summary-item {
display: grid;
grid-template-columns: 3.5rem minmax(0, 1fr) auto;
align-items: center;
gap: var(--space-3);
font-size: var(--text-sm);
}.summary-item__media {
position: relative;
width: 3.5rem;
height: 3.5rem;
padding: 2px;
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
background: var(--color-white);
}.summary-item__media img {
width: 100%;
height: 100%;
object-fit: contain;
}.summary-item__qty {
position: absolute;
top: -6px;
right: -6px;
min-width: 1.25rem;
height: 1.25rem;
padding: 0 5px;
border-radius: var(--radius-pill);
background: var(--color-text-2);
color: var(--color-white);
font-size: var(--text-2xs);
font-weight: var(--weight-bold);
line-height: 1.25rem;
text-align: center;
}.summary-item__name {
font-weight: var(--weight-semibold);
line-height: 1.35;
}.summary-item__price {
font-weight: var(--weight-semibold);
font-variant-numeric: tabular-nums;
}
.cart-list {
border-top: 1px solid var(--color-border);
}.cart-item {
display: grid;
grid-template-columns: 5.5rem minmax(0, 1fr) auto 7rem auto;
grid-template-areas: "media info qty total remove";
align-items: center;
gap: var(--space-5);
padding-block: var(--space-5);
border-bottom: 1px solid var(--color-border);
}.cart-item__media {
grid-area: media;
width: 5.5rem;
height: 5.5rem;
padding: var(--space-1);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
background: var(--color-white);
}.cart-item__media img {
width: 100%;
height: 100%;
object-fit: contain;
}.cart-item__info {
grid-area: info;
display: grid;
gap: 2px;
min-width: 0;
}.cart-item__category {
color: var(--color-text-3);
font-size: var(--text-xs);
}.cart-item__name {
font-weight: var(--weight-semibold);
line-height: 1.4;
}@media (hover: hover) {
.cart-item__name a:hover {
color: var(--color-primary);
}
}.cart-item__unit {
color: var(--color-text-2);
font-size: var(--text-sm);
font-variant-numeric: tabular-nums;
}.cart-item .quantity {
grid-area: qty;
}.cart-item__total {
grid-area: total;
font-weight: var(--weight-bold);
font-variant-numeric: tabular-nums;
text-align: right;
}.cart-item__remove {
grid-area: remove;
}
@media (max-width: 37.49em) {
.cart-item {
position: relative;
grid-template-columns: 5rem auto minmax(0, 1fr);
grid-template-areas:
"media info info"
"media qty total";
align-items: start;
gap: var(--space-3) var(--space-4);
}.cart-item__media {
width: 5rem;
height: 5rem;
}.cart-item__info {
padding-right: calc(2.5rem + var(--space-2));
}.cart-item .quantity,
.cart-item__total {
align-self: center;
}.cart-item__remove {
position: absolute;
top: var(--space-5);
right: 0;
}
}
.cart-item--panel {
grid-template-columns: 4.5rem minmax(0, 1fr) auto;
grid-template-areas: "media info actions";
gap: var(--space-4);
padding-block: var(--space-4);
}.cart-item--panel .cart-item__media {
width: 4.5rem;
height: 4.5rem;
}.cart-item--panel .cart-item__info {
gap: var(--space-1);
}.cart-item--panel .cart-item__name {
display: -webkit-box;
overflow: hidden;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}.cart-item__actions {
grid-area: actions;
display: grid;
gap: var(--space-2);
}.cart-item__price {
display: flex;
align-items: baseline;
flex-wrap: wrap;
gap: 0 var(--space-2);
font-weight: var(--weight-bold);
font-variant-numeric: tabular-nums;
}.cart-item__price del {
color: var(--color-text-3);
font-size: var(--text-xs);
font-weight: var(--weight-medium);
}
.choice-list {
display: grid;
gap: var(--space-3);
}.choice {
display: flex;
align-items: flex-start;
gap: var(--space-3);
padding: var(--space-4) var(--space-5);
border: 1.5px solid var(--color-border);
border-radius: var(--radius-md);
background: var(--color-white);
cursor: pointer;
transition: border-color var(--duration-fast), background-color var(--duration-fast);
}@media (hover: hover) {
.choice:hover {
border-color: var(--color-border-strong);
}
}.choice:has(input:checked) {
border-color: var(--color-primary);
background: var(--color-primary-soft);
}.choice .check__control {
margin-top: calc((1lh - 1.25rem) / 2);
}.choice__body {
display: grid;
flex: 1;
gap: 2px;
min-width: 0;
}.choice__title {
font-weight: var(--weight-semibold);
}.choice__text {
color: var(--color-text-2);
font-size: var(--text-sm);
}.choice__aside {
font-weight: var(--weight-semibold);
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
.checkout-step {
display: grid;
gap: var(--space-5);
padding: var(--space-7);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
background: var(--color-white);
counter-increment: checkout-step;
}.checkout-step__head {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: var(--space-2) var(--space-4);
}.checkout-step__heading {
display: flex;
align-items: center;
gap: var(--space-3);
font-size: var(--text-h4);
}.checkout-step__no {
display: grid;
flex: none;
place-items: center;
width: 2rem;
height: 2rem;
border-radius: var(--radius-pill);
background: var(--color-primary-soft);
color: var(--color-primary);
font-size: var(--text-sm);
font-weight: var(--weight-bold);
}
.checkout-step__no::before {
content: counter(checkout-step);
}@media (max-width: 37.49em) {
.checkout-step {
padding: var(--space-6) var(--space-5);
}
}
.legal-box {
display: grid;
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
background: var(--color-white);
overflow: hidden;
}.legal-box__title {
padding: var(--space-3) var(--space-5);
border-bottom: 1px solid var(--color-border);
background: var(--color-soft);
color: var(--color-text);
font-size: var(--text-md);
font-weight: var(--weight-semibold);
}.legal-box__body {
display: grid;
gap: var(--space-6);
max-height: var(--legal-box-h);
overflow-y: auto;
overscroll-behavior: contain;
padding: var(--space-5);
color: var(--color-text-2);
font-size: var(--text-sm);
}.legal-box__body:focus-visible {
outline-offset: -2px;
}.legal-box__body h4 {
color: var(--color-text);
font-size: var(--text-md);
font-weight: var(--weight-semibold);
}.legal-box .document__facts {
grid-template-columns: minmax(0, 7rem) minmax(0, 1fr);
padding: var(--space-4);
}.legal-box .document__table th,
.legal-box .document__table td {
padding: var(--space-2) var(--space-3);
}.legal-box .num {
text-align: right;
white-space: nowrap;
}.legal-box tfoot td {
color: var(--color-text);
font-weight: var(--weight-medium);
}.legal-box tfoot tr:last-child td {
font-weight: var(--weight-bold);
}@media (max-width: 37.49em) {
.legal-box__body {
padding: var(--space-4);
}.legal-box .document__facts {
grid-template-columns: minmax(0, 1fr);
}
}
.price-range {
display: grid;
grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
align-items: center;
gap: var(--space-2);
}.price-field {
position: relative;
display: block;
}.price-field__unit {
position: absolute;
top: 50%;
right: var(--space-3);
color: var(--color-text-3);
font-size: var(--text-sm);
transform: translateY(-50%);
pointer-events: none;
}.price-range__dash {
color: var(--color-text-3);
}
.filter-bar {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-3) var(--space-5);
margin-bottom: var(--space-5);
padding-block: var(--space-3);
border-bottom: 1px solid var(--color-border);
background: var(--color-white);
}.filter-bar__filters {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--space-2);
}.filter-bar__divider {
width: 1px;
height: 1.5rem;
margin-inline: var(--space-1);
background: var(--color-border);
}.filter-bar__end {
display: flex;
flex: none;
align-items: center;
gap: var(--space-2);
}
.filter-bar .chip--check {
border-radius: var(--radius-pill);
}.filter-bar__mobile {
display: none;
}
.filter-drop {
position: relative;
}.filter-drop__button {
display: inline-flex;
align-items: center;
gap: var(--space-2);
min-height: var(--control-sm);
padding: 0 var(--space-3) 0 var(--space-4);
border: 1.5px solid var(--color-border);
border-radius: var(--radius);
background: var(--color-white);
color: var(--color-text);
font-size: var(--text-sm);
font-weight: var(--weight-semibold);
white-space: nowrap;
list-style: none;
cursor: pointer;
transition: border-color var(--duration-fast), color var(--duration-fast), background-color var(--duration-fast);
}.filter-drop__button::-webkit-details-marker {
display: none;
}.filter-drop__button .icon {
color: var(--color-text-3);
transition: transform var(--duration-base) var(--ease);
}.filter-drop[open] > .filter-drop__button,
.filter-drop__button.is-set {
border-color: var(--color-primary);
background: var(--color-primary-soft);
color: var(--color-primary);
}.filter-drop[open] > .filter-drop__button .icon {
color: var(--color-primary);
transform: rotate(180deg);
}@media (hover: hover) {
.filter-drop__button:hover {
border-color: var(--color-primary);
color: var(--color-primary);
}
}.filter-drop__panel {
position: absolute;
top: calc(100% + var(--space-2));
left: 0;
z-index: var(--z-dropdown);
display: grid;
gap: var(--space-3);
min-width: 17rem;
padding: var(--space-4);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
background: var(--color-white);
box-shadow: var(--shadow);
transition:
opacity var(--duration-fast) var(--ease),
transform var(--duration-fast) var(--ease);
}
.filter-drop::details-content {
transition: content-visibility var(--duration-fast) allow-discrete;
}.filter-drop:not([open]) .filter-drop__panel {
opacity: 0;
transform: translateY(calc(-1 * var(--space-2)));
}@starting-style {
.filter-drop[open] .filter-drop__panel {
opacity: 0;
transform: translateY(calc(-1 * var(--space-2)));
}
}.filter-drop__panel--price {
width: 20rem;
}.filter-drop--end .filter-drop__panel {
right: 0;
left: auto;
width: 15rem;
}.filter-drop__prefix {
color: var(--color-text-3);
font-weight: var(--weight-medium);
}.filter-drop__title {
color: var(--color-text);
font-size: var(--text-sm);
font-weight: var(--weight-bold);
}
.filter-drop__panel--list {
gap: var(--space-2);
width: 20rem;
padding: var(--space-2);
}
.drop-list {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 2px;
max-height: 18rem;
overflow: hidden auto;
overscroll-behavior: contain;
}.drop-option {
display: flex;
align-items: center;
gap: var(--space-3);
min-height: 2.5rem;
padding: var(--space-2) var(--space-3);
border-radius: var(--radius-sm);
color: var(--color-text);
font-size: var(--text-md);
cursor: pointer;
transition: background-color var(--duration-fast), color var(--duration-fast);
}@media (hover: hover) {
.drop-option:hover {
background: var(--color-soft);
}
}.drop-option__name {
flex: 1;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}.drop-count {
flex: none;
min-width: 1.75rem;
padding: 1px var(--space-2);
border-radius: var(--radius-pill);
background: var(--color-soft);
color: var(--color-text-3);
font-size: var(--text-xs);
font-weight: var(--weight-semibold);
text-align: center;
}.drop-option__check {
display: inline-flex;
flex: none;
width: 1.125rem;
color: var(--color-primary);
visibility: hidden;
}.drop-option__check .icon {
--icon-size: 1.125rem;
}
.drop-option[aria-current="page"],
.drop-option:has(.drop-option__control:checked) {
color: var(--color-primary);
font-weight: var(--weight-semibold);
}.drop-option[aria-current="page"] .drop-option__check,
.drop-option:has(.drop-option__control:checked) .drop-option__check {
visibility: visible;
}.drop-option[aria-current="page"] .drop-count,
.drop-option:has(.drop-option__control:checked) .drop-count {
background: var(--color-primary-soft);
color: var(--color-primary);
}
.drop-option__control {
position: absolute;
opacity: 0;
pointer-events: none;
}.drop-option__box {
display: grid;
flex: none;
place-items: center;
width: 1.125rem;
height: 1.125rem;
border: 1.5px solid var(--color-border-strong);
border-radius: 5px;
background: var(--color-white);
color: var(--color-white);
transition: background-color var(--duration-fast), border-color var(--duration-fast);
}.drop-option__box .icon {
--icon-size: .75rem;
stroke-width: 3;
opacity: 0;
}.drop-option:has(.drop-option__control:checked) .drop-option__box {
border-color: var(--color-primary);
background: var(--color-primary);
}.drop-option:has(.drop-option__control:checked) .drop-option__box .icon {
opacity: 1;
}.drop-option:has(.drop-option__control:focus-visible) {
outline: 2px solid var(--color-primary);
outline-offset: -2px;
}
.drop-search {
position: relative;
display: block;
font-size: var(--text-sm);
}.drop-search .icon {
position: absolute;
top: 50%;
left: var(--space-3);
color: var(--color-text-3);
transform: translateY(-50%);
pointer-events: none;
}
.drop-search__input {
display: block;
width: 100%;
height: var(--control-sm);
line-height: 1.25;
appearance: none;
padding: 0 var(--space-3) 0 calc(var(--space-3) + 1.25em + var(--space-2));
border: 1.5px solid var(--color-border);
border-radius: var(--radius-sm);
background: var(--color-soft);
color: var(--color-text);
font: inherit;
}.drop-search__input::-webkit-search-decoration,
.drop-search__input::-webkit-search-cancel-button {
appearance: none;
}.drop-search__input:focus {
border-color: var(--color-primary);
outline: none;
background: var(--color-white);
}.drop-empty {
padding: var(--space-3);
color: var(--color-text-3);
font-size: var(--text-sm);
}.drop-clear {
justify-self: start;
padding: var(--space-1) var(--space-3) var(--space-2);
font-size: var(--text-sm);
}@media (max-width: 61.99em) {
.filter-bar__filters {
display: none;
}.filter-bar__mobile {
display: inline-flex;
flex: none;
}
.filter-bar__end,
.filter-drop--end {
min-width: 0;
}.filter-drop__button {
min-height: var(--control-md);
}.filter-drop--end .filter-drop__button {
max-width: 100%;
}.filter-drop--end .filter-drop__button > span {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
}.filter-bar__end {
flex: 0 1 auto;
}
}@media (max-width: 37.49em) {
.filter-drop__prefix {
display: none;
}
}
.listing-chips {
display: none;
}@media (max-width: 61.99em) {
.listing-chips {
display: flex;
gap: var(--space-2);
margin: 0 calc(var(--gutter) * -1) var(--space-5);
padding: 0 var(--gutter) 2px;
overflow-x: auto;
scroll-padding-inline: var(--gutter);
scrollbar-width: none;
overscroll-behavior-x: contain;
}.listing-chips::-webkit-scrollbar {
display: none;
}.listing-chips .chip {
flex: none;
}
}
.filters {
display: grid;
}.filter-group {
border-bottom: 1px solid var(--color-border);
}.filter-group:last-of-type {
border-bottom: 0;
}.filter-group__title {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-3);
padding-block: var(--space-3);
color: var(--color-text);
font-size: var(--text-md);
font-weight: var(--weight-bold);
list-style: none;
cursor: pointer;
}.filter-group__title::-webkit-details-marker {
display: none;
}.filter-group__title .icon {
color: var(--color-text-3);
transition: transform var(--duration-base) var(--ease);
}.filter-group[open] > .filter-group__title .icon {
transform: rotate(180deg);
}.filter-group__body {
padding-bottom: var(--space-4);
}.filters__options {
display: grid;
gap: var(--space-2);
max-height: 15rem;
overflow-y: auto;
}
.filters .check {
display: flex;
width: 100%;
}.filters .check > span:has(> .drop-count) {
display: flex;
flex: 1;
align-items: center;
justify-content: space-between;
gap: var(--space-3);
min-width: 0;
}.filters .check:has(.check__control:checked) .drop-count {
background: var(--color-primary-soft);
color: var(--color-primary);
}
.drawer .filters {
padding-inline: var(--space-5);
}.filters__submit {
position: sticky;
bottom: 0;
display: grid;
gap: var(--space-2);
margin-inline: calc(var(--space-5) * -1);
padding: var(--space-4) var(--space-5);
border-top: 1px solid var(--color-border);
background: var(--color-white);
}
.listing-summary {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--space-2);
min-height: var(--control-sm);
margin: calc(var(--space-2) * -1) 0 var(--space-5);
}.listing-summary__clear {
margin-left: var(--space-2);
font-size: var(--text-sm);
}
.listing-empty {
margin-block: var(--space-8);
}.listing-empty__title {
font-size: var(--text-h3);
}
.listing-more {
position: relative;
height: 1px;
}.price-range .input {
min-height: var(--control-md);
padding: 0 1.75rem 0 var(--space-3);
font-size: var(--text-md);
font-variant-numeric: tabular-nums;
}
}@layer components {
.price-deal {
display: inline-block;
padding-inline: var(--space-2);
border-radius: var(--radius-sm);
background: var(--color-accent-soft);
color: var(--color-accent);
}
}@layer components {
.price-deal__label {
font-size: .7em;
font-weight: var(--weight-bold);
}.product-card__list-price {
color: var(--color-text-3);
font-size: var(--text-sm);
}
.stock-state {
display: inline-flex;
align-items: center;
gap: var(--space-2);
font-size: var(--text-sm);
font-weight: var(--weight-semibold);
}.stock-state--in {
color: var(--color-accent);
}.stock-state--low {
color: var(--color-warning);
}.stock-state--out {
color: var(--color-danger);
}
.basket-deal {
display: inline-flex;
align-items: center;
gap: var(--space-2);
justify-self: start;
padding: var(--space-2) var(--space-3);
border-radius: var(--radius-sm);
background: var(--color-accent-soft);
color: var(--color-accent);
font-size: var(--text-md);
font-weight: var(--weight-semibold);
}.basket-deal strong {
font-size: var(--text-h4);
font-weight: var(--weight-heavy);
}
.variant-picker {
display: grid;
gap: var(--space-2);
margin: 0;
padding: 0;
border: 0;
}.variant-picker__options {
display: flex;
flex-wrap: wrap;
gap: var(--space-2);
}.variant-picker label {
display: inline-flex;
align-items: center;
min-height: var(--control-md);
padding: 0 var(--space-4);
border: 1.5px solid var(--color-border);
border-radius: var(--radius);
background: var(--color-white);
font-size: var(--text-md);
font-weight: var(--weight-semibold);
cursor: pointer;
transition: border-color var(--duration-fast), color var(--duration-fast);
}.variant-picker input:checked + label {
border-color: var(--color-primary);
background: var(--color-primary-soft);
color: var(--color-primary);
}.variant-picker input:disabled + label {
color: var(--color-text-3);
text-decoration: line-through;
cursor: not-allowed;
}.variant-picker input:focus-visible + label {
outline: 2px solid var(--color-primary);
outline-offset: 2px;
}
.expert-note {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
gap: var(--space-3) var(--space-4);
margin: 0;
padding: var(--space-5);
border-radius: var(--radius-lg);
background: var(--color-primary-soft);
}.expert-note__label {
color: var(--color-primary);
font-size: var(--text-sm);
font-weight: var(--weight-bold);
}.expert-note p {
color: var(--color-text);
}
.spec-table {
width: 100%;
border-collapse: collapse;
font-size: var(--text-md);
}.spec-table th,
.spec-table td {
padding: var(--space-3) 0;
border-bottom: 1px solid var(--color-border);
text-align: left;
vertical-align: top;
}.spec-table th {
width: 45%;
padding-right: var(--space-4);
color: var(--color-text-2);
font-weight: var(--weight-medium);
}.spec-table td {
color: var(--color-text);
font-weight: var(--weight-semibold);
overflow-wrap: anywhere;
}
.video-frame {
overflow: hidden;
aspect-ratio: 16 / 9;
max-width: 100%;
border-radius: var(--radius-lg);
background: var(--color-text);
}.video-frame iframe,
.video-frame video {
display: block;
width: 100%;
height: 100%;
border: 0;
}
.bundle {
display: grid;
grid-template-columns: minmax(0, 1fr) 17.5rem;
align-items: center;
gap: var(--space-8);
padding: var(--space-6);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
background: var(--color-white);
}.bundle__items {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--space-3);
}.bundle__item {
display: grid;
gap: var(--space-2);
width: 8.5rem;
font-size: var(--text-sm);
}.bundle__item img {
width: 100%;
aspect-ratio: 4 / 5;
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
background: var(--color-white);
object-fit: contain;
}.bundle__plus {
color: var(--color-text-3);
}.bundle__buy {
display: grid;
gap: var(--space-2);
}@media (max-width: 61.99em) {
.bundle {
grid-template-columns: minmax(0, 1fr);
}
}
@media (max-width: 37.49em) {
.bundle {
gap: var(--space-6);
padding: var(--space-5);
}.bundle__items {
flex-wrap: nowrap;
gap: var(--space-2);
}.bundle__item {
flex: 1 1 0;
width: auto;
min-width: 0;
overflow-wrap: anywhere;
}.bundle__plus {
flex: none;
}
}}
@layer components {
.toast-region {
position: fixed;
bottom: var(--space-6);
left: 50%;
z-index: var(--z-toast);
display: grid;
gap: var(--space-2);
width: min(26rem, calc(100% - 2 * var(--space-4)));
transform: translateX(-50%);
pointer-events: none;
}.toast {
--toast-fg: var(--color-success);
--toast-bg: var(--color-success-soft);display: grid;
grid-template-columns: auto minmax(0, 1fr) auto;
align-items: center;
gap: var(--space-3);
padding: var(--space-3) var(--space-3) var(--space-3) var(--space-4);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
background: var(--color-white);
box-shadow: var(--shadow);
pointer-events: auto;
transition: opacity var(--duration-base) var(--ease), transform var(--duration-base) var(--ease);
}@starting-style {
.toast {
opacity: 0;
transform: translateY(12px);
}
}.toast.is-leaving {
opacity: 0;
transform: translateY(12px);
}.toast--info {
--toast-fg: var(--color-info);
--toast-bg: var(--color-info-soft);
}.toast--warning {
--toast-fg: var(--color-warning);
--toast-bg: var(--color-warning-soft);
}.toast--danger {
--toast-fg: var(--color-danger);
--toast-bg: var(--color-danger-soft);
}.toast__icon {
display: grid;
place-items: center;
width: 2.25rem;
height: 2.25rem;
border-radius: var(--radius-pill);
background: var(--toast-bg);
color: var(--toast-fg);
}.toast__icon .icon {
--icon-size: 1.125rem;
}
.toast__media {
position: relative;
width: 3rem;
aspect-ratio: 4 / 5;
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
background: var(--color-white);
}.toast__media img {
width: 100%;
height: 100%;
border-radius: calc(var(--radius-md) - 1px);
object-fit: contain;
}.toast__badge {
position: absolute;
right: calc(-1 * var(--space-2));
bottom: calc(-1 * var(--space-1));
display: grid;
place-items: center;
width: 1.25rem;
height: 1.25rem;
border: 2px solid var(--color-white);
border-radius: var(--radius-pill);
background: var(--toast-fg);
color: var(--color-white);
}.toast__badge .icon {
--icon-size: .75rem;
}.toast__body {
display: grid;
align-self: center;
gap: 2px;
padding-block: var(--space-1);
}.toast__title {
color: var(--color-text);
font-size: var(--text-md);
font-weight: var(--weight-bold);
line-height: 1.35;
}
.toast__text {
color: var(--color-text-2);
font-size: var(--text-md);
font-weight: var(--weight-medium);
line-height: 1.45;
letter-spacing: var(--tracking-wide);
}.toast__title[hidden] + .toast__text {
color: var(--color-text);
font-size: var(--text-md);
font-weight: var(--weight-semibold);
}.toast__action {
justify-self: start;
margin-top: var(--space-1);
font-size: var(--text-sm);
}.toast__close {
display: grid;
place-items: center;
width: 2rem;
height: 2rem;
border-radius: var(--radius-pill);
color: var(--color-text-3);
transition: background-color var(--duration-fast), color var(--duration-fast);
}.toast__close .icon {
--icon-size: 1rem;
}@media (hover: hover) {
.toast__close:hover {
background: var(--color-soft);
color: var(--color-text);
}
}@media (max-width: 37.49em) {
.toast-region {
bottom: calc(var(--space-4) + 4rem);
}
}
}
@layer utilities {
@media (max-width: 37.49em) {
.grid--preview > :nth-child(n + 5) {
display: none;
}
}.visually-hidden {
position: absolute !important;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
border: 0;
}.text-muted {
color: var(--color-text-2);
}.text-subtle {
color: var(--color-text-3);
}.text-lead {
color: var(--color-text-2);
font-size: var(--text-lg);
}.tabular {
font-variant-numeric: tabular-nums;
}.measure {
max-width: 65ch;
}@media (max-width: 61.99em) {
.hide-md {
display: none !important;
}
}
@media (min-width: 62em) {
.show-md {
display: none !important;
}
}
}
@layer pages {
.gate {
display: grid;
place-content: center;
justify-items: center;
gap: var(--space-5);
min-height: 100dvh;
padding: var(--space-6) var(--gutter);
background: var(--color-soft);
}.gate__card {
display: grid;
justify-items: start;
gap: var(--space-6);
width: min(100%, 26rem);
padding: var(--space-8);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
background: var(--gradient-brand-line) top / 100% 4px no-repeat, var(--color-white);
box-shadow: var(--shadow-sm);
}.gate__card > .stack,
.gate__card > form,
.gate__card > .alert {
justify-self: stretch;
}.gate__title {
font-size: var(--text-h3);
}.gate__foot {
color: var(--color-text-3);
font-size: var(--text-sm);
}@media (max-width: 37.49em) {
.gate__card {
padding: var(--space-6) var(--space-5);
}
}
}
@layer pages {
.home-hero {
padding-block: var(--space-6);
}
@media (min-width: 62em) {
.home-fold {
display: flex;
flex-direction: column;
min-height: min(calc(100svh - var(--header-height, 0px)), 60rem);
}.home-hero {
display: flex;
flex: 1;
flex-direction: column;
}.home-hero > .container {
display: flex;
flex: 1;
}.home-hero .slider {
flex: 1;
}
}
.service-layout {
display: grid;
grid-template-columns: minmax(0, 1fr) 21rem;
align-items: start;
gap: var(--space-7);
}.service-main {
display: grid;
gap: var(--space-8);
}.service-main__image {
width: 100%;
aspect-ratio: 16 / 9;
object-fit: cover;
border-radius: var(--radius-xl);
}.service-block {
display: grid;
gap: var(--space-4);
}.service-block + .service-block {
padding-top: var(--space-8);
border-top: 1px solid var(--color-border);
}.service-block h2 {
font-size: var(--text-h3);
}
.check-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--space-3) var(--space-6);
}.check-grid li {
display: flex;
align-items: flex-start;
gap: var(--space-3);
font-weight: var(--weight-medium);
}.check-grid .icon {
flex: none;
margin-top: calc((1lh - var(--icon-size, 1.25em)) / 2);
color: var(--color-accent);
}
.step-list {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: var(--space-5);
padding: var(--space-6);
border-radius: var(--radius-lg);
background: var(--color-soft);
}.step-list__item {
position: relative;
display: grid;
align-content: start;
gap: var(--space-3);
}
.step-list__item:not(:last-child)::before {
content: "";
position: absolute;
top: calc(1.125rem - 1px);
right: calc(var(--space-5) * -1 + var(--space-2));
left: calc(2.25rem + var(--space-2));
height: 2px;
border-radius: var(--radius-pill);
background: var(--color-border-strong);
}.step-list__no {
display: grid;
place-items: center;
width: 2.25rem;
height: 2.25rem;
border-radius: var(--radius-pill);
background: var(--color-primary);
box-shadow: 0 0 0 4px var(--color-primary-soft);
color: var(--color-white);
font-size: var(--text-sm);
font-weight: var(--weight-bold);
}.step-list__title {
font-size: var(--text-body);
}.step-list__text {
margin-top: 2px;
color: var(--color-text-2);
font-size: var(--text-sm);
line-height: 1.5;
}@media (max-width: 61.99em) and (min-width: 37.5em) {
.step-list {
grid-template-columns: repeat(2, minmax(0, 1fr));
row-gap: var(--space-6);
}.step-list__item:nth-child(2n)::before {
display: none;
}
}@media (max-width: 37.49em) {
.step-list {
grid-template-columns: minmax(0, 1fr);
gap: 0;
padding: var(--space-5);
}.step-list__item {
grid-template-columns: 2.25rem minmax(0, 1fr);
column-gap: var(--space-4);
padding-bottom: var(--space-5);
}.step-list__item:last-child {
padding-bottom: 0;
}.step-list__item:not(:last-child)::before {
top: 2.75rem;
right: auto;
bottom: var(--space-1);
left: calc(1.125rem - 1px);
width: 2px;
height: auto;
}.step-list__title {
padding-top: .375rem;
}
}
.service-aside {
position: sticky;
will-change: transform;
top: calc(var(--header-sticky-height, 0px) + var(--space-6));
display: grid;
gap: var(--space-5);
}.booking-card {
display: grid;
gap: var(--space-5);
padding: var(--space-6);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
background: var(--color-white);
box-shadow: var(--shadow);
}.booking-card__title {
font-size: var(--text-h4);
font-weight: var(--weight-bold);
}.booking-card__facts {
display: grid;
gap: var(--space-3);
}.booking-card__facts div {
display: grid;
gap: 2px;
padding-bottom: var(--space-3);
border-bottom: 1px solid var(--color-border);
}.booking-card__facts dt {
display: flex;
align-items: center;
gap: var(--space-2);
color: var(--color-text-3);
font-size: var(--text-sm);
}.booking-card__facts dt .icon {
color: var(--color-primary);
}.booking-card__facts dd {
padding-left: calc(1.25em * .875 + var(--space-2));
font-weight: var(--weight-semibold);
}.booking-card__actions {
display: grid;
gap: var(--space-2);
}.mini-links {
display: grid;
gap: 2px;
margin-bottom: var(--space-3);
}.mini-links__item {
display: grid;
grid-template-columns: 3.5rem minmax(0, 1fr) auto;
align-items: center;
gap: var(--space-3);
padding: var(--space-2);
border-radius: var(--radius-md);
color: var(--color-text);
font-size: var(--text-md);
font-weight: var(--weight-semibold);
transition: background-color var(--duration-fast), color var(--duration-fast);
}.mini-links__media {
display: block;
aspect-ratio: 1;
overflow: hidden;
border-radius: var(--radius-sm);
background: var(--color-soft);
}.mini-links__media img {
width: 100%;
height: 100%;
object-fit: cover;
}.mini-links__item > .icon {
color: var(--color-text-3);
}@media (hover: hover) {
.mini-links__item:hover {
background: var(--color-soft);
color: var(--color-primary);
}
}
.faq {
display: grid;
align-content: start;
gap: var(--space-3);
}.faq__item {
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
background: var(--color-white);
}.faq__question {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-4);
padding: var(--space-5) var(--space-6);
color: var(--color-text);
font-weight: var(--weight-bold);
list-style: none;
cursor: pointer;
}.faq__question::-webkit-details-marker {
display: none;
}.faq__question .icon {
flex: none;
color: var(--color-primary);
transition: transform var(--duration-base) var(--ease);
}.faq__item[open] .faq__question .icon {
transform: rotate(45deg);
}.faq__answer {
padding: 0 var(--space-6) var(--space-5);
color: var(--color-text-2);
}@media (max-width: 61.99em) {
.service-layout {
grid-template-columns: minmax(0, 1fr);
gap: var(--space-8);
}
.service-aside {
position: static;
will-change: auto;
}
}@media (max-width: 37.49em) {
.check-grid {
grid-template-columns: minmax(0, 1fr);
}
.faq__question {
padding: var(--space-4) var(--space-5);
}.faq__answer {
padding: 0 var(--space-5) var(--space-4);
}.booking-card {
padding: var(--space-5);
}
}
.contact-hub {
display: grid;
grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
overflow: hidden;
border: 1px solid var(--color-border);
border-radius: var(--radius-xl);
background: var(--color-white);
}.contact-hub .form-card {
grid-template-rows: auto 1fr;
padding: var(--space-9);
border: 0;
border-radius: 0;
}.contact-panel {
display: grid;
align-content: start;
gap: var(--space-7);
padding: var(--space-9);
background: var(--color-primary);
color: var(--color-white);
}.contact-panel__head {
display: grid;
gap: var(--space-2);
}.contact-panel__head h2 {
color: var(--color-white);
font-size: var(--text-h3);
}.contact-panel__head p {
color: var(--color-on-primary-muted);
}.contact-channels {
display: grid;
border-top: 1px solid var(--color-on-primary-line);
}.contact-channel {
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto;
align-items: center;
gap: var(--space-4);
padding-block: var(--space-5);
border-bottom: 1px solid var(--color-on-primary-line);
color: var(--color-white);
}.contact-channel:focus-visible {
outline-color: var(--color-white);
}.contact-channel__icon {
display: grid;
place-items: center;
width: 3rem;
height: 3rem;
border-radius: var(--radius-pill);
background: var(--color-on-primary-soft);
}.contact-channel__icon .icon {
--icon-size: 1.375rem;
}.contact-channel__body {
display: grid;
justify-items: start;
gap: var(--space-1);
}.contact-channel__label {
color: var(--color-on-primary-muted);
font-size: var(--text-sm);
}.contact-channel__value {
font-size: var(--text-lg);
font-weight: var(--weight-bold);
overflow-wrap: anywhere;
}.contact-channel > .icon {
transition: transform var(--duration-fast) var(--ease);
}
.contact-panel .status {
color: var(--color-on-primary-muted);
}.contact-panel .status::before {
background: var(--color-on-primary-line);
}.contact-panel .status.is-open {
color: var(--color-white);
}.contact-panel .status.is-open::before {
background: var(--color-white);
box-shadow: 0 0 0 4px var(--color-on-primary-line);
}@media (hover: hover) {
a.contact-channel:hover > .icon {
transform: translate(2px, -2px);
}
}
.contact-locations {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
gap: var(--space-6);
}.location-card {
display: flex;
flex-direction: column;
overflow: hidden;
border: 1px solid var(--color-border);
border-radius: var(--radius-xl);
background: var(--color-white);
}.location-card .map {
height: 18rem;
border-bottom: 1px solid var(--color-border);
}.location-card__body {
display: flex;
flex: 1;
flex-direction: column;
align-items: flex-start;
gap: var(--space-5);
padding: var(--space-6);
}.location-card__head {
display: grid;
gap: var(--space-1);
}.location-card__title {
font-size: var(--text-h4);
}.location-card__text {
color: var(--color-text-2);
}.location-card__facts {
display: grid;
gap: var(--space-3);
color: var(--color-text);
}.location-card__facts li {
display: flex;
gap: var(--space-3);
}.location-card__facts .icon {
flex-shrink: 0;
margin-top: calc((1lh - var(--icon-size, 1.25em)) / 2);
color: var(--color-primary);
}.location-card__facts a {
color: inherit;
}.location-card__body > .btn {
margin-top: auto;
}
.contact-faq {
display: grid;
gap: var(--space-6);
max-width: 48rem;
margin-inline: auto;
}.contact-faq__more {
color: var(--color-text-2);
text-align: center;
}
@media (min-width: 62em) {
.contact-form {
grid-template-rows: repeat(3, auto) 1fr repeat(2, auto);
}.contact-form__message {
display: grid;
}.contact-form__message .field {
grid-template-rows: auto 1fr;
}.contact-form__message textarea {
height: 100%;
}
}@media (max-width: 61.99em) {
.contact-hub {
grid-template-columns: minmax(0, 1fr);
}.contact-panel,
.contact-hub .form-card {
padding: var(--space-8);
}.location-card .map {
height: 16rem;
}
}@media (max-width: 37.49em) {
.contact-panel,
.contact-hub .form-card {
padding: var(--space-7) var(--space-5);
}
}
.notice {
display: grid;
justify-items: center;
gap: var(--space-4);
max-width: 36rem;
margin-inline: auto;
text-align: center;
}.notice .cluster {
justify-content: center;
margin-top: var(--space-2);
}.notice__code {
color: var(--color-primary);
font-size: clamp(4rem, 3rem + 4vw, 6rem);
font-weight: var(--weight-heavy);
line-height: 1;
letter-spacing: -.03em;
}.notice__title {
font-size: var(--text-h2);
}
.about-intro {
grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
--split-gap: var(--space-10);
}.about-intro .content > p {
max-width: 60ch;
}.about-intro__media img {
width: 100%;
aspect-ratio: 5 / 4;
object-fit: cover;
border-radius: var(--radius-xl);
}
.about-facts {
display: flex;
flex-wrap: wrap;
width: 100%;
padding-block: var(--space-5);
border-block: 1px solid var(--color-border);
}.about-facts > div {
display: flex;
flex-direction: column-reverse;
gap: 2px;
padding-inline: var(--space-8);
border-left: 1px solid var(--color-border);
}.about-facts > div:first-child {
padding-left: 0;
border-left: 0;
}.about-facts dd {
color: var(--color-primary);
font-size: var(--text-h3);
font-weight: var(--weight-bold);
line-height: 1.2;
white-space: nowrap;
}.about-facts dt {
color: var(--color-text-3);
font-size: var(--text-sm);
}@media (max-width: 61.99em) {
.about-intro {
grid-template-columns: minmax(0, 1fr);
}
}@media (max-width: 37.49em) {
.about-facts {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--space-4) 0;
}.about-facts > div {
padding-inline: var(--space-5) 0;
}.about-facts > div:nth-child(odd) {
padding-left: 0;
border-left: 0;
}
.about-facts:has(> :nth-child(3):last-child) {
grid-template-columns: repeat(3, minmax(0, 1fr));
}.about-facts:has(> :nth-child(3):last-child) > div:nth-child(3) {
padding-left: var(--space-4);
border-left: 1px solid var(--color-border);
}.about-facts:has(> :nth-child(3):last-child) > div:nth-child(2) {
padding-left: var(--space-4);
}
}
.perks-bar {
padding-block: var(--space-8);
border-block: 1px solid var(--color-border);
background: var(--color-soft);
}.perks-bar__grid {
--cols: 4;
--cols-lg: 4;
--cols-md: 2;
--cols-sm: 2;
--grid-gap: var(--space-5);
}.perks-bar .feature {
gap: var(--space-3);
}
.perks-bar .icon-box {
flex: none;
width: 3rem;
height: 3rem;
background: var(--color-white);
}.perks-bar .icon-box .icon {
--icon-size: 1.375rem;
}.perks-bar .feature__title {
font-size: var(--text-body);
line-height: 1.3;
}.perks-bar .feature__text {
margin-top: 0;
font-size: var(--text-sm);
line-height: 1.4;
}
@media (max-width: 37.49em) {
.perks-bar {
padding-block: var(--space-6);
}.perks-bar__grid {
--grid-gap: var(--space-5) var(--space-3);
}.perks-bar .feature {
flex-direction: column;
align-items: center;
gap: var(--space-2);
text-align: center;
}.perks-bar .icon-box {
width: 2.5rem;
height: 2.5rem;
}.perks-bar .icon-box .icon {
--icon-size: 1.125rem;
}.perks-bar .feature__title {
font-size: var(--text-sm);
}.perks-bar .feature__text {
font-size: var(--text-xs);
}
}
.service-group {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1.7fr);
align-items: start;
gap: var(--space-10);
}.service-group__intro {
position: sticky;
will-change: transform;
top: calc(var(--header-sticky-height, 0px) + var(--space-6));
display: grid;
justify-items: start;
gap: var(--space-4);
}.service-group__list {
display: grid;
gap: var(--space-4);
}
.timeline-wrap,
.timeline {
--marker: 4.5rem;
}.timeline {
position: relative;
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: var(--space-6);
}
.timeline-wrap {
position: relative;
margin-top: var(--space-4);
}.timeline__wave {
position: absolute;
top: calc(var(--marker) / 2 - 2.25rem);
left: 0;
width: 100%;
height: 4.5rem;
overflow: visible;
pointer-events: none;
}.timeline__wave path {
stroke-width: 2px;
stroke-linecap: round;
}.timeline__wave-start {
stop-color: var(--color-brand-green);
}.timeline__wave-end {
stop-color: var(--color-brand-cyan);
}.timeline__step {
position: relative;
z-index: 1;
display: grid;
justify-items: center;
gap: var(--space-3);
text-align: center;
}.timeline__marker {
position: relative;
display: grid;
place-items: center;
width: var(--marker);
height: var(--marker);
margin-bottom: var(--space-2);
border: 1px solid var(--color-border);
border-radius: var(--radius-pill);
background: var(--color-white);
box-shadow: 0 0 0 8px var(--color-soft);
color: var(--color-primary);
transition: border-color var(--duration-base);
}.timeline__marker > .icon {
--icon-size: 1.625rem;
}.timeline__no {
position: absolute;
top: -2px;
right: -2px;
display: grid;
place-items: center;
width: 1.625rem;
height: 1.625rem;
border: 2px solid var(--color-white);
border-radius: var(--radius-pill);
background: var(--color-primary);
color: var(--color-white);
font-size: var(--text-2xs);
font-weight: var(--weight-bold);
}@media (hover: hover) {
.timeline__step:hover .timeline__marker {
border-color: var(--color-primary);
}
}.timeline__title {
font-size: var(--text-h4);
}.timeline__text {
max-width: 16rem;
color: var(--color-text-2);
font-size: var(--text-md);
}@media (max-width: 61.99em) {
.timeline {
grid-template-columns: minmax(0, 1fr);
gap: var(--space-7);
max-width: 34rem;
margin-inline: auto;
}.timeline__wave {
display: none;
}.timeline::before {
content: "";
position: absolute;
border-radius: var(--radius-pill);
background: linear-gradient(180deg, var(--color-brand-green), var(--color-brand-cyan));
top: calc(var(--marker) / 2);
right: auto;
bottom: calc(var(--marker) / 2);
left: calc(var(--marker) / 2 - 1px);
width: 2px;
height: auto;
}.timeline__step {
grid-template-columns: var(--marker) minmax(0, 1fr);
justify-items: start;
column-gap: var(--space-5);
row-gap: var(--space-1);
text-align: left;
}.timeline__marker {
grid-row: span 2;
margin-bottom: 0;
}.timeline__title {
align-self: end;
}.timeline__text {
max-width: none;
}
}@media (max-width: 61.99em) {
.service-group {
grid-template-columns: minmax(0, 1fr);
gap: var(--space-6);
}
.service-group__intro {
position: static;
will-change: auto;
}
}
.about-statement {
display: grid;
gap: var(--space-9);
}
.about-statement__head {
display: grid;
gap: var(--space-7);
}.about-statement__text {
color: var(--color-text);
font-size: var(--text-hero);
font-weight: var(--weight-semibold);
line-height: 1.25;
letter-spacing: var(--tracking-tight);
text-wrap: pretty;
}.about-statement__text em {
color: var(--color-primary);
font-style: normal;
}.about-statement__side {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: var(--space-5) var(--space-8);
}.about-statement__note {
max-width: 58ch;
color: var(--color-text-2);
font-size: var(--text-lg);
}.about-collage {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr) minmax(0, 1fr);
gap: var(--space-5);
height: 26rem;
}.about-collage img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: var(--radius-xl);
}
.about-banners {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--space-6);
}.about-banner {
position: relative;
display: flex;
align-items: flex-end;
min-height: 32rem;
overflow: hidden;
border-radius: var(--radius-xl);
background: var(--color-text);
color: var(--color-white);
isolation: isolate;
}.about-banner__bg {
position: absolute;
inset: 0;
z-index: -2;
width: 100%;
height: 100%;
object-fit: cover;
transition: transform var(--duration-slow) var(--ease);
}@media (hover: hover) {
.about-banner:hover .about-banner__bg {
transform: scale(1.04);
}
}.about-banner::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background: var(--gradient-media-shade);
}.about-banner__body {
display: grid;
justify-items: start;
gap: var(--space-4);
padding: var(--space-8);
}.about-banner__body h2 {
color: var(--color-white);
font-size: var(--text-h2);
}.about-banner__text {
max-width: 30rem;
color: var(--color-on-primary-muted);
font-size: var(--text-lg);
}.about-banner .cluster {
margin-top: var(--space-1);
}
.about-purpose {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
max-width: 64rem;
margin-inline: auto;
}
.about-purpose__item {
display: grid;
align-content: start;
justify-items: center;
gap: var(--space-4);
padding: var(--space-4) var(--space-6);
text-align: center;
}.about-purpose__item + .about-purpose__item {
border-left: 1px solid var(--color-border);
}.about-purpose__icon {
display: grid;
place-items: center;
width: 4.5rem;
height: 4.5rem;
border-radius: var(--radius-pill);
background: var(--color-primary-soft);
box-shadow: 0 0 0 8px var(--color-soft);
color: var(--color-primary);
}.about-purpose__icon .icon {
--icon-size: 1.75rem;
}.about-purpose__item h3 {
margin-top: var(--space-2);
font-size: var(--text-h3);
}.about-purpose__item p {
max-width: 30rem;
color: var(--color-text-2);
font-size: var(--text-lg);
text-wrap: balance;
}.about-purpose__tags {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: var(--space-2);
margin-top: var(--space-1);
}@media (max-width: 61.99em) {
.about-banners {
grid-template-columns: minmax(0, 1fr);
}.about-purpose {
grid-template-columns: minmax(0, 1fr);
gap: var(--space-7);
}.about-purpose__item {
padding-inline: 0;
}.about-purpose__item + .about-purpose__item {
padding-top: var(--space-7);
border-top: 1px solid var(--color-border);
border-left: 0;
}.about-banner {
min-height: 26rem;
}
}@media (max-width: 37.49em) {
.about-banner__body {
padding: var(--space-6);
}
}@media (max-width: 61.99em) {
.about-statement {
gap: var(--space-8);
}.about-collage {
height: 18rem;
}
}@media (max-width: 37.49em) {
.about-statement__text {
font-size: var(--text-h2);
}.about-collage {
grid-template-columns: repeat(2, minmax(0, 1fr));
grid-template-rows: 13rem 10rem;
gap: var(--space-3);
height: auto;
}.about-collage img:nth-child(2) {
grid-column: 1 / -1;
grid-row: 1;
}
}
.guide {
gap: var(--space-6);
}.guide__cover {
width: 100%;
aspect-ratio: 16 / 9;
object-fit: cover;
border-radius: var(--radius-lg);
}.guide__lead {
color: var(--color-text);
}.guide__meta {
display: flex;
flex-wrap: wrap;
gap: var(--space-1) var(--space-4);
padding-bottom: var(--space-6);
border-bottom: 1px solid var(--color-border);
}.guide__block {
display: grid;
gap: var(--space-4);
padding-top: var(--space-8);
border-top: 1px solid var(--color-border);
}.guide__block h2 {
color: var(--color-text);
font-size: var(--text-h3);
}.guide__service .service-tile {
min-height: var(--tile-min-h);
}
.category-info__main {
display: grid;
align-content: start;
gap: var(--space-8);
max-width: 46rem;
}.category-info__faq {
display: grid;
gap: var(--space-4);
}.category-info__faq h2 {
font-size: var(--text-h3);
}
}
@layer pages {
.listing .filter-bar {
position: sticky;
will-change: transform;
top: calc(var(--header-sticky-height, 0px) - 1px);
z-index: var(--z-dropdown);
}
:root:has(.listing .filter-bar) .site-header[data-stuck] {
box-shadow: 0 1px 0 var(--color-border);
}
.pdp {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
align-items: start;
gap: var(--space-8);
margin-top: var(--space-6);
}.pdp__panel {
position: sticky;
top: calc(var(--header-sticky-height, 0px) + var(--space-6));
display: grid;
gap: var(--space-6);
will-change: transform;
}.pdp__head {
display: grid;
justify-items: start;
gap: var(--space-3);
}.pdp__title {
font-size: var(--text-h2);
line-height: var(--leading-tight);
text-wrap: balance;
}
.pdp__meta {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--space-2) var(--space-4);
color: var(--color-text-2);
font-size: var(--text-sm);
font-weight: var(--weight-semibold);
}.pdp__meta > * + * {
padding-left: var(--space-4);
border-left: 1px solid var(--color-border);
}.pdp__meta a {
transition: color var(--duration-fast);
}.pdp__price {
display: grid;
justify-items: start;
gap: var(--space-3);
padding-block: var(--space-5);
border-block: 1px solid var(--color-border);
}.pdp__variant {
color: var(--color-text-2);
}.pdp__buy {
display: flex;
gap: var(--space-3);
}.pdp__cart {
display: flex;
flex: 1;
gap: var(--space-3);
min-width: 0;
}.pdp__cart .btn,
.pdp__buy > .btn:not(.btn--icon) {
flex: 1;
min-width: 0;
}.pdp__ask {
display: inline-flex;
align-items: center;
gap: var(--space-2);
justify-self: start;
color: var(--color-text-2);
font-size: var(--text-sm);
}.pdp__ask .icon {
color: var(--color-whatsapp);
}.pdp__ask strong {
color: var(--color-primary);
}
.pdp__perks {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--space-4) var(--space-5);
padding: var(--space-5);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
}.pdp__perks .feature {
align-items: flex-start;
gap: var(--space-3);
}.pdp__perks .icon-box {
width: 2.5rem;
height: 2.5rem;
border-radius: var(--radius-md);
}.pdp__perks .feature__title {
font-size: var(--text-sm);
}.pdp__perks .feature__text {
font-size: var(--text-xs);
}
.pdp-bar {
display: none;
}
.pdp-details {
display: grid;
grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
align-items: start;
gap: var(--space-8) var(--space-10);
}.pdp-details__main {
display: grid;
gap: var(--space-5);
}
.pdp-details__main,
.pdp-details__side {
position: sticky;
top: calc(var(--header-sticky-height, 0px) + var(--space-6));
}.pdp-details h2 {
font-size: var(--text-h3);
}.pdp-details__block {
display: grid;
justify-items: start;
gap: var(--space-3);
margin-top: var(--space-3);
}.pdp-details__block h3 {
font-size: var(--text-lg);
}.pdp-details__block .alert,
.pdp-faq .faq {
justify-self: stretch;
}.pdp-details__side {
display: grid;
gap: var(--space-6);
}.pdp-specs {
display: grid;
gap: var(--space-4);
padding: var(--space-6);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
background: var(--color-white);
}.pdp-specs .spec-table tr:last-child :is(th, td) {
border-bottom: 0;
}
.pdp-service {
display: grid;
gap: var(--space-4);
}.pdp-service .service-tile {
min-height: var(--tile-min-h);
}
.pdp-details__links {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--space-3);
}.pdp-details__video {
display: grid;
gap: var(--space-4);
margin-top: var(--space-8);
}
.pdp-list {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--space-3) var(--space-6);
}.pdp-list li {
display: flex;
align-items: flex-start;
gap: var(--space-3);
color: var(--color-text-2);
}.pdp-list .icon {
flex: none;
margin-top: calc((1lh - var(--icon-size, 1.25em)) / 2);
color: var(--color-accent);
}.pdp-list--box .icon {
color: var(--color-primary);
}@media (hover: hover) {
.pdp__meta a:hover {
color: var(--color-primary);
}
}@media (max-width: 61.99em) {
.pdp,
.pdp-details {
grid-template-columns: minmax(0, 1fr);
gap: var(--space-8);
}.pdp-details__main,
.pdp-details__side {
position: static;
}
.pdp__panel {
position: static;
will-change: auto;
}
.pdp-bar {
position: fixed;
right: 0;
bottom: 0;
left: 0;
z-index: var(--z-floating);
display: block;
padding-bottom: env(safe-area-inset-bottom, 0px);
border-top: 1px solid var(--color-border);
background: var(--color-white);
box-shadow: var(--shadow-sm);
visibility: hidden;
transform: translateY(100%);
transition:
transform var(--duration-base) var(--ease),
visibility var(--duration-base);
}.pdp-bar.is-visible {
visibility: visible;
transform: none;
}.pdp-bar__inner {
display: flex;
align-items: center;
min-height: var(--pdp-bar-h);
}.pdp-bar__buy {
display: flex;
flex: 1;
align-items: center;
justify-content: space-between;
gap: var(--space-4);
}.pdp-bar__price {
font-size: var(--text-lg);
font-weight: var(--weight-heavy);
}:root.has-product-bar .wa-float {
bottom: calc(var(--pdp-bar-h) + var(--space-4) + env(safe-area-inset-bottom, 0px));
}
:root:has(.pdp-bar) body {
padding-bottom: calc(var(--pdp-bar-h) + env(safe-area-inset-bottom, 0px));
}
}@media (max-width: 37.49em) {
.pdp__perks,
.pdp-list {
grid-template-columns: minmax(0, 1fr);
}
.pdp__buy,
.pdp__cart {
gap: var(--space-2);
}.pdp__cart .btn {
--btn-px: var(--space-3);
}
}
.store-order {
display: grid;
grid-template-columns: minmax(0, 1fr) 23.75rem;
align-items: start;
gap: var(--space-8);
}.store-order__main {
display: grid;
gap: var(--space-5);
counter-reset: checkout-step;
}.store-order__aside {
position: sticky;
will-change: transform;
top: calc(var(--header-sticky-height, 0px) + var(--space-5));
}@media (max-width: 61.99em) {
.store-order {
grid-template-columns: minmax(0, 1fr);
}
.store-order__aside {
position: static;
will-change: auto;
}
}
}@layer pages {
.product-page {
padding-block: var(--space-6) var(--section-space);
}
}@layer pages {
.payment-frame {
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
overflow: hidden;
background: var(--color-white);
}.payment-frame__iframe {
display: block;
width: 100%;
min-height: calc(var(--space-10) * 9);
border: 0;
}
}
@layer pages {
.auth-panel {
display: grid;
gap: var(--space-6);
padding: var(--space-5);
}.auth-panel__tabs {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--space-1);
padding: var(--space-1);
border-radius: var(--radius-md);
background: var(--color-soft);
}.auth-panel__tab {
padding: var(--space-2) var(--space-3);
border: 0;
border-radius: var(--radius-sm);
background: none;
color: var(--color-text-2);
font: inherit;
font-weight: var(--weight-semibold);
cursor: pointer;
transition: background-color var(--duration-fast), color var(--duration-fast);
}.auth-panel__tab[aria-selected="true"] {
background: var(--color-white);
color: var(--color-primary);
box-shadow: var(--shadow-sm);
}.auth-panel__pane {
display: grid;
gap: var(--space-5);
}.auth-form {
display: grid;
gap: var(--space-5);
}.auth-form > .btn {
width: 100%;
}.auth-form__password {
position: relative;
}
.auth-form__forgot,
.auth-form__back {
padding: 0;
border: 0;
background: none;
color: var(--color-primary);
font: inherit;
font-size: var(--text-sm);
font-weight: var(--weight-semibold);
cursor: pointer;
}.auth-form__forgot {
position: absolute;
top: 0;
right: 0;
}.auth-form__back {
display: inline-flex;
align-items: center;
gap: var(--space-2);
}
.auth-help {
justify-items: center;
gap: var(--space-4);
padding-block: var(--space-2) var(--space-4);
color: var(--color-text-2);
text-align: center;
}
.auth-help .auth-form {
justify-self: stretch;
text-align: start;
}.auth-help a {
overflow-wrap: anywhere;
}.auth-help__title {
color: var(--color-text);
font-size: var(--text-h3);
font-weight: var(--weight-bold);
line-height: var(--leading-heading);
letter-spacing: -.01em;
}@media (hover: hover) {
.auth-panel__tab:hover {
color: var(--color-primary);
}
}
.account-layout {
display: grid;
grid-template-columns: minmax(0, 16rem) minmax(0, 1fr);
align-items: start;
gap: var(--space-8);
}.account-nav {
position: sticky;
will-change: transform;
top: calc(var(--header-sticky-height, 0px) + var(--space-6));
display: grid;
gap: var(--space-3);
padding: var(--space-4);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
background: var(--color-white);
}.account-nav__user {
display: flex;
align-items: center;
gap: var(--space-3);
padding: var(--space-2) var(--space-2) var(--space-4);
border-bottom: 1px solid var(--color-border);
}.account-nav__avatar {
display: grid;
flex: none;
place-items: center;
width: 2.75rem;
height: 2.75rem;
border-radius: var(--radius-pill);
background: var(--color-primary-soft);
color: var(--color-primary);
font-weight: var(--weight-bold);
}.account-nav__who {
display: grid;
min-width: 0;
}.account-nav__who strong {
color: var(--color-text);
overflow-wrap: anywhere;
}
.account-nav__who small {
overflow: hidden;
color: var(--color-text-3);
font-size: var(--text-xs);
text-overflow: ellipsis;
white-space: nowrap;
}.account-nav__list {
display: grid;
gap: 2px;
}.account-nav__link {
display: flex;
align-items: center;
gap: var(--space-3);
width: 100%;
min-height: var(--control-md);
padding: var(--space-2) var(--space-3);
border: 0;
border-radius: var(--radius-md);
background: none;
color: var(--color-text);
font: inherit;
font-weight: var(--weight-semibold);
text-align: left;
text-decoration: none;
cursor: pointer;
transition: background-color var(--duration-fast), color var(--duration-fast);
}.account-nav__link .icon {
color: var(--color-text-3);
transition: color var(--duration-fast);
}.account-nav__link[aria-current="page"] {
background: var(--color-soft);
color: var(--color-primary);
}.account-nav__link[aria-current="page"] .icon {
color: var(--color-primary);
}.account-nav__logout {
padding-top: var(--space-3);
border-top: 1px solid var(--color-border);
}.account-nav__logout .account-nav__link {
color: var(--color-text-2);
}.account-main {
display: grid;
gap: var(--space-6);
min-width: 0;
}.account-card {
display: grid;
align-content: start;
gap: var(--space-5);
padding: var(--space-7);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
background: var(--color-white);
}.account-card h2 {
font-size: var(--text-h3);
}.account-card__head {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: var(--space-3) var(--space-4);
}.account-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--space-6);
}.account-address {
display: grid;
gap: var(--space-1);
color: var(--color-text-2);
font-style: normal;
}.account-address strong {
color: var(--color-text);
}.account-facts {
display: grid;
grid-template-columns: minmax(0, 7rem) minmax(0, 1fr);
gap: var(--space-2) var(--space-4);
}.account-facts dt {
color: var(--color-text-3);
}.account-facts dd {
color: var(--color-text);
font-weight: var(--weight-medium);
overflow-wrap: anywhere;
}.account-help {
color: var(--color-text-2);
}.account-empty {
display: grid;
justify-items: center;
gap: var(--space-3);
padding: var(--space-6) var(--space-4);
text-align: center;
}.account-empty__title {
color: var(--color-text);
font-size: var(--text-lg);
font-weight: var(--weight-bold);
}.account-empty .btn {
margin-top: var(--space-2);
}
.order-list,
.order-items {
display: grid;
}.order-row,
.order-item {
display: grid;
align-items: center;
gap: var(--space-4);
padding-block: var(--space-4);
border-bottom: 1px solid var(--color-border);
}.order-row {
grid-template-columns: 3.5rem minmax(0, 1fr) auto auto auto;
color: inherit;
text-decoration: none;
}.order-item {
grid-template-columns: 4rem minmax(0, 1fr) auto;
}.order-row:first-child,
.order-item:first-child {
padding-top: 0;
}.order-row:last-child {
padding-bottom: 0;
border-bottom: 0;
}.order-row__media,
.order-item__media {
overflow: hidden;
aspect-ratio: 1;
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
background: var(--color-white);
}.order-row__media img,
.order-item__media img {
width: 100%;
height: 100%;
object-fit: contain;
}.order-row__main,
.order-item__main {
display: grid;
gap: 2px;
min-width: 0;
}.order-row__main strong,
.order-item__main strong {
color: var(--color-text);
transition: color var(--duration-fast);
}.order-row__main small,
.order-item__main small {
color: var(--color-text-3);
font-size: var(--text-sm);
}.order-row__total,
.order-item__total {
color: var(--color-text);
font-weight: var(--weight-bold);
}.order-row > .icon {
color: var(--color-text-3);
}.order-totals {
display: grid;
gap: var(--space-2);
}.order-totals div {
display: flex;
justify-content: space-between;
gap: var(--space-4);
color: var(--color-text-2);
}.order-totals dd {
color: var(--color-text);
}.order-totals__total {
padding-top: var(--space-3);
border-top: 1px solid var(--color-border);
font-size: var(--text-lg);
font-weight: var(--weight-bold);
}.order-totals__total dt {
color: var(--color-text);
}
.address-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--space-5);
}.address-card {
display: grid;
align-content: start;
gap: var(--space-3);
padding: var(--space-6);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
}.address-card__head {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-3);
}.address-card__head h3 {
min-width: 0;
font-size: var(--text-lg);
overflow-wrap: anywhere;
}.address-card__actions {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--space-5);
margin-top: var(--space-2);
padding-top: var(--space-4);
border-top: 1px solid var(--color-border);
}
.address-card__actions form {
display: contents;
}.address-card__action {
padding: 0;
border: 0;
background: none;
color: var(--color-primary);
font: inherit;
font-size: var(--text-sm);
font-weight: var(--weight-semibold);
text-decoration: none;
cursor: pointer;
}.address-card__action--danger {
color: var(--color-danger);
}@media (hover: hover) {
.account-nav__link:hover,
.account-nav__link:hover .icon,
.order-row:hover .order-row__main strong {
color: var(--color-primary);
}.address-card__action:hover {
text-decoration: underline;
}
}@media (max-width: 61.99em) {
.account-layout {
grid-template-columns: minmax(0, 1fr);
}
.account-nav {
position: static;
will-change: auto;
}
}@media (max-width: 37.49em) {
.account-grid,
.address-grid {
grid-template-columns: minmax(0, 1fr);
}.account-card {
padding: var(--space-5);
}.address-card {
padding: var(--space-5);
}
.address-card__actions {
gap: 0 var(--space-5);
padding-top: var(--space-2);
}.address-card__action {
display: inline-flex;
align-items: center;
min-height: var(--control-md);
}
.order-row {
grid-template-columns: 3rem minmax(0, 1fr) auto;
row-gap: var(--space-2);
}.order-row__media {
grid-row: 1 / 3;
}.order-row .badge {
grid-column: 2;
grid-row: 2;
justify-self: start;
}.order-row__total {
grid-column: 3;
grid-row: 1;
}.order-row > .icon {
display: none;
}
}
}