/* ====================================================================
   POS PRO — THE BUTTON SYSTEM, IN ONE PLACE.

   WHY (Attila, 2026-09-16: "ugyanígy egységesíteni kell a gombok stílusát
   is"). Measured live the same day, 1440 px, every surface:

     - the SAME filled button at 35, 42, 43, 45, 47, 48, 56 and 58 px high,
       with 12 / 13 px corners, 10 × 16 to 17 × 17 px padding;
     - outlines of 1 px white, 1 px grey, 1 px ink and 2 px orange;
     - Elementor's kit corner `0 0 15px 0` on the front page's hero and tile
       buttons, a pill (50 px) on the newsletter button, 6 px on Complianz's
       blue (#3B29FF) accept button, 6 px and a darker orange (#B35A00) on
       the checkout's mobile pay bar;
     - the shop's button rules written three times: `bolt.css`, `oldal.css`
       and the header template's own Custom CSS (a verbatim, older copy).

   THE SYSTEM (the Claude Design redesign's buttons, in the brand's orange):

     role        background        text        border
     primary     #F29421 → #D97F12 #fff        —
     outline     #fff → tint       #F29421     2 px #F29421
     white       #fff → tint       #F29421     —            (on a coloured band)
     white line  transparent       #fff        2 px #fff    (on a coloured band)
     grey line   transparent       kit grey    2 px grey    (on a light band)
     neutral     #fff              ink         1 px line    (small list actions)

     size   height  side padding  type
     sm     44 px   16 px         14 / 800
     md     48 px   20 px         15 / 800   ← the default
     lg     56 px   28 px         17 / 800

   One corner for all of them: 13 px. Pills (999 px) are for chips, badges
   and the floating filter button, never for a button in a row.

   WHERE THE NUMBERS LIVE. These tokens. The Elementor kit's button defaults
   point at them (corner and padding with the `custom` unit, the colours
   through the global palette), every Elementor button widget takes the
   kit's look plus, where it is not a primary button, ONE class from below
   (`posgy-gomb-korvonal`, `-feher`, `-feher-korvonal`, `-szurke-korvonal`,
   `-kicsi`, `-nagy`),
   and every posgy stylesheet reads the same tokens. Type sizes come from
   `tipografia.css`.
   ==================================================================== */

:root {
	--posgy-btn-bg: #F29421;
	--posgy-btn-bg-hover: #D97F12;
	--posgy-btn-fg: #fff;
	/* The hover wash of the outline and white buttons. */
	--posgy-btn-tint: #FDF3E6;
	--posgy-btn-line: #E4DCCE;
	--posgy-btn-radius: 13px;
	--posgy-btn-border: 2px;

	--posgy-btn-h: 48px;
	--posgy-btn-py: 12px;
	--posgy-btn-px: 20px;
	--posgy-btn-h-sm: 44px;
	--posgy-btn-px-sm: 16px;
	--posgy-btn-h-lg: 56px;
	--posgy-btn-px-lg: 28px;
}

/* ====================================================================
   ELEMENTOR BUTTONS — the kit gives the colours, corner and padding (from
   the tokens above); this gives every button the same height and centres
   its label, whatever the widget's own `size` preset says.
   ==================================================================== */
.elementor-widget-button .elementor-button,
.elementor-widget-form .elementor-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: var(--posgy-btn-h);
	padding-block: 0;
	line-height: 1.2;
	letter-spacing: 0;
	text-transform: none;
	transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}

/* THE PRIMARY COLOURS, HERE AND NOT ONLY IN THE KIT. Elementor's button and
   form widgets carry their own default — `background-color:
   var(--e-global-color-accent)`, the kit's unused template green (#61CE70),
   at (0,2,0) — which beats the kit's button rule. Measured live on 0.20.0:
   "Összes termék", "Kapcsolatfelvétel" and "Feliratkozom" turned green the
   moment their local orange was removed. `body` puts these at (0,2,1): on
   the archive the widget default is printed AFTER this sheet (measured on
   0.20.1), so an equal (0,2,0) lost there. The form widget's own rule is
   `.elementor-widget-form .elementor-button[type="submit"]` (0,3,0) — named
   here with `body` too. The role classes below are (0,3,0) and still win
   over the button widget's line. */
