/* Extrò shop: pieces embedded in the Elementor templates (shop.php) and the
   WooCommerce pages that stay on theme templates (account, cart, checkout).
   Layout itself lives in Elementor. */
:root {
	--exs-ink: #141414;
	--exs-gold: #C5A77B;
	--exs-gold-deep: #9D8528;
	--exs-grey: #595959;
	--exs-cream: #F6F4F2;
	--exs-line: #E4DDD3;
	--exs-display: "Cormorant Garamond", Georgia, serif;
	--exs-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

/* ---------- Breadcrumb, sorting, category bar ---------- */
.ex-breadcrumb, .ex-sorting, .ex-catnav { display: block; font-family: var(--exs-body); }
.ex-breadcrumb .woocommerce-breadcrumb { margin: 0; font-size: .7rem; line-height: 1.6; letter-spacing: .12em; text-transform: uppercase; color: var(--exs-grey); }
.ex-breadcrumb a { color: var(--exs-grey) !important; text-decoration: none !important; }
.ex-breadcrumb a:hover { color: var(--exs-gold-deep) !important; }
.ex-sorting { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; }
.ex-sorting .woocommerce-result-count { margin: 0; font-size: .85rem; color: var(--exs-grey); float: none; }
.ex-sorting .woocommerce-ordering { margin: 0; float: none; }
.ex-sorting select { font-family: var(--exs-body); font-size: .85rem; border: 1px solid var(--exs-line); border-radius: 0; padding: .55rem 2rem .55rem .8rem; background-color: #fff; color: var(--exs-ink); }
.ex-catnav { display: flex; flex-wrap: wrap; gap: .5rem; }
.ex-catnav a {
	display: inline-block !important; padding: .6rem 1.1rem !important; border: 1px solid var(--exs-line) !important; background: #fff;
	font-size: .7rem !important; letter-spacing: .14em !important; text-transform: uppercase !important; color: var(--exs-ink) !important;
	text-decoration: none !important; transition: all .25s;
}
.ex-catnav a:hover { border-color: var(--exs-ink) !important; }
.ex-catnav a.is-active { background: var(--exs-ink) !important; border-color: var(--exs-ink) !important; color: #fff !important; }

/* ---------- Single product pieces ---------- */
.ex-gallery { display: block; }
.ex-gallery .woocommerce-product-gallery { width: 100% !important; float: none !important; margin: 0 !important; position: relative; }
.ex-gallery .woocommerce-product-gallery__image { background: var(--exs-cream); }
.ex-gallery .woocommerce-product-gallery__image img { mix-blend-mode: multiply; }
/* Hover zoom: WooCommerce lays an enlarged copy over the photo; hide the photo
   underneath, otherwise the two blended images show as a double exposure */
.ex-gallery .woocommerce-product-gallery__image:hover > a > img:not(.zoomImg) { opacity: 0; }
.ex-gallery .woocommerce-product-gallery__image .zoomImg { background: var(--exs-cream); }
.ex-gallery .flex-control-thumbs { display: grid; grid-template-columns: repeat(6, 1fr); gap: .6rem; margin-top: .6rem !important; }
.ex-gallery .flex-control-thumbs li { width: auto !important; margin: 0 !important; background: var(--exs-cream); }
.ex-gallery .flex-control-thumbs li img { mix-blend-mode: multiply; opacity: .6; transition: opacity .2s; }
.ex-gallery .flex-control-thumbs li img.flex-active, .ex-gallery .flex-control-thumbs li img:hover { opacity: 1; }
.ex-gallery .woocommerce-product-gallery__trigger { z-index: 5; }
.ex-buy { display: block; font-family: var(--exs-body); }
.ex-buy .stock { font-size: .8rem; letter-spacing: .06em; color: var(--exs-grey); margin: 0 0 1rem; }
.ex-buy .stock.out-of-stock { color: #9b2c2c; }
.ex-buy form.cart { margin: 0; display: flex; gap: .75rem; align-items: stretch; flex-wrap: wrap; }
.ex-buy .quantity .qty { border: 1px solid var(--exs-line); border-radius: 0; height: 3.1rem; width: 4.5rem; font-family: var(--exs-body); }
.ex-buy form.cart .single_add_to_cart_button { flex: 1 1 auto; min-height: 3.1rem; }

/* ---------- Buttons ---------- */
.woocommerce a.button, .woocommerce button.button, .woocommerce input.button,
.woocommerce #respond input#submit, .woocommerce a.button.alt, .woocommerce button.button.alt {
	font-family: var(--exs-body); background: var(--exs-ink) !important; color: #fff !important; border-radius: 0; border: 0;
	font-size: .75rem; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; padding: 1rem 1.8rem; transition: background-color .3s;
}
.woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce input.button:hover,
.woocommerce a.button.alt:hover, .woocommerce button.button.alt:hover { background: var(--exs-gold-deep) !important; color: #fff !important; }

/* ---------- Account, cart, checkout (theme templates) ---------- */
.woocommerce-account .site-main, .woocommerce-cart .site-main, .woocommerce-checkout .site-main {
	max-width: 1280px; margin: 0 auto; padding: 3rem 1.25rem 5rem !important; font-family: var(--exs-body); color: var(--exs-ink);
}
.woocommerce-account .page-header .entry-title, .woocommerce-cart .page-header .entry-title, .woocommerce-checkout .page-header .entry-title {
	font-family: var(--exs-display); font-weight: 500; font-size: 3rem; letter-spacing: -.01em; margin: 0 0 2rem;
}
.woocommerce form.login, .woocommerce form.register, .woocommerce form.checkout_coupon, .woocommerce form.lost_reset_password {
	border: 1px solid var(--exs-line); border-radius: 0; padding: 2rem; margin: 0 0 2rem;
}
.woocommerce-account .u-columns h2 { font-family: var(--exs-display); font-weight: 500; font-size: 1.9rem; margin-bottom: 1rem; }
.woocommerce form .form-row label { font-size: .85rem; color: var(--exs-ink); }
.woocommerce form .form-row .input-text, .woocommerce form .form-row select { border: 1px solid var(--exs-line); border-radius: 0; padding: .8rem .9rem; background: #fff; }
.woocommerce form .form-row .input-text:focus { border-color: var(--exs-ink); outline: none; }
.woocommerce-MyAccount-navigation ul { list-style: none; padding: 0; margin: 0 0 2rem; border-top: 1px solid var(--exs-line); }
.woocommerce-MyAccount-navigation li a { display: block; padding: .8rem 0; border-bottom: 1px solid var(--exs-line); color: var(--exs-ink); text-decoration: none; font-size: .9rem; }
.woocommerce-MyAccount-navigation li.is-active a, .woocommerce-MyAccount-navigation li a:hover { color: var(--exs-gold-deep); }
/* Block cart/checkout: the theme's wide alignment pushed them off-screen on phones */
.woocommerce-cart .page-content > *, .woocommerce-checkout .page-content > *,
.woocommerce-cart .alignwide, .woocommerce-checkout .alignwide { max-width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; }
.woocommerce-price-suffix { color: var(--exs-grey); font-size: .75em; }

/* ---------- Phones ---------- */
@media (max-width: 767px) {
	.ex-catnav { flex-wrap: nowrap; overflow-x: auto; padding-bottom: .25rem; }
	.ex-catnav a { white-space: nowrap; }
	.ex-gallery .flex-control-thumbs { grid-template-columns: repeat(5, 1fr); gap: .4rem; }
	.woocommerce-account .page-header .entry-title, .woocommerce-cart .page-header .entry-title, .woocommerce-checkout .page-header .entry-title { font-size: 2.2rem; }
	.woocommerce form.login, .woocommerce form.register { padding: 1.25rem; }
}

/* ---------- Embroidery option (ricamo.php) ---------- */
.ex-ricamo { flex: 1 1 100%; border: 1px solid var(--exs-line); background: var(--exs-cream); padding: 1rem 1.15rem; margin: 0 0 .5rem; font-family: var(--exs-body); color: var(--exs-ink); }
.ex-ricamo__toggle { display: flex; align-items: center; gap: .65rem; cursor: pointer; font-size: .78rem; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; }
.ex-ricamo input[type=checkbox], .ex-ricamo input[type=radio] { accent-color: var(--exs-ink); width: 1rem; height: 1rem; margin: 0; }
.ex-ricamo__panel { display: grid; gap: 1.1rem; margin-top: 1.1rem; padding-top: 1.1rem; border-top: 1px solid var(--exs-line); }
.ex-ricamo__panel[hidden] { display: none; }
.ex-ricamo__field { border: 0; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.4rem; }
.ex-ricamo__field legend, .ex-ricamo__legend { width: 100%; padding: 0; margin: 0 0 .1rem; font-size: .68rem; letter-spacing: .16em; text-transform: uppercase; color: var(--exs-grey); }
.ex-ricamo__choice { display: inline-flex; align-items: center; gap: .45rem; font-size: .9rem; cursor: pointer; }
.ex-ricamo input[type=text] { flex: 1 1 12rem; border: 1px solid var(--exs-line); border-radius: 0; background: #fff; padding: .75rem .9rem; font-family: var(--exs-body); font-size: 1rem; }
.ex-ricamo input[type=text]:focus { border-color: var(--exs-ink); outline: none; }
.ex-ricamo__count { font-size: .75rem; color: var(--exs-grey); }
.ex-ricamo__preview { background: #2b2420; color: #e9d9b8; text-align: center; padding: 1.4rem 1rem; min-height: 4.6rem; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.ex-ricamo__preview span { font-size: 2.4rem; line-height: 1.1; word-break: break-all; }
.ex-ricamo__preview [data-font=allura] { font-family: "Allura", cursive; }
.ex-ricamo__preview [data-font=caveat] { font-family: "Caveat", cursive; font-weight: 600; }
