/* ==========================================================================
   petrascal — single product page, second pass

   Loads after css/petrascal-pdp.css, so every rule here wins on load order
   alone and nothing needs !important. Grouped by the thing it fixes, in the
   order the shopper meets it going down the page.
   ========================================================================== */

/* ============================== 1. TYPE ==================================
   The page was set in Lexend Deca over Open Sans. Plus Jakarta Sans carries
   the headings and prices with tighter, more even spacing at large sizes, and
   Inter is a better small-text face: it has real tabular figures, which is
   what stops a price from looking hand-drawn.
   ===================================================================== */
.kela-design-root {
	--kela-design-display: "Plus Jakarta Sans", "Lexend Deca", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
	--kela-design-sans: "Inter", "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;

	font-feature-settings: "cv11", "ss01";
	letter-spacing: -0.003em;
	text-rendering: optimizeLegibility;
}

.kela-design-root .kela-design-title {
	font-weight: 600;
	font-size: clamp(23px, 2.4vw, 31px);
	line-height: 1.22;
	letter-spacing: -0.021em;
}

.kela-design-root .kela-design-shead-title {
	font-weight: 600;
	letter-spacing: -0.018em;
}

.kela-design-root .kela-design-shead-eyebrow {
	letter-spacing: 0.12em;
}
/* ===================== BREADCRUMB ICONS =============================
   Icon and label sit on one baseline without changing the row's height,
   the colour or the gap, so the trail looks exactly as it did. The SVG
   takes its colour from the link through currentColor, which means the
   hover state needs no rule of its own.
   ================================================================== */
