/* ============================================================
   Zulema Perfumes - WooCommerce styles
   Product card, archive, single product, checkout, cart.
   ============================================================ */

/* =============================================
   PRODUCT CARD
   ============================================= */

.zulema-card-item {
	list-style: none;
}

/* Loop items must NEVER be a grid. Even if some rule upstream applies
   display:grid to .product, this explicit override wins on specificity. */
.zulema-shop__main ul.products > li.product {
	display: block;
}

/* Reset WooCommerce's legacy percentage widths on <li.product>.
   WC sets e.g. width: 16.95% for columns-5 with selectors that have
   HIGHER specificity than a generic .woocommerce ul.products li.product,
   so we use !important to win. We use grid-template-columns for sizing. */
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
	width: auto !important;
	margin-right: 0 !important;
	float: none !important;
}

/* Reset WooCommerce's default olive-green price color (#958e09) — same
   specificity problem as above (its selector has more classes+elements than
   ours), same fix. Covers both the product card grid and the single
   product page price. */
.woocommerce div.product p.price,
.woocommerce div.product span.price,
.woocommerce ul.products li.product .price {
	color: var(--color-fg) !important;
}

/* WC adaugă ::before pe ul.products pentru clearfix (sistemul vechi cu float).
   Nu avem nevoie — folosim CSS Grid. */
.woocommerce ul.products::before,
.woocommerce-page ul.products::before {
	display: none !important;
}

.zulema-card {
	display: flex;
	flex-direction: column;
	height: 100%;
	width: 100%;
	background: #fff;
}

.zulema-card__media {
	position: relative;
	overflow: hidden;
	width: 100%;
	aspect-ratio: 1 / 1;
	flex-shrink: 0;
	background: var(--color-bar);
}

.zulema-card__image-link {
	position: absolute;
	inset: 0;
	display: block;
}

.zulema-card__img {
	width: 100%;
	height: 100%!important;
	object-fit: cover;
	object-position: center;
	transition: transform 0.3s ease;
}

.zulema-card:hover .zulema-card__img {
	transform: scale(1.04);
}

.zulema-card__sale-flag {
	position: absolute;
	top: 10px;
	left: 10px;
	background: var(--color-accent);
	color: #fff;
	font-size: 0.72rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	padding: 3px 8px;
	border-radius: 3px;
	z-index: 1;
}

/* Hover overlay: quick-view + wishlist */
.zulema-card__hover {
	position: absolute;
	top: 10px;
	right: 10px;
	display: flex;
	flex-direction: column;
	gap: 6px;
	opacity: 0;
	transform: translateX(8px);
	transition: opacity 0.2s ease, transform 0.2s ease;
	z-index: 2;
}

.zulema-card:hover .zulema-card__hover {
	opacity: 1;
	transform: translateX(0);
}

/* Touch devices don't have a real :hover — the first tap on the card just
   triggers the hover state (to reveal these), needing a second tap to
   actually follow the link. Drop the quick-view/wishlist buttons and the
   image zoom entirely on touch, so one tap on the card always goes
   straight to the product. */
@media (hover: none) {
	.zulema-card__hover {
		display: none;
	}

	.zulema-card:hover .zulema-card__img {
		transform: none;
	}
}

.zulema-card__action {
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: #fff;
	border: 1px solid var(--color-line);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--color-fg);
	box-shadow: var(--shadow-card);
	transition: background 0.15s, color 0.15s;
	text-decoration: none;
}

.zulema-card__action:hover {
	background: var(--color-accent);
	color: #fff;
	text-decoration: none;
}

.zulema-card__action--wishlist.is-active {
	background: var(--color-danger);
	color: #fff;
	border-color: var(--color-danger);
}

