/*
 * Plonk Shop — storefront styles.
 *
 * Extracted from plonk-variation-ui-v7.php into a real stylesheet. The
 * accent palette is set by plonk_accent() in PHP, written out as the
 * custom properties below via wp_add_inline_style(); these are fallbacks.
 */

:root {
	--plonk-accent-line: #1b4fa8;
	--plonk-accent-fill: #f2f6fd;
	--plonk-accent-soft: #e7effd;
}
.plonk-formats { margin-top: 12px; }
.plonk-swatches { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.plonk-swatches.is-single { display: none; }
.plonk-swatch {
	display: inline-flex; align-items: center; gap: 6px;
	padding: 5px 10px; border: 1px solid rgba(0,0,0,.15); border-radius: 999px;
	background: transparent; cursor: pointer; font-size: 13px; line-height: 1.2;
}
.plonk-swatch.is-active { border-color: currentColor; border-width: 2px; padding: 4px 9px; }
.plonk-swatch.is-sold-out { opacity: .4; cursor: not-allowed; text-decoration: line-through; }
.plonk-dot { width: 12px; height: 12px; border-radius: 50%; border: 1px solid rgba(0,0,0,.2); }
.plonk-swatch-count {
	min-width: 17px; height: 17px; padding: 0 5px; border-radius: 999px;
	background: var(--plonk-accent-line); color: #fff;
	font-size: 11px; font-weight: 600; line-height: 17px; text-align: center;
}
.plonk-swatch-count[hidden] { display: none; }
.plonk-group { display: flex; flex-direction: column; gap: 8px; }
.plonk-group[hidden] { display: none; }
.plonk-label { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.plonk-format-btn svg { flex-shrink: 0; width: 18px; height: 18px; }

/* A pack row lives inside a product card whose width has nothing to do
   with the viewport — a four-column grid on a wide desktop gives a
   narrower card than a phone does. So the row reflows on the CARD's
   width, which is what a container query is for. */
.plonk-formats { container-type: inline-size; container-name: plonk-card; }

/* Safe by default: the savings pill sits ABOVE the price rather than
   beside it. Three things competing for one line — pack name, saving,
   price — is what pushed "Case of 6" onto a second line and doubled the
   row height. Height is cheap; a wrapped name is not.

   The single-line layout is then restored only when the card has proven
   it has room, so a browser without container queries gets the safe
   version rather than the broken one. */
.plonk-price {
	display: inline-flex; flex-direction: column; align-items: flex-end;
	gap: 2px; white-space: nowrap; font-weight: 600;
}

@container plonk-card (min-width: 340px) {
	.plonk-price { flex-direction: row; align-items: center; gap: 8px; }
}

/* Last resort at genuinely tiny cards: clip the pack name rather than
   let it wrap, which is the failure this whole block exists to prevent. */
.plonk-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* An in-cart row carries a stepper as well, so on the narrowest cards
   the pill is the thing that goes. */
@container plonk-card (max-width: 300px) {
	.plonk-format-row.is-in-cart .plonk-save { display: none; }
}
.plonk-price del { opacity: .55; font-weight: 400; margin-right: 4px; }

.plonk-save {
	display: inline-block; padding: 2px 8px; border-radius: 999px;
	background: var(--plonk-accent-soft); color: var(--plonk-accent-line);
	font-size: 11px; font-weight: 500; line-height: 1.6; white-space: nowrap;
}
.plonk-save .woocommerce-Price-amount { color: inherit; font-weight: 500; }
/* The pill and the in-cart fill are the same blue — lift it to white
   so it stays legible once the row is filled. */
.plonk-format-row.is-in-cart .plonk-save { background: #fff; }

/* The row owns the chrome; the anchor is a transparent child, because
   a stepper button cannot legally live inside an anchor. */
.plonk-format-row {
	position: relative; display: flex; align-items: stretch; width: 100%;
	background-color: #fff; border: 1px solid rgba(0,0,0,.18); border-radius: 4px;
	transition: background-color .15s ease, border-color .15s ease;
}
.plonk-format-row:hover { background-color: #fbfbfb; border-color: rgba(0,0,0,.24); }
.plonk-format-row.is-in-cart {
	border-color: var(--plonk-accent-line); background-color: var(--plonk-accent-fill);
}
.plonk-format-row.is-in-cart:hover { background-color: var(--plonk-accent-fill); }
.plonk-format-row.is-pending { border-color: rgba(0,0,0,.3); background-color: #fff8e6; }

body .plonk-format-btn,
body .plonk-format-btn:link,
body .plonk-format-btn:visited {
	display: flex; align-items: center; justify-content: space-between;
	gap: 12px; flex: 1 1 auto; min-width: 0;
	margin: 0; padding: 10px 14px;
	text-align: left; line-height: 1.3; text-decoration: none;
	background: transparent; color: #111; border: 0; border-radius: 4px;
	font-weight: 500;
}
body .plonk-format-btn:hover,
body .plonk-format-btn:focus { background: transparent; color: #111; }
body .plonk-format-row.is-in-cart .plonk-format-btn { color: var(--plonk-accent-line); padding-right: 4px; }
body .plonk-format-btn:focus-visible { outline: 2px solid var(--plonk-accent-line); outline-offset: -2px; }

.plonk-add-hint {
	display: inline-flex; align-items: center; flex: 0 0 auto;
	color: rgba(0,0,0,.35);
}
.plonk-format-row.is-in-cart .plonk-add-hint { display: none; }

.plonk-stepper { display: none; align-items: center; gap: 2px; flex: 0 0 auto; padding-right: 8px; }
.plonk-format-row.is-in-cart .plonk-stepper { display: flex; }
.plonk-step {
	display: inline-flex; align-items: center; justify-content: center;
	width: 30px; height: 30px; padding: 0; margin: 0;
	background: #fff; color: var(--plonk-accent-line);
	border: 1px solid var(--plonk-accent-soft); border-radius: 6px; cursor: pointer;
}
.plonk-step:hover { border-color: var(--plonk-accent-line); }
.plonk-step:focus-visible { outline: 2px solid var(--plonk-accent-line); outline-offset: 1px; }
.plonk-qty {
	min-width: 20px; text-align: center;
	font-size: 14px; font-weight: 600; color: var(--plonk-accent-line); font-variant-numeric: tabular-nums;
}

/* WooCommerce appends its own "View cart" link after any button it is
   handed on added_to_cart. We hand it a detached node, but a theme or
   a stale cached page can still produce one. */
.plonk-formats .added_to_cart { display: none !important; }

body .plonk-cart-link,
body .plonk-cart-link:link,
body .plonk-cart-link:visited {
	display: flex; align-items: center; justify-content: space-between; gap: 12px;
	margin-top: 10px; padding: 8px 2px 0;
	border-top: 1px solid rgba(0,0,0,.1); border-radius: 0;
	font-size: 13px; line-height: 1.3; text-decoration: none; color: #111;
}
/* Must out-specify the :link and :visited variants above, not just the
   bare class. `body .plonk-cart-link:link` is (0,2,1) and beat a plain
   `.plonk-cart-link[hidden]` at (0,2,0) — and :link matches every
   anchor with an href, which this one always has. The row stayed on
   screen with an empty cart, showing a divider and a chevron and
   nothing else. */
body .plonk-cart-link[hidden],
body .plonk-cart-link[hidden]:link,
body .plonk-cart-link[hidden]:visited { display: none; }
.plonk-cart-right { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.plonk-cart-count { color: var(--plonk-accent-line); }
body .plonk-cart-link:hover .plonk-cart-count { text-decoration: underline; }
.plonk-cart-sum { font-weight: 600; }
.plonk-cart-chevron { flex-shrink: 0; color: rgba(0,0,0,.4); }
body .plonk-cart-link:hover .plonk-cart-chevron { color: var(--plonk-accent-line); }
body .plonk-cart-link:focus-visible {
	outline: 2px solid var(--plonk-accent-line); outline-offset: 2px; border-radius: 3px;
}

.plonk-note {
	display: block; padding: 4px 14px 0; font-size: 12px; color: #8a1c1c;
}

/* ---- the crate bar ---------------------------------------------- */

.plonk-bar {
	position: fixed; left: 0; right: 0; bottom: 0; z-index: 9990;
	background: #fff; border-top: 1px solid rgba(0,0,0,.12);
	box-shadow: 0 -2px 14px rgba(0,0,0,.08);
	padding-bottom: env(safe-area-inset-bottom, 0px);
}
.plonk-bar[hidden] { display: none; }
.plonk-bar-inner {
	display: flex; align-items: center; gap: 22px;
	max-width: 1180px; margin: 0 auto; padding: 16px 20px;
}

/* Crates scroll rather than shrink — a shopper with four cases still
   sees four real crates, with the one being filled kept in view. */
.plonk-crates {
	display: flex; align-items: flex-end; gap: 12px; flex: 0 1 auto;
	overflow-x: auto; scrollbar-width: none; padding-bottom: 2px;
}
.plonk-crates::-webkit-scrollbar { display: none; }

.plonk-crate {
	display: grid; grid-template-columns: repeat(3, 22px);
	gap: 6px; padding: 8px; flex: 0 0 auto;
	border: 1px solid rgba(0,0,0,.22); border-radius: 5px;
	background: repeating-linear-gradient(90deg, #faf7f2 0 7px, #f2ede4 7px 14px);
	box-shadow: inset 0 1px 0 rgba(255,255,255,.7);
}

.plonk-slot { display: block; width: 22px; height: 46px; }
.plonk-bottle { display: block; width: 100%; height: 100%; overflow: visible; }
.plonk-bottle-shape {
	fill: none; stroke: rgba(0,0,0,.3); stroke-width: 1.4; stroke-dasharray: 3 2.5;
}
.plonk-bottle-label, .plonk-bottle-cap { fill: none; }
.plonk-slot.is-full .plonk-bottle-shape {
	fill: var(--plonk-bottle, #6b1d2c);
	stroke: rgba(0,0,0,.32); stroke-width: 1; stroke-dasharray: none;
}
.plonk-slot.is-full .plonk-bottle-label { fill: rgba(255,255,255,.88); }
.plonk-slot.is-full .plonk-bottle-cap { fill: rgba(0,0,0,.35); }
.plonk-slot.just-filled { animation: plonk-pour .38s ease-out; }

@keyframes plonk-pour {
	0%   { transform: translateY(-8px) scale(.88); opacity: .3; }
	60%  { transform: translateY(0) scale(1.07); opacity: 1; }
	100% { transform: translateY(0) scale(1); opacity: 1; }
}

.plonk-bar-copy { display: flex; flex-direction: column; gap: 3px; flex: 1 1 auto; min-width: 0; }
.plonk-bar-head { font-size: 20px; font-weight: 600; line-height: 1.2; }
.plonk-bar-sub { font-size: 15px; color: rgba(0,0,0,.62); line-height: 1.3; }
.plonk-bar.is-complete .plonk-bar-head { color: #1a6b3c; }

.plonk-bar-actions { display: flex; align-items: center; gap: 16px; flex: 0 0 auto; }
.plonk-bar-total { font-size: 20px; font-weight: 700; white-space: nowrap; }
body .plonk-bar-cta,
body .plonk-bar-cta:link,
body .plonk-bar-cta:visited {
	display: inline-flex; align-items: center; justify-content: center;
	min-height: 52px; padding: 0 26px; margin: 0;
	background: var(--plonk-accent-line); color: #fff;
	border: 0; border-radius: 4px; font-size: 16px; font-weight: 600;
	text-decoration: none; white-space: nowrap;
}
body .plonk-bar-cta:hover { background: #143c80; color: #fff; }
body .plonk-bar-cta:focus-visible { outline: 2px solid #111; outline-offset: 2px; }

.plonk-cart-note { display: block; font-size: 11px; color: rgba(0,0,0,.55); }

/* Keep the bar off the page footer. Height is measured and written
   back by JS, so a wrapped bar on a small screen still clears. */
body.plonk-has-bar { padding-bottom: var(--plonk-bar-h, 96px); }

@media (max-width: 900px) {
	.plonk-bar-inner { gap: 14px; padding: 12px 14px; }
	.plonk-bar-head { font-size: 17px; }
	.plonk-bar-sub { font-size: 13px; }
	.plonk-bar-total { font-size: 17px; }
	.plonk-crate { grid-template-columns: repeat(3, 15px); gap: 4px; padding: 6px; }
	.plonk-slot { width: 15px; height: 32px; }
	body .plonk-bar-cta { min-height: 46px; padding: 0 18px; font-size: 15px; }
}

@media (max-width: 600px) {
	/* Two rows: the crate being filled and the running total on top,
	   message below. The total stays on screen at every width. */
	.plonk-bar { padding-bottom: max(env(safe-area-inset-bottom, 0px), 0px); }
	.plonk-bar-inner { flex-wrap: wrap; gap: 8px 10px; padding: 10px 14px; }

	/* The actions cluster is dissolved so its three children become
	   flex items of the bar itself. Otherwise the group cannot break,
	   and a long fill-button label pushed "View cart" off the side of
	   the screen rather than wrapping. */
	.plonk-bar-actions { display: contents; }

	.plonk-crates { order: 1; flex: 0 0 auto; overflow: visible; gap: 8px; }
	.plonk-bar-total { order: 2; margin-left: auto; }
	body .plonk-bar-cta { order: 3; }

	/* Forces the second row, so the total and View cart always finish
	   the first one together. */
	.plonk-bar-inner::after {
		content: "";
		order: 4;
		flex: 0 0 100%;
		height: 0;
	}

	/* flex-basis 0, not auto: the copy has to yield to the button beside
	   it, or its natural width claims the whole row and pushes the
	   button onto a third one. */
	.plonk-bar-copy { order: 5; flex: 1 1 0; min-width: 0; }
	.plonk-bar .plonk-fill-open { order: 6; flex: 0 0 auto; margin-left: 8px; align-self: center; }
	.plonk-bar-head { font-size: 14px; line-height: 1.25; }
	.plonk-bar-sub { font-size: 11.5px; }
	.plonk-bar-total { font-size: 16px; }
	.plonk-crate { grid-template-columns: repeat(3, 11px); gap: 3px; padding: 4px; }
	.plonk-slot { width: 11px; height: 21px; }
	body .plonk-bar-cta { min-height: 44px; padding: 0 16px; font-size: 14px; }

	/* One crate on a phone. Three crates of six is eighteen icons and
	   most of the bar, and the shopper cannot count them at that size
	   anyway — so keep the crate actually being filled and turn the
	   completed ones into a number, which is what they were being read
	   as. The copy underneath still names the total.  */
	.plonk-crates .plonk-crate:not(:last-child) { display: none; }

	.plonk-crates[data-cases]:not([data-cases="0"])::before {
		content: attr(data-cases) " full";
		align-self: center;
		flex: 0 0 auto;
		padding: 3px 8px;
		border-radius: 999px;
		background: rgba(0, 0, 0, .06);
		font-size: 11px;
		font-weight: 600;
		white-space: nowrap;
		color: rgba(0, 0, 0, .66);
	}

	.plonk-bar.is-complete .plonk-crates[data-cases]::before {
		background: rgba(26, 107, 60, .12);
		color: #1a6b3c;
	}
}

@media (max-width: 480px) {
	/* Price stacking and the in-cart pill are handled by the container
	   queries above, which respond to the card rather than the screen.
	   What is left here is genuinely about the device: a 44px touch
	   target for a thumb. */
	.plonk-step { width: 40px; height: 40px; }
}

@media (prefers-reduced-motion: reduce) {
	.plonk-format-row { transition: none; }
	.plonk-slot.just-filled { animation: none; }
}