/* ==========================================================================
   Tivarello Shop Skin
   A /shop WooCommerce feluletet a tivarello.com fooldal dizajnrendszerehez
   igazitja. Forras: /css/style.css design tokenek.
   ========================================================================== */

:root {
	--tv-midnight: #0F172A;
	--tv-surface: #1E293B;
	--tv-paper: #FDFBF7;
	--tv-ink: #1E293B;
	--tv-forest: #1B4D3E;
	--tv-gold: #D4AF37;
	--tv-gold-dark: #c19b2e;
	--tv-gray: #94A3B8;
	--tv-border: rgba(148, 163, 184, 0.2);
	--tv-gold-border: rgba(212, 175, 55, 0.3);
	--tv-radius: 12px;
	--tv-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
	--tv-shadow-hover: 0 8px 30px rgba(212, 175, 55, 0.3);
	--tv-transition: all 0.3s ease;
	--tv-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	--tv-serif: 'Playfair Display', Georgia, serif;
}

/* --------------------------------------------------------------------------
   1. Alap: sotet hatter, vilagos szoveg
   -------------------------------------------------------------------------- */

body,
#wrapper,
#main-content,
.site-main,
.nasa-ajax-store-wrapper,
#nasa-ajax-store,
.nasa-archive-product-content,
.nasa-content-page-products,
.woocommerce-page #main-content {
	background-color: var(--tv-midnight);
	color: var(--tv-paper);
}

body {
	font-family: var(--tv-sans);
	font-size: 16px;
	line-height: 1.6;
}

#main-content.site-main.light {
	background-color: var(--tv-midnight);
}

p,
li,
td,
dd,
.woocommerce-loop-product__title,
.product-des,
.nasa-shop-description {
	color: var(--tv-gray);
}

a {
	color: var(--tv-paper);
	transition: var(--tv-transition);
}

a:hover,
a:focus {
	color: var(--tv-gold);
}

/* --------------------------------------------------------------------------
   2. Tipografia
   -------------------------------------------------------------------------- */

h1, h2, h3, h4, h5, h6,
.page-title,
.product_title,
.woocommerce-products-header__title,
.nasa-title,
.section-title {
	font-family: var(--tv-serif);
	font-weight: 700;
	line-height: 1.2;
	color: var(--tv-paper);
}

.woocommerce-products-header__title,
.page-title {
	font-size: 2.5rem;
	letter-spacing: 0.01em;
}

/* Termeknev a listaban: a fooldalon ez Inter 600, nem serif. */
.woocommerce-loop-product__title,
.product-item .product-title,
li.product h2,
li.product h3 {
	font-family: var(--tv-sans);
	font-size: 18px;
	font-weight: 600;
	line-height: 1.4;
	color: var(--tv-paper);
}

/* --------------------------------------------------------------------------
   3. Fejlec / topbar / lablec
   -------------------------------------------------------------------------- */

#top-bar,
.top-bar,
.nasa-topbar-wrap {
	background-color: var(--tv-forest);
	color: var(--tv-paper);
	font-size: 13px;
}

#top-bar a,
.nasa-topbar-wrap a {
	color: var(--tv-paper);
}

#header-content,
#masthead,
.site-header,
.header-wrapper,
.nasa-header-sticky,
.sticky-wrapper {
	background-color: var(--tv-midnight);
	border-bottom: 1px solid var(--tv-border);
}

.nav-list a,
.main-menu-warpper a,
.nasa-menus-wrapper a,
#main-menu a {
	font-family: var(--tv-sans);
	font-weight: 500;
	color: var(--tv-paper);
}

.nav-list a:hover,
.main-menu-warpper a:hover,
.nasa-menus-wrapper a:hover,
#main-menu a:hover,
#main-menu .current-menu-item > a {
	color: var(--tv-gold);
}

.nasa-header-icons-wrap a,
.icons-wrapper a,
.cart-icon,
.wishlist-icon,
.search-icon {
	color: var(--tv-paper);
}

.footer,
#footer,
.site-footer,
.footer-wrapper {
	background-color: var(--tv-midnight);
	color: var(--tv-gray);
	border-top: 1px solid var(--tv-border);
}

.footer a,
#footer a,
.site-footer a {
	color: var(--tv-gray);
}

.footer a:hover,
#footer a:hover,
.site-footer a:hover {
	color: var(--tv-gold);
}

