/* artesco — shop enhancements
 * Brand-aware: EVERY colour/space/size below is a theme token (var(--wp--preset--…)), so this follows
 * whatever palette + scale design-dna rolled. The only literal colours are neutral rgba() shadows/scrims.
 * Token cheat-sheet: colours brand / brand-accent / ink / line / muted / surface / bg;
 * spacing --wp--preset--spacing--20…80; font sizes --wp--preset--font-size--small…display.
 */

/* ── FEATURE 1 — variation swatches ──────────────────────────────────────────── */
/* The original <select> stays in the DOM (accessibility + form submit) but is visually hidden once the
   JS has built chips for it. JS adds .artesco-has-swatches to the wrapping <td>/row. */
.artesco-swatches{display:flex;flex-wrap:wrap;gap:var(--wp--preset--spacing--20,.5rem);margin:.35rem 0 .15rem}
.artesco-swatch{display:inline-flex;align-items:center;justify-content:center;gap:.4rem;cursor:pointer;
	border:1px solid var(--wp--preset--color--line);border-radius:.5rem;background:var(--wp--preset--color--bg);
	color:var(--wp--preset--color--ink);font-size:var(--wp--preset--font-size--small,.85rem);line-height:1;
	padding:.45rem .7rem;transition:border-color .15s ease,box-shadow .15s ease,opacity .15s ease}
.artesco-swatch:hover{border-color:var(--wp--preset--color--brand)}
.artesco-swatch.is-selected{border-color:var(--wp--preset--color--brand);
	box-shadow:0 0 0 2px color-mix(in srgb,var(--wp--preset--color--brand) 28%,transparent)}
.artesco-swatch.is-disabled{opacity:.35;cursor:not-allowed;text-decoration:line-through}
/* colour-circle variant: a round chip filled with the term's colour (no label, name in title attr) */
.artesco-swatch--color{width:2rem;height:2rem;padding:0;border-radius:50%;overflow:hidden;
	background-size:cover;background-position:center}
.artesco-swatch--color.is-selected{box-shadow:0 0 0 2px var(--wp--preset--color--bg),
	0 0 0 4px var(--wp--preset--color--brand)}
/* the hidden-but-present original select */
.artesco-select-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);
	clip-path:inset(50%);white-space:nowrap;border:0;padding:0;margin:-1px}

/* swatch dots on shop-loop cards (variable products) */
.artesco-loop-swatches{display:inline-flex;gap:.3rem;margin-top:var(--wp--preset--spacing--20,.5rem);
	flex-wrap:wrap;align-items:center}
.artesco-loop-dot{width:.85rem;height:.85rem;border-radius:50%;display:inline-block;
	border:1px solid var(--wp--preset--color--line)}

/* ── FEATURE 3 — hover-swap 2nd image on loop cards ───────────────────────────── */
/* The card's anchor/figure becomes the positioning context; the 2nd image overlays the first and
   cross-fades in on hover. Works for the classic-loop <img.artesco-hover-img> and the block-path img
   the JS injects (same class). */
.woocommerce ul.products li.product a img,
.wc-block-product .wp-block-woocommerce-product-image img{position:relative}
li.product,.wc-block-product,.wp-block-woocommerce-product-template li{position:relative}
.artesco-hover-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
	opacity:0;transition:opacity .3s ease;pointer-events:none;z-index:1}
li.product:hover .artesco-hover-img,
.wc-block-product:hover .artesco-hover-img,
.artesco-hover-host:hover .artesco-hover-img{opacity:1}

/* ── FEATURE 2 — sticky add-to-cart bar (single product) ──────────────────────── */
/* Hidden by default (the PHP also sets [hidden]); JS removes [hidden] + toggles .is-visible on scroll. */
.artesco-sticky-atc{position:fixed;left:0;right:0;bottom:0;z-index:90;
	background:var(--wp--preset--color--bg);border-top:1px solid var(--wp--preset--color--line);
	box-shadow:0 -6px 20px rgba(0,0,0,.10);transform:translateY(100%);transition:transform .22s ease;
	padding:var(--wp--preset--spacing--20,.6rem) var(--wp--preset--spacing--30,.9rem);
	padding-bottom:calc(var(--wp--preset--spacing--20,.6rem) + env(safe-area-inset-bottom,0px))}
.artesco-sticky-atc.is-visible{transform:translateY(0)}
.artesco-sticky-atc__inner{display:flex;align-items:center;gap:var(--wp--preset--spacing--30,.9rem);
	max-width:var(--wp--style--global--content-size,1100px);margin:0 auto}
.artesco-sticky-atc__title{font-family:var(--wp--preset--font-family--display);font-weight:700;
	color:var(--wp--preset--color--ink);font-size:var(--wp--preset--font-size--medium,1rem);
	white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1 1 auto;min-width:0}
.artesco-sticky-atc__price{color:var(--wp--preset--color--brand-accent);font-weight:700;
	font-size:var(--wp--preset--font-size--medium,1rem);white-space:nowrap;flex:0 0 auto}
