/* =============================================================================
   Panama Jack Lebanon — theme stylesheet
   Written for this theme. No third-party skin is loaded; every hook is pjl-*.
   ========================================================================== */

/* --- tokens --------------------------------------------------------------- */
:root {
	--pjl-ink: #000;
	--pjl-body: #959595;
	--pjl-paper: #fff;
	--pjl-surface: #f8f8f8;
	--pjl-rule: #d8d8d8;
	--pjl-alert: #b42318;

	--pjl-font: "DM Sans", Helvetica, Arial, sans-serif;

	--pjl-grid-width: 1400px;
	--pjl-gutter: clamp(16px, 3.5vw, 50px);
	--pjl-header-h: 80px;
	--pjl-header-home-h: 100px;
	--pjl-ease: cubic-bezier(.22, .61, .36, 1);

	/* Masks, not images: the shape is painted with background-color, so one
	   declaration follows whatever colour the control is in. Used by the
	   show/hide password toggle, which WooCommerce injects at runtime and so
	   cannot be given an inline pj_icon() SVG. */
	--pjl-eye: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.6-7 10-7 10 7 10 7-3.6 7-10 7-10-7-10-7Z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E");
	--pjl-eye-off: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 3l18 18'/%3E%3Cpath d='M10.6 10.6a3 3 0 0 0 4.2 4.2'/%3E%3Cpath d='M9.5 5.2A9.8 9.8 0 0 1 12 5c6.4 0 10 7 10 7a18 18 0 0 1-3.4 4.4M6.7 6.7A17.9 17.9 0 0 0 2 12s3.6 7 10 7a9.7 9.7 0 0 0 3.3-.6'/%3E%3C/svg%3E");
}

/* --- reset ---------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: #fff; }
body {
	margin: 0;
	font-family: var(--pjl-font);
	font-size: 16px;
	line-height: 1.69em;
	font-weight: 400;
	color: var(--pjl-body);
	background: var(--pjl-paper);
	overflow-x: hidden;
	-webkit-font-smoothing: antialiased;
}
img, svg, video, iframe { max-width: 100%; display: block; }
img { height: auto; }
a { color: inherit; text-decoration: none; transition: color .2s var(--pjl-ease), opacity .2s var(--pjl-ease); }
button, input, select, textarea { font: inherit; color: inherit; }
ul, ol { margin: 0; padding: 0; list-style: none; }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }
table { border-collapse: collapse; width: 100%; }
figure { margin: 0; }

h1, h2, h3, h4, h5, h6 {
	margin: 0 0 .4em;
	color: var(--pjl-ink);
	font-family: var(--pjl-font);
	font-weight: 500;
	line-height: 1.2em;
	letter-spacing: -.01em;
}
h1 { font-size: clamp(32px, 4vw, 47px); }
h2 { font-size: clamp(28px, 3.2vw, 40px); }
h3 { font-size: clamp(24px, 2.4vw, 32px); }
h4 { font-size: clamp(20px, 1.8vw, 26px); }
h5 { font-size: 18px; }
h6 { font-size: 16px; }

.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px; margin: -1px; padding: 0;
	overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}
.skip-link:focus {
	position: fixed; top: 0; left: 0; z-index: 999;
	width: auto; height: auto; margin: 0; clip-path: none;
	padding: 12px 20px; background: var(--pjl-ink); color: var(--pjl-paper);
}
:focus-visible { outline: 2px solid var(--pjl-ink); outline-offset: 3px; }

/* --- layout --------------------------------------------------------------- */
#pjl-page-wrapper { position: relative; overflow: hidden; }
#pjl-page-outer { position: relative; }
#pjl-page-inner { position: relative; padding: 0; }
#pjl-page-content { position: relative; display: block; }

.pjl-content-grid {
	width: 100%;
	max-width: var(--pjl-grid-width);
	margin-inline: auto;
	padding-inline: var(--pjl-gutter);
}
.pjl-content-full-width > #pjl-page-content > .pjl-grid-inner { max-width: none; }

