/* Bridges between core-block output and the ported design system.
   The bulk of the look comes from app.css / home.css / blog.css. */

/* Block header: make core Navigation render like the mockup nav */
.wp-block-template-part .hd-in{display:flex; align-items:center; gap:24px}
.hd .wp-block-navigation{flex:1}
.hd .wp-block-navigation ul{gap:22px}
.hd .wp-block-navigation a{font-family:var(--wp--preset--font-family--body); font-weight:600; font-size:14.5px; opacity:.82}
.hd .wp-block-navigation a:hover{opacity:1}

/* Constrain content like the mockups */
.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)){margin-inline:auto}

/* ============================================================
   WooCommerce product loop -> brand .card (ref: ProductCard, views-shop.jsx)
   ============================================================ */
.woocommerce ul.products{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3,1fr); gap:24px}
.woocommerce ul.products::before,
.woocommerce ul.products::after{content:none; display:none}

.woocommerce ul.products li.product{
	width:auto; margin:0; padding:0; float:none; text-align:left;
	background:#fff; border:1px solid var(--line); border-radius:var(--radius);
	overflow:hidden; position:relative; display:flex; flex-direction:column; transition:.2s;
}
.woocommerce ul.products li.product:hover{transform:translateY(-3px); box-shadow:var(--shadow)}

/* product link wraps media + text */
.woocommerce ul.products li.product a.woocommerce-LoopProduct-link{
	display:flex; flex-direction:column; gap:6px; padding:0 18px 12px; color:inherit;
}
/* media: square image, flush to the card edges */
.woocommerce ul.products li.product a.woocommerce-LoopProduct-link img{
	width:calc(100% + 36px); max-width:none; margin:0 -18px 6px;
	aspect-ratio:1/1; object-fit:cover; border-radius:0; display:block;
}
/* badges over the image (.media-badge base styling lives in app.css) */
.woocommerce ul.products li.product .media-badge{position:absolute; top:12px; left:12px; z-index:2}
.woocommerce ul.products li.product .onsale{
	position:absolute; top:12px; right:12px; left:auto; margin:0; min-height:0; min-width:0;
	background:var(--amber); color:#241d09; font-family:var(--font-body); font-size:11.5px;
	font-weight:800; padding:4px 9px; border-radius:999px; line-height:1.4;
}
/* meta row: category eyebrow + stars */
.woocommerce ul.products li.product .card-meta{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:14px}
.woocommerce ul.products li.product .card-cat{font-size:11.5px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--moss)}
.woocommerce ul.products li.product .woocommerce-loop-product__title{
	font-family:var(--font-head); font-size:19px; font-weight:700; color:var(--ink); line-height:1.15; padding:0; margin:2px 0 0;
}
.woocommerce ul.products li.product .card-latin{font-size:13px; color:var(--muted); font-style:italic; margin:-1px 0 0}
.woocommerce ul.products li.product .star-rating{color:var(--amber); font-size:.9em; margin:2px 0 0}

