/** Shopify CDN: Minification failed
Line 405:0 Unexpected "}"
Line 407:4 Unexpected "0%"
Line 408:4 Unexpected "50%"
Line 409:4 Unexpected "100%"
**/
/* CSS Variables are set by theme.liquid from Shopify settings */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { overflow-x: hidden; max-width: 100vw; }
body { font-family: var(--font-main); background-color: var(--bg-main); color: var(--text-dark); line-height: 1.4; overflow-x: hidden; max-width: 100vw; }
.container { max-width: 1250px; margin: 0 auto; padding: 0 20px; width: 100%; }
img, video { max-width: 100%; display: block; }
a { text-decoration: none; color: inherit; }
/* Top Bar */
.top-bar-wrapper { background-color: var(--brand-accent); color: #fff; text-align: center; font-size: 15px; font-weight: 500; padding: 8px 0; overflow: hidden; }
.top-bar-marquee-wrapper { overflow: hidden; width: 100%; margin-bottom: 5px; }
.top-bar-marquee { display: flex; white-space: nowrap; opacity: 0.9; width: max-content; animation: scroll-left-fast 25s linear infinite; }
.top-bar-marquee span { padding: 0 30px; }
.top-bar-mobile-text { display: none; }
.timer-container { display: flex; justify-content: center; align-items: center; gap: 10px; font-weight: 600; }
.timer-box { background: #fff; color: #000; padding: 2px 6px; border-radius: 3px; font-weight: 700; font-size: 14px; }
@keyframes scroll-left-fast { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }
/* Header */
.header { padding: 15px 0; border-bottom: 1px solid rgba(0,0,0,0.05); background: #fff; position: sticky; top: 0; z-index: 1000; box-shadow: 0 4px 20px rgba(0,0,0,0.03); }
.header-inner { display: flex; justify-content: space-between; align-items: center; }
.hamburger-menu { display: none; }
.hamburger-menu svg { width: 24px; height: 24px; stroke: #000; cursor: pointer; }
.nav-links { display: flex; gap: 25px; list-style: none; font-size: 16px; font-weight: 400; }
.logo-container { text-align: center; display: flex; flex-direction: column; align-items: center; }
.logo-container svg { width: 40px; margin-bottom: 2px; }
.logo-text { font-family: serif; font-size: 24px; font-weight: 500; color: var(--text-dark); letter-spacing: 2px; line-height: 1; text-transform: uppercase; }
.header-icons { display: flex; gap: 20px; align-items: center; }
.header-icons svg { width: 20px; height: 20px; stroke: #000; stroke-width: 1.5; fill: none; cursor: pointer; }
/* Product Section */
.product-section { padding: 15px 0; display: flex; gap: 50px; }
.gallery-container { width: 55%; display: flex; gap: 20px; }
.thumbnails-wrapper { display: flex; flex-direction: column; align-items: center; width: 70px; gap: 5px; }
.thumb-arrow { display: none; cursor: pointer; color: #888; font-size: 20px; user-select: none; }
.thumbnails { display: flex; flex-direction: column; gap: 10px; }
.thumbnails img { width: 65px; height: 65px; border: 1px solid rgba(0,0,0,0.1); border-radius: 6px; cursor: pointer; background: var(--bg-main); transition: border 0.2s; object-fit: cover; }
.thumbnails img.active { border: 1.5px solid var(--text-dark); }
.main-image-container { flex: 1; position: relative; }
.main-image-container img { width: 100%; border-radius: 12px; background: var(--bg-main); transition: opacity 0.3s; }
.guarantee-badge { position: absolute; bottom: 10px; left: 10px; width: 60px; height: 60px; background: url('data:image/svg+xml;utf8,') no-repeat center; background-size: contain; }
.product-details { width: 45%; }
.product-title { font-size: 28px; font-weight: 600; line-height: 1.2; margin-bottom: 10px; text-align: left; }
.reviews { display: flex; align-items: center; justify-content: flex-start; gap: 8px; font-size: 14px; font-weight: 600; margin-bottom: 15px; }
.stars { color: #d89f53; font-size: 18px; letter-spacing: 2px; }
.feature-list { list-style: none; margin-bottom: 15px; font-size: 15px; font-weight: 600; display: flex; flex-direction: column; gap: 5px; text-align: left; }
.feature-list li { display: flex; align-items: center; gap: 8px; }
.countdown-banner { background-color: var(--brand-accent); color: #fff; text-align: center; padding: 8px; font-weight: 600; font-size: 15px; border-radius: 6px; margin-bottom: 15px; }
/* Offers / Variants */
.offers-group { display: flex; flex-direction: column; gap: 12px; margin-bottom: 20px; }
.offer-box { border: 1px solid #e0e0e0; border-radius: 8px; padding: 12px; background: #fff; cursor: pointer; position: relative; }
.offer-box.active { background-color: var(--highlight-color); border-color: var(--brand-accent); }
.offer-box-inner { display: flex; justify-content: space-between; align-items: center; }
.offer-left { display: flex; align-items: center; gap: 12px; }
.radio-circle { width: 18px; height: 18px; border: 2px solid #ccc; border-radius: 50%; display: flex; justify-content: center; align-items: center; background: #fff; }
.offer-box.active .radio-circle { border-color: var(--brand-accent); background: var(--brand-accent); }
.offer-box.active .radio-circle::after { content: ''; width: 10px; height: 10px; background: url('data:image/svg+xml;utf8,') no-repeat center; background-size: contain; border-radius: 0; }
.offer-qty { font-size: 18px; font-weight: 700; }
.offer-pill { background-color: var(--brand-accent); color: #fff; font-size: 12px; padding: 2px 6px; border-radius: 20px; font-weight: 600; margin-left: 5px; }
.offer-right { text-align: right; }
.offer-price-new { font-size: 20px; font-weight: 700; line-height: 1; }
.offer-price-old { font-size: 13px; color: #888; text-decoration: line-through; margin-top: 2px; }
.floating-tag { position: absolute; top: -10px; right: 10px; background-color: var(--brand-accent-dark); color: #fff; font-size: 12px; font-weight: 600; padding: 2px 6px; border-radius: 4px; box-shadow: 0 2px 5px rgba(0,0,0,0.1); }
.variant-options { margin-top: 10px; display: none; }
.offer-box.active .variant-options { display: block; }
.color-select-container { display: flex; flex-direction: column; gap: 3px; margin-bottom: 8px; }
.color-label { font-size: 13px; color: #333; }
.color-dropdown { display: flex; align-items: center; gap: 8px; background: #fff; border: 1px solid #ccc; padding: 4px 8px; border-radius: 4px; width: fit-content; }
.color-dropdown img { width: 20px; height: 20px; border-radius: 4px; object-fit: cover; }
.color-dropdown select { border: none; outline: none; background: transparent; font-family: var(--font-main); font-weight: 500; font-size: 14px; cursor: pointer; }
/* Buttons */
.btn-add { width: 100%; background-color: var(--brand-accent); color: #fff; border: none; padding: 14px; font-size: 18px; font-weight: 600; border-radius: 8px; cursor: pointer; margin-bottom: 8px; text-transform: uppercase; transition: opacity 0.2s; }
.btn-buy-now { width: 100%; background-color: #000; color: #d8b89a; border: none; padding: 14px; font-size: 17px; font-weight: 600; border-radius: 8px; cursor: pointer; margin-bottom: 15px; display: flex; justify-content: center; align-items: center; gap: 8px; }
.btn-buy-now svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; }
/* Social Proof & Trust Bar */
.social-proof { border: 1px dashed #ccc; border-radius: 6px; padding: 8px; display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 13px; font-weight: 500; margin-bottom: 15px; }
.avatars { display: flex; }
.avatars img { width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--bg-main); margin-left: -6px; }
.avatars img:first-child { margin-left: 0; }
.blue-tick { color: #1da1f2; font-size: 14px; margin-left: 2px; }
.trust-bar { background-color: var(--brand-accent); color: #fff; display: flex; justify-content: space-between; align-items: center; padding: 8px 15px; border-radius: 30px; font-size: 13px; font-weight: 500; margin-bottom: 20px; }
.trust-item { display: flex; align-items: center; gap: 6px; }
.trust-item svg { width: 14px; height: 14px; stroke: currentColor; stroke-width: 2; fill: none; }
/* Delivery & Guarantee */
.delivery-time-box { background-color: var(--brand-accent); color: #fff; padding: 12px 15px; border-radius: 8px; display: flex; justify-content: space-between; align-items: center; font-size: 14px; font-weight: 500; margin-bottom: 15px; }
.delivery-time-col { display: flex; align-items: center; gap: 8px; }
.delivery-time-col svg { width: 18px; height: 18px; stroke: #fff; fill: none; stroke-width: 2; }
.delivery-arrow { opacity: 0.7; }
.guarantee-box { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 20px; }
.guarantee-box svg { width: 28px; height: 28px; fill: none; stroke: #000; stroke-width: 1.5; flex-shrink: 0; }
.guarantee-title { font-size: 17px; font-weight: 700; margin-bottom: 2px; }
.guarantee-desc { font-size: 14px; color: var(--text-gray); }
/* Accordion */
.accordion { border-top: 1px solid #ddd; border-bottom: 1px solid #ddd; }
.accordion-item { border-bottom: 1px solid #ddd; background-color: var(--bg-main); }
.accordion-item:last-child { border-bottom: none; }
.accordion-header { padding: 12px 15px; font-weight: 600; font-size: 16px; display: flex; justify-content: space-between; align-items: center; cursor: pointer; }
.accordion-header svg { width: 12px; height: 12px; stroke: #000; stroke-width: 2; transition: transform 0.3s; }
.accordion-item.active .accordion-header svg { transform: rotate(180deg); }
.accordion-content { padding: 0 15px 12px 15px; font-size: 14px; color: var(--text-gray); display: none; }
.accordion-item.active .accordion-content { display: block; }
/* Yeni Nesil Bakım Deneyimi */
.features-section { text-align: center; padding: 20px 0 20px 0; }
.features-title { font-size: 26px; font-weight: 700; margin-bottom: 20px; }
.features-slider-container { position: relative; }
.features-grid { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.feature-card { flex: 1; min-width: 200px; background-color: var(--brand-accent); color: #fff; padding: 20px 15px; border-radius: 12px; text-align: center; }
.feature-card h4 { font-size: 17px; margin-bottom: 8px; font-weight: 600; line-height: 1.2; }
.feature-card p { font-size: 14px; opacity: 0.95; line-height: 1.4; }
.features-slider-nav { display: none; }
/* Wavy Ribbon Divider */
.wave-divider { position: relative; width: 100%; height: 40px; overflow: hidden; margin: 10px 0; }
.wave { position: absolute; top: 0; left: 0; width: 200%; height: 100%; background: url('data:image/svg+xml;utf8,') repeat-x; background-size: 50% 100%; animation: wave-anim 10s linear infinite; }
@keyframes wave-anim { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }
/* Gerçek Deneyimler */
.experiences-section { padding: 20px 0; display: flex; gap: 30px; align-items: center; flex-wrap: wrap; }
.exp-left { width: calc(45% - 15px); }
.exp-left h2 { font-size: 34px; font-weight: 700; line-height: 1.1; margin-bottom: 15px; letter-spacing: -1px; }
.exp-left p { font-size: 16px; color: var(--text-dark); margin-bottom: 15px; line-height: 1.5; }
.exp-stars { font-size: 14px; font-weight: 600; display: flex; align-items: center; gap: 6px; }
.exp-stars .stars { font-size: 18px; color: #f5b301; letter-spacing: 2px; }
/* Video Slider & Lightbox */
.exp-right-wrapper { width: calc(55% - 15px); overflow: hidden; position: relative; }
.exp-right { display: flex; gap: 12px; width: max-content; animation: scroll-left-slider 15s linear infinite; }
.exp-right:hover { animation-play-state: paused; }
@keyframes scroll-left-slider { 0% { transform: translateX(0); } 100% { transform: translateX(calc(-50% - 6px)); } }
.exp-card { flex: 0 0 160px; height: 280px; position: relative; border-radius: 12px; overflow: hidden; background: #ddd; cursor: pointer; }
.exp-card video { width: 100%; height: 100%; object-fit: cover; }
.exp-pill { position: absolute; top: 20px; left: 10px; right: 10px; background: rgba(255,255,255,0.95); border-radius: 8px; padding: 8px; font-size: 12px; text-align: center; font-weight: 500; line-height: 1.2; box-shadow: 0 4px 10px rgba(0,0,0,0.1); z-index: 2; }
.exp-pill-pink { color: #d64082; }
.exp-pill-brown { color: #8e735b; }
/* Lightbox */
.lightbox { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.95); z-index: 10000; justify-content: center; align-items: center; }
.lightbox.active { display: flex; }
.lightbox-content { position: relative; width: 90%; max-width: 400px; display: flex; justify-content: center; align-items: center;}
.lightbox-video { width: 100%; max-height: 80vh; border-radius: 12px; outline: none; background: transparent; }
.lightbox-close { position: fixed; top: 20px; right: 30px; color: #fff; font-size: 42px; cursor: pointer; z-index: 10001; line-height: 1; }
.lightbox-prev, .lightbox-next { position: absolute; top: 50%; transform: translateY(-50%); color: #fff; font-size: 42px; cursor: pointer; user-select: none; z-index: 10; text-shadow: 0 2px 4px rgba(0,0,0,0.5); }
.lightbox-prev { left: -50px; }
.lightbox-next { right: -50px; }
/* 1. Large Brown Box (Machen Sie Ihre Pflege komfortabel) */
/* 2. Image Left, Text Right Section */
.img-text-smooth { display: flex; align-items: center; gap: 40px; margin-bottom: 20px; }
.img-text-smooth img { width: 50%; border-radius: 12px; object-fit: cover; }
.img-text-smooth-content { width: 50%; padding-right: 20px; }
.img-text-smooth-content h2 { font-size: 24px; font-weight: 700; margin-bottom: 15px; line-height: 1.3; }
.img-text-smooth-content p { font-size: 15px; margin-bottom: 15px; color: var(--text-dark); line-height: 1.5; }
/* 3. Scrolling Marquee Line */
.scrolling-line-wrapper { background-color: var(--brand-accent); overflow: hidden; padding: 10px 0; margin-bottom: 20px; color: #fff; font-weight: 500; font-size: 16px; }
.scrolling-line { display: flex; white-space: nowrap; width: max-content; animation: scroll-left-fast 20s linear infinite; }
.scrolling-line span { padding: 0 30px; }
/* 4. Comparison Table */
.comparison-section { padding: 15px 0; display: flex; align-items: center; gap: 30px; margin-bottom: 20px; }
.comparison-text { width: 45%; }
.comparison-text h2 { font-size: 30px; font-weight: 700; line-height: 1.2; margin-bottom: 15px; }
.comparison-text p { font-size: 15px; color: var(--text-dark); line-height: 1.5; }
.comparison-table-wrapper { width: 55%; background: #fdfaf6; border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,0.05); overflow: hidden; }
.comp-table { width: 100%; border-collapse: collapse; }
.comp-table th, .comp-table td { padding: 12px 15px; text-align: center; font-size: 15px; font-weight: 600; border-bottom: 1px solid rgba(0,0,0,0.05); }
.comp-table th { padding: 15px; }
.comp-table td:first-child { text-align: left; background-color: var(--brand-accent); color: #fff; width: 50%; font-weight: 500; }
.comp-table th:first-child { background-color: var(--brand-accent); }
.comp-table td:nth-child(2), .comp-table th:nth-child(2) { background-color: #fdfaf6; width: 25%; }
.comp-table td:nth-child(3), .comp-table th:nth-child(3) { background-color: #f4ebe1; width: 25%; }
.comp-table tr:last-child td { border-bottom: none; }
.check-icon { color: #000; font-size: 18px; }
.cross-icon { color: #000; font-size: 18px; font-weight: 700; }
.comp-logo { background: #fff; padding: 4px 12px; border-radius: 6px; box-shadow: 0 2px 5px rgba(0,0,0,0.1); display: inline-flex; flex-direction: column; align-items: center; }
.comp-logo svg { width: 24px; fill: var(--brand-accent); margin-bottom: 2px; }
.comp-logo span { font-size: 10px; font-weight: 600; color: #4a3b2c; letter-spacing: 1px; }
/* 5. 3000+ Customers Banner */
.customers-banner { position: relative; border-radius: 12px; overflow: hidden; margin-bottom: 20px; display: flex; align-items: center; min-height: 300px; }
.customers-bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; }
.customers-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.3); z-index: 2; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; padding: 20px; }
.customers-overlay-text { color: #fff; }
.customers-overlay-text h3 { font-size: 38px; font-weight: 700; line-height: 1.1; margin-bottom: 5px; text-shadow: 0 2px 4px rgba(0,0,0,0.5); }
.customers-overlay-text p { font-size: 14px; font-weight: 600; letter-spacing: 2px; text-shadow: 0 2px 4px rgba(0,0,0,0.5); }
.customers-box { position: relative; z-index: 3; background-color: var(--brand-accent); margin-left: auto; margin-right: 40px; width: 45%; padding: 15px; border-radius: 12px; color: #fff; box-shadow: 0 10px 30px rgba(0,0,0,0.15); }
.customers-box h3 { font-size: 22px; font-weight: 700; line-height: 1.3; margin-bottom: 12px; }
.customers-box p { font-size: 15px; line-height: 1.5; opacity: 0.95; }
/* FAQ Section */
.faq-section { max-width: 800px; margin: 0 auto 50px auto; }
.faq-title { text-align: center; font-size: 28px; font-weight: 700; margin-bottom: 25px; }
.faq-accordion .accordion-item { background: transparent; border-bottom: 1px solid rgba(0,0,0,0.08); }
.faq-accordion .accordion-header { padding: 15px 10px; font-size: 17px; font-weight: 600; }
.faq-accordion .accordion-header svg.heart { width: 16px; height: 16px; fill: none; stroke: #000; stroke-width: 1.5; margin-right: 12px; }
.faq-accordion .accordion-header .acc-title { display: flex; align-items: center; }
.faq-accordion .accordion-header svg.arrow { width: 10px; height: 10px; transition: transform 0.3s; stroke-width: 2; }
.faq-accordion .accordion-item.active .arrow { transform: rotate(180deg); }
.faq-accordion .accordion-content { padding: 0 10px 15px 38px; font-size: 15px; }
/* Reviews Section */
.reviews-section { text-align: center; margin-bottom: 60px; }
.reviews-section-title { font-size: 28px; font-weight: 700; margin-bottom: 10px; }
.reviews-score { font-size: 50px; font-weight: 700; margin-bottom: 5px; line-height: 1; }
.reviews-stars-boxes { display: flex; justify-content: center; gap: 4px; margin-bottom: 15px; }
.star-box { background-color: var(--brand-accent); width: 24px; height: 24px; display: flex; justify-content: center; align-items: center; border-radius: 3px; }
.star-box svg { width: 14px; height: 14px; fill: #fff; }
.reviews-subtitle { font-size: 14px; color: var(--text-gray); margin-bottom: 15px; }
.reviews-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; text-align: left; margin-bottom: 15px; }
.review-card { background-color: var(--brand-accent); color: #fff; border-radius: 12px; padding: 25px; display: flex; flex-direction: column; }
.review-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 15px; }
.reviewer-info { display: flex; align-items: center; gap: 12px; }
.reviewer-avatar { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; background: #fff; display: flex; justify-content: center; align-items: center; color: #000; font-weight: 700; font-size: 20px; }
.reviewer-name { font-size: 20px; font-weight: 600; }
.review-date { font-size: 12px; opacity: 0.6; text-transform: uppercase; letter-spacing: 0.5px; }
.review-rating { display: flex; gap: 3px; margin-bottom: 5px; }
.review-rating svg { width: 12px; height: 12px; fill: #f5b301; }
.verified-buyer { display: flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 500; margin-bottom: 15px; }
.verified-buyer svg { width: 12px; height: 12px; fill: #00c853; }
.review-content p { font-size: 14px; line-height: 1.6; opacity: 0.95; margin-bottom: 15px; }
.btn-load-more { background-color: var(--brand-accent); color: #fff; border: none; padding: 12px 30px; font-size: 15px; font-weight: 700; border-radius: 6px; cursor: pointer; display: inline-block; }
/* Features 4 columns before Footer */
.pre-footer-features { display: flex; justify-content: space-between; gap: 20px; padding: 20px 0; text-align: center; }
.pf-feature { flex: 1; }
.pf-feature svg { width: 36px; height: 36px; stroke: #000; fill: none; stroke-width: 1.5; margin-bottom: 15px; }
.pf-feature h4 { font-size: 15px; font-weight: 700; margin-bottom: 10px; }
.pf-feature p { font-size: 13px; color: var(--text-gray); line-height: 1.5; }
/* Footer with wavy top */
.footer-wrapper { position: relative; margin-top: 40px; }
.footer-wave { position: absolute; top: -40px; left: 0; width: 100%; height: 40px; background: url('data:image/svg+xml;utf8,') repeat-x; background-size: 100% 100%; }
.footer { background-color: var(--brand-accent); color: #fff; padding: 20px 0 20px 0; }
.footer-inner { display: flex; justify-content: space-between; gap: 50px; }
.footer-col-1 { width: 40%; }
.footer-logo { display: inline-flex; flex-direction: column; align-items: center; margin-bottom: 20px; }
.footer-logo svg { width: 40px; fill: #fff; margin-bottom: 5px; }
.footer-logo span { font-family: serif; font-size: 24px; font-weight: 400; letter-spacing: 2px; }
.footer-col-1 p { font-size: 14px; line-height: 1.6; opacity: 0.9; }
.footer-col-2 { width: 25%; }
.footer-col-2 h4 { font-size: 18px; font-weight: 600; margin-bottom: 20px; }
.footer-links { list-style: none; display: flex; flex-direction: column; gap: 10px; font-size: 14px; opacity: 0.9; }
.footer-col-3 { width: 35%; }
.footer-col-3 h4 { font-size: 18px; font-weight: 600; margin-bottom: 20px; }
.footer-col-3 p { font-size: 14px; line-height: 1.6; opacity: 0.9; margin-bottom: 10px; }
.footer-col-3 a { font-size: 14px; font-weight: 600; text-decoration: underline; margin-bottom: 10px; display: inline-block; }
/* Responsive - MOBILE ADAPTATION */
@media (max-width: 768px) {
.product-section { flex-direction: column; gap: 20px; padding: 15px 0; }
.gallery-container { width: 100% !important; }
.product-details { width: 100% !important; }
/* Top Bar Mobile */
.top-bar-marquee-wrapper { display: block; margin-bottom: 5px; }
.top-bar-marquee { animation: scroll-left-fast 18s linear infinite; }
.top-bar-mobile-text { display: none; }
.timer-container { font-size: 13px; margin-bottom: 5px; }
/* Header Mobile */
.header-inner { justify-content: space-between; padding: 10px 0; }
.nav-links { display: none; }
.hamburger-menu { display: block; cursor: pointer; }
.header-icons { gap: 10px; }
.logo-text { font-size: 18px; }
.logo-container svg { width: 30px; }
/* Gallery Mobile */
.gallery-container { width: 100%; flex-direction: column; gap: 15px; }
.main-image-container { order: -1; width: 100%; }
.thumbnails-wrapper { flex-direction: row; width: 100%; }
.thumb-arrow { display: block; }
.thumbnails { flex-direction: row; overflow-x: auto; scrollbar-width: none; gap: 10px; padding-bottom: 5px; justify-content: flex-start; flex: 1; }
.thumbnails::-webkit-scrollbar { display: none; }
.thumbnails img { width: 60px; height: 60px; flex-shrink: 0; }
/* Product Details Mobile */
.product-details { width: 100%; }
/* Trust Bar */
.trust-bar { background: transparent; padding: 0; display: flex; gap: 8px; margin-bottom: 20px; border-radius: 0; align-items: stretch; }
.trust-item { background: var(--brand-accent); padding: 8px 4px; border-radius: 20px; font-size: 11px; flex: 1; justify-content: center; align-items: center; text-align: center; color: #fff; line-height: 1.2; flex-direction: column; gap: 2px; min-height: 60px;}
.trust-item svg { width: 16px; height: 16px; margin-bottom: 2px;}
/* Delivery Box */
.delivery-time-box { padding: 12px 10px; }
.delivery-time-col div div:first-child { font-size: 12px; }
.delivery-time-col div div:last-child { font-size: 14px; }
/* Features Box (Slider on mobile) */
.features-grid { display: flex; flex-wrap: nowrap; overflow-x: auto; scroll-snap-type: x mandatory; gap: 15px; scrollbar-width: none; flex-direction: row; justify-content: flex-start; }
.features-grid::-webkit-scrollbar { display: none; }
.feature-card { min-width: 100%; scroll-snap-align: start; }
.features-slider-nav { display: flex; justify-content: center; align-items: center; gap: 15px; margin-top: 15px; }
.features-slider-nav button { background: transparent; border: 1px solid #ccc; width: 30px; height: 30px; border-radius: 50%; font-size: 16px; cursor: pointer; }
/* Comfort Box Mobile */
.ci-top-left { order: 2; }
.ci-top-right { order: 3; }
.ci-bottom-left { order: 4; }
.ci-bottom-right { order: 5; }
/* Experiences Mobile */
.exp-left, .exp-right-wrapper { width: 100%; }
.exp-left h2 { text-align: center; font-size: 28px; }
.exp-left p { text-align: center; font-size: 15px; }
.exp-stars { justify-content: center; margin-bottom: 20px; }
.experiences-section { flex-direction: column; }
/* Smooth Apply */
.img-text-smooth { flex-direction: column; text-align: center; gap: 20px; }
.img-text-smooth img, .img-text-smooth-content { width: 100%; padding-right: 0; }
/* Comparison Mobile */
.comparison-section { flex-direction: column; gap: 20px; }
.comparison-text { width: 100%; text-align: center; }
.comparison-table-wrapper { width: 100%; }
.comp-table th, .comp-table td { padding: 10px 5px; font-size: 13px; }
.comp-table td:first-child { width: 45%; }
.comp-table td:nth-child(2), .comp-table th:nth-child(2) { width: 27%; }
.comp-table td:nth-child(3), .comp-table th:nth-child(3) { width: 27%; }
.comp-logo svg { width: 20px; }
.comp-logo span { font-size: 9px; }
/* Customers Banner Mobile */
.customers-banner { align-items: flex-end; padding-top: 220px; min-height: unset; margin-bottom: 15px; }
.customers-overlay { height: 280px; align-items: center; justify-content: flex-start; padding: 20px; background: rgba(0,0,0,0.4); }
.customers-box { width: 90%; margin: 0 auto 20px auto; position: relative; padding: 25px 20px; text-align: center; z-index: 3; }
.customers-overlay-text h3 { font-size: 26px; }
.customers-overlay-text p { font-size: 12px; }
/* Reviews */
.reviews-grid { grid-template-columns: 1fr; }
/* Pre Footer Mobile */
.pre-footer-features { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; padding: 15px 0; }
.pf-feature { width: 100%; text-align: center; display: flex; flex-direction: column; align-items: center; }
.pf-feature svg { width: 30px; height: 30px; margin-bottom: 10px; }
.pf-feature h4 { font-size: 14px; }
.pf-feature p { font-size: 13px; }
/* Footer Mobile */
.footer-inner { flex-direction: column; gap: 30px; text-align: center; }
.footer-col-1, .footer-col-2, .footer-col-3 { width: 100%; }
.footer-logo { margin: 0 auto 15px auto; }
.footer-links { align-items: center; }
}
}
@keyframes float {
0% { transform: translateY(0px); }
50% { transform: translateY(-15px); }
100% { transform: translateY(0px); }
}
/* Unified Beautiful Comfort Section */
.comfort-title { text-align: center; font-size: 32px; font-weight: 800; margin: 40px 0 20px 0; color: var(--text-dark); }
.comfort-box {
background: transparent;
border-radius: 0;
padding: 0;
display: flex;
justify-content: space-between;
align-items: center;
gap: 30px;
margin-bottom: 40px;
}
.comfort-col { width: 30%; display: flex; flex-direction: column; gap: 20px; }
.comfort-item {
background: #fff;
padding: 25px 20px;
border-radius: 16px;
box-shadow: 0 10px 25px rgba(0,0,0,0.06);
text-align: center;
transition: transform 0.3s;
}
.comfort-item:hover { transform: translateY(-5px); }
.comfort-item svg { width: 36px; height: 36px; stroke: var(--secondary-accent); fill: none; stroke-width: 1.5; margin-bottom: 15px; }
.comfort-item h4 { font-size: 20px; font-weight: 700; margin-bottom: 10px; color: var(--secondary-accent); }
.comfort-item p { font-size: 15px; line-height: 1.6; color: #555; }
.comfort-image {
width: 35%;
display: flex;
align-items: center;
justify-content: center;
}
@media (max-width: 768px) {
.comfort-title { font-size: 26px; }
.comfort-box {
flex-direction: column;
gap: 20px;
}
.comfort-col {
width: 100%;
gap: 15px;
}
.comfort-image {
width: 100%;
order: -1; /* Image at the very top */
margin-bottom: 10px;
}
.comfort-item { padding: 20px 15px; }
}