.pjl-grid > .pjl-grid-inner,
.pjl-grid-inner { display: block; }
.pjl-layout--columns > .pjl-grid-inner {
	display: grid;
	grid-template-columns: repeat(1, minmax(0, 1fr));
	gap: 30px;
}
.pjl-gutter--normal > .pjl-grid-inner { gap: 30px; }
.pjl-col-num--2 > .pjl-grid-inner { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pjl-col-num--3 > .pjl-grid-inner { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pjl-col-num--4 > .pjl-grid-inner { grid-template-columns: repeat(4, minmax(0, 1fr)); }

@media (max-width: 1440px) { .pjl-col-num--1440--4 > .pjl-grid-inner { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 1366px) { .pjl-col-num--1366--4 > .pjl-grid-inner { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 1024px) {
	.pjl-col-num--1024--1 > .pjl-grid-inner { grid-template-columns: minmax(0, 1fr); }
	.pjl-col-num--1024--2 > .pjl-grid-inner { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 768px) {
	.pjl-col-num--768--1 > .pjl-grid-inner { grid-template-columns: minmax(0, 1fr); }
	.pjl-col-num--768--2 > .pjl-grid-inner { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 680px) { .pjl-col-num--680--1 > .pjl-grid-inner { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 480px) { .pjl-col-num--480--1 > .pjl-grid-inner { grid-template-columns: minmax(0, 1fr); } }

.pjl-page-section { padding-block: clamp(48px, 7vw, 96px); }
.pjl-page-section--tight { padding-block: clamp(32px, 4vw, 56px); }
.pjl--no-bottom-space { padding-bottom: 0; }

/* --- buttons -------------------------------------------------------------- */
.pjl-button {
	display: inline-flex; align-items: center; justify-content: center; gap: 10px;
	padding: 15px 34px;
	border: 1px solid var(--pjl-ink); border-radius: 0;
	background: var(--pjl-ink); color: var(--pjl-paper);
	font-size: 13px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase;
	cursor: pointer;
	transition: background .25s var(--pjl-ease), color .25s var(--pjl-ease);
}
.pjl-button:hover,
.pjl-button:focus-visible { background: var(--pjl-paper); color: var(--pjl-ink); }

/* Textual variant: the rule under the label retracts on hover. */
.pjl-button.pjl-layout--textual {
	padding: 0; border: 0; background: none; color: var(--pjl-ink);
	position: relative; letter-spacing: .08em;
}
.pjl-button.pjl-layout--textual .pjl-m-text {
	position: relative;
	padding-bottom: 4px;
}
.pjl-button.pjl-layout--textual .pjl-m-text::after {
	content: ""; position: absolute; left: 0; right: 0; bottom: 0;
	height: 1px; background: currentColor;
	transform-origin: right;
	transition: transform .35s var(--pjl-ease);
}
.pjl-button.pjl-layout--textual:hover { background: none; color: var(--pjl-ink); }
.pjl-button.pjl-layout--textual:hover .pjl-m-text::after { transform: scaleX(0); }

/* Not scoped to .woocommerce: the collection pages are page templates, so that
   wrapper class is absent and the loop button would fall back to a bare link. */
a.button, button.button, input.button,
.single_add_to_cart_button, .wc-block-components-button, button[type="submit"].pjl-button {
	display: inline-flex; align-items: center; justify-content: center; gap: 10px;
	padding: 15px 34px;
	background: var(--pjl-ink); color: var(--pjl-paper);
	border: 1px solid var(--pjl-ink); border-radius: 0;
	font-size: 13px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase;
	cursor: pointer; text-align: center;
	transition: background .25s var(--pjl-ease), color .25s var(--pjl-ease);
}
a.button:hover, button.button:hover, input.button:hover,
.single_add_to_cart_button:hover { background: var(--pjl-paper); color: var(--pjl-ink); }
.single_add_to_cart_button.disabled, .single_add_to_cart_button[disabled] { opacity: .35; cursor: not-allowed; }

/* --- forms ---------------------------------------------------------------- */
input[type="text"], input[type="email"], input[type="tel"], input[type="password"],
input[type="number"], input[type="search"], input[type="url"], textarea, select {
	width: 100%;
	padding: 13px 16px;
	border: 1px solid var(--pjl-rule); border-radius: 0;
	background: var(--pjl-paper); color: var(--pjl-ink);
	font-size: 15px;
	transition: border-color .2s var(--pjl-ease);
}
input:focus, textarea:focus, select:focus { border-color: var(--pjl-ink); outline: none; }
textarea { min-height: 150px; resize: vertical; }
::placeholder { color: #b5b5b5; }
label { display: block; margin-bottom: 6px; font-size: 13px; color: var(--pjl-ink); }
select {
	appearance: none; padding-right: 38px; cursor: pointer;
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23000' fill='none' stroke-width='1.2'/%3E%3C/svg%3E");
	background-repeat: no-repeat; background-position: right 14px center;
}

/* --- icons ---------------------------------------------------------------- */
.pjl-icon-holder, .pjl-m-icon { display: inline-flex; align-items: center; justify-content: center; }
svg[class*="pjl-svg--"] { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.3px; }
.pjl-svg--spinner, .pjl-svg--menu, .pjl-svg--slider-circle,
.pjl-svg--menu-arrow-full,
.pjl-svg--btt-arrow { fill: currentColor; stroke: none; }
.pjl-svg--slider-circle { fill: none; stroke: currentColor; }

@keyframes pjl-spin { to { transform: rotate(360deg); } }
.pjl-svg--spinner { animation: pjl-spin 1.1s linear infinite; }
[class*="spinner-icon"], [class*="m-spinner"] { display: none; }
.pjl--loading [class*="spinner-icon"], .pjl--loading [class*="m-spinner"] { display: inline-flex; }

/* =============================================================================
   HEADER
   ========================================================================== */
#pjl-page-header { position: relative; z-index: 100; }
#pjl-page-header-inner {
	position: relative;
	height: var(--pjl-header-h);
	background: var(--pjl-paper);
	border-bottom: 1px solid var(--pjl-rule);
	transition: background .3s var(--pjl-ease), border-color .3s var(--pjl-ease);
}
.pjl-header-wrapper {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: 20px;
	height: 100%;
	max-width: var(--pjl-grid-width);
	margin-inline: auto;
	padding-inline: var(--pjl-gutter);
}
.pjl-header-logo { justify-self: start; }
.pjl-header-logo-link { display: inline-flex; align-items: center; height: 100%; }
.pjl-header-logo-image { width: auto; height: 42px; }
.pjl-header-logo-image.pjl--dark, .pjl-header-logo-image.pjl--light { display: none; }

/* Condense once the page moves, so the header takes less room while reading. */
body.pjl-header-sticky--scrolled #pjl-page-header-inner { height: 64px; }
body.pjl-header-sticky--scrolled .pjl-header-logo-image { height: 32px; }
.pjl-header-logo-image { transition: height .3s var(--pjl-ease); }

/* --- navigation ----------------------------------------------------------- */
.pjl-header-navigation { justify-self: center; height: 100%; }
.pjl-header-navigation > ul { display: flex; align-items: center; height: 100%; gap: 0; }
.pjl-header-navigation > ul > li { position: relative; height: 100%; }
.pjl-header-navigation > ul > li > a {
	display: inline-flex; align-items: center; height: 100%;
	padding: 0 18px;
	color: var(--pjl-ink);
	font-size: 13px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase;
}
.pjl-menu-item-text { position: relative; display: inline-block; }
.pjl-custon-underline--hover .pjl-menu-item-text::after,
.pjl-header-navigation > ul > li > a .pjl-menu-item-text::after {
	content: ""; position: absolute; left: 0; right: 0; bottom: -4px;
	height: 1px; background: currentColor;
	transform: scaleX(0); transform-origin: right;
	transition: transform .35s var(--pjl-ease);
}
.pjl-header-navigation > ul > li > a:hover .pjl-menu-item-text::after,
.pjl-header-navigation > ul > .current-menu-item > a .pjl-menu-item-text::after,
.pjl-header-navigation > ul > .current_page_item > a .pjl-menu-item-text::after { transform: scaleX(1); transform-origin: left; }

.pjl-menu-item-arrow { display: inline-flex; margin-left: 6px; }
.pjl-menu-item-arrow svg { width: 6px; height: 8px; transform: rotate(90deg); }

/* dropdowns */
.pjl-header-navigation .sub-menu {
	position: absolute; top: 100%; left: 0; z-index: 5;
	min-width: 220px; padding: 14px 0;
	background: var(--pjl-paper);
	border: 1px solid var(--pjl-rule);
	opacity: 0; visibility: hidden; transform: translateY(8px);
	transition: opacity .25s var(--pjl-ease), transform .25s var(--pjl-ease), visibility .25s;
}
.pjl-header-navigation li:hover > .sub-menu,
.pjl-header-navigation li:focus-within > .sub-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.pjl-header-navigation .sub-menu a {
	display: block; padding: 8px 22px;
	color: var(--pjl-ink); font-size: 14px;
}
.pjl-header-navigation .sub-menu a:hover { opacity: .55; }
.pjl-drop-down--right .sub-menu { left: auto; right: 0; }

/* --- header widgets ------------------------------------------------------- */
.pjl-widget-holder { justify-self: end; display: flex; align-items: center; gap: 2px; }
.pjl-widget-holder .widget { display: inline-flex; align-items: center; margin: 0; }
.pjl-opener-icon, .pjl-side-area-opener, .pjl-mobile-header-opener {
	position: relative;
	display: inline-flex; align-items: center; justify-content: center;
	width: 42px; height: 42px;
	padding: 0;
	color: var(--pjl-ink); cursor: pointer;
	background: none; border: 0;
	transition: opacity .2s var(--pjl-ease);
}
.pjl-opener-icon:hover, .pjl-side-area-opener:hover, .pjl-mobile-header-opener:hover { opacity: .55; }
.pjl-opener-icon svg { width: 19px; height: 19px; }
.pjl-widget-holder .pjl-svg--wishlist { width: 20px; height: 17px; }
.pjl-widget-holder .pjl-svg--cart { width: 20px; height: 17px; }

/* Badge. Only ever a child span — never the control itself, or the icon is
   replaced by a 16px pill. */
.pjl-count, .pjl-m-opener-count {
	position: absolute; top: 3px; right: 0;
	min-width: 16px; height: 16px; padding: 0 4px;
	display: inline-flex; align-items: center; justify-content: center;
	background: var(--pjl-ink); color: var(--pjl-paper);
	border-radius: 9px;
	font-size: 10px; line-height: 1; font-variant-numeric: tabular-nums;
	pointer-events: none;
}
.pjl-count[data-count="0"], .pjl-count:empty { display: none; }

/* dropdown cart */
.pjl-widget-dropdown-cart-outer { position: relative; }
.pjl-widget-dropdown-cart-content {
	position: absolute; top: 100%; right: 0; z-index: 20;
	width: 320px; padding: 22px;
	background: var(--pjl-paper); border: 1px solid var(--pjl-rule);
	opacity: 0; visibility: hidden; transform: translateY(8px);
	transition: opacity .25s var(--pjl-ease), transform .25s var(--pjl-ease), visibility .25s;
}
.pjl-widget-dropdown-cart-outer:hover .pjl-widget-dropdown-cart-content,
.pjl-widget-dropdown-cart-outer:focus-within .pjl-widget-dropdown-cart-content { opacity: 1; visibility: visible; transform: translateY(0); }

/* Mini cart: one column, buttons full width and evenly spaced.
 *
 * NOT a grid on the <li>. Woo's mini-cart.php nests the thumbnail INSIDE the
 * product link — `<li><a class="remove"><a><img>Name</a><span class="quantity">`
 * — so the image is never a grid item of the row. Treating it as one handed
 * column 1 to the whole link, image and name together, which wrapped the name
 * into 54px and stretched the row to ~160px tall.
 *
 * Instead the thumbnail is lifted out of flow against the row and the text is
 * padded clear of it, which holds whatever Woo nests inside that link. */
/* `overscroll-behavior: contain` stops scroll chaining. Without it, reaching the
   top of the item list hands the rest of the wheel gesture to the page, so the
   shopper scrolling up through their cart suddenly launches the whole site
   upward — and the dropdown, still hovered, stays open against the top of the
   viewport until the pointer leaves it. */
.pjl-widget-dropdown-cart-content .cart_list {
	margin-bottom: 14px; max-height: 320px;
	overflow-y: auto; overscroll-behavior: contain;
}
.pjl-widget-dropdown-cart-content .cart_list li {
	position: relative;
	padding: 12px 22px 12px 66px;
	min-height: 92px;
	border-bottom: 1px solid var(--pjl-rule);
	font-size: 13px; line-height: 1.45;
}
.pjl-widget-dropdown-cart-content .cart_list li img {
	position: absolute; left: 0; top: 12px;
	width: 54px; height: 68px; object-fit: cover;
	background: var(--pjl-surface);
}
.pjl-widget-dropdown-cart-content .cart_list li a { color: var(--pjl-ink); }
.pjl-widget-dropdown-cart-content .cart_list li > a:not(.remove) { display: block; }
.pjl-widget-dropdown-cart-content .cart_list li .quantity { display: block; margin-top: 4px; color: var(--pjl-body); }
.pjl-widget-dropdown-cart-content .cart_list li .variation {
	display: block; margin-top: 2px;
	font-size: 12px; color: var(--pjl-body);
}
.pjl-widget-dropdown-cart-content .cart_list li .variation dt,
.pjl-widget-dropdown-cart-content .cart_list li .variation dd { display: inline; margin: 0; }
.pjl-widget-dropdown-cart-content .cart_list li .variation dd + dt::before { content: " · "; }
.pjl-widget-dropdown-cart-content .cart_list li .variation p { display: inline; margin: 0; }
.pjl-widget-dropdown-cart-content .cart_list li .remove_from_cart_button {
	position: absolute; top: 10px; right: 0;
	width: 18px; height: 18px; line-height: 16px; text-align: center;
	color: var(--pjl-body); font-size: 16px;
}
.pjl-widget-dropdown-cart-content .cart_list li .remove_from_cart_button:hover { color: var(--pjl-alert); }
.pjl-widget-dropdown-cart-content .total {
	display: flex; justify-content: space-between; align-items: baseline;
	padding: 12px 0; margin: 0 0 14px;
	border-bottom: 1px solid var(--pjl-rule);
	font-size: 14px; color: var(--pjl-ink);
}
.pjl-widget-dropdown-cart-content .total strong { font-weight: 500; }
.pjl-widget-dropdown-cart-content .buttons { display: grid; gap: 8px; margin: 0; }
.pjl-widget-dropdown-cart-content .buttons .button {
	width: 100%; padding: 12px 16px; font-size: 12px; letter-spacing: .1em;
}
/* Second button reads as the secondary action. */
.pjl-widget-dropdown-cart-content .buttons .button.checkout { background: var(--pjl-paper); color: var(--pjl-ink); }
.pjl-widget-dropdown-cart-content .buttons .button.checkout:hover { background: var(--pjl-ink); color: var(--pjl-paper); }
.pjl-widget-dropdown-cart-content .pjl-m-posts-not-found { margin: 0; font-size: 13px; text-align: center; }

/* --- sticky header -------------------------------------------------------- */
/* Slides down only when the reader scrolls back up (see stickyHeader in main.js). */
.pjl-header-sticky {
	position: fixed; top: 0; left: 0; right: 0; z-index: 110;
	background: var(--pjl-paper);
	border-bottom: 1px solid var(--pjl-rule);
	transform: translateY(-100%);
	visibility: hidden;
	transition: transform .38s var(--pjl-ease), visibility .38s;
	box-shadow: 0 1px 14px rgba(0, 0, 0, .06);
}
body.pjl-header--sticky-display .pjl-header-sticky { transform: translateY(0); visibility: visible; }
body.admin-bar .pjl-header-sticky { top: 32px; }
.pjl-header-sticky-inner {
	display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 20px;
	height: 64px;
	max-width: var(--pjl-grid-width); margin-inline: auto; padding-inline: var(--pjl-gutter);
}
.pjl-header-sticky .pjl-header-logo-image { height: 32px; }
.pjl-header-sticky .pjl-header-navigation { justify-self: center; }
.pjl-header-sticky .pjl-widget-holder { justify-self: end; }

/* --- mobile header -------------------------------------------------------- */
#pjl-page-mobile-header { display: none; position: relative; z-index: 100; }
#pjl-page-mobile-header-inner {
	display: flex; align-items: center; justify-content: space-between; gap: 12px;
	height: 64px;
	padding-inline: var(--pjl-gutter);
	background: var(--pjl-paper);
	border-bottom: 1px solid var(--pjl-rule);
}
.pjl-mobile-header-logo-link { display: inline-flex; align-items: center; }
.pjl-mobile-header-logo-link img { height: 34px; width: auto; }
.pjl-mobile-header-navigation { display: none; }

@media (max-width: 1024px) {
	#pjl-page-header { display: none; }
	#pjl-page-mobile-header { display: block; }
	body.pjl-content-behind-header #pjl-page-outer { margin-top: 0; }
}

/* --- side area (mobile menu) --------------------------------------------- */
#pjl-side-area {
	position: fixed; top: 0; right: 0; bottom: 0; z-index: 130;
	width: min(420px, 88vw);
	padding: 28px;
	background: var(--pjl-paper);
	overflow-y: auto;
	transform: translateX(100%);
	transition: transform .4s var(--pjl-ease);
	visibility: hidden;
}
body.pjl-side-area--opened #pjl-side-area,
#pjl-side-area.pjl--opened { transform: translateX(0); visibility: visible; }
.pjl-side-area-cover {
	position: fixed; inset: 0; z-index: 120;
	background: rgba(0, 0, 0, .5);
	opacity: 0; visibility: hidden;
	transition: opacity .3s var(--pjl-ease), visibility .3s;
}
body.pjl-side-area--opened .pjl-side-area-cover,
.pjl-side-area-cover.pjl--opened { opacity: 1; visibility: visible; }
#pjl-side-area-close { position: absolute; top: 18px; right: 18px; }
#pjl-side-area .menu-item > a,
#pjl-side-area nav a {
	display: block; padding: 14px 0;
	border-bottom: 1px solid var(--pjl-rule);
	color: var(--pjl-ink); font-size: 18px; letter-spacing: .04em; text-transform: uppercase;
}
#pjl-side-area .sub-menu { padding-left: 16px; }
#pjl-side-area .sub-menu a { font-size: 15px; text-transform: none; }

/* --- fullscreen search ---------------------------------------------------- */
/* The opener toggles body.pjl-fullscreen-search--opened (see main.js), so the
   visibility rules must hang off that, not off a class on the panel itself. */
#pjl-fullscreen-search {
	position: fixed; inset: 0; z-index: 140;
	display: flex; align-items: center; justify-content: center;
	opacity: 0; visibility: hidden;
	transition: opacity .35s var(--pjl-ease), visibility .35s;
}
body.pjl-fullscreen-search--opened #pjl-fullscreen-search { opacity: 1; visibility: visible; }
body.pjl-fullscreen-search--fadeout #pjl-fullscreen-search { opacity: 0; }
.pjl-fullscreen-overlay { position: absolute; inset: 0; z-index: 0; background: rgba(255, 255, 255, .97); }
#pjl-fullscreen-search .pjl-m-inner { position: relative; z-index: 1; width: min(760px, 88vw); }
#pjl-fullscreen-search .pjl-m-form-title { margin-bottom: 18px; color: var(--pjl-ink); }
#pjl-fullscreen-search .pjl-m-form-fields { display: flex; gap: 10px; align-items: center; }
#pjl-fullscreen-search input[type="search"], #pjl-fullscreen-search input[type="text"] {
	border: 0; border-bottom: 1px solid var(--pjl-ink); border-radius: 0;
	font-size: clamp(22px, 3vw, 34px); padding: 10px 0;
}
#pjl-fullscreen-search .pjl-m-close { position: absolute; top: 28px; right: 28px; z-index: 2; }
#pjl-fullscreen-search .pjl-m-form-submit { flex: none; width: 48px; height: 48px; border: 0; background: none; }

/* =============================================================================
   HERO SLIDER
   ========================================================================== */
.pjl-hero-slider { position: relative; overflow: hidden; background: #000; --pjl-hero-offset: var(--pjl-header-h); }

/* The hero is sized to what is left of the viewport under the header rather
   than to the source images' 16:9 — at 16:9 a wide monitor made it taller than
   the screen, so the frame was never seen whole. `svh` rather than `vh` because
   on mobile `vh` measures the viewport with the browser chrome retracted, which
   overflows by exactly the height of that chrome. `--pjl-hero-offset` is
   whichever header the hero actually sits under; the two swap at 1024px. */
.pjl-hero-slider__track {
	position: relative;
	height: calc(100vh - var(--pjl-hero-offset));
	height: calc(100svh - var(--pjl-hero-offset));
	min-height: 420px;
}
body.admin-bar .pjl-hero-slider { --pjl-hero-offset: calc(var(--pjl-header-h) + 32px); }
@media (max-width: 1024px) {
	.pjl-hero-slider { --pjl-hero-offset: 64px; }
	body.admin-bar .pjl-hero-slider { --pjl-hero-offset: 110px; }
}
.pjl-hero-slider__slide {
	position: absolute; inset: 0;
	opacity: 0; transition: opacity .9s var(--pjl-ease);
	pointer-events: none;
}
.pjl-hero-slider__slide.is-active { opacity: 1; pointer-events: auto; }
.pjl-hero-slider__image { width: 100%; height: 100%; object-fit: cover; }

.pjl-hero-slider__arrow {
	position: absolute; top: 50%; z-index: 3;
	transform: translateY(-50%);
	width: 52px; height: 52px;
	display: inline-flex; align-items: center; justify-content: center;
	background: rgba(255, 255, 255, .9); color: var(--pjl-ink);
	border: 0; cursor: pointer;
	opacity: 0; transition: opacity .3s var(--pjl-ease), background .2s var(--pjl-ease);
}
.pjl-hero-slider:hover .pjl-hero-slider__arrow,
.pjl-hero-slider__arrow:focus-visible { opacity: 1; }
.pjl-hero-slider__arrow:hover { background: var(--pjl-paper); }
.pjl-hero-slider__arrow--prev { left: 20px; }
.pjl-hero-slider__arrow--next { right: 20px; }
.pjl-hero-slider__arrow svg { width: 8px; height: 12px; fill: currentColor; stroke: none; }

.pjl-hero-slider__bullets {
	position: absolute; left: 50%; bottom: 26px; z-index: 3;
	transform: translateX(-50%);
	display: flex; gap: 8px; align-items: center;
}
.pjl-hero-slider__bullet {
	width: 8px; height: 8px; padding: 0;
	border: 1px solid rgba(255, 255, 255, .85); border-radius: 50%;
	background: transparent; cursor: pointer;
	transition: background .25s var(--pjl-ease), transform .25s var(--pjl-ease);
}
.pjl-hero-slider__bullet.is-selected { background: var(--pjl-paper); transform: scale(1.25); }
@media (max-width: 680px) { .pjl-hero-slider__arrow { display: none; } }

/* =============================================================================
   SECTION TITLES, IMAGES, HOME SECTIONS
   ========================================================================== */
.pjl-section-title .pjl-m-tagline {
	display: block; margin-bottom: 12px;
	color: var(--pjl-body);
	font-size: 12px; letter-spacing: .22em; text-transform: uppercase;
}
.pjl-section-title .pjl-m-title { margin: 0; color: var(--pjl-ink); }
.pjl-alignment--center { text-align: center; }
.pjl-alignment--center .pjl-m-title { margin-inline: auto; }
.pjl-alignment--left { text-align: left; }

.pjl-single-image img { width: 100%; }
.pjl-single-image.pjl-layout--default { overflow: hidden; }

.pjl-m-parallax-zoom-holder { overflow: hidden; }
.pjl-parallax-zoom-item { will-change: transform; }

.pjl-collection-section { padding-block: clamp(40px, 6vw, 84px); }
.pjl-collection-section .pjl-section-title { margin-bottom: 34px; }
.pjl-collection-section__more { margin: 34px 0 0; text-align: center; }
.pjl-copy { max-width: 46ch; }

/* Category feature: the tall image and its caption share a column, the
   supporting shot fills the one beside it. Flipped for the second block. */
.pjl-home-feature__inner {
	display: grid;
	gap: clamp(20px, 3vw, 40px);
	grid-template-columns: 1fr;
	grid-template-areas: "media" "body" "aside";
	align-items: start;
}
@media (min-width: 900px) {
	.pjl-home-feature__inner {
		grid-template-columns: 1fr 1fr;
		grid-template-areas: "media aside" "body aside";
		align-items: center;
	}
	.pjl-home-feature--flip .pjl-home-feature__inner { grid-template-areas: "aside media" "aside body"; }
}
.pjl-home-feature__media { grid-area: media; }
.pjl-home-feature__body  { grid-area: body; }
.pjl-home-feature__aside { grid-area: aside; align-self: stretch; }
.pjl-home-feature__media img,
.pjl-home-feature__aside img {
	width: 100%; height: 100%; object-fit: cover;
	background: var(--pjl-surface);
}
.pjl-home-feature__media img { aspect-ratio: 16 / 9; }
.pjl-home-feature__aside img { aspect-ratio: 3 / 4; }
@media (min-width: 900px) { .pjl-home-feature__aside img { aspect-ratio: auto; min-height: 100%; } }

/* Caption sits centred beneath its image. */
.pjl-home-feature__body { text-align: center; }
.pjl-home-feature__body .pjl-section-title { margin-bottom: 22px; text-align: center; }
.pjl-home-feature__body .pjl-m-title { font-size: clamp(34px, 4.4vw, 62px); text-transform: uppercase; }

/* reveal-on-scroll, gated so a JS failure never hides content */
.pjl-js .pjl--has-appear { opacity: 0; transform: translateY(20px); transition: opacity .8s var(--pjl-ease), transform .8s var(--pjl-ease); }
.pjl-js .pjl--has-appear.pjl--appeared { opacity: 1; transform: none; }

/* =============================================================================
   PRODUCT CARD — image-only, actions rise over the image on hover
   ========================================================================== */
.pjl-woo-product-list .pjl-e-inner { position: relative; }

.pjl-woo-product-image { position: relative; overflow: hidden; background: var(--pjl-surface); }
.pjl-woo-product-image-wrapper { position: relative; display: block; }
.pjl-woo-product-image-wrapper img {
	width: 100%; aspect-ratio: 4 / 5; object-fit: cover;
	transition: transform .8s var(--pjl-ease);
}
.pjl-woo-product-list .pjl-e-inner:hover .pjl-woo-product-image-wrapper img { transform: scale(1.04); }

.pjl-woo-product-mark {
	position: absolute; top: 14px; left: 14px; z-index: 3;
	padding: 5px 10px;
	background: var(--pjl-ink); color: var(--pjl-paper);
	font-size: 10px; letter-spacing: .14em; text-transform: uppercase; line-height: 1;
}
.pjl-woo-product-mark.pjl-woo-onsale { background: var(--pjl-ink); }

/* the hover panel */
.pjl-woo-product-image-inner {
	position: absolute; left: 50%; bottom: 30px; z-index: 4;
	display: flex; align-items: center; justify-content: center;
	background: var(--pjl-paper);
	box-shadow: 0 0 15px 1px rgba(0, 0, 0, .07);
	opacity: 0;
	transform: translate(-50%, 10px);
	transition: opacity .25s ease-out, transform .5s var(--pjl-ease);
}
.pjl-woo-product-list .pjl-e-inner:hover .pjl-woo-product-image-inner,
.pjl-woo-product-list .pjl-e-inner:focus-within .pjl-woo-product-image-inner {
	opacity: 1; transform: translate(-50%, 0);
}
/* Every cell is 50x50. The wishlist control is an <a> inside a wrapper <div>,
   so the cell is sized on whichever of the two is the panel's direct child and
   the anchor then fills it — sizing only the div left the anchor shrink-wrapped
   around its icon, so its hover background covered the glyph and nothing else. */
.pjl-woo-product-image-inner > a,
.pjl-woo-product-image-inner > div {
	position: relative;
	display: inline-flex; align-items: center; justify-content: center;
	width: 50px; height: 50px;
	color: var(--pjl-ink); cursor: pointer;
}
.pjl-woo-product-image-inner > div > a {
	display: inline-flex; align-items: center; justify-content: center;
	width: 100%; height: 100%; color: inherit;
}
.pjl-woo-product-image-inner > a + a,
.pjl-woo-product-image-inner > a + div,
.pjl-woo-product-image-inner > div + div,
.pjl-woo-product-image-inner > div + a { border-left: 1px solid var(--pjl-rule); }
.pjl-woo-product-image-inner > a:hover,
.pjl-woo-product-image-inner > div:hover { background: var(--pjl-ink); color: var(--pjl-paper); }
.pjl-woo-product-image-inner svg { width: 17px; height: 17px; }
.pjl--hide { display: none; }

/* action tooltips */
.pjl-e-content-tooltip {
	position: absolute; bottom: calc(100% + 8px); left: 50%;
	transform: translateX(-50%) translateY(4px);
	padding: 5px 10px;
	background: var(--pjl-ink); color: var(--pjl-paper);
	font-size: 10px; letter-spacing: .1em; text-transform: uppercase; white-space: nowrap;
	opacity: 0; pointer-events: none;
	transition: opacity .2s var(--pjl-ease), transform .2s var(--pjl-ease);
}
.pjl-woo-product-image-inner > a:hover .pjl-e-content-tooltip,
.pjl-woo-product-image-inner > div:hover .pjl-e-content-tooltip { opacity: 1; transform: translateX(-50%) translateY(0); }
/* One label shows at a time and which one depends on the saved state. */
.pjl-tooltip--on, .pjl-wish--added .pjl-tooltip--off { display: none; }
.pjl-wish--added .pjl-tooltip--on { display: inline; }

/* Saved state. The heart fills rather than swapping to a second icon: the card
   only ever prints one, so the old swap rules hid it and left an empty cell. */
.pjl-wish--added .pjl-svg--wishlist { fill: currentColor; }

/* Quick-add: the size run, over the bottom of the card image. Sizes are the one
   thing still missing before a variable product can be added, so asking here
   saves the trip to the product page. */
.pjl-quickadd {
	position: absolute; left: 0; right: 0; bottom: 0; z-index: 6;
	padding: 14px 16px 16px;
	background: var(--pjl-paper);
	box-shadow: 0 -4px 18px rgba(0, 0, 0, .08);
	transform: translateY(100%);
	visibility: hidden;
	transition: transform .3s var(--pjl-ease), visibility .3s;
}
.pjl-e-inner.pjl-quickadd--open .pjl-quickadd { transform: translateY(0); visibility: visible; }
.pjl-e-inner.pjl-quickadd--open .pjl-woo-product-image-inner { opacity: 0; pointer-events: none; }
.pjl-quickadd-title {
	margin: 0 0 10px;
	font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--pjl-body);
}
.pjl-quickadd-sizes { display: flex; flex-wrap: wrap; gap: 6px; }
.pjl-quickadd-size {
	min-width: 38px; padding: 8px 6px;
	border: 1px solid var(--pjl-rule); background: none;
	color: var(--pjl-ink); font-size: 12px; line-height: 1; cursor: pointer;
	transition: background .18s var(--pjl-ease), color .18s var(--pjl-ease), border-color .18s var(--pjl-ease);
}
.pjl-quickadd-size:hover:not(:disabled) { background: var(--pjl-ink); border-color: var(--pjl-ink); color: var(--pjl-paper); }
.pjl-quickadd-size:disabled, .pjl-quickadd-size.is-unavailable {
	color: var(--pjl-rule); cursor: not-allowed;
	text-decoration: line-through;
}
.pjl-quickadd-size.is-adding { background: var(--pjl-ink); border-color: var(--pjl-ink); color: var(--pjl-paper); opacity: .6; }

/* card text */
.pjl-woo-product-content { padding-top: 16px; text-align: left; }
.pjl-woo-product-categories, .pjl-e-info {
	display: block; margin-bottom: 6px;
	color: var(--pjl-body);
	font-size: 11px; letter-spacing: .16em; text-transform: uppercase;
}
.pjl-woo-product-title { margin: 0 0 6px; font-size: 16px; font-weight: 500; line-height: 1.35; }
.pjl-woo-product-title a { color: var(--pjl-ink); }
.pjl-woo-product-title a:hover { opacity: .6; }
.pjl-woo-product-price, .pjl-woo-price, .price {
	color: var(--pjl-ink); font-size: 15px; font-variant-numeric: tabular-nums;
}
.pjl-woo-product-price del, .price del { color: var(--pjl-body); margin-right: 8px; text-decoration-thickness: 1px; }
.pjl-woo-product-price ins, .price ins { text-decoration: none; }

/* Primary action on the card. */
.pjl-woo-product-cart { margin-top: 14px; }
.pjl-woo-product-cart .button,
.pjl-woo-product-cart a.button {
	display: flex; width: 100%;
	padding: 12px 18px;
	font-size: 12px; letter-spacing: .1em;
}
.pjl-woo-product-cart .added_to_cart { display: none; }

.pjl-woo-color-variations-holder { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.pjl-woo-color-variation {
	display: inline-block; width: 14px; height: 14px; border-radius: 50%;
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .18);
}

/* touch: no hover, so keep the panel visible */
@media (hover: none) {
	.pjl-woo-product-image-inner { opacity: 1; transform: translate(-50%, 0); }
	.pjl-woo-product-list .pjl-e-inner:hover .pjl-woo-product-image-wrapper img { transform: none; }
}

/* =============================================================================
   PRODUCT LIST / ARCHIVE
   ========================================================================== */
.pjl-woo-product-list .pjl-grid-inner { display: grid; gap: 30px; }
.pjl-woo-shortcode { display: block; }

/* --- product carousel ------------------------------------------------------
   The home collections scroll rather than wrap. It is a native scroll port with
   snap points, not a transform track: swipe, trackpad, shift-wheel and keyboard
   all work for free, and there are no cloned cards — a duplicate would carry a
   second copy of the quick-add panel and the wishlist state, and the two would
   drift apart the moment either was used.

   The rules sit *after* `.pjl-woo-product-list .pjl-grid-inner` on purpose:
   that selector is (0,2,0) and sets `gap: 30px`, so an earlier or lighter rule
   here would lose and the column maths below would be computed against a gap
   the track does not have. */
.pjl-carousel { position: relative; --pjl-carousel-gap: 30px; --pjl-carousel-per: 3; }
.pjl-carousel .pjl-carousel__track {
	display: grid;
	grid-auto-flow: column;
	/* One "page" is exactly --pjl-carousel-per cards plus the gaps between them,
	   so a fractional value leaves the next card half-shown, which is what says
	   the row scrolls at all. */
	grid-auto-columns: calc(
		(100% - (var(--pjl-carousel-per) - 1) * var(--pjl-carousel-gap)) / var(--pjl-carousel-per)
	);
	gap: var(--pjl-carousel-gap);
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	-ms-overflow-style: none;
}
.pjl-carousel .pjl-carousel__track::-webkit-scrollbar { width: 0; height: 0; }
.pjl-carousel .pjl-carousel__track > * { scroll-snap-align: start; min-width: 0; }
.pjl-carousel .pjl-carousel__track:focus-visible { outline: 1px solid var(--pjl-ink); outline-offset: 4px; }

/* Heading centred, arrows to its right: a 1fr/auto/1fr grid keeps the title on
   the page centre whatever the arrows measure. */
.pjl-collection-section__head {
	display: grid; grid-template-columns: 1fr auto 1fr;
	align-items: center; gap: 16px;
	margin-bottom: 34px;
}
.pjl-collection-section__head .pjl-section-title { grid-column: 2; margin-bottom: 0; }
/* The arrows only nudge the scroll port, so they are worthless without JS —
   hidden until `.pjl-js` says the module is there. The row itself still
   scrolls, and "View all" below it still reaches the rest of the category. */
.pjl-carousel-nav { grid-column: 3; justify-self: end; display: none; gap: 8px; }
.pjl-js .pjl-carousel-nav { display: flex; }

.pjl-carousel-arrow {
	display: inline-flex; align-items: center; justify-content: center;
	width: 38px; height: 38px; padding: 0;
	background: none; border: 1px solid var(--pjl-rule); border-radius: 0;
	color: var(--pjl-ink); cursor: pointer;
	transition: border-color .2s var(--pjl-ease), background .2s var(--pjl-ease),
		color .2s var(--pjl-ease), opacity .2s var(--pjl-ease);
}
.pjl-carousel-arrow:hover:not(:disabled) { background: var(--pjl-ink); border-color: var(--pjl-ink); color: var(--pjl-paper); }
.pjl-carousel-arrow:disabled { opacity: .28; cursor: default; }
.pjl-carousel-arrow svg { width: 6px; height: 9px; }
/* Fewer cards than fit: nothing to page through. */
.pjl-js .pjl-carousel--static .pjl-carousel-nav { display: none; }

@media (max-width: 1024px) { .pjl-carousel { --pjl-carousel-per: 2.4; } }
@media (max-width: 680px) {
	.pjl-carousel { --pjl-carousel-per: 1.35; --pjl-carousel-gap: 16px; }
	.pjl-collection-section__head { grid-template-columns: minmax(0, 1fr); }
	.pjl-collection-section__head .pjl-section-title { grid-column: 1; }
	.pjl-js .pjl-carousel-nav { display: none; }
}

.pjl-product-list-filter-holder { margin-bottom: 34px; }
.pjl-filter-top-bar {
	display: flex; align-items: center; justify-content: space-between; gap: 16px;
	flex-wrap: wrap;
	padding-block: 14px;
	border-top: 1px solid var(--pjl-rule);
	border-bottom: 1px solid var(--pjl-rule);
}
/* Sidebar filter: a bordered rail beside the grid, collapsing above it on
   narrow screens. */
/* Sidebar layout. The filter panel, the top bar, the product list and the
   pagination are all siblings inside .pjl-woo-product-list, so the rail is made
   by placing them rather than by re-nesting the markup. Scoped to
   `.pjl-filter--on` so the related-products list on a product page — same
   wrapper class, no filters — is untouched. */
@media (min-width: 1024px) {
	.pjl-woo-product-list.pjl-filter--on {
		display: grid;
		grid-template-columns: 250px minmax(0, 1fr);
		column-gap: 44px;
		align-items: start;
	}
	/* Explicit rows for the right-hand column. Left to auto-placement, the rail's
	   `grid-row: 1 / -1` span and the auto rows size against each other and the
	   grid gets pushed down the page — which is the band of empty space above
	   the first row of cards. */
	.pjl-filter--on .pjl-filter-content {
		grid-column: 1; grid-row: 1 / span 3;
		align-self: start; position: sticky; top: 24px;
		margin-bottom: 0;
	}
	.pjl-filter--on > .pjl-filter-top-bar { grid-column: 2; grid-row: 1; }
	.pjl-filter--on > .pjl-grid-inner { grid-column: 2; grid-row: 2; align-self: start; }
	.pjl-filter--on > .pjl-m-pagination,
	.pjl-filter--on > .pjl-m-pagination-spinner { grid-column: 2; grid-row: 3; }
	/* One column inside the rail. */
	.pjl-filter--on .pjl-filter-items { grid-template-columns: minmax(0, 1fr); gap: 24px; }
	.pjl-filter--on .pjl-product-list-filter-vertical { border: 0; padding: 0; }
	.pjl-filter--on .pjl-filter-header { margin-bottom: 18px; }
	/* The panel is always open in the rail, so its close control is noise. */
	.pjl-filter--on .pjl-filter-header svg { display: none; }
}
.pjl-filter-content { margin-bottom: 30px; }
.pjl-product-list-filter-vertical {
	border: 1px solid var(--pjl-rule);
	padding: 22px;
}
.pjl-filter-header {
	display: flex; align-items: center; justify-content: space-between; gap: 12px;
	margin: 0 0 20px; padding-bottom: 14px;
	border-bottom: 1px solid var(--pjl-rule);
	color: var(--pjl-ink);
	font-size: 12px; letter-spacing: .16em; text-transform: uppercase;
}
.pjl-filter-header svg { width: 12px; height: 12px; cursor: pointer; }
.pjl-filter-items { display: grid; gap: 26px; }
@media (min-width: 900px) {
	.pjl-filter-items { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 26px 34px; }
}
.pjl-filter-items .pjl-grid-item { min-width: 0; }
.pjl-e-options-wrapper { display: grid; }
.pjl-filter-items-wrapper .pjl-e-title,
.pjl-filter-category h5, .pjl-filter-attribute h5, .pjl-e-price-filter h5 {
	margin-bottom: 12px;
	color: var(--pjl-ink);
	font-size: 12px; letter-spacing: .16em; text-transform: uppercase;
}
.pjl-filter-category, .pjl-filter-attribute, .pjl-filter-brands, .pjl-e-price-filter { margin-bottom: 30px; }
/* Filter row. The markup puts the checkbox after its label, so the box is
   drawn on the label's ::before and the real input is kept for a11y only. */
.pjl-e-checkbox { position: relative; }
.pjl-e-checkbox label {
	display: flex; align-items: center; gap: 10px;
	margin: 0; padding: 7px 0; cursor: pointer;
	color: var(--pjl-body); font-size: 14px; text-transform: none; letter-spacing: 0;
	transition: color .18s var(--pjl-ease);
}
.pjl-e-checkbox label::before {
	content: ""; flex: none;
	width: 16px; height: 16px;
	border: 1px solid var(--pjl-rule); background: var(--pjl-paper);
	transition: border-color .18s var(--pjl-ease), background .18s var(--pjl-ease);
}
.pjl-e-checkbox:hover label { color: var(--pjl-ink); }
.pjl-e-checkbox:hover label::before { border-color: var(--pjl-ink); }
.pjl-e-checkbox input {
	position: absolute; inset: 0;
	width: 100%; height: 100%; margin: 0; padding: 0;
	opacity: 0; cursor: pointer;
}
/* `:has()`, not `input:checked + label` — the markup puts the <label> BEFORE the
   <input>, so the sibling combinator never matched and a ticked filter showed no
   tick at all. */
.pjl-e-checkbox:has(input:checked) label,
.pjl-e-checkbox.pjl--active label { color: var(--pjl-ink); }
.pjl-e-checkbox:has(input:focus-visible) label::before { outline: 2px solid var(--pjl-ink); outline-offset: 2px; }
.pjl-e-checkbox.pjl--active label::before,
.pjl-e-checkbox:has(input:checked) label::before {
	background: var(--pjl-ink); border-color: var(--pjl-ink);
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='8'%3E%3Cpath d='M1 4l3 3 5-6' stroke='%23fff' fill='none' stroke-width='1.6'/%3E%3C/svg%3E");
	background-repeat: no-repeat; background-position: center;
}
.pjl-e-label { flex: 1; }

/* --- filtering: skeleton placeholders ------------------------------------- */
/* The grid is swapped for same-shaped grey cards while the next page is
   fetched, so the layout never collapses and reflows under the pointer. */
@keyframes pjl-shimmer { to { background-position: -200% 0; } }
.pjl-skel { pointer-events: none; }
.pjl-skel__img, .pjl-skel__line {
	background: linear-gradient(90deg, var(--pjl-surface) 25%, #efefef 37%, var(--pjl-surface) 63%);
	background-size: 200% 100%;
	animation: pjl-shimmer 1.4s linear infinite;
}
.pjl-skel__img { aspect-ratio: 4 / 5; width: 100%; }
.pjl-skel__body { padding-top: 16px; }
.pjl-skel__line { height: 11px; margin-bottom: 9px; border-radius: 2px; }
.pjl-skel__line--sm { width: 35%; }
.pjl-skel__line--md { width: 65%; }
.pjl-skel__line--lg { width: 100%; height: 40px; margin-top: 14px; }

/* Filters stay readable but uninteractable while a fetch is in flight. */
.pjl--filter-loading .pjl-filter-content { opacity: .55; pointer-events: none; }
.pjl--filter-loading .pjl-filter-top-bar { opacity: .55; pointer-events: none; }
@media (prefers-reduced-motion: reduce) {
	.pjl-skel__img, .pjl-skel__line { animation: none; }
}
.pjl-e-number { color: var(--pjl-body); font-size: 12px; font-variant-numeric: tabular-nums; }
/* Every option is shown — the groups are short and a "view more" on four items
   was more chrome than it saved. */
.pjl-e-options-wrapper { max-height: none; overflow: visible; }
.pjl-active-filters { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pjl-product-list-ordering { margin: 0; }
.pjl-orderby { width: auto; min-width: 200px; padding-block: 9px; font-size: 13px; }

/* Range slider. priceSlider() in main.js builds `.ui-slider-range` and two
   `.ui-slider-handle` spans inside the track; without these rules the track had
   no height and the handles no shape, so the control read as two plain number
   boxes with a min/max caption. */
.pjl-price-slider {
	position: relative;
	height: 3px; margin: 22px 8px 0;
	background: var(--pjl-rule);
}
.pjl-price-slider .pjl--min, .pjl-price-slider .pjl--max {
	position: absolute; top: 14px;
	font-size: 12px; color: var(--pjl-body); font-variant-numeric: tabular-nums;
}
.pjl-price-slider .pjl--min { left: -8px; }
.pjl-price-slider .pjl--max { right: -8px; }
.pjl-price-slider .ui-slider-range {
	position: absolute; top: 0; height: 100%;
	background: var(--pjl-ink);
}
.pjl-price-slider .ui-slider-handle {
	position: absolute; top: 50%;
	width: 16px; height: 16px; margin: -8px 0 0 -8px;
	border: 1px solid var(--pjl-ink); border-radius: 50%;
	background: var(--pjl-paper);
	cursor: grab; touch-action: none;
}
.pjl-price-slider .ui-slider-handle:active { cursor: grabbing; }
.pjl-price-slider .ui-slider-handle:focus-visible { outline: 2px solid var(--pjl-ink); outline-offset: 2px; }
.pjl-price-slider-amount { display: flex; gap: 8px; margin-top: 34px; }
.pjl-price-slider-amount input { padding: 8px 10px; font-size: 13px; text-align: center; }

/* Empty results. The grid track would otherwise squeeze this into one column
   of three, so the row spans the whole listing. */
.pjl-grid-inner--empty { display: block !important; }
.pjl-no-results {
	padding: clamp(40px, 7vw, 80px) 24px;
	border: 1px solid var(--pjl-rule);
	text-align: center;
}
.pjl-no-results__icon {
	display: inline-flex; align-items: center; justify-content: center;
	width: 56px; height: 56px; margin-bottom: 20px;
	border: 1px solid var(--pjl-rule); border-radius: 50%;
	color: var(--pjl-body);
}
.pjl-no-results__icon svg { width: 22px; height: 22px; }
.pjl-no-results__title { margin: 0 0 10px; font-size: clamp(18px, 2vw, 24px); }
.pjl-no-results__text { margin: 0 auto; max-width: 42ch; }
.pjl-no-results__clear { margin-top: 24px; }

/* pagination */
.pjl-m-pagination { padding-block: 44px 8px; }
.pjl-m-pagination-items { display: flex; justify-content: center; align-items: center; gap: 8px; flex-wrap: wrap; }
/* The items are <a>s themselves, not wrappers — the old rule styled a child that
   does not exist, so the numbers rendered as bare links. */
.pjl-m-pagination-item {
	min-width: 42px; height: 42px;
	display: inline-flex; align-items: center; justify-content: center;
	padding: 0 6px;
	border: 1px solid transparent;
	color: var(--pjl-ink); font-size: 14px; font-variant-numeric: tabular-nums;
	transition: border-color .2s var(--pjl-ease), background .2s var(--pjl-ease), color .2s var(--pjl-ease);
}
.pjl-m-pagination-item:hover { border-color: var(--pjl-ink); }
/* The page you are on is shown but inert. */
.pjl-m-pagination-item.pjl--active {
	background: var(--pjl-ink); border-color: var(--pjl-ink); color: var(--pjl-paper);
	cursor: default; pointer-events: none;
}
.pjl-m-pagination-item.pjl--prev, .pjl-m-pagination-item.pjl--next { border-color: var(--pjl-rule); }
/* Thin, small, and stroked — matched to the rest of the icon set. */
.pjl-m-pagination-item.pjl--prev svg, .pjl-m-pagination-item.pjl--next svg {
	width: 8px; height: 13px;
	fill: none; stroke: currentColor; stroke-width: 1.2px;
	stroke-linecap: round; stroke-linejoin: round;
}
.pjl-m-pagination-item.pjl--hide { display: none; }
.pjl-m-pagination-spinner { display: none; }

/* WordPress's own pagination (search results) emits `.page-numbers` rather than
   `.pjl-m-pagination-item`; same component, so same look. */
.pjl-m-pagination .page-numbers {
	min-width: 42px; height: 42px;
	display: inline-flex; align-items: center; justify-content: center;
	padding: 0 6px;
	border: 1px solid transparent;
	color: var(--pjl-ink); font-size: 14px; font-variant-numeric: tabular-nums;
	transition: border-color .2s var(--pjl-ease), background .2s var(--pjl-ease), color .2s var(--pjl-ease);
}
.pjl-m-pagination a.page-numbers:hover { border-color: var(--pjl-ink); }
.pjl-m-pagination .page-numbers.current {
	background: var(--pjl-ink); border-color: var(--pjl-ink); color: var(--pjl-paper);
}
.pjl-m-pagination .nav-links { display: flex; justify-content: center; align-items: center; gap: 8px; flex-wrap: wrap; }
.pjl-m-pagination .screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.pjl-m-pagination-item a:hover { border-color: var(--pjl-ink); }
.pjl-m-pagination-item.pjl--active a, .pjl-m-pagination-item .current {
	background: var(--pjl-ink); color: var(--pjl-paper); border-color: var(--pjl-ink);
}
.pjl-m-pagination-item svg { width: 6px; height: 9px; }

.pjl-m-posts-not-found { padding-block: 60px; text-align: center; }

/* =============================================================================
   SINGLE PRODUCT
   ========================================================================== */
#pjl-woo-page { padding-block: clamp(32px, 5vw, 72px); }
.pjl-woo-single-inner { display: grid; gap: clamp(24px, 4vw, 64px); }
@media (min-width: 1000px) {
	.pjl-woo-single-inner { grid-template-columns: minmax(0, 1.1fr) minmax(340px, .9fr); align-items: start; }
	.pjl-woo-single-inner .summary { position: sticky; top: 24px; }
}
/* Gallery.
 *
 * The featured image is a direct child of __wrapper and every other frame lives
 * in .pjl-woo-thumbnails-wrapper, so a two-column grid puts the rail on the left
 * and the hero on the right by grid placement — no markup reordering. Both sit
 * in row 1, which is what makes the rail exactly as tall as the hero.
 *
 * The hero's height is capped against the viewport rather than left to the 4:5
 * ratio: at this column width the ratio alone runs past the fold. `cover` fills
 * the frame edge to edge — `contain` left grey rails down both sides.
 */
.pjl-woo-single-image { position: relative; --pjl-thumb-rail: 88px; }
/* The Sale / Out of stock badge is a sibling of the gallery, so it anchors to
   .pjl-woo-single-image — which now starts at the thumbnail rail. Push it past
   the rail (width + the grid gap) so it lands on the hero, where it belongs. */
.pjl-woo-single-image > .pjl-woo-product-mark { left: calc(var(--pjl-thumb-rail) + 10px + 14px); }
.pjl-woo-single-image .woocommerce-product-gallery__wrapper {
	display: grid;
	grid-template-columns: var(--pjl-thumb-rail, 88px) minmax(0, 1fr);
	gap: 10px;
	align-items: stretch;
}
.pjl-woo-single-image .woocommerce-product-gallery__image {
	position: relative; overflow: hidden;
	background: var(--pjl-surface); cursor: zoom-in;
}
.pjl-woo-single-image .woocommerce-product-gallery__image img {
	width: 100%; height: 100%; object-fit: cover; display: block;
	transition: transform .8s var(--pjl-ease);
}
.pjl-woo-single-image .woocommerce-product-gallery__image a { display: block; height: 100%; }

/* The hero: column 2, height clamped so the buy controls stay reachable. */
.pjl-woo-single-image > .woocommerce-product-gallery > .woocommerce-product-gallery__wrapper > .woocommerce-product-gallery__image,
.pjl-woo-single-image .woocommerce-product-gallery__image--placeholder {
	grid-column: 2; grid-row: 1;
	aspect-ratio: 4 / 5;
	max-height: calc(100vh - 160px);
}

/* The rail: column 1, same row, scrolls if a product ever carries more frames
   than fit beside the hero. */
.pjl-woo-thumbnails-wrapper {
	grid-column: 1; grid-row: 1;
	display: flex; flex-direction: column; gap: 10px;
	min-height: 0; overflow-y: auto;
	scrollbar-width: thin;
}
/* Grow to share the rail's height so a full gallery fills it top to bottom,
   but never past 4:5 — two frames stretched over an 800px hero would be a
   letterbox crop of a shoe, not a thumbnail. */
.pjl-woo-thumbnails-wrapper .woocommerce-product-gallery__image {
	flex: 1 1 auto; min-height: 0;
	aspect-ratio: 1 / 1;
	max-height: calc(var(--pjl-thumb-rail, 88px) * 1.25);
	/* Outline rather than border: it is drawn inside the box via a negative
	   offset, so adding it cannot change the frame's size or the rail's width. */
	outline: 1px solid var(--pjl-rule); outline-offset: -1px;
	transition: outline-color .2s var(--pjl-ease);
}
.pjl-woo-thumbnails-wrapper .woocommerce-product-gallery__image:hover { outline-color: var(--pjl-ink); }
.pjl-woo-thumbnails-wrapper .woocommerce-product-gallery__image.pjl--active { outline-color: var(--pjl-ink); }
/* The hero opens the lightbox; a rail frame only swaps into it. */
.pjl-woo-thumbnails-wrapper .woocommerce-product-gallery__image { cursor: pointer; }
.pjl-woo-single-image .woocommerce-product-gallery__image:hover img { transform: scale(1.04); }

/* One image means no rail, so the hero takes the full width back. */
.pjl-woo-single-image .woocommerce-product-gallery__wrapper:not(:has(.pjl-woo-thumbnails-wrapper)) { grid-template-columns: minmax(0, 1fr); }
.pjl-woo-single-image .woocommerce-product-gallery__wrapper:not(:has(.pjl-woo-thumbnails-wrapper)) > .woocommerce-product-gallery__image { grid-column: 1; }

@media (max-width: 768px) {
	/* Below the fold the rail reads better underneath as a strip. */
	.pjl-woo-single-image .woocommerce-product-gallery__wrapper { grid-template-columns: minmax(0, 1fr); }
	.pjl-woo-single-image > .woocommerce-product-gallery > .woocommerce-product-gallery__wrapper > .woocommerce-product-gallery__image { grid-column: 1; grid-row: 1; }
	.pjl-woo-thumbnails-wrapper { grid-column: 1; grid-row: 2; flex-direction: row; overflow-x: auto; overflow-y: hidden; }
	.pjl-woo-thumbnails-wrapper .woocommerce-product-gallery__image { width: 84px; flex: 0 0 auto; max-height: none; }
	/* Rail is underneath here, so the badge goes back to the image's own corner. */
	.pjl-woo-single-image > .pjl-woo-product-mark { left: 14px; }
}
@media (hover: none) {
	.pjl-woo-single-image .woocommerce-product-gallery__image:hover img { transform: none; }
}

/* The single-product title carries the loop class too, so it needs to win over
   the 16px card rule. */
.summary .product_title,
.entry-summary .product_title {
	margin-bottom: 12px;
	font-size: clamp(26px, 2.4vw, 36px);
	line-height: 1.15;
	text-transform: uppercase;
}
.summary .price, .entry-summary .price {
	display: block; margin-bottom: 20px;
	font-size: 20px; color: var(--pjl-ink);
}

.product_meta {
	display: flex; flex-wrap: wrap; gap: 6px 26px;
	margin-top: 22px; padding-top: 16px;
	border-top: 1px solid var(--pjl-rule);
	font-size: 12px; letter-spacing: .08em; text-transform: uppercase;
}
.product_meta > span { display: inline-flex; gap: 8px; }
.pjl-woo-meta-label { color: var(--pjl-body); }
.pjl-woo-meta-value { color: var(--pjl-ink); }
.woocommerce-product-details__short-description { padding-bottom: 18px; border-bottom: 1px solid var(--pjl-rule); margin-bottom: 18px; }

/* Save sits under the description, above the buy controls. */
.pjl-woo-single-actions {
	display: flex; flex-wrap: wrap; align-items: center; gap: 22px;
	padding-bottom: 18px; margin-bottom: 4px;
	border-bottom: 1px solid var(--pjl-rule);
}
.pjl-woo-single-actions > div { margin: 0; }
.pjl-woo-single-actions a {
	display: inline-flex; align-items: center; gap: 8px;
	color: var(--pjl-body); cursor: pointer;
	font-size: 12px; letter-spacing: .12em; text-transform: uppercase;
	transition: color .2s var(--pjl-ease);
}
.pjl-woo-single-actions a:hover,
.pjl-woo-single-actions .pjl-wish--added { color: var(--pjl-ink); }
.pjl-woo-single-actions svg { width: 17px; height: 17px; }
.pjl-woo-single-actions .pjl-wish--added .pjl-svg--wishlist { fill: currentColor; }

.woocommerce-product-attributes, .pjl-woo-meta-label, .pjl-woo-meta-value { font-size: 13px; }
.pjl-woo-meta-label { color: var(--pjl-body); }
.woocommerce-product-attributes th, .woocommerce-product-attributes td {
	padding: 9px 0; border-bottom: 1px solid var(--pjl-rule); text-align: left; font-weight: 400;
}

/* variations */
.variations, .variations tbody, .variations tr, .variations td { display: block; width: 100%; }
.variations th.label { display: none; }
.variations td { padding: 0; border: 0; }
.reset_variations { display: none !important; }
.pjl-swatch-row { padding-block: 16px; border-bottom: 1px solid var(--pjl-rule); }
.pjl-swatch-row__head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10px; }
.pjl-swatch-row__label { color: var(--pjl-ink); font-size: 12px; letter-spacing: .16em; text-transform: uppercase; }
.pjl-swatch-row__value { font-size: 13px; }
.pjl-swatch-list { display: flex; flex-wrap: wrap; gap: 6px; }
.pjl-swatch {
	position: relative;
	min-width: 46px; height: 44px; padding: 0 10px;
	display: inline-flex; align-items: center; justify-content: center;
	border: 1px solid var(--pjl-rule); background: var(--pjl-paper);
	color: var(--pjl-ink); font-size: 14px; cursor: pointer;
	font-variant-numeric: tabular-nums;
	transition: border-color .18s var(--pjl-ease);
}
.pjl-swatch:hover { border-color: var(--pjl-ink); }
.pjl-swatch.is-selected { border-color: var(--pjl-ink); box-shadow: inset 0 0 0 1px var(--pjl-ink); }
.pjl-swatch.is-unavailable { color: var(--pjl-body); border-style: dashed; cursor: not-allowed; }
.pjl-swatch.is-unavailable::after {
	content: ""; position: absolute; left: 8%; right: 8%; top: 50%;
	height: 1px; background: var(--pjl-rule); transform: rotate(-14deg);
}
.pjl-swatch--color { width: 44px; min-width: 44px; padding: 0; }
.pjl-swatch--color i {
	display: block; width: 100%; height: 100%;
	border: 2px solid var(--pjl-paper);
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .16);
}
.pjl-sizehelp { margin-top: 10px; }
.pjl-sizehelp button, .pjl-chart-opener {
	background: none; border: 0; padding: 0; cursor: pointer;
	color: var(--pjl-body); font-size: 13px; text-decoration: underline; text-underline-offset: 3px;
}
.pjl-swatch-select { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }

/* quantity + add to cart */
.woocommerce-variation-add-to-cart, form.cart { display: flex; gap: 10px; align-items: stretch; flex-wrap: wrap; margin-top: 18px; }
/* `:has(input)` because .quantity is two different things in WooCommerce: the
   stepper box on the product and cart pages, and a plain `<span class="quantity">1 × 160 $</span>`
   in the mini cart and order details. Unqualified, this drew an input frame
   around that sentence. */
.quantity:has(input), .pjl-quantity-buttons { position: relative; display: inline-flex; align-items: center; border: 1px solid var(--pjl-ink); flex: none; }
.quantity input[type="number"], .pjl-quantity-input {
	width: 64px; border: 0; text-align: center; background: none; padding: 12px 4px;
	font-variant-numeric: tabular-nums;
	-moz-appearance: textfield;
}
.quantity input::-webkit-outer-spin-button, .quantity input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
/* Explicit height: `height:100%` collapses here because the flex parent has no
   definite height, leaving a hit area too small to click. */
.pjl-quantity-minus, .pjl-quantity-plus {
	width: 38px; height: 46px;
	flex: none;
	display: inline-flex; align-items: center; justify-content: center;
	cursor: pointer; user-select: none; color: var(--pjl-ink);
	font-size: 16px; line-height: 1;
	transition: background .18s var(--pjl-ease);
}
.pjl-quantity-minus::before { content: "−"; }
.pjl-quantity-plus::before { content: "+"; }
.pjl-quantity-minus:hover, .pjl-quantity-plus:hover { background: var(--pjl-surface); }
/* At the stock limit, not broken. */
.pjl-quantity-minus.is-disabled, .pjl-quantity-plus.is-disabled { color: var(--pjl-rule); cursor: not-allowed; }
.pjl-quantity-minus.is-disabled:hover, .pjl-quantity-plus.is-disabled:hover { background: none; }
form.cart .single_add_to_cart_button { flex: 1; min-width: 180px; }

.woocommerce-variation-price { margin-bottom: 12px; font-size: 18px; color: var(--pjl-ink); }
.woocommerce-variation-availability { margin-bottom: 12px; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; }
.woocommerce-variation-availability .stock.out-of-stock { color: var(--pjl-alert); }

/* size chart */
.pjl-chart-wrapper {
	position: fixed; inset: 0; z-index: 150;
	display: none; align-items: center; justify-content: center; padding: 20px;
}
.pjl-chart-wrapper.pjl--active { display: flex; }
/* The backdrop is drawn by the panel itself so it cannot depend on the two
   elements staying adjacent in the markup. */
.pjl-chart-wrapper::before { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, .55); }
.pjl-chart-around-wrapper { display: none; }
.pjl-chart-opener {
	display: inline-block; margin-top: 10px;
	color: var(--pjl-body); font-size: 13px;
	text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}
.pjl-chart-opener:hover { color: var(--pjl-ink); }
.pjl-chart-inner {
	position: relative; z-index: 1;
	width: min(900px, 100%); max-height: 88vh; overflow-y: auto;
	padding: 26px; background: var(--pjl-paper);
}
.pjl-chart-close {
	position: absolute; top: 8px; right: 10px; z-index: 2;
	width: 36px; height: 36px; padding: 0;
	border: 0; background: none; color: var(--pjl-ink);
	font-size: 26px; line-height: 1; cursor: pointer;
}
.pjl-chart-close:hover { opacity: .6; }
.pjl-label-wrapper { display: flex; gap: 18px; margin-bottom: 16px; border-bottom: 1px solid var(--pjl-rule); }
.pjl-label-wrapper span { padding-bottom: 10px; cursor: pointer; font-size: 13px; color: var(--pjl-body); }
.pjl-label-wrapper span.pjl-label-active { color: var(--pjl-ink); box-shadow: inset 0 -2px 0 0 var(--pjl-ink); }
.pjl-image-wrapper > span { display: none; }
.pjl-image-wrapper > span.pjl-image-active { display: block; }

/* tabs / related */
.woocommerce-tabs { padding-top: 48px; border-top: 1px solid var(--pjl-rule); margin-top: 48px; }
.woocommerce-tabs .tabs { display: flex; gap: 26px; flex-wrap: wrap; border-bottom: 1px solid var(--pjl-rule); margin-bottom: 24px; }
.woocommerce-tabs .tabs li a { display: inline-block; padding-bottom: 12px; color: var(--pjl-body); font-size: 13px; letter-spacing: .12em; text-transform: uppercase; }
.woocommerce-tabs .tabs li.active a { color: var(--pjl-ink); box-shadow: inset 0 -2px 0 0 var(--pjl-ink); }
section.related, section.up-sells { padding-top: 56px; padding-bottom: 24px; }
section.related > h2, section.up-sells > h2 {
	margin-bottom: 26px;
	font-size: clamp(20px, 2vw, 26px); font-weight: 500;
	letter-spacing: .04em; text-transform: uppercase;
}
/* Woo's own loop `<ul class="products">` is the grid track holder here — see
   pj_woo_single_loop_start() in woocommerce/single-product.php, which adds the
   .pjl-grid-inner class the theme grid needs. */
.pjl-woo-product-list ul.products { margin: 0; padding: 0; list-style: none; }

/* =============================================================================
   CART / CHECKOUT / ACCOUNT
   ========================================================================== */
/* Empty states. `.pjl-btn` was never a class this stylesheet defined, so the
   wishlist's call to action rendered as a bare link. */
.pjl-empty, .pjl-cart-empty { padding-block: 60px 80px; text-align: center; }
.pjl-empty h2 { margin: 0 0 10px; font-size: clamp(20px, 2vw, 26px); }
.pjl-empty p { margin: 0 0 24px; }
.pjl-cart-empty .cart-empty { justify-content: center; }

.pjl-cart { display: grid; gap: 40px; padding-block: 40px 80px; }
@media (min-width: 980px) { .pjl-cart { grid-template-columns: minmax(0, 1.6fr) minmax(320px, .9fr); gap: 60px; align-items: start; } }
.pjl-cart__totals { background: var(--pjl-surface); padding: 26px; position: sticky; top: 24px; }
.pjl-line { display: grid; grid-template-columns: 88px 1fr auto; gap: 18px; padding: 18px 0; border-bottom: 1px solid var(--pjl-rule); align-items: start; }
.pjl-line__media { aspect-ratio: 4 / 5; background: var(--pjl-surface); overflow: hidden; }
.pjl-line__media img { width: 100%; height: 100%; object-fit: cover; }
.pjl-line__name { color: var(--pjl-ink); font-weight: 500; }
.pjl-line__var { margin-top: 4px; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; }
.pjl-line__price { color: var(--pjl-ink); font-variant-numeric: tabular-nums; text-align: right; }
.pjl-line__remove { background: none; border: 0; padding: 0; cursor: pointer; color: var(--pjl-body); font-size: 13px; text-decoration: underline; text-underline-offset: 3px; }
.pjl-line__remove:hover { color: var(--pjl-alert); }
.pjl-line__controls { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 12px; }
.pjl-line__controls .quantity { height: 40px; }
.pjl-line__controls .quantity input[type="number"] { width: 54px; padding: 8px 4px; }

/* Cart actions: coupon on the left, update on the right, wrapping to a stack on
   narrow screens. The input and the button share a row and equal height, which
   is the bit that reads as broken when the button is left at its own size. */
.pjl-cart__actions {
	display: flex; flex-wrap: wrap; gap: 12px; align-items: center;
	padding-top: 22px; margin-top: 4px;
	border-top: 1px solid var(--pjl-rule);
}
/* Coupon: in the totals column, between the table and the checkout button. The
   column is ~320px, so the field and Apply share one row and the button is
   sized to its label rather than to a share of the width. */
.pjl-coupon {
	display: flex; gap: 8px;
	padding-top: 18px; margin: 18px 0 22px;
	border-top: 1px solid var(--pjl-rule);
}
.pjl-coupon input[type="text"] { flex: 1 1 auto; width: auto; min-width: 0; height: 44px; padding: 0 12px; font-size: 14px; }
/* Attribute selector to outrank the shared `button[type="submit"].pjl-button`
   rule, which would otherwise keep its 34px side padding here. */
.pjl-coupon button[type="submit"] { flex: 0 0 auto; height: 44px; padding: 0 18px; white-space: nowrap; }
/* Smart Coupons' available-coupon cards, relocated into the totals column (see
   the hook move in inc/woocommerce.php). The plugin sizes them for a full-width
   cart, so they are constrained to the column here rather than overflowing it.
   The cards' own look is the plugin's; only the box they sit in is ours. */
.cart_totals .wt_coupon_wrapper { max-width: 100%; margin-bottom: 18px; }
.cart_totals .wt_coupon_wrapper * { max-width: 100%; box-sizing: border-box; }
.cart_totals .wt_sc_pagination { margin-bottom: 18px; font-size: 13px; }

.pjl-cart__update { flex: none; height: 46px; padding-block: 0; white-space: nowrap; margin-left: auto; }
@media (max-width: 560px) {
	.pjl-cart__update { margin-left: 0; width: 100%; }
}

/* Secondary buttons: outlined, so Proceed to checkout stays the only solid one.
   `button[type="submit"].pjl-button--ghost` is needed to outrank the shared
   button rule, which carries `button[type="submit"].pjl-button` — an attribute
   selector, so a plain `.button.pjl-button--ghost` loses to it and these render
   solid black like the primary action. */
.pjl-button--ghost,
.button.pjl-button--ghost,
button[type="submit"].pjl-button--ghost {
	background: var(--pjl-paper); color: var(--pjl-ink);
	border: 1px solid var(--pjl-ink);
}
.pjl-button--ghost:hover,
.button.pjl-button--ghost:hover,
button[type="submit"].pjl-button--ghost:hover { background: var(--pjl-ink); color: var(--pjl-paper); }

.cart_totals table, .shop_table { width: 100%; font-variant-numeric: tabular-nums; border-collapse: collapse; }
.cart_totals th, .cart_totals td, .shop_table th, .shop_table td { padding: 10px 0; text-align: left; border-bottom: 1px solid var(--pjl-rule); font-weight: 400; }
.cart_totals td { text-align: right; color: var(--pjl-ink); }
.cart_totals .order-total td, .cart_totals .order-total th { font-size: 18px; color: var(--pjl-ink); }
.cart_totals h2 {
	margin: 0 0 18px;
	font-size: 13px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase;
}
.cart_totals .wc-proceed-to-checkout { margin-top: 20px; }
/* Only the checkout link goes full width. `.wc-proceed-to-checkout .button`
   would also catch the coupon's Apply, which renders inside this same div, and
   stretch it across the row until the input beside it is a few pixels wide. */
.cart_totals .wc-proceed-to-checkout > a.checkout-button { width: 100%; }
.woocommerce-shipping-destination, .shipping-calculator-button { font-size: 13px; }

/* --- checkout (classic shortcode, same shell as the cart) ----------------- */
form.checkout.woocommerce-checkout { display: grid; gap: 40px; padding-block: 30px 70px; }
@media (min-width: 980px) {
	form.checkout.woocommerce-checkout {
		grid-template-columns: minmax(0, 1.6fr) minmax(320px, .9fr);
		/* Row 1 is pinned to the heading's own height. Left to `auto`, the extra
		   height of the row-spanning details column gets shared between both
		   rows, so opening "Ship to a different address" pushes the start of row
		   2 — and the order summary with it — down to the middle of the page. */
		grid-template-rows: min-content 1fr;
		gap: 60px; align-items: start; align-content: start;
	}
	/* Woo prints #order_review_heading and #order_review as siblings of the
	   details column; both are pulled into column 2 so the summary reads as one
	   panel beside the form rather than stacking under it. */
	.woocommerce-checkout #customer_details { grid-column: 1; grid-row: 1 / -1; }
	.woocommerce-checkout #order_review_heading { grid-column: 2; grid-row: 1; margin-bottom: 0; }
	.woocommerce-checkout #order_review { grid-column: 2; grid-row: 2; align-self: start; position: sticky; top: 24px; }
}
.woocommerce-checkout .col2-set { display: grid; gap: 0; }
.woocommerce-checkout #order_review_heading,
.woocommerce-checkout h3 {
	margin: 0 0 18px; padding-bottom: 14px;
	border-bottom: 1px solid var(--pjl-rule);
	font-size: 15px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase;
}
.woocommerce-checkout #order_review { background: var(--pjl-surface); padding: 26px; }
.woocommerce-checkout #order_review h3 { border: 0; padding: 0; }
.woocommerce-checkout-review-order-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.woocommerce-checkout-review-order-table th,
.woocommerce-checkout-review-order-table td {
	padding: 10px 0; text-align: left; font-weight: 400;
	border-bottom: 1px solid var(--pjl-rule);
}
.woocommerce-checkout-review-order-table td { text-align: right; color: var(--pjl-ink); }
.woocommerce-checkout-review-order-table .product-name { text-align: left; }
.woocommerce-checkout-review-order-table .order-total th,
.woocommerce-checkout-review-order-table .order-total td { font-size: 18px; color: var(--pjl-ink); }
.woocommerce-checkout-review-order-table tfoot th { color: var(--pjl-body); }

/* Coupon toggle: Woo prints it as a notice with an inline link. */
.woocommerce-form-coupon-toggle { margin-bottom: 22px; }
.woocommerce-form-coupon-toggle .woocommerce-info { justify-content: flex-start; font-size: 13px; }
form.checkout_coupon {
	display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
	margin-bottom: 24px; padding: 18px;
	border: 1px solid var(--pjl-rule);
}
form.checkout_coupon .form-row { margin: 0; }
form.checkout_coupon .form-row-first { flex: 1 1 220px; }
form.checkout_coupon input[type="text"] { height: 44px; padding: 0 12px; }
form.checkout_coupon button[type="submit"] { height: 44px; padding: 0 18px; white-space: nowrap; }

/* Payment methods. */
#payment { margin-top: 24px; }
#payment ul.payment_methods { list-style: none; margin: 0 0 18px; padding: 0 0 18px; border-bottom: 1px solid var(--pjl-rule); }
#payment ul.payment_methods li { padding: 8px 0; }
#payment ul.payment_methods li label { display: inline; margin: 0; font-size: 14px; }
#payment ul.payment_methods li input[type="radio"] { width: auto; margin-right: 8px; accent-color: var(--pjl-ink); }
#payment .payment_box { margin: 8px 0 0; padding: 12px 14px; background: var(--pjl-paper); font-size: 13px; }
#payment .payment_box p { margin: 0; }
#payment .woocommerce-privacy-policy-text { margin-bottom: 16px; }
#payment .place-order { margin: 0; }
#payment #place_order { width: 100%; }
.woocommerce-terms-and-conditions-wrapper { margin-bottom: 16px; font-size: 13px; }
.woocommerce-terms-and-conditions-wrapper .woocommerce-form__label-for-checkbox { display: flex; align-items: flex-start; gap: 9px; }

/* Processing state.
 *
 * WooCommerce already does the work: checkout.js adds `.processing` to the form
 * and blockUI injects a `.blockOverlay` over whatever is busy — the checkout
 * form, the cart on quantity update, the payment box while it reloads. What is
 * missing is any sign of it, because Woo draws the spinner from its own
 * stylesheet, which this theme does not load. So the overlay lands as a faint
 * wash with nothing in it and the page looks frozen rather than working. */
/* blockUI sets position/cursor inline, so only the mark itself is needed here. */
.blockUI.blockOverlay::before,
.woocommerce .loader::before {
	content: "";
	position: absolute; top: 50%; left: 50%;
	width: 34px; height: 34px; margin: -17px 0 0 -17px;
	border: 2px solid var(--pjl-rule); border-top-color: var(--pjl-ink);
	border-radius: 50%;
	animation: pjl-spin 0.9s linear infinite;
}
form.checkout.processing { pointer-events: none; }
form.checkout.processing #place_order { opacity: .5; }
@media (prefers-reduced-motion: reduce) {
	.blockUI.blockOverlay::before { animation-duration: 2.5s; }
}

/* "Ship to a different address?" — Woo renders it as an h3 wrapping the
   checkbox, immediately after the billing fields with no gap of its own. */
.woocommerce-checkout #ship-to-different-address {
	margin: 32px 0 0; padding-top: 26px;
	border-top: 1px solid var(--pjl-rule);
}
.woocommerce-checkout #ship-to-different-address label {
	display: flex; align-items: center; gap: 9px;
	margin: 0; cursor: pointer;
	font-size: 15px; letter-spacing: .12em; text-transform: uppercase;
}
.woocommerce-checkout #ship-to-different-address input[type="checkbox"] { width: auto; margin: 0; accent-color: var(--pjl-ink); }
.woocommerce-checkout .shipping_address { padding-top: 22px; }

