/* =========================================================================
   Health, Hope & Hip-Hop — shop page skin
   v2.4.0

   Install to: /wp-content/themes/YOUR-CHILD-THEME/css/hhhh-shop.css

   PASTING INTO APPEARANCE > CUSTOMIZE > ADDITIONAL CSS INSTEAD?
   Uncomment the @import on the next line and put it as the VERY FIRST
   line in that box — @import fails anywhere else.
   ========================================================================= */

/* @import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@400;500;600;700&family=League+Spartan:wght@400;600;700;800;900&family=Montserrat:wght@400;500;600;700&display=swap'); */

.hhhh-shop-skin {
	--hhhh-ink: #0B0A09;
	--hhhh-espresso: #2F2925;
	--hhhh-bone: #F5EFE2;
	--hhhh-bone-dim: #B9B0A2;
	--hhhh-gold: #F8CF2C;
	--hhhh-crimson: #801220;
	--hhhh-flame: #DA361A;
	--hhhh-hair: rgba(245, 239, 226, .14);
	--hhhh-display: "League Spartan", Impact, sans-serif;
	--hhhh-body: "Montserrat", system-ui, sans-serif;
	--hhhh-util: "Barlow Condensed", "Arial Narrow", sans-serif;
	--hhhh-wrap: 1180px;
}

/* -------------------------------------------------------------------------
   Page canvas. Scoped to the body class so nothing leaks to other pages.
   ---------------------------------------------------------------------- */

body.hhhh-shop-skin {
	background: var(--hhhh-ink);
	color: var(--hhhh-bone);
	font-family: var(--hhhh-body);
}

.hhhh-shop-skin .site-content,
.hhhh-shop-skin .content-area,
.hhhh-shop-skin #primary,
.hhhh-shop-skin #main {
	background: var(--hhhh-ink);
}

.hhhh-shop-skin img {
	max-width: 100%;
	height: auto;
}

.hhhh-wrap {
	width: 100%;
	max-width: var(--hhhh-wrap);
	margin: 0 auto;
	padding: 0 24px;
}

/* Full-bleed helper: breaks a section out of the theme's content column. */
.hhhh-bleed {
	position: relative;
	left: 50%;
	right: 50%;
	width: 100vw;
	max-width: 100vw;
	margin-left: -50vw;
	margin-right: -50vw;
}

/* Accessibility floor. */
.hhhh-shop-skin a:focus-visible,
.hhhh-shop-skin button:focus-visible {
	outline: 3px solid var(--hhhh-gold);
	outline-offset: 3px;
	border-radius: 2px;
}

@media (prefers-reduced-motion: reduce) {
	.hhhh-shop-skin *,
	.hhhh-shop-skin *::before,
	.hhhh-shop-skin *::after {
		animation-duration: .001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .001ms !important;
	}
}

/* -------------------------------------------------------------------------
   Shared type
   ---------------------------------------------------------------------- */

.hhhh-shop-skin .hhhh-eyebrow {
	font-family: var(--hhhh-util);
	text-transform: uppercase;
	letter-spacing: .22em;
	font-weight: 600;
	font-size: .78rem;
	color: var(--hhhh-gold);
	margin: 0;
	line-height: 1.4;
}

.hhhh-shop-skin .hhhh-eyebrow--muted {
	color: var(--hhhh-bone-dim);
}

.hhhh-shop-skin .hhhh-section-head {
	margin: 0 0 36px;
	max-width: 660px;
}

/* The grid's own heading gets more room than the others — it is the one
   sitting directly on top of the product cards. */
.hhhh-shop-skin #hhhh-drop .hhhh-section-head {
	margin-bottom: 56px;
}

.hhhh-shop-skin .hhhh-section-head h2 {
	font-family: var(--hhhh-display);
	font-weight: 800;
	text-transform: uppercase;
	font-size: clamp(1.9rem, 4.4vw, 3rem);
	line-height: .95;
	letter-spacing: -.02em;
	color: var(--hhhh-bone);
	margin: 12px 0 14px;
}

.hhhh-shop-skin .hhhh-section-head p {
	margin: 0;
	color: var(--hhhh-bone-dim);
}

/* -------------------------------------------------------------------------
   Buttons
   ---------------------------------------------------------------------- */

