.pe-shop-wrap,
.pe-shop-wrap *,
.pe-shop-wrap *::before,
.pe-shop-wrap *::after {
	box-sizing: border-box;
}

/* No max-width cap here on purpose — the surrounding page-builder
   section already controls "boxed" vs "full width" layout, and a fixed
   cap on .pe-shop-wrap fought that setting, capping the catalogue at
   ~2 columns even inside a full-width section (found 2026-07-16). */
.pe-shop-wrap {
	width: 100%;
	margin: 0 auto;
	padding: 24px 20px 120px;
	text-align: center;
}

/* Cards keep their original fixed width (260px) — they don't stretch
   just because the section is wide. Instead, as many 260px columns as
   fit wrap onto each row (flex-wrap), and with .pe-shop-wrap's max-width
   cap removed, a wide/full-width section naturally fits more of them
   side by side; a row with leftover space is centered rather than
   stretching the cards themselves (found 2026-07-16, reverting the
   previous 1fr-stretch grid after feedback that fixed-width cards were
   the correct look). */
.pe-shop-products {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 32px;
	margin-bottom: 32px;
}

.pe-shop-product {
	background: #fff;
	border: 1px solid #dcdfe4;
	border-radius: 8px;
	padding: 32px;
	flex: 0 1 260px;
	max-width: 260px;
	min-width: 200px;
	text-align: center;
	display: flex;
	flex-direction: column;
}

/* Pinned to the bottom of the card via margin-top: auto — cards in the
   same row are stretched to equal height by .pe-shop-products' default
   flex align-items:stretch, so a product with a shorter description no
   longer leaves its price/stepper/button sitting higher up than its
   neighbors (found 2026-07-16). */
.pe-shop-product-footer {
	margin-top: auto;
}

/* 1:1 square, filled and cropped from every side (2026-07-20 request) —
   aspect-ratio keeps it a true square at any card width, object-fit:cover
   does the cropping instead of squashing the photo. */
.pe-shop-product-image {
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: 6px;
	margin-bottom: 12px;
}

.pe-shop-product-desc {
	color: #646970;
	font-size: 14px;
	/* Card-only short description, length-capped at the DB/admin-form level
	   (products.short_description) — this is a matching VISUAL cap: exactly
	   two lines, overflow ellipsized, so a description close to the limit
	   never wraps onto a third line and pushes the price/button down
	   unevenly between cards (2026-07-20). */
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.pe-shop-product-price {
	/* Vékonyabb/kisebb ár, prémium hatás (2026-07-26 kérés) — korábban
	   22px/700 volt, ami a szellősebb kártya mellett túl "kiabálósnak"
	   hatott. */
	font-size: 17px;
	font-weight: 500;
	/* More breathing room before "Megnézem" (2026-07-20 request — felt too
	   close once the qty-stepper that used to sit between them was removed
	   in Phase 2). */
	margin: 12px 0 20px;
}

.pe-shop-btn {
	background: #1d2327;
	color: #fff;
	border: 2px solid #1d2327;
	border-radius: 4px;
	padding: 12px 24px;
	font-size: 15px;
	font-weight: 600;
	cursor: pointer;
}

.pe-shop-btn:hover {
	background: #fff;
	color: #1d2327;
}

.pe-shop-thanks {
	background: #fff;
	border: 1px solid #dcdfe4;
	border-radius: 8px;
	padding: 32px;
}

.pe-shop-empty {
	color: #646970;
}

.pe-shop-hint {
	color: #646970;
	font-size: 13px;
	text-align: left;
	margin-top: -8px;
}

.pe-shop-modal-close {
	position: absolute;
	top: 8px;
	right: 12px;
	background: none;
	border: none;
	font-size: 28px;
	line-height: 1;
	cursor: pointer;
	color: #646970;
	padding: 4px;
}

.pe-shop-modal-close:hover {
	color: #1d2327;
}

.pe-shop-coupon-row {
	display: flex;
	gap: 8px;
}

.pe-shop-coupon-row input[type="text"] {
	flex: 1;
}

.pe-shop-variant-label {
	font-weight: 600;
	margin-bottom: 8px;
}

.pe-shop-personal-info {
	display: block;
	font-size: 13px;
	color: #646970;
	margin: 4px 0 4px 26px;
}

.pe-shop-personal-info a {
	color: inherit;
	text-decoration: underline;
}

.pe-shop-lightbox-overlay {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.85);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 40px 16px;
	z-index: 100001;
}