/* --- order received / order details --------------------------------------- */
.woocommerce-order, .woocommerce-view-order { padding-block: 20px 70px; }
.woocommerce-thankyou-order-received,
.woocommerce-notice--success {
	margin: 0 0 30px; padding: 22px 24px;
	border: 1px solid var(--pjl-ink);
	font-size: clamp(16px, 1.6vw, 20px); color: var(--pjl-ink);
}
.woocommerce-order-overview, ul.order_details {
	display: grid; gap: 1px;
	margin: 0 0 40px; padding: 0; list-style: none;
	background: var(--pjl-rule); border: 1px solid var(--pjl-rule);
}
@media (min-width: 720px) { .woocommerce-order-overview, ul.order_details { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); } }
.woocommerce-order-overview li, ul.order_details li {
	margin: 0; padding: 16px 18px;
	background: var(--pjl-paper);
	font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--pjl-body);
}
.woocommerce-order-overview li strong, ul.order_details li strong {
	display: block; margin-top: 6px;
	font-size: 15px; letter-spacing: 0; text-transform: none; font-weight: 500; color: var(--pjl-ink);
}

.woocommerce-order-details, .woocommerce-customer-details { margin-bottom: 40px; }
.woocommerce-order-details__title, .woocommerce-column__title,
.woocommerce-customer-details h2 {
	margin: 0 0 18px; padding-bottom: 14px;
	border-bottom: 1px solid var(--pjl-rule);
	font-size: 15px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase;
}
.woocommerce-table--order-details { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.woocommerce-table--order-details th,
.woocommerce-table--order-details td {
	padding: 12px 0; text-align: left; font-weight: 400;
	border-bottom: 1px solid var(--pjl-rule);
}
.woocommerce-table--order-details td.product-total,
.woocommerce-table--order-details th.product-total,
.woocommerce-table--order-details tfoot td { text-align: right; color: var(--pjl-ink); }
.woocommerce-table--order-details tfoot th { color: var(--pjl-body); font-weight: 400; }
.woocommerce-table--order-details tfoot tr:last-child th,
.woocommerce-table--order-details tfoot tr:last-child td { font-size: 18px; color: var(--pjl-ink); }
.woocommerce-table--order-details .wc-item-meta,
.woocommerce-table--order-details .variation {
	margin: 4px 0 0; padding: 0; list-style: none;
	font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--pjl-body);
}
.woocommerce-table--order-details .wc-item-meta li,
.woocommerce-table--order-details .wc-item-meta p { margin: 0; display: inline; }