/* Card body */
.zulema-card__body {
	padding: 12px 0 0;
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.zulema-card__title {
	font-size: 0.88rem;
	font-weight: 600;
	line-height: 1.3;
	margin: 0;
}

.zulema-card__title a {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	color: var(--color-fg);
}

.zulema-card__title a:hover {
	text-decoration: none;
	color: var(--color-muted);
}

.zulema-card__brand,
.zulema-card__cat {
	font-size: 0.78rem;
	color: var(--color-muted-2, #6b6b6b);
	text-transform: uppercase;
	letter-spacing: 0.04em;
	min-height: 1.2em;
	line-height: 1.2;
}

.zulema-card__price {
	margin-top: 4px;
	font-size: 0.9rem;
	min-height: 1.5em;
	line-height: 1.5;
}

/* WC price HTML */
.zulema-card__price .price,
.zulema-card__price .woocommerce-Price-amount {
	font-weight: 700;
}

.zulema-card__price del {
	color: var(--color-sale);
	text-decoration: line-through;
	font-weight: 400;
	font-size: 0.82rem;
	margin-right: 4px;
}

.zulema-card__price ins {
	text-decoration: none;
	font-weight: 700;
}

.zulema-card__add {
	margin-top: auto;
	padding: 12px 18px;
	font-size: 0.82rem;
	border-radius: var(--radius-pill);
	width: 100%;
	min-height: 42px;
}

/* =============================================
   ARCHIVE
   ============================================= */

.zulema-archive-header {
	margin-bottom: var(--sp-3);
}

.zulema-archive-title {
	font-size: 1.6rem;
	font-weight: 700;
	margin-bottom: var(--sp-2);
}

.zulema-archive-title span {
	display: inline-block;
	padding-bottom: 8px;
	border-bottom: 2px solid var(--color-accent);
}

.zulema-archive {
	margin-top: var(--sp-3);
}

.zulema-archive__count {
	font-size: var(--fs-small);
	color: var(--color-muted);
	margin-bottom: var(--sp-3);
	min-height: 1.4em;
}

/* Category description — moved to the bottom of the archive, clamped to
   3 lines with a "Citește mai mult" toggle for the rest. */
.zulema-category-description {
	margin-top: var(--sp-6);
	padding-top: var(--sp-5);
	border-top: 1px solid var(--color-line);
}

.zulema-category-description__text {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	overflow: hidden;
	color: var(--color-muted);
	font-size: var(--fs-small);
	line-height: 1.6;
}

.zulema-category-description__text.is-expanded {
	display: block;
	-webkit-line-clamp: unset;
	overflow: visible;
}

.zulema-category-description__toggle {
	display: inline-block;
	margin-top: var(--sp-2);
	background: none;
	border: none;
	padding: 0;
	color: var(--color-fg);
	font-weight: 700;
	font-size: 0.85rem;
	text-decoration: underline;
	cursor: pointer;
}

.zulema-no-products {
	color: var(--color-muted);
	padding: var(--sp-5) 0;
}

/* Filter bar */
.zulema-filters {
	margin-bottom: var(--sp-4);
}

.zulema-price-range {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 10px;
}

.zulema-price-range input {
	width: 90px;
	padding: 7px 10px;
	border: 1px solid var(--color-line);
	border-radius: 6px;
	font-size: var(--fs-small);
}

.zulema-filter__apply {
	padding: 8px 18px;
	font-size: 0.82rem;
	border-radius: var(--radius-pill);
	width: 100%;
}

/* Pagination */
.zulema-pagination {
	padding: var(--sp-5) 0;
}

.zulema-pagination__list {
	display: flex;
	gap: 4px;
	list-style: none;
	flex-wrap: wrap;
}

.zulema-pagination__list .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 36px;
	height: 36px;
	padding: 0 8px;
	border: 1px solid var(--color-line);
	font-size: var(--fs-small);
	text-decoration: none;
	color: var(--color-fg);
	transition: background 0.15s;
}

.zulema-pagination__list .page-numbers.current {
	background: var(--color-accent);
	color: #fff;
	border-color: var(--color-accent);
}

.zulema-pagination__list .page-numbers:hover:not(.current) {
	background: var(--color-bar);
	text-decoration: none;
}

.zulema-pagination__list .page-numbers.dots {
	border: none;
	background: none;
}

/* Quick view modal */
.zulema-quickview {
	position: fixed;
	inset: 0;
	z-index: 1900;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--sp-4);
}

.zulema-quickview__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.6);
}

.zulema-quickview__panel {
	position: relative;
	background: #fff;
	border-radius: var(--radius-card);
	max-width: 760px;
	width: 100%;
	max-height: 90vh;
	overflow-y: auto;
	padding: var(--sp-5);
}

.zulema-quickview__close {
	position: absolute;
	top: var(--sp-3);
	right: var(--sp-3);
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border: none;
	border-radius: 50%;
	background: var(--color-bar);
	color: var(--color-fg);
	cursor: pointer;
}

.zulema-quickview__loading {
	text-align: center;
	padding: var(--sp-6);
	color: var(--color-muted);
}

.zulema-quickview__content {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--sp-5);
}

.zulema-quickview__media img {
	width: 100%;
	border-radius: var(--radius-card);
	aspect-ratio: 1 / 1;
	object-fit: cover;
	background: var(--color-bar);
}

.zulema-quickview__title {
	font-size: 1.3rem;
	margin: var(--sp-1) 0;
}

.zulema-quickview__price {
	font-size: 1.2rem;
	font-weight: 700;
	color: var(--color-fg);
	margin-bottom: var(--sp-3);
}

.zulema-quickview__excerpt {
	color: var(--color-muted);
	font-size: 0.92rem;
	line-height: 1.6;
	margin-bottom: var(--sp-4);
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 4;
	overflow: hidden;
}

.zulema-quickview__excerpt p:last-child {
	margin-bottom: 0;
}

.zulema-quickview__cart-row {
	display: flex;
	align-items: center;
	gap: var(--sp-3);
	margin-bottom: var(--sp-4);
}

.zulema-quickview__add-cart {
	flex: 1;
}

.zulema-quickview__stock {
	margin-bottom: var(--sp-4);
}

.zulema-quickview__link {
	display: inline-block;
	font-weight: 600;
	font-size: 0.9rem;
}

