/* Kittiva: reusable product story. Loaded after the shared site styles. */
.page-product { --kv-pink:#ffe5e8; --kv-blue:#dcebf7; --kv-ink:#151414; --kv-wine:#702336; background:#fff; color:var(--kv-ink); }
.page-product main { overflow:clip; }
.page-product .announcement { background:var(--kv-blue); font-size:12px; letter-spacing:.04em; padding:10px 16px; }
.page-product .header { background:#fff; }
.page-product .kittiva-logo { display:inline-flex; align-items:center; gap:9px; color:var(--kv-wine); text-decoration:none; font-size:31px; font-weight:800; letter-spacing:-1.5px; white-space:nowrap; }
.page-product .kittiva-cat { width:40px; height:35px; stroke:currentColor; stroke-width:1.7; }
.page-product .breadcrumb { font-size:12px; padding-top:20px; padding-bottom:0; }
.kv-hero { padding:36px 0 60px; }
.kv-hero-grid { display:grid; grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr); gap:64px; align-items:start; }
.kv-gallery { min-width:0; }
.kv-main-photo { overflow:hidden; border-radius:22px; background:#f8f3f1; aspect-ratio:1; }
.kv-main-photo > picture { display:block; width:100%; height:100%; }
.kv-main-photo img { display:block; width:100%; height:100%; object-fit:contain; }
.kv-thumbs { display:flex; gap:12px; margin-top:15px; overflow-x:auto; padding:3px 2px 8px; }
.kv-thumbs .pdp-thumb { flex:0 0 78px; width:78px; height:78px; border:1px solid #e2dedc; padding:0; background:#faf7f5; border-radius:10px; overflow:hidden; cursor:pointer; }
.kv-thumbs .pdp-thumb.is-active { border:2px solid var(--kv-wine); }
.kv-thumbs picture,.kv-thumbs img { display:block; width:100%; height:100%; object-fit:cover; }
.kv-buy { padding-top:8px; }
.kv-eyebrow { margin:0 0 14px; font-size:10px; font-weight:700; letter-spacing:.17em; line-height:1.5; text-transform:uppercase; }
.kv-buy h1 { margin:0 0 18px; max-width:14ch; font-size:clamp(32px,3.2vw,46px); font-weight:800; letter-spacing:-1.8px; line-height:1.08; }
.kv-price { margin:0 0 3px; font-size:25px; font-weight:700; letter-spacing:-.7px; }
.kv-tax { font-size:11px; color:#68605d; margin:0 0 27px; line-height:1.7; }
.kv-tax a { color:inherit; text-underline-offset:3px; }
.kv-tagline { font-size:18px; font-weight:600; line-height:1.5; margin:0 0 13px; }
.kv-description { font-size:14px; line-height:1.8; color:#524c49; margin:0 0 19px; }
.kv-product-facts { display:flex; flex-wrap:wrap; gap:16px 30px; margin:0 0 24px; padding:17px 0; border-top:1px solid #e8e3e0; border-bottom:1px solid #e8e3e0; }
.kv-product-facts div { min-width:90px; }
.kv-product-facts dt { color:#756b66; font-size:10px; text-transform:uppercase; letter-spacing:.1em; margin-bottom:5px; }
.kv-product-facts dd { margin:0; font-size:13px; font-weight:600; }
.kv-button { display:inline-flex; justify-content:center; align-items:center; gap:27px; background:#151414; color:#fff; border:1px solid #151414; border-radius:999px; padding:16px 26px; font:600 13px/1.3 var(--font, sans-serif); text-decoration:none; cursor:pointer; transition:background .2s,transform .2s; min-height:50px; }
.kv-button:hover { background:#3b282d; transform:translateY(-1px); }
.kv-button span { font-size:20px; font-weight:400; line-height:1; }
.kv-buy-button { width:100%; justify-content:space-between; }
.kv-buy-note { text-align:center; font-size:10px; color:#736762; line-height:1.7; margin:12px 0 24px; }
.kv-design-details { border-top:1px solid #e8e3e0; border-bottom:1px solid #e8e3e0; }
.kv-design-details summary { display:flex; justify-content:space-between; gap:12px; cursor:pointer; font-size:12px; font-weight:600; padding:17px 0; list-style:none; }
.kv-design-details summary::-webkit-details-marker { display:none; }
.kv-design-details p { font-size:13px; line-height:1.8; color:#655a55; margin:0 0 18px; }
.kv-design-details[open] summary span { transform:rotate(45deg); }
.kv-seo-links { font-size:10px; line-height:1.8; color:#786e69; margin:15px 0 0; }
.kv-seo-links a { color:inherit; text-underline-offset:3px; }
.kv-section-nav { display:flex; justify-content:center; flex-wrap:wrap; gap:30px; border-top:1px solid #ece5e2; padding:21px 24px; background:#fff; }
.kv-section-nav a { font-size:11px; font-weight:600; text-decoration:none; color:inherit; }
.kv-section-nav a:hover { text-decoration:underline; text-underline-offset:5px; }
.kv-section { padding:92px 0; scroll-margin-top:82px; }
.kv-section h2 { font-size:clamp(35px,4vw,58px); line-height:1.06; letter-spacing:-2.7px; font-weight:800; margin:0 0 24px; }
.kv-section .kv-lead { font-size:16px; line-height:1.7; max-width:44ch; }
.kv-section p { line-height:1.75; }
.kv-section img { display:block; width:100%; height:auto; }
.kv-section picture { display:block; }
.kv-section-heading { text-align:center; max-width:720px; margin:0 auto 42px; }
.kv-section-heading h2 { margin-bottom:16px; }
.kv-section-heading > p:last-child { font-size:14px; color:#5c5250; margin:0 auto; }
.kv-preparation { background:var(--kv-blue); }
.kv-preparation-grid { display:grid; grid-template-columns:1fr 1.1fr; align-items:center; gap:70px; }
.kv-preparation .kv-lead { font-size:15px; }
.kv-checklist { padding:0; list-style:none; margin:24px 0 29px; }
.kv-checklist li { font-size:13px; line-height:1.65; margin:12px 0; padding-left:27px; position:relative; }
.kv-checklist li::before { content:'✓'; position:absolute; left:0; top:1px; width:18px; height:18px; display:grid; place-items:center; border:1px solid #6e8595; border-radius:50%; font-size:10px; }
.kv-text-link { color:inherit; font-weight:600; font-size:12px; text-decoration:underline; text-underline-offset:5px; display:inline-flex; gap:17px; align-items:center; line-height:1.8; }
.kv-text-link span { font-size:19px; text-decoration:none; }
.kv-kit-visual,.kv-portrait,.kv-fit-collage { position:relative; }
.kv-kit-visual { background:#f8f7f1; border-radius:25px; transform:rotate(2deg); box-shadow:0 13px 35px #839caf1a; }
.kv-kit-visual > picture { overflow:hidden; border-radius:25px; }
.kv-kit-visual img { aspect-ratio:1.12; object-fit:cover; border-radius:25px; }
.kv-photo-label { position:absolute; bottom:22px; left:22px; right:22px; background:#ffffffeb; padding:12px 16px; border-radius:999px; text-align:center; font-size:11px; font-weight:600; }
.kv-benefits { background:var(--kv-pink); }
.kv-benefits-grid { display:grid; grid-template-columns:1fr 1.02fr; gap:75px; align-items:center; }
.kv-portrait { border-radius:120px 120px 22px 22px; overflow:hidden; }
.kv-portrait img { aspect-ratio:.82; object-fit:cover; }
.kv-benefits-copy .kv-lead { font-size:14px; }
.kv-benefit-grid { display:grid; grid-template-columns:1fr 1fr; gap:23px 28px; margin:29px 0 32px; }
.kv-small-icon { font-size:24px; display:block; margin-bottom:7px; }
.kv-benefit-grid h3 { font-size:13px; margin:0 0 5px; }
.kv-benefit-grid p { font-size:12px; margin:0; color:#63514f; }
.kv-fit { background:#fff; padding-top:105px; padding-bottom:105px; }
.kv-fit-grid { display:grid; grid-template-columns:.86fr 1.14fr; gap:100px; align-items:center; }
.kv-fit-grid > div:first-child > p:not(.kv-eyebrow) { color:#675d57; font-size:14px; max-width:39ch; }
.kv-fit .kv-button { margin-top:18px; }
.kv-fit-collage img { aspect-ratio:1.03; object-fit:cover; border-radius:30px; }
.kv-fit-stamp { position:absolute; right:-20px; bottom:25px; width:132px; height:132px; background:var(--kv-blue); border-radius:50%; display:flex; justify-content:center; align-items:center; text-align:center; font-size:15px; font-weight:700; line-height:1.3; transform:rotate(10deg); }
.kv-application { background:var(--kv-pink); }
.kv-step-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:22px; }
.kv-step-photo { position:relative; margin-bottom:24px; }
.kv-step-photo img { aspect-ratio:1; object-fit:cover; border-radius:18px; }
.kv-step-photo > span { position:absolute; left:13px; top:13px; width:36px; height:36px; display:grid; place-items:center; border-radius:50%; background:white; font-size:12px; font-weight:700; }
.kv-step h3 { font-size:17px; letter-spacing:-.6px; margin:0 0 10px; }
.kv-step p { color:#61504e; font-size:12px; margin:0; }
.kv-centered { text-align:center; margin-top:37px; }
.kv-inspiration { background:#fff; }
.kv-inspiration-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:25px; }
.kv-inspo-photo { margin-bottom:24px; overflow:hidden; border-radius:20px; background:#f7f3f1; }
.kv-inspo-photo img { aspect-ratio:.92; object-fit:cover; }
.kv-inspo-photo--portrait img { object-position:center 38%; }
.kv-inspiration-grid .kv-eyebrow { font-size:9px; margin-bottom:9px; }
.kv-inspiration-grid h3 { font-size:24px; letter-spacing:-1px; line-height:1.2; margin:0 0 10px; }
.kv-inspiration-grid article > p:last-child { font-size:13px; color:#6d615c; margin:0; }
.kv-compare { background:var(--kv-pink); }
.kv-compare-wrap { max-width:1020px; }
.kv-table-wrap { margin-top:44px; }
.kv-comparison { width:100%; border-collapse:separate; border-spacing:0; table-layout:fixed; font-size:12px; }
.kv-comparison th,.kv-comparison td { padding:21px 24px; text-align:center; line-height:1.65; border-bottom:1px solid #e7cdd1; vertical-align:middle; }
.kv-comparison thead th { font-weight:700; font-size:16px; padding-top:27px; padding-bottom:27px; }
.kv-comparison thead th:first-child { width:25%; }
.kv-comparison tbody th { font-size:12px; font-weight:600; text-align:left; }
.kv-comparison .kv-kittiva-column { background:#fffaf8; border-left:1px solid #e7cdd1; border-right:1px solid #e7cdd1; }
.kv-comparison thead .kv-kittiva-column { border-radius:21px 21px 0 0; border-top:1px solid #e7cdd1; color:var(--kv-wine); font-size:22px; letter-spacing:-1px; }
.kv-comparison tbody tr:last-child .kv-kittiva-column { border-radius:0 0 21px 21px; }
.kv-table-lead { font-size:12px; font-weight:400; color:#796366; }
.kv-faq { background:#fff; }
.kv-faq-grid { display:grid; grid-template-columns:.78fr 1.22fr; gap:100px; }
.kv-faq-grid > div:first-child > p:not(.kv-eyebrow) { font-size:14px; color:#71605b; margin-bottom:24px; }
.kv-faq-list { border-top:1px solid #ded6d2; }
.kv-faq-list details { border-bottom:1px solid #ded6d2; }
.kv-faq-list summary { display:flex; align-items:center; justify-content:space-between; gap:20px; list-style:none; font-size:14px; font-weight:600; padding:23px 0; cursor:pointer; }
.kv-faq-list summary::-webkit-details-marker { display:none; }
.kv-faq-list summary span { font-size:23px; font-weight:400; transition:transform .2s; }
.kv-faq-list details[open] summary span { transform:rotate(45deg); }
.kv-faq-list details p { font-size:13px; color:#6e605b; padding:0 30px 22px 0; margin:0; }
.kv-faq-list details a { color:inherit; text-underline-offset:3px; }
.kv-related { background:#faf7f5; }
.kv-related-heading { display:flex; justify-content:space-between; align-items:flex-end; gap:25px; margin-bottom:36px; }
.kv-related-heading h2 { margin-bottom:0; }
.kv-related-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:20px; }
.kv-related-grid .pdp-related-card { border:0; background:transparent; color:inherit; text-decoration:none; border-radius:0; overflow:visible; text-align:left; padding:0; }
.kv-related-grid .pdp-related-card > picture { display:block; overflow:hidden; border-radius:16px; }
.kv-related-grid .pdp-related-card img { width:100%; aspect-ratio:1; object-fit:cover; border-radius:16px; }
.kv-related-grid .pdp-related-card h3 { font-size:14px; font-weight:600; letter-spacing:-.2px; line-height:1.45; margin:16px 0 7px; }
.kv-related-grid .pdp-related-card p { font-size:13px; margin:0; }
.page-product .kv-footer { background:var(--kv-blue); color:var(--kv-ink); padding:55px 0 25px; }
.kv-footer-top { display:grid; grid-template-columns:1.5fr 1fr 1fr; gap:45px; }
.kv-footer-top p { font-size:12px; }
.kv-footer-top h2 { margin:5px 0 18px; font-size:12px; text-transform:uppercase; letter-spacing:.08em; }
.kv-footer-top > div > a:not(.logo) { display:block; margin:11px 0; text-decoration:none; color:inherit; font-size:12px; }
.kv-footer-bottom { display:flex; gap:20px; justify-content:space-between; border-top:1px solid #b8cddc; padding-top:23px; margin-top:44px; font-size:10px; }
.kv-footer-bottom nav { display:flex; flex-wrap:wrap; gap:20px; }
.kv-footer-bottom a { color:inherit; text-decoration:none; }
.kv-footer .shop-footer { margin-top:25px; font-size:10px; }
.page-product :is(.kv-button,.pdp-thumb,.kv-text-link):focus-visible { outline:3px solid #8b4258; outline-offset:4px; }
@media (max-width:1100px) { .kv-hero-grid { gap:38px; } .kv-preparation-grid,.kv-benefits-grid { gap:45px; } .kv-fit-grid,.kv-faq-grid { gap:60px; } .kv-benefits-copy h2 { font-size:48px; } }
@media (max-width:980px) { .kv-section { padding:65px 0; } .kv-hero-grid { gap:30px; } .kv-buy h1 { font-size:35px; } .kv-benefits-copy h2 { font-size:39px; } .kv-section h2 { letter-spacing:-1.7px; } .kv-preparation-grid,.kv-fit-grid { gap:40px; } .kv-benefits-grid { gap:35px; } .kv-step-grid { gap:17px; } .kv-step h3 { font-size:15px; } .kv-compare-wrap { max-width:900px; } .kv-faq-grid { gap:45px; } .kv-comparison th,.kv-comparison td { padding:18px 15px; } }
@media (max-width:760px) { .page-product .wrap { width:calc(100% - 40px); } .kv-hero { padding:24px 0 36px; } .kv-hero-grid { grid-template-columns:1fr; gap:27px; } .kv-main-photo { border-radius:17px; } .kv-buy { padding-top:0; } .kv-buy h1 { font-size:36px; max-width:20ch; letter-spacing:-1.5px; } .kv-eyebrow { font-size:9px; margin-bottom:12px; } .kv-thumbs .pdp-thumb { flex-basis:67px; width:67px; height:67px; } .kv-tagline { font-size:17px; } .kv-section-nav { gap:13px 24px; padding:18px 20px; } .kv-section-nav a { font-size:10px; } .kv-section { padding:57px 0; scroll-margin-top:70px; } .kv-section h2 { font-size:39px; letter-spacing:-1.8px; } .kv-section .kv-lead { font-size:15px; } .kv-section-heading { margin-bottom:30px; } .kv-preparation-grid,.kv-benefits-grid,.kv-fit-grid,.kv-faq-grid { grid-template-columns:1fr; gap:36px; } .kv-kit-visual { max-width:550px; margin:0 auto; transform:rotate(1deg); } .kv-kit-visual img { aspect-ratio:1.15; } .kv-preparation-copy { max-width:550px; } .kv-benefits-grid { gap:34px; } .kv-portrait { max-width:550px; width:100%; margin:auto; border-radius:85px 85px 18px 18px; } .kv-portrait img { aspect-ratio:1; object-position:center 38%; } .kv-benefits-copy h2 br:nth-child(2) { display:none; } .kv-benefit-grid { margin:25px 0; gap:25px; } .kv-benefit-grid h3 { font-size:14px; } .kv-benefit-grid p { font-size:12px; } .kv-fit-grid { gap:37px; } .kv-fit-collage { margin-right:14px; } .kv-fit-collage img { aspect-ratio:1.12; border-radius:20px; } .kv-fit-stamp { right:-14px; bottom:20px; width:110px; height:110px; font-size:12px; } .kv-step-grid { grid-template-columns:1fr 1fr; gap:30px 18px; } .kv-step-photo { margin-bottom:16px; } .kv-step-photo img { border-radius:13px; } .kv-step-photo > span { width:30px; height:30px; left:9px; top:9px; font-size:10px; } .kv-step h3 { font-size:17px; } .kv-step p { font-size:12px; } .kv-inspiration-grid { gap:22px; grid-template-columns:1fr; } .kv-inspiration-grid article { display:grid; grid-template-columns:130px 1fr; column-gap:20px; align-content:center; } .kv-inspo-photo { grid-column:1; grid-row:1 / 4; margin:0; border-radius:13px; } .kv-inspo-photo img { aspect-ratio:.85; height:100%; object-fit:cover; } .kv-inspo-photo--portrait img { object-position:center 38%; } .kv-inspiration-grid .kv-eyebrow { grid-column:2; align-self:end; margin:7px 0 7px; font-size:8px; } .kv-inspiration-grid h3 { grid-column:2; font-size:22px; margin-bottom:8px; } .kv-inspiration-grid article > p:last-child { grid-column:2; font-size:12px; } .kv-comparison { font-size:10px; } .kv-comparison thead th { font-size:12px; } .kv-comparison thead .kv-kittiva-column { font-size:17px; } .kv-comparison th,.kv-comparison td { padding:16px 10px; } .kv-comparison tbody th { font-size:10px; } .kv-comparison thead th:first-child { width:24%; } .kv-table-lead { font-size:10px; } .kv-table-wrap { margin-top:31px; } .kv-compare .wrap { width:calc(100% - 24px); } .kv-faq-grid { gap:26px; } .kv-faq-list summary { font-size:13px; padding:20px 0; } .kv-related-heading { align-items:flex-start; flex-direction:column; gap:14px; margin-bottom:25px; } .kv-related-grid { grid-template-columns:1fr 1fr; gap:27px 17px; } .kv-related-grid .pdp-related-card h3 { font-size:12px; margin-top:12px; } .kv-related-grid .pdp-related-card p { font-size:12px; } .kv-footer-top { grid-template-columns:1fr 1fr; gap:25px; } .kv-footer-top > div:first-child { grid-column:1 / -1; } .kv-footer-bottom { flex-direction:column; gap:15px; margin-top:30px; } }
@media (max-width:380px) { .page-product .wrap { width:calc(100% - 32px); } .kv-buy h1 { font-size:31px; } .kv-section h2 { font-size:35px; } .kv-inspiration-grid article { grid-template-columns:106px 1fr; gap:0 15px; } .kv-inspiration-grid h3 { font-size:20px; } .kv-button { padding:15px 21px; font-size:12px; } .kv-step-grid { column-gap:13px; } .kv-step h3 { font-size:15px; } .kv-comparison th,.kv-comparison td { padding:15px 7px; } }
@media (prefers-reduced-motion:reduce) { .kv-button,.kv-faq-list summary span { transition:none; } }