.woocommerce-customer-details .woocommerce-columns { display: grid; gap: 30px; }
@media (min-width: 720px) { .woocommerce-customer-details .woocommerce-columns--addresses { grid-template-columns: 1fr 1fr; } }
.woocommerce-customer-details address {
	font-style: normal; line-height: 1.7;
	padding: 20px; background: var(--pjl-surface);
}

.form-row { margin-bottom: 16px; }
.woocommerce-checkout .form-row-first, .woocommerce-checkout .form-row-last { width: 100%; }
@media (min-width: 620px) {
	.woocommerce-billing-fields__field-wrapper, .woocommerce-shipping-fields__field-wrapper { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; }
	.woocommerce-billing-fields__field-wrapper .form-row-wide,
	.woocommerce-shipping-fields__field-wrapper .form-row-wide { grid-column: 1 / -1; }
}

.woocommerce-MyAccount-navigation ul { display: flex; flex-wrap: wrap; gap: 16px; border-bottom: 1px solid var(--pjl-rule); margin-bottom: 28px; }
.woocommerce-MyAccount-navigation li a { display: inline-block; padding-bottom: 12px; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--pjl-body); }
.woocommerce-MyAccount-navigation li.is-active a { color: var(--pjl-ink); box-shadow: inset 0 -2px 0 0 var(--pjl-ink); }

