/*
Theme Name: Inga's COATS and boots
Description: Lengva vieno puslapio tema Ingos rūbų ir batų šunims parduotuvei. Tekstai ir nuotraukos redaguojami standartiniame WordPress redaktoriuje.
Version: 1.0.0
Requires at least: 6.6
Requires PHP: 7.4
Author: Inga's COATS and boots
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: inga-coats
*/

/* WordPress spacing between blocks is off; the design below sets its own. Kept first so the design wins. */
.wp-block-group > *, .wp-block-details > * { margin-block: 0 }
main p, main figure, main .wp-block-image { margin: 0 }

/* Layout: a maker's shop window. Six tiles (two text, four products) are the main menu; each product tile opens its section with a shared-element transition.
   Then: why made to measure, the products, how ordering works, the measurement form, reviews and questions.
   Colours come from Inga's printed card: berry logo, dusty pink, and the yellow of her leopard fabric. --forest is the primary (berry), --ochre the fabric accent. */
:root {
  --bg: #FBF7F8;
  --surface: #FFFFFF;
  --ink: #1A0A10;
  --muted: #6A5560;
  --line: #ECDDE1;
  --forest: #A81D42;
  --ochre: #F0B400;
  --ochre-ink: #A81D42;
  --rose: #A81D42;
  --on-forest: #FFFFFF;
  --pink: #E2BCBE;
  --dog: #2A1520;
  --dog-2: #8B6672;
  --f-display: 'Young Serif', Georgia, 'Times New Roman', serif;
  --f-body: 'Albert Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --bg: #160B10; --surface: #21131A; --ink: #F8ECF0; --muted: #C5ADB7; --line: #3B2631; --forest: #E35A86; --ochre: #F5C02E; --ochre-ink: #F07EA2; --rose: #F07EA2; --on-forest: #1A0A10; --pink: #3A2029; --dog: #EBD5DC; --dog-2: #9D7884; color-scheme: dark }
}
:root[data-theme="dark"] { --bg: #160B10; --surface: #21131A; --ink: #F8ECF0; --muted: #C5ADB7; --line: #3B2631; --forest: #E35A86; --ochre: #F5C02E; --ochre-ink: #F07EA2; --rose: #F07EA2; --on-forest: #1A0A10; --pink: #3A2029; --dog: #EBD5DC; --dog-2: #9D7884; color-scheme: dark }
:root[data-theme="light"] { color-scheme: light }
* { box-sizing: border-box }
html { scroll-behavior: smooth; scroll-padding-top: 76px }
body { margin: 0; background: var(--bg); color: var(--ink); font: 17px/1.6 var(--f-body); -webkit-font-smoothing: antialiased }
a { color: inherit }
:focus-visible { outline: 3px solid var(--forest); outline-offset: 3px; border-radius: 4px }
.wrap { max-width: 1160px; margin-inline: auto; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)) }
h1, h2, h3 { font-family: var(--f-display); font-weight: 400; margin: 0; line-height: 1.08; text-wrap: balance }
h2 { font-size: clamp(32px, 4.6vw, 50px) }
section { padding-block: clamp(56px, 8vw, 96px) }
.eyebrow { margin: 0 0 10px; font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ochre-ink) }
.lede { color: var(--muted); max-width: 58ch; margin: 14px 0 0; font-size: 18.5px }

header.top { position: sticky; top: 0; z-index: 20; background: color-mix(in srgb, var(--bg) 90%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--line) }
.top .wrap { display: flex; align-items: center; gap: 22px; min-height: 64px }
.top .theme { margin-left: auto }
.brand { text-decoration: none; display: flex; align-items: center }
.wordmark { display: inline-flex; align-items: baseline; gap: .3em; color: var(--forest); text-decoration: none; white-space: nowrap; line-height: 1 }
.wordmark b { font: 700 27px 'Fira Sans Condensed', var(--f-body) }
.wordmark .c { font: 600 21px 'Fira Sans Condensed', var(--f-body); letter-spacing: .02em }
.wordmark .s { font: 400 25px 'Marck Script', 'Segoe Script', cursive }

@media (max-width: 520px) {
  .wordmark b { font-size: 20px }
  .wordmark .c { font-size: 15.5px }
  .wordmark .s { font-size: 18.5px }
  .top .btn.sm { display: none }
}



.units button { position: relative; isolation: isolate }
.top .btn.sm { justify-content: center }
.units .pill { position: absolute; inset: 0; border-radius: 999px; background: var(--forest); z-index: -1 }
.units .pill { view-transition-name: units-pill }
::view-transition-group(units-pill) { animation-duration: .5s; animation-timing-function: cubic-bezier(.3, 1.35, .5, 1) }


.units .pill { view-transition-name: units-pill }

/* view transitions */
::view-transition { pointer-events: none }

html.vt-reveal::view-transition-old(root), html.vt-reveal::view-transition-new(root) { animation: none; mix-blend-mode: normal }
html.vt-reveal::view-transition-old(root) { z-index: 0 }
html.vt-reveal::view-transition-new(root) { z-index: 1 }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 50px; padding: 0 22px; border-radius: 999px; font: 700 16px var(--f-body); text-decoration: none; border: 2px solid var(--forest); color: var(--forest); background: transparent; cursor: pointer; transition: transform .25s cubic-bezier(.3,1.4,.5,1) }
.btn:hover { transform: translateY(-2px) }
.btn.primary { background: var(--forest); color: var(--on-forest) }
.btn.sm { min-height: 42px; padding: 0 16px; font-size: 15px }

