/*
Theme Name: HK Storefront
Template: storefront
Description: Store child theme (dark warm, orange + gold). Brand name comes from Settings > General.
Version: 0.1.0
Text Domain: hk-storefront
*/

:root {
	/* Palette A "kraft bag + ember" (light, chosen by Ohad 07.10) */
	--hk-bg: #f7f2ea;   /* kraft-paper page */
	--hk-bg2: #efe6d8;  /* alternate sections */
	--hk-bg3: #fffdf9;  /* inputs, raised surfaces */
	--hk-or: #c2551e;   /* ember: buttons, accents (white text 4.6:1) */
	--hk-or-h: #a8481a;
	--hk-go: #8f5d12;   /* amber for prices / highlights on light */
	--hk-gr: #5e7f63;   /* sage: tags like "grain free" */
	--hk-tx: #2a2018;   /* walnut text */
	--hk-mu: #6f6255;
	--hk-card: #fffdf9;
	--hk-bor: #e4d8c6;
	--hk-bor-or: rgba(194, 85, 30, .35);
	--hk-r: 14px;
	--hk-r2: 20px;
	--hk-fh: 'Secular One', 'Heebo', sans-serif;
	--hk-fb: 'Heebo', system-ui, sans-serif;
}

/* ---------- Base ---------- */
body,
button,
input,
select,
textarea {
	font-family: var(--hk-fb);
}
body {
	background: var(--hk-bg);
	color: var(--hk-tx);
}
h1, h2, h3, h4, h5, h6,
.site-title,
.woocommerce-loop-product__title,
.product_title {
	font-family: var(--hk-fh);
	font-weight: 400;
	color: var(--hk-tx);
	letter-spacing: 0;
}
a { color: var(--hk-or); }
a:hover, a:focus { color: var(--hk-or-h); }
::selection { background: var(--hk-or); color: #fff; }

/* ---------- Header ---------- */
.site-header {
	background: rgba(247, 242, 234, .96);
	border-bottom: 1px solid var(--hk-bor);
	padding-top: 1.2em;
	margin-bottom: 0;
}
.site-title a,
.site-branding .site-title a { color: var(--hk-tx); }
.site-description { color: var(--hk-mu); }
.main-navigation ul li a,
.site-header-cart .cart-contents { color: var(--hk-tx); }
.main-navigation ul li a:hover,
.main-navigation ul li.current-menu-item > a { color: var(--hk-or); }
.storefront-primary-navigation { background: transparent; }
.site-search .widget_product_search input[type=search] {
	background: var(--hk-bg3);
	color: var(--hk-tx);
	border: 1px solid var(--hk-bor);
	border-radius: 999px;
}
.site-header-cart .widget_shopping_cart,
.main-navigation ul.menu ul.sub-menu {
	background: var(--hk-bg2);
}
.storefront-breadcrumb {
	background: transparent;
	margin-bottom: 1.5em;
}
.woocommerce-breadcrumb, .woocommerce-breadcrumb a { color: var(--hk-mu); }

/* ---------- Buttons ---------- */
button, input[type=button], input[type=reset], input[type=submit],
.button, .added_to_cart, .wc-block-components-button:not(.is-link) {
	background: var(--hk-or);
	border-color: var(--hk-or);
	color: #fff;
	border-radius: 999px;
	font-weight: 700;
	transition: background .2s, transform .2s;
}
button:hover, input[type=submit]:hover, .button:hover,
.wc-block-components-button:not(.is-link):hover {
	background: var(--hk-or-h);
	border-color: var(--hk-or-h);
	color: #fff;
}
button.alt, .button.alt { background: var(--hk-or); }

/* ---------- Forms (cart / checkout / account) ---------- */
input[type=text], input[type=email], input[type=tel], input[type=number],
input[type=password], input[type=search], input[type=url], textarea, select,
.select2-container .select2-selection,
.wc-block-components-text-input input,
.wc-block-components-textarea,
.wc-blocks-components-select .wc-blocks-components-select__select {
	background: var(--hk-bg3) !important;
	color: var(--hk-tx) !important;
	border: 1px solid var(--hk-bor) !important;
	border-radius: 10px;
	box-shadow: none;
}
.wc-block-components-text-input label,
.wc-blocks-components-select__label,
.wc-block-components-checkbox__label { color: var(--hk-mu) !important; }
input:focus, textarea:focus, select:focus { border-color: var(--hk-or) !important; outline: none; }

/* ---------- Tables, panels, notices ---------- */
table, table th, table td { background: transparent; color: var(--hk-tx); border-color: var(--hk-bor); }
table:not(.has-background) tbody tr:nth-child(2n) td { background: var(--hk-card); }
.wc-block-components-sidebar, .wc-block-components-totals-wrapper,
.wc-block-components-panel, .wc-block-checkout__sidebar,
.cart-collaterals .cart_totals, .woocommerce-checkout-review-order {
	border-color: var(--hk-bor) !important;
}
.woocommerce-info, .woocommerce-message, .woocommerce-noreviews, p.no-comments,
.wc-block-components-notice-banner {
	background: var(--hk-bg3);
	color: var(--hk-tx);
	border-inline-start: 4px solid var(--hk-or);
	border-radius: var(--hk-r);
}
.woocommerce-info::before, .woocommerce-message::before { color: var(--hk-or); }
.woocommerce-error { border-radius: var(--hk-r); }

/* Delivery-date notice from the core plugin */
.hk-delivery-notice {
	background: rgba(232, 98, 42, .1) !important;
	border: 1px solid var(--hk-bor-or) !important;
	color: var(--hk-tx) !important;
	border-radius: var(--hk-r) !important;
	padding: 1em 1.3em !important;
	font-weight: 600;
}
.hk-delivery-notice::before { display: none; }

/* ---------- Product cards ---------- */
ul.products li.product {
	background: var(--hk-card);
	border: 1px solid var(--hk-bor);
	border-radius: var(--hk-r2);
	padding: 1em 1em 1.4em;
	transition: border-color .25s, transform .25s;
}
ul.products li.product:hover { border-color: var(--hk-bor-or); transform: translateY(-3px); }
ul.products li.product img { border-radius: var(--hk-r); }
ul.products li.product .price, .single-product .summary .price { color: var(--hk-go); font-weight: 700; }
.onsale { background: var(--hk-or); color: #fff; border: 0; border-radius: 999px; }

/* ---------- Footer ---------- */
.site-footer { background: var(--hk-bg2); color: var(--hk-mu); border-top: 1px solid var(--hk-bor); }
.site-footer a:not(.button) { color: var(--hk-tx); }
.hk-footer-line { padding: 1.5em 0; text-align: center; font-size: .9em; }
.storefront-handheld-footer-bar { background: var(--hk-bg2); border-top: 1px solid var(--hk-bor); }
.storefront-handheld-footer-bar ul li > a { color: var(--hk-tx); background: transparent; }

/* WhatsApp float (left side in RTL so it does not cover the cart) */
.hk-wa-float {
	position: fixed;
	bottom: 22px;
	left: 22px;
	z-index: 999;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	display: grid;
	place-items: center;
	background: #25d366;
	color: #fff !important;
	box-shadow: 0 8px 22px rgba(60, 40, 20, .25);
	transition: transform .2s;
}
.hk-wa-float:hover { transform: scale(1.07); }
@media (max-width: 767px) { .hk-wa-float { bottom: 80px; left: 16px; } }

/* ================= Homepage ================= */
.home .site-content > .col-full { max-width: none; padding: 0; margin: 0; }
.home .site-header { margin-bottom: 0 !important; }
.home .site-main { margin-bottom: 0; }
.hk-wrap { max-width: 1180px; margin: 0 auto; padding: 0 20px; }
.hk-narrow { max-width: 760px; }
.hk-center { text-align: center; margin-top: 2em; }

.hk-pill {
	display: inline-block;
	padding: .35em 1em;
	border: 1px solid var(--hk-bor-or);
	border-radius: 999px;
	color: var(--hk-or);
	background: rgba(232, 98, 42, .08);
	font-size: .82rem;
	font-weight: 700;
}
.hk-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .5em;
	padding: .85em 1.8em;
	border-radius: 999px;
	font-weight: 700;
	text-decoration: none;
	transition: background .2s, border-color .2s, transform .2s;
}
.hk-btn:hover { transform: translateY(-2px); }
.hk-btn--primary { background: var(--hk-or); color: #fff !important; box-shadow: 0 8px 22px rgba(194, 85, 30, .25); }
.hk-btn--primary:hover { background: var(--hk-or-h); }
.hk-btn--ghost { border: 1px solid var(--hk-bor); color: var(--hk-tx) !important; background: var(--hk-bg3); }
.hk-btn--ghost:hover { border-color: var(--hk-bor-or); }

/* Hero */
.hk-hero {
	position: relative;
	overflow: hidden;
	padding: 7em 0 6em;
	text-align: center;
	background:
		radial-gradient(ellipse at 80% 15%, rgba(194, 85, 30, .12), transparent 55%),
		radial-gradient(ellipse at 15% 90%, rgba(94, 127, 99, .10), transparent 50%),
		linear-gradient(180deg, #fbf6ee, #f1e7d7);
}
.hk-hero__dog {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: auto;
	max-width: 32%;
	object-fit: cover;
	object-position: right center;
	opacity: .9;
	-webkit-mask-image: linear-gradient(to left, transparent 0%, rgba(0,0,0,.6) 35%, #000 70%);
	mask-image: linear-gradient(to left, transparent 0%, rgba(0,0,0,.6) 35%, #000 70%);
	pointer-events: none;
}
.hk-hero__inner { position: relative; }
.hk-hero__title {
	font-size: clamp(2.6rem, 6vw, 4.6rem);
	line-height: 1.12;
	margin: .45em 0 .35em;
}
.hk-hero__title em { font-style: normal; color: var(--hk-or); }
.hk-hero__title strong { font-weight: 400; color: var(--hk-go); }
.hk-hero__lead { max-width: 560px; margin: 0 auto 2em; color: var(--hk-mu); font-size: 1.15rem; }
.hk-hero__cta { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.hk-hero__next { margin-top: 1.6em; color: var(--hk-mu); font-size: .95rem; }

/* USP strip */
.hk-usps { background: var(--hk-bg2); border-block: 1px solid var(--hk-bor); }
.hk-usps__grid { display: grid; grid-template-columns: repeat(4, 1fr); }
.hk-usp { display: flex; gap: 12px; align-items: center; padding: 1.4em 1em; }
.hk-usp + .hk-usp { border-inline-start: 1px solid var(--hk-bor); }
.hk-usp__icon {
	flex: none;
	width: 42px;
	height: 42px;
	border-radius: 12px;
	display: grid;
	place-items: center;
	background: rgba(232, 98, 42, .1);
	font-size: 1.2rem;
}
.hk-usp strong { display: block; font-size: .95rem; }
.hk-usp span { color: var(--hk-mu); font-size: .82rem; }

/* Sections */
.hk-sec { padding: 5em 0; text-align: center; }
.hk-sec--alt { background: var(--hk-bg2); }
.hk-sec__title { font-size: clamp(1.8rem, 4vw, 2.6rem); margin: .4em 0 1em; }
.hk-sec ul.products { text-align: start; }
.hk-empty {
	padding: 2.5em;
	border: 1px dashed var(--hk-bor);
	border-radius: var(--hk-r2);
	color: var(--hk-mu);
}
.hk-split { display: grid; grid-template-columns: 1.3fr 1fr; gap: 3em; align-items: center; text-align: start; }
.hk-split p { color: var(--hk-mu); font-size: 1.05rem; }
.hk-split strong { color: var(--hk-tx); }
.hk-card {
	background: var(--hk-card);
	border: 1px solid var(--hk-bor);
	border-radius: var(--hk-r2);
	padding: 2em;
	display: flex;
	flex-direction: column;
	gap: .8em;
	align-items: flex-start;
}
.hk-card--accent { border-color: var(--hk-bor-or); background: rgba(232, 98, 42, .07); }
.hk-card__label { color: var(--hk-mu); font-size: .9rem; }
.hk-card__big { font-family: var(--hk-fh); font-weight: 400; font-size: 1.8rem; color: var(--hk-go); }

/* FAQ */
.hk-faq {
	text-align: start;
	background: var(--hk-card);
	border: 1px solid var(--hk-bor);
	border-radius: var(--hk-r);
	margin-bottom: 10px;
	transition: border-color .2s;
}
.hk-faq[open] { border-color: var(--hk-bor-or); }
.hk-faq summary {
	cursor: pointer;
	padding: 1.1em 1.4em;
	font-weight: 600;
	list-style: none;
	display: flex;
	justify-content: space-between;
	gap: 1em;
}
.hk-faq summary::-webkit-details-marker { display: none; }
.hk-faq summary::after { content: '+'; color: var(--hk-or); font-size: 1.3em; line-height: 1; }
.hk-faq[open] summary::after { content: '−'; }
.hk-faq summary:hover { color: var(--hk-or); }
.hk-faq p { padding: 0 1.4em 1.2em; margin: 0; color: var(--hk-mu); }

/* Mobile */
@media (max-width: 900px) {
	.hk-usps__grid { grid-template-columns: repeat(2, 1fr); }
	.hk-usp:nth-child(3) { border-inline-start: 0; }
	.hk-usp:nth-child(n+3) { border-top: 1px solid var(--hk-bor); }
	.hk-split { grid-template-columns: 1fr; gap: 2em; }
}
@media (max-width: 600px) {
	.hk-hero { padding: 4.5em 0 4em; }
	.hk-hero__dog { max-width: 45%; opacity: .35; }
	.hk-usp { padding: 1em .6em; }
	.hk-sec { padding: 3.5em 0; }
}
@media (prefers-reduced-motion: reduce) {
	* { transition: none !important; }
}

/* ================= Content pages ================= */
.page .entry-content { max-width: 760px; margin-inline: auto; line-height: 1.8; }
.page .entry-content h2 { font-size: 1.45rem; margin: 1.8em 0 .5em; color: var(--hk-tx); }
.page .entry-content ul { margin-inline-start: 1.2em; }
.page .entry-content li { margin-bottom: .4em; }
.page .entry-content em { color: var(--hk-mu); }
.hentry .entry-header .entry-title { text-align: center; }
.hk-business-card {
	list-style: none;
	margin: 1em 0 !important;
	padding: 1.2em 1.4em;
	background: var(--hk-card);
	border: 1px solid var(--hk-bor);
	border-radius: var(--hk-r);
}

/* ================= Forms ================= */
.hk-form { max-width: 560px; }
.hk-form label { display: block; font-weight: 600; margin-bottom: .35em; }
.hk-form input[type=text], .hk-form input[type=tel], .hk-form input[type=email], .hk-form textarea { width: 100%; }
.hk-form .hk-check label { font-weight: 400; display: flex; gap: .6em; align-items: flex-start; }
.hk-form .hk-check input { margin-top: .4em; }
.hk-hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.hk-form-msg { padding: 1em 1.3em; border-radius: var(--hk-r); margin-bottom: 1.2em; font-weight: 600; }
.hk-form-msg--ok { background: rgba(58, 139, 90, .15); border: 1px solid var(--hk-gr); }
.hk-form-msg--err { background: rgba(200, 60, 40, .15); border: 1px solid #c83c28; }

/* ================= Footer legal ================= */
.hk-legal-links { margin-bottom: .8em; }
.hk-legal-links a { color: var(--hk-tx); }
.hk-footer-line p { margin: 0; }

/* ================= Cookie consent ================= */
.hk-consent {
	position: fixed;
	inset-inline: 16px;
	bottom: 16px;
	z-index: 1000;
	max-width: 640px;
	margin-inline: auto;
	padding: 1.1em 1.3em;
	background: var(--hk-bg3);
	border: 1px solid var(--hk-bor-or);
	border-radius: var(--hk-r2);
	box-shadow: 0 12px 34px rgba(60, 40, 20, .18);
	display: flex;
	gap: 1em;
	align-items: center;
	flex-wrap: wrap;
}
.hk-consent[hidden] { display: none; }
.hk-consent p { margin: 0; flex: 1 1 260px; font-size: .92rem; }
.hk-consent__actions { display: flex; gap: .6em; }
.hk-consent .hk-btn { padding: .6em 1.3em; font-size: .9rem; }
.hk-consent-reopen {
	position: fixed;
	bottom: 22px;
	right: 22px;
	z-index: 998;
	width: 40px;
	height: 40px;
	padding: 0;
	border-radius: 50%;
	background: var(--hk-bg3) !important;
	border: 1px solid var(--hk-bor) !important;
	font-size: 1.1rem;
	line-height: 1;
}
@media (max-width: 767px) {
	.hk-consent { bottom: 76px; }
	.hk-consent-reopen { bottom: 80px; right: 16px; }
}

/* Product gallery + cards: white packshots sit on rounded tiles */
.woocommerce-product-gallery__image img,
.woocommerce-product-gallery img { border-radius: var(--hk-r2); }

/* ================= Brand marquee (top of homepage) ================= */
.hk-brands { overflow: hidden; background: var(--hk-or); color: #fff; border-block: 1px solid rgba(0, 0, 0, .15); }
.hk-brands__track { display: flex; width: max-content; animation: hk-marquee 38s linear infinite; }
.hk-brands:hover .hk-brands__track { animation-play-state: paused; }
.hk-brands ul { display: flex; list-style: none; margin: 0; padding: 0; }
.hk-brands li { padding: .55em 1.6em; font-family: var(--hk-fh); font-size: 1.05rem; white-space: nowrap; position: relative; }
.hk-brands li::after { content: '•'; position: absolute; inset-inline-end: -.25em; opacity: .55; }
@keyframes hk-marquee { from { transform: translateX(0); } to { transform: translateX(50%); } } /* RTL: moves rightwards */

/* ================= Rotating sacks (hero, right side in RTL) ================= */
.hk-sacks { position: absolute; top: 50%; translate: 0 -50%; inset-inline-start: 4%; width: 21%; max-width: 290px; aspect-ratio: 1; pointer-events: none; }
.hk-sacks__img {
	position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain;
	border-radius: var(--hk-r2); background: #fff;
	box-shadow: 0 18px 40px rgba(60, 40, 20, .18), 0 0 0 1px var(--hk-bor);
	opacity: 0;
	animation: hk-sack calc(var(--hk-n) * 3.5s) infinite;
	animation-delay: calc(var(--hk-i) * 3.5s);
}
.hk-sacks__img:first-child { opacity: 1; }
@keyframes hk-sack {
	0% { opacity: 0; transform: translateY(14px) scale(.97); }
	6%, 22% { opacity: 1; transform: none; }
	28%, 100% { opacity: 0; transform: translateY(-10px) scale(.98); }
}

/* ================= Accessories strip ================= */
.hk-acc__row {
	display: grid; grid-auto-flow: column; grid-auto-columns: minmax(170px, 210px); gap: 14px;
	overflow-x: auto; scroll-snap-type: x mandatory; padding-block: 4px 14px; text-align: center;
	scrollbar-width: thin; scrollbar-color: var(--hk-or) var(--hk-bg2);
}
.hk-acc__row:focus-visible { outline: 2px solid var(--hk-or); outline-offset: 4px; }
.hk-acc__item { margin: 0; scroll-snap-align: start; background: var(--hk-card); border: 1px solid var(--hk-bor); border-radius: var(--hk-r2); padding: 10px; transition: border-color .25s, transform .25s; }
.hk-acc__item:hover { border-color: var(--hk-bor-or); transform: translateY(-3px); }
.hk-acc__item img { width: 100%; aspect-ratio: 1; object-fit: contain; background: #fff; border-radius: var(--hk-r); }
.hk-acc__item figcaption { margin-top: .6em; font-weight: 600; font-size: .95rem; }
.hk-acc__cta { margin-top: 1.4em; }
.hk-acc__note { color: var(--hk-mu); font-size: .8rem; margin-top: .6em; }

@media (max-width: 900px) {
	.hk-sacks { display: none; } /* text first on small screens; sacks show in the catalog below */
}
@media (prefers-reduced-motion: reduce) {
	.hk-brands__track { animation: none; }
	.hk-sacks__img { animation: none; }
}

/* ================= Scroll story (homepage) ================= */
.hk-muted { color: var(--hk-mu); }
.hk-hero { min-height: min(88vh, 820px); display: grid; align-items: center; }
.hk-hero__title strong { font-weight: 400; color: var(--hk-go); display: block; }
.hk-scrollhint { position: absolute; bottom: 22px; inset-inline-start: 50%; translate: 50% 0; width: 26px; height: 42px; border: 2px solid var(--hk-bor); border-radius: 14px; }
.hk-scrollhint span { position: absolute; top: 7px; inset-inline-start: 50%; translate: 50% 0; width: 4px; height: 8px; border-radius: 2px; background: var(--hk-or); animation: hk-wheel 1.6s ease-in-out infinite; }
@keyframes hk-wheel { 0% { opacity: 0; transform: translateY(0); } 30% { opacity: 1; } 100% { opacity: 0; transform: translateY(14px); } }

.hk-story { position: relative; background: #050403; }
.hk-story__stage { position: relative; height: 100vh; min-height: 560px; overflow: hidden; display: grid; place-items: center; isolation: isolate; }
.hk-story__sky { position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 120%, #1a1208 0%, #050403 60%); z-index: -3; }
.hk-story__stars { position: absolute; inset: 0; z-index: -2; opacity: .8;
	background-image: radial-gradient(1px 1px at 12% 22%, #fff8 50%, transparent 51%), radial-gradient(1px 1px at 72% 14%, #fff7 50%, transparent 51%),
	radial-gradient(1.5px 1.5px at 38% 64%, #fff6 50%, transparent 51%), radial-gradient(1px 1px at 86% 58%, #fff8 50%, transparent 51%),
	radial-gradient(1px 1px at 22% 82%, #fff5 50%, transparent 51%), radial-gradient(1.5px 1.5px at 58% 36%, #fff7 50%, transparent 51%),
	radial-gradient(1px 1px at 92% 86%, #fff6 50%, transparent 51%), radial-gradient(1px 1px at 6% 50%, #fff5 50%, transparent 51%); }
.hk-story__glow { position: absolute; width: 120vmax; height: 120vmax; border-radius: 50%; z-index: -1;
	background: radial-gradient(circle, rgba(255, 196, 120, .55) 0%, rgba(232, 98, 42, .28) 30%, rgba(232, 98, 42, 0) 62%); }
.hk-story__cloud { position: absolute; inset: 0; z-index: 1; }
.hk-story__item { position: absolute; left: 50%; top: 40%; width: min(30vmin, 290px); aspect-ratio: 1; will-change: transform, opacity, filter; }
.hk-story__item img { width: 100%; height: 100%; object-fit: contain; background: #fff; border-radius: 24px; box-shadow: 0 30px 80px rgba(0, 0, 0, .6), 0 0 0 1px rgba(255, 255, 255, .06); }
/* no JS / reduced motion: a tidy row of sacks */
html:not(.hk-motion) .hk-story__cloud { position: static; display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; padding-inline: 16px; }
html:not(.hk-motion) .hk-story__item { position: static; width: 130px; }
.hk-story__door { position: absolute; inset-block: 18%; inset-inline-end: 6%; width: min(16vw, 180px); z-index: 0; }
.hk-story__door span { position: absolute; inset: 0; transform-origin: right center; border-radius: 6px;
	background: linear-gradient(90deg, #ffe7b8, #ffb768 60%, rgba(232, 98, 42, .2)); box-shadow: 0 0 80px 30px rgba(255, 180, 90, .35); }
.hk-story__steps { list-style: none; margin: 0; padding: 0; position: absolute; inset-block-end: 12%; inset-inline: 0; display: grid; place-items: center; z-index: 2; }
.hk-story__step { grid-area: 1 / 1; text-align: center; max-width: 560px; padding-inline: 20px; }
.hk-story__step h2 { font-size: clamp(1.9rem, 5vw, 3.2rem); margin: .1em 0 .2em; color: #fbf3e8; text-shadow: 0 4px 24px rgba(0, 0, 0, .6); }
.hk-story__step p { color: #e8dccd; font-size: 1.1rem; margin: 0; text-shadow: 0 2px 12px rgba(0, 0, 0, .7); }
.hk-story__num { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--hk-or); color: #fff; font-weight: 700; }
.hk-story__progress { position: absolute; inset-block-end: 5%; inset-inline: 20%; height: 3px; background: rgba(255, 255, 255, .12); border-radius: 3px; z-index: 2; }
.hk-story__progress span { position: absolute; inset: 0; background: var(--hk-or); transform-origin: right center; transform: scaleX(0); border-radius: 3px; }
/* No JS / reduced motion: story reads as a simple stacked section */
html:not(.hk-motion) .hk-story__stage { height: auto; padding-block: 5em; }
html:not(.hk-motion) .hk-story__steps { position: static; gap: 2em; margin-top: 2em; }
html:not(.hk-motion) .hk-story__step { grid-area: auto; }
html:not(.hk-motion) .hk-story__door, html:not(.hk-motion) .hk-story__progress { display: none; }

/* Numbers */
.hk-numbers { background: var(--hk-bg2); border-block: 1px solid var(--hk-bor); }
.hk-numbers__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); text-align: center; }
.hk-number { padding: 2.2em 1em; }
.hk-number + .hk-number { border-inline-start: 1px solid var(--hk-bor); }
.hk-number strong { display: block; font-family: var(--hk-fh); font-weight: 400; font-size: clamp(2.2rem, 5vw, 3.4rem); color: var(--hk-or); line-height: 1; font-variant-numeric: tabular-nums; }
.hk-number span { color: var(--hk-mu); font-size: .92rem; }

/* Brand wall */
.hk-wall { padding-block: 5em; overflow: hidden; text-align: center; }
.hk-wall__row { display: flex; gap: 1.2em; white-space: nowrap; margin-top: 1.1em; will-change: transform; }
.hk-wall__row span { font-family: var(--hk-fh); font-size: clamp(2rem, 6vw, 4.2rem); line-height: 1.1; color: transparent; -webkit-text-stroke: 1px rgba(42, 32, 24, .28); }
.hk-wall__row[data-hk-drift="-1"] span:nth-child(3n+1) { color: var(--hk-or); -webkit-text-stroke: 0; }
.hk-wall__row[data-hk-drift="1"] span:nth-child(4n+2) { color: var(--hk-go); -webkit-text-stroke: 0; }

@media (max-width: 900px) {
	.hk-numbers__grid { grid-template-columns: repeat(2, 1fr); }
	.hk-number:nth-child(3) { border-inline-start: 0; }
	.hk-number:nth-child(n+3) { border-top: 1px solid var(--hk-bor); }
	.hk-story__door { width: 22vw; inset-inline-end: 0; }
	.hk-story__item { width: 40vmin; }
	.hk-story__steps { inset-block-end: 9%; }
}

.hk-form-notice { font-size: .8rem; color: var(--hk-mu); max-width: 60ch; }

/* ================= Guides + cities ================= */
.hk-guides { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; margin-top: 1.5em; }
.hk-guide { display: grid; gap: .4em; padding: 1.2em 1.3em; background: var(--hk-card); border: 1px solid var(--hk-bor); border-radius: var(--hk-r2); color: var(--hk-tx) !important; text-decoration: none; transition: border-color .2s, transform .2s; }
.hk-guide:hover { border-color: var(--hk-bor-or); transform: translateY(-2px); }
.hk-guide strong { font-family: var(--hk-fh); font-weight: 400; font-size: 1.15rem; }
.hk-guide span { color: var(--hk-mu); font-size: .9rem; line-height: 1.5; }
.hk-cities { margin-top: 2.5em; padding: 1.2em 1.4em; background: var(--hk-card); border: 1px solid var(--hk-bor); border-radius: var(--hk-r2); }
.hk-cities h2 { font-size: 1.15rem !important; margin: 0 0 .4em !important; }
.hk-cities [aria-current] { color: var(--hk-or); font-weight: 700; }
.term-description, .woocommerce-products-header .term-description { max-width: 760px; margin-inline: auto; color: var(--hk-mu); line-height: 1.75; }

/* ================= Light theme refinements ================= */
.site-header { box-shadow: 0 1px 0 var(--hk-bor); }
ul.products li.product { box-shadow: 0 1px 0 rgba(60, 40, 20, .04); }
ul.products li.product:hover { box-shadow: 0 14px 30px rgba(60, 40, 20, .12); }
.hk-usp__icon, .hk-number strong { color: var(--hk-or); }
.hk-hero__title strong { color: var(--hk-or); }
.hk-wall__row[data-hk-drift="1"] span:nth-child(4n+2) { color: var(--hk-gr); }
.hk-brands { box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .08); }
.hk-delivery-notice { background: #fbe9dd !important; }
.woocommerce-info, .woocommerce-message, .wc-block-components-notice-banner { box-shadow: 0 1px 0 var(--hk-bor); }
.hk-consent-reopen { box-shadow: 0 4px 12px rgba(60, 40, 20, .15); }

/* ===== Story v3: brands, order card, delivery ticket (Ohad 07.10: the scene must mean something) ===== */
.hk-story__door { display: none; }
.hk-story__brand { position: absolute; inset-block-end: -1.9em; inset-inline: -20%; text-align: center; font-family: var(--hk-fh); font-size: clamp(1.5rem, 3vw, 2.1rem); color: #f3e6d4; text-shadow: 0 2px 10px rgba(0, 0, 0, .8); white-space: nowrap; }
.hk-story__order, .hk-story__ticket {
	position: absolute; z-index: 4; color: #2a2018; background: #fffdf9; border-radius: 20px;
	box-shadow: 0 24px 60px rgba(0, 0, 0, .45); padding: 1.1em 1.3em; display: grid; gap: .5em;
}
.hk-story__card-title { font-family: var(--hk-fh); font-weight: 400; font-size: 1.2rem; }
.hk-story__order { inset-inline-end: 8%; top: 26%; width: min(340px, 34vw); }
.hk-story__order ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .45em; }
.hk-story__order li { display: flex; justify-content: space-between; gap: 1em; font-size: .9rem; border-bottom: 1px dashed #e4d8c6; padding-bottom: .4em; }
.hk-story__order li b { color: #8f5d12; white-space: nowrap; }
.hk-story__card-foot { margin: 0; font-size: .85rem; color: #5e7f63; font-weight: 600; }
.hk-story__ticket { inset-inline: 0; margin-inline: auto; top: 22%; width: min(460px, 86vw); text-align: center; justify-items: center; border: 2px dashed rgba(194, 85, 30, .45); }
.hk-story__truck { font-size: 2.2rem; line-height: 1; }
.hk-story__date { font-family: var(--hk-fh); font-size: clamp(1.5rem, 3.4vw, 2.2rem); color: #c2551e; }
.hk-story__cities { font-size: .88rem; color: #6f6255; }
.hk-story__courier { font-size: .82rem; color: #5e7f63; font-weight: 600; }
.hk-story__ticket .hk-btn { margin-top: .4em; }
@media (max-width: 700px) {
	.hk-story__order { inset-inline: 0; margin-inline: auto; top: auto; bottom: 30%; width: min(340px, 88vw); }
	.hk-story__steps { inset-block-end: 6%; }
	.hk-story__ticket { top: 14%; }
}
/* no JS / reduced motion: cards sit in the flow */
html:not(.hk-motion) .hk-story__order, html:not(.hk-motion) .hk-story__ticket { position: static; margin: 1.5em auto 0; }
html:not(.hk-motion) .hk-story__brand { position: static; display: block; margin-top: .3em; }

/* ================= Rexy chat ================= */
.hk-rexy__fab {
	position: fixed; z-index: 1001; left: 22px; bottom: 92px;
	display: inline-flex; align-items: center; gap: .5em; padding: .55em 1em .55em .7em;
	border-radius: 999px; border: 0; cursor: pointer; font: 700 .92rem var(--hk-fb);
	background: var(--hk-tx); color: var(--hk-bg); box-shadow: 0 10px 26px rgba(60, 40, 20, .28);
	transition: transform .2s;
}
.hk-rexy__fab:hover { transform: translateY(-2px); }
.hk-rexy__fab.is-open .hk-rexy__fab-text { display: none; }
.hk-rexy__face { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--hk-or); font-size: 1.2rem; flex: none; }
.hk-rexy__panel {
	position: fixed; z-index: 1002; left: 22px; bottom: 150px; width: min(370px, calc(100vw - 32px)); max-height: min(560px, calc(100vh - 190px));
	display: flex; flex-direction: column; background: var(--hk-bg3); color: var(--hk-tx);
	border: 1px solid var(--hk-bor); border-radius: 20px; box-shadow: 0 24px 60px rgba(60, 40, 20, .3); overflow: hidden;
}
.hk-rexy__panel[hidden] { display: none; }
.hk-rexy__head { display: flex; align-items: center; gap: .7em; padding: .8em 1em; background: var(--hk-tx); color: var(--hk-bg); }
.hk-rexy__head strong { display: block; font-family: var(--hk-fh); font-weight: 400; font-size: 1.1rem; }
.hk-rexy__head span { font-size: .78rem; opacity: .8; }
.hk-rexy__x { margin-inline-start: auto; background: transparent !important; border: 0 !important; color: inherit !important; font-size: 1.1rem; padding: .3em .5em; }
.hk-rexy__log { flex: 1; overflow-y: auto; padding: 1em; display: grid; gap: .6em; align-content: start; }
.hk-rexy__msg { max-width: 86%; padding: .65em .9em; border-radius: 16px; font-size: .92rem; line-height: 1.55; display: grid; gap: .35em; }
.hk-rexy__msg p { margin: 0; }
.hk-rexy__msg--bot { background: var(--hk-bg2); border-end-start-radius: 4px; justify-self: start; }
.hk-rexy__msg--me { background: var(--hk-or); color: #fff; border-end-end-radius: 4px; justify-self: end; }
.hk-rexy__msg a { font-weight: 700; color: var(--hk-or); text-decoration: underline; font-size: .86rem; }
.hk-rexy__quick { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 1em .6em; }
.hk-rexy__chip { font: 600 .8rem var(--hk-fb) !important; padding: .35em .8em !important; border-radius: 999px !important; background: var(--hk-bg) !important; color: var(--hk-tx) !important; border: 1px solid var(--hk-bor) !important; }
.hk-rexy__chip:hover { border-color: var(--hk-or) !important; color: var(--hk-or) !important; }
.hk-rexy__form { display: flex; gap: 6px; padding: .7em 1em; border-top: 1px solid var(--hk-bor); }
.hk-rexy__form input { flex: 1; min-width: 0; border-radius: 999px !important; padding: .55em 1em !important; }
.hk-rexy__form .hk-btn { padding: .55em 1.1em; }
.hk-rexy__note { margin: 0; padding: 0 1em .7em; font-size: .72rem; color: var(--hk-mu); }
@media (max-width: 767px) {
	.hk-rexy__fab { left: 16px; bottom: 140px; }
	.hk-rexy__fab-text { display: none; }
	.hk-rexy__panel { left: 8px; right: 8px; width: auto; bottom: 76px; max-height: calc(100vh - 110px); }
}