/* --- login / register ----------------------------------------------------- */
/* Woo prints both columns from its own myaccount/form-login.php once
   `woocommerce_enable_myaccount_registration` is on, so this is styling only —
   My Account stays on the stock template path. */
#customer_login { display: grid; gap: 44px; padding-block: 8px 20px; }
@media (min-width: 860px) {
	#customer_login { grid-template-columns: 1fr 1fr; gap: 0; }
	#customer_login .u-column1 { padding-right: 48px; }
	#customer_login .u-column2 { padding-left: 48px; border-left: 1px solid var(--pjl-rule); }
}
#customer_login h2 {
	margin: 0 0 22px; padding-bottom: 14px;
	border-bottom: 1px solid var(--pjl-rule);
	font-size: 15px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase;
}

/* Tabbed state. Only applied once main.js takes over — until then both columns
   show, which is WooCommerce's own layout and works without scripting. With one
   panel at a time the column rule and padding would just be a stray line down
   the middle of a half-width form, so both come off and the form goes single
   column at a readable width. */
.pjl-account-tabs {
	display: flex; gap: 26px;
	margin-bottom: 28px;
	border-bottom: 1px solid var(--pjl-rule);
}
.pjl-account-tab {
	padding: 0 0 14px; border: 0; background: none;
	color: var(--pjl-body); cursor: pointer;
	font-size: 13px; letter-spacing: .12em; text-transform: uppercase;
	transition: color .2s var(--pjl-ease), box-shadow .2s var(--pjl-ease);
}
.pjl-account-tab:hover { color: var(--pjl-ink); }
.pjl-account-tab.is-active { color: var(--pjl-ink); box-shadow: inset 0 -2px 0 0 var(--pjl-ink); }

