/*
Theme Name: Kiosko Child
Description: Child theme of Kiosko for Rehvipood customizations. Shop template with horizontal search + dropdown filters.
Template: kiosko
Version: 2.0.0
*/

/* ==========================================================================
   RESPONSIVE MODEL
   ==========================================================================

   Three target viewports:

     iPhone 13 Pro          390px  -> 334px of content
     MacBook 14" half-width 756px  -> 700px of content
     MacBook 14" full       1512px -> 1200px of content (capped by wideSize)

   Content width = viewport - 56px (root padding of 1.75rem each side),
   capped at theme.json's wideSize of 1200px.

   ONE breakpoint, at 700px:

     above 700px    desktop layout. Covers both the full and half-width
                    MacBook, so half-width is a narrow desktop rather than a
                    phone layout.
     700px & below  phone layout. In practice only the iPhone reaches this.

   700px was chosen so the 756px half-window sits safely above it. This
   deliberately differs from WordPress's own 782px breakpoint, which would
   otherwise give the half-window a phone layout. If you change this number,
   change it in every media query below -- CSS cannot use a variable in a
   media query.

   All child theme CSS lives in this file. Do not add inline <style> blocks to
   functions.php or to patterns: it was previously split across three places
   and the copies drifted apart.
   ========================================================================== */


/* --------------------------------------------------------------------------
   Product image normalisation
   --------------------------------------------------------------------------
   The supplier's images are wildly inconsistent: 82 distinct dimension pairs
   across ~180 files, with aspect ratios from 0.516 (tall and narrow) through
   1.0 (46 square files at 240x240) to 2.124 (a few wide product shots). Left
   alone, every card is a different height and the grid looks ragged.

   Fix: give every image an identical box and fit the image inside it with
   object-fit: contain, which scales without cropping. Cropping is wrong here
   -- a tyre with its sidewall cut off looks like a broken image, and the
   landscape outliers would lose most of their subject.

   The space around off-ratio images is filled with the theme's base colour so
   it reads as deliberate padding rather than a gap.

   To change the shape, edit --rehvipood-image-ratio below and nothing else.
   Measured against the actual 180 files in this shop:

                        median fill   files under 70%   spread
     1 / 1   square         73.3%          57            38 pts  <- current
     3 / 4   portrait       88.8%           9            22 pts
     7 / 10  portrait       90.2%           6            28 pts

   On the numbers 3/4 looks best: the catalogue is dominated by ~215x320
   supplier photos which sit almost exactly on that ratio and so nearly fill
   the box. Square was nevertheless chosen after comparing all three on the
   real shop, because fill percentage measures how much of a box a photo
   occupies, not whether the result reads well. Consistent white space around a
   smaller tyre looks deliberate; the tighter portrait box did not. Do not
   "correct" this back to 3/4 on the strength of the table alone.

   This is presentation only -- no files are altered and no thumbnail
   regeneration is needed.

   IMPORTANT: this only holds while WooCommerce's own "Thumbnail cropping"
   setting is Uncropped (Appearance > Customize > WooCommerce > Product
   Images). If that is left at its 1:1 default, WooCommerce hard-crops source
   images wider than 324px into squares at import, and no CSS can restore what
   was trimmed. Today's supplier images are 215-240px wide so they slip under
   that threshold and are served uncropped by accident -- if the supplier ever
   provides larger files, the cropping would begin silently.
   -------------------------------------------------------------------------- */

:root {
	--rehvipood-image-ratio: 1 / 1;
}

.products-block-post-template .wp-block-woocommerce-product-image img,
.wp-block-woocommerce-related-products .wp-block-woocommerce-product-image img,
.products-block-post-template .wc-block-components-product-image img,
.wp-block-woocommerce-related-products .wc-block-components-product-image img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: var(--rehvipood-image-ratio);
	/* !important is required, not lazy: WooCommerce's product-image block
	   writes object-fit INLINE from its `scale` attribute, which defaults to
	   "cover". The templates now set scale:"contain" so the inline value is
	   already correct, but this backstops any instance of the block added
	   through the Site Editor, where that attribute would default to cover
	   again and silently crop. */
	object-fit: contain !important;
	object-position: center;
	background-color: var(--wp--preset--color--base, #ffffff);
}

