/* ==========================================================================
   AECS Gallery + Product Block
   Uses the --aecs-* CSS variables defined by the Elementor Kit tab so any
   Site Settings tweak propagates without code changes.
   ========================================================================== */

/* Gallery -----------------------------------------------------------------*/
.aecs-gallery {
	position: relative;
	display: block;
	width: 100%;
	max-width: 100%;
	margin: 0 0 1.5rem;
	outline: none;
}
.aecs-gallery__viewport {
	position: relative;
	overflow: hidden;
	border-radius: var(--aecs-card-radius, 8px);
	background: #fafafa;
	/* Reserve a sensible landscape aspect ratio so there's no layout shift
	   before the image decodes. `large` images are typically 3:2 landscape. */
	aspect-ratio: var(--aecs-gallery-aspect, 3 / 2);
}
.aecs-gallery__slide {
	display: flex;
	align-items: center;
	justify-content: center;
}
.aecs-gallery__img {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
}
.aecs-gallery__track {
	display: flex;
	margin: 0;
	padding: 0;
	list-style: none;
	transition: transform .35s cubic-bezier(.4, 0, .2, 1);
	will-change: transform;
}
.aecs-gallery__slide {
	flex: 0 0 100%;
	min-width: 0;
	display: block;
	line-height: 0;
}
.aecs-gallery__img {
	display: block;
	width: 100%;
	height: auto;
	max-width: 100%;
	user-select: none;
	-webkit-user-drag: none;
}

.aecs-gallery__track { touch-action: pan-y; cursor: grab; user-select: none; }
.aecs-gallery__track:active { cursor: grabbing; }