#customer_login.pjl-account--tabbed { display: block; max-width: 460px; padding-top: 0; }
#customer_login.pjl-account--tabbed .u-column1,
#customer_login.pjl-account--tabbed .u-column2 {
	padding: 0; border: 0;
}
/* The tab strip names the form; a heading repeating it is noise. */
#customer_login.pjl-account--tabbed h2 { display: none; }

/* Turnstile. The widget is a fixed-size iframe, so it only needs spacing. */
.pjl-turnstile { margin-bottom: 18px; }
#customer_login .required { color: var(--pjl-alert); text-decoration: none; }
.woocommerce-form-login__submit, .woocommerce-form-register__submit { width: 100%; }
.woocommerce-form-login__rememberme {
	display: flex; align-items: center; gap: 9px;
	margin-bottom: 18px; cursor: pointer;
}
.woocommerce-form__input-checkbox { width: auto; margin: 0; accent-color: var(--pjl-ink); }
.woocommerce-form-login__rememberme span { font-size: 13px; color: var(--pjl-body); }
.woocommerce-LostPassword { margin: 16px 0 0; font-size: 13px; }
.woocommerce-LostPassword a {
	color: var(--pjl-body);
	text-decoration: underline; text-underline-offset: 3px;
}
.woocommerce-LostPassword a:hover { color: var(--pjl-ink); }
.woocommerce-privacy-policy-text {
	margin-bottom: 18px;
	font-size: 12px; line-height: 1.6; color: var(--pjl-body);
}
.woocommerce-privacy-policy-text p { margin: 0; }
.woocommerce-privacy-policy-link { color: var(--pjl-ink); text-decoration: underline; text-underline-offset: 3px; }