/* The single product gallery gets the same treatment, so the main image does
   not shift the page height from one product to the next. */
.wp-block-woocommerce-product-image-gallery img,
.woocommerce-product-gallery__image img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: var(--rehvipood-image-ratio);
	object-fit: contain !important;
	object-position: center;
	background-color: var(--wp--preset--color--base, #ffffff);
}


/* --------------------------------------------------------------------------
   Product grid
   --------------------------------------------------------------------------
   The templates set layout {type: grid, columnCount: 4}, which WordPress
   compiles to a fixed repeat(4, ...) with no media queries at all. Left
   alone that gives an iPhone four 62px columns. These overrides reflow it.

   Resulting card widths:
     1512px viewport -> 4 columns of ~279px
      756px viewport -> 4 columns of ~154px
      390px viewport -> 2 columns of ~153px

   The phone card and the half-window card come out nearly identical, which
   keeps the card design consistent across both.
   -------------------------------------------------------------------------- */

@media (max-width: 700px) {

	.products-block-post-template,
	.wp-block-woocommerce-related-products .wp-block-post-template {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	}
}

/* Equal-height cards: each card is a subgrid spanning image/title/badges/price
   so prices line up across a row regardless of how many lines a title takes. */
.products-block-post-template > .wp-block-post,
.wp-block-woocommerce-related-products .wp-block-post-template > .wp-block-post {
	display: grid;
	grid-row: span 4;
	grid-template-rows: subgrid;
	row-gap: 0;
	align-content: start;
}

@supports not (grid-template-rows: subgrid) {

	.products-block-post-template .wp-block-post-title {
		min-height: 2.7em;
	}
}


/* --------------------------------------------------------------------------
   Tyre filter bar
   --------------------------------------------------------------------------
   Five dropdowns: Width, Height, Diameter, Brand, Season.

   Desktop keeps all five on one row. At the 756px half-window that is
   (700 - 4 gaps) / 5 = 130px per select, so horizontal padding is tightened
   below 900px to stop the labels being clipped.
   -------------------------------------------------------------------------- */

.tyre-filter-bar {
	display: flex;
	flex-wrap: nowrap;
	gap: 0.75em;
}

.tyre-filter-bar select {
	flex: 1 1 0;
	min-width: 0;
}

