/* Product page, the clean look (Ben, 26 Oct 2026: "much cleaner, much more modern", the Urbanica product page's spirit).
   White and pale birch grounds, flat surfaces (no gradients, glows, textures or drop shadows), photos on a plain light
   field with square corners, flat buttons, rows separated by space, more air. Motion only in reveals, carousels and the
   photo band. Mobile first. The site's shared parts (kit, aisles, questions, guides, buttons) are flattened under
   .single-product so every other page keeps its own look. */

.single-product {
	--field: #f2f1ec;  /* the light field behind every product photo */
	--pale: #f8f6ef;   /* the pale birch band */
	--rule: rgba(28, 30, 27, .12);
	--pad: 64px;
	background: #fff;
}
@media (min-width: 1100px) { .single-product { --pad: 104px; } }

/* Grounds: white and pale birch, one padding scale; two bands of one ground in a row share their gap (the shared parts
   take their ground as an argument from woocommerce/single-product.php) */
.band--white { background: #fff; }
.single-product .band--birch { background: var(--pale); }
.band--white + .band--white { padding-top: 0; }

/* Type: brand fonts, quieter weights */
.single-product main .h2 { font-weight: 600; font-size: clamp(28px, 3vw, 42px); line-height: 1.08; letter-spacing: .015em; }
:lang(fr) .single-product main .h2 { line-height: 1.18; } /* capital accents (À, Ô, É) on a lower line ran into the commas of the line above at 1.08 (Complétez votre achat, 1440) */
.single-product .head-row { margin-bottom: 32px; }
.single-product .head-row__lede, .single-product .lede { font-size: 16.5px; line-height: 1.65; }
@media (min-width: 900px) { .single-product .head-row { margin-bottom: 44px; } }

/* Buttons and controls: flat */
.single-product .btn { transition: background-color var(--base), color var(--base), border-color var(--base); }
.single-product .btn:active { transform: none; }
.single-product .btn--primary, .single-product .btn--dark { background: var(--navy); color: #fff; box-shadow: none; }
.single-product .btn--primary:hover, .single-product .btn--dark:hover { background: var(--navy-2); color: #fff; transform: none; }
.single-product .btn--outline { border: 1.5px solid var(--navy); background: transparent; color: var(--navy); }
.single-product .btn--outline:hover { background: var(--navy); color: #fff; }
.single-product .btn[disabled] { opacity: .45; cursor: not-allowed; }
.single-product .tab { border: 1px solid var(--rule); background: #fff; box-shadow: none; }
.single-product .tab[aria-selected=true] { background: var(--navy); border-color: var(--navy); color: #fff; box-shadow: none; }
.single-product .rail__arrow { border: 1px solid var(--rule); background: #fff; box-shadow: none; }
.single-product .rail__arrow:hover { border-color: var(--navy); background: var(--navy); color: #fff; }

/* Stars at a smaller size, and an empty one */
.stars--sm .star .ico { width: 16px; height: 16px; }
.star--off .ico { fill: none; stroke: var(--brass); opacity: .55; }

/* 1. Gallery and buy box, in the format of Ben's reference (27 Oct 2026): the thumbnails in a column beside the big photo,
   then the name, the why line, the rating, the price, the options, add to cart and three why icons */
.pbuy { padding: 12px 0 44px; background: #fff; }
.pbuy .glo-crumbs { margin-bottom: 18px; }
.pbuy .glo-crumbs ol { font-size: 13px; }
.pbuy__grid { display: grid; gap: 28px; }
.pbuy__grid > * { min-width: 0; }
.pbuy__gallery { display: grid; gap: 10px; }
.pbuy__gallery > * { min-width: 0; }
.pbuy__stage { position: relative; display: grid; grid-template: minmax(0, 1fr) / minmax(0, 1fr); place-items: center; aspect-ratio: 1 / 1; padding: 7%; overflow: hidden; background: var(--field); border-radius: var(--r-2); }
.pbuy__stage .oos-tag > span { padding: 12px 22px; font-size: 16px; letter-spacing: .08em; }
.pbuy__shot { width: 100%; height: 100%; min-height: 0; object-fit: contain; mix-blend-mode: multiply; transition: opacity var(--base) var(--ease); }
.pbuy__shot.is-swap { opacity: 0; }
/* Zoom (assets/js/product.js): a mouse zooms the photo in place, a tap or click opens it full screen. */
.pbuy__stage[data-zoom] { cursor: zoom-in; }
.pbuy__stage[data-zoom]:focus-visible { outline: 3px solid var(--glo-focus); outline-offset: 2px; }
.pbuy__stage.is-zoom .pbuy__shot { transform: scale(2.2); transition: opacity var(--base) var(--ease); }
.pbuy__stage.is-zoom .oos-tag { opacity: 0; }
.pbuy__stage .oos-tag { transition: opacity var(--base) var(--ease); pointer-events: none; }
/* WooCommerce's PhotoSwipe css prints after this file, so these carry .pswp twice to win: white like the stage, its white
   icons and counter turned dark. */
.pswp.pswp { z-index: 1000; }
.pswp.pswp .pswp__bg { background: #fff; }
.pswp.pswp .pswp__button, .pswp.pswp .pswp__counter { filter: invert(1); }
.pswp.pswp .pswp__top-bar, .pswp.pswp .pswp__caption { background: none; }
.pswp.pswp .pswp__img { mix-blend-mode: multiply; }
.pbuy__thumbs .rail__track { grid-auto-columns: 68px; gap: 8px; padding: 0; }
.pbuy__thumbs .rail__arrow { top: calc(50% - 19px); width: 38px; height: 38px; }
.pbuy__thumbs .rail__arrow--prev { left: -4px; }
.pbuy__thumbs .rail__arrow--next { right: -4px; }
.pbuy__thumb { display: grid; place-items: center; aspect-ratio: 1 / 1; overflow: hidden; padding: 6%; background: var(--field); border-radius: var(--r-1); box-shadow: inset 0 0 0 1px transparent; transition: box-shadow var(--fast); }
.pbuy__thumb img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.pbuy__thumb:hover { box-shadow: inset 0 0 0 1px var(--edge-strong); }
.pbuy__thumb[aria-pressed=true] { box-shadow: inset 0 0 0 1.5px var(--ink); }

.pbuy__title { font: 600 clamp(28px, 2.7vw, 40px)/1.08 var(--f-head); letter-spacing: .015em; text-wrap: balance; }
.pbuy__brand { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin-top: 10px; font-size: 15px; color: var(--muted); }
.pbuy__brand:empty { display: none; }
.pbuy__brand a { font-weight: 600; color: var(--ink); }
.pbuy__brand a:hover { text-decoration: underline; text-underline-offset: 3px; }
/* The brand's logo in place of its name (3 Nov 2026), a fixed height so a wide and a tall logo weigh the same */
.pbuy__logo { --logo-w: 150px; --logo-h: 36px; --logo-a: 62px; display: inline-flex; align-items: center; height: 36px; }
.pbuy__logo img { width: auto; max-width: 150px; height: 100%; object-fit: contain; object-position: left center; }
.pbuy__made { display: inline-flex; align-items: center; gap: 6px; }
.pbuy__maple { width: 16px; height: 16px; fill: var(--sale); }
.pbuy__lead { margin-top: 16px; max-width: 54ch; font-size: 16.5px; line-height: 1.6; color: var(--ink); text-wrap: pretty; }
.pbuy__rating { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: 16px; font-size: 14px; color: var(--ink); }
.pbuy__rating .star .ico { width: 17px; height: 17px; }
.pbuy__rating .stars { gap: 2px; }
.pbuy__rating:hover span:last-child { text-decoration: underline; text-underline-offset: 3px; }
.pbuy__price { margin-top: 14px; }
.pbuy__price .price { font: 600 28px/1 var(--f-body); letter-spacing: .01em; }
.pbuy__price .price del { font-size: 17px; }

.pbuy__form { display: grid; gap: 22px; margin-top: 24px; }
.pbuy__opt { min-width: 0; margin: 0; padding: 0; border: 0; }
.pbuy__opt legend { margin-bottom: 10px; padding: 0; font-size: 14px; color: var(--muted); }
.pbuy__opt legend strong { margin-left: 4px; font-weight: 600; color: var(--ink); }
.pbuy__vals { display: flex; flex-wrap: wrap; gap: 8px; }
.pbuy__val { display: grid; place-items: center; min-width: 64px; min-height: 46px; padding: 6px 14px; border: 1px solid var(--rule); border-radius: var(--r-1); background: #fff; font-size: 14px; font-weight: 600; text-align: center; color: var(--ink); transition: border-color var(--fast), background-color var(--fast), color var(--fast); }
.pbuy__val:hover { border-color: var(--ink); }
.pbuy__val[aria-pressed=true] { border-color: var(--ink); background: var(--ink); color: #fff; }
.pbuy__val--photo { width: 76px; height: 56px; min-width: 0; padding: 4px; background: var(--field); }
.pbuy__val--photo[aria-pressed=true] { background: var(--field); box-shadow: inset 0 0 0 1px var(--ink); }
.pbuy__val-img { display: grid; place-items: center; width: 100%; height: 100%; overflow: hidden; }
.pbuy__val-img img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.pbuy__val[disabled] { cursor: not-allowed; opacity: .4; }
.pbuy__val[disabled]:not(.pbuy__val--photo) .pbuy__val-name { text-decoration: line-through; }
.pbuy__val[data-gone]:not([aria-pressed=true]) { opacity: .4; } /* sold out but pickable: picking it offers the back-in-stock sign-up */
.pbuy__val[data-gone]:not(.pbuy__val--photo) .pbuy__val-name { text-decoration: line-through; }
.pbuy__val[hidden] { display: none; } /* no variation with the picks before it: not offered (buy.php, product.js) */

.pbuy__cart { display: grid; grid-template-columns: 104px minmax(0, 1fr) 50px; gap: 8px; }
.qty { display: grid; grid-template-columns: 36px minmax(0, 1fr) 36px; height: 54px; border: 1px solid var(--rule); border-radius: var(--r-1); background: #fff; }
.qty button { display: grid; place-items: center; color: var(--ink); }
.qty button:hover { background: var(--field); }
.qty .ico { width: 16px; height: 16px; stroke-width: 2; }
.qty input { width: 100%; min-width: 0; border: 0; background: transparent; font-size: 16px; font-weight: 600; text-align: center; -moz-appearance: textfield; appearance: textfield; }
.qty input::-webkit-inner-spin-button, .qty input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.pbuy__add { min-width: 0; min-height: 54px; padding-left: 14px; padding-right: 42px; font-size: 14px; letter-spacing: .02em; text-transform: uppercase; }
@media (max-width: 419px) { .pbuy__cart { grid-template-columns: minmax(0, 1fr) 50px; } .pbuy__cart .qty { grid-column: 1 / -1; } } /* below 420px the stepper takes its own row: beside it the button was 118px at 320 and "Add to cart" ran past its left edge under the +; "Ajouter au panier" touched the + at 390 */
.pbuy__save { display: grid; place-items: center; width: 100%; height: 54px; border: 1px solid var(--rule); border-radius: var(--r-1); background: #fff; color: var(--ink); transition: color var(--fast), border-color var(--fast); }
.pbuy__save:hover { border-color: var(--ink); }
.pbuy__save[aria-pressed=true] { color: var(--sale); }
.pbuy__save[aria-pressed=true] .ico { fill: currentColor; }
.pbuy__avail { margin-top: -8px; font-size: 14px; line-height: 1.5; color: var(--muted); }
.pbuy__avail strong { margin-right: 6px; font-weight: 600; color: var(--glo-success); }
.pbuy__avail strong.is-out { color: var(--sale); }

/* The why icons: three, each a line icon over its two lines (beside them from a tablet up) */
.pbuy__why { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px 12px; margin-top: 28px; padding: 22px 0 0; list-style: none; }
.pbuy__why li { display: grid; justify-items: center; align-content: start; gap: 8px; text-align: center; }
.pbuy__why span { font-size: 13px; line-height: 1.4; color: var(--muted); }
.pbuy__why b { display: block; margin-bottom: 2px; font-size: 13.5px; font-weight: 600; line-height: 1.25; color: var(--ink); }
.pbuy__why-ico { width: 32px; height: 32px; fill: none; stroke: var(--navy); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

/* 2. The tabs under the buy box: each tab's text and icons on the left, a photo of the product on the right */
.pinfo { padding: 0 0 var(--pad); background: #fff; }
.pinfo__grid { display: grid; gap: 28px; }
.pinfo__grid > * { min-width: 0; }
.pinfo__tabs { margin-bottom: 26px; }
.pinfo__tabs { gap: 6px; }
@media (max-width: 599px) { .pinfo__tabs, .plan__tabs .tabs { flex-wrap: wrap; } } /* 3-tab rows wrap on phones: scrolled, the third tab showed as "Retou" / "L" with no scrollbar (FR, 390px) */
.pinfo__tab { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 0 12px; font-size: 14px; }
.pinfo__tab .ico { width: 16px; height: 16px; stroke-width: 1.8; }
.pinfo__panel { font-size: 16px; line-height: 1.7; color: var(--muted); }
.pinfo__panel > * + * { margin-top: 14px; }
.pinfo__panel p { max-width: 64ch; text-wrap: pretty; }
.pinfo__panel > p:first-child { font-size: 17.5px; line-height: 1.65; color: var(--ink); }
.pinfo__panel ul:not([class]) { list-style: disc; padding-left: 20px; }
.pinfo__icons { display: grid; gap: 14px; margin-top: 24px; padding: 0; list-style: none; }
.pinfo__panel > .pinfo__icons:first-child { margin-top: 0; }
.pinfo__icons li { display: grid; grid-template-columns: 30px minmax(0, 1fr); align-items: center; gap: 14px; font-size: 15.5px; line-height: 1.4; color: var(--ink); }
.pinfo__ico { width: 30px; height: 30px; fill: none; stroke: var(--navy); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.pinfo__ways { display: grid; gap: 22px; padding: 0; list-style: none; }
.pinfo__ways li { display: grid; grid-template-columns: 30px minmax(0, 1fr); align-items: start; gap: 16px; }
.pinfo__way { font: 600 16px/1.2 var(--f-head); letter-spacing: .02em; text-transform: uppercase; color: var(--ink); }
.pinfo__ways p { margin-top: 4px; font-size: 15px; line-height: 1.6; }
.pinfo__panel > .btn { margin-top: 24px; }
.pinfo__panel .specs { max-width: 620px; }
.pinfo__side { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--field); border-radius: var(--r-2); }
.pinfo__img { position: absolute; inset: 0; display: grid; grid-template: minmax(0, 1fr) / minmax(0, 1fr); place-items: center; margin: 0; padding: 8%; opacity: 0; transition: opacity var(--slow) var(--ease); }
.pinfo__img.is-on { opacity: 1; }
.pinfo__img img { width: 100%; height: 100%; min-height: 0; object-fit: contain; mix-blend-mode: multiply; }
.pinfo__img.is-zoom { padding: 0; }
.pinfo__img.is-zoom img { object-fit: cover; transform: scale(1.8); }
.specs { display: grid; margin: 0; }
.specs div { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 16px; padding: 10px 14px; font-size: 14.5px; }
.specs div:nth-child(odd) { background: var(--field); }
.specs dt { color: var(--muted); }
.specs dd { margin: 0; font-weight: 600; text-align: right; color: var(--ink); }

/* The bar that follows the add to cart */
.buybar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; background: #fff; box-shadow: 0 -1px 0 var(--rule, rgba(28, 30, 27, .12)); transform: translateY(110%); transition: transform var(--slow) var(--ease); }
.buybar.is-on { transform: none; }
.buybar__row { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; align-items: center; gap: 12px; min-height: 68px; padding-top: 8px; padding-bottom: 8px; }
.buybar__img { width: 48px; height: 48px; overflow: hidden; background: var(--field, #f2f1ec); }
.buybar__img img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.buybar__name { display: -webkit-box; overflow: hidden; -webkit-line-clamp: 2; -webkit-box-orient: vertical; font-size: 14px; font-weight: 600; line-height: 1.25; }
.buybar__name small { display: block; font-size: 13px; font-weight: 400; color: var(--muted); }
.buybar .price { display: none; }
.buybar__add { text-transform: uppercase; letter-spacing: .04em; font-size: 14px; }
@media (max-width: 419px) { .buybar__row { grid-template-columns: minmax(0, 1fr) auto; } .buybar__img { display: none; } .buybar__add { padding-left: 16px; padding-right: 42px; } } /* at 320 the image + a 194px button left the product name 22px wide */
@media (max-width: 419px) { .buybar.is-notify .buybar__row { grid-template-columns: minmax(0, 1fr); } .buybar.is-notify .buybar__name { display: none; } .buybar.is-notify .buybar__add { width: 100%; } } /* "Notify me when back in stock" squeezed the name to 5px at 375 (senior-dev, PR 262): on a phone the button takes the row */

/* 6. Add-ons: the kit's cards on the pale band, no photo behind */
.single-product .kit__bg { display: none; }
.single-product .kit__total p { color: var(--muted); }
.single-product .kit__total strong { color: var(--ink); }

/* 3 and 9. Aisles: the side panel flat, no shadow, no shade over the photo */
.single-product .aisle__panel { border-radius: 0; box-shadow: none; }
.single-product .aisle__panel:hover .panel__photo img { transform: scale(1.04); }
.single-product .panel--spot { background: #fff; }
.single-product .aisle__panel:hover .panel__spot-img img { transform: none; }

/* 3. You might also like (Ben, 27 Oct 2026): the tabs centred over the photo and the rail; the photo is the link, the
   aisle's name and count in white on it */
.aisle--link .tabs { width: fit-content; max-width: 100%; margin: 0 auto 26px; }
.aisle--link .aisle__panel { min-height: 320px; }
.aisle--link .panel__photo { visibility: hidden; transition: opacity .8s var(--ease), visibility 0s linear .8s; }
.aisle--link .panel__photo.is-on { visibility: visible; transition-delay: 0s; }

/* 5. Reviews */
.prev__grid { display: grid; gap: 32px; align-items: start; }
.prev__grid > * { min-width: 0; }
/* No reviews yet: the line and the open form in one centred column under the head */
.prev__tag { margin-top: 20px; font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.prev__grid.is-store .prev__num { margin-top: 10px; }
.prev__grid.is-store .prev__none { margin-bottom: 26px; }
.prev__score .btn { max-width: 100%; white-space: normal; padding-block: 12px; } /* the French label is longer than a phone is wide */
.prev__none { max-width: 40ch; margin-top: 18px; font-size: 17px; line-height: 1.6; color: var(--muted); }
.prev__num { display: flex; align-items: center; gap: 18px; margin-top: 20px; }
.prev__num b { font: 600 clamp(72px, 7vw, 96px)/.85 var(--f-head); color: var(--ink); }
.prev__num > span { display: grid; gap: 6px; font-size: 14px; color: var(--muted); }
.prev__num .star .ico { width: 20px; height: 20px; }
.prev__bars { display: grid; gap: 8px; max-width: 420px; margin: 24px 0 26px; }
.prev__bars li { display: grid; grid-template-columns: 56px minmax(0, 1fr) 24px; align-items: center; gap: 12px; font-size: 14px; color: var(--muted); }
.prev__bar { height: 8px; overflow: hidden; background: var(--field); }
.prev__bar i { display: block; width: var(--w); height: 100%; background: var(--brass); transform: scaleX(0); transform-origin: left; transition: transform 1s var(--ease) .2s; }
.prev__score.is-in .prev__bar i { transform: none; }
.prev__bar-n { font-weight: 600; color: var(--ink); text-align: right; }
.prev__list { display: grid; gap: 12px; }
.prev__item { display: grid; gap: 10px; margin: 0; padding: 24px; background: var(--pale); }
.prev__item blockquote { margin: 0; font: 400 17px/1.6 var(--f-body); color: var(--ink); text-wrap: pretty; }
.prev__item figcaption { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 13px; color: var(--muted); }
.prev__item figcaption b { font-weight: 600; color: var(--ink); }
.prev__verified { display: inline-flex; align-items: center; gap: 4px; font-weight: 600; color: var(--ink); }
.prev__verified .ico { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.4; }
.prev__only { max-width: 52ch; margin: 0 0 18px; font-size: 16px; line-height: 1.6; color: var(--ink); }
.prev__form { padding: 24px; background: var(--pale); }
.prev__form-title { font: 600 22px/1.1 var(--f-head); text-transform: uppercase; color: var(--ink); }
.prev__form form { display: grid; gap: 14px; margin-top: 16px; max-width: 560px; }
.prev__form .field { display: grid; gap: 6px; margin: 0; }
.prev__form label, .prev__rate legend { font-size: 14px; font-weight: 600; color: var(--ink); }
.prev__form input[type=text], .prev__form input[type=email], .prev__form textarea { width: 100%; min-height: 48px; padding: 10px 14px; border: 1px solid var(--rule); background: #fff; font-size: 16px; }
.prev__form input:focus, .prev__form textarea:focus { outline: none; border-color: var(--ink); }
.prev__form .form-submit { margin: 4px 0 0; }
.prev__form .comment-form-cookies-consent { display: flex; gap: 8px; align-items: center; font-size: 13px; color: var(--muted); }
.prev__rate { margin: 0; padding: 0; border: 0; }
.prev__rate-stars { display: inline-flex; flex-direction: row-reverse; gap: 4px; margin-top: 6px; }
.prev__rate-stars input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.prev__rate-stars label { cursor: pointer; }
.prev__rate-stars .ico { width: 30px; height: 30px; fill: none; stroke: var(--brass); stroke-width: 1.6; transition: fill var(--fast); }
.prev__rate-stars label:hover .ico, .prev__rate-stars label:hover ~ label .ico, .prev__rate-stars input:checked ~ label .ico { fill: var(--brass); }
.prev__rate-stars input:focus-visible + label { outline: 3px solid var(--glo-focus); outline-offset: 2px; }

/* 6. The owners' call: a slim photo separator, the mission quote beside the ask */
.pcall { position: relative; overflow: hidden; padding: 52px 0; background: var(--night); color: var(--birch); }
.pcall__bg { position: absolute; inset: 0; }
.pcall__bg img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 55%; }
.pcall::after { content: ""; position: absolute; inset: 0; background: rgba(28, 30, 27, .74); }
.pcall__row { position: relative; z-index: 1; display: grid; gap: 22px; justify-items: center; text-align: center; }
.pcall__row > * { min-width: 0; }
.pcall__quote { max-width: 60ch; margin: 0; }
.pcall__quote blockquote { margin: 0; }
.pcall__quote p { font: 400 clamp(19px, 1.7vw, 24px)/1.45 var(--f-body); color: #fff; text-wrap: pretty; }
.pcall__quote p::before { content: "\201C"; }
.pcall__quote p::after { content: "\201D"; }
.pcall__quote figcaption { margin-top: 10px; font-size: 14px; color: var(--muted-light); }
.pcall__title { font: 700 clamp(22px, 2vw, 30px)/1.05 var(--f-head); letter-spacing: .02em; text-transform: uppercase; color: #fff; }
.pcall__lede { margin-top: 10px; max-width: 54ch; font-size: 16px; line-height: 1.6; color: var(--muted-light); }
.pcall .actions { margin-top: 20px; justify-content: center; }
.pcall__lede { margin-inline: auto; }

/* 7. Close-ups */
.craft__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 14px; padding: 0; list-style: none; }
.craft__item { display: grid; align-content: start; text-align: center; transition-delay: calc(var(--i, 0) * 80ms); }
.craft__img { display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--field); }
.craft__img img { width: 100%; height: 100%; object-fit: cover; }
/* The product's own extra photos, whole, on white like the photos themselves */
.craft__img--photo { background: #fff; }
.craft__img--photo img { object-fit: contain; mix-blend-mode: multiply; }
.craft__grid--n3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } /* three a row everywhere: a full-row third would need a photo 851px wide */
.craft__name { margin-top: 14px; font: 600 17px/1.15 var(--f-head); letter-spacing: .02em; text-transform: uppercase; color: var(--ink); }
.craft__line { margin-top: 6px; font-size: 14.5px; line-height: 1.55; color: var(--muted); }

/* 8. Compare */
.cmp__table { width: 100%; border-collapse: separate; border-spacing: 0; table-layout: fixed; }
.cmp__table thead > tr > * { padding: 14px 6px 16px; vertical-align: bottom; text-align: center; }
.cmp__corner { display: none; }
.cmp__boat { font-weight: inherit; }
.cmp__boat.is-this { background: #fff; box-shadow: inset 0 0 0 1.5px var(--navy); }
.cmp__hull { display: flex; align-items: flex-end; justify-content: center; height: 44px; }
.cmp__hull img { width: calc(var(--len) * 100%); height: auto; max-height: 100%; object-fit: contain; }
.cmp__hull--photo { height: 96px; }
.cmp__hull--photo img { width: auto; max-width: 100%; height: 100%; mix-blend-mode: multiply; }
.cmp__name { display: block; margin-top: 12px; font: 600 14px/1.15 var(--f-head); letter-spacing: .02em; text-transform: uppercase; color: var(--ink); }
.cmp__boat .price { justify-content: center; margin-top: 6px; font-size: 15px; font-weight: 600; }
.cmp__add { width: 100%; min-height: 40px; margin-top: 12px; padding: 0 6px; font-size: 12.5px; white-space: normal; }
.cmp__table tbody, .cmp__table thead { display: block; }
.cmp__table { display: block; }
.cmp__table tr { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); }
.cmp__table tbody th { grid-column: 1 / -1; padding: 10px 8px 2px; font-size: 13px; font-weight: 400; text-align: center; color: var(--muted); }
.cmp__table tbody td { padding: 2px 6px 10px; font-size: 14px; font-weight: 600; text-align: center; overflow-wrap: anywhere; } /* slash-joined colour names ("Canteen/Black,") have no break point and ran past a 96px cell at 320 */
.cmp__table tbody tr:nth-child(odd) > * { background: #fff; }
.cmp__table tbody td.is-this { color: var(--navy); }

/* 4. The next adventure (Ben, 27 Oct 2026): big icons, the tiles centred and clickable; a click raises a rail of the gear
   for that trip under the tiles */
.next { background: var(--navy); color: var(--birch); }
.next .head-row__lede { color: var(--muted-light); }
.next__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding: 0; list-style: none; }
.next__item { min-width: 0; transition-delay: calc(var(--i, 0) * 80ms); }
.next__tile { display: grid; justify-items: center; align-content: start; gap: 12px; width: 100%; height: 100%; padding: 22px 12px 20px; border-radius: var(--r-2); color: inherit; text-align: center; transition: background-color var(--base), box-shadow var(--base); }
.next__tile:hover { background: rgba(246, 243, 228, .06); }
.next__tile[aria-expanded=true] { background: rgba(246, 243, 228, .1); box-shadow: inset 0 0 0 1.5px var(--brass); }
.next__tile:focus-visible { outline: 3px solid var(--glo-focus); outline-offset: 2px; }
.next__ico { width: 76px; height: 76px; fill: none; stroke: var(--brass); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: transform var(--base) var(--ease); }
.next__tile:hover .next__ico, .next__tile[aria-expanded=true] .next__ico { transform: translateY(-4px); }
.next__title { font: 600 18px/1.2 var(--f-head); letter-spacing: .02em; text-transform: uppercase; color: var(--birch); text-wrap: balance; }
.next__line { max-width: 30ch; font-size: 14.5px; line-height: 1.55; color: var(--muted-light); }
.next__more { display: inline-flex; align-items: center; gap: 6px; margin-top: 2px; font-size: 14px; font-weight: 600; color: var(--brass); }
.next__more .ico { width: 16px; height: 16px; stroke-width: 2.2; transition: transform var(--base) var(--ease); }
.next__tile[aria-expanded=true] .next__more .ico { transform: rotate(180deg); }
.next__shelf { margin-top: 26px; }
.next__panel { animation: next-up .55s var(--ease); }
.next__panel .rail__bar { background: rgba(246, 243, 228, .2); }
.next__panel .rail__bar span { background: var(--brass); }
@keyframes next-up { from { opacity: 0; transform: translateY(48px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .next__panel { animation: none; } }

/* 11. Questions: flat rows, the open row plain */
.single-product .faq__panel { border-radius: 0; box-shadow: none; }
.single-product .faq__panel:hover .faq__photo img { transform: none; }
.single-product .qa { border-radius: 0; background: var(--field); }
.single-product .qa[open] { background: #fff; box-shadow: inset 0 0 0 1px var(--rule); }
.single-product .qa summary { font-size: 16px; font-weight: 600; color: var(--ink); }
.single-product .qa__sign, .single-product .qa[open] .qa__sign { width: 28px; height: 28px; border-radius: 0; background: transparent; color: var(--ink); }

/* 12. The word on it: the store's take and an owner's, beside a photo */
.word__grid { display: grid; gap: 32px; }
.word__grid > * { min-width: 0; }
.word__copy > .word__quotes:first-child { margin-top: 0; }
.word__quotes { display: grid; gap: 28px; margin-top: 28px; }
.word__quote { margin: 0; }
.word__quote blockquote { margin: 0; }
.word__quote p { font: 400 clamp(19px, 1.6vw, 22px)/1.5 var(--f-body); color: var(--ink); text-wrap: pretty; }
.word__quote p::before { content: "\201C"; }
.word__quote p::after { content: "\201D"; }
.word__quote figcaption { margin-top: 10px; font-size: 14px; color: var(--muted); }
.word__quote figcaption a { text-decoration: underline; text-decoration-color: var(--rule); text-underline-offset: 3px; }
.word__quote figcaption a:hover { color: var(--ink); text-decoration-color: currentColor; }
.word__img { aspect-ratio: 16 / 10; overflow: hidden; background: var(--field); }
.word__img img { width: 100%; height: 100%; object-fit: cover; object-position: 30% 55%; }
/* No lifestyle photo yet: the product's own shot, whole, on white */
.word__grid.is-product .word__img { display: grid; place-items: center; padding: 28px; background: #fff; }
.word__grid.is-product .word__img img { object-fit: contain; object-position: 50% 50%; }

/* 13. Every measurement: the boat drawn on the light field beside its table, with shipping, returns and warranty as tabs */
.plan__tabs { margin-top: 32px; }
.plan__tabs .tabs { margin-bottom: 28px; }
.plan__grid { display: grid; gap: 28px; }
.plan__side { display: grid; align-content: start; gap: 24px; }
.plan__note { max-width: 62ch; font-size: 16px; line-height: 1.65; color: var(--muted); }
.plan__draw--photo { position: relative; display: block; aspect-ratio: 4 / 3; }
.plan__draw--photo img { position: absolute; inset: 24px; width: calc(100% - 48px); height: calc(100% - 48px); object-fit: contain; mix-blend-mode: multiply; }
.plan__grid > * { min-width: 0; }
.plan__draw { display: grid; align-content: center; gap: 26px; padding: 24px 18px; background: var(--field); }
.plan__view { position: relative; padding-right: 58px; }
.plan__view img { display: block; width: 100%; height: auto; }
.plan__view--top { padding-top: 34px; }
.plan__fig { font-size: 13px; font-weight: 600; color: var(--ink); white-space: nowrap; }
.plan__dim { position: absolute; }
.plan__dim--len { left: 0; right: 58px; top: 12px; border-top: 1px solid var(--ink); }
.plan__dim--len::before, .plan__dim--len::after { content: ""; position: absolute; top: -5px; height: 10px; border-left: 1px solid var(--ink); }
.plan__dim--len::before { left: 0; }
.plan__dim--len::after { right: 0; }
.plan__dim--len .plan__fig { position: absolute; left: 50%; top: -9px; padding: 0 10px; background: var(--field); transform: translateX(-50%); }
.plan__dim--beam, .plan__dim--depth { right: 26px; border-left: 1px solid var(--ink); }
.plan__dim--beam { top: 34px; bottom: 0; }
.plan__dim--depth { top: 8%; bottom: 14%; }
.plan__dim--beam::before, .plan__dim--beam::after, .plan__dim--depth::before, .plan__dim--depth::after { content: ""; position: absolute; left: -5px; width: 10px; border-top: 1px solid var(--ink); }
.plan__dim--beam::before, .plan__dim--depth::before { top: 0; }
.plan__dim--beam::after, .plan__dim--depth::after { bottom: 0; }
.plan__dim--beam .plan__fig, .plan__dim--depth .plan__fig { position: absolute; left: 8px; top: 50%; transform: translateY(-50%); }

/* 14. Shipping and warranty */
.pship__grid { display: grid; gap: 26px; padding: 0; list-style: none; }
.pship__item { display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 16px; }
.pship__ico { grid-row: span 2; width: 40px; height: 40px; fill: none; stroke: var(--navy); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.pship__title { align-self: end; font: 600 17px/1.2 var(--f-head); letter-spacing: .02em; text-transform: uppercase; color: var(--ink); }
.pship__line { margin-top: 4px; font-size: 15px; line-height: 1.55; color: var(--muted); }
.pship__actions { margin-top: 36px; }

/* 15. Every model: rows, this one outlined */
.popts__list { display: grid; gap: 8px; padding: 0; list-style: none; }
.popts__row { display: grid; grid-template-columns: 96px minmax(0, 1fr); grid-template-areas: "img name" "figs figs" "buy buy"; gap: 12px 16px; align-items: center; padding: 14px; background: var(--field); transition-delay: calc(var(--i, 0) * 50ms); }
.popts__row.is-this { background: #fff; box-shadow: inset 0 0 0 1.5px var(--navy); }
/* Square frame that a photo cannot stretch (min-height: 0): with PR 288's uncropped 'medium' images a landscape photo got
   the true 4:3 box while square ones stretched theirs to square, so the rows no longer matched. Square = the frame as it
   always looked live. */
.popts__img { grid-area: img; display: grid; place-items: center; aspect-ratio: 1; min-height: 0; background: #fff; }
.popts__img img { min-height: 0; }
.popts__row.is-this .popts__img { background: var(--field); }
.popts__img img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.popts__name { grid-area: name; }
.popts__name a { font: 600 18px/1.15 var(--f-head); letter-spacing: .02em; text-transform: uppercase; color: var(--ink); }
.popts__name a:hover { color: var(--navy-2); }
.popts__name p { margin-top: 4px; font-size: 14px; line-height: 1.45; color: var(--muted); }
.popts__figs { grid-area: figs; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0; }
.popts__figs dt { font-size: 12.5px; color: var(--muted); }
.popts__figs dd { margin: 2px 0 0; font-size: 15px; font-weight: 600; color: var(--ink); overflow-wrap: anywhere; } /* "Burnt Orange/Black," has no break point and ran into the Size column at 320 */
.popts__buy { grid-area: buy; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.popts__buy .price { font-size: 17px; font-weight: 600; }
.popts__buy .btn { min-height: 44px; padding: 0 16px; font-size: 14px; }

/* 16. The brand: the maker's photo beside who they are */
.pbrand__grid { display: grid; gap: 30px; align-items: center; }
.pbrand__grid > * { min-width: 0; }
.pbrand__img { aspect-ratio: 4 / 3; overflow: hidden; background: var(--field); }
.pbrand__img img { width: 100%; height: 100%; object-fit: cover; }
.pbrand__logo { --logo-w: 180px; --logo-h: 56px; --logo-a: 72px; display: block; width: auto; max-width: 180px; height: 40px; margin: 0 auto 22px; object-fit: contain; object-position: center; }
.pbrand__p { margin-top: 14px; max-width: 60ch; font-size: 16.5px; line-height: 1.65; color: var(--muted); }
.pbrand__copy { text-align: center; }
.pbrand__copy .actions { justify-content: center; }
.pbrand__p { margin-inline: auto; }
.pbrand__logo + .pbrand__p, .pbrand__copy > .pbrand__p:first-child { margin-top: 0; }
/* No maker's photo: three of its products we carry, on white */
.pbrand__shelf { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; padding: 0; list-style: none; }
.pbrand__shelf a { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; } /* not auto: a long word (VERSA-LOK™) widened its card past the column */
.pbrand__shelf-img { display: grid; place-items: center; aspect-ratio: 1; padding: 12px; overflow: hidden; background: #fff; } /* hidden: a photo taller than square no longer stretches the square */
.pbrand__shelf-img img { width: 100%; height: 100%; object-fit: contain; transition: transform var(--fast); }
.pbrand__shelf a:hover .pbrand__shelf-img img { transform: scale(1.04); }
.pbrand__shelf-name { font: 600 14px/1.2 var(--f-head); letter-spacing: .02em; text-transform: uppercase; color: var(--ink); overflow-wrap: anywhere; } /* anywhere: SHAFT/FIBERGLASS is one unbreakable word wider than a 320px column */
.pbrand__shelf a:hover .pbrand__shelf-name { color: var(--navy-2); }

/* 17. More from the category: the department panel, flat */
.single-product .dpanel__lead { border-radius: 0; }
.pmore .dpanel__cats { grid-template-columns: minmax(0, 1fr); gap: 8px; }
.single-product .dcat { border-radius: 0; background: var(--field); box-shadow: none; }
.single-product .dcat:hover { transform: none; box-shadow: inset 0 0 0 1px var(--rule); }
.single-product .dcat__img { border-radius: 0; background: #fff; }
.single-product .dcat:hover .dcat__img img { transform: none; }
.single-product .dcat__name { font-weight: 600; color: var(--ink); }
.pmore .dcat { grid-template-columns: 72px minmax(0, 1fr); grid-template-rows: auto auto; align-content: center; column-gap: 14px; padding: 6px 12px 6px 6px; }
.pmore .dcat__img { grid-row: span 2; width: 72px; aspect-ratio: 1; overflow: hidden; } /* a tall photo must not stretch the square (Canoe 64x143, Kayak 64x86, 2 Nov) */
.pmore .dcat__name { align-self: end; margin: 0; }
.pmore .dcat__count { align-self: start; }
.pmore .dcat--photo .dcat__img img { mix-blend-mode: multiply; }

/* 18. Email: compact, flat forest */
.pmail { padding: 52px 0; background: var(--navy); color: var(--birch); }
.pmail__grid { display: grid; gap: 22px; justify-items: center; text-align: center; }
.pmail .head-row { margin-bottom: 0; gap: 10px; }
.pmail .head-row__lede { color: var(--muted-light); }
.pmail__form { width: 100%; max-width: 520px; }
.pmail .h2 { font-size: clamp(24px, 2.4vw, 34px); }
.pmail__form { margin-top: 0; }
.pmail__form input { border-radius: 0; }
.single-product .pmail .btn--primary { background: var(--blaze); color: var(--glo-cta-ink); }
.single-product .pmail .btn--primary:hover { background: var(--blaze-dark); }

/* 19. Guides: square photos, still */
.single-product .post__img { border-radius: 0; }
.single-product .post:hover .post__img img { transform: none; }


@media (min-width: 600px) {
	.pbuy__vals { gap: 10px; }
	.craft__grid { gap: 32px 20px; }
	.pship__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; }
	.pmore .dpanel__cats { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
	.pmore .dcat { grid-template-columns: none; grid-template-rows: none; align-content: start; column-gap: 0; padding: 8px 8px 12px; }
	.pmore .dcat__img { grid-row: auto; width: auto; aspect-ratio: 4 / 3; }
	.pmore .dcat__name { margin-top: 10px; }
	.cmp__add { font-size: 14px; }
	.cmp__name { font-size: 16px; }
	.cmp__hull { height: 60px; }
	.cmp__hull--photo { height: 120px; }
	.pbrand__shelf { gap: 16px; }
	.pbrand__shelf-name { font-size: 15px; }
}

@media (min-width: 900px) {
	.pbuy__grid { grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr); gap: 56px; align-items: start; }
	.pbuy__gallery { position: sticky; top: calc(var(--glo-head-h) + 16px); }
	/* the thumbnails in a column on the left of the big photo: six whole ones fill its height, the rest scroll */
	.pbuy__gallery.has-thumbs { grid-template-columns: 84px minmax(0, 1fr); gap: 16px; }
	.pbuy__gallery.has-thumbs .pbuy__stage { grid-column: 2; grid-row: 1; }
	.pbuy__gallery.has-thumbs .pbuy__thumbs { grid-column: 1; grid-row: 1; }
	.pbuy__thumbs .rail__track { position: absolute; inset: 0; grid-auto-flow: row; grid-auto-columns: auto; grid-auto-rows: calc((100% - 50px) / 6); gap: 10px; overflow-x: hidden; overflow-y: auto; scroll-snap-type: y mandatory; padding: 0; }
	.pbuy__thumbs .rail__arrow { display: none; }
	/* the buy row at full size */
	.pbuy__cart { grid-template-columns: 116px minmax(0, 1fr) 54px; }
	.pbuy__add { padding-left: 46px; padding-right: 46px; font-size: 15px; letter-spacing: .04em; }
	.pbuy__info { padding-top: 6px; }
	.pbuy__why li { grid-template-columns: 32px minmax(0, 1fr); justify-items: start; align-items: center; gap: 10px; text-align: left; }
	.pinfo__grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 56px; align-items: stretch; }
	.pinfo__side { aspect-ratio: auto; min-height: 460px; }
	.buybar__row { grid-template-columns: 56px minmax(0, 1fr) auto auto; gap: 20px; }
	.buybar__img { width: 56px; height: 56px; }
	.buybar__name { font-size: 15px; }
	.buybar .price { display: inline-flex; font: 600 20px/1 var(--f-body); }

	.prev__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); gap: 64px; }
	.prev__score { position: sticky; top: calc(var(--glo-head-h) + 24px); }
	.prev__form { grid-column: 1 / -1; }

	.pcall { padding: 64px 0; }
	.pcall__row { gap: 26px; }

	.craft__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
	.craft__grid--n2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.craft__grid--n3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

	/* Compare as a table: the figure's name on the left, one column per boat. */
	.cmp__table { display: table; }
	.cmp__table thead { display: table-header-group; }
	.cmp__table tbody { display: table-row-group; }
	.cmp__table tr { display: table-row; }
	.cmp__corner { display: table-cell; width: 24%; }
	.cmp__table thead > tr > * { padding: 18px 18px 22px; }
	.cmp__hull { height: 76px; }
	.cmp__hull--photo { height: 150px; }
	.cmp__name { font-size: 18px; }
	.cmp__boat .price { font-size: 17px; }
	.cmp__add { min-height: 46px; font-size: 14px; }
	.cmp__table tbody th { padding: 12px 18px; font-size: 15px; text-align: left; }
	.cmp__table tbody td { padding: 12px 18px; font-size: 15.5px; }
	.cmp__table tbody td.is-this { box-shadow: inset 1.5px 0 0 var(--navy), inset -1.5px 0 0 var(--navy); }
	.cmp__table tbody tr:last-child td.is-this { box-shadow: inset 1.5px 0 0 var(--navy), inset -1.5px 0 0 var(--navy), inset 0 -1.5px 0 var(--navy); }
	.cmp__boat.is-this { box-shadow: inset 1.5px 0 0 var(--navy), inset -1.5px 0 0 var(--navy), inset 0 1.5px 0 var(--navy); }

	.next__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
	.next__tile { padding: 32px 20px 28px; }
	.next__ico { width: 96px; height: 96px; }
	.next__title { font-size: 20px; }

	.word__grid.has-img { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 64px; align-items: center; }
	.word__img { aspect-ratio: 5 / 4; }
	.word__quotes { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px; margin-top: 36px; }
	.word__quote:only-child { grid-column: 1 / -1; max-width: 640px; }

	.plan__grid.has-draw { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 48px; align-items: stretch; }
	.plan__draw { gap: 40px; padding: 40px 36px; }

	.pship__grid { grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 32px; }
	.pship__item { grid-template-columns: 1fr; }
	.pship__ico { grid-row: auto; margin-bottom: 16px; }
	.pship__title { align-self: start; }

	.popts__row { grid-template-columns: 150px minmax(0, 1.3fr) minmax(0, 1.4fr) minmax(0, 1fr); grid-template-areas: "img name figs buy"; gap: 28px; padding: 14px 24px 14px 14px; }
	.popts__buy { flex-direction: column; align-items: flex-end; justify-content: center; gap: 10px; }

	.pbrand__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; }

	.pmore .dpanel__cats { grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr)); gap: 14px; }

	.pmail { padding: 60px 0; }
	.pmail__grid { gap: 26px; }

}

/* Back in stock sign-up under a sold-out buy box (inc/stock-notify.php): WooCommerce's form in the buy box's look */
/* Sold out: the sign-up takes the add to cart's place (inc/stock-notify.php). */
.pbuy.is-notify .pbuy__cart { display: none; }
.pbuy__notify[hidden] { display: none; }
.pbuy__notify-q { margin: 0 0 10px; font-size: 14px; line-height: 1.45; color: var(--ink); }
.pbuy__notify-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
.pbuy__notify-row > .pbuy__notify-btn:only-child { grid-column: 1 / -1; }
.pbuy__notify-from { margin: 8px 0 0; font-size: 13px; line-height: 1.4; color: var(--muted); }
.pbuy__notify-email { width: 100%; min-width: 0; height: 54px; padding: 0 14px; border: 1px solid var(--rule); border-radius: var(--r-1); background: #fff; font-size: 16px; color: var(--ink); }
.pbuy__notify-email:focus { border-color: var(--ink); outline: none; }
.pbuy__notify-btn { min-height: 54px; padding-left: 22px; padding-right: 22px; font-size: 14px; letter-spacing: .02em; text-transform: uppercase; white-space: nowrap; }
.pbuy__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
@media (max-width: 419px) { .pbuy__notify-row { grid-template-columns: minmax(0, 1fr); } }
.pnotify { margin-top: 18px; padding: 18px; border: 1px solid var(--rule); border-radius: var(--r-1); background: var(--field); }
.pnotify h3 { margin: 0 0 12px; font: 600 15px/1.4 var(--f-body); letter-spacing: 0; text-transform: none; color: var(--ink); }
.pnotify .wc_bis_form__form-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
.pnotify .wc_bis_form__input { width: 100%; min-width: 0; height: 54px; padding: 0 14px; border: 1px solid var(--rule); border-radius: var(--r-1); background: #fff; font-size: 16px; color: var(--ink); }
.pnotify .wc_bis_form__input:focus { border-color: var(--ink); outline: none; }
/* main.css gives .woocommerce button.button (navy) a 2-class + element weight; these two outrank it outright, not by load order */
.pnotify .wc_bis_form button.wc_bis_form__button { display: inline-flex; align-items: center; justify-content: center; min-height: 54px; padding: 0 22px; border: 0; border-radius: 4px; background: var(--blaze); color: var(--glo-cta-ink); font: 600 14px/1.1 var(--f-body); letter-spacing: .02em; text-transform: uppercase; white-space: nowrap; cursor: pointer; transition: background-color var(--base); }
.pnotify .wc_bis_form button.wc_bis_form__button:hover { background: var(--blaze-dark); }
.pnotify .screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.pnotify__notices { margin-bottom: 12px; font-size: 14px; line-height: 1.5; color: var(--ink); }
.pnotify__notices .woocommerce-error, .pnotify__notices .is-error { color: var(--sale); }
.pnotify__notices ul { margin: 0; padding: 0; list-style: none; }
@media (max-width: 419px) { .pnotify .wc_bis_form__form-row { grid-template-columns: minmax(0, 1fr); } } /* phones: the button takes its own row, as the stepper does above */