.artesco-sticky-atc__price del{color:var(--wp--preset--color--muted);font-weight:400;margin-right:.35rem}
.artesco-sticky-atc__btn{flex:0 0 auto;cursor:pointer;border:none;border-radius:.5rem;
	background:var(--wp--preset--color--brand);color:var(--wp--preset--color--bg);font-weight:700;
	font-family:var(--wp--preset--font-family--body);font-size:var(--wp--preset--font-size--medium,1rem);
	padding:.7rem var(--wp--preset--spacing--40,1.2rem);transition:opacity .15s ease}
.artesco-sticky-atc__btn:hover{opacity:.9}
/* Mobile-first: on a narrow screen drop the title so the price + button always fit. */
@media (max-width:600px){
	.artesco-sticky-atc__title{display:none}
}

/* ── FEATURE 4 — frequently-bought-together ("Cumpărate împreună des") ────────── */
.artesco-fbt{margin:var(--wp--preset--spacing--60,2.5rem) 0;
	padding:var(--wp--preset--spacing--40,1.4rem);
	border:1px solid var(--wp--preset--color--line);border-radius:.75rem;
	background:var(--wp--preset--color--surface,var(--wp--preset--color--bg))}
.artesco-fbt__heading{font-family:var(--wp--preset--font-family--display);
	font-size:var(--wp--preset--font-size--large,1.4rem);color:var(--wp--preset--color--ink);
	margin:0 0 var(--wp--preset--spacing--30,1rem)}
.artesco-fbt__row{display:flex;flex-wrap:wrap;gap:var(--wp--preset--spacing--30,1rem)}
.artesco-fbt__item{display:flex;flex-direction:column;align-items:flex-start;gap:.3rem;cursor:pointer;
	flex:1 1 160px;max-width:220px;padding:var(--wp--preset--spacing--20,.6rem);
	border:1px solid var(--wp--preset--color--line);border-radius:.6rem;background:var(--wp--preset--color--bg)}
.artesco-fbt__check{accent-color:var(--wp--preset--color--brand);width:1.1rem;height:1.1rem;margin:0 0 .25rem}
.artesco-fbt__thumb img{display:block;width:100%;height:auto;border-radius:.4rem}
.artesco-fbt__name{font-size:var(--wp--preset--font-size--small,.85rem);color:var(--wp--preset--color--ink);
	line-height:1.3}
.artesco-fbt__price{font-weight:700;color:var(--wp--preset--color--brand-accent);
	font-size:var(--wp--preset--font-size--small,.9rem)}
.artesco-fbt__foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
	gap:var(--wp--preset--spacing--30,1rem);margin-top:var(--wp--preset--spacing--30,1rem)}
.artesco-fbt__total{font-size:var(--wp--preset--font-size--medium,1rem);color:var(--wp--preset--color--ink)}
.artesco-fbt__total-val{color:var(--wp--preset--color--brand-accent)}
.artesco-fbt__add{cursor:pointer;border:none;border-radius:.5rem;
	background:var(--wp--preset--color--brand);color:var(--wp--preset--color--bg);font-weight:700;
	font-family:var(--wp--preset--font-family--body);font-size:var(--wp--preset--font-size--medium,1rem);
	padding:.75rem var(--wp--preset--spacing--40,1.3rem);transition:opacity .15s ease}
.artesco-fbt__add:hover{opacity:.9}
.artesco-fbt__add[disabled]{opacity:.5;cursor:default}

/* ── FEATURE 5 — reassurance line ─────────────────────────────────────────────── */
.artesco-reassure{margin:var(--wp--preset--spacing--20,.6rem) 0 0;
	font-size:var(--wp--preset--font-size--small,.85rem);color:var(--wp--preset--color--muted);
	line-height:1.4}

/* ── Storefront DNA variants — shape the swatches + sale badges to the rolled corner language ──────────
   Body classes come from the artesco-shop body_class filter, driven by design-dna's artesco_shop_dna option.
   Defaults (no class) keep the circle swatch / pill badge already defined above. */
/* Swatch shape */
body.artesco-swatch-square .artesco-swatch--color{border-radius:.15rem}
body.artesco-swatch-square .artesco-loop-swatches span{border-radius:.12rem}
body.artesco-swatch-circle .artesco-swatch--color{border-radius:50%}
/* Sale-badge shape — covers the WC block sale badge + the classic .onsale flash. */
body.artesco-badge-pill .wc-block-components-product-sale-badge,
body.artesco-badge-pill span.onsale{border-radius:999px}
body.artesco-badge-corner .wc-block-components-product-sale-badge,
body.artesco-badge-corner span.onsale{border-radius:0}
body.artesco-badge-text .wc-block-components-product-sale-badge,
body.artesco-badge-text span.onsale{background:transparent;color:var(--wp--preset--color--brand);
	border:0;padding:0;font-weight:700;text-transform:uppercase;letter-spacing:.08em}