/* =============================================================================
   SHOP — WooCommerce product / shop / cart / checkout, ILYPIO brand.
   Discipline: WHITE ground, INK text, PINK for action + accent ONLY. Nothing
   blue anywhere. The restraint is what makes it read as considered, not busy.
   Astra puts .woocommerce-page / .woocommerce-js on the BODY, so overrides are
   body-prefixed (+ !important where Astra's inline customizer CSS competes).
   ============================================================================= */

.woocommerce { --wash: #faf5f9; --line: #eadfe7; --muted: #6d665f;
	--ily-heart: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 21s-8-5.3-8-11a4.5 4.5 0 0 1 8-2.5A4.5 4.5 0 0 1 20 10c0 5.7-8 11-8 11z'/%3E%3C/svg%3E"); }

/* ---- KILL BLUE across the whole shop ------------------------------------- */
body.woocommerce-page a { color: var(--ink); text-decoration: none; }
body.woocommerce-page a:hover, body.woocommerce-page a:focus { color: var(--pink); }
body.woocommerce-page .woocommerce-breadcrumb { color: var(--muted); font-family: var(--font-mono); font-size: 11px; letter-spacing: .06em; }
body.woocommerce-page .woocommerce-breadcrumb a { color: var(--muted); }
body.woocommerce-page .woocommerce-breadcrumb a:hover { color: var(--pink); }
body.woocommerce span.onsale { background: var(--pink) !important; color: #fff !important; border-radius: 999px; }
body.woocommerce .star-rating span::before,
body.woocommerce .star-rating::before,
body.woocommerce p.stars a::before,
body.woocommerce p.stars a:hover::after { color: var(--pink) !important; }
/* focus rings + form focus -> pink, never blue */
body.woocommerce-page :focus-visible { outline: 2px solid var(--pink); outline-offset: 2px; }
body.woocommerce-page input:focus, body.woocommerce-page select:focus, body.woocommerce-page textarea:focus {
	border-color: var(--pink) !important; box-shadow: 0 0 0 1px var(--pink) !important; outline: none; }
/* notices: pink accent rail instead of Woo's blue/green */
body.woocommerce .woocommerce-message, body.woocommerce .woocommerce-info, body.woocommerce .woocommerce-noreviews {
	border-top-color: var(--pink) !important; }
body.woocommerce .woocommerce-message::before, body.woocommerce .woocommerce-info::before { color: var(--pink) !important; }
body.woocommerce-page .woocommerce-message a, body.woocommerce-page .woocommerce-info a { color: var(--pink); }

/* ---- BUTTONS — pink pill, pressed state, full-width add-to-cart on mobile -- */
body.woocommerce-page a.button,
body.woocommerce-page button.button,
body.woocommerce-page input.button,
body.woocommerce-page button.button.alt,
body .single_add_to_cart_button,
body.woocommerce-page #place_order,
body.woocommerce-page .checkout-button {
	background: var(--pink) !important; color: #fff !important;
	border: 0; border-radius: 999px; font-family: var(--font-mono);
	font-size: 12px; letter-spacing: .06em; text-transform: uppercase; font-weight: 700;
	padding: 14px 28px; transition: background .16s ease, transform .1s ease, box-shadow .16s ease;
}
body.woocommerce-page a.button:hover, body.woocommerce-page button.button:hover, body.woocommerce-page input.button:hover,
body.woocommerce-page button.button.alt:hover, body .single_add_to_cart_button:hover,
body.woocommerce-page #place_order:hover, body.woocommerce-page .checkout-button:hover {
	background: var(--pink-2) !important; color: #fff !important; transform: translateY(-1px); box-shadow: 0 8px 20px rgba(255, 0, 204, .28); }
/* real pressed state */
body.woocommerce-page a.button:active, body.woocommerce-page button.button:active, body .single_add_to_cart_button:active {
	transform: translateY(1px) scale(.99); box-shadow: none; background: #e600b8 !important; }
body .single_add_to_cart_button.disabled, body.woocommerce-page button.button.alt.disabled {
	background: var(--pink) !important; opacity: .45 !important; }
/* ghost variant for secondary actions */
body.woocommerce-page a.button.ghost { background: transparent !important; color: var(--ink) !important; border: 1.5px solid var(--ink) !important; }

/* ---- PRODUCT PAGE -------------------------------------------------------- */
.woocommerce div.product .product_title { font-family: var(--font-heading); font-weight: 900; letter-spacing: -.01em; line-height: 1.08; }

/* PRICE as a real typographic moment: big Merriweather 900, ink. Astra puts its
   classes on the body + div.product (there's no .woocommerce ELEMENT wrapping the
   summary), so target that + !important to beat Astra's inline price size. */
body.woocommerce-page div.product .entry-summary p.price,
body.woocommerce-page div.product .entry-summary .price,
body.woocommerce-page div.product .woocommerce-variation-price .price {
	font-family: var(--font-heading) !important; font-weight: 900 !important; color: var(--ink) !important;
	font-size: clamp(30px, 7vw, 42px) !important; line-height: 1.05 !important; letter-spacing: -.01em; margin: 6px 0 8px; }
body.woocommerce-page div.product .entry-summary p.price del, body.woocommerce-page div.product .entry-summary .price del { color: var(--muted); font-size: .58em; font-weight: 400; }
body.woocommerce-page div.product .entry-summary p.price ins { text-decoration: none; }

/* the "10% to the Good Deeds Fund" badge — the differentiator, at the decision point */
.ily-fund-badge {
	display: inline-flex; align-items: center; gap: 8px; margin: 4px 0 20px;
	background: var(--wash); border: 1px solid var(--line); border-left: 4px solid var(--pink);
	border-radius: 0 999px 999px 0; padding: 9px 16px 9px 13px;
	font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .02em; color: var(--ink) !important; text-transform: none; }
.ily-fund-badge:hover { color: var(--pink) !important; border-color: var(--pink); }
.ily-fund-heart { width: 15px; height: 14px; flex: none; }

/* pink-heart bullet motif in "what you get" lists — sparingly */
.woocommerce div.product .woocommerce-product-details__short-description ul,
.woocommerce div.product .woocommerce-Tabs-panel--description ul,
.ily-section ul { list-style: none; padding-left: 0; }
.woocommerce div.product .woocommerce-product-details__short-description ul li,
.woocommerce div.product .woocommerce-Tabs-panel--description ul li,
.ily-section ul li { position: relative; padding-left: 26px; margin: 8px 0; }
.woocommerce div.product .woocommerce-product-details__short-description ul li::before,
.woocommerce div.product .woocommerce-Tabs-panel--description ul li::before,
.ily-section ul li::before {
	content: ""; position: absolute; left: 0; top: .34em; width: 15px; height: 14px;
	background: var(--pink); -webkit-mask: var(--ily-heart) center/contain no-repeat; mask: var(--ily-heart) center/contain no-repeat; }

/* quantity stepper — styled, not a raw browser spinner */
body.woocommerce div.product form.cart div.quantity { display: inline-flex; align-items: stretch; border: 1px solid var(--line); border-radius: 999px; overflow: hidden; background: #fff; }
body.woocommerce div.product form.cart div.quantity input.qty {
	border: 0 !important; box-shadow: none !important; width: 46px; text-align: center; font-family: var(--font-mono); font-weight: 700; color: var(--ink);
	-moz-appearance: textfield; background: transparent; }
body.woocommerce div.product form.cart div.quantity input.qty::-webkit-outer-spin-button,
body.woocommerce div.product form.cart div.quantity input.qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* ---- SWIPE GALLERY (peek) ------------------------------------------------- */
/* desktop: sits in the left column so the buy box keeps the right column */
@media (min-width: 769px) { .woocommerce div.product .ily-gallery { float: left; width: 48%; margin-bottom: 2em; } }
.ily-gallery { position: relative; margin-bottom: 10px; }
.ily-strip {
	display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
	-webkit-overflow-scrolling: touch; scrollbar-width: thin; padding-bottom: 4px;
}
.ily-strip::-webkit-scrollbar { height: 6px; }
.ily-strip::-webkit-scrollbar-thumb { background: rgba(17, 16, 16, .18); border-radius: 999px; }
/* each slide ~72% wide so the NEXT one peeks in at the right edge — that peek is
   the affordance that tells you it scrolls. Snap to the start so the peek stays
   on the right. */
.ily-slide {
	flex: 0 0 72%; scroll-snap-align: start; margin: 0; aspect-ratio: 1; border-radius: 14px;
	background: var(--wash); overflow: hidden; display: flex; align-items: center; justify-content: center;
}
.ily-slide:last-child { margin-right: 28%; } /* let the last slide reach the start edge */
.ily-slide-img { width: 100%; height: 100%; object-fit: contain; display: block; }

/* colour swatches (shirt only) */
.ily-swatches { display: flex; flex-wrap: wrap; gap: 16px; margin: 16px 2px 4px; }
.ily-swatch { display: inline-flex; flex-direction: column; align-items: center; gap: 7px; background: none; border: 0; padding: 4px; cursor: pointer; font-size: 12px; color: var(--ink); }
.ily-swatch-dot { width: 34px; height: 34px; border-radius: 50%; box-shadow: 0 0 0 1px rgba(17, 16, 16, .14); transition: box-shadow .16s ease, transform .16s ease; }
.sw-white .ily-swatch-dot { background: #fff; box-shadow: 0 0 0 1px #cdc6cc; }
.sw-black .ily-swatch-dot { background: #111010; }
.sw-dark-heather-gray .ily-swatch-dot { background: #6f6c70; }
.ily-swatch-label { font-family: var(--font-body); letter-spacing: .01em; color: var(--muted); }
.ily-swatch:hover .ily-swatch-dot { transform: translateY(-1px); }
.ily-swatch.is-selected .ily-swatch-dot { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--pink); }
.ily-swatch.is-selected .ily-swatch-label { color: var(--ink); font-weight: 700; }
.ily-swatch:focus-visible { outline: none; }
.ily-swatch:focus-visible .ily-swatch-dot { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--pink-2); }

.ily-hidden-row { display: none !important; }

/* ---- REVIEWS + description as SECTIONS (not tabs) ------------------------- */
.woocommerce div.product .woocommerce-tabs ul.tabs { display: none; } /* tab nav hidden; panels shown stacked */
.woocommerce div.product .woocommerce-tabs .panel { display: block !important; max-width: 820px; }
.ily-section-head { font-family: var(--font-heading); font-weight: 900; font-size: clamp(20px, 2.4vw, 26px); color: var(--ink); margin: 8px 0 14px; padding-top: 26px; border-top: 1px solid var(--line); }

/* ---- MOBILE ---------------------------------------------------------------- */
@media (max-width: 768px) {
	/* restore side padding — content was running to the screen edge */
	.single-product .site-content .ast-container,
	.woocommerce.archive .site-content .ast-container,
	.woocommerce-cart .site-content .ast-container,
	.woocommerce-checkout .site-content .ast-container { padding-left: 16px; padding-right: 16px; }
	.woocommerce div.product .summary, .woocommerce div.product .woocommerce-tabs { padding-left: 2px; padding-right: 2px; }
	/* add-to-cart full width, generous pill */
	body .single_add_to_cart_button { width: 100%; padding: 16px 24px; font-size: 13px; }
	.woocommerce div.product form.cart { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
	.woocommerce div.product form.cart div.quantity { flex: 0 0 auto; }
	.woocommerce div.product form.cart .single_add_to_cart_button { flex: 1 1 100%; }
}

/* ---- MOBILE-ONLY STICKY BUY BAR ------------------------------------------- */
.ily-sticky { display: none; }
@media (max-width: 768px) {
	.ily-sticky:not([hidden]) {
		display: flex; align-items: center; justify-content: space-between; gap: 14px;
		position: fixed; left: 0; right: 0; bottom: 0; z-index: 999;
		padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
		background: rgba(255, 255, 255, .97); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
		border-top: 1px solid var(--line); box-shadow: 0 -8px 24px rgba(17, 16, 16, .10);
	}
	.ily-sticky-price { font-family: var(--font-heading); font-weight: 900; font-size: 20px; color: var(--ink); }
	.ily-sticky-price .price, .ily-sticky-price del, .ily-sticky-price ins { color: var(--ink); }
	.ily-sticky-add { background: var(--pink); color: #fff; border: 0; border-radius: 999px; padding: 13px 26px; font-family: var(--font-mono); font-weight: 700; font-size: 13px; text-transform: uppercase; letter-spacing: .06em; cursor: pointer; transition: background .16s ease; }
	.ily-sticky-add:hover { background: var(--pink-2); }
	.ily-sticky-add:active { background: #e600b8; }
	.ily-sticky-add:disabled, .ily-sticky-add.disabled { opacity: .45; cursor: not-allowed; }
	.single-product #main, .single-product .site-content { padding-bottom: 84px; }
}

@media (prefers-reduced-motion: reduce) {
	.ily-strip { scroll-behavior: auto; }
	.ily-swatch-dot, .ily-sticky-add, body.woocommerce-page a.button { transition: none; }
}