.footer h3, .footer h4,
#footer h3, #footer h4 {
	color: var(--tv-paper);
	font-family: var(--tv-serif);
}

/* --------------------------------------------------------------------------
   4. Termekkartyak – a fooldal .book-card mintajara
   -------------------------------------------------------------------------- */

li.product,
.product-item,
.products .product {
	background: var(--tv-surface);
	border: 1px solid var(--tv-border);
	border-radius: var(--tv-radius);
	overflow: hidden;
	transition: var(--tv-transition);
}

li.product:hover,
.product-item:hover,
.products .product:hover {
	transform: translateY(-5px);
	border-color: var(--tv-gold);
	box-shadow: var(--tv-shadow-hover);
}

li.product img,
.product-item img {
	border-radius: 0;
	display: block;
}

.product-des,
.product-des-wrap,
.info {
	padding: 0 16px 16px;
	background: transparent;
}

/* --------------------------------------------------------------------------
   5. Arak – arany, mint a fooldali .price-current
   -------------------------------------------------------------------------- */

.price,
.amount,
.woocommerce-Price-amount,
span.price ins .amount {
	color: var(--tv-gold);
	font-family: var(--tv-sans);
	font-weight: 700;
	font-size: 20px;
}

del,
del .amount,
del .woocommerce-Price-amount {
	color: var(--tv-gray);
	font-weight: 400;
	font-size: 16px;
	text-decoration: line-through;
	opacity: 0.8;
}

ins {
	background: transparent;
	text-decoration: none;
}

/* --------------------------------------------------------------------------
   6. Gombok – .btn-primary: arany hatter, midnight szoveg
   -------------------------------------------------------------------------- */

.button,
button,
input[type="submit"],
.add_to_cart_button,
.single_add_to_cart_button,
.checkout-button,
.wc-forward,
.nasa-btn,
a.btn {
	font-family: var(--tv-sans);
	font-weight: 600;
	font-size: 15px;
	padding: 12px 24px;
	border: none;
	border-radius: var(--tv-radius);
	background-color: var(--tv-gold);
	color: var(--tv-midnight);
	text-transform: none;
	letter-spacing: 0;
	transition: var(--tv-transition);
	cursor: pointer;
}

.button:hover,
button:hover,
input[type="submit"]:hover,
.add_to_cart_button:hover,
.single_add_to_cart_button:hover,
.checkout-button:hover,
.wc-forward:hover,
.nasa-btn:hover,
a.btn:hover {
	background-color: var(--tv-gold-dark);
	color: var(--tv-midnight);
	transform: translateY(-2px);
}

/* Masodlagos gomb: atlatszo, arany kerettel */
.button.alt-secondary,
.nasa-btn-secondary,
.button.wc-backward {
	background-color: transparent;
	color: var(--tv-gold);
	border: 2px solid var(--tv-gold);
}

.button.alt-secondary:hover,
.nasa-btn-secondary:hover,
.button.wc-backward:hover {
	background-color: var(--tv-gold);
	color: var(--tv-midnight);
}

/* --------------------------------------------------------------------------
   7. Urlapmezok
   -------------------------------------------------------------------------- */

input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="number"],
textarea,
select,
.select2-container .select2-selection {
	background-color: var(--tv-surface);
	border: 1px solid var(--tv-border);
	border-radius: 8px;
	color: var(--tv-paper);
	font-family: var(--tv-sans);
	padding: 10px 14px;
}

input::placeholder,
textarea::placeholder {
	color: var(--tv-gray);
	opacity: 0.7;
}

input:focus,
textarea:focus,
select:focus {
	border-color: var(--tv-gold);
	outline: none;
	box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.15);
}

/* --------------------------------------------------------------------------
   8. Badge-ek, cimkek
   -------------------------------------------------------------------------- */

.onsale,
.nasa-onsale,
.product-label,
span.badge {
	background-color: var(--tv-forest);
	color: var(--tv-paper);
	font-family: var(--tv-sans);
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 1px;
	border-radius: 20px;
	padding: 6px 16px;
}

.product-cat-label,
.posted_in a,
.tagged_as a {
	display: inline-block;
	background: var(--tv-gold);
	color: var(--tv-midnight);
	border-radius: 20px;
	padding: 4px 14px;
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 1px;
}