body .elementor-widget-button .elementor-button,
body .elementor-widget-form .elementor-button,
body .elementor-widget-form .elementor-button[type="submit"] {
	background-color: var(--posgy-btn-bg);
	color: var(--posgy-btn-fg);
}

body .elementor-widget-button .elementor-button:is(:hover, :focus-visible),
body .elementor-widget-form .elementor-button:is(:hover, :focus-visible),
body .elementor-widget-form .elementor-button[type="submit"]:is(:hover, :focus-visible) {
	background-color: var(--posgy-btn-bg-hover);
	color: var(--posgy-btn-fg);
}

/* A full-width ("justify") button keeps its full width as a flex box. */
.elementor-widget-button.elementor-align-justify .elementor-button {
	display: flex;
}

/* --- Sizes --- */
.elementor-widget-button.posgy-gomb-kicsi .elementor-button {
	min-height: var(--posgy-btn-h-sm);
	padding-inline: var(--posgy-btn-px-sm);
	font-size: var(--posgy-fs-button-sm);
}

.elementor-widget-button.posgy-gomb-nagy .elementor-button {
	min-height: var(--posgy-btn-h-lg);
	padding-inline: var(--posgy-btn-px-lg);
	font-size: var(--posgy-fs-button-lg);
}

/* --- Roles. The kit's own hover rule is (0,3,0); these are (0,3,0) for the
       resting state and (0,4,0) for hover, printed after it. --- */
.elementor-widget-button.posgy-gomb-korvonal .elementor-button {
	background: #fff;
	color: var(--posgy-btn-bg);
	border: var(--posgy-btn-border) solid var(--posgy-btn-bg);
}

.elementor-widget-button.posgy-gomb-korvonal .elementor-button:is(:hover, :focus-visible) {
	background: var(--posgy-btn-tint);
	color: var(--posgy-btn-bg);
	border-color: var(--posgy-btn-bg);
}

.elementor-widget-button.posgy-gomb-feher .elementor-button {
	background: #fff;
	color: var(--posgy-btn-bg);
	border: 0;
}

.elementor-widget-button.posgy-gomb-feher .elementor-button:is(:hover, :focus-visible) {
	background: var(--posgy-btn-tint);
	color: var(--posgy-btn-bg);
}

.elementor-widget-button.posgy-gomb-feher-korvonal .elementor-button {
	background: transparent;
	color: #fff;
	border: var(--posgy-btn-border) solid #fff;
}

.elementor-widget-button.posgy-gomb-feher-korvonal .elementor-button:is(:hover, :focus-visible) {
	background: rgba(255, 255, 255, .16);
	color: #fff;
	border-color: #fff;
}

/* The white line's twin for a LIGHT band: the front page's grey "Pop Up
   falak" tile, whose heading and text are the kit's text grey. Every tile's
   button is a line in its tile's text colour; this one was a grey line until
   0.20.0 gave it the orange outline, and the row lost its pattern (Attila,
   2026-09-17: "pop up falak a gomb stílusa elment"). The grey is the kit's
   global, the one the tile's heading reads. */
