/* DaisyUI layout compatibility */
html { font-size:15px; line-height:1.5; -webkit-text-size-adjust:100%; }
body { margin:0; }
main, header, footer, section, article, aside, nav { display:block; }
button, input, select, textarea { font:inherit; color:inherit; }
button, select { text-transform:none; }
button, [type=button], [type=submit] { -webkit-appearance:button; }
button:not(:disabled), [type=submit]:not(:disabled) { cursor:pointer; }
a { color:var(--color-primary); text-decoration:none; }
img { max-width:100%; height:auto; border-style:none; }
svg { vertical-align:middle; }
[hidden] { display:none !important; }
h1,h2,h3,h4,h5,h6 { font-weight:400; line-height:1.1; }
h1 { font-size:4.2rem; margin:2.8rem 0 1.68rem; }
h2 { font-size:3.56rem; margin:2.373rem 0 1.424rem; }
h3 { font-size:2.92rem; margin:1.947rem 0 1.168rem; }
h4 { font-size:2.28rem; margin:1.52rem 0 .912rem; }
h5 { font-size:1.64rem; margin:1.093rem 0 .656rem; }
h6 { font-size:1.15rem; margin:.767rem 0 .46rem; }
strong { font-weight:700; }
ul:not(.browser-default) { padding-left:0; list-style-type:none; }
table { width:100%; border-collapse:collapse; border-spacing:0; }
th,td { padding:15px 5px; text-align:left; vertical-align:middle; }
:is(.container,.caramel-container) { margin-left:auto;margin-right:auto; }
nav { width:100%; }
nav .brand-logo { display:inline-block; color:inherit; white-space:nowrap; }
nav ul { margin:0; }
nav ul li { float:left; padding:0; }
nav ul a { display:block; padding:0 15px; }
.btn,:is(.latte-btn-flat,.caramel-btn-flat) { display:inline-block;cursor:pointer;border-width:0;text-align:center;text-decoration:none; height:36px; line-height:36px; padding:0 16px; border-radius:2px; font-size:14px; letter-spacing:.5px; text-transform:uppercase; vertical-align:middle; }
.btn { color:var(--color-neutral-content); background:var(--color-primary); transition:background-color .2s, box-shadow .2s; }
:is(.latte-btn-flat,.caramel-btn-flat) { background:transparent; color:var(--color-base-content); }
button:disabled,.btn.disabled { opacity:.55; cursor:default; }
select.browser-default { display:block; width:100%; background:var(--color-base-100); padding:5px; border:1px solid var(--color-base-300); border-radius:4px; height:3rem; }
input:not([type=checkbox]):not([type=radio]):not([type=hidden]),textarea { box-sizing:border-box; }
label { color:color-mix(in oklab, var(--color-base-content) 68%, var(--color-base-100)); font-size:.8rem; }
:focus-visible { outline:2px solid var(--color-primary); outline-offset:3px; }
:is(.latte-skip-link,.caramel-skip-link) { position:fixed; left:16px; top:-100px; z-index:2000; background:var(--color-base-100); color:var(--color-primary); padding:12px 18px; border-radius:12px; box-shadow:0 8px 24px color-mix(in oklab, var(--color-neutral) 14.9%, transparent); }
:is(.latte-skip-link,.caramel-skip-link):focus { top:12px; }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto !important; } }
:root {
--blue:var(--color-primary);
--blue-dark:var(--color-secondary);
--blue-soft:var(--color-base-200);
--navy:var(--color-neutral);
--text:var(--color-base-content);
--muted:var(--color-base-content);
--line:var(--color-base-300);
}
html {
scroll-behavior: smooth;
}
body {
background:var(--color-base-100);
color:var(--text);
font-family: Arial, Helvetica, sans-serif;
}
* {
box-sizing:border-box;
}
:is(.container,.caramel-container) {
width: 90%;
max-width: 1240px;
}
/* --------------------------------
NAVBAR
-------------------------------- */
nav {
background:color-mix(in oklab, var(--color-base-100) 95.0%, transparent);
box-shadow:0 1px 0 color-mix(in oklab, var(--color-neutral) 6.0%, transparent);
position:fixed;
top: 0;
z-index: 999;
}
nav .brand-logo {
color:var(--blue);
font-weight:900;
letter-spacing: -2px;
font-size: 31px;
}
nav ul a {
color:var(--color-neutral);
font-size: 14px;
font-weight: 600;
}
nav ul a:hover {
background:transparent;
color:var(--blue);
}
.nav-cta {
background:var(--blue) !important;
color:var(--color-neutral-content) !important;
border-radius:30px;
height: 42px;
line-height: 42px;
margin-top: 9px;
padding: 0 20px;
}
/* --------------------------------
HERO
-------------------------------- */
:is(.latte-hero,.caramel-hero) {
min-height: 850px;
padding-top: 120px;
position:relative;
overflow:hidden;
background:radial-gradient(
circle at 75% 35%,
color-mix(in oklab, var(--color-primary) 18.0%, transparent),
transparent 32%
),
linear-gradient(
120deg,
var(--color-base-100) 0%,
var(--color-base-200) 55%,
var(--color-base-200) 100%
);
}
:is(.latte-hero,.caramel-hero):after {
content: "";
position:absolute;
width: 700px;
height: 700px;
border-radius:50%;
background:color-mix(in oklab, var(--color-primary) 4.0%, transparent);
right: -300px;
bottom: -250px;
}
:is(.latte-hero-content,.caramel-hero-content) {
padding-top: 90px;
position:relative;
z-index: 2;
}
:is(.latte-small-label,.caramel-small-label) {
color:var(--blue);
font-weight:800;
letter-spacing: 2px;
font-size: 12px;
text-transform: uppercase;
margin-bottom: 20px;
}
:is(.latte-hero,.caramel-hero) h1 {
font-size: clamp(48px, 7vw, 88px);
line-height: .94;
letter-spacing: -6px;
font-weight:900;
margin: 0 0 30px;
}
:is(.latte-product-description,.caramel-product-description) h2{font-size:27px;}
:is(.latte-hero,.caramel-hero) h1 span {
color:var(--blue);
}
:is(.latte-hero-description,.caramel-hero-description) {
color:var(--muted);
font-size: 18px;
line-height: 1.8;
max-width: 580px;
margin-bottom: 35px;
}
:is(.latte-hero-buttons,.caramel-hero-buttons) {
display:flex;
gap: 12px;
flex-wrap:wrap;
}
.whatsapp-button {
background:var(--color-success);
border-radius:40px;
padding: 0 28px;
height: 50px;
line-height: 50px;
box-shadow:0 12px 30px color-mix(in oklab, var(--color-success) 28.0%, transparent);
font-weight:700;
color:var(--color-neutral-content);
border:none;
}
:is(.latte-dark-button,.caramel-dark-button) {
background:var(--color-neutral);
border-radius:40px;
padding: 0 28px;
height: 50px;
line-height: 50px;
box-shadow:0 12px 30px color-mix(in oklab, var(--color-neutral) 25.0%, transparent);
font-weight:700;
color:var(--color-neutral-content);
}
:is(.latte-blue-button,.caramel-blue-button) {
background:var(--blue);
border-radius:40px;
padding: 0 28px;
height: 50px;
line-height: 50px;
box-shadow:0 12px 30px color-mix(in oklab, var(--color-primary) 25.0%, transparent);
font-weight:700;
}
:is(.latte-blue-button,.caramel-blue-button):hover {
background:var(--blue-dark);
}
:is(.latte-white-button,.caramel-white-button) {
background:var(--color-base-100);
color:var(--text);
border:1px solid var(--line);
border-radius:40px;
padding: 0 28px;
height: 50px;
line-height: 48px;
font-weight:700;
}
/* HERO PRODUCT */
.hero-visual {
height: 650px;
position:relative;
}
.orb {
position:absolute;
width: 510px;
height: 510px;
border-radius:50%;
background:linear-gradient(
145deg,
var(--color-base-200),
var(--color-base-200)
);
top: 50px;
left: 60px;
box-shadow:inset 0 0 100px color-mix(in oklab, var(--color-base-300) 90.0%, transparent),
0 30px 80px color-mix(in oklab, var(--color-primary) 12.0%, transparent);
}
.product-main {
position:absolute;
z-index: 4;
width: 205px;
height: 410px;
border-radius:35px;
left: 210px;
top: 90px;
background:linear-gradient(
155deg,
var(--color-neutral),
var(--color-info) 50%,
var(--color-primary)
);
transform: rotate(9deg);
box-shadow:25px 40px 65px color-mix(in oklab, var(--color-neutral) 32.0%, transparent),
inset 8px 8px 25px color-mix(in oklab, var(--color-base-300) 22.0%, transparent);
}
.product-main:before {
content: "";
position:absolute;
width: 65px;
height: 52px;
background:var(--color-neutral);
top: -43px;
left: 70px;
border-radius:17px 17px 8px 8px;
}
.product-main:after {
content: "STORE";
position:absolute;
color:var(--color-neutral-content);
font-size: 29px;
font-weight:900;
transform: rotate(90deg);
top: 175px;
left: 57px;
}
.product-back {
position:absolute;
width: 165px;
height: 335px;
border-radius:30px;
background:linear-gradient(
145deg,
var(--color-base-100),
var(--color-base-200)
);
left: 375px;
top: 190px;
transform: rotate(19deg);
box-shadow:20px 30px 50px color-mix(in oklab, var(--color-neutral) 15.0%, transparent);
z-index: 2;
}
.product-back:before {
content: "";
position:absolute;
width: 53px;
height: 42px;
background:var(--color-neutral);
left: 56px;
top: -34px;
border-radius:13px 13px 7px 7px;
}
.floating-tag {
position:absolute;
z-index: 6;
background:color-mix(in oklab, var(--color-base-100) 92.0%, transparent);
border:1px solid color-mix(in oklab, var(--color-base-300) 70.0%, transparent);
padding: 15px 20px;
border-radius:16px;
box-shadow:0 15px 40px color-mix(in oklab, var(--color-neutral) 12.0%, transparent);
}
.floating-tag.one {
top: 90px;
left: 0;
}
.floating-tag.two {
bottom: 90px;
right: 0;
}
.floating-tag strong {
display:block;
color:var(--blue);
font-size: 17px;
}
.floating-tag span {
color:var(--muted);
font-size: 11px;
}
/* --------------------------------
MARQUEE
-------------------------------- */
:is(.latte-brand-strip,.caramel-brand-strip) {
border-top:1px solid var(--line);
border-bottom:1px solid var(--line);
padding: 22px 0;
background:var(--color-base-100);
}
:is(.latte-brand-strip-inner,.caramel-brand-strip-inner) {
display:flex;
justify-content:space-between;
align-items:center;
gap: 20px;
flex-wrap:wrap;
}
:is(.latte-brand-strip,.caramel-brand-strip) span {
color:color-mix(in oklab, var(--color-base-content) 68%, var(--color-base-100));
font-weight:800;
letter-spacing: 1px;
font-size: 12px;
}
/* --------------------------------
INTRO
-------------------------------- */
:is(.latte-section,.caramel-section) {
padding: 110px 0;
}
:is(.latte-section-label,.caramel-section-label) {
color:var(--blue);
text-transform: uppercase;
font-size: 12px;
font-weight:800;
letter-spacing: 2px;
margin-bottom: 15px;
}
:is(.latte-section-title,.caramel-section-title) {
font-size: clamp(38px,5vw,60px);
line-height: 1;
letter-spacing: -3px;
font-weight:900;
margin: 0 0 22px;
}
:is(.latte-section-text,.caramel-section-text) {
color:var(--muted);
font-size: 16px;
line-height: 1.8;
}
.intro-number {
font-size: 150px;
font-weight:900;
color:var(--color-neutral-content);
line-height: .8;
text-align: right;
}
/* --------------------------------
FEATURE CARDS
-------------------------------- */
:is(.latte-feature-section,.caramel-feature-section) {
background:var(--color-base-200);
}
:is(.latte-feature-card,.caramel-feature-card) {
background:var(--color-base-100);
border-radius:24px;
padding: 35px;
min-height: 270px;
border:1px solid var(--color-base-300);
transition: .3s;
}
:is(.latte-feature-card,.caramel-feature-card):hover {
transform: translateY(-7px);
box-shadow:0 25px 60px color-mix(in oklab, var(--color-neutral) 10.0%, transparent);
}
:is(.latte-feature-icon,.caramel-feature-icon) {
width: 58px;
height: 58px;
border-radius:17px;
background:var(--blue-soft);
color:var(--blue);
display:flex;
align-items:center;
justify-content:center;
margin-bottom: 25px;
}
:is(.latte-feature-card,.caramel-feature-card) h3 {
font-size: 20px;
font-weight:800;
margin-bottom: 10px;
}
:is(.latte-feature-card,.caramel-feature-card) p {
color:var(--muted);
font-size: 14px;
line-height: 1.7;
}
/* --------------------------------
PRODUCTS
-------------------------------- */
:is(.latte-products-section,.caramel-products-section) {
background:var(--color-base-100);
}
.product-card-new {
border-radius:25px;
overflow:hidden;
border:1px solid var(--line);
background:var(--color-base-100);
transition: .3s;
}
.product-card-new:hover {
transform: translateY(-8px);
box-shadow:0 25px 70px color-mix(in oklab, var(--color-neutral) 12.0%, transparent);
}
.product-picture {
height: 330px;
background:radial-gradient(
circle,
var(--color-base-200),
var(--color-base-200)
);
position:relative;
display:flex;
justify-content:center;
align-items:center;
}
.mini-product {
width: 105px;
height: 235px;
border-radius:23px;
background:linear-gradient(
145deg,
var(--color-primary),
var(--color-info),
var(--color-primary)
);
box-shadow:18px 25px 40px color-mix(in oklab, var(--color-neutral) 20.0%, transparent);
position:relative;
}
.mini-product:before {
content: "";
position:absolute;
width: 34px;
height: 27px;
background:var(--color-neutral);
top: -22px;
left: 35px;
border-radius:8px 8px 4px 4px;
}
.mini-product:after {
content: "STORE";
position:absolute;
color:var(--color-neutral-content);
font-size: 14px;
font-weight:900;
transform: rotate(90deg);
top: 105px;
left: 29px;
}
.product-content {
padding: 28px;
}
.product-number {
color:var(--blue);
font-size: 11px;
font-weight:800;
letter-spacing: 2px;
}
.product-content h3 {
font-weight:900;
margin: 8px 0 10px;
}
.product-content p {
color:var(--muted);
font-size: 13px;
line-height: 1.7;
}
/* --------------------------------
BLUE STORY
-------------------------------- */
.story {
background:var(--navy);
color:var(--color-neutral-content);
position:relative;
overflow:hidden;
}
.story:before {
content: "";
position:absolute;
width: 650px;
height: 650px;
border-radius:50%;
background:color-mix(in oklab, var(--color-primary) 22.0%, transparent);
right: -200px;
top: -250px;
filter: blur(2px);
}
.story :is(.latte-section-label,.caramel-section-label) {
color:var(--color-info);
}
.story :is(.latte-section-text,.caramel-section-text) {
color:color-mix(in oklab, var(--color-base-content) 68%, var(--color-base-100));
}
.story-box {
position:relative;
z-index: 2;
padding: 40px;
border:1px solid color-mix(in oklab, var(--color-base-300) 10.0%, transparent);
border-radius:25px;
background:color-mix(in oklab, var(--color-base-100) 4.0%, transparent);
backdrop-filter: blur(10px);
}
.story-stat {
border-left:1px solid color-mix(in oklab, var(--color-base-300) 15.0%, transparent);
padding-left: 25px;
}
.story-stat strong {
display:block;
color:var(--color-neutral-content);
font-size: 36px;
font-weight:900;
}
.story-stat span {
color:color-mix(in oklab, var(--color-base-content) 68%, var(--color-base-100));
font-size: 12px;
}
/* --------------------------------
AROMA / OPTIONS
-------------------------------- */
.options {
background:var(--color-base-100);
}
.option-box {
min-height: 230px;
border-radius:24px;
padding: 30px;
position:relative;
overflow:hidden;
background:var(--color-base-100);
border:1px solid var(--line);
}
.option-circle {
width: 110px;
height: 110px;
border-radius:50%;
position:absolute;
right: -25px;
bottom: -30px;
opacity: .9;
}
.blue-circle {
background:var(--color-info);
}
.cyan-circle {
background:var(--color-info);
}
.purple-circle {
background:var(--color-base-200);
}
.pink-circle {
background:var(--color-base-200);
}
.option-box h4 {
font-weight:900;
position:relative;
z-index: 2;
}
.option-box p {
max-width: 230px;
color:var(--muted);
font-size: 13px;
position:relative;
z-index: 2;
}
/* --------------------------------
INFORMATION TABLE
-------------------------------- */
.info-table {
border-radius:25px;
overflow:hidden;
border:1px solid var(--line);
}
.info-table table {
margin: 0;
}
.info-table th {
background:var(--color-base-200);
color:var(--color-neutral);
font-size: 12px;
text-transform: uppercase;
letter-spacing: 1px;
}
.info-table td {
font-size: 14px;
color:var(--muted);
}
/* --------------------------------
FAQ
-------------------------------- */
.faq {
max-width: 900px;
margin: auto;
}
.faq .collapsible {
border:0;
box-shadow:none;
}
.faq .collapsible-header {
border-bottom:1px solid var(--line);
padding: 25px 5px;
font-weight:800;
font-size: 16px;
background:transparent;
}
.faq .collapsible-body {
border-bottom:1px solid var(--line);
color:var(--muted);
line-height: 1.8;
padding: 20px 5px;
}
/* --------------------------------
CONTACT CTA
-------------------------------- */
.contact-box {
background:radial-gradient(
circle at 80% 20%,
color-mix(in oklab, var(--color-base-100) 20.0%, transparent),
transparent 25%
),
linear-gradient(
135deg,
var(--color-info),
var(--color-info)
);
color:var(--color-neutral-content);
border-radius:30px;
padding: 65px;
text-align:center;
box-shadow:0 30px 70px color-mix(in oklab, var(--color-neutral) 20.0%, transparent);
}
.contact-box h2 {
font-size: clamp(35px,5vw,58px);
letter-spacing: -3px;
font-weight:900;
margin: 0 0 18px;
}
.contact-box p {
max-width: 650px;
margin: auto auto 30px;
color:color-mix(in oklab, var(--color-neutral-content) 82.0%, transparent);
}
.contact-box :is(.latte-white-button,.caramel-white-button) {
border:0;
color:var(--blue);
}
/* --------------------------------
AGE NOTICE
-------------------------------- */
.age-notice {
background:var(--color-base-100);
border-top:1px solid var(--line);
border-bottom:1px solid var(--line);
padding: 18px 0;
text-align:center;
color:color-mix(in oklab, var(--color-base-content) 68%, var(--color-base-100));
font-size: 12px;
}
.age-notice strong {
color:var(--color-neutral);
}
/* --------------------------------
FOOTER
-------------------------------- */
footer {
background:var(--color-neutral);
color:var(--color-neutral-content);
padding: 70px 0 25px;
}
.footer-logo {
color:var(--color-info);
font-size: 34px;
font-weight:900;
letter-spacing: -2px;
}
.footer-about {
color:color-mix(in oklab, var(--color-base-content) 68%, var(--color-base-100));
font-size: 13px;
line-height: 1.8;
max-width: 330px;
}
.footer-title {
font-size: 13px;
font-weight:800;
margin-bottom: 20px;
}
.footer-links a {
display:block;
color:color-mix(in oklab, var(--color-base-content) 68%, var(--color-base-100));
font-size: 12px;
margin-bottom: 12px;
}
.footer-links a:hover {
color:var(--color-neutral-content);
}
.footer-bottom {
margin-top: 45px;
padding-top: 22px;
border-top:1px solid color-mix(in oklab, var(--color-base-300) 8.0%, transparent);
color:var(--color-info);
font-size: 11px;
}
/* --------------------------------
MOBILE
-------------------------------- */
@media(max-width: 992px) {
:is(.latte-hero,.caramel-hero) {
min-height: auto;
padding-bottom: 70px;
}
:is(.latte-hero-content,.caramel-hero-content) {
padding-top: 40px;
}
.hero-visual {
height: 560px;
transform: scale(.85);
transform-origin: center;
}
.intro-number {
text-align: left;
margin-top: 30px;
}
.story-stat {
border-left:0;
border-top:1px solid color-mix(in oklab, var(--color-base-300) 15.0%, transparent);
padding: 20px 0 0;
margin-top: 20px;
}
}
@media(max-width: 600px) {
:is(.container,.caramel-container) {
width: 92%;
}
nav .brand-logo {
font-size: 27px;
}
:is(.latte-hero,.caramel-hero) h1 {
letter-spacing: -4px;
}
:is(.latte-hero-description,.caramel-hero-description) {
font-size: 15px;
}
.hero-visual {
height: 440px;
transform: scale(.66);
margin-top: -20px;
}
.orb {
left: 0;
}
.floating-tag.one {
left: -25px;
}
.floating-tag.two {
right: -25px;
}
:is(.latte-section,.caramel-section) {
padding: 31px 0;
}
:is(.latte-section-title,.caramel-section-title) {
letter-spacing: -2px;
}
.contact-box {
padding: 40px 22px;
}
:is(.latte-brand-strip-inner,.caramel-brand-strip-inner) {
justify-content:center;
}
.story-box {
padding: 25px;
}
}
/* ===== DYNAMIC STORE EXTENSIONS ===== */
body { padding-top:64px; }
a { text-decoration:none; }
img { max-width:100%; display:block; }
.store-nav { height:64px; line-height:64px; }
.store-nav .nav-wrapper { height:64px; }
.store-nav .brand-logo { position:relative; transform:none; left:auto; }
.store-nav .nav-actions { float:right; display:flex; align-items:center; gap:10px; height:64px; }
.cart-link { display:flex; align-items:center; gap:8px; height:42px; line-height:42px; margin-top:11px; padding:0 16px; border:1px solid var(--line); border-radius:999px; color:var(--text); font-weight:800; background:var(--color-base-100); }
.cart-badge { display:inline-flex; min-width:22px; height:22px; padding:0 6px; align-items:center; justify-content:center; border-radius:999px; background:var(--blue); color:var(--color-neutral-content); font-size:11px; line-height:1; }
.mobile-category-trigger { display:none; width:42px; height:42px; margin-top:11px; border:1px solid var(--line); background:var(--color-base-100); border-radius:50%; align-items:center; justify-content:center; cursor:pointer; }
.mobile-category-trigger span { display:block; width:18px; height:2px; background:var(--text); margin:3px 0; border-radius:2px; }
.category-drawer-backdrop { position:fixed; inset:0; background:color-mix(in oklab, var(--color-neutral) 45.0%, transparent); opacity:0; visibility:hidden; transition:.25s; z-index:1100; }
.category-drawer { position:fixed; top:0; left:0; width:min(88vw,360px); height:100vh; background:var(--color-base-100); z-index:1101; transform:translateX(-100%); transition:.28s ease; padding:24px; box-shadow:30px 0 80px color-mix(in oklab, var(--color-neutral) 16.0%, transparent); }
.category-drawer.open { transform:translateX(0); }
.category-drawer-backdrop.open { opacity:1; visibility:visible; }
.drawer-top { display:flex; align-items:center; justify-content:space-between; padding-bottom:18px; border-bottom:1px solid var(--line); }
.drawer-top strong { font-size:20px; }
.drawer-close { width:38px; height:38px; border:0; border-radius:50%; background:var(--color-base-200); font-size:24px; cursor:pointer; }
.drawer-list { padding-top:18px; }
.drawer-list a { display:flex; justify-content:space-between; align-items:center; padding:16px 4px; border-bottom:1px solid var(--line); color:var(--text); font-weight:800; }
.drawer-list a span:last-child { color:var(--blue); }
.hero-product-image { position:absolute; z-index:4; width:280px; height:420px; left:170px; top:75px; transform:rotate(5deg); border-radius:34px; background:var(--color-base-100); box-shadow:25px 40px 65px color-mix(in oklab, var(--color-neutral) 24.0%, transparent); overflow:hidden; display:flex; align-items:center; justify-content:center; border:1px solid color-mix(in oklab, var(--color-base-300) 70.0%, transparent); }
.hero-product-image img { width:100%; height:100%; object-fit:contain; padding:28px; background:linear-gradient(145deg,var(--color-base-100),var(--color-base-200)); }
.hero-product-image .fallback { font-size:42px; font-weight:900; color:var(--blue); letter-spacing:-2px; }
.hero-product-back { position:absolute; width:170px; height:300px; border-radius:30px; background:linear-gradient(145deg,var(--color-base-100),var(--color-base-200)); left:365px; top:200px; transform:rotate(18deg); box-shadow:20px 30px 50px color-mix(in oklab, var(--color-neutral) 15.0%, transparent); z-index:2; }
:is(.latte-category-strip,.caramel-category-strip) { display:flex; gap:12px; flex-wrap:wrap; margin-top:32px; }
:is(.latte-category-pill,.caramel-category-pill) { display:inline-flex; align-items:center; gap:10px; padding:13px 18px; border-radius:999px; border:1px solid var(--line); background:var(--color-base-100); color:var(--text); font-weight:800; font-size:13px; transition:.2s; }
:is(.latte-category-pill,.caramel-category-pill):hover { border-color:var(--color-base-300); color:var(--blue); transform:translateY(-2px); }
:is(.latte-category-pill,.caramel-category-pill) :is(.latte-dot,.caramel-dot) { width:8px; height:8px; border-radius:50%; background:var(--blue); }
:is(.latte-store-product-grid,.caramel-store-product-grid) { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:26px; margin-top:38px; }
:is(.latte-store-product-card,.caramel-store-product-card) { border-radius:25px; overflow:hidden; border:1px solid var(--line); background:var(--color-base-100); transition:.3s; }
:is(.latte-store-product-card,.caramel-store-product-card):hover { transform:translateY(-8px); box-shadow:0 25px 70px color-mix(in oklab, var(--color-neutral) 12.0%, transparent); }
.store-product-media {
height: 390px;
background:radial-gradient(circle, var(--color-base-200), var(--color-base-200));
display:flex;
align-items:center;
justify-content:center;
padding: 34px;
position:relative;
overflow:hidden;
}
.store-product-media img {
width: 84%;
height: 84%;
object-fit: contain;
object-position: center;
border-radius:26px;
display:block;
mix-blend-mode: multiply;
filter: drop-shadow(14px 20px 24px color-mix(in oklab, var(--color-neutral) 13.0%, transparent));
transition: transform .28s ease;
}
:is(.latte-store-product-card,.caramel-store-product-card):hover .store-product-media img {
transform: scale(1.025);
}
.store-product-media :is(.latte-no-image,.caramel-no-image) { width:120px; height:250px; border-radius:28px; background:linear-gradient(145deg,var(--color-primary),var(--color-info),var(--color-primary)); box-shadow:18px 25px 40px color-mix(in oklab, var(--color-neutral) 20.0%, transparent); }
:is(.latte-store-product-body,.caramel-store-product-body) { padding:28px; }
:is(.latte-store-product-kicker,.caramel-store-product-kicker) { color:var(--blue); font-size:11px; font-weight:800; letter-spacing:2px; text-transform:uppercase; }
:is(.latte-store-product-body,.caramel-store-product-body) h3 { margin:8px 0 10px; font-size:26px; font-weight:900; }
:is(.latte-store-product-body,.caramel-store-product-body) h3 a { color:var(--text); }
:is(.latte-store-product-body,.caramel-store-product-body) p { color:var(--muted); font-size:13px; line-height:1.7; min-height:44px; }
:is(.latte-price-row,.caramel-price-row) { display:flex; justify-content:space-between; align-items:end; gap:15px; margin:20px 0; }
:is(.latte-price-main,.caramel-price-main) { font-size:25px; font-weight:900; color:var(--text); }
:is(.latte-price-old,.caramel-price-old) { margin-left:7px; color:color-mix(in oklab, var(--color-base-content) 68%, var(--color-base-100)); text-decoration:line-through; font-size:13px; }
.stock-chip { font-size:11px; font-weight:800; border-radius:999px; padding:7px 10px; background:var(--color-base-200); color:var(--color-success); }
.stock-chip.out { background:var(--color-base-200); color:var(--color-error); }
:is(.latte-product-actions,.caramel-product-actions) { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
:is(.latte-product-actions,.caramel-product-actions) form { margin:0; }
:is(.latte-product-actions,.caramel-product-actions) .btn, :is(.latte-product-actions,.caramel-product-actions) button { width:100%; border:0; text-transform:none; letter-spacing:0; box-shadow:none; }
:is(.latte-btn-outline,.caramel-btn-outline) { background:var(--color-base-100) !important; color:var(--text) !important; border:1px solid var(--line) !important; }
.btn-dark { background:var(--navy) !important; color:var(--color-neutral-content) !important; }
:is(.latte-page-top,.caramel-page-top) { background:linear-gradient(120deg,var(--color-base-100) 0%,var(--color-base-200) 58%,var(--color-base-200) 100%); padding:72px 0 58px; border-bottom:1px solid var(--line); }
:is(.latte-breadcrumbs,.caramel-breadcrumbs) { color:color-mix(in oklab, var(--color-base-content) 68%, var(--color-base-100)); font-size:12px; margin-bottom:16px; }
:is(.latte-breadcrumbs,.caramel-breadcrumbs) a { color:color-mix(in oklab, var(--color-base-content) 68%, var(--color-base-100)); }
:is(.latte-page-top,.caramel-page-top) h1 { margin:0 0 16px; font-size:clamp(42px,6vw,72px); line-height:1; letter-spacing:-4px; font-weight:900; }
:is(.latte-page-top,.caramel-page-top) p { max-width:700px; color:var(--muted); font-size:16px; line-height:1.8; }
:is(.latte-detail-wrap,.caramel-detail-wrap) { display:grid; grid-template-columns:1fr 1fr; gap:70px; align-items:start; }
:is(.latte-detail-media-box,.caramel-detail-media-box) {
min-height: 600px;
border-radius:30px;
background:radial-gradient(circle, var(--color-base-200), var(--color-base-200));
display:flex;
align-items:center;
justify-content:center;
padding: 52px;
border:1px solid var(--line);
position:sticky;
top: 95px;
overflow:hidden;
}
:is(.latte-detail-media-box,.caramel-detail-media-box) img {
width: auto;
height: auto;
max-width: 86%;
max-height: 500px;
object-fit: contain;
object-position: center;
border-radius:30px;
display:block;
margin: auto;
mix-blend-mode: multiply;
filter: drop-shadow(16px 24px 28px color-mix(in oklab, var(--color-neutral) 14.0%, transparent));
}
:is(.latte-detail-info-box,.caramel-detail-info-box) :is(.latte-category-label,.caramel-category-label) { color:var(--blue); font-weight:800; letter-spacing:2px; font-size:12px; text-transform:uppercase; }
:is(.latte-detail-info-box,.caramel-detail-info-box) h1 { font-size:clamp(40px,5vw,62px); line-height:1; letter-spacing:-3px; margin:12px 0 18px; font-weight:900; }
:is(.latte-detail-info-box,.caramel-detail-info-box) :is(.latte-lead,.caramel-lead) { color:var(--muted); font-size:16px; line-height:1.8; }
:is(.latte-detail-price,.caramel-detail-price) { margin:25px 0; display:flex; align-items:center; justify-content:space-between; gap:15px; padding:22px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
:is(.latte-detail-price,.caramel-detail-price) :is(.latte-price-main,.caramel-price-main) { font-size:34px; }
:is(.latte-detail-actions,.caramel-detail-actions) { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:18px; }
:is(.latte-detail-actions,.caramel-detail-actions) form { margin:0; }
:is(.latte-detail-actions,.caramel-detail-actions) .btn, :is(.latte-detail-actions,.caramel-detail-actions) button, :is(.latte-detail-actions,.caramel-detail-actions) a { width:100%; text-align:center; border:0; box-shadow:none; text-transform:none; letter-spacing:0; }
:is(.latte-detail-actions,.caramel-detail-actions) .whatsapp-order { grid-column:1/-1; background:var(--color-base-100) !important; color:var(--color-success) !important; border:1px solid var(--color-base-300) !important; }
:is(.latte-trust-grid,.caramel-trust-grid) {
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:12px;
margin:24px 0 34px;
}
:is(.latte-trust-mini,.caramel-trust-mini) {
position:relative;
display:flex;
align-items:center;
gap:12px;
min-height:86px;
padding:15px 14px;
border:1px solid var(--color-base-300);
border-radius:20px;
background:linear-gradient(145deg,var(--color-base-100) 0%,var(--color-base-100) 100%);
box-shadow:0 10px 30px color-mix(in oklab, var(--color-neutral) 5.5%, transparent);
overflow:hidden;
transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease;
}
:is(.latte-trust-mini,.caramel-trust-mini):after {
content:"";
position:absolute;
width:54px;
height:54px;
right:-20px;
bottom:-24px;
border-radius:50%;
background:color-mix(in oklab, var(--color-primary) 6.0%, transparent);
}
:is(.latte-trust-mini,.caramel-trust-mini):hover {
transform:translateY(-3px);
border-color:var(--color-base-300);
box-shadow:0 16px 36px color-mix(in oklab, var(--color-neutral) 9.0%, transparent);
}
:is(.latte-trust-icon,.caramel-trust-icon) {
flex:0 0 42px;
width:42px;
height:42px;
display:flex;
align-items:center;
justify-content:center;
border-radius:13px;
color:var(--blue);
background:var(--blue-soft);
position:relative;
z-index:1;
}
:is(.latte-trust-icon,.caramel-trust-icon) .material-icons { font-size:21px; }
:is(.latte-trust-copy,.caramel-trust-copy) { min-width:0; position:relative; z-index:1; }
:is(.latte-trust-mini,.caramel-trust-mini) strong {
display:block;
font-size:12px;
line-height:1.35;
font-weight:800;
color:var(--color-neutral);
}
:is(.latte-trust-mini,.caramel-trust-mini) span {
display:block;
color:var(--muted);
font-size:10px;
line-height:1.45;
margin-top:4px;
}
:is(.latte-product-description,.caramel-product-description) { color:var(--color-neutral); line-height:1.85; }
:is(.latte-product-description,.caramel-product-description) h2,:is(.latte-product-description,.caramel-product-description) h3 { color:var(--text); font-weight:900; }
:is(.latte-cart-layout,.caramel-cart-layout) { display:grid; grid-template-columns:minmax(0,1fr) 360px; gap:30px; align-items:start; }
:is(.latte-surface-card,.caramel-surface-card) { background:var(--color-base-100); border:1px solid var(--line); border-radius:25px; padding:28px; }
:is(.latte-cart-item,.caramel-cart-item) { display:grid; grid-template-columns:100px 1fr 90px 120px 38px; gap:18px; align-items:center; padding:20px 0; border-bottom:1px solid var(--line); }
:is(.latte-cart-item,.caramel-cart-item):last-child { border-bottom:0; }
:is(.latte-cart-thumb,.caramel-cart-thumb) { width:100px; height:100px; object-fit:contain; background:var(--color-base-200); border-radius:18px; padding:10px; }
:is(.latte-cart-item,.caramel-cart-item) h3 { font-size:16px; margin:0 0 6px; font-weight:900; }
:is(.latte-cart-item,.caramel-cart-item) small { color:var(--muted); }
:is(.latte-qty-field,.caramel-qty-field) { width:78px !important; margin:0 !important; text-align:center; border:1px solid var(--line) !important; border-radius:12px !important; height:42px !important; box-shadow:none !important; }
:is(.latte-remove-x,.caramel-remove-x) { width:34px; height:34px; border:0; border-radius:50%; background:var(--color-primary); cursor:pointer; font-size:18px; }
:is(.latte-summary-card,.caramel-summary-card) { position:sticky; top:95px; }
:is(.latte-summary-line,.caramel-summary-line) { display:flex; justify-content:space-between; padding:12px 0; color:var(--muted); }
:is(.latte-summary-total,.caramel-summary-total) { display:flex; justify-content:space-between; padding:20px 0; margin-top:8px; border-top:1px solid var(--line); font-size:19px; font-weight:900; }
:is(.latte-summary-actions,.caramel-summary-actions) { display:grid; gap:10px; }
:is(.latte-summary-actions,.caramel-summary-actions) .btn { width:100%; text-align:center; text-transform:none; box-shadow:none; }
:is(.latte-empty-box,.caramel-empty-box) { text-align:center; padding:70px 25px; border:1px solid var(--line); border-radius:25px; background:var(--color-base-100); }
:is(.latte-empty-box,.caramel-empty-box) h2 { font-weight:900; }
:is(.latte-empty-box,.caramel-empty-box) p { color:var(--muted); }
.checkout-layout { display:grid; grid-template-columns:minmax(0,1fr) 390px; gap:32px; align-items:start; }
.checkout-card h2 { font-size:25px; font-weight:900; margin-top:0; }
:is(.latte-form-grid,.caramel-form-grid) { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.field.full { grid-column:1/-1; }
.field label { display:block; color:var(--color-neutral); font-weight:800; font-size:12px; margin-bottom:8px; }
.field input,.field textarea,.field select { width:100%; border:1px solid var(--line) !important; border-radius:13px !important; padding:0 14px !important; box-sizing:border-box !important; box-shadow:none !important; background:var(--color-base-100); }
.field input,.field select { height:48px !important; }
.field textarea { min-height:120px; padding-top:13px !important; resize:vertical; }
.payment-options { display:grid; gap:10px; margin-top:10px; }
.payment-option { display:flex; gap:12px; align-items:center; border:1px solid var(--line); border-radius:14px; padding:15px; cursor:pointer; }
.checkout-summary-item { display:flex; justify-content:space-between; gap:15px; padding:10px 0; border-bottom:1px solid var(--line); font-size:13px; }
.store-footer { background:var(--color-neutral); color:var(--color-neutral-content); padding:70px 0 25px; }
.footer-grid { display:grid; grid-template-columns:1.7fr 1fr 1fr; gap:55px; }
.footer-brand { color:var(--color-info); font-size:34px; font-weight:900; letter-spacing:-2px; }
.footer-copy { color:color-mix(in oklab, var(--color-base-content) 68%, var(--color-base-100)); font-size:13px; line-height:1.8; max-width:340px; }
.footer-heading { font-size:13px; font-weight:800; margin-bottom:18px; }
.footer-links a { display:block; color:color-mix(in oklab, var(--color-base-content) 68%, var(--color-base-100)); font-size:12px; margin-bottom:12px; }
.footer-links a:hover { color:var(--color-neutral-content); }
.footer-bottom { margin-top:45px; padding-top:22px; border-top:1px solid color-mix(in oklab, var(--color-base-300) 8.0%, transparent); color:var(--color-info); font-size:11px; display:flex; justify-content:space-between; gap:20px; }
@media(max-width:992px){
.mobile-category-trigger{display:flex;}.store-nav .brand-logo{font-size:28px}.cart-link .cart-text{display:none;}
.hero-product-image{left:170px}:is(.latte-store-product-grid,.caramel-store-product-grid){grid-template-columns:1fr 1fr}
:is(.latte-detail-wrap,.caramel-detail-wrap),.checkout-layout{grid-template-columns:1fr}:is(.latte-detail-media-box,.caramel-detail-media-box),:is(.latte-summary-card,.caramel-summary-card){position:relative;top:auto}:is(.latte-cart-layout,.caramel-cart-layout){grid-template-columns:1fr}.footer-grid{grid-template-columns:1fr 1fr}.footer-grid>div:first-child{grid-column:1/-1}
}
@media(max-width:700px){
body{padding-top:60px}.store-nav{height:60px;line-height:60px}.store-nav .nav-actions{height:60px}.cart-link{margin-top:9px;height:42px}.mobile-category-trigger{margin-top:9px}
:is(.latte-hero,.caramel-hero){padding-top:80px}.hero-visual{margin-top:-30px}.hero-product-image{left:130px;top:70px}
:is(.latte-store-product-grid,.caramel-store-product-grid){grid-template-columns:1fr}.store-product-media{height:330px}:is(.latte-product-actions,.caramel-product-actions){grid-template-columns:1fr 1fr}
:is(.latte-detail-wrap,.caramel-detail-wrap){gap:30px}:is(.latte-detail-media-box,.caramel-detail-media-box){min-height:410px;padding:28px}:is(.latte-detail-actions,.caramel-detail-actions){grid-template-columns:1fr}:is(.latte-detail-actions,.caramel-detail-actions) .whatsapp-order{grid-column:auto}:is(.latte-trust-grid,.caramel-trust-grid){grid-template-columns:1fr}
:is(.latte-cart-item,.caramel-cart-item){grid-template-columns:76px 1fr 70px}:is(.latte-cart-thumb,.caramel-cart-thumb){width:76px;height:76px}:is(.latte-cart-item,.caramel-cart-item) :is(.latte-item-total,.caramel-item-total){grid-column:2}:is(.latte-cart-item,.caramel-cart-item) :is(.latte-remove-x,.caramel-remove-x){grid-column:3;grid-row:2}:is(.latte-form-grid,.caramel-form-grid){grid-template-columns:1fr}.field.full{grid-column:auto}.footer-grid{grid-template-columns:1fr}.footer-grid>div:first-child{grid-column:auto}.footer-bottom{flex-direction:column;}
}
/* Shared navigation alignment */
.store-nav .nav-wrapper{display:flex;align-items:center;justify-content:space-between;}
.store-nav .nav-actions{float:none;}
@media(max-width:600px){.valign-wrapper{display:block;}.store-nav .brand-logo{font-size:25px;letter-spacing:-1.5px}.hero-product-image{left:110px;width:250px;height:360px}.hero-product-back{left:300px;top:170px}.floating-tag.two{right:-10px}}
/* V5 additions */
.mobile-category-trigger{flex-direction:column;padding:0;gap:4px}
.mobile-category-trigger span{display:block;width:19px;height:2px;background:var(--color-neutral);margin:0!important;border-radius:99px;transition:.22s ease}
.mobile-category-trigger.active span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.mobile-category-trigger.active span:nth-child(2){opacity:0}
.mobile-category-trigger.active span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
.drawer-section-title{font-size:10px;font-weight:900;letter-spacing:1.8px;color:color-mix(in oklab, var(--color-base-content) 68%, var(--color-base-100));margin:24px 0 8px}
.drawer-other-title{margin-top:30px}
.drawer-empty{padding:14px 0;color:color-mix(in oklab, var(--color-base-content) 68%, var(--color-base-100))}
:is(.latte-content-page-card,.caramel-content-page-card){max-width:920px;margin:0 auto;background:var(--color-base-100);border:1px solid var(--line);border-radius:26px;padding:42px;box-shadow:0 20px 60px color-mix(in oklab, var(--color-neutral) 6.0%, transparent)}
:is(.latte-rich-content,.caramel-rich-content){font-size:16px;line-height:1.85;color:var(--color-neutral)}
:is(.latte-rich-content,.caramel-rich-content) h1,:is(.latte-rich-content,.caramel-rich-content) h2,:is(.latte-rich-content,.caramel-rich-content) h3,:is(.latte-rich-content,.caramel-rich-content) h4{color:var(--color-neutral);font-weight:900;letter-spacing:-1px;line-height:1.18;margin:34px 0 14px}
:is(.latte-rich-content,.caramel-rich-content) h2{font-size:32px}:is(.latte-rich-content,.caramel-rich-content) h3{font-size:24px}
:is(.latte-rich-content,.caramel-rich-content) p{margin:0 0 18px}:is(.latte-rich-content,.caramel-rich-content) ul,:is(.latte-rich-content,.caramel-rich-content) ol{padding-left:24px;margin:0 0 22px}:is(.latte-rich-content,.caramel-rich-content) li{margin-bottom:8px}
:is(.latte-rich-content,.caramel-rich-content) img{max-width:100%;height:auto;border-radius:18px}:is(.latte-rich-content,.caramel-rich-content) a{color:var(--blue);font-weight:700;}
:is(.latte-blog-grid,.caramel-blog-grid){display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px}
:is(.latte-blog-card,.caramel-blog-card){background:var(--color-base-100);border:1px solid var(--line);border-radius:26px;overflow:hidden;transition:.25s ease}
:is(.latte-blog-card,.caramel-blog-card):hover{transform:translateY(-5px);box-shadow:0 24px 70px color-mix(in oklab, var(--color-neutral) 10.0%, transparent)}
:is(.latte-blog-card-media,.caramel-blog-card-media){display:block;height:260px;background:linear-gradient(145deg,var(--color-base-200),var(--color-base-200));overflow:hidden;}
:is(.latte-blog-card-media,.caramel-blog-card-media) img{width:100%;height:100%;object-fit:cover;display:block;}:is(.latte-blog-placeholder,.caramel-blog-placeholder){height:100%;display:flex;align-items:center;justify-content:center;font-size:54px;font-weight:900;color:var(--color-neutral-content)}
:is(.latte-blog-card-body,.caramel-blog-card-body){padding:28px}:is(.latte-blog-card-body,.caramel-blog-card-body) h2{font-size:25px;line-height:1.2;font-weight:900;letter-spacing:-.7px;margin:8px 0 12px}:is(.latte-blog-card-body,.caramel-blog-card-body) h2 a{color:var(--color-neutral)}:is(.latte-blog-card-body,.caramel-blog-card-body) p{color:color-mix(in oklab, var(--color-base-content) 68%, var(--color-base-100));line-height:1.7;margin-bottom:18px}:is(.latte-text-link,.caramel-text-link){color:var(--blue);font-weight:800;}
:is(.latte-blog-hero,.caramel-blog-hero) h1{max-width:900px}:is(.latte-blog-date,.caramel-blog-date){margin-top:16px;color:color-mix(in oklab, var(--color-base-content) 68%, var(--color-base-100));font-size:13px;font-weight:700;}:is(.latte-article-cover,.caramel-article-cover){max-width:920px;margin:0 auto 28px;border-radius:26px;overflow:hidden;border:1px solid var(--line)}:is(.latte-article-cover,.caramel-article-cover) img{display:block;width:100%;max-height:520px;object-fit:cover}
@media(max-width:700px){:is(.latte-content-page-card,.caramel-content-page-card){padding:24px;border-radius:20px}:is(.latte-blog-grid,.caramel-blog-grid){grid-template-columns:1fr}:is(.latte-blog-card-media,.caramel-blog-card-media){height:220px}}
/* =========================================================
CHECKOUT V5.5
========================================================= */
:is(.latte-checkout-page,.caramel-checkout-page) {
background:radial-gradient(circle at 85% 18%, color-mix(in oklab, var(--color-primary) 8.0%, transparent), transparent 26%),
var(--color-base-200);
}
:is(.latte-checkout-hero,.caramel-checkout-hero) {
padding: 125px 0 42px;
background:radial-gradient(circle at 82% 30%, color-mix(in oklab, var(--color-primary) 13.0%, transparent), transparent 28%),
linear-gradient(180deg, var(--color-base-100) 0%, var(--color-base-200) 100%);
border-bottom:1px solid var(--color-base-300);
}
:is(.latte-checkout-hero-inner,.caramel-checkout-hero-inner) {
display:flex;
align-items: flex-end;
justify-content:space-between;
gap: 40px;
}
:is(.latte-checkout-hero,.caramel-checkout-hero) h1 {
margin: 7px 0 12px;
font-size: clamp(40px, 5vw, 66px);
line-height: .98;
letter-spacing: -3px;
font-weight:900;
color:var(--color-neutral);
}
:is(.latte-checkout-hero,.caramel-checkout-hero) p {
max-width: 620px;
margin: 0;
color:color-mix(in oklab, var(--color-base-content) 68%, var(--color-base-100));
font-size: 17px;
line-height: 1.7;
}
:is(.latte-checkout-steps,.caramel-checkout-steps) {
display:flex;
align-items:center;
gap: 9px;
flex-shrink: 0;
}
:is(.latte-checkout-step,.caramel-checkout-step) {
min-width: 82px;
padding: 13px 14px;
border:1px solid var(--color-base-300);
border-radius:18px;
background:color-mix(in oklab, var(--color-base-100) 80.0%, transparent);
text-align:center;
}
:is(.latte-checkout-step,.caramel-checkout-step) span {
width: 30px;
height: 30px;
margin: 0 auto 6px;
border-radius:50%;
display:grid;
place-items: center;
background:var(--color-base-200);
color:color-mix(in oklab, var(--color-base-content) 68%, var(--color-base-100));
font-size: 12px;
font-weight:900;
}
:is(.latte-checkout-step,.caramel-checkout-step) small {
display:block;
color:color-mix(in oklab, var(--color-base-content) 68%, var(--color-base-100));
font-size: 11px;
font-weight:800;
letter-spacing: .5px;
text-transform: uppercase;
}
:is(.latte-checkout-step,.caramel-checkout-step).done span,
:is(.latte-checkout-step,.caramel-checkout-step).active span {
background:var(--color-primary);
color:var(--color-neutral-content);
}
:is(.latte-checkout-step,.caramel-checkout-step).active {
border-color:color-mix(in oklab, var(--color-primary) 35.0%, transparent);
box-shadow:0 12px 34px color-mix(in oklab, var(--color-primary) 11.0%, transparent);
}
:is(.latte-checkout-step,.caramel-checkout-step).active small {
color:var(--color-primary);
}
:is(.latte-checkout-section,.caramel-checkout-section) {
padding: 54px 0 90px;
}
:is(.latte-checkout-modern-layout,.caramel-checkout-modern-layout) {
display:grid;
grid-template-columns: minmax(0, 1fr) 390px;
align-items: start;
gap: 28px;
}
:is(.latte-checkout-form-card,.caramel-checkout-form-card),
:is(.latte-checkout-summary-card,.caramel-checkout-summary-card) {
background:color-mix(in oklab, var(--color-base-100) 94.0%, transparent);
border:1px solid var(--color-base-300);
border-radius:28px;
box-shadow:0 22px 65px color-mix(in oklab, var(--color-neutral) 7.0%, transparent);
}
:is(.latte-checkout-form-card,.caramel-checkout-form-card) {
padding: 34px;
}
:is(.latte-checkout-summary-card,.caramel-checkout-summary-card) {
position:sticky;
top: 100px;
padding: 28px;
}
:is(.latte-checkout-card-heading,.caramel-checkout-card-heading) {
display:flex;
align-items:flex-start;
gap: 15px;
margin-bottom: 28px;
}
:is(.latte-checkout-heading-icon,.caramel-checkout-heading-icon) {
width: 48px;
height: 48px;
border-radius:15px;
display:grid;
place-items: center;
flex: 0 0 auto;
background:var(--color-base-200);
color:var(--color-primary);
}
:is(.latte-checkout-heading-icon,.caramel-checkout-heading-icon) i {
font-size: 23px;
}
:is(.latte-checkout-card-heading,.caramel-checkout-card-heading) > div:last-child > span {
display:block;
margin-bottom: 3px;
color:var(--color-primary);
font-size: 11px;
font-weight:900;
letter-spacing: 1.4px;
text-transform: uppercase;
}
:is(.latte-checkout-card-heading,.caramel-checkout-card-heading) h2 {
margin: 0 0 5px;
color:var(--color-neutral);
font-size: 26px;
line-height: 1.15;
font-weight:900;
letter-spacing: -1px;
}
:is(.latte-checkout-card-heading,.caramel-checkout-card-heading) p {
margin: 0;
color:color-mix(in oklab, var(--color-base-content) 68%, var(--color-base-100));
font-size: 14px;
line-height: 1.55;
}
:is(.latte-checkout-error-box,.caramel-checkout-error-box) {
display:flex;
gap: 12px;
padding: 16px 18px;
margin: 0 0 24px;
border:1px solid var(--color-base-300);
border-radius:16px;
background:var(--color-base-200);
color:var(--color-error);
}
:is(.latte-checkout-error-box,.caramel-checkout-error-box) > i {
margin-top: 1px;
}
:is(.latte-checkout-error-box,.caramel-checkout-error-box) strong,
:is(.latte-checkout-error-box,.caramel-checkout-error-box) span {
display:block;
}
:is(.latte-checkout-error-box,.caramel-checkout-error-box) strong {
margin-bottom: 4px;
}
:is(.latte-checkout-error-box,.caramel-checkout-error-box) span {
font-size: 13px;
line-height: 1.45;
}
:is(.latte-checkout-fields,.caramel-checkout-fields) {
display:grid;
grid-template-columns: 1fr 1fr;
gap: 18px;
}
:is(.latte-checkout-field,.caramel-checkout-field) {
display:block;
}
:is(.latte-checkout-field,.caramel-checkout-field).full {
grid-column: 1 / -1;
}
:is(.latte-checkout-field,.caramel-checkout-field) > span {
display:block;
margin: 0 0 8px;
color:var(--color-neutral);
font-size: 13px;
font-weight:800;
}
:is(.latte-checkout-input-wrap,.caramel-checkout-input-wrap) {
min-height: 56px;
padding: 0 15px;
display:flex;
align-items:center;
gap: 11px;
border:1px solid var(--color-base-300);
border-radius:15px;
background:var(--color-base-100);
transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
:is(.latte-checkout-input-wrap,.caramel-checkout-input-wrap):focus-within {
border-color:var(--color-primary);
background:var(--color-base-100);
box-shadow:0 0 0 4px color-mix(in oklab, var(--color-primary) 9.0%, transparent);
}
:is(.latte-checkout-input-wrap,.caramel-checkout-input-wrap) > i {
flex: 0 0 auto;
color:color-mix(in oklab, var(--color-base-content) 68%, var(--color-base-100));
font-size: 20px;
}
:is(.latte-checkout-input-wrap,.caramel-checkout-input-wrap):focus-within > i {
color:var(--color-primary);
}
:is(.latte-checkout-input-wrap,.caramel-checkout-input-wrap) input,
:is(.latte-checkout-input-wrap,.caramel-checkout-input-wrap) textarea {
width: 100% !important;
height: auto !important;
min-height: 54px !important;
margin: 0 !important;
padding: 0 !important;
border:0 !important;
outline:0 !important;
box-shadow:none !important;
background:transparent !important;
color:var(--color-neutral) !important;
font-family: inherit;
font-size: 15px !important;
}
:is(.latte-checkout-input-wrap,.caramel-checkout-input-wrap) textarea {
min-height: 116px !important;
padding: 17px 0 !important;
resize: vertical;
line-height: 1.55;
}
:is(.latte-checkout-input-wrap,.caramel-checkout-input-wrap):is(.latte-textarea,.caramel-textarea) {
align-items:flex-start;
}
:is(.latte-checkout-input-wrap,.caramel-checkout-input-wrap):is(.latte-textarea,.caramel-textarea) > i {
margin-top: 17px;
}
:is(.latte-checkout-input-wrap,.caramel-checkout-input-wrap) input::placeholder,
:is(.latte-checkout-input-wrap,.caramel-checkout-input-wrap) textarea::placeholder {
color:color-mix(in oklab, var(--color-base-content) 68%, var(--color-base-100));
}
:is(.latte-checkout-divider,.caramel-checkout-divider) {
height: 1px;
margin: 34px 0;
background:var(--color-base-200);
}
.payment-heading {
margin-bottom: 18px;
}
:is(.latte-checkout-payment-grid,.caramel-checkout-payment-grid) {
display:grid;
grid-template-columns: 1fr 1fr;
gap: 14px;
}
:is(.latte-checkout-payment-card,.caramel-checkout-payment-card) {
position:relative;
display:block;
cursor:pointer;
}
:is(.latte-checkout-payment-card,.caramel-checkout-payment-card) > input {
position:absolute;
opacity: 0;
pointer-events: none;
}
:is(.latte-checkout-payment-content,.caramel-checkout-payment-content) {
min-height: 100px;
padding: 16px;
display:flex;
align-items:center;
gap: 12px;
border:1px solid var(--color-base-300);
border-radius:18px;
background:var(--color-base-100);
transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
:is(.latte-checkout-payment-card,.caramel-checkout-payment-card):hover :is(.latte-checkout-payment-content,.caramel-checkout-payment-content) {
transform: translateY(-2px);
border-color:var(--color-base-300);
}
:is(.latte-checkout-payment-card,.caramel-checkout-payment-card) > input:checked + :is(.latte-checkout-payment-content,.caramel-checkout-payment-content) {
border-color:var(--color-primary);
background:var(--color-base-200);
box-shadow:0 10px 30px color-mix(in oklab, var(--color-primary) 10.0%, transparent);
}
:is(.latte-payment-icon,.caramel-payment-icon) {
width: 43px;
height: 43px;
border-radius:13px;
display:grid;
place-items: center;
flex: 0 0 auto;
background:var(--color-base-100);
color:var(--color-primary);
box-shadow:0 6px 18px color-mix(in oklab, var(--color-neutral) 6.0%, transparent);
}
:is(.latte-payment-icon,.caramel-payment-icon) i {
font-size: 21px;
}
:is(.latte-payment-copy,.caramel-payment-copy) {
min-width: 0;
flex: 1;
}
:is(.latte-payment-copy,.caramel-payment-copy) strong,
:is(.latte-payment-copy,.caramel-payment-copy) small {
display:block;
}
:is(.latte-payment-copy,.caramel-payment-copy) strong {
margin-bottom: 4px;
color:var(--color-neutral);
font-size: 14px;
font-weight:900;
}
:is(.latte-payment-copy,.caramel-payment-copy) small {
color:color-mix(in oklab, var(--color-base-content) 68%, var(--color-base-100));
font-size: 12px;
}
:is(.latte-payment-check,.caramel-payment-check) {
width: 25px;
height: 25px;
border:1px solid var(--color-base-300);
border-radius:50%;
display:grid;
place-items: center;
color:transparent;
background:var(--color-base-100);
}
:is(.latte-payment-check,.caramel-payment-check) i {
font-size: 16px;
}
:is(.latte-checkout-payment-card,.caramel-checkout-payment-card) > input:checked + :is(.latte-checkout-payment-content,.caramel-checkout-payment-content) :is(.latte-payment-check,.caramel-payment-check) {
border-color:var(--color-primary);
background:var(--color-primary);
color:var(--color-neutral-content);
}
:is(.latte-checkout-submit-row,.caramel-checkout-submit-row) {
margin-top: 30px;
}
:is(.latte-checkout-security-note,.caramel-checkout-security-note) {
margin-bottom: 14px;
display:flex;
align-items:center;
gap: 8px;
color:color-mix(in oklab, var(--color-base-content) 68%, var(--color-base-100));
font-size: 12px;
}
:is(.latte-checkout-security-note,.caramel-checkout-security-note) i {
color:var(--color-success);
font-size: 18px;
}
:is(.latte-checkout-submit-button,.caramel-checkout-submit-button) {
width:100%;
min-height: 62px;
padding: 0 20px;
border:0;
border-radius:18px;
display:grid;
grid-template-columns: 1fr auto auto;
align-items:center;
gap: 14px;
background:var(--color-primary);
color:var(--color-neutral-content);
cursor:pointer;
box-shadow:0 18px 40px color-mix(in oklab, var(--color-primary) 24.0%, transparent);
transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}
:is(.latte-checkout-submit-button,.caramel-checkout-submit-button):hover {
transform: translateY(-2px);
background:var(--color-info);
box-shadow:0 22px 46px color-mix(in oklab, var(--color-primary) 28.0%, transparent);
}
:is(.latte-checkout-submit-button,.caramel-checkout-submit-button) span {
text-align: left;
font-size: 15px;
font-weight:900;
}
:is(.latte-checkout-submit-button,.caramel-checkout-submit-button) strong {
font-size: 15px;
}
:is(.latte-checkout-submit-button,.caramel-checkout-submit-button) i {
font-size: 20px;
}
:is(.latte-checkout-summary-head,.caramel-checkout-summary-head) {
display:flex;
align-items:flex-start;
justify-content:space-between;
gap: 20px;
margin-bottom: 22px;
}
:is(.latte-checkout-summary-head,.caramel-checkout-summary-head) :is(.latte-section-label,.caramel-section-label) {
margin-bottom: 5px;
}
:is(.latte-checkout-summary-head,.caramel-checkout-summary-head) h2 {
margin: 0;
color:var(--color-neutral);
font-size: 28px;
font-weight:900;
letter-spacing: -1px;
}
:is(.latte-checkout-summary-head,.caramel-checkout-summary-head) > a {
padding-top: 5px;
color:var(--color-primary);
font-size: 12px;
font-weight:800;
}
:is(.latte-checkout-order-products,.caramel-checkout-order-products) {
display:grid;
gap: 16px;
}
:is(.latte-checkout-order-product,.caramel-checkout-order-product) {
display:grid;
grid-template-columns: 58px minmax(0, 1fr) auto;
align-items:center;
gap: 12px;
}
:is(.latte-checkout-order-image,.caramel-checkout-order-image) {
width: 58px;
height: 58px;
position:relative;
border:1px solid var(--color-base-300);
border-radius:15px;
overflow: visible;
background:var(--color-base-200);
}
:is(.latte-checkout-order-image,.caramel-checkout-order-image) img,
:is(.latte-checkout-order-placeholder,.caramel-checkout-order-placeholder) {
width:100%;
height: 100%;
border-radius:14px;
object-fit: contain;
}
:is(.latte-checkout-order-placeholder,.caramel-checkout-order-placeholder) {
display:grid;
place-items: center;
color:color-mix(in oklab, var(--color-base-content) 68%, var(--color-base-100));
}
:is(.latte-checkout-order-image,.caramel-checkout-order-image) > span {
min-width: 22px;
height: 22px;
padding: 0 5px;
position:absolute;
top: -7px;
right: -7px;
border-radius:20px;
display:grid;
place-items: center;
background:var(--color-neutral);
color:var(--color-neutral-content);
font-size: 10px;
font-weight:900;
}
:is(.latte-checkout-order-copy,.caramel-checkout-order-copy) {
min-width: 0;
}
:is(.latte-checkout-order-copy,.caramel-checkout-order-copy) strong,
:is(.latte-checkout-order-copy,.caramel-checkout-order-copy) small {
display:block;
}
:is(.latte-checkout-order-copy,.caramel-checkout-order-copy) strong {
overflow:hidden;
color:var(--color-neutral);
font-size: 13px;
font-weight:900;
text-overflow: ellipsis;
white-space: nowrap;
}
:is(.latte-checkout-order-copy,.caramel-checkout-order-copy) small {
margin-top: 4px;
color:color-mix(in oklab, var(--color-base-content) 68%, var(--color-base-100));
font-size: 11px;
}
:is(.latte-checkout-order-price,.caramel-checkout-order-price) {
color:var(--color-neutral);
font-size: 13px;
white-space: nowrap;
}
:is(.latte-checkout-summary-lines,.caramel-checkout-summary-lines) {
margin-top: 24px;
padding: 20px 0;
border-top:1px solid var(--color-base-300);
border-bottom:1px solid var(--color-base-300);
display:grid;
gap: 12px;
}
:is(.latte-checkout-summary-lines,.caramel-checkout-summary-lines) > div,
:is(.latte-checkout-summary-total,.caramel-checkout-summary-total) {
display:flex;
align-items:center;
justify-content:space-between;
gap: 16px;
}
:is(.latte-checkout-summary-lines,.caramel-checkout-summary-lines) span {
color:color-mix(in oklab, var(--color-base-content) 68%, var(--color-base-100));
font-size: 13px;
}
:is(.latte-checkout-summary-lines,.caramel-checkout-summary-lines) strong {
color:var(--color-neutral);
font-size: 13px;
}
:is(.latte-checkout-summary-total,.caramel-checkout-summary-total) {
padding: 22px 0 4px;
}
:is(.latte-checkout-summary-total,.caramel-checkout-summary-total) span {
color:var(--color-neutral);
font-size: 14px;
font-weight:800;
}
:is(.latte-checkout-summary-total,.caramel-checkout-summary-total) strong {
color:var(--color-primary);
font-size: 27px;
font-weight:900;
letter-spacing: -1px;
}
:is(.latte-checkout-summary-trust,.caramel-checkout-summary-trust) {
margin-top: 22px;
padding-top: 20px;
border-top:1px solid var(--color-base-300);
display:grid;
gap: 10px;
}
:is(.latte-checkout-summary-trust,.caramel-checkout-summary-trust) > div {
display:flex;
align-items:center;
gap: 8px;
color:color-mix(in oklab, var(--color-base-content) 68%, var(--color-base-100));
font-size: 12px;
}
:is(.latte-checkout-summary-trust,.caramel-checkout-summary-trust) i {
color:var(--color-primary);
font-size: 18px;
}
@media (max-width: 980px) {
:is(.latte-checkout-modern-layout,.caramel-checkout-modern-layout) {
grid-template-columns: 1fr;
}
:is(.latte-checkout-summary-card,.caramel-checkout-summary-card) {
position: static;
order: -1;
}
:is(.latte-checkout-hero-inner,.caramel-checkout-hero-inner) {
align-items:flex-start;
flex-direction:column;
}
}
@media (max-width: 700px) {
:is(.latte-checkout-hero,.caramel-checkout-hero) {
padding: 104px 0 28px;
}
:is(.latte-checkout-hero,.caramel-checkout-hero) h1 {
font-size: 42px;
letter-spacing: -2px;
}
:is(.latte-checkout-hero,.caramel-checkout-hero) p {
font-size: 15px;
}
:is(.latte-checkout-steps,.caramel-checkout-steps) {
width:100%;
}
:is(.latte-checkout-step,.caramel-checkout-step) {
min-width: 0;
flex: 1;
padding: 10px 7px;
}
:is(.latte-checkout-section,.caramel-checkout-section) {
padding: 28px 0 58px;
}
:is(.latte-checkout-form-card,.caramel-checkout-form-card),
:is(.latte-checkout-summary-card,.caramel-checkout-summary-card) {
border-radius:22px;
}
:is(.latte-checkout-form-card,.caramel-checkout-form-card) {
padding: 22px 18px;
}
:is(.latte-checkout-summary-card,.caramel-checkout-summary-card) {
padding: 22px 18px;
}
:is(.latte-checkout-fields,.caramel-checkout-fields),
:is(.latte-checkout-payment-grid,.caramel-checkout-payment-grid) {
grid-template-columns: 1fr;
}
:is(.latte-checkout-field,.caramel-checkout-field).full {
grid-column: auto;
}
:is(.latte-checkout-card-heading,.caramel-checkout-card-heading) h2 {
font-size: 22px;
}
:is(.latte-checkout-submit-button,.caramel-checkout-submit-button) {
grid-template-columns: 1fr auto;
}
:is(.latte-checkout-submit-button,.caramel-checkout-submit-button) i {
display:none;
}
:is(.latte-checkout-order-product,.caramel-checkout-order-product) {
grid-template-columns: 52px minmax(0, 1fr) auto;
}
:is(.latte-checkout-order-image,.caramel-checkout-order-image) {
width: 52px;
height: 52px;
}
}
/* =========================================================
CHECKOUT PAYMENT SECTION V5.5.1
========================================================= */
:is(.latte-checkout-payment-section,.caramel-checkout-payment-section) {
padding: 4px 0 0;
}
:is(.latte-checkout-payment-section-head,.caramel-checkout-payment-section-head) {
display:flex;
align-items:center;
justify-content:space-between;
gap: 20px;
margin-bottom: 10px;
}
:is(.latte-checkout-payment-eyebrow,.caramel-checkout-payment-eyebrow) {
display:block;
margin-bottom: 5px;
color:var(--color-primary);
font-size: 11px;
font-weight:900;
letter-spacing: 1.6px;
}
:is(.latte-checkout-payment-section-head,.caramel-checkout-payment-section-head) h2 {
margin: 0;
color:var(--color-neutral);
font-size: 25px;
line-height: 1.15;
font-weight:900;
letter-spacing: -1px;
}
:is(.latte-checkout-payment-badge,.caramel-checkout-payment-badge) {
min-height: 38px;
padding: 0 13px;
border:1px solid var(--color-base-300);
border-radius:999px;
display:inline-flex;
align-items:center;
gap: 7px;
flex: 0 0 auto;
background:var(--color-base-200);
color:var(--color-primary);
font-size: 11px;
font-weight:800;
}
:is(.latte-checkout-payment-badge,.caramel-checkout-payment-badge) i {
font-size: 17px;
}
:is(.latte-checkout-payment-description,.caramel-checkout-payment-description) {
max-width: 620px;
margin: 0 0 20px;
color:color-mix(in oklab, var(--color-base-content) 68%, var(--color-base-100));
font-size: 13px;
line-height: 1.65;
}
@media (max-width: 700px) {
:is(.latte-checkout-payment-section-head,.caramel-checkout-payment-section-head) {
align-items:flex-start;
flex-direction:column;
gap: 10px;
}
:is(.latte-checkout-payment-badge,.caramel-checkout-payment-badge) {
min-height: 34px;
}
:is(.latte-checkout-payment-section-head,.caramel-checkout-payment-section-head) h2 {
font-size: 22px;
}
}
/* =========================================================
HOME SEO CONTENT
========================================================= */
:is(.latte-home-seo-section,.caramel-home-seo-section) {
padding-top: 28px;
padding-bottom: 84px;
background:var(--color-base-100);
}
:is(.latte-home-seo-shell,.caramel-home-seo-shell) {
max-width: 1040px;
margin: 0 auto;
padding: 38px 42px;
border:1px solid var(--color-base-300);
border-radius:24px;
background:var(--color-base-100);
}
:is(.latte-home-seo-heading,.caramel-home-seo-heading) {
padding-bottom: 22px;
margin-bottom: 26px;
border-bottom:1px solid var(--color-base-300);
}
:is(.latte-home-seo-heading,.caramel-home-seo-heading) :is(.latte-section-title,.caramel-section-title) {
margin: 0;
font-size: clamp(28px, 4vw, 42px);
line-height: 1.08;
letter-spacing: -1.8px;
}
:is(.latte-home-seo-content,.caramel-home-seo-content) {
color:color-mix(in oklab, var(--color-base-content) 68%, var(--color-base-100));
font-size: 15px;
line-height: 1.9;
}
:is(.latte-home-seo-content,.caramel-home-seo-content) h2,
:is(.latte-home-seo-content,.caramel-home-seo-content) h3,
:is(.latte-home-seo-content,.caramel-home-seo-content) h4 {
color:var(--color-neutral);
font-weight:900;
line-height: 1.25;
letter-spacing: -.5px;
}
:is(.latte-home-seo-content,.caramel-home-seo-content) h2 {
margin: 36px 0 14px;
font-size: 25px;
}
:is(.latte-home-seo-content,.caramel-home-seo-content) h3 {
margin: 30px 0 12px;
font-size: 20px;
}
:is(.latte-home-seo-content,.caramel-home-seo-content) h4 {
margin: 24px 0 10px;
font-size: 17px;
}
:is(.latte-home-seo-content,.caramel-home-seo-content) h2:first-child,
:is(.latte-home-seo-content,.caramel-home-seo-content) h3:first-child,
:is(.latte-home-seo-content,.caramel-home-seo-content) h4:first-child {
margin-top: 0;
}
:is(.latte-home-seo-content,.caramel-home-seo-content) p {
margin: 0 0 18px;
}
:is(.latte-home-seo-content,.caramel-home-seo-content) ul,
:is(.latte-home-seo-content,.caramel-home-seo-content) ol {
margin: 12px 0 22px 22px;
}
:is(.latte-home-seo-content,.caramel-home-seo-content) li {
margin-bottom: 8px;
}
:is(.latte-home-seo-content,.caramel-home-seo-content) strong {
color:var(--color-neutral);
font-weight:800;
}
:is(.latte-home-seo-content,.caramel-home-seo-content) a {
color:var(--color-primary);
font-weight:700;
text-decoration: underline;
text-underline-offset: 3px;
}
:is(.latte-home-seo-content,.caramel-home-seo-content) blockquote {
margin: 24px 0;
padding: 16px 20px;
border-left:4px solid var(--color-primary);
border-radius:0 14px 14px 0;
background:var(--color-base-200);
color:var(--color-neutral);
}
@media (max-width: 700px) {
:is(.latte-home-seo-section,.caramel-home-seo-section) {
padding-top: 12px;
padding-bottom: 54px;
}
:is(.latte-home-seo-shell,.caramel-home-seo-shell) {
padding: 26px 20px;
border-radius:18px;
}
:is(.latte-home-seo-heading,.caramel-home-seo-heading) {
padding-bottom: 18px;
margin-bottom: 22px;
}
:is(.latte-home-seo-content,.caramel-home-seo-content) {
font-size: 14px;
line-height: 1.82;
}
:is(.latte-home-seo-content,.caramel-home-seo-content) h2 {
font-size: 22px;
}
:is(.latte-home-seo-content,.caramel-home-seo-content) h3 {
font-size: 18px;
}
}
/* =========================================================
PRODUCT IMAGE FIX — SQUARE SOURCE IMAGES
========================================================= */
@media (max-width: 700px) {
.store-product-media {
height: 330px !important;
padding: 24px !important;
}
.store-product-media img {
width: 88% !important;
height: 88% !important;
border-radius:22px !important;
}
:is(.latte-detail-media-box,.caramel-detail-media-box) {
min-height: 410px !important;
padding: 30px !important;
}
:is(.latte-detail-media-box,.caramel-detail-media-box) img {
max-width: 90% !important;
max-height: 350px !important;
border-radius:24px !important;
}
}
@media (max-width: 700px) {
:is(.latte-store-product-grid,.caramel-store-product-grid) {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 12px !important;
}
:is(.latte-store-product-card,.caramel-store-product-card) {
border-radius:18px !important;
}
.store-product-media {
height: 190px !important;
min-height: 190px !important;
padding: 14px !important;
}
.store-product-media img {
max-width: 100% !important;
max-height: 160px !important;
}
:is(.latte-store-product-body,.caramel-store-product-body) {
padding: 16px !important;
}
:is(.latte-store-product-body,.caramel-store-product-body) h3 {
font-size: 16px !important;
line-height: 1.3 !important;
}
:is(.latte-store-product-body,.caramel-store-product-body) p {
font-size: 12px !important;
line-height: 1.5 !important;
}
:is(.latte-price-main,.caramel-price-main) {
font-size: 18px !important;
}
:is(.latte-product-actions,.caramel-product-actions) {
gap: 7px !important;
}
:is(.latte-product-actions,.caramel-product-actions) .btn {
padding: 0 10px !important;
font-size: 11px !important;
}
}
:is(.latte-product-image-box,.caramel-product-image-box) {
width:100%;
aspect-ratio: 1 / 1;
padding: 14px;
background:var(--color-base-100);
border:1px solid var(--color-base-300);
border-radius:24px;
overflow:hidden;
display:flex;
align-items:center;
justify-content:center;
box-shadow:0 8px 25px color-mix(in oklab, var(--color-neutral) 6.0%, transparent),
inset 0 0 0 1px color-mix(in oklab, var(--color-base-300) 80.0%, transparent);
transition: .25s ease;
}
:is(.latte-product-image-box,.caramel-product-image-box) img {
width:100%;
height: 100%;
object-fit: contain;
border-radius:16px;
display:block;
}
:is(.latte-product-image-box,.caramel-product-image-box):hover {
border-color:var(--color-base-300);
box-shadow:0 14px 35px color-mix(in oklab, var(--color-neutral) 10.0%, transparent),
0 0 0 4px color-mix(in oklab, var(--color-primary) 5.0%, transparent);
transform: translateY(-3px);
}
@media (max-width: 700px) {
:is(.latte-product-image-box,.caramel-product-image-box) {
padding: 8px;
border-radius:16px;
}
:is(.latte-product-image-box,.caramel-product-image-box) img {
border-radius:11px;
}
}
/* MASAÜSTÜ - 4 ÜRÜN */
:is(.latte-store-product-grid,.caramel-store-product-grid) {
display:grid;
grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
gap: 20px;
}
/* TABLET - 3 ÜRÜN */
@media (max-width: 1100px) {
:is(.latte-store-product-grid,.caramel-store-product-grid) {
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
gap: 16px;
}
}
/* MOBİL - 2 ÜRÜN */
@media (max-width: 700px) {
:is(.latte-store-product-grid,.caramel-store-product-grid) {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 12px !important;
}
}
.nav-actions {
display:flex;
align-items:center;
gap: 8px;
}
.nav-static-link {
display:inline-flex;
align-items:center;
height: 42px;
padding: 0 13px;
color:var(--color-neutral);
font-size: 14px;
font-weight: 600;
border-radius:10px;
transition: .2s ease;
}
.nav-static-link:hover {
color:var(--color-primary);
background:var(--color-base-200);
}
.cart-link {
display:inline-flex;
align-items:center;
gap: 9px;
height: 44px;
padding: 0 10px 0 15px;
background:var(--color-base-100) !important;
color:var(--color-primary) !important;
border:1px solid color-mix(in oklab, var(--color-primary) 15.0%, transparent);
border-radius:14px;
box-shadow:0 7px 20px color-mix(in oklab, var(--color-neutral) 8.0%, transparent);
text-decoration:none;
transition: all .25s ease;
}
.cart-link:hover {
background:var(--color-base-200) !important;
transform: translateY(-2px);
box-shadow:0 10px 25px color-mix(in oklab, var(--color-neutral) 12.0%, transparent);
}
.cart-icon {
font-size: 18px;
line-height: 1;
}
.cart-text {
color:var(--color-neutral) !important;
font-size: 14px;
font-weight:700;
}
.cart-badge {
display:inline-flex;
align-items:center;
justify-content:center;
min-width: 25px;
height: 25px;
padding: 0 7px;
background:var(--color-primary) !important;
color:var(--color-neutral-content) !important;
border-radius:8px;
font-size: 12px;
font-weight:800;
line-height: 1;
box-shadow:0 4px 10px color-mix(in oklab, var(--color-primary) 25.0%, transparent);
}
/* Mobilde statik header linklerini gizle */
@media (max-width: 700px) {
.nav-static-link {
display: none !important;
}
}
@media (max-width: 992px) {
.category-drawer {
position: fixed !important;
top: 0 !important;
left: 0 !important;
height: 100dvh !important;
max-height: 100dvh !important;
overflow-y: auto !important;
overflow-x: hidden !important;
-webkit-overflow-scrolling: touch;
overscroll-behavior-y: contain;
padding-bottom: 50px !important;
}
.drawer-top {
position: sticky !important;
top: 0 !important;
z-index: 20;
background:var(--color-base-100);
}
}
.category-drawer::-webkit-scrollbar {
width: 4px;
}
.category-drawer::-webkit-scrollbar-track {
background:transparent;
}
.category-drawer::-webkit-scrollbar-thumb {
background:color-mix(in oklab, var(--color-primary) 32.0%, transparent);
border-radius:999px;
}
.category-drawer::-webkit-scrollbar-thumb:hover {
background:color-mix(in oklab, var(--color-primary) 65.0%, transparent);
}
/* ==========================================
MOBILE DRAWER TABS
========================================== */
.drawer-tabs {
display:grid;
grid-template-columns: 1fr 1fr;
gap: 5px;
margin: 14px 18px 18px;
padding: 5px;
background:var(--color-base-200);
border:1px solid var(--color-base-300);
border-radius:15px;
}
.drawer-tab {
appearance: none;
border:0;
height: 44px;
display:flex;
align-items:center;
justify-content:center;
background:transparent;
color:color-mix(in oklab, var(--color-base-content) 68%, var(--color-base-100));
border-radius:11px;
font-size: 13px;
font-weight:700;
cursor:pointer;
transition:
background .22s ease,
color .22s ease,
box-shadow .22s ease,
transform .22s ease;
}
.drawer-tab.active {
background:var(--color-base-100);
color:var(--color-primary);
box-shadow:0 4px 14px color-mix(in oklab, var(--color-neutral) 8.0%, transparent),
0 1px 2px color-mix(in oklab, var(--color-neutral) 4.0%, transparent);
}
.drawer-tab:active {
transform: scale(.98);
}
/* TAB İÇERİKLERİ */
.drawer-tab-panel {
display:none;
animation: drawerTabFade .22s ease;
}
.drawer-tab-panel.active {
display:block;
}
@keyframes drawerTabFade {
from {
opacity: 0;
transform: translateY(5px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* MENÜ OKLARI */
.drawer-arrow {
color:color-mix(in oklab, var(--color-base-content) 68%, var(--color-base-100));
transition: .2s ease;
}
.drawer-list a:hover .drawer-arrow {
color:var(--color-primary);
transform: translateX(3px);
}
/* SEPET SAYISI */
.drawer-cart-count {
min-width: 25px;
height: 25px;
padding: 0 7px;
display:inline-flex;
align-items:center;
justify-content:center;
background:var(--color-base-200);
color:var(--color-primary);
border-radius:8px;
font-size: 12px;
font-weight:800;
}
/* Hero görseli kaldırıldığı için alanı kompaktlaştır */
:is(.latte-hero,.caramel-hero) {
min-height: auto !important;
padding-bottom: 70px !important;
}
:is(.latte-hero,.caramel-hero) :is(.latte-grid-row,.caramel-row) {
margin-bottom: 0 !important;
}
:is(.latte-hero-content,.caramel-hero-content) {
max-width: 860px;
padding-bottom: 20px;
}
/* Mobil hamburger menü: çok kategori olduğunda kaydırılabilir */
.sidenav {
height: 100vh !important;
max-height: 100vh !important;
overflow-y: auto !important;
overflow-x: hidden !important;
-webkit-overflow-scrolling: touch;
overscroll-behavior: contain;
padding-bottom: 40px !important;
}
@media (max-width: 992px) {
:is(.latte-hero,.caramel-hero) {
padding-bottom: 45px !important;
}
:is(.latte-hero-content,.caramel-hero-content) {
width: 100% !important;
max-width: 100% !important;
}
}
/* Kategori ürün butonları düzeltme */
:is(.latte-product-actions,.caramel-product-actions) {
display: grid !important;
grid-template-columns: 1fr !important;
gap: 10px !important;
}
:is(.latte-product-actions,.caramel-product-actions) > a,
:is(.latte-product-actions,.caramel-product-actions) > form {
width: 100% !important;
grid-column: 1 / -1 !important;
}
:is(.latte-product-actions,.caramel-product-actions) .btn,
:is(.latte-product-actions,.caramel-product-actions) button {
width: 100% !important;
min-width: 0 !important;
padding: 0 20px !important;
white-space: nowrap !important;
text-align: center !important;
overflow: visible !important;
}
/* BLOG İÇİNDEKİLER */
:is(.latte-article-toc,.caramel-article-toc) {
max-width: 820px;
margin: 0 auto 28px;
background:var(--color-base-100);
border:1px solid var(--color-base-300);
border-radius:20px;
box-shadow:0 10px 35px color-mix(in oklab, var(--color-neutral) 6.0%, transparent);
overflow:hidden;
}
:is(.latte-toc-head,.caramel-toc-head) {
display:flex;
align-items:center;
justify-content:space-between;
gap: 20px;
padding: 20px 22px;
background:linear-gradient(135deg, var(--color-base-100), var(--color-base-100));
border-bottom:1px solid var(--color-base-300);
}
:is(.latte-toc-head,.caramel-toc-head) > div {
display:flex;
flex-direction:column;
gap: 3px;
}
:is(.latte-toc-label,.caramel-toc-label) {
color:var(--color-primary);
font-size: 10px;
font-weight:800;
letter-spacing: 1.5px;
}
:is(.latte-toc-head,.caramel-toc-head) strong {
color:var(--color-neutral);
font-size: 18px;
font-weight:800;
}
:is(.latte-toc-toggle,.caramel-toc-toggle) {
width: 38px;
height: 38px;
flex: 0 0 38px;
display:flex;
align-items:center;
justify-content:center;
border:1px solid var(--color-base-300);
border-radius:11px;
background:var(--color-base-100);
color:var(--color-primary);
font-size: 22px;
font-weight: 500;
cursor:pointer;
transition: .2s ease;
}
:is(.latte-toc-toggle,.caramel-toc-toggle):hover {
background:var(--color-base-200);
border-color:var(--color-base-300);
}
:is(.latte-toc-content,.caramel-toc-content) {
padding: 15px 22px 19px;
}
:is(.latte-toc-content,.caramel-toc-content) ol {
margin: 0;
padding: 0;
list-style: none;
counter-reset: toc;
}
:is(.latte-toc-content,.caramel-toc-content) li {
counter-increment: toc;
position:relative;
margin: 0;
border-bottom:1px solid var(--color-base-300);
}
:is(.latte-toc-content,.caramel-toc-content) li:last-child {
border-bottom:0;
}
:is(.latte-toc-content,.caramel-toc-content) li > a {
display:flex;
align-items:center;
gap: 10px;
padding: 11px 4px;
color:var(--color-neutral);
font-size: 14px;
font-weight: 600;
text-decoration:none;
transition: .2s ease;
}
:is(.latte-toc-content,.caramel-toc-content) li > a::before {
content: counter(toc, decimal-leading-zero);
min-width: 26px;
color:var(--color-primary);
font-size: 10px;
font-weight:800;
}
:is(.latte-toc-content,.caramel-toc-content) li > a:hover {
color:var(--color-primary);
padding-left: 8px;
}
/* H3 alt başlık */
:is(.latte-toc-content,.caramel-toc-content) .toc-sub > a {
padding-left: 28px;
color:color-mix(in oklab, var(--color-base-content) 68%, var(--color-base-100));
font-size: 13px;
}
:is(.latte-toc-content,.caramel-toc-content) .toc-sub > a::before {
opacity: .55;
}
/* TOC hedef başlık scroll */
:is(.latte-rich-content,.caramel-rich-content) h2[id],
:is(.latte-rich-content,.caramel-rich-content) h3[id] {
scroll-margin-top: 110px;
}
html {
scroll-behavior: smooth;
}
/* Kapalı */
:is(.latte-article-toc,.caramel-article-toc).collapsed :is(.latte-toc-content,.caramel-toc-content) {
display:none;
}
:is(.latte-article-toc,.caramel-article-toc).collapsed :is(.latte-toc-head,.caramel-toc-head) {
border-bottom:0;
}
/* MOBİL */
@media (max-width: 700px) {
:is(.latte-article-toc,.caramel-article-toc) {
margin-bottom: 20px;
border-radius:16px;
}
:is(.latte-toc-head,.caramel-toc-head) {
padding: 16px;
}
:is(.latte-toc-head,.caramel-toc-head) strong {
font-size: 16px;
}
:is(.latte-toc-content,.caramel-toc-content) {
padding: 10px 16px 14px;
}
:is(.latte-toc-content,.caramel-toc-content) li > a {
font-size: 13px;
padding: 10px 2px;
}
:is(.latte-toc-content,.caramel-toc-content) .toc-sub > a {
padding-left: 20px;
}
}
:is(.latte-category-description-scroll,.caramel-category-description-scroll) {
max-height: 250px;
overflow-y:auto;
overflow-x:hidden;
padding-right: 15px;
line-height: 1.7;
}
:is(.latte-category-description-scroll,.caramel-category-description-scroll)::-webkit-scrollbar {
width: 6px;
}
:is(.latte-category-description-scroll,.caramel-category-description-scroll)::-webkit-scrollbar-track {
background:var(--color-base-200);
border-radius:10px;
}
:is(.latte-category-description-scroll,.caramel-category-description-scroll)::-webkit-scrollbar-thumb {
background:var(--color-primary);
border-radius:10px;
}
:is(.latte-category-description-scroll,.caramel-category-description-scroll)::-webkit-scrollbar-thumb:hover {
background:var(--color-neutral);
}
/* Product package selector */
:is(.latte-package-selector,.caramel-package-selector) {
margin: 22px 0 20px;
padding: 16px;
border:1px solid var(--color-base-300);
border-radius:20px;
background:var(--color-base-100);
box-shadow:0 10px 34px color-mix(in oklab, var(--color-neutral) 4.5%, transparent);
width:100%;
box-sizing:border-box;
overflow:hidden;
}
:is(.latte-package-selector-head,.caramel-package-selector-head) {
display:flex;
align-items:center;
justify-content:space-between;
gap: 12px;
margin-bottom: 12px;
}
:is(.latte-package-selector-head,.caramel-package-selector-head) strong {
font-size: 17px;
line-height: 1.2;
color:var(--color-neutral);
font-weight:900;
}
:is(.latte-package-selector-head,.caramel-package-selector-head) span {
font-size: 12px;
line-height: 1.3;
color:color-mix(in oklab, var(--color-base-content) 68%, var(--color-base-100));
}
:is(.latte-package-options,.caramel-package-options) {
display:grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
width:100%;
}
.package-option {
position:relative;
display: block !important;
width: 100% !important;
min-width: 0;
margin: 0 !important;
cursor:pointer;
box-sizing:border-box;
}
.package-option input {
position: absolute !important;
opacity: 0 !important;
pointer-events: none;
}
.package-option input + :is(.latte-package-option-card,.caramel-package-option-card)::before,
.package-option input + :is(.latte-package-option-card,.caramel-package-option-card)::after {
display: none !important;
content: none !important;
}
:is(.latte-package-option-card,.caramel-package-option-card) {
display: grid !important;
grid-template-columns: minmax(0, 1fr) auto;
align-items:center;
gap: 12px;
width: 100% !important;
min-width: 0;
min-height: 82px;
padding: 13px 14px;
box-sizing:border-box;
border:1.5px solid var(--color-base-300);
border-radius:15px;
background:var(--color-base-100);
transition: border-color .18s ease, background .18s ease, box-shadow .18s ease, transform .18s ease;
overflow:hidden;
}
:is(.latte-package-option-left,.caramel-package-option-left),
:is(.latte-package-option-right,.caramel-package-option-right) {
min-width: 0;
display:flex;
flex-direction:column;
}
:is(.latte-package-option-left,.caramel-package-option-left) {
align-items:flex-start;
gap: 5px;
}
:is(.latte-package-option-right,.caramel-package-option-right) {
align-items: flex-end;
gap: 5px;
text-align: right;
}
:is(.latte-package-box-count,.caramel-package-box-count) {
display:inline-flex;
align-items:center;
min-height: 27px;
padding: 0 10px;
border-radius:999px;
background:var(--color-base-200);
color:var(--color-neutral);
font-size: 12px;
line-height: 1;
font-weight:900;
white-space: nowrap;
}
:is(.latte-package-unit-price,.caramel-package-unit-price) {
color:color-mix(in oklab, var(--color-base-content) 68%, var(--color-base-100));
font-size: 10px;
line-height: 1.25;
font-weight:700;
white-space: nowrap;
}
:is(.latte-package-option-card,.caramel-package-option-card) strong {
display:block;
color:var(--color-neutral);
font-size: 17px;
line-height: 1.1;
font-weight:900;
white-space: nowrap;
}
:is(.latte-package-saving,.caramel-package-saving),
:is(.latte-package-standard,.caramel-package-standard) {
display:inline-flex;
align-items:center;
justify-content:center;
max-width: 100%;
min-height: 21px;
padding: 0 7px;
border-radius:999px;
box-sizing:border-box;
font-size: 9px;
line-height: 1;
font-weight:800;
white-space: nowrap;
}
:is(.latte-package-saving,.caramel-package-saving) {
background:var(--color-base-200);
color:var(--color-success);
}
:is(.latte-package-standard,.caramel-package-standard) {
background:var(--color-base-200);
color:color-mix(in oklab, var(--color-base-content) 68%, var(--color-base-100));
}
.package-option:hover :is(.latte-package-option-card,.caramel-package-option-card) {
border-color:var(--color-base-300);
transform: translateY(-1px);
}
.package-option input:checked + :is(.latte-package-option-card,.caramel-package-option-card) {
border-color:var(--color-primary);
background:var(--color-base-200);
box-shadow:0 8px 22px color-mix(in oklab, var(--color-primary) 10.0%, transparent);
}
.package-option input:checked + :is(.latte-package-option-card,.caramel-package-option-card) :is(.latte-package-box-count,.caramel-package-box-count) {
background:var(--color-primary);
color:var(--color-neutral-content);
}
.package-option.disabled {
cursor: not-allowed;
opacity: .42;
}
.package-option.disabled :is(.latte-package-option-card,.caramel-package-option-card) {
background:var(--color-base-200);
box-shadow:none;
transform: none;
}
/* Ürün detay kolonunda kartların gereksiz daralmasını engeller */
:is(.latte-detail-info-box,.caramel-detail-info-box) :is(.latte-package-selector,.caramel-package-selector),
:is(.latte-detail-info-box,.caramel-detail-info-box) :is(.latte-package-options,.caramel-package-options),
:is(.latte-detail-info-box,.caramel-detail-info-box) .package-option,
:is(.latte-detail-info-box,.caramel-detail-info-box) :is(.latte-package-option-card,.caramel-package-option-card) {
max-width: none !important;
}
@media (max-width: 1180px) {
:is(.latte-package-options,.caramel-package-options) {
grid-template-columns: 1fr;
}
}
@media (max-width: 992px) {
:is(.latte-package-options,.caramel-package-options) {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 600px) {
:is(.latte-package-selector,.caramel-package-selector) {
padding: 13px;
border-radius:17px;
}
:is(.latte-package-selector-head,.caramel-package-selector-head) {
align-items:flex-start;
flex-direction:column;
gap: 3px;
}
:is(.latte-package-options,.caramel-package-options) {
grid-template-columns: 1fr;
gap: 8px;
}
:is(.latte-package-option-card,.caramel-package-option-card) {
min-height: 76px;
padding: 12px 13px;
}
:is(.latte-package-option-card,.caramel-package-option-card) strong {
font-size: 16px;
}
}
@media (max-width: 390px) {
:is(.latte-package-option-card,.caramel-package-option-card) {
gap: 8px;
padding: 11px;
}
:is(.latte-package-unit-price,.caramel-package-unit-price) {
font-size: 9px;
}
:is(.latte-package-option-card,.caramel-package-option-card) strong {
font-size: 15px;
}
:is(.latte-package-saving,.caramel-package-saving),
:is(.latte-package-standard,.caramel-package-standard) {
font-size: 8px;
padding: 0 6px;
}
}
/* =========================================================
ÜRÜN ARAMA
========================================================= */
.header-search {
width: 258px;
height: 42px;
margin: 0;
padding: 4px 4px 4px 13px;
flex: 0 0 258px;
display:flex;
align-items:center;
gap: 9px;
border:1px solid var(--color-base-300);
border-radius:999px;
background:var(--color-base-100);
box-shadow:0 4px 16px color-mix(in oklab, var(--color-neutral) 4.5%, transparent);
transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.header-search:focus-within {
border-color:color-mix(in oklab, var(--color-primary) 42.0%, transparent);
box-shadow:0 0 0 4px color-mix(in oklab, var(--color-primary) 7.0%, transparent), 0 6px 18px color-mix(in oklab, var(--color-neutral) 6.0%, transparent);
}
.header-search-icon {
flex: 0 0 18px;
width: 18px;
height: 18px;
display:inline-flex;
align-items:center;
justify-content:center;
color:color-mix(in oklab, var(--color-base-content) 68%, var(--color-base-100));
line-height: 1;
}
.header-search input[type="search"] {
appearance: none;
-webkit-appearance: none;
box-sizing: border-box !important;
flex: 1 1 auto;
min-width: 0;
width: auto !important;
height: 32px !important;
margin: 0 !important;
padding: 0 !important;
border:0 !important;
border-bottom:0 !important;
outline:0 !important;
background:transparent !important;
color:var(--color-neutral) !important;
box-shadow:none !important;
font-size: 13px !important;
font-weight: 600;
line-height: 32px !important;
}
.header-search input[type="search"]:focus {
border:0 !important;
border-bottom:0 !important;
box-shadow:none !important;
outline:0 !important;
}
.header-search input[type="search"]::-webkit-search-cancel-button {
display:none;
}
.header-search input[type="search"]::placeholder {
color:color-mix(in oklab, var(--color-base-content) 68%, var(--color-base-100));
font-weight: 500;
}
.header-search button {
flex: 0 0 auto;
height: 32px;
min-width: 55px;
padding: 0 15px;
border:0;
border-radius:999px;
background:var(--color-primary);
color:var(--color-neutral-content);
font-size: 12px;
font-weight:800;
line-height: 32px;
letter-spacing: 0;
text-transform: none;
box-shadow:none;
cursor:pointer;
transition: background .2s ease, transform .2s ease;
}
.header-search button:hover {
background:var(--color-info);
}
.header-search button:active {
transform: scale(.97);
}
.drawer-search {
display:flex;
gap: 8px;
padding: 14px 18px 6px;
margin: 0;
}
.drawer-search input[type="search"] {
box-sizing: border-box !important;
min-width: 0;
height: 46px !important;
margin: 0 !important;
padding: 0 14px !important;
border:1px solid var(--color-base-300) !important;
border-radius:13px !important;
background:var(--color-base-100) !important;
box-shadow:none !important;
}
.drawer-search input[type="search"]:focus {
border-color:var(--color-primary) !important;
box-shadow:0 0 0 3px color-mix(in oklab, var(--color-primary) 8.0%, transparent) !important;
}
.drawer-search button {
flex: 0 0 auto;
height: 46px;
padding: 0 17px;
border:0;
border-radius:13px;
background:var(--color-primary);
color:var(--color-neutral-content);
font-weight:800;
cursor:pointer;
}
:is(.latte-search-page-top,.caramel-search-page-top) {
padding-bottom: 38px;
}
:is(.latte-search-page-form,.caramel-search-page-form) {
display:flex;
align-items:center;
gap: 10px;
width: min(720px, 100%);
margin: 26px 0 0;
padding: 8px;
border:1px solid var(--color-base-300);
border-radius:18px;
background:var(--color-base-100);
box-shadow:0 12px 35px color-mix(in oklab, var(--color-neutral) 7.0%, transparent);
}
:is(.latte-search-page-form,.caramel-search-page-form) input[type="search"] {
box-sizing: border-box !important;
min-width: 0;
height: 48px !important;
margin: 0 !important;
padding: 0 14px !important;
border:0 !important;
background:transparent !important;
box-shadow:none !important;
color:var(--color-neutral);
font-size: 16px !important;
}
:is(.latte-search-page-form,.caramel-search-page-form) button {
flex: 0 0 auto;
height: 48px;
border-radius:12px;
padding: 0 27px;
}
:is(.latte-search-help,.caramel-search-help) {
margin: 14px 0 0;
color:color-mix(in oklab, var(--color-base-content) 68%, var(--color-base-100));
}
:is(.latte-search-results-section,.caramel-search-results-section) {
padding-top: 34px;
}
:is(.latte-search-empty-box,.caramel-search-empty-box) {
text-align:center;
padding: 55px 24px;
}
:is(.latte-search-empty-icon,.caramel-search-empty-icon) {
display:grid;
place-items: center;
width: 62px;
height: 62px;
margin: 0 auto 15px;
border-radius:18px;
background:var(--color-base-200);
color:var(--color-primary);
font-size: 32px;
font-weight:800;
}
@media (max-width: 1100px) {
.header-search {
display:none;
}
}
@media (min-width: 1101px) {
.drawer-search {
display:none;
}
}
@media (max-width: 600px) {
:is(.latte-search-page-form,.caramel-search-page-form) {
gap: 6px;
padding: 6px;
border-radius:15px;
}
:is(.latte-search-page-form,.caramel-search-page-form) input[type="search"] {
height: 44px !important;
font-size: 15px !important;
padding-left: 10px !important;
}
:is(.latte-search-page-form,.caramel-search-page-form) button {
height: 44px;
padding: 0 18px;
}
}
/* =========================================================
HEADER SEARCH MODAL V3
========================================================= */
.nav-search-trigger {
display:inline-flex;
align-items:center;
justify-content:center;
gap: 8px;
height: 42px;
margin: 0;
padding: 0 16px;
border:1px solid var(--line);
border-radius:999px;
background:var(--color-base-100);
color:var(--text);
font: inherit;
font-size: 14px;
font-weight:800;
line-height: 1;
cursor:pointer;
box-shadow:none;
transition: border-color .2s ease, color .2s ease, background .2s ease, transform .2s ease;
}
.nav-search-trigger:hover {
color:var(--color-primary);
border-color:var(--color-base-300);
background:var(--color-base-200);
}
.nav-search-trigger:active { transform: translateY(1px); }
.nav-search-icon { width:18px; height:18px; display:inline-flex; align-items:center; justify-content:center; }
.nav-search-icon svg { display:block; }
/* Eski header arama kutusunu yeni popup sisteminde kullanma */
.header-search { display:none !important; }
.product-search-modal {
position:fixed;
inset: 0;
z-index: 2500;
display:flex;
align-items:flex-start;
justify-content:center;
padding: 105px 20px 30px;
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: opacity .22s ease, visibility .22s ease;
}
.product-search-modal.open {
opacity: 1;
visibility: visible;
pointer-events: auto;
}
.product-search-backdrop {
position:absolute;
inset: 0;
background:color-mix(in oklab, var(--color-neutral) 48.0%, transparent);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
}
.product-search-dialog {
position:relative;
z-index: 1;
width: min(680px, 100%);
padding: 34px;
border:1px solid color-mix(in oklab, var(--color-base-300) 90.0%, transparent);
border-radius:26px;
background:color-mix(in oklab, var(--color-base-100) 98.0%, transparent);
box-shadow:0 30px 90px color-mix(in oklab, var(--color-neutral) 22.0%, transparent);
transform: translateY(-14px) scale(.985);
transition: transform .24s ease;
}
.product-search-modal.open .product-search-dialog { transform: translateY(0) scale(1); }
.product-search-close {
position:absolute;
top: 16px;
right: 16px;
width: 38px;
height: 38px;
padding: 0;
border:0;
border-radius:50%;
background:var(--color-base-200);
color:var(--color-neutral);
font-size: 25px;
line-height: 38px;
cursor:pointer;
transition: background .2s ease, color .2s ease;
}
.product-search-close:hover { background:var(--color-base-200); color:var(--color-primary); }
.product-search-kicker {
margin-bottom: 8px;
color:var(--color-primary);
font-size: 10px;
font-weight:900;
letter-spacing: 1.8px;
}
.product-search-dialog h2 {
margin: 0 48px 7px 0;
color:var(--color-neutral);
font-size: clamp(27px, 4vw, 38px);
line-height: 1.08;
font-weight:900;
letter-spacing: -1.2px;
}
.product-search-dialog > p {
margin: 0 0 22px;
color:color-mix(in oklab, var(--color-base-content) 68%, var(--color-base-100));
font-size: 14px;
line-height: 1.6;
}
.product-search-form {
display:flex;
align-items:center;
gap: 10px;
width:100%;
margin: 0;
padding: 7px 7px 7px 16px;
border:1px solid var(--color-base-300);
border-radius:17px;
background:var(--color-base-100);
box-shadow:0 10px 28px color-mix(in oklab, var(--color-neutral) 6.0%, transparent);
transition: border-color .2s ease, box-shadow .2s ease;
}
.product-search-form:focus-within {
border-color:color-mix(in oklab, var(--color-primary) 52.0%, transparent);
box-shadow:0 0 0 4px color-mix(in oklab, var(--color-primary) 8.0%, transparent), 0 12px 30px color-mix(in oklab, var(--color-neutral) 7.0%, transparent);
}
.product-search-form-icon {
flex: 0 0 22px;
width: 22px;
height: 22px;
display:inline-flex;
color:color-mix(in oklab, var(--color-base-content) 68%, var(--color-base-100));
}
.product-search-form input[type="search"] {
appearance: none;
-webkit-appearance: none;
flex: 1 1 auto;
min-width: 0;
width: auto !important;
height: 46px !important;
margin: 0 !important;
padding: 0 !important;
border:0 !important;
border-bottom:0 !important;
outline:0 !important;
background:transparent !important;
box-shadow:none !important;
color:var(--color-neutral) !important;
font-size: 16px !important;
font-weight: 650;
}
.product-search-form input[type="search"]:focus { border:0 !important; box-shadow:none !important; }
.product-search-form input[type="search"]::-webkit-search-cancel-button { display:none; }
.product-search-form input[type="search"]::placeholder { color:color-mix(in oklab, var(--color-base-content) 68%, var(--color-base-100)); font-weight:500; }
.product-search-form button {
flex: 0 0 auto;
height: 46px;
padding: 0 24px;
border:0;
border-radius:12px;
background:var(--color-primary);
color:var(--color-neutral-content);
font-size: 13px;
font-weight:900;
text-transform: none;
cursor:pointer;
box-shadow:0 8px 20px color-mix(in oklab, var(--color-primary) 18.0%, transparent);
transition: background .2s ease, transform .2s ease;
}
.product-search-form button:hover { background:var(--color-info); }
.product-search-form button:active { transform:scale(.98); }
.product-search-hint {
margin-top: 12px;
color:color-mix(in oklab, var(--color-base-content) 68%, var(--color-base-100));
font-size: 11px;
font-weight: 600;
}
body.search-modal-open { overflow:hidden; }
@media (max-width: 992px) {
.nav-search-trigger { width:42px; padding:0; border-radius:50%; }
.nav-search-text { display:none; }
}
@media (max-width: 700px) {
.nav-search-trigger { height:42px; margin-top:9px; }
.product-search-modal { align-items:center; padding:20px 14px; }
.product-search-dialog { padding:27px 20px 22px; border-radius:22px; }
.product-search-dialog h2 { font-size:28px; }
.product-search-dialog > p { font-size:13px; margin-bottom:18px; }
.product-search-form { gap:7px; padding:6px 6px 6px 13px; border-radius:15px; }
.product-search-form input[type="search"] { height:44px !important; font-size:15px !important; }
.product-search-form button { height:44px; padding:0 18px; border-radius:11px; }
}
:is(.latte-home-category-row,.caramel-home-category-row) {
margin: 0 0 70px;
}
:is(.latte-home-category-head,.caramel-home-category-head) {
display:flex;
align-items: end;
justify-content:space-between;
gap: 20px;
margin-bottom: 22px;
}
:is(.latte-home-category-title,.caramel-home-category-title) {
margin: 4px 0 0;
color:var(--color-neutral);
font-size: 30px;
font-weight:900;
letter-spacing: -1px;
}
:is(.latte-home-category-all,.caramel-home-category-all) {
color:var(--color-primary);
font-size: 14px;
font-weight:800;
white-space: nowrap;
}
:is(.latte-category-carousel-wrap,.caramel-category-carousel-wrap) {
position:relative;
}
:is(.latte-category-carousel,.caramel-category-carousel) {
display:flex;
gap: 18px;
overflow-x: auto;
overflow-y: hidden;
scroll-behavior: smooth;
scroll-snap-type: x mandatory;
scrollbar-width: none;
padding: 4px 2px 18px;
}
:is(.latte-category-carousel,.caramel-category-carousel)::-webkit-scrollbar {
display:none;
}
:is(.latte-carousel-product-card,.caramel-carousel-product-card) {
flex: 0 0 calc((100% - 72px) / 5);
min-width: 0;
scroll-snap-align: start;
background:var(--color-base-100);
border:1px solid var(--color-base-300);
border-radius:22px;
overflow:hidden;
box-shadow:0 10px 28px color-mix(in oklab, var(--color-neutral) 5.5%, transparent);
transition: .25s ease;
}
:is(.latte-carousel-product-card,.caramel-carousel-product-card):hover {
transform: translateY(-4px);
border-color:var(--color-base-300);
box-shadow:0 16px 38px color-mix(in oklab, var(--color-neutral) 10.0%, transparent);
}
:is(.latte-carousel-product-body,.caramel-carousel-product-body) {
padding: 16px;
}
:is(.latte-carousel-product-body,.caramel-carousel-product-body) h3 {
margin: 0 0 10px;
font-size: 15px;
font-weight:800;
line-height: 1.35;
}
:is(.latte-carousel-product-body,.caramel-carousel-product-body) h3 a {
color:var(--color-neutral);
}
:is(.latte-carousel-price,.caramel-carousel-price) {
display:flex;
align-items:center;
gap: 8px;
flex-wrap:wrap;
margin-bottom: 14px;
}
:is(.latte-carousel-price,.caramel-carousel-price) strong {
color:var(--color-primary);
font-size: 17px;
}
:is(.latte-carousel-price,.caramel-carousel-price) del {
color:color-mix(in oklab, var(--color-base-content) 68%, var(--color-base-100));
font-size: 12px;
}
:is(.latte-carousel-card-actions,.caramel-carousel-card-actions) {
display:grid;
grid-template-columns: .88fr 1.12fr;
gap: 9px;
margin-top: 2px;
}
:is(.latte-carousel-card-actions,.caramel-carousel-card-actions) form {
margin: 0;
}
:is(.latte-carousel-detail-btn,.caramel-carousel-detail-btn),
:is(.latte-carousel-cart-btn,.caramel-carousel-cart-btn) {
width:100%;
min-width: 0;
height: 42px;
display:inline-flex;
align-items:center;
justify-content:center;
gap: 7px;
border-radius:12px;
font-size: 12px;
font-weight:800;
line-height: 1;
text-decoration:none;
cursor:pointer;
transition: all .22s ease;
}
:is(.latte-carousel-detail-btn,.caramel-carousel-detail-btn) {
color:var(--color-neutral);
background:var(--color-base-100);
border:1px solid var(--color-base-300);
}
:is(.latte-carousel-detail-btn,.caramel-carousel-detail-btn):hover {
color:var(--color-primary);
background:var(--color-base-200);
border-color:var(--color-base-300);
transform: translateY(-1px);
box-shadow:0 7px 16px color-mix(in oklab, var(--color-neutral) 7.0%, transparent);
}
:is(.latte-carousel-cart-btn,.caramel-carousel-cart-btn) {
color:var(--color-neutral-content);
background:linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary) 100%);
border:1px solid transparent;
box-shadow:0 8px 18px color-mix(in oklab, var(--color-primary) 22.0%, transparent);
}
:is(.latte-carousel-cart-btn,.caramel-carousel-cart-btn):hover {
transform: translateY(-1px);
box-shadow:0 11px 24px color-mix(in oklab, var(--color-primary) 30.0%, transparent);
}
:is(.latte-carousel-cart-btn,.caramel-carousel-cart-btn):active,
:is(.latte-carousel-detail-btn,.caramel-carousel-detail-btn):active {
transform: translateY(0);
}
:is(.latte-carousel-action-icon,.caramel-carousel-action-icon) {
display:inline-flex;
align-items:center;
justify-content:center;
width: 20px;
height: 20px;
border-radius:7px;
font-size: 13px;
font-weight:900;
line-height: 1;
}
:is(.latte-carousel-detail-btn,.caramel-carousel-detail-btn) :is(.latte-carousel-action-icon,.caramel-carousel-action-icon) {
background:var(--color-base-100);
color:var(--color-primary);
box-shadow:inset 0 0 0 1px var(--color-base-300);
}
:is(.latte-carousel-cart-btn,.caramel-carousel-cart-btn) :is(.latte-carousel-action-icon,.caramel-carousel-action-icon) {
background:color-mix(in oklab, var(--color-base-100) 16.0%, transparent);
color:var(--color-neutral-content);
}
@media (max-width: 640px) {
:is(.latte-carousel-detail-btn,.caramel-carousel-detail-btn),
:is(.latte-carousel-cart-btn,.caramel-carousel-cart-btn) {
height: 40px;
border-radius:11px;
font-size: 11px;
gap: 6px;
}
:is(.latte-carousel-action-icon,.caramel-carousel-action-icon) {
width: 18px;
height: 18px;
font-size: 12px;
}
}
:is(.latte-carousel-arrow,.caramel-carousel-arrow) {
position:absolute;
top: 50%;
z-index: 5;
width: 42px;
height: 42px;
display:flex;
align-items:center;
justify-content:center;
transform: translateY(-50%);
border:1px solid var(--color-base-300);
border-radius:50%;
background:color-mix(in oklab, var(--color-base-100) 95.0%, transparent);
color:var(--color-primary);
font-size: 28px;
line-height: 1;
cursor:pointer;
box-shadow:0 8px 24px color-mix(in oklab, var(--color-neutral) 12.0%, transparent);
transition: .2s ease;
}
:is(.latte-carousel-arrow,.caramel-carousel-arrow):hover {
background:var(--color-primary);
border-color:var(--color-primary);
color:var(--color-neutral-content);
}
:is(.latte-carousel-prev,.caramel-carousel-prev) {
left: -20px;
}
:is(.latte-carousel-next,.caramel-carousel-next) {
right: -20px;
}
@media (max-width: 1200px) {
:is(.latte-carousel-product-card,.caramel-carousel-product-card) {
flex-basis: calc((100% - 54px) / 4);
}
}
@media (max-width: 900px) {
:is(.latte-carousel-product-card,.caramel-carousel-product-card) {
flex-basis: calc((100% - 36px) / 3);
}
}
@media (max-width: 640px) {
:is(.latte-home-category-row,.caramel-home-category-row) {
margin-bottom: 48px;
}
:is(.latte-home-category-head,.caramel-home-category-head) {
align-items:center;
}
:is(.latte-home-category-title,.caramel-home-category-title) {
font-size: 23px;
}
:is(.latte-carousel-product-card,.caramel-carousel-product-card) {
flex: 0 0 47%;
}
:is(.latte-category-carousel,.caramel-category-carousel) {
gap: 12px;
}
:is(.latte-carousel-arrow,.caramel-carousel-arrow) {
display:none;
}
}
.wa-container{
position:fixed;
right:24px;
bottom:24px;
z-index:999999;
font-family:Arial,Helvetica,sans-serif;
line-height:1.25;
}
.wa-float-btn{
width:60px;
height:60px;
border:0;
border-radius:50%;
padding:0;
display:flex;
align-items:center;
justify-content:center;
cursor:pointer;
box-shadow:0 12px 30px color-mix(in oklab, var(--color-neutral) 20.0%, transparent);
transition:transform .22s ease,box-shadow .22s ease;
}
.wa-float-btn:hover{
transform:translateY(-3px) scale(1.03);
box-shadow:0 16px 36px color-mix(in oklab, var(--color-neutral) 25.0%, transparent);
}
.wa-float-btn img{
width:34px;
height:34px;
display:block;
}
.wa-chat-popup{
position:absolute;
right:0;
bottom:78px;
width:320px;
max-width:calc(100vw - 32px);
background:var(--color-base-100);
border:1px solid color-mix(in oklab, var(--color-neutral) 8.0%, transparent);
border-radius:22px;
overflow:hidden;
box-shadow:0 24px 70px color-mix(in oklab, var(--color-neutral) 20.0%, transparent);
opacity:0;
visibility:hidden;
transform:translateY(14px) scale(.98);
transform-origin:bottom right;
transition:.22s ease;
}
.wa-chat-popup.show-popup{
opacity:1;
visibility:visible;
transform:translateY(0) scale(1);
}
.wa-header{
display:flex;
align-items:center;
gap:12px;
padding:16px;
color:var(--color-neutral-content);
}
.wa-avatar-wrapper{
position:relative;
width:42px;
height:42px;
flex:0 0 42px;
}
.wa-avatar-img{
width:42px;
height:42px;
object-fit:cover;
border-radius:50%;
display:block;
background:var(--color-base-100);
border:2px solid color-mix(in oklab, var(--color-base-300) 75.0%, transparent);
}
.wa-online-dot{
position:absolute;
right:-1px;
bottom:-1px;
width:12px;
height:12px;
border-radius:50%;
background:var(--color-success);
border:2px solid var(--color-base-300);
}
.wa-online-dot.offline{background:var(--color-error)}
.wa-info{
min-width:0;
display:flex;
flex-direction:column;
gap:3px;
}
.wa-name{
color:var(--color-neutral-content);
font-size:15px;
font-weight:800;
}
.wa-status{
color:color-mix(in oklab, var(--color-neutral-content) 88.0%, transparent);
font-size:12px;
}
.wa-close-btn{
margin-left:auto;
width:34px;
height:34px;
border:0;
border-radius:10px;
background:color-mix(in oklab, var(--color-base-100) 12.0%, transparent);
color:var(--color-neutral-content);
font-size:24px;
line-height:1;
cursor:pointer;
}
.wa-body{
padding:22px 18px 28px;
background:radial-gradient(circle at 20% 20%,color-mix(in oklab, var(--color-base-100) 35.0%, transparent),transparent 26%),
var(--color-base-200);
}
.wa-msg-bubble{
position:relative;
max-width:88%;
background:var(--color-base-100);
padding:12px 13px 8px;
border-radius:5px 15px 15px 15px;
box-shadow:0 4px 12px color-mix(in oklab, var(--color-neutral) 7.0%, transparent);
}
.wa-msg-text{
color:var(--color-neutral);
font-size:14px;
line-height:1.5;
}
.wa-msg-time{
display:block;
margin-top:5px;
color:color-mix(in oklab, var(--color-base-content) 68%, var(--color-base-100));
font-size:10px;
text-align:right;
}
.wa-footer{
padding:14px;
background:var(--color-base-100);
}
.wa-send-btn{
min-height:44px;
display:flex;
align-items:center;
justify-content:center;
border-radius:13px;
color:var(--color-neutral-content) !important;
text-decoration:none;
font-size:13px;
font-weight:800;
box-shadow:0 8px 20px color-mix(in oklab, var(--color-neutral) 10.0%, transparent);
}
.wa-send-btn.offline{
background:var(--color-base-200);
color:var(--color-neutral-content);
cursor:not-allowed;
}
@media(max-width:640px){
.wa-container{right:16px;bottom:16px}
.wa-float-btn{width:56px;height:56px}
.wa-float-btn img{width:31px;height:31px}
.wa-chat-popup{bottom:72px;width:min(320px,calc(100vw - 32px))}
}
.product-shipping-notice {
display:flex;
align-items:center;
gap: 13px;
margin: 17px 0 20px;
padding: 14px 16px;
background:var(--color-base-200);
border:1px solid var(--color-base-300);
border-radius:14px;
}
.product-shipping-notice.is-free {
background:var(--color-base-200);
border-color:var(--color-base-300);
}
:is(.latte-product-shipping-icon,.caramel-product-shipping-icon) {
width: 40px;
height: 40px;
min-width: 40px;
display:flex;
align-items:center;
justify-content:center;
border-radius:11px;
background:var(--color-primary);
color:var(--color-neutral-content);
}
.product-shipping-notice.is-free :is(.latte-product-shipping-icon,.caramel-product-shipping-icon) {
background:var(--color-success);
}
:is(.latte-product-shipping-icon,.caramel-product-shipping-icon) i {
font-size: 21px;
}
:is(.latte-product-shipping-copy,.caramel-product-shipping-copy) {
flex: 1;
min-width: 0;
}
:is(.latte-product-shipping-copy,.caramel-product-shipping-copy) strong {
display:block;
font-size: 14px;
font-weight:800;
color:var(--color-base-content);
}
:is(.latte-product-shipping-copy,.caramel-product-shipping-copy) small {
display:block;
margin-top: 3px;
font-size: 12px;
color:color-mix(in oklab, var(--color-base-content) 68%, var(--color-base-100));
}
:is(.latte-product-shipping-progress,.caramel-product-shipping-progress) {
width:100%;
height: 5px;
margin-top: 9px;
overflow:hidden;
border-radius:99px;
background:var(--color-base-200);
}
:is(.latte-product-shipping-progress,.caramel-product-shipping-progress) span {
display:block;
height: 100%;
border-radius:inherit;
background:var(--color-primary);
transition: width .25s ease;
}
.product-shipping-notice.is-free
:is(.latte-product-shipping-progress,.caramel-product-shipping-progress) span {
background:var(--color-success);
}
/* ========================================
CİMER / SAHTE İLAÇ BİLDİRİM ALANI
======================================== */
.medicine-report {
padding-top: 4px;
padding-bottom: 10px;
}
.medicine-report-card {
background:var(--color-error);
border-radius:18px;
overflow:hidden;
margin-top: 0;
box-shadow:0 5px 18px color-mix(in oklab, var(--color-neutral) 14.0%, transparent);
}
.medicine-report-content {
padding: 20px 24px;
}
/* ÜST ETİKET */
.medicine-report-label {
display:inline-block;
background:color-mix(in oklab, var(--color-base-100) 15.0%, transparent);
color:var(--color-neutral-content);
padding: 5px 10px;
border-radius:20px;
font-size: 11px;
font-weight: 600;
letter-spacing: 0.3px;
margin-bottom: 9px;
}
/* BAŞLIK */
.medicine-report-title {
color:var(--color-neutral-content);
font-weight:700;
margin: 2px 0 8px;
line-height: 1.35;
}
.top-support-bar {
background:linear-gradient(90deg, var(--color-neutral) 0%, var(--color-neutral) 100%);
color:var(--color-neutral-content);
font-size: 16px;
padding: 12px 0;
border-bottom:1px solid color-mix(in oklab, var(--color-base-300) 8.0%, transparent);
}
.top-support-bar :is(.container,.caramel-container) {
display:flex;
align-items:center;
justify-content:space-between;
gap: 12px;
}
.support-info {
display:flex;
align-items:center;
gap: 10px;
flex-wrap:wrap;
}
.support-label {
opacity: .85;
}
.support-number {
color:var(--color-neutral-content);
font-size: 18px;
font-weight:700;
letter-spacing: .3px;
text-decoration:none;
}
.support-number:hover {
color:var(--color-warning);
}
.support-call-btn {
display:inline-flex;
align-items:center;
gap: 6px;
margin-left: auto;
padding: 9px 26px;
border-radius:999px;
background:var(--color-success);
color:var(--color-neutral-content);
font-size: 15px;
font-weight:700;
text-decoration:none;
box-shadow:0 4px 14px color-mix(in oklab, var(--color-success) 35.0%, transparent);
transition: background .2s ease, transform .2s ease, box-shadow .2s ease;
}
.support-call-btn:hover,
.support-call-btn:focus-visible {
background:var(--color-success);
transform: translateY(-1px);
box-shadow:0 6px 18px color-mix(in oklab, var(--color-success) 45.0%, transparent);
}
@media (max-width: 600px) {
.top-support-bar {
font-size: 13px;
padding: 10px 0;
}
.support-number {
font-size: 15px;
}
.support-call-btn {
padding: 8px 20px;
font-size: 14px;
}
.support-label {
font-size: 12px; }
.support-info {
gap: 2px 8px;
}
}
/* Keep icon dimensions stable while the existing icon font loads. */
.material-icons {
font-family: 'Material Icons';
font-weight: normal;
font-style: normal;
font-size: 24px;
display: inline-block;
line-height: 1;
text-transform: none;
letter-spacing: normal;
white-space: nowrap;
direction: ltr;
font-feature-settings: 'liga';
-webkit-font-smoothing: antialiased;
max-width: 1em;
overflow: hidden;
vertical-align: middle;
flex-shrink: 0;
}
:is(.latte-home-blog-section,.caramel-home-blog-section) {
background:var(--color-base-100);
}
:is(.latte-home-blog-grid,.caramel-home-blog-grid) {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 24px;
margin-top: 28px;
}
:is(.latte-home-blog-card,.caramel-home-blog-card) {
overflow: hidden;
background:var(--color-base-100);
border:1px solid var(--color-base-300);
border-radius:24px;
box-shadow:0 14px 40px color-mix(in oklab, var(--color-neutral) 6.0%, transparent);
transition: transform .25s ease, box-shadow .25s ease;
}
:is(.latte-home-blog-card,.caramel-home-blog-card):hover {
transform: translateY(-5px);
box-shadow:0 20px 50px color-mix(in oklab, var(--color-neutral) 10.0%, transparent);
}
:is(.latte-home-blog-media,.caramel-home-blog-media) {
display: block;
width: 100%;
aspect-ratio: 16 / 10;
overflow: hidden;
background:var(--color-base-200);
}
:is(.latte-home-blog-media,.caramel-home-blog-media) img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform .35s ease;
}
:is(.latte-home-blog-card,.caramel-home-blog-card):hover :is(.latte-home-blog-media,.caramel-home-blog-media) img {
transform: scale(1.035);
}
:is(.latte-home-blog-placeholder,.caramel-home-blog-placeholder) {
width: 100%;
height: 100%;
display: grid;
place-items: center;
background:linear-gradient(135deg, var(--color-base-200) 0%, var(--color-base-200) 100%);
color:var(--color-primary);
font-size: 18px;
font-weight: 900;
letter-spacing: -0.5px;
}
:is(.latte-home-blog-body,.caramel-home-blog-body) {
padding: 24px;
}
:is(.latte-home-blog-meta,.caramel-home-blog-meta) {
margin-bottom: 10px;
color:var(--color-primary);
font-size: 12px;
font-weight: 800;
letter-spacing: 1.2px;
}
:is(.latte-home-blog-body,.caramel-home-blog-body) h3 {
margin: 0 0 12px;
font-size: 22px;
line-height: 1.25;
font-weight: 900;
}
:is(.latte-home-blog-body,.caramel-home-blog-body) h3 a {
color:var(--color-neutral);
}
:is(.latte-home-blog-body,.caramel-home-blog-body) p {
min-height: 72px;
margin: 0 0 18px;
color:color-mix(in oklab, var(--color-base-content) 68%, var(--color-base-100));
line-height: 1.7;
}
:is(.latte-home-blog-link,.caramel-home-blog-link) {
display: inline-flex;
align-items: center;
gap: 8px;
color:var(--color-primary);
font-weight: 800;
}
:is(.latte-home-blog-all,.caramel-home-blog-all) {
margin-top: 30px;
text-align: center;
}
@media (max-width: 992px) {
:is(.latte-home-blog-grid,.caramel-home-blog-grid) {
grid-template-columns: 1fr 1fr;
}
}
@media (max-width: 640px) {
:is(.latte-home-blog-grid,.caramel-home-blog-grid) {
grid-template-columns: 1fr;
gap: 18px;
}
:is(.latte-home-blog-body,.caramel-home-blog-body) {
padding: 20px;
}
:is(.latte-home-blog-body,.caramel-home-blog-body) p {
min-height: 0;
}
}
/* Editorial storefront: soft lilac, deep purple and lavender. */
:root { --blue:var(--color-primary); --blue-dark:var(--color-secondary); --blue-soft:var(--color-base-200); --navy:var(--color-neutral); --text:var(--color-base-content); --muted:var(--color-base-content); --line:var(--color-base-300); --paper:var(--color-base-100); --accent:var(--color-accent); }
html { scroll-padding-top:130px; }
body { background:var(--paper); color:var(--text); padding-top:80px; font-family:Arial,Helvetica,sans-serif; }
body:has(.top-support-bar) { padding-top:112px; }
:is(.container,.caramel-container) { width:calc(100% - 80px); max-width:1240px; }
a { color:var(--blue); }
::selection { background:var(--accent); color:var(--navy); }
.top-support-bar { position:fixed; inset:0 0 auto; height:32px; padding:0; z-index:1001; background:var(--navy); border:0; }
.top-support-bar :is(.container,.caramel-container) { height:32px; }
.support-label,.support-number { font-size:11px; font-weight:500; letter-spacing:.25px; }
.support-call-btn { padding:0; height:auto; font-size:11px; border-radius:0; background:none; color:var(--accent); box-shadow:none; }
.support-call-btn:hover { background:none; box-shadow:none; color:var(--color-neutral-content); transform:none; }
body .store-nav { top:0; height:80px; line-height:normal; background:color-mix(in oklab, var(--color-base-200) 96.08%, transparent); border-bottom:1px solid var(--line); box-shadow:none; backdrop-filter:blur(12px); }
body:has(.top-support-bar) .store-nav { top:32px; }
body .store-nav .nav-wrapper { height:80px; gap:24px; }
body .store-nav .brand-logo { font-family:Georgia,'Times New Roman',serif; color:var(--navy); font-size:29px; font-weight:700; letter-spacing:-1.2px; }
body .store-nav .nav-actions { gap:24px; height:80px; }
body .nav-static-link { color:color-mix(in oklab, var(--color-base-content) 68%, var(--color-base-100)); font-size:12px; font-weight:600; padding:8px 0; border-radius:0; }
body .nav-static-link:hover { color:var(--blue); background:transparent; text-decoration:underline; text-underline-offset:7px; }
body .nav-search-trigger { background:transparent; border:0; box-shadow:none; color:var(--blue); padding:8px 0; }
body .cart-link { margin:0; height:43px; line-height:43px; border:1px solid var(--color-base-300); border-radius:6px; padding:0 13px; background:var(--color-base-200); font-size:12px; gap:8px; }
body .cart-badge { background:var(--blue); border-radius:4px; }
body .mobile-category-trigger { margin:0; border-radius:6px; background:transparent; border-color:var(--line); }
body .mobile-category-trigger span { background:var(--blue); }
body .category-drawer { background:var(--paper); border-radius:0 20px 20px 0; }
body .drawer-top strong { font-family:Georgia,serif; font-size:28px; }
body .drawer-tab.active { background:var(--blue); color:var(--color-neutral-content); }
body .drawer-list a { font-weight:500; }
body .drawer-close,body .product-search-close { background:var(--color-base-200); color:var(--blue); border-radius:6px; }
body .product-search-dialog { border-radius:12px; background:var(--paper); box-shadow:0 28px 90px color-mix(in oklab, var(--color-secondary) 18.82%, transparent); }
body .product-search-dialog h2 { font-family:Georgia,serif; font-weight:400; letter-spacing:-1px; }
body .product-search-form { background:var(--color-base-100); border-color:var(--line); border-radius:6px; }
body .product-search-form button { background:var(--blue); border-radius:5px; }
:is(.latte-hero,.caramel-hero) { padding:76px 0 72px !important; min-height:0 !important; background:var(--paper); border-bottom:1px solid var(--line); overflow:visible; }
:is(.latte-hero,.caramel-hero)::after { display:none; }
:is(.latte-hero,.caramel-hero) :is(.editorial-hero-layout,.caramel-editorial-hero-layout) { display:grid; grid-template-columns:minmax(0,1.18fr) minmax(0,.82fr); gap:64px; margin:0 !important; align-items:center; }
:is(.editorial-hero-layout,.caramel-editorial-hero-layout) > :is(.latte-hero-content,.caramel-hero-content) { width:auto; min-width:0; padding:0; max-width:none; }
:is(.latte-small-label,.caramel-small-label),:is(.latte-section-label,.caramel-section-label),:is(.editorial-kicker,.caramel-editorial-kicker) { font-size:10px; font-weight:700; color:var(--blue); letter-spacing:2.2px; line-height:1.6; }
:is(.latte-small-label,.caramel-small-label) { display:inline-flex; align-items:center; gap:10px; margin-bottom:24px; }
:is(.latte-small-label,.caramel-small-label)::before { content:''; width:22px; height:1px; background:var(--blue); }
:is(.latte-hero,.caramel-hero) h1 { font-family:Georgia,'Times New Roman',serif; font-weight:400; font-size:clamp(42px,5.6vw,78px); line-height:1.06; letter-spacing:-3px; margin:0 0 24px; overflow-wrap:anywhere; }
:is(.latte-hero,.caramel-hero) h1 span { color:var(--blue); }
:is(.latte-hero-description,.caramel-hero-description) { max-width:460px; font-size:15px; line-height:1.85; color:color-mix(in oklab, var(--color-base-content) 68%, var(--color-base-100)); margin:0 0 32px; }
:is(.latte-hero-buttons,.caramel-hero-buttons) { gap:12px; }
body .btn:is(.latte-blue-button,.caramel-blue-button),body .btn:is(.latte-dark-button,.caramel-dark-button),body :is(.latte-btn-flat,.caramel-btn-flat):is(.latte-white-button,.caramel-white-button) { height:48px; line-height:46px; padding:0 22px; font-size:11px; letter-spacing:.35px; border-radius:5px; box-shadow:none; text-transform:none; }
body :is(.latte-blue-button,.caramel-blue-button) { background:var(--blue); color:var(--color-neutral-content); box-shadow:none; border:1px solid var(--blue); }
body :is(.latte-blue-button,.caramel-blue-button):hover { background:var(--blue-dark); box-shadow:none; }
body :is(.latte-white-button,.caramel-white-button) { background:transparent; border-color:var(--color-base-300); color:var(--blue); }
body :is(.latte-dark-button,.caramel-dark-button) { background:var(--navy); color:var(--color-neutral-content); }
:is(.editorial-discovery,.caramel-editorial-discovery) { background:var(--blue); color:var(--color-neutral-content); border-radius:10px; padding:32px; position:relative; overflow:hidden; }
:is(.editorial-discovery,.caramel-editorial-discovery)::before { content:''; position:absolute; width:270px; height:270px; border:1px solid color-mix(in oklab, var(--color-base-300) 7.06%, transparent); border-radius:50%; right:-150px; top:-150px; box-shadow:0 0 0 42px color-mix(in oklab, var(--color-base-300) 1.96%, transparent),0 0 0 84px color-mix(in oklab, var(--color-base-300) 1.18%, transparent); pointer-events:none; }
:is(.editorial-discovery-head,.caramel-editorial-discovery-head) { display:flex; justify-content:space-between; align-items:center; gap:20px; position:relative; }
:is(.editorial-discovery,.caramel-editorial-discovery) :is(.editorial-kicker,.caramel-editorial-kicker) { color:var(--accent); letter-spacing:1.8px; font-size:9px; }
:is(.editorial-compass,.caramel-editorial-compass) { font-size:29px; line-height:1; font-weight:400; color:var(--accent); }
:is(.editorial-discovery-title,.caramel-editorial-discovery-title) { font-family:Georgia,serif; font-size:34px; line-height:1.2; letter-spacing:-1px; margin:26px 0; position:relative; }
:is(.editorial-discovery-title,.caramel-editorial-discovery-title) em { font-weight:400; color:var(--accent); }
:is(.editorial-discovery-links,.caramel-editorial-discovery-links) { border-top:1px solid color-mix(in oklab, var(--color-base-300) 14.9%, transparent); }
:is(.editorial-discovery-links,.caramel-editorial-discovery-links) a { display:grid; grid-template-columns:26px 1fr 18px; gap:12px; align-items:center; padding:18px 0; border-bottom:1px solid color-mix(in oklab, var(--color-base-300) 14.9%, transparent); color:var(--color-neutral-content); font-size:12px; transition:color .2s; }
:is(.editorial-discovery-links,.caramel-editorial-discovery-links) a:hover { color:var(--accent); }
:is(.editorial-step,.caramel-editorial-step) { color:var(--color-neutral-content); font-size:10px; }
:is(.editorial-discovery-links,.caramel-editorial-discovery-links) a > span:last-child { font-size:20px; color:var(--accent); }
:is(.editorial-discovery-foot,.caramel-editorial-discovery-foot) { display:flex; align-items:center; gap:8px; color:var(--color-neutral-content); font-size:10px; margin-top:24px; }
:is(.editorial-dot,.caramel-editorial-dot) { width:5px; height:5px; border-radius:50%; background:var(--accent); }
:is(.latte-brand-strip,.caramel-brand-strip) { background:var(--color-base-200); border-bottom:1px solid var(--line); border-top:0; }
:is(.latte-brand-strip-inner,.caramel-brand-strip-inner) { min-height:60px; gap:20px; }
:is(.latte-brand-strip-inner,.caramel-brand-strip-inner) span { font-size:9px; font-weight:600; letter-spacing:1.8px; color:color-mix(in oklab, var(--color-base-content) 68%, var(--color-base-100)); }
:is(.latte-section,.caramel-section) { padding:76px 0; }
:is(.latte-section-title,.caramel-section-title) { font-family:Georgia,serif; font-weight:400; font-size:clamp(32px,3.6vw,48px); letter-spacing:-1.7px; line-height:1.15; }
:is(.latte-section-title,.caramel-section-title) span { color:var(--blue); }
:is(.latte-section-text,.caramel-section-text) { color:var(--muted); font-size:14px; line-height:1.8; }
:is(.latte-products-section,.caramel-products-section) { background:var(--paper); padding-top:68px; padding-bottom:28px; }
:is(.latte-home-category-row,.caramel-home-category-row) { margin-bottom:52px; }
:is(.latte-home-category-head,.caramel-home-category-head) { border-bottom:1px solid var(--line); padding-bottom:20px; margin-bottom:24px; gap:20px; }
:is(.latte-home-category-title,.caramel-home-category-title) { font-family:Georgia,serif; font-weight:400; font-size:31px; letter-spacing:-.8px; }
:is(.latte-home-category-all,.caramel-home-category-all) { border:1px solid var(--line); border-radius:4px; padding:8px 12px; font-size:11px; font-weight:600; color:var(--blue); white-space:nowrap; }
:is(.latte-category-carousel,.caramel-category-carousel) { gap:18px; padding:0 0 20px; }
:is(.latte-carousel-product-card,.caramel-carousel-product-card) { flex-basis:calc((100% - 54px) / 4); background:var(--color-base-100); border:1px solid var(--line); border-radius:7px; box-shadow:none; }
:is(.latte-carousel-product-card,.caramel-carousel-product-card):hover { transform:translateY(-3px); border-color:var(--color-base-300); box-shadow:0 12px 24px color-mix(in oklab, var(--color-secondary) 3.92%, transparent); }
body :is(.latte-product-image-box,.caramel-product-image-box) { background:var(--color-base-200); border:0; border-radius:0; height:230px; padding:24px; }
body :is(.latte-product-image-box,.caramel-product-image-box) img { mix-blend-mode:multiply; max-height:185px; object-fit:contain; }
:is(.latte-carousel-product-body,.caramel-carousel-product-body) { padding:20px; }
:is(.latte-carousel-product-body,.caramel-carousel-product-body) h3 { font-size:15px; font-weight:600; min-height:40px; margin-bottom:14px; }
:is(.latte-carousel-price,.caramel-carousel-price) { border-top:1px solid var(--color-base-300); padding-top:14px; margin-bottom:16px; }
:is(.latte-carousel-price,.caramel-carousel-price) strong { color:var(--blue); font-size:21px; font-weight:700; }
:is(.latte-carousel-card-actions,.caramel-carousel-card-actions) { grid-template-columns:1fr 1fr; gap:8px; }
:is(.latte-carousel-detail-btn,.caramel-carousel-detail-btn),:is(.latte-carousel-cart-btn,.caramel-carousel-cart-btn) { height:40px; border-radius:4px; font-size:11px; font-weight:600; box-shadow:none; }
:is(.latte-carousel-cart-btn,.caramel-carousel-cart-btn) { background:var(--blue); box-shadow:none; }
:is(.latte-carousel-cart-btn,.caramel-carousel-cart-btn):hover { background:var(--blue-dark); box-shadow:none; }
:is(.latte-carousel-detail-btn,.caramel-carousel-detail-btn),:is(.latte-carousel-detail-btn,.caramel-carousel-detail-btn):hover { background:var(--color-base-200); border-color:var(--color-base-300); color:var(--blue); box-shadow:none; }
:is(.latte-carousel-action-icon,.caramel-carousel-action-icon) { background:none !important; box-shadow:none !important; width:14px; color:inherit !important; }
:is(.latte-carousel-arrow,.caramel-carousel-arrow) { width:38px; height:38px; border-radius:4px; color:var(--blue); background:var(--paper); border-color:var(--line); box-shadow:none; }
:is(.latte-carousel-arrow,.caramel-carousel-arrow):hover { background:var(--blue); border-color:var(--blue); }
:is(.latte-carousel-prev,.caramel-carousel-prev) { left:-19px; }
:is(.latte-carousel-next,.caramel-carousel-next) { right:-19px; }
:is(.latte-feature-section,.caramel-feature-section) { background:var(--color-base-200); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
:is(.latte-feature-card,.caramel-feature-card) { height:100%; min-height:225px; background:transparent; border:0; border-radius:0; padding:24px 20px; box-shadow:none; border-top:1px solid var(--color-base-300); }
:is(.latte-feature-card,.caramel-feature-card):hover { background:color-mix(in oklab, var(--color-base-100) 25.1%, transparent); transform:none; box-shadow:none; }
:is(.latte-feature-icon,.caramel-feature-icon) { background:none; color:var(--blue); width:36px; height:36px; border-radius:0; font-size:28px; margin-bottom:18px; }
:is(.latte-feature-card,.caramel-feature-card) h3 { font-family:Georgia,serif; font-size:23px; font-weight:400; letter-spacing:-.4px; }
:is(.latte-feature-card,.caramel-feature-card) p { font-size:12px; line-height:1.85; color:color-mix(in oklab, var(--color-base-content) 68%, var(--color-base-100)); }
body .options { background:var(--paper); }
:is(.latte-category-strip,.caramel-category-strip) { gap:12px; }
:is(.latte-category-pill,.caramel-category-pill) { background:transparent; border:1px solid var(--color-base-300); border-radius:5px; padding:16px 24px; font-size:13px; font-weight:500; color:var(--blue); }
:is(.latte-category-pill,.caramel-category-pill):hover { background:var(--color-base-200); color:var(--blue); border-color:var(--blue); }
:is(.latte-category-pill,.caramel-category-pill) :is(.latte-dot,.caramel-dot) { width:5px; height:5px; }
:is(.latte-home-blog-section,.caramel-home-blog-section) { background:var(--color-base-200); border-top:1px solid var(--line); }
:is(.latte-home-blog-grid,.caramel-home-blog-grid) { gap:24px; }
:is(.latte-home-blog-card,.caramel-home-blog-card),body :is(.latte-blog-card,.caramel-blog-card) { border:1px solid var(--line); border-radius:6px; box-shadow:none; background:var(--paper); }
:is(.latte-home-blog-card,.caramel-home-blog-card):hover { transform:translateY(-3px); box-shadow:0 10px 25px color-mix(in oklab, var(--color-secondary) 3.92%, transparent); }
:is(.latte-home-blog-media,.caramel-home-blog-media),body :is(.latte-blog-card-media,.caramel-blog-card-media) { border-radius:0; background:var(--color-base-200); }
:is(.latte-home-blog-body,.caramel-home-blog-body) { padding:24px; }
:is(.latte-home-blog-body,.caramel-home-blog-body) h3 { font-family:Georgia,serif; font-weight:400; font-size:25px; letter-spacing:-.6px; }
:is(.latte-home-blog-meta,.caramel-home-blog-meta),:is(.latte-home-blog-link,.caramel-home-blog-link) { color:var(--blue); }
:is(.latte-home-seo-section,.caramel-home-seo-section) { background:var(--paper); }
:is(.latte-home-seo-shell,.caramel-home-seo-shell) { background:transparent; border:0; border-radius:0; box-shadow:none; }
:is(.latte-home-seo-heading,.caramel-home-seo-heading) { border-bottom-color:var(--line); }
body .store-footer { background:var(--navy); color:var(--color-neutral-content); padding-top:64px; border-radius:0; }
body .footer-grid { gap:40px; }
body .footer-brand { font-family:Georgia,serif; font-size:32px; font-weight:400; letter-spacing:-1px; color:var(--accent); }
body .footer-heading { color:var(--color-neutral-content); font-size:10px; font-weight:600; letter-spacing:1.5px; }
body .footer-links a { color:color-mix(in oklab, var(--color-base-content) 68%, var(--color-base-100)); font-size:12px; }
body .footer-links a:hover { color:var(--accent); }
body .footer-bottom { border-top-color:color-mix(in oklab, var(--color-base-300) 10.2%, transparent); color:color-mix(in oklab, var(--color-base-content) 68%, var(--color-base-100)); }
body :is(.latte-page-top,.caramel-page-top),body :is(.latte-blog-hero,.caramel-blog-hero) { background:var(--color-base-200); padding:48px 0; border-bottom:1px solid var(--line); }
body :is(.latte-page-top,.caramel-page-top) h1,body :is(.latte-blog-hero,.caramel-blog-hero) h1 { font-family:Georgia,serif; font-weight:400; font-size:clamp(34px,5vw,58px); letter-spacing:-2px; line-height:1.15; }
body :is(.latte-store-product-grid,.caramel-store-product-grid) { grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; }
body :is(.latte-store-product-card,.caramel-store-product-card) { border-radius:7px; border-color:var(--line); box-shadow:none; }
body .store-product-media { height:290px; background:var(--color-base-200); padding:24px; }
body .store-product-media img { filter:none; border-radius:4px; }
body :is(.latte-store-product-body,.caramel-store-product-body) { padding:22px; }
body :is(.latte-store-product-body,.caramel-store-product-body) h3 { font-size:21px; letter-spacing:-.5px; }
body :is(.latte-store-product-body,.caramel-store-product-body) p { font-size:12px; }
body :is(.latte-product-actions,.caramel-product-actions) .btn { padding:0 10px; font-size:11px; }
body :is(.latte-detail-wrap,.caramel-detail-wrap) { gap:48px; align-items:start; }
body :is(.latte-detail-media-box,.caramel-detail-media-box) { background:var(--color-base-200); border:1px solid var(--line); border-radius:8px; min-height:520px; top:140px; }
body :is(.latte-detail-media-box,.caramel-detail-media-box) img { filter:none; border-radius:4px; }
body :is(.latte-detail-info-box,.caramel-detail-info-box) h1 { font-family:Georgia,serif; font-weight:400; font-size:clamp(36px,3.6vw,52px); letter-spacing:-1.8px; line-height:1.12; }
body :is(.latte-trust-mini,.caramel-trust-mini) { border-radius:5px; background:var(--color-base-200); border-color:var(--line); box-shadow:none; }
body :is(.latte-trust-icon,.caramel-trust-icon) { background:var(--color-base-200); color:var(--blue); border-radius:5px; }
body :is(.latte-trust-copy,.caramel-trust-copy) strong { color:var(--text); }
body :is(.latte-package-selector,.caramel-package-selector) { border-radius:7px; border-color:var(--line); background:var(--color-base-100); box-shadow:none; }
body :is(.latte-package-option-card,.caramel-package-option-card) { border-radius:5px; }
body .package-option input:checked + :is(.latte-package-option-card,.caramel-package-option-card) { border-color:var(--blue); background:var(--color-base-200); }
body :is(.latte-cart-item,.caramel-cart-item),body :is(.latte-summary-card,.caramel-summary-card),body :is(.latte-content-page-card,.caramel-content-page-card),body :is(.latte-surface-card,.caramel-surface-card) { background:var(--color-base-100); border:1px solid var(--line); border-radius:7px; box-shadow:none; }
body :is(.latte-summary-card,.caramel-summary-card) { top:140px; }
body :is(.latte-summary-total,.caramel-summary-total) { color:var(--blue); }
body :is(.latte-checkout-hero,.caramel-checkout-hero) { background:var(--color-base-200); border-bottom:1px solid var(--line); }
body :is(.latte-checkout-hero,.caramel-checkout-hero) h1 { font-family:Georgia,serif; font-weight:400; letter-spacing:-1.4px; }
body :is(.latte-checkout-form-card,.caramel-checkout-form-card),body :is(.latte-checkout-summary-card,.caramel-checkout-summary-card),body :is(.latte-os-card,.caramel-os-card) { border-radius:8px; border-color:var(--line); box-shadow:none; background:var(--color-base-100); }
body :is(.latte-checkout-card-heading,.caramel-checkout-card-heading) h2,body :is(.latte-checkout-summary-head,.caramel-checkout-summary-head) h2 { font-family:Georgia,serif; font-weight:400; letter-spacing:-.5px; }
body :is(.latte-checkout-heading-icon,.caramel-checkout-heading-icon),body :is(.latte-checkout-payment-badge,.caramel-checkout-payment-badge) { color:var(--blue); background:var(--color-base-200); border-radius:5px; }
body :is(.latte-checkout-input-wrap,.caramel-checkout-input-wrap),body :is(.latte-checkout-city-select,.caramel-checkout-city-select) { border-radius:5px; border-color:var(--line); background:var(--color-base-100); }
body :is(.latte-checkout-submit-button,.caramel-checkout-submit-button) { border-radius:5px; background:var(--blue); box-shadow:none; }
body :is(.latte-checkout-step,.caramel-checkout-step).is-current { color:var(--blue); }
body :is(.latte-os-hero,.caramel-os-hero) { background:var(--color-base-200); }
body :is(.latte-os-hero,.caramel-os-hero) h1 { font-family:Georgia,serif; font-weight:400; letter-spacing:-1.5px; }
body :is(.latte-os-hero,.caramel-os-hero) h1 span { color:var(--blue); }
body :is(.latte-os-check,.caramel-os-check) { background:var(--blue); box-shadow:none; border-radius:8px; }
body :is(.latte-os-chip,.caramel-os-chip) { border-radius:4px; background:var(--color-base-200); border-color:var(--line); }
body :is(.latte-search-page-form,.caramel-search-page-form) { border-radius:6px; border-color:var(--line); background:var(--color-base-100); }
body :is(.latte-search-page-form,.caramel-search-page-form) button { border-radius:4px; background:var(--blue); }
body :is(.latte-article-toc,.caramel-article-toc) { border-radius:6px; background:var(--color-base-200); border-color:var(--line); }
body :is(.latte-rich-content,.caramel-rich-content) h2,body :is(.latte-product-description,.caramel-product-description) h2 { font-family:Georgia,serif; font-weight:400; color:var(--navy); }
body :is(.latte-article-cover,.caramel-article-cover) { border-radius:6px; }
body .wa-float-btn { background:var(--blue); box-shadow:0 5px 15px color-mix(in oklab, var(--color-secondary) 14.9%, transparent); }
body .wa-header,body .wa-send-btn { background:var(--blue); }
body .wa-chat-popup { border-radius:10px; }
body :is(.latte-skip-link,.caramel-skip-link):focus { top:120px; }
@media (max-width:1100px) {
:is(.container,.caramel-container) { width:calc(100% - 48px); }
body .store-nav .nav-actions { gap:14px; }
:is(.latte-hero,.caramel-hero) :is(.editorial-hero-layout,.caramel-editorial-hero-layout) { gap:32px; }
:is(.editorial-discovery,.caramel-editorial-discovery) { padding:26px; }
:is(.editorial-discovery-title,.caramel-editorial-discovery-title) { font-size:29px; }
:is(.latte-carousel-product-card,.caramel-carousel-product-card) { flex-basis:calc((100% - 36px) / 3); }
body :is(.latte-store-product-grid,.caramel-store-product-grid) { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:900px) {
body .store-nav .nav-actions { gap:12px; }
:is(.latte-hero,.caramel-hero) :is(.editorial-hero-layout,.caramel-editorial-hero-layout) { grid-template-columns:1fr; gap:36px; }
:is(.latte-hero,.caramel-hero) h1 { max-width:680px; font-size:62px; }
:is(.latte-hero-description,.caramel-hero-description) { max-width:560px; }
:is(.editorial-discovery,.caramel-editorial-discovery) { display:grid; grid-template-columns:1fr 1fr; gap:0 28px; }
:is(.editorial-discovery-head,.caramel-editorial-discovery-head) { grid-column:1; }
:is(.editorial-discovery-title,.caramel-editorial-discovery-title) { grid-column:1; margin:16px 0; }
:is(.editorial-discovery-links,.caramel-editorial-discovery-links) { grid-column:2; grid-row:1/4; align-self:center; }
:is(.editorial-discovery-foot,.caramel-editorial-discovery-foot) { margin-top:10px; }
body :is(.latte-detail-wrap,.caramel-detail-wrap) { grid-template-columns:1fr; gap:32px; }
body :is(.latte-detail-media-box,.caramel-detail-media-box) { position:relative; top:0; min-height:400px; }
}
@media (max-width:600px) {
html { scroll-padding-top:116px; }
:is(.container,.caramel-container) { width:calc(100% - 36px); }
body { padding-top:70px; }
body:has(.top-support-bar) { padding-top:102px; }
body .store-nav,body .store-nav .nav-wrapper,body .store-nav .nav-actions { height:70px; }
body .store-nav .nav-wrapper { gap:10px; }
body .store-nav .brand-logo { font-size:21px; letter-spacing:-.8px; flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
body .store-nav .nav-actions { gap:7px; flex-shrink:0; }
body .nav-search-trigger { width:35px; height:38px; padding:7px; border:1px solid var(--line); border-radius:5px; }
body .cart-link { height:38px; padding:0 8px; gap:4px; border-radius:5px; }
body .cart-icon { font-size:14px; }
body .cart-badge { min-width:18px; height:18px; font-size:10px; }
body .mobile-category-trigger { width:35px; height:38px; flex-shrink:0; }
.support-label,.support-number { font-size:10px; }
.support-info { gap:5px; }
.support-call-btn { padding:0; font-size:10px; }
:is(.latte-hero,.caramel-hero) { padding:44px 0 36px !important; }
:is(.latte-small-label,.caramel-small-label) { margin-bottom:20px; font-size:9px; }
:is(.latte-hero,.caramel-hero) h1 { font-size:46px; line-height:1.06; letter-spacing:-1.9px; margin-bottom:22px; }
:is(.latte-hero-description,.caramel-hero-description) { font-size:13px; line-height:1.85; margin-bottom:26px; }
:is(.latte-hero-buttons,.caramel-hero-buttons) { gap:8px; }
body .btn:is(.latte-blue-button,.caramel-blue-button),body .btn:is(.latte-dark-button,.caramel-dark-button),body :is(.latte-btn-flat,.caramel-btn-flat):is(.latte-white-button,.caramel-white-button) { padding:0 15px; font-size:10px; height:44px; line-height:42px; }
:is(.editorial-discovery,.caramel-editorial-discovery) { display:block; padding:26px; border-radius:7px; }
:is(.editorial-discovery-title,.caramel-editorial-discovery-title) { font-size:30px; margin:22px 0; }
:is(.editorial-discovery-links,.caramel-editorial-discovery-links) a { padding:16px 0; font-size:12px; }
:is(.editorial-discovery-foot,.caramel-editorial-discovery-foot) { margin-top:22px; }
:is(.latte-brand-strip-inner,.caramel-brand-strip-inner) { min-height:72px; padding:18px 0; gap:14px 20px; justify-content:flex-start; }
:is(.latte-brand-strip-inner,.caramel-brand-strip-inner) span { font-size:8px; letter-spacing:1.1px; }
:is(.latte-section,.caramel-section) { padding:48px 0; }
:is(.latte-products-section,.caramel-products-section) { padding-top:44px; padding-bottom:0; }
:is(.latte-home-category-row,.caramel-home-category-row) { margin-bottom:32px; }
:is(.latte-home-category-head,.caramel-home-category-head) { align-items:center; gap:12px; padding-bottom:16px; margin-bottom:18px; }
:is(.latte-home-category-title,.caramel-home-category-title) { font-size:25px; letter-spacing:-.7px; }
:is(.latte-home-category-all,.caramel-home-category-all) { font-size:9px; padding:7px 9px; }
:is(.latte-carousel-product-card,.caramel-carousel-product-card) { flex-basis:78%; }
body :is(.latte-product-image-box,.caramel-product-image-box) { height:240px; }
:is(.latte-carousel-product-body,.caramel-carousel-product-body) { padding:20px; }
:is(.latte-carousel-product-body,.caramel-carousel-product-body) h3 { font-size:17px; min-height:36px; }
:is(.latte-carousel-detail-btn,.caramel-carousel-detail-btn),:is(.latte-carousel-cart-btn,.caramel-carousel-cart-btn) { font-size:12px; height:42px; }
:is(.latte-carousel-arrow,.caramel-carousel-arrow) { display:none; }
:is(.latte-section-title,.caramel-section-title) { font-size:35px; letter-spacing:-1.4px; }
:is(.latte-section-text,.caramel-section-text) { font-size:12px; }
:is(.latte-feature-card,.caramel-feature-card) { min-height:0; padding:22px 6px; margin-bottom:0; border-top-color:var(--color-base-300); }
:is(.latte-feature-card,.caramel-feature-card) h3 { font-size:25px; }
:is(.latte-feature-icon,.caramel-feature-icon) { margin-bottom:12px; }
:is(.latte-feature-section,.caramel-feature-section) :is(.latte-grid-row,.caramel-row):last-child { margin-bottom:0; }
:is(.latte-category-pill,.caramel-category-pill) { padding:15px 20px; font-size:12px; }
body :is(.latte-store-product-grid,.caramel-store-product-grid) { grid-template-columns:1fr; gap:20px; }
body .store-product-media { height:300px; }
body :is(.latte-store-product-body,.caramel-store-product-body) h3 { font-size:23px; }
body :is(.latte-detail-media-box,.caramel-detail-media-box) { min-height:340px; padding:26px; }
body :is(.latte-detail-info-box,.caramel-detail-info-box) h1 { font-size:38px; }
body :is(.latte-trust-grid,.caramel-trust-grid) { grid-template-columns:1fr; }
body :is(.latte-page-top,.caramel-page-top),body :is(.latte-blog-hero,.caramel-blog-hero) { padding:36px 0; }
body :is(.latte-page-top,.caramel-page-top) h1,body :is(.latte-blog-hero,.caramel-blog-hero) h1 { font-size:38px; letter-spacing:-1.4px; }
body :is(.latte-summary-card,.caramel-summary-card) { position:static; }
body .store-footer { padding-top:44px; }
body .footer-grid { gap:28px; }
body .footer-brand { font-size:29px; }
}
@media (prefers-reduced-motion:reduce) {
*,*::before,*::after { scroll-behavior:auto !important; transition:none !important; }
}
/* DaisyUI layout compatibility */
.caramel-container{padding-left:0;padding-right:0}.caramel-grid.caramel-grid-gap{margin-left:-12px;margin-right:-12px}.caramel-grid-gap>.cell{padding-left:12px;padding-right:12px;min-height:1px}.caramel-content{isolation:isolate}.caramel-row-gap{margin-bottom:1.25rem}.btn{margin-bottom:0;font-family:inherit}.btn.clear{background:transparent}.btn:focus-visible{outline:2px solid currentColor;outline-offset:3px}table tbody tr:nth-child(even){background:transparent}table tbody{border:0;background:transparent;color:inherit}input,select,textarea{margin-bottom:0}article{display:block}
/* DaisyUI layout compatibility */
.btn.clear{color:var(--color-primary)}.btn.clear:hover,.btn.clear:focus{color:var(--color-primary)}.btn.primary{background:var(--color-primary);color:var(--color-neutral-content)}.btn.primary:hover{background:var(--color-primary)}
/* DaisyUI owns the palette; this adapter preserves the existing responsive layout.
Theme tokens are provided solely by the external, official themes.css file. */
html[data-theme="winter"] { color-scheme:light; }
.caramel-theme { background:var(--color-base-100); color:var(--color-base-content); }
.caramel-theme .btn-primary { background:var(--color-primary)!important; color:var(--color-primary-content)!important; border-color:var(--color-primary)!important; }
.caramel-theme .btn-ghost { background:transparent!important; color:var(--color-base-content)!important; border-color:var(--color-base-300)!important; }
.caramel-theme .btn-error { background:var(--color-error)!important; color:var(--color-error-content)!important; border-color:var(--color-error)!important; }
.caramel-theme .btn:focus-visible { outline:2px solid var(--color-primary); outline-offset:3px; }
.caramel-theme .btn-primary:hover { background:color-mix(in oklab,var(--color-primary) 90%,var(--color-base-content))!important; }
.caramel-theme .input,.caramel-theme .select,.caramel-theme .textarea,.caramel-theme .file-input { min-width:0; max-width:100%; width:100%; color:var(--color-base-content); background-color:var(--color-base-100); border-color:var(--color-base-300); }
.caramel-theme .checkbox,.caramel-theme .radio { flex-shrink:0; }
.caramel-theme .modal-box { max-height:85dvh; }
.caramel-theme .product-search-dialog.modal-box { max-width:min(680px,calc(100vw - 32px)); }
.caramel-theme figure { margin:0; }
.caramel-theme .badge { white-space:normal; height:auto; min-height:1.25rem; }
.caramel-theme .caramel-grid { display:flex; flex-wrap:wrap; }
.caramel-theme .caramel-grid>.cell { min-width:0; flex:0 0 auto; }
.caramel-theme .caramel-col-12 { width:100%; }
.caramel-theme .caramel-grid-gap { row-gap:24px; }
@media(min-width:640px) { .caramel-theme .caramel-md-6 { width:50%; } }
@media(min-width:1024px) {
.caramel-theme .caramel-lg-3 { width:25%; }
.caramel-theme .caramel-lg-7 { width:58.333333%; }
.caramel-theme .caramel-lg-5 { width:41.666667%; }
}
/* The widget keeps its saved settings while following the selected visual theme. */
.caramel-theme .wa-header,.caramel-theme .wa-float-btn { background:var(--color-primary)!important; color:var(--color-primary-content); }
.caramel-theme .wa-header .btn-ghost { color:var(--color-primary-content)!important; }
.caramel-theme .caramel-admin-sidebar { background:var(--color-neutral); color:var(--color-neutral-content); }
.caramel-theme .store-footer { background:var(--color-neutral); color:var(--color-neutral-content); }
.caramel-theme .store-footer a,.caramel-theme .footer-heading,.caramel-theme .footer-copy,.caramel-theme .footer-bottom { color:var(--color-neutral-content); }
/* Existing search and native gift dialogs keep their established open/close logic. */
.caramel-theme .product-search-dialog.modal-box,.caramel-theme .pkg-gift-dialog-inner.modal-box { opacity:1; scale:1; translate:none; }
.caramel-theme .pkg-gift-dialog-inner.modal-box { width:100%; max-width:none; max-height:none; overflow:visible; box-shadow:none; background:var(--color-base-100); color:var(--color-base-content); }
.caramel-theme .caramel-carousel-product-body.card-body,.caramel-theme .caramel-store-product-body.card-body { display:block; gap:0; }
.caramel-theme .swal2-popup { background:var(--color-base-100); color:var(--color-base-content); }
.caramel-theme .swal2-title,.caramel-theme .swal2-html-container { color:var(--color-base-content); }
/* Search controls: shared dimensions, centered icons and responsive input sizing. */
body.caramel-theme .store-nav .nav-search-trigger.btn {
display:inline-flex; align-items:center; justify-content:center; gap:8px;
flex:0 0 auto; width:auto; min-width:0; height:44px; min-height:44px;
margin:0; padding:0 15px; border:1px solid var(--color-base-300)!important;
border-radius:12px; background:var(--color-base-100)!important;
color:var(--color-base-content)!important; box-shadow:none;
font-family:inherit; font-size:13px; font-weight:600;
line-height:1; letter-spacing:0; text-transform:none; white-space:nowrap;
}
body.caramel-theme .store-nav .nav-search-trigger.btn:hover {
background:var(--color-base-200)!important;
border-color:var(--color-primary)!important; color:var(--color-primary)!important;
}
body.caramel-theme .nav-search-icon { display:inline-flex; align-items:center; justify-content:center; flex:0 0 18px; width:18px; height:18px; }
body.caramel-theme .nav-search-text { line-height:1; }
body.caramel-theme :is(.product-search-form,.caramel-search-page-form) {
display:flex; align-items:center; gap:8px; padding:6px;
min-width:0; border-radius:14px; box-shadow:none;
background:var(--color-base-100); border:1px solid var(--color-base-300);
}
body.caramel-theme .product-search-form { padding-left:14px; }
body.caramel-theme :is(.product-search-form,.caramel-search-page-form) input[type="search"] {
flex:1 1 0%; width:0!important; min-width:0; max-width:none;
height:44px!important; min-height:44px; line-height:1.4;
border-radius:0; outline:none!important;
}
body.caramel-theme :is(.product-search-form,.caramel-search-page-form):focus-within {
border-color:var(--color-primary);
box-shadow:0 0 0 3px color-mix(in oklab,var(--color-primary) 15%,transparent);
}
body.caramel-theme :is(.product-search-form,.caramel-search-page-form) .search-action.btn {
display:inline-flex; align-items:center; justify-content:center; gap:7px;
flex:0 0 auto; width:auto; min-width:96px; max-width:none;
height:44px; min-height:44px; margin:0; padding:0 18px;
border:1px solid var(--color-primary)!important; border-radius:10px;
background:var(--color-primary)!important; color:var(--color-primary-content)!important;
font-family:inherit; font-size:14px; font-weight:600; line-height:1;
letter-spacing:0; text-transform:none; white-space:nowrap; box-shadow:none;
}
body.caramel-theme :is(.product-search-form,.caramel-search-page-form) .search-action.btn:hover {
background:color-mix(in oklab,var(--color-primary) 90%,var(--color-base-content))!important;
}
body.caramel-theme .search-action-icon { display:block; flex:0 0 18px; width:18px; height:18px; }
body.caramel-theme .product-search-form-icon { flex:0 0 20px; width:20px; height:20px; }
@media(min-width:993px) {
body.caramel-theme .nav-search-text { display:inline; }
}
@media(max-width:992px) {
body.caramel-theme .store-nav .nav-search-trigger.btn {
width:40px; min-width:40px; height:40px; min-height:40px;
padding:0; margin:0; border-radius:10px;
}
body.caramel-theme .nav-search-text { display:none; }
}
@media(max-width:600px) {
body.caramel-theme :is(.product-search-form,.caramel-search-page-form) { gap:6px; }
body.caramel-theme :is(.product-search-form,.caramel-search-page-form) .search-action.btn {
min-width:82px; padding:0 12px; font-size:13px;
}
body.caramel-theme .product-search-form { padding-left:10px; }
}