/*
Theme Name: Neve HelloFoto
Theme URI: https://hellofoto.hu
Description: A HelloFoto.hu gyermektéma a Neve alapon. A márka „bőre" (magenta, brosúra-paletta, Barlow Condensed + Rubik, matrica-címek) és minden, ami a szülői folyamathoz kell: kódbevitel, galéria- és pénztárolvashatóság, mobil-first tipográfia.
Author: Földházi Árpád
Template: neve
Version: 0.2.0
Text Domain: neve-hellofoto
*/

/* ==========================================================================
   Betűk — saját tárhelyről (landing/fonts), latin + latin-ext (ő/ű).
   Ugyanezek a fájlok a bemutatóoldal landing.css-ében is szerepelnek: az az oldal
   ezt a stíluslapot nem tölti be, ezért ott külön kell deklarálni.
   Barlow Condensed 700: címek, gombok, menü (a brosúra DIN Condensed Bold betűjének
   szabad megfelelője). Rubik 400/500/700: szöveg.
   ========================================================================== */

@font-face{font-family:'Barlow Condensed';font-style:normal;font-weight:700;font-display:swap;src:url(landing/fonts/barlow-condensed-700-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Barlow Condensed';font-style:normal;font-weight:700;font-display:swap;src:url(landing/fonts/barlow-condensed-700-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Rubik';font-style:normal;font-weight:400;font-display:swap;src:url(landing/fonts/rubik-400-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Rubik';font-style:normal;font-weight:400;font-display:swap;src:url(landing/fonts/rubik-400-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Rubik';font-style:normal;font-weight:500;font-display:swap;src:url(landing/fonts/rubik-500-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Rubik';font-style:normal;font-weight:500;font-display:swap;src:url(landing/fonts/rubik-500-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Rubik';font-style:normal;font-weight:700;font-display:swap;src:url(landing/fonts/rubik-700-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Rubik';font-style:normal;font-weight:700;font-display:swap;src:url(landing/fonts/rubik-700-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}

/* ==========================================================================
   Tokenek — a márka hivatalos kódjai (design_guidelines.png) + a szülői felület
   funkcionális színei. A designdöntés változatlan: nem szép, hanem átlátható —
   a márka a színeket és a betűket adja, a szerkezetet (nagy célfelületek, erős
   kontraszt, gombszerű fülek) nem írja felül.
   Ugyanezek a Neve Testreszabás palettájában (--nv-*) és a levélkeretben
   (IFC_Mail konstansok) — ha itt változik, ott is.
   ========================================================================== */

:root {
	/* márka */
	--hf-accent: #e6007a;        /* magenta — a fő szín: gombok, linkek, kiemelések */
	--hf-accent-dark: #c2006a;   /* hover */
	--hf-yellow: #ffd33d;        /* vajsárga — fekete szöveggel */
	--hf-purple: #4b1d72;        /* mélylila — krém szöveggel */
	--hf-purple-deep: #36124f;
	--hf-black: #111111;
	--hf-cream: #fff7e8;         /* krém — az oldal háttere */

	/* funkcionális */
	--hf-ink: #111111;           /* szöveg */
	--hf-muted: #5f5850;         /* másodlagos szöveg (meleg szürke, krémen is 6:1) */
	--hf-line: #e6dccb;          /* keret */
	--hf-bg-soft: #f6ead4;       /* halvány sáv (fülek sávja, gombsor, jegyzet) — a krémnél egy fokkal mélyebb */
	--hf-card: #ffffff;          /* kártya, mező — fehér a krémen */
	--hf-radius: 10px;
	--hf-focus: rgba(230, 0, 121, 0.28);

	/* betűk */
	--hf-head: "Barlow Condensed", "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
	--hf-body: "Rubik", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
}

::selection {
	background: var(--hf-accent);
	color: var(--hf-cream);
}

/* ==========================================================================
   Tipográfia — a Neve Testreszabás adja a családot és a méreteket
   (Rubik törzs, Barlow Condensed címek, nagybetűs h1–h4); itt csak az, amit a
   Neve nem ér el: a Sunshine és a blokkok címei, a menü és a gombok betűje.
   ========================================================================== */

h1, h2, h3, h4, h5, h6,
.nv-title,
#sunshine h1, #sunshine h2, #sunshine h3,
#sunshine--modal h2, #sunshine--modal h3 {
	font-family: var(--hf-head);
	font-weight: 700;
	letter-spacing: 0.01em;
}

/* A menü a landing navigációja: Barlow Condensed, nagybetűs, kissé ritkított. */
.primary-menu-ul a {
	font-family: var(--hf-head);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

/* ==========================================================================
   Gombok — a márka gombja: magenta pirula, Barlow Condensed nagybetűvel
   (a landing .hf-btn mintája). A színt és a lekerekítést a Neve Testreszabás
   gomb-beállítása is adja; itt a betű és a Sunshine gombjai.
   A Rubik-szövegre vonatkozó „ne nagybetűsíts" szabály a gombokra NEM áll: a
   Barlow Condensed nagybetűs matrica a márka része, ékezetes nagybetűvel is jól
   olvasható (a landingen Árpád jóváhagyta).
   ========================================================================== */

.button,
.wp-block-button__link,
.sunshine--button,
.hf-btn,
.hf-code-box input[type="submit"],
.hf-code-box button[type="submit"],
.hf-reminder .hf-reminder__button,
.hf-lost-code-link,
.hf-reminder__write,
.nv-navbar .menu-item-nav-button > a,
.header-menu-sidebar .menu-item-nav-button > a {
	font-family: var(--hf-head);
	font-weight: 700;
	text-transform: uppercase !important;
	letter-spacing: 0.05em;
	line-height: 1;
}

/* A Sunshine saját gombja (Kosárba, Tovább, Rendelés…): a témáé (a Sunshine sötétszürke
   3px-es gombja helyett). A `.sunshine-photo-cart .sunshine--button` a plugin szelektora. */
.sunshine-photo-cart .sunshine--button,
#sunshine .sunshine--button,
#sunshine--modal .sunshine--button {
	background: var(--hf-accent);
	color: var(--hf-cream);
	border: 0;
	border-radius: 999px;
	padding: 14px 24px 12px;
	font-family: var(--hf-head);
	font-size: 18px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0.05em;
	text-transform: uppercase !important;
	box-shadow: 0 10px 26px -12px rgba(230, 0, 121, 0.7);
	transition: background 0.2s, box-shadow 0.2s, transform 0.2s;
}

.sunshine-photo-cart .sunshine--button:hover,
.sunshine-photo-cart .sunshine--button:focus-visible,
#sunshine .sunshine--button:hover,
#sunshine--modal .sunshine--button:hover {
	background: var(--hf-accent-dark);
	color: var(--hf-cream);
	box-shadow: 0 14px 30px -12px rgba(230, 0, 121, 0.8);
}

/* Másodlagos Sunshine-gomb (vissza, mégse): keretes pirula, magenta betűvel. */
.sunshine-photo-cart .sunshine--button-alt,
#sunshine #sunshine-submit,
#sunshine--modal .sunshine--button-alt {
	background: transparent;
	color: var(--hf-accent);
	border: 2px solid var(--hf-accent);
	border-radius: 999px;
	padding: 11px 20px 9px;
	font-family: var(--hf-head);
	font-size: 16px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0.05em;
	text-transform: uppercase !important;
}

.sunshine-photo-cart .sunshine--button-alt:hover,
#sunshine #sunshine-submit:hover,
#sunshine--modal .sunshine--button-alt:hover {
	background: var(--hf-accent);
	color: var(--hf-cream);
}

/* A Sunshine link-gombjai (Összes kép digitálisan, Irány a bolt, Vissza…): magenta link. */
.sunshine-photo-cart .sunshine--button-link,
.sunshine-photo-cart .sunshine--button-link:hover,
#sunshine .sunshine--open-modal {
	color: var(--hf-accent) !important;
}

.sunshine-photo-cart .sunshine--button-link:hover {
	color: var(--hf-accent-dark) !important;
	text-decoration: underline;
}

/* Fókusz billentyűzetről — mindenütt ugyanaz a magenta gyűrű. */
.button:focus-visible,
.sunshine--button:focus-visible,
.hf-family-bar__chip:focus-visible,
.hf-family-bar__add:focus-visible,
.hf-lost-code-link:focus-visible,
.hf-reminder__write:focus-visible {
	outline: 3px solid var(--hf-focus);
	outline-offset: 2px;
}

/* ==========================================================================
   Matricák — a brosúra címkéi (a landing .stk osztálya, változatlan névvel,
   hogy a bemutatkozó oldalak és a landing ugyanazt használják).
   Kis, szabálytalan, enyhén elforgatott színes doboz a nagy címeknél.
   ========================================================================== */

.stk {
	display: inline-block;
	font-family: var(--hf-head);
	font-weight: 700;
	text-transform: uppercase;
	line-height: 1;
	letter-spacing: 0.01em;
	padding: 0.16em 0.42em 0.1em;
	background: var(--stk-bg, var(--hf-yellow));
	color: var(--stk-ink, var(--hf-ink));
	transform: rotate(var(--tilt, -2deg));
	box-shadow: 0 0.1em 0 rgba(0, 0, 0, 0.08);
	text-decoration: none;
}

.stk--y  { --stk-bg: var(--hf-yellow); --stk-ink: var(--hf-ink); }
.stk--yp { --stk-bg: var(--hf-yellow); --stk-ink: var(--hf-purple); }
.stk--m  { --stk-bg: var(--hf-accent); --stk-ink: var(--hf-cream); }
.stk--p  { --stk-bg: var(--hf-purple); --stk-ink: var(--hf-cream); }
.stk--py { --stk-bg: var(--hf-purple); --stk-ink: var(--hf-yellow); }
.stk--k  { --stk-bg: var(--hf-black);  --stk-ink: var(--hf-cream); }
.stk--c  { --stk-bg: var(--hf-cream);  --stk-ink: var(--hf-ink); }
.stk--cp { --stk-bg: var(--hf-cream);  --stk-ink: var(--hf-purple); }

/* Címsor matricákból: minden sor külön doboz (a landing .ttl .ln mintája). */
.hf-ttl .ln {
	display: block;
	margin: 0.06em 0;
	padding: 0.06em 0;
}

.hf-ttl .stk {
	padding: 0.14em 0.4em 0.08em;
}

/* Váltogatott hátterű szakaszok a bemutatkozó oldalakhoz (blokk-csoportra tehető
   osztályok). Egymás után ne ismétlődjön ugyanaz a háttér. */
.hf-sec--cream  { background: var(--hf-cream);  color: var(--hf-ink); }
.hf-sec--yellow { background: var(--hf-yellow); color: var(--hf-ink); }
.hf-sec--pink   { background: var(--hf-accent); color: var(--hf-cream); }
.hf-sec--black  { background: var(--hf-black);  color: var(--hf-cream); }
.hf-sec--purple { background: var(--hf-purple); color: var(--hf-cream); }

.hf-sec--pink a, .hf-sec--black a, .hf-sec--purple a { color: inherit; }
.hf-sec--pink h1, .hf-sec--pink h2, .hf-sec--pink h3,
.hf-sec--black h1, .hf-sec--black h2, .hf-sec--black h3,
.hf-sec--purple h1, .hf-sec--purple h2, .hf-sec--purple h3 { color: inherit; }

/* Sötét/színes háttéren a márka gombja krém-keretes (a landing .hf-btn--ghost mintája). */
.hf-btn--ghost,
.hf-sec--pink .sunshine--button,
.hf-sec--pink .wp-block-button__link {
	background: transparent;
	color: inherit;
	box-shadow: inset 0 0 0 2px currentColor;
}

/* ==========================================================================
   Kódbeviteli blokk — ez az oldal legfontosabb eleme.
   A szülő ezért jön ide; mindennek ezt kell szolgálnia.
   Fehér kártya a krém háttéren. A címe egyenes, lila Barlow, matrica nélkül
   (Árpád, 2026-10-31): a kártyán a mező és a magenta gomb a főszereplő.
   ========================================================================== */

.hf-code-box {
	background: var(--hf-card);
	border: 1px solid var(--hf-line);
	border-radius: 14px;
	padding: 28px 24px;
	max-width: 520px;
	margin: 0 auto;
	box-shadow: 0 18px 40px -28px rgba(17, 17, 17, 0.35);
}

.hf-code-box h2 {
	margin: 0 0 8px;
	font-family: var(--hf-head);
	font-size: 1.5rem;
	line-height: 1.1;
	text-transform: uppercase;
	color: var(--hf-purple);
}

.hf-code-box .hf-hint {
	color: var(--hf-muted);
	font-size: 0.95rem;
	margin: 0 0 18px;
}