.hhhh-shop-skin .hhhh-btn,
.hhhh-shop-skin ul.products li.product .button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	font-family: var(--hhhh-util);
	text-transform: uppercase;
	letter-spacing: .16em;
	font-weight: 700;
	font-size: .88rem;
	line-height: 1;
	text-decoration: none;
	padding: 15px 30px;
	border: 1px solid transparent;
	border-radius: 2px;
	cursor: pointer;
	transition: transform .16s ease, background .16s ease, color .16s ease, border-color .16s ease;
}

.hhhh-shop-skin .hhhh-btn--gold,
.hhhh-shop-skin ul.products li.product .button {
	background: var(--hhhh-gold);
	color: #000;
}

.hhhh-shop-skin .hhhh-btn--gold:hover,
.hhhh-shop-skin ul.products li.product .button:hover {
	background: #FFDC4D;
	color: #000;
	transform: translateY(-2px);
}

.hhhh-shop-skin .hhhh-btn--ghost {
	background: transparent;
	color: var(--hhhh-bone);
	border-color: rgba(245, 239, 226, .32);
}

.hhhh-shop-skin .hhhh-btn--ghost:hover {
	border-color: var(--hhhh-gold);
	color: var(--hhhh-gold);
}

.hhhh-shop-skin .hhhh-cta-row {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	justify-content: center;
	margin: 28px 0 60px;
}

/* -------------------------------------------------------------------------
   Hero — the chest print
   ---------------------------------------------------------------------- */

.hhhh-shop-skin .hhhh-hero {
	padding: 76px 0 0;
	background:
		radial-gradient(115% 78% at 50% 0%, rgba(248, 207, 44, .13) 0%, rgba(248, 207, 44, 0) 58%),
		var(--hhhh-ink);
	overflow: hidden;
}

.hhhh-shop-skin .hhhh-print {
	position: relative;
	max-width: 940px;
	margin: 0 auto;
	padding: 34px 8px 26px;
	text-align: center;
}

.hhhh-shop-skin .hhhh-print__frame {
	position: absolute;
	inset: 0;
	border: 1px dashed rgba(248, 207, 44, .34);
	border-radius: 3px;
	pointer-events: none;
}

.hhhh-shop-skin .hhhh-print__head {
	font-family: var(--hhhh-display);
	font-weight: 900;
	text-transform: uppercase;
	font-size: clamp(2.9rem, 12.4vw, 8.2rem);
	line-height: .84;
	letter-spacing: -.035em;
	margin: 0;
	color: var(--hhhh-bone);
}

.hhhh-shop-skin .hhhh-print__head span {
	display: block;
}

.hhhh-shop-skin .hhhh-print__head .is-hit {
	color: transparent;
	-webkit-text-stroke: 2px var(--hhhh-gold);
	paint-order: stroke fill;
}

@supports not (-webkit-text-stroke: 1px #000) {
	.hhhh-shop-skin .hhhh-print__head .is-hit {
		color: var(--hhhh-gold);
	}
}

.hhhh-shop-skin .hhhh-print__head .is-fill {
	color: var(--hhhh-gold);
}

.hhhh-shop-skin .hhhh-hero__sub {
	max-width: 640px;
	margin: 26px auto 0;
	color: var(--hhhh-bone-dim);
	font-size: 1.02rem;
	line-height: 1.6;
	text-align: center;
}

.hhhh-shop-skin .hhhh-hero__sub strong {
	color: var(--hhhh-bone);
	font-weight: 600;
}

/* -------------------------------------------------------------------------
   Ticker
   ---------------------------------------------------------------------- */

.hhhh-shop-skin .hhhh-ticker {
	border-top: 1px solid var(--hhhh-hair);
	border-bottom: 1px solid var(--hhhh-hair);
	background: var(--hhhh-crimson);
	overflow: hidden;
	padding: 11px 0;
	margin-bottom: 72px;
}

.hhhh-shop-skin .hhhh-ticker__track {
	display: flex;
	width: max-content;
	animation: hhhh-roll 34s linear infinite;
}

.hhhh-shop-skin .hhhh-ticker:hover .hhhh-ticker__track {
	animation-play-state: paused;
}