@media (max-width: 640px) {
	.zulema-quickview__content {
		grid-template-columns: 1fr;
	}

	.zulema-quickview__panel {
		padding: var(--sp-4);
		max-height: 92vh;
	}
}

/* Wishlist page */
.zulema-wishlist {
	margin-top: var(--sp-5);
}

.zulema-wishlist__empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--sp-3);
	min-height: 60vh;
	color: var(--color-muted);
	text-align: center;
}

.zulema-wishlist__empty .zulema-icon {
	color: var(--color-line);
}

.zulema-wishlist__empty p {
	font-size: 1.1rem;
	margin: 0;
}

/* Product section (related / recently viewed) */
.zulema-product-section {
	padding: var(--sp-6) 0;
	border-top: 1px solid var(--color-line);
}

.zulema-carousel__cell {
	width: 220px;
}

/* =============================================
   SINGLE PRODUCT
   ============================================= */

/* WC single product: gallery + summary are wrapped (by inc/woocommerce.php,
   on woocommerce_before/after_single_product_summary) in .zulema-product-top
   so they form their own 2-column row, separate from the tabs/help/accordions/
   related-products rows that follow. .zulema-gallery's position:sticky is
   bound by its containing block — without this separate wrapper, gallery and
   the rows below it were all flat grid children of the same .product
   container, so the sticky photo's containing block ended up being that
   whole container and it kept following scroll straight through the tabs and
   related-products sections instead of releasing after the buy box. */
.zulema-shop__main--single .zulema-product-top {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--sp-6);
	align-items: start;
}

/* Gallery */
.zulema-gallery {
	position: sticky;
	top: calc(var(--header-height) + var(--sp-3));
}

/* position:sticky always creates its own stacking context (even with the
   default z-index:auto), so .zulema-lightbox's z-index:2000 is only compared
   against siblings *inside* that context — the .zulema-gallery box itself
   then gets compared against the header (z-index:200) at the outer level and
   loses, trapping the whole lightbox behind the header. Only lift it above
   the header while the lightbox is actually open. */
.zulema-gallery--lightbox-open {
	z-index: 2001;
}

.zulema-gallery__main {
	position: relative;
	background: #fff;
	border-radius: var(--radius-card);
	overflow: hidden;
	aspect-ratio: 1 / 1;
	cursor: zoom-in;
}

.zulema-gallery__slide {
	position: absolute;
	inset: 0;
}

.zulema-gallery__img {
	/* The img's own width/height HTML attributes (from wp_get_attachment_image) give it
	   a UA-default aspect-ratio (e.g. 381/492 for a portrait photo). A percentage height
	   doesn't reliably override that here because .zulema-gallery__slide's own height is
	   auto/stretched rather than an explicit value, so portrait photos rendered far taller
	   than this square frame and got cropped by overflow:hidden. Forcing aspect-ratio:1/1
	   (which wins over the UA default since it's authored) makes height resolve from the
	   definite width instead, sidestepping that percentage-height resolution entirely. */
	position: absolute;
	inset: 0;
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: contain;
}

.zulema-gallery__sale {
	position: absolute;
	top: 14px;
	left: 14px;
	background: var(--color-accent);
	color: #fff;
	font-size: 0.78rem;
	font-weight: 700;
	text-transform: uppercase;
	padding: 4px 10px;
	border-radius: 3px;
	z-index: 2;
}

.zulema-gallery__thumbs {
	display: flex;
	gap: 8px;
	margin-top: 10px;
	flex-wrap: wrap;
}

.zulema-gallery__thumb {
	width: 64px;
	height: 64px;
	border: 2px solid transparent;
	border-radius: 4px;
	overflow: hidden;
	padding: 0;
	background: var(--color-bar);
	flex-shrink: 0;
	transition: border-color 0.15s;
}

.zulema-gallery__thumb.is-active {
	border-color: var(--color-accent);
}

.zulema-gallery__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Gallery lightbox (full-page image view) */
.zulema-lightbox {
	position: fixed;
	inset: 0;
	z-index: 2000;
	display: flex;
	align-items: center;
	justify-content: center;
}

.zulema-lightbox__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.92);
}

.zulema-lightbox__stage {
	position: relative;
	width: min(92vw, 1100px);
	height: min(74vh, 1000px);
}

.zulema-lightbox__slide {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}

.zulema-lightbox__img {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
}

.zulema-lightbox__close {
	position: absolute;
	top: var(--sp-4);
	right: var(--sp-4);
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border: none;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.1);
	color: #fff;
}

.zulema-lightbox__close:hover {
	background: rgba(255, 255, 255, 0.2);
}

.zulema-lightbox__nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border: none;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.1);
	color: #fff;
}

.zulema-lightbox__nav:hover {
	background: rgba(255, 255, 255, 0.2);
}

.zulema-lightbox__nav--prev {
	left: var(--sp-4);
}

.zulema-lightbox__nav--next {
	right: var(--sp-4);
}

