/* ==========================================================================
   my.kiss.us — additions to css/v2.css (2026-09-17)
   Append this whole file to the end of css/v2.css and bump the stylesheet version (?v=).
   Sections:
     1. Sidebar: "Design Software" (New) and "New Store" (Beta) items
     2. Dashboard: tile spacing, KISS Designer tile, New BETA Store tile, laptop frame
     3. Subpages (shared): /home/kiss_designer and /home/new_store   — prefix .ks-
     4. KISS Designer subpage: step guide, iMac frame, accounts panel — prefix .kd-
     5. New Store subpage: hero, "coming soon" preview, comparison table with pictograms, steps — prefix .ns-
   Icons referenced here live in /assets/ (menu-*-g.svg grey, menu-*-b.svg black).
   ========================================================================== */


/* 1. Sidebar ---------------------------------------------------------------- */

.k-menu-main a.menu-design-software { background-image: url('/assets/menu-design-software-g.svg'); }
.k-menu-main a.menu-design-software:hover,
.k-menu-main a.menu-design-software.menu-active { background-image: url('/assets/menu-design-software-b.svg'); color: #000; }

.k-menu-main a.menu-new-store { background-image: url('/assets/menu-new-store-g.svg'); }
.k-menu-main a.menu-new-store:hover,
.k-menu-main a.menu-new-store.menu-active { background-image: url('/assets/menu-new-store-b.svg'); color: #000; }

.k-menu-pill {
	background-color: #0c4339;
	border-radius: 50px;
	color: #fff;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.06em;
	line-height: 1;
	margin-left: -7px;
	padding: 4px 7px;
	text-transform: uppercase;
}


/* 2. Dashboard ---------------------------------------------------------------- */

/* Tighter tiles: v2.css uses a 50 px gap. The rule for the space between the two rows assumes the second
   row is the next sibling; if the template spaces the rows another way (e.g. mt-5), change it there. */
.dashboard-box-main { gap: 24px; }
.dashboard-box-main + .dashboard-box-main { margin-top: 24px !important; }

/* Light green pill above the tile titles ("Now with proofing", "Beta"). The selector has to beat
   ".box-two-design a span", which underlines every span in the KISS Designer tile link (meant for its call to action). */
.box-two-design .k-pill-light,
.k-store-tile .k-pill-light {
	background-color: #bfe0b4;
	border-radius: 50px;
	color: #0c4339;
	display: inline-block;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.06em;
	line-height: 1;
	padding: 4px 8px;
	text-decoration: none;
	text-shadow: none;
	text-transform: uppercase;
	white-space: nowrap;
}

/* KISS Designer tile: single-line title, larger than the other tiles' two-line titles. */
.box-two-design h3.k-banner-title {
	font-size: 32px;
	line-height: 1.15;
}

/* KISS Designer tile: the two short info lines, a touch smaller than the tiles' default 14 px. */
.box-two-design h5.k-banner-info {
	font-size: 13px;
}

/* New BETA Store tile: the whole tile is one link (like the other tiles), text on the left and the store
   in a laptop on the right. The laptop hides when the tile gets too narrow to show it legibly (below ~1280 px). */
.k-store-tile {
	align-items: center;
	background-color: #56663a;
	border-radius: 10px;
	color: #fff;
	container-type: inline-size;
	display: flex;
	gap: 24px;
	padding: 40px;
	text-decoration: none;
	width: 50%;
}
.k-store-tile:hover { color: #fff; }
.k-store-tile:focus-visible { box-shadow: 0 0 0 3px #fff, 0 0 0 6px #56663a; outline: 2px solid transparent; }
.k-store-tile-text { flex: 1 1 0; min-width: 0; }
.k-store-tile-visual { flex: 0 0 50%; }
.k-store-tile .k-pill-light { margin-bottom: 10px; }
.k-store-tile h3 { color: #fff; font-size: 32px; font-weight: 700; line-height: 1.15; margin: 0 0 10px; }
.k-store-tile p { color: #fff; font-size: 13px; line-height: 1.5; margin: 0 0 20px; }
/* White button at the bottom of both tiles; turns light green when the tile link is hovered or focused.
   On the KISS Designer tile it has to beat ".box-two-design a span" (underline) as well. */
.k-tile-btn,
.box-two-design a span.k-tile-btn {
	background-color: #fff;
	border-radius: 50px;
	color: #3f4d2a;
	display: inline-block;
	font-size: 14px;
	font-weight: 700;
	line-height: 21px;
	padding: 10px 28px;
	text-decoration: none;
	text-shadow: none;
}
.box-two-design a span.k-tile-btn { color: #21383c; }
.k-store-tile:hover .k-tile-btn,
.k-store-tile:focus-visible .k-tile-btn,
.box-two-design a:hover span.k-tile-btn,
.box-two-design a:focus-visible span.k-tile-btn { background-color: #bfe0b4; color: #0c4339; }
/* Container queries measure the tile's content box (tile width minus 80 px of padding). */
@container (max-width: 340px) {
	.k-store-tile-visual { display: none; }
}

/* Laptop frame (dashboard tile and New Store subpage). The screen is 16:9, like the store screenshot. */
.k-laptop { display: block; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.25)); margin: 0 auto; max-width: 640px; width: 100%; }
.k-laptop-screen { background: #1d1d1f; border: 1px solid #3a3a3c; border-bottom: 0; border-radius: 10px 10px 0 0; display: block; padding: 2.8% 2.8% 3.2%; position: relative; }
.k-laptop-screen::before { background: radial-gradient(circle, #6b6b6b 0 1.5px, transparent 2px); content: ""; height: 0; left: 0; padding-top: 2.8%; position: absolute; right: 0; top: 0; }
.k-laptop-screen img { aspect-ratio: 16 / 9; background: #fafafa; display: block; height: auto; object-fit: cover; object-position: top; width: 100%; }
.k-laptop-base { aspect-ratio: 100 / 3.4; background: linear-gradient(#e4e5e7, #a9abae); border-radius: 0 0 50% 50% / 0 0 100% 100%; display: block; margin: 0 -7%; position: relative; }
.k-laptop-base::before { background: #9ea0a3; border-radius: 0 0 6px 6px; content: ""; height: 45%; left: 50%; position: absolute; top: 0; transform: translateX(-50%); width: 16%; }


/* 3. Subpages (shared) -------------------------------------------------------- */

/* Layout reacts to the width of the content column (container queries), not the window: the sidebar and
   the right column change how much room a subpage actually gets. */
.ks-page {
	--ks-green: #21383c;
	--ks-green-deep: #0c4339;
	--ks-olive: #56663a;
	--ks-sand: #c6ac8f;
	--ks-sand-light: #f7f2ec;
	--ks-mint: #bfe0b4;
	--ks-mint-light: #eef6ea;
	--ks-brown: #7a5c3c;
	--ks-grey: #f5f5f5;
	--ks-muted: #5c636a;
	--ks-line: rgba(112, 112, 112, 0.24);
	container-type: inline-size;
}

.ks-page .ks-hero { background-color: var(--ks-green); border-radius: 10px; color: #fff; padding: 60px 40px; text-shadow: 1px 1px 5px rgba(0, 0, 0, 0.35); }
.ks-page .ks-hero-inner { max-width: 480px; }
.ks-page .ks-hero .ks-eyebrow { align-items: center; display: flex; flex-wrap: wrap; font-size: 14px; font-weight: 500; gap: 8px 12px; margin: 0 0 14px; }
.ks-page .ks-pill { background-color: var(--ks-mint); border-radius: 50px; color: var(--ks-green-deep); font-size: 11px; font-weight: 700; letter-spacing: 0.06em; line-height: 1; padding: 5px 10px; text-shadow: none; text-transform: uppercase; white-space: nowrap; }
.ks-page .ks-hero h1 { color: #fff; font-size: 40px; line-height: 1.15; margin: 0 0 20px; }
.ks-page .ks-hero p { font-size: 16px; line-height: 1.6; margin: 0 0 24px; }
.ks-page .ks-hero .ks-hero-note { font-size: 14px; margin: 16px 0 0; }

.ks-page .ks-btn { background-color: var(--ks-sand); border: 0; border-radius: 50px; color: var(--ks-green); display: inline-block; font-size: 14px; font-weight: 700; line-height: 21px; padding: 12px 40px; text-decoration: none; text-shadow: none; }
/* Mint on hover, like the dashboard tile buttons: visible on the dark hero and on the light page alike. */
.ks-page .ks-btn:hover, .ks-page .ks-btn:focus-visible { background-color: var(--ks-mint); color: var(--ks-green-deep); }
.ks-page .ks-btn:focus-visible { box-shadow: 0 0 0 3px #fff, 0 0 0 6px var(--ks-green); outline: 2px solid transparent; }
.ks-page .ks-btn--outline { background-color: transparent; border: 2px solid var(--ks-green); padding: 10px 38px; }
.ks-page .ks-btn--outline:hover, .ks-page .ks-btn--outline:focus-visible { background-color: var(--ks-green); color: #fff; }
.ks-page .ks-btn--dark { background-color: var(--ks-green-deep); color: #fff; }
.ks-page .ks-btn--dark:hover, .ks-page .ks-btn--dark:focus-visible { background-color: var(--ks-green); color: #fff; }

.ks-page .ks-notice { background-color: var(--ks-sand-light); border-left: 4px solid var(--ks-sand); border-radius: 10px; margin-top: 40px; padding: 30px; }
.ks-page .ks-notice-head { align-items: center; display: flex; gap: 16px; margin-bottom: 14px; }
.ks-page .ks-notice-head h2 { font-size: 20px; font-weight: 700; line-height: 1.3; margin: 0; }
/* Icon in a round bubble, lined up with the heading. */
.ks-page .ks-notice-icon { align-items: center; background-color: #fff; border-radius: 50%; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06); color: var(--ks-brown); display: inline-flex; flex: none; font-size: 20px; height: 46px; justify-content: center; position: relative; width: 46px; }
.ks-page .ks-notice--highlight .ks-notice-icon { background-color: var(--ks-mint); color: var(--ks-green-deep); }
/* Two small bubbles rising from the flask icon. */
.ks-page .ks-notice-icon--bubbles::before,
.ks-page .ks-notice-icon--bubbles::after { background-color: #9fcf92; border-radius: 50%; content: ""; position: absolute; }
.ks-page .ks-notice-icon--bubbles::before { height: 10px; right: -3px; top: -5px; width: 10px; }
.ks-page .ks-notice-icon--bubbles::after { height: 6px; right: -11px; top: -13px; width: 6px; }
.ks-page .ks-notice p, .ks-page .ks-notice ul { line-height: 1.6; margin: 0 0 14px; }
.ks-page .ks-notice ul { padding-left: 20px; }
.ks-page .ks-notice li + li { margin-top: 6px; }
.ks-page .ks-notice p:last-child { margin-bottom: 0; }
.ks-page .ks-notice--highlight { background-color: var(--ks-mint-light); border-left-color: var(--ks-green-deep); }

.ks-page .ks-section-title { font-size: 40px; font-weight: 500; margin: 0; }
.ks-page .ks-lead { color: var(--ks-muted); line-height: 1.6; margin: 0 0 24px; max-width: 720px; }

.ks-page .ks-card { background-color: var(--ks-grey); border-radius: 10px; height: 100%; padding: 30px; }
.ks-page .ks-card > i { color: var(--ks-green); display: block; font-size: 24px; margin-bottom: 16px; }
.ks-page .ks-card h3 { font-size: 18px; font-weight: 700; margin: 0 0 8px; }
.ks-page .ks-card p { color: var(--ks-muted); line-height: 1.6; margin: 0; }

.ks-page .ks-faq { border-top: 1px solid var(--ks-line); }
.ks-page .ks-faq details { border-bottom: 1px solid var(--ks-line); }
.ks-page .ks-faq summary { cursor: pointer; font-size: 17px; font-weight: 700; list-style: none; padding: 18px 40px 18px 0; position: relative; }
.ks-page .ks-faq summary::-webkit-details-marker { display: none; }
.ks-page .ks-faq summary::after { color: var(--ks-brown); content: "+"; font-size: 24px; font-weight: 400; position: absolute; right: 8px; top: 50%; transform: translateY(-50%); }
.ks-page .ks-faq details[open] summary::after { content: "\2212"; }
.ks-page .ks-faq summary:focus-visible { outline: 2px solid var(--ks-green); outline-offset: 2px; }
.ks-page .ks-faq details p { color: var(--ks-muted); line-height: 1.6; margin: 0 0 18px; max-width: 760px; }
.ks-page .ks-faq a, .ks-page .ns-steps a { color: var(--ks-green-deep); font-weight: 700; }

.ks-page .ks-alt { align-items: center; border: 1px solid var(--ks-line); border-radius: 10px; display: flex; gap: 24px; justify-content: space-between; margin-top: 50px; padding: 30px; }
.ks-page .ks-alt h3 { font-size: 20px; font-weight: 700; margin: 0 0 6px; }
.ks-page .ks-alt p { color: var(--ks-muted); margin: 0; }
.ks-page .ks-alt .ks-btn { flex-shrink: 0; }

@container (max-width: 700px) {
	.ks-page .ks-hero { padding: 40px 24px; }
	.ks-page .ks-hero h1, .ks-page .ks-section-title { font-size: 32px; }
	.ks-page .ks-alt { align-items: flex-start; flex-direction: column; }
}
@container (max-width: 520px) {
	.ks-page .ks-notice { padding: 24px; }
	.ks-page .ks-btn { text-align: center; width: 100%; }
}


/* 4. KISS Designer subpage ---------------------------------------------------- */

.ks-page .kd-hero {
	--kd-hero-image: url("https://cdn.shopify.com/s/files/1/0904/9250/2396/files/kiss_designer_banner_oldkiss3.png?width=1200");
	background-image: var(--kd-hero-image);
	background-position: top right;
	background-repeat: no-repeat;
	background-size: cover;
	text-shadow: 1px 1px 5px var(--ks-green);
}

.ks-page .kd-guide { display: grid; gap: 8px; grid-template-columns: repeat(5, minmax(0, 1fr)); position: relative; }
/* Visually hidden but focusable radios: the guide here and the New Store preview carousel. */
.ks-page .kd-guide-input,
.ks-page .ns-carousel-input { height: 1px; margin: 0; opacity: 0; overflow: hidden; pointer-events: none; position: absolute; width: 1px; }
.ks-page .kd-guide-tab { align-items: center; background-color: var(--ks-grey); border: 1px solid var(--ks-line); border-radius: 50px; cursor: pointer; display: flex; font-size: 14px; font-weight: 700; justify-content: center; line-height: 1.25; margin: 0; min-height: 46px; padding: 8px 12px; text-align: center; }
.ks-page .kd-guide-tab span { color: var(--ks-brown); margin-right: 6px; }
.ks-page .kd-guide-tab:hover { border-color: var(--ks-green); }
.ks-page .kd-guide-input:checked + .kd-guide-tab { background-color: var(--ks-green); border-color: var(--ks-green); color: #fff; }
.ks-page .kd-guide-input:checked + .kd-guide-tab span { color: var(--ks-sand); }
.ks-page .kd-guide-input:focus-visible + .kd-guide-tab { box-shadow: 0 0 0 3px #fff, 0 0 0 6px var(--ks-green); }
.ks-page .kd-guide-slide { align-items: center; display: none; gap: 32px; grid-column: 1 / -1; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); margin-top: 16px; }
.ks-page #kd-step-1:checked ~ .kd-guide-slide-1,
.ks-page #kd-step-2:checked ~ .kd-guide-slide-2,
.ks-page #kd-step-3:checked ~ .kd-guide-slide-3,
.ks-page #kd-step-4:checked ~ .kd-guide-slide-4,
.ks-page #kd-step-5:checked ~ .kd-guide-slide-5 { display: grid; }
.ks-page .kd-guide-count { color: var(--ks-brown); font-size: 13px; font-weight: 700; letter-spacing: 0.08em; margin: 0 0 8px; text-transform: uppercase; }
.ks-page .kd-guide-slide h3 { font-size: 22px; font-weight: 700; margin: 0 0 10px; }
.ks-page .kd-guide-slide p { color: var(--ks-muted); line-height: 1.6; margin: 0; }
.ks-page .kd-guide-slide p + p { margin-top: 10px; }
.ks-page .kd-guide-slide small { display: block; margin-top: 8px; }
.ks-page .kd-guide-slide .ks-btn { margin-top: 20px; }

/* iMac frame copied from the new kiss.us site (login.css), scaled with percentages. */
.ks-page .kd-imac { display: block; filter: drop-shadow(0 3px 3px rgba(0, 0, 0, 0.13)); margin: 0 auto; max-width: 640px; width: 100%; }
.ks-page .kd-imac-screen { background: #e6e7e6; border: 1px solid #c3c6c4; border-bottom: 0; border-radius: 12px 12px 0 0; display: block; padding: 3.8% 3.3% 2.9%; position: relative; }
.ks-page .kd-imac-screen::before { background: radial-gradient(circle, #555 0 2px, transparent 2.5px); content: ""; height: 0; left: 0; padding-top: 3.8%; position: absolute; right: 0; top: 0; }
.ks-page .kd-imac-screen img { aspect-ratio: 16 / 9; background: #fafafa; display: block; height: auto; object-fit: cover; object-position: top; width: 100%; }
.ks-page .kd-imac-chin { aspect-ratio: 100 / 10.5; background: linear-gradient(100deg, #d9dcda, #edefed 48%, #d8dbd9); border: 1px solid #c3c6c4; border-radius: 0 0 10px 10px; border-top: 0; display: block; }
.ks-page .kd-imac-stand { aspect-ratio: 1.68; background: linear-gradient(#acb2ae, #e1e4e1); clip-path: polygon(23% 0, 77% 0, 82% 85%, 100% 92%, 100% 100%, 0 100%, 0 92%, 18% 85%); display: block; margin: 0 auto; width: 24%; }

.ks-page .kd-accounts { align-items: center; aspect-ratio: 16 / 9; background-color: var(--ks-sand-light); display: flex; gap: 12px; justify-content: center; padding: 16px; }
.ks-page .kd-account { background-color: #fff; border: 1px solid var(--ks-line); border-radius: 10px; flex: 1 1 0; max-width: 210px; padding: 14px 12px; text-align: center; }
.ks-page .kd-account--app { border: 2px solid var(--ks-green); }
.ks-page .kd-account > i { color: var(--ks-green); display: block; font-size: 24px; margin: 8px 0; }
.ks-page .kd-account--mykiss > i { color: var(--ks-muted); }
.ks-page .kd-account .kd-account-label { color: var(--ks-brown); font-size: 11px; font-weight: 700; letter-spacing: 0.08em; margin: 0; text-transform: uppercase; }
.ks-page .kd-account b { display: block; font-size: 14px; line-height: 1.3; margin-bottom: 6px; }
.ks-page .kd-account span { color: var(--ks-muted); display: block; font-size: 12px; line-height: 1.4; }
.ks-page .kd-accounts-sign { color: var(--ks-brown); font-size: 32px; font-weight: 700; }

/* Below this width the photo in the hero image reaches under the text, so it gets dimmed. */
@container (max-width: 860px) {
	.ks-page .kd-hero { background-image: linear-gradient(90deg, var(--ks-green) 45%, rgba(33, 56, 60, 0.6)), var(--kd-hero-image); }
}
@container (max-width: 760px) {
	.ks-page .kd-guide { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@container (max-width: 700px) {
	.ks-page .kd-guide-slide { grid-template-columns: 1fr; }
}
@container (max-width: 520px) {
	.ks-page .kd-guide { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.ks-page .kd-accounts { aspect-ratio: auto; flex-direction: column; }
}


/* 5. New Store subpage ------------------------------------------------------- */

.ks-page .ns-hero { align-items: center; background-color: var(--ks-olive); display: grid; gap: 40px; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); }
.ks-page .ns-hero .ks-btn { background-color: #fff; color: #3f4d2a; }
/* Repeated on purpose: the white rule above has the same specificity as .ks-btn:hover and comes later. */
.ks-page .ns-hero .ks-btn:hover, .ks-page .ns-hero .ks-btn:focus-visible { background-color: var(--ks-mint); color: var(--ks-green-deep); }

.ks-page .ns-sprite { height: 0; overflow: hidden; position: absolute; width: 0; }

/* "Coming soon" box with a browser-framed preview carousel of the next version on the right. */
.ks-page .ns-soon { align-items: center; display: grid; gap: 32px; grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr); }
.ks-page .ns-soon-preview { margin: 0; position: relative; }
.ks-page .ns-soon-preview figcaption { color: var(--ks-muted); font-size: 12px; margin-top: 8px; text-align: center; }
.ks-page .ns-browser { background: #fff; border: 1px solid var(--ks-line); border-radius: 10px; box-shadow: 0 8px 24px rgba(12, 67, 57, 0.15); overflow: hidden; }
.ks-page .ns-browser-bar { align-items: center; background: #ece9e4; display: flex; gap: 6px; height: 22px; padding: 0 10px; }
.ks-page .ns-browser-bar span { background: #c9c4bc; border-radius: 50%; display: block; height: 8px; width: 8px; }
.ks-page .ns-browser img { display: block; height: auto; width: 100%; }

/* Carousel: one radio per slide (arrow keys switch slides), labels act as arrows and dots. No JavaScript.
   Adding a slide means one more radio, arrow group, dot, caption and one line in each list below. */
.ks-page .ns-carousel-viewport { overflow: hidden; position: relative; }
.ks-page .ns-carousel-track { display: flex; list-style: none; margin: 0; padding: 0; transition: transform 0.45s ease; }
.ks-page .ns-carousel-track li { flex: 0 0 100%; }
.ks-page .ns-carousel-track img { aspect-ratio: 1600 / 908; object-fit: cover; object-position: top; }
.ks-page #ns-preview-2:checked ~ .ns-browser .ns-carousel-track { transform: translateX(-100%); }
.ks-page #ns-preview-3:checked ~ .ns-browser .ns-carousel-track { transform: translateX(-200%); }
.ks-page .ns-carousel-arrows { align-items: center; display: none; inset: 0; justify-content: space-between; padding: 0 10px; pointer-events: none; position: absolute; }
.ks-page #ns-preview-1:checked ~ .ns-browser .ns-carousel-arrows--1,
.ks-page #ns-preview-2:checked ~ .ns-browser .ns-carousel-arrows--2,
.ks-page #ns-preview-3:checked ~ .ns-browser .ns-carousel-arrows--3 { display: flex; }
.ks-page .ns-carousel-arrows label { align-items: center; background-color: rgba(255, 255, 255, 0.94); border-radius: 50%; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18); color: var(--ks-green-deep); cursor: pointer; display: inline-flex; font-size: 13px; height: 34px; justify-content: center; margin: 0; pointer-events: auto; width: 34px; }
.ks-page .ns-carousel-arrows label:hover { background-color: var(--ks-mint); }
.ks-page .ns-carousel-dots { display: flex; justify-content: center; margin-top: 8px; }
.ks-page .ns-carousel-dots label { cursor: pointer; margin: 0; padding: 6px 4px; }
.ks-page .ns-carousel-dots label::before { background-color: #c9c4bc; border-radius: 50px; content: ""; display: block; height: 8px; transition: background-color 0.2s ease, width 0.2s ease; width: 8px; }
.ks-page .ns-carousel-dots label:hover::before { background-color: var(--ks-sand); }
.ks-page #ns-preview-1:checked ~ .ns-carousel-dots label[for="ns-preview-1"]::before,
.ks-page #ns-preview-2:checked ~ .ns-carousel-dots label[for="ns-preview-2"]::before,
.ks-page #ns-preview-3:checked ~ .ns-carousel-dots label[for="ns-preview-3"]::before { background-color: var(--ks-green); width: 22px; }
.ks-page #ns-preview-1:focus-visible ~ .ns-carousel-dots label[for="ns-preview-1"]::before,
.ks-page #ns-preview-2:focus-visible ~ .ns-carousel-dots label[for="ns-preview-2"]::before,
.ks-page #ns-preview-3:focus-visible ~ .ns-carousel-dots label[for="ns-preview-3"]::before { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--ks-green); }
.ks-page .ns-soon-preview .ns-carousel-dots + figcaption { margin-top: 2px; }
.ks-page .ns-carousel-caption span { display: none; }
.ks-page #ns-preview-1:checked ~ figcaption .ns-carousel-caption-1,
.ks-page #ns-preview-2:checked ~ figcaption .ns-carousel-caption-2,
.ks-page #ns-preview-3:checked ~ figcaption .ns-carousel-caption-3 { color: #212529; display: inline; font-weight: 700; }
@media (prefers-reduced-motion: reduce) {
	.ks-page .ns-carousel-track, .ks-page .ns-carousel-dots label::before { transition: none; }
}

/* Comparison table, rows and pictograms as in the "Compare shops" guide on the new kiss.us site. */
.ks-page .ns-compare { border-collapse: separate; border-spacing: 0; width: 100%; }
.ks-page .ns-compare th, .ks-page .ns-compare td { border-bottom: 1px solid var(--ks-line); line-height: 1.5; padding: 16px 18px; text-align: left; vertical-align: top; }
.ks-page .ns-compare thead th { border-bottom: 2px solid var(--ks-green); font-size: 17px; }
.ks-page .ns-compare thead th small { color: var(--ks-muted); display: block; font-size: 13px; font-weight: 500; }
.ks-page .ns-compare tbody th { font-weight: 700; width: 20%; }
.ks-page .ns-compare tbody th small { color: var(--ks-muted); display: block; font-size: 12px; font-weight: 500; }
.ks-page .ns-compare-no { color: var(--ks-brown); display: block; font-family: acta_displaybook, Georgia, "Times New Roman", serif; font-size: 22px; font-weight: 400; line-height: 1.1; }
.ks-page .ns-compare td { color: var(--ks-muted); width: 40%; }
.ks-page .ns-compare td b { color: #212529; display: block; }
.ks-page .ns-compare td p { margin: 4px 0 0; }
.ks-page .ns-compare td small { display: block; font-size: 13px; margin-top: 8px; }
.ks-page .ns-compare td small.ns-size-note { margin-top: 0; }
.ks-page .ns-compare td .ns-status + b { margin-top: 10px; }
.ks-page .ns-compare td a { color: var(--ks-green-deep); font-weight: 700; }
.ks-page .ns-compare .ns-compare-new { background-color: var(--ks-mint-light); color: #3d4a44; }
.ks-page .ns-compare thead .ns-compare-new { border-radius: 10px 10px 0 0; color: #212529; }

.ks-page .ns-products { display: grid; gap: 12px 6px; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); list-style: none; margin: 12px 0 10px; padding: 0; }
.ks-page .ns-products li { align-items: center; display: flex; flex-direction: column; gap: 6px; min-width: 0; text-align: center; }
.ks-page .ns-products svg { fill: none; flex: none; height: 40px; stroke: var(--ks-brown); stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.5; width: 40px; }
.ks-page .ns-sizes { align-items: flex-end; display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 6px 0 12px; padding: 0; }
.ks-page .ns-sizes li { align-items: center; display: flex; flex: none; flex-direction: column; gap: 3px; width: 40px; }
.ks-page .ns-sizes svg { fill: #fff; height: 40px; stroke: var(--ks-brown); stroke-width: 1.3; width: 40px; }
.ks-page .ns-products span, .ks-page .ns-sizes span { color: #212529; font-size: 12px; line-height: 1.3; }
.ks-page .ns-sizes span { font-variant-numeric: tabular-nums; white-space: nowrap; }
.ks-page .ns-status { align-items: center; display: inline-flex; font-weight: 700; gap: 6px; }
.ks-page .ns-status svg { fill: none; height: 20px; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; width: 20px; }
.ks-page .ns-status--yes { color: var(--ks-green-deep); }
.ks-page .ns-status--soon { color: var(--ks-brown); }
.ks-page .ns-status--small { font-size: 12px; gap: 4px; }
.ks-page .ns-status--small svg { height: 15px; width: 15px; }
.ks-page .ns-compare td b.ns-soon-label { align-items: center; display: flex; flex-wrap: wrap; gap: 2px 8px; }
/* Formats that are not available yet: dashed outline, as on the store's greyed-out options. */
.ks-page .ns-sizes--soon li { width: auto; min-width: 40px; }
.ks-page .ns-sizes--soon svg { fill: transparent; stroke-dasharray: 3 2; }
.ks-page .ns-sizes--soon span { color: var(--ks-muted); }

.ks-page .ns-steps { counter-reset: ns-step; display: grid; gap: 24px; grid-template-columns: repeat(3, minmax(0, 1fr)); list-style: none; margin: 0; padding: 0; }
.ks-page .ns-steps li { border-top: 2px solid var(--ks-sand); counter-increment: ns-step; padding-top: 20px; }
.ks-page .ns-steps li::before { color: var(--ks-brown); content: counter(ns-step, decimal-leading-zero); display: block; font-family: acta_displaybook, Georgia, "Times New Roman", serif; font-size: 34px; line-height: 1; margin-bottom: 14px; }
.ks-page .ns-steps h3 { font-size: 18px; font-weight: 700; margin: 0 0 8px; }
.ks-page .ns-steps p { color: var(--ks-muted); line-height: 1.6; margin: 0; }
.ks-page .ns-steps p + p { margin-top: 10px; }

@container (max-width: 860px) {
	.ks-page .ns-hero { grid-template-columns: 1fr; }
	.ks-page .ns-hero .ks-hero-inner { max-width: none; }
	.ks-page .ns-soon { grid-template-columns: 1fr; }
}
@container (max-width: 700px) {
	.ks-page .ns-steps { grid-template-columns: 1fr; }
	.ks-page .ns-compare th, .ks-page .ns-compare td { padding: 12px 10px; }
}