/* A Sunshine jelszóűrlapja a shortcode-ból jön; itt hozzuk használható méretre. */
.hf-code-box form {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.hf-code-box input[type="text"],
.hf-code-box input[type="password"] {
	width: 100%;
	font-size: 1.35rem;
	/* A kód csak nagybetű + szám: a monospace segít az összetéveszthető
	   karaktereknél, a letter-spacing pedig a visszaolvasásnál. */
	font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	text-align: center;
	/* A text-transform a helykitöltőre is hat, ezért az önmagában is
	   nagybetűs példakódot adunk meg a sablonban. */
	padding: 16px 14px;
	border: 2px solid var(--hf-line);
	border-radius: var(--hf-radius);
	background: var(--hf-card);
	color: var(--hf-ink);
}

.hf-code-box input[type="text"]:focus,
.hf-code-box input[type="password"]:focus {
	border-color: var(--hf-accent);
	outline: 3px solid var(--hf-focus);
	outline-offset: 0;
}

.hf-code-box input[type="submit"],
.hf-code-box button[type="submit"],
.hf-code-box .sunshine--button {
	width: 100%;
	font-size: 1.25rem;
	padding: 16px 20px 14px;
	border: 0;
	border-radius: 999px;
	background: var(--hf-accent);
	color: var(--hf-cream);
	cursor: pointer;
	/* 48px feletti célfelület — hüvelykujjal, mozgó buszon is eltalálható. */
	min-height: 52px;
}

.hf-code-box input[type="submit"]:hover,
.hf-code-box button[type="submit"]:hover,
.hf-code-box .sunshine--button:hover {
	background: var(--hf-accent-dark);
}

/* ==========================================================================
   „Hogyan működik" lépések
   ========================================================================== */

.hf-steps {
	counter-reset: hf-step;
}

.hf-steps .hf-step h3 {
	counter-increment: hf-step;
	font-size: 1.35rem;
	margin: 0 0 8px;
}

.hf-steps .hf-step h3::before {
	content: counter(hf-step);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	margin-right: 10px;
	border-radius: 50%;
	background: var(--hf-accent);
	color: var(--hf-cream);
	font-family: var(--hf-head);
	font-size: 1.1rem;
	font-weight: 700;
	vertical-align: middle;
}

.hf-steps .hf-step p {
	color: var(--hf-muted);
	margin: 0;
}

/* ==========================================================================
   Fejléc — a „Galéria kódom" gomb mindig látszik, mobilon is.
   Ez a menüelem a .hf-nav-cta osztályt kapja a menükezelőben.
   ========================================================================== */

.hf-nav-cta > a {
	background: var(--hf-accent);
	color: var(--hf-cream) !important;
	border-radius: 999px;
	padding: 10px 18px !important;
	font-weight: 700;
}

.hf-nav-cta > a:hover {
	background: var(--hf-accent-dark);
}

/* ==========================================================================
   Mobil
   ========================================================================== */

@media (max-width: 600px) {
	.hf-code-box {
		padding: 22px 16px;
	}

	.hf-code-box h2 {
		font-size: 1.4rem;
	}

	.hf-code-box input[type="text"],
	.hf-code-box input[type="password"] {
		/* 16px alatt az iOS Safari ráközelít a mezőre fókuszáláskor. */
		font-size: 1.25rem;
	}
}

/* ==========================================================================
   Tipográfiai javítások a Neve alapértelmezésein
   ========================================================================== */

/* A Neve „capitalize"-t tesz a gombokra: magyarul ez helytelen címszedés lenne
   („Galéria Kódom"). A márka gombja nagybetűs Barlow Condensed (fent), ezért itt
   csak a Neve címszedését vesszük vissza — a Rubik-szövegre a „ne nagybetűsíts"
   szabály lentebb, a Sunshine-részben él. */
.button,
.wp-block-button__link,
.nv-navbar .menu-item-nav-button > a,
.header-menu-sidebar .menu-item-nav-button > a {
	text-transform: uppercase !important;
}

/* A fejléc CTA gombja mobilon is elférjen a hamburger mellett. */
@media (max-width: 600px) {
	.nv-navbar .menu-item-nav-button > a,
	.builder-item--button_base a {
		padding: 10px 14px !important;
		font-size: 0.95rem;
		/* Ne törjön két sorba: az kétszeresére növelné a fejléc magasságát
		   pont ott, ahol a legkevesebb a hely. */
		white-space: nowrap;
	}
}

/* ==========================================================================
   „Elveszett a kód" blokk (szinkronizált minta, ID 84)
   Szándékosan halkabb, mint a kódbeviteli doboz: ez a kiút, nem a főútvonal.
   ========================================================================== */

.hf-lost-code {
	border: 1px solid var(--hf-line);
	border-radius: 14px;
	padding: 22px 24px;
	max-width: 520px;
	margin: 32px auto 0;
	background: var(--hf-card);
}

.hf-lost-code h3 {
	margin: 0 0 10px;
	font-size: 1.25rem;
}

.hf-lost-code p {
	margin: 0 0 12px;
}

.hf-lost-code ul {
	margin: 0 0 16px;
	padding-left: 20px;
	color: var(--hf-muted);
}

.hf-lost-code li {
	margin-bottom: 4px;
}

/* Kódemlékeztető űrlap (IFC_Reminder, `[ifc_code_reminder]`): e-mail mező + gomb.
   A mező rendes betűvel áll (nem a kódmező nagybetűs, ritkított írásával), a gomb keretes —
   látható, de nem versenyez a „Megnézem a képeket" gombbal. */
.hf-reminder {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin: 0 0 14px;
}

.hf-reminder label {
	font-weight: 600;
	font-size: 0.95rem;
}

.hf-reminder input[type="email"] {
	width: 100%;
	/* 16px alatt az iPhone ráközelít a mezőre. */
	font-size: 1.05rem;
	padding: 14px;
	border: 2px solid var(--hf-line);
	border-radius: var(--hf-radius);
	background: var(--hf-card);
	box-sizing: border-box;
	min-height: 52px;
}

.hf-reminder input[type="email"]:focus {
	border-color: var(--hf-accent);
	outline: 3px solid var(--hf-focus);
	outline-offset: 0;
}

.hf-reminder .hf-reminder__button {
	width: 100%;
	min-height: 52px;
	padding: 14px 20px 12px;
	font-size: 1.1rem;
	border: 2px solid var(--hf-accent);
	border-radius: 999px;
	background: var(--hf-card);
	color: var(--hf-accent);
	cursor: pointer;
}

.hf-reminder .hf-reminder__button:hover,
.hf-reminder .hf-reminder__button:focus-visible {
	background: var(--hf-accent);
	color: var(--hf-cream);
}

/* Csapda a robotoknak: a képernyőn kívül, a felolvasó és a billentyűzet elől is elrejtve. */
.hf-reminder__trap {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* A kérés eredménye: a szülő egy pillantásból lássa, várja-e a levelet.
   Zöld, pipás sáv = megvan a címe, megy a levél; piros = nincs meg, tennie kell valamit.
   A színt ikon és szöveg is kíséri (színtévesztő szülő, fekete-fehér kijelző).
   A zöld/piros jelentése erősebb a márkánál — ezek nem márkaszínek, szándékosan. */
.hf-reminder__message {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	margin: 0 0 16px;
	padding: 14px;
	border-radius: var(--hf-radius);
	border: 2px solid #1a7f37;
	background: #e9f7ee;
	color: var(--hf-ink);
}

.hf-reminder__message--error {
	border-color: #c62828;
	background: #fdecec;
}

.hf-reminder__icon {
	flex: 0 0 auto;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: #1a7f37;
	color: #fff;
	font-weight: 700;
	font-size: 1rem;
	line-height: 28px;
	text-align: center;
}

.hf-reminder__message--error .hf-reminder__icon {
	background: #c62828;
}

.hf-reminder__body {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
}

.hf-reminder__body strong {
	font-size: 1.05rem;
	line-height: 1.35;
}

/* Levélíró gomb a piros sávban: a szülő rögtön írhasson. */
.hf-reminder__write {
	align-self: flex-start;
	display: inline-block;
	margin-top: 8px;
	padding: 13px 18px 11px;
	min-height: 44px;
	box-sizing: border-box;
	border: 2px solid #c62828;
	border-radius: 999px;
	background: #fff;
	color: #c62828;
	font-size: 1.05rem;
	text-decoration: none;
}

.hf-reminder__write:hover,
.hf-reminder__write:focus-visible {
	background: #c62828;
	color: #fff;
}

/* A levélírás gomb: látható, de nem versenyez a „Megnézem a képeket" gombbal. */
.hf-lost-code-link {
	display: inline-block;
	padding: 13px 20px 11px;
	border: 2px solid var(--hf-accent);
	border-radius: 999px;
	color: var(--hf-accent);
	font-size: 1.05rem;
	text-decoration: none;
	min-height: 44px;
	box-sizing: border-box;
}

.hf-lost-code-link:hover {
	background: var(--hf-accent);
	color: var(--hf-cream);
}

.hf-lost-code .hf-hint {
	margin: 12px 0 0;
	font-size: 0.9rem;
	color: var(--hf-muted);
}

/* ==========================================================================
   Sunshine: a márka színei a plugin saját változóin
   A Sunshine a szürkéit CSS-változókból veszi (sunshine.css :root) — a világos
   szürkéket a meleg tokenekre cseréljük, a sötét (szöveg) marad. Ami ezen túl
   szín (kijelölés, aktív fül, fókusz, jelvény), lent egyenként.
   ========================================================================== */

:root {
	--sunshine--light-gray: var(--hf-bg-soft);
	--sunshine--medium-gray: var(--hf-line);
	--sunshine--dark: var(--hf-ink);
	--sunshine--border-radius: var(--hf-radius);
}

/* A Sunshine saját menüje a galériák felett (Kedvencek, Ajándékkártyák, Kosár, Pénztár, Fiók, Kilépés).
   Árpád kérése (2026-09-30): ne fehér sáv legyen, hanem dobozos, színes, inverz — lila doboz, krém
   Barlow Condensed nagybetűs pontok; az aktív pont sárga matrica lila betűvel (a márkalap
   „sárga alapon lila" párosa); a kosár darabszáma magenta pötty. A pontok gombszerűek (44px). */
#sunshine .sunshine--main-menu,
.sunshine--main-menu {
	margin: 24px auto 30px;
	padding: 10px 12px;
	background: var(--hf-purple);
	border: 0;
	border-radius: 16px;
	box-shadow: 0 18px 36px -24px rgba(75, 29, 114, 0.85);
	text-align: left;
}

.sunshine--main-menu ul {
	align-items: center;
	flex-wrap: wrap;
	gap: 6px;
}

.sunshine--main-menu li {
	display: inline-flex !important;
	align-items: center;
}

.sunshine--main-menu a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 2px 14px 0;
	border-radius: 10px;
	font-family: var(--hf-head);
	font-size: 19px;
	font-weight: 700;
	letter-spacing: 0.05em;
	line-height: 1;
	text-transform: uppercase;
	color: var(--hf-cream);
	text-decoration: none;
	transition: background 0.15s, color 0.15s;
}

.sunshine--main-menu a:hover,
.sunshine--main-menu a:focus-visible {
	background: rgba(255, 247, 232, 0.12);
	color: var(--hf-yellow);
}

.sunshine--main-menu a:focus-visible {
	outline: 3px solid var(--hf-yellow);
	outline-offset: 2px;
}

.sunshine--main-menu .sunshine--selected a,
.sunshine--main-menu .sunshine--selected a:hover {
	background: var(--hf-yellow);
	color: var(--hf-purple);
	font-weight: 700;
	transform: rotate(-2deg);
	box-shadow: 0 0.12em 0 rgba(0, 0, 0, 0.18);
}

.sunshine--main-menu .sunshine--count {
	width: 22px;
	height: 22px;
	margin-left: -8px;
	border-radius: 50%;
	background: var(--hf-accent);
	color: var(--hf-cream);
	font-family: var(--hf-body);
	font-size: 12px;
	font-weight: 700;
	line-height: 22px;
	text-align: center;
	box-shadow: 0 0 0 2px var(--hf-purple);
}

/* Mobilon (a Sunshine 767px alatt összecsukja): a „Menü" sor ugyanaz a lila doboz, hamburgerrel;
   kinyitva a pontok teljes szélességű gombok. */
.sunshine--main-menu .sunshine--main-menu--toggle {
	align-items: center;
	justify-content: space-between;
	min-height: 44px;
	padding: 2px 6px 0;
	font-family: var(--hf-head);
	font-size: 20px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--hf-cream);
	cursor: pointer;
}

.sunshine--main-menu .sunshine--main-menu--open::after,
.sunshine--main-menu .sunshine--main-menu--close::after {
	content: "";
	width: 22px;
	height: 16px;
	background:
		linear-gradient(currentColor 0 0) top / 100% 3px no-repeat,
		linear-gradient(currentColor 0 0) center / 100% 3px no-repeat,
		linear-gradient(currentColor 0 0) bottom / 100% 3px no-repeat;
}

.sunshine--main-menu .sunshine--main-menu--close::after {
	width: 18px;
	height: 18px;
	background:
		linear-gradient(45deg, transparent 43%, currentColor 43% 57%, transparent 57%),
		linear-gradient(-45deg, transparent 43%, currentColor 43% 57%, transparent 57%);
}

@media screen and (max-width: 767px) {
	#sunshine .sunshine--main-menu {
		margin: 0 0 18px;
		padding: 8px 12px;
	}

	#sunshine .sunshine--main-menu .sunshine--main-menu--open {
		display: flex;
	}

	#sunshine .sunshine--main-menu input[type="checkbox"]:checked ~ .sunshine--main-menu--close {
		display: flex !important;
		margin: 0 0 8px;
	}

	#sunshine .sunshine--main-menu ul {
		gap: 6px;
		padding-bottom: 4px;
	}

	#sunshine .sunshine--main-menu li {
		display: flex !important;
		justify-content: center;
	}

	#sunshine .sunshine--main-menu li a {
		flex: 1 1 auto;
		justify-content: center;
		min-height: 48px;
		background: rgba(255, 247, 232, 0.08);
	}
}

/* Kijelölt / aktív állapotok: magenta a Sunshine sötétszürkéje helyett. */
#sunshine--checkout #sunshine--form--field--delivery_method .sunshine--form--field--radio-option:has(input:checked),
#sunshine--checkout #sunshine--form--field--shipping_method .sunshine--form--field--radio-option:has(input:checked),
#sunshine--checkout #sunshine--form--field--payment_method .sunshine--form--field--radio-option:has(input:checked) {
	outline: 2px solid var(--hf-accent);
	color: var(--hf-ink);
}

/* A kijelölt fizetési mód diszkréten (Árpád, 2026-10-07: a teli magenta „csúnya"): fehér kártya, magenta keret
   (a fenti közös szabályból), sötét szöveg, magenta pipa. A Sunshine teli szürkét és fehér betűt adna. */
#sunshine--checkout #sunshine--form--field--payment_method .sunshine--form--field--radio-option:has(input:checked) {
	background: var(--hf-card);
	color: var(--hf-ink);
}

#sunshine--checkout #sunshine--form--field--payment_method .sunshine--form--field--radio-option:has(input:checked) label {
	color: var(--hf-ink);
}

#sunshine--checkout #sunshine--form--field--payment_method .sunshine--form--field--radio-option:has(input:checked)::before {
	color: var(--hf-accent);
}

.sunshine-photo-cart input.focused {
	outline: 2px solid var(--hf-accent) !important;
}

.sunshine--modal--tablist--nav li.active {
	background: var(--hf-accent);
	color: var(--hf-cream);
}

.sunshine--multi-image-select--image input:checked + label > img {
	border-color: var(--hf-accent);
}

.sunshine--order--item--download {
	border-color: var(--hf-accent);
	color: var(--hf-accent);
}

.sunshine--order--item--download:hover {
	background: var(--hf-accent);
	color: var(--hf-cream);
	border-color: var(--hf-accent);
}

#sunshine--checkout--discount-form button {
	color: var(--hf-accent);
}

/* Értesítő sáv (nem hiba, nem siker): a Sunshine világoskékje helyett vajsárga. */
#sunshine-notices > .sunshine-notice.notify {
	background: var(--hf-yellow);
	color: var(--hf-ink);
}

/* A Sunshine mezői: a téma mezőivel azonos keret és lekerekítés. */
.sunshine-photo-cart .sunshine--form--field input[type="text"],
.sunshine-photo-cart .sunshine--form--field input[type="email"],
.sunshine-photo-cart .sunshine--form--field input[type="tel"],
.sunshine-photo-cart .sunshine--form--field input[type="password"],
.sunshine-photo-cart .sunshine--form--field input[type="number"],
.sunshine-photo-cart .sunshine--form--field select,
.sunshine-photo-cart .sunshine--form--field textarea {
	border: 2px solid var(--hf-line);
	border-radius: var(--hf-radius);
	background: var(--hf-card);
	color: var(--hf-ink);
}

.sunshine-photo-cart .sunshine--form--field input:focus,
.sunshine-photo-cart .sunshine--form--field select:focus,
.sunshine-photo-cart .sunshine--form--field textarea:focus {
	border-color: var(--hf-accent);
	outline: 3px solid var(--hf-focus);
	outline-offset: 0;
}

/* ==========================================================================
   Sunshine: a nagybetűsítés visszavétele
   A Neve és a Sunshine több helyen text-transform: uppercase-t használ a
   Rubik-szövegen. Magyarul az ékezetes nagybetűk (Á, É, Ő, Ű) rontják az
   olvashatóságot, és a címszedés is helytelen lesz. (A márka nagybetűs
   Barlow Condensed-je — címek, gombok, matricák — ez alól kivétel.)
   ========================================================================== */

.sunshine--image--add-to-cart--category-name,
.sunshine--image--add-to-cart--product-list--action button,
.sunshine--product--show-details,
.sunshine--checkout--section--header,
.sunshine--order--data--label,
.sunshine--order--items th,
#sunshine--image--add-to-cart--store,
.sunshine--back-to-products,
.sunshine--cart-item--image,
.sunshine--cart-item--name,
.sunshine--cart-item--qty,
.sunshine--cart-item--price,
.sunshine--cart-item--total {
	text-transform: none !important;
	letter-spacing: normal;
}

/* A modális ablakon belül sehol ne legyen automatikus nagy- vagy címbetűsítés.
   A Sunshine több helyen capitalize-t használ, ami magyarul minden szót
   nagybetűvel kezd („Mennyiség Csökkentése"). A márka gombja kivétel. */
#sunshine--modal *:not(.sunshine--button):not(.sunshine--button-alt),
.sunshine--modal *:not(.sunshine--button):not(.sunshine--button-alt) {
	text-transform: none !important;
}

/* A Sunshine capitalize-t tesz a link-gombokra is (kosár, galéria).
   Magyarul ez minden szót nagybetűvel kezdene: „Képek Kiválasztása". */
.sunshine--button-link,
.sunshine--open-modal {
	text-transform: none !important;
}

/* ==========================================================================
   Gombsor a galéria tetején — a gyerekek és a csoportképek (IFC_Frontend)
   Szegmens-kapcsoló: minden galéria egy gomb. Az inaktív is gomb (fehér, keretes),
   az aktív kitöltött (magenta). Az egész egy halvány sávon ül, hogy elváljon a
   háttértől. A sor a galéria fejléce ELŐTT áll, hogy mobilon az első képernyőn
   legyen — a csoportkép egy koppintásra van (Árpád kérése).
   FŐSZABÁLY: a fülek gombszerűek, sosem aláhúzásosak — a márka ezt nem írja felül.
   ========================================================================== */

.hf-family-bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 12px;
	padding: 12px 14px;
	margin: 0 0 18px;
	background: var(--hf-bg-soft);
	border: 1px solid var(--hf-line);
	border-radius: var(--hf-radius);
}

.hf-family-bar__list {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;             /* a gyerek gombja ugyanolyan magas, mint a képes csoportkép-gomb */
	gap: 8px;
}

.hf-family-bar__chip {
	display: inline-flex;
	align-items: center;
	min-height: 44px;                 /* hüvelykujjnyi célfelület */
	padding: 0 18px;
	border: 2px solid #d9cdb8;        /* a --hf-line-nál egy fokkal erősebb, hogy a sávon is látszódjon */
	border-radius: var(--hf-radius);
	background: var(--hf-card);
	color: var(--hf-ink);
	font-weight: 600;
	font-size: 1.02rem;
	line-height: 1.15;
	text-decoration: none;
	box-shadow: 0 1px 2px rgba(17, 17, 17, 0.06);
	transition: border-color 120ms, background 120ms;
}

.hf-family-bar__chip:hover {
	border-color: var(--hf-accent);
	color: var(--hf-accent);
}

.hf-family-bar__chip--current {
	background: var(--hf-accent);
	border-color: var(--hf-accent);
	color: var(--hf-cream);
	box-shadow: 0 2px 6px rgba(230, 0, 121, 0.28);
}

.hf-family-bar__chip--current:hover {
	color: var(--hf-cream);
	border-color: var(--hf-accent-dark);
	background: var(--hf-accent-dark);
}

/* Minden gomb két sorban: a gyereknél „Kovács Ádám / fotói", a csoportképnél „Csoportkép / Katica
   csoport" (Árpád, 2026-10-02). A csoportkép bélyegképe lekerült — zavaró volt. */
.hf-family-bar__chip {
	padding: 5px 18px;
}

.hf-family-bar__two {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
	text-align: left;
}

.hf-family-bar__two span {
	color: var(--hf-muted);
	font-size: 0.84rem;
	font-weight: 500;
}

.hf-family-bar__chip--current .hf-family-bar__two span {
	color: rgba(255, 247, 232, 0.9);
}

/* RÉGI MODELL (vendég, gyerekkód) — a régi modellel együtt törlendő. */
.hf-family-bar__add {
	display: inline-flex;
	align-items: center;
	margin-left: auto;
	min-height: 44px;
	padding: 0 16px;
	border: 2px dashed var(--hf-accent);   /* szaggatott = „hozzáadás", vizuálisan elkülönül a gyerek-gomboktól */
	border-radius: var(--hf-radius);
	background: var(--hf-card);
	color: var(--hf-accent);
	font-weight: 600;
	line-height: 1.15;
	text-decoration: none;
	white-space: nowrap;
}

.hf-family-bar__add:hover {
	background: var(--hf-accent);
	border-style: solid;
	color: var(--hf-cream);
}

.hf-family-bar__hint {
	flex-basis: 100%;
	margin: 0;
	color: var(--hf-muted);
	font-size: 0.9rem;
	line-height: 1.35;
}

/* RÉGI MODELL: magyarázat a zárt csoportgaléria kódűrlapja fölött (nem gombsor). */
.hf-gallery-note {
	margin: 0 0 18px;
	padding: 12px 14px;
	background: var(--hf-bg-soft);
	border: 1px solid var(--hf-line);
	border-radius: var(--hf-radius);
}

@media (max-width: 600px) {
	.hf-family-bar {
		padding: 10px;
		gap: 8px;
		margin-bottom: 14px;
	}
	.hf-family-bar__list {
		flex-basis: 100%;
	}
	.hf-family-bar__chip {
		flex: 1 1 auto;                /* két-három gomb kitölti a sort, egyforma szélesen */
		justify-content: center;
		padding: 0 12px;
	}
	.hf-family-bar__chip--group {
		justify-content: flex-start;   /* teljes sorban a bélyegképek egymás alá esnek, mint egy listában */
		padding: 4px 10px 4px 5px;
	}
	.hf-family-bar__add {
		margin-left: 0;
		flex-basis: 100%;
		justify-content: center;
		white-space: normal;
	}
}

/* ==========================================================================
   Kódbevitel: szülői kód → belépés (IFC_Login)
   ========================================================================== */

.hf-code-note,
.hf-code-staff {
	margin: 14px 0 0;
	color: var(--hf-muted);
	font-size: 0.95rem;
}