/* Shared select styling: filter dropdowns and the catalog sorting select. */
.woocommerce-ordering select,
.wp-block-woocommerce-catalog-sorting select,
.tyre-filter-bar select,
.tyre-search-panel select {
	-webkit-appearance: none;
	appearance: none;
	padding: 10px 38px 10px 14px;
	font-family: inherit;
	font-size: var(--wp--preset--font-size--small, 0.938rem);
	line-height: 1;
	color: var(--wp--preset--color--contrast, #3b3b3b);
	background-color: var(--wp--preset--color--base, #ffffff);
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%233b3b3b' stroke-width='1.5'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 14px center;
	border: 1px solid var(--wp--preset--color--contrast, #3b3b3b);
	border-radius: 0;
	cursor: pointer;
}

.woocommerce-ordering select:hover,
.wp-block-woocommerce-catalog-sorting select:hover,
.tyre-filter-bar select:hover,
.tyre-search-panel select:hover {
	border-color: var(--wp--preset--color--primary, #000000);
	color: var(--wp--preset--color--primary, #000000);
}

.woocommerce-ordering select:focus,
.wp-block-woocommerce-catalog-sorting select:focus,
.tyre-filter-bar select:focus,
.tyre-search-panel select:focus {
	outline: 2px solid var(--wp--preset--color--primary, #000000);
	outline-offset: -1px;
}

.woocommerce-ordering select option,
.wp-block-woocommerce-catalog-sorting select option,
.tyre-filter-bar select option,
.tyre-search-panel select option {
	font-size: var(--wp--preset--font-size--small, 0.938rem);
}


/* --------------------------------------------------------------------------
   Front page: search panel + banner
   --------------------------------------------------------------------------
   Two columns, ~25/75, defined in kiosko-child/templates/front-page.html.

   The columns block carries is-not-stacked-on-mobile so WordPress does not
   stack it at its own 782px breakpoint — that would split the layout at the
   756px half-window width, where a 25% column is still perfectly usable. All
   stacking happens at 700px below, the single breakpoint used site-wide.

   Selects inherit the shared styling above, so the panel and the Shop filter
   bar stay visually identical without duplicating any of it.
   -------------------------------------------------------------------------- */

.tyre-search-panel {
	padding: 20px;
	border: 1px solid var(--wp--preset--color--contrast, #3b3b3b);
}

.tyre-search-panel__title {
	margin: 0 0 16px;
	font-size: var(--wp--preset--font-size--medium, 1.125rem);
	line-height: 1.2;
}

.tyre-search-panel__field {
	margin: 0 0 12px;
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.tyre-search-panel__field label {
	font-size: 0.813rem;
	line-height: 1.2;
	color: var(--wp--preset--color--contrast, #3b3b3b);
}

/* width:100% alone is not enough — a select sizes to its widest option, which
   for Brand is long enough to push the panel wider than its column. */
.tyre-search-panel select {
	width: 100%;
	max-width: 100%;
	min-width: 0;
}

.tyre-search-panel__submit {
	width: 100%;
	margin-top: 8px;
	padding: 12px 16px;
	font-family: inherit;
	font-size: var(--wp--preset--font-size--small, 0.938rem);
	line-height: 1;
	color: var(--wp--preset--color--base, #ffffff);
	background-color: var(--wp--preset--color--primary, #000000);
	border: 1px solid var(--wp--preset--color--primary, #000000);
	border-radius: 0;
	cursor: pointer;
}

.tyre-search-panel__submit:hover {
	color: var(--wp--preset--color--primary, #000000);
	background-color: var(--wp--preset--color--base, #ffffff);
}

.tyre-search-panel__submit:focus {
	outline: 2px solid var(--wp--preset--color--primary, #000000);
	outline-offset: 2px;
}

/* Banner column. Images fill the width and keep their own proportions, so the
   customer can drop in any banner size without it being cropped or stretched. */
.rehvipood-home-banner img {
	display: block;
	width: 100%;
	height: auto;
}

.rehvipood-home-banner > *:first-child,
.rehvipood-home-banner .wp-block-image:first-child {
	margin-top: 0;
}

@media (max-width: 700px) {

	/* Override is-not-stacked-on-mobile at the site's own breakpoint. The
	   search panel is first in the markup, so it lands above the banner. */
	/* !important is required, not decorative: core ships
	   .wp-block-columns.is-not-stacked-on-mobile { flex-wrap: nowrap !important }
	   and without matching it the columns never stack on a phone. */
	.rehvipood-home-columns.is-not-stacked-on-mobile {
		flex-wrap: wrap !important;
	}

	.rehvipood-home-columns.is-not-stacked-on-mobile > .wp-block-column {
		flex-basis: 100% !important;
	}
}

/* Narrow desktop -- the 756px half-window lands here. Reclaim horizontal
   padding so five selects still fit on one row without clipping labels. */
@media (max-width: 900px) {

	.tyre-filter-bar {
		gap: 0.5em;
	}

	.tyre-filter-bar select {
		padding: 10px 26px 10px 8px;
		background-position: right 8px center;
		font-size: 0.875rem;
	}
}

/* Phone: two selects per row, so the five wrap onto three rows. */
@media (max-width: 700px) {

	.tyre-filter-bar {
		flex-wrap: wrap;
		gap: 0.5em;
	}

	.tyre-filter-bar select {
		flex: 1 1 calc(50% - 0.25em);
		min-width: 0;
		padding: 10px 30px 10px 12px;
		background-position: right 10px center;
		font-size: var(--wp--preset--font-size--small, 0.938rem);
	}
}


/* --------------------------------------------------------------------------
   EU tyre label badges
   --------------------------------------------------------------------------
   Fuel efficiency, wet grip and rolling noise. The noise value can read
   "70 dB" rather than a single letter, hence the wrapping on the row and the
   nowrap on each individual badge.
   -------------------------------------------------------------------------- */

.tyre-badges {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 6px 10px;
	margin: 2px 0 8px;
	font-size: 0.781rem;
	line-height: 1;
	color: var(--wp--preset--color--contrast, #3b3b3b);
}

.tyre-badge {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	white-space: nowrap;
}

/* Larger, left-aligned badges in the single product summary column. */
.single-product .tyre-badges {
	justify-content: flex-start;
	gap: 10px 18px;
	margin: 10px 0 2px;
	font-size: var(--wp--preset--font-size--small, 0.938rem);
}

.single-product .tyre-badges svg {
	width: 30px;
	height: 30px;
}

/* ...but related-product cards on that page keep the compact grid styling. */
.single-product .wp-block-post .tyre-badges {
	justify-content: center;
	gap: 6px 12px;
	margin: 2px 0 8px;
	font-size: 0.781rem;
}

.single-product .wp-block-post .tyre-badges svg {
	width: 21px;
	height: 21px;
}


/* --------------------------------------------------------------------------
   Single product spec list
   -------------------------------------------------------------------------- */

.tyre-specs {
	margin: 0.5rem 0 1rem;
	max-width: 400px;
	font-size: var(--wp--preset--font-size--small, 0.938rem);
}

.tyre-specs > div {
	display: flex;
	justify-content: space-between;
	gap: 1em;
	padding: 7px 0;
	border-bottom: 1px solid var(--wp--preset--color--tertiary, #c6c6c6);
}

.tyre-specs dt,
.tyre-specs dd {
	margin: 0;
}

.tyre-specs dd {
	font-weight: 600;
	text-align: right;
}

/* Full width on a phone, where 400px would leave the values floating mid-screen. */
@media (max-width: 700px) {

	.tyre-specs {
		max-width: none;
	}
}


/* --------------------------------------------------------------------------
   Single product hero: gallery beside summary
   --------------------------------------------------------------------------
   The template sets isStackedOnMobile: false because WordPress's own stacking
   fires at 782px, which would stack the 756px half-window. Stacking is
   therefore handled here instead, at the 700px breakpoint.

   Percentages rather than a fixed flex-basis: 420px + 280px came to exactly
   the 700px of content available at half-width, sitting precisely on the wrap
   boundary where one pixel either way flipped the layout.

   Resulting gallery width:
     1512px viewport -> 42% of 1200 = 504px, capped at 420px
      756px viewport -> 42% of 700  = 294px
      390px viewport -> full width, summary stacked below
   -------------------------------------------------------------------------- */

.wp-block-columns.product-hero-cols {
	flex-wrap: nowrap !important;
	align-items: flex-start;
}

.wp-block-columns.product-hero-cols > .wp-block-column.product-gallery-col {
	flex: 0 1 42% !important;
	max-width: 420px;
	min-width: 0;
}

.wp-block-columns.product-hero-cols > .wp-block-column.product-summary-col {
	flex: 1 1 58% !important;
	min-width: 0;
}

@media (max-width: 700px) {

	.wp-block-columns.product-hero-cols {
		flex-wrap: wrap !important;
	}

	.wp-block-columns.product-hero-cols > .wp-block-column.product-gallery-col,
	.wp-block-columns.product-hero-cols > .wp-block-column.product-summary-col {
		flex: 1 1 100% !important;
		max-width: none;
	}
}


/* --------------------------------------------------------------------------
   Buy bar: price, stock, quantity and Add to cart on one row
   --------------------------------------------------------------------------
   The template wraps the price block and the add-to-cart-form block in a flex
   group. WooCommerce's add-to-cart-form emits the stock notice and the form
   together inside one wrapper:

     <div class="wp-block-woocommerce-add-to-cart-form">
       <p class="stock in-stock">4 in stock</p>
       <form class="cart"> <div class="quantity">..</div> <button>..</button> </form>
     </div>

   That wrapper is dissolved with display: contents so the stock notice and the
   form become direct flex items of the buy bar, siblings of the price. Without
   it the stock notice is trapped one level down and can never share a row with
   the price -- which is what produced three stacked rows on a phone.

   The three flex items are then: price, stock, form. The form is one item, so
   the quantity input and button can never be split across a wrap. Natural
   wrapping therefore gives:

     wide     price | stock | qty | Add to cart      (one row)
     narrow   price | stock                          (row 1)
              qty | Add to cart                      (row 2)

   Selectors are two classes deep (.wp-block-group.product-buybar) so the gap
   set here beats the single-class gap rule WordPress generates for flex groups.
   -------------------------------------------------------------------------- */

.wp-block-group.product-buybar {
	align-items: center;
	gap: 0.75em 1.25em;
	margin-bottom: 0.5rem;
}

.wp-block-group.product-buybar > * {
	margin: 0;
}

/* Dissolve the block wrapper so the stock notice and the form sit directly in
   the buy bar's flex row, rather than in a nested box beneath the price. */
.product-buybar .wp-block-woocommerce-add-to-cart-form {
	display: contents;
}

.product-buybar .stock {
	margin: 0;
	white-space: nowrap;
}

/* align-items: stretch rather than center so the quantity input takes its
   height from the tallest item in the row -- the Add to cart button -- instead
   of from its own line-height and padding. Deriving it this way means the two
   stay matched if the button's padding is ever restyled. */
.product-buybar form.cart {
	display: flex;
	flex-wrap: nowrap;
	align-items: stretch;
	gap: 0.5em;
	margin: 0;
}

.product-buybar .quantity {
	display: flex;
	margin: 0;
	float: none;
}

.product-buybar .quantity input.qty {
	width: 4.5em;
	height: auto;
	align-self: stretch;
	box-sizing: border-box;
	text-align: center;
}

.product-buybar .single_add_to_cart_button {
	margin: 0;
	white-space: nowrap;
}

/* Phone: force the form onto its own row rather than relying on the widths
   happening to overflow, and let the button fill the leftover width for an
   easier tap target. Price and stock stay together on the row above. */
@media (max-width: 700px) {

	.wp-block-group.product-buybar {
		gap: 0.5em 1em;
	}

	.product-buybar form.cart {
		flex: 1 1 100%;
	}

	.product-buybar .single_add_to_cart_button {
		flex: 1 1 auto;
	}
}


/* --------------------------------------------------------------------------
   Results count + sorting row
   --------------------------------------------------------------------------
   The template row is set to wrap, so on a phone the count sits above a
   full-width sorting dropdown rather than being squeezed alongside it.
   -------------------------------------------------------------------------- */

/* The label only exists for the compact button below; on a wide screen the
   select shows the current sort in full and speaks for itself. */
.rehvipood-sort-label {
	display: none;
}

/*
 * The sorting control is drawn as a small button at every width.
 *
 * Two problems, one fix. It looked unlike the Laius / Kõrgus / Diameeter
 * dropdowns above it, and it was as wide as its longest option
 * ("Hind: odavamad ees") — so in the results row, a flex container using
 * space-between, it drifted out of line with the results count from about
 * 900px down and was worst on a phone.
 *
 * The form is drawn as the button and the real <select> is laid over it at
 * zero opacity, filling it. Every click lands on the select, so the browser's
 * own picker opens — on a phone that is a full-height native list with proper
 * touch targets, and it is keyboard and screen-reader correct for free. A
 * hand-built dropdown panel would be more code and worse on all three counts.
 *
 * The trade-off: the button reads "Sorteeri" rather than naming the current
 * sort, which is what stops it resizing as the customer changes it. The
 * native picker marks the selected option, so it is one tap away. To show the
 * current sort on desktop instead, wrap these rules in a max-width media
 * query and the select returns to its default appearance above it.
 */
.wp-block-woocommerce-catalog-sorting {
	width: auto;
	margin: 0;
}

.wc-block-catalog-sorting .woocommerce-ordering {
	position: relative;
	display: inline-flex;
	align-items: center;
	margin: 0;
	padding: 9px 32px 9px 14px;
	font-size: 0.875rem;
	line-height: 1;
	color: var(--wp--preset--color--contrast, #3b3b3b);
	background-color: var(--wp--preset--color--base, #ffffff);
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%233b3b3b' stroke-width='1.5'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 12px center;
	border: 1px solid var(--wp--preset--color--contrast, #3b3b3b);
	cursor: pointer;
	white-space: nowrap;
}

.wc-block-catalog-sorting .woocommerce-ordering:hover {
	border-color: var(--wp--preset--color--primary, #000000);
}

/* Focus lives on the select, so mirror it onto the visible button. */
.wc-block-catalog-sorting .woocommerce-ordering:focus-within {
	outline: 2px solid var(--wp--preset--color--primary, #000000);
	outline-offset: -1px;
}

.rehvipood-sort-label {
	display: inline;
}

/* The real control: invisible, but it is what gets clicked. */
.wc-block-catalog-sorting .woocommerce-ordering select.orderby {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	opacity: 0;
	background: none;
	cursor: pointer;
}

@media (max-width: 700px) {

	.wp-block-woocommerce-product-results-count {
		margin: 0;
		font-size: 0.813rem;
	}

	.wc-block-catalog-sorting .woocommerce-ordering {
		padding: 8px 28px 8px 12px;
		font-size: 0.813rem;
		background-position: right 10px center;
	}
}


/* --------------------------------------------------------------------------
   Mini-Cart
   --------------------------------------------------------------------------
   The "calculated at checkout" note is suppressed in functions.php, but the
   server-rendered footer still prints its wrapper div. An empty div would
   otherwise hold open the gap beneath the subtotal.
   -------------------------------------------------------------------------- */

.wc-block-mini-cart__footer .wc-block-components-totals-item__description:empty {
	display: none;
}


/* --------------------------------------------------------------------------
   Footer links
   --------------------------------------------------------------------------
   The theme draws every underline in the "primary" colour, and primary is
   #000000 — the same colour as the footer background. So a link in the footer
   is underlined in black on black and looks unstyled. The link text inherits
   primary too, which would make it invisible rather than merely unmarked.

   currentColor ties the underline to whatever colour the text ends up being,
   so this keeps working if the footer palette is ever changed.

   The thickness needs !important only because the theme sets it that way; at
   0.5px a white line on black is too faint to read as a link.
   -------------------------------------------------------------------------- */

footer.wp-block-template-part a,
.wp-site-blocks > footer a {
	color: var(--wp--preset--color--base, #ffffff);
	text-decoration: underline;
	text-decoration-color: currentColor;
	text-decoration-thickness: 1px !important;
	text-underline-offset: 0.2em;
}

footer.wp-block-template-part a:hover,
.wp-site-blocks > footer a:hover {
	color: var(--wp--preset--color--tertiary, #c6c6c6);
	text-decoration-color: currentColor;
}

/* Navigation links in the footer are a menu, not body copy: leave those
   unmarked so the Shop and Info columns do not become a wall of underlines. */
footer.wp-block-template-part .wp-block-navigation a,
.wp-site-blocks > footer .wp-block-navigation a {
	text-decoration: none;
}

footer.wp-block-template-part .wp-block-navigation a:hover,
.wp-site-blocks > footer .wp-block-navigation a:hover {
	text-decoration: underline;
}


/* --------------------------------------------------------------------------
   Service tables  —  add the CSS class "service-table" to any Table block
   --------------------------------------------------------------------------
   WordPress's core Table block has no column-width controls, so widths are set
   here instead. table-layout: fixed is what makes the browser obey them; without
   it the browser sizes columns by their contents and ignores any width given.

   The first column takes --service-table-first-col and the remaining columns
   divide what is left equally, so the same class works for a two, three or four
   column table without changes.

   To use a different split on one specific table, add an inline style to that
   block: --service-table-first-col: 40%;
   -------------------------------------------------------------------------- */

.wp-block-table.service-table {
	--service-table-first-col: 30%;
}

.wp-block-table.service-table table {
	width: 100%;
	table-layout: fixed;
	border-collapse: collapse;
}

.wp-block-table.service-table th,
.wp-block-table.service-table td {
	padding: 10px 14px;
	border: 1px solid var(--wp--preset--color--tertiary, #c6c6c6);
	vertical-align: top;
}

.wp-block-table.service-table th:first-child,
.wp-block-table.service-table td:first-child {
	width: var(--service-table-first-col);
}

/* Header row picks up the same treatment as the rest of the shop. */
.wp-block-table.service-table thead th {
	background-color: var(--wp--preset--color--tertiary, #edf2f7);
	font-weight: 600;
	text-align: left;
}

/* Every column after the first holds a figure: centre it, keep it on one line
   so "44,30 €" never wraps mid-number, and halve the horizontal padding to give
   the number more of the cell.

   Only the horizontal padding is reduced. Cutting the vertical padding as well
   would make these cells shorter than the first column's and the row would look
   lopsided, since row height is set by the tallest cell in it. */
.wp-block-table.service-table th:not(:first-child),
.wp-block-table.service-table td:not(:first-child) {
	padding-left: 7px;
	padding-right: 7px;
	text-align: center;
	white-space: nowrap;
}

/* Phone: a fixed-layout table cannot shrink past its content, so give the
   first column more of the width and let the whole table scroll if it must. */
@media (max-width: 700px) {

	/* Slightly wider than the desktop share: on a narrow screen the label needs
	   the room more than the figures do. */
	.wp-block-table.service-table {
		--service-table-first-col: 40%;
		overflow-x: auto;
	}

	.wp-block-table.service-table th,
	.wp-block-table.service-table td {
		padding: 8px 10px;
		font-size: var(--wp--preset--font-size--small, 0.938rem);
	}

	.wp-block-table.service-table th:not(:first-child),
	.wp-block-table.service-table td:not(:first-child) {
		padding-left: 5px;
		padding-right: 5px;
	}
}


/* --------------------------------------------------------------------------
   Product titles on cards
   --------------------------------------------------------------------------
   Titles read "205/55R16 Continental PremiumContact 6". On a ~153px card that
   wraps over several lines, so long model names break rather than forcing
   horizontal overflow.
   -------------------------------------------------------------------------- */

.products-block-post-template .wp-block-post-title,
.wp-block-woocommerce-related-products .wp-block-post-title {
	overflow-wrap: break-word;
}


/* --------------------------------------------------------------------------
   TranslatePress language switcher in the header
   --------------------------------------------------------------------------
   The switcher is added to the header template part as a [language-switcher]
   shortcode block, sitting after the Meist link and before the basket.

   TranslatePress styles it as a standalone widget rather than a menu item:
   the switcher box carries 10px of vertical padding, and the closed-state
   trigger inside it is a .trp-language-item with "padding: 7px 16px" and
   "min-height: 19px" on content-box sizing. That totals roughly 53px against
   the ~19px of a header link, so the whole header row grows to fit it and the
   language sits off the baseline the other links share.

   What is reset here is only the CLOSED trigger:

       .trp-current-language-item__wrapper > .trp-language-item

   The items inside .trp-switcher-dropdown-list keep their original padding on
   purpose. Those are the actual tap targets in the open dropdown, and 7px/16px
   is about right for a thumb — flattening them too would save nothing (the
   list is hidden when closed) while making the open list hard to hit on a
   phone.

   Colours and borders are deliberately NOT set here. Those live in
   Settings -> TranslatePress -> Language Switcher, where the customer can
   change them without touching code. Only the geometry, which has no setting,
   is corrected. The exception is font-family: TranslatePress hardcodes a
   system font stack on .trp-language-item-name, which would leave the language
   in a different typeface from the links either side of it.
   -------------------------------------------------------------------------- */

header.wp-block-template-part .trp-shortcode-switcher {
	padding: 0;
}

/*
 * The real cause of the tall header: wpautop.
 *
 * The core/shortcode block runs its output through wpautop, which does not
 * understand that it is looking at a widget rather than prose. It inserts
 * paragraphs into TranslatePress's markup in two places:
 *
 *     <div class="trp-shortcode-switcher ...">
 *         <p></p>                                  <-- 1. a stray empty one
 *         <div class="trp-current-language-item__wrapper">
 *             <div class="trp-language-item ...">ET</div>
 *             <p><svg class="trp-shortcode-arrow"> ... </svg></p>   <-- 2.
 *
 * Both carry the theme's paragraph margin of 17.02px top and bottom, and
 * neither margin collapses away: the first is trapped by TranslatePress's
 * "overflow: hidden" on the switcher, and the second is a flex item, where
 * margins never collapse at all. The arrow's paragraph measured 28px plus
 * 34px of margin, which is exactly the 62px the visible switcher stood at
 * against the navigation's 22px.
 *
 * Two layers are rendered, and this matters when reading the DOM: an "anchor"
 * copy that is inert and only reserves space, and an absolutely positioned
 * "overlay" copy that is what the visitor actually sees and clicks. The arrow
 * paragraph appears in the overlay, so measuring the anchor alone shows a
 * correctly sized switcher while the page still looks wrong.
 *
 * Zeroing the margin on any paragraph inside the switcher fixes both at once.
 */
header.wp-block-template-part .trp-shortcode-switcher__wrapper p {
	margin: 0;

	/*
	 * line-height as well as margin. The only paragraph with content wraps the
	 * arrow <svg>, and an inherited line-height of 26.47px made that paragraph
	 * 28px tall around a 20px graphic. Since the anchor layer keeps its arrow
	 * unwrapped, the two layers ended up different heights and the visible one
	 * sat 3px high of the navigation. Zero here lets the paragraph collapse
	 * onto the svg itself.
	 */
	line-height: 0;
}

/*
 * The stray empty paragraphs have no purpose at all — take them out of the
 * flow entirely. Note the scope: wpautop scatters them at several depths,
 * including as direct children of the wrapper, outside the switcher elements.
 * Those wrapper-level ones were the last 12px of misalignment, because the
 * wrapper is a flex container and flex item margins never collapse: two empty
 * paragraphs of zero height still contributed 17px above and below.
 */
header.wp-block-template-part .trp-shortcode-switcher__wrapper p:empty {
	display: none;
}

/*
 * wpautop's other habit: newlines become <br>.
 *
 * TranslatePress writes its dropdown markup across several indented lines, and
 * wpautop reads those newlines as intentional line breaks:
 *
 *     <div class="trp-switcher-dropdown-list">
 *         <br>                                     <-- pushes the list down
 *         <a class="trp-language-item">
 *             <br><span>RU</span><br>              <-- inflates the item
 *         </a>
 *
 * Each <br> is a 20px line box, which is why RU floated roughly 25px below the
 * dropdown with nothing visible in between, and why the item measured 40px
 * instead of 33px. No <br> in this widget is meaningful — the layout is done
 * with flexbox — so they can all go.
 */
header.wp-block-template-part .trp-shortcode-switcher__wrapper br {
	display: none;
}

header.wp-block-template-part .trp-current-language-item__wrapper > .trp-language-item {
	padding: 0;
	min-height: 0;
}

/*
 * Match the navigation links rather than TranslatePress's own type.
 *
 * font-size is set to the small preset, not "inherit": inheriting picks up the
 * 17px of the surrounding group, while Pood / Kassa / Teenused / Meist render
 * at the small preset, which resolves to about 14.18px at desktop width. The
 * preset is a clamp(), so this tracks the navigation as the viewport narrows
 * instead of drifting away from it.
 */
header.wp-block-template-part .trp-language-item-name {
	font-family: inherit;
	font-size: var(--wp--preset--font-size--small);
	line-height: inherit;
}

/*
 * The wrapper is inline-block by default, so it sits on the text baseline and
 * the arrow drags it a few pixels low. Centring it against the row lines the
 * language up with Pood / Kassa / Teenused / Meist.
 */
header.wp-block-template-part .trp-shortcode-switcher__wrapper {
	display: flex;
	align-items: center;
}