/* Round overlay arrows — dark by default, always visible on desktop. */
button.aecs-gallery__nav {
	position: absolute !important;
	top: 50%;
	transform: translateY(-50%);
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	margin: 0;
	border: none;
	background: var(--aecs-gallery-nav-bg, rgba(0, 0, 0, .55));
	color: var(--aecs-gallery-nav-color, #fff);
	border-radius: var(--aecs-gallery-nav-radius, 9999px);
	box-shadow: 0 2px 8px rgba(0, 0, 0, .25);
	cursor: pointer;
	z-index: 5;
	opacity: 1 !important;
	visibility: visible !important;
	transition: background-color .15s, transform .15s;
}
button.aecs-gallery__nav:hover,
button.aecs-gallery__nav:focus,
button.aecs-gallery__nav:focus-visible {
	background: var(--aecs-gallery-nav-bg-hover, rgba(0, 0, 0, .8));
	color: var(--aecs-gallery-nav-color, #fff);
	outline: none;
}
/* Reset the focus state immediately after click so the button doesn't
 * stay in the hover bg colour until the next click — themes like
 * hello-elementor put a sticky :focus bg on every button. */
button.aecs-gallery__nav:focus:not(:focus-visible) {
	background: var(--aecs-gallery-nav-bg, rgba(0, 0, 0, .55));
}
button.aecs-gallery__nav:active { transform: translateY(-50%) scale(.95); }
button.aecs-gallery__nav--prev { left: 12px; }
button.aecs-gallery__nav--next { right: 12px; }
button.aecs-gallery__nav svg { width: 22px; height: 22px; display: block; pointer-events: none; }

/* Hide arrows while lightbox is open. */
html.aecs-lightbox-open button.aecs-gallery__nav { display: none !important; }

/* Mobile: move arrows below the image, side-by-side. */
@media (max-width: 600px) {
	.aecs-gallery__viewport { padding-bottom: 56px; }
	button.aecs-gallery__nav {
		top: auto !important;
		bottom: 8px;
		transform: none;
	}
	button.aecs-gallery__nav:active { transform: scale(.95); }
	button.aecs-gallery__nav--prev { left: calc(50% - 56px); }
	button.aecs-gallery__nav--next { right: calc(50% - 56px); }
}

/* Hide any leftover WC FlexSlider chrome on pages where our gallery wins */
.aecs-gallery + .woocommerce-product-gallery,
body:has(.aecs-gallery) .woocommerce-product-gallery .flex-control-nav,
body:has(.aecs-gallery) .woocommerce-product-gallery .flex-control-thumbs {
	display: none !important;
}

/* Full-screen lightbox */
.aecs-gallery-lightbox {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, .92);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
	z-index: 99999;
	animation: aecs-fade .15s ease-out;
}
.aecs-gallery-lightbox__figure {
	margin: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	max-width: 100%;
	max-height: 100%;
}
.aecs-gallery-lightbox__img {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
	box-shadow: 0 8px 32px rgba(0, 0, 0, .5);
}
/* Shared control styling for close + prev/next — reuses the gallery arrows'
   look so the lightbox feels like the same component. They share the
   --aecs-gallery-nav-* tokens (set on <body> by the Elementor Kit, so they
   inherit into the body-level lightbox too) and the same dark round glassy
   treatment + drop shadow. Scoped + !important on the theme-clobbered props
   because themes (hello-elementor / WooCommerce) style every <button> with a
   brand-colour background, square radius, padding and a sticky :focus bg. */
.aecs-gallery-lightbox .aecs-gallery-lightbox__close,
.aecs-gallery-lightbox .aecs-gallery-lightbox__nav {
	position: absolute;
	margin: 0 !important;
	padding: 0 !important;
	min-width: 0 !important;
	min-height: 0 !important;
	border: none !important;
	outline: none !important;
	background: var(--aecs-gallery-nav-bg, rgba(0, 0, 0, .55)) !important;
	color: var(--aecs-gallery-nav-color, #fff) !important;
	border-radius: var(--aecs-gallery-nav-radius, 9999px) !important;
	box-shadow: 0 2px 8px rgba(0, 0, 0, .25) !important;
	font: inherit;
	text-transform: none !important;
	letter-spacing: normal !important;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	-webkit-appearance: none;
	appearance: none;
	transition: background-color .15s, transform .15s;
}
.aecs-gallery-lightbox .aecs-gallery-lightbox__close:hover,
.aecs-gallery-lightbox .aecs-gallery-lightbox__nav:hover,
.aecs-gallery-lightbox .aecs-gallery-lightbox__close:focus,
.aecs-gallery-lightbox .aecs-gallery-lightbox__nav:focus,
.aecs-gallery-lightbox .aecs-gallery-lightbox__close:focus-visible,
.aecs-gallery-lightbox .aecs-gallery-lightbox__nav:focus-visible {
	background: var(--aecs-gallery-nav-bg-hover, rgba(0, 0, 0, .8)) !important;
	color: var(--aecs-gallery-nav-color, #fff) !important;
}
/* Drop the sticky theme :focus bg straight after a mouse click, like the
   gallery arrows do. */
.aecs-gallery-lightbox .aecs-gallery-lightbox__close:focus:not(:focus-visible),
.aecs-gallery-lightbox .aecs-gallery-lightbox__nav:focus:not(:focus-visible) {
	background: var(--aecs-gallery-nav-bg, rgba(0, 0, 0, .55)) !important;
}
.aecs-gallery-lightbox .aecs-gallery-lightbox__nav:active { transform: translateY(-50%) scale(.95); }
.aecs-gallery-lightbox__close {
	top: 18px;
	right: 18px;
	width: 44px;
	height: 44px;
}
.aecs-gallery-lightbox__close svg { width: 22px; height: 22px; }
.aecs-gallery-lightbox__nav {
	top: 50%;
	transform: translateY(-50%);
	width: 52px;
	height: 52px;
}
.aecs-gallery-lightbox__nav svg { width: 26px; height: 26px; }
.aecs-gallery-lightbox__nav--prev { left: 18px; }
.aecs-gallery-lightbox__nav--next { right: 18px; }
.aecs-gallery-lightbox__counter {
	position: absolute;
	bottom: 20px;
	left: 50%;
	transform: translateX(-50%);
	color: var(--aecs-gallery-nav-color, #fff);
	font-size: 14px;
	line-height: 1;
	letter-spacing: .04em;
	background: var(--aecs-gallery-nav-bg, rgba(0, 0, 0, .55));
	padding: 7px 14px;
	border-radius: var(--aecs-gallery-nav-radius, 9999px);
	box-shadow: 0 2px 8px rgba(0, 0, 0, .25);
}
@media (max-width: 600px) {
	.aecs-gallery-lightbox__nav { width: 44px; height: 44px; }
	.aecs-gallery-lightbox__nav svg { width: 22px; height: 22px; }
	.aecs-gallery-lightbox__nav--prev { left: 8px; }
	.aecs-gallery-lightbox__nav--next { right: 8px; }
}
html.aecs-lightbox-open { overflow: hidden; }
@keyframes aecs-fade { from { opacity: 0; } to { opacity: 1; } }

/* Product Block layout ----------------------------------------------------
   Gallery dominates the viewport on the left; summary is a narrower sticky
   column on the right that scrolls inside the page until its bottom is reached.
*/

/* ==========================================================================
   Product block layout — gallery left, summary right (Elementor-style)
   Lightweight 2-col flex inside whatever container the theme provides.
   ========================================================================== */

.aecs-product-block {
	--aecs-card-radius: 12px;
	--aecs-block-gutter: 20px;
	/* Hard floor on the summary column; the gallery never grows wide
	   enough to push summary below this. 540 gives the ATC + variation
	   selectors + gift-card 2-col amount grid genuine breathing room on
	   typical desktops (1366–1920px monitors). Widget control overrides
	   per-instance. */
	--aecs-summary-min: 540px;
	/* Gallery aspect ratio as a unitless number (width / height). Used by
	   the CSS-only media sizer below to convert viewport height into a
	   target media width. Default 1.5 (= 3/2 landscape, matches the
	   gallery viewport's own aspect-ratio). */
	--aecs-gallery-aspect: 1.5;
	/* Approx height of the page chrome above the block (sticky header +
	   admin bar + breathing room). JS adjusts this once on load when a
	   sticky header is detected — otherwise the static default applies. */
	--aecs-sticky-top: 80px;
	/* Total px above the block on first paint (header + breadcrumb + hero
	   + page title + …). JS measures and writes this once per resize.
	   Used as the larger budget when computing media-col so the gallery
	   never overflows the fold even when there's lots of static content
	   above the product block. */
	--aecs-above-block: 80px;

	display: grid;
	/* CSS-only viewport-aware media column:
	 *   media width = min(
	 *     viewport-fit  → (viewport_h − max(sticky-top, above-block) − 24) × aspect
	 *     block-fit     → 100% − summary_min − gap
	 *   )
	 *   summary takes the rest via the 1fr track.
	 * The max() ensures the gallery fits the fold both on first paint
	 * (block starts at above-block px from top) AND once the user scrolls
	 * (block becomes sticky at sticky-top from top). Browser recomputes
	 * on every viewport change with zero JS work. */
	--aecs-media-col: min(
		calc((100vh - max(var(--aecs-sticky-top), var(--aecs-above-block)) - 24px) * var(--aecs-gallery-aspect)),
		calc(100% - var(--aecs-summary-min) - var(--aecs-block-gutter))
	);
	grid-template-columns: minmax(0, var(--aecs-media-col)) minmax(0, 1fr);
	grid-template-areas: "media summary";
	align-items: start;
	gap: var(--aecs-block-gutter);
	width: 100%;
	/* Overridable per-instance from the widget; bigger default than the
	   former 1600 px so wide monitors still get growth (the summary column
	   capped its expansion at this hard ceiling before). Set to `none` via
	   the widget control to let the block fill its Elementor container. */
	max-width: var(--aecs-block-max-w, 1920px);
	margin: 0 auto 2rem;
	padding: 0 var(--aecs-block-gutter);
	box-sizing: border-box;
	direction: ltr;
}

/* Lock columns explicitly so source order / theme floats can't swap them. */
.aecs-product-block__media   { grid-area: media; }
.aecs-product-block__summary { grid-area: summary; }

.aecs-product-block__media,
.aecs-product-block__summary {
	min-width: 0;
	box-sizing: border-box;
}

/* Bust the .product wrapper's overflow: hidden so position: sticky works. */
.single-product div.product:has(.aecs-product-block) { overflow: visible !important; }

/* Header pin (driven by gallery.js setupHeaderPin) ------------------------
   The theme header isn't sticky on its own; JS adds .aecs-pin-header to make
   it position:sticky for the whole product block, then slides it up via an
   inline transform: translateY() in lockstep with the gallery as the gallery
   un-sticks — so it scrolls away (and back) naturally rather than popping.
   position:sticky preserves the header's space in flow → no content jump. */
.aecs-pin-header {
	position: sticky !important;
	/* Sit just below a fixed WP admin bar (JS sets --aecs-pin-top); 0 for
	   logged-out visitors. Stops the header tucking under the admin bar. */
	top: var(--aecs-pin-top, 0px) !important;
	z-index: 999;
}

/* Storefront wraps the page in `.col-full { max-width: 66.5em }` (~1064px) which
   compresses our grid. When the block is present we widen every ancestor up to
   the viewport so the gallery + summary actually get the room we asked for. */
/* Globally hide the quantity input — affects simple, variable, AND
   composite. Grouped products keep their per-child qty inputs (each child
   has its own .quantity inside the table; we only hide the master one,
   which doesn't exist for grouped). */
body.aecs-hide-qty.single-product div.product form.cart > .quantity,
body.aecs-hide-qty .aecs-product-block form.cart > .quantity,
body.aecs-hide-qty form.cart.variations_form > .woocommerce-variation-add-to-cart > .quantity {
	display: none !important;
}

body.aecs-no-sidebar .col-full:has(.aecs-product-block),
body.aecs-no-sidebar #primary:has(.aecs-product-block),
body.aecs-no-sidebar .content-area:has(.aecs-product-block),
body.aecs-no-sidebar #main:has(.aecs-product-block),
body.aecs-no-sidebar .site-main:has(.aecs-product-block),
body.aecs-no-sidebar article:has(.aecs-product-block),
body.aecs-no-sidebar .product:has(.aecs-product-block) {
	max-width: none !important;
	width: 100% !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
}

.aecs-product-block .aecs-gallery { margin: 0; }

/* Sticky gallery — stays in view while the right column scrolls past it.
   Releases naturally once the user scrolls past the entire product block. */
.aecs-product-block__media {
	position: sticky;
	top: var(--aecs-sticky-top, 24px);
	align-self: start;
}
/* Hard cap so the gallery image never exceeds what fits below the
   chrome. Mirrors the budget used for --aecs-media-col so width and
   height stay in lockstep when viewport / block-top changes. */
.aecs-product-block__media .aecs-gallery,
.aecs-product-block__media .aecs-gallery__viewport {
	max-height: calc(100vh - max(var(--aecs-sticky-top), var(--aecs-above-block)) - 24px);
}

.aecs-product-block__summary {
	display: flex;
	flex-direction: column;
	gap: 6px;
	/* Enable @container queries so children can react to the summary
	   column's actual width (not the viewport). Used by the gift-card
	   amount-buttons grid below. */
	container-type: inline-size;
	container-name: summary;
}
/* Kill default WC/theme margins inside the summary that double up with our gap. */
.aecs-product-block__summary .aecs_components_container,
.aecs-product-block__summary .aecs_components_single_item,
.aecs-product-block__summary .aecs_wcp_group_total,
.aecs-product-block__summary .aecs_step_navigation,
.aecs-product-block__summary .aecs_components_container h3,
.aecs-product-block__summary form.cart > *,
.aecs-product-block__summary p,
.aecs-product-block__summary .aecs_customer_advice {
	margin-top: 0 !important;
	margin-bottom: 0 !important;
}
.aecs-product-block__summary .aecs_components_single_item + .aecs_components_single_item { margin-top: 4px !important; }
.aecs-product-block__summary .aecs_components_container h3 { padding-bottom: 2px; margin: 0; }
.aecs-product-block__summary .aecs_selection_clear { display: inline-block; margin-top: 10px !important; }
/* Hide the Clear-selection pill when there's nothing to clear yet. */
.aecs-product-block__summary .aecs_components_single_item:not(.aecs_selection_selected) .aecs_selection_clear { display: none !important; }
.aecs-product-block__summary .aecs_wcp_group_total table { margin: 0; }
.aecs-product-block__summary > *,
.aecs-product-block__summary h1,
.aecs-product-block__summary h2,
.aecs-product-block__summary h3,
.aecs-product-block__summary h4,
.aecs-product-block__summary p,
.aecs-product-block__summary form { margin: 0 !important; max-width: 100%; }
.aecs-product-block__summary .product_title {
	font-size: clamp(22px, 2vw, 32px);
	line-height: 1.25;
	font-weight: 600;
	text-align: center;
}
.aecs-product-block__summary .price {
	font-size: clamp(20px, 1.8vw, 26px);
	font-weight: 600;
	color: var(--aecs-price-color, #111);
	text-align: center;
}
.aecs-product-block__summary .price:empty,
.aecs-product-block__summary .woocommerce-product-details__short-description:empty {
	display: none;
}

/* Jump-to-description anchor */
.aecs-jump-to-description {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	align-self: center;
	font-size: 14px;
	color: var(--aecs-link-color, #555);
	text-decoration: none;
	padding: 4px 10px;
	border: 1px solid var(--aecs-link-color, #ddd);
	border-radius: 999px;
	transition: background-color .15s, color .15s;
}
.aecs-jump-to-description:hover {
	background: var(--aecs-link-color, #555);
	color: #fff;
}
.aecs-jump-to-description__arrow { font-size: 14px; line-height: 1; }

/* Cart form: full-width children, ATC + wishlist on one row. */
.aecs-product-block form.cart {
	display: flex;
	flex-direction: column;
	gap: 6px;
	width: 100%;
	margin: 0;
}
.aecs-product-block form.cart .aecs_components_container,
.aecs-product-block form.cart .aecs_wcp_group_total,
.aecs-product-block form.cart .aecs-dual-mode-box {
	width: 100%;
	box-sizing: border-box;
	margin: 0;
}
/* …but the pair/addons box wants breathing room from the configurator above
   and the add-to-cart button below. Needs !important + higher specificity to
   beat `form.cart > * { margin: 0 !important }` above. */
.aecs-product-block form.cart .aecs-dual-mode-box {
	margin-top: 20px !important;
	margin-bottom: 26px !important;
}
.aecs-product-block form.cart .quantity,
.aecs-product-block form.cart .single_add_to_cart_button {
	box-sizing: border-box;
}

/* Variable products: the variation form wraps quantity + ATC in
   .woocommerce-variation-add-to-cart. Stack them and stretch the ATC to
   full column width to match simple products.
   Also force the .single_variation_wrap intermediate div to full width
   (it's a plain block, doesn't inherit form's flex stretch). */
.aecs-product-block form.cart .single_variation_wrap,
.aecs-product-block form.cart .woocommerce-variation-add-to-cart {
	display: flex;
	flex-direction: column;
	gap: 6px;
	width: 100%;
}
.aecs-product-block form.cart .woocommerce-variation-add-to-cart .quantity {
	width: 100%;
}
/* The full-width ATC needs to beat both hello-elementor's
   `[type=submit]{width:auto}` reset and any theme-button defaults.
   Specificity (0,3,1) already wins over (0,1,0), but some themes inject
   `.elementor-button` rules under a higher-specificity wrapper; use
   `!important` to guarantee full-bleed in every host. */
.aecs-product-block form.cart button.single_add_to_cart_button {
	width: 100% !important;
	display: block !important;
}

/* WC renders the selected variation's price + availability inside
   .woocommerce-variation (next to the ATC). Our JS pulls that price up
   into the main `.price` element above, so hide the duplicate down here
   — keep availability + description visible. */
.aecs-product-block form.cart .woocommerce-variation .woocommerce-variation-price {
	display: none !important;
}

/* "Clear selection" link — JS hoists it out of the variations table's
   last <td> into a wrapper directly after the table so it can centre
   across the full summary-column width (matching composite's
   `aecs_selection_clear` placement). */
.aecs-product-block .aecs-reset-row {
	display: flex;
	justify-content: center;
	margin: 4px 0 0;
}
.aecs-product-block .aecs-reset-row a.reset_variations {
	font-size: 13px;
	color: var(--aecs-link-color, #555);
	text-decoration: underline;
	padding: 4px 12px;
}
.aecs-product-block .aecs-reset-row a.reset_variations:hover {
	color: var(--aecs-accent, #000);
}
/* Belt-and-braces: hide any reset_variations that's still stuck inside
   the table (e.g. if the page renders before our JS runs). */
.aecs-product-block form.cart table.variations a.reset_variations {
	visibility: hidden;
}
.aecs-product-block form.cart .aecs-reset-row a.reset_variations {
	visibility: visible;
}

/* ── Gift cards ────────────────────────────────────────────────────
   The gift-cards module renders its own form (`.gift-cards_form`) with
   preset designs, amount buttons, recipient inputs — none of which
   match WC's variable/simple-product selectors above, so they fell
   back to host theme defaults and looked off inside the summary column.
   Scoped to `.aecs-product-block` so modals / popups elsewhere are not
   affected. */
.aecs-product-block form.gift-cards_form {
	display: flex;
	flex-direction: column;
	gap: 14px;
	width: 100%;
	margin: 0;
}
/* All headings inside the form — including the nested h5 "RECIPIENT INFO"
   and "YOUR INFO" titles — get the same compact look. Some come through
   uppercase; tone that down for readability. */
.aecs-product-block form.gift-cards_form h3,
.aecs-product-block form.gift-cards_form h4,
.aecs-product-block form.gift-cards_form h5 {
	margin: 6px 0 0;
	font-size: 15px;
	font-weight: 600;
	text-transform: none;
	letter-spacing: 0;
	line-height: 1.2;
}
/* Top-level section titles ("Vyber design", "Zvol hodnotu", "Doručení")
   get a separator + slightly more breathing room so each phase of the
   form reads as its own card. */
.aecs-product-block form.gift-cards_form > h3 {
	font-size: 18px;
	font-weight: 700;
	margin: 14px 0 4px;
	padding-top: 14px;
	border-top: 1px solid var(--aecs-border, #e5e5e5);
}
.aecs-product-block form.gift-cards_form > h3:first-of-type,
.aecs-product-block form.gift-cards_form > h3:first-child {
	border-top: 0;
	padding-top: 0;
	margin-top: 0;
}
.aecs-product-block form.gift-cards_form .aecs_gift_cards-empty-recipient-note {
	display: block;
	font-size: 12px;
	color: var(--aecs-muted, #777);
	margin-top: 2px;
}
/* Design preset thumbnails: cap natural 1200px raw img to a sane grid. */
.aecs-product-block .aecs_gift_cards-choose-design-preview {
	margin: 0;
}
.aecs-product-block .aecs_gift_cards-design-list {
	width: 100%;
}
.aecs-product-block .aecs_gift_cards-design-list ul {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.aecs-product-block .aecs_gift_cards-design-list ul li {
	padding: 0;
	display: block;
}
.aecs-product-block .aecs_gift_cards-preset-image {
	border-radius: var(--aecs-card-radius, 12px);
	overflow: hidden;
	aspect-ratio: 3 / 2;
	border: 2px solid transparent;
	transition: border-color .15s;
}
.aecs-product-block .aecs_gift_cards-preset-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.aecs-product-block .aecs_gift_cards-preset-image.selected_image_parent {
	border-color: var(--aecs-accent, #111);
}
/* Amount buttons — 2-column card grid that reacts to the SUMMARY
   column's width via @container (not viewport). Single column only
   when the summary is genuinely narrow (<320px), otherwise 2 cards
   side-by-side so a 4-preset list reads as a compact 2×2 block
   instead of a tall vertical strip. */
.aecs-product-block .gift-cards-list {
	display: grid;
	grid-template-columns: 1fr;
	gap: 12px;
	/* Slight extra breathing room above and below the picker so it
	   doesn't bleed into the title and ATC button. Form's own gap is
	   14px; this adds another 8px on each side. */
	margin: 8px 0;
}
.aecs-product-block .gift-cards-list .aecs_gift_cards_select_amount_title {
	grid-column: 1 / -1;
}
@container summary (min-width: 320px) {
	.aecs-product-block .gift-cards-list {
		grid-template-columns: repeat(2, 1fr);
	}
}
/* Container-query fallback for the brief window before the @container
   layer kicks in (or in browsers without container-query support). */
@supports not (container-type: inline-size) {
	@media (min-width: 480px) {
		.aecs-product-block .gift-cards-list {
			grid-template-columns: repeat(2, 1fr);
		}
	}
}
.aecs-product-block button.aecs_gift_cards-predefined-amount-button {
	display: flex !important;
	align-items: center;
	justify-content: center;
	/* Width AND max-width because the bundled
	   `aecs-gift-cards-product-layout-2.css` sets `max-width: 20%` on
	   these buttons (designed for a 5-across legacy strip) and width
	   alone wouldn't beat that. */
	width: 100% !important;
	max-width: 100% !important;
	min-width: 0;
	min-height: 64px;
	padding: 14px 16px !important;
	background: #fff !important;
	color: var(--aecs-text, #111) !important;
	border: 2px solid var(--aecs-border, #e5e5e5) !important;
	/* Explicit medium radius — beats theme/Elementor pill defaults
	   (border-radius: 9999px) that would otherwise squash the button
	   into a circle and clip the price text. */
	border-radius: var(--gf-radius-lg, 12px) !important;
	box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
	cursor: pointer;
	font-size: 20px;
	font-weight: 700;
	letter-spacing: -0.01em;
	line-height: 1.2;
	transition:
		border-color .15s ease,
		background-color .15s ease,
		color .15s ease,
		transform .12s ease,
		box-shadow .15s ease;
}
.aecs-product-block button.aecs_gift_cards-predefined-amount-button:hover {
	border-color: var(--aecs-accent, var(--aecs-btn-atc-bg, #111)) !important;
	box-shadow: 0 6px 18px rgba(0, 0, 0, .08);
	transform: translateY(-1px);
}
.aecs-product-block button.aecs_gift_cards-predefined-amount-button:focus-visible {
	outline: 2px solid var(--aecs-accent, var(--aecs-btn-atc-bg, #111));
	outline-offset: 2px;
}
.aecs-product-block button.aecs_gift_cards-predefined-amount-button.selected_button {
	background: var(--aecs-btn-atc-bg, var(--aecs-accent, #111)) !important;
	color: var(--aecs-btn-atc-color, #fff) !important;
	border-color: var(--aecs-btn-atc-bg, var(--aecs-accent, #111)) !important;
	box-shadow: 0 6px 18px rgba(0, 0, 0, .12);
}
/* Delivery info wrapper holds the recipient + sender + message sections.
   Stack them with consistent spacing. */
.aecs-product-block form.gift-cards_form .gift-card-content-editor.step-content {
	display: flex;
	flex-direction: column;
	gap: 12px;
}
/* Recipient stack (each row = one input). */
.aecs-product-block .aecs_gift_cards-single-recipient {
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.aecs-product-block .aecs_gift_cards-recipient-name,
.aecs-product-block .aecs_gift_cards-recipient-email,
.aecs-product-block .aecs_gift_cards-sender-name,
.aecs-product-block .aecs_gift_cards-message {
	display: flex;
	flex-direction: column;
	gap: 4px;
	width: 100%;
	float: none !important;  /* `clearfix` floats from WC bleed otherwise */
}
.aecs-product-block .aecs_gift_cards-recipient-name label,
.aecs-product-block .aecs_gift_cards-recipient-email label,
.aecs-product-block .aecs_gift_cards-sender-name label,
.aecs-product-block .aecs_gift_cards-message label {
	font-size: 13px;
	color: var(--aecs-muted, #666);
	margin: 0;
}
.aecs-product-block form.gift-cards_form input[type="text"],
.aecs-product-block form.gift-cards_form input[type="email"],
.aecs-product-block form.gift-cards_form input[type="number"]:not(.qty),
.aecs-product-block form.gift-cards_form textarea {
	width: 100%;
	box-sizing: border-box;
	padding: 8px 12px;
	border: 1px solid var(--aecs-border, #ccc);
	border-radius: var(--gf-radius-sm, 8px);
	font-size: 14px;
	background: #fff;
}
.aecs-product-block form.gift-cards_form textarea { min-height: 80px; resize: vertical; }

/* The bottom add-to-cart row of a gift card has the same wrapper class as
   variable products but under a different name (`.gift_card_template_button
   .variations_button`). Apply the same full-width stack rules. */
.aecs-product-block form.gift-cards_form .gift_card_template_button {
	display: flex;
	flex-direction: column;
	gap: 6px;
	width: 100%;
}
.aecs-product-block form.gift-cards_form .gift_card_template_button .quantity {
	width: 100%;
}

/* Wishlist row — sits OUTSIDE the form, below add-to-cart, centered like Elementor. */
.aecs-wishlist-row {
	display: flex;
	justify-content: center;
	margin-top: 0;
}
.aecs-wishlist-link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 14px;
	color: var(--aecs-wishlist-color, #555);
	text-decoration: none;
	padding: 6px 8px;
	background: none;
	border: 0;
	cursor: pointer;
	transition: color .15s;
}
.aecs-wishlist-link:hover { color: var(--aecs-wishlist-color-hover, #c0392b); }
.aecs-wishlist-link__icon { width: 20px; height: 20px; flex: 0 0 auto; }
.aecs-wishlist-link__label { line-height: 1; }

/* AECS wishlist module renders its own anchor as `.add_to_wishlist`
   (SVG + <span>) and stacks them as inline-block baseline siblings,
   which leaves the heart visually below the text baseline. Force a
   flex centre + fixed icon box so the icon and label stay aligned. */
.aecs-wishlist-row .add_to_wishlist {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	line-height: 1;
}
.aecs-wishlist-row .add_to_wishlist .aecs-wishlist-icon-svg,
.aecs-wishlist-row .add_to_wishlist svg {
	width: 20px;
	height: 20px;
	flex: 0 0 auto;
	display: block;
}
.aecs-wishlist-row .add_to_wishlist > span {
	display: inline-block;
	line-height: 1;
}

/* Bottom action row — qty | ATC | wishlist */
.aecs-product-block form.cart .e-atc-qty-button-holder,
.aecs-product-block form.cart > .quantity {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	gap: 10px;
	width: 100%;
}
.aecs-product-block form.cart .quantity input.qty {
	min-width: 70px;
	height: 100%;
	min-height: 46px;
	padding: 0 10px;
	border: 1px solid #ddd;
	border-radius: var(--aecs-card-radius, 12px);
}
.aecs-product-block form.cart .single_add_to_cart_button {
	flex: 1 1 auto;
	min-height: 46px;
	padding: 0 22px;
	border-radius: var(--aecs-card-radius, 12px);
	font-weight: 600;
}

/* Neutralise Storefront's float/width clamping on .summary */
.aecs-product-block .summary.entry-summary,
.aecs-product-block__summary {
	width: auto !important;
	float: none !important;
	margin: 0 !important;
}

/* Sidebar-less layout: hide Storefront sidebar + give us full content width */
body.aecs-no-sidebar #secondary,
body.aecs-no-sidebar .widget-area {
	display: none !important;
}
body.aecs-no-sidebar.single-product #primary,
body.aecs-no-sidebar.single-product .content-area,
body.aecs-no-sidebar.single-product #main,
body.aecs-no-sidebar.single-product .site-main,
body.aecs-no-sidebar.single-product div.product {
	width: 100% !important;
	max-width: none !important;
	float: none !important;
}

/* Mobile: stack the columns so media sits on top and the summary falls
   below it. Drop the viewport-fit height cap (users scroll on phones, no
   point constraining the gallery to the first fold). */
@media (max-width: 768px) {
	.aecs-product-block {
		grid-template-columns: 1fr;
		/* Explicit two-row stack — without this the desktop
		   `grid-template-areas: "media summary"` (1×2) clashes with the
		   1-column track and the summary can land in unexpected places. */
		grid-template-areas:
			"media"
			"summary";
		gap: 16px;
		padding: 0 12px;
	}
	.aecs-product-block__media { position: static; }
	.aecs-product-block__media .aecs-gallery,
	.aecs-product-block__media .aecs-gallery__viewport {
		max-height: none;
	}
}

/* Editor placeholder for users who haven't picked a product yet */
.aecs-product-block-error {
	padding: 12px 16px;
	border: 1px dashed #c00;
	background: #fff5f5;
	color: #900;
	border-radius: 6px;
	font-size: 13px;
}