@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
  --rose: #e91e63;
  --rose-dark: #cf1452;
  --rose-pale: #fff1f5;
  --ink: #111827;
  --muted: #6b7280;
  --line: #f5dce6;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background: #fff;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
}
button, input { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; text-decoration: none; }
.shell { width: min(1280px, calc(100% - 32px)); margin-inline: auto; padding-inline: 16px; }
.announcement { height: 36px; color: white; background: linear-gradient(90deg, #ec1761, #db1b65, #f02f70); overflow: hidden; font-size: 13px; font-weight: 700; }
.marquee { display: flex; gap: 30px; align-items: center; width: max-content; min-width: 100%; height: 36px; white-space: nowrap; animation: marquee 28s linear infinite; }
@keyframes marquee { to { transform: translateX(-40%); } }
header { position: relative; z-index: 30; height: 150px; background: #fff; border-bottom: 1px solid #eee; box-shadow: 0 1px 2px rgba(0,0,0,.04); }
.header-main { height: 104px; display: grid; grid-template-columns: 156px minmax(260px, 1fr) 464px; gap: 24px; align-items: center; padding-top: 12px; padding-bottom: 12px; }
.logo { display: inline-flex; align-items: center; gap: 2px; color: #9a8f64; width: fit-content; }
.logo { width: 151.5px; height: 80px; }
.logo-art { display:block; width:151.5px; height:80px; }
.logo-image { display:block; width:100%; height:100%; object-fit:contain; border-radius:10px; }
.logo-mark { font-family: Georgia, serif; font-size: 88px; line-height: .8; font-style: italic; color: #9b9168; letter-spacing: -16px; }
.logo-copy { display: flex; flex-direction: column; margin-top: 9px; margin-left: 4px; letter-spacing: 7px; }
.logo-copy b { font-family: Georgia, serif; font-size: 25px; font-weight: 500; line-height: 1; }
.logo-copy small { margin-top: 6px; font-size: 8px; letter-spacing: 4px; text-align: center; }
.search-box { height: 40px; width: 576px; max-width: 576px; display: flex; align-items: center; gap: 10px; padding: 0 14px; border-radius: 9999px; color: #9ca3af; background: #f3f4f6; transition: box-shadow .2s, background .2s; }
.search-box:focus-within { background: #fff; box-shadow: 0 0 0 3px #fbcfe8; }
.search-box input { width: 100%; border: 0; outline: 0; background: transparent; color: var(--ink); font-size: 14px; }
.account-nav { display: flex; align-items: center; justify-content: flex-end; gap: 4px; width: 464px; height: 36px; }
.account-nav a { display: flex; align-items: center; justify-content: center; gap: 7px; min-width: 36px; height: 36px; padding: 0 9px; font-size: 14px; white-space: nowrap; transition: color .2s; }
.account-nav a:hover { color: var(--rose); }
.account-nav a[aria-label="WhatsApp ile iletişim"] { color:#25d366; }
.account-nav a[aria-label="WhatsApp ile iletişim"] .ui-icon { width:23px; height:23px; fill:currentColor; stroke:none; }
.account-nav a[aria-label="WhatsApp ile iletişim"]:hover { color:#128c7e; }
.account-nav .register { height: 36px; padding: 0 13px; border-radius: 8px; color: #fff; background: #e11d48; font-weight: 700; }
.main-nav { height: 45px; border-top: 1px solid #e5e7eb; }
.main-nav .shell { display: flex; height: 100%; align-items: center; gap: 35px; }
.main-nav a { display: inline-flex; align-items: center; gap: 6px; height: 100%; font-size: 14px; transition: color .2s; }
.main-nav a:hover { color: var(--rose); }
.mobile-menu { display: none; border: 0; background: none; }
.hero { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; padding-top: 24px; }
.hero-card { position: relative; height: auto; aspect-ratio: 1000 / 416; overflow: hidden; border-radius: 24px; background: #fff1f2; box-shadow: 0 1px 2px rgba(0,0,0,.05); }
.hero-card img { object-fit: cover; transition: transform .9s cubic-bezier(.22,1,.36,1); }
.hero-card:hover img { transform: scale(1.05); }
.hero-overlay { position: absolute; inset: 0; }
.hero-card.blue .hero-overlay,
.hero-card.rose .hero-overlay { background: linear-gradient(to right, rgba(0,0,0,.5), rgba(0,0,0,.2), rgba(0,0,0,0)); }
.hero-content { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; padding: 33.5px 32px 30.5px; color: #fff; }
.hero-content > h1,
.hero-content > p { width:303px; }
.hero-content > span { width:84.8px; margin-bottom: 12px; padding: 4px 12px; border-radius: 9999px; background: rgba(255,255,255,.25); font-size: 10px; line-height: 15px; letter-spacing: .5px; font-weight: 700; }
.hero-content h1 { margin: 0; font-size: 24px; line-height: 32px; letter-spacing: 0; font-weight: 800; }
.hero-content p { width: 303px; margin: 8px 0 0; font-size: 14px; line-height: 20px; }
.hero-content b { display: flex; align-items: center; justify-content:center; gap: 4px; width:92.8px; margin-top: 16px; padding: 8px 16px; border-radius: 9999px; color: #e11d48; background: #fff; box-shadow: 0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -2px rgba(0,0,0,.1); font-size: 14px; line-height: 20px; font-weight: 600; transition: transform .3s ease; }
.hero-card:hover .hero-content b { transform: translateX(4px); }
.benefits { height: 78px; margin-top: 40px; }
.benefits-inner { display: grid; grid-template-columns: repeat(4,1fr); height: 78px; border: 1px solid #ffe4e6; border-radius: 16px; background:#fff; box-shadow: 0 1px 2px rgba(0,0,0,.05); overflow:hidden; }
.benefit { display: flex; align-items: center; gap: 12px; padding: 16px; border-right: 1px solid #f4f4f5; }
.benefit:last-child { border: 0; }
.benefit i { display: grid; place-items: center; flex:0 0 auto; width: 44px; height: 44px; border-radius: 16px; font-style: normal; }
.benefit i svg { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.benefit i.pink { color: #e91e63; background: #fff1f5; }
.benefit i.purple { color: #d946ef; background: #fdf4ff; }
.benefit i.green { color: #10b981; background: #ecfdf5; }
.benefit i.yellow { color: #d97706; background: #fffbeb; }
.benefit div { display: flex; flex-direction: column; }
.benefit b { font-size: 14px; }
.benefit small { margin-top: 2px; color: var(--muted); font-size: 11px; }
.section { margin-top: 56px; }
.section > .section-heading { padding-top:2px; }
.section-heading { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 20px; }
.section-heading.centered { justify-content: center; text-align: center; }
.section-heading span { color: #e11d48; font-size: 11px; line-height: 16.5px; font-weight: 700; letter-spacing: 2.2px; text-transform: uppercase; }
.section-heading h2 { margin: 4px 0 0; font-size: 30px; line-height: 36px; letter-spacing: normal; font-weight:800; }
.section-heading a { display: flex; gap: 4px; align-items: center; color: #d61d5d; font-size: 13px; font-weight: 700; }
.category-scroll { display: grid; grid-template-columns: repeat(6,minmax(0,1fr)); gap: 16px; overflow:visible; padding-bottom:0; }
.category-card { height: 239.7px; overflow: hidden; border: 1px solid #fff1f2; border-radius: 16px; background: #fff; scroll-snap-align: start; transition: box-shadow .3s, border .3s, transform .3s; }
.category-card:hover { border-color: #f4b6ca; box-shadow: 0 12px 26px rgba(190,24,93,.1); }
.category-card > div { position: relative; width:100%; height:192.7px; margin:0; overflow:hidden; border-radius:0; background:#fff1f2; }
.category-card img { object-fit: contain; padding:12px; transition: transform .5s; }
.category-card:hover img { transform: scale(1.1); }
.category-card b { display:block; height:45px; padding:12px; font-size:14px; line-height:20px; font-weight:700; text-align:center; }
.mini-promos { display: grid; grid-template-columns: repeat(4,1fr); gap: 16px; margin-top: 56px; }
.mini-promos a { position: relative; height: 156px; overflow: hidden; border-radius: 16px; }
.mini-promos img { object-fit: cover; transition: transform .5s; }
.mini-promos a:hover img { transform: scale(1.06); }
.mini-promos a::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(21,14,18,.75), transparent 72%); }
.mini-promos div { position: absolute; z-index: 1; bottom: 18px; left: 18px; display: flex; flex-direction: column; color: #fff; }
.mini-promos b { font-size: 15px; }
.mini-promos small { margin-top: 2px; opacity: .8; }
.product-heading-row { display:flex; align-items:flex-end; justify-content:space-between; gap:12px; height:64px; margin-bottom:20px; }
.product-heading-row .section-heading { height:64px; margin:0; align-items:flex-end; }
.tabs { display: flex; gap: 4px; margin: 0; padding-bottom:4px; }
.tabs button { height: 36px; padding: 8px 16px; border: 0; border-radius: 9999px; color: #4b5563; background: transparent; font-size: 14px; line-height:20px; cursor: pointer; transition:color .15s,background .15s,box-shadow .15s; }
.tabs button.active { color:#e11d48; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.1); }
.product-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 16px; }
.product-card { min-width: 0; overflow: hidden; border: 1px solid #f5e4eb; border-radius: 16px; background: #fff; transition: box-shadow .25s, border .25s; }
.product-card:hover { border-color: #fecdd3; box-shadow: 0 20px 25px -5px rgba(0,0,0,.1),0 8px 10px -6px rgba(0,0,0,.1); transform:translateY(-2px); }
.product-image { position: relative; aspect-ratio: 1/1; overflow: hidden; background: #fff4f7; }
.product-image > img { object-fit: cover; transition: transform .55s cubic-bezier(.22,1,.36,1); }
.product-card:hover .product-image > img { transform: scale(1.045); }
.discount,.bestseller { position: absolute; z-index: 2; top: 8px; display: inline-flex; align-items: center; border-radius: 9999px; }
.discount { left: 8px; height:24px; padding:4px 8px; color:#fff; background:#e11d48; font-size:12px; line-height:16px; font-weight:800; box-shadow:0 4px 6px -1px rgba(0,0,0,.1); }
.bestseller { right: 8px; height:19px; padding:2px 8px; color:#713f12; background:#facc15; font-size:10px; line-height:15px; font-weight:700; box-shadow:0 4px 6px -1px rgba(0,0,0,.1); }
.product-actions { position: absolute; right: 12px; bottom: 12px; display: flex; gap: 7px; opacity: 0; transform: translateY(8px); transition: .25s; }
.product-card:hover .product-actions { opacity: 1; transform: none; }
.product-actions button { display: grid; place-items: center; width: 36px; height: 36px; border: 0; border-radius: 50%; color: var(--ink); background: #fff; box-shadow: 0 5px 15px rgba(0,0,0,.14); cursor: pointer; }
.product-actions .cart svg { width:18px; height:18px; fill:currentColor; }
.product-actions button:hover,.product-actions button.liked { color: #fff; background: var(--rose); }
.product-body { height:130.5px; padding:12px; }
.product-body h3 { min-height:40px; margin:0; font-size:14px; line-height:20px; font-weight:600; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.product-body p { height:16px; min-height:16px; margin:4px 0 8px; color:#6b7280; font-size:12px; line-height:16px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; display:block; }
.price-row { display: flex; justify-content: space-between; align-items: flex-end; gap: 8px; }
.price-row > div { display: flex; flex-direction: column; }
.price-row del { color:#9ca3af; font-size:12px; line-height:16px; }
.price-row strong { color:#e11d48; font-size:18px; line-height:22.5px; font-weight:800; }
.price-row > span { display:flex; align-items:center; gap:3px; color:#6b7280; font-size:12px; line-height:16px; font-weight:400; }
.occasions { margin-top: 64px; padding: 56px 0; background: linear-gradient(#fff9fb, #fff1f6); }
.occasions .section-heading { justify-content:center; text-align:center; height:64px; margin:0; }
.section-intro { width:576px; margin:8px auto 0; color:#4b5563; font-size:14px; line-height:20px; text-align:center; }
.occasion-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:16px; margin-top:40px; }
.occasion-grid a { position:relative; min-width:0; height:222px; overflow:hidden; border:1px solid #fff1f2; border-radius:16px; background:#fff; box-shadow:0 1px 2px rgba(0,0,0,.05); text-align:center; transition:transform .3s,box-shadow .3s; }
.occasion-grid span { position:relative; display:block; width:100%; height:176px; margin:0; overflow:hidden; border:0; border-radius:0; box-shadow:none; }
.occasion-grid img { object-fit: cover; transition: transform .45s; }
.occasion-grid a:hover img { transform: scale(1.08); }
.occasion-grid i { display:none; }
.occasion-grid b { display:block; padding:12px; margin:0; font-size:14px; line-height:20px; font-weight:700; }
.occasion-grid a:hover { transform:translateY(-4px); box-shadow:0 20px 25px -5px rgba(0,0,0,.1),0 8px 10px -6px rgba(0,0,0,.1); }
.campaign { position: relative; height: 300px; margin-top: 56px; overflow: hidden; border-radius: 24px; }
.campaign img { object-fit: cover; }
.campaign-overlay { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(38,20,28,.83), rgba(151,23,71,.54), rgba(236,72,153,.2)); }
.campaign > div:last-child { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; padding: 50px; color: #fff; }
.campaign span { font-size: 11px; font-weight: 800; letter-spacing: .16em; }
.campaign h2 { max-width: 510px; margin: 10px 0 4px; font-size: 35px; line-height: 1.1; }
.campaign p { margin: 4px 0 20px; }
.campaign a { display: flex; align-items: center; gap: 5px; padding: 11px 18px; border-radius: 999px; color: var(--rose); background: #fff; font-size: 14px; font-weight: 700; }
.steps { margin-top: 56px; }
.steps > .section-heading { height:64px; margin-bottom:32px; }
.steps > div:last-child { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; }
.steps > div:last-child { gap:24px; }
.steps article { position:relative; height:178px; padding:24px; border:1px solid #fff1f2; border-radius:16px; text-align:left; background:#fff; transition:transform .3s,box-shadow .3s; }
.steps article > span { position: absolute; left: 16px; top: 14px; color: #f3a3be; font-size: 28px; font-weight: 900; }
.steps i { display:none; }
.steps h3 { margin:20px 0 0; font-size:18px; line-height:28px; font-weight:700; }
.steps p { max-width:none; margin:8px 0 0; color:#6b7280; font-size:14px; line-height:20px; }
.steps article:hover { transform:translateY(-4px); box-shadow:0 20px 25px -5px rgba(0,0,0,.1),0 8px 10px -6px rgba(0,0,0,.1); }
.service-marquee { margin-top: 64px; overflow: hidden; color: #fff; background: linear-gradient(90deg,#e11d61,#db2777,#e11d61); }
.service-marquee > div { display: flex; width: max-content; gap: 25px; align-items: center; height: 56px; padding-inline: 35px; animation: serviceScroll 22s linear infinite; }
.service-marquee span { font-size: 13px; font-weight: 600; white-space: nowrap; }
.service-marquee b { opacity: .55; }
@keyframes serviceScroll { to { transform: translateX(-20%); } }
.blog-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; }
.service-marquee + .section { margin-top:64px; }
.service-marquee + .section > .section-heading { height:64px; }
.blog-grid a { overflow: hidden; border: 1px solid #f3e1e8; border-radius: 16px; background: #fff; transition: transform .25s, box-shadow .25s; }
.blog-grid a:hover { transform: translateY(-4px); box-shadow: 0 14px 32px rgba(136,19,64,.1); }
.blog-grid > a > span { position:relative; display:block; height:250.4px; overflow:hidden; }
.blog-grid img { object-fit: cover; transition: transform .5s; }
.blog-grid a:hover img { transform: scale(1.05); }
.blog-grid div { height:188px; padding:20px; }
.blog-grid small { color: #e11d61; font-weight: 700; }
.blog-grid h3 { min-height: 48px; margin: 8px 0; font-size: 17px; line-height: 24px; }
.blog-grid p { margin: 0 0 14px; color: #6b7280; font-size: 12px; line-height: 19px; }
.blog-grid b { display: flex; align-items: center; gap: 5px; color: #d91c5b; font-size: 12px; }
.stats { margin-top: 64px; padding: 64px 0; color: #fff; text-align: center; background: linear-gradient(135deg,#f23c72,#ec2d78 50%,#d9185a); }
.stats h2 { margin:0; font-size:36px; line-height:40px; letter-spacing:normal; }
.stats p { height:24px; margin:8px 0 32px; line-height:24px; opacity:.9; }
.stats .shell > div { display:grid; grid-template-columns:repeat(4,1fr); height:114px; }
.stats article { display: flex; flex-direction: column; border-right: 1px solid rgba(255,255,255,.25); }
.stats article:last-child { border: 0; }
.stats article b { font-size: 33px; }
.stats article span { margin-top: 4px; font-size: 12px; opacity: .85; }
.tracking { max-width: 896px; margin-top: 64px; text-align: center; }
.tracking-icon { display:inline-flex !important; align-items:center; justify-content:center; width:56px; height:56px; margin-bottom:12px; border-radius:16px; color:#e11d48; background:#fff1f2; font-size:22px !important; }
.tracking h2,.newsletter h2 { margin:0; font-size:30px; line-height:36px; letter-spacing:normal; font-weight:800; }
.tracking p,.newsletter p { height:24px; margin:8px 0 0; color:#4b5563; font-size:16px; line-height:24px; }
.tracking form,.newsletter form { display:flex; width:448px; max-width:448px; height:50px; gap:8px; margin:20px auto 0; padding:0; border:0; border-radius:0; background:transparent; box-shadow:none; }
.tracking input,.newsletter input { min-width:0; flex:1; padding:0 16px; border:1px solid #e5e7eb; border-radius:16px; outline:0; background:#fff; font-size:14px; }
.tracking button,.newsletter button { min-width:112px; border:0; border-radius:16px; color:#fff; background:#e11d48; font-weight:700; cursor:pointer; }
.newsletter { max-width:896px; margin-top:56px; margin-bottom:24px; padding-top:56px; padding-bottom:56px; border:1px solid #ffe4e6; border-radius:24px; text-align:center; background:linear-gradient(135deg,#fff1f2,#fdf2f8); }
.newsletter > i { display:grid; place-items:center; width:56px; height:56px; margin:0 auto 12px; border-radius:16px; color:#e11d48; background:#fff; box-shadow:0 1px 2px rgba(0,0,0,.05); font-style:normal; }
.newsletter form { padding-left:16px; padding-right:16px; }
footer { margin-top:80px; color:#d1d5db; background:#11131a; }
.footer-grid { display:grid; grid-template-columns:1.35fr 1fr 1fr 1.25fr; gap:45px; height:288px; padding-top:48px; padding-bottom:48px; }
.footer-grid > div { display: flex; flex-direction: column; align-items: flex-start; }
.footer-grid > div > b { margin-bottom: 16px; color: #fff; font-size: 14px; }
.footer-grid a { margin-bottom: 9px; color: #aeb3be; font-size: 12px; transition: color .2s; }
.footer-grid a:hover { color: #fff; }
.footer-brand .logo { margin-bottom: 18px; color: #d8c893; }
.footer-brand p,.footer-sub p { margin: 0 0 16px; color: #9298a4; font-size: 12px; line-height: 20px; }
.footer-sub form { display: flex; width: 100%; height: 44px; overflow: hidden; border: 1px solid #343742; border-radius: 999px; background: #1d2029; }
.footer-sub input { min-width: 0; flex: 1; padding: 0 15px; border: 0; outline: 0; color: #fff; background: transparent; font-size: 12px; }
.footer-sub button { display: grid; place-items: center; width: 45px; border: 0; color: #fff; background: var(--rose); }
.footer-bottom { display:flex; justify-content:space-between; align-items:center; height:57px; min-height:57px; border-top:1px solid #2d3038; color:#838994; font-size:11px; }
.footer-bottom span:last-child { display: flex; align-items: center; gap: 6px; }
.cookie { position: fixed; z-index: 60; right: 31px; bottom: 16px; width: min(417px,calc(100% - 32px)); padding: 19px 20px 18px; border: 1px solid #eee; border-radius: 17px; background: rgba(255,255,255,.96); box-shadow: 0 17px 45px rgba(0,0,0,.2); backdrop-filter: blur(14px); }
.cookie b { font-size: 16px; }
.cookie p { margin: 4px 0 13px; color: #5f636b; font-size: 13px; }
.cookie p a { color: var(--rose); text-decoration: underline; }
.cookie > div { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; }
.cookie button { height: 38px; border: 1px solid #e5e7eb; border-radius: 8px; background: #fff; cursor: pointer; }
.cookie button:first-child { border-color: var(--rose); color: #fff; background: var(--rose); font-weight: 700; }
.whatsapp { position: fixed; z-index: 65; right: 24px; bottom: 24px; display: grid; place-items: center; width: 64px; height: 64px; border:0; border-radius: 50%; color: #fff; background:#20c763; box-shadow:0 10px 28px rgba(15,118,58,.32),0 3px 10px rgba(0,0,0,.18); transition:transform .2s ease,background-color .2s ease; }
.whatsapp:hover { color:#fff; background:#16a34a; transform:translateY(-2px) scale(1.03); }
.whatsapp > svg { width:39px; height:39px; fill:currentColor; stroke:none; }
.whatsapp-order-icon .ui-icon { fill:currentColor; stroke:none; }
.modal-backdrop { position: fixed; z-index: 80; inset: 0; display: grid; place-items: center; padding: 20px; background: rgba(10,11,15,.62); backdrop-filter: blur(5px); }
.quick-modal { position: relative; display: grid; grid-template-columns: 1fr 1fr; width: min(850px,100%); max-height: 90vh; overflow: hidden; border-radius: 22px; background: #fff; box-shadow: 0 30px 80px rgba(0,0,0,.3); }
.quick-image { position: relative; min-height: 470px; background: #fff4f7; }
.quick-image img { object-fit: cover; }
.quick-copy { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; padding: 44px; }
.quick-copy > span { color: var(--rose); font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.quick-copy h2 { margin: 10px 0; font-size: 28px; }
.quick-copy p { color: #6b7280; font-size: 14px; line-height: 23px; }
.quick-copy del { color: #9ca3af; font-size: 13px; }
.quick-copy strong { margin: 3px 0 20px; color: var(--rose); font-size: 24px; }
.quick-copy > button { display: flex; align-items: center; justify-content: center; gap: 7px; width: 100%; height: 48px; border: 0; border-radius: 10px; color: #fff; background: var(--rose); font-weight: 700; cursor: pointer; }
.modal-close { position: absolute; z-index: 2; right: 13px; top: 13px; display: grid; place-items: center; width: 38px; height: 38px; border: 0; border-radius: 50%; background: #fff; box-shadow: 0 4px 16px rgba(0,0,0,.14); cursor: pointer; }
.toast { position: fixed; z-index: 100; left: 50%; bottom: 24px; display: flex; align-items: center; gap: 8px; transform: translateX(-50%); padding: 12px 17px; border-radius: 10px; color: #fff; background: #151821; box-shadow: 0 10px 30px rgba(0,0,0,.25); font-size: 13px; }
.drawer-backdrop,.mobile-drawer { display: none; }

@media (max-width: 1100px) {
  .header-main { grid-template-columns: 145px 1fr auto; gap: 15px; }
  .account-nav a span { display: none; }
  .account-nav { gap: 13px; }
  .account-nav .register { width: 40px; padding: 0; justify-content: center; }
  .main-nav .shell { gap: 22px; }
  .product-grid { grid-template-columns: repeat(3,1fr); }
  .occasion-grid { grid-template-columns: repeat(5,1fr); }
}

@media (max-width: 800px) {
  .shell { width: 100%; padding-inline: 12px; }
  .announcement { height: 36px; font-size: 11px; }
  .marquee { height: 36px; }
  header { height: 133px; }
  .header-main { height: 133px; grid-template-columns: 36px 1fr 36px; grid-template-rows:84px 49px; gap:0; padding:0 12px; }
  .mobile-menu { display: grid; place-items: center; padding: 5px; }
  .header-main .logo { grid-column:2; grid-row:1; justify-self:center; width:118px; height:52px; }
  .logo-mark { font-size: 43px; letter-spacing: -8px; }
  .logo-copy b { font-size: 16px; letter-spacing: 4px; }
  .logo-copy small { font-size: 6px; }
  .main-nav,.account-nav a:not(:last-child) { display: none; }
  .search-box { display:flex; grid-column:1 / -1; grid-row:2; width:100%; height:40px; align-self:start; }
  .account-nav { grid-column:3; grid-row:1; width:36px; gap:0; }
  .hero { display:grid; grid-template-columns:1fr; gap:12px; width:100%; height:auto; margin:0; padding:16px 12px 0; overflow:visible; }
  .hero-card { min-width:0; width:100%; height:auto; aspect-ratio:1000 / 416; border-radius:16px; scroll-snap-align:none; }
  .hero-content { padding:20px; }
  .hero-content > h1,.hero-content > p { width:260px; }
  .hero-content > span { margin-bottom:8px; }
  .hero-content h1 { font-size:18px; line-height:28px; }
  .hero-content p { margin-top:4px; font-size:12px; line-height:16px; }
  .hero-content b { margin-top:8px; }
  .benefits { height:156px; margin-top:24px; }
  .benefits-inner { grid-template-columns:repeat(2,1fr); height:156px; }
  .benefit { border-bottom: 1px solid #f4f4f5; }
  .benefit:nth-child(2) { border-right: 0; }
  .section { margin-top:40px; }
  .section-heading { margin-bottom: 16px; }
  .section > .section-heading { height:60px; padding-top:0; }
  .section-heading h2 { font-size: 24px; }
  .category-scroll { grid-template-columns:repeat(3,minmax(0,1fr)); grid-auto-flow:initial; grid-auto-columns:auto; gap:12px; overflow:visible; padding-bottom:0; scroll-snap-type:none; }
  .category-card { height:142px; }
  .category-card > div { height:108px; }
  .category-card img { padding:8px; }
  .category-card b { height:32px; padding:6px 4px; font-size:11px; line-height:20px; }
  .mini-promos { grid-template-columns:repeat(2,1fr); grid-template-rows:repeat(2,88.125px); gap:12px; height:188.25px; margin-top:40px; }
  .mini-promos a { height:88.125px; }
  .mini-promos div { left:12px; bottom:10px; }
  .mini-promos b { font-size:13px; }
  .mini-promos small { font-size:10px; }
  .product-grid { grid-template-columns:repeat(2,1fr); gap:12px; }
  .product-body { height:153px; padding:12px; }
  #product-grid .product-card:nth-child(9) .product-body,
  #product-grid .product-card:nth-child(10) .product-body { height:137px; }
  #sale-grid .product-card:nth-last-child(-n + 2) .product-body { height:133px; }
  .product-body h3 { min-height:40px; font-size:14px; line-height:20px; }
  .product-body p { display:block; }
  .price-row { margin-top: 8px; align-items: flex-start; }
  .price-row strong { font-size:18px; }
  .price-row > span { display:flex; }
  .bestseller { display:inline-flex; }
  .product-actions { opacity: 1; transform: none; }
  .product-actions button:not(:first-child) { display: none; }
  .occasions { margin-top:48px; padding:24px 0; }
  .occasion-grid { grid-template-columns:repeat(2,1fr); gap:12px; }
  .occasions .section-heading { height:64px; }
  .section-intro { width:auto; margin-top:8px; }
  .occasion-grid { margin-top:24px; }
  .occasion-grid a { height:171.625px; }
  .occasion-grid span { width:100%; height:129.625px; }
  .occasion-grid b { padding:10px 6px; font-size:11px; }
  .product-heading-row { height:auto; align-items:flex-end; flex-wrap:wrap; }
  .campaign { height:98.266px; margin-top:40px; border-radius:16px; }
  .campaign > div:last-child { padding:16px; }
  .campaign span { font-size:8px; }
  .campaign h2 { margin:4px 0 2px; font-size:18px; line-height:22px; }
  .campaign p { display:none; }
  .campaign a { padding:5px 10px; font-size:10px; }
  .steps { margin-top:40px; }
  .steps > div:last-child { grid-template-columns:1fr; gap:24px; }
  .steps article { height:158px; padding:20px; }
  .steps article:nth-child(2) { height:138px; }
  .steps > .section-heading { height:64px; margin-bottom:24px; }
  .service-marquee { height:52px; margin-top:48px; }
  .service-marquee > div { height:52px; }
  .blog-grid { grid-template-columns: 1fr; }
  .service-marquee + .section { margin-top:48px; }
  #blog > .section-heading { margin-bottom:12px; }
  .blog-grid { gap:16px; }
  .blog-grid > a > span { height:220px; }
  .blog-grid div { height:186.125px; padding:20px; }
  .stats { height:324px; margin-top:48px; padding:48px 0; }
  .stats h2 { font-size: 27px; }
  .stats p { margin-bottom:24px; }
  .stats .shell > div { grid-template-columns:repeat(2,1fr); height:154px; gap:16px 0; }
  .stats article:nth-child(2) { border-right: 0; }
  .tracking { height:270px; margin-top:48px; padding-top:32px; }
  .tracking h2,.newsletter h2 { font-size: 24px; }
  .tracking p,.newsletter p { height:auto; padding-inline:12px; }
  .tracking form,.newsletter form { width:100%; max-width:351px; height:50px; padding:0; }
  .tracking input,.newsletter input { font-size: 12px; }
  .newsletter { height:328px; margin-top:40px; margin-bottom:24px; padding:40px 18px; }
  footer { margin-top:48px; }
  .footer-grid { grid-template-columns:1fr; gap:32px; height:842px; padding-top:20px; padding-bottom:20px; }
  .footer-grid > div:nth-child(1) { height:148px; }
  .footer-grid > div:nth-child(2),
  .footer-grid > div:nth-child(3) { height:192px; }
  .footer-grid > div:nth-child(4) { height:174px; }
  .footer-brand,.footer-sub { grid-column:auto; }
  .footer-bottom { width:100%; height:85px; min-height:85px; flex-direction:column; justify-content:center; gap:8px; padding:20px 16px; text-align:center; }
  .cookie { right: 16px; bottom: 12px; }
  .drawer-backdrop { display: block; position: fixed; z-index: 70; inset: 0; border: 0; background: rgba(0,0,0,.45); }
  .mobile-drawer { display: flex; position: fixed; z-index: 71; inset: 0 auto 0 0; flex-direction: column; width: min(330px,86vw); padding: 20px; background: #fff; box-shadow: 20px 0 50px rgba(0,0,0,.2); }
  .mobile-drawer > div { display: flex; justify-content: space-between; align-items: center; margin-bottom: 25px; }
  .mobile-drawer > div button { border: 0; background: transparent; }
  .mobile-drawer > a { display: flex; justify-content: space-between; padding: 14px 4px; border-bottom: 1px solid #f1f1f1; font-weight: 600; }
  .quick-modal { grid-template-columns: 1fr; overflow-y: auto; }
  .quick-image { min-height: 300px; }
  .quick-copy { padding: 27px; }
  .whatsapp { right:18px; bottom:20px; width:66px; height:66px; }
  .whatsapp > svg { width:40px; height:40px; }
}

@media (max-width: 430px) {
  .benefit { padding: 11px 9px; gap: 8px; }
  .benefit i { width: 36px; height: 36px; }
  .benefit b { font-size: 11px; }
  .benefit small { font-size: 9px; }
  .section-heading a { font-size: 11px; }
  .tabs { overflow-x: auto; }
  .tabs button { white-space: nowrap; }
  .cookie > div { grid-template-columns: 1.1fr 1fr 1fr; }
  .cookie button { font-size: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .01ms !important; }
}

:focus-visible { outline: 3px solid rgba(233,30,99,.35); outline-offset: 3px; }

/* Apache-served static HTML adaptations */
.static-site .hero-card > img,
.static-site .mini-promos > a > img,
.static-site .campaign > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.static-site .category-card img,
.static-site .product-image > img,
.static-site .occasion-grid img,
.static-site .blog-grid img,
.static-site .quick-image img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.static-site .product-actions button {
  font-size: 19px;
  line-height: 1;
}
.static-site .tracking-icon {
  display: block;
  color: var(--rose);
  font-size: 30px;
}
.static-site .cookie.closed {
  display: none;
}
.static-site .modal-backdrop[hidden],
.static-site .toast[hidden] {
  display: none;
}
.static-site .modal-open,
.static-site.drawer-open {
  overflow: hidden;
}
.static-site .reveal { opacity:1; transform:none; }
.static-site .reveal.visible {
  opacity: 1;
  transform: none;
}
.static-site .quick-image img {
  transition: none;
}

@media (max-width: 800px) {
  .static-site .drawer-backdrop,
  .static-site .mobile-drawer {
    display: flex;
    visibility: hidden;
    pointer-events: none;
  }
  .static-site .drawer-backdrop {
    opacity: 0;
    transition: opacity .25s;
  }
  .static-site .drawer-backdrop.open {
    visibility: visible;
    pointer-events: auto;
    opacity: 1;
  }
  .static-site .mobile-drawer {
    transform: translateX(-100%);
    transition: transform .35s cubic-bezier(.22,1,.36,1), visibility .35s;
  }
  .static-site .mobile-drawer.open {
    visibility: visible;
    pointer-events: auto;
    transform: translateX(0);
  }
}

/* Shared route system */
.ui-icon { display:block; flex:0 0 auto; }
.nav-count { position:absolute; right:-5px; top:-7px; display:grid; place-items:center; min-width:18px; height:18px; padding:0 4px; border-radius:999px; color:#fff; background:#e11d48; font-size:10px; line-height:1; font-style:normal; font-weight:800; }
.account-nav > a { position:relative; }
.account-nav > a:first-child .nav-count { background:#6366f1; }
.nav-dropdown { position:relative; height:45px; display:flex; align-items:center; }
.nav-dropdown > button { display:flex; align-items:center; gap:4px; height:45px; padding:0; border:0; color:inherit; background:transparent; font:inherit; font-weight:600; cursor:pointer; }
.nav-dropdown > button svg { transition:transform .2s ease; }
.mega-menu { position:absolute; z-index:55; left:0; top:calc(100% - 1px); display:grid; visibility:hidden; grid-template-columns:repeat(2,1fr); width:384px; padding:16px; gap:4px; border:1px solid #e5e7eb; border-radius:12px; opacity:0; background:#fff; box-shadow:0 20px 25px -5px rgba(0,0,0,.1),0 8px 10px -6px rgba(0,0,0,.1); transform:translateY(8px); transition:opacity .18s ease,transform .18s ease,visibility .18s; }
.mega-menu a { height:36px; padding:8px 10px; border-radius:8px; color:#374151; font-size:13px; font-weight:500; }
.mega-menu a:hover { color:#e11d48; background:#fff1f2; }
.nav-dropdown:hover .mega-menu,.nav-dropdown:focus-within .mega-menu { visibility:visible; opacity:1; transform:none; }
.nav-dropdown:hover > button svg { transform:rotate(180deg); }

.route-main { min-height:402px; color:#111827; background:#fff; }
.route-shell { width:min(100%,1280px); margin:0 auto; padding:24px 16px 56px; }
.route-shell-narrow { width:448px; max-width:100%; padding-top:40px; padding-bottom:40px; }
.route-shell-article { width:768px; max-width:100%; padding-top:32px; padding-bottom:48px; }
.route-shell-cart { width:1024px; max-width:100%; padding-top:32px; }
.route-shell-contact { width:1152px; max-width:100%; padding-top:32px; }
.breadcrumb { display:flex; align-items:center; flex-wrap:wrap; gap:8px; height:24px; margin-bottom:24px; color:#9ca3af; font-size:12px; }
.breadcrumb a { color:#6b7280; }
.breadcrumb a:hover { color:#e11d48; }
.breadcrumb b { color:#374151; font-weight:500; }
.eyebrow { color:#e11d48; font-size:11px; line-height:16px; font-weight:800; letter-spacing:.15em; }
.simple-title { margin:0 0 24px; font-size:30px; line-height:36px; font-weight:700; }
.primary-button { display:inline-flex; align-items:center; justify-content:center; gap:7px; min-height:44px; padding:11px 20px; border:0; border-radius:12px; color:#fff; background:#e11d48; box-shadow:0 4px 6px -1px rgba(225,29,72,.18); font-size:14px; line-height:20px; font-weight:700; cursor:pointer; transition:background .2s,transform .2s,box-shadow .2s; }
.primary-button:hover { background:#be123c; box-shadow:0 8px 14px -4px rgba(190,18,60,.3); transform:translateY(-1px); }
.primary-button:active { transform:translateY(0); }
.primary-button:focus-visible { outline:3px solid rgba(225,29,72,.25); outline-offset:2px; }
.square-button { display:grid; place-items:center; width:48px; height:48px; border:1px solid #e5e7eb; border-radius:12px; color:#374151; background:#fff; cursor:pointer; }

.listing-heading { display:flex; align-items:flex-end; justify-content:space-between; gap:24px; margin-bottom:24px; }
.listing-heading h1 { margin:4px 0 0; font-size:30px; line-height:36px; font-weight:700; }
.listing-heading h1 small { color:#9ca3af; font-size:18px; font-weight:500; }
.listing-actions { display:flex; align-items:flex-end; gap:10px; }
.listing-actions label { display:flex; flex-direction:column; gap:5px; color:#6b7280; font-size:11px; font-weight:600; }
.listing-actions select,.filter-toggle { height:40px; border:1px solid #e5e7eb; border-radius:10px; color:#374151; background:#fff; font-size:13px; }
.listing-actions select { min-width:182px; padding:0 34px 0 12px; }
.filter-toggle { display:flex; align-items:center; gap:6px; padding:0 14px; margin-top:auto; cursor:pointer; }
.filter-panel { display:grid; grid-template-columns:180px 180px 1fr auto; align-items:end; gap:16px; margin:-4px 0 20px; padding:18px; border:1px solid #ffe4e6; border-radius:12px; background:#fff8fa; }
.filter-panel[hidden] { display:none; }
.filter-panel label { display:flex; flex-direction:column; gap:6px; color:#4b5563; font-size:12px; font-weight:600; }
.filter-panel label:has(input[type="checkbox"]) { flex-direction:row; align-items:center; padding-bottom:12px; }
.filter-panel input[type="number"] { height:40px; padding:0 12px; border:1px solid #e5e7eb; border-radius:9px; }
.route-product-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; }
.route-product-card { min-width:0; overflow:hidden; border:1px solid #f5e4eb; border-radius:16px; background:#fff; transition:border-color .3s,box-shadow .3s,transform .3s cubic-bezier(.22,1,.36,1); }
.route-product-card:hover { border-color:#fecdd3; box-shadow:0 20px 25px -5px rgba(0,0,0,.09),0 8px 10px -6px rgba(0,0,0,.08); transform:translateY(-2px); }
.route-product-image { position:relative; display:block; aspect-ratio:1; overflow:hidden; background:linear-gradient(135deg,#fff1f2,#fdf2f8); }
.route-product-image > img { width:100%; height:100%; object-fit:cover; transition:transform .55s cubic-bezier(.22,1,.36,1); }
.route-product-card:hover .route-product-image > img { transform:scale(1.045); }
.card-tools { position:absolute; right:12px; bottom:12px; display:flex; gap:7px; opacity:0; transform:translateY(8px); transition:.25s; }
.route-product-card:hover .card-tools { opacity:1; transform:none; }
.card-tools button { display:grid; place-items:center; width:36px; height:36px; padding:0; border:0; border-radius:50%; color:#374151; background:#fff; box-shadow:0 5px 15px rgba(0,0,0,.14); cursor:pointer; transition:color .2s,background .2s; }
.card-tools button:hover,.card-tools button.is-active { color:#fff; background:#e11d48; }
.route-product-body { display:block; height:130.5px; padding:12px; color:#111827; }
.route-product-body h3 { min-height:40px; margin:0; overflow:hidden; font-size:14px; line-height:20px; font-weight:600; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
.route-product-body p { height:16px; margin:4px 0 8px; overflow:hidden; color:#6b7280; font-size:12px; line-height:16px; text-overflow:ellipsis; white-space:nowrap; }
.route-price { display:flex; align-items:flex-end; justify-content:space-between; gap:8px; }
.route-price > span { display:flex; flex-direction:column; }
.route-price del { color:#9ca3af; font-size:12px; line-height:16px; }
.route-price strong { color:#e11d48; font-size:18px; line-height:23px; font-weight:800; }
.route-price b { color:#6b7280; font-size:12px; font-weight:500; }
.pagination { display:flex; justify-content:center; gap:8px; margin-top:32px; }
.pagination button { width:38px; height:38px; border:1px solid #e5e7eb; border-radius:10px; color:#4b5563; background:#fff; cursor:pointer; }
.pagination button:hover,.pagination button.active { border-color:#e11d48; color:#fff; background:#e11d48; }
.route-shell:has(#route-listing-grid) { padding-bottom:24px; }
.route-shell:has(#route-listing-grid) > .breadcrumb { height:20px; margin-bottom:8px; }
.route-shell:has(#route-listing-grid) .listing-heading { height:37px; margin-bottom:16px; }
.route-shell:has(#route-listing-grid) .listing-heading .eyebrow { display:none; }
.route-shell:has(#route-listing-grid) .listing-heading h1 { margin:0; }
.route-shell:has(#route-listing-grid) .listing-actions { height:37px; }
.route-shell:has(#route-listing-grid) .listing-actions label > span { display:none; }
.route-shell:has(#route-listing-grid) .listing-actions select,
.route-shell:has(#route-listing-grid) .filter-toggle { height:37px; }
.route-shell:has(#route-listing-grid) .pagination button { width:42px; height:42px; }

.product-detail { display:grid; grid-template-columns:minmax(0,1.08fr) minmax(360px,.92fr); gap:56px; }
.gallery-main { position:relative; aspect-ratio:1; overflow:hidden; border-radius:16px; background:#fff1f2; cursor:zoom-in; }
.gallery-main img { width:100%; height:100%; object-fit:cover; transition:transform .6s cubic-bezier(.22,1,.36,1); }
.gallery-main:hover img { transform:scale(1.13); }
.gallery-main > span { position:absolute; left:50%; bottom:14px; display:flex; align-items:center; gap:5px; transform:translateX(-50%); padding:6px 10px; border-radius:999px; color:#4b5563; background:rgba(255,255,255,.9); box-shadow:0 2px 8px rgba(0,0,0,.08); font-size:11px; white-space:nowrap; }
.gallery-thumbs { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-top:12px; }
.gallery-thumbs button { aspect-ratio:1; overflow:hidden; padding:0; border:2px solid transparent; border-radius:10px; background:#fff1f2; cursor:pointer; }
.gallery-thumbs button.active { border-color:#e11d48; }
.gallery-thumbs img { width:100%; height:100%; object-fit:cover; }
.product-trust { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-top:20px; }
.product-trust span { display:flex; flex-direction:column; align-items:center; gap:5px; padding:14px 6px; border:1px solid #f3e8ec; border-radius:12px; color:#e11d48; text-align:center; }
.product-trust b { color:#4b5563; font-size:10px; font-weight:600; }
.florist-note { margin-top:16px; padding:16px; border:1px solid #fce7f3; border-radius:12px; background:#fff8fb; }
.florist-note b { font-size:13px; }
.florist-note p { margin:5px 0 0; color:#6b7280; font-size:12px; line-height:19px; }
.product-copy { padding-top:8px; }
.stock-label { display:inline-flex; padding:5px 10px; border-radius:999px; color:#047857; background:#ecfdf5; font-size:10px; line-height:15px; font-weight:800; letter-spacing:.08em; }
.product-copy h1 { margin:16px 0 8px; font-size:30px; line-height:36px; font-weight:700; }
.product-rating { display:flex; gap:8px; color:#f59e0b; font-size:14px; }
.product-rating a { color:#6b7280; font-size:12px; text-decoration:underline; }
.product-copy > p { margin:18px 0; color:#4b5563; font-size:14px; line-height:23px; }
.detail-price { display:flex; align-items:center; flex-wrap:wrap; gap:12px; padding:18px 0; border-top:1px solid #f3f4f6; border-bottom:1px solid #f3f4f6; }
.detail-price del { color:#9ca3af; font-size:16px; }
.detail-price strong { color:#e11d48; font-size:30px; line-height:36px; font-weight:800; }
.detail-price span { padding:5px 9px; border-radius:999px; color:#be123c; background:#fff1f2; font-size:11px; font-weight:700; }
.whatsapp-order-card { display:grid; grid-template-columns:auto 1fr; gap:13px; align-items:start; margin-top:20px; padding:17px; border:1px solid #bbf7d0; border-radius:14px; background:#f0fdf4; }
.whatsapp-order-icon { display:grid; place-items:center; width:42px; height:42px; border-radius:50%; color:#fff; background:#22c55e; font-size:11px; font-weight:900; }
.whatsapp-order-card b { display:block; color:#14532d; font-size:14px; }
.whatsapp-order-card p { margin:5px 0 0; color:#4b5563; font-size:12px; line-height:19px; }
.delivery-box { display:flex; flex-direction:column; gap:10px; margin-top:20px; padding:16px; border:1px solid #e5e7eb; border-radius:12px; }
.delivery-box > b { margin-bottom:2px; font-size:13px; }
.delivery-box label { color:#4b5563; font-size:13px; }
.delivery-box input { accent-color:#e11d48; }
.detail-config { display:flex; flex-direction:column; gap:12px; margin-top:14px; }
.detail-config section { padding:14px; border:1px solid #f3e8ec; border-radius:12px; }
.detail-config section > b { display:block; margin-bottom:9px; font-size:12px; }
.date-options { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.date-options button { display:flex; flex-direction:column; align-items:center; padding:8px; border:1px solid #e5e7eb; border-radius:9px; color:#4b5563; background:#fff; cursor:pointer; }
.date-options button.active { border-color:#e11d48; color:#e11d48; background:#fff1f2; }
.date-options small { margin-top:2px; font-size:9px; }
.detail-config select,.detail-config input,.detail-config textarea { width:100%; min-height:40px; padding:9px 10px; border:1px solid #e5e7eb; border-radius:9px; outline:0; font:inherit; font-size:12px; }
.detail-config textarea { height:62px; resize:none; }
.detail-config section > small { display:block; margin-top:5px; color:#9ca3af; font-size:10px; }
.detail-field-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.gift-options { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.gift-options label { display:flex; align-items:center; gap:5px; padding:8px; border:1px solid #f3e8ec; border-radius:8px; color:#4b5563; font-size:11px; }
.gift-options label input { width:auto; min-height:0; accent-color:#e11d48; }
.gift-options span { margin-left:auto; color:#e11d48; font-weight:700; }
.purchase-row { display:flex; gap:10px; margin-top:20px; }
.purchase-row .primary-button { flex:1; height:48px; }
.whatsapp-purchase-row { align-items:stretch; }
.whatsapp-order-button { display:flex; align-items:center; justify-content:center; gap:8px; color:#fff; background:#16a34a; box-shadow:0 9px 22px rgba(22,163,74,.24); }
.whatsapp-order-button:hover { color:#fff; background:#15803d; transform:translateY(-1px); }
.quantity { display:flex; height:48px; overflow:hidden; border:1px solid #e5e7eb; border-radius:12px; background:#fff; }
.quantity button { display:grid; place-items:center; width:36px; padding:0; border:0; color:#4b5563; background:#fff; cursor:pointer; }
.quantity input { width:36px; padding:0; border:0; outline:0; text-align:center; font-weight:700; }
.detail-notes { display:grid; grid-template-columns:repeat(2,1fr); gap:8px; margin:20px 0 0; padding:0; list-style:none; color:#6b7280; font-size:12px; }
.product-description { margin-top:56px; border:1px solid #f3e8ec; border-radius:16px; }
.detail-tabs { display:flex; gap:4px; padding:10px; border-bottom:1px solid #f3e8ec; }
.detail-tabs button { height:38px; padding:0 16px; border:0; border-radius:9px; color:#6b7280; background:transparent; font-weight:600; cursor:pointer; }
.detail-tabs button.active { color:#e11d48; background:#fff1f2; }
.product-description article { padding:28px; }
.product-description h2 { margin:0 0 12px; font-size:24px; line-height:32px; }
.product-description h3 { margin:24px 0 8px; font-size:18px; }
.product-description p { margin:0; color:#4b5563; font-size:14px; line-height:24px; }
.related-products { margin-top:56px; }
.related-products h2 { margin:4px 0 20px; font-size:28px; line-height:36px; }
.route-shell:has(.product-detail) { padding-bottom:24px; }
.route-shell:has(.product-detail) > .breadcrumb { height:20px; margin-bottom:12px; }
.route-shell:has(.product-detail) .product-detail { height:auto; }
.route-shell:has(.product-detail) .product-description { height:auto; margin-top:48px; overflow:visible; }
.route-shell:has(.product-detail) .product-description article { padding:22px 28px; }
.route-shell:has(.product-detail) .product-description h3,
.route-shell:has(.product-detail) .product-description h3 + p { display:none; }
.detail-benefits { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; height:auto; margin-top:24px; }
.detail-benefits article { padding:20px; border:1px solid #f3e8ec; border-radius:14px; background:#fff; }
.detail-benefits b { font-size:14px; }
.detail-benefits p { margin:8px 0 0; color:#6b7280; font-size:12px; line-height:19px; }
.detail-policy-panel { height:465.25px; margin-top:32px; overflow:hidden; border:1px solid #f3e8ec; border-radius:16px; background:#fff; }
.detail-policy-panel nav { display:flex; gap:4px; padding:12px; border-bottom:1px solid #f3e8ec; }
.detail-policy-panel nav button { height:38px; padding:0 16px; border:0; border-radius:9px; color:#6b7280; background:transparent; font-size:13px; font-weight:600; }
.detail-policy-panel nav button.active { color:#e11d48; background:#fff1f2; }
.detail-policy-panel article { padding:32px; }
.detail-policy-panel h2 { margin:0 0 12px; font-size:24px; }
.detail-policy-panel h3 { margin:28px 0 8px; font-size:18px; }
.detail-policy-panel p { max-width:800px; color:#4b5563; font-size:14px; line-height:24px; }
.route-shell:has(.product-detail) .related-products { height:auto; margin-top:48px; }
.route-shell:has(.product-detail) .related-products h2 { height:36px; margin-bottom:16px; }

.blog-hero { padding:8px 0 36px; text-align:center; }
.blog-hero h1 { margin:4px 0 6px; font-size:36px; line-height:44px; }
.blog-hero p { margin:0; color:#6b7280; }
.blog-page-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.route-blog-card { overflow:hidden; border:1px solid #f3e1e8; border-radius:16px; color:#111827; background:#fff; transition:transform .25s,box-shadow .25s; }
.route-blog-card:hover { transform:translateY(-4px); box-shadow:0 14px 32px rgba(136,19,64,.1); }
.blog-list-title { height:36px; margin:0 0 24px; font-size:30px; line-height:36px; }
.route-shell:has(.blog-page-grid) { padding-top:32px; padding-bottom:32px; }
.route-blog-card > span { display:block; height:222.5625px; overflow:hidden; }
.route-blog-card img { width:100%; height:100%; object-fit:cover; transition:transform .5s; }
.route-blog-card:hover img { transform:scale(1.05); }
.route-blog-card > div { height:208px; padding:20px; overflow:hidden; }
.route-blog-card small { color:#e11d48; font-weight:700; }
.route-blog-card h2 { margin:8px 0; font-size:18px; line-height:25px; }
.route-blog-card p { margin:0 0 14px; color:#6b7280; font-size:13px; line-height:20px; }
.route-blog-card time { display:block; margin-bottom:14px; color:#9ca3af; font-size:11px; }
.route-blog-card b { color:#d91c5b; font-size:12px; }
.route-shell:has(.blog-page-grid) .pagination button { width:42px; height:42px; }
.article-page h1,.policy-page h1 { margin:8px 0 14px; font-size:36px; line-height:44px; font-weight:800; }
.article-meta { display:flex; gap:8px; color:#9ca3af; font-size:12px; }
.article-cover { width:100%; max-height:420px; margin:28px 0; border-radius:16px; object-fit:cover; }
.article-page .lead,.policy-page .lead { color:#374151; font-size:18px; line-height:29px; }
.article-page h2,.policy-page h2 { margin:34px 0 10px; font-size:24px; line-height:36px; }
.article-page p,.article-page li,.policy-page p { color:#4b5563; font-size:15px; line-height:27px; }
.article-page blockquote { margin:30px 0; padding:20px 24px; border-left:4px solid #e11d48; color:#831843; background:#fff1f2; font-size:18px; line-height:29px; font-style:italic; }
.article-page li { margin-bottom:7px; }
.article-cta { margin-top:22px; }
.policy-page > section { padding-bottom:24px; border-bottom:1px solid #f3f4f6; }
.faq-toggle { display:flex; justify-content:space-between; width:100%; margin-top:12px; padding:12px 14px; border:1px solid #f3e1e8; border-radius:10px; color:#831843; background:#fff8fb; cursor:pointer; }
.faq-answer { padding:14px; color:#6b7280; font-size:13px; line-height:21px; }

.auth-card { padding:28px; border:1px solid #f3e1e8; border-radius:16px; background:#fff; box-shadow:0 8px 26px rgba(136,19,64,.06); text-align:center; }
.auth-icon,.tracking-large { display:grid; place-items:center; width:52px; height:52px; margin:0 auto 12px; border-radius:15px; color:#e11d48; background:#fff1f2; }
.auth-card h1 { margin:0; font-size:24px; line-height:32px; }
.auth-card > p { margin:6px 0 22px; color:#6b7280; font-size:13px; }
.route-form { display:flex; flex-direction:column; gap:15px; text-align:left; }
.route-form label { display:flex; flex-direction:column; gap:6px; color:#374151; font-size:12px; font-weight:600; }
.route-form input,.route-form select,.route-form textarea { width:100%; min-height:44px; padding:10px 12px; border:1px solid #d1d5db; border-radius:10px; outline:0; color:#111827; background:#fff; font:inherit; transition:border .2s,box-shadow .2s; }
.route-form textarea { resize:vertical; }
.route-form input:focus,.route-form select:focus,.route-form textarea:focus { border-color:#e11d48; box-shadow:0 0 0 3px rgba(225,29,72,.1); }
.auth-links { display:flex; justify-content:space-between; gap:10px; margin-top:18px; color:#6b7280; font-size:12px; }
.auth-links a { color:#e11d48; font-weight:600; }
.whatsapp-redirect { display:flex; flex-direction:column; align-items:center; padding:48px 28px; border:1px solid #bbf7d0; border-radius:18px; background:#f0fdf4; text-align:center; }
.whatsapp-redirect > span { display:grid; place-items:center; width:64px; height:64px; border-radius:50%; color:#fff; background:#22c55e; }
.whatsapp-redirect > span .ui-icon { fill:currentColor; stroke:none; }
.whatsapp-redirect h1 { margin:18px 0 8px; font-size:25px; }
.whatsapp-redirect p { max-width:480px; margin:0 0 22px; color:#4b5563; font-size:13px; line-height:21px; }
.whatsapp-redirect .primary-button { width:min(320px,100%); }
.account-page{display:flex;flex-direction:column;gap:22px}.account-page-head{display:flex;align-items:center;gap:15px;padding:23px 26px;border:1px solid #f3e1e8;border-radius:17px;background:#fff}.account-page-head .auth-icon{flex:0 0 auto;margin:0}.account-page-head small{color:#e11d48;font-size:10px;font-weight:800;letter-spacing:.14em}.account-page-head h1{margin:3px 0 2px;font-size:25px}.account-page-head p{margin:0;color:#6b7280;font-size:12px}.account-settings-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}.account-settings-grid .auth-card{text-align:left}.account-settings-grid .auth-card h2{margin:0 0 18px;font-size:19px}.account-settings-grid .primary-button{width:100%;margin-top:4px}
.empty-state { display:flex; flex-direction:column; align-items:center; justify-content:center; min-height:300px; padding:40px; border:1px dashed #f1d8e1; border-radius:16px; text-align:center; background:#fffbfc; }
.empty-state > span { display:grid; place-items:center; width:72px; height:72px; border-radius:50%; color:#e11d48; background:#fff1f2; }
.empty-state h2 { margin:18px 0 5px; font-size:20px; }
.empty-state p { margin:0 0 20px; color:#6b7280; }

.cart-layout,.checkout-layout { display:grid; grid-template-columns:1fr 320px; align-items:start; gap:24px; }
.cart-list { border:1px solid #f3e8ec; border-radius:16px; }
.cart-row { display:grid; grid-template-columns:80px 1fr auto 110px 32px; align-items:center; gap:16px; padding:16px; border-bottom:1px solid #f3e8ec; }
.cart-row:last-child { border-bottom:0; }
.cart-row img { width:80px; height:80px; border-radius:10px; object-fit:cover; }
.cart-row div:nth-child(2) { display:flex; flex-direction:column; gap:5px; }
.cart-row div:nth-child(2) a { color:#111827; font-size:14px; font-weight:700; }
.cart-row small { color:#6b7280; }
.cart-row strong { color:#e11d48; font-size:15px; text-align:right; }
.remove-cart { border:0; color:#9ca3af; background:transparent; font-size:22px; cursor:pointer; }
.cart-summary { position:sticky; top:18px; padding:20px; border:1px solid #f3e8ec; border-radius:16px; background:#fff; box-shadow:0 8px 24px rgba(136,19,64,.05); }
.cart-summary h2 { margin:0 0 18px; font-size:18px; }
.cart-summary p { display:flex; justify-content:space-between; margin:10px 0; color:#6b7280; font-size:13px; }
.cart-summary p b { color:#374151; }
.cart-summary hr { margin:16px 0; border:0; border-top:1px solid #f3e8ec; }
.cart-summary .total { align-items:center; }
.cart-summary .total strong { color:#e11d48; font-size:20px; }
.cart-summary .primary-button { width:100%; margin-top:10px; }
.cart-summary > small { display:block; margin-top:12px; color:#9ca3af; text-align:center; }
.checkout-fields { display:flex; flex-direction:column; gap:18px; }
.checkout-fields section { padding:22px; border:1px solid #f3e8ec; border-radius:16px; }
.checkout-fields h2 { margin:0 0 18px; font-size:18px; }
.form-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:15px; }
.form-grid .wide { grid-column:1 / -1; }

.contact-layout { display:grid; grid-template-columns:360px 1fr; gap:32px; }
.contact-layout > aside { padding:28px; border-radius:18px; color:#fff; background:linear-gradient(145deg,#e11d48,#be185d); }
.contact-icon { display:grid; place-items:center; width:52px; height:52px; border-radius:14px; color:#e11d48; background:#fff; }
.contact-layout aside h2 { margin:20px 0 8px; font-size:24px; }
.contact-layout aside > p { margin:0 0 28px; font-size:13px; line-height:22px; opacity:.9; }
.contact-layout aside a { display:flex; flex-direction:column; gap:3px; margin-bottom:18px; padding-bottom:18px; border-bottom:1px solid rgba(255,255,255,.2); color:#fff; }
.contact-layout aside a b { font-size:10px; letter-spacing:.12em; opacity:.75; }
.contact-layout aside a span { font-size:14px; font-weight:600; }
.contact-layout aside small { opacity:.8; }
.contact-form { padding:28px; border:1px solid #f3e8ec; border-radius:18px; }
.contact-form .primary-button { align-self:flex-start; min-width:130px; }
.tracking-page { padding:16px 0 24px; text-align:center; }
.tracking-page h1 { margin:0; font-size:30px; line-height:36px; font-weight:800; }
.tracking-page > p { margin:8px 0 24px; color:#6b7280; }
.tracking-search { flex-direction:row; width:560px; max-width:100%; margin:0 auto; }
.tracking-search input { height:50px; }
.tracking-result { margin:28px 0 0; padding:24px; border:1px solid #f3e8ec; border-radius:14px; color:#374151; background:#fffafc; }
.tracking-result p { margin:6px 0 0; color:#6b7280; font-size:13px; }
.tracking-help { display:flex; justify-content:center; gap:14px; margin-top:24px; color:#6b7280; font-size:12px; }
.tracking-help a { color:#e11d48; font-weight:700; }
.order-status { display:flex; flex-direction:column; gap:5px; }
.order-status > span { color:#6b7280; font-size:13px; }
.order-status > div { display:grid; grid-template-columns:repeat(4,1fr); gap:6px; margin-top:16px; }
.order-status i { height:5px; border-radius:99px; background:#e5e7eb; }
.order-status i.done { background:#22c55e; }
.not-found { display:flex; flex-direction:column; align-items:center; padding:60px 0 80px; text-align:center; }
.not-found > b { color:#ffe4e6; font-size:118px; line-height:1; font-weight:900; }
.not-found h1 { margin:-16px 0 8px; font-size:28px; }
.not-found p { margin:0 0 22px; color:#6b7280; }
.route-shell-narrow .auth-icon { display:none; }
.route-shell-narrow:has([data-form="login"]) { height:450px; }
.route-shell-narrow:has([data-form="register"]) { height:618px; }
.route-shell-cart:has(.empty-state) .empty-state { height:254px; min-height:0; padding:20px; }
.route-shell-contact { padding-bottom:64px; }
.route-shell-article:has(.policy-page) { min-height:1408px; }
.route-shell-article:has(.tracking-page) { height:592px; }

@media (max-width: 1000px) {
  .route-product-grid { grid-template-columns:repeat(3,1fr); }
  .product-detail { gap:32px; }
  .blog-page-grid { grid-template-columns:repeat(2,1fr); }
  .contact-layout { grid-template-columns:300px 1fr; }
}

@media (max-width: 800px) {
  .nav-dropdown { display:none; }
  .route-shell { padding:24px 12px 44px; }
  .route-shell-narrow,.route-shell-article,.route-shell-cart,.route-shell-contact { width:100%; }
  .breadcrumb { margin-bottom:18px; }
  .listing-heading { align-items:flex-start; flex-direction:column; gap:14px; }
  .listing-heading h1 { font-size:25px; line-height:32px; }
  .listing-actions { width:100%; }
  .listing-actions label { flex:1; }
  .listing-actions select { width:100%; min-width:0; }
  .filter-panel { grid-template-columns:repeat(2,1fr); }
  .filter-panel label:has(input[type="checkbox"]) { grid-column:1 / -1; }
  .route-product-grid { grid-template-columns:repeat(2,1fr); gap:12px; }
  .route-product-body { height:153px; }
  .card-tools { opacity:1; transform:none; }
  .card-tools button:not(:first-child) { display:none; }
  .product-detail { grid-template-columns:1fr; gap:28px; }
  .product-copy { padding-top:0; }
  .product-copy h1 { font-size:25px; line-height:32px; }
  .detail-price strong { font-size:25px; }
  .product-trust { grid-template-columns:repeat(3,1fr); }
  .purchase-row { flex-wrap:wrap; }
  .purchase-row .primary-button { min-width:200px; }
  .product-description { margin-top:40px; }
  .detail-tabs { overflow-x:auto; }
  .detail-tabs button { white-space:nowrap; }
  .product-description article { padding:20px; }
  .related-products { margin-top:40px; }
  .blog-page-grid { grid-template-columns:1fr; }
  .route-blog-card { display:grid; grid-template-columns:130px 1fr; }
  .route-blog-card > span { height:100%; min-height:210px; }
  .route-blog-card > div { min-height:210px; padding:16px; }
  .route-blog-card h2 { font-size:16px; line-height:22px; }
  .article-page h1,.policy-page h1 { font-size:30px; line-height:38px; }
  .article-cover { margin:22px 0; }
  .auth-card { padding:24px 18px; }
  .cart-layout,.checkout-layout,.contact-layout { grid-template-columns:1fr; }
  .cart-summary { position:static; }
  .cart-row { grid-template-columns:64px 1fr auto; gap:12px; }
  .cart-row img { width:64px; height:64px; }
  .cart-row .quantity { grid-column:2; width:max-content; }
  .cart-row > strong { grid-column:3; grid-row:2; }
  .cart-row .remove-cart { grid-column:3; grid-row:1; }
  .contact-layout > aside,.contact-form { padding:22px; }
  .tracking-search { flex-direction:column; }
  .tracking-search .primary-button { width:100%; }
}

@media (max-width: 430px) {
  .route-shell { padding-top:20px; }
  .route-product-body h3 { min-height:40px; font-size:13px; line-height:20px; }
  .route-price strong { font-size:16px; }
  .route-price b { display:none; }
  .filter-panel { grid-template-columns:1fr; }
  .filter-panel label:has(input[type="checkbox"]) { grid-column:auto; }
  .product-trust b { font-size:9px; }
  .detail-notes { grid-template-columns:1fr; }
  .whatsapp-order-card { grid-template-columns:1fr; }
  .whatsapp-order-icon { width:38px; height:38px; }
  .whatsapp-purchase-row { flex-wrap:nowrap; }
  .whatsapp-purchase-row .primary-button { min-width:0; font-size:13px; }
  .detail-benefits { grid-template-columns:1fr; }
  .blog-hero h1 { font-size:30px; }
  .route-blog-card { grid-template-columns:1fr; }
  .route-blog-card > span { height:190px; min-height:0; }
  .route-blog-card > div { min-height:0; }
  .form-grid { grid-template-columns:1fr; }
  .form-grid .wide { grid-column:auto; }
  .auth-links { flex-direction:column; }
  .account-settings-grid{grid-template-columns:1fr}.account-page-head{align-items:flex-start;padding:20px}
}