/*
Theme Name: Home Centre Blog
Theme URI: https://www.homecentre.in/in/en/blog/
Author: Home Centre
Description: Lightweight block theme for the Home Centre blog. WoodMart-style blog layout in the Jewel colours (JEWEL_01 taupe, teal and purple). No page builder, no jQuery.
Requires at least: 6.8
Tested up to: 7.1
Requires PHP: 8.1
Version: 0.2.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: homecentre-blog
*/

/* === tokens + icons === */
:root {
	--hc-shadow: 0 0 4px rgba(0, 0, 0, .12);
	--hc-line: var(--wp--preset--color--line);
	--hc-ink: var(--wp--preset--color--contrast);
	--hc-muted: var(--wp--preset--color--muted);
	--hc-purple: var(--wp--preset--color--purple);
	--hc-teal: var(--wp--preset--color--teal);
	--hc-teal-text: var(--wp--preset--color--teal-text);
	--hc-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'/%3E");
	--i-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M16.5 16.5 21 21'/%3E%3C/svg%3E");
	--i-user: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21c0-4.4 3.6-7 8-7s8 2.6 8 7'/%3E%3C/svg%3E");
	--i-heart: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linejoin='round'%3E%3Cpath d='M12 20s-7.5-4.6-9.2-9.3C1.6 7.4 3.8 4 7.2 4c2 0 3.6 1.1 4.8 2.8C13.2 5.1 14.8 4 16.8 4c3.4 0 5.6 3.4 4.4 6.7C19.5 15.4 12 20 12 20z'/%3E%3C/svg%3E");
	--i-basket: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linejoin='round'%3E%3Cpath d='M5 8h14l-1 13H6L5 8z'/%3E%3Cpath d='M9 8V6a3 3 0 0 1 6 0v2'/%3E%3C/svg%3E");
	--i-search-box: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M16.5 16.5 21 21'/%3E%3C/svg%3E");
	--i-heart-line: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7'%3E%3Cpath d='M12 20s-7.5-4.6-7.5-10.2A4.3 4.3 0 0 1 12 7.1a4.3 4.3 0 0 1 7.5 2.7C19.5 15.4 12 20 12 20z'/%3E%3C/svg%3E");
	--i-basket-line: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7'%3E%3Cpath d='M5 9h14l-1.2 11H6.2L5 9z'/%3E%3Cpath d='M8.5 9V7a3.5 3.5 0 0 1 7 0v2'/%3E%3C/svg%3E");
	--i-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");
	--i-menu: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M3 6h18M3 12h18M3 18h18'/%3E%3C/svg%3E");
	--i-chev-down: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
	--i-chev-right: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l6 6-6 6'/%3E%3C/svg%3E");
	--i-chev-left: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 6l-6 6 6 6'/%3E%3C/svg%3E");
	--i-grid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6'%3E%3Crect x='4' y='4' width='6' height='6'/%3E%3Crect x='14' y='4' width='6' height='6'/%3E%3Crect x='4' y='14' width='6' height='6'/%3E%3Crect x='14' y='14' width='6' height='6'/%3E%3C/svg%3E");
	--i-store: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linejoin='round'%3E%3Cpath d='M4 10v10h16V10'/%3E%3Cpath d='M3 10l2-6h14l2 6z'/%3E%3Cpath d='M10 20v-5h4v5'/%3E%3C/svg%3E");
	--i-help: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M9.5 9.5a2.5 2.5 0 1 1 3.5 2.3c-.6.3-1 .9-1 1.6V14M12 17.5v.01'/%3E%3C/svg%3E");
	--i-pin: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linejoin='round'%3E%3Cpath d='M12 21s-6-5.6-6-11a6 6 0 0 1 12 0c0 5.4-6 11-6 11z'/%3E%3Ccircle cx='12' cy='10' r='2'/%3E%3C/svg%3E");
}
.hc-icon-link a::before,
.hc-tb a::before,
.hc-contact a::before,
.hc-back-list a::before {
	content: "";
	display: inline-block;
	flex-shrink: 0;
	width: 20px;
	height: 20px;
	background: currentColor;
	-webkit-mask: var(--hc-svg) center / contain no-repeat;
	mask: var(--hc-svg) center / contain no-repeat;
}

/* === reset === */
.wp-site-blocks > * + * { margin-block-start: 0; }
.wp-site-blocks main { padding-block: 40px; }
img { height: auto; }
:where(a) { transition: color .2s; }

/* === header: sticky shell === */
header.wp-block-template-part { position: sticky; top: -106px; z-index: 50; }
.hc-topbar p, .hc-mainbar p, .hc-navbar p { margin: 0; }

