/**
 * Product carousel styling — Swiper shell around the native
 * woocommerce/product-collection block. Pairs with assets/js/product-carousel.js
 * and the enqueued swiper-bundle. Mostly leaves the product item itself alone
 * (image / title / price stay whatever Blocksy + WooCommerce already render)
 * — the one deliberate exception is the "Add to cart" / "View cart" button
 * styling at the bottom of this file (icons + collapsing the two into one),
 * which pairs with the MutationObserver in product-carousel.js.
 */

.eow-product-carousel.swiper,
.kana-product-carousel.swiper {
	position: relative;
	overflow: hidden;
	padding-bottom: 44px; /* room for pagination dots below the cards */
}

/* Before Swiper initialises (or if it fails to load), the block is still the
   plain WooCommerce grid — this only takes effect once .swiper-wrapper exists. */
.eow-product-carousel .swiper-wrapper,
.kana-product-carousel .swiper-wrapper {
	align-items: stretch;
}

/* `woocommerce/product-template` renders its <ul> with its own `is-flex-container`
   / `columns-N` classes (wrapped grid, fixed per-item width). product-carousel.js
   strips those classes in ensureWrapper() before handing the element to Swiper,
   which is the primary fix for the "變成 N x M 排列" symptom — that way there's
   nothing left to out-rank, and Swiper's own inline slide widths are never
   fought by an `!important` rule here. `flex-wrap`/`gap` below are just a
   defensive fallback (not fighting anything once the classes are stripped;
   `!important` here is safe because Swiper never sets these two inline).
   Spacing between slides is handled by Swiper's own `spaceBetween` (the
   `gap-<px>` class token), so any leftover WooCommerce flex `gap` is zeroed
   to avoid doubling up. Slide *width* is deliberately left alone — that must
   stay whatever Swiper's JS computes and sets inline for the configured
   `slidesPerView`. */
.eow-product-carousel .swiper-wrapper,
.kana-product-carousel .swiper-wrapper {
	flex-wrap: nowrap !important;
	gap: 0 !important;
}

/* A product item's inner blocks (image / title / price / button) render as
   SIBLING elements directly inside the <li> — flex-direction must stay
   `column` here or they'd lay out side by side instead of stacked.
   `position:relative` makes the <li> itself the positioning context for the
   out-of-stock badge below (an absolutely-positioned corner badge, not a
   sibling in the normal flex flow). */
.eow-product-carousel .swiper-slide,
.kana-product-carousel .swiper-slide {
	height: auto;
	display: flex;
	flex-direction: column;
	position: relative;
}

/* The <li> itself becomes .swiper-slide (see ensureWrapper() in product-carousel.js);
   whichever WooCommerce version's item class it also carries, it should fill the slide. */
.eow-product-carousel .swiper-slide.wc-block-product,
.eow-product-carousel .swiper-slide.wp-block-post,
.kana-product-carousel .swiper-slide.wc-block-product,
.kana-product-carousel .swiper-slide.wp-block-post {
	width: 100%;
}

/* woocommerce/product-image already renders with an inline `aspect-ratio` +
   `object-fit:cover` on the <img> itself (server-side, via the block's own
   attributes), so the photo fills its own box edge-to-edge with no gaps by
   default. This just reinforces the same intent for the *box* the image sits
   in — full slide width, no stray max-width — so nothing about being inside
   a flex slide (as opposed to WooCommerce's normal grid) can visually shrink
   or letterbox it. */
.eow-product-carousel .swiper-slide .wc-block-components-product-image,
.kana-product-carousel .swiper-slide .wc-block-components-product-image {
	width: 100%;
}

.eow-product-carousel .swiper-slide .wc-block-components-product-image a,
.kana-product-carousel .swiper-slide .wc-block-components-product-image a {
	width: 100%;
}

.eow-product-carousel .swiper-slide .wc-block-components-product-image img,
.kana-product-carousel .swiper-slide .wc-block-components-product-image img {
	width: 100%;
	height: auto;
	object-fit: cover;
}

/* ---- Navigation arrows (same treatment as the hero slider) ---- */
.eow-product-carousel .swiper-button-prev,
.eow-product-carousel .swiper-button-next,
.kana-product-carousel .swiper-button-prev,
.kana-product-carousel .swiper-button-next {
	width: 40px;
	height: 40px;
	margin-top: -20px;
	border-radius: 50%;
	color: #fff;
	background: rgba(0, 0, 0, 0.28);
	backdrop-filter: blur(2px);
	transition: background 0.25s ease, transform 0.25s ease;
}