.hhhh-shop-skin .hhhh-ticker__track span {
	font-family: var(--hhhh-util);
	text-transform: uppercase;
	letter-spacing: .24em;
	font-weight: 600;
	font-size: .82rem;
	color: var(--hhhh-bone);
	padding: 0 22px;
	white-space: nowrap;
}

.hhhh-shop-skin .hhhh-ticker__track span::after {
	content: "\2726";
	color: var(--hhhh-gold);
	margin-left: 22px;
}

@keyframes hhhh-roll {
	from { transform: translate3d(0, 0, 0); }
	to { transform: translate3d(-50%, 0, 0); }
}

/* -------------------------------------------------------------------------
   Product grid — overrides WooCommerce's float layout
   ---------------------------------------------------------------------- */

.hhhh-shop-skin ul.products {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(258px, 1fr));
	gap: 22px;
	/* Forced: page builders routinely zero the archive list's margin, which
	   collapses the gap between the last card and the section below. */
	margin: 0 auto 76px !important;
	padding: 0;
	max-width: var(--hhhh-wrap);
	list-style: none;
	/* Cards must be the same height whatever their content, or a short one
	   (the cap) ends above the rest of the row. */
	align-items: stretch;
}

.hhhh-shop-skin ul.products::before,
.hhhh-shop-skin ul.products::after {
	content: none;
}

.hhhh-shop-skin ul.products li.product {
	width: auto;
	float: none;
	margin: 0;
	padding: 0;
	/* Forced, and this is the rule the whole card layout depends on.
	   WooCommerce themes set li.product to display:block. In a block box the
	   body cannot stretch to fill the card, so the price row's auto margin has
	   no free space to absorb — and every card's price, Qty row and button sit
	   at whatever height its own copy happens to end at, instead of on one
	   baseline across the row. */
	display: flex !important;
	flex-direction: column !important;
	height: 100%;
	background: var(--hhhh-espresso);
	border: 1px solid var(--hhhh-hair);
	border-radius: 3px;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	transition: border-color .2s ease, transform .2s ease;
}

.hhhh-shop-skin ul.products li.product:hover {
	border-color: rgba(248, 207, 44, .55);
	transform: translateY(-3px);
}

/* Media */
.hhhh-shop-skin .hhhh-card__media {
	position: relative;
	background: #fff;
	aspect-ratio: 1 / 1;
	overflow: hidden;
}

.hhhh-shop-skin .hhhh-card__imglink {
	display: block;
	height: 100%;
}

.hhhh-shop-skin .hhhh-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	margin: 0;
}

/* The photo switcher toggles the hidden attribute. Themes routinely set
   img{display:block}, which beats the browser's own [hidden] rule and leaves
   every gallery photo stacked and visible — the dots then appear to do
   nothing. !important is the fix, and it belongs here rather than in the JS. */
.hhhh-shop-skin .hhhh-card__media img[hidden],
.hhhh-shop-skin .hhhh-card__media picture[hidden] {
	display: none !important;
}

.hhhh-shop-skin .hhhh-tag {
	position: absolute;
	bottom: 12px;
	right: 12px;
	z-index: 2;
	font-family: var(--hhhh-util);
	text-transform: uppercase;
	letter-spacing: .12em;
	font-weight: 700;
	font-size: .68rem;
	border-radius: 2px;
	/* A locked box — width AND min/max, height AND min/max — so no wording,
	   font fallback, or inherited theme rule can change one badge's size. */
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	box-sizing: border-box;
	width: 112px;
	min-width: 112px;
	max-width: 112px;
	height: 26px;
	min-height: 26px;
	max-height: 26px;
	padding: 0 6px;
	line-height: 1;
	/* Letter-spacing leaves a trailing gap after the last character, which
	   pulls centered text visibly to the left. This nudges it back. */
	text-indent: .12em;
	text-align: center;
	white-space: nowrap;
	overflow: hidden;
	/* Identical edge definition on every badge, whatever photo is behind it. */
	box-shadow: 0 1px 4px rgba(0, 0, 0, .35);
}