/* intro + six product tiles */
.intro { padding-block: clamp(26px, 4vw, 44px) clamp(48px, 7vw, 80px) }
.tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: auto auto; gap: 16px }
.tiles-nav, .tiles-nav ul { grid-column: 1 / -1; grid-row: 1 / -1; display: grid; grid-template-columns: subgrid; grid-template-rows: subgrid; margin: 0; padding: 0; list-style: none; pointer-events: none }
.tiles-nav li { min-width: 0; pointer-events: auto }
/* desktop: H1 · coats · boots / fleece · pants · closing line */
.tt-1 { grid-area: 1 / 1 }
.tiles-nav li:nth-child(1) { grid-area: 1 / 2 }
.tiles-nav li:nth-child(2) { grid-area: 1 / 3 }
.tiles-nav li:nth-child(3) { grid-area: 2 / 1 }
.tiles-nav li:nth-child(4) { grid-area: 2 / 2 }
.tt-6 { grid-area: 2 / 3 }
@media (max-width: 960px) {
  /* two columns: H1 · coats / boots · fleece / pants · closing line */
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: auto auto auto }
  .tiles-nav li:nth-child(2) { grid-area: 2 / 1 }
  .tiles-nav li:nth-child(3) { grid-area: 2 / 2 }
  .tiles-nav li:nth-child(4) { grid-area: 3 / 1 }
  .tt-6 { grid-area: 3 / 2 }
}
@supports not (grid-template-columns: subgrid) { .tiles-nav, .tiles-nav ul { display: contents } }
/* wide screens: slightly flatter photos so both rows fit on the first screen */
@media (min-width: 961px) { .intro .media { aspect-ratio: 3 / 2 } .intro { padding-top: 28px } }
/* the flyer headline, split into the first and the last card */
.tt { display: flex; flex-direction: column; justify-content: flex-end; min-width: 0; padding: clamp(18px, 2.6vw, 30px); border-radius: 22px }
.tt-1 { background: var(--forest); color: var(--on-forest) }
.tt-6 { background: var(--pink); color: var(--forest) }
.intro .tt-h { margin: 0; max-width: none; font: 700 clamp(30px, 4.4vw, 58px)/1.02 'Fira Sans Condensed', var(--f-body); letter-spacing: -.005em; text-wrap: balance }
.tt-sub { display: block; margin-top: .45em; font-size: .5em; font-weight: 600; line-height: 1.15; opacity: .85 }
.tt-p { margin: 0; font: 600 clamp(21px, 2.9vw, 38px)/1.08 'Fira Sans Condensed', var(--f-body); text-wrap: balance }
.tile { display: flex; flex-direction: column; width: 100%; height: 100%; padding: 0; border: 1px solid var(--line); border-radius: 22px; background: var(--surface); color: var(--ink); text-align: left; text-decoration: none; font: inherit; cursor: pointer; overflow: hidden; transition: transform .3s cubic-bezier(.3, 1.3, .5, 1), box-shadow .3s }
.tile:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--forest) 40%, var(--line)); box-shadow: 0 18px 36px -20px color-mix(in srgb, var(--forest) 70%, transparent) }
.tile:active { transform: translateY(-1px) scale(.99) }
.tile:focus-visible { outline: 3px solid var(--forest); outline-offset: 3px; border-radius: 22px }
.tile .media img { transition: transform .6s cubic-bezier(.2, .8, .2, 1) }
.tile:hover .media img { transform: scale(1.05) }
.media { position: relative; display: grid; place-items: center; width: 100%; aspect-ratio: 4 / 3; background: var(--pink); overflow: hidden }
.media.photo img { width: 100%; height: 100%; object-fit: cover; display: block }
/* photo placeholders: slot code (= file name Inga sends), what to shoot, minimum size */
.ph-media { background: color-mix(in srgb, var(--pink) 55%, var(--surface)); color: var(--forest); outline: 2px dashed color-mix(in srgb, var(--forest) 35%, transparent); outline-offset: -10px; padding: 14px }
.ph-media .ph-in { gap: 6px; font-size: 13px }
.ph-media .ph-in svg { width: 30px; height: 30px }

.ph-in small { font-size: 12.5px; font-weight: 500; opacity: .8 }
.dd-ph { gap: 6px; align-content: center; padding: 8px }


.ph-av { background: color-mix(in srgb, var(--pink) 70%, var(--surface)) !important; color: var(--forest) !important }
.ph-av svg { width: 24px; height: 24px }
.tl { flex: 1; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-content: start; column-gap: 12px; row-gap: 2px; padding: 14px 14px 16px 18px }
.tl > b, .tl > span[data-i] { grid-column: 1 }
.tl b { width: fit-content; font: 400 24px/1.15 var(--f-display) }
.tl span { color: var(--muted); font-size: 15px; line-height: 1.4 }
.tl .tile-go { grid-column: 2; grid-row: 1 / span 2; align-self: center; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; border: 1.5px solid var(--line); color: var(--forest); transition: background .25s, border-color .25s, color .25s }
.tile-go svg { width: 18px; height: 18px; transition: transform .25s }
.tile:hover .tile-go { background: var(--forest); border-color: var(--forest); color: var(--on-forest) }
.tile:hover .tile-go svg { transform: translateX(2px) }
@media (max-width: 760px) {
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px }
  .tt { border-radius: 18px }
  .media { aspect-ratio: 1 }
  .tl { padding: 10px 10px 12px 12px; column-gap: 8px }
  .tl .tile-go { width: 30px; height: 30px; grid-row: 1; align-self: start }
  .tile-go svg { width: 15px; height: 15px }
  .tl b { font-size: 19px }
  .tl span { font-size: 13px; line-height: 1.35 }
}

/* product sections: sample photos and a 'how to measure' panel */
:root { interpolate-size: allow-keywords }
.product { padding-block: clamp(48px, 7vw, 88px) }
.product.alt { background: var(--surface); border-block: 1px solid var(--line) }
.prod-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); grid-template-areas: "gallery head" "parts parts"; gap: clamp(28px, 4vw, 44px) clamp(28px, 5vw, 64px); align-items: start }
.product.flip .prod-grid { grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); grid-template-areas: "head gallery" "parts parts" }
.prod-info { grid-area: head; align-self: center; display: grid; gap: 18px; min-width: 0 }
.prod-head, .prod-more { display: grid; gap: 12px; justify-items: start; min-width: 0 }
.prod-facts { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: 16px }
.prod-facts li { position: relative; padding-left: 28px; line-height: 1.45 }
.prod-facts li::before { content: ""; position: absolute; left: 0; top: .2em; width: 18px; height: 18px; border-radius: 50%; background: var(--forest) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center / 12px no-repeat }
.text-link { font-weight: 700; color: var(--forest); text-decoration: none; display: inline-flex; align-items: center; min-height: 36px }
.text-link::after { content: "\2192"; margin-left: 6px }
.text-link:hover { text-decoration: underline; text-underline-offset: 3px }
.g-note { flex: 0 0 100%; margin: 0 0 2px 2px; font-size: 14px; color: var(--muted) }
.tape-loop { fill: none; stroke: var(--rose); stroke-width: 3; stroke-dasharray: 7 5 }
.faq-h { margin: 18px 0 2px; font: 700 13px var(--f-body); letter-spacing: .12em; text-transform: uppercase; color: var(--ochre-ink) }
.prod-head .lede { margin: 0 }
.prod-price { margin: 0; font-weight: 700 }
.prod-cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px }