.pe-shop-lightbox-overlay[hidden] {
	display: none;
}

.pe-shop-lightbox-inner {
	position: relative;
	max-width: 100%;
	max-height: 100%;
}

.pe-shop-lightbox-inner img {
	max-width: 100%;
	max-height: calc(100vh - 80px);
	display: block;
	border-radius: 4px;
}

.pe-shop-lightbox-inner .pe-shop-modal-close {
	top: -36px;
	right: -8px;
	color: #fff;
}

/* Width matches .pe-shop-add-to-cart-btn below it — both are width:100%
   of the same card, so the minus/input/plus trio and the button always
   span the same total width regardless of card size (found 2026-07-16). */
.pe-shop-qty-stepper {
	display: flex;
	align-items: stretch;
	gap: 8px;
	margin-bottom: 12px;
	width: 100%;
}

.pe-shop-qty-btn {
	flex: 0 0 44px;
	height: 44px;
	background: #fff;
	color: #1d2327;
	border: 1px solid #dcdfe4;
	border-radius: 4px;
	font-size: 18px;
	line-height: 1;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	box-sizing: border-box;
}

.pe-shop-qty-btn:hover {
	background: #1d2327;
	color: #fff;
}

.pe-shop-qty-input {
	flex: 1 1 0;
	/* A number input's UA-default min-content width doesn't respect
	   flex-basis:0 unless min-width is reset — without this the input
	   refused to shrink and pushed the whole stepper past the card's
	   edge (found 2026-07-16). */
	min-width: 0;
	width: auto !important;
	height: 44px;
	text-align: center;
	padding: 0 6px !important;
	border: 1px solid #dcdfe4;
	border-radius: 4px;
	font: inherit;
	box-sizing: border-box;
}

/* .pe-shop-view-btn ("Megnézem", 2026-07) is an <a>, not a <button> like
   .pe-shop-add-to-cart-btn — needs its own display:block to behave like a
   full-width block control instead of a default-inline anchor (which was
   sitting oddly close under the price, not truly gapped by the price's own
   margin-bottom, since inline/block vertical spacing doesn't work the same
   way). text-decoration/box-sizing reset since it's a link, not a button. */
.pe-shop-add-to-cart-btn,
.pe-shop-view-btn {
	display: block;
	width: 100%;
	padding: 14px 24px;
	text-align: center;
	text-decoration: none;
	box-sizing: border-box;
}

/* Sale/original price pair — reused both server-side (render_price_row())
   and client-side (render_product_detail()'s priceRowHtml()) so the two
   stay visually identical whether the page just loaded or an option
   selection just updated the price. */
.pe-shop-price-original {
	color: #646970;
	text-decoration: line-through;
	font-weight: 400;
	font-size: 0.75em;
}

.pe-shop-price-sale {
	color: #d63638;
}

/* Product detail page ("Megnézem") — WooCommerce-style: gallery left, info
   (name/description/option selectors/price/qty/add-to-cart) right, stacked
   on narrow screens. Text-align left throughout, unlike the centered
   catalogue cards, since this is a single reading column rather than a
   grid of cards.
   Since 2026-07-20 this renders as its own get_header()/get_footer() page
   (see ShopPageController::maybe_render_product_detail_page()) rather than
   inline where the [store] shortcode sits, so — unlike .pe-shop-wrap, which
   deliberately has no max-width (it needs to fill whatever width the
   surrounding page-builder section gives the catalogue grid) — THIS wrap
   gets its own capped, centered content column, matching a typical
   single-product page width. */
/* Top clearance (2026-07-20 fix): the active theme's header
   (#mfn-header-template, Betheme/BeBuilder) is position:absolute with no
   reserved document-flow height — it visually overlays whatever sits at the
   top of the page rather than pushing it down. On a normal page that's fine
   because there's a hero/banner section underneath it, but this standalone
   detail page (get_header() + content + get_footer(), no page-builder
   content around it) has nothing there, so the header was covering "Vissza
   a termékekhez" and the top of the gallery. 160px clears the theme
   header's own ~123px height with visible breathing room to spare, per the
   "legyen nagyobb távolság" request; 110px on the mobile header, which runs
   shorter. */
.pe-shop-detail-wrap {
	max-width: 1100px;
	margin: 0 auto;
	padding-top: 160px;
}

.pe-shop-detail-back {
	text-align: left;
	margin-bottom: 16px;
}

.pe-shop-detail-back a {
	color: #1d2327;
	text-decoration: none;
	font-weight: 600;
}