.eow-product-carousel .swiper-button-prev:hover,
.eow-product-carousel .swiper-button-next:hover,
.kana-product-carousel .swiper-button-prev:hover,
.kana-product-carousel .swiper-button-next:hover {
	background: rgba(0, 0, 0, 0.55);
	transform: scale(1.08);
}

.eow-product-carousel .swiper-button-prev::after,
.eow-product-carousel .swiper-button-next::after,
.kana-product-carousel .swiper-button-prev::after,
.kana-product-carousel .swiper-button-next::after {
	font-size: 16px;
	font-weight: 700;
}

.eow-product-carousel .swiper-button-prev,
.kana-product-carousel .swiper-button-prev { left: 4px; }
.eow-product-carousel .swiper-button-next,
.kana-product-carousel .swiper-button-next { right: 4px; }

/* ---- Pagination bullets ---- */
/* Swiper's own base CSS gives the pagination *container* `width:100%` (it
   spans the full carousel, not just the space its few small dots visually
   take up) and `position:absolute`. Sitting near the bottom of `root`, that
   full-width invisible box can end up overlapping whatever's at the bottom of
   the product card underneath it — the "Add to cart" button — and silently
   swallow clicks meant for it (hit-testing resolves to the pagination
   container, not the button under it, so nothing even reaches the button:
   no console error, no network request — exactly that symptom). `pointer-
   events:none` on the container lets clicks pass straight through to
   whatever's beneath everywhere except the dots themselves, which get
   `pointer-events:auto` back so they stay clickable (Swiper's `clickable:true`
   pagination still works). */
.eow-product-carousel .swiper-pagination,
.kana-product-carousel .swiper-pagination {
	bottom: 4px;
	pointer-events: none;
}

.eow-product-carousel .swiper-pagination-bullet,
.kana-product-carousel .swiper-pagination-bullet {
	width: 8px;
	height: 8px;
	opacity: 0.4;
	pointer-events: auto;
	transition: opacity 0.25s ease, transform 0.25s ease;
}

.eow-product-carousel .swiper-pagination-bullet-active,
.kana-product-carousel .swiper-pagination-bullet-active {
	opacity: 1;
	transform: scale(1.25);
}