.gallery { grid-area: gallery; min-width: 0 }
.g-head { display: flex; align-items: center; min-height: 48px; margin: 0 0 12px }
.g-label { display: flex; align-items: center; gap: 12px; margin: 0; font: 400 22px/1.2 var(--f-display) }
.g-switch { display: inline-flex; padding: 3px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface) }
.product.alt .g-switch { background: var(--bg) }
.g-switch button { position: relative; isolation: isolate; display: inline-flex; align-items: center; gap: 8px; min-height: 42px; padding: 0 18px; border: 0; border-radius: 999px; background: none; font: 700 15px var(--f-body); color: var(--muted); cursor: pointer; transition: color .3s }
.g-switch button:hover { color: var(--ink) }
.g-switch button[aria-pressed="true"] { color: var(--on-forest) }
.g-switch button:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px }
.g-switch svg { width: 18px; height: 18px; flex: none }
.g-switch .pill { position: absolute; inset: 0; border-radius: 999px; background: var(--forest); z-index: -1 }
::view-transition-group(g-pill) { animation-duration: .5s; animation-timing-function: cubic-bezier(.3, 1.35, .5, 1) }
::view-transition-group(g-frame) { animation-duration: .35s }
.g-track[hidden], .g-thumbs[hidden] { display: none }
.g-view { position: relative; border-radius: 26px; overflow: hidden; background: var(--pink) }
.g-track { display: flex; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; border-radius: 26px }
.g-track::-webkit-scrollbar { display: none }
.g-track:focus-visible { outline: 3px solid var(--forest); outline-offset: -3px }
.g-slide { position: relative; flex: 0 0 100%; margin: 0; aspect-ratio: 4 / 3; scroll-snap-align: start; scroll-snap-stop: always }
.g-slide figcaption { position: absolute; left: 12px; bottom: 12px; max-width: calc(100% - 96px); padding: 3px 12px; border-radius: 999px; background: rgb(20 8 14 / .62); color: #FFFFFF; font: 600 13px/1.5 var(--f-body) }
.ph-in b { font: 400 20px/1.2 var(--f-display) }
.g-slide img { width: 100%; height: 100%; object-fit: cover; display: block }
.g-slide.ph { display: grid; place-items: center; padding: 24px; background: color-mix(in srgb, var(--pink) 55%, var(--surface)); color: var(--forest); outline: 2px dashed color-mix(in srgb, var(--forest) 35%, transparent); outline-offset: -16px; border-radius: 26px }
.ph-in { display: grid; justify-items: center; gap: 10px; max-width: 22ch; text-align: center; font-weight: 600; font-size: 15px }
.ph-in svg { width: 42px; height: 42px }
.g-nav { position: absolute; top: 50%; translate: 0 -50%; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; display: grid; place-items: center; background: color-mix(in srgb, var(--surface) 92%, transparent); color: var(--ink); box-shadow: 0 4px 14px rgb(0 0 0 / .18); cursor: pointer; transition: opacity .2s }
.g-nav svg { width: 22px; height: 22px }
.g-nav.prev { left: 12px }
.g-nav.next { right: 12px }
.g-nav:disabled { opacity: 0; pointer-events: none }
.g-count { position: absolute; right: 12px; bottom: 12px; padding: 3px 10px; border-radius: 999px; background: rgb(20 8 14 / .62); color: #FFFFFF; font: 600 13px/1.5 var(--f-body); pointer-events: none }
.g-thumbs { position: relative; display: flex; gap: 8px; margin-top: 10px; padding: 3px; overflow-x: auto; scrollbar-width: none }
.g-thumbs::-webkit-scrollbar { display: none }
.g-thumbs button { flex: 0 0 76px; aspect-ratio: 4 / 3; padding: 0; border: 0; border-radius: 12px; overflow: hidden; background: var(--pink); color: var(--forest); cursor: pointer; opacity: .62; outline-offset: 2px; transition: opacity .2s }
.g-thumbs button:hover { opacity: .9 }
.g-thumbs button[aria-current="true"] { opacity: 1; outline: 2.5px solid var(--forest) }
.g-thumbs button:focus-visible { outline: 3px solid var(--ink) }
.g-thumbs img { width: 100%; height: 100%; object-fit: cover; display: block }
.g-thumbs .ph { display: grid; place-items: center; background: color-mix(in srgb, var(--pink) 55%, var(--surface)) }
.g-thumbs .ph svg { width: 22px; height: 22px }
.g-thumbs.sw { flex-wrap: wrap; overflow: visible; gap: 8px }
.g-thumbs.sw button { flex: 0 0 64px; aspect-ratio: 1 }
.g-group { flex: 0 0 100%; margin: 8px 0 0 2px; font: 700 12px var(--f-body); letter-spacing: .1em; text-transform: uppercase; color: var(--ochre-ink) }
.g-group:first-child { margin-top: 0 }
@media (hover: none) { .g-nav { display: none } }

.prod-parts { grid-area: parts; display: grid; gap: 12px; min-width: 0 }
.part { border: 1px solid var(--line); border-radius: 20px; background: var(--surface) }
.product.alt .part { background: var(--bg) }
.part > summary { display: flex; align-items: center; gap: 12px; min-height: 62px; padding: 10px 16px; list-style: none; cursor: pointer; border-radius: 20px }
.part > summary::-webkit-details-marker { display: none }
.part-ic { flex: none; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: color-mix(in srgb, var(--pink) 75%, var(--surface)); color: var(--forest) }
.part-ic svg { width: 20px; height: 20px }
.part-t { font: 400 22px/1.2 var(--f-display) }
.chev { flex: none; margin-left: auto; width: 22px; height: 22px; color: var(--muted); transition: rotate .3s }
.part[open] .chev { rotate: 180deg }
.part::details-content { block-size: 0; overflow-y: clip; transition: block-size .35s cubic-bezier(.3, 1, .4, 1), content-visibility .35s allow-discrete }
.part[open]::details-content { block-size: auto }
.part-body { padding: 4px clamp(18px, 3vw, 32px) clamp(20px, 3vw, 30px) }
.part > summary { padding-inline: clamp(16px, 3vw, 30px) }
.dtype-opts { max-width: 560px }
.m-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 0 clamp(24px, 4vw, 48px); align-items: start }
.m-vis { position: sticky; top: 88px }
.m-vis .mini-fig svg { max-width: 460px }
@media (max-width: 900px) {
  .m-grid { display: flex; flex-direction: column }
  .m-vis, .m-txt { display: contents }
  .m-grid .tech-desc { order: 1 }
  .m-grid .mini-fig { order: 2 }
  .m-txt > * { order: 3 }
  .m-grid .dodont { order: 4 }
}
.mini-fig { margin: 0 0 16px; padding: 12px; border-radius: 16px; background: var(--bg) }
.product.alt .mini-fig { background: var(--surface) }
.mini-fig svg { display: block; width: 100%; max-width: 380px; height: auto; margin-inline: auto }
.mini-fig.paw svg { max-width: 260px }
.mini-fig.paw text { font: 700 12px var(--f-body); fill: var(--ink) }
.mm { fill: none; stroke: var(--ochre); stroke-width: 4.5; stroke-dasharray: 7 5; stroke-linecap: round }
.mp circle { fill: var(--ochre); stroke: var(--surface); stroke-width: 2.5 }
.mp text { font: 700 15px var(--f-body); fill: #1E1405; text-anchor: middle; dominant-baseline: central }
.msteps { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px }
.msteps li { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 12px; align-items: start }
.msteps .k { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--forest); color: var(--on-forest); font: 700 14px var(--f-body) }
.msteps b { display: block; font-size: 16px; line-height: 1.35; padding-top: 3px }
.msteps p { margin: 2px 0 0; color: var(--muted); font-size: 15px; line-height: 1.5 }
.part-note { margin: 0 0 14px; color: var(--muted); font-size: 15px }
.msteps + .part-note { margin: 14px 0 0 }
.dtype { margin: 0 0 16px; padding: 0; border: 0; min-width: 0 }
.dtype legend { margin: 0 0 8px; padding: 0; font: 700 15px var(--f-body) }
.dtype-opts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px }
.dtype-opts label { position: relative; display: grid; place-items: center; min-height: 46px; padding: 6px 4px; border: 1.5px solid var(--line); border-radius: 12px; background: var(--bg); font-weight: 700; font-size: 14.5px; text-align: center; cursor: pointer; transition: border-color .2s, background .2s, color .2s }
.product.alt .dtype-opts label { background: var(--surface) }
.dtype-opts label:hover { border-color: var(--forest) }
.dtype-opts input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer }
.dtype-opts label:has(input:checked) { border-color: var(--forest); background: var(--forest); color: var(--on-forest) }
.dtype-opts label:has(input:focus-visible) { outline: 3px solid var(--ink); outline-offset: 2px }
form .dtype { margin: 2px 0 6px }
form .dtype legend { font: 600 14px var(--f-body); color: var(--muted) }
.tech[hidden], label.f[hidden] { display: none }
.tech-desc { margin: 0 0 12px; color: var(--muted); font-size: 14.5px }
.ph-fig { display: grid; place-items: center; aspect-ratio: 4 / 3; background: color-mix(in srgb, var(--pink) 55%, var(--surface)); color: var(--forest); outline: 2px dashed color-mix(in srgb, var(--forest) 35%, transparent); outline-offset: -10px }
.product.alt .ph-fig { background: color-mix(in srgb, var(--pink) 55%, var(--surface)) }
.mini-fig.ph-fig svg { width: 42px; height: 42px; max-width: none; margin: 0 }
.dodont { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 18px }
.dd { margin: 0; min-width: 0 }
.dd-ph { display: grid; place-items: center; aspect-ratio: 4 / 3; border-radius: 14px; background: color-mix(in srgb, var(--pink) 55%, var(--surface)); color: var(--forest); outline: 2px dashed color-mix(in srgb, var(--forest) 35%, transparent); outline-offset: -8px }
.dd-ph svg { width: 30px; height: 30px; opacity: .85 }
.dd figcaption { display: grid; gap: 2px; margin-top: 8px; font-size: 13.5px; line-height: 1.4; color: var(--muted) }
.dd figcaption b { display: flex; align-items: center; gap: 6px; font-size: 14px; color: var(--ink) }
.dd .mk { flex: none; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; color: #FFFFFF; font-size: 11px; line-height: 1 }
.dd.ok .mk { background: #2E8B57 }
.dd.no .mk { background: #D9542B }
@media (max-width: 400px) { .dtype-opts { grid-template-columns: repeat(2, minmax(0, 1fr)) } }
.part-links { display: flex; flex-wrap: wrap; gap: 4px 22px; margin-top: 16px }
.part-links a { display: inline-flex; align-items: center; min-height: 36px; font-weight: 700; color: var(--forest); text-decoration: none }
.part-links a::after { content: "\2192"; margin-left: 6px; transition: translate .2s }
.part-links a:hover { text-decoration: underline; text-underline-offset: 3px }
.part-links a:hover::after { translate: 3px 0 }
@media (max-width: 900px) {
  .prod-grid, .product.flip .prod-grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "gallery" "more" "parts"; grid-template-rows: auto }
  .prod-info { display: contents }
  .prod-head { grid-area: head }
  .prod-more { grid-area: more }
}
@media (max-width: 520px) {
  .g-view, .g-track, .g-slide.ph { border-radius: 20px }
  .g-thumbs button { flex-basis: 64px }
  .g-thumbs.sw button { flex-basis: 56px }
  .g-switch button { padding: 0 14px }
  .part-body { padding: 2px 14px 18px }
}

::view-transition-group(item-media) { animation-duration: .55s; animation-timing-function: cubic-bezier(.3, 1.1, .4, 1) }
::view-transition-old(item-media), ::view-transition-new(item-media) { width: 100%; height: 100%; object-fit: cover }

.dog .body, .dog .far { fill: var(--dog) }
.dog .far { fill: var(--dog-2) }
.dog .tail { fill: none; stroke: var(--dog); stroke-width: 7; stroke-linecap: round }
.dog .ear { fill: var(--forest) }
.dog .eye { fill: var(--bg) }

/* why: shop-size problem → made-to-measure answer */
.why { background: var(--surface); border-block: 1px solid var(--line) }
/* comparison table: our column first and tinted. On phones the row label sits above its two cells, which stay side by side */
.why-tbl { width: 100%; margin-top: 30px; border-collapse: separate; border-spacing: 0; border: 1px solid var(--line); border-radius: 22px; overflow: hidden; background: var(--bg); table-layout: fixed }
.why-tbl th, .why-tbl td { padding: 16px 20px; text-align: left; vertical-align: top; border-top: 1px solid var(--line) }
.why-tbl thead th, .why-tbl thead td { border-top: 0; padding-block: 14px; font: 700 12px/1.5 var(--f-body); letter-spacing: .1em; text-transform: uppercase; color: var(--muted) }
.why-tbl thead th.yes { color: var(--forest) }
.why-tbl tbody th { width: 22%; font: 400 20px/1.3 var(--f-display); color: var(--ink) }
.why-tbl thead td { width: 22% }
.why-tbl .yes { background: color-mix(in srgb, var(--pink) 34%, var(--surface)) }
.why-tbl td { --fs: 15.5px; font-size: var(--fs); line-height: 1.45; color: var(--muted) }
.why-tbl td.yes { color: var(--ink); font-weight: 600 }
.why-tbl .cell { display: flex; gap: 10px; align-items: flex-start }
/* icon centred on the first text line: (line height − icon) / 2 */
.wx, .wk { --ic: 20px; flex: none; width: var(--ic); height: var(--ic); margin-top: calc((1.45 * var(--fs) - var(--ic)) / 2); border-radius: 50%; display: inline-grid; place-items: center; font-size: 11px; font-weight: 700; line-height: 1 }
.wx { background: color-mix(in srgb, var(--muted) 18%, transparent); color: var(--muted) }
.wk { background: var(--forest); color: var(--on-forest) }
@media (max-width: 640px) {
  .why-tbl, .why-tbl thead, .why-tbl tbody { display: block }
  .why-tbl tr { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) }
  .why-tbl thead td { display: none }
  .why-tbl tbody th { grid-column: 1 / -1; width: auto; padding: 14px 14px 4px; font-size: 18px; background: var(--bg) }
  .why-tbl tbody td { --fs: 14px; border-top: 0; padding: 8px 14px 16px }
  .why-tbl thead th { padding: 12px 14px; font-size: 11px }
  .why-tbl .cell { gap: 8px }
  .wx, .wk { --ic: 18px; font-size: 10px }
}

/* measuring tips and the paw diagram */
.tips { margin-top: 18px; padding: 18px 20px; border-radius: 18px; background: color-mix(in srgb, var(--pink) 45%, var(--surface)) }
.tips b { display: block; margin-bottom: 6px }
.tips ul { margin: 0; padding-left: 20px; display: grid; gap: 4px; font-size: 15.5px }
.paper { fill: var(--bg); stroke: var(--line) }
.pad { fill: var(--dog) }
.mark { stroke: var(--rose); stroke-width: 2.5; stroke-linecap: round }
.arrow { stroke: var(--forest); stroke-width: 2.5; fill: none }

/* form */
.form-wrap { background: var(--forest); color: var(--on-forest) }
.form-wrap h2 { color: var(--on-forest) }
.form-wrap .eyebrow { color: var(--on-forest); opacity: .85 }
.form-wrap .lede { color: color-mix(in srgb, var(--on-forest) 82%, transparent) }
.form-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(24px, 4vw, 48px); margin-top: 30px; align-items: start }
form { background: var(--surface); color: var(--ink); border-radius: 26px; padding: clamp(20px, 3vw, 30px); display: grid; gap: 18px }
.units { display: inline-flex; padding: 3px; border-radius: 999px; background: var(--bg); border: 1px solid var(--line); justify-self: start }
.units button { border: 0; background: none; border-radius: 999px; padding: 6px 14px; font: 700 14px var(--f-body); color: var(--muted); cursor: pointer }
.units button[aria-pressed="true"] { color: var(--on-forest) }
fieldset { border: 0; padding: 0; margin: 0; display: grid; gap: 12px }
legend { font: 400 21px var(--f-display); margin-bottom: 6px; padding: 0 }
legend:has(.lg-check) { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px }
.lg-check { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 4px 16px 4px 12px; border: 1.5px solid var(--line); border-radius: 999px; font: 400 20px var(--f-display); cursor: pointer; transition: border-color .2s, background .2s }
.lg-check:hover { border-color: var(--forest) }
.lg-check:has(input:checked) { border-color: var(--forest); background: color-mix(in srgb, var(--forest) 9%, var(--surface)) }
.lg-check input { width: 20px; height: 20px; margin: 0; accent-color: var(--forest) }
.part-note b { color: var(--ink) }
.fields { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px }
.fields.two { grid-template-columns: repeat(2, minmax(0, 1fr)) }
label.f { display: grid; gap: 4px; font-size: 14px; font-weight: 600; min-width: 0 }
label.f span.k { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--forest); color: var(--on-forest); font-size: 12px; margin-right: 6px; vertical-align: 1px }
.in { position: relative }
.in input, .in textarea, .full input, .full textarea { width: 100%; min-height: 48px; border: 1.5px solid var(--line); border-radius: 12px; padding: 10px 44px 10px 12px; font: 600 17px var(--f-body); color: var(--ink); background: var(--bg) }
.full input, .full textarea { padding-right: 12px; font-weight: 500 }
.full textarea { min-height: 84px; resize: vertical }
.in em { position: absolute; right: 12px; top: 50%; translate: 0 -50%; font-style: normal; font-size: 14px; color: var(--muted); pointer-events: none }
input:focus, textarea:focus { outline: none; border-color: var(--forest) }
.warn { font-size: 12.5px; font-weight: 500; color: var(--rose); min-height: 0 }
.out { position: sticky; top: 84px; display: grid; gap: 12px }
.msg { background: color-mix(in srgb, var(--on-forest) 10%, transparent); border: 1px solid color-mix(in srgb, var(--on-forest) 22%, transparent); border-radius: 22px; padding: 20px; white-space: pre-wrap; font: 500 15px/1.55 ui-monospace, 'SF Mono', Menlo, Consolas, monospace; min-height: 220px; overflow-wrap: anywhere }
.out .btn { width: 100% }
.out .btn.primary { background: var(--ochre); border-color: var(--ochre); color: #1E1405 }
.out .btn.ghost { border-color: var(--on-forest); color: var(--on-forest) }
.out small { opacity: .8; font-size: 13.5px }
.out .tips { margin-top: 4px; color: var(--ink) }

/* ordering journey: 3 icon steps on a line (desktop) or down a rail (phone) */
.journey { list-style: none; margin: 34px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 clamp(16px, 3vw, 32px) }
.journey li { position: relative; display: grid; align-content: start; gap: 6px }
.journey .j-ic { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; margin-bottom: 10px; background: var(--forest); color: var(--on-forest); position: relative; z-index: 1 }
.journey .j-ic svg { width: 28px; height: 28px }
.journey li:not(:last-child)::after { content: ""; position: absolute; top: 26px; left: 52px; right: calc(-1 * clamp(16px, 3vw, 32px)); border-top: 2px dashed color-mix(in srgb, var(--forest) 40%, transparent) }
.journey h3 { font: 400 22px/1.2 var(--f-display) }
.journey p { margin: 0; color: var(--muted); font-size: 15.5px; max-width: 34ch }
.journey .text-link { margin-top: 2px }
@media (max-width: 760px) {
  .journey { grid-template-columns: minmax(0, 1fr); gap: 26px }
  .journey li { padding-left: 66px; min-height: 52px }
  .journey .j-ic { position: absolute; left: 0; top: 0; margin: 0 }
  .journey li:not(:last-child)::after { top: 52px; bottom: -26px; left: 25px; right: auto; border-top: 0; border-left: 2px dashed color-mix(in srgb, var(--forest) 40%, transparent) }
}
.after-form { padding-top: clamp(40px, 6vw, 64px) }
.after-form .reviews { margin-top: 0 }

/* reviews: one card per product. Real reviews carry a dog photo; empty slots stay dashed until filled. */
.reviews { margin-top: 40px }
.rev-list { list-style: none; margin: 12px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px }
.rev-list > li { display: flex }
.rev { flex: 1; display: flex; flex-direction: column; gap: 14px; margin: 0; padding: 20px; border-radius: 20px; background: var(--surface); border: 1px solid var(--line) }
.rev blockquote { margin: 0; flex: 1; font: 400 19px/1.35 var(--f-display) }
.rev figcaption { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 2px 12px; align-items: center }
.rev .av { grid-row: span 2; width: 52px; height: 52px; border-radius: 50%; overflow: hidden; display: grid; place-items: center; background: var(--ochre); color: #1E1405; font: 400 22px var(--f-display) }
.rev .av img { width: 100%; height: 100%; object-fit: cover; display: block }
.rev-who { font-weight: 700; font-size: 15px; line-height: 1.3 }
.rev-meta { color: var(--muted); font-size: 13.5px; line-height: 1.35 }
.rev-tag { align-self: flex-start; padding: 2px 10px; border-radius: 999px; background: color-mix(in srgb, var(--pink) 70%, var(--surface)); color: var(--forest); font: 700 12px/1.6 var(--f-body); letter-spacing: .02em }
.rev.ph { background: color-mix(in srgb, var(--pink) 30%, var(--surface)); border: 2px dashed color-mix(in srgb, var(--forest) 30%, transparent) }
.rev.ph blockquote { color: var(--muted); font: 600 15px/1.45 var(--f-body) }
.rev.ph .av { background: color-mix(in srgb, var(--pink) 70%, var(--surface)); color: var(--forest) }
.rev.ph .av svg { width: 24px; height: 24px }
.rev-more { margin: 12px 0 0 }
@media (max-width: 1000px) { .rev-list { grid-template-columns: repeat(2, minmax(0, 1fr)) } }
@media (max-width: 600px) {
  .rev-list { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin-inline: -16px; padding: 2px 16px 6px; scroll-padding-inline: 16px }
  .rev-list::-webkit-scrollbar { display: none }
  .rev-list > li { flex: 0 0 82%; scroll-snap-align: start }
}

.faq { margin-top: 40px; display: grid; gap: 10px }
.faq details { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 4px 18px }
.faq summary { cursor: pointer; padding: 12px 0; font-weight: 700; list-style: none }
.faq summary::-webkit-details-marker { display: none }
.faq summary::after { content: "+"; float: right; color: var(--ochre-ink); font-weight: 700 }
.faq details[open] summary::after { content: "−" }
.faq p { margin: 0 0 14px; color: var(--muted) }

/* theme toggle: sun becomes moon */
.theme { flex: none; width: 42px; height: 42px; padding: 0; border-radius: 50%; border: 1px solid var(--line); background: var(--surface); color: var(--ink); display: grid; place-items: center; cursor: pointer; transition: background .2s }
.theme:hover { background: color-mix(in srgb, var(--ink) 6%, var(--surface)) }

.theme svg { width: 22px; height: 22px; overflow: visible }
.theme .core { transform-box: view-box; transform-origin: 12px 12px; transition: transform .55s cubic-bezier(.3, 1.4, .5, 1) }
.theme .cut { transition: transform .45s cubic-bezier(.3, 1.2, .5, 1) }
.theme .rays { transform-box: view-box; transform-origin: 12px 12px; transition: transform .55s cubic-bezier(.3, 1.4, .5, 1), opacity .3s }
:root[data-theme="dark"] .theme .core { transform: scale(1.6) }
:root[data-theme="dark"] .theme .cut { transform: translate(-8.6px, 5.8px) }
:root[data-theme="dark"] .theme .rays { transform: rotate(90deg) scale(0); opacity: 0 }
@media (prefers-reduced-motion: reduce) { .theme .core, .theme .cut, .theme .rays { transition: none } }

/* footer */
footer.foot { background: var(--surface); border-top: 1px solid var(--line); color: var(--muted); font-size: 15px }
.foot-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, .8fr) minmax(0, 1fr) minmax(0, 1.2fr); gap: 32px; padding-block: 48px 36px }
.foot-brand { display: grid; gap: 16px; justify-items: start; align-content: start }
.foot-brand .wordmark { min-height: 36px; align-items: center }
.foot-brand p { margin: 0; max-width: 32ch }
.foot-contact { font-style: normal }
.foot-h { font: 700 12px var(--f-body); letter-spacing: .12em; text-transform: uppercase; color: var(--ink); margin: 0 0 10px }
.foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px }
.foot ul a { display: inline-flex; align-items: center; gap: 10px; min-height: 40px; text-decoration: none; color: var(--muted); overflow-wrap: anywhere }
.foot ul a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px }
.foot ul svg { width: 18px; height: 18px; flex: none }
.foot-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; padding-block: 18px 30px; border-top: 1px solid var(--line); font-size: 14px }
.foot-bottom a { color: var(--muted); text-decoration: none; display: inline-flex; min-height: 36px; align-items: center }
.foot-bottom a:hover { color: var(--ink) }
@media (max-width: 760px) {
  .foot-grid { grid-template-columns: 1fr 1fr; gap: 28px 20px; padding-block: 40px 28px }
  .foot-brand, .foot-contact { grid-column: 1 / -1 }
}
@media (max-width: 940px) {
  .form-grid { grid-template-columns: 1fr }
  .out { position: static }
}
@media (max-width: 520px) {
  .top .wrap { gap: 10px }
  .fields { grid-template-columns: 1fr 1fr }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important } html { scroll-behavior: auto } }