.pe-shop-detail-back a:hover {
	text-decoration: underline;
}

.pe-shop-detail {
	display: flex;
	flex-wrap: wrap;
	gap: 40px;
	text-align: left;
	background: #fff;
	border: 1px solid #dcdfe4;
	border-radius: 8px;
	padding: 32px;
}

.pe-shop-detail-gallery {
	flex: 1 1 320px;
	max-width: 480px;
}

/* Same 1:1 square + cover-crop treatment as the catalogue card image
   (2026-07-20 request), for a consistent look between the grid and the
   detail page. */
.pe-shop-detail-gallery img {
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: 6px;
	display: block;
}

.pe-shop-detail-info {
	flex: 1 1 320px;
}

.pe-shop-detail-info h1 {
	margin-top: 0;
	font-size: 26px;
}

.pe-shop-detail-properties {
	margin-bottom: 20px;
}

.pe-shop-detail-bundle-contents-heading {
	margin: 0 0 8px;
	font-size: 16px;
}

.pe-shop-detail-property-row {
	display: flex;
	align-items: baseline;
	gap: 6px;
	padding: 3px 0;
	color: #3c434a;
}

.pe-shop-detail-property-label {
	flex-shrink: 0;
	font-weight: 600;
}

.pe-shop-detail-property-filler {
	flex: 1 1 auto;
	border-bottom: 1px dotted #c3c4c7;
	margin-bottom: 4px;
	min-width: 16px;
}

.pe-shop-detail-property-value {
	flex-shrink: 0;
	text-align: right;
}

.pe-shop-detail-long-description {
	max-width: 900px;
	margin: 32px auto 0;
	padding-top: 24px;
	border-top: 1px solid #dcdcde;
	color: #3c434a;
	line-height: 1.7;
}

.pe-shop-detail-long-description :first-child {
	margin-top: 0;
}

.pe-shop-detail-group {
	margin-bottom: 18px;
}

.pe-shop-detail-select {
	width: 100%;
	max-width: 320px;
	padding: 10px 12px;
	border: 1px solid #dcdfe4;
	border-radius: 6px;
	font: inherit;
	background: #fff;
}

/* Swatches (colour), thumbs (image), and pills (size/generic) all share
   the same "selectable chip" interaction language — a highlighted
   border on the checked input's wrapping label via :has(). */
.pe-shop-detail-swatches,
.pe-shop-detail-thumbs,
.pe-shop-detail-pills {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.pe-shop-detail-swatch {
	cursor: pointer;
	display: block !important;
}

.pe-shop-detail-swatch input {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
}

.pe-shop-detail-swatch-dot {
	display: block;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	border: 2px solid #dcdfe4;
}

.pe-shop-detail-swatch:has(input:checked) .pe-shop-detail-swatch-dot {
	border-color: #1d2327;
	box-shadow: 0 0 0 2px #fff, 0 0 0 4px #1d2327;
}

.pe-shop-detail-thumb {
	cursor: pointer;
	display: block !important;
	width: 64px;
	border: 1px solid #dcdfe4;
	border-radius: 6px;
	overflow: hidden;
}

.pe-shop-detail-thumb input {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
}

.pe-shop-detail-thumb img {
	width: 100%;
	height: 64px;
	object-fit: cover;
	display: block;
}

.pe-shop-detail-thumb-fallback {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 64px;
	font-size: 11px;
	text-align: center;
	padding: 4px;
}

.pe-shop-detail-thumb:has(input:checked) {
	border-color: #1d2327;
	border-width: 2px;
}

.pe-shop-detail-pill {
	cursor: pointer;
	display: block !important;
	padding: 8px 18px;
	border: 1px solid #dcdfe4;
	border-radius: 20px;
	font-weight: 600;
	background: rgba(60, 67, 74, 0.04);
}

.pe-shop-detail-pill input {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
}

.pe-shop-detail-pill:has(input:checked) {
	border-color: #1d2327;
	border-width: 2px;
	background: #1d2327;
	color: #fff;
}

.pe-shop-detail-required-hint {
	color: #d63638;
	font-size: 13px;
	margin-top: 8px;
}

/* The detail page's own price/qty/add-to-cart block reuses .pe-shop-product
   (see render_product_detail()) so the existing catalogue-card CSS for
   .pe-shop-qty-stepper/.pe-shop-add-to-cart-btn applies unchanged — this
   just resets the card-specific framing (border/centering) that would
   otherwise look wrong sitting inline in the info column instead of as a
   standalone grid card. */
#pe-shop-detail-cart-wrap.pe-shop-product {
	border: none;
	padding: 0;
	max-width: 360px;
	min-width: 0;
	text-align: left;
	flex: none;
}

