#cart-panel { transform: translateX(100%); transition: transform 0.35s; }
#cart-panel.open { transform: translateX(0px); }
.modal { opacity: 0; pointer-events: none; transition: opacity 0.3s; }
.modal.open { opacity: 1; pointer-events: auto; }
.modal-content { transform: scale(0.9); transition: transform 0.3s; }
.modal.open .modal-content { transform: scale(1); margin-top: 100px; }
.overlay { opacity: 0; pointer-events: none; transition: opacity 0.3s; }
.overlay.open { opacity: 1; pointer-events: auto; }
.phone-blink { animation: 2s ease-in-out infinite blink; }
@keyframes blink {
0%, 100% { transform: scale(1); box-shadow: rgba(196, 30, 58, 0.7) 0px 0px 0px 0px; }
50% { transform: scale(1.1); box-shadow: rgba(196, 30, 58, 0) 0px 0px 0px 14px; }
}
html { scroll-behavior: smooth; }
body { }
h1, h2, h3, h4, h5, h6 { }
.reveal.active { opacity: 1; transform: translateY(0px); }
.petal { position: absolute; width: 12px; height: 12px; background: radial-gradient(circle, rgba(255, 122, 141, 0.8) 0%, rgba(196, 30, 58, 0.4) 100%); border-radius: 50% 0px 50% 50%; pointer-events: none; opacity: 0.6; animation: 15s linear infinite float; }
@keyframes float {
0% { transform: translateY(0px) rotate(0deg) translateX(0px); opacity: 0; }
10% { opacity: 0.7; }
90% { opacity: 0.7; }
100% { transform: translateY(-100vh) rotate(360deg) translateX(50px); opacity: 0; }
}
.btn-rose:hover { transform: translateY(-2px); box-shadow: rgba(196, 30, 58, 0.45) 0px 8px 24px; background: linear-gradient(135deg, rgb(161, 29, 52) 0%, rgb(92, 0, 21) 100%); }
.btn-outline { background: white; color: rgb(196, 30, 58) !important; border: 2px solid rgb(196, 30, 58); font-weight: 600; transition: 0.3s; }
.btn-outline:hover { background: rgb(255, 245, 245); transform: translateY(-2px); }
.divider-rose { height: 4px; background: linear-gradient(90deg, transparent, rgb(196, 30, 58), transparent); border-radius: 2px; }
.modal { opacity: 0; pointer-events: none; transition: opacity 0.3s; }
.modal-content { transform: scale(0.9); transition: transform 0.3s; }
.overlay { opacity: 0; pointer-events: none; transition: opacity 0.3s; }
.phone-blink { animation: 2s ease-in-out infinite blink-phone; }
@keyframes blink-phone {
0%, 100% { transform: scale(1); opacity: 1; box-shadow: rgba(196, 30, 58, 0.7) 0px 0px 0px 0px; }
50% { transform: scale(1.1); opacity: 0.9; box-shadow: rgba(196, 30, 58, 0) 0px 0px 0px 15px; }
}
.btn-rose:hover { transform: translateY(-2px); box-shadow: rgba(196, 30, 58, 0.4) 0px 8px 24px; }
.reveal { opacity: 0; transform: translateY(20px); transition: 0.65s cubic-bezier(0.4, 0, 0.2, 1); }
.petal { position: absolute; width: 10px; height: 10px; background: radial-gradient(circle, rgba(255, 122, 141, 0.8) 0%, rgba(196, 30, 58, 0.4) 100%); border-radius: 50% 0px 50% 50%; pointer-events: none; opacity: 0.5; animation: 16s linear infinite float; }
@keyframes float {
0% { transform: translateY(0px) rotate(0deg); opacity: 0; }
10% { opacity: 0.6; }
90% { opacity: 0.6; }
100% { transform: translateY(-100vh) rotate(360deg) translateX(40px); opacity: 0; }
}
.progress-dot.done { background: rgb(196, 30, 58); color: white; }
.progress-dot.active { background: linear-gradient(135deg, rgb(196, 30, 58), rgb(128, 0, 32)); color: white; box-shadow: rgba(196, 30, 58, 0.2) 0px 0px 0px 4px; }
.progress-dot.pending { background: rgb(255, 228, 230); color: rgb(196, 168, 173); }
.progress-line.done { background: rgb(196, 30, 58); }
.progress-line.pending { background: rgb(255, 228, 230); }
@keyframes blink-phone {
0%, 100% { transform: scale(1); box-shadow: rgba(196, 30, 58, 0.7) 0px 0px 0px 0px; }
50% { transform: scale(1.1); box-shadow: rgba(196, 30, 58, 0) 0px 0px 0px 14px; }
}
h1, h2, h3, h4, h5, h6 { }
.reveal { opacity: 0; transform: translateY(30px); transition: 0.8s cubic-bezier(0.4, 0, 0.2, 1); }
.reveal.active { opacity: 1; transform: translateY(0px); }
@keyframes float {
0% { transform: translateY(0px) rotate(0deg) translateX(0px); opacity: 0; }
10% { opacity: 0.7; }
90% { opacity: 0.7; }
100% { transform: translateY(-100vh) rotate(360deg) translateX(50px); opacity: 0; }
}
.divider-rose { height: 4px; background: linear-gradient(90deg, transparent, rgb(196, 30, 58), transparent); border-radius: 2px; }
.form-input { width: 100%; border: 1px solid rgb(224, 176, 182); border-radius: 10px; padding: 10px 14px; font-size: 0.95rem; background: rgb(255, 255, 255); transition: border-color 0.3s; }
.phone-blink { animation: 2s ease-in-out infinite blink-phone; }
#cart-panel { transform: translateX(100%); transition: transform 0.35s; }
#cart-panel.open { transform: translateX(0px); }
.modal { opacity: 0; pointer-events: none; transition: opacity 0.3s; }
.modal.open { opacity: 1; pointer-events: auto; }
.modal-content { transform: scale(0.9); transition: transform 0.3s; }
.modal.open .modal-content { transform: scale(1); margin-top: 100px; }
.overlay { opacity: 0; pointer-events: none; transition: opacity 0.3s; }
.overlay.open { opacity: 1; pointer-events: auto; }
html, body { margin: 0px; padding: 0px; min-height: 100%; background: rgb(250, 247, 245); color: rgb(26, 26, 26); }
h1, h2, h3 { }
.petal { position: fixed; pointer-events: none; border-radius: 50% 0px 50% 50%; animation: linear infinite fall; }
@keyframes fall {
0% { transform: translateY(-60px) rotate(0deg) translateX(0px); opacity: 0; }
5% { opacity: 0.7; }
95% { opacity: 0.6; }
100% { transform: translateY(110vh) rotate(540deg) translateX(60px); opacity: 0; }
}
.four-o-four { font-size: clamp(100px, 20vw, 220px); font-weight: 700; line-height: 0.9; background: linear-gradient(135deg, rgb(255, 228, 230) 0%, rgb(255, 196, 204) 40%, rgb(196, 30, 58) 100%) padding-box text; -webkit-text-fill-color: transparent; user-select: none; letter-spacing: -4px; position: relative; z-index: 1; }
.rose-zero { position: relative; display: inline-block; }
.rose-zero::after { content: "🌹"; position: absolute; font-size: clamp(28px, 5vw, 64px); top: 50%; left: 50%; transform: translate(-50%, -52%); -webkit-text-fill-color: initial; filter: drop-shadow(rgba(196, 30, 58, 0.35) 0px 2px 8px); animation: 6s ease-in-out infinite roseSpin; }
@keyframes roseSpin {
0%, 100% { transform: translate(-50%, -52%) rotate(-8deg) scale(1); }
50% { transform: translate(-50%, -56%) rotate(8deg) scale(1.08); }
}
.btn-rose { background: linear-gradient(135deg, rgb(196, 30, 58), rgb(128, 0, 32)); color: rgb(255, 255, 255); font-weight: 600; transition: 0.3s; align-items: center; gap: 8px; text-decoration: none; }
.btn-rose:hover { transform: translateY(-3px); box-shadow: rgba(196, 30, 58, 0.4) 0px 10px 28px; }
.btn-ghost { background: white; color: rgb(196, 30, 58); border: 2px solid rgb(255, 228, 230); font-weight: 600; transition: 0.3s; display: inline-flex; align-items: center; gap: 8px; text-decoration: none; }
.btn-ghost:hover { border-color: rgb(255, 196, 204); transform: translateY(-3px); box-shadow: rgba(196, 30, 58, 0.12) 0px 6px 20px; }
.quick-link { display: flex; align-items: center; gap: 12px; padding: 14px 18px; background: white; border-radius: 16px; border: 1.5px solid rgb(255, 228, 230); text-decoration: none; color: rgb(26, 26, 26); transition: 0.25s; }
.quick-link:hover { border-color: rgb(255, 196, 204); transform: translateY(-4px); box-shadow: rgba(196, 30, 58, 0.12) 0px 8px 24px; background: rgb(255, 245, 245); }
.quick-link-icon { width: 44px; height: 44px; border-radius: 12px; background: rgb(255, 245, 245); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
#countdown { font-variant-numeric: tabular-nums; }
.search-bar { background: white; border: 1.5px solid rgb(229, 208, 212); border-radius: 50px; display: flex; align-items: center; overflow: hidden; transition: border-color 0.25s, box-shadow 0.25s; }
.search-bar:focus-within { border-color: rgb(196, 30, 58); box-shadow: rgba(196, 30, 58, 0.1) 0px 0px 0px 3px; }
.search-bar input { flex: 1 1 0%; border: medium; outline: none; padding: 13px 20px; font-size: 0.95rem; background: transparent; color: rgb(26, 26, 26); }
.search-bar input::placeholder { color: rgb(196, 168, 173); }
.search-bar button { background: linear-gradient(135deg, rgb(196, 30, 58), rgb(128, 0, 32)); color: white; border: medium; padding: 10px 20px; margin: 4px; border-radius: 50px; font-weight: 600; font-size: 0.85rem; cursor: pointer; transition: 0.2s; white-space: nowrap; }
.search-bar button:hover { opacity: 0.9; }
.wave-divider { width: 100%; overflow: hidden; line-height: 0; }
.wave-divider svg { display: block; }
.reveal { opacity: 0; transform: translateY(30px); transition: 0.8s cubic-bezier(0.4, 0, 0.2, 1); }
.reveal-left { opacity: 0; transform: translateX(-40px); transition: 0.8s cubic-bezier(0.4, 0, 0.2, 1); }
.reveal-left.active { opacity: 1; transform: translateX(0px); }
.reveal-right { opacity: 0; transform: translateX(40px); transition: 0.8s cubic-bezier(0.4, 0, 0.2, 1); }
.reveal-right.active { opacity: 1; transform: translateX(0px); }
.card-rose { background: white; border-radius: 20px; transition: 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94); box-shadow: rgba(0, 0, 0, 0.05) 0px 4px 15px; }
.card-rose:hover { transform: translateY(-8px); box-shadow: rgba(196, 30, 58, 0.15) 0px 12px 30px; }
.page-hero { background: linear-gradient(135deg, rgb(255, 245, 245) 0%, rgb(255, 228, 230) 50%, rgb(255, 196, 204) 100%); position: relative; overflow: hidden; }
.page-hero::before { content: ""; position: absolute; inset: 0px; background: radial-gradient(circle at 20% 50%, rgba(196, 30, 58, 0.06) 0%, transparent 50%), radial-gradient(circle at 80% 80%, rgba(196, 30, 58, 0.06) 0%, transparent 50%); pointer-events: none; }
.stat-card { background: white; border-radius: 24px; border: 1.5px solid rgb(255, 228, 230); box-shadow: rgba(196, 30, 58, 0.06) 0px 4px 20px; transition: 0.35s; }
.stat-card:hover { transform: translateY(-6px); box-shadow: rgba(196, 30, 58, 0.14) 0px 16px 40px; border-color: rgb(255, 196, 204); }
.stat-number { font-family: "Playfair Display", serif; font-size: 3.5rem; font-weight: 700; color: rgb(196, 30, 58); line-height: 1; }
.timeline-item { position: relative; padding-left: 48px; }
.timeline-item::before { content: ""; position: absolute; left: 16px; top: 32px; bottom: -16px; width: 2px; background: linear-gradient(rgb(196, 30, 58), rgb(255, 228, 230)); }
.timeline-item:last-child::before { display: none; }
.timeline-dot { position: absolute; left: 6px; top: 8px; width: 22px; height: 22px; border-radius: 50%; background: linear-gradient(135deg, rgb(196, 30, 58), rgb(128, 0, 32)); border: 3px solid white; box-shadow: rgb(255, 228, 230) 0px 0px 0px 3px; }
.process-step { position: relative; }
.process-step:not(:last-child)::after { content: "→"; position: absolute; right: -18px; top: 50%; transform: translateY(-50%); color: rgb(255, 196, 204); font-size: 1.5rem; font-weight: 300; }
@media (max-width: 768px) {
  .process-step:not(:last-child)::after { display: none; }
}
.guarantee-card { background: white; border-radius: 20px; border: 1.5px solid rgb(255, 228, 230); padding: 28px; transition: 0.3s; }
.guarantee-card:hover { border-color: rgb(196, 30, 58); box-shadow: rgba(196, 30, 58, 0.1) 0px 8px 28px; transform: translateY(-4px); }
.team-card { background: white; border-radius: 24px; overflow: hidden; box-shadow: rgba(0, 0, 0, 0.06) 0px 4px 15px; transition: 0.35s; }
.team-card:hover { transform: translateY(-8px); box-shadow: rgba(196, 30, 58, 0.15) 0px 16px 40px; }
.team-img-wrap { position: relative; overflow: hidden; height: 280px; }
.team-img-wrap img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s; }
.team-card:hover .team-img-wrap img { transform: scale(1.06); }
.team-overlay { position: absolute; inset: 0px; background: linear-gradient(to top, rgba(92, 0, 21, 0.7) 0%, transparent 50%); }
.salon-photo { border-radius: 20px; overflow: hidden; box-shadow: rgba(0, 0, 0, 0.1) 0px 8px 30px; }
.salon-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s; display: block; }
.salon-photo:hover img { transform: scale(1.04); }
.quote-block { position: relative; }
.quote-block::before { content: "“"; position: absolute; top: -20px; left: -8px; font-size: 8rem; color: rgb(255, 228, 230); font-family: "Playfair Display", serif; line-height: 1; pointer-events: none; }
.trust-bar { background: linear-gradient(135deg, rgb(92, 0, 21) 0%, rgb(128, 0, 32) 50%, rgb(196, 30, 58) 100%); }
@keyframes countUp {
0% { opacity: 0; transform: translateY(10px); }
100% { opacity: 1; transform: translateY(0px); }
}
.counter-animated { animation: 0.6s forwards countUp; }
.petal { position: absolute; width: 12px; height: 12px; background: radial-gradient(circle, rgba(255, 122, 141, 0.8) 0%, rgba(196, 30, 58, 0.4) 100%); border-radius: 50% 0px 50% 50%; pointer-events: none; opacity: 0.6; animation: 15s linear infinite float; }
@keyframes float {
0% { transform: translateY(0px) rotate(0deg) translateX(0px); opacity: 0; }
10% { opacity: 0.7; }
90% { opacity: 0.7; }
100% { transform: translateY(-100vh) rotate(360deg) translateX(50px); opacity: 0; }
}
.page-hero-about { background: linear-gradient(135deg, rgb(255, 245, 245) 0%, rgb(255, 228, 230) 50%, rgb(255, 196, 204) 100%); position: relative; overflow: hidden; }
.page-hero-about::before { content: ""; position: absolute; inset: 0px; background: radial-gradient(circle at 20% 50%, rgba(196, 30, 58, 0.06) 0%, transparent 50%), radial-gradient(circle at 80% 80%, rgba(196, 30, 58, 0.06) 0%, transparent 50%); pointer-events: none; }
html { scroll-behavior: smooth; }
body { background: rgb(250, 247, 245); color: rgb(26, 26, 26); }
.article-body { font-size: 1.05rem; line-height: 1.85; color: rgb(55, 65, 81); }
.article-body h2 { font-size: 1.75rem; font-weight: 700; color: rgb(128, 0, 32); margin: 2.8rem 0px 1rem; line-height: 1.25; }
.article-body h3 { font-size: 1.3rem; font-weight: 600; color: rgb(26, 26, 26); margin: 2rem 0px 0.75rem; }
.article-body p { margin-bottom: 1.2rem; }
.article-body strong { font-weight: 600; color: rgb(26, 26, 26); }
.article-body em { font-style: italic; color: rgb(107, 114, 128); }
.article-body ul { margin: 0px 0px 1.4rem; padding-left: 0px; list-style: none; }
.article-body ul li { position: relative; padding-left: 1.6rem; margin-bottom: 0.6rem; }
.article-body ul li::before { content: ""; position: absolute; left: 0px; top: 0.65rem; width: 8px; height: 8px; border-radius: 50%; background: linear-gradient(135deg, rgb(196, 30, 58), rgb(128, 0, 32)); }
.article-body ol { counter-reset: ol-cnt 0; margin: 0px 0px 1.4rem; padding-left: 0px; list-style: none; }
.article-body ol li { counter-increment: ol-cnt 1; position: relative; padding-left: 2rem; margin-bottom: 0.6rem; }
.article-body ol li::before { content: counter(ol-cnt); position: absolute; left: 0px; top: 0px; width: 22px; height: 22px; border-radius: 50%; background: linear-gradient(135deg, rgb(196, 30, 58), rgb(128, 0, 32)); color: white; font-size: 0.75rem; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.article-body a { color: rgb(196, 30, 58); text-decoration: underline rgba(196, 30, 58, 0.3); text-underline-offset: 3px; transition: text-decoration-color 0.2s; }
.article-body a:hover { text-decoration-color: rgb(196, 30, 58); }
.blockquote { position: relative; margin: 2.5rem 0px; padding: 24px 28px 24px 52px; background: linear-gradient(135deg, rgb(255, 245, 245), rgb(255, 228, 230)); border-left: 4px solid rgb(196, 30, 58); border-radius: 0px 20px 20px 0px; }
.blockquote::before { content: "“"; position: absolute; left: 14px; top: 4px; font-size: 4.5rem; color: rgb(255, 196, 204); line-height: 1; pointer-events: none; }
.blockquote p { margin: 0px 0px 0.5rem; font-size: 1.1rem; font-style: italic; color: rgb(128, 0, 32); }
.blockquote cite { font-size: 0.85rem; color: rgb(156, 163, 175); font-style: normal; }
.tip-box { background: rgb(236, 253, 245); border: 1.5px solid rgb(187, 247, 208); border-radius: 16px; padding: 18px 22px; margin: 2rem 0px; display: flex; gap: 14px; align-items: flex-start; }
.tip-icon { width: 36px; height: 36px; border-radius: 10px; background: rgb(187, 247, 208); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.tip-box p { margin: 0px; font-size: 0.92rem; color: rgb(22, 101, 52); line-height: 1.6; }
.warn-box { background: rgb(255, 251, 235); border: 1.5px solid rgb(253, 230, 138); border-radius: 16px; padding: 18px 22px; margin: 2rem 0px; display: flex; gap: 14px; align-items: flex-start; }
.warn-icon { width: 36px; height: 36px; border-radius: 10px; background: rgb(253, 230, 138); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.warn-box p { margin: 0px; font-size: 0.92rem; color: rgb(146, 64, 14); line-height: 1.6; }
.section-break { height: 3px; background: linear-gradient(90deg, transparent, rgb(255, 196, 204), transparent); border-radius: 2px; margin: 2.5rem 0px; border: medium; }
.gallery-grid { display: grid; gap: 12px; margin: 2rem 0px; }
.gallery-grid.cols-2 { grid-template-columns: 1fr 1fr; }
.gallery-grid.cols-3 { grid-template-columns: 1fr 1fr 1fr; }
.gallery-grid.featured { grid-template-columns: 2fr 1fr; grid-template-rows: auto auto; }
.gallery-item { position: relative; overflow: hidden; border-radius: 16px; cursor: pointer; }
.gallery-item.tall { grid-row: span 2; }
.gallery-item img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.5s; aspect-ratio: 4 / 3; }
.gallery-item.tall img { aspect-ratio: unset; height: 100%; }
.gallery-item:hover img { transform: scale(1.06); }
.gallery-caption { position: absolute; bottom: 0px; left: 0px; right: 0px; background: linear-gradient(to top, rgba(92, 0, 21, 0.75) 0%, transparent 100%); color: white; font-size: 0.78rem; font-weight: 600; padding: 20px 12px 10px; opacity: 0; transition: opacity 0.3s; }
.gallery-item:hover .gallery-caption { opacity: 1; }
@media (max-width: 640px) {
  .gallery-grid.cols-3 { grid-template-columns: 1fr 1fr; }
  .gallery-grid.featured { grid-template-columns: 1fr; }
  .gallery-item.tall img { aspect-ratio: 4 / 3; }
}
#lightbox { position: fixed; inset: 0px; background: rgba(0, 0, 0, 0.92); z-index: 200; display: none; align-items: center; justify-content: center; padding: 24px; }
#lightbox.open { display: flex; }
#lightbox img { max-width: 90vw; max-height: 88vh; object-fit: contain; border-radius: 12px; }
#lightbox-close { position: absolute; top: 20px; right: 24px; color: white; font-size: 2rem; cursor: pointer; line-height: 1; }
#lightbox-prev, #lightbox-next { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(255, 255, 255, 0.15); color: white; border: medium; width: 48px; height: 48px; border-radius: 50%; font-size: 1.4rem; cursor: pointer; transition: background 0.2s; display: flex; align-items: center; justify-content: center; }
#lightbox-prev { left: 16px; }
#lightbox-next { right: 16px; }
#lightbox-prev:hover, #lightbox-next:hover { background: rgba(255, 255, 255, 0.3); }
#lightbox-counter { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); color: rgba(255, 255, 255, 0.6); font-size: 0.85rem; }
.toc { background: white; border: 1.5px solid rgb(255, 228, 230); border-radius: 20px; padding: 24px 28px; margin-bottom: 2rem; }
.toc-title { font-size: 1rem; font-weight: 700; color: rgb(128, 0, 32); margin-bottom: 12px; display: flex; align-items: center; gap: 8px; }
.toc ol { counter-reset: toc 0; list-style: none; margin: 0px; padding: 0px; }
.toc ol li { counter-increment: toc 1; display: flex; align-items: baseline; gap: 8px; padding: 5px 0px; border-bottom: 1px dotted rgb(255, 228, 230); }
.toc ol li:last-child { border-bottom: medium; }
.toc ol li::before { content: counter(toc); font-size: 0.72rem; font-weight: 700; color: white; background: rgb(196, 30, 58); border-radius: 50%; width: 18px; height: 18px; min-width: 18px; display: flex; align-items: center; justify-content: center; margin-top: 2px; }
.toc ol li a { font-size: 0.88rem; color: rgb(55, 65, 81); text-decoration: none; transition: color 0.2s; line-height: 1.4; }
.toc ol li a:hover { color: rgb(196, 30, 58); }
.variety-card { background: white; border-radius: 20px; border: 1.5px solid rgb(255, 228, 230); overflow: hidden; transition: 0.3s; }
.variety-card:hover { transform: translateY(-5px); box-shadow: rgba(196, 30, 58, 0.12) 0px 12px 32px; border-color: rgb(255, 196, 204); }
.variety-img { height: 160px; overflow: hidden; }
.variety-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s; }
.variety-card:hover .variety-img img { transform: scale(1.07); }
.variety-body { padding: 16px; }
.variety-badge { display: inline-block; font-size: 0.7rem; font-weight: 700; padding: 3px 10px; border-radius: 50px; margin-bottom: 8px; }
.btn-outline { background: white; color: rgb(196, 30, 58) !important; border: 2px solid rgb(255, 228, 230); font-weight: 600; transition: 0.3s; display: inline-flex; align-items: center; gap: 8px; text-decoration: none; }
.btn-outline:hover { border-color: rgb(255, 196, 204); transform: translateY(-2px); box-shadow: rgba(196, 30, 58, 0.1) 0px 6px 18px; }
#reading-progress { position: fixed; top: 0px; left: 0px; height: 3px; background: linear-gradient(90deg, rgb(196, 30, 58), rgb(255, 122, 141)); z-index: 200; transition: width 0.1s; width: 0px; }
.author-card { background: white; border-radius: 20px; border: 1.5px solid rgb(255, 228, 230); padding: 24px; }
.tag { display: inline-block; background: rgb(255, 245, 245); color: rgb(128, 0, 32); font-size: 0.78rem; font-weight: 600; padding: 5px 14px; border-radius: 50px; border: 1px solid rgb(255, 228, 230); transition: 0.2s; text-decoration: none; }
.tag:hover { background: rgb(255, 228, 230); border-color: rgb(255, 196, 204); }
.share-btn { display: flex; align-items: center; gap: 8px; padding: 10px 18px; border-radius: 50px; border: 1.5px solid rgb(255, 228, 230); background: white; font-size: 0.85rem; font-weight: 600; color: rgb(55, 65, 81); cursor: pointer; transition: 0.2s; }
.share-btn:hover { border-color: rgb(255, 196, 204); background: rgb(255, 245, 245); }
.share-btn.copied { border-color: rgb(22, 163, 74); color: rgb(22, 163, 74); background: rgb(236, 253, 245); }
.related-card { background: white; border-radius: 20px; border: 1.5px solid rgb(255, 228, 230); overflow: hidden; transition: 0.3s; text-decoration: none; color: inherit; display: block; }
.related-card:hover { transform: translateY(-6px); box-shadow: rgba(196, 30, 58, 0.12) 0px 14px 36px; border-color: rgb(255, 196, 204); }
.related-img { height: 180px; overflow: hidden; }
.related-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s; }
.related-card:hover .related-img img { transform: scale(1.06); }
.related-body { padding: 20px; }
.btn-outline { background: white; color: rgb(196, 30, 58) !important; border: 2px solid rgb(196, 30, 58); font-weight: 600; transition: 0.3s; }
.form-label { font-size: 0.8rem; font-weight: 600; color: rgb(107, 114, 128); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 6px; display: block; }
.form-input { width: 100%; border: 1.5px solid rgb(229, 208, 212); border-radius: 12px; padding: 12px 14px; font-size: 0.95rem; background: white; transition: border-color 0.25s, box-shadow 0.25s; }
.form-input:focus { outline: none; border-color: rgb(196, 30, 58); box-shadow: rgba(196, 30, 58, 0.1) 0px 0px 0px 3px; }
.form-input::placeholder { color: rgb(196, 168, 173); }
.form-input.error { border-color: rgb(239, 68, 68); }
.form-input.valid { border-color: rgb(22, 163, 74); }
select.form-input { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23C41E3A' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; padding-right: 40px; }
textarea.form-input { resize: none; }
.form-section { background: white; border-radius: 24px; border: 1.5px solid rgb(255, 228, 230); box-shadow: rgba(0, 0, 0, 0.04) 0px 4px 16px; padding: 32px; }
.section-title { font-size: 1.2rem; font-weight: 700; color: rgb(128, 0, 32); margin-bottom: 24px; padding-bottom: 14px; border-bottom: 1px solid rgb(255, 240, 242); display: flex; align-items: center; gap: 10px; }
.section-icon { width: 38px; height: 38px; border-radius: 12px; background: rgb(255, 245, 245); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.delivery-toggle { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 24px; }
.delivery-option { flex: 1 1 0%; min-width: 180px; border: 2px solid rgb(255, 228, 230); border-radius: 16px; padding: 16px 18px; cursor: pointer; transition: 0.25s; background: white; position: relative; }
.delivery-option:hover { border-color: rgb(255, 196, 204); background: rgb(255, 245, 245); }
.delivery-option.selected { border-color: rgb(196, 30, 58); background: rgb(255, 245, 245); box-shadow: rgba(196, 30, 58, 0.1) 0px 0px 0px 3px; }
.delivery-option .radio-dot { width: 20px; height: 20px; border-radius: 50%; border: 2px solid rgb(224, 176, 182); background: white; display: flex; align-items: center; justify-content: center; transition: 0.2s; flex-shrink: 0; }
.delivery-option.selected .radio-dot { border-color: rgb(196, 30, 58); background: rgb(196, 30, 58); }
.delivery-option.selected .radio-dot::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: white; display: block; }
.pay-option { border: 2px solid rgb(255, 228, 230); border-radius: 16px; padding: 18px 20px; cursor: pointer; transition: 0.25s; background: white; display: flex; align-items: flex-start; gap: 14px; }
.pay-option:hover { border-color: rgb(255, 196, 204); background: rgb(255, 245, 245); }
.pay-option.selected { border-color: rgb(196, 30, 58); background: rgb(255, 245, 245); box-shadow: rgba(196, 30, 58, 0.1) 0px 0px 0px 3px; }
.pay-radio { width: 22px; height: 22px; border-radius: 50%; border: 2px solid rgb(224, 176, 182); flex-shrink: 0; margin-top: 2px; display: flex; align-items: center; justify-content: center; transition: 0.2s; }
.pay-option.selected .pay-radio { border-color: rgb(196, 30, 58); background: rgb(196, 30, 58); }
.pay-option.selected .pay-radio::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: white; display: block; }
.cart-item-row { display: flex; gap: 12px; padding: 14px 0px; border-bottom: 1px solid rgb(255, 240, 242); }
.cart-item-row:last-child { border-bottom: medium; }
.cart-img { width: 64px; height: 64px; border-radius: 12px; overflow: hidden; flex-shrink: 0; }
.cart-img img { width: 100%; height: 100%; object-fit: cover; }
.progress-step { display: flex; flex-direction: column; align-items: center; gap: 4px; flex: 1 1 0%; }
.progress-dot { width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 0.8rem; transition: 0.3s; }
.progress-line { flex: 1 1 0%; height: 2px; margin-top: 15px; }
.delivery-cost-badge { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border-radius: 50px; font-size: 0.82rem; font-weight: 700; }
.delivery-cost-badge.free { background: rgb(236, 253, 245); color: rgb(22, 163, 74); border: 1px solid rgb(187, 247, 208); }
.delivery-cost-badge.paid { background: rgb(255, 245, 245); color: rgb(196, 30, 58); border: 1px solid rgb(255, 196, 204); }
.total-row { display: flex; justify-content: space-between; padding: 10px 0px; }
.total-row.final { padding-top: 14px; border-top: 2px solid rgb(255, 228, 230); margin-top: 6px; }
.char-counter { font-size: 0.75rem; color: rgb(156, 163, 175); text-align: right; margin-top: 4px; }
.char-counter.warn { color: rgb(196, 30, 58); }
#toast { position: fixed; bottom: 90px; left: 50%; transform: translateX(-50%) translateY(20px); background: rgb(26, 26, 26); color: white; padding: 12px 24px; border-radius: 50px; font-size: 0.9rem; font-weight: 500; opacity: 0; pointer-events: none; transition: 0.3s; z-index: 100; white-space: nowrap; }
#toast.show { opacity: 1; transform: translateX(-50%) translateY(0px); }
.petal { position: absolute; width: 12px; height: 12px; background: radial-gradient(circle, rgba(255, 122, 141, 0.8) 0%, rgba(196, 30, 58, 0.4) 100%); border-radius: 50% 0px 50% 50%; pointer-events: none; opacity: 0.6; animation: 15s linear infinite float; }
.btn-rose:hover { transform: translateY(-2px); box-shadow: rgba(196, 30, 58, 0.45) 0px 8px 24px; background: linear-gradient(135deg, rgb(161, 29, 52) 0%, rgb(92, 0, 21) 100%); }
.card-rose { background: white; border-radius: 20px; transition: 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94); box-shadow: rgba(0, 0, 0, 0.05) 0px 4px 15px; }
.card-rose:hover { transform: translateY(-8px); box-shadow: rgba(196, 30, 58, 0.15) 0px 12px 30px; }
.form-input:focus { outline: none; border-color: rgb(196, 30, 58); box-shadow: rgba(196, 30, 58, 0.1) 0px 0px 0px 3px; }
@keyframes blink-phone {
0%, 100% { transform: scale(1); opacity: 1; box-shadow: rgba(196, 30, 58, 0.7) 0px 0px 0px 0px; }
50% { transform: scale(1.1); opacity: 0.9; box-shadow: rgba(196, 30, 58, 0) 0px 0px 0px 15px; }
}
.contact-link { display: flex; align-items: center; gap: 14px; padding: 16px 20px; background: white; border-radius: 16px; border: 1.5px solid rgb(255, 228, 230); transition: 0.3s; text-decoration: none; color: inherit; }
.contact-link:hover { border-color: rgb(196, 30, 58); transform: translateY(-3px); box-shadow: rgba(196, 30, 58, 0.12) 0px 8px 24px; background: rgb(255, 245, 245); }
.contact-link .icon-wrap { width: 48px; height: 48px; border-radius: 14px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.requisites-card { background: white; border-radius: 24px; border: 1.5px solid rgb(255, 228, 230); box-shadow: rgba(196, 30, 58, 0.06) 0px 4px 20px; }
.requisite-row { display: flex; justify-content: space-between; align-items: flex-start; padding: 14px 0px; border-bottom: 1px solid rgb(255, 240, 242); gap: 16px; }
.requisite-row:last-child { border-bottom: medium; }
.requisite-label { font-size: 0.8rem; color: rgb(156, 163, 175); text-transform: uppercase; letter-spacing: 0.05em; font-weight: 600; flex-shrink: 0; }
.requisite-value { font-size: 0.95rem; color: rgb(26, 26, 26); font-weight: 500; text-align: right; }
.page-hero { background: linear-gradient(135deg, rgb(255, 245, 245) 0%, rgb(255, 228, 230) 50%, rgb(255, 196, 204) 100%); position: relative; overflow: hidden; }
.page-hero::before { content: ""; position: absolute; inset: 0px; background: radial-gradient(circle at 20% 50%, rgba(196, 30, 58, 0.06) 0%, transparent 50%), radial-gradient(circle at 80% 80%, rgba(196, 30, 58, 0.06) 0%, transparent 50%); pointer-events: none; }
.social-pill { display: inline-flex; align-items: center; gap: 10px; padding: 12px 20px; border-radius: 50px; font-weight: 600; font-size: 0.9rem; transition: 0.3s; text-decoration: none; border: 2px solid transparent; }
.social-pill:hover { transform: translateY(-3px); box-shadow: rgba(0, 0, 0, 0.15) 0px 6px 20px; }
.map-frame { width: 100%; height: 400px; border-radius: 20px; overflow: hidden; border: 1.5px solid rgb(255, 228, 230); box-shadow: rgba(196, 30, 58, 0.08) 0px 4px 20px; }
#promo-popup { position: fixed; bottom: 0px; left: 0px; right: 0px; z-index: 60; display: flex; justify-content: center; align-items: flex-end; pointer-events: none; }
#popup-content { background: white; border-radius: 24px 24px 0px 0px; padding: 28px 24px; width: 100%; max-width: 480px; box-shadow: rgba(0, 0, 0, 0.12) 0px -8px 30px; transform: translateY(0px); transition: transform 0.5s; pointer-events: auto; }
#popup-content.translate-y-32 { transform: translateY(200px); }
.reveal { opacity: 0; transform: translateY(28px); transition: 0.75s cubic-bezier(0.4, 0, 0.2, 1); }
@keyframes float {
0% { transform: translateY(0px) rotate(0deg); opacity: 0; }
10% { opacity: 0.7; }
90% { opacity: 0.7; }
100% { transform: translateY(-100vh) rotate(360deg) translateX(40px); opacity: 0; }
}
.btn-rose:hover { transform: translateY(-2px); box-shadow: rgba(196, 30, 58, 0.45) 0px 8px 24px; }
.page-hero { background: linear-gradient(135deg, rgb(255, 245, 245) 0%, rgb(255, 228, 230) 60%, rgb(255, 196, 204) 100%); position: relative; overflow: hidden; }
.page-hero::before { content: ""; position: absolute; inset: 0px; background: radial-gradient(circle at 15% 50%, rgba(196, 30, 58, 0.07) 0%, transparent 55%), radial-gradient(circle at 85% 80%, rgba(196, 30, 58, 0.06) 0%, transparent 55%); pointer-events: none; }
.delivery-card { background: white; border-radius: 20px; border: 1.5px solid rgb(255, 228, 230); box-shadow: rgba(0, 0, 0, 0.05) 0px 4px 16px; transition: 0.35s; }
.delivery-card:hover { border-color: rgb(255, 196, 204); box-shadow: rgba(196, 30, 58, 0.12) 0px 10px 30px; transform: translateY(-5px); }
.delivery-icon { width: 56px; height: 56px; border-radius: 16px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.tariff-row { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0px; border-bottom: 1px solid rgb(255, 240, 242); }
.tariff-row:last-child { border-bottom: medium; }
.tariff-cell { padding: 14px 16px; font-size: 0.9rem; }
.tariff-cell.label { color: rgb(107, 114, 128); }
.tariff-cell.value { font-weight: 600; color: rgb(26, 26, 26); }
.tariff-cell.free { font-weight: 700; color: rgb(22, 163, 74); }
.tariff-cell.paid { font-weight: 700; color: rgb(196, 30, 58); }
.tariff-head { background: linear-gradient(135deg, rgb(128, 0, 32), rgb(196, 30, 58)); color: white; font-weight: 700; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.06em; }
.step-line { position: relative; }
.step-line:not(:last-child)::after { content: ""; position: absolute; right: -1px; top: 50%; transform: translateY(-50%); width: 2px; height: 60%; background: linear-gradient(rgb(255, 228, 230), rgb(196, 30, 58), rgb(255, 228, 230)); display: none; }
@media (min-width: 768px) {
  .step-line:not(:last-child)::after { display: none; }
}
.pay-card { background: white; border-radius: 20px; border: 1.5px solid rgb(255, 228, 230); padding: 24px; transition: 0.3s; }
.pay-card:hover { border-color: rgb(196, 30, 58); box-shadow: rgba(196, 30, 58, 0.1) 0px 8px 24px; transform: translateY(-4px); }
.faq-item { border-bottom: 1px solid rgb(255, 240, 242); }
.faq-answer { max-height: 0px; overflow: hidden; transition: max-height 0.35s; }
.faq-item.open .faq-answer { max-height: 400px; }
.faq-item.open .faq-chevron { transform: rotate(180deg); }
.faq-chevron { transition: transform 0.3s; flex-shrink: 0; }
.warning-block { background: linear-gradient(135deg, rgb(255, 245, 245), rgb(255, 228, 230)); border: 1.5px solid rgb(255, 196, 204); border-radius: 20px; }
.info-block { background: linear-gradient(135deg, rgb(240, 253, 244), rgb(220, 252, 231)); border: 1.5px solid rgb(187, 247, 208); border-radius: 20px; }
.pay-logo { background: white; border: 1.5px solid rgb(229, 231, 235); border-radius: 12px; padding: 10px 18px; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 0.9rem; transition: 0.25s; }
.pay-logo:hover { border-color: rgb(196, 30, 58); box-shadow: rgba(196, 30, 58, 0.12) 0px 4px 12px; }
.page-nav { backdrop-filter: blur(8px); border-bottom: 1px solid rgb(255, 228, 230); }
.page-nav a { font-size: 0.85rem; font-weight: 600; color: rgb(107, 114, 128); padding: 12px 16px; transition: color 0.2s; white-space: nowrap; }
.page-nav a:hover, .page-nav a.active { color: rgb(196, 30, 58); }
.petal { position: absolute; width: 12px; height: 12px; background: radial-gradient(circle, rgba(255, 122, 141, 0.8) 0%, rgba(196, 30, 58, 0.4) 100%); border-radius: 50% 0px 50% 50%; pointer-events: none; opacity: 0.6; animation: 15s linear infinite float; }
.filter-btn { background: rgba(255, 255, 255, 0.9); color: rgb(122, 0, 38); border: 2px solid rgb(224, 176, 182); font-weight: 600; transition: 0.25s cubic-bezier(0.4, 0, 0.2, 1); }
.filter-btn:hover { background: rgb(255, 240, 243); color: rgb(92, 0, 21); border-color: rgb(196, 30, 58); transform: translateY(-2px); }
.filter-btn.active { background: linear-gradient(135deg, rgb(196, 30, 58) 0%, rgb(128, 0, 32) 100%); color: rgb(255, 255, 255) !important; border-color: rgb(196, 30, 58); box-shadow: rgba(196, 30, 58, 0.35) 0px 4px 14px; transform: translateY(-2px); text-shadow: rgba(0, 0, 0, 0.15) 0px 1px 2px; }
.filter-btn.active:hover { background: linear-gradient(135deg, rgb(161, 29, 52) 0%, rgb(107, 0, 24) 100%); box-shadow: rgba(196, 30, 58, 0.45) 0px 6px 18px; }
.btn-rose:hover { transform: translateY(-2px); box-shadow: rgba(196, 30, 58, 0.45) 0px 8px 24px; background: linear-gradient(135deg, rgb(161, 29, 52) 0%, rgb(92, 0, 21) 100%); }
.card-rose { background: white; border-radius: 20px; transition: 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94); box-shadow: rgba(0, 0, 0, 0.05) 0px 4px 15px; }
.card-rose:hover { transform: translateY(-8px); box-shadow: rgba(196, 30, 58, 0.15) 0px 12px 30px; }
.product-slider { position: relative; overflow: hidden; touch-action: pan-y; user-select: none; }
.product-slider img { transition: opacity 0.4s; }
.slider-dots { position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%); display: flex; gap: 6px; }
.slider-dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(255, 255, 255, 0.6); cursor: pointer; transition: 0.3s; }
.slider-dot.active { background: white; width: 24px; border-radius: 4px; }
.faq-item { border-bottom: 1px solid rgb(241, 229, 229); }
.faq-answer { max-height: 0px; overflow: hidden; transition: max-height 0.3s; }
.faq-item.active .faq-answer { max-height: 300px; }
.faq-item.active .faq-icon { transform: rotate(180deg); }
.master-card { position: relative; overflow: hidden; }
.master-card::before { content: ""; position: absolute; top: -50%; right: -50%; width: 200%; height: 200%; background: radial-gradient(circle, rgba(196, 30, 58, 0.1) 0%, transparent 70%); animation: 20s linear infinite rotate; }
@keyframes rotate {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.blog-card { overflow: hidden; border-radius: 20px; transition: 0.4s; }
.blog-card:hover { transform: translateY(-6px); box-shadow: rgba(0, 0, 0, 0.12) 0px 16px 40px; }
.blog-card img { transition: transform 0.5s; }
.blog-card:hover img { transform: scale(1.08); }
.promo-extravagant { background: linear-gradient(135deg, rgb(255, 245, 245) 0%, rgb(255, 228, 230) 50%, rgb(255, 196, 204) 100%); position: relative; overflow: hidden; }
.promo-extravagant::before { content: ""; position: absolute; inset: 0px; background: radial-gradient(circle at 20% 50%, rgba(196, 30, 58, 0.05) 0%, transparent 50%), radial-gradient(circle at 80% 80%, rgba(196, 30, 58, 0.05) 0%, transparent 50%); pointer-events: none; }
.promo-badge { background: linear-gradient(135deg, rgb(196, 30, 58) 0%, rgb(128, 0, 32) 100%); color: white; padding: 8px 20px; border-radius: 50px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; box-shadow: rgba(196, 20, 58, 0.3) 0px 4px 15px; animation: 2s infinite pulse-slow; }
.price-old { text-decoration: line-through; color: rgb(153, 153, 153); font-size: 0.9em; }
.price-new { color: rgb(196, 30, 58); font-weight: 700; font-size: 1.3em; }
@keyframes blink-phone {
0%, 100% { transform: scale(1); opacity: 1; box-shadow: rgba(196, 30, 58, 0.7) 0px 0px 0px 0px; }
50% { transform: scale(1.1); opacity: 0.9; box-shadow: rgba(196, 30, 58, 0) 0px 0px 0px 15px; }
}
.delivery-badge { background: linear-gradient(135deg, rgb(196, 30, 58) 0%, rgb(161, 29, 52) 100%); color: white; padding: 4px 12px; border-radius: 20px; font-size: 0.75rem; font-weight: 600; display: inline-flex; align-items: center; gap: 4px; box-shadow: rgba(196, 30, 58, 0.3) 0px 2px 8px; }
.badge-hit { background: linear-gradient(135deg, rgb(196, 30, 58) 0%, rgb(128, 0, 32) 100%); color: white; padding: 6px 16px; border-radius: 50px; font-weight: 700; font-size: 0.75rem; box-shadow: rgba(196, 30, 58, 0.3) 0px 2px 10px; }
.badge-new { background: linear-gradient(135deg, rgb(161, 29, 52) 0%, rgb(128, 0, 32) 100%); color: white; padding: 6px 16px; border-radius: 50px; font-weight: 700; font-size: 0.75rem; box-shadow: rgba(196, 30, 58, 0.3) 0px 2px 10px; }
.badge-limited { background: linear-gradient(135deg, rgb(128, 0, 32) 0%, rgb(92, 0, 21) 100%); color: white; padding: 6px 16px; border-radius: 50px; font-weight: 700; font-size: 0.75rem; box-shadow: rgba(128, 0, 32, 0.3) 0px 2px 10px; }
.btn-cart-small { background: linear-gradient(135deg, rgb(196, 30, 58) 0%, rgb(128, 0, 32) 100%); color: white !important; padding: 8px 16px; border-radius: 20px; font-weight: 600; font-size: 0.85rem; transition: 0.3s; flex: 1 1 0%; text-align: center; }
.btn-cart-small:hover { transform: translateY(-2px); box-shadow: rgba(196, 30, 58, 0.4) 0px 4px 12px; }
.btn-details { background: white; color: rgb(196, 30, 58) !important; border: 2px solid rgb(196, 30, 58); padding: 8px 16px; border-radius: 20px; font-weight: 600; font-size: 0.85rem; transition: 0.3s; flex: 1 1 0%; text-align: center; }
.btn-details:hover { background: rgb(255, 245, 245); transform: translateY(-2px); }
.form-input:focus { outline: none; border-color: rgb(196, 30, 58); box-shadow: rgba(196, 30, 58, 0.1) 0px 0px 0px 3px; }
@media (min-width: 768px) {
  .md\:p-8 { padding: 2rem 2rem 4rem !important; }
}
h1, h2, h3 { }
.reveal { opacity: 0; transform: translateY(20px); transition: 0.6s cubic-bezier(0.4, 0, 0.2, 1); }
.btn-ghost { background: transparent; color: rgb(196, 30, 58) !important; border: 2px solid rgb(255, 228, 230); font-weight: 600; transition: 0.3s; }
.btn-ghost:hover { border-color: rgb(196, 30, 58); background: rgb(255, 245, 245); transform: translateY(-2px); }
.review-card { background: white; border-radius: 24px; border: 1.5px solid rgb(255, 228, 230); box-shadow: rgba(0, 0, 0, 0.04) 0px 4px 16px; }
.review-card-header { padding: 20px 28px; border-bottom: 1px solid rgb(255, 240, 242); display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.review-card-body { padding: 24px 28px; }
@media (max-width: 640px) {
  .review-card-header, .review-card-body { padding: 18px 20px; }
}
.card-section-title { display: flex; align-items: center; gap: 10px; font-size: 1rem; font-weight: 700; color: rgb(128, 0, 32); }
.card-icon { width: 36px; height: 36px; border-radius: 10px; background: rgb(255, 245, 245); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.edit-btn { font-size: 0.78rem; font-weight: 600; color: rgb(196, 30, 58); padding: 5px 14px; border: 1.5px solid rgb(255, 228, 230); border-radius: 50px; transition: 0.2s; white-space: nowrap; cursor: pointer; }
.edit-btn:hover { border-color: rgb(196, 30, 58); background: rgb(255, 245, 245); }
.data-row { display: grid; grid-template-columns: 140px 1fr; gap: 12px; padding: 11px 0px; border-bottom: 1px solid rgb(255, 245, 245); align-items: start; }
.data-row:last-child { border-bottom: medium; }
.data-label { font-size: 0.78rem; font-weight: 600; color: rgb(156, 163, 175); text-transform: uppercase; letter-spacing: 0.05em; padding-top: 2px; }
.data-value { font-size: 0.95rem; font-weight: 500; color: rgb(26, 26, 26); word-break: break-word; }
.data-value.empty { color: rgb(209, 197, 199); font-style: italic; font-weight: 400; }
@media (max-width: 480px) {
  .data-row { grid-template-columns: 1fr; gap: 4px; }
  .data-label { font-size: 0.72rem; }
}
.badge { display: inline-flex; align-items: center; gap: 5px; padding: 4px 12px; border-radius: 50px; font-size: 0.78rem; font-weight: 700; }
.badge-green { background: rgb(236, 253, 245); color: rgb(22, 163, 74); border: 1px solid rgb(187, 247, 208); }
.badge-rose { background: rgb(255, 245, 245); color: rgb(196, 30, 58); border: 1px solid rgb(255, 196, 204); }
.badge-blue { background: rgb(239, 246, 255); color: rgb(37, 99, 235); border: 1px solid rgb(191, 219, 254); }
.badge-gray { background: rgb(249, 250, 251); color: rgb(107, 114, 128); border: 1px solid rgb(229, 231, 235); }
.order-item { display: flex; gap: 14px; padding: 14px 0px; border-bottom: 1px solid rgb(255, 240, 242); }
.order-item:last-child { border-bottom: medium; }
.item-img { width: 72px; height: 72px; border-radius: 14px; overflow: hidden; flex-shrink: 0; background: rgb(255, 228, 230); display: flex; align-items: center; justify-content: center; }
.item-img img { width: 100%; height: 100%; object-fit: cover; }
.total-line { display: flex; justify-content: space-between; align-items: center; padding: 10px 0px; }
.total-line.separator { border-top: 1.5px dashed rgb(255, 228, 230); margin-top: 6px; padding-top: 16px; }
.total-line.final-line { border-top: 2px solid rgb(255, 228, 230); margin-top: 4px; padding-top: 16px; }
.progress-dot { width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 0.82rem; }
.progress-line { flex: 1 1 0%; height: 2px; }
.postcard { background: linear-gradient(135deg, rgb(255, 245, 245), rgb(255, 228, 230)); border: 1.5px dashed rgb(255, 196, 204); border-radius: 16px; padding: 18px 20px; position: relative; overflow: hidden; }
.postcard::before { content: "“"; position: absolute; top: -12px; left: 10px; font-size: 5rem; color: rgb(255, 196, 204); font-family: "Playfair Display", serif; line-height: 1; pointer-events: none; }
@media print {
  header, footer, .no-print, #petals-container { display: none !important; }
  body { background: white; }
  .review-card { box-shadow: none; border: 1px solid rgb(221, 221, 221); }
  main { padding-top: 16px !important; }
}
.product-main-slider { position: relative; overflow: hidden; border-radius: 20px; touch-action: pan-y; user-select: none; }
.product-main-slider img { width: 100%; height: 100%; object-fit: cover; transition: opacity 0.4s; }
.slider-arrow { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(255, 255, 255, 0.95); width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: 0.3s; box-shadow: rgba(0, 0, 0, 0.15) 0px 4px 12px; border: 1px solid rgb(255, 196, 204); }
.slider-arrow:hover { background: white; transform: translateY(-50%) scale(1.1); box-shadow: rgba(196, 30, 58, 0.2) 0px 6px 20px; }
.slider-arrow.prev { left: 16px; }
.slider-arrow.next { right: 16px; }
.thumbnail-container { display: flex; gap: 12px; margin-top: 16px; flex-wrap: wrap; }
.thumbnail { width: 76px; height: 76px; border-radius: 12px; overflow: hidden; cursor: pointer; border: 2px solid rgb(229, 231, 235); transition: 0.3s; flex-shrink: 0; }
.thumbnail.active { border-color: rgb(196, 30, 58); }
.thumbnail:hover { border-color: rgb(255, 158, 171); }
.thumbnail img { width: 100%; height: 100%; object-fit: cover; }
.btn-rose:hover { transform: translateY(-2px); box-shadow: rgba(196, 30, 58, 0.4) 0px 8px 24px; }
.btn-outline { background: white; color: rgb(196, 30, 58) !important; border: 2px solid rgb(196, 30, 58); font-weight: 600; transition: 0.3s; }
.btn-outline:hover { background: rgb(255, 245, 245); transform: translateY(-2px); }
.btn-back { display: inline-flex; align-items: center; gap: 8px; color: rgb(107, 114, 128); font-weight: 500; padding: 10px 20px; border-radius: 50px; background: white; border: 1px solid rgb(229, 231, 235); transition: 0.3s; text-decoration: none; }
.btn-back:hover { background: rgb(255, 245, 245); border-color: rgb(196, 30, 58); color: rgb(196, 30, 58); }
.rec-card { background: white; border-radius: 16px; overflow: hidden; transition: 0.35s; box-shadow: rgba(0, 0, 0, 0.05) 0px 4px 15px; }
.rec-card:hover { transform: translateY(-6px); box-shadow: rgba(196, 30, 58, 0.15) 0px 12px 30px; }
#floating-cart-btn { position: fixed; left: 20px; bottom: 20px; z-index: 40; width: 56px; height: 56px; background: white; border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: rgba(0, 0, 0, 0.15) 0px 4px 16px; border: 1px solid rgb(255, 196, 204); transition: 0.3s; cursor: pointer; }
#floating-cart-btn:hover { transform: scale(1.08); box-shadow: rgba(196, 30, 58, 0.25) 0px 6px 20px; }
.spec-row { display: flex; justify-content: space-between; padding: 14px 0px; border-bottom: 1px solid rgb(241, 229, 229); }
.spec-row:last-child { border-bottom: medium; }
.spec-label { color: rgb(107, 114, 128); font-size: 0.95rem; }
.spec-value { font-weight: 600; color: rgb(45, 45, 45); font-size: 0.95rem; }
@media (max-width: 768px) {
  .slider-arrow { width: 38px; height: 38px; }
  .slider-arrow.prev { left: 10px; }
  .slider-arrow.next { right: 10px; }
  .thumbnail { width: 64px; height: 64px; }
}
.reveal { opacity: 0; transform: translateY(28px); transition: 0.7s cubic-bezier(0.4, 0, 0.2, 1); }
.btn-outline-rose { background: white; color: rgb(196, 30, 58) !important; border: 2px solid rgb(196, 30, 58); font-weight: 600; transition: 0.3s; }
.btn-outline-rose:hover { background: rgb(255, 245, 245); transform: translateY(-2px); box-shadow: rgba(196, 30, 58, 0.15) 0px 6px 18px; }
.page-hero { background: linear-gradient(135deg, rgb(92, 0, 21) 0%, rgb(128, 0, 32) 40%, rgb(196, 30, 58) 100%); position: relative; overflow: hidden; }
.page-hero::before { content: ""; position: absolute; inset: 0px; background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.04'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); pointer-events: none; }
.countdown-block { background: rgba(255, 255, 255, 0.12); backdrop-filter: blur(8px); border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 16px; padding: 8px 16px; }
.countdown-num { font-family: "Playfair Display", serif; font-size: 2rem; font-weight: 700; color: white; line-height: 1; }
.countdown-label { font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.08em; color: rgba(255, 255, 255, 0.6); margin-top: 2px; }
.promo-card { background: white; border-radius: 24px; overflow: hidden; box-shadow: rgba(0, 0, 0, 0.06) 0px 4px 20px; border: 1.5px solid rgb(255, 228, 230); display: grid; grid-template-columns: 280px 1fr; transition: 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94); position: relative; }
.promo-card:hover { transform: translateY(-6px); box-shadow: rgba(196, 30, 58, 0.14) 0px 20px 50px; border-color: rgb(255, 196, 204); }
@media (max-width: 768px) {
  .promo-card { grid-template-columns: 1fr; }
}
.promo-img-wrap { position: relative; overflow: hidden; }
.promo-img-wrap img { width: 100%; height: 100%; min-height: 260px; object-fit: cover; transition: transform 0.5s; display: block; }
.promo-card:hover .promo-img-wrap img { transform: scale(1.06); }
.discount-badge { position: absolute; top: 16px; left: 16px; background: linear-gradient(135deg, rgb(196, 30, 58), rgb(128, 0, 32)); color: white; font-weight: 800; font-size: 1.1rem; padding: 6px 14px; border-radius: 50px; box-shadow: rgba(196, 30, 58, 0.5) 0px 4px 16px; font-family: "Playfair Display", serif; }
.promo-type-badge { position: absolute; top: 16px; right: 16px; background: rgba(255, 255, 255, 0.92); backdrop-filter: blur(4px); color: rgb(128, 0, 32); font-weight: 700; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.08em; padding: 5px 12px; border-radius: 50px; border: 1px solid rgba(196, 30, 58, 0.2); }
.card-timer { position: absolute; bottom: 14px; left: 14px; right: 14px; background: rgba(0, 0, 0, 0.65); backdrop-filter: blur(6px); border-radius: 12px; padding: 8px 12px; display: flex; align-items: center; gap: 8px; color: white; font-size: 0.8rem; }
.card-timer-dot { width: 7px; height: 7px; border-radius: 50%; background: rgb(255, 77, 109); animation: 1.5s infinite pulse-dot; flex-shrink: 0; }
@keyframes pulse-dot {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: 0.5; transform: scale(1.3); }
}
.promo-body { padding: 28px 32px; display: flex; flex-direction: column; justify-content: space-between; gap: 16px; }
@media (max-width: 768px) {
  .promo-body { padding: 20px; }
}
.promo-title { font-size: 1.4rem; font-weight: 700; color: rgb(26, 26, 26); line-height: 1.3; margin-bottom: 8px; }
.promo-desc { font-size: 0.92rem; color: rgb(107, 114, 128); line-height: 1.6; }
.promo-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.promo-tag { background: rgb(255, 245, 245); color: rgb(128, 0, 32); font-size: 0.75rem; font-weight: 600; padding: 4px 12px; border-radius: 50px; border: 1px solid rgb(255, 228, 230); }
.price-block { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; }
.price-new { font-family: "Playfair Display", serif; font-size: 2.2rem; font-weight: 700; color: rgb(196, 30, 58); line-height: 1; }
.price-old { font-size: 1.1rem; color: rgb(156, 163, 175); text-decoration: line-through; }
.price-economy { background: rgb(236, 253, 245); color: rgb(22, 163, 74); font-size: 0.8rem; font-weight: 700; padding: 4px 10px; border-radius: 50px; border: 1px solid rgb(187, 247, 208); align-self: center; }
.promo-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.promo-actions a, .promo-actions button { flex: 1 1 0%; min-width: 140px; padding: 13px 20px; border-radius: 50px; text-align: center; font-size: 0.9rem; cursor: pointer; text-decoration: none; display: inline-block; }
.section-divider { height: 1px; background: linear-gradient(90deg, transparent, rgb(255, 228, 230) 20%, rgb(255, 228, 230) 80%, transparent); margin: 4px 0px; }
.filter-btn { background: rgba(255, 255, 255, 0.9); color: rgb(122, 0, 38); border: 2px solid rgb(224, 176, 182); font-weight: 600; transition: 0.25s cubic-bezier(0.4, 0, 0.2, 1); }
.filter-btn:hover { background: rgb(255, 240, 243); color: rgb(92, 0, 21); border-color: rgb(196, 30, 58); transform: translateY(-2px); }
.filter-btn.active { background: linear-gradient(135deg, rgb(196, 30, 58) 0%, rgb(128, 0, 32) 100%); color: rgb(255, 255, 255) !important; border-color: rgb(196, 30, 58); box-shadow: rgba(196, 30, 58, 0.35) 0px 4px 14px; transform: translateY(-2px); }
.promo-counter { background: linear-gradient(135deg, rgb(255, 245, 245), rgb(255, 228, 230)); border: 1.5px solid rgb(255, 196, 204); border-radius: 50px; padding: 6px 18px; font-size: 0.85rem; font-weight: 600; color: rgb(128, 0, 32); }
.new-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: rgb(255, 77, 109); animation: 1.5s infinite pulse-dot; margin-right: 6px; vertical-align: middle; }
.cart-item { background: white; border-radius: 20px; border: 1.5px solid rgb(255, 228, 230); padding: 20px; display: grid; grid-template-columns: 100px 1fr auto; gap: 20px; align-items: center; transition: 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94); position: relative; }
.cart-item:hover { border-color: rgb(255, 196, 204); box-shadow: rgba(196, 30, 58, 0.08) 0px 6px 24px; }
.cart-item.removing { opacity: 0; transform: translateX(30px) scale(0.97); }
@media (max-width: 560px) {
  .cart-item { grid-template-columns: 80px 1fr; grid-template-rows: auto auto; }
  .cart-item-actions { grid-column: 1 / -1; }
}
.cart-item-img { width: 100px; height: 100px; border-radius: 14px; overflow: hidden; flex-shrink: 0; border: 1.5px solid rgb(255, 228, 230); }
.cart-item-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.4s; }
.cart-item:hover .cart-item-img img { transform: scale(1.06); }
@media (max-width: 560px) {
  .cart-item-img { width: 80px; height: 80px; }
}
.remove-btn { width: 34px; height: 34px; border-radius: 50%; background: rgb(255, 245, 245); border: 1.5px solid rgb(255, 228, 230); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: 0.25s; flex-shrink: 0; color: rgb(196, 30, 58); }
.remove-btn:hover { background: rgb(255, 196, 204); border-color: rgb(196, 30, 58); transform: scale(1.1); }
.qty-control { display: inline-flex; align-items: center; gap: 0px; background: rgb(255, 245, 245); border: 1.5px solid rgb(255, 228, 230); border-radius: 50px; overflow: hidden; }
.qty-btn { width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; font-size: 1.1rem; font-weight: 600; color: rgb(196, 30, 58); cursor: pointer; border: medium; background: transparent; transition: background 0.2s; flex-shrink: 0; }
.qty-btn:hover { background: rgb(255, 228, 230); }
.qty-num { min-width: 32px; text-align: center; font-size: 0.95rem; font-weight: 700; color: rgb(26, 26, 26); user-select: none; }
.badge-discount { position: absolute; top: 14px; left: 14px; background: linear-gradient(135deg, rgb(196, 30, 58), rgb(128, 0, 32)); color: white; font-size: 0.7rem; font-weight: 800; padding: 3px 10px; border-radius: 50px; box-shadow: rgba(196, 30, 58, 0.4) 0px 2px 8px; }
.summary-card { background: white; border-radius: 24px; border: 1.5px solid rgb(255, 228, 230); box-shadow: rgba(0, 0, 0, 0.04) 0px 4px 20px; overflow: hidden; }
.summary-row { display: flex; justify-content: space-between; align-items: center; padding: 14px 0px; border-bottom: 1px dashed rgb(255, 240, 242); }
.summary-row:last-of-type { border-bottom: medium; }
.summary-total { display: flex; justify-content: space-between; align-items: center; padding: 20px 0px 0px; border-top: 2px solid rgb(255, 228, 230); margin-top: 8px; }
.promo-bar { display: flex; gap: 8px; background: rgb(255, 245, 245); border: 1.5px solid rgb(255, 228, 230); border-radius: 14px; padding: 8px 8px 8px 16px; transition: border-color 0.25s; }
.promo-bar:focus-within { border-color: rgb(196, 30, 58); }
.promo-bar input { flex: 1 1 0%; background: transparent; border: medium; outline: none; font-size: 0.9rem; color: rgb(26, 26, 26); }
.promo-bar input::placeholder { color: rgb(196, 168, 173); }
.promo-bar button { background: linear-gradient(135deg, rgb(196, 30, 58), rgb(128, 0, 32)); color: white; border: medium; border-radius: 10px; padding: 8px 18px; font-size: 0.82rem; font-weight: 700; cursor: pointer; transition: 0.2s; white-space: nowrap; }
.promo-bar button:hover { opacity: 0.9; }
.free-delivery-bar { height: 6px; background: rgb(255, 228, 230); border-radius: 3px; overflow: hidden; }
.free-delivery-progress { height: 100%; background: linear-gradient(90deg, rgb(196, 30, 58), rgb(255, 122, 141)); border-radius: 3px; transition: width 0.5s; }
.empty-cart { display: none; }
.empty-cart.visible { display: flex; }
.guarantee-chip { display: flex; align-items: center; gap: 8px; background: rgb(255, 245, 245); border: 1px solid rgb(255, 228, 230); border-radius: 12px; padding: 10px 14px; font-size: 0.8rem; font-weight: 500; color: rgb(107, 114, 128); }
.related-card { background: white; border-radius: 20px; border: 1.5px solid rgb(255, 228, 230); overflow: hidden; transition: 0.3s; text-decoration: none; color: inherit; display: block; }
.related-card:hover { transform: translateY(-5px); box-shadow: rgba(196, 30, 58, 0.12) 0px 12px 30px; border-color: rgb(255, 196, 204); }
.related-card-img { height: 160px; overflow: hidden; }
.related-card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s; }
.related-card:hover .related-card-img img { transform: scale(1.06); }
.related-card-body { padding: 16px; }
.divider-rose { height: 4px; background: linear-gradient(90deg, transparent, rgb(196, 30, 58), transparent); border-radius: 2px; }
.buy-now { display: flex; align-items: center; justify-content: center; text-align: center; }
*, ::before, ::after { --tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; --tw-rotate: 0; --tw-skew-x: 0; --tw-skew-y: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-pan-x: ; --tw-pan-y: ; --tw-pinch-zoom: ; --tw-scroll-snap-strictness: proximity; --tw-gradient-from-position: ; --tw-gradient-via-position: ; --tw-gradient-to-position: ; --tw-ordinal: ; --tw-slashed-zero: ; --tw-numeric-figure: ; --tw-numeric-spacing: ; --tw-numeric-fraction: ; --tw-ring-inset: ; --tw-ring-offset-width: 0px; --tw-ring-offset-color: #fff; --tw-ring-color: rgb(59 130 246 / 0.5); --tw-ring-offset-shadow: 0 0 #0000; --tw-ring-shadow: 0 0 #0000; --tw-shadow: 0 0 #0000; --tw-shadow-colored: 0 0 #0000; --tw-blur: ; --tw-brightness: ; --tw-contrast: ; --tw-grayscale: ; --tw-hue-rotate: ; --tw-invert: ; --tw-saturate: ; --tw-sepia: ; --tw-drop-shadow: ; --tw-backdrop-blur: ; --tw-backdrop-brightness: ; --tw-backdrop-contrast: ; --tw-backdrop-grayscale: ; --tw-backdrop-hue-rotate: ; --tw-backdrop-invert: ; --tw-backdrop-opacity: ; --tw-backdrop-saturate: ; --tw-backdrop-sepia: ; --tw-contain-size: ; --tw-contain-layout: ; --tw-contain-paint: ; --tw-contain-style: ; }
::backdrop { --tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; --tw-rotate: 0; --tw-skew-x: 0; --tw-skew-y: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-pan-x: ; --tw-pan-y: ; --tw-pinch-zoom: ; --tw-scroll-snap-strictness: proximity; --tw-gradient-from-position: ; --tw-gradient-via-position: ; --tw-gradient-to-position: ; --tw-ordinal: ; --tw-slashed-zero: ; --tw-numeric-figure: ; --tw-numeric-spacing: ; --tw-numeric-fraction: ; --tw-ring-inset: ; --tw-ring-offset-width: 0px; --tw-ring-offset-color: #fff; --tw-ring-color: rgb(59 130 246 / 0.5); --tw-ring-offset-shadow: 0 0 #0000; --tw-ring-shadow: 0 0 #0000; --tw-shadow: 0 0 #0000; --tw-shadow-colored: 0 0 #0000; --tw-blur: ; --tw-brightness: ; --tw-contrast: ; --tw-grayscale: ; --tw-hue-rotate: ; --tw-invert: ; --tw-saturate: ; --tw-sepia: ; --tw-drop-shadow: ; --tw-backdrop-blur: ; --tw-backdrop-brightness: ; --tw-backdrop-contrast: ; --tw-backdrop-grayscale: ; --tw-backdrop-hue-rotate: ; --tw-backdrop-invert: ; --tw-backdrop-opacity: ; --tw-backdrop-saturate: ; --tw-backdrop-sepia: ; --tw-contain-size: ; --tw-contain-layout: ; --tw-contain-paint: ; --tw-contain-style: ; }
*, ::after, ::before { box-sizing: border-box; border-width: 0px; border-style: solid; border-color: rgb(229, 231, 235); }
::after, ::before { --tw-content: ''; }
:host, html { line-height: 1.5; tab-size: 4; font-family: "Inter", sans-serif; font-feature-settings: normal; font-variation-settings: normal; }
body { margin: 0px; line-height: inherit; }
hr { height: 0px; color: inherit; border-top-width: 1px; }
abbr:where([title]) { text-decoration: underline dotted; }
h1, h2, h3, h4, h5, h6 { font-size: inherit; font-weight: inherit; }
a { color: inherit; text-decoration: inherit; }
b, strong { font-weight: bolder; }
code, kbd, pre, samp { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; font-feature-settings: normal; font-variation-settings: normal; font-size: 1em; }
small { font-size: 80%; }
sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }
sub { bottom: -0.25em; }
sup { top: -0.5em; }
table { text-indent: 0px; border-color: inherit; border-collapse: collapse; }
button, input, optgroup, select, textarea { font-family: inherit; font-feature-settings: inherit; font-variation-settings: inherit; font-size: 100%; font-weight: inherit; line-height: inherit; letter-spacing: inherit; color: inherit; margin: 0px; padding: 0px; }
button, select { text-transform: none; }
button, input:where([type="button"]), input:where([type="reset"]), input:where([type="submit"]) { appearance: button; background-color: transparent; background-image: none; }
:focus-visible { outline: auto; }
:user-invalid { box-shadow: none; }
progress { vertical-align: baseline; }
::-webkit-inner-spin-button, ::-webkit-outer-spin-button { height: auto; }
[type="search"] { appearance: textfield; outline-offset: -2px; }
::-webkit-search-decoration { appearance: none; }
::-webkit-file-upload-button { appearance: button; font: inherit; }
summary { display: list-item; }
blockquote, dd, dl, figure, h1, h2, h3, h4, h5, h6, hr, p, pre { margin: 0px; }
fieldset { margin: 0px; padding: 0px; }
legend { padding: 0px; }
menu, ol, ul { list-style: none; margin: 0px; padding: 0px; }
dialog { padding: 0px; }
textarea { resize: vertical; }
input::placeholder, textarea::placeholder { opacity: 1; color: rgb(156, 163, 175); }
[role="button"], button { cursor: pointer; }
:disabled { cursor: default; }
audio, canvas, embed, iframe, img, object, svg, video { display: block; vertical-align: middle; }
img, video { max-width: 100%; height: auto; }
[hidden]:where(:not([hidden="until-found"])) { display: none; }
.fixed { position: fixed; }
.absolute { position: absolute; }
.relative { position: relative; }
.inset-0 { inset: 0px; }
.-right-1 { right: -0.25rem; }
.-top-1 { top: -0.25rem; }
.right-0 { right: 0px; }
.top-0 { top: 0px; }
.z-40 { z-index: 40; }
.z-50 { z-index: 50; }
.mx-auto { margin-left: auto; margin-right: auto; }
.mb-2 { margin-bottom: 0.5rem; }
.mb-20 { margin-bottom: 5rem; }
.mb-3 { margin-bottom: 0.75rem; }
.mb-4 { margin-bottom: 1rem; }
.mb-6 { margin-bottom: 1.5rem; }
.mb-8 { margin-bottom: 2rem; }
.mt-10 { margin-top: 2.5rem; }
.mt-12 { margin-top: 3rem; }
.mt-2 { margin-top: 0.5rem; }
.mt-4 { margin-top: 1rem; }
.flex { display: flex; }
.grid { display: grid; }
.hidden { display: none; }
.aspect-\[4\/5\] { aspect-ratio: 4 / 5; }
.aspect-square { aspect-ratio: 1 / 1; }
.h-4 { height: 1rem; }
.h-5 { height: 1.25rem; }
.h-6 { height: 1.5rem; }
.h-full { height: 100%; }
.w-4 { width: 1rem; }
.w-5 { width: 1.25rem; }
.w-6 { width: 1.5rem; }
.w-full { width: 100%; }
.max-w-7xl { max-width: 80rem; }
.flex-1 { flex: 1 1 0%; }
.scale-0 { --tw-scale-x: 0; --tw-scale-y: 0; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); }
.flex-col { flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }
.items-center { align-items: center; }
.items-baseline { align-items: baseline; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.gap-1 { gap: 0.25rem; }
.gap-1\.5 { gap: 0.375rem; }
.gap-10 { gap: 2.5rem; }
.gap-2 { gap: 0.5rem; }
.gap-3 { gap: 0.75rem; }
.gap-4 { gap: 1rem; }
.gap-6 { gap: 1.5rem; }
.gap-8 { gap: 2rem; }
.space-y-1 > :not([hidden]) ~ :not([hidden]) { --tw-space-y-reverse: 0; margin-top: calc(0.25rem * calc(1 - var(--tw-space-y-reverse))); margin-bottom: calc(0.25rem * var(--tw-space-y-reverse)); }
.space-y-2 > :not([hidden]) ~ :not([hidden]) { --tw-space-y-reverse: 0; margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse))); margin-bottom: calc(0.5rem * var(--tw-space-y-reverse)); }
.space-y-4 > :not([hidden]) ~ :not([hidden]) { --tw-space-y-reverse: 0; margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse))); margin-bottom: calc(1rem * var(--tw-space-y-reverse)); }
.overflow-hidden { overflow: hidden; }
.overflow-y-auto { overflow-y: auto; }
.rounded { border-radius: 0.25rem; }
.rounded-2xl { border-radius: 1rem; }
.rounded-full { border-radius: 9999px; }
.border { border-width: 1px; }
.border-b { border-bottom-width: 1px; }
.border-t { border-top-width: 1px; }
.border-rose-100 { --tw-border-opacity: 1; border-color: rgb(255 228 230 / var(--tw-border-opacity, 1)); }
.border-rose-200 { --tw-border-opacity: 1; border-color: rgb(255 196 204 / var(--tw-border-opacity, 1)); }
.border-white\/10 { border-color: rgba(255, 255, 255, 0.1); }
.border-white\/20 { border-color: rgba(255, 255, 255, 0.2); }
.bg-black\/40 { background-color: rgba(0, 0, 0, 0.4); }
.bg-green-100 { --tw-bg-opacity: 1; background-color: rgb(220 252 231 / var(--tw-bg-opacity, 1)); }
.bg-rose-100 { --tw-bg-opacity: 1; background-color: rgb(255 228 230 / var(--tw-bg-opacity, 1)); }
.bg-rose-50 { --tw-bg-opacity: 1; background-color: rgb(255 245 245 / var(--tw-bg-opacity, 1)); }
.bg-rose-600 { --tw-bg-opacity: 1; background-color: rgb(196 30 58 / var(--tw-bg-opacity, 1)); }
.bg-rose-900 { --tw-bg-opacity: 1; background-color: rgb(92 0 21 / var(--tw-bg-opacity, 1)); }
.bg-white { --tw-bg-opacity: 1; background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1)); }
.bg-white\/10 { background-color: rgba(255, 255, 255, 0.1); }
.bg-white\/95 { background-color: rgba(255, 255, 255, 0.95); }
.fill-current { fill: currentcolor; }
.object-cover { object-fit: cover; }
.p-2 { padding: 0.5rem; }
.p-4 { padding: 1rem; }
.p-5 { padding: 1.25rem; }
.p-6 { padding: 1.5rem; }
.px-2 { padding-left: 0.5rem; padding-right: 0.5rem; }
.px-3 { padding-left: 0.75rem; padding-right: 0.75rem; }
.px-4 { padding-left: 1rem; padding-right: 1rem; }
.px-6 { padding-left: 1.5rem; padding-right: 1.5rem; }
.py-1 { padding-top: 0.25rem; padding-bottom: 0.25rem; }
.py-16 { padding-top: 4rem; padding-bottom: 4rem; }
.py-2 { padding-top: 0.5rem; padding-bottom: 0.5rem; }
.py-3 { padding-top: 0.75rem; padding-bottom: 0.75rem; }
.py-4 { padding-top: 1rem; padding-bottom: 1rem; }
.pb-20 { padding-bottom: 5rem; }
.pb-4 { padding-bottom: 1rem; }
.pr-2 { padding-right: 0.5rem; }
.pt-4 { padding-top: 1rem; }
.pt-40 { padding-top: 10rem; }
.pt-6 { padding-top: 1.5rem; }
.text-center { text-align: center; }
.font-serif { font-family: "Playfair Display", serif; }
.text-2xl { font-size: 1.5rem; line-height: 2rem; }
.text-3xl { font-size: 1.875rem; line-height: 2.25rem; }
.text-4xl { font-size: 2.25rem; line-height: 2.5rem; }
.text-lg { font-size: 1.125rem; line-height: 1.75rem; }
.text-sm { font-size: 0.875rem; line-height: 1.25rem; }
.text-xl { font-size: 1.25rem; line-height: 1.75rem; }
.text-xs { font-size: 0.75rem; line-height: 1rem; }
.font-bold { font-weight: 700; }
.font-medium { font-weight: 500; }
.font-semibold { font-weight: 600; }
.uppercase { text-transform: uppercase; }
.leading-relaxed { line-height: 1.625; }
.tracking-wide { letter-spacing: 0.025em; }
.tracking-wider { letter-spacing: 0.05em; }
.tracking-widest { letter-spacing: 0.1em; }
.text-gray-400 { --tw-text-opacity: 1; color: rgb(156 163 175 / var(--tw-text-opacity, 1)); }
.text-gray-500 { --tw-text-opacity: 1; color: rgb(107 114 128 / var(--tw-text-opacity, 1)); }
.text-gray-600 { --tw-text-opacity: 1; color: rgb(75 85 99 / var(--tw-text-opacity, 1)); }
.text-gray-700 { --tw-text-opacity: 1; color: rgb(55 65 81 / var(--tw-text-opacity, 1)); }
.text-gray-800 { --tw-text-opacity: 1; color: rgb(31 41 55 / var(--tw-text-opacity, 1)); }
.text-green-600 { --tw-text-opacity: 1; color: rgb(22 163 74 / var(--tw-text-opacity, 1)); }
.text-green-700 { --tw-text-opacity: 1; color: rgb(21 128 61 / var(--tw-text-opacity, 1)); }
.text-rose-100 { --tw-text-opacity: 1; color: rgb(255 228 230 / var(--tw-text-opacity, 1)); }
.text-rose-300 { --tw-text-opacity: 1; color: rgb(255 158 171 / var(--tw-text-opacity, 1)); }
.text-rose-600 { --tw-text-opacity: 1; color: rgb(196 30 58 / var(--tw-text-opacity, 1)); }
.text-rose-700 { --tw-text-opacity: 1; color: rgb(161 29 52 / var(--tw-text-opacity, 1)); }
.text-rose-800 { --tw-text-opacity: 1; color: rgb(128 0 32 / var(--tw-text-opacity, 1)); }
.text-rose-900 { --tw-text-opacity: 1; color: rgb(92 0 21 / var(--tw-text-opacity, 1)); }
.text-white { --tw-text-opacity: 1; color: rgb(255 255 255 / var(--tw-text-opacity, 1)); }
.text-yellow-400 { --tw-text-opacity: 1; color: rgb(250 204 21 / var(--tw-text-opacity, 1)); }
.line-through { text-decoration-line: line-through; }
.antialiased { }
.opacity-50 { opacity: 0.5; }
.opacity-80 { opacity: 0.8; }
.shadow-2xl { --tw-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25); --tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); }
.shadow-lg { --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); }
.shadow-md { --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); }
.shadow-sm { --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05); --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); }
.backdrop-blur-md { --tw-backdrop-blur: blur(12px); backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia); }
.backdrop-blur-sm { --tw-backdrop-blur: blur(4px); backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia); }
.transition-colors { transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, -webkit-text-decoration-color; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; }
.transition-transform { transition-property: transform; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; }
.duration-200 { transition-duration: 200ms; }
.duration-500 { transition-duration: 500ms; }
.hover\:scale-105:hover { --tw-scale-x: 1.05; --tw-scale-y: 1.05; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); }
.hover\:bg-gray-100:hover { --tw-bg-opacity: 1; background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1)); }
.hover\:bg-rose-100:hover { --tw-bg-opacity: 1; background-color: rgb(255 228 230 / var(--tw-bg-opacity, 1)); }
.hover\:bg-rose-700:hover { --tw-bg-opacity: 1; background-color: rgb(161 29 52 / var(--tw-bg-opacity, 1)); }
.hover\:text-rose-600:hover { --tw-text-opacity: 1; color: rgb(196 30 58 / var(--tw-text-opacity, 1)); }
.hover\:text-white:hover { --tw-text-opacity: 1; color: rgb(255 255 255 / var(--tw-text-opacity, 1)); }
.focus\:border-rose-400:focus { --tw-border-opacity: 1; border-color: rgb(255 122 141 / var(--tw-border-opacity, 1)); }
.focus\:outline-none:focus { outline: transparent solid 2px; outline-offset: 2px; }
@media (min-width: 640px) {
  .sm\:flex { display: flex; }
  .sm\:w-96 { width: 24rem; }
  .sm\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0px, 1fr)); }
  .sm\:flex-row { flex-direction: row; }
}
@media (min-width: 768px) {
  .md\:inline { display: inline; }
  .md\:flex { display: flex; }
  .md\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0px, 1fr)); }
  .md\:gap-12 { gap: 3rem; }
  .md\:px-8 { padding-left: 2rem; padding-right: 2rem; }
  .md\:text-3xl { font-size: 1.875rem; line-height: 2.25rem; }
  .md\:text-4xl { font-size: 2.25rem; line-height: 2.5rem; }
}
@media (min-width: 1024px) {
  .lg\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0px, 1fr)); }
  .lg\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0px, 1fr)); }
}
/* === Добор Tailwind-классов для попапа и модального окна на карточке товара === */

