/* Harsuvo — Print on Demand builder
 *
 * SPECIFICITY: Hello Commerce styles bare <button> at (0,1,2) via :is()/:not(),
 * which would paint every control here as a dark rounded pill. Every button rule
 * is prefixed with `.hsv-pod` to reach (0,2,0) and win. Don't remove the prefixes.
 */
.hsv-pod{--ink:#14110f;--ink7:#3b342e;--muted:#7d7269;--line:#e2ddd7;--paper:#fdfcfa;
	--brass:#b3944a;--wash:#f3f1ee;margin:26px 0 30px;color:var(--ink);font-family:inherit}
.hsv-pod *{box-sizing:border-box}
.hsv-pod__title{font-family:Georgia,"Times New Roman",serif;font-weight:400;font-size:26px;margin:0 0 6px}
.hsv-pod__sub{font-size:13.5px;color:var(--muted);margin:0 0 22px;line-height:1.55;max-width:720px}
.hsv-pod__empty{border:1px solid var(--line);background:var(--wash);padding:20px;font-size:14px}

/* strip the theme's button paint everywhere inside the builder */
.hsv-pod button,.hsv-pod [type="button"]{background:none;border:0;border-radius:0;padding:0;margin:0;
	font:inherit;color:inherit;text-transform:none;letter-spacing:normal;line-height:normal;
	box-shadow:none;transition:none;cursor:pointer;white-space:normal;width:auto;min-height:0}

/* ---------- screen 1 ---------- */
.hsv-pod__garments{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.hsv-pod .hsv-pod__garment{border:1px solid var(--line);background:var(--paper);padding:12px;
	display:flex;flex-direction:column;gap:4px;align-items:stretch;text-align:left;
	transition:border-color .15s,box-shadow .15s}
.hsv-pod .hsv-pod__garment:hover{border-color:var(--ink);box-shadow:0 2px 10px rgba(20,17,15,.07)}
.hsv-pod__garmentshot{display:block;width:100%;aspect-ratio:1/1;background:var(--wash) center/cover no-repeat;
	margin-bottom:8px}
.hsv-pod__garmentshot svg{width:100%;height:100%;display:block;color:var(--ink7)}
.hsv-pod__garmentname{font-size:14px;color:var(--ink)}
.hsv-pod__garmentprice{font-size:12.5px;color:var(--muted)}

/* ---------- screen 2 ---------- */
.hsv-pod .hsv-pod__back{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);
	margin-bottom:10px;display:inline-block}
.hsv-pod .hsv-pod__back:hover{color:var(--ink)}
.hsv-pod__grid{display:grid;grid-template-columns:minmax(0,540px) minmax(0,1fr);gap:34px;align-items:start}

.hsv-pod__stage{position:relative;border:1px solid var(--line);background:var(--wash)}
.hsv-pod__stage canvas{display:block;max-width:100%}
.hsv-pod__hint{position:absolute;left:0;right:0;bottom:16px;text-align:center;font-size:11px;
	letter-spacing:.12em;text-transform:uppercase;color:var(--muted);pointer-events:none}
.hsv-pod__sides{position:absolute;top:14px;left:14px;z-index:2;display:flex;border:1px solid var(--line);
	background:var(--paper)}
.hsv-pod .hsv-pod__side{padding:9px 20px;font-size:13px;color:var(--ink);position:relative}
.hsv-pod .hsv-pod__side.is-on{background:var(--ink);color:var(--paper)}
.hsv-pod .hsv-pod__side.has::after{content:"";position:absolute;top:5px;right:5px;width:8px;height:8px;
	border-radius:50%;background:var(--brass)}

.hsv-pod__tools{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.hsv-pod .hsv-pod__tool{border:1px solid var(--line);background:var(--paper);padding:7px 12px;
	font-size:12px;color:var(--ink);white-space:nowrap}
.hsv-pod .hsv-pod__tool:hover{border-color:var(--ink)}
.hsv-pod .hsv-pod__tool[disabled]{opacity:.35;cursor:not-allowed}
.hsv-pod .hsv-pod__tool--danger:hover{border-color:#8c2f26;color:#8c2f26}

.hsv-pod__dpi{margin-top:10px;padding:9px 12px;font-size:12px;line-height:1.5;border:1px solid var(--line)}
.hsv-pod__dpi.is-warn{border-color:#d8b46a;background:#fdf6e6;color:#7a5a18}
.hsv-pod__dpi.is-ok{border-color:#cfe0d2;background:#f2f8f3;color:#3f6b4d}

.hsv-pod__panel{display:flex;flex-direction:column;gap:22px;min-width:0}
.hsv-pod__field{display:flex;flex-direction:column;gap:9px;min-width:0}
.hsv-pod__label{font-size:11px;letter-spacing:.16em;text-transform:uppercase}
.hsv-pod__label em{font-style:normal;color:var(--muted);letter-spacing:.04em}
.hsv-pod__two{display:grid;grid-template-columns:1fr 1fr;gap:18px}

/* colours */
.hsv-pod__swatches{display:flex;flex-wrap:wrap;gap:14px}
.hsv-pod .hsv-pod__swatch{display:flex;flex-direction:column;align-items:center;gap:6px}
.hsv-pod .hsv-pod__swatch u{display:block;width:38px;height:38px;border-radius:50%;
	border:1px solid rgba(20,17,15,.25);text-decoration:none;transition:box-shadow .15s}
.hsv-pod .hsv-pod__swatch em{font-style:normal;font-size:10px;letter-spacing:.06em;
	text-transform:uppercase;color:var(--muted)}
.hsv-pod .hsv-pod__swatch.is-on u{box-shadow:0 0 0 2px var(--paper),0 0 0 4px var(--ink)}
.hsv-pod .hsv-pod__swatch.is-on em{color:var(--ink)}

/* upload + text */
.hsv-pod__drop{display:block;border:1px dashed #b9b1a8;background:var(--paper);padding:20px;
	text-align:center;cursor:pointer;min-height:118px}
.hsv-pod__drop:hover,.hsv-pod__drop.is-over{border-color:var(--ink);background:#fff}
.hsv-pod__drop input{position:absolute;width:1px;height:1px;opacity:0}
.hsv-pod__drop small{color:var(--muted);font-size:11px}
.hsv-pod__err{color:#8c2f26;font-size:12.5px;line-height:1.5}
.hsv-pod__textrow{display:flex;gap:8px;align-items:center}
.hsv-pod__textrow input[type=text]{flex:1;min-width:0;border:1px solid var(--line);background:var(--paper);
	padding:10px;font:inherit;font-size:13px;border-radius:0}
.hsv-pod__textrow select{flex:1;min-width:0}
.hsv-pod__textrow input[type=color]{width:46px;height:40px;padding:2px;border:1px solid var(--line);
	background:var(--paper);cursor:pointer;flex:0 0 auto}

/* layers */
.hsv-pod__layerlist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:5px}
.hsv-pod__layerempty{font-size:12px;color:var(--muted);padding:8px 0}
.hsv-pod__layer{display:flex;align-items:center;gap:6px;border:1px solid var(--line);
	background:var(--paper);padding:8px 10px;font-size:12.5px;cursor:pointer}
.hsv-pod__layer.is-on{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.hsv-pod__layer span{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hsv-pod .hsv-pod__layer button{font-size:12px;color:var(--muted);padding:2px 5px}
.hsv-pod .hsv-pod__layer button:hover{color:var(--ink)}

/* size */
.hsv-pod__sizes{display:flex;flex-wrap:wrap;gap:8px}
.hsv-pod .hsv-pod__size{border:1px solid var(--line);background:var(--paper);padding:11px 20px;
	font-size:13.5px;color:var(--ink);min-width:58px;text-align:center}
.hsv-pod .hsv-pod__size:hover{border-color:var(--ink)}
.hsv-pod .hsv-pod__size.is-on{border-color:var(--ink);background:var(--ink);color:var(--paper)}

.hsv-pod textarea{width:100%;border:1px solid var(--line);background:var(--paper);padding:10px;
	font:inherit;font-size:13px;border-radius:0;resize:vertical}
.hsv-pod select{border:1px solid var(--line);background:var(--paper);padding:10px;font:inherit;
	font-size:13px;border-radius:0}

/* footer */
.hsv-pod__foot{display:flex;align-items:center;justify-content:space-between;gap:16px;
	border-top:1px solid var(--line);padding-top:18px;flex-wrap:wrap}
.hsv-pod__price{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.hsv-pod__price strong{display:block;margin-top:4px;font-family:Georgia,serif;font-size:28px;
	letter-spacing:0;text-transform:none;color:var(--ink)}
.hsv-pod__summary{font-size:12px;color:var(--muted);margin-top:6px}
.hsv-pod .hsv-pod__continue{background:var(--ink);color:var(--paper);padding:16px 46px;font-size:13px;
	letter-spacing:.12em;text-transform:uppercase;min-width:200px;text-align:center}
.hsv-pod .hsv-pod__continue:hover{background:var(--ink7)}
.hsv-pod .hsv-pod__continue[disabled]{opacity:.35;cursor:not-allowed}
.hsv-pod .hsv-pod__nav{border:1px solid var(--ink);padding:10px 18px;font-size:12px;
	letter-spacing:.1em;text-transform:uppercase;color:var(--ink);flex:0 0 auto}
.hsv-pod .hsv-pod__nav:hover{background:var(--ink);color:var(--paper)}

/* Continue replaces Woo's own add-to-cart controls */
form.cart .quantity,form.cart .single_add_to_cart_button{display:none!important}

@media(max-width:1024px){
	.hsv-pod__garments{grid-template-columns:repeat(3,1fr)}
	.hsv-pod__grid{grid-template-columns:1fr}
	.hsv-pod__two{grid-template-columns:1fr}
}
@media(max-width:600px){
	.hsv-pod__garments{grid-template-columns:repeat(2,1fr)}
	.hsv-pod__foot{flex-direction:column;align-items:stretch}
	.hsv-pod .hsv-pod__continue{width:100%}
}

/* ==========================================================================
   Print size in millimetres, and quantity
   Every rule is prefixed .hsv-pod — see the note at the top of this file.
   ========================================================================== */
.hsv-pod .hsv-pod__dims {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 10px;
	padding: 10px 12px;
	background: #f7f4f0;
	border: 1px solid #e2ddd7;
}
.hsv-pod .hsv-pod__dimlabel {
	font-size: 11px;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: #5a5049;
	margin-right: 4px;
}
.hsv-pod .hsv-pod__dimfield { display: inline-flex; align-items: center; gap: 6px; }
.hsv-pod .hsv-pod__dimfield span { font-size: 12px; color: #7d7269; }
.hsv-pod .hsv-pod__dimfield input {
	width: 68px;
	padding: 7px 8px;
	border: 1px solid #c8c1ba;
	border-radius: 0;
	background: #fff;
	font-family: inherit;
	font-size: 14px;
	color: #14110f;
	text-align: center;
}
.hsv-pod .hsv-pod__dimfield input:focus { outline: 0; border-color: #14110f; }
.hsv-pod .hsv-pod__lock {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	padding: 0;
	border: 1px solid #c8c1ba;
	border-radius: 0;
	background: #fff;
	color: #a49a92;
	cursor: pointer;
	transition: color .16s, border-color .16s, background-color .16s;
}
.hsv-pod .hsv-pod__lock.is-on { color: #14110f; border-color: #14110f; background: #fff; }
.hsv-pod .hsv-pod__lock:hover { color: #14110f; }
.hsv-pod .hsv-pod__dimunit { font-size: 12px; color: #5a5049; }
.hsv-pod .hsv-pod__dimmax {
	margin-left: auto;
	font-size: 11px;
	color: #7d7269;
	white-space: nowrap;
}

.hsv-pod .hsv-pod__qty { display: inline-flex; align-items: stretch; }
.hsv-pod .hsv-pod__qtybtn {
	width: 40px;
	border: 1px solid #c8c1ba;
	background: #fff;
	color: #14110f;
	font-size: 17px;
	line-height: 1;
	cursor: pointer;
	transition: background-color .16s;
}
.hsv-pod .hsv-pod__qtybtn:hover { background: #f7f4f0; }
.hsv-pod .hsv-pod__qty input {
	width: 64px;
	padding: 10px 6px;
	border: 1px solid #c8c1ba;
	border-left: 0;
	border-right: 0;
	border-radius: 0;
	background: #fff;
	font-family: inherit;
	font-size: 15px;
	color: #14110f;
	text-align: center;
	-moz-appearance: textfield;
}
.hsv-pod .hsv-pod__qty input::-webkit-outer-spin-button,
.hsv-pod .hsv-pod__qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.hsv-pod .hsv-pod__lead {
	margin: 10px 0 0;
	font-size: 12px;
	color: #5a5049;
}

@media (max-width: 560px) {
	.hsv-pod .hsv-pod__dimmax { margin-left: 0; width: 100%; }
}

/* ==========================================================================
   Studio layout — mockup and icon bar on the left, garment spec on the right.
   One screen: the product being viewed is the garment.
   ========================================================================== */
.hsv-pod .hsv-pod__methods {
	padding: 10px 14px;
	margin-bottom: 14px;
	background: #f7f4f0;
	border: 1px solid #e2ddd7;
	font-size: 13px;
	color: #3b342e;
}
/* ---- numbered steps ------------------------------------------------- */
.hsv-pod .hsv-pod__step {
	display: inline-grid;
	place-items: center;
	width: 18px;
	height: 18px;
	margin-right: 8px;
	border-radius: 50%;
	background: #14110f;
	color: #fdfcfa;
	font-size: 10px;
	font-style: normal;
	letter-spacing: 0;
	vertical-align: -3px;
}

/* ---- step 3: placements -------------------------------------------- */
.hsv-pod .hsv-pod__place select { width: 100%; }
.hsv-pod .hsv-pod__area {
	display: block;
	margin-top: 7px;
	font-size: 12px;
	color: #7d7269;
}
.hsv-pod .hsv-pod__locknote {
	margin: 0 0 10px;
	padding: 10px 12px;
	border: 1px dashed #c8c1ba;
	background: #f7f4f0;
	font-size: 12.5px;
	line-height: 1.45;
	color: #5a5049;
}
.hsv-pod .hsv-pod__places {
	margin-top: 12px;
	border-top: 1px solid #e2ddd7;
}
.hsv-pod .hsv-pod__placerow {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	padding: 9px 0;
	border-bottom: 1px solid #e2ddd7;
	font-size: 13px;
}
.hsv-pod .hsv-pod__placename { color: #3b342e; }
.hsv-pod .hsv-pod__placename em {
	display: block;
	font-style: normal;
	font-size: 11.5px;
	color: #7d7269;
}
.hsv-pod .hsv-pod__placemeta {
	flex: 0 0 auto;
	text-align: right;
	font-size: 11.5px;
	color: #7d7269;
	white-space: nowrap;
}
.hsv-pod .hsv-pod__placemeta b {
	display: block;
	font-weight: 500;
	font-size: 13px;
	color: #14110f;
}
/* A placement that already carries artwork. */
.hsv-pod .hsv-pod__placerow.is-on { border-left: 2px solid #b3944a; padding-left: 9px; }
.hsv-pod .hsv-pod__placerow.is-on .hsv-pod__placemeta b { color: #8a7134; }
.hsv-pod .hsv-pod__placefoot {
	margin: 10px 0 0;
	font-size: 11.5px;
	line-height: 1.5;
	color: #7d7269;
}

/* ---- locked until a size is chosen --------------------------------- */
.hsv-pod .hsv-pod__locknote { display: none; }
.hsv-pod.is-locked .hsv-pod__locknote { display: block; }
.hsv-pod.is-locked .hsv-pod__places,
.hsv-pod.is-locked .hsv-pod__area,
.hsv-pod.is-locked .hsv-pod__placefoot,
.hsv-pod.is-locked .hsv-pod__bar,
.hsv-pod.is-locked .hsv-pod__minor,
.hsv-pod.is-locked .hsv-pod__drawer {
	opacity: .4;
	pointer-events: none;
}
.hsv-pod.is-locked .hsv-pod__place select { opacity: .5; }

/* The hidden attribute loses to any rule that sets display, and the toolbar,
   the tool row and the tabs all set one. State it explicitly. */
.hsv-pod .hsv-pod__bar[hidden],
.hsv-pod .hsv-pod__minor[hidden],
.hsv-pod .hsv-pod__tab[hidden],
.hsv-pod .hsv-pod__source[hidden] { display: none !important; }

/* ---- where the design comes from ------------------------------------ */
.hsv-pod .hsv-pod__tabs {
	display: flex;
	gap: 2px;
	margin: 14px 0 0;
	border-bottom: 1px solid #e2ddd7;
}
.hsv-pod .hsv-pod__tab {
	flex: 1;
	padding: 11px 10px;
	margin: 0;
	border: 0;
	border-bottom: 2px solid transparent;
	border-radius: 0;
	background: none;
	color: #7d7269;
	font-family: inherit;
	font-size: 12.5px;
	letter-spacing: .04em;
	cursor: pointer;
	transition: color .18s ease, border-color .18s ease;
}
.hsv-pod .hsv-pod__tab:hover { color: #14110f; }
.hsv-pod .hsv-pod__tab.is-on {
	color: #14110f;
	border-bottom-color: #14110f;
	font-weight: 500;
}

/* ---- the design library --------------------------------------------- */
.hsv-pod .hsv-pod__dfilter { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.hsv-pod .hsv-pod__chip {
	padding: 5px 12px;
	margin: 0;
	border: 1px solid #e2ddd7;
	border-radius: 999px;
	background: #fdfcfa;
	color: #5a5049;
	font-family: inherit;
	font-size: 11.5px;
	cursor: pointer;
}
.hsv-pod .hsv-pod__chip:hover { border-color: #14110f; color: #14110f; }
.hsv-pod .hsv-pod__chip.is-on { background: #14110f; border-color: #14110f; color: #fdfcfa; }

.hsv-pod .hsv-pod__dgrid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
	gap: 10px;
	max-height: 320px;
	overflow-y: auto;
}
.hsv-pod .hsv-pod__dcard {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 5px;
	padding: 9px 7px 10px;
	margin: 0;
	border: 1px solid #e2ddd7;
	border-radius: 0;
	background: #fff;
	font-family: inherit;
	cursor: pointer;
	transition: border-color .18s ease, box-shadow .18s ease;
}
.hsv-pod .hsv-pod__dcard:hover { border-color: #14110f; box-shadow: 0 2px 10px rgba(20,17,15,.08); }
.hsv-pod .hsv-pod__dcard.is-on { border-color: #7c5334; box-shadow: inset 0 0 0 1px #7c5334; }
.hsv-pod .hsv-pod__dshot {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 78px;
	overflow: hidden;
}
.hsv-pod .hsv-pod__dshot img { max-width: 100%; max-height: 78px; width: auto; height: auto; display: block; }
.hsv-pod .hsv-pod__dname { font-size: 12px; color: #14110f; line-height: 1.25; text-align: center; }
.hsv-pod .hsv-pod__dsize { font-size: 10.5px; color: #7d7269; }
.hsv-pod .hsv-pod__dempty,
.hsv-pod .hsv-pod__dnote { grid-column: 1 / -1; margin: 0; font-size: 12.5px; color: #7d7269; line-height: 1.5; }

/* ---- print or embroidery -------------------------------------------- */
.hsv-pod .hsv-pod__method {
	margin: 18px 0 0;
	padding: 14px 15px;
	border: 1px solid #e2ddd7;
	background: #f7f4f0;
}
.hsv-pod .hsv-pod__methodq,
.hsv-pod .hsv-pod__tabsq {
	display: block;
	margin-bottom: 9px;
	font-size: 11px;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: #5a5049;
}
.hsv-pod .hsv-pod__tabsq { margin-top: 20px; }
.hsv-pod .hsv-pod__methods { display: flex; gap: 9px; flex-wrap: wrap; }
/* Each option carries its own explanation, so the limits are read before a
   choice is made rather than after it is refused. */
.hsv-pod .hsv-pod__methodopt {
	flex: 1 1 210px;
	display: grid;
	grid-template-columns: auto 1fr;
	grid-template-rows: auto auto;
	align-items: start;
	gap: 3px 10px;
	padding: 12px 14px;
	border: 1px solid #c8c1ba;
	background: #fff;
	font-size: 13.5px;
	color: #14110f;
	cursor: pointer;
	transition: border-color .18s ease;
}
.hsv-pod .hsv-pod__methodname { grid-column: 2; font-weight: 500; }
.hsv-pod .hsv-pod__methodwhat {
	grid-column: 2;
	font-style: normal;
	font-size: 11.5px;
	line-height: 1.45;
	color: #7d7269;
}
.hsv-pod .hsv-pod__methodopt:hover { border-color: #14110f; }
.hsv-pod .hsv-pod__methodopt.is-on { border-color: #14110f; box-shadow: inset 0 0 0 1px #14110f; }
.hsv-pod .hsv-pod__methodopt input { grid-column: 1; grid-row: 1; accent-color: #7c5334; margin: 2px 0 0; }
.hsv-pod .hsv-pod__methodopt b { font-weight: 500; color: #8a7134; }
/* Not possible for this artwork — shown, but plainly out of reach. */
.hsv-pod .hsv-pod__methodopt.is-off { opacity: .42; cursor: not-allowed; }
.hsv-pod .hsv-pod__methodopt.is-off:hover { border-color: #c8c1ba; }
.hsv-pod .hsv-pod__methodnote {
	margin: 10px 0 0;
	font-size: 12px;
	line-height: 1.5;
	color: #5a5049;
}

/* ---- reassurance beside the basket button --------------------------- */
.hsv-pod .hsv-pod__trust {
	list-style: none;
	margin: 16px 0 0;
	padding: 14px 0 0;
	border-top: 1px solid #e2ddd7;
	display: grid;
	gap: 9px;
}
.hsv-pod .hsv-pod__trust li {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 10px;
	font-size: 12px;
}
.hsv-pod .hsv-pod__trust strong {
	font-weight: 500;
	color: #14110f;
	white-space: nowrap;
}
.hsv-pod .hsv-pod__trust span { color: #7d7269; text-align: right; }

.hsv-pod .hsv-pod__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 330px;
	gap: 34px;
	align-items: start;
}
.hsv-pod .hsv-pod__main { min-width: 0; }

/* Icon toolbar under the mockup */
.hsv-pod .hsv-pod__bar {
	display: flex;
	align-items: center;
	gap: 6px;
	flex-wrap: wrap;
	margin-top: 12px;
	padding: 7px;
	border: 1px solid #e2ddd7;
	background: #fff;
}
.hsv-pod .hsv-pod__ico {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 36px;
	padding: 0;
	border: 1px solid transparent;
	border-radius: 0;
	background: transparent;
	color: #3b342e;
	cursor: pointer;
	transition: background-color .16s, color .16s, border-color .16s;
}
.hsv-pod .hsv-pod__ico:hover:not(:disabled) { background: #f7f4f0; }
.hsv-pod .hsv-pod__ico.is-on { background: #14110f; border-color: #14110f; color: #fdfcfa; }
.hsv-pod .hsv-pod__ico:disabled { opacity: .3; cursor: default; }
.hsv-pod .hsv-pod__ico--danger:hover:not(:disabled) { background: #8c2f26; border-color: #8c2f26; color: #fdfcfa; }
.hsv-pod .hsv-pod__barsep { width: 1px; height: 22px; background: #e2ddd7; margin: 0 4px; }

.hsv-pod .hsv-pod__minor { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }

/* Drawers revealed by the icon bar */
.hsv-pod .hsv-pod__drawer {
	margin-top: 14px;
	padding: 14px;
	border: 1px solid #e2ddd7;
	background: #fff;
}

/* Right-hand spec column */
.hsv-pod .hsv-pod__spec {
	padding: 20px;
	border: 1px solid #e2ddd7;
	background: #fff;
	position: sticky;
	top: 96px;
}
.hsv-pod .hsv-pod__specname {
	margin: 0 0 6px;
	font-size: 21px;
	line-height: 1.2;
	color: #14110f;
}
.hsv-pod .hsv-pod__specprice {
	margin-bottom: 18px;
	padding-bottom: 16px;
	border-bottom: 1px solid #e2ddd7;
	font-size: 17px;
	color: #14110f;
}
.hsv-pod .hsv-pod__spec select,
.hsv-pod .hsv-pod__spec textarea {
	width: 100%;
	padding: 10px 12px;
	border: 1px solid #c8c1ba;
	border-radius: 0;
	background: #fff;
	font-family: inherit;
	font-size: 14px;
	color: #14110f;
}
.hsv-pod .hsv-pod__spec .hsv-pod__field { margin-bottom: 16px; }
.hsv-pod .hsv-pod__spec .hsv-pod__label { display: block; margin-bottom: 6px; }
.hsv-pod .hsv-pod__spec .hsv-pod__swatches { margin-top: 9px; }
.hsv-pod .hsv-pod__foot { display: block; margin-top: 6px; }
.hsv-pod .hsv-pod__foot .hsv-pod__continue { width: 100%; margin-top: 12px; }
.hsv-pod .hsv-pod__empty { padding: 40px 20px; text-align: center; color: #5a5049; }

@media (max-width: 1024px) {
	.hsv-pod .hsv-pod__grid { grid-template-columns: 1fr; gap: 24px; }
	.hsv-pod .hsv-pod__spec { position: static; }
}