@media (max-width: 781px) {
	.eow-product-carousel .swiper-button-prev,
	.eow-product-carousel .swiper-button-next,
	.kana-product-carousel .swiper-button-prev,
	.kana-product-carousel .swiper-button-next {
		width: 32px;
		height: 32px;
		margin-top: -16px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.eow-product-carousel .swiper-slide,
	.eow-product-carousel .swiper-button-prev,
	.eow-product-carousel .swiper-button-next,
	.eow-product-carousel .swiper-pagination-bullet,
	.kana-product-carousel .swiper-slide,
	.kana-product-carousel .swiper-button-prev,
	.kana-product-carousel .swiper-button-next,
	.kana-product-carousel .swiper-pagination-bullet {
		transition: none !important;
	}
}

/* ---- "Add to cart" / "View cart" button ----
   WooCommerce always renders BOTH as separate sibling elements inside
   .wc-block-components-product-button — the <button> (its own text reactively
   swaps to an "N in cart" state) AND a <span hidden>…<a class="added_to_cart
   wc_forward"> (initially hidden, un-hidden once the Interactivity API's own
   `state.displayViewCart` becomes true). With both visible at once they stack
   as two separate block-level controls. product-carousel.js watches that
   span's `hidden` attribute via MutationObserver and mirrors it onto this
   `.eow-pc-in-cart` class on the wrapper, so only one shows at a time here. */
.eow-product-carousel .wc-block-components-product-button.eow-pc-in-cart > .wc-block-components-product-button__button,
.kana-product-carousel .wc-block-components-product-button.eow-pc-in-cart > .wc-block-components-product-button__button {
	display: none;
}

.eow-product-carousel .wc-block-components-product-button__button,
.eow-product-carousel .wc-block-components-product-button .added_to_cart.wc_forward,
.kana-product-carousel .wc-block-components-product-button__button,
.kana-product-carousel .wc-block-components-product-button .added_to_cart.wc_forward {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	/* The "Add to cart" <button>/"查看內容" <a> both carry WordPress's
	   `has-small-font-size` preset class (13px, !important); the "View cart"
	   <a class="added_to_cart wc_forward"> is a plain WooCommerce element
	   with no font-size class at all, so it was falling back to a larger
	   inherited size — that mismatch, not a deliberate size difference, is
	   why "查看購物車" looked bigger. Setting the same value on both here
	   (needs !important to beat that preset class) unifies every state
	   ("加入購物車" / "查看內容" / "查看購物車") to one consistent size. */
	font-size: clamp(15px, 1.6vw, 17px) !important;
}

/* Cart icon before "Add to cart" / alert icon before "View cart". Two CSS-
   only techniques (mask-image, then plain `content: "🛒"`) both turned out
   invisible for reasons that couldn't be confirmed without a browser to
   inspect in — product-carousel.js now inserts a real inline `<svg>` as an
   actual child node instead (see iconSpan() there), which has nothing left
   to silently get swallowed by. This just sizes/aligns it; the icon itself
   already draws in `currentColor` so it tracks the button's own text color. */
.eow-product-carousel .eow-pc-btn-icon,
.kana-product-carousel .eow-pc-btn-icon {
	display: inline-flex;
	flex: 0 0 auto;
	width: 15px;
	height: 15px;
}

.eow-product-carousel .eow-pc-btn-icon svg,
.kana-product-carousel .eow-pc-btn-icon svg {
	display: block;
	width: 100%;
	height: 100%;
}

/* ---- Optional button / sale-badge colours (Inspector panel, product-
   carousel type — "商品輪播顏色") ----
   `--eow-pc-btn-bg` / `--eow-pc-btn-color` / `--eow-pc-badge-bg` /
   `--eow-pc-badge-color` are written as inline custom properties on the
   wrapper by inspector-controls.js's componentStyle() — but ONLY when that
   specific colour is actually configured, each paired with its own
   `.has-btn-bg-color` / `.has-btn-text-color` / `.has-badge-bg-color` /
   `.has-badge-text-color` modifier class (see componentClasses() there) —
   one class per property, not one combined "any colour set" class, so
   configuring only the background never also resets the text colour to
   `initial` just because that attribute happens to be empty. Gating on the
   class — not a `var(..., initial)` fallback — means an unconfigured colour
   never touches these rules at all: with nothing configured, the button/
   badge stay exactly what Blocksy/WooCommerce already render. */
.eow-product-carousel.has-btn-bg-color .wc-block-components-product-button__button,
.kana-product-carousel.has-btn-bg-color .wc-block-components-product-button__button,
.eow-product-carousel.has-btn-bg-color .wc-block-components-product-button .added_to_cart.wc_forward,
.kana-product-carousel.has-btn-bg-color .wc-block-components-product-button .added_to_cart.wc_forward {
	background-color: var(--eow-pc-btn-bg);
}

.eow-product-carousel.has-btn-text-color .wc-block-components-product-button__button,
.kana-product-carousel.has-btn-text-color .wc-block-components-product-button__button,
.eow-product-carousel.has-btn-text-color .wc-block-components-product-button .added_to_cart.wc_forward,
.kana-product-carousel.has-btn-text-color .wc-block-components-product-button .added_to_cart.wc_forward {
	color: var(--eow-pc-btn-color);
}

.eow-product-carousel.has-badge-bg-color .wc-block-components-product-sale-badge,
.kana-product-carousel.has-badge-bg-color .wc-block-components-product-sale-badge {
	background-color: var(--eow-pc-badge-bg);
	border-color: var(--eow-pc-badge-bg);
}

.eow-product-carousel.has-badge-text-color .wc-block-components-product-sale-badge,
.kana-product-carousel.has-badge-text-color .wc-block-components-product-sale-badge {
	color: var(--eow-pc-badge-color);
}

/* ---- Out-of-stock badge (woocommerce/product-stock-indicator) ----
   WooCommerce's own default styling for this block is a plain text line
   ("已售完" / "In stock" / …) sitting in normal document flow, not a corner
   badge — the old Elementor carousel had a dedicated "售完" corner label, so
   this turns it into one to match. Only the `--out-of-stock` modifier is
   shown as a badge; every other stock state (in stock, low stock, …) stays
   hidden here, same as the old widget which only ever showed a badge for
   "sold out", nothing else. Colour is a fixed default (not wired to the
   Inspector panel's "badge" colour, which is the SALE badge's colour and
   was a visually distinct tone — #A8977B tan — from the old design's own
   out-of-stock grey) — ask if this should get its own colour pickers too. */
.eow-product-carousel .wc-block-components-product-stock-indicator,
.kana-product-carousel .wc-block-components-product-stock-indicator {
	display: none;
}

.eow-product-carousel .wc-block-components-product-stock-indicator--out-of-stock,
.kana-product-carousel .wc-block-components-product-stock-indicator--out-of-stock {
	display: inline-block;
	position: absolute;
	top: 8px;
	left: 8px;
	z-index: 2;
	margin: 0;
	padding: 0.25em 0.75em;
	background-color: #7a7a7ab3;
	color: #ffffff;
	font-size: 12px;
	font-weight: 600;
	border-radius: 4px;
}

/* ---- Title / price type scale ----
   Both were on the theme's fixed preset sizes (title "medium" = 20px, price
   "small" = 13px) — title a bit smaller, price a bit larger, and both fluid
   (scale with the *page's* width via `vw`, not a fixed px per breakpoint) so
   the two type sizes keep the same relative proportion to each other as the
   viewport — and with it the whole multi-column carousel — grows or shrinks,
   not just jump at the perview-* breakpoints. `!important` is needed because
   WordPress's own `.has-medium-font-size` / `.has-small-font-size` preset
   utility classes are themselves `!important` (global-styles output). */
.eow-product-carousel .wp-block-post-title,
.kana-product-carousel .wp-block-post-title {
	font-size: clamp(15px, 1.6vw, 18px) !important;
}

.eow-product-carousel .wc-block-components-product-price,
.kana-product-carousel .wc-block-components-product-price {
	font-size: clamp(14px, 1.5vw, 16px) !important;
}

/* ---- Button row alignment ----
   Product titles run 1-3 lines depending on the product, which otherwise
   pushes each card's "Add to cart" button to a different height within the
   row. `.swiper-wrapper{align-items:stretch}` (above) already makes every
   slide in a row the same height; `margin-top:auto` on the last flex child
   (the button wrapper) then pushes it down to that same shared bottom edge
   on every card, regardless of how many lines the title/price above it took. */
.eow-product-carousel .swiper-slide .wc-block-components-product-button,
.kana-product-carousel .swiper-slide .wc-block-components-product-button {
	margin-top: auto;
}

/* ---- Homepage section headings ("新品現貨"/"花藝課程"/"開幕盆花") ----
   Blocksy's own dynamic global CSS sets a single, non-responsive `h2 {
   --theme-font-size: 35px }` — same 35px on phone and on a 4K desktop, no
   media-query variant at all. `.eow-section-heading` (added via the
   heading block's own `className`, not global — this only ever applies to
   headings that opt in) replaces that with a `clamp()` so the size actually
   shrinks on narrower screens and grows back on wide ones, instead of
   sitting at one fixed size everywhere: ~21.5px on a phone (375px) up to
   the original 34px close to desktop (1400px+), ~26px on a typical tablet
   in between — not a hardcoded value per breakpoint, so it holds the same
   proportion at any width in between too. */
.eow-section-heading {
	font-size: clamp(20px, 1.2vw + 17px, 34px);
	/* Blocksy applies a generous `margin-block-end` to every heading
	   (`calc(1 * (.3em + 10px))`, ~1.5em+10px total with the theme's own
	   content-spacing on top) — that, not the paragraph below, is what was
	   making the gap to "剛落下的花緒…" / "AUBE, TQUK…" feel oversized.
	   Overriding it here directly is more reliable than fighting it from
	   the paragraph's side. */
	margin-bottom: 6px;
}

/* Subtitle line right under a section heading ("剛落下的花緒…" /
   "AUBE, TQUK…") — smaller and pulled up snug against the heading instead
   of the theme's normal block-gap spacing (which is sized for spacing
   between unrelated paragraphs, not a heading+subtitle pair). */
.eow-section-subtitle {
	margin-top: 0;
	font-size: clamp(13px, 1vw + 10px, 15px);
}