.hf-code-staff {
	margin: 0 0 12px;
	padding: 10px 12px;
	border: 1px dashed var(--hf-line);
	border-radius: var(--hf-radius);
	background: var(--hf-bg-soft);
}

/* Belépett szülő: a kódoldal nem kér kódot, hanem a gyerekei galériáit mutatja. */
.hf-code-account p {
	margin: 0 0 10px;
}

.hf-code-account__who {
	font-size: 1.1rem;
}

.hf-code-account__list {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 16px;
}

.hf-code-account__out {
	color: var(--hf-muted);
	font-size: 0.95rem;
}

/* Az oldal „Add meg a kódot" címe és tippje belépve félrevezető — a sablon mást mutat helyette.
   Nem közvetlen gyerek: a csoportblokk egy belső tárolóba (inner-container) teszi őket. A sablon
   saját elemei között nincs h2 és .hf-hint, így azokat ez nem éri. */
.hf-parent-in .hf-code-box:not(.hf-code-box--gate) h2,
.hf-parent-in .hf-code-box:not(.hf-code-box--gate) .hf-hint {
	display: none;
}

/* Zárt privát galéria: a kódűrlap a Sunshine e-mail + jelszó belépője helyett. */
.hf-code-box--gate {
	margin: 8px auto 32px;
}

/* A .hf-code-box .hf-hint margója erősebb szabály — ezért a kettős osztály. */
.hf-code-box .hf-code-box__lost {
	margin: 14px 0 0;
}

@media (max-width: 600px) {
	.hf-code-account__list .hf-family-bar__chip {
		flex: 1 1 auto;
		justify-content: center;
	}
}

/* A téma/Sunshine capitalize-szabálya ne érje el a gombokat (magyar szövegen rosszul néz ki). */
.hf-family-bar__add,
.hf-family-bar__chip,
.hf-family-bar__chip * {
	text-transform: none !important;
	letter-spacing: normal;
}

/* ==========================================================================
   Matrica-címek mindenütt (Árpád, 2026-09-30: „a sárga tökjó, ilyenből legyen több is!")
   Oldalcím (Neve), galéria címe (Sunshine), a halk dobozok címei. A fő matrica sárga
   fekete betűvel; a másodlagos sárga lila betűvel (a márkalap szerint az is mehet).
   ========================================================================== */

.nv-page-title h1,
#sunshine--page-header h1 {
	display: inline-block;
	padding: 0.14em 0.4em 0.08em;
	background: var(--hf-yellow);
	color: var(--hf-ink);
	line-height: 1;
	transform: rotate(-2deg);
	box-shadow: 0 0.1em 0 rgba(0, 0, 0, 0.08);
}

/* A Sunshine galéria-fejléce flex-sor, a cím kinyúlna a teljes szélességre (flex-grow: 10). */
#sunshine--page-header {
	flex-wrap: wrap;
	gap: 16px 20px;
}

#sunshine--page-header h1 {
	flex: 0 1 auto;
	margin: 0 auto 0 0;
	font-size: clamp(34px, 5vw, 52px);
}

.hf-lost-code h3 {
	color: var(--hf-purple);
	line-height: 1.1;
}

/* Közös kis elemek: keretes pirula-link és a „még nincs semmi" doboz. */
.hf-btn-outline {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 2px 18px 0;
	border: 2px solid var(--hf-accent);
	border-radius: 999px;
	color: var(--hf-accent);
	font-family: var(--hf-head);
	font-size: 17px;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	text-decoration: none;
	box-sizing: border-box;
}

.hf-btn-outline:hover,
.hf-btn-outline:focus-visible {
	background: var(--hf-accent);
	color: var(--hf-cream);
}

.hf-empty {
	margin: 0 0 16px;
	padding: 16px 18px;
	border: 2px dashed var(--hf-line);
	border-radius: var(--hf-radius);
	background: var(--hf-bg-soft);
	color: var(--hf-muted);
}

/* ==========================================================================
   Galéria fejléce: a Sunshine műveletei (Összes kép digitálisan, Irány a bolt…) pirula-gombok
   a fehér doboz helyett. Az „Összes kép digitálisan" kitöltött (fő ajánlat), a többi keretes.
   A kattintható felület a teljes gomb (a link ::after rétege).
   ========================================================================== */

#sunshine .sunshine--action-menu {
	background: transparent;
}

#sunshine .sunshine--action-menu ul {
	flex-wrap: wrap;
	gap: 10px;
}

#sunshine .sunshine--action-menu ul li {
	position: relative;
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 2px 18px 0;
	border: 2px solid var(--hf-accent);
	border-radius: 999px;
	background: var(--hf-card);
	color: var(--hf-accent);
	font-size: 1rem;
	transition: background 0.15s, color 0.15s;
}

#sunshine .sunshine--action-menu ul li::before {
	color: inherit;
}

#sunshine .sunshine--action-menu ul li a,
#sunshine .sunshine--action-menu ul li button {
	color: inherit !important;
	font-family: var(--hf-head);
	font-size: 18px;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase !important;
	text-decoration: none !important;
}

#sunshine .sunshine--action-menu ul li a::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 999px;
}

#sunshine .sunshine--action-menu ul li:hover,
#sunshine .sunshine--action-menu ul li:focus-within,
#sunshine .sunshine--action-menu ul li.sunshine--download {
	background: var(--hf-accent);
	color: var(--hf-cream);
}

#sunshine .sunshine--action-menu ul li.sunshine--download {
	box-shadow: 0 10px 26px -12px rgba(230, 0, 121, 0.7);
}

#sunshine .sunshine--action-menu ul li.sunshine--download:hover {
	background: var(--hf-accent-dark);
	border-color: var(--hf-accent-dark);
}

@media screen and (max-width: 767px) {
	#sunshine .sunshine--action-menu ul li {
		justify-content: center;
		min-height: 48px;
	}
}

/* ==========================================================================
   Fiók (Sunshine `fiok/` oldal): bal oldalt gombszerű menü a halvány sávban (aktív: magenta,
   FŐSZABÁLY), jobbra fehér kártya matrica-címmel. A menü aktív jelölését a téma
   sunshine/account/menu.php felülírása adja, a címet a functions.php.
   ========================================================================== */

#sunshine--account {
	align-items: flex-start;
	gap: 28px;
}

#sunshine--account--menu {
	flex: 0 0 290px;
	padding: 12px;
	background: var(--hf-bg-soft);
	border: 1px solid var(--hf-line);
	border-radius: 14px;
	box-sizing: border-box;
}

#sunshine--account--menu ul {
	display: flex;
	flex-direction: column;
	gap: 8px;
	border: 0;
}

#sunshine--account--menu ul li {
	padding: 0;
	border: 0;
}

#sunshine--account--menu ul li a {
	display: flex;
	align-items: center;
	min-height: 48px;
	padding: 2px 16px 0;
	border: 2px solid #d9cdb8;
	border-radius: var(--hf-radius);
	background: var(--hf-card);
	color: var(--hf-ink);
	font-family: var(--hf-head);
	font-size: 19px;
	font-weight: 700;
	letter-spacing: 0.04em;
	line-height: 1.05;
	text-transform: uppercase;
	text-decoration: none;
	box-sizing: border-box;
	box-shadow: 0 1px 2px rgba(17, 17, 17, 0.06);
	transition: border-color 0.12s, background 0.12s, color 0.12s;
}

#sunshine--account--menu ul li a:hover {
	border-color: var(--hf-accent);
	color: var(--hf-accent);
}

#sunshine--account--menu ul li a:focus-visible {
	outline: 3px solid var(--hf-focus);
	outline-offset: 2px;
}

#sunshine--account--menu ul li.is-active a {
	background: var(--hf-accent);
	border-color: var(--hf-accent);
	color: var(--hf-cream);
	box-shadow: 0 2px 6px rgba(230, 0, 121, 0.28);
}

/* A kilépés az utolsó pont: szaggatott keret, elválik a többitől. */
#sunshine--account--menu ul li:last-child {
	margin-top: 6px;
}

#sunshine--account--menu ul li:last-child a {
	background: transparent;
	border-style: dashed;
	box-shadow: none;
	color: var(--hf-muted);
}

#sunshine--account--content {
	flex: 1 1 auto;
	min-width: 0;
	padding: 28px;
	background: var(--hf-card);
	border: 1px solid var(--hf-line);
	border-radius: 14px;
	box-shadow: 0 18px 40px -28px rgba(17, 17, 17, 0.35);
	box-sizing: border-box;
	overflow-x: auto;
}

.hf-account-title {
	display: inline-block;
	margin: 0 0 20px;
	padding: 0.16em 0.42em 0.1em;
	background: var(--hf-yellow);
	color: var(--hf-ink);
	font-family: var(--hf-head);
	font-size: clamp(26px, 3vw, 34px);
	font-weight: 700;
	line-height: 1;
	text-transform: uppercase;
	transform: rotate(-2deg);
	box-shadow: 0 0.1em 0 rgba(0, 0, 0, 0.08);
}

.hf-account-lead {
	margin: 0 0 18px;
	font-size: 1.05rem;
}

.hf-account-label {
	margin: 0 0 8px;
	font-weight: 600;
}

.hf-account-out {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 14px;
	margin: 22px 0 0;
	padding-top: 18px;
	border-top: 1px solid var(--hf-line);
	color: var(--hf-muted);
}

/* A fiók űrlapjainak alcíme („Szállítási cím") — kisebb, lila betűs sárga matrica. */
#sunshine--account .sunshine--form--field-legend {
	display: inline-block;
	margin: 0 0 14px;
	padding: 0.16em 0.42em 0.1em;
	background: var(--hf-yellow);
	color: var(--hf-purple);
	font-family: var(--hf-head);
	font-size: 22px;
	font-weight: 700;
	line-height: 1;
	text-transform: uppercase;
	transform: rotate(-1.5deg);
}

#sunshine--account--content .sunshine--account--field label {
	font-size: 15px;
	font-weight: 500;
	text-transform: none;
}

/* Rendelések táblázata. */
#sunshine--orders {
	width: 100%;
	border-collapse: collapse;
}

#sunshine--orders th {
	padding: 0 14px 8px 0;
	border-bottom: 2px solid var(--hf-line);
	color: var(--hf-muted);
	font-family: var(--hf-head);
	font-size: 16px;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-align: left;
	text-transform: uppercase;
}

#sunshine--orders td {
	padding: 14px 14px 14px 0;
	border-bottom: 1px solid var(--hf-line);
	vertical-align: middle;
}

#sunshine--orders td a {
	color: var(--hf-accent);
	font-weight: 600;
}

/* A Letöltések oldal alcímei (Rendelések, Galériák) és listái. */
.sunshine--account--downloads h2 {
	margin: 18px 0 8px;
	font-size: 24px;
}

.sunshine--account--downloads ul {
	margin: 0 0 12px;
	padding-left: 20px;
}

@media screen and (max-width: 767px) {
	#sunshine--account--menu {
		margin-bottom: 16px;
	}

	#sunshine--account--menu ul {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 8px;
	}

	#sunshine--account--menu ul li:last-child {
		margin-top: 0;
	}

	#sunshine--account--menu ul li a {
		justify-content: center;
		min-height: 48px;
		padding: 2px 8px 0;
		font-size: 17px;
		text-align: center;
	}

	#sunshine--account--content {
		margin-top: 0;
		padding: 22px 16px;
	}
}

/* ==========================================================================
   Pénztár: a lépések címei matricák (sárga alapon lila), a Sunshine szürke/zöld jelölései
   helyett márkaszín; az összegzés kártya címe lila alapon sárga; a végösszeg Barlow magenta.
   ========================================================================== */

/* Elrendezés (Árpád, 2026-10-30): nincs közös bézs doboz, minden lépés saját kártya; az összegzés széles oszlop,
   asztalin az űrlappal arányos, és görgetéskor a ragadós fejléc alatt marad. A Sunshine konténerének oldalsó
   párnája itt elmarad, így a pénztár a fejléccel egy szélességű. */
#sunshine.sunshine--page--checkout .sunshine--container {
	padding-left: 0;
	padding-right: 0;
}

#sunshine--checkout--main {
	align-items: start;
	gap: 24px;
	padding: 0;
	background: none;
	border: 0;
}

@media (min-width: 1000px) {
	#sunshine--checkout--main {
		grid-template-columns: minmax(0, 1.15fr) minmax(380px, 1fr);
	}

	#sunshine--checkout--summary {
		position: sticky;
		top: 92px;
	}
}

@media (min-width: 768px) and (max-width: 999px) {
	#sunshine--checkout--main {
		grid-template-columns: 1fr;
	}

	#sunshine--checkout--steps {
		order: 2;
	}

	#sunshine--checkout--summary {
		order: 1;
	}
}

/* A lépések: számozott kártyák. Aktív = magenta keret, sárga matrica; kész = pipa, a kitöltött adatok; soron
   következő = halvány, csak a címe látszik. */
#sunshine--checkout--form {
	counter-reset: hf-step;
}

/* A Sunshine `fieldset:first-child { border: none !important }`-ja miatt kell a két azonosító. */
#sunshine--checkout #sunshine--checkout--steps fieldset {
	counter-increment: hf-step;
	display: flow-root;
	margin: 0 0 12px !important;
	padding: 18px 22px !important;
	border: 2px solid var(--hf-line) !important;
	border-radius: 14px;
	background: var(--hf-card);
	opacity: 1;
	box-sizing: border-box;
}

#sunshine--checkout #sunshine--checkout--steps fieldset:not(.sunshine--checkout--section-active):not(.sunshine--checkout--section-completed) {
	background: var(--hf-bg-soft);
	border-style: dashed !important;
	border-color: #d9c9a8 !important;
	opacity: 0.72;
}

#sunshine--checkout #sunshine--checkout--steps fieldset.sunshine--checkout--section-active {
	border-color: var(--hf-accent) !important;
	box-shadow: 0 14px 30px -24px rgba(17, 17, 17, 0.5);
}

#sunshine--checkout--steps fieldset legend::before {
	content: counter(hf-step);
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 1.25em;
	height: 1.25em;
	margin-right: 0.4em;
	border-radius: 50%;
	background: var(--hf-purple);
	color: var(--hf-yellow);
	font-family: var(--hf-head);
	font-size: 0.8em;
	line-height: 1;
	vertical-align: 0.08em;
}

#sunshine--checkout--steps fieldset:not(.sunshine--checkout--section-active) legend {
	display: flex;
	align-items: center;
	width: 100%;
	margin: 0;
	padding: 0;
	background: none;
	box-shadow: none;
	transform: none;
	font-size: 21px;
}

#sunshine--checkout--steps fieldset.sunshine--checkout--section-completed legend::before {
	content: "✓";
	background: #1d7a3a;
	color: #fff;
	font-family: var(--hf-body);
	font-size: 0.75em;
	margin-right: 0.55em;
}

#sunshine--checkout--steps .sunshine--checkout--section-summary {
	padding: 8px 0 0 32px;
	margin: 0;
	opacity: 1;
	font-size: 15px;
	line-height: 1.45;
}

#sunshine--checkout--steps fieldset input:not([type="checkbox"]):not([type="radio"]),
#sunshine--checkout--steps fieldset select,
#sunshine--checkout--steps fieldset textarea {
	border: 2px solid var(--hf-line);
	background: var(--hf-cream);
}

/* A pénztár rövid összegzése (IFC_Image_Front::checkout_summary) — a Sunshine soronkénti listája helyett. */
#sunshine--checkout--order-review:has(.hf-co) #sunshine--checkout--order-review--cart {
	display: none;
}

.hf-co {
	display: grid;
	gap: 10px;
	margin: 0 0 14px;
	font-size: 15.5px;
}

.hf-co__ln {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	font-weight: 500;
	line-height: 1.3;
}

.hf-co__ln > span:last-child {
	white-space: nowrap;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

#sunshine--checkout--order-review .hf-co small {
	display: block;
	color: var(--hf-muted);
	font-size: 13px;
	font-weight: 400;
	line-height: 1.3;
}

.hf-co__child {
	margin-top: 4px;
	font-family: var(--hf-head);
	font-size: 17px;
	font-weight: 700;
	text-transform: uppercase;
}

.hf-co__gifts {
	padding: 9px 12px;
	border-radius: 10px;
	background: var(--hf-yellow);
	font-size: 14.5px;
	line-height: 1.4;
}

.hf-co__gifts strong {
	display: block;
	font-family: var(--hf-head);
	font-size: 16px;
	text-transform: uppercase;
}

#sunshine--checkout--order-review .hf-co__gifts strong {
	color: var(--hf-purple);
}

.hf-co__foot {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 4px 12px;
	font-size: 13.5px;
}

#sunshine--checkout--order-review .hf-co__foot span {
	color: var(--hf-muted);
}

#sunshine--checkout--order-review .hf-co__foot a {
	color: var(--hf-accent);
}

#sunshine--checkout--steps fieldset legend {
	float: left;
	display: inline-block;
	width: auto;
	margin: 2px 0 18px;
	padding: 0.18em 0.45em 0.1em;
	background: var(--hf-yellow);
	color: var(--hf-purple);
	font-family: var(--hf-head);
	font-size: 26px;
	font-weight: 700;
	letter-spacing: 0.02em;
	line-height: 1;
	text-transform: uppercase;
	transform: rotate(-1.5deg);
	box-shadow: 0 0.1em 0 rgba(0, 0, 0, 0.08);
}

#sunshine--checkout--steps fieldset.sunshine--checkout--section-completed legend {
	float: left;
	margin: 2px 0 10px;
}

/* „Szerkesztés": kis lila matrica a lépés címe mellett (csak kész lépésnél látszik). */
#sunshine--checkout--steps fieldset legend button {
	float: none;
	margin: 0 0 0 auto;
	padding: 6px 10px 4px;
	border-radius: 999px;
	background: var(--hf-purple);
	color: var(--hf-cream);
	font-family: var(--hf-head);
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.06em;
	vertical-align: middle;
	cursor: pointer;
}

#sunshine--checkout--steps fieldset.sunshine--checkout--section-completed legend button {
	display: inline-block;
}

#sunshine--checkout--steps fieldset legend button:hover {
	background: var(--hf-accent);
}

#sunshine--checkout--steps .sunshine--checkout--section-summary {
	color: var(--hf-ink);
}

#sunshine--checkout--summary {
	background: var(--hf-card);
	border: 1px solid var(--hf-line);
	border-radius: 14px;
	box-shadow: 0 18px 40px -28px rgba(17, 17, 17, 0.35);
}