.zulema-lightbox__thumbs {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 1;
	display: flex;
	justify-content: center;
	gap: 8px;
	padding: var(--sp-6) var(--sp-4) var(--sp-4);
	overflow-x: auto;
	background: linear-gradient(to top, rgba(0, 0, 0, 0.7), transparent);
}

.zulema-lightbox__thumb {
	width: 56px;
	height: 56px;
	flex-shrink: 0;
	border: 2px solid transparent;
	border-radius: 4px;
	overflow: hidden;
	padding: 0;
	background: rgba(255, 255, 255, 0.1);
	opacity: 0.6;
	transition: opacity 0.15s, border-color 0.15s;
}

.zulema-lightbox__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.zulema-lightbox__thumb:hover {
	opacity: 1;
}

.zulema-lightbox__thumb.is-active {
	opacity: 1;
	border-color: #fff;
}

/* Single product summary */
.zulema-shop__main .product .summary {
	padding-top: var(--sp-2);
}

/* WooCommerce's own woocommerce-layout.css ships `div.product div.summary {
   float:right; width:48%}` for themes that don't build a custom layout.
   Its selector (.woocommerce-page div.product div.summary) is MORE specific
   than ours above, so it wins on specificity and shrinks our grid column to
   48% of itself. Same fix as the li.product reset above: mirror its selector
   chain with !important. */
.woocommerce div.product div.summary,
.woocommerce-page div.product div.summary {
	width: auto !important;
	float: none !important;
}

.zulema-shop__main .product .product_title {
	font-size: 1.6rem;
	margin-bottom: var(--sp-1);
}

.zulema-single__brand {
	font-size: var(--fs-small);
	color: var(--color-muted);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	margin-bottom: var(--sp-2);
}

/* Price */
.zulema-shop__main .product .price {
	font-size: 1.4rem;
	font-weight: 700;
	margin: var(--sp-2) 0;
}

.zulema-shop__main .product .price del {
	font-size: 1rem;
	color: var(--color-sale);
	font-weight: 400;
	text-decoration: line-through;
	margin-right: 6px;
}

.zulema-shop__main .product .price ins {
	text-decoration: none;
}

/* Cart row */
.zulema-single__cart-row {
	margin-bottom: var(--sp-3);
}

.zulema-single__cart-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	align-items: center;
}

.zulema-single__add-cart {
	padding: 12px 24px;
	font-size: 0.9rem;
}

.zulema-single__fav {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: none;
	border: none;
	color: var(--color-muted);
	font-size: 0.88rem;
	padding: 0;
}

.zulema-single__fav:hover,
.zulema-single__fav.is-active {
	color: var(--color-danger);
}

/* Trust badges */
.zulema-trust {
	display: flex;
	flex-direction: column;
	gap: var(--sp-2);
	margin: var(--sp-3) 0;
}

.zulema-trust__badge {
	display: flex;
	align-items: flex-start;
	gap: var(--sp-3);
	padding: var(--sp-3);
	border: 1px solid var(--color-line);
	border-radius: var(--radius-card);
	color: var(--color-fg);
}

.zulema-trust__badge svg {
	flex-shrink: 0;
	margin-top: 1px;
}

.zulema-trust__badge > span {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.zulema-trust__badge strong {
	font-size: 0.88rem;
}

.zulema-trust__badge small {
	color: var(--color-muted);
	font-size: 0.8rem;
	line-height: 1.4;
}

.zulema-trust__badge--warning svg {
	color: var(--color-danger);
}

.zulema-trust__badge--delivery svg {
	color: var(--color-fg);
}

/* Help block */
.zulema-single__help {
	background: var(--color-bar);
	border-radius: var(--radius-card);
	padding: var(--sp-3);
	margin: var(--sp-3) 0;
}

.zulema-single__help-title {
	font-size: 0.9rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	margin-bottom: var(--sp-2);
}

.zulema-single__help-link {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 0.88rem;
	color: var(--color-fg);
	margin-bottom: 6px;
}

.zulema-single__help-link:hover {
	color: var(--color-muted);
	text-decoration: none;
}

/* Accordions */
.zulema-single__accordions {
	margin: var(--sp-3) 0;
}

.zulema-single__accordions .zulema-accordion {
	border-top: 1px solid var(--color-line);
}

.zulema-single__accordions .zulema-accordion:last-child {
	border-bottom: 1px solid var(--color-line);
}

/* Meta (SKU etc) */
.zulema-shop__main .product .product_meta {
	font-size: var(--fs-small);
	color: var(--color-muted);
	margin: var(--sp-2) 0;
}

/* Short description */
.zulema-shop__main .product .woocommerce-product-details__short-description {
	font-size: 0.9rem;
	color: var(--color-muted);
	margin: var(--sp-2) 0;
}

/* Tabs panel */
.zulema-tabs {
	border-top: 1px solid var(--color-line);
	margin-top: var(--sp-6);
}

.zulema-tabs__panel {
	padding: var(--sp-4) 0;
	border-top: 1px solid var(--color-line);
	/* Panels are stacked (not switched), so the nav buttons scroll to them
	   instead — offset past the sticky header so the target isn't tucked
	   underneath it. */
	scroll-margin-top: calc(var(--header-height) + var(--sp-3));
}

.zulema-tabs__panel:first-child {
	border-top: none;
}

/* Details table */
.zulema-tabs__panel table {
	width: 100%;
	border-collapse: collapse;
}

.zulema-tabs__panel tr:nth-child(even) td,
.zulema-tabs__panel tr:nth-child(even) th {
	background: var(--color-bar);
}

.zulema-tabs__panel td,
.zulema-tabs__panel th {
	padding: 10px 14px;
	font-size: var(--fs-small);
	border: none;
	text-align: left;
}

.zulema-tabs__panel th {
	color: var(--color-muted);
	font-weight: 400;
	width: 35%;
}

/* Reviews */
.woocommerce-Reviews-title {
	font-size: 1.2rem;
	margin-bottom: var(--sp-4);
}

.woocommerce-noreviews {
	color: var(--color-muted);
	text-align: center;
	padding: var(--sp-5);
	margin-bottom: var(--sp-5);
	border: 1px dashed var(--color-line);
	border-radius: var(--radius-card);
}

#reviews .commentlist {
	list-style: none;
	margin: 0 0 var(--sp-5);
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--sp-3);
}