/* --------------------------------------------------------------------------
   9. Szuro / rendezo sav, sidebar, tabok
   -------------------------------------------------------------------------- */

.filters-container,
.nasa-filter-wrap,
.nasa-topbar-filter-wrap,
.woocommerce-ordering select,
.nasa-top-cat-filter-wrap {
	background-color: transparent;
	color: var(--tv-gray);
	border-color: var(--tv-border);
}

.widget,
.sidebar-inner,
.nasa-sidebar {
	background: transparent;
	color: var(--tv-gray);
}

.widget .widget-title,
.widget h3 {
	font-family: var(--tv-serif);
	color: var(--tv-paper);
}

.woocommerce-tabs ul.tabs li,
.wc-tabs li {
	background: var(--tv-surface);
	border: 1px solid var(--tv-border);
	border-radius: var(--tv-radius) var(--tv-radius) 0 0;
}

.woocommerce-tabs ul.tabs li.active,
.wc-tabs li.active {
	background: var(--tv-midnight);
	border-bottom-color: var(--tv-gold);
}

.woocommerce-tabs ul.tabs li a,
.wc-tabs li a {
	color: var(--tv-gray);
	font-family: var(--tv-sans);
	font-weight: 500;
}

.woocommerce-tabs ul.tabs li.active a,
.wc-tabs li.active a {
	color: var(--tv-gold);
}

/* --------------------------------------------------------------------------
   10. Tablazatok (kosar, penztar, fiok)
   -------------------------------------------------------------------------- */

/* A .variations es a grouped_form elrendezesi tablazatok, nem adattablak –
   ezeket nem kartyasitjuk, kulonben szurke dobozkent ulnek a termekoldalon. */
table.shop_table,
table.cart,
.woocommerce-checkout-review-order-table {
	background: var(--tv-surface);
	border: 1px solid var(--tv-border);
	border-radius: var(--tv-radius);
	color: var(--tv-paper);
	border-collapse: separate;
	overflow: hidden;
}

table th {
	background: rgba(27, 77, 62, 0.35);
	color: var(--tv-paper);
	font-family: var(--tv-sans);
	font-weight: 600;
}

table td,
table th {
	border-color: var(--tv-border);
}

.cart_totals,
.cart-collaterals,
#order_review,
.woocommerce-checkout #payment {
	background: var(--tv-surface);
	border: 1px solid var(--tv-border);
	border-radius: var(--tv-radius);
	color: var(--tv-paper);
}

/* --------------------------------------------------------------------------
   11. Ertesitesek
   -------------------------------------------------------------------------- */

.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.woocommerce-notices-wrapper .woocommerce-message {
	background: var(--tv-surface);
	border-top: 3px solid var(--tv-gold);
	border-radius: var(--tv-radius);
	color: var(--tv-paper);
}

.woocommerce-error {
	border-top-color: #e42e2d;
}

/* --------------------------------------------------------------------------
   12. Lapozo
   -------------------------------------------------------------------------- */

.woocommerce-pagination a,
.woocommerce-pagination span,
.page-numbers li a,
.page-numbers li span {
	background: var(--tv-surface);
	border: 1px solid var(--tv-border);
	border-radius: 8px;
	color: var(--tv-gray);
}

.page-numbers li .current,
.woocommerce-pagination .current {
	background: var(--tv-gold);
	color: var(--tv-midnight);
	border-color: var(--tv-gold);
	font-weight: 600;
}

/* --------------------------------------------------------------------------
   13. Reszletek
   -------------------------------------------------------------------------- */

hr,
.nasa-divider {
	border-color: var(--tv-border);
}

::selection {
	background: var(--tv-gold);
	color: var(--tv-midnight);
}

/* A tema betoltokepernyoje is sotet legyen, ne villanjon feheret. */
#nasa-before-load {
	background-color: var(--tv-midnight);
}

/* ==========================================================================
   14. Specificitas-felulirasok
   Az Elessi tema `body .valami` alaku, nagyon magas specificitasu
   szabalyokat hasznal (helyenkent 200+ szelektoros listakban), amiket a
   fenti, egyszerubb szabalyok nem tudnak legyozni. Ez a blokk kizarolag
   azokat a deklaraciokat ismetli meg, ahol tenyleges utkozes van.
   ========================================================================== */