.block {
  display: block;
}

.items-start {
  align-items: flex-start;
}

.top-2 {
  top: 0.5rem;
}

.right-2 {
  right: 0.5rem;
}

.top-4 {
  top: 1rem;
}

.right-4 {
  right: 1rem;
}

.mb-1 {
  margin-bottom: 0.25rem;
}

.max-w-sm {
  max-width: 24rem;
}

.max-w-md {
  max-width: 28rem;
}

.rounded-xl {
  border-radius: 0.75rem;
}

.rounded-3xl {
  border-radius: 1.5rem;
}

.p-3 {
  padding: 0.75rem;
}

.p-8 {
  padding: 2rem;
}

.border-l-4 {
  border-left-width: 4px;
}

.border-gray-300 {
  border-color: rgb(209 213 219);
}

.border-rose-600 {
  border-color: rgb(196 30 58);
}

.bg-black\/50 {
  background-color: rgba(0, 0, 0, 0.5);
}

.hover\:text-gray-600:hover {
  color: rgb(75 85 99);
}

.focus\:border-rose-500:focus {
  border-color: #FF4D6D;
}

.focus\:outline-none:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
}
#promo-popup {
  position: fixed;
  right: 1.5rem;
  bottom: 1.5rem;
  left: auto;

  z-index: 40;

  display: block;
  pointer-events: auto;
}