/* foot: price + add-to-cart pill on one row, pinned to the bottom */
.woocommerce ul.products li.product .card-foot{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:auto; padding:10px 18px 16px}
.woocommerce ul.products li.product .card-foot .price{font-family:var(--font-head); font-weight:800; font-size:16px; color:var(--ink)}
.woocommerce ul.products li.product .card-foot .price del{color:var(--muted); font-weight:400; font-size:13px; margin-right:4px}
.woocommerce ul.products li.product .card-foot .price ins{text-decoration:none}
.woocommerce ul.products li.product .card-foot .button{
	margin:0; background:var(--forest); color:#F6F2E6; border-radius:999px;
	font-family:var(--font-head); font-weight:600; font-size:13.5px; padding:9px 16px; white-space:nowrap;
}
.woocommerce ul.products li.product .card-foot .button:hover{background:var(--forest-2)}
/* pre-order CTA -> ghost (matches the reference's "Připravujeme" cards) */
.woocommerce ul.products li.product.card-soon .card-foot .button{background:transparent; color:var(--forest); box-shadow:inset 0 0 0 1.5px var(--forest)}
.woocommerce ul.products li.product.card-soon .card-foot .button:hover{background:var(--forest); color:#fff}

@media(max-width:900px){.woocommerce ul.products{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.woocommerce ul.products{grid-template-columns:1fr}}

/* keep core block buttons pill-shaped */
.wp-block-button__link{border-radius:999px}

/* Story collage: real photos fill the grid cells (ref used .photo placeholders) */
.story-grid img{width:100%; height:100%; object-fit:cover; border-radius:20px; display:block}

/* About hero: real photo fills the banner (ref used a .photo placeholder) */
.about-hero img{width:100%; height:100%; object-fit:cover; display:block}

/* Contact: real Google map embed inside the .map-ph frame */
.map-ph.map-embed{background:none}
.map-ph iframe{width:100%; height:100%; border:0; display:block}

/* Contact form error note */
.form-error{background:#FBEBE9; color:#8A2B2B; border:1px solid #efc9c4; border-radius:12px; padding:11px 14px; margin:0 0 16px; font-size:14px}

/* Filterable archive grid ([houby_grid]) — clickable cards with real images */
.acard{text-decoration:none}
.acard .acard-img{width:100%; aspect-ratio:16/10; object-fit:cover; border-radius:16px; display:block}
.acard:hover .acard-img{box-shadow:var(--shadow)}
.acard .acard-ph{display:block; aspect-ratio:16/10; border-radius:16px}
.jfilter{cursor:pointer}
.houby-grid-empty{color:var(--ink-2); padding:30px 0}

/* ============================================================
   WooCommerce single product (PDP) — brand styling
   (variant pills + subscriptions need plugins; see README)
   ============================================================ */
.woocommerce div.product{display:grid; grid-template-columns:1fr 1fr; gap:46px; align-items:start}
.woocommerce div.product .woocommerce-product-gallery{position:sticky; top:92px; float:none; width:auto !important; margin:0}
.woocommerce div.product .woocommerce-product-gallery__image img,
.woocommerce div.product .woocommerce-product-gallery img{border-radius:var(--radius-lg)}
.woocommerce div.product .summary{float:none; width:auto !important; margin:0}
.woocommerce div.product .product_title{font-family:var(--font-head); font-size:clamp(30px,4vw,44px); line-height:1.08; margin:4px 0 0}
.woocommerce div.product .woocommerce-product-rating{margin:6px 0 0}
.woocommerce div.product .star-rating{color:var(--amber)}
.woocommerce div.product p.price,
.woocommerce div.product span.price{font-family:var(--font-head); color:var(--ink); font-weight:800; font-size:30px; margin:18px 0 4px}
.woocommerce div.product p.price del{color:var(--muted); font-weight:400; font-size:18px; margin-right:6px}
.woocommerce div.product p.price ins{text-decoration:none}
.woocommerce div.product .woocommerce-product-details__short-description{color:var(--ink-2); font-size:16px; margin-top:10px}
/* variations select (pills would need a swatches plugin) */
.woocommerce div.product form.cart .variations select{font-family:var(--font-body); border:1.5px solid var(--line-2); border-radius:12px; padding:10px 14px; background:#fff; min-height:46px}
.woocommerce div.product .single_variation .price{font-size:24px}
/* qty + add-to-cart */
.woocommerce div.product form.cart{display:flex; gap:12px; align-items:center; flex-wrap:wrap; margin-top:20px}
.woocommerce div.product form.cart .quantity .qty{width:66px; height:48px; text-align:center; border:1.5px solid var(--line-2); border-radius:999px; font-family:var(--font-head); font-weight:800; background:#fff; color:var(--ink)}
.woocommerce div.product form.cart .button{background:var(--forest); color:#F6F2E6; border-radius:999px; font-family:var(--font-head); font-weight:600; font-size:16px; padding:15px 28px; transition:.18s}
.woocommerce div.product form.cart .button:hover{background:var(--forest-2)}
/* injected brand extras span correctly */
.woocommerce div.product .pdp-trust,
.woocommerce div.product .freshcard{grid-column:auto}
.woocommerce div.product .pdp-farm,
.woocommerce div.product .woocommerce-tabs,
.woocommerce div.product .related,
.woocommerce div.product .upsells{grid-column:1 / -1}
/* product tabs → brand underline tabs */
.woocommerce div.product .woocommerce-tabs{margin-top:26px}
.woocommerce div.product .woocommerce-tabs ul.tabs{padding:0; margin:0 0 18px; border-bottom:1px solid var(--line); display:flex; gap:10px; flex-wrap:wrap}
.woocommerce div.product .woocommerce-tabs ul.tabs::before{display:none}
.woocommerce div.product .woocommerce-tabs ul.tabs li{background:none; border:none; border-radius:0; margin:0; padding:0}
.woocommerce div.product .woocommerce-tabs ul.tabs li a{font-family:var(--font-head); font-weight:600; color:var(--muted); padding:10px 4px; border-bottom:2px solid transparent}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a{color:var(--ink); border-bottom-color:var(--forest)}
.woocommerce div.product .woocommerce-tabs .panel h2{font-size:22px}
.woocommerce div.product .related > h2,
.woocommerce div.product .upsells > h2{font-size:28px; margin-bottom:22px}

@media(max-width:900px){
	.woocommerce div.product{grid-template-columns:1fr; gap:28px}
	.woocommerce div.product .woocommerce-product-gallery{position:static}
}

/* Section rhythm */
.houby-section{padding:84px 0}

/* Hero: real photo background fills the bleed (reference used a gradient placeholder) */
.hero-bg img{width:100%; height:100%; object-fit:cover; display:block}

/* Header brand logo (real illustrated badge) — enlarged */
.hd-in{height:92px}
.hd-brand{display:inline-flex; align-items:center; line-height:0; flex:none}
.hd-brand img{height:78px; width:auto; border-radius:14px; display:block}

/* Footer brand logo — real badge instead of the glyph placeholder */
.ft-logo{display:inline-block; line-height:0; margin-bottom:16px}
.ft-logo img{height:118px; width:auto; border-radius:16px; display:block}

/* Why-us card now uses the real logo image — shown in full (contain, never cropped) */
/* min-width:0 stops the 768px logo from blowing out its grid track on mobile */
.why-grid > .why-tx,
.why-grid > .why-media{min-width:0}
.why-media{display:grid; place-items:center}
.why-media .why-logo{width:100%; height:auto; max-width:460px; aspect-ratio:1/1; object-fit:contain; border-radius:30px; display:block; box-shadow:0 30px 70px -34px rgba(140,110,20,.6)}
@media(max-width:960px){.why-media .why-logo{max-width:360px; margin-inline:auto}}
/* stats: 46px numbers overflow a phone row — shrink + tighten the gap */
@media(max-width:620px){
	.why-stats{gap:20px 26px}
	.why-stats .stat .big{font-size:34px}
	.why-stats .stat p{max-width:22ch}
}

/* Sensor section now uses the real dashboard image */
.diff-grid .diff-dash{width:100%; height:auto; border-radius:var(--radius-lg); display:block; box-shadow:var(--shadow)}

/* WooCommerce mini-cart button → round .cartbtn look */
.wc-block-mini-cart__button{width:46px; height:46px; padding:0; border-radius:999px; border:1px solid var(--line); background:#fff; color:var(--ink); display:grid; place-items:center; transition:.15s}
.wc-block-mini-cart__button:hover{background:var(--forest); color:#fff; border-color:var(--forest)}
.wc-block-mini-cart__amount{display:none}
.wc-block-mini-cart__quantity-badge{background:var(--amber); color:#1d1a10; font-weight:800}

/* Keyboard focus visibility (a11y) */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
.jfilter:focus-visible{outline:2px solid var(--forest); outline-offset:2px; border-radius:4px}

/* ============================================================
   D3: no default WP/Woo button survives — everything is a brand pill
   (.btn-* design-system variants are untouched; these target core/Woo classes)
   ============================================================ */
.wp-element-button,
.wp-block-button__link,
.wp-block-search__button,
.woocommerce a.button, .woocommerce button.button, .woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce-message .button, .woocommerce-info .button,
.wc-block-components-button,
.return-to-shop .button{
	background:var(--forest); color:#F6F2E6; border:none; border-radius:999px;
	font-family:var(--font-head),sans-serif; font-weight:600; font-size:15px;
	padding:12px 22px; line-height:1.2; text-decoration:none; transition:.18s;
}
.wp-element-button:hover,
.wp-block-button__link:hover,
.wp-block-search__button:hover,
.woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce input.button:hover,
.woocommerce #respond input#submit:hover,
.wc-block-components-button:hover,
.return-to-shop .button:hover{
	background:var(--forest-2); color:#fff; transform:translateY(-1px);
}
.is-style-outline .wp-block-button__link, .is-style-outline.wp-block-button .wp-block-button__link{
	background:transparent; color:var(--forest); box-shadow:inset 0 0 0 1.5px var(--forest);
}
.is-style-outline .wp-block-button__link:hover{background:var(--forest); color:#fff}

/* D7: images inside cards scale gently on hover (cards clip overflow) */
.acard .acard-img,
.woocommerce ul.products li.product a.woocommerce-LoopProduct-link img{transition:transform .25s ease}
.acard:hover .acard-img{transform:scale(1.03)}
.woocommerce ul.products li.product:hover a.woocommerce-LoopProduct-link img{transform:scale(1.03)}

/* CTA band: GDPR microcopy under the newsletter input */
.cta-gdpr{font-size:12px; color:#F0E6D8; opacity:.85; margin:12px 0 0}
.cta-gdpr a{color:#fff; text-decoration:underline}

/* Branded 404 + WooCommerce coming-soon pages */
.nf-page, .cs-page{min-height:62vh; display:grid; place-items:center; text-align:center; padding:84px 24px; background:var(--cream)}
.cs-page{min-height:100vh}
.nf-page img, .cs-page img{height:104px; width:auto; border-radius:18px; margin:0 auto 22px; display:block}
.nf-page h1, .cs-page h1{font-size:clamp(32px,5vw,52px); margin:6px 0 0}
.nf-page .eyebrow{margin-bottom:6px}
.nf-sub, .cs-sub{color:var(--ink-2); font-size:17px; max-width:52ch; margin:14px auto 26px}

/* Bilingual nav pattern: hamburger (replaces the core Navigation block overlay) */
.hd-burger{display:none; width:44px; height:44px; flex:none; padding:0; margin-left:auto; cursor:pointer;
	flex-direction:column; align-items:center; justify-content:center; gap:4px;
	border:1px solid var(--line); border-radius:999px; background:#fff; color:var(--ink)}
.hd-burger span{display:block; width:18px; height:2px; border-radius:2px; background:currentColor; transition:.2s}
.hd.hd-open .hd-burger span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.hd.hd-open .hd-burger span:nth-child(2){opacity:0}
.hd.hd-open .hd-burger span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
@media(max-width:960px){
	.hd-burger{display:flex}
	.hd-nav{display:none; position:absolute; top:100%; left:0; right:0; z-index:50;
		flex-direction:column; gap:0; background:var(--paper);
		border-top:1px solid var(--line); border-bottom:1px solid var(--line); box-shadow:var(--shadow);
		padding:6px 24px 14px}
	.hd.hd-open .hd-nav{display:flex}
	.hd-nav a{padding:14px 0; border-bottom:1px solid var(--line); font-size:16px; opacity:1}
	.hd-nav a:last-child{border-bottom:none}
	.hd-nav a.on::after{display:none}
}

/* Language switcher — styled like the design .lang pill (Polylang-ready) */
.hd-lang{display:flex; align-items:center; gap:6px}
.hd-lang .lang{text-decoration:none}
.hd-lang .lang.on{background:var(--forest); color:var(--paper); border-color:var(--forest)}