/* Termeknev a listaban – a tema `.product-item .info .name` (#333) nyerne. */
body .product-item .info .name,
body .product-item .info a.name,
body .products .product-item .woocommerce-loop-product__title {
	color: var(--tv-paper);
	font-family: var(--tv-sans);
	font-weight: 600;
}

body .product-item .info .name:hover,
body .products .product-item .woocommerce-loop-product__title:hover {
	color: var(--tv-gold);
}

/* Gombok – a tema primer szine (#027735) helyett arany. */
body button,
body .button,
body #submit,
body a.button,
body input#submit,
body input[type="submit"],
body .checkout-button,
body input#place_order,
body form.cart .button,
body .add_to_cart:not(.repeated),
body .nasa-product-grid .add-to-cart-grid,
body .nasa-product-grid .add_to_cart_text,
body #nasa-footer .btn-submit-newsletters {
	background-color: var(--tv-gold);
	border-color: var(--tv-gold);
	color: var(--tv-midnight);
	font-family: var(--tv-sans);
	font-weight: 600;
}

body button:hover,
body .button:hover,
body #submit:hover,
body a.button:hover,
body input[type="submit"]:hover,
body .checkout-button:hover,
body input#place_order:hover,
body form.cart .button:hover,
body .nasa-product-grid .add-to-cart-grid:hover {
	background-color: var(--tv-gold-dark);
	border-color: var(--tv-gold-dark);
	color: var(--tv-midnight);
}

/* Tipografia – a tema Jost-ot hasznal a topbaron es a menuben. */
body,
body #top-bar,
body #top-bar *,
body .nasa-topbar-wrap *,
body #main-menu a,
body .nav-list a,
body .widget,
body .product-item,
body input,
body select,
body textarea {
	font-family: var(--tv-sans);
}

body h1, body h2, body h3, body h4, body h5, body h6,
body .page-title,
body .product_title,
body .woocommerce-products-header__title,
body .widget .widget-title,
body .section-title {
	font-family: var(--tv-serif);
}

body {
	font-size: 16px;
}

/* Lablec – a tema sajat id-je #nasa-footer. */
body #nasa-footer,
body #nasa-footer .footer-wrapper,
body .footer-wrapper {
	background-color: var(--tv-midnight);
	color: var(--tv-gray);
	border-top: 1px solid var(--tv-border);
}

body #nasa-footer a {
	color: var(--tv-gray);
}

body #nasa-footer a:hover {
	color: var(--tv-gold);
}

body #nasa-footer h1,
body #nasa-footer h2,
body #nasa-footer h3,
body #nasa-footer h4,
body #nasa-footer .widget-title {
	color: var(--tv-paper);
	font-family: var(--tv-serif);
}

/* Arak – a tema `.product-item .price` szabalya ne vigye vissza szurkere. */
body .product-item .price,
body .product-item .price .amount,
body .summary .price,
body .summary .price .amount {
	color: var(--tv-gold);
	font-weight: 700;
}

body .product-item del,
body .product-item del .amount,
body .summary del .amount {
	color: var(--tv-gray);
	font-weight: 400;
}

/* Termekoldal cime – a tema `#2d2a2a`-t ad ra. */
body .product_title,
body .product_title.entry-title,
body .summary .entry-title {
	color: var(--tv-paper);
	font-family: var(--tv-serif);
}

/* "Buy Now" masodlagos akcio: erdozold, hogy elvaljon az arany fogombtol. */
body .nasa-buy-now,
body button.nasa-buy-now {
	background-color: var(--tv-forest);
	border-color: var(--tv-forest);
	color: var(--tv-paper);
}

body .nasa-buy-now:hover,
body button.nasa-buy-now:hover {
	background-color: #163f33;
	border-color: #163f33;
	color: var(--tv-paper);
}

/* Variacios tablazat legyen atlatszo, ne kartya. */
body table.variations,
body table.variations td,
body table.variations th,
body .woocommerce-grouped-product-list {
	background: transparent;
	border: none;
}

body table.variations label,
body .variations .label {
	color: var(--tv-paper);
	font-family: var(--tv-sans);
	font-weight: 500;
}

/* Kosar/penztar lepessav – a tema vilagosszurke savot tesz ide. */
body .order-steps {
	background-color: var(--tv-surface);
	border-bottom: 1px solid var(--tv-border);
}