.elementor-widget-button.posgy-gomb-szurke-korvonal .elementor-button {
	background: transparent;
	color: var(--e-global-color-text, #52555A);
	border: var(--posgy-btn-border) solid var(--e-global-color-text, #52555A);
}

.elementor-widget-button.posgy-gomb-szurke-korvonal .elementor-button:is(:hover, :focus-visible) {
	background: color-mix(in srgb, var(--e-global-color-text, #52555A) 12%, transparent);
	color: var(--e-global-color-text, #52555A);
	border-color: var(--e-global-color-text, #52555A);
}

/* The icon (the hero's chevron and phone) takes the label's colour. */
.elementor-widget-button[class*="posgy-gomb-"] .elementor-button .elementor-button-icon svg {
	fill: currentColor;
}

/* ====================================================================
   WOOCOMMERCE AND THE SEARCH PANEL — moved here from `bolt.css` (and the
   header template's Custom CSS, which carried an older copy) so that it
   holds on every page the search panel can open on, not only shop pages.
   The `!important`s are the directive's own, unchanged: WooCommerce and
   Elementor style these buttons through element-id rules.
   ==================================================================== */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce .single_add_to_cart_button,
.woocommerce .add_to_cart_button,
.dgwt-wcas-details-wrapp .add_to_cart_button,
.dgwt-wcas-details-wrapp .single_add_to_cart_button,
.dgwt-wcas-suggestions-wrapp .add_to_cart_button {
	background: var(--posgy-btn-bg) !important;
	color: var(--posgy-btn-fg) !important;
	border: 0 !important;
	border-radius: var(--posgy-btn-radius) !important;
	min-height: var(--posgy-btn-h) !important;
	align-items: center;
	justify-content: center;
	font-size: var(--posgy-fs-button) !important;
	font-weight: 800 !important;
	line-height: 1.25 !important;
	text-transform: none !important;
	letter-spacing: 0 !important;
	padding: var(--posgy-btn-py) var(--posgy-btn-px) !important;
	box-shadow: none !important;
	text-decoration: none !important;
	transition: background-color .15s ease;
}

.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce .single_add_to_cart_button:hover,
.woocommerce .add_to_cart_button:hover,
.dgwt-wcas-details-wrapp .add_to_cart_button:hover,
.dgwt-wcas-suggestions-wrapp .add_to_cart_button:hover {
	background: var(--posgy-btn-bg-hover) !important;
	color: var(--posgy-btn-fg) !important;
}

/* LINKS CENTRE THEIR LABEL ONLY AS FLEX BOXES. A `<button>` centres its
   content by itself; an `<a>` with a minimum height puts the label at the top
   of the box (measured: the front page's "Kosárba teszem"). `<button>`s are
   left alone on purpose — the product page's add-to-cart stacks its label
   and price in a column of its own (`termek.css`). */
.woocommerce a.button,
.woocommerce a.add_to_cart_button,
.dgwt-wcas-details-wrapp a.add_to_cart_button,
.dgwt-wcas-suggestions-wrapp a.add_to_cart_button {
	display: inline-flex !important;
}

/* The outline: "Vásárlás folytatása" and the other way-back links. */
.woocommerce a.button.wc-backward,
.woocommerce a.button.wc-forward:not(.checkout) {
	background: #fff !important;
	color: var(--posgy-btn-bg) !important;
	border: var(--posgy-btn-border) solid var(--posgy-btn-bg) !important;
}

.woocommerce a.button.wc-backward:hover,
.woocommerce a.button.wc-forward:not(.checkout):hover {
	background: var(--posgy-btn-tint) !important;
	color: var(--posgy-btn-bg) !important;
}

/* The block cart and block checkout's own buttons. */
.wc-block-components-button.wc-block-cart__submit-button,
.wc-block-components-button.wc-block-components-checkout-place-order-button {
	background-color: var(--posgy-btn-bg) !important;
	color: var(--posgy-btn-fg) !important;
	border: 0 !important;
	border-radius: var(--posgy-btn-radius) !important;
}

.wc-block-components-button.wc-block-cart__submit-button:hover,
.wc-block-components-button.wc-block-components-checkout-place-order-button:hover {
	background-color: var(--posgy-btn-bg-hover) !important;
}

/* ====================================================================
   THE HEADER'S MINI CART — moved here from `oldal.css`. "Pénztár" is the
   primary, "Kosár" the outline; both carry a 2 px border so the two boxes
   stay the same height side by side. The widget styles them through the
   template's element id, hence the `!important`s (measured 2026-08-30).
   ==================================================================== */
.elementor-menu-cart__footer-buttons a.elementor-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: var(--posgy-btn-radius) !important;
	min-height: var(--posgy-btn-h);
	font-weight: 800 !important;
	text-transform: none !important;
	letter-spacing: 0 !important;
}

.elementor-menu-cart__footer-buttons a.elementor-button--checkout {
	background-color: var(--posgy-btn-bg) !important;
	border: var(--posgy-btn-border) solid var(--posgy-btn-bg) !important;
	color: var(--posgy-btn-fg) !important;
}

.elementor-menu-cart__footer-buttons a.elementor-button--checkout:hover {
	background-color: var(--posgy-btn-bg-hover) !important;
	border-color: var(--posgy-btn-bg-hover) !important;
}

/* The label sits in an inner `<span>` with its own white: colouring the
   link alone left "Kosár" invisible on white (measured 2026-08-30). */
.elementor-menu-cart__footer-buttons a.elementor-button--view-cart,
.elementor-menu-cart__footer-buttons a.elementor-button--view-cart .elementor-button-text {
	background-color: #fff !important;
	border-color: var(--posgy-btn-bg) !important;
	color: var(--posgy-btn-bg) !important;
}

.elementor-menu-cart__footer-buttons a.elementor-button--view-cart {
	border: var(--posgy-btn-border) solid var(--posgy-btn-bg) !important;
}

.elementor-menu-cart__footer-buttons a.elementor-button--view-cart .elementor-button-text {
	background-color: transparent !important;
}

.elementor-menu-cart__footer-buttons a.elementor-button--view-cart:hover {
	background-color: var(--posgy-btn-tint) !important;
}

/* The header's cart button: the kit's padding would make it wider than the
   design's 0 16 px; its type is the button's (the template set 600, caps). */
.elementor-location-header .elementor-menu-cart__toggle_button.elementor-button {
	padding: 0 16px !important;
	font-weight: 800 !important;
	text-transform: none !important;
	letter-spacing: 0 !important;
}

/* ====================================================================
   COMPLIANZ — the banner's buttons read their colours and corner from
   variables on `:root`, printed AFTER this sheet. Set on the banner
   element itself, the variables win without `!important`: accept is the
   primary, deny and preferences the outline. The blue links and switches
   (Complianz's default #3B29FF) take the site's link ink and orange.
   ==================================================================== */
body .cmplz-cookiebanner {
	--cmplz_button_accept_background_color: var(--posgy-btn-bg);
	--cmplz_button_accept_border_color: var(--posgy-btn-bg);
	--cmplz_button_accept_text_color: var(--posgy-btn-fg);
	--cmplz_button_deny_background_color: #fff;
	--cmplz_button_deny_border_color: var(--posgy-btn-bg);
	--cmplz_button_deny_text_color: var(--posgy-btn-bg);
	--cmplz_button_settings_background_color: #fff;
	--cmplz_button_settings_border_color: var(--posgy-btn-bg);
	--cmplz_button_settings_text_color: var(--posgy-btn-bg);
	--cmplz_button_border_radius: var(--posgy-btn-radius);
	--cmplz_button_font_size: var(--posgy-fs-button);
	--cmplz_hyperlink_color: #B35A00;
	--cmplz_slider_active_color: var(--posgy-btn-bg);
}

body .cmplz-cookiebanner .cmplz-buttons .cmplz-btn {
	min-height: var(--posgy-btn-h);
}

/* Complianz writes the border per role as a shorthand at (0,4,0). */
body .cmplz-cookiebanner .cmplz-buttons .cmplz-btn:is(.cmplz-accept, .cmplz-deny, .cmplz-view-preferences, .cmplz-save-preferences, .cmplz-manage-options) {
	border-width: var(--posgy-btn-border);
}

body .cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-accept:hover {
	--cmplz_button_accept_background_color: var(--posgy-btn-bg-hover);
	--cmplz_button_accept_border_color: var(--posgy-btn-bg-hover);
}

body .cmplz-cookiebanner .cmplz-buttons .cmplz-btn:is(.cmplz-deny, .cmplz-view-preferences, .cmplz-save-preferences):hover {
	background-color: var(--posgy-btn-tint);
}

/* ====================================================================
   WETK — the guided configurator's "Tovább" / "Vissza". wetk ships its own
   neutral 4 px buttons (it is sold separately); on this shop they are the
   site's small primary and outline. The chain is wetk's (0,3,1) plus one.
   ==================================================================== */
body .wetk-configurator.wetk-guided .wetk-guided-nav button {
	min-height: var(--posgy-btn-h-sm);
	padding: 0 var(--posgy-btn-px-sm);
	border-radius: var(--posgy-btn-radius);
	border: var(--posgy-btn-border) solid var(--posgy-btn-bg);
	background: #fff;
	color: var(--posgy-btn-bg);
	font-size: var(--posgy-fs-button-sm);
	font-weight: 800;
}

body .wetk-configurator.wetk-guided .wetk-guided-nav button.wetk-guided-next {
	background: var(--posgy-btn-bg);
	color: var(--posgy-btn-fg);
}

body .wetk-configurator.wetk-guided .wetk-guided-nav button.wetk-guided-next:hover {
	background: var(--posgy-btn-bg-hover);
	border-color: var(--posgy-btn-bg-hover);
}