#reviews .commentlist .comment {
	background: var(--color-bar);
	border-radius: var(--radius-card);
	padding: var(--sp-4);
}

#reviews .comment_container {
	display: flex;
	gap: var(--sp-3);
	align-items: flex-start;
}

#reviews .comment_container .avatar {
	width: 48px;
	height: 48px;
	border-radius: 50%;
	flex-shrink: 0;
	box-shadow: 0 0 0 2px #fff;
}

#reviews .comment-text {
	flex: 1;
	min-width: 0;
}

#reviews .star-rating {
	margin-bottom: var(--sp-2);
}

#reviews .meta {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 6px;
	font-size: var(--fs-small);
	margin: 0 0 var(--sp-2);
}

#reviews .woocommerce-review__author {
	color: var(--color-fg);
	font-weight: 700;
}

#reviews .woocommerce-review__verified {
	color: var(--color-success);
	font-size: 0.78rem;
}

#reviews .woocommerce-review__dash {
	display: none;
}

#reviews .woocommerce-review__published-date {
	color: var(--color-muted);
	margin-left: auto;
}

#reviews .description p {
	margin: 0;
	color: var(--color-fg);
	line-height: 1.6;
}

#reviews .woocommerce-pagination {
	margin-top: var(--sp-3);
}

/* Review form */
.zulema-reviews__toggle {
	margin-top: var(--sp-4);
}

#review_form_wrapper {
	margin-top: var(--sp-6);
}

#review_form #reply-title {
	font-size: 1.1rem;
	margin-bottom: var(--sp-4);
	display: block;
}

#commentform {
	background: #fff;
	border: 1px solid var(--color-line);
	border-radius: var(--radius-card);
	padding: var(--sp-5);
}

#commentform .comment-form-rating {
	display: flex;
	align-items: center;
	gap: var(--sp-2);
	margin-bottom: var(--sp-4);
}

#commentform .comment-form-rating label {
	margin-bottom: 0;
}

#commentform .comment-form-rating select {
	width: auto;
}

#commentform label {
	display: block;
	font-size: var(--fs-small);
	font-weight: 600;
	margin-bottom: 5px;
}

#commentform .comment-form-author,
#commentform .comment-form-email {
	margin-bottom: var(--sp-3);
}

#commentform .comment-form-comment {
	margin-bottom: var(--sp-4);
}

@media (min-width: 641px) {
	#commentform .comment-form-author,
	#commentform .comment-form-email {
		display: inline-block;
		width: calc(50% - var(--sp-2) / 2);
	}

	#commentform .comment-form-author {
		margin-right: var(--sp-2);
	}
}

#commentform input[type="text"],
#commentform input[type="email"],
#commentform select,
#commentform textarea {
	width: 100%;
	padding: 10px 14px;
	border: 1px solid var(--color-line);
	border-radius: 6px;
	font-size: var(--fs-base);
	font-family: inherit;
	background: #fff;
	transition: border-color 0.15s;
}

#commentform input[type="text"]:focus,
#commentform input[type="email"]:focus,
#commentform select:focus,
#commentform textarea:focus {
	outline: none;
	border-color: var(--color-fg);
}

#commentform textarea {
	resize: vertical;
}

#commentform .form-submit {
	margin: 0;
}

#commentform .form-submit input[type="submit"] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 12px 28px;
	border-radius: var(--radius-pill);
	background: var(--color-accent);
	color: var(--color-accent-contrast);
	border: 1px solid var(--color-accent);
	font-weight: 600;
	cursor: pointer;
}

