/* Tecnifibre Store — front-end polish on top of Flatsome (Sport Shop demo). */

/* Text logo (site title until the client sends a logo): one line, never wrapped. */
#logo a { font-size: 22px; line-height: 1.1; letter-spacing: .03em; white-space: nowrap; }
@media only screen and (max-width: 849px) { #logo { width: auto; } #logo a { font-size: 16px; } }

/* Front page: feature row (icon + one-line text, aligned regardless of text length). */
/* Icon above the text, centred: the three columns stay aligned even when one text wraps. */
.tf-feature { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px; padding: 0 10px; }
.tf-feature i { font-size: 28px; line-height: 1; color: #8f8f8f; }
.tf-feature h4 { margin: 0; font-size: 1em; line-height: 1.35; }
@media only screen and (max-width: 549px) { .tf-feature { flex-direction: row; text-align: left; } }

/* Action buttons: white text on the primary blue, not on the pale secondary colour.
   Flatsome paints them with `.button.alt, .button.checkout, .checkout-button, .secondary`, so every
   selector here needs two classes as well — `.checkout-button` alone loses to its `.button.alt`. */
.single_add_to_cart_button.button.alt,
.button.checkout,
.checkout-button.button,
#place_order { background-color: var(--fs-color-primary); }

/* Checkout. Rows the plugin marks server-side: pickup order (no street address), and the
   «Страна / регион» select while Belarus is the only country the shop sells to. The rows stay
   in the form so their values still post. */
.tf-pickup-hidden,
.tf-hidden-field { display: none !important; }
.tf-pickup-address { display: block; font-size: .85em; font-weight: normal; color: #777; }

/* Shop sidebar: WooCommerce's price filter — the Russian range label does not fit next to the
   button in a 240 px sidebar, so the label goes on its own line above the button. */
.widget_price_filter .price_slider_amount { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; text-align: left; }
.widget_price_filter .price_slider_amount .price_label { order: -1; padding-top: 0; white-space: nowrap; }
.widget_price_filter .price_slider_amount .button { float: none; margin: 0; }
.widget_price_filter .price_slider_amount .clear { display: none; }

/* Footer: the seller's registration lines in their own «Реквизиты» widget. */
.footer-widgets .tf-seller-info__line { margin-bottom: .35em; }

/* Checkbox rows (consent, «Создать учётную запись?», the terms box, the registration form).
   WooCommerce and this plugin print the label as `<input> <span>text</span> <span class="required">`,
   all in one inline flow, so a wrapped line starts under the checkbox. Flex would fix the indent but
   would also make the `*` a third flex item and tear it off the end of the sentence, so the checkbox
   is lifted out of the flow instead and the label given a matching hanging indent. */
.woocommerce-form__label-for-checkbox { position: relative; padding-left: 25px; }
.woocommerce-form__label-for-checkbox input[type="checkbox"] { position: absolute; left: 4px; top: 5px; margin: 0; }

/* «Под заказ» (TF_Store_Stock): a quiet line under the price on the product card, and on the product
   page the availability text WooCommerce prints — the theme's out-of-stock colours are not for it. */
.product-small .price-wrapper .tf-backorder { display: block; font-size: .85em; color: #777; line-height: 1.3; }
.product-info p.stock.available-on-backorder,
.woocommerce-variation-availability .stock.available-on-backorder { color: #555; }

/* Product page: «Нет в наличии» is a fact the customer must not miss — a badge, not body text. */
/* `.product-info p.stock` in flatsome-shop.css sets the size, hence the three classes here. */
.product-info p.stock.out-of-stock,
.product-info .stock.out-of-stock,
.woocommerce-variation-availability .stock.out-of-stock {
	display: inline-block; padding: 4px 10px; background-color: #b20000; color: #fff;
	font-size: 14px; line-height: 1.2; border-radius: 2px;
}
.single_add_to_cart_button.disabled,
.single_add_to_cart_button:disabled { cursor: not-allowed; }

/* Product page price: WooCommerce marks the currency up as its own span, which Flatsome sets in a
   smaller size aligned to the top edge — «руб.» ends up looking like a footnote marker. */
.product-info .price .woocommerce-Price-currencySymbol { font-size: inherit; vertical-align: baseline; }

/* Product gallery thumbnails: Flatsome slides the selected (and hovered) thumbnail up by 5 px inside
   an overflow-hidden frame, so picking one nudges the whole strip. The frame gets a border in the
   shop colour instead, and both states sit at the same height. */
.product-thumbnails a { border-width: 2px; }
.product-thumbnails .is-nav-selected a,
.product-thumbnails a:hover { border-color: var(--fs-color-primary); }
.product-thumbnails img { margin-bottom: 0; }
.product-thumbnails .is-nav-selected a img,
.product-thumbnails a:hover img { transform: none; }

/* Shop sidebar: the price filter's «Фильтрация» is the only grey pill on a site whose buttons are
   square and in the primary colour. */
.widget_price_filter .price_slider_amount .button {
	background-color: var(--fs-color-primary); color: #fff; border-radius: 0;
	font-size: 12px; text-transform: uppercase;
}

/* My Account: Flatsome's woocommerce/myaccount/account-user.php prints the internal user id next to
   the name (`<em class="user-id">#12</em>`) and offers no filter for it — the theme is not ours to
   edit, so it is hidden here. The avatar span next to it is empty while avatars are switched off. */
.account-user .user-id { display: none; }
.account-user .image:empty { display: none; margin: 0; }

/* No black band under the footer on a short page (404, empty cart): the page background is black,
   and #wrapper only ever grew as tall as its content. */
#wrapper { display: flex; flex-direction: column; min-height: 100vh; }
#wrapper > #main { flex: 1 0 auto; }
.admin-bar #wrapper { min-height: calc(100vh - 32px); }
@media only screen and (max-width: 782px) { .admin-bar #wrapper { min-height: calc(100vh - 46px); } }

/* Legal pages (оферта, политика, оплата и доставка, возврат — body class from TF_Store_Frontend):
   full-width running text runs to 93 characters a line on a 1440 px screen, 70 at 760 px. */
.tf-legal .page-wrapper .row-main .col-inner { max-width: 760px; margin-left: auto; margin-right: auto; }
.tf-legal .page-wrapper .row-main .col-inner h2 { margin-top: 1.5em; }

/* Order received: the heading TF_Store_Frontend prints above WooCommerce's own text. */
.tf-thankyou-title { margin-bottom: .6em; }

/* Header dropdowns: the plain rounded panel the theme options set (scripts/theme_options.sh). A product
   family with ten or more lines (Ракетки: 14, Струны: 14) would run 600 px down the page as one column,
   so such a list is laid out in two. */
.header-nav .nav-dropdown-simple.nav-dropdown:has(> li:nth-child(10)) { display: grid; grid-template-columns: 1fr 1fr; grid-auto-flow: row; column-gap: 24px; min-width: 480px; }

/* Footer: the menu widget draws a rule between every link, which reads as a table of contents next
   to the three text widgets; and a phone number must not break across two lines. */
.footer-widgets .widget_nav_menu li,
.footer-widgets .widget_nav_menu .menu > li { border-top: 0; border-bottom: 0; }
.tf-seller-phone { white-space: nowrap; }

/* Header navigation, from Flatsome's mobile breakpoint up: the menu sits on the centre of the page.
   Flatsome lays the header row out as flex — logo, menu, icons — so the menu simply follows the logo
   and all the slack collects on the right, which is what reads as «the menu is stuck to the logo». As
   three grid tracks instead, the menu takes the middle one and the two outer tracks share what is left
   equally, so the middle of the menu lands on the middle of the screen. Neither outer track can go
   under its own content, so when the header runs out of room the menu gives up the exact page centre
   before it crowds its neighbours, and `column-gap` is the clearance it always keeps.
   Down to 1280 px it stays on one line beside the logo: the logo, the type and the space between the
   items shrink with the viewport instead. */
@media only screen and (min-width: 850px) {
	.header-main .header-inner {
		display: grid;
		grid-template-columns: 1fr auto 1fr;
		column-gap: clamp(20px, 5vw - 40px, 40px);
	}
	.header-main .header-inner > #logo { margin-right: 0; }
	/* Flatsome's customizer CSS pins #logo to the logo-width option (280 px); the image is 264 px wide
	   at the header's full height and the image follows the box (`max-width: 100%`), so the box is what
	   shrinks the logo: full size from 1660 px up, 170 px at 1280. */
	.header-main #logo { width: clamp(170px, 24.75vw - 147px, 264px); }
	/* The menu is sized for the client's seven items, and he edits it himself. One item too many must
	   not slide under the logo and the icons (the page clips horizontal overflow, so nothing would even
	   scroll): the list may wrap, and a second centred line is what an overlong menu degrades to. */
	.header-main .header-nav-main.nav-left {
		flex-wrap: wrap;
		justify-content: center;
		column-gap: clamp(8px, 1.5vw - 10px, 14px);
	}
	/* The items keep their own width whatever the middle track ends up being: squeezed, the four items
	   with a submenu lose the room their caret needs and drop it under the label, which costs the whole
	   row 19 px of height. */
	.header-main .header-nav-main.nav-left > li { margin-left: 0; margin-right: 0; flex-shrink: 0; }
	.header-main .header-nav-main.nav-left > li > a {
		font-size: clamp(12px, 0.2vw + 9.6px, 12.8px);
		white-space: nowrap;
	}
	/* The icon block is what tells the grid how wide the right track has to be, so it must not be
	   squeezable: left free to wrap, «Вход / Регистрация» would fold onto a second line and let the
	   menu take the room it needs. */
	.header-main .header-nav-main.nav-right { flex-wrap: nowrap; }
	.header-main .header-nav-main.nav-right a { white-space: nowrap; }
}

/* Below 1600 px the cart link drops its «0,00 руб.» caption and keeps the icon with the count, and the
   divider and some of the spacing between the icons go with it. With the caption the right block is
   96 px wider than the logo, and from 1599 px down that difference is what pushes the menu off the
   page centre (48 px at 1441) and, further down, onto a second line. */
@media only screen and (min-width: 850px) and (max-width: 1599px) {
	.header-main .cart-item .header-cart-title { display: none; }
	/* The hidden caption stays in the markup, so Flatsome's `.button.icon.circle > span + i` margin (8 px
	   right, -4 px left) would keep the bag 6 px left of the centre of its circle. */
	.header-main .cart-item .header-cart-link > .header-cart-title + i { margin: 0; }
	.header-main .header-nav-main.nav-right > li.header-divider { display: none; }
	.header-main .header-nav-main.nav-right > li { margin-left: 4px; margin-right: 4px; }
}

/* Below 1280 px the seven items no longer fit beside a logo anyone can read (at 1200 it would be
   50 px tall, at 1024 the type 9 px), so the row splits in two: logo and icons keep the top line and
   the menu gets a full-width line of its own under them — still one line, still centred on the page,
   at the theme's own type size. The height selectors have to outrank Flatsome's customizer CSS, which
   pins `.header-main` to the header height option and `.stuck .header-main` with !important. */
@media only screen and (min-width: 850px) and (max-width: 1279px) {
	.header-main .header-inner { grid-template-columns: auto 1fr; row-gap: 4px; }
	.header-main .header-inner > #logo { grid-area: 1 / 1 / 2 / 2; }
	.header-main .header-inner > .flex-col.hide-for-medium.flex-right { grid-area: 1 / 2 / 2 / 3; }
	/* Flatsome leaves `margin-right: auto` on the menu column for the flex row; on the grid that auto
	   margin cancels the stretch, so the column would shrink-wrap to the menu and sit at the left edge
	   of its row instead of filling it. */
	.header-main .header-inner > .flex-col.hide-for-medium.flex-left { grid-area: 2 / 1 / 3 / 3; margin-right: 0; }
	.header-main #logo { width: clamp(170px, 18vw, 220px); }
	.header-main .header-nav-main.nav-left > li > a { font-size: 12.8px; }
	.header-wrapper .header-main,
	.header-wrapper.stuck .header-main { height: auto !important; padding: 8px 0; }
	/* The sticky header follows the page down, so there the two lines are kept compact: a smaller logo
	   and no air around it, about the height the one-line sticky header has on a wider screen. */
	.header-wrapper.stuck .header-main { padding: 4px 0; }
	.header-wrapper.stuck .header-main .header-inner { row-gap: 0; }
	.header-wrapper.stuck .header-main #logo { width: 120px; }
}

/* The phone row is paired with the e-mail row on the billing side; the shipping section (checkout
   and My Account → Адрес доставки) has no e-mail, so its phone keeps the full width. */
.woocommerce #shipping_phone_field.form-row-first { width: 100%; float: none; }