:root { --teal:#0396A6; --turquoise:#04BFAD; --bg:#F6F9F9; --border:#E1E8E8; --text:#142120; --text-2:#5C6B6A; --white:#fff; --radius-sm:6px; --radius:10px; --radius-lg:14px; --space:64px; --section:52px; --font:Inter,system-ui,-apple-system,sans-serif}

* { box-sizing:border-box}
html,body { margin:0; padding:0}
body { font-family:var(--font); color:var(--text); background:#EEF2F2; -webkit-font-smoothing:antialiased}
a { color:inherit; text-decoration:none}
button,input,select,textarea { font:inherit}
button { cursor:pointer; border:0; background:none; color:inherit}
button:disabled { cursor:not-allowed; opacity:.55}
img,svg { display:block}
img { max-width:100%; height:auto}
ul { list-style:none; padding:0; margin:0}
p { line-height:1.7}
h1 { font-size:30px; line-height:1.25}
h2 { font-size:24px; line-height:1.3}
:focus-visible { outline:3px solid var(--color-action-text); outline-offset:4px}
.site-frame { width:100%; max-width:none; margin:0; background:#fff; min-height:100vh}
.container { padding-left:var(--space); padding-right:var(--space)}
.section { padding-top:var(--section); padding-bottom:var(--section)}
.section-compact { padding-top:0}
.tinted { background:var(--bg)}
.section-head { display:flex; align-items:baseline; justify-content:space-between; gap:16px; margin-bottom:24px}
.section-head h2 { margin:0; font-weight:800; letter-spacing:-.01em}
.section-head a,.text-link { font-size:14px; font-weight:600; color:var(--turquoise)}
.eyebrow { font-size:12px; font-weight:700; letter-spacing:.08em; color:var(--teal); text-transform:uppercase; margin:0 0 8px}
.btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:12px 20px; border-radius:8px; font-weight:600; font-size:14.5px; min-height:44px; line-height:1.4}
.btn-primary { background:var(--color-action); color:#fff}
.btn-ghost { border:1px solid var(--border); color:var(--text)}
.site-header { display:flex; align-items:center; justify-content:space-between; gap:24px; padding:18px var(--space); border-bottom:1px solid var(--border); position:sticky; top:0; background:#fff; z-index:20}
.logo { display:block; flex-shrink:0}
.logo img { width:185px; height:auto}
.main-nav,.main-nav ul { display:flex; gap:28px}
.main-nav a { font-size:14px; font-weight:500; display:block; padding:10px 0}
.header-actions { display:flex; align-items:center; gap:18px}
.icon-btn { position:relative; width:44px; height:44px; display:flex; align-items:center; justify-content:center; border-radius:8px; flex-shrink:0}
.badge { position:absolute; top:0; right:0; min-width:18px; height:18px; padding:0 4px; background:var(--teal); color:#fff; border-radius:10px; font-size:10px; font-weight:700; display:flex; align-items:center; justify-content:center}
.hamburger { display:none}
.hero { position:relative}
.hero-image { display:block; width:100%; height:100%; object-fit:cover; object-position:right center}
.hero picture { display:block}
.hero-caption { background:var(--color-institutional-dark); color:#fff; padding-top:18px; padding-bottom:20px}
.hero-caption h2 { margin:0 0 8px}
.hero-caption p { margin:0 0 16px}
.hero-controls { display:flex; justify-content:center; align-items:center; gap:12px; padding:8px; background:var(--bg)}
.hero-controls button { min-width:44px; min-height:44px; color:var(--color-action-text)}
.hero-dots { display:flex; gap:0}
.hero-dots button::after { content:''; display:block; width:10px; height:10px; background:#adbdbb; border-radius:50%; margin:auto}
.hero-dots button[aria-pressed=true]::after { background:var(--color-action-text)}
.hero .hero-slides { display:grid}
.hero .hero-slide { grid-area:1/1; visibility:hidden; pointer-events:none; aspect-ratio:1440 / 420}
.hero .hero-slide.is-current { visibility:visible; pointer-events:auto}
.cat-row { display:flex; gap:16px; overflow-x:auto; padding:4px 4px 10px; scrollbar-width:thin}
.cat-card { flex:0 0 118px; display:flex; flex-direction:column; align-items:center; gap:10px; padding:18px 10px 16px; border:1px solid var(--border); border-radius:var(--radius); text-align:center}
.cat-icon { width:52px; height:52px; border-radius:50%; background:var(--bg); display:flex; align-items:center; justify-content:center; color:var(--turquoise)}
.cat-icon img { width:44px; height:44px; object-fit:contain}
.cat-card>span:last-child { font-size:14px; font-weight:600}
.grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:20px}
.card { border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; display:flex; flex-direction:column}
.card-image { background:var(--bg); display:block}
.card-image img { width:100%; height:170px; object-fit:contain; padding:12px}
.card-body { padding:14px 16px 16px; display:flex; flex-direction:column; gap:6px; flex:1}
.card-brand { font-size:10.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--text-2); min-height:13px}
.card-title { font-size:14.5px; font-weight:600; line-height:1.3; margin:0; min-height:38px}
.card-avail { font-size:12px; font-weight:600; color:var(--text-2); margin-bottom:6px}
.card-footer { margin-top:auto; justify-content:space-between}
.card-footer label { flex:1}
.card-footer input { width:100%; text-align:center}
.add-btn { width:44px; height:44px; display:inline-flex; align-items:center; justify-content:center; border-radius:8px; background:var(--turquoise); color:#fff; font-size:24px; flex-shrink:0}
.about-teaser { display:grid; grid-template-columns:1fr 1fr; gap:44px; align-items:center}
.about-image img { width:100%; height:320px; object-fit:contain; border-radius:var(--radius-lg); background:#fff}
.about-teaser h2 { font-size:26px; font-weight:800; margin:0 0 14px}
.about-teaser p { font-size:14.5px; color:var(--text-2); margin:0 0 20px}
.site-footer { background:var(--color-institutional-dark); color:#DCEBE7; padding:52px var(--space) 28px}
.footer-top { display:grid; grid-template-columns:1.4fr 1fr 1fr; justify-items:stretch; align-items:start; gap:40px; margin-bottom:40px}
.footer-top > div { min-width:0; }
.footer-brand { justify-self:start; }
.footer-logo { padding:0; display:inline-block}
.footer-logo img { width:160px}
.site-footer p.desc { font-size:14px; color:#bdd9d2; max-width:320px}
.site-footer h2 { font-size:14px; text-transform:uppercase; letter-spacing:.07em; color:#bdd9d2; margin:0 0 14px}
.site-footer li { margin-bottom:10px; font-size:14px; overflow-wrap:anywhere}
.footer-bottom { border-top:1px solid #ffffff30; padding-top:20px; font-size:14px; color:#bdd9d2; display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px}
.breadcrumb { display:flex; gap:8px; align-items:center; flex-wrap:wrap; font-size:14px; color:var(--text-2); margin-bottom:24px}
.product-layout { display:grid; grid-template-columns:minmax(0,1.25fr) minmax(300px,.85fr); gap:48px; align-items:start}
.product-media img { width:100%; height:460px; object-fit:contain; background:var(--bg); border-radius:var(--radius-lg)}
.product-info { padding-top:28px}
.product-info h1 { font-size:26px; margin:8px 0 14px}
.product-info .desc { font-size:14.5px; color:var(--text-2); line-height:1.7}
.product-gallery { display:flex; gap:12px; overflow:auto; margin-top:12px}
.product-gallery img { width:90px; height:90px; object-fit:contain; border:1px solid var(--border); border-radius:6px}
.spec-list { margin:20px 0 26px; border-top:1px solid var(--border)}
.spec-list>div { display:flex; justify-content:space-between; gap:16px; padding:11px 0; border-bottom:1px solid var(--border); font-size:14px}
.spec-list dt { color:var(--text-2)}
.spec-list dd { margin:0; font-weight:600}
.cart-panel { position:sticky; top:110px}
.product-description { margin-top:32px}
.product-description h2 { font-size:20px}
.catalog-filters { display:flex; gap:14px; align-items:end; margin:28px 0; flex-wrap:wrap}
.catalog-filters label { display:flex; flex-direction:column; gap:7px; font-size:12px; font-weight:600}
.catalog-filters input,.catalog-filters select { border:1px solid #b5c6c4; border-radius:6px; background:#fff; min-height:44px; padding:10px; font-size:14px; max-width:100%}
.search-label { flex:1; min-width:200px}
.catalog-filters .text-link { padding-bottom:12px}
.category-image { width:160px; height:120px; object-fit:contain}
.term-description { color:var(--text-2)}
.pagination { display:flex; justify-content:center; gap:12px; margin-top:32px; flex-wrap:wrap}
.pagination .page-numbers { padding:12px 16px; border:1px solid var(--border); border-radius:6px}
.pagination .current { background:var(--color-action); color:#fff}
.page-main { min-height:55vh}
.page-content { max-width:800px; line-height:1.75}
.page-content>.kratos-order { max-width:700px}
.contact-block { margin-top:32px}
.about-hero img { width:100%; height:340px; object-fit:contain; background:var(--bg)}
.about-page-layout { display:grid; grid-template-columns:minmax(0,1fr) minmax(320px,.88fr); align-items:start; gap:clamp(40px,7vw,96px); }
.about-page-copy { min-width:0; }
.about-page-copy .page-content { max-width:none; font-size:16px; }
.about-page-aside { display:grid; gap:24px; min-width:0; }
.about-page-image { overflow:hidden; border-radius:var(--radius-lg); background:var(--bg); }
.about-page-image img { display:block; width:100%; aspect-ratio:4 / 3; object-fit:cover; }
.about-page-contact { display:grid; gap:24px; padding:26px; border:1px solid var(--border); border-radius:var(--radius-lg); background:var(--bg); }
.about-page-details { display:grid; gap:20px; margin:0; }
.about-page-details div { display:grid; gap:5px; }
.about-page-details dt { color:var(--text-2); font-size:13px; font-weight:750; }
.about-page-details dd { margin:0; font-size:15px; line-height:1.5; }
.about-page-details a { color:var(--color-action-text); font-weight:700; }
.about-page-contact .btn { width:max-content; max-width:100%; }
.empty-state { padding:28px; border:1px dashed var(--border); border-radius:8px; color:var(--text-2)}
.sr-only,.skip-link:not(:focus) { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0}
.skip-link:focus { position:fixed; top:10px; left:10px; background:#fff; padding:14px; z-index:1000}
.admin-bar .site-header { top:32px}

@media(min-width:768px) and (max-width:1023px) { :root { --space:32px}
.main-nav,.main-nav ul { gap:16px}
.header-cta { padding:12px; font-size:12px}
.logo img { width:145px}
.site-header { gap:14px}
.header-actions { gap:6px}
.grid { grid-template-columns:repeat(3,minmax(0,1fr))}
.product-layout { gap:24px; grid-template-columns:minmax(0,1fr) minmax(280px,.8fr)}
}

@media(max-width:767px) { :root { --space:20px; --section:34px}
.site-header { padding:14px 20px; gap:8px}
.logo img { width:122px}
.header-actions { gap:4px}
.header-cta { font-size:11px; padding:8px; max-width:92px; text-align:center}
.hamburger { display:flex; font-size:22px}
.main-nav { display:none; position:absolute; top:100%; left:0; right:0; background:#fff; padding:12px 20px; border-bottom:1px solid var(--border)}
.main-nav.is-open,.main-nav ul { display:flex; flex-direction:column; gap:4px}
.main-nav a { padding:12px}
.hero-image { height:240px}
.hero-caption h2 { font-size:20px}
.hero-caption p { font-size:14px}
.grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px}
.card-image img { height:120px}
.card-body { padding:10px}
.card-title { font-size:14px}
.card-brand { font-size:10px}
.card-avail { font-size:11px}
.section-head h2 { font-size:19px}
.section-head a { font-size:12px; max-width:140px; text-align:right}
.about-teaser { grid-template-columns:1fr; gap:20px}
.about-image img { height:200px}
.about-teaser h2 { font-size:20px}
.footer-top { grid-template-columns:1fr; gap:26px; margin-bottom:26px}
.site-footer { padding-top:36px; padding-bottom:22px}
.product-layout { grid-template-columns:1fr; gap:28px}
.product-media img { height:260px}
.product-info h1 { font-size:22px}
.cart-panel { position:static}
.product-info .kratos-add .btn { font-size:14px; padding:12px}
.about-hero img { height:200px}
.about-page-layout { grid-template-columns:1fr; gap:28px; }
.about-page-copy .page-content { font-size:15px; }
.about-page-aside { gap:20px; }
.about-page-contact { padding:20px; }
.about-page-contact .btn { width:100%; }
h1 { font-size:24px}
.catalog-filters { gap:12px}
.catalog-filters label { flex:1; min-width:120px}
.catalog-filters .search-label { flex-basis:100%}
.catalog-filters select { width:100%}
.admin-bar .site-header { top:46px}
}

@media(prefers-reduced-motion:reduce) { * { scroll-behavior:auto}
}


.footer-bottom { display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); align-items:center; justify-items:center; text-align:center}
.footer-privacy { justify-self:center}
.footer-development { display:inline-flex; align-items:center; gap:8px; justify-self:center; white-space:nowrap}
.footer-development img { width:20px; height:20px; object-fit:contain}
@media(max-width:767px) { .footer-bottom { grid-template-columns:1fr; justify-items:center; text-align:center}
.footer-privacy,.footer-development { justify-self:center}
}

.whatsapp-icon { width:24px; height:24px; object-fit:contain; flex:0 0 24px}

.product-recommendations { margin-top:var(--section); padding-top:var(--section); border-top:1px solid var(--border)}

.hero .hero-slide { position:relative; overflow:hidden}
.hero-overlay { position:absolute; inset:0; display:flex; color:var(--white); background:transparent}
.hero-overlay>.container { width:100%; display:flex; align-items:center; justify-content:flex-start; pointer-events:none}
.hero-content { max-width:570px; padding:42px 0; text-align:left; pointer-events:auto}
.hero-content p { max-width:490px; margin:14px 0 22px; font-size:15px; line-height:1.5; color:#DCEBE7}
.hero-actions { display:flex; justify-content:flex-start; gap:12px; flex-wrap:wrap}
.hero-content--without-subtitle .hero-actions { margin-top:40px}
.hero-actions .btn { min-height:48px}
/* Compensate for the icon asset's transparent edges without increasing button height. */
.hero-actions .whatsapp-icon { width:2em; height:2em; flex-basis:2em; margin-block:-.3em}
.btn-secondary { border:1px solid var(--white); background:color-mix(in srgb,var(--white) 8%,transparent); color:var(--white)}
.hero,.hero .hero-slide { background:transparent}
.hero-overlay { background:transparent}


@media (hover:hover) and (pointer:fine) {

a:hover { color:var(--turquoise)}
.btn-primary:hover { background:var(--color-action-hover); color:#fff}
.btn-ghost:hover { border-color:var(--teal)}
.icon-btn:hover { background:var(--bg)}
.cat-card:hover { border-color:var(--teal)}
.cat-card:hover .cat-icon { color:var(--teal)}
.card:hover { border-color:var(--teal)}
.add-btn:hover { background:var(--teal)}
.site-footer a:hover { color:#fff; text-decoration:underline}
.btn-secondary:hover { background:color-mix(in srgb,var(--white) 15%,transparent); color:var(--white)}
}
/* Shared touch, typography and focus rules. */
[hidden] { display: none !important; }
body { -webkit-tap-highlight-color: transparent; }
.site-frame { min-height: 100vh; min-height: 100svh; }
input:not([type=checkbox]):not([type=radio]), textarea, select { font-size: 16px; }
:focus-visible { outline: 3px solid var(--color-action-text); outline-offset: 3px; }
a, button { touch-action: manipulation; }
button:disabled, .btn:disabled { opacity: 1; background: var(--border); color: var(--text-2); }
a:active, button:active:not(:disabled) { filter: brightness(.88); }
.btn-primary { color: var(--color-action-foreground, #142120); }
.btn-primary .whatsapp-icon { filter: var(--color-action-icon-filter, brightness(0) invert(.09)); }
.btn-primary:focus-visible { outline-offset: 4px; }
.icon-btn:active { background: var(--bg); }
.section-head { align-items: center; gap: 12px; }
.section-head a, .text-link { display: inline-flex; align-items: center; min-height: 44px; font-size: 14px; color: var(--color-action-text); }
.section-head a { white-space: nowrap; max-width: none; }
.main-nav a { min-height: 48px; display: flex; align-items: center; }
.main-nav a[aria-current=page] { color: var(--color-action-text); text-decoration: underline; text-underline-offset: 6px; font-weight: 700; }
.badge { font-size: 12px; min-width: 20px; height: 20px; background: var(--color-action-text); }
.nav-backdrop { position: fixed; inset: 0; z-index: 19; background: rgb(0 0 0 / .25); }
.hamburger svg path { transform-origin: 12px 12px; transition: transform .18s ease, opacity .18s ease; }
.hamburger[aria-expanded=true] .menu-line-top { transform: translateY(6px) rotate(45deg); transform-origin: 12px 6px; }
.hamburger[aria-expanded=true] .menu-line-middle { opacity: 0; }
.hamburger[aria-expanded=true] .menu-line-bottom { transform: translateY(-6px) rotate(-45deg); transform-origin: 12px 18px; }
.cat-row { scroll-snap-type: x mandatory; scrollbar-width: none; }
.cat-row::-webkit-scrollbar { display: none; }
.cat-card { scroll-snap-align: start; }
.cat-card > span:last-child { font-size: 14px; }
.card-image { aspect-ratio: 1; background: #fff; display: grid; place-items: center; }
.card-image img { width: 100%; height: 100%; aspect-ratio: 1; object-fit: contain; padding: 12px; }
.card-title { font-size: 15px; line-height: 1.3; min-height: 44px; }
.card-title a { display: block; overflow-wrap: anywhere; min-height: 44px; }
.card-brand { font-size: 12px; letter-spacing: .06em; line-height: 1.4; overflow-wrap: anywhere; }
.card-footer { flex-direction: column; align-items: stretch; gap: 8px; padding-top: 4px; }
.card-footer .add-btn { width: 100%; min-height: 44px; font-size: 15px; background: var(--color-action); color: var(--color-action-foreground, #142120); }
.hero-content .hero-heading { margin: 0; font-size: clamp(30px, 2.6vw, 42px); line-height: 1.16; letter-spacing: -.035em; }
.product-layout { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 28px 40px; }
.product-visual { grid-column: 1; grid-row: 1 / span 2; min-width: 0; }
.product-purchase { grid-column: 2; grid-row: 1; min-width: 0; }
.product-purchase h1 { margin: 8px 0 14px; }
.product-quote { font-size: 15px; color: var(--text-2); }
.product-info { grid-column: 2; grid-row: 2; min-width: 0; padding-top: 0; }
.product-add { flex-wrap: wrap; padding: 20px 0; }
.product-add .btn { flex: 1 1 180px; font-size: 15px; }
.product-media { aspect-ratio: 1; background: #fff; }
.product-media img { height: 100%; aspect-ratio: 1; object-fit: contain; background: #fff; }
.breadcrumb { font-size: 14px; gap: 6px; }
.breadcrumb a, .spec-list a { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; }
.spec-list > div { font-size: 14px; align-items: center; }
.pagination { justify-content: center; }
.pagination .page-numbers { display: inline-flex; justify-content: center; align-items: center; min-width: 44px; min-height: 44px; }
.site-footer { padding-bottom: calc(24px + env(safe-area-inset-bottom)); }
.site-footer li { margin-bottom: 4px; }
.site-footer a { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; }
.footer-development a:focus-visible { outline: none; border-radius: 6px; background: rgb(255 255 255 / .3); }
.footer-bottom { font-size: 14px; }
.store-hours { display: grid; gap: 5px; }
.contact-block a { display: inline-flex; align-items: center; min-height: 44px; }
@media (hover:hover) and (pointer:fine) {
    .btn-primary:hover, .card-footer .add-btn:hover { background: var(--color-action-hover); color: var(--color-action-foreground, #142120); }
}
@media (max-width: 782px) and (min-width: 601px) { .admin-bar .site-header { top: 46px; } }
@media (max-width: 600px) { .admin-bar .site-header { top: 0; } }
@media (max-width: 767px) {
    .site-header { padding-block: 10px; }
    .logo img { width: auto; height: 44px; }
    .main-nav { display: flex; flex-direction: column; gap: 4px; visibility: hidden; opacity: 0; transform: translateY(-8px); transition: opacity .2s ease, transform .2s ease, visibility .2s; box-shadow: 0 8px 24px rgb(0 0 0 / .08); }
    .main-nav.is-open { visibility: visible; opacity: 1; transform: translateY(0); }
    .main-nav ul { margin: 0; }
    .main-nav a { font-size: 16px; min-height: 48px; }
    /* On mobile, height is intentional; do not let the desktop aspect ratio derive a wider slide. */
    .hero .hero-slide { display: grid; width: 100%; min-width: 0; min-height: 320px; aspect-ratio: auto; }
    .hero .hero-slide > picture, .hero .hero-slide > .hero-image { grid-area: 1 / 1; width: 100%; height: 100%; position: absolute; inset: 0; }
    .hero-image { width: 100%; height: 100%; object-fit: cover; object-position: 30% center; }
    .hero-overlay { position: relative; grid-area: 1 / 1; background: transparent; }
    .hero-overlay > .container { width: 100%; min-width: 0; align-items: center; justify-content: center; }
    .hero-content { max-width: 100%; padding: 32px 0; width: 100%; text-align: center; }
    .hero-content .hero-heading { font-size: clamp(24px, 6vw, 28px); line-height: 1.16; letter-spacing: -.02em; }
    .hero-content p { font-size: 14px; line-height: 1.45; margin: 10px auto 18px; color: #fff; }
    .hero-content--without-subtitle .hero-actions { margin-top: 28px; }
    .hero-actions { justify-content: center; gap: 12px; flex-wrap: wrap; }
    .hero-actions .btn { font-size: 15px; min-height: 48px; padding: 12px 16px; white-space: nowrap; }
    .cat-row { margin-inline: calc(-1 * var(--space)); padding-inline: var(--space); scroll-padding-inline: var(--space); }
    .card-body { padding: 10px; }
    .card-brand { font-size: 12px; }
    .card-title { font-size: 15px; }
    .section-head h2 { font-size: 19px; }
    .about-teaser h2 { font-size: 24px; }
    .about-teaser p { font-size: 15px; }
    .about-image-fallback { display: none; }
    .footer-top { justify-items: center; }
    .footer-brand { justify-self: center; }
    .footer-navigation, .footer-contact { display: none; }
    .footer-bottom { justify-items: center; text-align: center; }
    .footer-privacy, .footer-development { justify-self: center; }
    .footer-logo img { height: auto; width: 112px; }
    .product-layout { display: flex; flex-direction: column; gap: 24px; }
    .product-purchase { order: -1; width: 100%; }
    .product-purchase h1 { font-size: 26px; }
    .product-visual, .product-info { width: 100%; }
    .product-add { padding-block: 4px; }
}
@media (max-width: 400px) { .hero-actions { flex-direction: column; } .hero-actions .btn { width: 100%; } }
@media (prefers-reduced-motion:no-preference) { html { scroll-behavior: smooth; } }
@media (prefers-reduced-motion:reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; animation: none !important; transition: none !important; }
}
.main-nav a { min-width: 44px; }
.whatsapp-float { position: fixed; right: calc(16px + env(safe-area-inset-right)); bottom: calc(16px + env(safe-area-inset-bottom)); z-index: 18; width: 60px; height: 60px; }
.whatsapp-float-link { display: flex; align-items: center; justify-content: center; width: 60px; height: 60px; border-radius: 50%; background: #168a4c; color: #fff; box-shadow: 0 4px 16px rgb(0 0 0 / .22); }
.whatsapp-float-link .whatsapp-icon { width: 60px; height: 60px; flex-basis: 60px; }
.whatsapp-float-close { position: absolute; top: -30px; right: -10px; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--text); cursor: pointer; }
.whatsapp-float-close::before { content: ''; position: absolute; inset: 8px; border-radius: 50%; background: #fff; box-shadow: 0 2px 8px rgb(0 0 0 / .2); }
.whatsapp-float-close svg { position: relative; }
.kratos-modal-open .whatsapp-float, .order-toast:not([hidden]) ~ .whatsapp-float { visibility: hidden; }
@media (hover:hover) and (pointer:fine) {
    .whatsapp-float-link:hover { background: #106d3b; color: #fff; }
    .whatsapp-float-close:hover::before { background: var(--bg); }
}