#sunshine--checkout--order-review h2 {
	display: inline-block;
	margin: 0 0 16px;
	padding: 0.18em 0.45em 0.1em;
	background: var(--hf-purple);
	color: var(--hf-yellow);
	font-family: var(--hf-head);
	font-size: 24px;
	line-height: 1;
	text-transform: uppercase;
	transform: rotate(-2deg);
	box-shadow: 0 0.1em 0 rgba(0, 0, 0, 0.12);
}

#sunshine--checkout--order-review .sunshine--qty {
	color: var(--hf-cream);
}

#sunshine--checkout--order-review--amounts tr#sunshine--checkout--order-review--total th {
	font-family: var(--hf-head);
	font-size: 20px;
	letter-spacing: 0.03em;
	text-transform: uppercase;
}

#sunshine--checkout--order-review--amounts tr#sunshine--checkout--order-review--total td,
#sunshine--checkout--order-review--total td * {
	color: var(--hf-accent);
	font-family: var(--hf-head);
	font-size: 30px;
}

#sunshine--checkout--discount-form {
	border: 2px solid var(--hf-line);
	border-radius: var(--hf-radius);
	box-shadow: none;
}

#sunshine--checkout--discount-form button {
	font-family: var(--hf-head);
	font-size: 16px;
	letter-spacing: 0.05em;
}

/* Mobilon a Sunshine az összegzést egy gomb alá csukja — ugyanaz a lila doboz, mint a menü. */
#sunshine--checkout--order-review--toggle {
	border: 0;
	border-radius: 14px;
	background: var(--hf-purple);
	color: var(--hf-cream);
	font-family: var(--hf-head);
	font-size: 19px;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

#sunshine--checkout--order-review--toggle span {
	color: var(--hf-yellow);
	white-space: nowrap;
}

/* A Sunshine mobilon `background: none !important`-tal átlátszóvá teszi — erősebb szelektorral vissza. */
@media screen and (max-width: 767px) {
	#sunshine--checkout--main {
		border: 0;
	}

	#sunshine--checkout--steps {
		padding: 0;
		background: none !important;
		border: 0;
	}

	#sunshine--checkout--steps fieldset {
		padding: 16px 14px !important;
	}

	#sunshine--checkout--summary {
		padding: 10px;
	}

	#sunshine--checkout--summary #sunshine--checkout--order-review--toggle {
		min-height: 52px;
		padding: 12px 16px 10px !important;
		background: var(--hf-purple) !important;
		color: var(--hf-cream);
		text-align: left;
	}

	#sunshine--checkout--order-review--toggle::after {
		border-top-color: var(--hf-cream);
	}

	#sunshine--checkout--order-review {
		padding: 16px 8px 4px;
	}

	/* A lila összecsukó gomb már mondja a címet. */
	#sunshine--checkout--order-review h2 {
		display: none;
	}
}

/* ==========================================================================
   Kosár oldal: táblázatfej Barlow-val, meleg vonalak, végösszeg magenta Barlow.
   ========================================================================== */

table#sunshine--cart--items,
#sunshine--cart--items th,
#sunshine--cart--items td {
	border-color: var(--hf-line);
}

#sunshine--cart--items th {
	color: var(--hf-muted);
	font-family: var(--hf-head);
	font-size: 15px;
	font-weight: 700;
	letter-spacing: 0.06em;
}

#sunshine--cart--items td.sunshine--cart-item--image img {
	border-radius: 8px;
}

#sunshine--cart--totals--items .sunshine--cart--total th {
	font-family: var(--hf-head);
	font-size: 20px;
	letter-spacing: 0.03em;
	text-transform: uppercase;
}

#sunshine--cart--totals--items .sunshine--cart--total td,
#sunshine--cart--totals--items .sunshine--cart--total td * {
	color: var(--hf-accent);
	font-family: var(--hf-head);
	font-size: 30px;
}


/* A menü modált nyitó pontjai (kijelentkezve: Belépés, Regisztráció) — a fenti magenta
   link-szabály (.sunshine--open-modal) itt nem érvényes, a lila sávon krém a betű. */
#sunshine .sunshine--main-menu a.sunshine--open-modal,
.sunshine--main-menu a.sunshine--open-modal {
	color: var(--hf-cream) !important;
}

#sunshine .sunshine--main-menu a.sunshine--open-modal:hover,
.sunshine--main-menu a.sunshine--open-modal:hover {
	color: var(--hf-yellow) !important;
}

/* Galérialista (Ügyfél galériák, Fiók → Galériák): a csempe címe sárga matrica a kép alján
   a Sunshine sötét átmenete helyett. */
#sunshine--gallery-items.sunshine--layout--justified figure.sunshine--gallery-item > h2,
#sunshine--gallery-items.sunshine--layout--masonry figure.sunshine--gallery-item > h2 {
	left: 10px;
	right: auto;
	bottom: 10px;
	max-width: calc(100% - 20px);
	margin: 0;
	background: var(--hf-yellow);
	text-align: left;
	transform: rotate(-2deg);
	box-shadow: 0 0.12em 0 rgba(0, 0, 0, 0.18);
}

#sunshine--gallery-items.sunshine--layout--justified figure.sunshine--gallery-item > h2 > a,
#sunshine--gallery-items.sunshine--layout--masonry figure.sunshine--gallery-item > h2 > a {
	padding: 6px 10px 3px;
	color: var(--hf-ink);
	font-family: var(--hf-head);
	font-size: 18px;
	font-weight: 700;
	letter-spacing: 0.03em;
	line-height: 1.05;
	text-transform: uppercase;
}

#sunshine--gallery-items .sunshine--gallery-item.sunshine--password-required h2::before {
	color: var(--hf-ink);
	margin: 0 0 0 10px;
}


/* ==========================================================================
   Főpróba-javítások (Árpád, 2026-10-02 — a mintaprojekt mobilos nézegetése után)
   ========================================================================== */

/* 1. A képcsempe gombjai (kedvenc, kosár): a fotón fehér, apró ikon szinte láthatatlan volt.
   Most mindig látszó, hüvelykujjnyi kerek gombok a kép jobb alsó sarkában — a kosár magenta. */
body #sunshine--image-items .sunshine--image-menu {
	opacity: 1;
	left: auto;
	right: 0;
	bottom: 0;
	padding: 10px;
	background: none;
}

body #sunshine--image-items figure .sunshine--image-menu ul {
	justify-content: flex-end;
	gap: 10px;
}

body #sunshine--image-items figure .sunshine--image-menu li a,
body #sunshine--image-items figure .sunshine--image-menu li button {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.96);
	box-shadow: 0 2px 8px rgba(17, 17, 17, 0.28);
	opacity: 1;
	transition: transform 120ms, background 120ms;
}

body #sunshine--image-items figure .sunshine--image-menu li a:hover,
body #sunshine--image-items figure .sunshine--image-menu li button:hover {
	transform: scale(1.06);
}

body #sunshine--image-items figure .sunshine--image-menu li a:before,
body #sunshine--image-items figure .sunshine--image-menu li button:before {
	font-size: 22px;
	line-height: 1;
	color: var(--hf-ink);
}

/* A Sunshine a feliratot -9999px-re tolja — a kerek gombban ez elrontaná a középre igazítást. */
body #sunshine--image-items figure .sunshine--image-menu li .sunshine--image-menu--name {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	text-indent: 0;
	white-space: nowrap;
}

body #sunshine--image-items figure .sunshine--image-menu li.sunshine--purchase a,
body #sunshine--image-items figure .sunshine--image-menu li.sunshine--purchase button {
	background: var(--hf-accent);
}

body #sunshine--image-items figure .sunshine--image-menu li.sunshine--purchase a:before,
body #sunshine--image-items figure .sunshine--image-menu li.sunshine--purchase button:before {
	color: #fff;
}

body #sunshine--image-items figure.sunshine--image--is-favorite .sunshine--image-menu li.sunshine--favorite button:before {
	color: var(--hf-accent);
}

/* 6. Kosár-ikon a fejlécben (functions.php: hf_cart_link) — a hamburger dobozával azonos keret, a
   számláló magenta pötty; üres kosárnál a pötty rejtve. */
.hf-cart-link {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 46px;
	height: 46px;
	margin-left: 10px;
	border: 2px solid var(--hf-ink);
	border-radius: 8px;
	color: var(--hf-ink);
	text-decoration: none;
	vertical-align: middle;
}

.hf-cart-link:hover,
.hf-cart-link:focus-visible {
	border-color: var(--hf-accent);
	color: var(--hf-accent);
}

/* A Neve a fejlécben minden SVG-t kicsinyít, és a felolvasói szöveg is helyet foglalna — mindkettő ellen. */
.hf-cart-link .hf-cart-link__icon {
	display: block;
	flex: 0 0 auto;
	width: 24px;
	height: 24px;
}

.hf-cart-link .screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

.hf-cart-link__count {
	position: absolute;
	top: -9px;
	right: -9px;
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 22px;
	height: 22px;
	padding: 0 6px;
	border: 2px solid var(--hf-cream);
	border-radius: 999px;
	background: var(--hf-accent);
	color: #fff;
	font-size: 12px;
	font-weight: 700;
	line-height: 1;
	box-sizing: border-box;
}

.hf-cart-link--empty .hf-cart-link__count {
	display: none;
}

/* Nem üres kép-alapú kosárnál a gomb magenta pirula a végösszeggel (2026-10-30, Árpád: a kosár dolgai felül legyenek —
   addig egy alsó fekete sáv mutatta). A számláló ilyenkor lila-sárga, hogy a magentán is látsszon. */
.hf-cart-link__sum {
	display: none;
}

.hf-cart-link.hf-cart-link--sum {
	width: auto;
	gap: 7px;
	padding: 0 12px 0 9px;
	border-color: var(--hf-accent);
	background: var(--hf-accent);
	color: #fff;
}

.hf-cart-link.hf-cart-link--sum:hover,
.hf-cart-link.hf-cart-link--sum:focus-visible {
	border-color: var(--hf-accent-dark);
	background: var(--hf-accent-dark);
	color: #fff;
}

.hf-cart-link--sum .hf-cart-link__sum {
	display: inline;
	font-family: var(--hf-head);
	font-size: 19px;
	font-weight: 700;
	line-height: 1;
	white-space: nowrap;
}

.hf-cart-link--sum .hf-cart-link__count {
	background: var(--hf-purple);
	color: var(--hf-yellow);
}

.hf-cart-link.is-bump {
	animation: hf-cart-bump 0.4s ease-out;
}

@keyframes hf-cart-bump {
	40% { transform: scale(1.1); }
}

@media (prefers-reduced-motion: reduce) {
	.hf-cart-link.is-bump {
		animation: none;
	}
}

/* A vásárlós oldalakon (Sunshine) a fejléc ragadós, így a kosár-gomb és a végösszeg görgetés közben is látszik.
   A Neve `.wrapper`-e overflow: hidden — azzal a sticky nem működne, a clip ugyanúgy vág, de nem görgető doboz.
   A z-index a csempék szív/kosár menüje (1000) fölé, a felugró ablak (999998) alá. */
body.sunshine-photo-cart .wrapper {
	overflow: clip;
}

body.sunshine-photo-cart header.header {
	position: sticky;
	top: 0;
	z-index: 9000;
}

body.sunshine-photo-cart.admin-bar header.header {
	top: 32px;
}

@media (max-width: 782px) {
	body.sunshine-photo-cart.admin-bar header.header {
		top: 46px;
	}
}

@media (max-width: 600px) {
	body.sunshine-photo-cart.admin-bar header.header {
		top: 0; /* itt a WP admin sávja már nem rögzített */
	}
}

/* A Neve gomb-komponense blokk: a kosár-ikon mellé kerüljön, ne alá. */
.builder-item--button_base .item--inner,
.builder-item--button_base {
	display: flex;
	align-items: center;
}

/* Mobilon a jobb oldali csoport (Galéria kódom + kosár + hamburger) csak a logó mellé fér: a gomb
   kompaktabb, a gomb Neve-margója (20px) lekerül. 375px-en pont kifér; 360px-es telefonon még kisebb. */
@media (max-width: 959px) {
	.hf-cart-link {
		width: 44px;
		height: 44px;
		margin: 0 6px 0 5px;
	}

	.header--row .builder-item--button_base .button.button-primary {
		margin-right: 0 !important;
		padding: 9px 7px !important;
		font-size: 15px !important;
		letter-spacing: 0.03em !important;
	}
}

@media (max-width: 389px) {
	.header--row .builder-item--button_base .button.button-primary {
		padding: 8px 6px !important;
		font-size: 14px !important;
	}

	.header--row.hide-on-desktop .site-logo img {
		max-width: 88px !important;
	}

	.hf-cart-link {
		margin: 0 5px 0 4px;
	}
}

/* 7. Galériaoldal fejléce: a gyerek neve egyenes, középre zárt, alatta kisebben „fotói". */
.single-sunshine-gallery #sunshine--page-header {
	flex-direction: column;
	align-items: center;
	text-align: center;
}

.single-sunshine-gallery #sunshine--page-header h1 {
	margin: 0 auto;
	transform: none;
	text-align: center;
}

/* „MINTA ANNA fotói" — egy sorban, a „fotói" kisbetűs, de jól olvasható (Árpád, 2026-10-02). */
.hf-gallery-head__sub {
	display: inline;
	margin-left: 0.18em;
	font-size: 0.66em;
	letter-spacing: 0.02em;
	text-transform: none;
	white-space: nowrap;
}

/* Mobilon a sárga doboz teljes szélességű sáv. */
@media (max-width: 600px) {
	.single-sunshine-gallery #sunshine--page-header h1 {
		display: block;
		width: 100%;
		box-sizing: border-box;
		padding: 0.22em 0.4em 0.16em;
	}
}


/* 2b. Kosár: minden tétel külön kártya (Árpád, 2026-10-02: „borzasztóan néz ki, legyen rendezettebb").
   A Sunshine táblázata marad (a frissítés és a törlés az ő űrlapján megy), csak a megjelenés más:
   kép balra; jobbra a termék neve, alatta kisebben a kategória és a gyerek; legalul a mennyiség a
   kukával és a sor ára. A darabár halványan a név alatt. Minden szélességen így — egy szülő nem
   táblázatot olvas, hanem tételeket. */
body #sunshine table#sunshine--cart--items {
	display: block;
	border: 0;
	margin: 0 0 16px;
}

body #sunshine #sunshine--cart--items thead {
	display: none;
}

body #sunshine #sunshine--cart--items tbody {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

body #sunshine #sunshine--cart--items tr.sunshine--cart-item {
	display: grid;
	grid-template-columns: 84px 1fr auto;
	grid-template-areas:
		"img name  name"
		"img price price"
		"img qty   total";
	align-items: center;
	gap: 4px 14px;
	padding: 14px;
	background: var(--hf-card);
	border: 1px solid var(--hf-line);
	border-radius: var(--hf-radius);
	box-shadow: 0 1px 3px rgba(17, 17, 17, 0.05);
}

body #sunshine #sunshine--cart--items td {
	display: block;
	padding: 0;
	border: 0;
	width: auto;
	min-width: 0;
	text-align: left !important;
}

body #sunshine #sunshine--cart--items td:before {
	content: none;
	display: none;
}

body #sunshine #sunshine--cart--items td.sunshine--cart-item--image {
	grid-area: img;
	align-self: start;
	width: 84px;
	padding: 0;
	border: 0;
}

body #sunshine #sunshine--cart--items td.sunshine--cart-item--image img {
	display: block;
	width: 84px;
	height: 84px;
	max-width: none;
	max-height: none;
	object-fit: cover;
	border-radius: 8px;
}

body #sunshine #sunshine--cart--items td.sunshine--cart-item--name {
	grid-area: name;
	align-self: end;
}

/* A Sunshine mobilon 100px-es bal margót tesz a szövegek elé (a címkék helye) — a kártyában nem kell. */
body #sunshine #sunshine--cart--items td .sunshine--cart-item--product-name,
body #sunshine #sunshine--cart--items td .sunshine--cart-item--image-name,
body #sunshine #sunshine--cart--items td .sunshine--cart-item--product-options,
body #sunshine #sunshine--cart--items td .sunshine--cart-item--comments {
	margin-left: 0;
}

body #sunshine #sunshine--cart--items .sunshine--cart-item--product-name {
	display: flex;
	flex-direction: column;           /* a kategória (első elem) a név fölött, kisebben */
	font-weight: 700;
	font-size: 1.05rem;
	line-height: 1.25;
}

body #sunshine #sunshine--cart--items .sunshine--product--separator {
	display: none;
}

body #sunshine #sunshine--cart--items .sunshine--product--category {
	color: var(--hf-muted);
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.02em;
}

/* „ — Minta Anna": a gondolatjel szövegcsomópont, ezért a doboz betűmérete 0, csak a link látszik. */
body #sunshine #sunshine--cart--items .sunshine--cart-item--image-name {
	margin-top: 2px;
	font-size: 0;
}

body #sunshine #sunshine--cart--items .sunshine--cart-item--image-name a {
	color: var(--hf-muted);
	font-size: 0.86rem;
	font-weight: 500;
	text-decoration: none;
}

body #sunshine #sunshine--cart--items td.sunshine--cart-item--price {
	grid-area: price;
	color: var(--hf-muted);
	font-size: 0.86rem;
}

body #sunshine #sunshine--cart--items td.sunshine--cart-item--price .sunshine-price::after {
	content: " / db";
}

body #sunshine #sunshine--cart--items td.sunshine--cart-item--qty {
	grid-area: qty;
	display: flex;
	align-items: center;
	gap: 12px;
	margin-top: 6px;
}

body #sunshine #sunshine--cart--items td.sunshine--cart-item--qty input.sunshine--qty {
	width: 64px;
	height: 42px;
	margin: 0;
	text-align: center;
}

/* Csomagnál a darabszám ugyanannak a képválasztásnak a példányszáma (2026-10-15) — ezt kiírjuk alá. Más képekkel
   a „+ Még egy … más képekkel" link ad új sort (shop/shop.php 7.). Mobilon a felirat a sor saját rácssora (a
   darabszám-cella ott keskeny), asztalon a darabszám-cellán belül, a mező alatt (lent, a 768px-es szakaszban). */
body #sunshine #sunshine--cart--items tr.sunshine--product-package {
	grid-template-areas:
		"img name  name"
		"img price price"
		"img qty   total"
		"img note  note";
}