#commentform .form-submit input[type="submit"]:hover {
	background: var(--color-bg);
	color: var(--color-accent);
}

/* =============================================
   CHECKOUT + CART
   ============================================= */

/* Steps bar */
.zulema-steps {
	display: flex;
	align-items: center;
	gap: 0;
	margin-bottom: var(--sp-4);
}

.zulema-step {
	display: flex;
	align-items: center;
	font-size: var(--fs-small);
	color: var(--color-muted);
	padding: 8px 0;
	gap: 6px;
}

.zulema-step::after {
	content: '›';
	margin: 0 10px;
	color: var(--color-muted);
}

.zulema-step:last-child::after {
	display: none;
}

.zulema-step--active {
	color: var(--color-fg);
	font-weight: 700;
}

.zulema-step--done {
	color: var(--color-muted);
}

.zulema-checkout-head {
	margin-bottom: var(--sp-3);
}

/* Checkout 2-column layout */
.zulema-checkout {
	display: grid;
	grid-template-columns: 1fr 420px;
	gap: var(--sp-5);
	align-items: start;
}

.zulema-checkout__col--summary {
	background: var(--color-bar);
	border-radius: var(--radius-card);
	padding: var(--sp-4);
	position: sticky;
	top: calc(var(--header-height) + var(--sp-3));
}

.zulema-order-summary__title {
	font-size: 1.05rem;
	margin-bottom: var(--sp-3);
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

/* WC checkout field styling */
.woocommerce-billing-fields h3,
.woocommerce-shipping-fields h3,
.woocommerce-additional-fields h3 {
	font-size: 1.1rem;
	margin-bottom: var(--sp-3);
}

.woocommerce-billing-fields .form-row,
.woocommerce-shipping-fields .form-row,
.woocommerce-additional-fields .form-row {
	margin-bottom: var(--sp-3);
}

.woocommerce-billing-fields .form-row label,
.woocommerce-shipping-fields .form-row label,
.woocommerce-additional-fields .form-row label {
	display: block;
	font-size: var(--fs-small);
	font-weight: 600;
	margin-bottom: 5px;
}

.woocommerce-billing-fields .form-row input,
.woocommerce-billing-fields .form-row select,
.woocommerce-billing-fields .form-row textarea,
.woocommerce-shipping-fields .form-row input,
.woocommerce-shipping-fields .form-row select,
.woocommerce-shipping-fields .form-row textarea,
.woocommerce-additional-fields .form-row input,
.woocommerce-additional-fields .form-row select,
.woocommerce-additional-fields .form-row textarea {
	width: 100%;
	padding: 10px 14px;
	border: 1px solid var(--color-line);
	border-radius: 6px;
	font-size: var(--fs-base);
	transition: border-color 0.15s;
}

.woocommerce-billing-fields .form-row input:focus,
.woocommerce-billing-fields .form-row select:focus,
.woocommerce-billing-fields .form-row textarea:focus,
.woocommerce-shipping-fields .form-row input:focus,
.woocommerce-shipping-fields .form-row select:focus,
.woocommerce-shipping-fields .form-row textarea:focus,
.woocommerce-additional-fields .form-row input:focus,
.woocommerce-additional-fields .form-row select:focus,
.woocommerce-additional-fields .form-row textarea:focus {
	outline: none;
	border-color: var(--color-fg);
}

/* WC place order button */
.woocommerce-checkout #place_order {
	width: 100%;
	padding: 14px 28px;
	background: var(--color-accent);
	color: #fff;
	border: 1px solid var(--color-accent);
	border-radius: var(--radius-pill);
	font-size: 0.95rem;
	font-weight: 700;
	cursor: pointer;
	transition: background 0.18s, color 0.18s;
}

.woocommerce-checkout #place_order:hover {
	background: #fff;
	color: var(--color-accent);
}

/* Cart table */
.shop_table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--fs-small);
}

.shop_table th,
.shop_table td {
	padding: 14px 10px;
	border-bottom: 1px solid var(--color-line);
	vertical-align: middle;
}

.shop_table thead th {
	text-align: left;
	font-size: 0.78rem;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--color-muted);
}

.shop_table .product-thumbnail {
	width: 80px;
}

.shop_table .product-thumbnail img {
	width: 64px;
	height: 64px;
	object-fit: cover;
	border-radius: 4px;
}

.shop_table .product-remove a {
	font-size: 1.3rem;
	color: var(--color-muted);
	text-decoration: none;
}

.shop_table .product-remove a:hover {
	color: var(--color-danger);
}

.shop_table .actions {
	padding: var(--sp-3) 10px;
}

.shop_table .actions .button,
.woocommerce .button {
	display: inline-flex;
	padding: 10px 22px;
	background: var(--color-accent);
	color: #fff;
	border: 1px solid var(--color-accent);
	border-radius: var(--radius-pill);
	font-size: var(--fs-small);
	font-weight: 600;
	cursor: pointer;
	transition: background 0.18s, color 0.18s;
}