.kela-design-root .kela-design-crumbs a {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.kela-design-root .petrascal-crumb-ico {
	width: 14px;
	height: 14px;
	flex: none;
}

.kela-design-root .kela-design-crumbs-home .petrascal-crumb-ico {
	width: 15px;
	height: 15px;
}
/* Numbers that sit in a column, or change on the fly, get fixed-width digits
   so nothing jumps when the quantity or the variation changes. */
.kela-design-root .kela-design-pricebar-now,
.kela-design-root .kela-design-pricebar-was,
.kela-design-root .kela-design-pricebar-off,
.kela-design-root .kela-design-card-price,
.kela-design-root .kela-design-bundle-total,
.kela-design-root .kela-design-rate-big {
	font-variant-numeric: tabular-nums lining-nums;
	font-feature-settings: "tnum";
}

/* ============================= 2. PRICE ==================================
   Was 32px at weight 700 in brand brown on a solid tint, which read as a
   shout. Now: ink black, weight 600, a raised smaller currency symbol, and a
   panel with a hairline instead of a block of colour.
   ===================================================================== */
.kela-design-root .kela-design-pricebar {
	gap: var(--kela-design-s2) var(--kela-design-s4);
	padding: 18px 20px;
	background: linear-gradient(180deg, #FBFAF9 0%, #F6F4F1 100%);
	border: 1px solid var(--kela-design-line);
	border-radius: 14px;
}

.kela-design-root .kela-design-pricebar-now {
	font-weight: 600;
	font-size: clamp(27px, 2.7vw, 34px);
	line-height: 1.05;
	letter-spacing: -0.028em;
	color: var(--kela-design-ink);
	display: inline-flex;
	align-items: baseline;
}

.kela-design-root .kela-design-pricebar-now .woocommerce-Price-currencySymbol {
	font-size: 0.56em;
	font-weight: 600;
	line-height: 1;
	margin-inline-end: 2px;
	transform: translateY(-0.42em);
	display: inline-block;
	color: var(--kela-design-muted);
}

.kela-design-root .kela-design-pricebar-was {
	font-size: 15px;
	font-weight: 400;
	color: var(--kela-design-faint);
	text-decoration-thickness: 1px;
	text-underline-offset: 2px;
}

/* The saving is good news, so it stops being an alarm-red badge. */
.kela-design-root .kela-design-pricebar-off {
	height: 25px;
	padding-inline: 11px;
	background: #EAF6E9;
	color: #2C6E2A;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0;
	border: 1px solid #CFE7CD;
}

.kela-design-root .kela-design-pricebar-meta {
	font-size: 12.5px;
}

.kela-design-root .kela-design-pricebar-meta b {
	font-size: 14px;
	font-weight: 600;
	color: #2C6E2A;
}

.kela-design-root .kela-design-pricebar-compare {
	font-weight: 500;
	font-size: 12.5px;
	color: var(--kela-design-muted);
	text-decoration: none;
	border-bottom: 1px solid var(--kela-design-line);
	align-self: flex-start;
	width: fit-content;
	padding-bottom: 1px;
}

.kela-design-root .kela-design-pricebar-compare:hover {
	color: var(--kela-design-blue);
	border-bottom-color: currentColor;
}

/* ============================ 3. PAGE HEAD ===============================
   The black photo band is now a soft grey panel with the title centred and
   the duplicate breadcrumb gone: the design already draws one right under it.
   ===================================================================== */
.petrascal-pagehead {
	background: linear-gradient(180deg, #F7F5F2 0%, #FBFAF8 100%);
	border-bottom: 1px solid rgba(0, 0, 0, .05);
	padding: clamp(34px, 5vw, 64px) 16px clamp(28px, 4vw, 46px);
	text-align: center;
}

.petrascal-pagehead-inner {
	width: 100%;
	max-width: 780px;
	margin-inline: auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
}

.petrascal-pagehead-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 5px 13px;
	border-radius: 999px;
	background: #fff;
	border: 1px solid rgba(0, 0, 0, .07);
	font-family: var(--kela-design-display, sans-serif);
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--Primary, #bd6f43);
	text-decoration: none;
	transition: transform .18s ease, box-shadow .18s ease;
}

.petrascal-pagehead-eyebrow:hover {
	transform: translateY(-1px);
	box-shadow: 0 6px 16px -10px rgba(16, 24, 40, .5);
	color: var(--Primary, #bd6f43);
}

.petrascal-pagehead-title {
	margin: 0;
	font-family: var(--kela-design-display, sans-serif);
	font-weight: 600;
	font-size: clamp(26px, 3.6vw, 44px);
	line-height: 1.16;
	letter-spacing: -0.028em;
	color: #1A1A1A;
	text-wrap: balance;
}

.petrascal-pagehead-meta {
	margin: 0;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 13.5px;
	color: #6F7071;
}

.petrascal-pagehead-stars {
	color: #F0A750;
	letter-spacing: 2px;
	font-size: 13px;
}

/* The design's own breadcrumb, now the only one on the page, gets room. */
.kela-design-root .kela-design-crumbs {
	padding-block: 18px 6px;
}

/* ============================ 4. GALLERY =================================
   Arrows: the flat grey squares are now round buttons with a properly drawn
   chevron. The glyph is a mask so the shape does not depend on the sprite,
   and it still inherits currentColor.
   ===================================================================== */
.kela-design-root .kela-design-gallery-arrow {
	height: 34px;
	width: 34px;
	margin-inline: auto;
	border-radius: 999px;
	background: #fff;
	border: 1px solid var(--kela-design-line);
	box-shadow: 0 1px 2px rgba(16, 24, 40, .06);
	color: var(--kela-design-ink-2);
	transition: background .16s ease, color .16s ease, border-color .16s ease, transform .16s ease, opacity .16s ease;
}

.kela-design-root .kela-design-gallery-arrow:hover {
	background: var(--kela-design-ink);
	border-color: var(--kela-design-ink);
	color: #fff;
	transform: translateY(-1px);
}

.kela-design-root .kela-design-gallery-arrow:active {
	transform: translateY(0);
}

/* The sprite chevron is replaced rather than restyled: it was a solid
   triangle-ish glyph that never looked right at this size. */
.kela-design-root .kela-design-gallery-arrow svg {
	display: none;
}

.kela-design-root .kela-design-gallery-arrow::before {
	content: "";
	width: 15px;
	height: 15px;
	background: currentColor;
	-webkit-mask: var(--petrascal-chev) center / 15px 15px no-repeat;
	mask: var(--petrascal-chev) center / 15px 15px no-repeat;
}

.kela-design-root .kela-design-gallery-arrow--up {
	--petrascal-chev: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 15l-6-6-6 6'/%3E%3C/svg%3E");
}

.kela-design-root .kela-design-gallery-arrow--down {
	--petrascal-chev: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}

/* Nothing left to scroll to: the button stays in place but stops asking to
   be pressed, which is calmer than making the row jump by hiding it. */
.kela-design-root .kela-design-gallery-arrow[data-petrascal-end="true"] {
	opacity: .32;
	pointer-events: none;
}

.kela-design-root .kela-design-gallery-track {
	scrollbar-width: none;
}

.kela-design-root .kela-design-gallery-track::-webkit-scrollbar {
	width: 0;
	height: 0;
}

.kela-design-root .kela-design-gallery-thumb {
	border-radius: 12px;
	transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}

.kela-design-root .kela-design-gallery-thumb:hover {
	transform: translateY(-2px);
}

.kela-design-root .kela-design-gallery-stage {
	background: linear-gradient(160deg, #F7F6F4 0%, #EFEDEA 100%);
	border: 1px solid rgba(0, 0, 0, .04);
}

/* The button that opens the lightbox, added by the script. */
.kela-design-root .petrascal-expand {
	position: absolute;
	right: var(--kela-design-s4);
	bottom: var(--kela-design-s4);
	z-index: 3;
	width: 40px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 999px;
	background: rgba(255, 255, 255, .94);
	backdrop-filter: blur(4px);
	box-shadow: 0 4px 16px rgba(16, 24, 40, .12);
	color: var(--kela-design-ink-2);
	transition: transform .18s ease, color .18s ease;
}

.kela-design-root .petrascal-expand:hover {
	transform: scale(1.06);
	color: var(--kela-design-ink);
}

.kela-design-root .petrascal-expand svg {
	width: 17px;
	height: 17px;
}

/* ---- the gallery column follows you down the page ----

   The reason this did not work before: .kela-design-root carries
   overflow-x:hidden, and an ancestor with any overflow other than visible
   becomes the sticky element's scroll container. That container does not
   scroll, so the gallery had nothing to stick to. `clip` cuts the same
   horizontal overflow without creating a scroll container, which is exactly
   what it was added for. A browser too old to know `clip` ignores this line
   and keeps `hidden`, so the layout is never at risk either way. */
/* The selector is doubled on purpose. A caching plugin that combines and
   reorders stylesheets can put petrascal-pdp.css after this file, and at equal
   specificity the last one would win and put overflow-x:hidden back. Doubling
   the class wins on specificity instead of on load order. */
.kela-design-root.kela-design-root {
	overflow-x: clip;
}

@media (min-width: 981px) {

	.kela-design-root .kela-design-hero {
		align-items: start;
	}

	.kela-design-root .kela-design-hero-col:first-child {
		position: sticky;
		top: var(--petrascal-sticky-top, 96px);
		align-self: start;
		z-index: 2;
	}
}

/* ================== 4b. THE "IN DETAIL" PICTURE RAIL =====================
   The rail sat hard against the rule under the section heading, and its
   pictures were pinned to the left of a column wider than they are.
   ===================================================================== */
.kela-design-root .kela-design-story {
	margin-top: clamp(16px, 2.2vw, 30px);
	align-items: start;
}

.kela-design-root .kela-design-story-rail {
	align-content: start;
	justify-items: center;
}

.kela-design-root .kela-design-story-rail img {
	max-width: 250px;
	margin-inline: auto;
	cursor: zoom-in;
	transition: transform .25s ease, box-shadow .25s ease;
}

.kela-design-root .kela-design-story-rail img:hover {
	transform: translateY(-2px);
	box-shadow: 0 14px 30px -20px rgba(16, 24, 40, .7);
}

.kela-design-root .kela-design-story-body {
	padding-top: 2px;
}

/* ============================= 5. TRUST ==================================
   Four promises in the buy column, followed by the payment strip. Replaces
   the old delivery / returns / warranty trio and the "Deliver to … Change"
   line, which sent people to the cart to answer a question they had not
   asked.
   ===================================================================== */
.kela-design-root .petrascal-trust {
	display: grid;
	gap: 10px;
}

.kela-design-root .petrascal-trust-item {
	display: grid;
	grid-template-columns: 38px minmax(0, 1fr) auto;
	align-items: start;
	gap: 12px;
	padding: 13px 14px;
	border: 1px solid var(--kela-design-line);
	border-radius: 13px;
	background: #fff;
	transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.kela-design-root .petrascal-trust-item:hover {
	border-color: rgba(189, 111, 67, .4);
	box-shadow: 0 10px 26px -20px rgba(16, 24, 40, .6);
	transform: translateY(-1px);
}

.kela-design-root .petrascal-trust-ico {
	width: 38px;
	height: 38px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 11px;
	background: #FBF3EC;
	color: var(--Primary, #bd6f43);
}

.petrascal-trust-icon {
	width: 19px;
	height: 19px;
}

.kela-design-root .petrascal-trust-body {
	display: flex;
	flex-direction: column;
	gap: 3px;
	min-width: 0;
}

.kela-design-root .petrascal-trust-title {
	font-family: var(--kela-design-display);
	font-size: 14.5px;
	font-weight: 600;
	letter-spacing: -0.012em;
	color: var(--kela-design-ink);
}

.kela-design-root .petrascal-trust-note {
	font-size: 12.8px;
	line-height: 1.55;
	color: var(--kela-design-muted);
}

.kela-design-root .petrascal-trust-tag {
	align-self: center;
	flex: none;
	padding: 4px 9px;
	border-radius: 999px;
	background: #F4F2EF;
	font-size: 10.5px;
	font-weight: 600;
	letter-spacing: .07em;
	text-transform: uppercase;
	color: var(--kela-design-muted);
	white-space: nowrap;
}

/* ---- payment strip ---- */
.kela-design-root .petrascal-pay {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 14px;
	border: 1px dashed var(--kela-design-line);
	border-radius: 13px;
	background: #FCFBFA;
}

.kela-design-root .petrascal-pay-label {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-family: var(--kela-design-display);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--kela-design-muted);
}

.kela-design-root .petrascal-pay-label .petrascal-trust-icon {
	width: 15px;
	height: 15px;
	color: #2C6E2A;
}

.kela-design-root .petrascal-pay-list ul {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.kela-design-root .petrascal-pay-list li {
	display: flex;
}

.kela-design-root .petrascal-pay-list img {
	width: 46px;
	height: 29px;
	object-fit: contain;
	border-radius: 5px;
	background: #fff;
	border: 1px solid var(--kela-design-line);
	padding: 2px;
	filter: saturate(.9);
	transition: filter .18s ease, transform .18s ease;
}

.kela-design-root .petrascal-pay-list img:hover {
	filter: none;
	transform: translateY(-1px);
}

/* ========================== 6. SECTION TINTS =============================
   Three of the long sections get the warm panel treatment so the page reads
   as blocks rather than one endless scroll. Selected by their heading ids,
   which are stable, rather than by nth-child, which is not.
   ===================================================================== */
.kela-design-root section[aria-labelledby="kela-design-bundle-h"],
.kela-design-root section[aria-labelledby="kela-design-story-h"],
.kela-design-root section[aria-labelledby="kela-design-rate-h"] {
	padding: clamp(24px, 3vw, 40px) clamp(18px, 2.4vw, 34px);
	border-radius: 22px;
	background:
		radial-gradient(120% 140% at 8% 0%, rgba(189, 111, 67, .085) 0%, rgba(189, 111, 67, 0) 55%),
		linear-gradient(180deg, #FDF8F3 0%, #FBF7F3 100%);
	border: 1px solid rgba(189, 111, 67, .12);
}

.kela-design-root section[aria-labelledby="kela-design-rate-h"] {
	background:
		radial-gradient(120% 140% at 92% 0%, rgba(189, 111, 67, .08) 0%, rgba(189, 111, 67, 0) 55%),
		linear-gradient(180deg, #FAF9F7 0%, #F7F5F2 100%);
}

/* The panels already have a rule of their own, so the heading underline goes. */
.kela-design-root section[aria-labelledby="kela-design-story-h"] .kela-design-shead,
.kela-design-root section[aria-labelledby="kela-design-bundle-h"] .kela-design-shead,
.kela-design-root section[aria-labelledby="kela-design-rate-h"] .kela-design-shead {
	border-bottom-color: rgba(189, 111, 67, .18);
}

/* Cards inside a tinted panel need to stay white to keep their edge. */
.kela-design-root section[aria-labelledby="kela-design-bundle-h"] .kela-design-bundle-item,
.kela-design-root section[aria-labelledby="kela-design-rate-h"] .kela-design-review {
	background: #fff;
}

/* ======================= 7. THE REVIEWS / FOOTER GAP =====================
   The last section ended flush against the black footer. */
.kela-design-root {
	padding-bottom: clamp(56px, 7vw, 104px);
}

.kela-design-root .kela-design-shell > :last-child {
	margin-bottom: 0;
}

/* ========================== 8. FADE IN ===================================
   Sections and cards settle in as they arrive. The hiding rule only applies
   once the script has added .petrascal-anim to the root, so with JS off or
   still loading nothing is ever stuck invisible.
   ===================================================================== */
.kela-design-root.petrascal-anim .petrascal-reveal {
	opacity: 0;
	transform: translateY(18px);
	transition: opacity .62s cubic-bezier(.22, .68, .3, 1), transform .62s cubic-bezier(.22, .68, .3, 1);
	will-change: opacity, transform;
}

.kela-design-root.petrascal-anim .petrascal-reveal.is-inview {
	opacity: 1;
	transform: none;
	will-change: auto;
}

/* ========================== 9. THE DOG ===================================
   A brand moment between the buy box and the long read. Decorative only, and
   switched off completely for reduced motion further down.
   ===================================================================== */
.petrascal-dogstrip {
	position: relative;
	margin-top: var(--kela-design-section);
	height: 96px;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	color: var(--Primary, #bd6f43);
}

.petrascal-dogstrip-line {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 26px;
	height: 1px;
	background: linear-gradient(90deg, transparent, rgba(189, 111, 67, .28) 18%, rgba(189, 111, 67, .28) 82%, transparent);
}

.petrascal-dog {
	position: relative;
	z-index: 2;
	display: block;
	width: 118px;
	animation: petrascal-dog-walk 9s linear infinite;
}

.petrascal-dog svg {
	width: 100%;
	height: auto;
	display: block;
	overflow: visible;
}

.petrascal-dog-g {
	animation: petrascal-dog-bob .48s ease-in-out infinite alternate;
	transform-origin: 50% 90%;
}

.petrascal-dog-tail {
	transform-origin: 44px 38px;
	animation: petrascal-dog-wag .32s ease-in-out infinite alternate;
}

.petrascal-dog-leg {
	transform-origin: 50% 8%;
	animation: petrascal-dog-step .48s ease-in-out infinite alternate;
}

.petrascal-dog-leg--2,
.petrascal-dog-leg--3 {
	animation-direction: alternate-reverse;
}

.petrascal-paws {
	position: absolute;
	inset: auto 0 18px;
	display: flex;
	justify-content: center;
	gap: 46px;
	pointer-events: none;
}

.petrascal-paw {
	width: 15px;
	height: 15px;
	fill: rgba(189, 111, 67, .34);
	opacity: 0;
	animation: petrascal-paw-fade 9s linear infinite;
}

.petrascal-paw--1 { animation-delay: .4s; }
.petrascal-paw--2 { animation-delay: 1.3s; }
.petrascal-paw--3 { animation-delay: 2.2s; }
.petrascal-paw--4 { animation-delay: 3.1s; }

@keyframes petrascal-dog-walk {
	0%   { transform: translateX(-46vw) scaleX(1); }
	46%  { transform: translateX(44vw) scaleX(1); }
	50%  { transform: translateX(44vw) scaleX(-1); }
	96%  { transform: translateX(-46vw) scaleX(-1); }
	100% { transform: translateX(-46vw) scaleX(1); }
}

@keyframes petrascal-dog-bob {
	from { transform: translateY(0); }
	to   { transform: translateY(-3px); }
}

@keyframes petrascal-dog-wag {
	from { transform: rotate(-16deg); }
	to   { transform: rotate(22deg); }
}

@keyframes petrascal-dog-step {
	from { transform: rotate(-19deg); }
	to   { transform: rotate(19deg); }
}

@keyframes petrascal-paw-fade {
	0%, 6%   { opacity: 0; transform: scale(.7) rotate(-8deg); }
	12%      { opacity: 1; transform: scale(1) rotate(-8deg); }
	42%      { opacity: .55; }
	60%, 100% { opacity: 0; }
}

/* ========================= 10. LIGHTBOX ==================================
   Built by js/petrascal-pdp-enhance.js. No library, no CDN.
   ===================================================================== */
.petrascal-lb {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: clamp(12px, 3vw, 40px);
	background: rgba(14, 16, 20, .92);
	backdrop-filter: blur(3px);

	/* Closed, it stays in the DOM so reopening is instant. Opacity alone would
	   leave a full-screen sheet on top of the page swallowing every click, so
	   it is taken out of the hit test as well. */
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity .25s ease, visibility 0s linear .25s;
}

.petrascal-lb.is-open {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transition: opacity .25s ease, visibility 0s;
}

.petrascal-lb-figure {
	position: relative;
	max-width: min(1180px, 100%);
	max-height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}

.petrascal-lb-img {
	max-width: 100%;
	max-height: calc(100vh - clamp(120px, 18vh, 190px));
	width: auto;
	height: auto;
	object-fit: contain;
	border-radius: 10px;
	background: #fff;
	box-shadow: 0 30px 80px rgba(0, 0, 0, .45);
	transform: scale(.96);
	opacity: 0;
	transition: transform .3s cubic-bezier(.2, .8, .2, 1), opacity .3s ease;
}

.petrascal-lb.is-open .petrascal-lb-img {
	transform: scale(1);
	opacity: 1;
}

.petrascal-lb-btn {
	position: absolute;
	z-index: 2;
	width: 46px;
	height: 46px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 0;
	border-radius: 999px;
	background: rgba(255, 255, 255, .13);
	color: #fff;
	cursor: pointer;
	transition: background .18s ease, transform .18s ease;
}

.petrascal-lb-btn:hover {
	background: rgba(255, 255, 255, .26);
	transform: scale(1.05);
}

.petrascal-lb-btn svg {
	width: 21px;
	height: 21px;
}

.petrascal-lb-close {
	top: clamp(12px, 2.4vw, 26px);
	right: clamp(12px, 2.4vw, 26px);
}

.petrascal-lb-prev {
	left: clamp(8px, 2vw, 26px);
	top: 50%;
	margin-top: -23px;
}

.petrascal-lb-next {
	right: clamp(8px, 2vw, 26px);
	top: 50%;
	margin-top: -23px;
}

.petrascal-lb-count {
	position: absolute;
	left: 50%;
	bottom: clamp(14px, 3vh, 30px);
	transform: translateX(-50%);
	padding: 7px 15px;
	border-radius: 999px;
	background: rgba(255, 255, 255, .13);
	color: #fff;
	font-size: 12.5px;
	font-weight: 500;
	letter-spacing: .03em;
}

.petrascal-lb-strip {
	position: absolute;
	left: 50%;
	bottom: clamp(52px, 8vh, 74px);
	transform: translateX(-50%);
	display: flex;
	gap: 8px;
	max-width: min(760px, 92vw);
	overflow-x: auto;
	padding: 4px;
	scrollbar-width: none;
}

.petrascal-lb-strip::-webkit-scrollbar {
	height: 0;
}

.petrascal-lb-dot {
	flex: none;
	width: 52px;
	height: 52px;
	padding: 0;
	border: 2px solid transparent;
	border-radius: 9px;
	background: rgba(255, 255, 255, .1);
	cursor: pointer;
	overflow: hidden;
	opacity: .55;
	transition: opacity .18s ease, border-color .18s ease;
}

.petrascal-lb-dot img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.petrascal-lb-dot[aria-current="true"] {
	opacity: 1;
	border-color: #fff;
}

body.petrascal-lb-open {
	overflow: hidden;
}

/* ========================= 11. RESPONSIVE ================================ */
@media (max-width: 980px) {

	.kela-design-root .petrascal-trust-item {
		grid-template-columns: 34px minmax(0, 1fr) auto;
	}
}

@media (max-width: 720px) {

	.petrascal-pagehead {
		padding-top: 26px;
		padding-bottom: 22px;
	}

	.kela-design-root .kela-design-crumbs {
		padding-block: 14px 4px;
	}

	/* The thumbnail rail is horizontal here, so the arrows have to be too:
	   centred against the strip, flat against each end, and small enough not
	   to eat the row. Before this they sat above and below the strip at full
	   width, which is what pushed everything out of line. */
	.kela-design-root .kela-design-gallery-rail {
		position: relative;
		padding-inline: 40px;
	}

	.kela-design-root .kela-design-gallery-arrow {
		position: absolute;
		top: 50%;
		width: 32px;
		height: 32px;
		margin: -16px 0 0;
		z-index: 2;
	}

	.kela-design-root .kela-design-gallery-arrow--up {
		left: 0;
		--petrascal-chev: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 18l-6-6 6-6'/%3E%3C/svg%3E");
	}

	.kela-design-root .kela-design-gallery-arrow--down {
		right: 0;
		--petrascal-chev: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l6 6-6 6'/%3E%3C/svg%3E");
	}

	.kela-design-root .kela-design-gallery-track {
		scroll-snap-type: x mandatory;
	}

	.kela-design-root .kela-design-gallery-thumb {
		scroll-snap-align: start;
	}

	.kela-design-root .petrascal-trust-tag {
		display: none;
	}

	.kela-design-root section[aria-labelledby="kela-design-bundle-h"],
	.kela-design-root section[aria-labelledby="kela-design-story-h"],
	.kela-design-root section[aria-labelledby="kela-design-rate-h"] {
		padding-inline: 14px;
		border-radius: 16px;
	}

	.petrascal-dogstrip {
		height: 76px;
	}

	.petrascal-dog {
		width: 92px;
	}

	.petrascal-lb-btn {
		width: 40px;
		height: 40px;
	}

	.petrascal-lb-strip {
		display: none;
	}
}

@media (prefers-reduced-motion: reduce) {

	.petrascal-dog,
	.petrascal-dog-g,
	.petrascal-dog-tail,
	.petrascal-dog-leg,
	.petrascal-paw {
		animation: none !important;
	}

	.petrascal-paw {
		opacity: .34;
	}

	.kela-design-root.petrascal-anim .petrascal-reveal {
		opacity: 1;
		transform: none;
	}
}

/* ========================= 12. EDITOR CONTENT ============================
   Everything typed into the product description and the short description
   lands in one of these three boxes. The theme styles paragraphs there and
   nothing else, so a heading fell back to the browser default (a huge serif
   h2), bullets vanished behind `.kela-design-root ul{list-style:none}`, and a
   table came out as loose text. This is the missing house style for all of it.
   ===================================================================== */
.kela-design-root .kela-design-story-copy,
.kela-design-root .kela-design-desc-body,
.kela-design-root .kela-design-faq-a > div {
	--prose-ink: var(--kela-design-ink, #181818);
	--prose-body: var(--kela-design-muted, #6F7071);
	--prose-line: var(--kela-design-line, #E9E9E9);
	--prose-brand: var(--Primary, #bd6f43);
}

/* ---- headings ---- */
.kela-design-root .kela-design-story-copy :is(h1, h2, h3, h4, h5, h6),
.kela-design-root .kela-design-desc-body :is(h1, h2, h3, h4, h5, h6),
.kela-design-root .kela-design-faq-a > div :is(h1, h2, h3, h4, h5, h6) {
	font-family: var(--kela-design-display);
	font-weight: 600;
	color: var(--prose-ink);
	letter-spacing: -0.018em;
	line-height: 1.3;
	text-wrap: balance;
}

.kela-design-root .kela-design-story-copy :is(h1, h2),
.kela-design-root .kela-design-desc-body :is(h1, h2) {
	font-size: clamp(19px, 1.9vw, 23px);
	margin-block: 32px 12px;
	padding-bottom: 10px;
	border-bottom: 1px solid var(--prose-line);
}

.kela-design-root .kela-design-story-copy h3,
.kela-design-root .kela-design-desc-body h3,
.kela-design-root .kela-design-faq-a > div h3 {
	font-size: clamp(16.5px, 1.5vw, 19px);
	margin-block: 26px 10px;
}

.kela-design-root .kela-design-story-copy h4,
.kela-design-root .kela-design-desc-body h4,
.kela-design-root .kela-design-faq-a > div h4 {
	font-size: 16px;
	margin-block: 22px 8px;
}

.kela-design-root .kela-design-story-copy :is(h5, h6),
.kela-design-root .kela-design-desc-body :is(h5, h6) {
	font-size: 14.5px;
	letter-spacing: .01em;
	margin-block: 18px 6px;
	color: var(--prose-body);
	text-transform: uppercase;
}

/* A heading at the very top has nothing to push away from. */
.kela-design-root .kela-design-story-copy > :first-child,
.kela-design-root .kela-design-desc-body > :first-child,
.kela-design-root .kela-design-faq-a > div > :first-child {
	margin-top: 0;
}

/* ---- inline ---- */
.kela-design-root .kela-design-story-copy :is(strong, b),
.kela-design-root .kela-design-desc-body :is(strong, b),
.kela-design-root .kela-design-faq-a > div :is(strong, b) {
	font-weight: 600;
	color: var(--prose-ink);
}

.kela-design-root .kela-design-story-copy a,
.kela-design-root .kela-design-desc-body a,
.kela-design-root .kela-design-faq-a > div a {
	color: var(--prose-brand);
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-thickness: 1px;
}

.kela-design-root .kela-design-story-copy a:hover,
.kela-design-root .kela-design-desc-body a:hover,
.kela-design-root .kela-design-faq-a > div a:hover {
	text-decoration-thickness: 2px;
}

/* ---- lists: the markers the theme reset away ---- */
.kela-design-root .kela-design-story-copy :is(ul, ol),
.kela-design-root .kela-design-desc-body :is(ul, ol),
.kela-design-root .kela-design-faq-a > div :is(ul, ol) {
	margin: 14px 0;
	padding-inline-start: 22px;
	color: #000000;
	font-size: 17px;
	line-height: 1.7;
}

.kela-design-root .kela-design-desc-body :is(ul, ol) {
	font-size: 14px;
}

.kela-design-root .kela-design-story-copy ul,
.kela-design-root .kela-design-desc-body ul,
.kela-design-root .kela-design-faq-a > div ul {
	list-style: disc;
}

.kela-design-root .kela-design-story-copy ol,
.kela-design-root .kela-design-desc-body ol,
.kela-design-root .kela-design-faq-a > div ol {
	list-style: decimal;
}

.kela-design-root .kela-design-story-copy :is(ul, ul) ul,
.kela-design-root .kela-design-desc-body ul ul {
	list-style: circle;
}

.kela-design-root .kela-design-story-copy li,
.kela-design-root .kela-design-desc-body li,
.kela-design-root .kela-design-faq-a > div li {
	display: list-item;
	margin-block: 6px;
	padding-inline-start: 4px;
}

.kela-design-root .kela-design-story-copy li::marker,
.kela-design-root .kela-design-desc-body li::marker,
.kela-design-root .kela-design-faq-a > div li::marker {
	color: var(--prose-brand);
}

.kela-design-root .kela-design-story-copy li > :is(ul, ol),
.kela-design-root .kela-design-desc-body li > :is(ul, ol) {
	margin-block: 6px;
}

/* ---- blocks ---- */
.kela-design-root .kela-design-story-copy blockquote,
.kela-design-root .kela-design-desc-body blockquote {
	margin: 20px 0;
	padding: 14px 18px;
	border-inline-start: 3px solid var(--prose-brand);
	border-radius: 0 10px 10px 0;
	background: rgba(189, 111, 67, .06);
	color: var(--prose-ink);
	font-size: 15px;
	line-height: 1.7;
}

.kela-design-root .kela-design-story-copy hr,
.kela-design-root .kela-design-desc-body hr {
	margin: 26px 0;
	border: 0;
	border-top: 1px solid var(--prose-line);
}

.kela-design-root .kela-design-story-copy :is(img, video),
.kela-design-root .kela-design-desc-body :is(img, video) {
	margin-block: 18px;
	border-radius: var(--kela-design-r, 12px);
}

.kela-design-root .kela-design-story-copy figcaption,
.kela-design-root .kela-design-desc-body figcaption {
	margin-top: 8px;
	font-size: 13px;
	color: var(--prose-body);
}

.kela-design-root .kela-design-story-copy :is(code, kbd),
.kela-design-root .kela-design-desc-body :is(code, kbd) {
	padding: 2px 6px;
	border-radius: 5px;
	background: var(--kela-design-surface, #F6F6F6);
	font-size: .92em;
}

/* ============================ 13. TABLES =================================
   A spec table is the one thing a shopper reads twice, so it gets a proper
   head, zebra rows and a first column that stays put while the rest scrolls.
   Below 768px each row becomes its own card, labelled from the header text
   the script copies into data-label.
   ===================================================================== */
.kela-design-root .kela-design-story-copy table,
.kela-design-root .kela-design-desc-body table,
.kela-design-root .kela-design-faq-a > div table {
	display: block;
	width: 100%;
	max-width: 100%;
	margin: 22px 0;
	border-collapse: collapse;
	border-radius: 12px;

	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	font-size: 14.5px;
	scrollbar-width: thin;
}

.kela-design-root .kela-design-story-copy table thead tr,
.kela-design-root .kela-design-desc-body table thead tr,
.kela-design-root .kela-design-faq-a > div table thead tr {
	background: linear-gradient(135deg, var(--prose-brand) 0%, #A4582F 100%);
	color: #fff;
	text-align: start;
}

.kela-design-root .kela-design-story-copy table :is(th, td),
.kela-design-root .kela-design-desc-body table :is(th, td),
.kela-design-root .kela-design-faq-a > div table :is(th, td) {
	padding: 13px 15px;
	border: 0;
	text-align: start;
	vertical-align: top;
	line-height: 1.6;
	min-width: 132px;
}

.kela-design-root .kela-design-story-copy table th,
.kela-design-root .kela-design-desc-body table th,
.kela-design-root .kela-design-faq-a > div table th {
	font-family: var(--kela-design-display);
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	white-space: nowrap;
	color: inherit;
}

.kela-design-root .kela-design-story-copy table tbody tr,
.kela-design-root .kela-design-desc-body table tbody tr,
.kela-design-root .kela-design-faq-a > div table tbody tr {
	border-bottom: 1px solid var(--prose-line);
	transition: background-color .18s ease;
}

.kela-design-root .kela-design-story-copy table tbody tr:nth-child(even),
.kela-design-root .kela-design-desc-body table tbody tr:nth-child(even),
.kela-design-root .kela-design-faq-a > div table tbody tr:nth-child(even) {
	background: #FAF9F8;
}

.kela-design-root .kela-design-story-copy table tbody tr:hover,
.kela-design-root .kela-design-desc-body table tbody tr:hover,
.kela-design-root .kela-design-faq-a > div table tbody tr:hover {
	background: rgba(189, 111, 67, .07);
}

.kela-design-root .kela-design-story-copy table tbody tr:last-child,
.kela-design-root .kela-design-desc-body table tbody tr:last-child,
.kela-design-root .kela-design-faq-a > div table tbody tr:last-child {
	border-bottom: 0;
}

.kela-design-root .kela-design-story-copy table tbody td,
.kela-design-root .kela-design-desc-body table tbody td,
.kela-design-root .kela-design-faq-a > div table tbody td {
	color: var(--kela-design-ink-2, #4D4E4F);
}

/* The label column stays readable while the numbers scroll under it. */
.kela-design-root .kela-design-story-copy table tbody td:first-child,
.kela-design-root .kela-design-desc-body table tbody td:first-child,
.kela-design-root .kela-design-faq-a > div table tbody td:first-child {
	position: sticky;
	left: 0;
	z-index: 2;
	font-weight: 600;
	color: var(--prose-ink);
	background: inherit;
	box-shadow: 2px 0 6px rgba(16, 24, 40, .05);
}

.kela-design-root .kela-design-story-copy table tbody tr:nth-child(odd) td:first-child,
.kela-design-root .kela-design-desc-body table tbody tr:nth-child(odd) td:first-child,
.kela-design-root .kela-design-faq-a > div table tbody tr:nth-child(odd) td:first-child {
	background: #fff;
}

.kela-design-root .kela-design-story-copy table thead th:first-child,
.kela-design-root .kela-design-desc-body table thead th:first-child,
.kela-design-root .kela-design-faq-a > div table thead th:first-child {
	position: sticky;
	left: 0;
	z-index: 3;
	background: var(--prose-brand);
}

/* ---- one card per row on a phone ---- */
@media (max-width: 768px) {

	.kela-design-root .kela-design-story-copy table,
	.kela-design-root .kela-design-desc-body table,
	.kela-design-root .kela-design-faq-a > div table {
		overflow-x: hidden;
		border: 0;
		background: transparent;
	}

	.kela-design-root .kela-design-story-copy table :is(thead, tbody, tr, th, td),
	.kela-design-root .kela-design-desc-body table :is(thead, tbody, tr, th, td),
	.kela-design-root .kela-design-faq-a > div table :is(thead, tbody, tr, th, td) {
		display: block;
		width: 100%;
		box-sizing: border-box;
	}

	.kela-design-root .kela-design-story-copy table thead,
	.kela-design-root .kela-design-desc-body table thead,
	.kela-design-root .kela-design-faq-a > div table thead {
		display: none;
	}

	.kela-design-root .kela-design-story-copy table tbody tr,
	.kela-design-root .kela-design-desc-body table tbody tr,
	.kela-design-root .kela-design-faq-a > div table tbody tr {
		margin-bottom: 16px;
		border: 1px solid var(--prose-line);
		border-radius: 12px;
		overflow: hidden;
		background: #fff;
		box-shadow: 0 6px 18px -14px rgba(16, 24, 40, .7);
	}

	.kela-design-root .kela-design-story-copy table tbody td,
	.kela-design-root .kela-design-desc-body table tbody td,
	.kela-design-root .kela-design-faq-a > div table tbody td {
		min-width: 0;
		padding: 11px 14px;
		border-bottom: 1px solid var(--prose-line);
	}

	.kela-design-root .kela-design-story-copy table tbody td:last-child,
	.kela-design-root .kela-design-desc-body table tbody td:last-child,
	.kela-design-root .kela-design-faq-a > div table tbody td:last-child {
		border-bottom: 0;
	}

	/* First cell becomes the card's title bar. The odd-row selector is
	   repeated because the zebra rule above it is more specific, and without
	   it the title bar on every other card would stay white. */
	.kela-design-root .kela-design-story-copy table tbody td:first-child,
	.kela-design-root .kela-design-desc-body table tbody td:first-child,
	.kela-design-root .kela-design-faq-a > div table tbody td:first-child,
	.kela-design-root .kela-design-story-copy table tbody tr:nth-child(odd) td:first-child,
	.kela-design-root .kela-design-desc-body table tbody tr:nth-child(odd) td:first-child,
	.kela-design-root .kela-design-faq-a > div table tbody tr:nth-child(odd) td:first-child {
		position: static;
		box-shadow: none;
		background: linear-gradient(135deg, var(--prose-brand) 0%, #A4582F 100%);
		color: #fff;
		font-family: var(--kela-design-display);
		font-weight: 700;
		font-size: 14px;
		letter-spacing: .04em;
		text-transform: uppercase;
		padding: 12px 14px;
		border-bottom: 0;
	}

	/* The header text the script copied onto each cell. */
	.kela-design-root .kela-design-story-copy table tbody td[data-label]::before,
	.kela-design-root .kela-design-desc-body table tbody td[data-label]::before,
	.kela-design-root .kela-design-faq-a > div table tbody td[data-label]::before {
		content: attr(data-label);
		display: block;
		margin-bottom: 4px;
		font-size: 10.5px;
		font-weight: 700;
		letter-spacing: .06em;
		text-transform: uppercase;
		color: var(--prose-brand);
	}

	.kela-design-root .kela-design-story-copy table tbody td:first-child::before,
	.kela-design-root .kela-design-desc-body table tbody td:first-child::before,
	.kela-design-root .kela-design-faq-a > div table tbody td:first-child::before {
		display: none;
	}
}

/* A table pasted straight from a document has no thead: its first row is the
   header in everything but markup. The script tags those, and this gives that
   row the same head treatment so the columns are labelled either way. */
.kela-design-root .petrascal-table--headless tr:first-child {
	background: linear-gradient(135deg, var(--Primary, #bd6f43) 0%, #A4582F 100%);
	color: #fff;
}

.kela-design-root .petrascal-table--headless tr:first-child :is(td, th) {
	font-family: var(--kela-design-display);
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: #fff;
}

@media (max-width: 768px) {

	.kela-design-root .petrascal-table--headless tr:first-child {
		display: none;
	}
}

/* ========================= 14. BULLET BUBBLES ============================
   The theme kills list markers site wide with
   .kela-design-root ul, ol { list-style: none }, and a caching plugin that
   reorders stylesheets can put that rule back on top of ours. Rather than
   fight over one property, the marker is drawn as our own element: the native
   one is switched off for good and a small brand bubble is placed in the
   padding. It cannot be un-drawn by anything, and it looks like the site
   rather than like a browser default.

   The !important here is deliberate and load-order proof, which is exactly
   what it is for.
   ===================================================================== */
.kela-design-root :is(.kela-design-story-copy, .kela-design-desc-body, .kela-design-faq-a, .petrascal-prose) :is(ul, ol) {
	list-style: none !important;
	padding-inline-start: 2px !important;
	margin-block: 14px !important;
}

.kela-design-root :is(.kela-design-story-copy, .kela-design-desc-body, .kela-design-faq-a, .petrascal-prose) :is(ul, ol) > li {
	list-style: none !important;
	display: block !important;
	position: relative;
	padding-inline-start: 30px !important;
	margin-block: 9px !important;
}

/* The bubble itself: a brand sphere with a highlight, the way a real one
   catches light. It pops in once when the list is painted. */
.kela-design-root :is(.kela-design-story-copy, .kela-design-desc-body, .kela-design-faq-a, .petrascal-prose) ul > li::before {
	content: "";
	position: absolute;
	inset-inline-start: 0;
	top: 0.62em;
	width: 15px;
	height: 15px;
	margin-top: -7.5px;
	border-radius: 50%;
	background:
		radial-gradient(circle at 34% 30%, rgba(255, 255, 255, .95) 0 16%, rgba(255, 255, 255, 0) 17%),
		linear-gradient(140deg, var(--Primary, #bd6f43) 0%, #A4582F 100%);
	box-shadow: 0 0 0 4px rgba(189, 111, 67, .13), 0 2px 4px -1px rgba(164, 88, 47, .45);
	transform-origin: center;
	animation: petrascal-bubble-in .5s cubic-bezier(.2, .9, .3, 1.35) both;
}

/* A numbered list keeps its number, in the same bubble. */
.kela-design-root :is(.kela-design-story-copy, .kela-design-desc-body, .kela-design-faq-a, .petrascal-prose) ol {
	counter-reset: petrascal-ol;
}

.kela-design-root :is(.kela-design-story-copy, .kela-design-desc-body, .kela-design-faq-a, .petrascal-prose) ol > li {
	counter-increment: petrascal-ol;
	padding-inline-start: 34px !important;
}

.kela-design-root :is(.kela-design-story-copy, .kela-design-desc-body, .kela-design-faq-a, .petrascal-prose) ol > li::before {
	content: counter(petrascal-ol);
	position: absolute;
	inset-inline-start: 0;
	top: 0.62em;
	width: 22px;
	height: 22px;
	margin-top: -11px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: linear-gradient(140deg, var(--Primary, #bd6f43) 0%, #A4582F 100%);
	box-shadow: 0 0 0 4px rgba(189, 111, 67, .13);
	color: #fff;
	font-family: var(--kela-design-display);
	font-size: 11px;
	font-weight: 700;
	line-height: 1;
	animation: petrascal-bubble-in .5s cubic-bezier(.2, .9, .3, 1.35) both;
}

/* The ring that breathes out when you run the cursor down the list. */
.kela-design-root :is(.kela-design-story-copy, .kela-design-desc-body, .kela-design-faq-a, .petrascal-prose) :is(ul, ol) > li::after {
	content: "";
	position: absolute;
	inset-inline-start: 1px;
	top: 0.62em;
	width: 13px;
	height: 13px;
	margin-top: -6.5px;
	border-radius: 50%;
	border: 1px solid var(--Primary, #bd6f43);
	opacity: 0;
	pointer-events: none;
}

.kela-design-root :is(.kela-design-story-copy, .kela-design-desc-body, .kela-design-faq-a, .petrascal-prose) :is(ul, ol) > li:hover::after {
	animation: petrascal-bubble-ring 1.1s ease-out infinite;
}

/* Eight is plenty: past that the stagger stops adding anything and a long
   list would be waiting on an animation to finish. */
.kela-design-root :is(.kela-design-story-copy, .kela-design-desc-body, .kela-design-faq-a, .petrascal-prose) li:nth-child(1)::before { animation-delay: .02s; }
.kela-design-root :is(.kela-design-story-copy, .kela-design-desc-body, .kela-design-faq-a, .petrascal-prose) li:nth-child(2)::before { animation-delay: .07s; }
.kela-design-root :is(.kela-design-story-copy, .kela-design-desc-body, .kela-design-faq-a, .petrascal-prose) li:nth-child(3)::before { animation-delay: .12s; }
.kela-design-root :is(.kela-design-story-copy, .kela-design-desc-body, .kela-design-faq-a, .petrascal-prose) li:nth-child(4)::before { animation-delay: .17s; }
.kela-design-root :is(.kela-design-story-copy, .kela-design-desc-body, .kela-design-faq-a, .petrascal-prose) li:nth-child(5)::before { animation-delay: .22s; }
.kela-design-root :is(.kela-design-story-copy, .kela-design-desc-body, .kela-design-faq-a, .petrascal-prose) li:nth-child(6)::before { animation-delay: .27s; }
.kela-design-root :is(.kela-design-story-copy, .kela-design-desc-body, .kela-design-faq-a, .petrascal-prose) li:nth-child(7)::before { animation-delay: .32s; }
.kela-design-root :is(.kela-design-story-copy, .kela-design-desc-body, .kela-design-faq-a, .petrascal-prose) li:nth-child(n+8)::before { animation-delay: .36s; }

@keyframes petrascal-bubble-in {
	0%   { transform: scale(0) translateY(3px); opacity: 0; }
	62%  { transform: scale(1.22); opacity: 1; }
	100% { transform: scale(1); opacity: 1; }
}

@keyframes petrascal-bubble-ring {
	0%   { transform: scale(1); opacity: .55; }
	100% { transform: scale(2.1); opacity: 0; }
}

/* ====================== 15. SPECIFICATION ROWS ===========================
   Two columns of text separated by a hairline read as a spreadsheet. Each
   row is now a card with its own edge, which is what makes a value easy to
   pick out when there are a dozen of them.
   ===================================================================== */
.kela-design-root .kela-design-spectable {
	column-gap: clamp(14px, 1.6vw, 20px);
	row-gap: 10px;
}

.kela-design-root .kela-design-spectable-row {
	position: relative;
	align-items: start;
	gap: var(--kela-design-s3);
	padding: 13px 16px 13px 17px;
	border: 1px solid var(--kela-design-line);
	border-radius: 12px;
	background: #fff;
	overflow: hidden;
	transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

/* The brand edge slides in rather than being there the whole time, so a
   column of rows stays calm until you go looking down it. */
.kela-design-root .kela-design-spectable-row::before {
	content: "";
	position: absolute;
	inset-inline-start: 0;
	top: 0;
	bottom: 0;
	width: 3px;
	background: linear-gradient(180deg, var(--Primary, #bd6f43), #A4582F);
	transform: scaleY(0);
	transform-origin: top;
	transition: transform .24s cubic-bezier(.2, .8, .2, 1);
}

.kela-design-root .kela-design-spectable-row:hover {
	border-color: rgba(189, 111, 67, .38);
	box-shadow: 0 10px 24px -20px rgba(16, 24, 40, .8);
	transform: translateY(-1px);
}

.kela-design-root .kela-design-spectable-row:hover::before {
	transform: scaleY(1);
}

.kela-design-root .kela-design-spectable-row dt {
	font-size: 13.5px;
	font-weight: 600;
	letter-spacing: -0.008em;
	color: var(--kela-design-ink);
}

.kela-design-root .kela-design-spectable-row dd {
	font-size: 13.5px;
	color: var(--kela-design-ink-2, #4D4E4F);
	overflow-wrap: anywhere;
}

@media (max-width: 720px) {

	.kela-design-root .kela-design-spectable-row {
		grid-template-columns: minmax(0, 1fr);
		gap: 3px;
		padding-block: 11px;
	}

	.kela-design-root .kela-design-spectable-row dt {
		font-size: 11.5px;
		letter-spacing: .05em;
		text-transform: uppercase;
		color: var(--kela-design-muted);
	}
}

@media (prefers-reduced-motion: reduce) {

	.kela-design-root :is(.kela-design-story-copy, .kela-design-desc-body, .kela-design-faq-a, .petrascal-prose) li::before {
		animation: none !important;
	}

	.kela-design-root :is(.kela-design-story-copy, .kela-design-desc-body, .kela-design-faq-a, .petrascal-prose) li:hover::after {
		animation: none !important;
	}
}




/* ===================== 16. PAGE HEAD BAND ================================
   The band keeps its place at the top of the page but loses its words. The
   title was the product name a second time over, and the breadcrumb was the
   same trail the design already draws below it, so both were repetition that
   pushed the buy box further down the screen. The <h1> in the buy box is
   untouched, so nothing is lost for search.

   What is left is a slow field of bubbles, drawn as two tiled SVG layers
   moving at different speeds. Two layers is what makes it read as depth
   rather than as wallpaper, and tiling a background position means the loop
   is seamless with no JavaScript and no extra DOM.
   ===================================================================== */
.single-product .page-title {
	position: relative;
	overflow: hidden;
	min-height: clamp(120px, 15vw, 190px);
	background:
		radial-gradient(70% 120% at 82% 10%, rgba(189, 111, 67, .30) 0%, rgba(189, 111, 67, 0) 60%),
		radial-gradient(50% 110% at 12% 95%, rgba(189, 111, 67, .18) 0%, rgba(189, 111, 67, 0) 62%),
		linear-gradient(120deg, #131315 0%, #1C1917 48%, #2A1E17 100%);
	isolation: isolate;
}

.single-product .page-title .content {
	display: none;
}

/* The parallax photo stays, far enough back to read as texture. */
.single-product .page-title .paralaximg {
	opacity: .22;
	filter: saturate(.7);
}

.single-product .page-title::before,
.single-product .page-title::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 1;
}

.single-product .page-title::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='560' height='560' viewBox='0 0 560 560'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='.30' stroke-width='1.4'%3E%3Ccircle cx='70' cy='470' r='34'/%3E%3Ccircle cx='250' cy='350' r='58'/%3E%3Ccircle cx='445' cy='495' r='26'/%3E%3Ccircle cx='500' cy='215' r='44'/%3E%3Ccircle cx='150' cy='140' r='20'/%3E%3Ccircle cx='350' cy='95' r='32'/%3E%3Ccircle cx='20' cy='250' r='16'/%3E%3C/g%3E%3Cg fill='%23E9A87C' fill-opacity='.20'%3E%3Ccircle cx='250' cy='350' r='58'/%3E%3Ccircle cx='500' cy='215' r='44'/%3E%3Ccircle cx='150' cy='140' r='20'/%3E%3C/g%3E%3Cg fill='%23ffffff' fill-opacity='.08'%3E%3Ccircle cx='70' cy='470' r='34'/%3E%3Ccircle cx='350' cy='95' r='32'/%3E%3C/g%3E%3C/svg%3E");
	background-size: 560px 560px;
	animation: petrascal-band-a 34s linear infinite;
	opacity: .9;
}

.single-product .page-title::after {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='340' height='340' viewBox='0 0 340 340'%3E%3Cg fill='%23ffffff' fill-opacity='.16'%3E%3Ccircle cx='40' cy='300' r='10'/%3E%3Ccircle cx='170' cy='215' r='7'/%3E%3Ccircle cx='300' cy='115' r='13'/%3E%3Ccircle cx='110' cy='55' r='6'/%3E%3Ccircle cx='250' cy='315' r='8'/%3E%3Ccircle cx='215' cy='140' r='5'/%3E%3Ccircle cx='60' cy='165' r='4'/%3E%3C/g%3E%3Cg fill='none' stroke='%23E9A87C' stroke-opacity='.45'%3E%3Ccircle cx='300' cy='115' r='13'/%3E%3Ccircle cx='40' cy='300' r='10'/%3E%3Ccircle cx='250' cy='315' r='8'/%3E%3C/g%3E%3C/svg%3E");
	background-size: 340px 340px;
	animation: petrascal-band-b 19s linear infinite;
}

@keyframes petrascal-band-a {
	from { background-position: 0 0; }
	to   { background-position: 90px -560px; }
}

@keyframes petrascal-band-b {
	from { background-position: 0 0; }
	to   { background-position: -60px -340px; }
}

@media (max-width: 720px) {

	.single-product .page-title {
		min-height: 96px;
	}
}

@media (prefers-reduced-motion: reduce) {

	.single-product .page-title::before,
	.single-product .page-title::after {
		animation: none;
	}
}