body #sunshine #sunshine--cart--items tr.sunshine--product-package::after {
	content: "db, ugyanezekkel a képekkel";
	grid-area: note;
	color: var(--hf-muted);
	font-size: 12px;
	line-height: 1.3;
}

body #sunshine #sunshine--cart--items .hf-pack-again {
	display: block;
	margin-top: 10px;
	padding: 0;
	background: none;
	border: 0;
	color: var(--hf-accent);
	font-size: 13px;
	font-weight: 600;
	text-align: left;
	cursor: pointer;
}

body #sunshine #sunshine--cart--items .hf-pack-again:hover,
body #sunshine #sunshine--cart--items .hf-pack-again:focus-visible {
	text-decoration: underline;
}

body #sunshine #sunshine--cart--items a.sunshine--cart-item--delete {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--hf-bg-soft);
	color: var(--hf-accent);
	font-size: 18px;
}

body #sunshine #sunshine--cart--items td.sunshine--cart-item--total {
	grid-area: total;
	align-self: end;
	margin-top: 6px;
	font-size: 1.15rem;
	font-weight: 700;
	text-align: right !important;
	white-space: nowrap;
}

/* A „Kosár frissítése" csak mennyiségváltozás után kell — halk, a lista alatt jobbra. */
body #sunshine #sunshine--cart--update-button {
	float: none;
	margin: 0 0 18px;
	text-align: right;
}

body #sunshine #sunshine--cart--update-button input[disabled] {
	opacity: 0.45;
}

/* „Vissza ide: Minta Anna" → keretes pirula-gomb. */
body #sunshine #sunshine--cart--gallery-return {
	margin: 0 0 22px;
}

body #sunshine #sunshine--cart--gallery-return a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 2px 18px 0;
	border: 2px solid var(--hf-accent);
	border-radius: 999px;
	color: var(--hf-accent);
	font-family: var(--hf-head);
	font-size: 16px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	text-decoration: none;
}

body #sunshine #sunshine--cart--gallery-return a::before {
	content: "←";
	margin-right: 8px;
}

/* Az összesítő: saját kártya a tételek alatt, teljes szélességben; a végösszeg felett vonal. */
body #sunshine #sunshine--cart--totals {
	float: none;
	width: 100%;
	max-width: none;
	margin: 0;
	padding: 18px 18px 6px;
	background: var(--hf-card);
	border: 1px solid var(--hf-line);
	border-radius: var(--hf-radius);
	box-sizing: border-box;
}

body #sunshine #sunshine--cart--totals--items {
	margin: 0 0 16px;
	border-collapse: collapse;
}

body #sunshine #sunshine--cart--totals--items th,
body #sunshine #sunshine--cart--totals--items td {
	padding: 6px 0;
	border: 0;
	vertical-align: baseline;
}

body #sunshine #sunshine--cart--totals--items .sunshine--cart--discount td {
	color: #1f7a3a;
	font-weight: 600;
}

body #sunshine #sunshine--cart--totals--items .sunshine--cart--total th,
body #sunshine #sunshine--cart--totals--items .sunshine--cart--total td {
	padding-top: 12px;
	border-top: 2px solid var(--hf-line);
}

body #sunshine #sunshine--cart--checkout-button {
	margin: 0 0 12px;
}

body #sunshine #sunshine--cart--checkout-button a {
	display: flex;
	justify-content: center;
	width: 100%;
	box-sizing: border-box;
}

body #sunshine #sunshine--cart--totals--items th .sunshine--cart--discount--names {
	color: var(--hf-muted);
	font-size: 0.82rem;
	font-style: normal;
	font-weight: 500;
}

body #sunshine #sunshine--cart--totals--items .sunshine--cart--total th {
	font-size: 17px;
	line-height: 1.15;
}


/* 2c. Galéria: a képek fölött csak navigáció (Árpád, 2026-10-02). A cím alatt két gombszerű fül —
   „Fotók" | „Csomagok, ajándékok" (a Sunshine boltja); az aktív magenta (gombszerű fülek főszabálya). */
.hf-gallery-tabs {
	display: flex;
	gap: 8px;
	width: 100%;
	max-width: 520px;
	margin: 6px auto 0;
}

.hf-gallery-tabs__tab {
	flex: 1 1 0;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 46px;
	padding: 3px 10px 0;
	border: 2px solid var(--hf-accent);
	border-radius: var(--hf-radius);
	background: var(--hf-card);
	color: var(--hf-accent);
	font-family: var(--hf-head);
	font-size: 16px;
	font-weight: 700;
	letter-spacing: 0.04em;
	line-height: 1.1;
	text-align: center;
	text-transform: uppercase;
	text-decoration: none;
	box-sizing: border-box;
}

.hf-gallery-tabs__tab:hover,
.hf-gallery-tabs__tab:focus-visible {
	background: var(--hf-bg-soft);
	color: var(--hf-accent);
}

.hf-gallery-tabs__tab--current,
.hf-gallery-tabs__tab--current:hover {
	background: var(--hf-accent);
	color: var(--hf-cream);
}

/* Eligazító sor a képek fölött — ugyanazok a kerek jelek, mint a képeken (szív fehér, kosár magenta). */
.hf-gallery-guide {
	margin: 0 0 16px;
	padding: 10px 14px;
	background: var(--hf-bg-soft);
	border: 1px solid var(--hf-line);
	border-radius: var(--hf-radius);
	color: var(--hf-ink);
	font-size: 14.5px;
	line-height: 1.4;
}

.hf-gallery-guide p {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 4px 0;
}

.hf-gallery-guide__icon {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 1px 4px rgba(17, 17, 17, 0.22);
	color: var(--hf-ink);
	font-family: "SunshineIcons";
	font-size: 15px;
	line-height: 1;
}

.hf-gallery-guide__icon--heart::before { content: "\f101"; }

.hf-gallery-guide__icon--cart {
	background: var(--hf-accent);
	color: #fff;
}

.hf-gallery-guide__icon--cart::before { content: "\f14b"; }

/* A képek alatt: kupon, „Mind a … kép digitálisan", Csomagok, „egy kosár" mondat. */
.single-sunshine-gallery .hf-coupon-bar {
	margin: 24px 0 0 !important;
}

.hf-gallery-foot {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin: 14px 0 0;
}

.hf-gallery-foot__card {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px 16px;
	padding: 16px 18px;
	background: var(--hf-card);
	border: 1px solid var(--hf-line);
	border-radius: var(--hf-radius);
	color: var(--hf-ink);
	text-decoration: none;
}

.hf-gallery-foot__text {
	display: flex;
	flex-direction: column;
	gap: 3px;
	min-width: 0;
	flex: 1 1 220px;
}

.hf-gallery-foot__text strong {
	font-size: 1.08rem;
}

.hf-gallery-foot__text span {
	color: var(--hf-muted);
	font-size: 0.9rem;
	line-height: 1.4;
}

.hf-gallery-foot__action {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-left: auto;
}

.hf-gallery-foot__price {
	font-size: 1.15rem;
	font-weight: 700;
	white-space: nowrap;
}

.hf-gallery-foot__btn.button {
	margin: 0;
	white-space: nowrap;
}

.hf-gallery-foot__card--link:hover,
.hf-gallery-foot__card--link:focus-visible {
	border-color: var(--hf-accent);
	color: var(--hf-ink);
}

.hf-gallery-foot__arrow {
	color: var(--hf-accent);
	font-size: 1.6rem;
	line-height: 1;
}

.hf-gallery-foot__note {
	margin: 2px 0 0;
	color: var(--hf-muted);
	font-size: 0.9rem;
	text-align: center;
}

/* A fiók-menüpontok (Kedvencek, Fiókom, Kilépés) a fejléc menüjében — a mobil oldalsávban egy
   vonallal elválasztva a bemutatkozó oldalaktól. */
.header-menu-sidebar .hf-menu-account--first {
	margin-top: 10px;
	padding-top: 10px;
	border-top: 1px solid var(--hf-line);
}

/* A „Kosárba" gomb teli magenta, krém betűvel — a fenti `#sunshine .sunshine--open-modal` szabály
   (minden ablaknyitó link magenta, !important) itt kivétel, különben magenta lenne a magentán. */
#sunshine .hf-gallery-foot .hf-gallery-foot__btn.button,
#sunshine .hf-gallery-foot .hf-gallery-foot__btn.button:hover,
#sunshine .hf-gallery-foot .hf-gallery-foot__btn.button:focus-visible {
	background: var(--hf-accent);
	border-color: var(--hf-accent);
	color: var(--hf-cream) !important;
}

@media (max-width: 420px) {
	.hf-gallery-tabs__tab {
		font-size: 15px;
		letter-spacing: 0.02em;
		padding-left: 6px;
		padding-right: 6px;
	}
}

/* Belépve 3 menüponttal több van (Kedvencek, Fiókom, Kilépés) — kisebb asztali kijelzőn szűkebb térköz,
   hogy a szülő menüje egy sorban maradjon (1024px-en kipróbálva). */
@media (min-width: 960px) and (max-width: 1279px) {
	body.logged-in .header--row.hide-on-mobile .primary-menu-ul > li {
		margin: 0 6px;
	}

	body.logged-in .header--row.hide-on-mobile .primary-menu-ul > li > a,
	body.logged-in .header--row.hide-on-mobile .primary-menu-ul > li .wrap > a {
		font-size: 16px;
	}
}


/* ==========================================================================
   Bolt és rendelés (Árpád, 2026-10-03 — egy végigkattintott ASZTALI rendelés után; shop/shop.php)
   Szabály: a mobil elrendezés NEM változik — a szerkezeti szabályok `min-width: 768px` alatt vannak.
   Mindenhol (mobilon is) csak az új tartalom stílusa: a csomag lépései, a képválasztó léptetője és
   fejléce, a sikeres rendelés fejléce, a több képes tétel bélyegképei.
   ========================================================================== */

/* --- 1a. Termékablak (csomag, ajándék): asztalin kisebb, a magasság a tartalomé, balra a termékkép. --- */
@media (min-width: 768px) {
	body #sunshine--modal.sunshine--modal--store_product {
		max-width: 900px;
	}

	body #sunshine--modal.sunshine--modal--store_product #sunshine--modal--content {
		height: auto;
		max-height: 80vh; /* a Sunshine a #sunshine--modal-t 80vh-ra korlátozza — e fölött kilógna */
	}

	/* Rács: balra a kép (a Sunshine fejlécéből), jobbra a cím és a tartalom. A fejléc dobozai
	   `display: contents`-szel „eltűnnek", így a kép és a cím külön rácscellába kerülhet. */
	body #sunshine--modal #sunshine--store--product-details {
		display: grid;
		grid-template-columns: minmax(0, 42%) minmax(0, 1fr);
		grid-template-rows: auto auto 1fr;
		column-gap: 34px;
		padding: 30px 34px 34px;
		box-sizing: border-box;
		overflow: visible;
	}

	body #sunshine--modal #sunshine--store--product-details--header,
	body #sunshine--modal #sunshine--store--product-details--header--product {
		display: contents;
	}

	body #sunshine--modal #sunshine--store--product-details--header--product img {
		grid-column: 1;
		grid-row: 1 / span 3;
		align-self: start;
		display: block;
		width: 100%;
		height: auto;
		border-radius: 14px;
	}

	body #sunshine--modal #sunshine--modal--content #sunshine--store--product-details--header--product--title {
		grid-column: 2;
		grid-row: 1;
		margin: 4px 0 6px;
		color: var(--hf-ink);
		font-family: var(--hf-head);
		font-size: 32px;
		font-weight: 800;
		line-height: 1.05;
		letter-spacing: 0.01em;
	}

	body #sunshine--modal #sunshine--modal--content #sunshine--store--product-details--header--product--description {
		grid-column: 2;
		grid-row: 2;
		color: var(--hf-muted);
	}

	body #sunshine--modal #sunshine--store--product-details--content {
		grid-column: 2;
		grid-row: 3;
		padding: 6px 0 0;
		overflow: visible;
	}

	/* Termékkép nélkül egy oszlop (a kép helye ne maradjon üresen). */
	body #sunshine--modal #sunshine--store--product-details:not(:has(#sunshine--store--product-details--header--product img)) {
		grid-template-columns: minmax(0, 1fr);
	}

	body #sunshine--modal #sunshine--store--product-details:not(:has(#sunshine--store--product-details--header--product img)) > * {
		grid-column: 1 !important;
	}

	/* A csomag tartalma: pipás lista, a kategória („Papírképek —") nélkül — a név elég. */
	body #sunshine--modal .sunshine--product-details--package-items ul {
		margin: 8px 0 18px;
		padding: 0;
		list-style: none;
	}

	body #sunshine--modal .sunshine--product-details--package-items li {
		position: relative;
		margin: 0 0 6px;
		padding-left: 26px;
	}

	body #sunshine--modal .sunshine--product-details--package-items li::before {
		content: "✓";
		position: absolute;
		left: 0;
		color: var(--hf-accent);
		font-weight: 700;
	}

	body #sunshine--modal .sunshine--product-details--package-items .sunshine--product--category,
	body #sunshine--modal .sunshine--product-details--package-items .sunshine--product--separator {
		display: none;
	}

	body #sunshine--modal #sunshine--store--product-details #sunshine--product--details--price {
		margin: 4px 0 14px;
		font-size: 26px;
	}
}

/* A csomag eligazító mondata a termékablakban („A Kosárba után 2 lépésben…"). */
.hf-pack-hint {
	margin: 0 0 16px;
	padding: 10px 14px;
	background: var(--hf-bg-soft);
	border-radius: var(--hf-radius);
	color: var(--hf-ink);
	font-size: 14.5px;
	line-height: 1.45;
}

/* --- 1b. A csomag képeinek kiválasztása lépésenként (minden szélességen — új tartalom). --- */
#sunshine--modal .hf-pack {
	position: static;
}

#sunshine--modal .hf-pack__head {
	margin: 0 0 18px;
}

#sunshine--modal #sunshine--package--fill--title.hf-pack__title {
	margin: 0 0 12px;
	color: var(--hf-ink);
	font-family: var(--hf-head);
	font-size: 30px;
	font-weight: 800;
	line-height: 1.05;
}

#sunshine--modal .hf-pack__title .hf-pack__sub {
	display: block;
	margin: 4px 0 0;
	color: var(--hf-muted);
	font-family: var(--hf-body);
	font-size: 16px;
	font-weight: 500;
	line-height: 1.3;
}

/* A Sunshine a tétel címében minden `span`-t kicsinyít és eltol — a „2. lépés ·" a címmel egy méretű. */
#sunshine--modal .hf-pack .sunshine--package--fill--item--title span.hf-pack__step-label {
	display: inline;
	margin: 0;
	font-size: inherit;
}

#sunshine--modal .hf-pack__progress {
	display: flex;
	gap: 6px;
	margin: 0 0 6px;
}

#sunshine--modal .hf-pack__bar {
	flex: 1 1 0;
	height: 7px;
	border-radius: 4px;
	background: var(--hf-line);
	transition: background 0.25s;
}

#sunshine--modal .hf-pack__bar.is-done {
	background: #1f7a3a;
}

#sunshine--modal .hf-pack__status {
	color: var(--hf-muted);
	font-size: 14px;
}

#sunshine--modal .hf-pack--complete .hf-pack__status {
	color: #1f7a3a;
	font-weight: 600;
}

#sunshine--modal .hf-pack__steps {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin: 0 0 20px;
	padding: 0;
	list-style: none;
}

/* A Sunshine a tételt flex-sorba tenné 30px alsó margóval — a lépés kártya. */
#sunshine--modal .hf-pack .hf-pack__step {
	display: block;
	margin: 0;
	padding: 14px 16px;
	background: var(--hf-card);
	border: 2px solid var(--hf-line);
	border-radius: 12px;
}

#sunshine--modal .hf-pack .hf-pack__step--current {
	border-color: var(--hf-accent);
}

#sunshine--modal .hf-pack .hf-pack__step--done {
	border-color: #b9dcc4;
	background: #f4fbf6;
}

#sunshine--modal .hf-pack__step-head {
	display: flex;
	align-items: center;
	gap: 12px;
}

#sunshine--modal .hf-pack__num {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: var(--hf-bg-soft);
	color: var(--hf-ink);
	font-family: var(--hf-head);
	font-size: 19px;
	font-weight: 800;
}

#sunshine--modal .hf-pack__step--current .hf-pack__num {
	background: var(--hf-accent);
	color: #fff;
}

/* Kész lépés: a szám helyén zöld pipa. */
#sunshine--modal .hf-pack__step--done .hf-pack__num,
#sunshine--modal .hf-pack__step--free .hf-pack__num {
	background: #1f7a3a;
	color: #fff;
	font-size: 0;
}

#sunshine--modal .hf-pack__step--done .hf-pack__num::after,
#sunshine--modal .hf-pack__step--free .hf-pack__num::after {
	content: "✓";
	font-family: var(--hf-body);
	font-size: 18px;
}

#sunshine--modal .hf-pack__step-text {
	flex: 1 1 auto;
	min-width: 0;
}

#sunshine--modal .hf-pack .hf-pack__step-title {
	color: var(--hf-ink);
	font-size: 16.5px;
	font-weight: 700;
	line-height: 1.3;
}

#sunshine--modal .hf-pack__step-label {
	color: var(--hf-muted);
	font-weight: 600;
}

#sunshine--modal .hf-pack__hint {
	margin-top: 2px;
	color: var(--hf-muted);
	font-size: 14px;
}

#sunshine--modal .hf-pack__step--done .hf-pack__hint {
	color: #1f7a3a;
}

/* A lépés gombja — a Sunshine `visibility: hidden`-nel rejti (nála a „+" helyek a gombok). */
#sunshine--modal .hf-pack button.hf-pack__pick {
	visibility: visible;
	flex: 0 0 auto;
	margin: 0;
	padding: 10px 16px 8px;
	background: var(--hf-accent);
	border: 2px solid var(--hf-accent);
	border-radius: 999px;
	color: #fff;
	font-family: var(--hf-head);
	font-size: 16px;
	font-weight: 700;
	letter-spacing: 0.04em;
	line-height: 1;
	white-space: nowrap;
	cursor: pointer;
}

#sunshine--modal .hf-pack button.hf-pack__pick:hover {
	background: var(--hf-accent-dark);
	border-color: var(--hf-accent-dark);
}