/* ------------------------------------------------------------------ WordPress mapping
   The rules above are the site's original design. These connect it to the blocks' markup. */
@font-face { font-family: 'Albert Sans'; src: url('assets/fonts/albert-sans-var.woff2') format('woff2'); font-weight: 400 700; font-display: swap }
@font-face { font-family: 'Young Serif'; src: url('assets/fonts/young-serif.woff2') format('woff2'); font-weight: 400; font-display: swap }
@font-face { font-family: 'Fira Sans Condensed'; src: url('assets/fonts/fira-sans-condensed-600.woff2') format('woff2'); font-weight: 600; font-display: swap }
@font-face { font-family: 'Fira Sans Condensed'; src: url('assets/fonts/fira-sans-condensed-700.woff2') format('woff2'); font-weight: 700; font-display: swap }
@font-face { font-family: 'Marck Script'; src: url('assets/fonts/marck-script.woff2') format('woff2'); font-weight: 400; font-display: swap }

main .lede { margin: 14px 0 0 }
main .eyebrow { margin: 0 0 10px }
.prod-head .lede { margin: 0 }

/* tiles: the title link stretches over the whole card */
.tiles-nav { grid-column: 1 / -1; grid-row: 1 / -1; display: grid; grid-template-columns: subgrid; grid-template-rows: subgrid; pointer-events: none }
.tiles-nav > .tile { min-width: 0; pointer-events: auto; position: relative }
.tiles-nav > .tile:nth-child(1) { grid-area: 1 / 2 }
.tiles-nav > .tile:nth-child(2) { grid-area: 1 / 3 }
.tiles-nav > .tile:nth-child(3) { grid-area: 2 / 1 }
.tiles-nav > .tile:nth-child(4) { grid-area: 2 / 2 }
@media (max-width: 960px) {
  .tiles-nav > .tile:nth-child(2) { grid-area: 2 / 1 }
  .tiles-nav > .tile:nth-child(3) { grid-area: 2 / 2 }
  .tiles-nav > .tile:nth-child(4) { grid-area: 3 / 1 }
}
@supports not (grid-template-columns: subgrid) { .tiles-nav { display: contents } }
.tile .media { flex: none }
.tile .media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s cubic-bezier(.2, .8, .2, 1) }
.tile:hover .media img { transform: scale(1.05) }
.tl-t { grid-column: 1; width: fit-content; font: 400 24px/1.15 var(--f-display) }
.tl-t a { color: inherit; text-decoration: none }
.tl-t a::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: 22px }
.tl-t a:focus-visible { outline: none }
.tl-t a:focus-visible::after { outline: 3px solid var(--forest); outline-offset: 3px }
.tl-s { grid-column: 1; color: var(--muted); font-size: 15px; line-height: 1.4 }
@media (max-width: 760px) {
  .tl-t { font-size: 19px }
  .tl-s { font-size: 13px; line-height: 1.35 }
}