body .order-steps a,
body .order-steps span,
body .order-steps li {
	color: var(--tv-gray);
	font-family: var(--tv-sans);
}

body .order-steps .active,
body .order-steps .active a,
body .order-steps .current,
body .order-steps .current a {
	color: var(--tv-gold);
	font-weight: 600;
}

/* --------------------------------------------------------------------------
   Szlogen sav (a mu-plugin illeszti be a fejlec ala es a lablec fole)
   A statikus oldal .tagline stilusat koveti: 12px, halvany szurke.
   -------------------------------------------------------------------------- */

body .tv-tagline-bar {
	background-color: var(--tv-midnight);
	text-align: center;
	padding: 10px 20px;
}

body .tv-tagline {
	font-family: var(--tv-sans);
	font-size: 12px;
	font-weight: 400;
	color: var(--tv-gray);
	letter-spacing: 0.02em;
}

body .tv-tagline-header {
	border-bottom: 1px solid var(--tv-border);
}

body .tv-tagline-footer {
	border-top: 1px solid var(--tv-border);
	padding-top: 24px;
}

/* --------------------------------------------------------------------------
   Kartya belso margo es cimtordeles
   A tema `.product-info-wrap` szabalya `10px 0 20px` paddinget ad, igy a
   cim es az ar hozzaer a kartya bal keretehez. A `.nasa-show-one-line`
   pedig egy sorra vagja a cimet, amitol a hosszabb konyvcimek levagodnak.
   -------------------------------------------------------------------------- */

body .product-item .info,
body .product-item .product-info-wrap,
body .product-item .product-des,
body .products .product-item .info {
	padding-left: 16px;
	padding-right: 16px;
}

body .product-item .info {
	padding-top: 14px;
	padding-bottom: 18px;
}

/* Cim: egy sor helyett ketto, ellipszissel a masodik sor vegen. */
body .product-item .info .name,
body .product-item .info a.name.nasa-show-one-line,
body .woocommerce-loop-product__title.nasa-show-one-line,
body .products .product-item .woocommerce-loop-product__title {
	white-space: normal;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	text-overflow: ellipsis;
	/* Ket sornyi fix magassag, hogy az arak egy vonalban alljanak. */
	min-height: 2.8em;
	padding: 4px 0 6px;
}

body .product-item .price {
	display: block;
	margin-top: 2px;
}

/* Kartya-ikonok (kivansaglista, gyorsnezet) – feher gomb helyett sotet. */
body .nasa-btns-product-item .btn-link,
body .nasa-group-btns .btn-wishlist,
body .nasa-group-btns .quick-view,
body a.btn-nasa-wishlist,
body .product-img-wrap .wishlist-icon {
	background-color: rgba(15, 23, 42, 0.85);
	border: 1px solid var(--tv-gold-border);
	color: var(--tv-paper);
	border-radius: 50%;
}

body .nasa-btns-product-item .btn-link:hover,
body a.btn-nasa-wishlist:hover,
body .nasa-group-btns .quick-view:hover {
	background-color: var(--tv-gold);
	border-color: var(--tv-gold);
	color: var(--tv-midnight);
}

/* Mobil also navigacio es lenyilo panelek – alapbol feherek. */
body .nasa-bottom-bar,
body #nasa-menu-sidebar-content,
body .nasa-top-cat-filter-wrap-mobile,
body .nasa-push-cat-filter,
body .warpper-mobile-search,
body .woocommerce-notices-wrapper {
	background-color: var(--tv-midnight);
	color: var(--tv-paper);
}

body .nasa-bottom-bar a,
body .nasa-bottom-bar span,
body #nasa-menu-sidebar-content a,
body .nasa-top-cat-filter-wrap-mobile a {
	color: var(--tv-paper);
	font-family: var(--tv-sans);
}

body .nasa-bottom-bar a:hover,
body .nasa-bottom-bar a.active,
body #nasa-menu-sidebar-content a:hover {
	color: var(--tv-gold);
}

body .nasa-bottom-bar {
	border-top: 1px solid var(--tv-border);
}

/* Quickview / oldalso panelek */
body #nasa-quickview-sidebar-content,
body .nasa-quickview-sidebar,
body #nasa-cart-sidebar,
body .nasa-static-sidebar,
body #nasa-mobile-nav,
body .nasa-login-register-warper {
	background-color: var(--tv-midnight);
	color: var(--tv-paper);
}