#sunshine--modal .hf-pack__pick-edit,
#sunshine--modal .hf-pack__step--done .hf-pack__pick-new {
	display: none;
}

#sunshine--modal .hf-pack__step--done .hf-pack__pick-edit {
	display: inline;
}

/* Kész lépésnél a gomb csak halk „Csere". */
#sunshine--modal .hf-pack .hf-pack__step--done button.hf-pack__pick {
	background: transparent;
	color: var(--hf-accent);
}

#sunshine--modal .hf-pack .hf-pack__step--done button.hf-pack__pick:hover {
	background: var(--hf-accent);
	color: #fff;
}

#sunshine--modal .hf-pack .sunshine--multi-image-select--selected-images {
	gap: 8px;
	margin: 12px 0 0 46px;
}

#sunshine--modal .hf-pack .sunshine--multi-image-select--selected-images--item {
	width: 64px;
	height: 64px;
	overflow: hidden;
	background: var(--hf-bg-soft);
	border: 2px dashed var(--hf-line);
	border-radius: 8px;
	box-sizing: border-box;
}

#sunshine--modal .hf-pack .sunshine--multi-image-select--selected-images--item[data-image] {
	border: 0;
}

#sunshine--modal .hf-pack .sunshine--multi-image-select--selected-images--item::after {
	color: var(--hf-accent);
	font-size: 26px;
}

#sunshine--modal .hf-pack__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 12px;
}

#sunshine--modal .hf-pack__actions .button {
	margin: 0;
}

#sunshine--modal .hf-pack__note {
	margin: 14px 0 0;
	color: var(--hf-muted);
	font-size: 13.5px;
	line-height: 1.45;
}

/* Mobilon: kisebb margó (a Sunshine 70px-es oldalsó térközt ad), a szám a cím mellett, a gomb alatta. */
@media (max-width: 767px) {
	body #sunshine--modal.sunshine--modal--package_fill #sunshine--modal--content,
	body #sunshine--modal.sunshine--modal--package_edit #sunshine--modal--content {
		padding: 48px 16px 24px;
	}
}

@media (max-width: 480px) {
	#sunshine--modal .hf-pack__step-head {
		display: grid;
		grid-template-columns: 34px minmax(0, 1fr);
		align-items: start;
		gap: 10px 12px;
	}

	#sunshine--modal .hf-pack button.hf-pack__pick {
		grid-column: 2;
		justify-self: start;
	}

	#sunshine--modal .hf-pack .sunshine--multi-image-select--selected-images {
		margin-left: 46px;
	}

	#sunshine--modal .hf-pack .sunshine--multi-image-select--selected-images--item {
		width: 56px;
		height: 56px;
	}
}

/* A csomag ablaka asztalin: a tartalomhoz igazodó magasság (a Sunshine fix 80vh-t ad, alatta üres sáv). */
@media (min-width: 768px) {
	body #sunshine--modal.sunshine--modal--package_fill,
	body #sunshine--modal.sunshine--modal--package_edit {
		height: auto;
		max-width: 780px;
	}

	body #sunshine--modal.sunshine--modal--package_fill #sunshine--modal--content,
	body #sunshine--modal.sunshine--modal--package_edit #sunshine--modal--content {
		height: auto;
		min-height: 520px;
		max-height: 80vh; /* a Sunshine a #sunshine--modal-t 80vh-ra korlátozza — e fölött kilógna */
		padding: 34px 40px;
	}
}

/* --- 2. A képválasztó: fejléc a csomag lépésével + darabszám-léptető (minden szélességen). --- */
#sunshine--modal .hf-pick-head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 4px 12px;
	padding: 16px 40px 14px;
	background: var(--hf-bg-soft);
	border-bottom: 1px solid var(--hf-line);
}

#sunshine--modal .hf-pick-head__step {
	padding: 4px 9px 2px;
	border-radius: 999px;
	background: var(--hf-accent);
	color: #fff;
	font-family: var(--hf-head);
	font-size: 15px;
	font-weight: 700;
	letter-spacing: 0.04em;
}

#sunshine--modal .hf-pick-head__name {
	color: var(--hf-ink);
	font-size: 18px;
	font-weight: 700;
}

#sunshine--modal .hf-pick-head__need {
	color: var(--hf-muted);
	font-size: 15px;
}

@media (max-width: 767px) {
	#sunshine--modal .hf-pick-head {
		padding: 14px 16px 12px;
	}
}

#sunshine--modal .sunshine--multi-image-select--qty {
	display: flex;
	align-items: center;
	justify-content: center;
	margin-top: 8px;
}

#sunshine--modal .hf-qty {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 3px;
	background: var(--hf-card);
	border: 1.5px solid var(--hf-line);
	border-radius: 999px;
}

#sunshine--modal .hf-qty--on {
	border-color: var(--hf-accent);
}

#sunshine--modal .hf-qty button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	margin: 0;
	padding: 0;
	background: var(--hf-bg-soft);
	border: 0;
	border-radius: 50%;
	color: var(--hf-ink);
	font-family: var(--hf-body);
	font-size: 20px;
	font-weight: 600;
	line-height: 1;
	cursor: pointer;
}

#sunshine--modal .hf-qty button.hf-qty__plus {
	background: var(--hf-accent);
	color: #fff;
}

#sunshine--modal .hf-qty button:disabled {
	opacity: 0.35;
	cursor: default;
}

#sunshine--modal .hf-qty__value {
	min-width: 26px;
	color: var(--hf-ink);
	font-size: 17px;
	font-weight: 700;
	text-align: center;
}

#sunshine--modal .hf-qty__unit {
	padding: 0 8px 0 2px;
	color: var(--hf-muted);
	font-size: 14px;
}

/* A Sunshine választómezője marad (a szkriptje arra figyel), de nem látszik. */
#sunshine--modal .hf-qty select {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
	pointer-events: none;
}

/* --- 3. Pénztár: asztalin egyenes matricák, az ár nem törik sorokra. --- */
@media (min-width: 768px) {
	#sunshine--checkout--steps fieldset legend,
	#sunshine--checkout--steps fieldset legend button,
	#sunshine--checkout--order-review h2 {
		transform: none;
	}

	#sunshine--checkout--cart-items td.sunshine--checkout--cart-item--total,
	#sunshine--checkout--cart-items td.sunshine--checkout--cart-item--total * {
		white-space: nowrap;
	}
}

/* --- 4. Sikeres rendelés: zöld pipa, köszönet (minden szélességen — ez a megnyugtatás). --- */
#sunshine #sunshine--page-header.hf-order-done {
	display: block;
	margin: 6px 0 22px;
	padding: 34px 20px 26px;
	background: var(--hf-card);
	border: 1px solid var(--hf-line);
	border-radius: 16px;
	text-align: center;
}

.hf-order-done__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 84px;
	height: 84px;
	margin: 0 0 14px;
	border-radius: 50%;
	background: #1f7a3a;
	box-shadow: 0 0 0 10px #e4f3e9;
	color: #fff;
}

#sunshine #sunshine--page-header.hf-order-done h1.hf-order-done__title {
	display: block;
	margin: 0 0 10px;
	padding: 0;
	background: none;
	box-shadow: none;
	color: var(--hf-ink);
	font-family: var(--hf-head);
	font-size: 42px;
	font-weight: 800;
	line-height: 1.05;
	text-transform: uppercase;
	transform: none;
}

.hf-order-done__sub,
.hf-order-done__note {
	max-width: 560px;
	margin: 0 auto 6px;
	color: var(--hf-muted);
	font-size: 16px;
	line-height: 1.5;
}

.hf-order-done__sub strong {
	color: var(--hf-ink);
	word-break: break-all;
}

.hf-order-done .sunshine--action-menu {
	display: flex;
	justify-content: center;
	margin-top: 14px;
}

@media (max-width: 767px) {
	#sunshine #sunshine--page-header.hf-order-done h1.hf-order-done__title {
		font-size: 30px;
	}

	.hf-order-done__icon {
		width: 68px;
		height: 68px;
	}
}

/* A rendelés tételei (sunshine/order/item.php): a gyerek neve egyszer, a kiválasztott képek bélyegként.
   A Sunshine a letöltés mellé is kiírná a gyerek nevét — az a fenti sorban már megvan. */
.sunshine--order .hf-order-child {
	margin-top: 2px;
	color: var(--hf-muted);
	font-size: 0.9rem;
}

.sunshine--order .sunshine--order--item--gallery-name {
	display: none;
}

.hf-order-thumbs {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-top: 8px;
}

.hf-order-thumbs img {
	width: 46px;
	height: 46px;
	object-fit: cover;
	border-radius: 6px;
}

.hf-order-thumbs__name {
	padding: 2px 6px;
	background: var(--hf-bg-soft);
	border-radius: 4px;
	font-size: 12px;
}

/* --- 2. Asztalin a tételek oszlopokban (kosár és rendelés): kép · termék · mennyiség · ár · összesen.
   A kártyák maradnak (2b.), csak a sor ötoszlopos rács, fejléccel — középen nincs üres sáv. --- */
@media (min-width: 768px) {
	body #sunshine #sunshine--cart--items thead {
		display: block;
	}

	body #sunshine #sunshine--cart--items thead tr,
	body #sunshine #sunshine--cart--items tr.sunshine--cart-item {
		display: grid;
		grid-template-columns: 84px minmax(0, 1fr) 150px 130px 130px;
		grid-template-areas: "img name qty price total";
		align-items: center;
		column-gap: 20px;
	}

	body #sunshine #sunshine--cart--items thead tr {
		padding: 0 18px 6px;
	}

	body #sunshine #sunshine--cart--items thead th {
		padding: 0;
		border: 0;
		color: var(--hf-muted);
		font-family: var(--hf-body);
		font-size: 13px;
		font-weight: 600;
		letter-spacing: 0.02em;
		text-align: left;
	}

	body #sunshine #sunshine--cart--items thead th.sunshine--cart-item--image {
		grid-area: img;
		visibility: hidden;
	}

	/* A fejléc cellái is a nevükkel kerülnek a helyükre (a sorrend a DOM-ban más, mint a rácsban). */
	body #sunshine #sunshine--cart--items thead th.sunshine--cart-item--name { grid-area: name; }
	body #sunshine #sunshine--cart--items thead th.sunshine--cart-item--qty { grid-area: qty; }
	body #sunshine #sunshine--cart--items thead th.sunshine--cart-item--price { grid-area: price; }
	body #sunshine #sunshine--cart--items thead th.sunshine--cart-item--total { grid-area: total; }

	body #sunshine #sunshine--cart--items thead th.sunshine--cart-item--price,
	body #sunshine #sunshine--cart--items thead th.sunshine--cart-item--total {
		text-align: right;
	}

	body #sunshine #sunshine--cart--items tr.sunshine--cart-item {
		padding: 14px 18px;
	}

	body #sunshine #sunshine--cart--items td.sunshine--cart-item--name,
	body #sunshine #sunshine--cart--items td.sunshine--cart-item--image {
		align-self: center;
	}

	body #sunshine #sunshine--cart--items td.sunshine--cart-item--qty,
	body #sunshine #sunshine--cart--items td.sunshine--cart-item--total {
		margin-top: 0;
		align-self: center;
	}

	body #sunshine #sunshine--cart--items td.sunshine--cart-item--price {
		color: var(--hf-ink);
		font-size: 1rem;
		text-align: right !important;
		white-space: nowrap;
	}

	/* Csomag: asztalon a felirat a darabszám-cellában, a mező alatt (mobilon a sor rácssora, fent). */
	body #sunshine #sunshine--cart--items tr.sunshine--product-package::after {
		content: none;
	}

	body #sunshine #sunshine--cart--items tr.sunshine--product-package td.sunshine--cart-item--qty {
		flex-wrap: wrap;
		row-gap: 4px;
	}

	body #sunshine #sunshine--cart--items tr.sunshine--product-package td.sunshine--cart-item--qty::after {
		content: "db, ugyanezekkel a képekkel";
		flex-basis: 100%;
		color: var(--hf-muted);
		font-size: 12px;
		line-height: 1.3;
	}

	/* A „/ db" az oszlop fejlécéből („A termék ára") már kiderül. */
	body #sunshine #sunshine--cart--items td.sunshine--cart-item--price .sunshine-price::after {
		content: none;
	}

	body #sunshine #sunshine--cart--items td.sunshine--cart-item--total {
		font-size: 1.2rem;
	}

	/* Rendelés-oldal: a sikeres fejléc alatt az adatok egy kártyában, két oszlopban (adatok | számlázás). */
	body #sunshine.sunshine--order #sunshine--order--details {
		display: grid;
		grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
		gap: 18px 32px;
		margin: 0 0 24px;
		padding: 20px 24px;
		background: var(--hf-card);
		border: 1px solid var(--hf-line);
		border-radius: var(--hf-radius);
	}

	body #sunshine.sunshine--order #sunshine--order--data {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 14px 24px;
		margin: 0;
		padding: 0;
		border: 0;
	}

	body #sunshine.sunshine--order #sunshine--order--data .sunshine--order--data--item {
		margin: 0;
		padding: 0;
		border: 0;
	}

	body #sunshine.sunshine--order #sunshine--order--details > div:not(#sunshine--order--data) {
		margin: 0;
		padding: 0 0 0 24px;
		border-left: 1px solid var(--hf-line);
	}

	body #sunshine.sunshine--order #sunshine--order--details h3 {
		margin: 0 0 6px;
		color: var(--hf-muted);
		font-family: var(--hf-body);
		font-size: 13px;
		font-weight: 600;
		letter-spacing: 0.02em;
		text-transform: none;
	}

	body #sunshine.sunshine--order #sunshine--order--details address {
		margin: 0;
		font-style: normal;
		line-height: 1.5;
	}

	/* Az összesítő asztalin a jobb oldalon, keskenyebben — a végösszeg az árak oszlopa alatt. */
	body #sunshine.sunshine--order #sunshine--cart--totals {
		max-width: 460px;
		margin-left: auto;
	}
}

/* Kész csomagnál a „ha most nem végzel…" mondat már nem kell. */
#sunshine--modal .hf-pack--complete .hf-pack__note {
	display: none;
}

/* A termékablak képválasztója (kollázs, naptár) asztalin a TELJES ablakot fedje: a Sunshine a jobb oszlopba
   tenné (abszolút pozíció a legközelebbi pozicionált szülőhöz), ami a tartalomhoz igazodó ablakban
   beszorulna. Amíg nyitva van, az ablak a Sunshine eredeti 80vh-s magasságát kapja. */
@media (min-width: 768px) {
	body #sunshine--modal #sunshine--store--product-details,
	body #sunshine--modal #sunshine--store--product-details--content {
		position: static;
	}

	body #sunshine--modal.sunshine--modal--store_product #sunshine--modal--content:has(.sunshine--multi-image-select:not([style*="hidden"])) {
		height: 80vh;
	}

	body #sunshine--modal.sunshine--modal--store_product .sunshine--multi-image-select--header {
		width: 100%;
	}
}

/* A csomag tétele a rendelés oldalán: méretenként egy sor bélyegképekkel (shop.php); a Packages fájlnév-
   listája itt nem kell (a levelekben és a számlán marad). */
.sunshine--order .sunshine--cart--item--package--product {
	display: none;
}

.hf-order-pack {
	margin-top: 8px;
}

.hf-order-pack__name {
	color: var(--hf-ink);
	font-size: 0.86rem;
	font-weight: 600;
}

.hf-order-pack .hf-order-thumbs {
	margin-top: 4px;
}

/* A képválasztó mobilon: két kép egy sorban (~150px) — a léptető kisebb, a „db" felirat nélkül; a fejléc
   jobb oldalán hely a bezáró X-nek; a „2 / 6" számláló egy sorban. */
@media (max-width: 767px) {
	#sunshine--modal .hf-pick-head {
		padding-right: 56px;
	}

	#sunshine--modal .sunshine--multi-image-select--header--count {
		white-space: nowrap;
		margin-right: 12px;
	}
}

@media (max-width: 480px) {
	#sunshine--modal .hf-qty {
		gap: 2px;
		padding: 2px;
	}

	#sunshine--modal .hf-qty button {
		width: 32px;
		height: 32px;
	}

	#sunshine--modal .hf-qty__unit {
		display: none;
	}
}

/* A kosár kuka-gombja keskeny telefonon (360px) oválisra nyomódott — mindig kerek maradjon. */
body #sunshine #sunshine--cart--items a.sunshine--cart-item--delete {
	flex: 0 0 40px;
}

/* Végig számozott csomag-folyamat (Árpád, 2026-10-03): a termékablak az „1. lépés / N", a képek a 2…N. lépés. */
.hf-step-chip {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 10px;
	margin: 0 0 14px;
	color: var(--hf-ink);
	font-size: 15px;
	font-weight: 600;
}

.hf-step-chip span {
	padding: 4px 10px 2px;
	border-radius: 999px;
	background: var(--hf-accent);
	color: #fff;
	font-family: var(--hf-head);
	font-size: 15px;
	font-weight: 700;
	letter-spacing: 0.04em;
}

/* Az 1. lépés a kiválasztó ablakban: kész, halk sor (nincs gombja, nincs képe). */
#sunshine--modal .hf-pack .hf-pack__step--first {
	padding-top: 10px;
	padding-bottom: 10px;
	background: #f4fbf6;
	border-color: #b9dcc4;
}

#sunshine--modal .hf-pack__step--first .hf-pack__hint {
	color: #1f7a3a;
}

/* „Darabszám: hány csomagot kérsz?" a termékablak léptetője fölött. */
.hf-qty-label {
	margin: 0 0 6px;
	color: var(--hf-ink);
	font-size: 14.5px;
}

/* A képválasztó tetején: mire való a − / + (minden szélességen). */
#sunshine--modal .hf-pick-help {
	padding: 10px 40px;
	background: var(--hf-card);
	border-bottom: 1px solid var(--hf-line);
	color: var(--hf-ink);
	font-size: 14.5px;
	line-height: 1.4;
}

@media (max-width: 767px) {
	#sunshine--modal .hf-pick-help {
		padding: 10px 16px;
	}
}

/* --- A digitális letöltés kiemelt doboza a sikeres rendelés oldalán (IFC_Download_Box::page, 2026-10-03).
   Minden szélességen (új tartalom); a gomb teli magenta — a `#sunshine .sunshine--open-modal` szabály
   (magenta betű, !important) itt kivétel, különben magenta lenne a magentán. --- */