.pe-shop-detail-info .pe-shop-product-price {
	font-size: 26px;
}

/* Custom text / custom file upload (2026-07-21) — per-product, optional
   personalization fields on the detail page, styled to sit visually
   alongside the option-group controls above them. */
.pe-shop-detail-custom-text {
	padding: 10px 12px;
	border: 1px solid #dcdfe4;
	border-radius: 6px;
	font: inherit;
	resize: vertical;
}

.pe-shop-detail-char-count {
	color: #8a8f98;
	font-size: 12.5px;
	margin: 4px 0 0;
	text-align: right;
	max-width: 400px;
}

.pe-shop-dropzone {
	border: 2px dashed #dcdfe4;
	border-radius: 8px;
	padding: 24px 16px;
	text-align: center;
	cursor: pointer;
	background: rgba(60, 67, 74, 0.02);
}

.pe-shop-dropzone p {
	margin: 0 0 6px;
}

.pe-shop-dropzone .description {
	color: #8a8f98;
	font-size: 12.5px;
	margin: 0;
}

.pe-shop-dropzone--dragover {
	border-color: #1d2327;
	background: rgba(60, 67, 74, 0.06);
}

.pe-shop-uploaded-files {
	list-style: none;
	margin: 12px 0 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.pe-shop-uploaded-file {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	background: #e1e4e8;
	border-radius: 6px;
	padding: 8px 12px;
	font-size: 13px;
}

.pe-shop-uploaded-file-remove {
	background: none;
	border: none;
	color: #d63638;
	font-size: 18px;
	line-height: 1;
	cursor: pointer;
	padding: 0;
	flex-shrink: 0;
}

.pe-shop-detail-upload-error {
	color: #d63638;
	font-size: 13px;
	margin: 8px 0 0;
}

.pe-shop-detail-upload-error[hidden] {
	display: none;
}

@media (max-width: 700px) {
	.pe-shop-detail {
		padding: 20px;
		gap: 24px;
	}

	.pe-shop-detail-wrap {
		/* The theme's mobile header runs shorter than desktop. */
		padding-top: 110px;
	}
}

/**
 * ============================================================
 * Önálló kosár/megrendelő oldal (2026-07-20, Shop\CartPageController)
 * ============================================================
 * Szándékosan UGYANAZOK az osztálynevek, mint a Gallery saját
 * ?gallery_cart= oldalán (gallery/assets/gallery/css/gallery.css) — a user
 * kifejezett kérése, hogy a két felület dizájnban azonos legyen, hogy a
 * vásárló sose érezze úgy, két különböző rendszerben van. A szabályok
 * ide MÁSOLVA vannak (nem megosztott fájlból importálva), mert a Store
 * pluginnak Gallery nélkül is önállóan kell működnie — l. CartPageController
 * saját docblockja. Ha itt módosítasz valamit, a Gallery oldali eredetit
 * (gallery.css ugyanezen szabályai) is frissítsd, hogy ne csússzanak szét.
 */
.gallery-btn {
	background: #1d2327;
	color: #fff;
	border: none;
	border-radius: 4px;
	padding: 10px 20px;
	font-size: 14px;
	cursor: pointer;
}

.gallery-btn:hover {
	background: #2c3338;
}

.gallery-btn:disabled {
	background: #c3c4c7;
	color: #000 !important;
	opacity: 1 !important;
	cursor: not-allowed;
}

.gallery-btn:disabled:hover {
	background: #c3c4c7;
}

.gallery-btn[hidden] {
	display: none !important;
}

.gallery-btn-secondary {
	background: #fff;
	color: #1d2327;
	border: 1px solid #c3c4c7;
}

.gallery-btn-secondary:hover {
	background: #f0f0f1;
}

.gallery-cart-wrap {
	max-width: 900px;
	margin: 0 auto;
	padding: 40px 32px 100px;
	color: #1d2327;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	justify-content: center;
	box-sizing: border-box;
}

.gallery-cart-header {
	margin-bottom: 24px;
}

.gallery-cart-back {
	display: inline-block;
	margin-bottom: 8px;
	color: #767c82;
	font-size: 13px;
	text-decoration: none;
}

.gallery-cart-back:hover {
	text-decoration: underline;
}

.gallery-cart-header h1 {
	margin: 0;
	font-size: 32px;
	font-weight: 600;
}

.gallery-cart-empty {
	text-align: center;
	padding: 60px 0;
	color: #767c82;
}

.gallery-cart-line {
	display: flex;
	gap: 14px;
	align-items: flex-start;
	padding: 16px 0;
	border-bottom: 1px solid #ececec;
}

.gallery-cart-line-thumbs {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	width: 92px;
	flex-shrink: 0;
}

.gallery-cart-line-thumbs img {
	width: 44px;
	height: 44px;
	object-fit: cover;
	border-radius: 4px;
}

.gallery-cart-line-thumbs-more {
	width: 44px;
	height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #f0f0f1;
	border-radius: 4px;
	font-size: 12px;
	color: #50575e;
}

.gallery-cart-line-info {
	flex: 1;
}

.gallery-cart-line-name {
	font-weight: 600;
	margin-bottom: 4px;
}

.gallery-cart-line-options {
	font-size: 13px;
	color: #767c82;
	margin-bottom: 6px;
}

.gallery-cart-line-bundle-contents {
	list-style: none;
	margin: 0 0 6px;
	padding: 0;
	font-size: 13px;
	color: #767c82;
}

.gallery-cart-line-bundle-contents li {
	display: flex;
	justify-content: space-between;
	gap: 10px;
	padding: 2px 0;
}

.gallery-cart-line-meta {
	display: flex;
	align-items: center;
	gap: 12px;
}

.gallery-cart-line-price {
	font-size: 14px;
}

.gallery-cart-line-price-original {
	color: #8a8f98;
	text-decoration: line-through;
	font-size: 0.9em;
}

.gallery-cart-line-price-sale {
	color: #d63638;
}

.gallery-cart-line-remove {
	width: 26px;
	height: 26px;
	padding: 0;
	border: 1px solid #d63638;
	border-radius: 50%;
	background: #fff;
	color: #d63638;
	font-size: 14px;
	line-height: 1;
	cursor: pointer;
}

.gallery-cart-coupon-box {
	margin: 16px 0;
	padding: 16px;
	border: 1px solid #dcdfe4;
	border-radius: 6px;
}

.gallery-cart-coupon-box label {
	display: block;
	font-size: 13px;
	font-weight: 600;
	color: #50575e;
	margin-bottom: 8px;
}

.gallery-cart-coupon-row {
	display: flex;
	gap: 8px;
}

.gallery-cart-coupon-row input[type="text"] {
	flex: 1;
}

.gallery-cart-coupon-row .gallery-btn {
	padding: 8px 16px;
}

.gallery-cart-coupon-message {
	font-size: 13px;
	margin: 8px 0 0;
}

.gallery-cart-coupon-message--success {
	color: #00a32a;
}

.gallery-cart-coupon-message--error {
	color: #d63638;
}

.gallery-cart-totals {
	margin: 20px 0;
	padding-top: 16px;
	border-top: 2px solid #1d2327;
}

.gallery-cart-total-row {
	display: flex;
	justify-content: space-between;
	padding: 4px 0;
	font-size: 14px;
}

.gallery-cart-total-row--grand {
	font-size: 18px;
	font-weight: 600;
	margin-top: 6px;
}

#store-checkout-form h3 {
	margin: 28px 0 12px;
	font-size: 16px;
}

