/* ================= SHOP: cards, bestsellers, product page, modals, RTL ================= */

:root {
	--shop-bg: #f4f1ec;
	--shop-ink: #111;
	--shop-muted: #6b6b6b;
	--shop-accent: #111;
	--shop-sale: #c8102e;
}

.section-title {
	font-family: 'Playfair Display', serif; font-weight: 700;
	font-size: 2.4rem; text-align: center; margin: 0 0 3rem;
}
.empty-note { text-align: center; color: var(--shop-muted); }

/* ---------- bestsellers row ---------- */
.bestsellers { background: #fff; color: var(--shop-ink); padding: 1rem 4rem 6rem; position: relative; z-index: 1; }
.card-row {
	display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1.25rem;
	max-width: 1400px; margin: 0 auto;
}
.card-row__item { min-width: 0; }

/* tablet + mobile: touch-friendly carousel, never five squeezed cards */
@media (max-width: 1099px) {
	.bestsellers { padding: 1rem 0 4rem; }
	.bestsellers .section-title { padding: 0 1rem; }
	.card-row {
		display: flex; gap: 1rem; overflow-x: auto; scroll-snap-type: x mandatory;
		padding: 0.25rem 1.5rem 1rem; scroll-padding-inline: 1.5rem;
		-webkit-overflow-scrolling: touch; overscroll-behavior-x: contain;
	}
	.card-row__item { flex: 0 0 calc((100% - 5rem) / 3.2); scroll-snap-align: start; }
}
@media (max-width: 700px) {
	.section-title { font-size: 1.8rem; margin-bottom: 2rem; }
	.card-row { padding-inline: 1rem; scroll-padding-inline: 1rem; }
	.card-row__item { flex-basis: 62%; }
}

/* ---------- product card ---------- */
.product-card { display: flex; flex-direction: column; height: 100%; color: var(--shop-ink); }
.product-card__media {
	/* 5:4 matches the real product shots (mostly landscape, ink ratio ~1.25), so the product fills the card
	   instead of floating above a large empty area. Override --card-ratio for a different catalog. */
	position: relative; aspect-ratio: var(--card-ratio, 5 / 4); background: var(--shop-bg); border-radius: 22px; overflow: hidden;
}
.product-card__image-link { position: absolute; inset: 0; display: block; }
/* WooCommerce's ".woocommerce ul.products li.product a img { height: auto }" is more specific than any class selector and used to drop the 100% height
   on shop pages, so the photo was drawn at its own proportions from the top edge (a tall photo lost its lower half) and object-fit never applied.
   The height is therefore !important: the frame, not the photo's own shape, sets the box. */
.product-card .product-card__image { width: 100%; height: 100% !important; max-width: none; object-fit: cover; object-position: 50% 0; padding: 0.5rem; display: block; transition: transform 0.4s, opacity 0.2s; }
.product-card:hover .product-card__image { transform: scale(1.04); }
/* Framed in the dashboard (Products > Images > "Card framing"): the same fit / position / zoom the editor preview shows, filling the whole card. */
.product-card .product-card__image[data-framed] { padding: 0; object-fit: var(--fit, cover); object-position: var(--pos, 50% 0); transform: scale(var(--z, 1)); transform-origin: var(--pos, 50% 0); }
.product-card:hover .product-card__image[data-framed] { transform: scale(calc(var(--z, 1) * 1.04)); }
.product-card__badge {
	position: absolute; inset-block-start: 0.7rem; inset-inline-start: 0.7rem; z-index: 2;
	background: var(--shop-sale); color: #fff; font-size: 0.7rem; font-weight: 500; letter-spacing: 0.04em;
	padding: 4px 10px; border-radius: 20px; text-transform: uppercase; white-space: nowrap; line-height: 1.2; /* a status label is never allowed to wrap */
}
.product-card__badge--out { background: #444; }

.product-card__add {
	position: absolute; inset-block-end: 0.7rem; inset-inline-end: 0.7rem; z-index: 3;
	width: 44px; height: 44px; border-radius: 50%; border: 0; cursor: pointer;
	background: #111; color: #fff; font-size: 1.7rem; line-height: 1; font-family: inherit;
	display: inline-flex; align-items: center; justify-content: center; text-decoration: none;
	box-shadow: 0 6px 16px rgba(0,0,0,0.25);
	transition: transform 0.2s, background 0.2s;
}
.product-card__add:hover { transform: scale(1.08); background: #333; }
.product-card__add:focus-visible, .swatch-more:focus-visible,
.opt:focus-visible, .modal__close:focus-visible, .size-guide-link:focus-visible { outline: 2px solid #111; outline-offset: 3px; }
.product-card__add.is-loading { opacity: 0.6; pointer-events: none; }
.product-card__add.is-added { background: #2e7d4f; }

/* Color swatches: a compact dark pill on the right (inline-end) side of the image, stacked vertically.
   Unselected = clean dot; selected = one white ring; keyboard focus = a blue offset outline. */
.product-card__swatches {
	position: absolute; inset-block-start: 0.7rem; inset-inline-end: 0.7rem; z-index: 3;
	display: flex; flex-direction: column; align-items: center; gap: 7px; width: max-content; height: max-content;
	padding: 7px 5px; border-radius: 999px;
	/* glass: translucent + blurred, so the product photo shows through (no solid black) */
	background: linear-gradient(160deg, rgba(255,255,255,0.46), rgba(255,255,255,0.16));
	border: 1px solid rgba(255,255,255,0.6);
	box-shadow: 0 4px 14px rgba(17,17,17,0.14), inset 0 1px 0 rgba(255,255,255,0.55);
	-webkit-backdrop-filter: blur(10px) saturate(1.5); backdrop-filter: blur(10px) saturate(1.5);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	.product-card__swatches, .opt-group--color { background: rgba(255,255,255,0.88); }
}
.swatch {
	flex: 0 0 auto; width: 16px; height: 16px; border-radius: 50%; padding: 0; cursor: pointer; border: 0;
	background: var(--swatch, #ccc); box-shadow: inset 0 0 0 1px rgba(17,17,17,0.22), 0 0 0 1px rgba(255,255,255,0.55); position: relative;
	transition: box-shadow 0.15s, transform 0.15s;
}
.swatch::before { content: ''; position: absolute; inset: -6px; } /* larger invisible tap area */
.swatch:hover { transform: scale(1.12); }
.swatch[aria-pressed="true"], .swatch.is-selected { box-shadow: inset 0 0 0 1px rgba(0,0,0,0.2), 0 0 0 2px #fff, 0 0 0 3.5px #111; }
.swatch:focus-visible { outline: 2px solid #4d9bff; outline-offset: 3px; }
.swatch-more {
	flex: 0 0 auto; font-size: 0.68rem; font-weight: 700; color: #111; text-shadow: 0 0 6px rgba(255,255,255,0.8); text-decoration: none; line-height: 1;
	display: inline-flex; align-items: center; justify-content: center; padding: 2px 0 0; min-width: 16px;
}
.swatch-more:hover { text-decoration: underline; }

.product-card__title, .woocommerce ul.products li.product .product-card__title { padding: 0; font-size: 0.95rem; font-weight: 500; margin: 0.7rem 0 0.35rem; line-height: 1.35; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; } /* clear gap under the image; at most two lines so rows stay even (the price sits at the card bottom) */
.product-card__title a { color: inherit; text-decoration: none; }
.product-card__title a:hover { text-decoration: underline; }
.product-card__price { margin-top: auto; display: flex; gap: 0.6rem; align-items: baseline; flex-wrap: wrap; font-size: 0.95rem; }
.product-card__price-now { font-weight: 500; }
.product-card__price .woocommerce-Price-amount { font-weight: inherit; }
.product-card__price-old { color: var(--shop-muted); font-size: 0.85rem; text-decoration: line-through; }
.product-card__price-from { color: var(--shop-muted); font-size: 0.85rem; }

/* ---------- shop / related grids (WooCommerce ul.products) ---------- */
.woocommerce ul.products, ul.products {
	list-style: none; margin: 0; padding: 0; display: grid; gap: 1.25rem;
	grid-template-columns: repeat(4, minmax(0, 1fr));
}
.woocommerce ul.products li.product, .woocommerce ul.products[class*="columns-"] li.product, .woocommerce-page ul.products[class*="columns-"] li.product, ul.products li.shynx-loop-item { width: auto !important; margin: 0 !important; float: none !important; padding: 0; clear: none; }
.woocommerce ul.products::before, .woocommerce ul.products::after { display: none; }
.related.products ul.products, .up-sells ul.products { grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 1099px) {
	.woocommerce ul.products, ul.products { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.related.products ul.products, .up-sells ul.products {
		display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 1rem; padding-bottom: 1rem; -webkit-overflow-scrolling: touch;
	}
	.related.products ul.products > li, .up-sells ul.products > li { flex: 0 0 calc((100% - 2rem) / 3.2); scroll-snap-align: start; }
}
@media (max-width: 700px) {
	.woocommerce ul.products, ul.products { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.85rem; }
	/* the taller mobile card: set on the card itself so every place that shows one (shop and category grids, search, related / up-sells, bestsellers, new collection, offers) gets the same image box */
	.product-card { --card-ratio: 4 / 5; }
	.related.products ul.products > li, .up-sells ul.products > li { flex-basis: 62%; }
}

/* ---------- single product page ---------- */
body.shynx-single-product .site-main { max-width: 1320px; padding: 2rem 1.5rem 4rem; }
body.shynx-single-product .woocommerce-breadcrumb { font-size: 0.85rem; color: var(--shop-muted); margin-bottom: 1.5rem; }
body.shynx-single-product .woocommerce-breadcrumb a { color: inherit; }

.woocommerce div.product { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 3rem; align-items: start; }
.woocommerce div.product div.images,
.woocommerce div.product div.summary { float: none; width: auto; margin: 0; }
.woocommerce div.product > .woocommerce-tabs,
.woocommerce div.product > .related,
.woocommerce div.product > .up-sells,
.woocommerce div.product > .woocommerce-notices-wrapper { grid-column: 1 / -1; }
/* The column stretches to the full row; only the inner block is sticky, so it can never travel below its own row (a sticky grid item itself is limited by the whole grid, which let it slide over the tabs and related products). */
.woocommerce div.product div.images.shynx-gallery { position: relative; align-self: stretch; background: none; padding: 0; min-width: 0; }
.shynx-gallery__sticky { position: sticky; top: var(--sticky-top, 6rem); }
.woocommerce div.product div.images img { border-radius: 14px; object-fit: contain; }
.woocommerce div.product .flex-control-thumbs { display: flex; gap: 0.6rem; list-style: none; padding: 0; margin: 0.75rem 0 0; flex-wrap: wrap; }
.woocommerce div.product .flex-control-thumbs li { width: 64px; float: none; }
.woocommerce div.product .flex-control-thumbs img { border: 1px solid transparent; opacity: 0.6; cursor: pointer; }
.woocommerce div.product .flex-control-thumbs img.flex-active, .woocommerce div.product .flex-control-thumbs img:hover { opacity: 1; border-color: #111; }

.woocommerce div.product .product_title { font-family: 'Playfair Display', serif; font-size: 2.2rem; margin: 0 0 0.75rem; line-height: 1.2; }
.woocommerce div.product p.price, .woocommerce div.product span.price { color: var(--shop-ink); font-size: 1.5rem; font-weight: 500; margin: 0 0 1rem; }
.woocommerce div.product p.price del, .woocommerce div.product .price del { color: var(--shop-muted); font-size: 1.05rem; opacity: 1; }
.woocommerce div.product p.price ins, .woocommerce div.product .price ins { text-decoration: none; color: var(--shop-sale); }
.woocommerce div.product .price .shynx-price-from { font-size: 1.05rem; font-weight: 400; color: var(--shop-muted); margin-inline-end: 0.15rem; } /* "From" before the struck regular price and the sale price (variable products, before a variation is chosen) */
.woocommerce div.product .woocommerce-product-details__short-description { color: #333; line-height: 1.7; margin-bottom: 1.25rem; }
.woocommerce span.onsale { background: var(--shop-sale); border-radius: 20px; min-height: 0; min-width: 0; line-height: 1.4; padding: 4px 12px; font-size: 0.75rem; inset-block-start: 1.5rem; inset-inline-start: 1.5rem; inset-inline-end: auto; left: auto; }

/* variations -> button groups (enhanced by assets/js/product.js; the native selects stay for WooCommerce) */
.woocommerce div.product form.cart .variations { width: 100%; border: 0; margin: 0 0 1rem; }
.woocommerce div.product form.cart .variations tr { display: block; margin-bottom: 1.1rem; }
.woocommerce div.product form.cart .variations th, .woocommerce div.product form.cart .variations td { display: block; padding: 0; text-align: start; }
.woocommerce div.product form.cart .variations th.label { font-weight: 500; margin-bottom: 0.5rem; }
.opt-selected-name { font-weight: 400; color: var(--shop-muted); margin-inline-start: 0.4rem; }
.shynx-enhanced select { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; overflow: hidden; clip: rect(0 0 0 0); }
.opt-group { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; }
.opt {
	min-width: 48px; min-height: 44px; padding: 0 1rem; border-radius: 30px; cursor: pointer;
	border: 1.5px solid #6f6f6f; background: #fff; color: #111; font: inherit; font-size: 0.9rem; font-weight: 500;
	transition: border-color 0.15s, background 0.15s, color 0.15s, box-shadow 0.15s;
}
.opt:hover:not(:disabled) { border-color: #111; box-shadow: 0 0 0 2px rgba(17,17,17,0.12); }
.opt[aria-pressed="true"] { background: #111; color: #fff; border-color: #111; }
.opt:disabled, .opt.is-disabled { color: #aaa; border-style: dashed; background: #f7f7f7; cursor: not-allowed; text-decoration: line-through; }
.opt--color {
	width: 38px; height: 38px; min-width: 38px; min-height: 38px; padding: 0; border: 0; border-radius: 50%;
	background: var(--swatch, #ccc); box-shadow: inset 0 0 0 1px rgba(0,0,0,0.12); text-decoration: none; position: relative;
}
.opt--color[aria-pressed="true"] { background: var(--swatch, #ccc); color: inherit; box-shadow: inset 0 0 0 1px rgba(0,0,0,0.12), 0 0 0 2px #fff, 0 0 0 3.5px #111; }
.opt--color:focus-visible { outline: 2px solid #0b57d0; outline-offset: 4px; }
.opt--color:hover:not(:disabled) { box-shadow: inset 0 0 0 1px rgba(0,0,0,0.12), 0 0 0 2px #fff, 0 0 0 3px rgba(0,0,0,0.35); }
.opt--color[aria-pressed="true"]:hover { box-shadow: inset 0 0 0 1px rgba(0,0,0,0.12), 0 0 0 2px #fff, 0 0 0 3.5px #111; }
.opt--color:disabled { opacity: 0.35; border: 0; background: var(--swatch, #ccc); }
.opt--color:disabled::after { content: ''; position: absolute; inset: 50% -2px auto; border-top: 2px solid #555; transform: rotate(-45deg); }
.woocommerce div.product form.cart .reset_variations { display: inline-block; margin-top: 0.6rem; font-size: 0.85rem; color: var(--shop-muted); }
/* Size Guide button: a real button (bordered pill + ruler icon, black on white = highest contrast), directly under the size options, 46px tall for touch. */
.size-guide-link { display: inline-flex; align-items: center; justify-content: center; gap: 0.55rem; margin: 0.4rem 0 0; padding: 0 1.2rem; min-height: 46px; border: 2px solid #111; border-radius: 999px; background: #fff; color: #111; font: inherit; font-size: 0.95rem; font-weight: 600; line-height: 1; letter-spacing: 0.01em; text-decoration: none; cursor: pointer; transition: background-color 0.18s ease, color 0.18s ease, transform 0.18s ease; }
.size-guide-link__icon { flex: none; width: 20px; height: 20px; }
.size-guide-link:hover { background: #111; color: #fff; }
.size-guide-link:active { transform: scale(0.98); }
.size-guide-link:focus-visible { outline: 3px solid #0b57d0; outline-offset: 3px; }
.size-guide-row { margin: 0.25rem 0 1.1rem; }
.size-guide-row .size-guide-link { margin-top: 0; }
@media (max-width: 600px) { .size-guide-link { width: 100%; } .size-guide-row .size-guide-link { width: 100%; } }
@media (prefers-reduced-motion: reduce) { .size-guide-link { transition: none; } }
.woocommerce div.product form.cart .variations td.value { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; }
.woocommerce div.product form.cart .variations td.value .opt-group { flex: 1 1 100%; }

.woocommerce div.product .stock, .woocommerce-variation-availability .stock { font-size: 0.9rem; margin: 0 0 1rem; color: #2e7d4f; }
.woocommerce div.product .stock.out-of-stock { color: var(--shop-sale); }
.woocommerce-variation-price { margin-bottom: 0.5rem; }
.woocommerce-variation-price .price { font-size: 1.3rem; }

.woocommerce div.product form.cart:not(.variations_form), .woocommerce div.product form.cart .woocommerce-variation-add-to-cart { display: flex; gap: 0.85rem; align-items: stretch; flex-wrap: wrap; }
.woocommerce div.product form.cart .quantity { display: inline-flex; align-items: stretch; border: 1px solid #bbb; border-radius: 30px; overflow: hidden; margin: 0; }
.woocommerce .quantity .qty { width: 52px; border: 0; text-align: center; font: inherit; background: transparent; -moz-appearance: textfield; padding: 0; }
.woocommerce .quantity .qty::-webkit-outer-spin-button, .woocommerce .quantity .qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.qty-btn { width: 44px; border: 0; background: transparent; font-size: 1.3rem; cursor: pointer; color: #111; min-height: 48px; }
.qty-btn:hover { background: #f0f0f0; }
.woocommerce div.product form.cart .single_add_to_cart_button {
	flex: 1 1 200px; min-height: 48px; border-radius: 30px; background: #111; color: #fff; border: 0; font: inherit; font-weight: 500; cursor: pointer; padding: 0 1.5rem;
}
.woocommerce div.product form.cart .single_add_to_cart_button:hover { background: #333; }
/* "Choose options first" is NOT a disabled state: the button stays fully visible and explains what is missing when pressed.
   Only a genuinely unavailable combination (or a real :disabled while adding) is greyed out. */
.woocommerce div.product form.cart .single_add_to_cart_button.wc-variation-selection-needed, .woocommerce div.product form.cart .single_add_to_cart_button.disabled.wc-variation-selection-needed { opacity: 1; cursor: pointer; }
.woocommerce div.product form.cart .single_add_to_cart_button.wc-variation-is-unavailable, .woocommerce div.product form.cart .single_add_to_cart_button:disabled { opacity: 0.4; cursor: not-allowed; }
.woocommerce div.product form.cart .single_add_to_cart_button:focus-visible { outline: 2px solid #0b57d0; outline-offset: 3px; }
.woocommerce div.product .product_meta { margin-top: 1.5rem; font-size: 0.85rem; color: var(--shop-muted); display: grid; gap: 0.3rem; }

.woocommerce div.product .woocommerce-tabs { margin-top: 1rem; }
.woocommerce div.product .woocommerce-tabs ul.tabs { display: flex; gap: 1.5rem; list-style: none; margin: 0 0 1.5rem; padding: 0; border-bottom: 1px solid #ddd; overflow-x: auto; }
.woocommerce div.product .woocommerce-tabs ul.tabs::before, .woocommerce div.product .woocommerce-tabs ul.tabs::after { display: none; }
.woocommerce div.product .woocommerce-tabs ul.tabs li { background: none; border: 0; margin: 0; padding: 0; border-radius: 0; }
.woocommerce div.product .woocommerce-tabs ul.tabs li::before, .woocommerce div.product .woocommerce-tabs ul.tabs li::after { display: none; }
.woocommerce div.product .woocommerce-tabs ul.tabs li a { display: block; padding: 0.8rem 0; color: var(--shop-muted); font-weight: 500; text-decoration: none; white-space: nowrap; }
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a { color: #111; box-shadow: 0 2px 0 #111; }
.woocommerce div.product .woocommerce-tabs h2 { font-size: 1.2rem; }
.woocommerce table.shop_attributes { border: 0; width: 100%; max-width: 720px; }
.woocommerce table.shop_attributes th, .woocommerce table.shop_attributes td { padding: 0.7rem 0; border-top: 0; border-bottom: 1px solid #eee; font-style: normal; text-align: start; background: none; }
.woocommerce table.shop_attributes th { width: 35%; color: var(--shop-muted); }

.related.products, .up-sells { margin-top: 3rem; }
.related.products > h2, .up-sells > h2 { font-family: 'Playfair Display', serif; font-size: 1.9rem; text-align: center; margin: 0 0 2rem; }

@media (max-width: 899px) {
	.woocommerce div.product { display: block; }
	.woocommerce div.product > * { margin-bottom: 1.5rem; }
	.woocommerce div.product div.images.shynx-gallery { position: relative; top: auto; margin-bottom: 1.5rem; }
	.shynx-gallery__sticky { position: static; }
	.woocommerce div.product .product_title { font-size: 1.7rem; }
}

/* ---------- shop archive header ---------- */
.woocommerce-products-header__title, .woocommerce .woocommerce-products-header h1 { font-family: 'Playfair Display', serif; text-align: center; margin: 0 0 1.5rem; }
.woocommerce-result-count { color: var(--shop-muted); font-size: 0.9rem; }
.woocommerce-ordering select { min-height: 44px; border-radius: 30px; border: 1px solid #bbb; padding: 0 1rem; font: inherit; background: #fff; }
.woocommerce-notices-wrapper .woocommerce-message, .woocommerce-notices-wrapper .woocommerce-error, .woocommerce-notices-wrapper .woocommerce-info {
	border-radius: 14px; background: var(--shop-bg); border: 0; border-inline-start: 4px solid #111; padding: 1rem 1.25rem; list-style: none; margin: 0 0 1rem;
}
.woocommerce-message::before, .woocommerce-error::before, .woocommerce-info::before { display: none; }

/* ---------- modals (size guide + quick select) ---------- */
html.modal-open, html.modal-open body { overflow: hidden; }
.modal-backdrop { position: fixed; inset: 0; z-index: 1100; background: rgba(0,0,0,0.55); opacity: 0; transition: opacity 0.25s; }
.modal-backdrop.is-open { opacity: 1; }
.modal {
	position: fixed; z-index: 1101; inset-block-start: 50%; inset-inline-start: 50%;
	width: min(640px, calc(100vw - 2rem)); max-height: calc(100vh - 2rem); max-height: calc(100dvh - 2rem);
	background: #fff; color: #111; border-radius: 24px; display: flex; flex-direction: column;
	transform: translate(-50%, -46%); opacity: 0; visibility: hidden;
	transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.25s, visibility 0s linear 0.3s;
	box-shadow: 0 30px 80px rgba(0,0,0,0.3);
}
[dir="rtl"] .modal { transform: translate(50%, -46%); }
.modal.is-open { transform: translate(-50%, -50%); opacity: 1; visibility: visible; transition-delay: 0s; }
[dir="rtl"] .modal.is-open { transform: translate(50%, -50%); }
body.admin-bar .modal { max-height: calc(100dvh - 4rem); }
.modal__head { display: flex; align-items: center; justify-content: space-between; padding: 1rem 1.5rem; border-bottom: 1px solid #eee; flex-shrink: 0; }
.modal__title { margin: 0; font-family: 'Playfair Display', serif; font-size: 1.4rem; }
.modal__close { width: 44px; height: 44px; border: 0; background: transparent; font-size: 2rem; line-height: 1; cursor: pointer; color: inherit; }
.modal__body { padding: 1.25rem 1.5rem 1.5rem; overflow-y: auto; overscroll-behavior: contain; min-height: 0; }

/* size guide */
.size-guide__notice { background: #fff4d6; border-radius: 12px; padding: 0.7rem 1rem; font-size: 0.85rem; margin: 0 0 1rem; color: #5c4600; }
.size-guide__sub { color: var(--shop-muted); font-size: 0.9rem; margin: 0 0 1rem; }
.size-table-wrap { overflow-x: auto; border: 1px solid #eee; border-radius: 14px; max-width: 100%; -webkit-overflow-scrolling: touch; }
.size-table { border-collapse: collapse; width: 100%; min-width: 420px; font-size: 0.9rem; }
.size-table th, .size-table td { padding: 0.75rem 0.9rem; text-align: center; border-bottom: 1px solid #eee; white-space: nowrap; }
.size-table thead th { background: #f7f5f1; font-weight: 500; }
.size-table tbody th { text-align: start; font-weight: 500; position: sticky; inset-inline-start: 0; background: #fff; z-index: 1; box-shadow: 1px 0 0 #eee; }
.size-table thead th:first-child { text-align: start; position: sticky; inset-inline-start: 0; z-index: 2; }
.size-table__unit { color: var(--shop-muted); font-weight: 400; }
.size-table--dimensions { min-width: 0; }
.size-table--dimensions th, .size-table--dimensions td { white-space: normal; }
.size-table--dimensions tbody td { text-align: end; font-weight: 600; font-variant-numeric: tabular-nums; }
.size-table--dimensions thead th:last-child { text-align: end; }
.size-table [data-size].is-selected { background: #111; color: #fff; }
.size-table tbody td.is-selected { font-weight: 500; }
.size-table tbody tr:last-child th, .size-table tbody tr:last-child td { border-bottom: 0; }

/* quick select */
.quick { display: grid; grid-template-columns: 120px 1fr; gap: 1.25rem; align-items: start; }
.quick__img { background: var(--shop-bg); border-radius: 16px; aspect-ratio: 3 / 4; width: 100%; object-fit: contain; padding: 0.4rem; }
.quick__name { margin: 0 0 0.3rem; font-size: 1.05rem; font-weight: 500; }
.quick__price { margin-bottom: 1rem; }
.quick__group { margin-bottom: 1rem; }
.quick__label { font-size: 0.9rem; font-weight: 500; margin-bottom: 0.5rem; display: block; }
.quick__msg { min-height: 1.4em; font-size: 0.88rem; color: var(--shop-sale); margin: 0.25rem 0 0.5rem; }
.quick__submit { width: 100%; min-height: 48px; border: 0; border-radius: 30px; background: #111; color: #fff; font: inherit; font-weight: 500; cursor: pointer; }
.quick__submit:disabled { opacity: 0.4; cursor: not-allowed; }
.quick__more { display: inline-block; margin-top: 0.75rem; font-size: 0.85rem; color: var(--shop-muted); }
@media (max-width: 480px) { .quick { grid-template-columns: 84px 1fr; gap: 0.9rem; } }

/* toast */
.shynx-toast {
	position: fixed; inset-inline: 1rem; inset-block-end: 1.25rem; z-index: 1200; margin-inline: auto; max-width: 440px;
	background: #111; color: #fff; border-radius: 16px; padding: 0.9rem 1.1rem; display: flex; gap: 1rem; align-items: center; justify-content: space-between;
	box-shadow: 0 12px 40px rgba(0,0,0,0.35); transform: translateY(20px); opacity: 0; pointer-events: none; transition: transform 0.3s, opacity 0.3s;
}
.shynx-toast.is-visible { transform: none; opacity: 1; pointer-events: auto; }
.shynx-toast.is-error { background: var(--shop-sale); }
.shynx-toast a { color: #fff; font-weight: 500; white-space: nowrap; }
.shynx-toast__text { font-size: 0.9rem; line-height: 1.4; }

/* header cart count */
.shynx-cart__count { transition: transform 0.2s; }
.shynx-cart.is-bumped .shynx-cart__count { transform: scale(1.35); }

/* ---------- touch targets ---------- */
@media (pointer: coarse) {
	.swatch { width: 18px; height: 18px; }
	.product-card__swatches { gap: 9px; }
}

/* ================= ARABIC / RTL ================= */
html[lang^="ar"] body,
html[lang^="ar"] button,
html[lang^="ar"] input,
html[lang^="ar"] select,
html[lang^="ar"] h1, html[lang^="ar"] h2, html[lang^="ar"] h3, html[lang^="ar"] h4,
html[lang^="ar"] .section-title, html[lang^="ar"] .modal__title,
html[lang^="ar"] .woocommerce div.product .product_title,
html[lang^="ar"] .intro-text-right h1,
html[lang^="ar"] .shop-categories__title {
	font-family: 'Cairo', 'Inter', system-ui, sans-serif;
}
html[lang^="ar"] .intro-text-right h1 { line-height: 1.35; }

/* drawer slides in from the left in RTL */
[dir="rtl"] .nav-drawer { right: auto; left: 0; transform: translateX(-100%); box-shadow: 10px 0 40px rgba(0,0,0,0.2); }
[dir="rtl"] .nav-drawer.is-open { transform: translateX(0); }
[dir="rtl"] .main-nav a:hover { padding-left: 0; padding-right: 6px; }
[dir="rtl"] .main-nav a { letter-spacing: 0; }

/* hero: keep the 3D carousel geometry LTR, mirror only the text blocks */
[dir="rtl"] .gallery-wrapper, [dir="rtl"] .bottom-strip, [dir="rtl"] .nav-arrow { direction: ltr; }
[dir="rtl"] .intro-text-left { left: auto; right: 4rem; text-align: right; }
[dir="rtl"] .intro-text-right { right: auto; left: 4rem; text-align: left; }
@media (max-width: 1024px) { [dir="rtl"] .intro-text-right { left: 2rem; } }
@media (max-width: 768px) {
	[dir="rtl"] .intro-text-right { left: 50%; right: auto; transform: translate(-50%, -50%); text-align: center; }
}
[dir="rtl"] .bottom-strip span { direction: rtl; }

/* header & products */
[dir="rtl"] .product-card__title, [dir="rtl"] .product-card__price { text-align: start; }
[dir="rtl"] .woocommerce div.product .flex-control-thumbs { direction: ltr; }
[dir="rtl"] .card-row { direction: rtl; }
[dir="rtl"] .quantity { direction: ltr; }
[dir="rtl"] .shynx-toast { direction: rtl; }
.lang-ar .site-header__actions { direction: rtl; }

/* ================= SCROLL REVEAL (storefront sections after the hero) ================= */
@keyframes shynx-reveal-up { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
/* hidden only while JS is active and the element has not been revealed yet */
.reveal-ready [data-reveal]:not(.is-revealed),
.reveal-ready [data-reveal-stagger]:not(.is-revealed) > * { opacity: 0; transform: translateY(18px); }
/* `backwards` fill: the keyframes apply before/while animating, then release, so hover transforms keep working */
.reveal-ready [data-reveal].is-revealed { animation: shynx-reveal-up 0.65s cubic-bezier(0.22, 1, 0.36, 1) backwards; }
.reveal-ready [data-reveal-stagger].is-revealed > * { animation: shynx-reveal-up 0.6s cubic-bezier(0.22, 1, 0.36, 1) backwards; animation-delay: calc(var(--i, 0) * 70ms); }
@media (prefers-reduced-motion: reduce) {
	.reveal-ready [data-reveal], .reveal-ready [data-reveal-stagger] > * { opacity: 1 !important; transform: none !important; animation: none !important; }
}

/* ================= PRODUCT GALLERY (slider + thumbnails) ================= */
/* Images keep their own appearance: no artificial shared background, contain-fit, never stretched. */
.shynx-gallery { --gallery-ratio: 5 / 4; --thumb: 76px; }
.shynx-gallery__stage { position: relative; overflow: hidden; border-radius: 22px; background: #fff; border: 1px solid #eee; aspect-ratio: var(--gallery-ratio); touch-action: pan-y; cursor: grab; outline-offset: 3px; user-select: none; -webkit-user-select: none; }
.shynx-gallery__stage.is-dragging { cursor: grabbing; }
.shynx-gallery__stage:focus-visible { outline: 2px solid #0b57d0; }
.shynx-gallery__track { display: flex; height: 100%; width: 100%; will-change: transform; }
.shynx-gallery__slide { overflow: hidden; flex: 0 0 100%; width: 100%; height: 100%; margin: 0; display: flex; align-items: center; justify-content: center; }
/* !important height: WooCommerce's "height: auto" rules for product images would otherwise win and draw a tall photo taller than the stage (its lower part was cut off). */
.shynx-gallery__slide img { width: 100%; height: 100% !important; max-width: none; box-sizing: border-box; padding: 5%; object-fit: contain; object-position: center; display: block; pointer-events: none; }
/* Framed in the dashboard (Products > Images > "Product page"): the same fit / position / zoom as the editor preview, filling the whole stage. */
.shynx-gallery.images .shynx-gallery__slide img[data-framed] { padding: 0; object-fit: var(--fit, contain); object-position: var(--pos, 50% 50%); transform: scale(var(--z, 1)); transform-origin: var(--pos, 50% 50%); }
.shynx-gallery__arrow {
	position: absolute; top: 50%; transform: translateY(-50%); z-index: 3; width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(0,0,0,0.12);
	background: rgba(255,255,255,0.92); color: #111; cursor: pointer; display: grid; place-items: center; padding: 0;
	box-shadow: 0 4px 14px rgba(0,0,0,0.16); transition: background 0.15s, opacity 0.15s;
}
.shynx-gallery__arrow:hover { background: #fff; }
.shynx-gallery__arrow:focus-visible { outline: 2px solid #0b57d0; outline-offset: 2px; }
.shynx-gallery__arrow[hidden] { display: none; }
.shynx-gallery__arrow--prev { left: 12px; }
.shynx-gallery__arrow--next { right: 12px; }
.shynx-gallery__arrow span { width: 10px; height: 10px; border: solid currentColor; border-width: 0 2px 2px 0; display: block; }
.shynx-gallery__arrow--prev span { transform: translateX(2px) rotate(135deg); }
.shynx-gallery__arrow--next span { transform: translateX(-2px) rotate(-45deg); }
.shynx-gallery__counter { position: absolute; bottom: 12px; right: 14px; z-index: 3; background: rgba(17,17,17,0.72); color: #fff; font-size: 0.75rem; padding: 4px 10px; border-radius: 14px; pointer-events: none; }
.shynx-gallery__counter[hidden] { display: none; }
.shynx-gallery__badge { position: absolute; top: 14px; left: 14px; z-index: 3; background: var(--shop-sale); color: #fff; font-size: 0.75rem; font-weight: 500; padding: 4px 12px; border-radius: 20px; text-transform: uppercase; letter-spacing: 0.04em; }
.shynx-gallery, .shynx-gallery__sticky { min-width: 0; max-width: 100%; } /* the strip below may be wider than its column (many photos): the column must never grow with it */
.shynx-gallery__thumbs { display: flex; gap: 0.6rem; margin-top: 0.75rem; width: 100%; max-width: 100%; min-width: 0; box-sizing: border-box; overflow-x: auto; overflow-y: hidden; padding: 4px 2px 8px; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; scrollbar-width: thin; scrollbar-color: #c9c9c9 transparent; } /* a slim, contained scroll bar (no arrow buttons); thumbnails stay a fixed size */
.shynx-gallery__thumbs[hidden] { display: none; }
.shynx-gallery__thumbs { cursor: grab; }
.shynx-gallery__thumbs.is-dragging { cursor: grabbing; user-select: none; }
.shynx-gallery__thumb {
	flex: 0 0 var(--thumb); width: var(--thumb); height: var(--thumb); padding: 3px; border-radius: 12px; cursor: pointer; scroll-snap-align: start;
	box-sizing: border-box; overflow: hidden; display: block; background: transparent; border: 1px solid #ddd; opacity: 0.75; transition: opacity 0.15s, border-color 0.15s, box-shadow 0.15s;
}
/* WooCommerce's `.woocommerce div.product div.images img { height: auto }` is more specific than a plain `.shynx-gallery__thumb img`, so a portrait photo kept its own height and spilled out of its small frame: the photo must fill the frame box and be contain-fitted inside it (same !important height as the slides above). */
.shynx-gallery__thumb img, .woocommerce div.product div.images .shynx-gallery__thumb img { width: 100%; height: 100% !important; max-width: none; object-fit: contain; object-position: center; display: block; border-radius: 8px; }
.shynx-gallery__thumb:hover { opacity: 1; border-color: #999; }
.shynx-gallery__thumb.is-active { opacity: 1; border-color: #111; box-shadow: 0 0 0 1px #111; }
.shynx-gallery__thumb:focus-visible { outline: 2px solid #0b57d0; outline-offset: 2px; }
@media (max-width: 600px) {
	.shynx-gallery { --thumb: 62px; --gallery-ratio: 1 / 1; }
	.shynx-gallery__arrow { width: 40px; height: 40px; }
	.shynx-gallery__arrow--prev { left: 8px; } .shynx-gallery__arrow--next { right: 8px; }
}
@media (prefers-reduced-motion: reduce) { .shynx-gallery__track { transition: none !important; } }

/* ================= MISSING-OPTION PROMPT ================= */
.opt-group.is-missing, .quick__group .opt-group.is-missing {
	outline: 2px dashed #c8102e; outline-offset: 6px; border-radius: 14px; animation: shynx-nudge 0.5s ease 1;
}
@keyframes shynx-nudge { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-5px); } 40% { transform: translateX(5px); } 60% { transform: translateX(-3px); } 80% { transform: translateX(3px); } }
@media (prefers-reduced-motion: reduce) { .opt-group.is-missing { animation: none; } }
.options-prompt { width: min(440px, calc(100vw - 2rem)); }
.options-prompt .modal__body { text-align: center; padding: 1.5rem; }
.options-prompt__icon { width: 52px; height: 52px; border-radius: 50%; background: #fff0f0; color: #c8102e; font-size: 1.7rem; font-weight: 700; display: grid; place-items: center; margin: 0 auto 0.9rem; }
.options-prompt__text { margin: 0 0 1.25rem; font-size: 1rem; line-height: 1.55; }
.options-prompt__actions { display: grid; gap: 0.6rem; }
.quick__msg { color: #c8102e; }

/* ================= OFFERS (homepage section) ================= */
.promo-banner { display: flex; align-items: center; justify-content: center; gap: 1.25rem; max-width: 1280px; margin: 0 auto 2rem; background: #111; color: #fff; border-radius: 22px; overflow: hidden; text-decoration: none; min-height: 64px; position: relative; }
.promo-banner__img { width: 100%; max-height: 260px; object-fit: cover; display: block; }
.promo-banner__text { padding: 1rem 1.5rem; font-weight: 500; text-align: center; letter-spacing: 0.04em; }
.promo-banner__img + .promo-banner__text { position: absolute; inset-inline: 0; bottom: 0; background: linear-gradient(transparent, rgba(0,0,0,0.65)); }
.shop-head__lead { text-align: center; color: #555; margin: 0.4rem auto 1rem; max-width: 620px; }

/* ================= FOOTER ================= */

/* options that cannot be bought with the current selection: struck through + explained in words */
.opt--color:disabled { position: relative; cursor: not-allowed; }
.opt--color:disabled::after { content: ''; position: absolute; inset: 50% -2px auto -2px; height: 2px; background: #111; transform: rotate(-45deg); border-radius: 2px; box-shadow: 0 0 0 1px rgba(255,255,255,0.8); }
.opt:disabled:not(.opt--color) { text-decoration: line-through; cursor: not-allowed; }
.opt-note { margin: 0.5rem 0 0; font-size: 0.82rem; color: #8a3b12; line-height: 1.4; }
.opt-note[hidden] { display: none; }
.shynx-attrs { display: grid; grid-template-columns: max-content 1fr; gap: 0.35rem 1.25rem; margin: 1.25rem 0 0; font-size: 0.92rem; }
.shynx-attrs dt { font-weight: 600; }
.shynx-attrs dd { margin: 0; }

/* ================= PRODUCT CARD: plus icon + compact sizes (shop.css loads on EVERY page that renders a card) ================= */
/* Plus icon: drawn with two bars centred by the browser, so font metrics / line-height never shift it. */
.product-card__add { display: grid; place-items: center; padding: 0; font-size: 0; line-height: 0; }
.product-card__plus { display: none; }
.product-card__add::before, .product-card__add::after {
	content: ''; position: absolute; top: 50%; left: 50%; background: currentColor; border-radius: 2px; pointer-events: none;
	transform: translate(-50%, -50%);
}
.product-card__add::before { width: 16px; height: 2px; }
.product-card__add::after { width: 2px; height: 16px; }
.product-card__add.is-added::after { opacity: 0; }

/* Small cards (2-up phone grid): a more compact swatch pill and plus button so they never overlap */
@media (max-width: 600px) {
	.product-card__add { width: 32px; height: 32px; inset-block-end: 0.5rem; inset-inline-end: 0.5rem; }
	.product-card__add::before { width: 12px; }
	.product-card__add::after { height: 12px; }
	.product-card__swatches { inset-block-start: 0.5rem; inset-inline-end: 0.5rem; gap: 5px; padding: 5px 4px; }
	.product-card__swatches .swatch { width: 14px; height: 14px; }
	.product-card__swatches .swatch-more { font-size: 0.62rem; min-width: 14px; }
	.product-card__badge { inset-block-start: 0.4rem; inset-inline-start: 0.4rem; font-size: 0.62rem; padding: 3px 8px; }
}
@media (max-width: 420px) {
	.product-card__swatches { gap: 4px; padding: 4px 3px; }
	.product-card__swatches .swatch { width: 12px; height: 12px; }
	.product-card__swatches .swatch::before { inset: -7px; }
	.product-card__swatches .swatch-more { font-size: 0.58rem; min-width: 12px; padding-top: 1px; }
	/* narrow cards: a slightly tighter label so "OUT OF STOCK" stays on one line clear of the swatch column */
	.product-card__badge { font-size: 0.58rem; padding: 3px 7px; letter-spacing: 0.01em; }
	.product-card__swatches { inset-block-start: 0.4rem; inset-inline-end: 0.4rem; } /* same 0.4rem edge as the badge */
}
/* very narrow phones: cards are too short for both on the same side, so the plus moves to the other corner */
@media (max-width: 360px) {
	.product-card__add { inset-inline-end: auto; inset-inline-start: 0.5rem; }
}

/* ================= COLOR GROUP (product page): glass tray ================= */
.opt-group--color {
	display: inline-flex; flex-wrap: wrap; gap: 0.7rem; padding: 9px 12px; border-radius: 999px; width: fit-content; max-width: 100%;
	background: linear-gradient(160deg, rgba(255,255,255,0.7), rgba(255,255,255,0.28));
	border: 1px solid rgba(17,17,17,0.12); box-shadow: 0 6px 18px rgba(17,17,17,0.08), inset 0 1px 0 rgba(255,255,255,0.8);
	-webkit-backdrop-filter: blur(10px) saturate(1.4); backdrop-filter: blur(10px) saturate(1.4);
}
.opt--color[aria-pressed="false"] { box-shadow: inset 0 0 0 1px rgba(0,0,0,0.18); }

/* ================= BREADCRUMBS ================= */
.shynx-crumbs { margin: 0 0 1.25rem; font-size: 0.85rem; line-height: 1.4; }
.shynx-crumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: 0.15rem 0; list-style: none; margin: 0; padding: 0; }
.shynx-crumbs li { display: inline-flex; align-items: center; min-width: 0; color: var(--shop-muted); }
.shynx-crumbs li:not(:last-child)::after {
	content: ''; width: 6px; height: 6px; margin-inline: 0.6rem; flex: none; opacity: 0.55;
	border: solid currentColor; border-width: 1.5px 1.5px 0 0; transform: rotate(45deg);
}
[dir="rtl"] .shynx-crumbs li:not(:last-child)::after { transform: rotate(-135deg); }
.shynx-crumbs a { color: #444; text-decoration: none; padding: 0.35rem 0; border-radius: 6px; }
.shynx-crumbs a:hover { color: #111; text-decoration: underline; text-underline-offset: 3px; }
.shynx-crumbs a:focus-visible { outline: 2px solid #0b57d0; outline-offset: 2px; }
.shynx-crumbs li[aria-current="page"] span { color: #111; font-weight: 600; display: block; max-width: min(46ch, 70vw); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.shop-head .shynx-crumbs { text-align: start; }
.site-main--commerce > .shynx-crumbs { max-width: 1200px; margin-inline: auto; }

/* ================= PRODUCT META: category pills ================= */
.product-meta { margin-top: 1.5rem; padding-top: 1.1rem; border-top: 1px solid #ece8e1; display: grid; gap: 0.7rem; }
.product-cats { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; }
.product-cats__label { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--shop-muted); }
.product-cats ul { display: flex; flex-wrap: wrap; gap: 0.5rem; list-style: none; margin: 0; padding: 0; }
.cat-pill { display: inline-flex; align-items: center; min-height: 36px; padding: 0 1rem; border-radius: 999px; background: var(--shop-bg); border: 1px solid transparent; color: #111; font-size: 0.88rem; font-weight: 500; text-decoration: none; transition: background 0.15s, border-color 0.15s, transform 0.15s; }
.cat-pill:hover { background: #fff; border-color: #111; }
.cat-pill:focus-visible { outline: 2px solid #0b57d0; outline-offset: 2px; }
.product-sku { font-size: 0.82rem; color: var(--shop-muted); }

/* ================= FOOTER SOCIAL ICONS ================= */
.social-link { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 1px solid #ddd6cc; color: #111; background: #fff; transition: background 0.15s, color 0.15s, border-color 0.15s, transform 0.15s; }
.social-link:hover { background: #111; color: #fff; border-color: #111; text-decoration: none; transform: translateY(-2px); }
.social-link:focus-visible { outline: 2px solid #0b57d0; outline-offset: 3px; }
.social-link--text { width: auto; padding: 0 1rem; border-radius: 999px; font-size: 0.85rem; font-weight: 500; line-height: 1; }
.social-icon { display: block; }

/* ================= TOUCH: horizontal strips never chain into browser back-swipe, vertical page scroll stays free ================= */
.related.products ul.products, .up-sells ul.products, .shynx-gallery__thumbs, .woocommerce div.product .woocommerce-tabs ul.tabs, .size-table-wrap { overscroll-behavior-x: contain; touch-action: pan-x pan-y; }
.card-row { touch-action: pan-x pan-y; }

.woocommerce div.product form.cart .variations td.value .opt-group.opt-group--color { flex: 0 1 auto; }

/* ================= FULL PHOTO VIEWER (product page) ================= */
.shynx-gallery__expand { position: absolute; top: 12px; right: 12px; z-index: 3; width: 40px; height: 40px; border-radius: 50%; border: 1px solid #e3e3e3; background: rgba(255,255,255,0.92); color: #111; display: grid; place-items: center; padding: 0; cursor: pointer; box-shadow: 0 1px 6px rgba(0,0,0,0.12); transition: background 0.15s, transform 0.15s; }
.shynx-gallery__expand:hover { background: #fff; transform: scale(1.06); }
.shynx-gallery__expand:focus-visible { outline: 2px solid #0b57d0; outline-offset: 2px; }
.shynx-gallery__stage { cursor: zoom-in; }
.shynx-gallery__stage.is-dragging { cursor: grabbing; }
/* The viewer is exactly the window: the photo is fitted inside it (whole, never larger), and the photos slide sideways. */
.sx-lb { position: fixed; inset: 0; z-index: 2100; background: #fff; display: flex; flex-direction: column; animation: sx-lb-in 0.18s ease-out; }
@keyframes sx-lb-in { from { opacity: 0; } to { opacity: 1; } }
.sx-lb__bar { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; padding: 0.5rem 1rem; background: #fff; }
.sx-lb__count { font-size: 0.85rem; color: #555; font-variant-numeric: tabular-nums; }
.sx-lb__close { width: 40px; height: 40px; border-radius: 50%; border: 0; background: #111; color: #fff; display: grid; place-items: center; cursor: pointer; }
.sx-lb__close:focus-visible, .sx-lb__arrow:focus-visible { outline: 2px solid #0b57d0; outline-offset: 2px; }
.sx-lb__view { position: relative; flex: 1 1 auto; min-height: 0; overflow: hidden; touch-action: pan-y; cursor: grab; user-select: none; -webkit-user-select: none; }
.sx-lb__view.is-dragging { cursor: grabbing; }
.sx-lb__track { display: flex; height: 100%; width: 100%; transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1); will-change: transform; }
.sx-lb__slide { flex: 0 0 100%; width: 100%; height: 100%; margin: 0; display: flex; align-items: center; justify-content: center; padding: 0 0.5rem 0.75rem; box-sizing: border-box; }
.sx-lb__slide img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; display: block; pointer-events: none; }
.sx-lb__arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; width: 46px; height: 46px; border-radius: 50%; border: 1px solid #e3e3e3; background: rgba(255,255,255,0.92); color: #111; display: grid; place-items: center; cursor: pointer; box-shadow: 0 1px 8px rgba(0,0,0,0.15); padding: 0; }
.sx-lb__arrow[hidden] { display: none; }
.sx-lb__arrow:hover { background: #fff; }
.sx-lb__arrow--prev { left: 14px; } .sx-lb__arrow--next { right: 14px; }
.sx-lb__arrow span { width: 11px; height: 11px; border: solid currentColor; border-width: 0 2px 2px 0; display: block; }
.sx-lb__arrow--prev span { transform: translateX(2px) rotate(135deg); }
.sx-lb__arrow--next span { transform: translateX(-2px) rotate(-45deg); }
@media (max-width: 700px) { .sx-lb__arrow { width: 40px; height: 40px; } .sx-lb__arrow--prev { left: 8px; } .sx-lb__arrow--next { right: 8px; } }
@media (prefers-reduced-motion: reduce) { .sx-lb, .sx-lb__track { animation: none; transition: none; } }

/* ================= RTL (Arabic): product slider + full photo viewer ================= */
/* The slider keeps its own direction (set on #shynx-gallery): the first photo is on the right, "next" goes left, controls sit on the mirrored side. */
.shynx-gallery[dir="rtl"] .shynx-gallery__arrow--prev { left: auto; right: 12px; }
.shynx-gallery[dir="rtl"] .shynx-gallery__arrow--next { right: auto; left: 12px; }
.shynx-gallery[dir="rtl"] .shynx-gallery__arrow--prev span { transform: translateX(-2px) rotate(-45deg); }
.shynx-gallery[dir="rtl"] .shynx-gallery__arrow--next span { transform: translateX(2px) rotate(135deg); }
.shynx-gallery[dir="rtl"] .shynx-gallery__badge { left: auto; right: 14px; }
.shynx-gallery[dir="rtl"] .shynx-gallery__expand { right: auto; left: 12px; }
.shynx-gallery[dir="rtl"] .shynx-gallery__counter { right: auto; left: 14px; }
@media (max-width: 899px) { .shynx-gallery[dir="rtl"] .shynx-gallery__arrow--prev { right: 8px; } .shynx-gallery[dir="rtl"] .shynx-gallery__arrow--next { left: 8px; } }
.sx-lb[dir="rtl"] .sx-lb__arrow--prev { left: auto; right: 14px; }
.sx-lb[dir="rtl"] .sx-lb__arrow--next { right: auto; left: 14px; }
.sx-lb[dir="rtl"] .sx-lb__arrow--prev span { transform: translateX(-2px) rotate(-45deg); }
.sx-lb[dir="rtl"] .sx-lb__arrow--next span { transform: translateX(2px) rotate(135deg); }
@media (max-width: 700px) { .sx-lb[dir="rtl"] .sx-lb__arrow--prev { right: 8px; } .sx-lb[dir="rtl"] .sx-lb__arrow--next { left: 8px; } }
/* "1 / 15" must read in that order inside an RTL page too (bidi would otherwise print "15 / 1") */
.shynx-gallery__counter, .sx-lb__count { direction: ltr; unicode-bidi: isolate; }

.site-footer__brand img.is-custom { width: auto; height: auto; max-width: 200px; max-height: 72px; object-fit: contain; }

/* Review invitation popup + "Your review" box */
.rp-overlay { position: fixed; inset: 0; z-index: 10000; display: grid; place-items: center; padding: 16px; background: rgba(0, 0, 0, .5); }
.rp-open { overflow: hidden; }
.rp-modal { position: relative; width: min(440px, 100%); max-height: 92vh; overflow: auto; background: #fff; color: #111; border-radius: 16px; padding: 26px 24px 22px; box-shadow: 0 24px 60px rgba(0, 0, 0, .35); }
.rp-modal h2 { margin: 0 0 6px; font-size: 1.25rem; }
.rp-x { position: absolute; inset-block-start: 8px; inset-inline-end: 10px; border: 0; background: none; font-size: 28px; line-height: 1; cursor: pointer; color: #555; padding: 4px 8px; }
.rp-step { margin: 0 0 10px; color: #777; font-size: .85rem; }
.rp-prod { display: flex; gap: 14px; align-items: center; margin: 12px 0; }
.rp-prod img { width: 72px; height: 72px; object-fit: cover; border-radius: 10px; background: #f3f1ee; flex: none; }
.rp-hint { margin: 4px 0 0; color: #666; font-size: .85rem; }
.rp-stars { display: flex; gap: 4px; margin: 10px 0; }
.rp-star { border: 0; background: none; cursor: pointer; font-size: 34px; line-height: 1; color: #cfcac2; padding: 2px; transition: transform .1s; }
.rp-star:hover { transform: scale(1.12); }
.rp-star.is-on { color: #e0a100; }
.rp-star:focus-visible { outline: 2px solid #111; outline-offset: 2px; border-radius: 6px; }
.rp-text { width: 100%; box-sizing: border-box; padding: 10px 12px; border: 1px solid #d6d2cb; border-radius: 10px; font: inherit; resize: vertical; }
.rp-msg { min-height: 1.2em; margin: 8px 0 0; font-size: .85rem; color: #555; }
.rp-msg.is-bad { color: #b3261e; } .rp-msg.is-ok { color: #1e6b3c; }
.rp-actions { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; margin-top: 12px; }
.rp-check { width: 54px; height: 54px; border-radius: 50%; background: #d6ecdf; color: #1e6b3c; display: grid; place-items: center; font-size: 28px; margin: 4px auto 12px; }
.rp-modal > h2 + .rp-actions { justify-content: center; }
.rp-mine { margin-top: 1.5rem; padding: 1.25rem; border: 1px solid #e7e2da; border-radius: 14px; background: #faf8f4; box-sizing: border-box; width: 100%; max-width: 760px; display: grid; gap: 0.6rem; }
.rp-mine h3 { margin: 0; font-size: 1.05rem; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.rp-mine .rp-hint, .rp-mine .rp-stars, .rp-mine .rp-msg { margin: 0; }
.rp-mine .rp-star { font-size: 28px; }
.rp-mine .rp-msg { min-height: 0; }
.rp-mine .rp-msg:empty { display: none; }
.rp-mine .rp-save { justify-self: start; }
@media (max-width: 600px) { .rp-mine { padding: 1rem; } .rp-mine .rp-save { justify-self: stretch; } }
.rp-badge { display: inline-block; padding: 2px 9px; border-radius: 999px; background: #fdecc8; color: #8a5a00; font-size: .72rem; font-weight: 600; vertical-align: middle; }
@media (prefers-reduced-motion: reduce) { .rp-star { transition: none; } }
.rp-actions button, .rp-mine .rp-save { padding: 11px 20px; border-radius: 999px; border: 1px solid #111; font: inherit; font-weight: 600; font-size: .9rem; cursor: pointer; background: transparent; color: #111; }
.rp-actions .btn--primary, .rp-mine .rp-save { background: #111; color: #fff; }
.rp-actions button:disabled, .rp-mine .rp-save:disabled { opacity: .55; cursor: default; }
.rp-actions button:focus-visible, .rp-mine .rp-save:focus-visible { outline: 2px solid #e0a100; outline-offset: 2px; }
.rp-modal:focus { outline: none; }

.social-link { width: 40px; height: 40px; }
.social-link--whatsapp:hover { background: #25d366; border-color: #25d366; }
.social-link--instagram:hover { background: #c13584; border-color: #c13584; }
.social-link--tiktok:hover { background: #010101; border-color: #25f4ee; box-shadow: 2px 2px 0 #fe2c55; }
.social-link--facebook:hover { background: #1877f2; border-color: #1877f2; }
/* ================= EMPTY CART ================= */
.cart-empty-state { max-width: 520px; margin: 1.5rem auto 3rem; padding: 2.5rem 1.5rem; text-align: center; background: #fff; border: 1px solid #eee; border-radius: 24px; }
.cart-empty-state__art { display: block; width: min(200px, 60%); height: auto; margin: 0 auto 1.25rem; }
.cart-empty-state__title { margin: 0 0 0.6rem; font-size: clamp(1.4rem, 3.4vw, 1.9rem); line-height: 1.2; }
.cart-empty-state__text { margin: 0 auto 1.6rem; max-width: 380px; color: #666; line-height: 1.6; }
.cart-empty-state__cta { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 2rem; border-radius: 999px; background: #111; color: #fff; text-decoration: none; font-weight: 600; transition: transform 0.15s, box-shadow 0.15s; }
.cart-empty-state__cta:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18); color: #fff; text-decoration: none; }
.cart-empty-state__cta:focus-visible { outline: 2px solid #0b57d0; outline-offset: 3px; }
@media (max-width: 600px) { .cart-empty-state { margin: 1rem 0 2rem; padding: 1.75rem 1.1rem; border-radius: 18px; } .cart-empty-state__cta { width: 100%; } }
@media (prefers-reduced-motion: reduce) { .cart-empty-state__cta { transition: none; } }
/* the cart page is a two-column grid (items | totals); the empty state spans both and sits centred */
.woocommerce > .cart-empty-state, .cart-empty-state { grid-column: 1 / -1; width: 100%; max-width: 520px; justify-self: center; box-sizing: border-box; }

/* ================= FOOTER =================
   Composition: logo (left) | page navigation (centre) | social icons (right), a hairline, then the policy links centred below.
   Link hover: ONE underline that draws in from the start of the word and leaves toward its end (the old double line came from two rules,
   an animated gradient in motion.css plus text-decoration in this file; both were removed, this is the only link-underline rule for the footer). */
.site-footer { background: #fff; border-top: 1px solid #eee; padding: 2rem clamp(1.25rem, 5vw, 4rem) 2rem; position: relative; z-index: 1; color: #111; }
.site-footer__inner { max-width: 1280px; margin: 0 auto; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "logo nav social" "legal legal legal"; align-items: center; column-gap: clamp(1.5rem, 4vw, 3.5rem); row-gap: 1.35rem; }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
/* no policy links: the layout has no empty row (and no gap) left behind */
.site-footer__inner.has-no-legal { grid-template-areas: "logo nav social"; row-gap: 0; }
.site-footer__logo { grid-area: logo; display: block; line-height: 0; justify-self: start; }
.site-footer__logo img { display: block; height: 50px; width: auto; max-width: 190px; object-fit: contain; }
.site-footer__nav { grid-area: nav; min-width: 0; }
.site-footer__nav ul, .site-footer__legal ul { display: flex; flex-wrap: wrap; justify-content: center; }
.site-footer__nav ul { gap: 0.5rem clamp(1.25rem, 2.8vw, 2.6rem); }
.site-footer ul.site-footer__social { grid-area: social; display: flex; flex-wrap: wrap; align-items: center; justify-self: end; gap: 0.5rem; }
.site-footer__social li { line-height: 0; }
.site-footer__legal { grid-area: legal; padding-top: 1.1rem; border-top: 1px solid #eee; }
.site-footer__legal ul { gap: 0.4rem clamp(1.25rem, 3vw, 2.25rem); }
/* link hover: the label ROLLS. The text slides up and out of a clipped line while an identical copy slides in from below, in full black with a
   hair more weight; a small dot rides in beside it. No underline is used anywhere in the footer, so there is nothing to double up. */
.site-footer__nav a, .site-footer__legal a { position: relative; display: inline-block; text-decoration: none; background: none; /* the dot hangs in the gap, so hovering never shifts a neighbour */ line-height: var(--lh); transition: color 0.2s ease; }
.site-footer__nav a::before, .site-footer__legal a::before { content: ""; position: absolute; inset-inline-start: -14px; top: 50%; width: 6px; height: 6px; margin-top: -3px; border-radius: 50%; background: #111; opacity: 0; transform: scale(0.4); transition: opacity 0.22s ease, transform 0.26s ease; }
.site-footer__nav a { --lh: 24px; }
.site-footer__legal a { --lh: 22px; }
.roll { display: block; overflow: hidden; height: var(--lh); }
.roll__in { display: flex; flex-direction: column; transition: transform 0.38s cubic-bezier(0.22, 1, 0.36, 1); }
.roll__a, .roll__b { display: block; height: var(--lh); line-height: var(--lh); white-space: nowrap; }
.roll__b { color: #000; font-weight: 600; }
.site-footer__nav a { font-size: 0.95rem; font-weight: 500; color: #222; letter-spacing: 0.01em; }
.site-footer__legal a { font-size: 0.82rem; color: #777; }
.site-footer__nav a:hover, .site-footer__nav a:focus-visible, .site-footer__legal a:hover, .site-footer__legal a:focus-visible { text-decoration: none; }
.site-footer__nav a:hover::before, .site-footer__nav a:focus-visible::before, .site-footer__legal a:hover::before, .site-footer__legal a:focus-visible::before { opacity: 1; transform: scale(1); }
.site-footer__nav a:hover .roll__in, .site-footer__nav a:focus-visible .roll__in, .site-footer__legal a:hover .roll__in, .site-footer__legal a:focus-visible .roll__in { transform: translateY(-50%); }
.site-footer__nav a:focus-visible, .site-footer__legal a:focus-visible { outline: 2px solid #0b57d0; outline-offset: 4px; border-radius: 3px; }
@media (prefers-reduced-motion: reduce) {
	.roll__in, .site-footer__nav a, .site-footer__legal a, .site-footer__nav a::before, .site-footer__legal a::before { transition: none; }
	.site-footer__nav a:hover .roll__in, .site-footer__nav a:focus-visible .roll__in, .site-footer__legal a:hover .roll__in, .site-footer__legal a:focus-visible .roll__in { transform: none; }
	.site-footer__nav a:hover .roll__a, .site-footer__legal a:hover .roll__a { font-weight: 600; color: #000; }
}
@media (max-width: 900px) {
	.site-footer__inner { grid-template-columns: 1fr auto; grid-template-areas: "logo social" "nav nav" "legal legal"; }
	.site-footer__inner.has-no-legal { grid-template-areas: "logo social" "nav nav"; row-gap: 1.35rem; }
}
@media (max-width: 600px) {
	.site-footer__inner { grid-template-columns: minmax(0, 1fr); grid-template-areas: "logo" "nav" "social" "legal"; justify-items: center; row-gap: 1.2rem; }
	.site-footer__inner.has-no-legal { grid-template-areas: "logo" "nav" "social"; row-gap: 1.2rem; }
	.site-footer__logo, .site-footer ul.site-footer__social { justify-self: center; }
	.site-footer__nav ul { gap: 0.55rem 1.4rem; }
	.site-footer__legal { width: 100%; }
}

/* ================= SOCIAL ICON INTERACTIONS =================
   One shared motion for every network: a gentle lift with a slight overshoot, the brand colour fading in, a soft brand-coloured glow, and a
   quick settle back when the pointer leaves. Reduced-motion visitors get the colour change only. */
.site-footer .social-link { --glow: rgba(0, 0, 0, 0.35); transition: transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.28s ease, background-color 0.22s ease, border-color 0.22s ease, color 0.2s ease; }
.site-footer .social-link .social-icon { transition: transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1); }
.site-footer .social-link:hover, .site-footer .social-link:focus-visible { transform: translateY(-3px) scale(1.07); color: #fff; border-color: transparent; background: #111; box-shadow: 0 10px 18px -6px var(--glow); }
.site-footer .social-link:hover .social-icon, .site-footer .social-link:focus-visible .social-icon { transform: scale(1.05); }
.site-footer .social-link:active { transform: translateY(-1px) scale(0.97); transition-duration: 0.1s; }
.site-footer .social-link--whatsapp { --glow: rgba(37, 211, 102, 0.6); }
.site-footer .social-link--whatsapp:hover, .site-footer .social-link--whatsapp:focus-visible { background: #25d366; }
.site-footer .social-link--facebook { --glow: rgba(24, 119, 242, 0.55); }
.site-footer .social-link--facebook:hover, .site-footer .social-link--facebook:focus-visible { background: #1877f2; }
.site-footer .social-link--threads { --glow: rgba(0, 0, 0, 0.45); }
.site-footer .social-link--threads:hover, .site-footer .social-link--threads:focus-visible { background: #000; }
.site-footer .social-link--tiktok { --glow: rgba(254, 44, 85, 0.4); }
.site-footer .social-link--tiktok:hover, .site-footer .social-link--tiktok:focus-visible { background: #010101; box-shadow: -2px -2px 0 #25f4ee, 2px 2px 0 #fe2c55, 0 10px 18px -6px var(--glow); }
/* Instagram: the brand gradient (yellow > orange > pink > magenta > purple) is the glyph at rest and becomes the button on hover */
.site-footer .social-link--instagram { --glow: rgba(214, 41, 118, 0.55); }
.site-footer .social-link--instagram:hover, .site-footer .social-link--instagram:focus-visible { background: linear-gradient(45deg, #fdb45a 0%, #fa7e1e 22%, #d62976 52%, #962fbf 78%, #4f5bd5 100%); }
.site-footer .social-link--instagram:hover .social-icon path, .site-footer .social-link--instagram:focus-visible .social-icon path { fill: #fff; }
@media (prefers-reduced-motion: reduce) {
	.site-footer .social-link, .site-footer .social-link .social-icon { transition: background-color 0.15s, color 0.15s, border-color 0.15s; }
	.site-footer .social-link:hover, .site-footer .social-link:focus-visible, .site-footer .social-link:active, .site-footer .social-link:hover .social-icon { transform: none; }
}

/* ================= BACK TO TOP =================
   A 48 px black disc with a soft shadow. It rises in once the visitor has scrolled; on hover it lifts, inverts to white with a black ring, and
   the arrow rolls (the old arrow leaves through the top while a fresh one enters from below), echoing the footer link hover. */
.sx-top-sentinel { position: absolute; top: 0; left: 0; width: 1px; height: 600px; pointer-events: none; visibility: hidden; }
.sx-top { position: absolute; z-index: 1; inset-inline-end: clamp(14px, 2vw, 24px); inset-block-end: 18px; width: 48px; height: 48px; padding: 0; border: 1.5px solid #111; border-radius: 50%; background: #111; color: #fff; cursor: pointer;
	display: grid; place-items: center; box-shadow: 0 10px 24px -8px rgba(0, 0, 0, 0.5); opacity: 0; visibility: hidden; transform: translateY(14px) scale(0.85);
	transition: opacity 0.3s ease, transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), visibility 0s linear 0.4s, background-color 0.25s ease, color 0.25s ease, box-shadow 0.3s ease; }
.sx-top.is-visible { opacity: 1; visibility: visible; transform: none; transition: opacity 0.3s ease, transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), visibility 0s, background-color 0.25s ease, color 0.25s ease, box-shadow 0.3s ease; }
.sx-top__box { display: block; width: 20px; height: 20px; overflow: hidden; }
.sx-top__roll { display: flex; flex-direction: column; transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1); }
.sx-top__arrow { display: block; flex: none; }
.sx-top.is-visible:hover, .sx-top.is-visible:focus-visible { transform: translateY(-4px); background: #fff; color: #111; box-shadow: 0 14px 28px -8px rgba(0, 0, 0, 0.45); }
.sx-top:hover .sx-top__roll, .sx-top:focus-visible .sx-top__roll { transform: translateY(-50%); }
.sx-top.is-visible:active { transform: translateY(-1px) scale(0.95); transition-duration: 0.12s; }
.sx-top:focus-visible { outline: 2px solid #0b57d0; outline-offset: 4px; }
@media (max-width: 600px) { .sx-top { width: 44px; height: 44px; inset-block-end: 14px; } }
@media (prefers-reduced-motion: reduce) {
	.sx-top, .sx-top.is-visible { transition: opacity 0.2s ease, visibility 0s, background-color 0.15s, color 0.15s; transform: none; }
	.sx-top.is-visible:hover, .sx-top.is-visible:focus-visible, .sx-top.is-visible:active { transform: none; }
	.sx-top__roll, .sx-top:hover .sx-top__roll, .sx-top:focus-visible .sx-top__roll { transition: none; transform: none; }
}

/* Instagram's glyph is a full rounded square, so at the same size as the other (round) glyphs it crowds the circle; a touch smaller gives it equal breathing room */
.site-footer .social-link--instagram .social-icon { width: 19px; height: 19px; }

/* The Instagram gradient must span the WHOLE button including its 1px border. By default a background is positioned inside the border and then
   repeats into it, which painted a ring of wrong colours at the edge on hover. `border-box` makes the gradient reach the very edge. */
.site-footer .social-link--instagram { background-origin: border-box; background-clip: border-box; }
.site-footer .social-link--instagram:hover, .site-footer .social-link--instagram:focus-visible { background-origin: border-box; background-clip: border-box; background-repeat: no-repeat; }

/* Sold-out products: the + button looks switched off (grey, no hover lift, not-allowed cursor). Tapping still shows a toast. */
.product-card__add.is-unavailable { background: #b9b6b0; color: #fff; box-shadow: none; cursor: not-allowed; opacity: 0.75; }
.product-card__add.is-unavailable:hover, .product-card__add.is-unavailable:active { transform: none; background: #b9b6b0; }