.shop_table .actions .button:hover,
.woocommerce .button:hover {
	background: #fff;
	color: var(--color-accent);
}

/* Cart totals */
.cart_totals h2,
.woocommerce-cart-form h3 {
	font-size: 1.1rem;
	margin-bottom: var(--sp-3);
}

/* WC notices */
.woocommerce-error,
.woocommerce-message,
.woocommerce-info {
	padding: 12px 16px;
	border-radius: 6px;
	margin-bottom: var(--sp-3);
	font-size: var(--fs-small);
	list-style: none;
}

.woocommerce-error {
	background: #fee2e2;
	border-left: 3px solid var(--color-danger);
	color: #991b1b;
}

.woocommerce-message {
	background: #dcfce7;
	border-left: 3px solid var(--color-success);
	color: #166534;
}

.woocommerce-info {
	background: #eff6ff;
	border-left: 3px solid #3b82f6;
	color: #1e40af;
}

.woocommerce-error li,
.woocommerce-message li,
.woocommerce-info li {
	list-style: none;
}

/* Order review items */
.woocommerce-checkout-review-order-page th,
.woocommerce-checkout-review-order-page td {
	padding: 8px 0;
	border-bottom: 1px solid var(--color-line);
	font-size: var(--fs-small);
}

/* Star ratings */
.star-rating {
	color: #f59e0b;
	font-size: 0.9rem;
}

/* =============================================
   SINGLE PRODUCT RESPONSIVE
   ============================================= */

@media (max-width: 1023px) {
	.zulema-shop__main--single .zulema-product-top {
		grid-template-columns: 1fr;
	}

	/* Without this, a non-wrapping flex/carousel child could force its
	   min-content size onto the shared 1fr column and blow out its sibling
	   (gallery included) to that content's full unscrolled width, causing
	   horizontal overflow. */
	.zulema-shop__main--single .zulema-product-top > * {
		min-width: 0;
	}

	.zulema-gallery {
		position: static;
	}

	.zulema-checkout {
		grid-template-columns: 1fr;
	}

	.zulema-checkout__col--summary {
		position: static;
		order: -1;
	}
}

@media (max-width: 640px) {
	.zulema-single__cart-actions {
		flex-direction: row;
		align-items: stretch;
	}

	.zulema-single__add-cart {
		flex: 1;
	}

	/* Icon-only, fixed small width next to "Adaugă în coș" instead of the
	   wide text link used on desktop. */
	.zulema-single__fav {
		flex-shrink: 0;
		width: 44px;
		height: 44px;
		padding: 0;
		justify-content: center;
		border: 1px solid var(--color-line);
		border-radius: var(--radius-pill);
	}

	.zulema-single__fav-label {
		display: none;
	}

	.shop_table thead {
		display: none;
	}

	.shop_table td {
		display: block;
		padding: 8px;
	}
}

/* =============================================
   CHECKOUT (WooCommerce block-based Checkout)
   The live checkout page renders the WC "Checkout" block (Store API +
   React), not the classic [woocommerce_checkout] shortcode — the markup
   below (wc-block-components-*) comes from that block, not from
   woocommerce/checkout/form-checkout.php. Styled here to read as a
   Shopify-style layout: fields on the left, a sticky order summary card
   on the right.
   ============================================= */

/* page.php caps .zulema-entry-content at 72ch for readable blog/page
   text; on checkout that starves the block of width and forces WC's own
   responsive layout to collapse to a single column ("is-medium"). */
body.woocommerce-checkout .zulema-entry-content {
	max-width: none;
}

/* No page title and no top/bottom breathing room on checkout — the
   block sits flush under the header, and the footer sits flush after
   it (both of these are otherwise sitewide spacing rules, so scope the
   overrides to the checkout body class rather than editing them
   globally). */
body.woocommerce-checkout .zulema-page-header {
	display: none;
}

body.woocommerce-checkout .zulema-footer {
	margin-top: 0;
}

/* Full-bleed: break the checkout block out of every ancestor's centered
   max-width (.zulema-container, .zulema-entry-content, etc.) so the
   white/grey column split below reaches the actual browser viewport
   edges, not just a centered 1140px box with white margins either side. */
.wp-block-woocommerce-checkout {
	position: relative;
	left: 50%;
	width: 100vw;
	margin-left: -50vw;
	padding-top: 0;
	padding-bottom: 0;
}

/* Center the actual form fields within the (now viewport-wide) white
   left column instead of letting inputs stretch edge-to-edge. */
.wc-block-checkout__form {
	max-width: 640px;
	margin-inline: auto;
	padding-inline: var(--sp-5);
}

/* Same centering for the order summary's content within the grey
   right column. */
.wc-block-checkout__sidebar .wp-block-woocommerce-checkout-order-summary-block {
	max-width: 420px;
	margin-inline: auto;
}

/* Note: no `gap` here on purpose — WC's core flex-basis split between
   .wc-block-checkout__main and .wc-block-checkout__sidebar already adds
   up to exactly 100% of the container with zero native gap; adding a
   flex `gap` would overflow the row and force it to wrap back to a
   single column. */