.gallery-cart-field-row {
	display: block;
}

.gallery-cart-field-row label,
.gallery-cart-field-full {
	display: block;
	font-size: 13px;
	font-weight: 600;
	color: #50575e;
	margin-bottom: 16px;
}

.gallery-cart-field-row input,
.gallery-cart-field-full input,
.gallery-cart-field-full textarea {
	display: block;
	width: 100% !important;
	margin-top: 4px;
	padding: 8px 10px;
	border: 1px solid #c3c4c7;
	border-radius: 4px;
	font-size: 14px;
	font-family: inherit;
	box-sizing: border-box;
}

.gallery-cart-field-full textarea {
	min-height: 70px;
	resize: vertical;
}

.gallery-cart-delivery-methods {
	margin-bottom: 12px;
}

.gallery-cart-radio-label {
	display: block;
	margin-bottom: 8px;
	font-size: 14px;
}

.gallery-cart-checkbox-label {
	display: block;
	margin: 16px 0;
	font-size: 13px;
}

/* Gyártási tájékoztató (2026-07-23) — JS-ből kap `hidden`-t, ha a kosárban
 * nincs egyedi gyártású fizikai tétel, l. CartPageController render_cart()/
 * render_cart_script() docblockjait. */
.gallery-manufacturing-disclaimer {
	margin: 20px 0;
	padding: 16px 18px;
	background: #fff8e5;
	border: 1px solid #f0c36d;
	border-radius: 8px;
}

