/* ==========================================================================
   SHOP LAYER — loaded only on store pages and the home page.
   Uses the tokens and primitives defined in style.css.
   ========================================================================== */

/* ==========================================================================
   01. PRODUCT GRIDS
   ========================================================================== */
ul.products {
	list-style: none; margin: 0; padding: 0;
	display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(2.25rem, 1rem + 4vw, 4.5rem) clamp(0.9rem, 0.4rem + 2vw, 2.25rem);
}
@media (min-width: 768px)  { ul.products { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1100px) { ul.products { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* Staggered gallery: cards sit at deliberately different heights */
ul.products.ka-products--stagger > li:nth-child(even) { margin-block-start: clamp(2rem, 8vw, 3.5rem); }
@media (min-width: 992px) {
	ul.products.ka-products--stagger { align-items: start; }
	ul.products.ka-products--stagger > li:nth-child(4n + 1) { margin-block-start: 0; }
	ul.products.ka-products--stagger > li:nth-child(4n + 2) { margin-block-start: 4.5rem; }
	ul.products.ka-products--stagger > li:nth-child(4n + 3) { margin-block-start: 1.75rem; }
	ul.products.ka-products--stagger > li:nth-child(4n + 4) { margin-block-start: 7rem; }
}

/* Rail: horizontal scroll-snap that bleeds off the screen edge */
ul.products.ka-products--rail {
	display: flex; gap: clamp(1rem, 2vw, 2rem);
	overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory;
	padding-inline: var(--ka-gutter); padding-block-end: 2rem; scroll-padding-inline: var(--ka-gutter);
	scrollbar-width: none;
}
ul.products.ka-products--rail::-webkit-scrollbar { display: none; }
ul.products.ka-products--rail > li { flex: 0 0 clamp(220px, 68vw, 330px); scroll-snap-align: start; }

/* ==========================================================================
   02. THE CARD
   ========================================================================== */
.ka-card { position: relative; list-style: none; transition: transform 0.6s var(--ka-ease); }

.ka-card__media {
	position: relative; aspect-ratio: 4 / 5; overflow: hidden; isolation: isolate;
	/* soft studio backdrop behind transparent bottle PNGs */
	background: radial-gradient(90% 70% at 50% 35%, #f8f5ee 0%, var(--ka-stone) 72%);
	box-shadow: var(--ka-shadow);
	transition: box-shadow 0.8s var(--ka-ease);
}
.ka-card__media::after { /* gold hairline that draws in on hover */
	content: ""; position: absolute; inset-inline: 0; inset-block-end: 0; height: 2px; z-index: 2;
	background: var(--ka-gold); transform: scaleX(0); transform-origin: center; transition: transform 0.9s var(--ka-ease);
}
.ka-card__link { position: absolute; inset: 0; display: block; }
.ka-card__img {
	width: 100%; height: 100%; object-fit: cover;
	transition: transform 1.4s var(--ka-ease), opacity 0.9s var(--ka-ease);
}
.ka-card__img--alt { position: absolute; inset: 0; opacity: 0; }

.ka-card__tag {
	position: absolute; inset-block-start: 0.9rem; inset-inline-start: 0.9rem; z-index: 3;
	padding: 0.3rem 0.8rem; background: var(--ka-oud); color: var(--ka-gold);
	font-size: var(--ka-fs-xs); font-weight: 500; letter-spacing: 0.12em; line-height: 1.7;
}
.ka-card__tag--muted { background: var(--ka-cream); color: var(--ka-muted); }

/* Add to cart — mobile-first: a "+" disc in the corner, always reachable with a thumb */
.ka-card__add {
	position: absolute; inset-block-end: 0.7rem; inset-inline-end: 0.7rem; z-index: 3;
	display: grid; place-items: center; width: 46px; height: 46px; padding: 0; border-radius: 50%;
	background: var(--ka-cream); color: var(--ka-oud); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
	transition: background-color 0.5s var(--ka-ease), color 0.5s var(--ka-ease), transform 0.6s var(--ka-ease);
}
.ka-card__add::before { content: "+"; font-family: var(--ka-font-display); font-weight: 200; font-size: 1.9rem; line-height: 1; }
.ka-card__add-text, .ka-card__add .ka-arrow { display: none; }
.ka-card__add:hover, .ka-card__add:active { background: var(--ka-gold); }
.ka-card__add.loading { opacity: 0.6; pointer-events: none; }

/* Mouse devices: a slim bar rises from the bottom edge of the image on hover */
@media (hover: hover) and (pointer: fine) {
	.ka-card__add {
		inset-inline: 0; inset-block-end: 0; width: auto; height: auto; padding: 1.05rem 1.4rem; border-radius: 0;
		display: flex; align-items: center; justify-content: space-between; gap: 1rem;
		background: rgba(17, 17, 17, 0.94); color: var(--ka-cream); box-shadow: none;
		font-size: var(--ka-fs-sm); font-weight: 500; letter-spacing: 0.05em;
		transform: translateY(101%); transition: transform 0.8s var(--ka-ease), color 0.4s, background-color 0.4s;
	}
	.ka-card__add::before { content: none; }
	.ka-card__add-text { display: inline; }
	.ka-card__add .ka-arrow { display: inline-block; }
	.ka-card__add:hover { background: var(--ka-gold); color: var(--ka-oud); }
	.ka-card__add:hover .ka-arrow { transform: translateX(calc(var(--ka-dir) * 0.5em)) scaleX(var(--ka-dir)); }

	.ka-card:hover { transform: translateY(-8px); }
	.ka-card:hover .ka-card__media { box-shadow: var(--ka-shadow-lift); }
	.ka-card:hover .ka-card__media::after { transform: scaleX(1); }
	.ka-card:hover .ka-card__img { transform: scale(1.03); }
	.ka-card:hover .ka-card__img--alt { opacity: 1; }
	.ka-card:hover .ka-card__add, .ka-card:focus-within .ka-card__add { transform: none; }
}

.ka-card__body { padding-block-start: 1.1rem; }
.ka-card__cat { display: block; font-size: var(--ka-fs-xs); font-weight: 500; letter-spacing: 0.18em; color: var(--ka-bronze); }
.ka-card__title { margin: 0.3rem 0 0.45rem; font-size: clamp(1.05rem, 0.95rem + 0.6vw, 1.4rem); font-weight: 300; line-height: 1.55; }
.ka-card__title a { background: linear-gradient(currentColor, currentColor) no-repeat 100% 100% / 0 1px; transition: background-size 0.8s var(--ka-ease); }
.ka-card__title a:hover { background-size: 100% 1px; background-position: 0 100%; }
.ka-card__price { display: block; font-size: var(--ka-fs-sm); font-weight: 500; color: var(--ka-ink); }
.ka-card__price del { margin-inline-end: 0.6em; opacity: 0.4; font-weight: 300; }
.ka-card__price ins { text-decoration: none; color: var(--ka-bronze); }
.ka-card__more { margin-block-start: 0.5rem; }

/* ==========================================================================
   03. ARCHIVE (shop / category)
   ========================================================================== */
.woocommerce-products-header { margin-block-end: clamp(2rem, 4vw, 4rem); padding-block-end: 2rem; border-block-end: 1px solid var(--ka-line); }
.woocommerce-products-header__title { margin: 0; font-size: var(--ka-fs-hero); font-weight: 200; line-height: 1.05; }
.term-description, .woocommerce-products-header .term-description p { max-width: 54ch; margin-block-start: 1rem; font-size: var(--ka-fs-lead); font-weight: 300; color: var(--ka-muted); }

.woocommerce-result-count { float: inline-start; margin: 0 0 2rem; font-size: var(--ka-fs-xs); letter-spacing: 0.14em; color: var(--ka-muted); }
.woocommerce-ordering { float: inline-end; margin: 0 0 2rem; }
.woocommerce-ordering select {
	min-height: 44px; padding: 0.3rem 2rem 0.3rem 0.5rem; background: transparent; border: 0; border-block-end: 1px solid var(--ka-ink); border-radius: 0;
	font-size: var(--ka-fs-sm); letter-spacing: 0.04em; cursor: pointer;
}
ul.products { clear: both; }
.woocommerce-pagination { margin-block-start: clamp(3rem, 6vw, 5rem); }
.woocommerce-pagination ul { list-style: none; display: flex; justify-content: center; gap: 0.5rem; }
.woocommerce-pagination .page-numbers { display: grid; place-items: center; min-width: 46px; height: 46px; padding: 0 0.75rem; border: 1px solid var(--ka-line); transition: all 0.5s var(--ka-ease); }
.woocommerce-pagination a.page-numbers:hover, .woocommerce-pagination .current { background: var(--ka-oud); border-color: var(--ka-oud); color: var(--ka-gold); }

/* ==========================================================================
   04. SINGLE PRODUCT — gallery stage + sticky summary
   ========================================================================== */
.single-product div.product { display: grid; gap: clamp(2rem, 5vw, 6rem); }
@media (min-width: 992px) {
	.single-product div.product { grid-template-columns: 1.05fr 0.95fr; align-items: start; }
	.single-product div.product .woocommerce-tabs,
	.single-product div.product .related,
	.single-product div.product .upsells { grid-column: 1 / -1; }
	.single-product div.product .summary { position: sticky; inset-block-start: calc(var(--ka-header-h) + 2rem); }
}

.woocommerce-product-gallery { position: relative; background: radial-gradient(90% 70% at 50% 35%, #f8f5ee 0%, var(--ka-stone) 72%); box-shadow: var(--ka-shadow); overflow: hidden; }
.woocommerce-product-gallery__wrapper { margin: 0; }
.woocommerce-product-gallery img { width: 100%; height: auto; }
.flex-control-nav { list-style: none; display: flex; gap: 0.5rem; padding: 0.75rem; }
.flex-control-nav li { width: 64px; }
.flex-control-nav img { opacity: 0.45; cursor: pointer; transition: opacity 0.5s var(--ka-ease); }
.flex-control-nav img.flex-active, .flex-control-nav img:hover { opacity: 1; }

.summary .product_title { margin: 0 0 1rem; font-size: clamp(2.2rem, 1rem + 4.4vw, 4.6rem); font-weight: 200; line-height: 1.08; }
.summary .price { display: block; margin-block-end: 1.5rem; font-family: var(--ka-font-display); font-size: clamp(1.5rem, 1.1rem + 1.5vw, 2.3rem); font-weight: 300; color: var(--ka-bronze); }
.summary .price del { margin-inline-end: 0.6em; opacity: 0.4; }
.summary .price ins { text-decoration: none; }
.woocommerce-product-details__short-description { max-width: 46ch; font-size: var(--ka-fs-lead); font-weight: 300; color: var(--ka-muted); }

form.cart { display: flex; flex-wrap: wrap; align-items: stretch; gap: 0.75rem; margin-block: 2rem; }
.quantity .qty { width: 84px; min-height: 56px; text-align: center; background: transparent; border: 1px solid var(--ka-ink); border-radius: 0; font-size: 16px; }
form.cart .single_add_to_cart_button { flex: 1 1 220px; }
.product_meta { display: grid; gap: 0.35rem; padding-block-start: 1.5rem; border-block-start: 1px solid var(--ka-line); font-size: var(--ka-fs-xs); letter-spacing: 0.08em; color: var(--ka-muted); }
.product_meta a { color: var(--ka-bronze); }

.woocommerce-tabs ul.tabs { list-style: none; display: flex; gap: clamp(1.25rem, 3vw, 3rem); margin-block-end: 2rem; border-block-end: 1px solid var(--ka-line); }
.woocommerce-tabs ul.tabs li a { position: relative; display: block; padding-block: 1rem; font-size: var(--ka-fs-sm); letter-spacing: 0.06em; color: var(--ka-muted); }
.woocommerce-tabs ul.tabs li.active a { color: var(--ka-ink); }
.woocommerce-tabs ul.tabs li.active a::after { content: ""; position: absolute; inset-inline: 0; inset-block-end: -1px; height: 2px; background: var(--ka-gold); }
.woocommerce-Tabs-panel { max-width: 70ch; font-weight: 300; font-size: var(--ka-fs-lead); }
.woocommerce-Tabs-panel h2 { font-size: var(--ka-fs-h3); font-weight: 200; }
.related > h2, .upsells > h2 { margin-block-end: 2rem; font-size: var(--ka-fs-h2); font-weight: 200; }

/* Mobile: sticky order bar */
@media (max-width: 767px) {
	.single-product form.cart:not(.variations_form) {
		position: fixed; inset-inline: 0; inset-block-end: 0; z-index: 45; margin: 0; padding: 0.75rem var(--ka-gutter);
		background: rgba(250, 249, 246, 0.96); box-shadow: 0 -14px 40px rgba(0, 0, 0, 0.08);
		-webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
	}
	.single-product .ka-wa-float { inset-block-end: 88px; }
	.single-product .site-footer { padding-block-end: 5.5rem; }
}

/* ==========================================================================
   05. NOTICES
   ========================================================================== */
.woocommerce-message, .woocommerce-info, .woocommerce-error {
	list-style: none; margin: 0 0 2rem; padding: 1.1rem 1.5rem;
	display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem 1.5rem;
	background: var(--ka-paper); border-inline-start: 2px solid var(--ka-gold); font-size: var(--ka-fs-sm);
}
.woocommerce-error { border-color: var(--ka-danger); }
.woocommerce-message .button { order: 2; min-height: 44px; padding-inline: 1.6rem; }

/* ==========================================================================
   06. CHECKOUT — quiet, underlined fields (conversion-first)
   ========================================================================== */
.woocommerce-checkout .entry-title, .woocommerce-checkout .ka-entry__title { margin-block-end: 2rem; }
@media (min-width: 992px) {
	.woocommerce-checkout form.checkout { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: clamp(2rem, 5vw, 6rem); align-items: start; }
	.woocommerce-checkout #order_review { position: sticky; inset-block-start: calc(var(--ka-header-h) + 2rem); }
}
.woocommerce-checkout h3 { font-size: var(--ka-fs-h3); font-weight: 200; margin-block-end: 1.5rem; }
.woocommerce-checkout #order_review_heading { margin-block-start: 0; }
.woocommerce-checkout #order_review, .woocommerce-checkout #customer_details .col-1 { padding: clamp(1.25rem, 3vw, 2.5rem); background: #fff; box-shadow: var(--ka-shadow); }

.woocommerce form .form-row { display: flex; flex-direction: column; margin: 0 0 1.5rem; }
.woocommerce form .form-row label { margin-block-end: 0.15rem; font-size: var(--ka-fs-xs); font-weight: 500; letter-spacing: 0.1em; color: var(--ka-muted); }
.woocommerce form .form-row .required { color: var(--ka-bronze); text-decoration: none; }
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce form .select2-selection {
	width: 100%; min-height: 54px; padding: 0.7rem 0; background: transparent;
	border: 0; border-block-end: 1px solid var(--ka-line); border-radius: 0; font-size: 16px; /* 16px stops iOS zoom */
	transition: border-color 0.5s var(--ka-ease), box-shadow 0.5s var(--ka-ease);
}
.woocommerce form .form-row textarea { min-height: 110px; }
.woocommerce form .form-row input.input-text:focus, .woocommerce form .form-row textarea:focus, .woocommerce form .form-row select:focus {
	outline: 0; border-color: var(--ka-gold); box-shadow: 0 1px 0 var(--ka-gold);
}
/* Phone & city: the two fields that make or break a COD order */
.woocommerce form .form-row.ka-prominent label { color: var(--ka-ink); }
.woocommerce form .form-row.ka-prominent input.input-text { border-color: var(--ka-ink); font-size: 1.1rem; }
.woocommerce-checkout #billing_phone { direction: ltr; text-align: start; }
html[dir="rtl"] .woocommerce-checkout #billing_phone { text-align: right; }

.shop_table { width: 100%; border-collapse: collapse; font-size: var(--ka-fs-sm); }
.shop_table th, .shop_table td { padding: 0.9rem 0; border-block-end: 1px solid var(--ka-line); text-align: start; font-weight: 400; }
.shop_table tfoot th { font-weight: 500; letter-spacing: 0.06em; }
.shop_table .order-total .amount { font-family: var(--ka-font-display); font-size: var(--ka-fs-h3); font-weight: 300; color: var(--ka-bronze); }

.woocommerce-checkout #payment { margin-block-start: 1.5rem; padding: 1.25rem; background: var(--ka-paper); }
.woocommerce-checkout #payment ul.payment_methods { list-style: none; margin: 0 0 1.25rem; }
.woocommerce-checkout #payment .payment_box { margin-block-start: 0.5rem; font-size: var(--ka-fs-xs); color: var(--ka-muted); }
.woocommerce-checkout #place_order { width: 100%; min-height: 60px; font-size: var(--ka-fs-base); }

/* ==========================================================================
   07. MINI CART DRAWER
   ========================================================================== */
.ka-minicart {
	position: fixed; inset-block: 0; inset-inline-end: 0; z-index: 90; display: flex; flex-direction: column;
	width: min(94vw, 440px); background: var(--ka-cream); color: var(--ka-ink);
	transform: translateX(calc(var(--ka-dir) * 100%)); visibility: hidden;
	transition: transform 0.8s var(--ka-ease), visibility 0.8s;
	box-shadow: 0 0 80px rgba(0, 0, 0, 0.25);
}
.ka-minicart.is-open { transform: none; visibility: visible; }
.ka-minicart__head { display: flex; align-items: center; justify-content: space-between; padding: 0.9rem clamp(1.25rem, 4vw, 2rem); border-block-end: 1px solid var(--ka-line); }
.ka-minicart__head h2 { margin: 0; font-size: var(--ka-fs-h3); font-weight: 200; }
.ka-minicart__body { flex: 1; overflow-y: auto; padding: clamp(1.25rem, 4vw, 2rem); overscroll-behavior: contain; }
.ka-minicart .woocommerce-mini-cart { list-style: none; display: grid; gap: 1.5rem; }
.ka-minicart .woocommerce-mini-cart-item { position: relative; display: grid; grid-template-columns: 76px 1fr; gap: 1rem; padding-inline-end: 2rem; align-items: center; }
.ka-minicart .woocommerce-mini-cart-item img { width: 76px; aspect-ratio: 4 / 5; object-fit: cover; background: var(--ka-stone); }
.ka-minicart .woocommerce-mini-cart-item strong { font-family: var(--ka-font-display); font-weight: 400; font-size: var(--ka-fs-base); }
.ka-minicart .remove { position: absolute; inset-block-start: 0; inset-inline-end: 0; width: 32px; height: 32px; font-size: 1.4rem; line-height: 1; color: var(--ka-muted); transition: color 0.4s; }
.ka-minicart .remove:hover { color: var(--ka-danger); }
.ka-minicart .woocommerce-mini-cart__total { display: flex; justify-content: space-between; align-items: baseline; margin-block-start: 1.5rem; padding-block: 1.25rem; border-block-start: 1px solid var(--ka-line); font-family: var(--ka-font-display); font-size: var(--ka-fs-lead); }
.ka-minicart .woocommerce-mini-cart__buttons { margin: 0; }
.ka-minicart .woocommerce-mini-cart__buttons .button { width: 100%; }
.ka-minicart .woocommerce-mini-cart__empty-message { padding-block: 3rem; text-align: center; color: var(--ka-muted); font-weight: 300; }

/* Cart page is bypassed (redirects to checkout); fallback only */
.woocommerce-cart .cart_totals { max-width: 480px; margin-inline-start: auto; }