.hhhh-shop-skin .hhhh-tag--gold { background: var(--hhhh-gold); color: #000; }
.hhhh-shop-skin .hhhh-tag--flame { background: var(--hhhh-flame); color: #fff; }
.hhhh-shop-skin .hhhh-tag--crimson { background: var(--hhhh-crimson); color: #fff; }

.hhhh-shop-skin .hhhh-thumbs {
	position: absolute;
	bottom: 10px;
	left: 10px;
	z-index: 3;
	display: flex;
	gap: 6px;
}

.hhhh-shop-skin .hhhh-thumbs button {
	width: 9px;
	height: 9px;
	padding: 0;
	border-radius: 50%;
	cursor: pointer;
	border: 1px solid rgba(11, 10, 9, .55);
	background: rgba(255, 255, 255, .7);
	transition: background .18s, transform .18s;
}

.hhhh-shop-skin .hhhh-thumbs button[aria-pressed="true"] {
	background: var(--hhhh-flame);
	transform: scale(1.25);
}

/* Card text is left-aligned in the design. WooCommerce themes almost always
   centre everything inside li.product, which pulls the title, description,
   size label and Qty label to the middle. Reset it here, and re-centre only
   the two things that are meant to be centred. */
.hhhh-shop-skin ul.products li.product,
.hhhh-shop-skin .hhhh-card__body,
.hhhh-shop-skin .hhhh-card__body > * {
	text-align: left;
}

.hhhh-shop-skin .hhhh-card__cta .hhhh-btn,
.hhhh-shop-skin .hhhh-card__cta .button,
.hhhh-shop-skin .hhhh-feedback {
	text-align: center;
}

/* Body */
.hhhh-shop-skin .hhhh-card__body {
	padding: 20px 20px 22px;
	display: flex;
	flex-direction: column;
	/* Forced for the same reason as the card above: the body has to take all
	   the leftover height, or the auto margin on the price row does nothing. */
	flex: 1 1 auto !important;
	gap: 10px;
}

.hhhh-shop-skin .hhhh-card__title {
	font-family: var(--hhhh-display);
	font-weight: 800;
	text-transform: uppercase;
	font-size: 1.16rem;
	line-height: 1.05;
	letter-spacing: -.01em;
	margin: 2px 0 0;
}

.hhhh-shop-skin .hhhh-card__title a {
	color: var(--hhhh-bone);
	text-decoration: none;
}

.hhhh-shop-skin .hhhh-card__title a:hover {
	color: var(--hhhh-gold);
}

.hhhh-shop-skin .hhhh-card__desc {
	margin: 0;
	font-size: .9rem;
	line-height: 1.5;
	color: var(--hhhh-bone-dim);
}

.hhhh-shop-skin .hhhh-sizes {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	/* Matches the swatch row's tap-target height so a one-size product's
	   card lines up with the sized ones across the grid. */
	align-items: center;
	min-height: 44px;
}

.hhhh-shop-skin .hhhh-sizes span {
	font-family: var(--hhhh-util);
	font-weight: 600;
	font-size: .78rem;
	letter-spacing: .08em;
	border: 1px solid rgba(245, 239, 226, .24);
	border-radius: 2px;
	padding: 3px 9px;
	color: var(--hhhh-bone-dim);
}

/* This auto margin is what keeps every card's price row and button on one
   baseline across the row, however much copy sits above them. Themes that set
   a margin on div elements can cancel it, so it is forced. */
.hhhh-shop-skin .hhhh-price-row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	margin-top: auto !important;
	padding-top: 6px;
}

.hhhh-shop-skin .hhhh-price,
.hhhh-shop-skin .hhhh-price .amount,
.hhhh-shop-skin ul.products li.product .price {
	font-family: var(--hhhh-util);
	font-weight: 700;
	font-size: 1.7rem;
	line-height: 1;
	letter-spacing: .01em;
	color: var(--hhhh-gold);
	margin: 0;
}

.hhhh-shop-skin ul.products li.product .price del {
	opacity: .5;
	font-size: 1.1rem;
}

.hhhh-shop-skin .hhhh-stock {
	font-family: var(--hhhh-util);
	text-transform: uppercase;
	letter-spacing: .14em;
	font-size: .72rem;
	color: var(--hhhh-bone-dim);
}

.hhhh-shop-skin .hhhh-card__cta .button,
.hhhh-shop-skin .hhhh-btn--block {
	width: 100%;
	margin-top: 4px;
}

/* WooCommerce appends its own "View cart" link after an AJAX add. The card
   already prints one in the feedback line below the button, and on themes that
   style .added_to_cart as a filled button it renders as gold text on a gold
   ground — a blank yellow bar. Hide Woo's; keep ours. */
.hhhh-shop-skin ul.products li.product .added_to_cart {
	display: none !important;
}

/* -------------------------------------------------------------------------
   Size swatches + inline add-to-cart
   ---------------------------------------------------------------------- */

.hhhh-shop-skin .hhhh-swatch-label {
	font-family: var(--hhhh-util);
	text-transform: uppercase;
	letter-spacing: .18em;
	font-size: .74rem;
	color: var(--hhhh-bone-dim);
	margin: 0;
}

.hhhh-shop-skin .hhhh-swatch-label b {
	color: var(--hhhh-bone);
	font-family: var(--hhhh-body);
	font-size: .82rem;
	font-weight: 600;
	letter-spacing: 0;
}

.hhhh-shop-skin .hhhh-swatches {
	display: flex;
	flex-wrap: wrap;
	gap: 7px;
}

.hhhh-shop-skin .hhhh-swatches button {
	font-family: var(--hhhh-util);
	font-weight: 700;
	font-size: .86rem;
	letter-spacing: .08em;
	/* 44px tall — the minimum comfortable tap target on a phone. */
	min-width: 44px;
	min-height: 44px;
	padding: 9px 11px;
	cursor: pointer;
	background: transparent;
	color: var(--hhhh-bone);
	border: 1px solid rgba(245, 239, 226, .3);
	border-radius: 2px;
	transition: background .15s, color .15s, border-color .15s;
}

.hhhh-shop-skin .hhhh-swatches button:hover:not(:disabled) {
	border-color: var(--hhhh-gold);
	color: var(--hhhh-gold);
}

.hhhh-shop-skin .hhhh-swatches button[aria-checked="true"] {
	background: var(--hhhh-gold);
	border-color: var(--hhhh-gold);
	color: #000;
}

/* Sold out: struck through, so people know before they commit. */
.hhhh-shop-skin .hhhh-swatches button:disabled {
	color: #6E665C;
	border-color: rgba(245, 239, 226, .12);
	cursor: not-allowed;
	background: linear-gradient(to top left,
		transparent 47.5%,
		rgba(245, 239, 226, .28) 48%,
		rgba(245, 239, 226, .28) 52%,
		transparent 52.5%);
}

/* Nudge when someone hits Add to cart without choosing. */
.hhhh-shop-skin .hhhh-swatches.is-nudge {
	animation: hhhh-nudge .4s ease;
}

@keyframes hhhh-nudge {
	0%, 100% { transform: translateX(0); }
	25% { transform: translateX(-5px); }
	75% { transform: translateX(5px); }
}

/* Quantity stepper */
.hhhh-shop-skin .hhhh-qty {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
}

.hhhh-shop-skin .hhhh-qty__label {
	font-family: var(--hhhh-util);
	text-transform: uppercase;
	letter-spacing: .18em;
	font-size: .74rem;
	color: var(--hhhh-bone-dim);
	margin: 0;
}

.hhhh-shop-skin .hhhh-qty__ctrl {
	display: flex;
	align-items: stretch;
	border: 1px solid rgba(245, 239, 226, .3);
	border-radius: 2px;
	overflow: hidden;
}

.hhhh-shop-skin .hhhh-qty__ctrl button {
	/* 44px square — the minimum comfortable tap target on a phone. */
	width: 44px;
	min-height: 44px;
	padding: 0;
	background: transparent;
	color: var(--hhhh-bone);
	border: 0;
	/* Square, as designed. The rounded corner comes from the theme's own
	   button styling — the stepper's outer frame carries the only radius. */
	border-radius: 0;
	cursor: pointer;
	font-family: var(--hhhh-util);
	font-size: 1.3rem;
	font-weight: 700;
	line-height: 1;
	transition: background .15s, color .15s;
}

.hhhh-shop-skin .hhhh-qty__ctrl button:hover:not(:disabled) {
	background: var(--hhhh-gold);
	color: #000;
}

.hhhh-shop-skin .hhhh-qty__ctrl button:disabled {
	color: #6E665C;
	cursor: not-allowed;
}

.hhhh-shop-skin .hhhh-qty__ctrl input {
	width: 52px;
	min-height: 44px;
	text-align: center;
	background: transparent;
	color: var(--hhhh-bone);
	border: 0;
	border-left: 1px solid rgba(245, 239, 226, .3);
	border-right: 1px solid rgba(245, 239, 226, .3);
	font-family: var(--hhhh-util);
	font-weight: 700;
	font-size: 1rem;
	border-radius: 0;
	-moz-appearance: textfield;
	appearance: textfield;
}

/* Kill the browser's own tiny spinners — we have real 44px buttons. */
.hhhh-shop-skin .hhhh-qty__ctrl input::-webkit-outer-spin-button,
.hhhh-shop-skin .hhhh-qty__ctrl input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.hhhh-shop-skin .hhhh-qty__note {
	margin: 6px 0 0;
	min-height: 1.1em;
	font-size: .76rem;
	color: var(--hhhh-bone-dim);
}

/* Button states */
.hhhh-shop-skin .hhhh-addbtn {
	text-align: center;
}

.hhhh-shop-skin .hhhh-addbtn.is-disabled {
	background: #5B5348;
	color: #9A9184;
	cursor: default;
}

.hhhh-shop-skin .hhhh-addbtn.is-disabled:hover {
	background: #5B5348;
	transform: none;
}

.hhhh-shop-skin .hhhh-addbtn.is-loading {
	opacity: .75;
	cursor: progress;
}

.hhhh-shop-skin .hhhh-addbtn.is-done {
	background: #2E7D4F;
	color: #fff;
}

.hhhh-shop-skin .hhhh-addbtn.is-done:hover {
	background: #2E7D4F;
	transform: none;
}

.hhhh-shop-skin .hhhh-feedback {
	margin: 8px 0 0;
	min-height: 1.2em;
	font-family: var(--hhhh-util);
	text-transform: uppercase;
	letter-spacing: .14em;
	font-size: .76rem;
	text-align: center;
	color: var(--hhhh-gold);
}

.hhhh-shop-skin .hhhh-feedback.is-good a {
	color: var(--hhhh-gold);
	text-decoration: underline;
}

.hhhh-shop-skin .hhhh-feedback.is-bad {
	color: #FF8A6E;
	letter-spacing: .06em;
	text-transform: none;
	font-family: var(--hhhh-body);
	font-size: .8rem;
}

/* -------------------------------------------------------------------------
   Where your money goes
   ---------------------------------------------------------------------- */

.hhhh-shop-skin .hhhh-goes {
	background: var(--hhhh-espresso);
	border-top: 1px solid var(--hhhh-hair);
	border-bottom: 1px solid var(--hhhh-hair);
	padding: 76px 0;
	/* The grid's own bottom margin can be zeroed by a builder, and then this
	   band butts straight up against the last row of cards. */
	margin-top: 76px;
}

.hhhh-shop-skin .hhhh-pillars {
	display: grid;
	grid-template-columns: 1fr;
}

.hhhh-shop-skin .hhhh-pillar {
	padding: 30px 0;
	border-top: 1px solid var(--hhhh-hair);
}

.hhhh-shop-skin .hhhh-pillar h3 {
	font-family: var(--hhhh-display);
	font-weight: 800;
	text-transform: uppercase;
	font-size: 1.14rem;
	letter-spacing: -.005em;
	color: var(--hhhh-bone);
	margin: 10px 0 8px;
}

.hhhh-shop-skin .hhhh-pillar p {
	margin: 0;
	font-size: .92rem;
	color: var(--hhhh-bone-dim);
}

@media (min-width: 820px) {
	.hhhh-shop-skin .hhhh-pillars {
		grid-template-columns: repeat(3, 1fr);
	}
	.hhhh-shop-skin .hhhh-pillar {
		padding: 34px 30px;
		border-top: none;
		border-left: 1px solid var(--hhhh-hair);
	}
	.hhhh-shop-skin .hhhh-pillar:first-child {
		padding-left: 0;
		border-left: none;
	}
	.hhhh-shop-skin .hhhh-pillar:last-child {
		padding-right: 0;
	}
}

/* -------------------------------------------------------------------------
   Detail strip
   ---------------------------------------------------------------------- */

.hhhh-shop-skin .hhhh-details {
	padding: 76px 0;
}

.hhhh-shop-skin .hhhh-strip {
	display: grid;
	gap: 22px;
	grid-template-columns: 1fr;
}

@media (min-width: 760px) {
	.hhhh-shop-skin .hhhh-strip {
		grid-template-columns: repeat(3, 1fr);
	}
}

.hhhh-shop-skin .hhhh-strip > div {
	border-top: 2px solid var(--hhhh-gold);
	padding-top: 16px;
}

.hhhh-shop-skin .hhhh-strip h4 {
	font-family: var(--hhhh-util);
	text-transform: uppercase;
	letter-spacing: .18em;
	font-size: .86rem;
	font-weight: 700;
	color: var(--hhhh-bone);
	margin: 0 0 8px;
}

.hhhh-shop-skin .hhhh-strip p {
	margin: 0;
	font-size: .9rem;
	color: var(--hhhh-bone-dim);
}

.hhhh-shop-skin .hhhh-strip a {
	color: var(--hhhh-gold);
}

/* -------------------------------------------------------------------------
   Rep it + footnote
   ---------------------------------------------------------------------- */

.hhhh-shop-skin .hhhh-repit {
	background: linear-gradient(180deg, var(--hhhh-ink) 0%, #15120F 100%);
	border-top: 1px solid var(--hhhh-hair);
	text-align: center;
	padding: 76px 0 40px;
}

.hhhh-shop-skin .hhhh-repit h2 {
	font-family: var(--hhhh-display);
	font-weight: 900;
	text-transform: uppercase;
	font-size: clamp(2rem, 6vw, 4rem);
	line-height: .9;
	letter-spacing: -.03em;
	color: var(--hhhh-bone);
	margin: 14px 0 16px;
}

.hhhh-shop-skin .hhhh-repit h2 em {
	font-style: normal;
	color: var(--hhhh-gold);
}

.hhhh-shop-skin .hhhh-repit p {
	max-width: 560px;
	margin: 0 auto 26px;
	color: var(--hhhh-bone-dim);
}

/* "Tag us" — same gold, turned up a stop, and a touch larger. Scoped to
   this section so the other eyebrows across the page stay as they are. */
.hhhh-shop-skin .hhhh-repit .hhhh-eyebrow {
	color: #FFE14A;
	font-size: .88rem;
}

.hhhh-shop-skin .hhhh-handle {
	font-family: var(--hhhh-util);
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--hhhh-gold);
	text-decoration: none;
	border-bottom: 1px solid rgba(248, 207, 44, .4);
}

.hhhh-shop-skin .hhhh-footnote {
	border-top: 1px solid var(--hhhh-hair);
	padding: 34px 24px 60px;
	margin: 0;
	font-size: .82rem;
	color: var(--hhhh-bone-dim);
	text-align: center;
}

.hhhh-shop-skin .hhhh-footnote a {
	color: var(--hhhh-gold);
}

/* -------------------------------------------------------------------------
   Woo bits we don't want on this layout
   ---------------------------------------------------------------------- */

.hhhh-shop-skin .woocommerce-result-count,
.hhhh-shop-skin .woocommerce-breadcrumb {
	display: none;
}

.hhhh-shop-skin .woocommerce-ordering {
	margin: 0 auto 28px;
	max-width: var(--hhhh-wrap);
	padding: 0 24px;
}

.hhhh-shop-skin .woocommerce-ordering select {
	background: var(--hhhh-espresso);
	color: var(--hhhh-bone);
	border: 1px solid var(--hhhh-hair);
	font-family: var(--hhhh-util);
	text-transform: uppercase;
	letter-spacing: .12em;
	padding: 10px 14px;
	border-radius: 2px;
}

.hhhh-shop-skin .woocommerce-message,
.hhhh-shop-skin .woocommerce-info {
	background: var(--hhhh-espresso);
	color: var(--hhhh-bone);
	border-top-color: var(--hhhh-gold);
}