-ot, tehát a section-re tett
display:flex a h2-t és a címkéket egymás mellé rakná. */
.widget_layered_nav_filters ul,
.widget_product_tag_cloud .tagcloud {
display: flex;
flex-wrap: wrap;
gap: var(--space-2)
}
.widget_layered_nav_filters ul li,
.tagcloud a {
display: inline-flex;
align-items: center;
gap: var(--space-2);
height: 32px;
padding: 0 var(--space-4);
background: var(--noir-900);
border: 1px solid var(--noir-900);
border-radius: var(--radius-pill);
color: var(--cream-50);
font: var(--type-body-sm);
text-decoration: none
}
.tagcloud a {
background: transparent;
border-color: var(--border-subtle);
color: var(--text-secondary);
font-size: var(--fs-body-sm) !important;
transition: var(--transition-control)
}
.tagcloud a:hover {
background: var(--surface-muted)
}
/* A woocommerce.css ui-slider szabályai (.woocommerce .widget_price_filter .ui-slider
.ui-slider-handle stb.) 0,4,0 specificitásúak és Woo-lilát (#7f54b3) festenek, a
.ui-widget-content pedig sötétlilát. A .widget-area előtag emeli a mieinket ugyanerre
a szintre — a téma stíluslapja később töltődik, tehát döntetlennél mi nyerünk. */
.widget-area .widget_price_filter .price_slider_wrapper .ui-slider {
height: 2px;
background: var(--sand-300);
border: 0;
border-radius: 0;
margin: var(--space-4) 0
}
.widget-area .widget_price_filter .ui-slider .ui-slider-range {
background: var(--noir-900);
border-radius: 0
}
.widget-area .widget_price_filter .ui-slider .ui-slider-handle {
width: 14px;
height: 14px;
top: -6px;
margin-left: -7px;
background: var(--noir-900);
border-radius: var(--radius-pill)
}
/* A valódi widget a csúszka alatt egy "Szűrés" gombot és a min/max inputokat is kiadja
(az inputokat a price-slider.js elrejti). A Woo ezt float:left + text-align:right
párossal rendezi — helyette egy sor: gomb balra, ártartomány jobbra. */
.widget-area .widget_price_filter .price_slider_amount {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-3);
margin-top: var(--space-4);
text-align: left;
line-height: inherit;
font-size: inherit
}
.widget-area .widget_price_filter .price_slider_amount .button {
float: none;
height: var(--control-sm);
padding: 0 var(--space-5);
font-size: var(--fs-caption)
}
.widget-area .widget_price_filter .price_slider_amount .clear {
display: none
}
.widget_price_filter .price_label {
font: var(--type-body-sm);
color: var(--text-muted)
}
/* ---------- single product ---------- */
.single-product div.product {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: var(--space-10);
margin-top: var(--space-6)
}
.woocommerce-product-gallery {
display: flex;
flex-direction: column;
gap: var(--space-3);
float: none;
width: auto
}
.woocommerce-product-gallery__wrapper {
margin: 0
}
.woocommerce-product-gallery__image img {
display: block;
width: 100%;
aspect-ratio: 1/1;
object-fit: cover;
border-radius: var(--radius-image)
}
.flex-control-thumbs {
display: flex;
gap: var(--space-3);
margin: 0;
padding: 0;
list-style: none
}
.flex-control-thumbs li {
width: 96px
}
.flex-control-thumbs img {
display: block;
width: 100%;
aspect-ratio: 1/1;
object-fit: cover;
border: 1px solid var(--border-subtle);
border-radius: var(--radius-image);
opacity: 1;
cursor: pointer;
transition: var(--transition-control)
}
.flex-control-thumbs img.flex-active,
.flex-control-thumbs img:hover {
border-color: var(--border-strong)
}
.summary.entry-summary {
display: flex;
flex-direction: column;
gap: var(--space-4);
padding-top: var(--space-2)
}
.single-product div.product .product_title {
margin: 0;
font: var(--type-h1);
letter-spacing: var(--ls-display);
color: var(--text-heading)
}
.single-product .product__subtitle {
font: var(--type-body);
color: var(--text-muted)
}
.single-product div.product p.price,
.single-product div.product span.price {
margin: 0;
font: var(--fw-regular) var(--fs-h4)/1.1 var(--font-display);
color: var(--text-heading)
}
.single-product div.product p.price del {
margin-right: var(--space-2);
font: var(--type-body-sm);
color: var(--text-muted)
}
.single-product div.product p.price ins {
text-decoration: none;
color: var(--accent)
}
.woocommerce-product-details__short-description {
font: var(--type-body-lg);
color: var(--text-secondary);
}
/* Intenzitás-skála (inc/product-intensity.php). A pont helyét a PHP 0–1 arányként adja
át a --ff-intensity-ratio-ban; a calc a pont félszélességét kihagyja a futásból, hogy
az 1-es és a 10-es értéknél se lógjon ki a sávból. */
.ff-intensity {
display: flex;
flex-direction: column;
gap: var(--space-3);
}
.ff-intensity__label {
text-align: center
}
.ff-intensity__track {
--ff-intensity-dot: 14px;
position: relative;
height: 6px;
border-radius: var(--radius-pill);
background: var(--surface-sunken)
}
.ff-intensity__dot {
position: absolute;
top: 50%;
left: calc(var(--ff-intensity-dot) / 2 + (100% - var(--ff-intensity-dot)) * var(--ff-intensity-ratio, 0));
width: var(--ff-intensity-dot);
height: var(--ff-intensity-dot);
border-radius: var(--radius-pill);
background: var(--noir-900);
transform: translate(-50%, -50%)
}
.ff-intensity__scale {
display: flex;
justify-content: space-between;
font: var(--type-body-sm);
color: var(--text-muted)
}
.woocommerce div.product .stock.in-stock {
display: flex;
align-items: center;
gap: var(--space-2);
margin: 0;
font: var(--type-body-sm);
color: var(--gold-600)
}
.woocommerce div.product form.cart {
display: flex;
align-items: center;
gap: var(--space-3);
margin: var(--space-2) 0 0
}
.woocommerce div.product form.cart::after, .woocommerce div.product form.cart::before {
content: none !important;
}
.woocommerce .quantity {
display: inline-flex !important;
align-items: center;
height: var(--control-md);
border: 1px solid var(--border-default);
border-radius: var(--radius-pill);
background: var(--surface-card);
align-items: stretch;
}
.woocommerce .quantity .qty-btn {
width: 38px;
background: none;
border: 0;
color: var(--text-body);
font: var(--fw-regular) 20px var(--font-sans);
cursor: pointer
}
.woocommerce .quantity input.qty {
height: 100%;
padding: 0;
background: transparent;
border: 0;
text-align: center;
font: var(--type-ui);
color: var(--text-heading);
-moz-appearance: textfield;
}
@media (max-width: 768px) {
.woocommerce .quantity input.qty {
width: 3em;
}
}
.woocommerce .quantity input.qty::-webkit-outer-spin-button,
.woocommerce .quantity input.qty::-webkit-inner-spin-button {
appearance: none;
margin: 0
}
.woocommerce :where(div[data-block-name="woocommerce/legacy-template"]) div.product form.cart div.quantity .input-text {
padding: .25rem;
margin-right: 0;
}
.woocommerce div.product form.cart .single_add_to_cart_button {
flex: 1
}
.product_meta {
display: flex;
flex-direction: column;
gap: var(--space-3);
padding-top: var(--space-6);
border-top: 1px solid var(--border-subtle);
font: var(--type-body-sm);
color: var(--text-secondary)
}
.product_meta .sku_wrapper,
.product_meta .posted_in,
.product_meta .tagged_as {
display: flex;
gap: var(--space-2)
}
/* Bizalmi sorok (inc/product-trust-rows.php). A .product_meta oszlopában ez az egyetlen
gyerek nyit rácsot, így a sorok egymás mellé kerülnek, a WooCommerce saját cikkszám- és
kategóriasora pedig változatlanul alattuk marad. Háromnál több felvett sor a következő
sorba tördelődik, szűk kijelzőn (560px alatt) kettesével. */
.ff-trust {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: var(--space-4) var(--space-3)
}
.ff-trust__item {
position: relative;
display: flex;
align-items: center;
gap: var(--space-3)
}
.ff-trust__icon {
--icon-size: 40px;
flex: none;
display: grid;
place-items: center;
width: max(var(--icon-size, 34px), 34px);
height: max(var(--icon-size, 34px), 34px);
color: var(--gold-600);
}
.ff-trust__icon .ff-icon {
width: calc(var(--icon-size, 18px) - 1px);
height: calc(var(--icon-size, 18px) - 1px);
}
.ff-trust__icon img {
display: block;
width: var(--icon-size, 18px);
height: var(--icon-size, 18px);
object-fit: contain
}
.ff-trust__label {
font: var(--type-body-sm);
color: var(--text-secondary)
}
/* Termékjellemzők (inc/product-icon-rows.php): nagyobb ikon, alatta középre zárt szöveg,
a rövid leírás és az intenzitás-skála között. */
.ff-specs {
--specs-gap: var(--space-5);
display: grid;
grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
gap: var(--space-5) var(--specs-gap);
text-align: center;
}
.ff-specs__item {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-2)
}
.ff-specs__icon {
--icon-size: 40px;
display: grid;
place-items: center;
width: 64px;
height: 64px;
color: var(--gold-600)
}
.ff-specs__icon .ff-icon,
.ff-specs__icon img {
display: block;
width: var(--icon-size);
height: var(--icon-size);
object-fit: contain
}
.ff-specs__label {
font: var(--type-body-sm);
color: var(--text-secondary);
text-wrap: balance
}
.product_meta a {
color: var(--text-secondary);
text-decoration: none;
border-bottom: 1px solid var(--border-default)
}
/* A Woo a füleket `div.product`-tal előtagolva stílusozza (0,4,2 … 0,5,4): szürke,
lekerekített „mappafül" kereteket ad, negatív li-margókkal, sarok-pszeudókkal és
700-as felirattal. Egy `.woocommerce-tabs`-ról induló szabály (0,2,1 … 0,3,3) ezek
egyikét sem üti, ezért itt minden szabály ugyanazzal az előtaggal megy — döntetlennél
a később töltődő téma-stíluslap nyer (lásd a 20-as enqueue prioritást a functions.php-ben). */
.woocommerce div.product .woocommerce-tabs {
grid-column: 1/-1;
max-width: 760px;
margin-top: 0
}
/* overflow: a Woo `hidden`-je levágná az aktív fül alatti vonalat, ami 1px-rel a lista
alsó szegélyére lóg. Keskeny kijelzőn a fülek inkább törjenek, mint kifolyjanak:
a smallscreen.css-t nem töltjük be, tehát a Woo sem bontja őket sorokba. */
.woocommerce div.product .woocommerce-tabs ul.tabs {
position: relative;
display: flex;
flex-wrap: wrap;
gap: var(--space-3) var(--space-7);
margin: 0;
padding: 0;
overflow: visible;
list-style: none;
border-bottom: 1px solid var(--border-subtle)
}
/* A Woo a fülsor alsó vonalát egy abszolút `ul.tabs::before`-ral rajzolja, a fülek
lekerekített sarkait pedig `li::before` + `li::after` párossal. Mindhárom elmarad;
`content:none` mellett a pszeudóelem létre sem jön, tehát a rájuk tett
`li.active::before{box-shadow}` (0,5,4) sem tud megjelenni. */
.woocommerce div.product .woocommerce-tabs ul.tabs::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after {
content: none
}
.woocommerce div.product .woocommerce-tabs ul.tabs li,
.woocommerce div.product .woocommerce-tabs ul.tabs li.active {
display: block;
margin: 0;
padding: 0;
background: none;
border: 0;
border-radius: 0
}
.woocommerce div.product .woocommerce-tabs ul.tabs li a {
position: relative;
display: block;
padding: 0 0 var(--space-4);
font: var(--type-ui);
letter-spacing: var(--ls-wide);
text-transform: uppercase;
color: var(--text-muted);
text-decoration: none;
transition: color var(--dur-fast) var(--ease-out)
}
.woocommerce div.product .woocommerce-tabs ul.tabs li a:hover {
color: var(--text-secondary);
text-decoration: none
}
/* A kiemelő vonal a linkre kerül, nem a li-re: így pontosan a felirat szélességét veszi
fel — a li-n a Woo 1em paddingja és -5px margója is rajta lenne. */
.woocommerce div.product .woocommerce-tabs ul.tabs li a::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: -1px;
height: 2px;
background: var(--accent);
transform: scaleX(0);
transform-origin: left;
transition: transform var(--dur-base) var(--ease-emph)
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
color: var(--text-heading)
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a::after {
transform: scaleX(1)
}
.woocommerce div.product .woocommerce-tabs .panel {
margin: var(--space-6) 0 0;
padding: 0;
font: var(--type-body-lg);
color: var(--text-secondary);
animation: ff-fade var(--dur-base) var(--ease-out) both
}
/* A panel H1-je a fül felirata — a fülsor már kimondja, a panelben csak ismétlés lenne. */
.woocommerce div.product .woocommerce-tabs .panel>h2:first-child {
display: none
}
.woocommerce div.product .woocommerce-tabs .panel>*:first-child {
margin-top: 0
}
.woocommerce div.product .woocommerce-tabs .panel>*:last-child {
margin-bottom: 0
}
/* TinyMCE fix to see paragraph margins + product page */
:is(.woocommerce div.product .woocommerce-tabs .panel, .woocommerce-product-details__short-description) :is(li, p),
body#tinymce :is(li, p),
.mce-content-body :is(li, p) {
margin-bottom: .5em;
}
.related.products,
.upsells.products {
grid-column: 1/-1;
margin-top: var(--space-12)
}
.related.products>h2,
.upsells.products>h2 {
margin: 0 0 var(--space-8);
font: var(--type-h3);
color: var(--text-heading)
}
.woocommerce div.product .related.products {
margin-top: 0;
}
.woocommerce div.product::after {
content: none;
display: none;
}
/* ---------- cart ---------- */
.woocommerce-cart-form {
margin: 0
}
.woocommerce table.shop_table {
width: 100%;
margin: 0;
border: 0;
border-collapse: collapse
}
.woocommerce table.shop_table th {
padding: 0 0 var(--space-4);
border: 0;
border-bottom: 1px solid var(--border-subtle);
text-align: left;
font: var(--type-eyebrow);
letter-spacing: var(--ls-label);
text-transform: uppercase;
color: var(--text-muted)
}
.woocommerce table.shop_table th.product-price {
padding-right: var(--space-2);
}
.woocommerce table.shop_table td {
padding: var(--space-5) 0;
border: 0;
border-bottom: 1px solid var(--border-subtle);
vertical-align: middle
}
/* max-width:none: a fenti `.woocommerce img{max-width:100%}` táblacellában
körkörös függés (a cella szélessége a képtől függ és fordítva), és a képet
a cella pillanatnyi szélességére zsugorítja. */
.woocommerce table.shop_table td.product-thumbnail img {
display: block;
width: 92px;
max-width: none;
aspect-ratio: 4/5;
object-fit: cover;
border-radius: var(--radius-image)
}
/* A DS 4 oszlopot rajzolt (kép, név, mennyiség, összeg), a cart/cart.php viszont
hatot ad: remove, kép, név, ár, mennyiség, részösszeg. Rögzített szélességek
nélkül az auto table layout a maradékot a kép- és a remove-oszlopra is
ráosztaná — így viszont a névoszlop kapja meg. */
.woocommerce table.cart th.product-remove,
.woocommerce table.cart td.product-remove {
width: 44px
}
.woocommerce table.cart th.product-thumbnail,
.woocommerce table.cart td.product-thumbnail {
width: 112px;
padding-right: var(--space-5)
}
.woocommerce table.cart th.product-price,
.woocommerce table.cart td.product-price,
.woocommerce table.cart th.product-subtotal,
.woocommerce table.cart td.product-subtotal {
width: 96px
}
.woocommerce table.cart th.product-quantity,
.woocommerce table.cart td.product-quantity {
width: 124px
}
/* a th-k alapból balra igazítottak, az ár/összeg cellák viszont jobbra */
.woocommerce table.shop_table th.product-price,
.woocommerce table.shop_table th.product-subtotal {
text-align: right
}
.woocommerce table.shop_table td.product-name a {
font: var(--fw-regular) var(--fs-h6)/1.2 var(--font-display);
color: var(--text-heading);
text-decoration: none
}
.woocommerce table.shop_table td.product-name .product__meta {
display: block;
margin-bottom: var(--space-1);
font: var(--type-eyebrow);
letter-spacing: var(--ls-label);
text-transform: uppercase;
color: var(--text-muted)
}
.woocommerce table.shop_table td.product-subtotal,
.woocommerce table.shop_table td.product-price {
font: var(--type-price);
color: var(--text-heading);
text-align: right;
padding-right: var(--space-2);
}
/* A DS szöveges „Törlés" linket rajzolt a névcella alá, a valódi markupban
viszont a `×` egy külön oszlopban áll (a mini kosárban is) — ikongombként
viselkedik, aláhúzott szöveglinkként hibásan nézett ki. */
.woocommerce a.remove {
display: inline-flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
border: 1px solid var(--border-subtle);
border-radius: 50%;
font: var(--fw-regular) 18px/1 "Helvetica Neue", Arial, sans-serif !important;
color: var(--text-muted) !important;
text-decoration: none;
transition: var(--transition-control)
}
.woocommerce a.remove:hover {
background: none;
border-color: var(--status-error);
color: var(--status-error) !important
}
/* Itt NEM lehet display:flex a cellán: az felülírja a `table-cell` display
típust, a böngésző anonim cellába csomagolja, és a colspan=6 elvész — a sor
így az 1. oszlopba kerül, és annak min-contentjét fújja fel az egész
kuponsorra. A cella marad table-cell (ami magától BFC, tehát a float benne
marad), a kupon úszik balra, a frissítés gomb a text-alignnal megy jobbra. */
.woocommerce .cart .actions {
padding-top: var(--space-6);
text-align: right
}
.woocommerce .cart .coupon {
display: flex;
flex-wrap: wrap;
float: left;
max-width: calc(100% - 200px);
gap: var(--space-2);
text-align: left;
width: 100%;
}
/* a woocommerce.css `td.actions .coupon .input-text` szabálya (0,4,3) lila-szürke
keretet és 6px paddinget ad, a woocommerce-blocktheme.css pedig `#coupon_code`-dal
(1,2,0) 50px magasságot és saját paddinget — utóbbihoz ID kell a szelektorba */
.woocommerce .cart td.actions .coupon .input-text,
.woocommerce .cart td.actions .coupon #coupon_code {
flex: 0 1 200px;
min-width: 0;
height: var(--control-md);
margin: 0;
padding: 0 var(--space-4);
background: var(--surface-card);
border: 1px solid var(--border-default);
border-radius: var(--radius-input);
font: var(--type-body);
color: var(--text-body)
}
/* A DS a .cart-collaterals-be rajzolta a táblát és az összegzőt is, de valójában
a .cart-collaterals a form testvére, és csak az összegzőt (+ cross-sell-t)
tartalmazza. A kétoszlopos rács ezért a shortcode konténerére kerül.
Nincs align-items:start: a jobb oszlop nyúljon végig, különben a benne lévő
.cart_totals sticky-jének nincs hova ragadnia. */
body.woocommerce-cart .woocommerce.wp-block-group {
display: grid;
grid-template-columns: minmax(0, 1fr) 380px;
gap: var(--space-9)
}
/* min-width:0 nélkül a rácselem automatikus minimuma a tábla min-contentje
lenne, és a form akkor is kilógna a sávból, ha a sáv maga zsugorodhat. */
body.woocommerce-cart .woocommerce.wp-block-group>.woocommerce-cart-form {
grid-column: 1;
min-width: 0
}
body.woocommerce-cart .woocommerce.wp-block-group>.cart-collaterals {
grid-column: 2
}
/* értesítések, üres kosár, hookolt tartalom: teljes szélesség */
body.woocommerce-cart .woocommerce.wp-block-group>:not(.woocommerce-cart-form):not(.cart-collaterals) {
grid-column: 1/-1
}
.woocommerce .cart-collaterals {
display: flex;
flex-direction: column;
gap: var(--space-8);
margin-top: 0
}
.woocommerce .cart_totals {
position: sticky;
top: 120px;
padding: var(--pad-card);
background: var(--surface-card);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-card);
box-shadow: var(--shadow-1)
}
.woocommerce .cart_totals h2 {
margin: 0 0 var(--space-5);
font: var(--type-h5);
color: var(--text-heading)
}
.woocommerce .cart_totals table th {
font: var(--type-body);
letter-spacing: 0;
text-transform: none;
color: var(--text-secondary);
border-bottom: 0;
padding: var(--space-2) 0
}
.woocommerce .cart_totals table td {
padding: var(--space-2) 0;
border-bottom: 0;
text-align: right;
font: var(--type-body)
}
.woocommerce .cart_totals tr.order-total th,
.woocommerce .cart_totals tr.order-total td {
padding-top: var(--space-4);
border-top: 1px solid var(--border-subtle)
}
.woocommerce .cart_totals tr.order-total th {
font: var(--type-h6);
color: var(--text-heading)
}
.woocommerce .cart_totals tr.order-total td {
font: var(--fw-regular) var(--fs-h4)/1.1 var(--font-display);
color: var(--text-heading)
}
/* A woocommerce.css `.woocommerce-cart .wc-proceed-to-checkout a.checkout-button`
szabálya (0,3,1) erősebb a téma gombjánál (`.woocommerce a.button`, 0,2,1):
display:block-ra, 1em paddingre és 1.25em betűméretre váltja. A wrapperre
pedig 1em 0 paddinget és table-display clearfix pszeudókat tesz. */
.woocommerce .cart_totals .wc-proceed-to-checkout {
margin-top: var(--space-6);
padding: 0
}
.woocommerce .cart_totals .wc-proceed-to-checkout::before,
.woocommerce .cart_totals .wc-proceed-to-checkout::after {
content: none
}
.woocommerce .cart_totals .wc-proceed-to-checkout a.checkout-button {
display: inline-flex;
width: 100%;
margin-bottom: 0;
padding: 0 var(--space-6);
font: var(--type-ui);
letter-spacing: var(--ls-wide)
}
.woocommerce-shipping-methods,
.woocommerce-shipping-destination {
list-style: none;
margin: 0;
padding: 0;
font: var(--type-body-sm);
color: var(--text-muted)
}
.cart-empty {
font: var(--type-h3);
color: var(--text-heading)
}
/* ---------- checkout ---------- */
/* Nincs align-items:start: a jobb oszlop nyúljon végig, különben a benne lévő
#order_review sticky-jének nincs hova ragadnia. */
.woocommerce-checkout form.checkout {
display: grid;
grid-template-columns: minmax(0, 1fr) 380px;
gap: var(--space-9);
margin-top: var(--space-8)
}
.woocommerce-checkout form.checkout>#customer_details {
grid-column: 1;
min-width: 0
}
.woocommerce-checkout form.checkout>.ff-checkout-review {
grid-column: 2
}
/* expressz fizetés, „vagy" elválasztó, hookolt tartalom: teljes szélesség */
.woocommerce-checkout form.checkout>:not(#customer_details):not(.ff-checkout-review) {
grid-column: 1/-1
}
.checkout_coupon {
display: flex;
gap: var(--space-4);
}
#customer_details {
display: flex;
flex-direction: column;
gap: var(--space-8)
}
#customer_details h3,
.woocommerce-checkout h3 {
margin: 0 0 var(--space-4);
font: var(--type-h5);
color: var(--text-heading)
}
.woocommerce-billing-fields__field-wrapper,
.woocommerce-shipping-fields__field-wrapper {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-4)
}
/* Szállítási cím elöl (inc/checkout-addresses.php): a szállítási rács alatt az elérhetőség
(e-mail, telefon, adószám), a jobb oszlopban a pipa mögött a számlázási cím. */
.ff-shipping-fields .ff-contact-fields,
.ff-billing-fields .ff-billing-address {
margin-top: var(--space-4)
}
.ff-billing-fields .ff-billing-address[hidden],
.ff-shipping-fields #ship-to-different-address[hidden] {
display: none
}
#ff-bill-to-different-address {
margin: 0
}
.woocommerce form .form-row {
display: flex;
flex-direction: column;
gap: var(--space-2);
margin: 0;
padding: 0
}
.woocommerce form .form-row.form-row-wide,
.woocommerce form .form-row-wide {
grid-column: 1/-1
}
.woocommerce form .form-row label,
.woocommerce-form label {
font: var(--type-eyebrow);
letter-spacing: var(--ls-label);
text-transform: uppercase;
color: var(--text-muted)
}
.woocommerce form .form-row label.checkbox,
.woocommerce-form label.woocommerce-form__label-for-checkbox {
display: flex;
align-items: flex-start;
gap: var(--space-3);
font: var(--type-body-sm);
letter-spacing: 0;
text-transform: none;
color: var(--text-body)
}
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce-form input.input-text {
height: var(--control-md);
padding: 0 var(--space-4);
background: var(--surface-card);
border: 1px solid var(--border-default);
border-radius: var(--radius-input);
font: var(--type-body);
color: var(--text-body);
transition: var(--transition-control)
}
.woocommerce form .form-row textarea {
height: auto;
padding: var(--space-3) var(--space-4);
min-height: 88px
}
.woocommerce form .form-row input.input-text:focus,
.woocommerce select:focus,
.woocommerce textarea:focus {
outline: none;
border-color: var(--border-strong);
box-shadow: var(--ring-focus)
}
.woocommerce form .form-row.woocommerce-invalid input.input-text {
border-color: var(--status-error)
}
.woocommerce form .form-row .required {
color: var(--status-error);
text-decoration: none
}
#order_review,
.woocommerce-checkout-review-order {
position: sticky;
top: 120px;
padding: var(--pad-card);
background: var(--surface-card);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-card);
box-shadow: var(--shadow-1)
}
.woocommerce-checkout-review-order-table {
width: 100%;
border-collapse: collapse
}
.woocommerce-checkout-review-order-table th,
.woocommerce-checkout-review-order-table td {
padding: var(--space-2) 0;
border-bottom: 0;
font: var(--type-body-sm);
text-align: left
}
.woocommerce-checkout-review-order-table td,
.woocommerce .woocommerce-checkout-review-order-table th.product-total {
text-align: right
}
.woocommerce-checkout-review-order-table td.product-name {
text-align: left;
}
.woocommerce-checkout-review-order-table tfoot tr.order-total th {
padding-top: var(--space-4);
border-top: 1px solid var(--border-subtle);
font: var(--type-h6);
color: var(--text-heading)
}
.woocommerce-checkout-review-order-table tfoot tr.order-total td {
padding-top: var(--space-4);
border-top: 1px solid var(--border-subtle);
font: var(--fw-regular) var(--fs-h4)/1.1 var(--font-display);
color: var(--text-heading)
}
#add_payment_method #payment,
.woocommerce-cart #payment,
.woocommerce-checkout #payment {
background-color: transparent;
}
#add_payment_method #payment div.form-row,
.woocommerce-cart #payment div.form-row,
.woocommerce-checkout #payment div.form-row {
padding: 0;
}
.woocommerce form .form-row.woocommerce-SavedPaymentMethods-saveNew {
flex-direction: row;
}
#payment ul.payment_methods {
display: flex;
flex-direction: column;
gap: var(--space-3);
margin: 0;
padding: 0 !important;
list-style: none;
border: 0
}
.woocommerce-checkout #payment ul.payment_methods::after,
.woocommerce-checkout #payment ul.payment_methods::before {
content: none;
}
#payment ul.payment_methods li {
display: flex;
flex-direction: column;
gap: var(--space-1);
padding: 0;
background: var(--surface-card);
border-radius: var(--radius-sm);
transition: var(--transition-control)
}
#payment ul.payment_methods li.selected {
background: var(--action-soft);
border-color: var(--noir-900)
}
#payment ul.payment_methods li label {
display: flex;
align-items: center;
gap: var(--space-3);
font: var(--type-ui);
letter-spacing: 0;
text-transform: none;
color: var(--text-heading)
}
.woocommerce-page label[for="payment_method_stripe"] {
margin-bottom: 0;
}
#payment ul.payment_methods li .payment_box {
margin: 0;
padding: 0;
font: var(--type-body-sm);
color: var(--text-muted);
background: none
}
#payment ul.payment_methods li .payment_box::before {
display: none
}
#payment .place-order {
margin-top: var(--space-6);
padding: 0
}
#payment #place_order {
width: 100%
}
.ff-powered-by-stripe {
margin-bottom: var(--space-4)
}
.ff-powered-by-stripe img {
display: block;
width: 150px;
height: auto
}
fieldset.wc-payment-form {
padding: 0;
border: 0;
min-height: 50px;
margin-bottom: 0.5rem;
}
.woocommerce-privacy-policy-text p {
font: var(--type-body-sm);
color: var(--text-muted);
margin-bottom: var(--space-3);
}
.woocommerce input[type=radio],
.woocommerce input[type=checkbox] {
accent-color: var(--noir-900);
width: 18px;
height: 18px;
margin: 0
}
/* ---------- account & forms ---------- */
.woocommerce-form-login,
.woocommerce-form-register {
max-width: 420px;
display: flex;
flex-direction: column;
gap: var(--space-4);
padding: var(--pad-card);
background: var(--surface-card);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-card);
box-shadow: var(--shadow-1)
}
.woocommerce-MyAccount-navigation ul {
display: flex;
flex-direction: column;
gap: var(--space-2);
list-style: none;
margin: 0;
padding: 0
}
.woocommerce-MyAccount-navigation a {
font: var(--type-ui);
letter-spacing: var(--ls-wide);
text-transform: uppercase;
color: var(--text-secondary);
text-decoration: none
}
.woocommerce-MyAccount-navigation li.is-active a {
color: var(--noir-900)
}
/* ---------- footer ---------- */
.site-footer {
margin-top: var(--space-12);
background: var(--surface-deep);
color: var(--text-inverse)
}
.site-footer .col-full {
display: grid;
grid-template-columns: 1.4fr 1fr 1fr 1fr;
gap: var(--space-9);
max-width: var(--container-max);
margin: 0 auto;
padding: var(--space-11) var(--space-8) var(--space-8)
}
.site-footer .widget-title {
color: rgba(250, 247, 241, .55)
}
.site-footer a {
color: rgba(250, 247, 241, .85);
text-decoration: none
}
.site-footer a:hover {
color: var(--cream-50)
}
.site-footer p {
font: var(--type-body-sm);
color: rgba(250, 247, 241, .72)
}
.site-info {
border-top: 1px solid var(--border-inverse)
}
.site-info .col-full {
display: flex;
justify-content: space-between;
padding: var(--space-5) var(--space-8);
font: var(--type-body-sm);
color: rgba(250, 247, 241, .55)
}
/* ---------- home page blocks (front-page.php) ---------- */
.ff-hero {
position: relative;
background: var(--surface-deep);
color: var(--text-inverse);
overflow: hidden
}
.ff-hero img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
opacity: .55
}
.ff-hero::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(90deg, rgba(20, 20, 20, .92) 0%, rgba(20, 20, 20, .72) 45%, rgba(20, 20, 20, .2) 100%)
}
.ff-hero__inner {
position: relative;
z-index: 1;
display: flex;
align-items: center;
min-height: 520px;
max-width: var(--container-max);
margin: 0 auto;
padding: var(--space-12) var(--space-8)
}
.ff-hero__copy {
display: flex;
flex-direction: column;
gap: var(--space-6);
max-width: 560px;
animation: ff-rise var(--dur-reveal) var(--ease-emph) both
}
.ff-hero h1 {
margin: 0;
font: var(--fw-light) var(--fs-display)/var(--lh-tight) var(--font-display);
letter-spacing: var(--ls-display);
color: var(--cream-50)
}
.ff-hero p {
margin: 0;
font: var(--type-body-lg);
color: rgba(250, 247, 241, .8);
max-width: 440px
}
.ff-eyebrow {
font: var(--type-eyebrow);
letter-spacing: var(--ls-label);
text-transform: uppercase;
color: var(--text-muted)
}
.ff-hero .ff-eyebrow,
.ff-section--dark .ff-eyebrow {
color: var(--gold-300)
}
.ff-marquee {
overflow: hidden;
background: var(--surface-muted);
border-bottom: 1px solid var(--border-subtle)
}
.ff-marquee__track {
display: inline-flex;
animation: ff-marquee 30s linear infinite;
gap: var(--space-5);
}
.ff-marquee__row {
display: flex;
justify-content: space-around;
padding: var(--space-4) 0;
gap: var(--space-3);
font: var(--type-eyebrow);
letter-spacing: var(--ls-label);
text-transform: uppercase;
color: var(--text-muted);
white-space: nowrap
}
.ff-section {
max-width: var(--container-max);
margin: 0 auto;
padding: var(--space-12) var(--space-8) 0
}
.ff-section--dark {
max-width: none;
background: var(--surface-deep-alt);
color: var(--text-inverse);
padding: var(--space-12) 0
}
.ff-section--dark .ff-section__inner {
max-width: var(--container-max);
margin: 0 auto;
padding: 0 var(--space-8)
}
.ff-section__head {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: var(--space-8);
flex-wrap: wrap
}
.ff-section__head h2 {
margin: 0;
font: var(--type-h2);
color: var(--text-heading)
}
.ff-section--dark .ff-section__head h2 {
color: var(--cream-50)
}
/* A sötét szekciók a blokkmintákban .ff-on-dark osztályt kapnak (patterns/candles.php,
patterns/hero.php), a klasszikus sablonokban .ff-section--dark — mindkettő ugyanazt
a kártyakezelést kapja. */
.ff-section--dark ul.products li.product,
.ff-on-dark ul.products li.product {
background: var(--noir-900);
border-color: rgba(250, 247, 241, .14)
}
.ff-section--dark .woocommerce ul.products li.product .woocommerce-loop-product__title,
.ff-on-dark .woocommerce ul.products li.product .woocommerce-loop-product__title {
color: var(--cream-50);
letter-spacing: var(--ls-wide);
text-transform: uppercase;
font-size: var(--fs-h5);
}
.ff-section--dark ul.products li.product .product__meta,
.ff-on-dark ul.products li.product .product__meta {
color: var(--gold-300)
}
.ff-section--dark ul.products li.product .price,
.ff-on-dark ul.products li.product .price {
color: var(--gold-300)
}
.ff-on-dark .woocommerce ul.products li.product>.button {
background: var(--cream-50);
color: var(--noir-900)
}
.ff-on-dark .woocommerce ul.products li.product>.button:hover {
background: var(--white);
color: var(--noir-900)
}
.ff-section--dark ul.products li.product>.ff-loop-soldout,
.ff-on-dark ul.products li.product>.ff-loop-soldout,
.ff-on-dark ul.products li.product>.ff-loop-soldout:hover {
background: transparent;
border-color: rgba(250, 247, 241, .28);
color: rgba(250, 247, 241, .72)
}
.ff-split {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-10);
align-items: center
}
.ff-split img {
width: 100%;
aspect-ratio: 5/4;
object-fit: cover;
border-radius: var(--radius-image)
}
.ff-split__copy {
display: flex;
flex-direction: column;
gap: var(--space-5)
}
.ff-split__copy h2 {
margin: 0;
font: var(--type-h2);
color: var(--text-heading)
}
.ff-split__copy p {
margin: 0;
font: var(--type-body-lg);
color: var(--text-secondary);
max-width: 460px
}
.ff-badges {
display: flex;
gap: var(--space-3);
flex-wrap: wrap
}
.ff-badge {
display: inline-flex;
align-items: center;
height: 24px;
padding: 0 var(--space-3);
border-radius: var(--radius-badge);
box-shadow: inset 0 0 0 1px var(--border-default);
font: var(--fw-medium) var(--fs-caption)/1 var(--font-sans);
letter-spacing: var(--ls-label);
text-transform: uppercase;
color: var(--noir-900)
}
.ff-promises {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--space-6)
}
.ff-promise {
padding: var(--pad-card);
background: var(--surface-muted);
border-radius: var(--radius-card)
}
.ff-promise h3 {
margin: var(--space-4) 0 var(--space-2);
font: var(--type-h5);
color: var(--text-heading)
}
.ff-promise p {
margin: 0;
font: var(--type-body-sm);
color: var(--text-secondary)
}
.ff-icon {
display: inline-block;
width: 22px;
height: 22px;
background: currentColor;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-position: center;
-webkit-mask-size: contain;
mask-size: contain;
color: var(--gold-600)
}
.woocommerce-store-notice .ff-icon,
.site-header .ff-icon,
.woocommerce-message .ff-icon,
.woocommerce-info .ff-icon,
.site-footer .ff-icon,
.cart_totals .ff-icon {
color: currentColor
}
.ff-layout {
display: grid;
grid-template-columns: 248px 1fr;
gap: var(--space-9);
margin-top: var(--space-8)
}
.ff-shop-bar {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: var(--space-6);
flex-wrap: wrap
}
/* A rács oszlopa. min-width:0 nélkül a grid-elem alapértelmezett min-width:auto-ja
miatt a terméklista kifeszítené az 1fr sávot ahelyett, hogy zsugorodna. */
.ff-shop-main {
min-width: 0
}
.ff-shop-main ul.products {
margin-top: var(--space-7)
}
/* Rendezés + találatszám egy sorban: a select ne nyúljon a rendelkezésre álló helyig. */
.ff-shop-bar .woocommerce-ordering {
margin: 0
}
/* A columns-N szabályok (0,3,2) specificitásúak, ezért a törésponti felülíráshoz is
kell az attribútum-szelektor — különben a 3/4 oszlop mobilon is megmaradna. */
@media (max-width:1024px) {
.woocommerce ul.products,
.woocommerce ul.products[class*=columns-],
.woocommerce[class*=columns-] ul.products {
--loop-columns: 2
}
.ff-layout,
.single-product div.product,
.woocommerce-checkout form.checkout,
.woocommerce .cart-collaterals,
.ff-split {
grid-template-columns: minmax(0, 1fr)
}
.site-footer .col-full {
grid-template-columns: 1fr 1fr
}
}
@media (max-width:560px) {
.woocommerce ul.products,
.woocommerce ul.products[class*=columns-],
.woocommerce[class*=columns-] ul.products {
--loop-columns: 1
}
.ff-trust {
grid-template-columns: repeat(2, minmax(0, 1fr))
}
/* Két oszlopnál nem minden harmadik, hanem minden páratlan elem kezd sort: előbb
visszaadjuk a hármas ritmus szerint elvett vonalakat, aztán a párosak szerint
vesszük el őket. Azonos specificitás, ezért a sorrend dönt. */
.ff-trust__item:nth-child(3n+1)::before {
content: ""
}
.ff-trust__item:nth-child(2n+1)::before {
content: none
}
}
/* ===== block-theme illesztés ===== */
/* A woocommerce-blocktheme.css `.woocommerce-cart main .woocommerce{max-width:1000px}`
szabálya (0,2,1) erősebb a core alignwide szabályánál (`.wp-container-… >
.alignwide`, 0,2,0), ezért állt meg a kosár/kassza/fiók 1000px-en.
`none` itt hibás lenne: azzal a core 1280-as korlátja is elveszne, és teljes
szélességbe futna — a wideSize változóra állítjuk, hogy a theme.json-nal
együtt mozogjon. */
body.woocommerce-cart main .woocommerce,
body.woocommerce-checkout main .woocommerce,
body.woocommerce-account main .woocommerce {
max-width: var(--wp--style--global--wide-size)
}
.wp-site-blocks {
background: var(--surface-page)
}
.wp-site-blocks .content-area {
padding-inline: 0;
}
.wc-block-customer-account__link svg {
width: 24px;
}
/* --- fejléc: ragadós sáv, kigördülő hirdetőcsík ---
A hirdetősávot nem elrejtjük, hanem kigördítjük: a fejléc a csík magasságával
NEGATÍV top-ra ragad, így görgetéskor a csík kicsúszik a képernyő fölé, és pont
a menüsor pinnel a viewport tetejére. A lap tetejére visszagörgetve magától
visszajön — mindez JS nélkül, a sticky saját viselkedéséből.
Feltétel, hogy a csík magassága ismert és állandó legyen: ezt köti össze a két
szabályt az --announce-h. Ezért nem törhet két sorba (white-space: nowrap). */
:root {
--announce-h: 40px
}
.wp-site-blocks header.wp-block-template-part {
position: sticky;
z-index: 130;
top: calc(-1 * var(--announce-h))
}
.site-header__announcement,
.site-header>.wp-block-group:first-child {
height: var(--announce-h);
min-height: var(--announce-h);
overflow: hidden;
white-space: nowrap
}
/* A blokk 9px-es paddingja inline stílusként érkezik, ezért nem írjuk felül —
a box-sizing:border-box miatt belefér a rögzített magasságba. */
.site-header__announcement p,
.site-header>.wp-block-group:first-child p {
margin: 0
}
@media (max-width:600px) {
/* Keskeny kijelzőn a csík szövege nem férne ki egy sorban, ezért nincs csík —
és így a fejléc is a szokásos 0-ra ragad. */
.wp-site-blocks header.wp-block-template-part {
top: 0
}
.site-header__announcement,
.site-header>.wp-block-group:first-child {
display: none
}
}
.editor-styles-wrapper {
background: var(--surface-page)
}
.wp-block-post-title,
.wp-block-heading {
text-wrap: pretty
}
.wp-block-button__link:active,
.wp-block-read-more.is-style-button:active,
.wp-block-read-more.is-style-button-outline:active {
transform: var(--press-scale)
}
.wp-block-button.is-style-outline .wp-block-button__link,
.wp-block-read-more.is-style-button-outline {
background: transparent;
border: 1px solid var(--noir-900);
color: var(--noir-900);
box-shadow: none
}
.wp-block-button.is-style-outline .wp-block-button__link:hover,
.wp-block-read-more.is-style-button-outline:hover {
background: var(--noir-900);
color: var(--cream-50)
}
/* Kép blokk „Szélességre feszítve” stílusa (register_block_style, functions.php).
A core csak max-width:100%-ot ad, a kép tehát a saját pixelméreténél megáll; ez a
variáns a hasáb teljes szélességére húzza. A szelektorok egy fokkal specifikusabbak
a core megfelelőinél (elem + két osztály), mert blokk-témában a core blokk-CSS a
téma stíluslapja UTÁN is a lapra kerülhet — így nem a sorrenden múlik a kimenet.
A linkelt kép burkoló -ja a core-ban inline-block, azaz shrink-to-fit: azon is át
kell engedni a szélességet. A figure width-je az igazított (display:table) eseteket
fedi le, ahol a szülő magától a tartalomra zsugorodna. */
figure.wp-block-image.is-style-stretch {
width: 100%
}
.wp-block-image.is-style-stretch > a,
.wp-block-image.is-style-stretch > figure > a {
display: block
}
.wp-block-image.is-style-stretch img {
width: 100%;
height: auto
}
/* A .wp-block-cover.is-style-boxes-cross a Slider Revolution `boxslidec` presetjének
(Boxes → Slide → Cross) belépő fázisát adja a borító háttérképére: 5 × 5 csempe úszik be
átlósan, a bal felső saroktól induló hullámban. A preset számainak levezetése — miért
1000 ms, 500 ms szórás, 75% eltolás és 43,7%-nál induló beúszás — az
assets/cover-boxes-cross.js fejlécében van; a csempéket is az a szkript építi meg,
itt csak a geometria és a mozgás van. */
.wp-block-cover.is-style-boxes-cross .ff-boxes-cross {
position: absolute;
inset: 0;
/* A kép szintjén marad: a sötétítés és a tartalom (DOM-sorrendben utána jön) fölötte
rajzolódik — a régi borító-markupban, ahol a képnek z-index:0 jut, szintén. */
z-index: 0;
overflow: hidden;
pointer-events: none
}
/* A borító saját képe átadja a helyét a csempéknek. Az osztályt a szkript teszi rá, és az
animáció végén le is veszi, onnantól megint az ![]()
látszik. */
.wp-block-cover.is-style-boxes-cross.ff-boxes-cross-ready > .wp-block-cover__image-background {
opacity: 0
}
.ff-boxes-cross__tile {
position: absolute;
left: calc(var(--ff-bc-col) * 20%);
top: calc(var(--ff-bc-row) * 20%);
width: 20%;
height: 20%;
overflow: hidden;
opacity: 0
}
/* A csempén belül a kép a borító TELJES méretében áll (5 × 20% = 500%), csak a saját
cellájára van kitolva — a szeletelés így pontosan azt adja vissza, amit az object-fit
a képen csinál. A csempét egészben mozgatja az animáció, a képet külön nem: a preset
maszk (`m`) nélküli, tehát a bővítményben is a box mozog a tartalmával együtt. */
.ff-boxes-cross__img {
position: absolute;
left: calc(var(--ff-bc-col) * -100%);
top: calc(var(--ff-bc-row) * -100%);
width: 500%;
height: 500%;
background-repeat: no-repeat
}
.ff-boxes-cross-playing .ff-boxes-cross__tile {
animation: ff-boxes-cross-in 1000ms linear both;
will-change: transform, opacity
}
/* A GSAP `power2.inOut` (= easeInOutCubic) görbéje bele van mintázva a kulcskockákba,
ezért `linear` az időzítés. Kockánként: eltolás 75% → 0 (ez a borító 15%-a, mert öt
oszlop van), nagyítás 0,8 → 1, az opacitás pedig -0,5-ről fut 1-ig 0-ra vágva — innen
a 43,679%-ig tartó teljes átlátszóság. */
@keyframes ff-boxes-cross-in {
0% { opacity: 0; transform: translate3d(75%, 75%, 0) scale(0.8) }
5% { opacity: 0; transform: translate3d(74.96%, 74.96%, 0) scale(0.8001) }
10% { opacity: 0; transform: translate3d(74.7%, 74.7%, 0) scale(0.8008) }
15% { opacity: 0; transform: translate3d(73.99%, 73.99%, 0) scale(0.8027) }
20% { opacity: 0; transform: translate3d(72.6%, 72.6%, 0) scale(0.8064) }
25% { opacity: 0; transform: translate3d(70.31%, 70.31%, 0) scale(0.8125) }
30% { opacity: 0; transform: translate3d(66.9%, 66.9%, 0) scale(0.8216) }
35% { opacity: 0; transform: translate3d(62.14%, 62.14%, 0) scale(0.8343) }
40% { opacity: 0; transform: translate3d(55.8%, 55.8%, 0) scale(0.8512) }
43.679% { opacity: 0; transform: translate3d(50%, 50%, 0) scale(0.8667) }
45% { opacity: 0.0468; transform: translate3d(47.66%, 47.66%, 0) scale(0.8729) }
50% { opacity: 0.25; transform: translate3d(37.5%, 37.5%, 0) scale(0.9) }
55% { opacity: 0.4533; transform: translate3d(27.34%, 27.34%, 0) scale(0.9271) }
60% { opacity: 0.616; transform: translate3d(19.2%, 19.2%, 0) scale(0.9488) }
65% { opacity: 0.7428; transform: translate3d(12.86%, 12.86%, 0) scale(0.9657) }
70% { opacity: 0.838; transform: translate3d(8.1%, 8.1%, 0) scale(0.9784) }
75% { opacity: 0.9062; transform: translate3d(4.69%, 4.69%, 0) scale(0.9875) }
80% { opacity: 0.952; transform: translate3d(2.4%, 2.4%, 0) scale(0.9936) }
85% { opacity: 0.9798; transform: translate3d(1.01%, 1.01%, 0) scale(0.9973) }
90% { opacity: 0.994; transform: translate3d(0.3%, 0.3%, 0) scale(0.9992) }
95% { opacity: 0.9992; transform: translate3d(0.04%, 0.04%, 0) scale(0.9999) }
100% { opacity: 1; transform: none }
}
.ff-on-dark .wp-block-button__link {
background: var(--cream-50);
color: var(--noir-900)
}
.ff-on-dark .wp-block-heading,
.ff-on-dark p {
color: var(--cream-50)
}
.ff-cover-hero {
position: relative
}
.ff-cover-hero .wp-block-cover__image-background {
opacity: 1;
}
.wp-block-woocommerce-cart,
.wp-block-woocommerce-checkout {
max-width: var(--container-max);
margin: 0 auto
}
.woocommerce div.product div.summary>wc-order-attribution-inputs {
margin-bottom: 0;
}
/* =========================================================================
BLOKK-ALAPÚ WOOCOMMERCE (wc-blocks) — kosár, kassza, fiók, rendelés
WooCommerce → Beállítások → Advanced → blokk-alapú kosár/kassza esetén ez
a szakasz húzza a márkára a Woo blokkokat. A fenti klasszikus szakasz
érintetlen marad, így a kétféle mód közt bármikor lehet váltani.
========================================================================= */
/* ---------- közös wc-blocks alapok ---------- */
.wp-block-woocommerce-cart,
.wp-block-woocommerce-checkout {
max-width: var(--container-max);
margin: 0 auto;
padding: 0;
font: var(--type-body);
color: var(--text-body)
}
.wc-block-components-title,
.wc-block-components-checkout-step__title,
.wc-block-cart__totals-title,
.wc-block-components-order-summary__title {
font-family: var(--font-sans) !important;
font-weight: var(--fw-medium) !important;
letter-spacing: var(--ls-wide);
color: var(--text-heading)
}
.wc-block-components-title.wc-block-components-title {
text-transform: none
}
.wc-block-components-product-name {
font: var(--fw-regular) var(--fs-h6)/1.25 var(--font-display) !important;
color: var(--text-heading) !important;
text-decoration: none
}
.wc-block-components-product-name:hover {
color: var(--accent) !important
}
.wc-block-components-product-metadata,
.wc-block-components-product-metadata__description p {
font: var(--type-body-sm);
color: var(--text-muted)
}
.wc-block-components-product-price,
.wc-block-components-formatted-money-amount {
font: var(--type-price);
color: var(--text-heading)
}
.wc-block-components-product-price del {
margin-right: var(--space-2);
font: var(--type-body-sm);
color: var(--text-muted)
}
.wc-block-components-product-price ins {
text-decoration: none;
color: var(--accent)
}
/* gombok */
.wc-block-components-button:not(.is-link) {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--space-2);
min-height: var(--control-md);
padding: 0 var(--space-6);
background: var(--action);
border: 1px solid transparent;
border-radius: var(--radius-button);
box-shadow: var(--shadow-1);
color: var(--cream-50);
font: var(--type-ui);
letter-spacing: var(--ls-wide);
text-transform: uppercase;
text-decoration: none;
transition: var(--transition-control)
}
.wc-block-components-button:not(.is-link):hover {
background: var(--action-hover);
box-shadow: var(--shadow-hover);
color: var(--cream-50)
}
.wc-block-components-button:not(.is-link):active {
transform: var(--press-scale)
}
.wc-block-components-button:not(.is-link).outlined,
.wc-block-cart__submit-container--sticky .wc-block-components-button.outlined {
background: transparent;
border-color: var(--noir-900);
color: var(--noir-900);
box-shadow: none
}
.wc-block-components-button.is-link {
color: var(--text-muted);
font: var(--type-body-sm);
text-decoration: none;
border-bottom: 1px solid var(--border-default)
}
.wc-block-components-button.is-link:hover {
color: var(--status-error)
}
.wc-block-components-button__text {
display: inline-flex;
align-items: center;
gap: var(--space-2)
}
/* űrlapmezők */
.wc-block-components-text-input,
.wc-block-components-country-input,
.wc-block-components-state-input {
width: 100%;
margin-top: var(--space-4)
}
.wc-block-components-text-input input[type=text],
.wc-block-components-text-input input[type=email],
.wc-block-components-text-input input[type=tel],
.wc-block-components-text-input input[type=number],
.wc-block-components-text-input input[type=password],
.wc-block-components-textarea,
.wc-block-components-combobox-control input.components-combobox-control__input,
.wc-block-components-form .wc-block-components-text-input input {
width: 100%;
height: auto;
min-height: 52px;
padding: 20px var(--space-4) 6px !important;
background: var(--surface-card);
border: 1px solid var(--border-default);
border-radius: var(--radius-input);
font: var(--type-body);
color: var(--text-body);
box-shadow: none;
transition: var(--transition-control)
}
.wc-block-components-textarea {
height: auto;
min-height: 88px;
padding-top: 22px !important
}
.wc-block-components-text-input input:focus,
.wc-block-components-textarea:focus,
.wc-block-components-combobox-control input:focus {
outline: none;
border-color: var(--border-strong);
box-shadow: var(--ring-focus)
}
.wc-block-components-text-input label,
.wc-block-components-combobox-control label {
font: var(--type-body-sm);
color: var(--text-muted)
}
.wc-block-components-text-input.is-active label {
font: var(--type-eyebrow);
letter-spacing: var(--ls-label);
text-transform: uppercase;
color: var(--text-muted)
}
.wc-block-components-validation-error {
margin-top: var(--space-1);
font: var(--type-body-sm);
color: var(--status-error)
}
.wc-block-components-checkbox__label,
.wc-block-components-checkbox {
font: var(--type-body-sm);
color: var(--text-body)
}
.wc-block-components-checkbox__mark {
fill: var(--cream-50)
}
.wc-block-components-checkbox__input[type=checkbox] {
accent-color: var(--noir-900)
}
.wc-block-components-checkbox .wc-block-components-checkbox__input:checked {
background: var(--noir-900);
border-color: var(--noir-900)
}
/* értesítő sávok */
.wc-block-components-notice-banner {
margin: 0 0 var(--space-6);
padding: var(--space-4) var(--space-5);
background: var(--surface-card) !important;
border: 1px solid var(--border-subtle);
border-top: 2px solid var(--status-success);
border-radius: var(--radius-sm);
box-shadow: var(--shadow-2);
font: var(--type-body-sm);
color: var(--text-body)
}
/* A wc-blocks variánsai `border-color`-t adnak (0,2,0), a fenti alapszabály
`border`-je csak (0,1,0) — a négy oldal színét ezért itt kell megadni, nem ott.
A sorrend számít: előbb mind a négy oldal, utána a hangsúlyos felső. */
.wc-block-components-notice-banner.is-info {
border-color: var(--border-subtle);
border-top-color: var(--gold-400)
}
.wc-block-components-notice-banner.is-success {
border-color: var(--border-subtle);
border-top-color: var(--status-success)
}
.wc-block-components-notice-banner.is-warning {
border-color: var(--border-subtle);
border-top-color: var(--status-warning)
}
.wc-block-components-notice-banner.is-error {
border-color: var(--border-subtle);
border-top-color: var(--status-error)
}
/* A wc-blocks körré maszkolja az ikont és variánsonként fest neki hátteret
(0,2,1) — sötét glifa maradna a színes körön, ezért a glifa krém lesz. */
.wc-block-components-notice-banner>svg {
fill: var(--cream-50);
background-color: var(--ink-500)
}
.wc-block-components-notice-banner.is-info>svg {
background-color: var(--gold-400)
}
.wc-block-components-notice-banner.is-success>svg {
background-color: var(--status-success)
}
.wc-block-components-notice-banner.is-warning>svg {
background-color: var(--status-warning)
}
.wc-block-components-notice-banner.is-error>svg {
background-color: var(--status-error)
}
/* oldalsáv (kosár összegző / rendelés összegző) */
.wc-block-components-sidebar-layout {
display: grid;
grid-template-columns: 1fr 380px;
gap: var(--space-9);
align-items: start
}
/* A wc-blocks a sidebar-layoutot flexre és százalékos szélességekre építi:
.wc-block-components-main{width:65%;padding-right:4.5283018868%} és
.wc-block-components-sidebar{width:35%}. A fenti grid csak a konténert veszi át,
a százalékok viszont a gyerekeken maradnak — és ott már a saját grid-sávjukhoz
mérődnek, nem a teljes szélességhez. Így lesz a 380px-es oldalsávból 133px, a
tartalomoszlopból pedig 65%-nyi csonk. A sáv adja a szélességet, a gyerek töltse ki.
A sidebar vízszintes paddingját nem nullázzuk: azt a lenti kártya-szabály viszi. */
.wc-block-components-sidebar-layout .wc-block-components-main {
width: auto;
min-width: 0;
margin: 0;
padding-right: 0
}
.wc-block-components-sidebar-layout .wc-block-components-sidebar {
width: auto;
min-width: 0
}
.wc-block-components-sidebar {
position: sticky;
top: 120px;
padding: var(--pad-card);
background: var(--surface-card);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-card);
box-shadow: var(--shadow-1)
}
.wc-block-components-totals-wrapper {
padding: var(--space-3) 0;
border-top: 1px solid var(--border-subtle)
}
.wc-block-components-totals-wrapper:first-child {
border-top: 0;
padding-top: 0
}
.wc-block-components-totals-item {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: var(--space-4);
padding: var(--space-1) 0
}
.wc-block-components-totals-item__label {
font: var(--type-body);
color: var(--text-secondary)
}
.wc-block-components-totals-item__value {
font: var(--type-body);
color: var(--text-heading)
}
.wc-block-components-totals-item__description {
flex-basis: 100%;
font: var(--type-body-sm);
color: var(--text-muted)
}
.wc-block-components-totals-footer-item {
border-top: 1px solid var(--border-subtle);
padding-top: var(--space-4)
}
.wc-block-components-totals-footer-item .wc-block-components-totals-item__label {
font: var(--type-h6);
color: var(--text-heading)
}
.wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
font: var(--fw-regular) var(--fs-h4)/1.1 var(--font-display);
color: var(--text-heading)
}
.wc-block-components-panel__button {
padding: var(--space-3) 0;
font: var(--type-ui);
letter-spacing: var(--ls-wide);
text-transform: uppercase;
color: var(--text-secondary)
}
.wc-block-components-panel__button:hover {
color: var(--noir-900)
}
.wc-block-components-panel__button>svg {
fill: var(--ink-500)
}
.wc-block-components-totals-coupon__form {
display: flex;
gap: var(--space-2);
align-items: flex-start
}
.wc-block-components-totals-coupon__input {
flex: 1;
margin: 0
}
.wc-block-components-totals-coupon__button {
margin: 0
}
.wc-block-components-chip {
height: 28px;
padding: 0 var(--space-3);
background: var(--surface-muted);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-pill);
font: var(--type-body-sm);
color: var(--text-body)
}
.wc-block-components-shipping-rates-control__package {
padding: 0
}
.wc-block-components-radio-control__option {
display: flex;
flex-direction: column;
gap: 2px;
margin: 0;
padding: var(--space-4);
background: var(--surface-card);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-sm);
transition: var(--transition-control)
}
.wc-block-components-radio-control__option+.wc-block-components-radio-control__option {
margin-top: var(--space-3)
}
.wc-block-components-radio-control__option-checked {
background: var(--action-soft);
border-color: var(--noir-900)
}
.wc-block-components-radio-control__option::after,
.wc-block-components-radio-control__option-layout::after {
display: none
}
.wc-block-components-radio-control__label {
font: var(--type-ui);
letter-spacing: 0;
text-transform: none;
color: var(--text-heading)
}
.wc-block-components-radio-control__secondary-label,
.wc-block-components-radio-control__description {
font: var(--type-body-sm);
color: var(--text-muted)
}
.wc-block-components-radio-control__input {
accent-color: var(--noir-900)
}
/* ---------- blokk kosár ---------- */
.wc-block-cart {
margin-top: var(--space-8)
}
.wc-block-cart .wc-block-cart-items {
width: 100%;
margin: 0;
border-collapse: collapse
}
.wc-block-cart .wc-block-cart-items th,
.wc-block-cart-items__header th {
padding: 0 0 var(--space-4);
border: 0;
border-bottom: 1px solid var(--border-subtle);
font: var(--type-eyebrow);
letter-spacing: var(--ls-label);
text-transform: uppercase;
color: var(--text-muted);
text-align: left
}
.wc-block-cart-items__header-total {
text-align: right
}
.wc-block-cart .wc-block-cart-items td {
padding: var(--space-5) 0;
border: 0;
border-bottom: 1px solid var(--border-subtle);
vertical-align: top
}
.wc-block-cart-item__image {
width: 112px;
padding-right: var(--space-5) !important
}
.wc-block-cart-item__image img {
display: block;
width: 92px;
aspect-ratio: 4/5;
object-fit: cover;
border-radius: var(--radius-image)
}
.wc-block-cart-item__wrap {
display: flex;
flex-direction: column;
gap: var(--space-2)
}
.wc-block-cart-item__total {
text-align: right
}
.wc-block-cart-item__total-price-and-sale-badge-wrapper {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: var(--space-2)
}
.wc-block-components-sale-badge {
align-self: flex-end;
height: 24px;
padding: 0 var(--space-3);
background: var(--noir-900);
border: 0;
border-radius: var(--radius-badge);
color: var(--cream-50);
font: var(--fw-medium) var(--fs-caption)/24px var(--font-sans);
letter-spacing: var(--ls-label);
text-transform: uppercase
}
.wc-block-components-quantity-selector {
display: flex;
align-items: center;
justify-content: space-between;
width: 132px;
max-width: 132px;
height: var(--control-sm);
margin: var(--space-2) 0 0;
border: 1px solid var(--border-default);
border-radius: var(--radius-pill);
background: var(--surface-card);
overflow: hidden
}
.wc-block-components-quantity-selector::after {
display: none
}
.wc-block-components-quantity-selector__input {
flex: 1;
width: 100%;
min-width: 0;
height: 100%;
padding: 0;
background: transparent;
border: 0;
text-align: center;
font: var(--type-ui);
color: var(--text-heading)
}
.wc-block-components-quantity-selector__button {
flex: 0 0 38px;
min-width: 38px;
height: 100%;
padding: 0;
background: none;
border: 0;
color: var(--text-body);
font: var(--fw-regular) 16px var(--font-sans);
opacity: 1
}
.wc-block-components-quantity-selector__button:hover {
background: var(--surface-muted);
color: var(--noir-900)
}
.wc-block-cart-item__remove-link {
align-self: flex-start;
width: fit-content;
margin-top: var(--space-2);
font: var(--type-body-sm);
color: var(--text-muted);
text-decoration: none;
border-bottom: 1px solid var(--border-default)
}
.wc-block-cart-item__remove-link:hover {
color: var(--status-error)
}
.wc-block-cart__submit-container {
padding: var(--space-6) 0 0
}
.wc-block-cart__submit-button {
width: 100%;
min-height: var(--control-lg);
font-size: var(--fs-body-sm)
}
.wc-block-cart__submit-container--sticky {
background: rgba(250, 247, 241, .92);
backdrop-filter: var(--blur-glass);
border-top: 1px solid var(--border-subtle);
padding: var(--space-3) var(--space-4)
}
.wc-block-cart__sidebar .wc-block-components-shipping-calculator-address {
margin-top: var(--space-3)
}
.wc-block-cart__empty-cart__title {
font: var(--type-h3);
color: var(--text-heading)
}
.wp-block-woocommerce-empty-cart-block p {
font: var(--type-body-lg);
color: var(--text-secondary)
}
.wc-block-cart-item__prices {
font: var(--type-body-sm);
color: var(--text-muted)
}
/* ---------- blokk kassza ---------- */
.wc-block-checkout {
margin-top: var(--space-8)
}
.wc-block-checkout__form,
.wc-block-components-checkout-step {
padding: 0;
border: 0
}
.wc-block-components-checkout-step {
margin: 0 0 var(--space-8);
padding-left: 0
}
.wc-block-components-checkout-step__heading {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: var(--space-4);
margin: 0 0 var(--space-2)
}
.wc-block-components-checkout-step__title {
margin: 0;
font: var(--type-h5) !important;
letter-spacing: var(--ls-heading) !important;
color: var(--text-heading)
}
.wc-block-components-checkout-step__heading-content {
font: var(--type-body-sm);
color: var(--text-muted)
}
.wc-block-components-checkout-step__description {
margin: 0 0 var(--space-4);
font: var(--type-body-sm);
color: var(--text-muted)
}
.wc-block-components-checkout-step__content {
padding-bottom: 0
}
.wc-block-components-checkout-step:not(:last-child) {
padding-bottom: var(--space-7);
border-bottom: 1px solid var(--border-subtle)
}
.wc-block-components-checkout-step__container::before,
.wc-block-components-checkout-step__number {
display: none
}
.wc-block-components-address-form,
.wc-block-components-form {
display: block
}
.wc-block-components-address-card {
padding: var(--space-4);
background: var(--surface-muted);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-sm);
font: var(--type-body-sm);
color: var(--text-body)
}
.wc-block-components-address-card__edit {
display: inline-block;
width: fit-content;
font: var(--type-ui);
color: var(--noir-900);
text-decoration: none;
border-bottom: 1px solid var(--border-default)
}
.wc-block-checkout__payment-method .wc-block-components-radio-control-accordion-option {
background: var(--surface-card);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-sm);
margin-bottom: var(--space-3);
overflow: hidden
}
.wc-block-components-radio-control-accordion-option--checked-option-highlighted,
.wc-block-components-radio-control-accordion-option:has(.wc-block-components-radio-control__option-checked) {
background: var(--action-soft);
border-color: var(--noir-900)
}
.wc-block-components-radio-control-accordion-content {
padding: 0 var(--space-4) var(--space-4) 44px;
font: var(--type-body-sm);
color: var(--text-muted)
}
.wc-block-checkout__actions {
margin-top: var(--space-7)
}
.wc-block-checkout__actions_row {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-4)
}
.wc-block-components-checkout-place-order-button {
min-height: var(--control-lg);
padding: 0 var(--space-8);
font-size: var(--fs-body-sm)
}
.wc-block-components-checkout-return-to-cart-button {
font: var(--type-ui);
letter-spacing: var(--ls-wide);
text-transform: uppercase;
color: var(--text-secondary);
text-decoration: none
}
.wc-block-components-checkout-return-to-cart-button:hover {
color: var(--noir-900)
}
.wc-block-components-order-summary__button-text {
font: var(--type-h6);
color: var(--text-heading);
text-transform: none;
letter-spacing: 0
}
.wc-block-components-order-summary-item {
display: grid;
grid-template-columns: 64px 1fr auto;
gap: var(--space-4);
padding: var(--space-4) 0;
border-bottom: 1px solid var(--border-subtle)
}
.wc-block-components-order-summary-item:last-child {
border-bottom: 0
}
.wc-block-components-order-summary-item__image img {
width: 64px;
aspect-ratio: 4/5;
object-fit: cover;
border-radius: var(--radius-image)
}
.wc-block-components-order-summary-item__quantity {
position: static;
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 22px;
height: 22px;
margin-bottom: var(--space-1);
background: var(--noir-900);
border: 0;
border-radius: var(--radius-pill);
color: var(--cream-50);
font: var(--fw-medium) 11px/22px var(--font-sans)
}
.wc-block-components-order-summary-item__description .wc-block-components-product-name {
font-size: var(--fs-body-lg) !important
}
.wc-block-components-order-summary-item__total-price {
font: var(--type-body);
color: var(--text-heading)
}
.wc-block-components-express-payment {
border-color: var(--border-subtle)
}
.wc-block-components-express-payment__title-container::before {
background: var(--border-subtle)
}
.wc-block-components-checkout-policies {
font: var(--type-body-sm)
}
.wc-block-components-checkout-policies__item a {
color: var(--text-muted);
border-bottom: 1px solid var(--border-default)
}
/* ---------- Fiókom (my-account) ---------- */
.woocommerce-account .woocommerce {
display: grid;
grid-template-columns: 230px 1fr;
gap: var(--space-9);
align-items: start;
max-width: var(--container-max);
margin: 0 auto
}
.woocommerce-account .woocommerce::before,
.woocommerce-account .woocommerce::after {
display: none
}
.woocommerce-account .woocommerce>.woocommerce-notices-wrapper,
.woocommerce-account .woocommerce>.woocommerce-message,
.woocommerce-account .woocommerce>.woocommerce-error,
.woocommerce-account .woocommerce>.woocommerce-info {
grid-column: 1/-1
}
.woocommerce-account .woocommerce-form-login,
.woocommerce-account .woocommerce-form-register,
.woocommerce-account .u-columns {
grid-column: 1/-1
}
.woocommerce-MyAccount-navigation {
padding-right: var(--space-5);
border-right: 1px solid var(--border-subtle)
}
.woocommerce-MyAccount-navigation ul {
gap: 0
}
.woocommerce-MyAccount-navigation li {
position: relative;
padding: 0
}
.woocommerce-MyAccount-navigation li a {
display: block;
padding: var(--space-3) 0;
border-bottom: 1px solid var(--border-subtle)
}
.woocommerce-MyAccount-navigation li:last-child a {
border-bottom: 0
}
.woocommerce-MyAccount-navigation li.is-active a {
position: relative;
color: var(--noir-900)
}
.woocommerce-MyAccount-navigation li.is-active a::before {
content: "";
position: absolute;
left: -16px;
top: 50%;
width: 6px;
height: 1px;
background: var(--accent)
}
.woocommerce-MyAccount-navigation li a:hover {
color: var(--accent)
}
.woocommerce-MyAccount-content {
min-width: 0
}
.woocommerce-MyAccount-content>p {
font: var(--type-body-lg);
color: var(--text-secondary);
margin-bottom: var(--space-5)
}
.woocommerce-MyAccount-content h2,
.woocommerce-MyAccount-content h3 {
margin: var(--space-8) 0 var(--space-4);
font: var(--type-h4);
color: var(--text-heading)
}
.woocommerce-MyAccount-content h2:first-child,
.woocommerce-MyAccount-content h3:first-child {
margin-top: 0
}
.woocommerce-orders-table,
.woocommerce-table--order-details,
.woocommerce-table--downloads {
width: 100%;
border-collapse: collapse
}
.woocommerce-orders-table th,
.woocommerce-table--downloads th {
padding: 0 var(--space-3) var(--space-3) 0;
border-bottom: 1px solid var(--border-subtle);
font: var(--type-eyebrow);
letter-spacing: var(--ls-label);
text-transform: uppercase;
color: var(--text-muted);
text-align: left
}
.woocommerce-orders-table td,
.woocommerce-table--downloads td {
padding: var(--space-4) var(--space-3) var(--space-4) 0;
border-bottom: 1px solid var(--border-subtle);
font: var(--type-body);
color: var(--text-body);
vertical-align: middle
}
.woocommerce-orders-table__cell-order-number a {
font: var(--type-ui);
color: var(--noir-900);
border-bottom: 1px solid var(--border-default)
}
.woocommerce-orders-table__cell-order-status {
font: var(--type-body-sm);
letter-spacing: var(--ls-wide);
text-transform: uppercase;
color: var(--text-secondary)
}
.woocommerce-orders-table__cell-order-total {
font: var(--type-price);
color: var(--text-heading)
}
.woocommerce-orders-table__cell-order-actions {
text-align: right
}
.woocommerce-orders-table__cell-order-actions .button {
height: var(--control-sm);
padding: 0 var(--space-4);
font-size: var(--fs-caption)
}
.woocommerce-Addresses {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-6);
margin-top: var(--space-5)
}
.woocommerce-Address {
padding: var(--pad-card);
background: var(--surface-card);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-card);
box-shadow: var(--shadow-1)
}
.woocommerce-Address-title {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: var(--space-4);
margin-bottom: var(--space-3)
}
.woocommerce-Address-title h2,
.woocommerce-Address-title h3 {
margin: 0 !important;
font: var(--type-h6) !important;
color: var(--text-heading)
}
.woocommerce-Address-title .edit {
font: var(--type-body-sm);
color: var(--text-muted);
border-bottom: 1px solid var(--border-default)
}
.woocommerce-Address address {
font: var(--type-body);
font-style: normal;
color: var(--text-secondary)
}
.woocommerce-EditAccountForm,
.woocommerce-address-fields {
display: flex;
flex-direction: column;
gap: var(--space-4);
max-width: 620px
}
.woocommerce-EditAccountForm fieldset {
margin: var(--space-5) 0 0;
padding: var(--pad-card);
background: var(--surface-muted);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-card)
}
.woocommerce-EditAccountForm legend {
font: var(--type-eyebrow);
letter-spacing: var(--ls-label);
text-transform: uppercase;
color: var(--text-muted)
}
.woocommerce-MyAccount-content .woocommerce-pagination ul {
display: flex;
gap: var(--space-2);
list-style: none;
margin: var(--space-6) 0 0;
padding: 0;
border: 0
}
.woocommerce-MyAccount-content .woocommerce-pagination li a,
.woocommerce-MyAccount-content .woocommerce-pagination li span {
display: grid;
place-items: center;
width: 36px;
height: 36px;
border: 1px solid var(--border-subtle);
border-radius: var(--radius-pill);
font: var(--type-ui);
color: var(--text-secondary)
}
.woocommerce-MyAccount-content .woocommerce-pagination li span.current {
background: var(--noir-900);
border-color: var(--noir-900);
color: var(--cream-50)
}
.woocommerce-form-login__rememberme {
font: var(--type-body-sm)
}
.woocommerce-LostPassword {
font: var(--type-body-sm)
}
.woocommerce-LostPassword a {
color: var(--text-muted);
border-bottom: 1px solid var(--border-default)
}
/* ---------- Rendelés visszaigazolás (klasszikus order-received) ---------- */
.woocommerce-order {
display: flex;
flex-direction: column;
gap: var(--space-8);
max-width: var(--container-narrow)
}
.woocommerce-notice--success,
.woocommerce-thankyou-order-received {
margin: 0;
padding: 0;
font: var(--type-h3);
color: var(--text-heading)
}
.woocommerce-thankyou-order-details.order_details {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: var(--space-1);
margin: 0;
padding: var(--pad-card);
background: var(--surface-muted);
border-radius: var(--radius-card);
list-style: none
}
.woocommerce-thankyou-order-details.order_details li {
display: flex;
flex-direction: column;
gap: var(--space-1);
border: 0;
font: var(--type-eyebrow);
letter-spacing: var(--ls-label);
text-transform: uppercase;
color: var(--text-muted)
}
.woocommerce-thankyou-order-details.order_details li strong {
font: var(--fw-regular) var(--fs-h6)/1.2 var(--font-display);
letter-spacing: 0;
text-transform: none;
color: var(--text-heading)
}
.woocommerce-order-details__title,
.woocommerce-column__title,
.woocommerce-customer-details h2 {
margin: 0 0 var(--space-4);
font: var(--type-h5);
color: var(--text-heading)
}
.woocommerce-table--order-details th,
.woocommerce-table--order-details td {
padding: var(--space-3) 0;
border-bottom: 1px solid var(--border-subtle);
font: var(--type-body);
text-align: left
}
.woocommerce-table--order-details td.woocommerce-table__product-total,
.woocommerce-table--order-details th:last-child {
text-align: right
}
.woocommerce-table--order-details tfoot th {
font: var(--type-body);
color: var(--text-secondary)
}
.woocommerce-table--order-details tfoot tr:last-child th {
font: var(--type-h6);
color: var(--text-heading)
}
.woocommerce-table--order-details tfoot tr:last-child td {
font: var(--fw-regular) var(--fs-h4)/1.1 var(--font-display);
color: var(--text-heading);
text-align: right
}
.woocommerce-customer-details {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-6)
}
.woocommerce-customer-details .woocommerce-column {
padding: var(--pad-card);
background: var(--surface-card);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-card)
}
.woocommerce-customer-details address {
font: var(--type-body);
font-style: normal;
color: var(--text-secondary);
border: 0;
padding: 0
}
/* ---------- Rendelés visszaigazolás (blokk: order-confirmation) ---------- */
.wp-block-woocommerce-order-confirmation-status p,
.wc-block-order-confirmation-status p {
font: var(--type-body-lg);
color: var(--text-secondary);
max-width: 56ch
}
.wc-block-order-confirmation-summary {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: var(--space-4);
margin: var(--space-7) 0;
padding: var(--pad-card);
background: var(--surface-muted);
border: 0;
border-radius: var(--radius-card);
list-style: none
}
.wc-block-order-confirmation-summary li {
display: flex;
flex-direction: column;
gap: var(--space-1);
border: 0;
padding: 0
}
.wc-block-order-confirmation-summary-list-item__key {
font: var(--type-eyebrow);
letter-spacing: var(--ls-label);
text-transform: uppercase;
color: var(--text-muted)
}
.wc-block-order-confirmation-summary-list-item__value {
font: var(--fw-regular) var(--fs-h6)/1.2 var(--font-display);
color: var(--text-heading)
}
.wc-block-order-confirmation-totals table,
.wc-block-order-confirmation-totals__table {
width: 100%;
border-collapse: collapse
}
.wc-block-order-confirmation-totals th,
.wc-block-order-confirmation-totals td {
padding: var(--space-3) 0;
border-bottom: 1px solid var(--border-subtle);
font: var(--type-body);
text-align: left
}
.wc-block-order-confirmation-totals td:last-child,
.wc-block-order-confirmation-totals th:last-child {
text-align: right
}
.wc-block-order-confirmation-totals tfoot tr:last-child th {
font: var(--type-h6);
color: var(--text-heading)
}
.wc-block-order-confirmation-totals tfoot tr:last-child td {
font: var(--fw-regular) var(--fs-h4)/1.1 var(--font-display);
color: var(--text-heading)
}
.wc-block-order-confirmation-totals__product-image img {
width: 64px;
aspect-ratio: 4/5;
object-fit: cover;
border-radius: var(--radius-image)
}
.wc-block-order-confirmation-shipping-address,
.wc-block-order-confirmation-billing-address {
padding: var(--pad-card);
background: var(--surface-card);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-card);
font: var(--type-body);
color: var(--text-secondary)
}
.wc-block-order-confirmation-shipping-address address,
.wc-block-order-confirmation-billing-address address {
font-style: normal;
border: 0;
padding: 0
}
.wc-block-order-confirmation-additional-fields-wrapper,
.wc-block-order-confirmation-downloads {
font: var(--type-body)
}
/* ---------- 404 / keresés / bejegyzés ---------- */
.ff-404 {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: var(--space-5);
padding: var(--space-12) 0
}
.wp-block-search__button {
background: var(--action);
border: 1px solid transparent;
border-radius: var(--radius-button);
color: var(--cream-50);
font: var(--type-ui);
letter-spacing: var(--ls-wide);
text-transform: uppercase;
padding: 0 var(--space-6);
height: var(--control-md)
}
.wp-block-search__input {
height: var(--control-md);
padding: 0 var(--space-4);
background: var(--surface-card);
border: 1px solid var(--border-default);
border-radius: var(--radius-input);
font: var(--type-body);
color: var(--text-body);
}
.wp-block-post-date,
.wp-block-post-terms {
font: var(--type-body-sm);
color: var(--text-muted)
}
/* ---------- reszponzív ---------- */
/* A 380px-es összegzőkártya mellett 1200px alatt a bal sáv ~630px-re szűkül, ott
a 6 oszlopos kosártáblának már nem marad elég hely a névoszlopra. */
@media (max-width:1200px) {
body.woocommerce-cart .woocommerce.wp-block-group,
.woocommerce-checkout form.checkout {
grid-template-columns: 1fr
}
/* a grid-column:2-t is vissza kell venni, különben implicit második oszlopot nyit */
body.woocommerce-cart .woocommerce.wp-block-group>.woocommerce-cart-form,
body.woocommerce-cart .woocommerce.wp-block-group>.cart-collaterals,
.woocommerce-checkout form.checkout>#customer_details,
.woocommerce-checkout form.checkout>.ff-checkout-review {
grid-column: 1
}
.woocommerce .cart-collaterals,
.woocommerce-checkout .ff-checkout-review {
max-width: 380px;
margin-left: auto
}
.woocommerce .cart_totals,
#order_review,
.woocommerce-checkout-review-order {
position: static
}
}
@media (max-width:1024px) {
.wc-block-components-sidebar-layout {
grid-template-columns: 1fr
}
.wc-block-components-sidebar {
position: static
}
.woocommerce-account .woocommerce {
grid-template-columns: 1fr
}
.woocommerce-MyAccount-navigation {
padding: 0 0 var(--space-5);
border-right: 0;
border-bottom: 1px solid var(--border-subtle)
}
.woocommerce-MyAccount-navigation ul {
flex-direction: row;
flex-wrap: wrap;
gap: var(--space-4)
}
.woocommerce-MyAccount-navigation li a {
border-bottom: 0;
padding: var(--space-2) 0
}
.woocommerce-MyAccount-navigation li.is-active a::before {
display: none
}
.woocommerce-Addresses,
.woocommerce-customer-details {
grid-template-columns: 1fr
}
}
@media (max-width:640px) {
/* A woocommerce-smallscreen.css bontaná sorokra a shop_table_responsive-ot,
azt viszont nem töltjük be — a kosártáblát itt magunk rakjuk kártyákba.
A width:auto-t osztályonként kell visszavenni, mert a fenti oszlopszabályok
(0,3,2) erősebbek egy sima `table.cart td`-nél. */
.woocommerce table.cart thead {
display: none
}
.woocommerce table.cart tr {
display: block;
padding: var(--space-5) 0;
border-bottom: 1px solid var(--border-subtle)
}
.woocommerce table.cart td {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-4);
padding: var(--space-1) 0;
border: 0;
text-align: right
}
.woocommerce table.cart td.product-remove,
.woocommerce table.cart td.product-thumbnail,
.woocommerce table.cart td.product-price,
.woocommerce table.cart td.product-quantity,
.woocommerce table.cart td.product-subtotal {
width: auto
}
.woocommerce table.cart td::before {
content: attr(data-title);
font: var(--type-eyebrow);
letter-spacing: var(--ls-label);
text-transform: uppercase;
color: var(--text-muted)
}
.woocommerce table.cart td.actions::before,
.woocommerce table.cart td.product-remove::before,
.woocommerce table.cart td.product-thumbnail::before {
content: none
}
.woocommerce table.cart td.product-remove {
justify-content: flex-end;
padding: 0
}
.woocommerce table.cart td.product-thumbnail {
justify-content: flex-start;
padding: 0 0 var(--space-3)
}
.woocommerce table.cart td.product-thumbnail img {
width: 72px
}
/* itt a tr display:block, tehát nincs táblaelrendezés — a cella nyugodtan
lehet flex, a float pedig flex elemen amúgy is hatástalan */
.woocommerce .cart .actions {
flex-wrap: wrap;
justify-content: flex-start;
text-align: left
}
.woocommerce .cart .coupon {
flex: 1 1 100%;
float: none;
max-width: none;
width: auto;
}
.wc-block-cart-item__image {
width: 76px;
padding-right: var(--space-4) !important
}
.wc-block-cart-item__image img {
width: 64px
}
.wc-block-components-order-summary-item {
grid-template-columns: 48px 1fr auto
}
.woocommerce-orders-table thead {
display: none
}
.woocommerce-orders-table tr {
display: grid;
gap: var(--space-1);
padding: var(--space-4) 0;
border-bottom: 1px solid var(--border-subtle)
}
.woocommerce-orders-table td {
border: 0;
padding: 0
}
.woocommerce-orders-table__cell-order-actions {
text-align: left;
margin-top: var(--space-3)
}
}
/* social blokk */
.wp-block-social-links .wp-social-link span:not(.screen-reader-text) {
font-size: var(--fs-body-sm);
text-transform: uppercase;
}
.wp-block-social-links .wp-social-link {
position: relative;
}
.wp-block-social-links .wp-social-link:not(:first-child)::before {
content: "";
display: block;
width: 0px;
height: .75em;
border-left: 1px solid currentColor;
position: absolute;
top: 50%;
transform: translateX(-50%) translateY(-50%);
left: calc(var(--wp--preset--spacing--90) / -2);
}
.wp-block-social-link:hover {
transform: scale(1);
}
.wp-block-social-link > a {
transition: inherit;
}
.wp-block-social-link:hover > a {
transform: scale(1.1);
}
/* Gutenberg fixes */
.wp-block-navigation__responsive-container.is-menu-open {
overflow: visible;
}
/* Checkout trust - fejléc */
.ff-pay-head {
display: flex;
align-items: center;
gap: 14px;
margin: 32px 0 14px
}
.ff-pay-lock {
flex: 0 0 40px;
height: 40px;
border-radius: 50%;
display: grid;
place-items: center;
background: var(--gold-400);
color: #fff
}
.ff-pay-title {
display: block;
font-size: 17px;
line-height: 1.25;
color: var(--ink-700)
}
.ff-pay-sub {
display: block;
margin-top: 3px;
font-size: 13px;
line-height: 1.45;
color: var(--ink-500)
}
/* Checkout trust - Apple Pay / Google Pay a fizetési kártya fölött (inc/checkout-trust.php 1b) */
.ff-checkout-review #wc-stripe-express-checkout-element {
margin-top: 32px !important
}
.ff-checkout-review #wc-stripe-express-checkout-button-separator {
margin: 20px 0 0 !important;
font-size: 12px;
letter-spacing: .1em;
text-transform: uppercase;
color: var(--ink-500)
}
/* Checkout trust - egyetlen kártya, nem doboz a dobozban */
#payment {
background: #fff;
border: 1px solid var(--border-subtle);
border-top: 3px solid var(--gold-400);
border-radius: 6px;
padding: 22px 22px 24px
}
#payment ul.payment_methods {
list-style: none;
margin: 0;
padding: 0;
border: 0
}
#payment li.wc_payment_method {
margin: 0;
padding: 0
}
#payment div.payment_box {
background: none;
border: 0;
box-shadow: none;
margin: 0;
padding: 0
}
#payment div.payment_box::before {
display: none
}
#payment fieldset {
border: 0;
margin: 0;
padding: 0;
min-width: 0
}
/* Checkout trust - egy fizetési mód van -> a rádiógomb csak zaj */
#payment li.wc_payment_method:only-child>input[type=radio] {
position: absolute;
opacity: 0;
pointer-events: none
}
/* Checkout trust - az üres keret a kártya alatt: tipp, hogy a theme láthatóvá tesz egy hidden inputot / üres fieldsetet */
#payment input[type=hidden] {
display: none !important
}
#payment fieldset:empty {
display: none
}
/* Checkout trust - lábléc */
.ff-pay-foot {
margin-top: 18px;
padding-top: 16px;
border-top: 1px solid var(--border-subtle)
}
.ff-pay-cards {
display: flex;
gap: 8px;
flex-wrap: wrap;
margin-bottom: 12px
}
.ff-pay-cards img {
display: block;
height: 24px;
width: auto;
border: 1px solid var(--border-subtle);
border-radius: 3px;
background: #fff
}
.ff-pay-points {
list-style: none;
margin: 0;
padding: 0;
font-size: 13px;
line-height: 1.5;
color: var(--ink-500)
}
.ff-pay-points li {
position: relative;
padding-left: 20px;
margin: 0 0 4px
}
.ff-pay-points li::before {
content: "";
position: absolute;
left: 2px;
top: .45em;
width: 9px;
height: 5px;
border-left: 2px solid var(--gold-400);
border-bottom: 2px solid var(--gold-400);
transform: rotate(-45deg)
}
@media (max-width:480px) {
#payment {
padding: 16px
}
.ff-pay-sub {
font-size: 12.5px
}
}