/* Full-height grey backdrop for the right side. We deliberately do NOT
   resize .wc-block-checkout__sidebar itself to match the main column's
   height (e.g. via align-self: stretch) — WC's checkout block measures
   the sidebar's own rendered height with a ResizeObserver and drops the
   "is-sticky" class whenever that height exceeds the viewport, which
   silently kills the sticky behavior. Instead we paint a ::before behind
   it, sized to the parent row's natural height (driven by the taller
   main column) and to the sidebar's measured column width (65%/35% is
   core's own split — see the measured rects in PR/dev notes), leaving
   the real sticky sidebar element completely untouched. */
.wc-block-components-sidebar-layout.wc-block-checkout {
	position: relative;
}

/* Scoped to .is-large only — below that breakpoint WC stacks main and
   sidebar into a single column, where a left:65% backdrop would cut a
   meaningless vertical stripe through the stacked content. */
.wc-block-components-sidebar-layout.wc-block-checkout.is-large::before {
	content: "";
	position: absolute;
	inset: 0;
	left: 65%;
	background: var(--color-bar);
	z-index: 0;
}

.wc-block-checkout__sidebar {
	position: relative;
	z-index: 1;
	padding: var(--sp-5) var(--sp-4);
}

/* On mobile/stacked layouts WC shows this sidebar as a collapsed
   "Rezumat comandă" toggle near the TOP of the page, and separately
   renders the full order summary again near the bottom (right above
   "Plasează comanda", inside .wc-block-checkout__actions) for the
   stacked flow. We only want the bottom one, so hide the sidebar
   entirely once the layout isn't .is-large (it never carries unique
   content there — the real summary lives in the bottom one). */
.wc-block-components-sidebar-layout.wc-block-checkout:not(.is-large) .wc-block-checkout__sidebar {
	display: none;
}

/* The checkout page has no sticky navbar (see header.php /
   topbar-checkout.php — the menu is removed there), so the sticky order
   summary only needs a small breathing offset, not navbar clearance. */
.wc-block-checkout__sidebar.is-sticky {
	top: var(--sp-3);
}

/* Step sections (contact / shipping address / shipping method / payment) */
.wc-block-components-checkout-step {
	padding-bottom: var(--sp-4);
	margin-bottom: var(--sp-4);
	border-bottom: 1px solid var(--color-line);
}

.wc-block-components-checkout-step__title {
	font-size: 1.1rem;
	font-weight: 700;
	margin-bottom: var(--sp-1);
}

/* Inputs */
.wc-block-components-text-input input,
.wc-block-components-text-input textarea,
.wc-block-components-address-form select,
.wc-blocks-components-select__select {
	border-radius: 8px;
}

.wc-block-components-text-input input:focus,
.wc-block-components-address-form select:focus {
	border-color: var(--color-fg);
}

/* Shipping / payment method rows.
   No `padding` override here on purpose — the option's radio <input> is
   absolutely positioned by core CSS at an offset that's coordinated with
   this label's own default padding; overriding the padding desyncs that
   offset and makes the input overlap the label text. */
.wc-block-components-radio-control__option {
	border: 1px solid var(--color-line);
	border-radius: 8px;
	margin-bottom: 10px;
}

.wc-block-components-radio-control__option-checked {
	border-color: var(--color-fg);
}

/* Order summary line items */
.wc-block-components-order-summary-item__image img {
	border-radius: 6px;
}

/* Place order button: match the site's pill black button style */
.wc-block-components-checkout-place-order-button.wc-block-components-button {
	background: var(--color-accent);
	border: 1px solid var(--color-accent);
	border-radius: var(--radius-pill);
	font-weight: 700;
	padding: 14px 28px;
}

.wc-block-components-checkout-place-order-button.wc-block-components-button:hover {
	background: #fff;
	color: var(--color-accent);
}

/* Hide the "Adaugă cupoane" panel in the order summary when the
   "Coupon code on MiniCart" toggle (Setări temă options page) is off —
   the same setting gates the mini cart's promo code form. */
body.zulema-hide-checkout-coupon .wp-block-woocommerce-checkout-order-summary-coupon-form-block {
	display: none;
}

/* Address form is a flex row (flex-wrap), so `order` reflows fields without
   touching field registration. Push Companie + Cod fiscal to the very end,
   Companie first. */
.wc-block-components-address-form__company {
	order: 110;
}

.wc-block-components-address-form__zulema-cod-fiscal {
	order: 120;
}

/* ============================================
   Cart page (wp:woocommerce/cart block)
   Same root cause as checkout: page.php caps .zulema-entry-content
   at 72ch, starving the block of width and forcing WC's own
   responsive layout below its container-query breakpoint, so it
   falls back to a single stacked column. Lift the cap so the
   block's native 65%/35% main/sidebar split (products left,
   order summary + "Finalizează comanda" button right) can render. */
body.woocommerce-cart .zulema-entry-content {
	max-width: none;
}