/* top bar: black strip, as on homecentre.in */
.hc-topbar { background: #000; color: #fff; font-size: 0.875rem; font-weight: 600; line-height: 1; }
.hc-topbar-inner { min-height: 42px; align-items: stretch !important; gap: 16px; }
.hc-topbar-list { gap: 34px !important; align-items: stretch !important; }
.hc-topbar-list > * { display: flex; }
.hc-topbar-list > p, .hc-tip-btn { display: flex; align-items: center; white-space: nowrap; }
.hc-topbar-list > p > a { color: #fff; text-decoration: none; }
.hc-topbar-list > p > a:hover { color: #d9d0c6; }
.hc-topbar-right { gap: 0 !important; font-size: 0.75rem; }
.hc-topbar-right > p + p::before { content: ""; width: 1px; height: 18px; margin-inline: 20px; background: #5d5e5c; }

/* Top bar info boxes: button + small white box under it (theme.js opens it). */
.hc-tip { position: relative; margin: 0 !important; }
.hc-tip-btn { gap: 8px; margin: 0; padding: 0; border: 0; background: none; color: #fff; font: inherit; line-height: inherit; cursor: pointer; }
.hc-tip-btn:hover, .hc-tip-btn[aria-expanded="true"] { color: #d9d0c6; }
.hc-tip-btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.hc-tip-icon { flex-shrink: 0; }
.hc-tip-box {
	--hc-tip-arrow: 24px;
	position: absolute;
	top: calc(100% + 7px);
	left: 0;
	z-index: 60;
	box-sizing: border-box;
	width: 220px;
	margin: 0 !important;
	padding: 14px 16px;
	border: 1px solid var(--hc-line);
	background: var(--wp--preset--color--surface);
	box-shadow: 0 4px 14px rgba(38, 34, 30, .12);
	color: var(--hc-ink);
	font-size: 0.8125rem;
	font-weight: 400;
	line-height: 1.45;
	letter-spacing: 0;
	text-transform: none;
	text-align: left;
}
.hc-tip-box[hidden] { display: none; }
html:not(.hc-js) .hc-tip:focus-within .hc-tip-box[hidden] { display: block; }
.hc-tip-box::before { content: ""; position: absolute; top: -6px; left: var(--hc-tip-arrow); width: 10px; height: 10px; margin-left: -5px; border-top: 1px solid var(--hc-line); border-left: 1px solid var(--hc-line); background: inherit; transform: rotate(45deg); }
.hc-tip-box p { margin: 0; }
.hc-tip-box a { color: var(--hc-teal-text); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.hc-tip-box a:hover { color: var(--hc-purple); }

/* main header row: logo, search, icons (no line under it) */
.hc-mainbar { background: #fff; }
.hc-mainbar-inner { min-height: 64px; gap: 8px !important; }
.hc-brand { gap: 8px; flex-shrink: 0; align-items: flex-end !important; }
.hc-mainbar-inner > .hc-brand { margin-right: 8px; }
.hc-brand p { margin: 0; }
.hc-logo { margin: 0; line-height: 0; }
.hc-logo img { display: block; width: 140px; height: 22px; }
/* BLOG is a 12px box on the logo's bottom edge, so its capitals centre on
   the logo's lowercase letters */
.hc-brand .hc-brand-tag { display: flex; align-items: center; align-self: flex-end; height: 12px; margin: 0; padding: 0 0 0 8px; border-left: 1px solid #c9c9c7; font-size: 0.625rem; font-weight: 600; line-height: 1; letter-spacing: .1em; text-transform: uppercase; }
.hc-brand-tag a { color: var(--hc-muted); text-decoration: none; }

/* search: grey box with the magnifier on the left. The Search button is for
   screen readers and keyboards only (Enter also submits); it shows on focus. */
.hc-header-search { flex: 0 1 441px; min-width: 0; margin: 0 !important; }
.hc-header-search .wp-block-search__inside-wrapper { box-sizing: border-box; display: flex; align-items: center; height: 40px; padding: 0; border: 1px solid #ecedeb; border-radius: 2px; background: #ecedeb; }
.hc-header-search .wp-block-search__inside-wrapper:focus-within { border-color: #929391; }
.hc-header-search .wp-block-search__inside-wrapper::before { content: ""; flex-shrink: 0; width: 18px; height: 18px; margin: 0 4px 0 8px; background: #757575; -webkit-mask: var(--i-search-box) center / contain no-repeat; mask: var(--i-search-box) center / contain no-repeat; }
.hc-header-search .wp-block-search__input { flex: 1 1 auto; min-width: 0; height: 100%; margin: 0; padding: 0 10px; border: 0; border-radius: 0; outline: 0; background: transparent; font: 400 1rem var(--wp--preset--font-family--body); color: #000; }
.hc-header-search .wp-block-search__input::placeholder { color: #757575; opacity: 1; }
.hc-header-search .wp-block-search__button:not(:focus) { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.hc-header-search .wp-block-search__button:focus { flex-shrink: 0; height: 30px; margin: 0 4px 0 0; padding: 0 12px; border: 0; border-radius: 2px; background: #212121; color: #fff; font: 600 0.8125rem/1 var(--wp--preset--font-family--body); outline: 2px solid #929391; outline-offset: 1px; }
.hc-search-toggle { display: none; }

/* off-canvas search (phone menu) */
.hc-oc-search .wp-block-search__inside-wrapper { box-sizing: border-box; display: flex; align-items: center; height: 46px; padding: 4px; border: 1px solid var(--hc-line); border-radius: 999px; background: #f6f2ed; transition: border-color .15s, box-shadow .15s, background-color .15s; }
.hc-oc-search .wp-block-search__inside-wrapper:focus-within { background: var(--wp--preset--color--surface); border-color: var(--hc-purple); box-shadow: 0 0 0 3px rgba(118, 101, 160, .16); }
.hc-oc-search .wp-block-search__inside-wrapper::before { content: ""; flex-shrink: 0; width: 18px; height: 18px; margin: 0 4px 0 12px; background: #8a8076; -webkit-mask: var(--i-search) center / contain no-repeat; mask: var(--i-search) center / contain no-repeat; }
.hc-oc-search .wp-block-search__input { flex: 1 1 auto; min-width: 0; height: 100%; margin: 0; padding: 0 8px; border: 0; outline: 0; background: transparent; font-size: 0.875rem; color: var(--hc-ink); }
.hc-oc-search .wp-block-search__input::placeholder { color: #8a8076; opacity: 1; }
.hc-oc-search .wp-block-search__button { flex-shrink: 0; height: 36px; margin: 0; padding: 0 18px; border: 0; border-radius: 999px; background: var(--hc-purple); color: var(--wp--preset--color--surface); font: 700 0.8125rem/1 var(--wp--preset--font-family--body); letter-spacing: 0; text-transform: none; cursor: pointer; transition: background-color .15s; }
.hc-oc-search .wp-block-search__button:hover { background: var(--wp--preset--color--purple-text); color: var(--wp--preset--color--surface); }
.hc-oc-search .wp-block-search__button:focus-visible { outline: 2px solid var(--hc-ink); outline-offset: 2px; }
.hc-oc-search .wp-block-search__button svg { width: 18px; height: 18px; fill: currentColor; }

/* Favourites and Basket: icon above a small label */
.hc-tools { gap: 20px !important; flex-shrink: 0; margin-left: auto !important; }
.hc-icon-link a { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 11px 5px 9px; color: #212121; font-size: 0.625rem; font-weight: 600; line-height: 15px; text-decoration: none; }
.hc-icon-link a:hover { color: var(--hc-purple); }
.hc-icon-link a::before { width: 24px; height: 24px; }
.hc-icon-heart a::before { -webkit-mask-image: var(--i-heart-line); mask-image: var(--i-heart-line); }
.hc-icon-basket a::before { -webkit-mask-image: var(--i-basket-line); mask-image: var(--i-basket-line); }
.hc-tb-heart a::before { -webkit-mask-image: var(--i-heart); mask-image: var(--i-heart); }
.hc-tb-basket a::before { -webkit-mask-image: var(--i-basket); mask-image: var(--i-basket); }
.wp-block-buttons.hc-burger { display: none; margin: 0; }

/* bottom header row */
.hc-navbar { border-bottom: 1px solid var(--hc-line); }
.hc-navbar-inner { position: relative; min-height: 53px; align-items: stretch !important; gap: 20px !important; }
.hc-nav-right { margin-left: auto !important; align-items: center !important; gap: 0 !important; font-size: 0.8125rem; font-weight: 600; line-height: 1; letter-spacing: .04em; text-transform: uppercase; }
.hc-nav-right a { color: var(--hc-ink); text-decoration: none; }
.hc-nav-right .hc-nav-accent a { color: var(--wp--preset--color--purple-text); }
.hc-nav-right a:hover { color: var(--hc-purple); }

/* browse categories */
.hc-cats-nav { flex: 0 0 270px; align-self: stretch; margin-block: -1px !important; }
.hc-cats-nav .wp-block-navigation__container,
.hc-cats-nav .wp-block-navigation__container > .wp-block-navigation-item { width: 100%; height: 100%; }
.hc-cats-nav .wp-block-navigation-submenu__toggle {
	display: flex !important;
	align-items: center;
	gap: 12px;
	width: 100%;
	height: 100%;
	padding: 10px 40px 10px 15px !important;
	background: var(--hc-purple) !important;
	color: var(--wp--preset--color--surface) !important;
	font-size: 0.8125rem;
	font-weight: 600;
	line-height: 1;
	letter-spacing: .04em;
	text-transform: uppercase;
	text-align: left;
}
.hc-cats-nav .wp-block-navigation-submenu__toggle::before {
	content: "";
	width: 18px;
	height: 18px;
	flex-shrink: 0;
	background: currentColor;
	-webkit-mask: var(--i-menu) center / contain no-repeat;
	mask: var(--i-menu) center / contain no-repeat;
}
.hc-cats-nav .wp-block-navigation__submenu-icon { position: absolute; right: 15px; top: 50%; transform: translateY(-50%); color: var(--wp--preset--color--surface); width: 10px; height: 10px; margin: 0 !important; pointer-events: none; }
.hc-cats-nav .wp-block-navigation__submenu-icon svg { width: 10px; height: 10px; }
.hc-cats-nav .wp-block-navigation__submenu-container {
	width: 270px !important;
	min-width: 270px !important;
	top: 100% !important;
	left: 0 !important;
	border: 1px solid var(--hc-line) !important;
	border-top: 0 !important;
	background: var(--wp--preset--color--surface) !important;
	color: var(--hc-ink) !important;
}
.hc-cats-nav .wp-block-navigation__submenu-container .wp-block-navigation-item { width: 100%; border-bottom: 1px solid var(--hc-line); }
.hc-cats-nav .wp-block-navigation__submenu-container .wp-block-navigation-item:last-child { border-bottom: 0; }
.hc-cats-nav .wp-block-navigation__submenu-container a { display: flex !important; align-items: center; width: 100%; min-height: 44px; line-height: 1; padding: 5px 18px !important; font-size: 0.875rem; font-weight: 600; color: var(--hc-ink); }
.hc-cats-nav .wp-block-navigation__submenu-container a:hover { color: var(--hc-purple); background: var(--wp--preset--color--base); }

/* main nav + mega menu */
.hc-main-nav { position: static !important; font-size: 0.8125rem; font-weight: 600; line-height: 1; letter-spacing: .04em; text-transform: uppercase; align-items: center; }
.hc-main-nav .wp-block-navigation__container { position: static; gap: 20px; }
.hc-main-nav .wp-block-navigation-item__content { display: flex; align-items: center; color: var(--hc-ink); padding-block: 10px; }
.hc-main-nav .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content:hover { color: var(--hc-purple); }
.hc-main-nav .wp-block-navigation__submenu-icon { width: 8px; height: 8px; margin-left: 4px; color: var(--hc-muted); }
.hc-main-nav .wp-block-navigation__submenu-icon svg { width: 8px; height: 8px; }
.hc-main-nav .wp-block-navigation__submenu-container {
	position: absolute !important;
	top: calc(100% + 9px) !important;
	padding: 15px 0 !important;
	border: 0 !important;
	box-shadow: 0 0 3px rgba(0, 0, 0, .15);
	background: var(--wp--preset--color--surface) !important;
	text-transform: none;
	letter-spacing: 0;
	font-weight: 400;
	font-size: 0.875rem;
	min-width: 220px !important;
}
.hc-main-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content { min-height: 36px; padding: 0 20px !important; color: var(--wp--preset--color--body); }
.hc-main-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover { color: var(--hc-purple); }
.hc-mega { position: static !important; }
/* The panels start a few px below their link. A see-through bridge over that
   gap, plus a short close delay, keeps a menu open while the mouse moves down
   into it. Opening (hover or keyboard focus) has no delay. */
.hc-main-nav .wp-block-navigation__container > .has-child > .wp-block-navigation__submenu-container::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 16px; }
.hc-main-nav .wp-block-navigation__container > .has-child > .wp-block-navigation__submenu-container { transition: opacity .1s linear .12s, visibility 0s linear .22s !important; }
.hc-main-nav .wp-block-navigation__container > .has-child:hover > .wp-block-navigation__submenu-container,
.hc-main-nav .wp-block-navigation__container > .has-child:focus-within > .wp-block-navigation__submenu-container { transition-delay: 0s, 0s !important; }
.hc-mega > .wp-block-navigation__submenu-container {
	left: 0 !important;
	right: 0 !important;
	width: 100% !important;
	top: 100% !important;
	display: grid !important;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	align-items: start !important;
	gap: 10px 30px;
	padding: 30px 35px !important;
}
.hc-mega .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container {
	position: static !important;
	visibility: inherit !important;
	opacity: 1 !important;
	width: auto !important;
	height: auto !important;
	min-width: 0 !important;
	overflow: visible !important;
	padding: 6px 0 0 !important;
	box-shadow: none !important;
	background: transparent !important;
}
.hc-mega > .wp-block-navigation__submenu-container > .wp-block-navigation-item { flex-direction: column; align-items: flex-start; justify-content: flex-start !important; }
.hc-mega > .wp-block-navigation__submenu-container > .wp-block-navigation-item > .wp-block-navigation-item__content { padding: 0 !important; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; font-size: 0.75rem; color: var(--hc-ink); }
.hc-mega .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container .wp-block-navigation-item__content { min-height: 30px; padding: 0 !important; }
.hc-mega .wp-block-navigation__submenu-container .wp-block-navigation__submenu-icon { display: none; }

/* === page title bar === */
.hc-titlebar { position: relative; overflow: hidden; padding-block: 60px; text-align: center; isolation: isolate; }
.hc-titlebar::before,
.hc-titlebar::after { content: ""; position: absolute; top: 0; bottom: 0; z-index: -1; width: 38%; opacity: .55; }
.hc-titlebar::before {
	left: 0;
	background:
		repeating-linear-gradient(-45deg, var(--hc-teal) 0 18px, transparent 18px 30px) left bottom / 100% 50% no-repeat,
		repeating-linear-gradient(45deg, var(--wp--preset--color--taupe) 0 14px, transparent 14px 24px) left top / 100% 50% no-repeat;
	-webkit-mask-image: linear-gradient(90deg, #000 0%, transparent 100%);
	mask-image: linear-gradient(90deg, #000 0%, transparent 100%);
}
.hc-titlebar::after {
	right: 0;
	background: radial-gradient(circle, var(--hc-purple) 0 9px, transparent 10px) 0 0 / 30px 30px;
	-webkit-mask-image: linear-gradient(270deg, #000 0%, transparent 100%);
	mask-image: linear-gradient(270deg, #000 0%, transparent 100%);
}
.hc-titlebar h1, .hc-titlebar-title {
	margin: 0 auto;
	color: var(--wp--preset--color--surface);
	font-size: var(--wp--preset--font-size--display);
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: -0.02em;
}
.hc-titlebar-crumbs { margin: 12px auto 0 !important; font-size: 0.9375rem; line-height: 1.5; color: rgba(255, 255, 255, .8); }
.hc-titlebar-crumbs ol { justify-content: center; }
.hc-titlebar-crumbs a { color: rgba(255, 255, 255, .8); text-decoration: none; }
.hc-titlebar-crumbs a:hover { color: var(--wp--preset--color--surface); }
.hc-titlebar-crumbs [aria-current] { color: var(--wp--preset--color--surface); font-weight: 600; }

/* === blog lists (Home A): title panel === */
.wp-site-blocks .hc-hero-section { padding-top: 28px; }
.hc-hero {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 200px;
	gap: 32px;
	align-items: center;
	padding: 28px 40px;
	border-radius: 8px;
	background: var(--wp--preset--color--taupe-tint);
}
.hc-hero > * { margin: 0 !important; }
.hc-hero-text { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; min-width: 0; }
.hc-hero-text > * { margin: 0 !important; }
.hc-hero-crumbs { font-size: 0.71875rem; line-height: 1.4; color: var(--hc-muted); }
.hc-hero-crumbs a { color: var(--hc-muted); text-decoration: underline; text-underline-offset: 2px; }
.hc-hero-crumbs a:hover { color: var(--hc-ink); }
.hc-hero-sep { margin: 0 6px; color: #b3a99d; }
.hc-hero-label { font-size: 0.65625rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--hc-teal-text); }
.hc-hero-title { font-size: clamp(28px, 2.6vw, 36px); font-weight: 800; line-height: 1.1; letter-spacing: -0.03em; color: var(--hc-ink); }
.hc-hero-intro { max-width: 560px; font-size: 0.90625rem; line-height: 1.55; color: var(--wp--preset--color--body); text-wrap: pretty; }
.hc-chips { padding-top: 4px; }
.hc-chips p { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
.hc-chip { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border: 1px solid #ddd3c8; border-radius: 999px; background: var(--wp--preset--color--surface); color: var(--hc-ink); font-size: 0.78125rem; font-weight: 600; line-height: 1; text-decoration: none; }
.hc-chip:hover { border-color: var(--hc-purple); color: var(--wp--preset--color--purple-text); }
.hc-chip-count { font-weight: 500; color: var(--hc-muted); font-variant-numeric: tabular-nums; }
.hc-chip[aria-current] { border-color: var(--hc-purple); background: var(--hc-purple); color: var(--wp--preset--color--surface); }
.hc-chip[aria-current] .hc-chip-count { color: inherit; opacity: .85; }
.hc-hero-art { display: block; width: 200px; height: 147px; }

/* list head: "Latest posts" + Sort */
.wp-site-blocks main.hc-list-main { padding-block: 44px 64px; }
.hc-list-main > * + * { margin-block-start: 28px !important; }
.hc-list-head { gap: 16px !important; align-items: center; }
.hc-list-head > * { margin: 0 !important; }
.hc-list-title { font-size: 1.25rem; font-weight: 800; line-height: 1.2; letter-spacing: -0.02em; }
.hc-sort { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 0.78125rem; color: var(--hc-muted); }
/* Sort drop-down: our own panel, not the native select (phones show a system picker) */
.hc-sort-menu { position: relative; }
.hc-sort-btn { display: inline-flex; align-items: center; gap: 8px; padding: 6px 8px 6px 10px; border: 1px solid var(--hc-line); border-radius: 4px; background: var(--wp--preset--color--surface); font: 600 0.78125rem/1.2 var(--wp--preset--font-family--body); color: var(--hc-ink); cursor: pointer; }
.hc-sort-btn::after { content: ""; width: 12px; height: 12px; background: currentColor; -webkit-mask: var(--i-chev-down) center / contain no-repeat; mask: var(--i-chev-down) center / contain no-repeat; transition: transform .15s; }
.hc-sort-btn[aria-expanded="true"]::after { transform: rotate(180deg); }
.hc-sort-btn:hover { border-color: var(--wp--preset--color--line-strong); }
.hc-sort-btn:focus-visible { outline: 2px solid var(--hc-purple); outline-offset: 1px; }
.hc-sort-list { position: absolute; top: calc(100% + 6px); right: 0; z-index: 30; box-sizing: border-box; min-width: max(100%, 160px); margin: 0; padding: 6px 0; list-style: none; border: 1px solid #e6ded4; border-radius: 6px; background: #fff; box-shadow: 0 6px 20px rgba(38, 34, 30, .12); }
.hc-sort-list[hidden] { display: none; }
html:not(.hc-js) .hc-sort-menu:is(:hover, :focus-within) .hc-sort-list[hidden] { display: block; }
.hc-sort-list li { margin: 0; }
.hc-sort-option { display: flex; align-items: center; justify-content: space-between; gap: 12px; height: 38px; padding: 0 14px; font: 500 0.8125rem/1 var(--wp--preset--font-family--body); color: #26221e; text-decoration: none; white-space: nowrap; outline: 0; }
.hc-sort-option:hover, .hc-sort-option:focus { background: #ece8f3; color: #26221e; }
.hc-sort-option:focus-visible { box-shadow: inset 2px 0 0 var(--hc-purple); }
.hc-sort-option[aria-selected="true"] { color: #5e4f88; font-weight: 600; }
.hc-sort-option[aria-selected="true"]::after { content: ""; flex-shrink: 0; width: 14px; height: 14px; background: currentColor; -webkit-mask: var(--i-check) center / contain no-repeat; mask: var(--i-check) center / contain no-repeat; }

/* card grid: 3 / 2 / 1 columns, promo card spans 2 */
.hc-grid .wp-block-post-template { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-flow: row dense; gap: 28px 24px; margin: 0; padding: 0; list-style: none; }
.hc-grid .wp-block-post-template > li { display: flex; flex-direction: column; margin: 0; min-width: 0; }
.hc-card { flex-grow: 1; display: flex; flex-direction: column; overflow: hidden; border: 1px solid #ece6df; border-radius: 6px; background: var(--wp--preset--color--surface); }
.hc-card > *, .hc-card-media > * { margin-block: 0 !important; }
.hc-card-media { position: relative; background: var(--wp--preset--color--taupe-tint); }
.hc-card-media .wp-block-post-featured-image { margin: 0; overflow: hidden; }
.hc-card-media .wp-block-post-featured-image img { display: block; transition: transform .5s ease; }
.hc-card:hover .hc-card-media img { transform: scale(1.04); }
.hc-date-badge { position: absolute; top: 10px; left: 10px; display: flex; flex-direction: column; gap: 3px; padding: 5px 8px; border-radius: 3px; background: var(--wp--preset--color--surface); text-align: center; font-variant-numeric: tabular-nums; }
.hc-date-badge > * { margin: 0 !important; }
.hc-date-day { font-size: 0.9375rem; font-weight: 700; line-height: 1; color: var(--hc-ink); }
.hc-date-mon { font-size: 0.59375rem; font-weight: 700; line-height: 1; letter-spacing: .1em; text-transform: uppercase; color: var(--hc-muted) !important; }
.hc-card-body { flex-grow: 1; display: flex; flex-direction: column; gap: 8px; padding: 14px 16px 16px; }
.hc-card-body > * { margin: 0 !important; }
.hc-card-label { align-self: flex-start; font-size: 0.625rem; font-weight: 700; line-height: 1; letter-spacing: .08em; text-transform: uppercase; color: var(--hc-teal-text); }
.hc-card-label a { color: inherit; text-decoration: none; }
.hc-card-label a:hover { color: var(--hc-ink); }
.hc-card-title { font-size: 0.96875rem; font-weight: 700; line-height: 1.35; letter-spacing: -0.01em; text-wrap: pretty; }
.hc-card-title, .hc-card-excerpt .wp-block-post-excerpt__excerpt { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
.hc-card-excerpt { font-size: 0.8125rem; line-height: 1.55; color: #5a5149; }
.hc-card-meta { margin-top: auto !important; padding-top: 10px; border-top: 1px solid #f1ece6; gap: 8px !important; align-items: center; font-size: 0.71875rem; line-height: 1.4; color: var(--hc-muted); }
.hc-card-meta > * { margin: 0 !important; }
.hc-mark { display: block; flex-shrink: 0; }
.hc-meta-name { font-weight: 600; color: var(--hc-ink); }
.hc-read-time { margin: 0; font-variant-numeric: tabular-nums; white-space: nowrap; }
.hc-card-meta .hc-read-time::before, .hc-byline-sub .hc-read-time::before, .hc-rel-meta .hc-read-time::before { content: "\00B7" / ""; margin-right: 8px; }
.wp-block-post-title a { color: var(--hc-ink); text-decoration: none; }
.wp-block-post-title a:hover { color: var(--hc-teal-text); }
.wp-block-post-excerpt__excerpt { margin: 0; }

/* purple promo card in the grid */
.hc-grid .hc-promo { grid-column: span 2; }
.hc-promo-card, .hc-shop-card a, .hc-shop-banner a {
	display: flex;
	border-radius: 6px;
	background-color: var(--hc-purple);
	color: var(--wp--preset--color--surface);
	text-decoration: none;
	transition: background-color .15s;
}
.hc-promo-card:hover, .hc-shop-card a:hover, .hc-shop-banner a:hover { background-color: var(--wp--preset--color--purple-text); color: var(--wp--preset--color--surface); }
.hc-promo-card:focus-visible, .hc-shop-card a:focus-visible, .hc-shop-banner a:focus-visible { outline: 2px solid var(--hc-ink); outline-offset: 2px; }
.hc-promo-card { flex-grow: 1; flex-direction: column; justify-content: center; gap: 18px; min-height: 280px; padding: 32px; background-image: radial-gradient(circle at 85% 85%, rgba(255, 255, 255, .14) 0 34px, transparent 35px), radial-gradient(circle at 60% 100%, rgba(255, 255, 255, .1) 0 26px, transparent 27px); }
.hc-promo-eyebrow, .hc-shop-eyebrow { font-size: 0.65625rem; font-weight: 700; line-height: 1.2; letter-spacing: .1em; text-transform: uppercase; color: #e4def0; }
.hc-promo-title { max-width: 420px; font-size: 1.375rem; font-weight: 800; line-height: 1.2; letter-spacing: -0.02em; }
.hc-promo-cta, .hc-shop-cta { font-size: 0.75rem; font-weight: 700; line-height: 1.2; letter-spacing: .06em; text-transform: uppercase; }

/* === pagination === */
.wp-block-query-pagination { gap: 6px; font-size: 0.8125rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.hc-list-main .wp-block-query > * + * { margin-block-start: 28px; }
.hc-grid > .wp-block-query-pagination { margin-top: clamp(32px, 4vw, 48px); }
.wp-block-query-pagination-numbers { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.wp-block-query-pagination .page-numbers,
.wp-block-query-pagination-previous,
.wp-block-query-pagination-next {
	box-sizing: border-box;
	display: inline-grid;
	place-items: center;
	min-width: 40px;
	height: 40px;
	margin: 0 !important;
	padding: 0 6px;
	border: 1px solid var(--hc-line);
	border-radius: 4px;
	background: var(--wp--preset--color--surface);
	color: var(--hc-ink);
	text-decoration: none;
}
.wp-block-query-pagination a.page-numbers:hover,
.wp-block-query-pagination-previous:hover,
.wp-block-query-pagination-next:hover { border-color: var(--hc-purple); color: var(--wp--preset--color--purple-text); }
.wp-block-query-pagination .page-numbers.current { border-color: var(--hc-purple); background: var(--hc-purple); color: var(--wp--preset--color--surface); }
.wp-block-query-pagination .page-numbers.dots { border-color: transparent; background: none; color: var(--hc-muted); }

/* === single post (Post A) === */
.wp-site-blocks main.hc-post-main { padding-block: 18px 72px; }
.hc-post-main > * + * { margin-block-start: 24px !important; }
.hc-post-crumbs { font-size: 0.78125rem; line-height: 1.5; color: var(--hc-muted); }
.hc-post-crumbs a { color: var(--hc-muted); text-decoration: underline; text-underline-offset: 2px; }
.hc-post-crumbs a:hover { color: var(--hc-ink); }
.hc-post-layout { display: grid; grid-template-columns: minmax(0, 760px) 340px; justify-content: center; align-items: start; gap: 56px; }
.hc-post-layout > * { margin: 0 !important; }
.hc-article { min-width: 0; display: flex; flex-direction: column; gap: 22px; }
.hc-article > * { margin: 0 !important; }
.hc-article-head { display: flex; flex-direction: column; gap: 14px; }
.hc-article-head > * { margin: 0 !important; }
/* teal-text ground: white on brand teal #4c868f is only 4.1:1 at this size */
.hc-post-label { align-self: flex-start; padding: 5px 9px; border-radius: 3px; background: var(--hc-teal-text); font-size: 0.65625rem; font-weight: 700; line-height: 1; letter-spacing: .08em; text-transform: uppercase; }
.hc-post-label a { color: var(--wp--preset--color--surface); text-decoration: none; }
.hc-article-title { font-size: 2.375rem; font-weight: 800; line-height: 1.15; letter-spacing: -0.03em; text-wrap: balance; }
.hc-byline { gap: 12px !important; align-items: center; padding: 6px 0 2px; font-size: 0.8125rem; line-height: 1.4; color: var(--hc-muted); }
.hc-byline > * { margin: 0 !important; }
.hc-byline-text { display: flex; flex-direction: column; gap: 2px; }
.hc-byline-text > * { margin: 0 !important; }
.hc-byline-name { font-weight: 700; color: var(--hc-ink); }
.hc-byline-sub { gap: 0 8px !important; font-variant-numeric: tabular-nums; }
.hc-byline-sub > * { margin: 0 !important; }
.hc-byline-date { color: var(--hc-muted); font-size: inherit; }
.hc-share-top { display: flex; gap: 8px; margin-left: auto !important; }
.hc-share-top > * { margin: 0 !important; }
.hc-share-top a, .hc-share-top button { display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 1px solid var(--hc-line); border-radius: 50%; background: var(--wp--preset--color--surface); color: var(--hc-ink); cursor: pointer; }
.hc-share-top a:hover, .hc-share-top button:hover { border-color: var(--hc-purple); color: var(--wp--preset--color--purple-text); }
.hc-share-top svg { width: 16px; height: 16px; }
.hc-article-image { margin: 0; overflow: hidden; border-radius: 6px; }
.hc-article-image img { display: block; }

/* In this article: closed box under the featured image, at every width */
.hc-toc-box { border: 1px solid var(--hc-line); border-radius: 6px; background: var(--wp--preset--color--surface); }
.hc-toc-box summary { display: flex; align-items: center; gap: 10px; padding: 14px 18px; list-style: none; font-size: 0.8125rem; font-weight: 700; line-height: 1.2; color: var(--hc-ink); cursor: pointer; }
.hc-toc-box summary::-webkit-details-marker { display: none; }
.hc-toc-box summary::before { content: ""; flex-shrink: 0; width: 18px; height: 18px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237665a0' stroke-width='2' stroke-linecap='round'%3E%3Cline x1='9' y1='6' x2='20' y2='6'/%3E%3Cline x1='9' y1='12' x2='20' y2='12'/%3E%3Cline x1='9' y1='18' x2='20' y2='18'/%3E%3Ccircle cx='4.5' cy='6' r='1'/%3E%3Ccircle cx='4.5' cy='12' r='1'/%3E%3Ccircle cx='4.5' cy='18' r='1'/%3E%3C/svg%3E") center / contain no-repeat; }
.hc-toc-box summary::after { content: ""; flex-shrink: 0; width: 16px; height: 16px; margin-left: auto; background: var(--hc-muted); -webkit-mask: var(--i-chev-down) center / contain no-repeat; mask: var(--i-chev-down) center / contain no-repeat; transition: transform .15s; }
.hc-toc-box[open] summary::after { transform: rotate(180deg); }
.hc-toc-box summary:focus-visible { outline: 2px solid var(--hc-purple); outline-offset: -2px; border-radius: 6px; }
.hc-toc-count { font-weight: 500; color: var(--hc-muted); }
.hc-toc-box .hc-toc-list { margin: 0; padding: 0 18px 8px; list-style: none; font-size: 0.875rem; line-height: 1.45; }
.hc-toc-box .hc-toc-list li { margin: 0; }
.hc-toc-box .hc-toc-list a { display: flex; gap: 6px; padding: 9px 0; border-top: 1px solid #f1ece6; color: var(--hc-ink); text-decoration: none; }
.hc-toc-num { flex: 0 0 auto; min-width: 18px; font-weight: 700; color: var(--hc-purple); font-variant-numeric: tabular-nums; }
.hc-toc-text { min-width: 0; }
.hc-toc-box .hc-toc-list a:hover { color: var(--wp--preset--color--purple-text); }

/* article text */
.hc-article-body { font-size: 1.0625rem; line-height: 1.7; color: var(--wp--preset--color--taupe-dark); }
.hc-article-body > * { margin-block: 0; }
.hc-article-body > * + * { margin-block-start: 18px; }
.hc-article-body > p:first-child { font-size: 1.1875rem; line-height: 1.6; color: var(--hc-ink); }
.hc-article-body h2 { margin-block-start: 32px; font-size: 1.5rem; font-weight: 800; line-height: 1.25; letter-spacing: -0.02em; color: var(--hc-ink); scroll-margin-top: 80px; }
.hc-h2-num { color: var(--hc-purple); }
.hc-article-body h3 { margin-block-start: 28px; font-size: 1.25rem; font-weight: 700; line-height: 1.3; }
.hc-article-body h4 { margin-block-start: 24px; font-size: 1.0625rem; }
.hc-article-body li { line-height: 1.7; }
.hc-article-body figcaption, .hc-article-body .wp-element-caption { font-size: 0.8125rem; line-height: 1.45; }
.hc-article-body img { border-radius: 6px; }
.hc-article-body a { color: var(--hc-teal-text); text-decoration: underline; text-underline-offset: .15em; }
.hc-article-body a:hover { color: var(--hc-ink); }

/* "Shop the idea" box inside a post (pattern homecentre-blog/shop-idea) */
.hc-shop-idea { gap: 14px 18px !important; margin-block: 26px !important; padding: 18px; border: 1px solid var(--hc-line); border-radius: 6px; background: var(--wp--preset--color--surface); box-shadow: 0 1px 2px rgba(58, 51, 45, .05); }
.hc-shop-idea > * { margin: 0 !important; }
.hc-shop-idea-img { flex-shrink: 0; }
.hc-shop-idea-img img { width: 112px; height: 84px; object-fit: cover; border-radius: 4px; }
.hc-shop-idea-text { display: flex; flex-direction: column; gap: 4px; flex: 1 1 180px; min-width: 0; }
.hc-shop-idea-text > * { margin: 0 !important; }
.hc-shop-idea-eyebrow { font-size: 0.65625rem; font-weight: 700; line-height: 1.2; letter-spacing: .1em; text-transform: uppercase; color: var(--wp--preset--color--purple-text); }
.hc-shop-idea-title { font-size: 1rem; font-weight: 700; line-height: 1.35; color: var(--hc-ink); }
.hc-shop-idea-btn { flex-shrink: 0; }
.hc-shop-idea-btn .wp-block-button__link { border-radius: 4px; padding: 12px 16px; font-size: 0.75rem; font-weight: 700; letter-spacing: .06em; text-decoration: none !important; color: var(--wp--preset--color--surface) !important; }

/* share row, shop banner, older / back */
.hc-share-bottom { gap: 12px 16px !important; align-items: center; padding: 18px 0; border-top: 1px solid var(--hc-line); border-bottom: 1px solid var(--hc-line); font-size: 0.75rem; font-weight: 700; line-height: 1.2; letter-spacing: .08em; text-transform: uppercase; color: var(--hc-muted); }
.hc-share-bottom > * { margin: 0 !important; }
.hc-share-bottom .hc-share-label { margin-right: auto !important; }
.hc-share-bottom a, .hc-share-bottom button { padding: 4px 0; border: 0; background: none; font: inherit; letter-spacing: inherit; text-transform: inherit; color: var(--hc-ink); text-decoration: none; cursor: pointer; }
.hc-share-bottom a:hover, .hc-share-bottom button:hover { color: var(--wp--preset--color--purple-text); }
.hc-share-status { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.hc-shop-banner { display: none; margin: 0; }
.hc-shop-banner a { flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; padding: 22px 24px; background-image: radial-gradient(circle at 96% 120%, rgba(255, 255, 255, .14) 0 44px, transparent 45px); }
.hc-shop-text { display: flex; flex-direction: column; gap: 6px; }
.hc-shop-banner .hc-shop-title { font-size: 1.125rem; font-weight: 800; line-height: 1.25; letter-spacing: -0.02em; }
.hc-post-pager { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.hc-post-pager > * { margin: 0 !important; }
.hc-post-pager a { box-sizing: border-box; display: flex; flex-direction: column; gap: 6px; height: 100%; padding: 18px; border: 1px solid var(--hc-line); border-radius: 6px; background: var(--wp--preset--color--surface); text-decoration: none; }
.hc-post-pager a:hover { border-color: var(--hc-purple); }
.hc-post-pager a:focus-visible { outline: 2px solid var(--hc-purple); outline-offset: 2px; }
.hc-pager-back { grid-column: 2; }
.hc-pager-back a { text-align: right; align-items: flex-end; }
.hc-pager-label { font-size: 0.6875rem; font-weight: 700; line-height: 1.2; letter-spacing: .08em; text-transform: uppercase; color: var(--hc-muted); }
.hc-pager-title { font-size: 0.9375rem; font-weight: 700; line-height: 1.35; color: var(--hc-ink); }
.hc-post-pager a:hover .hc-pager-title { color: var(--wp--preset--color--purple-text); }

/* sidebar (1100px and up) */
.hc-post-side { position: sticky; top: 24px; display: flex; flex-direction: column; gap: 32px; }
.hc-post-side > * { margin: 0 !important; }
.hc-side-block { display: flex; flex-direction: column; gap: 14px; }
.hc-side-block > * { margin: 0 !important; }
.hc-side-title { font-size: 0.71875rem; font-weight: 700; line-height: 1.2; letter-spacing: .1em; text-transform: uppercase; color: var(--hc-ink); }
.hc-shop-card { margin: 0; }
.hc-shop-card a { flex-direction: column; gap: 12px; padding: 24px; background-image: radial-gradient(circle at 92% 88%, rgba(255, 255, 255, .14) 0 30px, transparent 31px); }
.hc-shop-card .hc-shop-title { font-size: 1.1875rem; font-weight: 800; line-height: 1.25; letter-spacing: -0.02em; }

/* You may also like */
.hc-related-band { padding-block: 44px 56px; }
.hc-related-band > * + * { margin-block-start: 20px !important; }
.hc-related-title { font-size: 1.25rem; font-weight: 800; line-height: 1.2; letter-spacing: -0.02em; }
.hc-rel-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; margin: 0; padding: 0; list-style: none; }
.hc-rel-grid > li { margin: 0; min-width: 0; }
.hc-rel-card { display: flex; flex-direction: column; gap: 10px; }
.hc-rel-card > * { margin: 0 !important; }
.hc-rel-card .wp-block-post-featured-image { overflow: hidden; border-radius: 6px; }
.hc-rel-card .wp-block-post-featured-image img { display: block; }
.hc-rel-title { font-size: 0.9375rem; font-weight: 700; line-height: 1.35; letter-spacing: -0.01em; }
.hc-rel-meta { gap: 0 8px !important; font-size: 0.71875rem; line-height: 1.4; color: var(--hc-muted); font-variant-numeric: tabular-nums; }
.hc-rel-meta > * { margin: 0 !important; font-size: inherit; }

/* recent posts (sidebar + footer) */
.hc-recent .wp-block-post-template { display: flex; flex-direction: column; gap: 14px; margin: 0; padding: 0; list-style: none; }
.hc-recent .wp-block-post-template > li { margin: 0; }
.hc-recent-item { gap: 12px !important; align-items: center !important; }
.hc-recent-item .wp-block-post-featured-image { flex: 0 0 72px; margin: 0; overflow: hidden; border-radius: 4px; }
.hc-recent-item .wp-block-post-featured-image img { display: block; }
.hc-recent-item .wp-block-post-title { margin: 0; font-size: 0.84375rem; font-weight: 700; line-height: 1.35; letter-spacing: 0; }
.hc-recent-item .wp-block-post-date { margin: 3px 0 0; font-size: 0.71875rem; color: var(--hc-muted); font-variant-numeric: tabular-nums; }

/* Post A below 1100px: no sidebar; TOC box and shop banner instead */
@media (max-width: 1099px) {
	.hc-post-layout { grid-template-columns: minmax(0, 760px); }
	.hc-post-side { display: none; }
	.hc-shop-banner { display: block; }
}
@media (max-width: 1060px) {
	.hc-grid .wp-block-post-template { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 18px; }
}
@media (max-width: 900px) {
	.hc-rel-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 20px; }
}
@media (max-width: 760px) {
	.hc-hero { grid-template-columns: minmax(0, 1fr); padding: 28px 22px; }
	.hc-hero-art { display: none !important; }
}
@media (max-width: 640px) {
	.hc-grid .wp-block-post-template { grid-template-columns: minmax(0, 1fr); }
	.hc-grid .hc-promo { grid-column: auto; }
	.hc-promo-card { min-height: 0; gap: 12px; padding: 24px; }
	.hc-promo-title { font-size: 1.25rem; }
	.hc-article-title { font-size: 1.875rem; }
	.hc-share-top { margin-left: 0 !important; }
	.hc-post-pager { grid-template-columns: minmax(0, 1fr); }
	.hc-pager-back { grid-column: auto; }
	.hc-pager-back a { text-align: left; align-items: flex-start; }
}

/* === footer === */
.hc-footer { border-top: 1px solid var(--hc-line); padding-top: 40px; font-size: 0.9375rem; }
.hc-footer-cols { gap: 30px; margin-bottom: 40px !important; }
.hc-footer-about > * + * { margin-block-start: 15px; }
.hc-footer .hc-brand-tag { display: none; }
.hc-footer .hc-wordmark { font-size: 1.625rem; white-space: nowrap; }
.hc-footer-about p { margin-bottom: 0; }
.hc-footer-title { margin: 0 0 18px; font-size: 0.75rem; font-weight: 700; line-height: 1.2; letter-spacing: .08em; text-transform: uppercase; color: var(--hc-ink); }
.hc-footer-links { margin: 0; padding: 0; list-style: none; }
.hc-footer-links li { padding: 5px 0; line-height: 1.6; }
.hc-footer a { color: var(--wp--preset--color--body); text-decoration: none; }
.hc-footer a:hover { color: var(--hc-teal-text); }
.hc-footer .wp-block-post-title a, .hc-footer .hc-wordmark a { color: var(--hc-ink); }
.hc-contact a { display: inline-flex; align-items: center; gap: 10px; }
.hc-contact a::before { width: 16px; height: 16px; color: var(--hc-ink); }
.hc-contact-store a::before { -webkit-mask-image: var(--i-pin); mask-image: var(--i-pin); }
.hc-contact-help a::before { -webkit-mask-image: var(--i-help); mask-image: var(--i-help); }
.hc-copyright { padding-block: 20px; border-top: 1px solid var(--hc-line); font-size: 0.75rem; letter-spacing: .04em; text-transform: uppercase; }
.hc-copyright p { margin: 0; }
.hc-footer-toggle { display: flex; justify-content: space-between; align-items: center; width: 100%; padding: 0; border: 0; background: none; font: inherit; color: inherit; text-transform: inherit; text-align: left; cursor: pointer; }
.hc-footer-toggle::after { content: ""; width: 12px; height: 12px; background: currentColor; -webkit-mask: var(--i-chev-down) center / contain no-repeat; mask: var(--i-chev-down) center / contain no-repeat; transition: transform .2s; }
.hc-footer-toggle[aria-expanded="true"]::after { transform: rotate(180deg); }

/* === off-canvas menu (phone) === */
.hc-offcanvas { display: none; }
.hc-oc-overlay { position: fixed; inset: 0; z-index: 99; background: rgba(0, 0, 0, .5); opacity: 0; visibility: hidden; transition: opacity .25s, visibility .25s; }
.hc-oc-open .hc-oc-overlay { opacity: 1; visibility: visible; }
.hc-oc-close { position: fixed; top: 12px; left: 312px; z-index: 101; display: none; width: 36px; height: 36px; padding: 0; border: 0; background: none; color: #fff; font-size: 30px; line-height: 1; cursor: pointer; }
.hc-oc-open .hc-oc-close { display: block; }
.hc-oc-open { overflow: hidden; }

/* === bottom toolbar (phone) === */
.hc-toolbar { display: none !important; }

/* === responsive: tablet + phone header === */
@media (max-width: 1023px) {
	header.wp-block-template-part { top: -38px; }
	.hc-topbar-inner { min-height: 38px; justify-content: center !important; }
	.hc-topbar-right { display: none !important; }
}
/* phone top bar: short "Bulk Orders" label, smaller text and icons, so the
   three buttons stay on one line inside the screen */
@media (max-width: 600px) {
	.hc-topbar { font-size: 0.75rem; }
	.hc-topbar-list { gap: 16px !important; }
	.hc-tip-btn { gap: 6px; }
	.hc-tip-icon { width: 16px; height: 16px; }
	.hc-tip-more { display: none; }
}
@media (max-width: 420px) {
	.hc-topbar-list { gap: 20px !important; }
	.hc-tip-icon { display: none; }
}
@media (max-width: 359px) {
	.hc-topbar { font-size: 0.6875rem; }
	.hc-topbar-list { gap: 14px !important; }
}
@media (max-width: 1023px) {
	.hc-navbar,
	.hc-icon-heart { display: none !important; }
	.hc-mainbar { position: relative; border-bottom: 1px solid var(--hc-line); }
	.hc-mainbar-inner { flex-wrap: nowrap !important; min-height: 60px; gap: 0 10px !important; }
	/* no JS: search sits on its own full-width row */
	html:not(.hc-js) .hc-mainbar-inner { flex-wrap: wrap !important; }
	html:not(.hc-js) .hc-header-search { order: 10; flex: 1 1 100%; padding-bottom: 12px; }
	/* with JS: the search icon slides the box in over the page, so the logo
	   row keeps its height and nothing below moves */
	.hc-js .hc-header-search {
		display: block;
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		z-index: 30;
		margin: 0 !important;
		padding: 0 clamp(16px, 5vw, 80px) 12px;
		background: var(--wp--preset--color--surface);
		box-shadow: 0 8px 12px -8px rgba(38, 34, 30, .18);
		opacity: 0;
		visibility: hidden;
		transform: translateY(-6px);
		transition: opacity .18s ease, transform .18s ease, visibility 0s linear .18s;
	}
	.hc-js .hc-header-search.is-open { opacity: 1; visibility: visible; transform: none; transition: opacity .18s ease, transform .18s ease, visibility 0s; }
	.hc-search-toggle { display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 0; background: none; color: var(--hc-ink); cursor: pointer; }
	.hc-search-toggle::before { content: ""; width: 22px; height: 22px; background: currentColor; -webkit-mask: var(--i-search) center / contain no-repeat; mask: var(--i-search) center / contain no-repeat; }
	.hc-search-toggle[aria-expanded="true"], .hc-search-toggle:hover { color: var(--hc-purple); }
	.wp-block-buttons.hc-burger { display: block; flex: 1 1 0; }
	.hc-burger .wp-block-button__link,
	.hc-burger-btn {
		display: grid;
		place-items: center;
		width: 40px;
		height: 40px;
		margin-left: -8px;
		padding: 0;
		border: 0;
		background: none;
		color: var(--hc-ink);
		font-size: 0;
		cursor: pointer;
	}
	.hc-burger .wp-block-button__link::before,
	.hc-burger-btn::before { content: ""; width: 24px; height: 24px; background: currentColor; -webkit-mask: var(--i-menu) center / contain no-repeat; mask: var(--i-menu) center / contain no-repeat; }
	.hc-burger .wp-block-button__link:hover, .hc-burger-btn:hover { background: none; color: var(--hc-purple); }
	.hc-brand { flex: 0 0 auto; gap: 8px; }
	.hc-mainbar-inner > .hc-brand { margin-right: 0; }
	.hc-icon-link a { flex-direction: row; gap: 0; padding: 0; color: var(--hc-ink); font-size: 0; }
	.hc-icon-link a::before { width: 22px; height: 22px; }
	.hc-logo img { width: 152px !important; height: 24px !important; }
}
@media (max-width: 480px) {
	.hc-mainbar-inner { column-gap: 6px !important; }
	.hc-logo img { width: 136px !important; height: 21.5px !important; }
	.hc-brand .hc-brand-tag { font-size: 0.5625rem; padding-left: 6px; }
	.hc-brand { gap: 6px; }
}
@media (max-width: 359px) {
	.hc-logo img { width: 116px !important; height: 18.3px !important; }
	.hc-tools { gap: 0 !important; }
}
@media (max-width: 1023px) {
	.hc-tools { flex: 1 1 0; justify-content: flex-end; gap: 6px !important; margin-left: 0 !important; }
	.hc-titlebar { padding-block: 30px; }

	.hc-offcanvas { display: block; padding: 0 0 20px; background: var(--wp--preset--color--surface); }
	.hc-js .hc-offcanvas {
		position: fixed;
		top: 0;
		bottom: 0;
		left: 0;
		z-index: 100;
		width: 300px;
		max-width: calc(100vw - 60px);
		overflow-y: auto;
		overflow-x: hidden;
		transform: translateX(-100%);
		visibility: hidden;
		transition: transform .25s ease, visibility .25s;
	}
	.hc-js.hc-oc-open .hc-offcanvas { transform: none; visibility: visible; }
	.hc-offcanvas > * { margin-block: 0 !important; }
	.hc-oc-search { padding: 12px 15px; border-bottom: 1px solid var(--hc-line); }
	.hc-oc-search .wp-block-search__button { width: 36px; padding: 0; display: grid; place-items: center; }
	.hc-oc-search .wp-block-search__inside-wrapper::before { display: none; }
	.hc-oc-search .wp-block-search__input { padding-left: 14px; }
	.hc-oc-tabs { gap: 0 !important; }
	.hc-oc-tab { flex: 1 1 50%; margin: 0; }
	.hc-oc-tab, .hc-oc-tab-btn { text-align: center; font-size: 0.8125rem; font-weight: 600; line-height: 1; letter-spacing: .04em; text-transform: uppercase; }
	.hc-oc-tab-btn { width: 100%; min-height: 50px; padding: 0 10px; border: 0; border-bottom: 2px solid var(--hc-line); background: var(--wp--preset--color--surface); color: var(--hc-muted); font-family: inherit; cursor: pointer; }
	.hc-oc-tab-btn[aria-selected="true"] { background: var(--wp--preset--color--base); border-bottom-color: var(--hc-purple); color: var(--hc-ink); }
	.hc-oc-menu, .hc-oc-cats { font-size: 0.8125rem; font-weight: 600; line-height: 1; letter-spacing: .04em; text-transform: uppercase; }
	.hc-oc-menu[hidden], .hc-oc-cats[hidden] { display: none !important; }
	.hc-offcanvas .wp-block-navigation__container { width: 100%; gap: 0 !important; }
	.hc-offcanvas .wp-block-navigation-item { width: 100%; flex-direction: column; align-items: stretch; border-bottom: 1px solid var(--hc-line); }
	.hc-offcanvas .wp-block-navigation-item__content { box-sizing: border-box; display: flex !important; align-items: center; width: 100%; min-height: 50px; padding: 5px 20px !important; color: var(--hc-ink); text-align: left; }
	.hc-offcanvas .wp-block-navigation-item__content:hover { color: var(--hc-purple); }
	.hc-offcanvas .wp-block-navigation-submenu { position: relative; }
	.hc-offcanvas .wp-block-navigation-submenu > .wp-block-navigation-submenu__toggle { padding-right: 60px !important; }
	.hc-offcanvas .wp-block-navigation__submenu-icon { position: absolute; top: 0; right: 0; width: 50px !important; height: 50px !important; margin: 0 !important; display: grid !important; place-items: center; border-left: 1px solid var(--hc-line); pointer-events: none; }
	.hc-offcanvas .wp-block-navigation__submenu-icon svg { width: 10px; height: 10px; transform: rotate(-90deg); transition: transform .2s; }
	.hc-offcanvas [aria-expanded="true"] + .wp-block-navigation__submenu-icon svg { transform: rotate(0deg) !important; }
	.hc-offcanvas .wp-block-navigation__submenu-container {
		box-sizing: border-box;
		position: static !important;
		width: 100% !important;
		min-width: 0 !important;
		height: auto !important;
		padding: 0 0 0 15px !important;
		border: 0 !important;
		border-top: 1px solid var(--hc-line) !important;
		background: var(--wp--preset--color--base) !important;
		text-transform: none;
		letter-spacing: 0;
		font-weight: 400;
		font-size: 0.875rem;
		display: none !important;
	}
	.hc-offcanvas [aria-expanded="true"] ~ .wp-block-navigation__submenu-container { display: flex !important; visibility: visible !important; opacity: 1 !important; overflow: visible !important; }
	.hc-offcanvas .wp-block-navigation__submenu-container .wp-block-navigation-item:last-child { border-bottom: 0; }

	.hc-toolbar {
		display: grid !important;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 40;
		gap: 0 !important;
		height: 55px;
		margin: 0 !important;
		box-shadow: 0 0 9px rgba(0, 0, 0, .12);
	}
	.hc-tb { margin: 0; }
	.hc-tb a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; height: 55px; color: var(--hc-ink); font-size: 0.75rem; font-weight: 600; line-height: 1; text-decoration: none; }
	.hc-tb a:hover { color: var(--hc-purple); }
	.hc-tb-shop a::before { -webkit-mask-image: var(--i-store); mask-image: var(--i-store); }
	.hc-tb-user a::before { -webkit-mask-image: var(--i-user); mask-image: var(--i-user); }
	.wp-site-blocks { padding-bottom: 55px; }
}

@media (max-width: 781px) {
	.hc-footer-cols { gap: 0; margin-bottom: 20px !important; }
	.hc-footer-about { margin-bottom: 20px; }
	.hc-footer-col { border-top: 1px solid var(--hc-line); }
	.hc-footer-col .hc-footer-title { margin: 0; padding-block: 15px; }
	.hc-footer-panel[hidden] { display: none; }
	.hc-footer-panel { padding-bottom: 15px; }
	.hc-copyright { justify-content: center !important; text-align: center; }
}

@media (max-width: 600px) {
	.wp-site-blocks main { padding-block: 20px; }
	.hc-titlebar { padding-block: 25px; }
	.hc-titlebar h1, .hc-titlebar-title { font-size: 2.25rem; }
	.hc-titlebar-crumbs { margin-top: 6px !important; font-size: 0.875rem; }
	.wp-site-blocks main.hc-list-main { padding-block: 32px 48px; }
	.wp-site-blocks .hc-hero-section { padding-top: 20px; }
	.hc-article-body { font-size: 1rem; }
	.hc-article-body > p:first-child { font-size: 1.0625rem; }
	.hc-article-body h2 { font-size: 1.375rem; }
}

@media (prefers-reduced-motion: reduce) {
	* { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}