/* Show/hide password.
 *
 * WooCommerce's woocommerce.js rewrites every password field at runtime into
 * `<span class="password-input"><input><span class="show-password-input"></span></span>`
 * and draws the toggle from its own stylesheet, using the WooCommerce icon
 * font. This theme loads neither, so the toggle arrived as an unstyled empty
 * span — the stray dot under the field. Drawn here instead, as a masked SVG so
 * it takes its colour from the control rather than needing a second asset. */
.password-input { position: relative; display: block; }
.password-input input { padding-right: 48px; }
.show-password-input {
	position: absolute; top: 0; right: 0;
	width: 46px; height: 100%;
	display: flex; align-items: center; justify-content: center;
	padding: 0; border: 0; background: none;
	color: var(--pjl-body); cursor: pointer;
	transition: color .2s var(--pjl-ease);
}
.show-password-input::before {
	content: "";
	width: 20px; height: 20px;
	background-color: currentColor;
	-webkit-mask: var(--pjl-eye) center / 20px 20px no-repeat;
	mask: var(--pjl-eye) center / 20px 20px no-repeat;
}
.show-password-input:hover, .show-password-input.display-password { color: var(--pjl-ink); }
.show-password-input.display-password::before {
	-webkit-mask-image: var(--pjl-eye-off);
	mask-image: var(--pjl-eye-off);
}

/* notices */
.woocommerce-message, .woocommerce-info, .woocommerce-error, .wc-block-components-notice-banner {
	display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between;
	padding: 14px 18px; margin-bottom: 18px;
	border: 1px solid var(--pjl-ink); background: var(--pjl-paper);
	color: var(--pjl-ink); font-size: 14px;
}
.woocommerce-error { border-color: var(--pjl-alert); color: var(--pjl-alert); }
.woocommerce-notices-wrapper:empty { display: none; }

/* =============================================================================
   MODALS — quick view, wishlist
   ========================================================================== */
/* A modal shell sits in the document permanently, so the WHOLE shell — not just
   its inner panel — must be display:none until it opens. Hiding only the inner
   element leaves the scrim and close button painting over the entire site. */
.pjl-quickview-m-content {
	position: relative; z-index: 1;
	width: min(1000px, 100%); max-height: 88vh; overflow-y: auto;
	padding: 28px; background: var(--pjl-paper);
}
.pjl-quickview-m-close, .pjl-wish-m-close {
	position: absolute; top: 16px; right: 16px; z-index: 2;
	width: 40px; height: 40px;
	display: inline-flex; align-items: center; justify-content: center;
	background: none; border: 0; cursor: pointer; color: var(--pjl-ink);
}
/* --- gallery lightbox ----------------------------------------------------- */
.pjl-lightbox {
	position: fixed; inset: 0; z-index: 200;
	display: flex; align-items: center; justify-content: center;
	padding: clamp(16px, 5vw, 64px);
}
.pjl-lightbox__scrim { position: absolute; inset: 0; background: rgba(0, 0, 0, .9); }
.pjl-lightbox__figure { position: relative; z-index: 1; margin: 0; max-width: 100%; max-height: 100%; }
.pjl-lightbox__figure img { max-width: 100%; max-height: 84vh; width: auto; object-fit: contain; }
.pjl-lightbox__close, .pjl-lightbox__nav {
	position: absolute; z-index: 2;
	background: none; border: 0; cursor: pointer;
	color: #fff; line-height: 1;
	transition: opacity .2s var(--pjl-ease);
}
.pjl-lightbox__close:hover, .pjl-lightbox__nav:hover { opacity: .6; }
.pjl-lightbox__close { top: 20px; right: 24px; font-size: 34px; width: 44px; height: 44px; }
.pjl-lightbox__nav { top: 50%; transform: translateY(-50%); font-size: 44px; width: 56px; height: 56px; }
.pjl-lightbox__nav--prev { left: 10px; }
.pjl-lightbox__nav--next { right: 10px; }
.pjl-lightbox__count {
	position: absolute; z-index: 2; left: 50%; bottom: 22px; transform: translateX(-50%);
	margin: 0; color: rgba(255, 255, 255, .75);
	font-size: 12px; letter-spacing: .16em; font-variant-numeric: tabular-nums;
}
.pjl-zoom-item { cursor: zoom-in; }

/* toast */
.pjl-toast {
	position: fixed; left: 50%; bottom: 28px; z-index: 160;
	transform: translate(-50%, 200%);
	display: flex; align-items: center; gap: 12px;
	padding: 13px 20px;
	background: var(--pjl-ink); color: var(--pjl-paper);
	font-size: 12px; letter-spacing: .1em; text-transform: uppercase;
	transition: transform .4s var(--pjl-ease);
}
.pjl-toast.is-visible { transform: translate(-50%, 0); }
.pjl-toast a { text-decoration: underline; text-underline-offset: 3px; }

/* =============================================================================
   FOOTER
   ========================================================================== */