/* empty photo spots */
.ph-box { display: grid; place-items: center; align-content: center; gap: 6px; width: 100%; height: 100%; min-height: 72px; padding: 10px; text-align: center; background: color-mix(in srgb, var(--pink) 55%, var(--surface)); color: var(--forest); font-size: 12.5px; font-weight: 600; line-height: 1.3 }
.ph-box svg { width: 30px; height: 30px; opacity: .75 }
.ph-in small { display: block }
.is-empty.dd .ph-box { aspect-ratio: 4 / 3; border-radius: 14px }
.is-empty.mini-fig { padding: 0; overflow: hidden }
.is-empty.mini-fig .ph-box { aspect-ratio: 4 / 3; border-radius: 16px }
.is-empty.mini-fig svg { width: 42px; height: 42px; max-width: none; margin: 0 }
.g-slide.ph { outline: 0 }
.g-thumbs.single { display: none }

/* product sections */
.prod-grid > .gallery { min-width: 0 }
.prod-cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px }
.prod-cta .wp-block-button__link { display: inline-flex; align-items: center; justify-content: center; min-height: 50px; padding: 0 22px; border-radius: 999px; font: 700 16px var(--f-body); text-decoration: none; border: 2px solid var(--forest); color: var(--forest); background: transparent; transition: transform .25s cubic-bezier(.3, 1.4, .5, 1) }
.prod-cta .wp-block-button__link:hover { transform: translateY(-2px) }
.prod-cta .is-primary .wp-block-button__link { background: var(--forest); color: var(--on-forest) }
.more-link a { font-weight: 700; color: var(--forest); text-decoration: none; display: inline-flex; align-items: center; min-height: 36px }
.more-link a::after { content: "\2192"; margin-left: 6px }
.more-link a:hover { text-decoration: underline; text-underline-offset: 3px }
.g-slide.wp-block-image { display: block }
.g-slide.wp-block-image img { width: 100%; height: 100%; object-fit: cover; display: block }
.g-slide .wp-element-caption { position: absolute; left: 12px; bottom: 12px; max-width: calc(100% - 96px); margin: 0; padding: 3px 12px; border-radius: 999px; background: rgb(20 8 14 / .62); color: #FFFFFF; font: 600 13px/1.5 var(--f-body); text-align: left }
main .part-t { margin: 0 }
.part .m-grid { margin-top: 0 }
.part-links { margin-top: 16px }
.m-vis > .mini-fig { margin: 0 0 16px }
.dd .wp-element-caption { display: grid; gap: 2px; margin: 8px 0 0; font-size: 13.5px; line-height: 1.4; color: var(--muted); text-align: left }
.dd .wp-element-caption strong { display: flex; align-items: center; gap: 6px; font-size: 14px; color: var(--ink) }

.dd .wp-element-caption br { display: none }
.dd { align-self: start }
.is-empty.dd .ph-box { height: auto }
.dd .wp-element-caption strong::before { content: "\2713"; flex: none; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; background: #2E8B57; color: #FFFFFF; font-size: 11px; line-height: 1 }
.dd.no .wp-element-caption strong::before { content: "\2715"; background: #D9542B }
.dd img { width: 100%; aspect-ratio: 4 / 3; height: auto; object-fit: cover; border-radius: 14px; display: block }
.mini-fig > img { width: 100%; aspect-ratio: 4 / 3; height: auto; object-fit: cover; border-radius: 12px; display: block }
.msteps li:not(:has(.k)) { display: block }
.msteps + .part-note { margin: 14px 0 0 }
@media (max-width: 900px) {
  .m-vis > .mini-fig, .m-vis > figure { order: 2 }
}

/* comparison table */
figure.why-tbl { width: 100%; margin-top: 30px; border: 1px solid var(--line); border-radius: 22px; overflow: hidden; background: var(--bg) }
.why-tbl table { width: 100%; border-collapse: separate; border-spacing: 0; table-layout: fixed }
.why-tbl.wp-block-table th, .why-tbl.wp-block-table td { padding: 16px 20px; border: 0; border-top: 1px solid var(--line); text-align: left; vertical-align: top }
.why-tbl.wp-block-table thead { border: 0 }
.why-tbl.wp-block-table thead th, .why-tbl.wp-block-table thead td { border-top: 0; padding-block: 14px; font: 700 12px/1.5 var(--f-body); letter-spacing: .1em; text-transform: uppercase; color: var(--muted) }
.why-tbl thead th:nth-child(2) { color: var(--forest) !important }
.why-tbl tr > :nth-child(2) { background: color-mix(in srgb, var(--pink) 34%, var(--surface)) }
.why-tbl tbody td { position: relative; padding-left: 50px !important }
.why-tbl tbody td:nth-child(2) { color: var(--ink); font-weight: 600 }
.why-tbl tbody td::before { content: "\2715"; position: absolute; left: 20px; top: calc(16px + (1.45 * var(--fs) - 20px) / 2); width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; font-weight: 700; line-height: 1; background: color-mix(in srgb, var(--muted) 18%, transparent); color: var(--muted) }
.why-tbl tbody td:nth-child(2)::before { content: "\2713"; background: var(--forest); color: var(--on-forest) }
@media (max-width: 640px) {
  .why-tbl table, .why-tbl thead, .why-tbl tbody { display: block }
  .why-tbl tr { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) }
  .why-tbl thead td { display: none }
  .why-tbl.wp-block-table tbody th { grid-column: 1 / -1; width: auto; padding: 14px 14px 4px; font-size: 18px; background: var(--bg) }
  .why-tbl.wp-block-table tbody td { --fs: 14px; border-top: 0; padding: 8px 14px 16px 40px !important }
  .why-tbl.wp-block-table thead th { padding: 12px 14px; font-size: 11px }
  .why-tbl tbody td::before { left: 14px; top: calc(8px + (1.45 * var(--fs) - 18px) / 2); width: 18px; height: 18px; font-size: 10px }
}

/* ordering steps */
.journey { margin: 34px 0 0 !important; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 clamp(16px, 3vw, 32px) }
.j-step { position: relative; display: grid; align-content: start; gap: 6px }
.j-step:not(:last-child)::after { content: ""; position: absolute; top: 26px; left: 52px; right: calc(-1 * clamp(16px, 3vw, 32px)); border-top: 2px dashed color-mix(in srgb, var(--forest) 40%, transparent) }
.j-step h3 { font: 400 22px/1.2 var(--f-display) }
.j-step p { color: var(--muted); font-size: 15.5px; max-width: 34ch }
.j-step .more-link { color: inherit; font-size: inherit; margin-top: 2px }
@media (max-width: 760px) {
  .journey { grid-template-columns: minmax(0, 1fr); gap: 26px }
  .j-step { padding-left: 66px; min-height: 52px }
  .j-step .j-ic { position: absolute; left: 0; top: 0; margin: 0 }
  .j-step:not(:last-child)::after { top: 52px; bottom: -26px; left: 25px; right: auto; border-top: 0; border-left: 2px dashed color-mix(in srgb, var(--forest) 40%, transparent) }
}

/* reviews */
.rev-list { margin: 12px 0 0 !important; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px }
.rev-list > .rev:only-child { max-width: 560px }
.rev { display: flex; flex-direction: column; gap: 14px; padding: 20px; border-radius: 20px; background: var(--surface); border: 1px solid var(--line) }
.rev-q { flex: 1; font: 400 19px/1.35 var(--f-display) }
.rev-foot { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 2px 12px; align-items: center }
.rev-foot .av { grid-row: span 2; width: 52px; height: 52px; border-radius: 50%; overflow: hidden }
.rev-foot .av img { width: 100%; height: 100%; object-fit: cover; display: block }
.rev-foot .ph-box { min-height: 0; padding: 0 }
.rev-foot .ph-box small { display: none }
.rev-foot .ph-box svg { width: 24px; height: 24px }
.rev.ph .rev-q { color: var(--muted); font: 600 15px/1.45 var(--f-body) }
.rev-tag { align-self: flex-start }
.rev-more { margin: 12px 0 0 !important }
@media (max-width: 600px) {
  .rev-list { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin-inline: -16px !important; padding: 2px 16px 6px; scroll-padding-inline: 16px }
  .rev-list::-webkit-scrollbar { display: none }
  .rev-list > .rev { flex: 0 0 82%; scroll-snap-align: start }
  .rev-list > .rev:only-child { flex-basis: 100% }
}

/* questions */
.faq { margin-top: 40px !important }
.faq .wp-block-details p { margin: 0 0 14px }
.faq-h { margin: 18px 0 2px !important }

/* any other page */
.plain-page { padding-block: clamp(40px, 6vw, 72px) }
.plain-page article { max-width: 72ch }
.plain-page h1 { font-size: clamp(32px, 4.6vw, 50px); margin-bottom: 18px }
.plain-page p { margin-block: 0 1em }