#promo-popup #popup-content {
  width: auto;
  max-width: 24rem;

  background: #fff;
  border-radius: 1rem;
  border-left: 4px solid #C41E3A;

  padding: 1.5rem;

  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);

  transform: translateY(0);
  transition: transform 0.5s ease;
  pointer-events: auto;
}

#promo-popup #popup-content.translate-y-32 {
  transform: translateY(200px);
}

@media (max-width: 640px) {
  #promo-popup {
    left: 1rem;
    right: 1rem;
    bottom: 1rem;
  }

  #promo-popup #popup-content {
    max-width: none;
    width: 100%;
  }
}
#callback-modal.modal {
  display: flex;
  align-items: center;
  justify-content: center;
}

#callback-modal.modal.open .modal-content {
  margin-top: 0;
}

#callback-modal .modal-content {
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.22);
}

.bottom-6 {
  bottom: 1.5rem;
}

.right-6 {
  right: 1.5rem;
}

.bg-gradient-to-r {
  background-image: linear-gradient(to right, var(--tw-gradient-stops));
}

.from-rose-600 {
  --tw-gradient-from: #C41E3A;
  --tw-gradient-to: rgba(196, 30, 58, 0);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.to-rose-700 {
  --tw-gradient-to: #A11D34;
}

.hover\:scale-110:hover {
  transform: scale(1.1);
}

/* === Добор Tailwind-классов для шапки как на главной === */

.w-full {
  width: 100%;
}

.top-0 {
  top: 0;
}

.top-full {
  top: 100%;
}

.left-0 {
  left: 0;
}

.z-50 {
  z-index: 50;
}

.py-3 {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}

.py-4 {
  padding-top: 1rem;
  padding-bottom: 1rem;
}

.px-4 {
  padding-left: 1rem;
  padding-right: 1rem;
}

.px-6 {
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

.pb-2 {
  padding-bottom: 0.5rem;
}

.mb-2 {
  margin-bottom: 0.5rem;
}

.gap-1\.5 {
  gap: 0.375rem;
}

.gap-2 {
  gap: 0.5rem;
}

.gap-3 {
  gap: 0.75rem;
}

.gap-4 {
  gap: 1rem;
}

.gap-6 {
  gap: 1.5rem;
}

.text-xs {
  font-size: 0.75rem;
  line-height: 1rem;
}

.text-sm {
  font-size: 0.875rem;
  line-height: 1.25rem;
}

.text-2xl {
  font-size: 1.5rem;
  line-height: 2rem;
}

.font-serif {
  font-family: "Playfair Display", serif;
}

.font-bold {
  font-weight: 700;
}

.font-semibold {
  font-weight: 600;
}

.font-medium {
  font-weight: 500;
}

.uppercase {
  text-transform: uppercase;
}

.tracking-wide {
  letter-spacing: 0.025em;
}

.tracking-widest {
  letter-spacing: 0.1em;
}

.text-gray-600 {
  color: rgb(75 85 99);
}

.text-gray-700 {
  color: rgb(55 65 81);
}

.text-rose-300 {
  color: #FF9EAB;
}

.text-rose-800 {
  color: #800020;
}

.bg-white {
  background-color: #fff;
}

.bg-white\/95 {
  background-color: rgba(255, 255, 255, 0.95);
}

.border-b {
  border-bottom-width: 1px;
}

.border-rose-200 {
  border-color: #FFC4CC;
}

.shadow-sm {
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.shadow-lg {
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
              0 4px 6px -4px rgba(0, 0, 0, 0.1);
}

.backdrop-blur-md {
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.transition-all {
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

.duration-300 {
  transition-duration: 300ms;
}

.hover\:text-rose-600:hover {
  color: #C41E3A;
}

@media (min-width: 640px) {
  .sm\:flex {
    display: flex;
  }
}

@media (min-width: 768px) {
  .md\:flex {
    display: flex;
  }

  .md\:hidden {
    display: none;
  }

  .md\:inline {
    display: inline;
  }

  .md\:px-8 {
    padding-left: 2rem;
    padding-right: 2rem;
  }

  .md\:text-sm {
    font-size: 0.875rem;
    line-height: 1.25rem;
  }

  .md\:text-3xl {
    font-size: 1.875rem;
    line-height: 2.25rem;
  }
}