.hf-dl {
	margin: 0 0 22px;
	padding: 20px 22px 16px;
	background: var(--hf-card);
	border: 2px solid var(--hf-accent);
	border-radius: 16px;
}

.hf-dl__head {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0 0 14px;
}

.hf-dl__icon {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--hf-accent);
	color: #fff;
	font-size: 24px;
	line-height: 1;
}

#sunshine .hf-dl h2.hf-dl__title {
	margin: 0;
	padding: 0;
	background: none;
	box-shadow: none;
	color: var(--hf-ink);
	font-family: var(--hf-head);
	font-size: 28px;
	font-weight: 800;
	line-height: 1.1;
	text-transform: uppercase;
	transform: none;
}

.hf-dl__item {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px 16px;
	margin: 0 0 10px;
	padding: 14px 16px;
	background: var(--hf-bg-soft);
	border-radius: 12px;
}

.hf-dl__item-text {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.hf-dl__item-text strong {
	color: var(--hf-ink);
	font-size: 1.08rem;
}

.hf-dl__item-text span {
	color: var(--hf-muted);
	font-size: 0.92rem;
}

#sunshine .hf-dl a.hf-dl__btn,
#sunshine .hf-dl a.hf-dl__btn:hover,
#sunshine .hf-dl a.hf-dl__btn:focus-visible {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 13px 24px 11px;
	background: var(--hf-accent);
	border-radius: 999px;
	box-shadow: 0 10px 26px -12px rgba(230, 0, 121, 0.7);
	color: var(--hf-cream) !important;
	font-family: var(--hf-head);
	font-size: 19px;
	font-weight: 700;
	letter-spacing: 0.05em;
	line-height: 1;
	text-decoration: none;
	text-transform: uppercase !important;
}

#sunshine .hf-dl a.hf-dl__btn:hover {
	background: var(--hf-accent-dark);
}

.hf-dl__mail {
	margin: 4px 0 10px;
	color: var(--hf-ink);
	font-size: 15px;
	line-height: 1.5;
}

.hf-dl__mail strong {
	word-break: break-all;
}

.hf-dl__warn {
	margin: 0;
	padding: 10px 14px;
	background: #fff4cc;
	border-radius: 10px;
	color: var(--hf-ink);
	font-size: 14.5px;
	line-height: 1.5;
}

.hf-dl__warn a {
	color: var(--hf-accent);
	font-size: 13px;
	white-space: nowrap;
}

@media (max-width: 480px) {
	.hf-dl {
		padding: 16px 14px 12px;
	}

	#sunshine .hf-dl h2.hf-dl__title {
		font-size: 23px;
	}

	#sunshine .hf-dl a.hf-dl__btn {
		width: 100%;
		justify-content: center;
		box-sizing: border-box;
	}
}

/* ==========================================================================
   Termékválasztó ablakok a márka kinézetében (Árpád, 2026-10-06: „a képeken lévő kosárkára klikkelve …
   teljesen máshogyan néz ki … igazítsd olyan, mint a többi"; „ne legyenek ott a termék fotója piciben").
   A képre kattintós ablak (add_to_cart) eddig gyári Sunshine volt: szürke kosársáv fehér X-szel, apró
   szürke fülek, sötétszürke „Üzlet" gomb. Most: krém kosársáv magenta kosár-gombbal, sötét X, a főszabály
   gombszerű fülei, a termékek csak névvel (a kép a részleteknél, nagyban). A kosársáv és az X a bolt
   termékablakában (store_product) is ugyanez — a kettő így egyforma.
   ========================================================================== */

/* --- 1. Kosársáv az ablak tetején (a Sunshine `cart/mini-cart` sablonja): szürke helyett krém sáv. --- */
body #sunshine--modal #sunshine--image--cart-review {
	align-items: center;
	min-height: 56px;
	padding: 6px 12px;
	background: var(--hf-bg-soft);
	border-bottom: 1px solid var(--hf-line);
	box-sizing: border-box;
	font-size: 14.5px;
}

body #sunshine--modal #sunshine--image--cart-review .sunshine--mini-cart a {
	align-items: center;
	gap: 6px;
	min-height: 44px;
	padding: 0 18px;
	background: var(--hf-card);
	border: 2px solid var(--hf-accent);
	border-radius: 999px;
	box-sizing: border-box;
	color: var(--hf-accent);
	font-weight: 600;
	transition: background 0.15s, color 0.15s;
}

body #sunshine--modal #sunshine--image--cart-review .sunshine--mini-cart a:hover,
body #sunshine--modal #sunshine--image--cart-review .sunshine--mini-cart a:focus-visible {
	background: var(--hf-accent);
	color: var(--hf-cream);
}

body #sunshine--modal #sunshine--image--cart-review a::before,
body #sunshine--modal #sunshine--image--cart-review a::after {
	margin: 0;
	color: inherit;
}

body #sunshine--modal #sunshine--image--cart-review .sunshine--mini-cart--empty {
	padding: 0 6px;
	color: var(--hf-muted);
}

/* A bezáró X: mindenhol sötét, kerek, 44px-es célfelület (a Sunshine mobilon fehérre színezi, mert ott a szürke
   sávon ül — a krém sávon az eltűnne). */
body #sunshine--modal #sunshine--modal--close {
	width: 44px;
	height: 44px;
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	border-radius: 50% !important;
	color: var(--hf-ink) !important;
	transition: background 0.15s;
}

body #sunshine--modal #sunshine--modal--close::before {
	color: var(--hf-ink) !important;
	font-size: 22px;
}

body #sunshine--modal #sunshine--modal--close:hover {
	opacity: 1;
	background: var(--hf-bg-soft) !important;
}

/* Asztalin az X az ablak fölött, a jobb sarkánál (a Sunshine helye), csak nagyobb célfelülettel. */
@media (min-width: 641px) {
	body #sunshine--modal #sunshine--modal--close {
		top: -48px;
		right: -6px;
	}
}

/* Mobilon (a Sunshine 640px-es töréspontja) az X a kosársáv jobb végén ül — a sáv tartalma ne fusson alá. */
@media (max-width: 640px) {
	body #sunshine--modal #sunshine--modal--close {
		top: 6px;
		right: 6px;
	}

	body #sunshine--modal #sunshine--image--cart-review {
		padding-right: 60px;
	}

	body #sunshine--modal #sunshine--image--cart-review .sunshine--mini-cart a {
		padding: 0 14px;
		border-right: 2px solid var(--hf-accent);
	}
}

/* --- 2. A képre kattintós ablak: bal oszlop (a kép) és a kategóriák fülei. --- */
#sunshine--modal #sunshine--image--add-to-cart--header {
	background: var(--hf-bg-soft);
}

#sunshine--modal--content #sunshine--image--add-to-cart--header #sunshine--image--add-to-cart--header--image span {
	margin-top: 10px;
	color: var(--hf-muted);
	font-size: 14px;
	font-weight: 500;
}

#sunshine--modal #sunshine--image--add-to-cart--header--image img {
	border-radius: 8px;
}

/* A kategória-fülek: a főszabály gombjai (halvány sáv, fehér keretes gombok, az aktív magenta). */
#sunshine--modal #sunshine--image--add-to-cart--nav {
	margin: 0 0 6px;
}

#sunshine--modal ul#sunshine--image--add-to-cart--categories {
	flex: 1 1 auto;
	gap: 8px;
	padding: 8px;
	background: var(--hf-bg-soft);
	border: 1px solid var(--hf-line);
	border-radius: var(--hf-radius);
	overflow: visible;
}

#sunshine--modal ul#sunshine--image--add-to-cart--categories li {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0 16px;
	background: var(--hf-card);
	border: 2px solid #d9cdb8;
	border-radius: var(--hf-radius);
	box-sizing: border-box;
	box-shadow: 0 1px 2px rgba(17, 17, 17, 0.06);
	color: var(--hf-ink);
	font-size: 15px;
	font-weight: 600;
	transition: border-color 120ms, background 120ms;
}

#sunshine--modal ul#sunshine--image--add-to-cart--categories li:hover {
	background: var(--hf-card);
	border-color: var(--hf-accent);
	color: var(--hf-accent);
}

#sunshine--modal ul#sunshine--image--add-to-cart--categories li.active,
#sunshine--modal ul#sunshine--image--add-to-cart--categories li.active:hover {
	background: var(--hf-accent);
	border-color: var(--hf-accent);
	color: var(--hf-cream);
	box-shadow: 0 2px 6px rgba(230, 0, 121, 0.28);
}

/* A sötétszürke „Üzlet" gomb nem kell: a csomagok és az ajándékok itt is a listában vannak, a galérián pedig
   ott a „Csomagok, ajándékok" fül (mobilon a Sunshine is elrejti). Egy gombbal kevesebb. */
#sunshine--modal #sunshine--image--add-to-cart--store {
	display: none !important;
}

/* --- 3. A terméklista: csak a név és az ár (a pici termékkép kikerül — nagyban a részleteknél látszik). --- */
#sunshine--modal .sunshine--image--add-to-cart--product-list--name img {
	display: none;
}

#sunshine--modal .sunshine--image--add-to-cart--category {
	margin-top: 26px;
}

#sunshine--modal .sunshine--image--add-to-cart--category-name {
	color: var(--hf-ink);
	font-family: var(--hf-head);
	font-size: 24px;
	font-weight: 800;
	line-height: 1.1;
	letter-spacing: 0.01em;
}

#sunshine--modal .sunshine--image--add-to-cart--category-description {
	padding: 4px 0 10px;
	color: var(--hf-muted);
	font-size: 14.5px;
}

#sunshine--modal .sunshine--image--add-to-cart--product-list {
	border-bottom-color: var(--hf-line);
}

#sunshine--modal .sunshine--image--add-to-cart--product-list .sunshine--image--add-to-cart--product-item {
	min-height: 56px;
	padding: 10px 8px;
	border-top-color: var(--hf-line);
	border-radius: 0;
	color: var(--hf-ink);
	font-size: 18px;
	transition: background 120ms;
}

#sunshine--modal .sunshine--image--add-to-cart--product-list .sunshine--image--add-to-cart--product-item:hover {
	background: var(--hf-bg-soft);
}

#sunshine--modal .sunshine--image--add-to-cart--product-list--price {
	font-weight: 600;
	white-space: nowrap;
}

/* A sor végi nyíl a márka színében. */
#sunshine--modal .sunshine--image--add-to-cart--product-list--action button,
#sunshine--modal .sunshine--image--add-to-cart--product-list--action button::after {
	color: var(--hf-accent) !important;
}

/* --- 4. A termék részletei a képablakban: „Vissza a termékekhez" gombként, a termékkép nagyban. --- */
#sunshine--modal button#sunshine--product--details--close {
	float: none;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 44px;
	margin: 0 0 16px;
	padding: 0 16px;
	background: var(--hf-card);
	border: 2px solid #d9cdb8;
	border-radius: var(--hf-radius);
	box-sizing: border-box;
	color: var(--hf-ink);
	font-size: 15px;
	font-weight: 600;
	transition: border-color 120ms, color 120ms;
}

#sunshine--modal button#sunshine--product--details--close::before {
	margin: 0;
}

#sunshine--modal button#sunshine--product--details--close:hover {
	border-color: var(--hf-accent);
	color: var(--hf-accent);
}

#sunshine--modal #sunshine--product--details--title {
	margin: 0 0 14px;
	color: var(--hf-ink);
	font-family: var(--hf-head);
	font-size: 30px;
	font-weight: 800;
	line-height: 1.05;
	letter-spacing: 0.01em;
}

#sunshine--modal #sunshine--product--details--image {
	max-width: 46%;
	margin: 0 0 20px 28px;
}

#sunshine--modal #sunshine--product--details--image img {
	display: block;
	width: 100%;
	border-radius: 14px;
}

#sunshine--modal #sunshine--product--details #sunshine--product--details--price {
	font-size: 24px;
}

/* Mobilon a kép a cím alatt, teljes szélességben (nagyban — ez az egyetlen hely, ahol a termék képe látszik). */
@media (max-width: 640px) {
	#sunshine--modal #sunshine--product--details--image {
		float: none;
		max-width: 360px;
		margin: 0 0 18px;
	}

	#sunshine--modal #sunshine--product--details--title {
		font-size: 26px;
	}

	#sunshine--modal .sunshine--image--add-to-cart--product-list .sunshine--image--add-to-cart--product-item {
		font-size: 17px;
	}
}

/* --- 5. „Csomagok, ajándékok" fül (store/category): a sorokban csak a név és az ár, a termékkép a termék
   ablakában látszik nagyban. --- */
#sunshine .sunshine--store--product-item--image {
	display: none;
}

/* Az ár egy sorban („11 900 Ft" ne törjön), a nyíl magenta — ugyanaz a sor, mint a képablak listájában. */
#sunshine .sunshine--store--product-item--price {
	font-weight: 600;
	white-space: nowrap;
}

#sunshine--store .sunshine--store--product-item--select-options::after,
#sunshine--store .sunshine--store--product-item--select-options:hover::after {
	color: var(--hf-accent);
}

/* --- Fizetési mód ikonjai (2026-10-07): a Stripe opció címkéje mögött Visa, Mastercard, Apple Pay, Google Pay,
   Revolut (2026-10-08) (shop/shop.php, hf_pay_icons()). Saját fehér / fekete kártyán, keretes szélükkel. Mobilon a név alatt, külön sorban. --- */
#sunshine--checkout .hf-pay-icons {
	display: inline-flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-left: 12px;
	vertical-align: middle;
}

#sunshine--checkout .hf-pay-icons img {
	display: block;
	width: 38px;
	height: 24px;
	border-radius: 4px;
}

@media (max-width: 480px) {
	#sunshine--checkout .hf-pay-icons {
		display: flex;
		margin: 8px 0 2px;
	}
}

/* ==========================================================================
   Kép-alapú árazás (2026-10-29) — a rajz: docs/kepvalaszto-rajz.html; a PHP: IFC_Image_Front, a JS: shop/kep.js.
   Csak a kép-alapú fotózás galériáin, Kedvenceiben és kosarában van ilyen elem.
   ========================================================================== */

/* --- Csempe: a kosárban lévő kép kerete és „✓ A kosárban" címke (a rajz `sel`). A keret egy ráhelyezett réteg,
   mert a kép a saját kerete fölé rajzolna; az Összes képei lila „✓ Az Összesben" címkét kapnak. --- */