#pjl-page-footer { background: var(--pjl-ink); color: rgba(255, 255, 255, .72); margin-top: 60px; }
#pjl-page-footer a { color: var(--pjl-paper); }
#pjl-page-footer-top-area-inner, #pjl-page-footer-bottom-area-inner {
	max-width: var(--pjl-grid-width); margin-inline: auto; padding-inline: var(--pjl-gutter);
}
#pjl-page-footer-top-area { padding-block: clamp(40px, 6vw, 76px) 34px; }
#pjl-page-footer-top-area .pjl-grid-inner { display: grid; gap: 34px; }
@media (min-width: 800px) { #pjl-page-footer-top-area .pjl-grid-inner { grid-template-columns: 1.4fr 1fr 1fr 1.2fr; } }
#pjl-page-footer .pjl-widget-title {
	margin-bottom: 18px; color: rgba(255, 255, 255, .5);
	font-size: 12px; letter-spacing: .18em; text-transform: uppercase; font-weight: 400;
}
#pjl-page-footer li { margin-bottom: 10px; }
#pjl-page-footer li a { font-size: 14px; opacity: .85; }
#pjl-page-footer li a:hover { opacity: 1; }
/* The logo is the only image in the footer. Sized off `height` rather than
   `width` so the column width never stretches it, and `background: none` to
   stay ahead of any generic image tint — the mark is white on transparent, so
   anything painted behind it erases it. */
#pjl-page-footer .pjl-footer-logo {
	display: block; width: auto; height: 52px; max-width: 100%;
	background: none;
}
.pjl-footer-separator { height: 1px; background: rgba(255, 255, 255, .15); }
#pjl-page-footer-bottom-area { padding-block: 20px; }
#pjl-page-footer-bottom-area .pjl-grid-inner {
	display: flex; flex-wrap: wrap; gap: 14px; align-items: center; justify-content: space-between;
	font-size: 12px; letter-spacing: .08em; color: rgba(255, 255, 255, .5); text-transform: uppercase;
}
.pjl-social-icons-group { display: flex; gap: 14px; align-items: center; }
.pjl-social-icons-group a { display: inline-flex; opacity: .8; }
.pjl-social-icons-group a:hover { opacity: 1; }
.pjl-social-icons-group svg { width: 16px; height: 16px; fill: currentColor; stroke: none; }

/* back to top */
#pjl-back-to-top {
	position: fixed; right: 24px; bottom: 24px; z-index: 90;
	width: 46px; height: 46px;
	display: inline-flex; align-items: center; justify-content: center;
	background: var(--pjl-ink); color: var(--pjl-paper);
	opacity: 0; visibility: hidden; pointer-events: none;
	transition: opacity .3s var(--pjl-ease), visibility .3s;
}
#pjl-back-to-top.pjl--on { opacity: 1; visibility: visible; pointer-events: auto; }
#pjl-back-to-top svg { width: 12px; height: 12px; }

/* =============================================================================
   INNER PAGES
   ========================================================================== */
.pjl-page-section--title { padding-block: clamp(40px, 6vw, 80px) 0; }
.pjl-page-section--flush { padding-top: 0; }
.pjl-page-body--full { display: block; width: 100%; }
.pjl-page-body { display: grid; gap: 40px; padding-block: clamp(32px, 5vw, 64px); }
@media (min-width: 900px) { .pjl-page-body--sidebar { grid-template-columns: 1fr 300px; gap: 60px; } }
.pjl-page-body__main > :where(h2, h3) { margin-top: 1.6em; }
.pjl-page-body__main--panel { background: var(--pjl-surface); padding: clamp(24px, 4vw, 44px); }
.pjl-page-body__aside { align-self: start; }

/* about */
/* The banner is a photo, so everything on it is white over a scrim — the eyebrow
   and the strapline were inheriting body ink and disappearing into the image,
   and sat left while the title was centred. */
.pjl-about-banner {
	position: relative;
	background: var(--pjl-surface) center / cover no-repeat;
	color: var(--pjl-paper); text-align: center;
}
.pjl-about-banner::before { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, .38); }
.pjl-about-banner__inner {
	position: relative; z-index: 1;
	max-width: var(--pjl-grid-width); margin-inline: auto;
	padding: clamp(48px, 8vw, 110px) var(--pjl-gutter);
}
.pjl-about-banner__eyebrow {
	display: block; margin-bottom: 14px;
	color: var(--pjl-paper);
	font-size: 12px; letter-spacing: .22em; text-transform: uppercase;
}
.pjl-about-banner__sub { max-width: 54ch; margin: 14px auto 0; color: var(--pjl-paper); }
/* The two-column rule has to sit on .pjl-grid-inner — the element that actually
   holds the two items. On the <section> it had exactly one child, the
   .pjl-content-grid wrapper, so every chapter piled into column 1 at half width
   and column 2 rendered as empty space down the right of the page. */
.pjl-about-chapter { padding-block: clamp(30px, 5vw, 60px); }
.pjl-about-chapter .pjl-grid-inner { display: grid; gap: 30px; align-items: center; }
@media (min-width: 900px) {
	.pjl-about-chapter .pjl-grid-inner { grid-template-columns: 1fr 1fr; gap: clamp(30px, 5vw, 70px); }
	.pjl-about-chapter--media-right .pjl-about-chapter__media { order: 2; }
}
.pjl-about-chapter__media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: var(--pjl-surface); }
.pjl-about-chapter__text { max-width: 46ch; }

/* contact */
/* Same fix as the about chapters: the columns live on .pjl-grid-inner. */
.pjl-contact-intro .pjl-grid-inner { display: grid; gap: 40px; align-items: start; }
@media (min-width: 900px) { .pjl-contact-intro .pjl-grid-inner { grid-template-columns: 1.2fr .8fr; gap: 60px; } }
.pjl-contact-intro__map { position: sticky; top: 24px; }
.pjl-contact-intro__map > div { height: 100%; }
.pjl-contact-intro__map iframe, .pjl-contact-intro__map img {
	display: block; width: 100%; height: 100%; min-height: 460px;
	border: 1px solid var(--pjl-rule);
}
.pjl-contact-showroom__panel { border: 1px solid var(--pjl-rule); padding: 26px; }
.pjl-contact-showroom__address { color: var(--pjl-ink); }
.pjl-contact-showroom__whatsapp { display: inline-flex; align-items: center; gap: 10px; margin-top: 14px; }

/* forms plugged in by Contact Form 7 */
.wpcf7 input:not([type="submit"]), .wpcf7 textarea { margin-bottom: 4px; }
.wpcf7 input[type="submit"] {
	width: auto; padding: 15px 34px; cursor: pointer;
	background: var(--pjl-ink); color: var(--pjl-paper); border: 1px solid var(--pjl-ink);
	font-size: 13px; letter-spacing: .1em; text-transform: uppercase;
}
.wpcf7 input[type="submit"]:hover { background: var(--pjl-paper); color: var(--pjl-ink); }

/* accordion (FAQ) */
.pjl-accordion details, details { border-bottom: 1px solid var(--pjl-rule); }
.pjl-accordion summary, details > summary {
	display: flex; justify-content: space-between; align-items: center; gap: 18px;
	padding: 20px 0; cursor: pointer; list-style: none;
	color: var(--pjl-ink); font-size: 17px; font-weight: 500;
}
summary::-webkit-details-marker { display: none; }
.pjl-accordion summary::after, details > summary::after {
	content: ""; flex: none; width: 12px; height: 12px;
	background: linear-gradient(currentColor, currentColor) center/100% 1px no-repeat,
	            linear-gradient(currentColor, currentColor) center/1px 100% no-repeat;
	transition: transform .3s var(--pjl-ease);
}
details[open] > summary::after { transform: rotate(45deg); }
.pjl-accordion__body { padding-bottom: 20px; max-width: 70ch; }

/* =============================================================================
   MOTION / PRINT
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: .001ms !important; animation-iteration-count: 1 !important;
		transition-duration: .001ms !important; scroll-behavior: auto !important;
	}
	.pjl-js .pjl--has-appear { opacity: 1; transform: none; }
}

/* =============================================================================
   404
   ========================================================================== */
#pjl-404-page {
	max-width: 640px;
	margin-inline: auto;
	padding: clamp(56px, 10vw, 130px) var(--pjl-gutter);
	text-align: center;
}
.pjl-404-code {
	margin: 0 0 6px;
	font-size: clamp(72px, 14vw, 150px); line-height: .9; font-weight: 500;
	letter-spacing: -.03em; color: var(--pjl-surface);
	/* Sits behind the heading as a watermark rather than shouting. */
	user-select: none;
}
.pjl-404-title { margin: 0 0 14px; font-size: clamp(24px, 3vw, 36px); }
.pjl-404-text { margin: 0 auto 30px; max-width: 46ch; }
.pjl-404-search { margin-bottom: 26px; }
.pjl-404-links {
	display: flex; justify-content: center; flex-wrap: wrap; gap: 10px;
	margin-bottom: 28px;
}
.pjl-404-link {
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 120px; padding: 12px 22px;
	border: 1px solid var(--pjl-rule);
	color: var(--pjl-ink);
	font-size: 12px; letter-spacing: .12em; text-transform: uppercase;
	transition: border-color .2s var(--pjl-ease), background .2s var(--pjl-ease), color .2s var(--pjl-ease);
}
.pjl-404-link:hover { background: var(--pjl-ink); border-color: var(--pjl-ink); color: var(--pjl-paper); }
.pjl-404-button { margin-top: 4px; }

/* =============================================================================
   SEARCH RESULTS
   ========================================================================== */
.pjl-page-section--search { padding-block: clamp(32px, 5vw, 64px) 80px; }
.pjl-search { max-width: 820px; margin-inline: auto; }

.pjl-e-search-heading { padding-bottom: 30px; margin-bottom: 8px; border-bottom: 1px solid var(--pjl-rule); }
.pjl-e-search-heading-title { margin: 0 0 18px; font-size: clamp(22px, 2.4vw, 30px); }
.pjl-e-search-heading-label { margin: 14px 0 0; font-size: 14px; }

/* searchform.php's own markup — `.pjl-search-form*` — had no rules at all, so
   the field and its button stacked as two unstyled boxes. The button is marked
   `pjl--button-inside`, which means exactly that: positioned within the field. */
.pjl-search-form-inner { position: relative; display: block; }
.pjl-search-form-field {
	width: 100%; height: 52px; padding: 0 56px 0 18px;
	border: 1px solid var(--pjl-rule); background: var(--pjl-paper);
	font-size: 15px;
}
.pjl-search-form-field:focus { border-color: var(--pjl-ink); outline: none; }
.pjl-search-form-field::-webkit-search-cancel-button { display: none; }
.pjl-search-form-button {
	position: absolute; top: 0; right: 0;
	width: 52px; height: 52px;
	display: inline-flex; align-items: center; justify-content: center;
	padding: 0; border: 0; background: none;
	color: var(--pjl-body); cursor: pointer;
	transition: color .2s var(--pjl-ease);
}
.pjl-search-form-button:hover { color: var(--pjl-ink); }
.pjl-search-form-button svg { width: 18px; height: 18px; }

.pjl-search-item { padding: 26px 0; border-bottom: 1px solid var(--pjl-rule); }
.pjl-search .pjl-e-inner { display: flex; gap: 24px; align-items: flex-start; }
.pjl-e-image { flex: 0 0 180px; }
.pjl-e-image a { display: block; }
/* Images in these blocks had no rule at all, so they rendered at their natural
   pixel size and blew past the column. */
.pjl-list-image, .pjl-m-image img, .pjl-e-image img {
	display: block; width: 100%; height: auto; max-width: 100%;
}
/* The tint is a placeholder for search-result thumbnails only. It used to be on
   the shared rule above, which also catches the footer logo — a white mark on a
   transparent background, so #f8f8f8 behind it rendered as a blank white box. */
.pjl-e-image img { aspect-ratio: 4 / 5; object-fit: cover; background: var(--pjl-surface); }
.pjl-search .pjl-e-content { flex: 1; min-width: 0; }
.pjl-e-title { margin: 0 0 8px; font-size: 18px; font-weight: 500; line-height: 1.35; }
.pjl-e-title-link { color: var(--pjl-ink); }
.pjl-e-title-link:hover { opacity: .6; }
.pjl-e-excerpt { margin: 0; font-size: 14px; }
@media (max-width: 620px) {
	.pjl-search .pjl-e-inner { gap: 16px; }
	.pjl-e-image { flex-basis: 110px; }
}

/* =============================================================================
   ABOUT / CONTACT gaps
   ========================================================================== */
/* The chapter copy is marked up as an <h5>, so without this it inherits heading
   size and weight and reads as a subtitle rather than a paragraph. */
.pjl-about-chapter__copy {
	margin: 18px 0 0;
	font-size: 16px; font-weight: 400; line-height: 1.69; color: var(--pjl-body);
}
.pjl-m-image { display: block; overflow: hidden; }
.pjl-single-image .pjl-m-image img { width: 100%; }

.pjl-contact-intro__form { display: flex; flex-direction: column; }
.pjl-contact-form-7 { margin-top: 26px; }
.pjl-contact-form-7 .wpcf7 form > p { margin: 0 0 16px; }
.pjl-contact-showroom { padding-top: 0; }

@media print {
	#pjl-page-header, #pjl-page-mobile-header, #pjl-page-footer, .pjl-hero-slider,
	.pjl-woo-product-image-inner, #pjl-back-to-top, .pjl-toast { display: none !important; }
	body { color: #000; }
}