.gallery-manufacturing-disclaimer-text {
	font-size: 13px;
	line-height: 1.5;
}

.gallery-manufacturing-disclaimer-text p:last-child {
	margin-bottom: 0;
}

.gallery-manufacturing-disclaimer .gallery-cart-checkbox-label {
	margin: 8px 0 0;
	font-weight: 600;
}

.gallery-cart-submit {
	width: 100%;
}

.gallery-cart-order-btn {
	display: block;
	width: 100%;
	margin: 20px 0;
	padding: 14px 20px;
	font-size: 16px;
}

.gallery-cart-thanks {
	text-align: center;
	padding: 60px 0;
}

.gallery-cart-delivery-section {
	margin: 20px 0;
	padding-top: 16px;
	border-top: 1px solid #ececec;
}

.gallery-cart-delivery-section h3 {
	margin: 0 0 12px;
	font-size: 16px;
}

#store-checkout-wizard {
	max-width: 400px;
	margin: 0 auto;
}

.gallery-wizard-step-indicator {
	margin: 0 0 16px;
	font-size: 13px;
	color: #767c82;
	text-align: center;
}

.gallery-wizard-step h3:first-child {
	margin-top: 0;
}

.gallery-wizard-summary p {
	margin: 6px 0;
	font-size: 14px;
	text-align: left;
}

.gallery-wizard-summary p strong {
	display: inline-block;
	min-width: 140px;
}

.gallery-wizard-nav {
	display: flex;
	gap: 12px;
	margin-top: 24px;
}

.gallery-wizard-nav .gallery-btn {
	flex: 1;
}

/* A téma saját fejléc-kosár-ikonja (BeBuilder header-sablon) alá szúrt
 * Ft-összeg felirat — JS-ből kerül be (ShopPageController::render_cart_ui()),
 * mert maga a fejléc-elem nem a Store plugin markupja. A `.store-header-
 * cart-link` osztályt maga a JS rakja rá a talált linkre (href alapján
 * azonosítva, l. headerCartTotalEls() docblokkja) — nem a téma saját
 * osztálynevére támaszkodunk, mert az a fejléc-menü átszerkesztésekor
 * (BeBuilder) bármikor megváltozhat. */
.store-header-cart-link {
	position: relative;
}

.store-header-cart-total {
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translateX(-50%);
	margin-top: 4px;
	white-space: nowrap;
	font-size: 11px;
	line-height: 1;
	color: inherit;
	pointer-events: none;
}

/* Kosár-darabszám badge a fejléc-kosár ikon jobb felső sarkában (2026-07-22,
 * user kérése: "a kosár ikonnál az összegen kívül a jobb felső sarokban
 * jelenjen meg egy badge számláló is") — ugyanaz a vizuális minta, mint a
 * Gallery saját .gallery-badge-je. */
.store-header-cart-badge {
	position: absolute;
	top: -5px;
	right: -5px;
	min-width: 15px;
	height: 15px;
	padding: 0 3px;
	box-sizing: border-box;
	border: 1.5px solid #fff;
	border-radius: 8px;
	background: #1d2327;
	color: #fff;
	font-size: 10px;
	font-weight: 600;
	line-height: 12px;
	text-align: center;
	pointer-events: none;
}

/* "Repülő" termékfotó animáció a Kosárba gombra kattintva (2026-07-22, user
 * kérése: "szeretném, ha a fenti kosár ikonhoz repülne a termék fotója,
 * mintha bele repítenénk. Úgy mint a galériánál") — a landolás-pulzálás
 * ugyanaz a minta, mint a Gallery .gallery-cart-icon-wrap.is-landing-je. */
@keyframes store-header-cart-landing-bounce {
	0% { transform: scale(1); }
	40% { transform: scale(1.35); }
	100% { transform: scale(1); }
}

/* A .icon-wrapper-t animáljuk (a téma saját, az ikont körülölelő eleme),
 * NEM magát a linket — utóbbi tartalmazza a badge-et és az összeg-feliratot
 * is JS-ből beszúrva, amiket nem szeretnénk együtt "pulzáltatni" az ikonnal. */
.store-header-cart-link.is-landing .icon-wrapper {
	animation: store-header-cart-landing-bounce 0.3s ease;
}