.sunshine--image-item.hf-in-cart, .sunshine--image-item.hf-in-all { position: relative; }
.sunshine--image-item.hf-in-cart::after { content: ""; position: absolute; inset: 0; border: 4px solid var(--hf-accent); border-radius: 8px; pointer-events: none; z-index: 2; }
.sunshine--image-item.hf-in-cart::before, .sunshine--image-item.hf-in-all::before { content: "✓ A kosárban"; position: absolute; right: 8px; top: 8px; z-index: 3; padding: 3px 8px; border-radius: 999px; background: var(--hf-accent); color: #fff; font: 700 12px/1.2 var(--hf-body); pointer-events: none; }
.sunshine--image-item.hf-in-all::before { content: "✓ Az Összesben"; background: var(--hf-purple); }

/* --- Közös: doboz, ár, gomb, link-gomb. --- */
.hf-kep-foot { display: grid; gap: 12px; margin-top: 18px; }
.hf-kep-box { background: var(--hf-card); border: 2px solid var(--hf-line); border-radius: var(--hf-radius); padding: 14px 16px; }
.hf-kep-box h3 { margin: 0 0 4px !important; font-family: var(--hf-head); font-size: 22px; font-weight: 700; text-transform: uppercase !important; letter-spacing: .01em; line-height: 1.05; }
.hf-kep-box p { margin: 0 0 6px; font-size: 14.5px; color: var(--hf-muted); }
.hf-kep-box__row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 10px; flex-wrap: wrap; }
.hf-kep-price { font-family: var(--hf-head); font-weight: 700; font-size: 26px; white-space: nowrap; }
.hf-kep-btn.is-in { background: transparent !important; color: var(--hf-accent) !important; border: 2px solid var(--hf-accent) !important; }
.hf-linkbtn { border: 0; background: none; padding: 6px 0; min-height: 44px; color: var(--hf-accent); font: 500 15px var(--hf-body); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.hf-linkbtn.is-rm { color: var(--hf-muted); }
.is-busy { opacity: .55; pointer-events: none; }

/* „Ajándékok és árak": sárga doboz, lila „Ajándék" címkék. */
.hf-kep-rules { background: var(--hf-yellow); border-color: var(--hf-yellow); }
.hf-kep-rules h3 { color: var(--hf-purple); }
.hf-kep-rules ul { margin: 10px 0 0; padding-left: 18px; font-size: 14.5px; display: grid; gap: 3px; color: var(--hf-ink); }
.hf-kep-gifts { display: grid; gap: 6px; margin-top: 8px; }
.hf-kep-gift { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px; align-items: start; font-size: 15px; line-height: 1.35; }
.hf-kep-badge { font-family: var(--hf-head); font-weight: 700; font-size: 14px; text-transform: uppercase; letter-spacing: .04em; background: var(--hf-purple); color: var(--hf-yellow); padding: 2px 7px 1px; transform: rotate(-2deg); white-space: nowrap; }

/* Az Összes ajánlója: lila doboz. */
.hf-kep-upsell { background: var(--hf-purple); border-color: var(--hf-purple); color: var(--hf-cream); }
.hf-kep-upsell h3 { color: var(--hf-yellow); }
.hf-kep-upsell p { color: var(--hf-cream); }
.hf-kep-upsell .hf-kep-btn { background: var(--hf-yellow) !important; color: var(--hf-purple) !important; }
/* Az Összes-ajánló (Árpád 8. döntése, 2026-11-03): fejsorban a név és az ár, legalul kicsiben a különbözet. */
.hf-kep-upsell .hf-kc__head h3 { margin: 0 !important; }
.hf-kep-upsell .hf-kep-price { color: var(--hf-yellow); }
.hf-kep-upsell p.hf-kep-upsell__diff { font-size: 13px; margin-top: 2px; }

/* --- Képablak (a Sunshine felugró ablakában). --- */
/* Felépítés (Árpád, 2026-10-30 — asztalin levágódott az alja, menteni csak görgetés után lehetett): görgethető törzs
   (.hf-kep__body) + mindig látszó fekete alsó sáv (.hf-kep__foot) az összeggel és a fő gombbal, mint a galéria sávja.
   Mobilon az ablak teljes képernyős, asztalin (900px fölött) kéthasábos: balra nagyban a kép, jobbra a választás. */
#sunshine--modal.sunshine--modal--hf_kep, #sunshine--modal.sunshine--modal--hf_kep_gk { max-width: 520px; }
#sunshine--modal.sunshine--modal--hf_kep #sunshine--modal--content, #sunshine--modal.sunshine--modal--hf_kep_gk #sunshine--modal--content { padding: 0 !important; overflow: hidden !important; display: flex; flex-direction: column; }
#sunshine--modal .hf-kep, #sunshine--modal .hf-kep p, #sunshine--modal .hf-kep small, #sunshine--modal .hf-kep div { line-height: 1.4; }
.hf-kep { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; color: var(--hf-ink); }
.hf-kep__body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; display: grid; gap: 12px; align-content: start; padding: 18px 16px 16px; }
.hf-kep__foot { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); background: var(--hf-black); color: var(--hf-cream); }
.hf-kep__foot .hf-kep__sum { display: grid; gap: 0; min-width: 0; }
.hf-kep__foot .hf-kep__sumlbl { font-size: 12.5px; color: #d9cfbf; }
.hf-kep__foot .hf-kep__sumval { font-size: 26px; color: #fff; }
#sunshine--modal .hf-kep__foot .button { flex: none; width: auto; min-width: 140px; margin: 0 !important; }
#sunshine--modal .hf-kep__foot .button:only-child { flex: 1 1 auto; }
@media (max-width: 640px) {
	#sunshine--modal.sunshine--modal--hf_kep #sunshine--modal--content, #sunshine--modal.sunshine--modal--hf_kep_gk #sunshine--modal--content { height: 100%; max-height: 100% !important; border-radius: 0; }
}
@media (min-width: 900px) {
	#sunshine--modal.sunshine--modal--hf_kep { max-width: 920px; }
	#sunshine--modal.sunshine--modal--hf_kep_gk { max-width: 640px; }
	#sunshine--modal.sunshine--modal--hf_kep, #sunshine--modal.sunshine--modal--hf_kep_gk,
	#sunshine--modal.sunshine--modal--hf_kep #sunshine--modal--content, #sunshine--modal.sunshine--modal--hf_kep_gk #sunshine--modal--content { max-height: calc(100vh - 120px) !important; }
	.hf-kep .hf-kep__body { padding: 24px; }
	.hf-kep .hf-kep__foot { padding: 14px 24px; }
	/* Két hasáb: a .hf-kep__pick „eltűnik", a kép balra kerül, minden más jobbra, egymás alá. A sorköz margóval (az
	   üres sorok rácsközt ne kapjanak). A kép görgetéskor a helyén marad. */
	.hf-kep:not(.hf-kep--gk) .hf-kep__body { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); column-gap: 28px; row-gap: 0; }
	.hf-kep:not(.hf-kep--gk) .hf-kep__body > *, .hf-kep:not(.hf-kep--gk) .hf-kep__imgprice { grid-column: 2; margin-bottom: 14px; }
	.hf-kep:not(.hf-kep--gk) .hf-kep__body > :last-child { margin-bottom: 0; }
	.hf-kep:not(.hf-kep--gk) .hf-kep__pick { display: contents; }
	.hf-kep:not(.hf-kep--gk) .hf-kep__ph { grid-column: 1; grid-row: 1 / span 8; align-self: start; position: sticky; top: 0; }
	.hf-kep:not(.hf-kep--gk) .hf-kep__ph img { width: auto; max-width: 100%; max-height: calc(100vh - 260px); margin: 0 auto; }
	.hf-kep .hf-kep__gkpick { grid-template-columns: repeat(6, minmax(0, 1fr)); }
	/* (A `.hf-kep` előtag azért kell, mert az alapszabályok lejjebb állnak a fájlban.) Egérrel kisebb léptetők is elegek — így laptopon (720px magas ablak) görgetés nélkül kifér a méretlista. */
	.hf-kep .hf-kep__size { padding: 7px 0; }
	.hf-kep .hf-kep__step button { width: 38px; height: 38px; font-size: 18px !important; }
}
.hf-kep__top { display: flex; align-items: center; padding-right: 48px; }
.hf-kep__title { font-size: 24px; }
.hf-kep__intro { margin: 0; font-size: 14px; color: var(--hf-muted); }
.hf-kep__pick { display: grid; grid-template-columns: minmax(96px, 42%) minmax(0, 1fr); gap: 14px; align-items: center; }
.hf-kep__ph img { display: block; width: 100%; height: auto; border-radius: 8px; }
.hf-kep__lbl { font-family: var(--hf-head); font-weight: 700; text-transform: uppercase; font-size: 15px; letter-spacing: .04em; color: var(--hf-purple); }
.hf-kep__price { font-family: var(--hf-head); font-weight: 700; font-size: 30px; line-height: 1.05; white-space: nowrap; }
.hf-kep__price.is-word { font-size: 23px; white-space: normal; }
.hf-kep__imgprice p { margin: 2px 0 0; font-size: 13.5px; color: var(--hf-muted); }
.hf-kep__gift { display: inline-block; margin-top: 6px; padding: 3px 8px; border-radius: 6px; background: var(--hf-yellow); font-size: 13px; font-weight: 500; }
.hf-kep__sizes { background: var(--hf-card); border: 2px solid var(--hf-line); border-radius: var(--hf-radius); padding: 4px 12px; }
.hf-kep__sizes h4 { margin: 8px 0 2px !important; font-family: var(--hf-head); font-size: 19px; text-transform: uppercase !important; letter-spacing: .02em; }
.hf-kep__size { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 10px 0; border-top: 1px solid var(--hf-line); }
.hf-kep__sizes h4 + .hf-kep__size, .hf-kep__sizes > .hf-kep__size:first-child { border-top: 0; }
.hf-kep__nm { font-weight: 500; }
.hf-kep__nm small { display: block; font-weight: 400; font-size: 12.5px; color: var(--hf-muted); }
.hf-kep__step { display: inline-flex; align-items: center; gap: 4px; }
.hf-kep__step button { width: 44px; height: 44px; padding: 0 !important; border-radius: 50% !important; border: 2px solid var(--hf-line) !important; background: var(--hf-cream) !important; color: var(--hf-ink) !important; font: 700 20px/1 var(--hf-body) !important; cursor: pointer; }
.hf-kep__step button:disabled { opacity: .35; cursor: default; }
.hf-kep__step output { min-width: 26px; text-align: center; font-weight: 700; font-variant-numeric: tabular-nums; }
.hf-kep__size.has .hf-kep__step output { color: var(--hf-accent); }
.hf-kep__gp { margin: 0; font-size: 13.5px; color: var(--hf-purple); background: var(--hf-bg-soft); border-radius: var(--hf-radius); padding: 10px 12px; }
.hf-kep__sum { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.hf-kep__sumlbl { font-size: 14px; color: var(--hf-muted); }
.hf-kep__actions { display: grid; gap: 4px; justify-items: center; }
.hf-kep__actions .hf-kep__save { width: 100%; }
/* Nagyszülőknek: képek kijelölése, méret. */
.hf-kep__gkpick { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin: 6px 0 4px; }
.hf-kep__gkp { position: relative; padding: 0 !important; border: 0 !important; border-radius: 6px !important; overflow: hidden; background: var(--hf-line) !important; aspect-ratio: 4 / 5; cursor: pointer; }
.hf-kep__gkp img { display: block; width: 100%; height: 100%; object-fit: cover; }
.hf-kep__ck { position: absolute; right: 4px; top: 4px; width: 22px; height: 22px; border-radius: 50%; background: rgba(255,255,255,.95); border: 2px solid var(--hf-line); font-size: 13px; font-weight: 700; line-height: 18px; text-align: center; color: #fff; }
.hf-kep__gkp[aria-pressed="true"] { outline: 3px solid var(--hf-accent); outline-offset: -3px; }
.hf-kep__gkp[aria-pressed="true"] .hf-kep__ck { background: var(--hf-accent); border-color: var(--hf-accent); }
.hf-kep__seg { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 6px 0 10px; }
.hf-kep__seg button { min-height: 52px; border-radius: var(--hf-radius) !important; border: 2px solid var(--hf-line) !important; background: var(--hf-cream) !important; color: var(--hf-ink) !important; font: 500 15px var(--hf-body) !important; padding: 6px 8px !important; cursor: pointer; }
.hf-kep__seg button small { display: block; font-weight: 400; font-size: 12px; color: var(--hf-muted); }
.hf-kep__seg button[aria-checked="true"] { border-color: var(--hf-accent) !important; background: var(--hf-card) !important; color: var(--hf-accent) !important; }

/* --- Értesítő buborék a képműveletek után. (Az alsó összesítő sáv 2026-10-30-án kivezetve: a végösszeg a ragadós
   fejléc kosár-gombján, lásd „6. Kosár-ikon a fejlécben”.) --- */

#hf-kep-toast { position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom)); transform: translate(-50%, 10px); z-index: 100001; max-width: calc(100% - 32px); background: var(--hf-purple); color: var(--hf-cream); padding: 9px 14px; border-radius: 999px; font-size: 14px; opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; text-align: center; }
#hf-kep-toast.is-on { opacity: 1; transform: translate(-50%, 0); }

/* --- Kosár (kártyák). --- */
.hf-kc { display: grid; gap: 10px; margin-bottom: 18px; }
.hf-kc__child { margin: 10px 0 0 !important; font-size: 22px; }
/* Kosársor (2026-10-30): kis kép | cím, méret-címkék, Módosítom / törlés | ár. A sorok egy dobozban, vonallal elválasztva. */
.hf-kc__list { background: var(--hf-card); border: 2px solid var(--hf-line); border-radius: var(--hf-radius); padding: 0 12px; }
.hf-kc__row { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; column-gap: 12px; row-gap: 4px; align-items: start; padding: 10px 0; border-top: 1px solid var(--hf-line); }
/* A törzs „eltűnik": a cím és az ár egy sorban, alattuk teljes szélességben a címkék és a gombok (mobilon se törjön szét). */
.hf-kc__row .hf-kc__body { display: contents; }
.hf-kc__row .hf-kc__ph { grid-column: 1; grid-row: 1 / span 3; }
.hf-kc__row h4 { grid-column: 2; grid-row: 1; margin: 0 !important; align-self: center; }
.hf-kc__row .hf-kc__price { grid-column: 3; grid-row: 1; align-self: center; }
.hf-kc__row .hf-kc__chips { grid-column: 2 / 4; grid-row: 2; }
.hf-kc__row .hf-kc__act { grid-column: 2 / 4; grid-row: 3; }
.hf-kc__act > .hf-linkbtn { display: inline-flex !important; align-items: center; }
.hf-kc__row:first-child { border-top: 0; }
.hf-kc__ph { display: block; }
.hf-kc__ph img { display: block; width: 56px; height: auto; border-radius: 6px; }
.hf-kc__price { font-family: var(--hf-head); font-weight: 700; font-size: 20px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.hf-kc__chips { display: flex; flex-wrap: wrap; gap: 4px; margin: 2px 0 0; }
.hf-kc__chip { font-size: 13px; line-height: 1.3; padding: 2px 8px; border-radius: 999px; background: var(--hf-bg-soft); border: 1px solid var(--hf-line); white-space: nowrap; }
.hf-kc__chip.is-gift { background: var(--hf-yellow); border-color: var(--hf-yellow); }
.hf-kc__row .hf-kc__act { gap: 14px; }
.hf-kc__row .hf-linkbtn { min-height: 36px; font-size: 14px !important; }
.hf-kc__head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.hf-kc__head h3 { margin: 0 !important; }
/* Nagyszülőknek: magenta keret, a képek kicsiben a darabszámmal. */
.hf-kc__gp { border-color: var(--hf-accent); }
.hf-kc__thumbs { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 2px; }
.hf-kc__thumbs a { position: relative; display: block; width: 58px; border-radius: 6px; overflow: visible; }
.hf-kc__thumbs img { display: block; width: 58px; height: 72px; object-fit: cover; border-radius: 6px; }
.hf-kc__qty { position: absolute; top: -7px; right: -7px; padding: 1px 6px; border-radius: 999px; background: var(--hf-accent); color: #fff; font-size: 12px; font-weight: 700; line-height: 1.4; white-space: nowrap; }
.hf-kc__sub span { float: right; color: var(--hf-ink); }
.hf-kc__totals .is-note { font-size: 13.5px; color: var(--hf-muted); }
@media (max-width: 480px) { .hf-kc__thumbs { gap: 6px; } .hf-kc__thumbs a, .hf-kc__thumbs img { width: 48px; } .hf-kc__thumbs img { height: 60px; } }
.hf-kc__body h4 { margin: 0 0 4px !important; font-family: var(--hf-head); font-size: 19px; text-transform: uppercase !important; letter-spacing: .02em; }
.hf-kc__lines { display: grid; gap: 3px; font-size: 14.5px; }
.hf-kc__ln { display: flex; justify-content: space-between; gap: 8px; }
.hf-kc__ln > span:last-child { white-space: nowrap; font-variant-numeric: tabular-nums; font-weight: 500; }
.hf-kc__ln.is-free > span:last-child { color: #1d7a3a; }
.hf-kc__sub2 { color: var(--hf-muted); }
.hf-kc__act { display: inline-flex; gap: 18px; flex-wrap: wrap; align-items: center; }
.hf-kc__sub { font-family: var(--hf-head); font-weight: 700; font-size: 16px; text-transform: uppercase; letter-spacing: .04em; color: var(--hf-purple); margin: 6px 0 -2px; }
.hf-kc__hint { margin: 0; font-size: 14px; color: var(--hf-muted); }
.hf-kc__pick { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 2px; }
.hf-kc__pick::after { content: ""; flex-grow: 999; }
.hf-kc__pick a { position: relative; flex: var(--ar) 1 calc(var(--ar) * 96px); aspect-ratio: var(--ar); border-radius: 6px; overflow: hidden; display: block; }
.hf-kc__pick a img { display: block; width: 100%; height: 100%; object-fit: cover; }
.hf-kc__pick a.has { outline: 4px solid var(--hf-accent); outline-offset: -4px; }
.hf-kc__num { position: absolute; left: 6px; bottom: 5px; font-size: 11px; font-weight: 500; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.5); }
.hf-kc__ck { position: absolute; right: 6px; bottom: 6px; width: 30px; height: 30px; border-radius: 50%; background: rgba(255,255,255,.94); color: var(--hf-accent); font-size: 17px; font-weight: 700; line-height: 30px; text-align: center; box-shadow: 0 1px 4px rgba(0,0,0,.2); }
.hf-kc__pick a.has .hf-kc__ck { background: var(--hf-accent); color: #fff; }
.hf-kc__gifts { background: var(--hf-yellow); border-color: var(--hf-yellow); }
.hf-kc__gifts h3 { color: var(--hf-purple); font-size: 20px; }
.hf-kc__gifts .hf-kc__ln > span:last-child { color: var(--hf-ink); }
.hf-kc__totals .hf-kc__lines { gap: 6px; font-size: 15px; }
.hf-kc__totals .is-big { font-size: 17px; font-weight: 700; padding-top: 8px; border-top: 2px solid var(--hf-line); }
.hf-kc__totals .is-big > span:last-child { font-family: var(--hf-head); font-size: 28px; }
/* A kép-alapú kosárban nincs darabszám-mező: a Sunshine „Kosár frissítése" gombja fölösleges. */
#sunshine-cart:has(.hf-kc):not(:has(#sunshine--cart--items)) #sunshine--cart--update-button { display: none; }
.hf-kep-rules ul li, .hf-kep-box li { margin: 0 !important; line-height: 1.4; list-style: disc; }
.hf-kep-box p, .hf-kep-gift, .hf-kc__ln { line-height: 1.4; }
/* A fő gomb teli magenta (a téma a felugró ablak gombjait körvonalasra veszi), a link-gombok nem nagybetűsek. */
#sunshine--modal .hf-kep__save, #sunshine--modal .hf-kep__gksave, .hf-kep-btn:not(.is-in) { background: var(--hf-accent) !important; border-color: var(--hf-accent) !important; color: #fff !important; }
#sunshine--modal .hf-kep__gksave:disabled { opacity: .45; }
.hf-linkbtn { text-transform: none !important; letter-spacing: 0 !important; }
/* Javítás (Árpád, 2026-10-29): (1) a téma `#sunshine .sunshine--open-modal` szabálya a teli gomb feliratát is magentára
   színezte — a „Nagyszülőknek is kérek" felirata eltűnt; (2) a téma gombjainak hover-stílusa (teli sötét magenta
   pirula) a „Módosítom" / „✕ Törlöm" link-gombokra is ráült. A link-gomb mindig sima, aláhúzott szöveg marad. */
body #sunshine a.hf-kep-btn.sunshine--open-modal, body a.hf-kep-btn.sunshine--open-modal,
body #sunshine a.hf-kep-btn.sunshine--open-modal:hover, body a.hf-kep-btn.sunshine--open-modal:hover { color: #fff !important; }
body .hf-linkbtn, body .hf-linkbtn:hover, body .hf-linkbtn:focus, body .hf-linkbtn:active,
body #sunshine .hf-linkbtn, body #sunshine .hf-linkbtn:hover, body #sunshine .hf-linkbtn:focus {
	background: none !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important;
	padding: 6px 0 !important; min-height: 44px; color: var(--hf-accent) !important;
	font: 500 15px/1.4 var(--hf-body) !important; text-transform: none !important; letter-spacing: 0 !important;
	text-decoration: underline !important; text-underline-offset: 3px; text-decoration-thickness: 1px; transform: none !important;
}
body .hf-linkbtn:hover, body #sunshine .hf-linkbtn:hover { color: var(--hf-accent-dark) !important; text-decoration-thickness: 2px; }
body .hf-linkbtn.is-rm, body #sunshine .hf-linkbtn.is-rm { color: var(--hf-muted) !important; }
body .hf-linkbtn.is-rm:hover, body #sunshine .hf-linkbtn.is-rm:hover { color: var(--hf-ink) !important; }
body .hf-linkbtn:focus-visible { outline: 3px solid rgba(230, 0, 122, .45) !important; outline-offset: 2px; }