@charset "UTF-8";
/*!
Theme Name: Terminal Store
Theme URI: https://underscores.me/
Author: Automattic
Author URI: https://automattic.com/
Description: Hi. I'm a starter theme called <code>Terminal Store</code>, or <em>underscores</em>, if you like. I'm a theme meant for hacking so don't use me as a <em>Parent Theme</em>. Instead try turning me into the next, most awesome, WordPress theme out there. That's what I'm here for.
Version: 1.13.116
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: terminalstore
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

Terminal Store is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/
/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
# Generic
	- Normalize
	- Box sizing
# Base
	- Typography
	- Elements
	- Links
	- Forms
## Layouts
# Components
	- Navigation
	- Posts and pages
	- Comments
	- Widgets
	- Media
	- Captions
	- Galleries
# plugins
	- Jetpack infinite scroll
# Utilities
	- Accessibility
	- Alignments

--------------------------------------------------------------*/
/*--------------------------------------------------------------
# Generic
--------------------------------------------------------------*/
/* Normalize
--------------------------------------------- */
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
/* Document
	 ========================================================================== */
/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */
html {
  line-height: 1.15;
  -webkit-text-size-adjust: 100%;
}

/* Sections
	 ========================================================================== */
/**
 * Remove the margin in all browsers.
 */
body {
  margin: 0;
}

/**
 * Render the `main` element consistently in IE.
 */
main {
  display: block;
}

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */
h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

/* Grouping content
	 ========================================================================== */
/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */
hr {
  box-sizing: content-box;
  height: 0;
  overflow: visible;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
pre {
  font-family: monospace, monospace;
  font-size: 1em;
}

/* Text-level semantics
	 ========================================================================== */
/**
 * Remove the gray background on active links in IE 10.
 */
a {
  background-color: transparent;
}

/**
 * 1. Remove the bottom border in Chrome 57-
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */
abbr[title] {
  border-bottom: none;
  text-decoration: underline;
  text-decoration: underline dotted;
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */
b,
strong {
  font-weight: bolder;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
code,
kbd,
samp {
  font-family: monospace, monospace;
  font-size: 1em;
}

/**
 * Add the correct font size in all browsers.
 */
small {
  font-size: 80%;
}

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/* Embedded content
	 ========================================================================== */
/**
 * Remove the border on images inside links in IE 10.
 */
img {
  border-style: none;
}

/* Forms
	 ========================================================================== */
/**
 * 1. Change the font styles in all browsers.
 * 2. Remove the margin in Firefox and Safari.
 */
button,
input,
optgroup,
select,
textarea {
  font-family: inherit;
  font-size: 100%;
  line-height: 1.15;
  margin: 0;
}

/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */
button,
input {
  overflow: visible;
}

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */
button,
select {
  text-transform: none;
}

/**
 * Correct the inability to style clickable types in iOS and Safari.
 */
button,
[type=button],
[type=reset],
[type=submit] {
  -webkit-appearance: button;
}

/**
 * Remove the inner border and padding in Firefox.
 */
button::-moz-focus-inner,
[type=button]::-moz-focus-inner,
[type=reset]::-moz-focus-inner,
[type=submit]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

/**
 * Restore the focus styles unset by the previous rule.
 */
button:-moz-focusring,
[type=button]:-moz-focusring,
[type=reset]:-moz-focusring,
[type=submit]:-moz-focusring {
  outline: 1px dotted ButtonText;
}

/**
 * Correct the padding in Firefox.
 */
fieldset {
  padding: 0.35em 0.75em 0.625em;
}

/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *		`fieldset` elements in all browsers.
 */
legend {
  box-sizing: border-box;
  color: inherit;
  display: table;
  max-width: 100%;
  padding: 0;
  white-space: normal;
}

/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */
progress {
  vertical-align: baseline;
}

/**
 * Remove the default vertical scrollbar in IE 10+.
 */
textarea {
  overflow: auto;
}

/**
 * 1. Add the correct box sizing in IE 10.
 * 2. Remove the padding in IE 10.
 */
[type=checkbox],
[type=radio] {
  box-sizing: border-box;
  padding: 0;
}

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */
[type=number]::-webkit-inner-spin-button,
[type=number]::-webkit-outer-spin-button {
  height: auto;
}

/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */
[type=search] {
  -webkit-appearance: textfield;
  outline-offset: -2px;
}

/**
 * Remove the inner padding in Chrome and Safari on macOS.
 */
[type=search]::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */
::-webkit-file-upload-button {
  -webkit-appearance: button;
  font: inherit;
}

/* Interactive
	 ========================================================================== */
/*
 * Add the correct display in Edge, IE 10+, and Firefox.
 */
details {
  display: block;
}

/*
 * Add the correct display in all browsers.
 */
summary {
  display: list-item;
}

/* Misc
	 ========================================================================== */
/**
 * Add the correct display in IE 10+.
 */
template {
  display: none;
}

/**
 * Add the correct display in IE 10.
 */
[hidden] {
  display: none;
}

/* Box sizing
--------------------------------------------- */
/* Inherit box-sizing to more easily change it's value on a component level.
@link http://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/ */
*,
*::before,
*::after {
  box-sizing: inherit;
}

html {
  box-sizing: border-box;
}

/*--------------------------------------------------------------
# Base
--------------------------------------------------------------*/
/* Typography
--------------------------------------------- */
body,
button,
input,
select,
optgroup,
textarea {
  color: #242424;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
  font-size: 1rem;
  line-height: 1.5;
  font-weight: 400;
}

.ts-h-6xl {
  font-size: 6rem;
  line-height: 6rem;
}

.ts-h-5xl {
  font-size: 4.5rem;
  line-height: 4.5rem;
}

.ts-h-4xl {
  font-size: 2.75rem;
  line-height: 3rem;
}

.ts-h-3xl {
  font-size: 2.25rem;
  line-height: 2.5rem;
}

.ts-h-2xl {
  font-size: 1.875rem;
  line-height: 2.25rem;
}

.ts-h-xl {
  font-size: 1.5rem;
  line-height: 2rem;
}

.ts-h-lg {
  font-size: 1.25rem;
  line-height: 1.75rem;
}

.ts-h-md {
  font-size: 1.125rem;
  line-height: 1.75rem;
}

.ts-h-sm {
  font-size: 1rem;
  line-height: 1.5rem;
}

.ts-text-lg {
  font-size: 1rem;
  line-height: 1.5rem;
}

.ts-text-md {
  font-size: 0.875rem;
  line-height: 1.25rem;
}

.ts-text-sm {
  font-size: 0.75rem;
  line-height: 1rem;
}

.ts-text-xs {
  font-size: 0.625rem;
  line-height: 0.875rem;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  clear: both;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-weight: 600;
  color: #1a1a1c;
  line-height: 1.1;
}

h1 {
  font-size: 2.75rem;
  line-height: 3rem;
  margin: 0 0 0.4em;
}

h2 {
  font-size: 2.25rem;
  line-height: 2.5rem;
  margin: 0 0 0.5em;
}

h3 {
  font-size: 1.875rem;
  line-height: 2.25rem;
  margin: 0 0 0.6em;
}

h4 {
  font-size: 1.5rem;
  line-height: 2rem;
  margin: 0 0 0.7em;
}

h5 {
  font-size: 1.25rem;
  line-height: 1.75rem;
  margin: 0 0 0.8em;
}

h6 {
  font-size: 1.125rem;
  line-height: 1.75rem;
  margin: 0 0 0.9em;
}

p {
  margin-bottom: 1.5em;
}

strong,
b {
  font-weight: 600;
}

dfn,
cite,
em,
i {
  font-style: italic;
}

blockquote {
  margin: 0 0 1.5em;
  padding-inline-start: 1.25em;
  border-inline-start: 3px solid #254e7b;
  color: #5d5d61;
  font-size: 1.125rem;
  line-height: 1.5;
}

address {
  margin: 0 0 1.5em;
}

pre {
  background: #f7f7f8;
  font-family: "JetBrains Mono", "Courier 10 Pitch", courier, monospace;
  line-height: 1.6;
  margin-bottom: 1.6em;
  max-width: 100%;
  overflow: auto;
  padding: 1.6em;
  border-radius: 6px;
}

code,
kbd,
tt,
var {
  font-family: "JetBrains Mono", monaco, consolas, "Andale Mono", "DejaVu Sans Mono", monospace;
}

abbr,
acronym {
  border-bottom: 1px dotted #8e8e92;
  cursor: help;
}

mark,
ins {
  background: #fff9c0;
  text-decoration: none;
}

big {
  font-size: 125%;
}

/* Elements
--------------------------------------------- */
body {
  background: #ffffff;
  color: #242424;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  /* Off-canvas dropdown sub-menus (absolute, opacity-hidden) can extend
   * past the viewport and open a horizontal scrollbar. clip (not hidden)
   * so fixed-position elements keep working. */
  overflow-x: clip;
}

hr {
  background-color: #e0e0e2;
  border: 0;
  height: 1px;
  margin-bottom: 1.5em;
}

ul,
ol {
  margin: 0 0 1.5em 3em;
}

ul {
  list-style: disc;
}

ol {
  list-style: decimal;
}

li > ul,
li > ol {
  margin-bottom: 0;
  margin-left: 1.5em;
}

dt {
  font-weight: 700;
}

dd {
  margin: 0 1.5em 1.5em;
}

/* Make sure embeds and iframes fit their containers. */
embed,
iframe,
object {
  max-width: 100%;
}

img {
  height: auto;
  max-width: 100%;
}

figure {
  margin: 1em 0;
}

table {
  margin: 0 0 1.5em;
  width: 100%;
}

/* Links
--------------------------------------------- */
a {
  color: #254e7b;
  text-decoration: none;
  transition: color 0.15s ease;
}
a:visited {
  color: #1b3a5e;
}
a:hover, a:focus, a:active {
  color: #007eb0;
}
a:focus {
  outline: thin dotted;
}
a:hover, a:active {
  outline: 0;
}

/* Forms
--------------------------------------------- */
button,
input[type=button],
input[type=reset],
input[type=submit] {
  border: 1px solid;
  border-color: #254e7b #1b3a5e #1b3a5e;
  border-radius: 6px;
  background: #254e7b;
  color: #ffffff;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
  font-weight: 600;
  line-height: 1;
  padding: 0.7em 1.2em;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
button:hover,
input[type=button]:hover,
input[type=reset]:hover,
input[type=submit]:hover {
  border-color: #1b3a5e #1b3a5e #1b3a5e;
  background: #1b3a5e;
}
button:active, button:focus,
input[type=button]:active,
input[type=button]:focus,
input[type=reset]:active,
input[type=reset]:focus,
input[type=submit]:active,
input[type=submit]:focus {
  border-color: #1b3a5e #1b3a5e #1b3a5e;
}
button:focus-visible,
input[type=button]:focus-visible,
input[type=reset]:focus-visible,
input[type=submit]:focus-visible {
  outline: 2px solid #007eb0;
  outline-offset: 2px;
}

input[type=text],
input[type=email],
input[type=url],
input[type=password],
input[type=search],
input[type=number],
input[type=tel],
input[type=range],
input[type=date],
input[type=month],
input[type=week],
input[type=time],
input[type=datetime],
input[type=datetime-local],
input[type=color],
textarea {
  color: #444447;
  border: 1px solid #e0e0e2;
  border-radius: 6px;
  padding: 0.6em 0.8em;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
  background: #ffffff;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
input[type=text]:focus,
input[type=email]:focus,
input[type=url]:focus,
input[type=password]:focus,
input[type=search]:focus,
input[type=number]:focus,
input[type=tel]:focus,
input[type=range]:focus,
input[type=date]:focus,
input[type=month]:focus,
input[type=week]:focus,
input[type=time]:focus,
input[type=datetime]:focus,
input[type=datetime-local]:focus,
input[type=color]:focus,
textarea:focus {
  color: #1a1a1c;
  border-color: #254e7b;
  box-shadow: 0 0 0 3px rgba(37, 78, 123, 0.15);
}

select {
  border: 1px solid #e0e0e2;
  border-radius: 6px;
  padding: 0.6em 0.8em;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
  color: #444447;
  background: #ffffff;
}

textarea {
  width: 100%;
}

/*--------------------------------------------------------------
# Layouts
--------------------------------------------------------------*/
/*--------------------------------------------------------------
# Components
--------------------------------------------------------------*/
/* Navigation
--------------------------------------------- */
.main-navigation {
  min-width: 0;
}
.main-navigation ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.main-navigation li {
  position: relative;
}
.main-navigation a {
  display: block;
  text-decoration: none;
}
.main-navigation .sub-menu,
.main-navigation .children {
  display: flex;
  flex-direction: column;
  /* stretch overrides the align-items: center of ".main-navigation ul",
   * which also matches submenus and would center-shrink every row. */
  align-items: stretch;
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 60;
  min-width: 230px;
  padding: 0.4rem;
  background: #fff;
  border: 1px solid #e0e0e2;
  border-radius: 16px;
  box-shadow: 0 8 12 4 rgba(18, 19, 23, 0.12), 0 2 4 0 rgba(18, 19, 23, 0.12);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
}
.main-navigation .sub-menu a,
.main-navigation .children a {
  padding: 0.7rem 0.85rem;
  border-radius: 6px;
  width: auto;
  white-space: nowrap;
}
/* Top-level panels keep the classic behaviour: they open on hover. Deeper
 * levels open on click via the chevron button (.focus) and unfold downward
 * inside the panel. */
.main-navigation li.focus > .sub-menu,
.main-navigation li.focus > .children,
.main-navigation > ul > li:hover > .sub-menu,
.main-navigation > ul > li:focus-within > .sub-menu,
.main-navigation > ul > li:hover > .children,
.main-navigation > ul > li:focus-within > .children {
  display: flex;
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.main-navigation .sub-menu.ts-fixed,
.main-navigation .children.ts-fixed {
  position: fixed;
  padding-top: 0.75rem;
  transform: none;
}
/* Third menu level: rendered inline, indented inside the open dropdown
 * panel (not a separate flyout) and collapsed until its chevron is used. */
.main-navigation .sub-menu .sub-menu,
.main-navigation .children .children {
  position: static;
  display: none;
  min-width: 0;
  padding: 0.15rem 0 0.15rem 0.75rem;
  margin: 0;
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: none;
}
.main-navigation .sub-menu .sub-menu a,
.main-navigation .children .children a {
  padding: 0.4rem 0.75rem;
  font-size: 0.92em;
  opacity: 0.85;
}
/* Parent rows are link + chevron button side by side: the link fills the
 * row (full-width hover plate), the chevron is its own tap/click target.
 * The row is allowed to wrap, and the child panel takes a whole wrapped
 * line — so a nested section always unfolds BELOW its row, never beside it
 * (desktop dropdown and mobile drawer alike). */
.main-navigation .menu-item-has-children,
.main-navigation .page_item_has_children {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}
.main-navigation .menu-item-has-children > a,
.main-navigation .page_item_has_children > a {
  flex: 1 1 auto;
  min-width: 0;
}
/* Nested parent rows: basis 0 (not auto) keeps the link and its chevron on
 * one line even when the row is tight — with flex-wrap the link no longer
 * shrinks on its own, so it must grow into the leftover space instead. */
.main-navigation .sub-menu .menu-item-has-children > a,
.main-navigation .sub-menu .page_item_has_children > a,
.main-navigation .children .menu-item-has-children > a,
.main-navigation .children .page_item_has_children > a {
  flex: 1 1 0;
  width: auto;
  min-width: 0;
}
.main-navigation .menu-item-has-children > .sub-menu,
.main-navigation .page_item_has_children > .children {
  flex: 1 0 100%;
}
/* Top-level row items keep the classic pill: the chevron sits inside the
 * pill and the panel opens on hover — no separate button up there. */
.main-navigation > ul > li.menu-item-has-children > a,
.main-navigation > ul > li.page_item_has_children > a {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}
.main-navigation > ul > li.menu-item-has-children > a::after,
.main-navigation > ul > li.page_item_has_children > a::after {
  content: "";
  width: 6px;
  height: 6px;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  transition: transform 0.15s ease;
}
.main-navigation > ul > li:hover > a::after,
.main-navigation > ul > li.focus > a::after {
  transform: rotate(-135deg) translateY(-2px);
}
/* Chevron button: toggles the item's submenu without navigating — the
 * small offset from the text keeps it a comfortable touch target. */
.ts-menu-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  margin-left: 0.4rem;
  padding: 0;
  border: none;
  border-radius: 999px;
  background: transparent;
  color: #004e82;
  cursor: pointer;
}
.ts-menu-arrow:focus-visible {
  outline: 2px solid #007eb0;
  outline-offset: 2px;
}
.ts-menu-arrow::after {
  content: "";
  width: 7px;
  height: 7px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  transition: transform 0.15s ease;
}
.ts-menu-arrow:hover {
  background: #eff9ff;
}
.main-navigation li.focus > .ts-menu-arrow::after {
  transform: rotate(-135deg) translateY(-2px);
}

/* Small menu. */
.menu-toggle,
.main-navigation.toggled ul {
  display: block;
}

@media screen and (min-width: 37.5em) {
  .menu-toggle {
    display: none;
  }
  .main-navigation ul {
    display: flex;
  }
}
.site-main .comment-navigation,
.site-main .posts-navigation,
.site-main .post-navigation {
  margin: 0 0 1.5em;
}
.comment-navigation .nav-links,
.posts-navigation .nav-links,
.post-navigation .nav-links {
  display: flex;
}
.comment-navigation .nav-previous,
.posts-navigation .nav-previous,
.post-navigation .nav-previous {
  flex: 1 0 50%;
}
.comment-navigation .nav-next,
.posts-navigation .nav-next,
.post-navigation .nav-next {
  text-align: end;
  flex: 1 0 50%;
}

/* Homepage sections
--------------------------------------------- */
.ts-container {
  width: 100%;
  max-width: 1320px;
  margin-inline: auto;
  padding-inline: 24px;
}
@media (min-width: 768px) {
  .ts-container {
    padding-inline: 32px;
  }
}

.ts-section {
  padding-block: 64px;
}
@media (min-width: 1024px) {
  .ts-section {
    padding-block: 96px;
  }
}

.ts-section__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  margin-bottom: 2rem;
}
@media (min-width: 768px) {
  .ts-section__head {
    margin-bottom: 2.5rem;
  }
}
.ts-section__head--center {
  flex-direction: column;
  text-align: center;
}

.ts-section__title {
  margin: 0;
  color: #1a1a1c;
}

.ts-section__subtitle {
  margin: 0.5rem 0 0;
  color: #5d5d61;
  font-size: 1.25rem;
  line-height: 1.75rem;
}

.ts-section__link {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  color: #254e7b;
  font-weight: 600;
  font-size: 1.125rem;
  line-height: 1.75rem;
}
.ts-section__link .ts-icon {
  transition: transform 0.15s ease;
}
.ts-section__link:hover {
  color: #007eb0;
}
.ts-section__link:hover .ts-icon {
  transform: translateX(3px);
}

.ts-eyebrow {
  display: inline-block;
  margin: 0 0 0.75rem;
  color: #254e7b;
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.5rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.ts-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55em;
  padding: 0.85em 1.5em;
  border: 1px solid transparent;
  border-radius: 999px;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
  font-weight: 600;
  font-size: 1.125rem;
  line-height: 1.75rem;
  line-height: 1;
  cursor: pointer;
  text-decoration: none;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
}
.ts-btn:focus-visible {
  outline: 2px solid #007eb0;
  outline-offset: 2px;
}
.ts-btn:hover {
  text-decoration: none;
}
.ts-btn:active {
  transform: translateY(1px);
}
.ts-btn__icon {
  flex-shrink: 0;
}

.ts-btn--primary {
  background: #254e7b;
  color: #ffffff;
}
.ts-btn--primary:hover {
  background: #1b3a5e;
  color: #ffffff;
}

.ts-btn--secondary {
  background: #eff9ff;
  color: #254e7b;
  border-color: #cce3ef;
}
.ts-btn--secondary:hover {
  background: #e3f1f9;
  color: #1b3a5e;
}

.ts-btn--light {
  background: #ffffff;
  color: #1a1a1c;
}
.ts-btn--light:hover {
  background: #eff9ff;
  color: #254e7b;
}

.ts-btn--ghost {
  background: transparent;
  color: inherit;
  border-color: currentColor;
}

.ts-btn--block {
  width: 100%;
}

.ts-image-slot {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 120px;
  background: repeating-linear-gradient(135deg, rgba(37, 78, 123, 0.04) 0 14px, rgba(37, 78, 123, 0.08) 14px 28px), #eff9ff;
  border: 1px dashed rgba(37, 78, 123, 0.25);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.ts-image-slot::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at center, rgba(37, 78, 123, 0.06) 0 22px, transparent 23px);
  pointer-events: none;
}
.ts-image-slot__label {
  position: relative;
  z-index: 1;
  padding: 0.3em 0.7em;
  background: rgba(255, 255, 255, 0.75);
  border-radius: 999px;
  color: #254e7b;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
}
.ts-image-slot--filled {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-color: transparent;
}
.ts-image-slot--filled::after {
  display: none;
}

.ts-badge {
  position: absolute;
  z-index: 2;
  top: 0.75rem;
  left: 0.75rem;
  display: inline-flex;
  align-items: center;
  padding: 0.35em 0.7em;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  line-height: 1;
  color: #fff;
}
.ts-badge--new {
  background: #254e7b;
}
.ts-badge--accent {
  background: #007eb0;
}

:root {
  --ts-header-clearance: 196px;
}

.site-header {
  position: fixed;
  top: 42px;
  left: 64px;
  right: 64px;
  z-index: 100;
  box-sizing: border-box;
  padding: 1.5rem 2rem;
  border-radius: 999px;
  background: #eff9ff;
}

.ts-header__main {
  background: transparent;
}

.ts-header__main-inner {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  grid-template-rows: auto auto;
  row-gap: 0.5rem;
  align-items: center;
  width: 100%;
}
.ts-header__main-inner > .main-navigation {
  grid-column: 1/-1;
  grid-row: 2;
}
.ts-header__main-inner {
  /* Delivery & payment block fills the empty left third of the logo
   * row — mirroring the actions cluster on the right. */
}
.ts-header__main-inner > .ts-header__delivery {
  grid-column: 1;
  grid-row: 1;
  justify-self: start;
}
.ts-header__main-inner > .ts-header__brand {
  grid-column: 2;
  grid-row: 1;
}
.ts-header__main-inner > .ts-header__actions {
  grid-column: 3;
  grid-row: 1;
  justify-content: flex-end;
}

.ts-header__brand {
  flex: 0 0 auto;
  line-height: 0;
}
.ts-header__brand .custom-logo-link {
  display: block;
  width: 192px;
  height: 40px;
}
.ts-header__brand .custom-logo {
  display: block;
  width: 100%;
  height: 40px;
  object-fit: contain;
}

.ts-header__delivery {
  display: none;
  align-items: center;
  gap: 0.625rem;
  /* The nav links carry a 1rem left padding — match it so the label
   * lines up with the first menu item's text ("Novinki"). */
  padding-left: 1rem;
  height: 44px;
  white-space: nowrap;
}
@media (min-width: 768px) {
  .ts-header__delivery {
    display: flex;
  }
}

.ts-header__delivery-label {
  color: #444547;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
  font-size: 0.875rem;
  line-height: 20px;
  text-decoration: none;
  transition: color 0.15s ease;
}
.ts-header__delivery-label:hover, .ts-header__delivery-label:focus, .ts-header__delivery-label:active {
  color: #007eb0;
}

.ts-header__delivery-sep {
  width: 1px;
  height: 20px;
  background: #e4e4e4;
}

.ts-header__delivery-phone {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  color: #254e7b;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 20px;
  letter-spacing: 0.01em;
  text-decoration: none;
  transition: color 0.15s ease;
}
.ts-header__delivery-phone:hover, .ts-header__delivery-phone:focus, .ts-header__delivery-phone:active, .ts-header__delivery-phone:visited {
  color: #007eb0;
}

.ts-header__delivery-icon {
  flex: 0 0 auto;
  color: #004e82;
}

/* Tablets and narrow laptops keep the row comfortable: the label drops
 * out and the phone stays (the full pair returns from xl up). */
@media (max-width: 1279px) {
  .ts-header__delivery-label,
  .ts-header__delivery-sep {
    display: none;
  }
}
@media (max-width: 1279px) {
  .site-header {
    top: 2.625rem;
    left: 2.875rem;
    right: 2.875rem;
  }
  .ts-header__brand .custom-logo-link {
    width: 148px;
    height: 32px;
  }
  .ts-header__brand .custom-logo {
    height: 32px;
  }
}
.ts-logo {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: #1a1a1c;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-weight: 700;
  font-size: 1.25rem;
  line-height: 1.75rem;
  text-decoration: none;
  letter-spacing: -0.01em;
}
.ts-logo__mark {
  color: #254e7b;
}
.ts-logo__text {
  text-transform: lowercase;
}
.ts-logo:hover {
  color: #254e7b;
}
.ts-logo--footer {
  color: #fff;
}
.ts-logo--footer:hover {
  color: #fff;
}
.ts-logo--footer .ts-logo__mark {
  color: rgba(255, 255, 255, 0.9);
}

.main-navigation {
  position: relative;
  display: flex;
  justify-content: flex-start;
  min-width: 0;
}
.main-navigation ul {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.main-navigation ul::-webkit-scrollbar {
  display: none;
}
.main-navigation a {
  display: block;
  flex-shrink: 0;
  padding: 0.75rem 1rem;
  border: 1px solid transparent;
  border-radius: 999px;
  color: #004e82;
  font-weight: 400;
  font-size: 1.125rem;
  line-height: 1.75rem;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.main-navigation a:hover {
  background: #eff9ff;
  color: #254e7b;
}
.main-navigation .current-menu-item > a,
.main-navigation .current_page_item > a {
  border-color: #004e82;
  background: rgba(0, 173, 241, 0.24);
  color: #004e82;
}

.ts-header__actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-shrink: 0;
}

.ts-header__action {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  height: 44px;
  border: none;
  border-radius: 999px;
  background: transparent;
  color: #444547;
  cursor: pointer;
  text-decoration: none;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.ts-header__action:focus-visible {
  outline: 2px solid #007eb0;
  outline-offset: 2px;
}
.ts-header__action:hover {
  background: #eff9ff;
  color: #254e7b;
}
.ts-header__action--text {
  width: auto;
  min-width: 80px;
  padding: 0 1rem;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-weight: 400;
  font-size: 1.125rem;
  line-height: 1.75rem;
  gap: 0.5rem;
  text-transform: none;
  color: #444547;
}

@media (max-width: 1023px) {
  .ts-header__actions {
    gap: 0.25rem;
  }
  .ts-header__action {
    min-width: 38px;
  }
  .ts-header__search {
    width: 44px;
  }
  .ts-header__action--text {
    min-width: 44px;
    padding: 0 0.5rem;
  }
}
.ts-header__lang-chevron {
  width: 6px;
  height: 6px;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
}

.ts-header__search {
  position: relative;
  /* While the input is open the button keeps an emphasized surface so its
   * "active" state stays distinguishable from the idle icon. */
}
.ts-header__search.is-open .ts-header__action--search {
  background: #cce3ef;
  color: #254e7b;
}
.ts-header__search.is-open .ts-header__search-form {
  visibility: visible;
  width: min(480px, 56vw);
  opacity: 1;
}
@media (max-width: 1023px) {
  .ts-header__search.is-open .ts-header__search-form {
    width: min(320px, 42vw);
  }
}

.ts-header__search-form {
  position: absolute;
  top: 50%;
  right: calc(100% + 0.5rem);
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 0;
  overflow: hidden;
  visibility: hidden;
  opacity: 0;
  transform: translateY(-50%);
  transition: width 0.25s ease, opacity 0.2s ease, visibility 0.25s;
}

.ts-header__search-form .ts-header__search-input {
  flex: 1 1 auto;
  min-width: 0;
  height: 44px;
  padding: 12px 16px;
  border: 1px solid #dbdbdb;
  border-radius: 12px;
  background: #fff;
  color: #444547;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
  font-size: 14px;
  line-height: 20px;
  /* The header field stays flat — no focus ring of its own (the base
   * form reset's outline + shadow are suppressed for this input only). */
}
.ts-header__search-form .ts-header__search-input:hover, .ts-header__search-form .ts-header__search-input:focus, .ts-header__search-form .ts-header__search-input:focus-visible {
  outline: none;
  outline-offset: 0;
  box-shadow: none;
  border-color: #3398c0;
}
.ts-header__search-form .ts-header__search-input::placeholder {
  color: #8e8e8e;
}
.ts-header__search-form .ts-header__search-input {
  /* Hide the native clear button — we provide our own close. */
}
.ts-header__search-form .ts-header__search-input::-webkit-search-cancel-button {
  -webkit-appearance: none;
}

.ts-lang {
  position: relative;
}
.ts-lang__btn {
  gap: 0.4rem;
}
.ts-lang__chevron {
  width: 6px;
  height: 6px;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  transform: rotate(45deg) translateY(-3px);
  transition: transform 0.15s ease;
}
.ts-lang__list {
  position: absolute;
  top: calc(100% + 0.4rem);
  right: 0;
  z-index: 50;
  min-width: 140px;
  margin: 0;
  padding: 0.4rem;
  list-style: none;
  background: #fff;
  border: 1px solid #e0e0e2;
  border-radius: 16px;
  box-shadow: 0 8 12 4 rgba(18, 19, 23, 0.12), 0 2 4 0 rgba(18, 19, 23, 0.12);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
}
.ts-lang.is-open .ts-lang__list {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.ts-lang.is-open .ts-lang__chevron {
  transform: rotate(-135deg) translateY(-2px);
}
.ts-lang__link {
  display: block;
  padding: 0.6rem 0.85rem;
  border-radius: 6px;
  color: #1a1a1c;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-weight: 400;
  font-size: 1.125rem;
  line-height: 1.75rem;
  text-decoration: none;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.ts-lang__link:hover {
  background: #eff9ff;
  color: #254e7b;
}
.ts-lang__link--current {
  font-weight: 600;
  color: #254e7b;
}

.ts-drawer-search {
  display: none;
}

.menu-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  height: 44px;
  border: none;
  border-radius: 999px;
  background: transparent;
  color: #1a1a1c;
  cursor: pointer;
}
.menu-toggle:hover, .menu-toggle:active, .menu-toggle:focus {
  background: #eff9ff;
  color: #254e7b;
}
.menu-toggle .menu-toggle__close {
  display: none;
}
.menu-toggle[aria-expanded=true] .menu-toggle__open {
  display: none;
}
.menu-toggle[aria-expanded=true] .menu-toggle__close {
  display: inline-flex;
}
@media (max-width: 767px) {
  .menu-toggle {
    display: inline-flex;
  }
}

@media (max-width: 768px) {
  :root {
    --ts-header-clearance: 102px;
  }
  .site-header {
    top: 2.625rem;
    left: 1rem;
    right: 1rem;
    padding: 0.5rem 1rem;
    border-radius: 999px;
  }
  .ts-header__main-inner {
    grid-template-columns: auto 1fr auto;
    grid-template-rows: auto;
    gap: 0.5rem;
  }
  .ts-header__main-inner > .main-navigation {
    grid-column: 1;
    grid-row: 1;
  }
  .ts-header__main-inner > .ts-header__brand {
    grid-column: 2;
    grid-row: 1;
  }
  .ts-header__main-inner > .ts-header__actions {
    grid-column: 3;
    grid-row: 1;
  }
  .ts-header__brand {
    justify-self: center;
  }
  .ts-header__brand .custom-logo-link,
  .ts-header__brand .custom-logo {
    width: 144px;
    height: 32px;
  }
  .main-navigation {
    position: static;
  }
  .main-navigation ul {
    display: none;
  }
  .main-navigation.toggled ul {
    display: flex;
    position: absolute;
    top: calc(100% + 0.5rem);
    /* main-inner (the anchor) sits inside the header's 1rem side
     * padding — pull the drawer out by the same amount so it spans
     * exactly the header pill's width. */
    left: -1rem;
    right: -1rem;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 0;
    /* iOS: 100vh includes the strip behind Safari's bottom toolbar,
     * so the last items of an open submenu land in an invisible zone
     * and the scroll rubber-bands back (WebKit bug 141832). The
     * dynamic viewport unit tracks the visible area instead; the vh
     * line above stays as the fallback for old browsers. */
    max-height: calc(100vh - 8rem);
    max-height: calc(100dvh - 8rem);
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding: 0.5rem;
    /* Keep the very last row clear of the home indicator. */
    padding-bottom: max(0.5rem, env(safe-area-inset-bottom));
    background: #fff;
    border: 1px solid #e0e0e2;
    border-radius: 16px;
    box-shadow: 0 8 12 4 rgba(18, 19, 23, 0.12), 0 2 4 0 rgba(18, 19, 23, 0.12);
  }
  .main-navigation.toggled ul::-webkit-scrollbar {
    width: 4px;
  }
  .main-navigation.toggled ul::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: #cce3ef;
  }
  .main-navigation.toggled ul a {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 0.85rem 1rem;
    border-radius: 6px;
  }
  .main-navigation.toggled ul a:hover {
    background: #eff9ff;
  }
  .main-navigation.toggled .sub-menu, .main-navigation.toggled .children {
    position: static;
    display: none;
    min-width: 0;
    padding: 0 0 0 0.75rem;
    margin: 0;
    background: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: none;
  }
  .main-navigation.toggled li.focus > .sub-menu, .main-navigation.toggled li.focus > .children {
    display: flex;
    flex-direction: column;
  }
  /* Drawer top-level rows: the in-pill chevron is pushed to the row's right
   * end (classic look); nested rows keep their separate arrow button. */
  .main-navigation.toggled > ul > li.menu-item-has-children > a,
  .main-navigation.toggled > ul > li.page_item_has_children > a {
    justify-content: space-between;
    gap: 0.75rem;
  }
  /* Finger-sized chevron: the whole button (not just the glyph) is the
   * tap target that toggles the section without navigating. */
  .ts-menu-arrow {
    width: 44px;
    height: 44px;
    margin-left: 0.25rem;
  }
  .ts-header__actions {
    gap: 0;
  }
  .ts-header__actions .ts-header__search,
  .ts-header__actions .ts-lang,
  .ts-header__actions .ts-header__action--account {
    display: none;
  }
  .ts-drawer-search {
    display: block;
    padding: 0.25rem 0.25rem 0.75rem;
    border-bottom: 1px solid #e0e0e2;
    margin-bottom: 0.5rem;
    -webkit-tap-highlight-color: transparent;
  }
  .ts-drawer-search__pill {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    height: 46px;
    padding: 0 0.3rem 0 1rem;
    border: 1px solid #dbdbdb;
    border-radius: 999px;
    background: #fff;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
  }
  .ts-drawer-search__pill:focus-within {
    border-color: #3398c0;
    box-shadow: 0 0 0 3px rgba(51, 152, 192, 0.18);
  }
  .ts-drawer-search__icon {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    color: #004e82;
  }
  .ts-drawer-search form {
    display: flex;
    flex: 1 1 auto;
    min-width: 0;
  }
  .ts-drawer-search {
    /* Element-level selector beats the global input[type="search"]
     * skin (border + radius + shadow) — only the outer pill border
     * remains. */
  }
  .ts-drawer-search form input {
    flex: 1 1 auto;
    min-width: 0;
    border: none;
    border-radius: 0;
    padding: 0;
    background: transparent;
    box-shadow: none;
    color: #1a1a1c;
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    font-size: 15px;
    line-height: 20px;
  }
  .ts-drawer-search form input::placeholder {
    color: #9a9a9a;
  }
  .ts-drawer-search form input:focus {
    border: none;
    box-shadow: none;
    outline: none;
    color: #1a1a1c;
  }
  .ts-drawer-search form input {
    /* Kill the webkit search decorations (x button, inset look) */
  }
  .ts-drawer-search form input::-webkit-search-decoration, .ts-drawer-search form input::-webkit-search-cancel-button, .ts-drawer-search form input::-webkit-search-results-button, .ts-drawer-search form input::-webkit-search-results-decoration {
    -webkit-appearance: none;
  }
  .ts-drawer-search__divider {
    flex: 0 0 auto;
    width: 1px;
    height: 22px;
    background: #e4e4e4;
  }
  .ts-drawer-lang {
    position: relative;
    flex: 0 0 auto;
    -webkit-tap-highlight-color: transparent;
  }
  .ts-drawer-lang__btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    height: 34px;
    padding: 0 0.7rem;
    border: none;
    border-radius: 999px;
    background: transparent;
    color: #004e82;
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0.02em;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background-color 0.15s ease, color 0.15s ease;
    /* Light brand feedback only — never the mobile default dark
     * tap overlay (suppressed via -webkit-tap-highlight-color). */
  }
  .ts-drawer-lang__btn:hover, .ts-drawer-lang__btn:active, .ts-drawer-lang__btn:focus-visible {
    background: #eff9ff;
    color: #254e7b;
    outline: none;
  }
  .ts-drawer-lang__chevron {
    width: 6px;
    height: 6px;
    border-right: 1px solid currentColor;
    border-bottom: 1px solid currentColor;
    transform: rotate(45deg) translateY(-2px);
    transition: transform 0.15s ease;
  }
  .ts-drawer-lang__list {
    position: absolute;
    top: calc(100% + 0.5rem);
    right: 0;
    z-index: 60;
    min-width: 132px;
    margin: 0;
    padding: 0.4rem;
    list-style: none;
    background: #fff;
    border: 1px solid #e0e0e2;
    border-radius: 16px;
    box-shadow: 0 8 12 4 rgba(18, 19, 23, 0.12), 0 2 4 0 rgba(18, 19, 23, 0.12);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px);
    transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
  }
  .ts-drawer-lang.is-open .ts-drawer-lang__list {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }
  .ts-drawer-lang.is-open .ts-drawer-lang__chevron {
    transform: rotate(-135deg) translateY(-2px);
  }
  .ts-drawer-lang__link {
    display: block;
    padding: 0.6rem 0.85rem;
    border-radius: 6px;
    color: #1a1a1c;
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-weight: 400;
    font-size: 1.125rem;
    line-height: 1.75rem;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
    transition: background-color 0.15s ease, color 0.15s ease;
  }
  .ts-drawer-lang__link:hover, .ts-drawer-lang__link:active {
    background: #eff9ff;
    color: #254e7b;
  }
  .ts-drawer-lang__link--current {
    font-weight: 600;
    color: #254e7b;
  }
  .ts-drawer-lang {
    /* The options list is a <ul> inside the drawer, so the generic
     * ".main-navigation.toggled ul" rule (left:0/right:0 stretch,
     * higher specificity) re-anchors it to the button's LEFT edge and
     * the drawer clips it on the right. This override outranks it and
     * pins the list to the right edge — the options grow leftward. */
  }
  .ts-drawer-lang ul.ts-drawer-lang__list {
    left: auto;
    right: 0;
    width: auto;
  }
}
.ts-search {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
}
.ts-search__icon {
  flex-shrink: 0;
  color: #5d5d61;
}
.ts-search__field {
  flex: 1 1 auto;
  border: none;
  background: transparent;
  padding: 0.4rem 0;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
  color: #1a1a1c;
}
.ts-search__field:focus {
  outline: none;
}
.ts-search__field::placeholder {
  color: #8e8e92;
}

.ts-footer {
  background: #fff;
  color: #444547;
  font-family: Inter, sans-serif;
}
.ts-footer__main {
  display: grid;
  grid-template-columns: minmax(0, 728px) minmax(224px, 422px) minmax(348px, 576px);
  justify-content: space-between;
  gap: 34px;
  max-width: 1792px;
  margin: 0 auto;
  padding: 74px 0 42px;
}
.ts-footer__brand {
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.ts-footer .custom-logo-link, .ts-footer__fallback-logo {
  display: block;
  width: 302px;
  height: 59px;
}
.ts-footer .custom-logo, .ts-footer__fallback-logo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: left center;
}
.ts-footer__description {
  max-width: 576px;
  font-size: 1.125rem;
  font-weight: 300;
  line-height: 28px;
}
.ts-footer__description strong {
  font-weight: 600;
}
.ts-footer__socials {
  display: flex;
  gap: 16px;
  margin-top: 10px;
}
.ts-footer__socials a,
.ts-footer__socials img {
  display: block;
  width: 32px;
  height: 32px;
}
.ts-footer__contact {
  display: flex;
  flex-direction: column;
  gap: 32px;
  min-height: 192px;
  padding-top: 1px;
}
.ts-footer__contact h2 {
  margin: 0;
  color: #232323;
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 28px;
}
.ts-footer__contact ul,
.ts-footer__contact .menu {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.ts-footer__contact li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 1rem;
  line-height: 24px;
}
.ts-footer__contact img {
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
  margin-top: 2px;
}
.ts-footer__contact a,
.ts-footer__contact span {
  color: #444547;
  text-decoration: none;
}
.ts-footer__menu {
  padding-bottom: 1px;
}
.ts-footer__menu .menu {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.ts-footer__menu a {
  color: #444547;
  font-size: 1rem;
  line-height: 24px;
  text-decoration: none;
}
.ts-footer__menus {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  /* Skip the "Linkuri utile" heading height (28px + 32px gap) so the
   * first menu links line up with the phone row. */
  padding-top: 60px;
  gap: 34px;
}
.ts-footer__bottom {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 16px 64px;
  border-top: 1px solid #d9d9d9;
  color: #181818;
  font-size: 0.875rem;
  line-height: 20px;
}
.ts-footer__bottom p {
  margin: 0;
}
.ts-footer__legal {
  display: flex;
  align-items: center;
  gap: 8px;
}
.ts-footer__legal a {
  color: #006699;
  text-decoration: none;
}

/* 1280–1919: full-width main with the standard 64px gutters (the wide
 * layout's centered max-width only applies at 1920+). */
@media (max-width: 1919px) {
  .ts-footer__main {
    max-width: none;
    padding-right: 64px;
    padding-left: 64px;
  }
}
/* 769–1279: no room for three side-by-side columns — keep the brand on
 * the left (spanning) and stack contacts + menus to its right, so the
 * row stays filled instead of breaking into empty bands. */
@media (max-width: 1279px) {
  .ts-footer__main {
    grid-template-columns: minmax(280px, 384px) minmax(0, 1fr);
    grid-template-rows: auto auto;
    column-gap: 32px;
    row-gap: 42px;
    max-width: none;
    padding: 74px 64px 42px;
  }
  .ts-footer__brand {
    grid-column: 1;
    grid-row: 1/3;
  }
  .ts-footer__contact {
    grid-column: 2;
    grid-row: 1;
  }
  .ts-footer__menus {
    grid-column: 2;
    grid-row: 2;
    align-self: start;
    padding-top: 0;
  }
  .ts-footer__description {
    max-width: 352px;
  }
}
/* 768px (not 767) — the three-column layout does not fit at exactly 768
 * and its menu links stretched the page horizontally. */
@media (max-width: 768px) {
  .ts-footer__main {
    display: flex;
    flex-direction: column;
    gap: 34px;
    padding: 40px 16px 32px;
  }
  .ts-footer__brand {
    gap: 32px;
  }
  .ts-footer__description {
    max-width: none;
  }
  .ts-footer__socials {
    margin-top: 10px;
  }
  .ts-footer__contact {
    gap: 32px;
    min-height: 0;
  }
  .ts-footer__menus {
    width: 100%;
    padding-top: 0;
    gap: 16px;
  }
  .ts-footer__bottom {
    padding: 16px;
  }
}
.ts-hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 1092px;
  padding: calc(var(--ts-header-clearance, 144px) + 4rem) 4rem 4rem;
  background: linear-gradient(236.4deg, #cce3ef 19.43%, #78a0c4 41.86%, #254e7b 93.44%);
  overflow: hidden;
}
.ts-hero::before {
  position: absolute;
  top: 50%;
  left: 30.43%;
  width: 100%;
  aspect-ratio: 2196/1254;
  background-image: var(--ts-hero-image, none);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  content: "";
  pointer-events: none;
  transform: translateY(-50%);
}
.ts-hero__content {
  position: relative;
  z-index: 1;
  width: min(755px, 100%);
  color: #f5f5f5;
}
.ts-hero__copy {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}
.ts-hero__title {
  margin: 0;
  color: #f5f5f5;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 6rem;
  font-weight: 400;
  line-height: 6rem;
  letter-spacing: -0.125rem;
}
.ts-hero__title span,
.ts-hero__title strong {
  display: block;
  white-space: nowrap;
}
.ts-hero__title strong {
  margin-top: 8px;
  font-weight: 600;
}
.ts-hero__text {
  max-width: 42rem;
  margin: 0;
  color: #f5f5f5;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 1.5rem;
  line-height: 1.333;
}
.ts-hero__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  min-height: 44px;
  margin-top: 2.625rem;
  padding: 0 1rem;
  border-radius: 999px;
  background: #fff;
  color: #00366b;
  font-size: 0.875rem;
  text-decoration: none;
}
.ts-hero__button:focus-visible {
  outline: 2px solid #007eb0;
  outline-offset: 2px;
}
.ts-hero__button:hover {
  background: #eff9ff;
  color: #004e82;
}

@media (max-width: 1279px) {
  .ts-hero {
    background: linear-gradient(250.5deg, #cce3ef 19.43%, #78a0c4 41.86%, #254e7b 93.44%);
  }
  .ts-hero::before {
    left: 17.71%;
    width: 186.75%;
  }
  .ts-hero__content {
    width: min(460px, 100%);
  }
  .ts-hero__title span,
  .ts-hero__title strong {
    white-space: normal;
  }
}
@media (max-width: 767px) {
  .ts-hero {
    justify-content: center;
    min-height: 857px;
    padding: calc(var(--ts-header-clearance, 102px) + 2rem) 1rem 4rem;
    text-align: center;
    background: linear-gradient(260.2deg, #cce3ef 19.43%, #78a0c4 41.86%, #254e7b 93.44%);
  }
  .ts-hero::before {
    left: -19.7%;
    width: 384.81%;
  }
  .ts-hero__content {
    width: 100%;
  }
  .ts-hero__copy {
    gap: 2rem;
    align-items: center;
  }
  .ts-hero__title {
    font-size: 2.75rem;
    line-height: 3rem;
  }
  .ts-hero__text {
    font-size: 1.25rem;
    line-height: 1.4;
  }
  .ts-hero__button {
    width: 100%;
    margin-top: 2.625rem;
  }
}
.ts-cat-tile__link {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  color: #1a1a1c;
  text-decoration: none;
}
.ts-cat-tile__media {
  aspect-ratio: 1/1;
  border-radius: 10px;
  transition: transform 0.2s ease;
}
.ts-cat-tile__title {
  font-weight: 600;
  font-size: 1.125rem;
  line-height: 1.75rem;
  color: #1a1a1c;
}
.ts-cat-tile__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  color: #254e7b;
  font-weight: 600;
  font-size: 0.8125rem;
}
.ts-cat-tile__arrow {
  transition: transform 0.15s ease;
}
.ts-cat-tile__link:hover .ts-cat-tile__media {
  transform: translateY(-3px);
}
.ts-cat-tile__link:hover .ts-cat-tile__cta {
  color: #007eb0;
}
.ts-cat-tile__link:hover .ts-cat-tile__arrow {
  transform: translateX(3px);
}

.ts-sortiment {
  padding: 74px 64px;
  --ts-sortiment-gap: 32px;
}
.ts-sortiment > .ts-container {
  max-width: none;
  padding-inline: 0;
}
.ts-sortiment > .ts-container > .ts-section__head {
  width: fit-content;
  max-width: 100%;
  margin-bottom: 44px;
}
.ts-sortiment__title {
  margin: 0;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 2.75rem;
  font-weight: 600;
  line-height: 48px;
  letter-spacing: -0.125rem;
}
.ts-sortiment__viewport {
  overflow: hidden;
}
.ts-sortiment__track {
  display: flex;
  gap: var(--ts-sortiment-gap);
  margin: 0;
  padding: 0;
  list-style: none;
  /* Track-translation carousel (js/sliders.js) — matches the sale
   * slider's easing. */
  transition: transform 500ms cubic-bezier(0.25, 0.1, 0.25, 1);
}
.ts-sortiment {
  /* Four tiles per row inside the container (32px gap:
   * 4 × calc(25% - 24px) + 3 × 32px = 100%), like the cart slider. */
}
.ts-sortiment__item {
  flex: 0 0 calc(25% - 24px);
}
.ts-sortiment__controls, .ts-sortiment__arrows, .ts-sortiment__arrow, .ts-sortiment__all, .ts-sortiment-card__content {
  display: flex;
  align-items: center;
}
.ts-sortiment__controls {
  gap: 16px;
  margin-top: 44px;
}
.ts-sortiment__arrows {
  gap: 4px;
}
.ts-sortiment__arrow {
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid #dbdbdb;
  border-radius: 36px;
  background: #f5f5f5;
  color: #444547;
  cursor: pointer;
}
.ts-sortiment__arrow:focus-visible {
  outline: 2px solid #007eb0;
  outline-offset: 2px;
}
.ts-sortiment__arrow {
  /* Hover lives in _button-resets.scss — one shared soft-fade rule
   * for every slider arrow. */
}
.ts-sortiment__all {
  justify-content: center;
  min-height: 44px;
  padding: 0 16px;
  border-radius: 32px;
  background: #007eb0;
  color: #fff;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 20px;
  text-decoration: none;
  white-space: nowrap;
}
.ts-sortiment__all:hover, .ts-sortiment__all:focus, .ts-sortiment__all:active, .ts-sortiment__all:visited {
  color: #fff;
}

.ts-sortiment-card {
  position: relative;
  display: flex;
  align-items: flex-end;
  width: 100%;
  height: auto;
  aspect-ratio: 20/23;
  padding: 0 16px 24px 24px;
  border-radius: 32px;
  overflow: hidden;
  color: #111;
  text-decoration: none;
  background: #e3f1f9;
}
.ts-sortiment-card__media {
  position: absolute;
  inset: 0;
  border: 0;
  border-radius: 0;
  background-color: #e3f1f9;
}
.ts-sortiment-card__content {
  position: relative;
  z-index: 1;
  justify-content: space-between;
  width: 100%;
}
.ts-sortiment-card__copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.ts-sortiment-card__badge {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 20px;
}
.ts-sortiment-card__name {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 32px;
}
.ts-sortiment-card__icon {
  flex: 0 0 20px;
}

@media (max-width: 1279px) {
  .ts-sortiment__item {
    flex-basis: 432px;
  }
}
@media (max-width: 767px) {
  .ts-sortiment {
    padding: 40px 16px;
    --ts-sortiment-gap: 8px;
  }
  .ts-sortiment > .ts-container > .ts-section__head {
    width: 382px;
    margin-bottom: 24px;
  }
  .ts-sortiment__title {
    font-size: 2.25rem;
    line-height: 40px;
    letter-spacing: 0;
  }
  .ts-sortiment__item {
    flex-basis: 171px;
  }
  .ts-sortiment__controls {
    margin-top: 24px;
  }
  .ts-sortiment-card {
    padding: 0 12px 12px;
    border-radius: 12px;
  }
  .ts-sortiment-card__badge {
    font-size: 0.75rem;
    line-height: 16px;
  }
  .ts-sortiment-card__name {
    font-size: 1.125rem;
    line-height: 28px;
  }
  .ts-sortiment-card__icon {
    flex-basis: 16px;
    width: 16px;
    height: 16px;
  }
}
.ts-summer {
  padding: 74px 64px;
  --ts-summer-gap: 32px;
}
.ts-summer > .ts-container {
  max-width: none;
  padding-inline: 0;
}
.ts-summer > .ts-container > .ts-section__head {
  margin-bottom: 44px;
}
.ts-summer__title {
  margin: 0;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 2.75rem;
  font-weight: 600;
  line-height: 48px;
  letter-spacing: -0.125rem;
}
.ts-summer__viewport {
  overflow: hidden;
}
.ts-summer__grid {
  display: flex;
  gap: var(--ts-summer-gap);
  margin: 0;
  padding: 0;
  list-style: none;
  /* Endless track-translation carousel (js/sliders.js) — the same
   * single-row mechanics as the Sortiment slider, on every width. */
  transition: transform 500ms cubic-bezier(0.25, 0.1, 0.25, 1);
}
.ts-summer {
  /* Four cards per row inside the container (32px gap:
   * 4 × calc(25% - 24px) + 3 × 32px = 100%), like the sortiment track. */
}
.ts-summer__item {
  flex: 0 0 calc(25% - 24px);
}
.ts-summer__controls, .ts-summer__arrows, .ts-summer__arrow, .ts-summer__all, .ts-summer-card__panel, .ts-summer-card__button {
  display: flex;
  align-items: center;
}
.ts-summer__controls {
  gap: 16px;
  margin-top: 44px;
}
.ts-summer__arrows {
  gap: 4px;
}
.ts-summer__arrow {
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid #dbdbdb;
  border-radius: 36px;
  background: #f5f5f5;
  color: #444547;
  cursor: pointer;
}
.ts-summer__arrow:focus-visible {
  outline: 2px solid #007eb0;
  outline-offset: 2px;
}
.ts-summer__arrow {
  /* Hover lives in _button-resets.scss — one shared soft-fade rule
   * for every slider arrow. */
}
.ts-summer__all {
  justify-content: center;
  min-height: 44px;
  padding: 0 16px;
  border-radius: 32px;
  background: #007eb0;
  color: #fff;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 20px;
  text-decoration: none;
  white-space: nowrap;
}
.ts-summer__all:hover, .ts-summer__all:visited {
  color: #fff;
}

.ts-summer-card {
  position: relative;
  display: flex;
  align-items: flex-end;
  height: 584px;
  padding: 0 16px 24px;
  border-radius: 32px;
  overflow: hidden;
  color: #fff;
  text-decoration: none;
}
.ts-summer-card:hover, .ts-summer-card:visited {
  color: #fff;
}
.ts-summer-card__media {
  position: absolute;
  inset: 0;
  border: 0;
  border-radius: 0;
  /* Longhand on purpose: a background shorthand here would reset the
   * --filled slot's background-size/position (declared earlier in the
   * cascade) and the photo would tile inside the card. */
  background-color: #d9d9d9;
}
.ts-summer-card::before {
  position: absolute;
  inset: 0;
  content: "";
  background: rgba(0, 0, 0, 0.2);
  pointer-events: none;
}
.ts-summer-card {
  /* Frosted glass panel over the photo's continuation — the photo flows
   * behind it, so the card reads as one piece (Figma 211-3439: 1px #e8e8e8
   * border, 16px radius, rgba(108,117,132,.04), 8px backdrop blur). */
}
.ts-summer-card__panel {
  position: relative;
  z-index: 1;
  flex-direction: column;
  justify-content: flex-end;
  gap: 12px;
  width: 100%;
  padding: 16px 12px;
  border: 1px solid #e8e8e8;
  border-radius: 16px;
  background: rgba(108, 117, 132, 0.04);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.ts-summer-card__title {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 1.875rem;
  font-weight: 600;
  line-height: 36px;
  color: #f5f5f5;
  text-align: center;
}
.ts-summer-card__button {
  justify-content: center;
  height: 44px;
  padding: 0 16px;
  border-radius: 32px;
  background: #007eb0;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 20px;
}

@media (max-width: 1279px) {
  .ts-summer__item {
    flex-basis: 432px;
  }
}
@media (max-width: 767px) {
  .ts-summer {
    padding: 40px 16px;
    --ts-summer-gap: 8px;
  }
  .ts-summer > .ts-container > .ts-section__head {
    margin-bottom: 24px;
  }
  .ts-summer__title {
    max-width: 358px;
    font-size: 2.25rem;
    line-height: 40px;
    letter-spacing: 0;
  }
  .ts-summer {
    /* Same mobile card size as the Sortiment / sale sliders: a narrow
     * slide in an endless row instead of stacked full-width blocks. */
  }
  .ts-summer__item {
    flex-basis: 171px;
  }
  .ts-summer__controls {
    margin-top: 24px;
  }
  .ts-summer-card {
    height: 208px;
    padding: 0 8px 8px;
    border-radius: 16px;
  }
  .ts-summer-card__panel {
    gap: 6px;
    padding: 8px;
    border-radius: 8px;
  }
  .ts-summer-card__title {
    font-size: 0.875rem;
    line-height: 16px;
  }
  .ts-summer-card__button {
    height: 32px;
    font-size: 0.75rem;
    line-height: 16px;
  }
}
.ts-best-sellers {
  padding: 74px 64px;
}
.ts-best-sellers > .ts-container {
  max-width: none;
  padding-inline: 0;
}
.ts-best-sellers__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  margin-bottom: 44px;
}
.ts-best-sellers__title {
  margin: 0;
  color: #444547;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 2.75rem;
  font-weight: 600;
  line-height: 48px;
  letter-spacing: -0.125rem;
  text-align: center;
}
.ts-best-sellers__tabs {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}
.ts-best-sellers__tab {
  position: relative;
  height: 44px;
  padding: 0 12px;
  border: 0;
  background: transparent;
  color: #444547;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 20px;
  cursor: pointer;
  transition: color 0.2s ease;
}
.ts-best-sellers__tab::after {
  position: absolute;
  right: 12px;
  bottom: 6px;
  left: 12px;
  height: 2px;
  border-radius: 2px;
  background: #254e7b;
  content: "";
  transform: scaleX(0);
  transition: transform 0.2s ease;
}
.ts-best-sellers__tab:hover {
  background: transparent;
  color: #254e7b;
}
.ts-best-sellers__tab:hover::after {
  transform: scaleX(1);
}
.ts-best-sellers__tab.is-active, .ts-best-sellers__tab[aria-selected=true] {
  color: #254e7b;
  font-weight: 600;
}
.ts-best-sellers__tab.is-active::after, .ts-best-sellers__tab[aria-selected=true]::after {
  transform: scaleX(1);
}
.ts-best-sellers__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 32px;
}
.ts-best-sellers__all {
  display: flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  min-height: 44px;
  margin: 44px auto 0;
  padding: 0 16px;
  border-radius: 32px;
  background: #007eb0;
  color: #fff;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 20px;
  text-decoration: none;
}
.ts-best-sellers__all:hover, .ts-best-sellers__all:focus, .ts-best-sellers__all:active, .ts-best-sellers__all:visited {
  color: #fff;
}

.ts-best-product {
  position: relative;
  min-width: 0;
}
.ts-best-product__media-link {
  display: block;
}
.ts-best-product__media {
  /* Fluid box: keeps the design's 348×428 proportions as the card
   * resizes, so cover-cropping stays constant instead of slicing the
   * product photo from the sides. */
  aspect-ratio: 348/428;
  border: 0;
  border-radius: 32px;
  background: #cce3ef;
  overflow: hidden;
}
.ts-best-product__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ts-best-product__wish {
  position: absolute;
  top: 24px;
  right: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #254e7b;
  cursor: pointer;
  transition: transform 0.2s ease;
}
.ts-best-product__wish:hover {
  background: transparent;
  transform: translateY(-3px);
}
.ts-best-product__badge {
  /* "-X%" discount pill over the image, top-left (the heart keeps
   * the top-right corner). */
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 1;
  padding: 4px 12px;
  border-radius: 999px;
  background: #e03131;
  color: #fff;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 20px;
}
.ts-best-product__body {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-top: 16px;
}
.ts-best-product__category {
  margin-bottom: -12px;
  color: #757575;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 1rem;
  font-weight: 400;
  line-height: 24px;
}
.ts-best-product__name {
  overflow: hidden;
  color: #444547;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 32px;
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ts-best-product__price {
  display: flex;
  align-items: baseline;
  gap: 8px;
  color: #254e7b;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 32px;
  /* Discounted: struck-through old price + the active price in red,
   * always on a single line. The currency symbol sits smaller so
   * the pair fits narrow 4-up cards without shrinking the numbers. */
}
.ts-best-product__price--sale {
  color: #e03131;
}
.ts-best-product__price .woocommerce-Price-currencySymbol {
  font-size: 0.75em;
}
.ts-best-product__old-price {
  color: #757575;
  font-size: 1rem;
  font-weight: 400;
}
.ts-best-product__colors {
  display: flex;
  gap: 8px;
}
.ts-best-product__color {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  /* Real hexes now come from the term colors — a hairline ring
   * keeps light ones (Белый, Молочный…) visible on white cards. */
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.14);
}
.ts-best-product__color--white {
  border: 1px solid #dbdbdb;
  background: #f5f5f5;
}
.ts-best-product__color--pink {
  background: #eab2b4;
}
.ts-best-product__color--blue {
  background: #b3d9eb;
}
.ts-best-product__color--purple {
  background: #adade8;
}

/* Category/search grids stay 4-up between lg and xl, where each card is
 * only ~200–260px wide — scale the price pair down so both prices keep
 * fitting on one line instead of spilling out of the card. Homepage
 * grids drop to 2 columns there, so they keep the full-size prices. */
@media (min-width: 1024px) and (max-width: 1279px) {
  .ts-archive__grid .ts-best-product__price {
    gap: 6px;
    font-size: 1.125rem;
    line-height: 26px;
  }
  .ts-archive__grid .ts-best-product__old-price {
    font-size: 0.8125rem;
  }
}
@media (max-width: 1279px) {
  .ts-best-sellers__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 767px) {
  .ts-best-sellers {
    padding: 40px 16px;
  }
  .ts-best-sellers__header {
    margin-bottom: 44px;
  }
  .ts-best-sellers__title {
    max-width: 358px;
    font-size: 2.25rem;
    line-height: 40px;
    letter-spacing: 0;
  }
  .ts-best-sellers__tabs {
    gap: 12px;
    width: 100%;
  }
  .ts-best-sellers__tab {
    height: 32px;
    padding: 0 4px;
    font-size: 0.75rem;
    line-height: 16px;
  }
  .ts-best-sellers__grid {
    gap: 16px;
  }
  .ts-best-sellers__all {
    width: 100%;
    margin-top: 44px;
  }
  .ts-best-product__media {
    aspect-ratio: 171/208;
    border-radius: 16px;
  }
  .ts-best-product__badge {
    top: 8px;
    left: 8px;
    padding: 2px 8px;
    font-size: 0.75rem;
    line-height: 16px;
  }
  .ts-best-product__wish {
    top: 8px;
    right: 8px;
    width: 32px;
    height: 32px;
  }
  .ts-best-product__wish .ts-icon {
    width: 16px;
    height: 16px;
  }
  .ts-best-product__body {
    gap: 8px;
    padding-top: 12px;
  }
  .ts-best-product__category {
    margin-bottom: -6px;
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    font-size: 0.75rem;
    line-height: 16px;
  }
  .ts-best-product__name {
    font-size: 1rem;
    line-height: 24px;
  }
  .ts-best-product__price {
    font-size: 0.9375rem;
    line-height: 24px;
    gap: 6px;
  }
  .ts-best-product__old-price {
    font-size: 0.75rem;
  }
  .ts-best-product__colors {
    gap: 8px;
  }
  .ts-best-product__color {
    width: 16px;
    height: 16px;
  }
}
/* Very narrow phones (≤400px): the 2-up card drops to ~130px, so the
 * price pair gets one more size step down to stay on a single line. */
@media (max-width: 400px) {
  .ts-best-product__price {
    gap: 4px;
    font-size: 0.875rem;
  }
  .ts-best-product__old-price {
    font-size: 0.6875rem;
  }
}
.ts-golden-lady {
  padding: 74px 64px;
}
.ts-golden-lady > .ts-container {
  max-width: none;
  padding-inline: 0;
}
.ts-golden-lady__card {
  position: relative;
  height: 919px;
  border-radius: 36px;
  overflow: hidden;
  background: linear-gradient(242deg, #f8f3e9 20.831%, #cce3ef 54.921%, #80bed7 88.358%);
}
.ts-golden-lady__card::after {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  height: 100%;
  aspect-ratio: 1920/985;
  content: "";
  background-image: var(--ts-golden-lady-image, none);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  /* Mirrored and right-anchored, like the Figma frame: its image layer
   * sits inside a rotate-180 + flip-Y container, so the visual box is
   * the specified box mirrored around the card center — i.e. flush
   * right — with the model on the right of the card. */
  transform: scaleX(-1);
  pointer-events: none;
}
.ts-golden-lady__content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 778px;
  padding: 125px 0 0 80px;
}
.ts-golden-lady__title {
  max-width: 798px;
  margin: 0;
  color: #930032;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 4.5rem;
  font-weight: 600;
  line-height: 72px;
  letter-spacing: -0.125rem;
}
.ts-golden-lady__description {
  max-width: 584px;
  margin: 32px 0 0;
  color: #444547;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 1.5rem;
  font-weight: 400;
  line-height: 32px;
}
.ts-golden-lady__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  margin-top: 31px;
  padding: 0 16px;
  border-radius: 32px;
  background: #007eb0;
  color: #fff;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 20px;
  text-decoration: none;
}
.ts-golden-lady__button:hover, .ts-golden-lady__button:focus, .ts-golden-lady__button:active, .ts-golden-lady__button:visited {
  color: #fff;
}
.ts-golden-lady__official {
  margin-top: 128px;
  color: #444547;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
.ts-golden-lady__official p {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 32px;
}
.ts-golden-lady__official span {
  display: block;
  margin-top: 10px;
  color: #ce963d;
  font-size: 1.5rem;
  font-style: italic;
  font-weight: 600;
  line-height: 32px;
}
.ts-golden-lady__logo {
  display: block;
  width: 300px;
  height: 51px;
  margin-top: 10px;
  object-fit: cover;
}

@media (max-width: 1279px) {
  .ts-golden-lady__card {
    height: 1235px;
    background: linear-gradient(258.81deg, #f8f3e9 20.831%, #cce3ef 54.921%, #80bed7 88.358%);
    /* Banner moves to the bottom half of the tall card, aspect-locked
     * and flush with the card's bottom-right (Figma 239:9022: the
     * box coordinates are given inside the mirrored container, so
     * the visual position is mirrored around the card center). */
  }
  .ts-golden-lady__card::after {
    inset: auto;
    bottom: 0;
    right: -0.86%;
    width: 137.44%;
    height: auto;
  }
}
@media (max-width: 767px) {
  .ts-golden-lady {
    padding: 40px 16px;
  }
  .ts-golden-lady__card {
    height: 1235px;
    border-radius: 36px;
    background: linear-gradient(265.48deg, #f8f3e9 20.831%, #cce3ef 54.921%, #80bed7 88.358%);
  }
  .ts-golden-lady__card::after {
    right: -27.68%;
    width: 328.87%;
  }
  .ts-golden-lady__logo {
    display: block;
    width: 207px;
    height: 35px;
    /* display:block ignores the centered text-align — pull it to
     * the middle of the centered block. */
    margin: 10px auto 0;
  }
  .ts-golden-lady__content {
    align-items: center;
    width: 100%;
    /* Photo (the ::after layer) starts ~681px into the card; the
     * tighter top padding keeps the "GOLDEN LADY" logo block clear
     * of the model's head instead of overlapping it. */
    padding: 72px 16px 0;
    text-align: center;
  }
  .ts-golden-lady__title {
    max-width: 326px;
    font-size: 2.25rem;
    line-height: 40px;
    letter-spacing: 0;
  }
  .ts-golden-lady__description {
    max-width: 326px;
    margin-top: 12px;
    font-size: 1.125rem;
    line-height: 28px;
  }
  .ts-golden-lady__button {
    width: 100%;
    margin-top: 24px;
  }
  .ts-golden-lady__official {
    max-width: 326px;
    /* Pulled closer to the button so the logo sits fully above
     * the model's head in the photo below. */
    margin-top: 24px;
  }
  .ts-golden-lady__official p,
  .ts-golden-lady__official span {
    font-size: 1.125rem;
    line-height: 28px;
  }
}
.ts-sale {
  padding: 74px 0;
  overflow: hidden;
}
.ts-sale__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  margin-bottom: 44px;
}
.ts-sale__title {
  margin: 0;
  color: #444547;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 2.75rem;
  font-weight: 600;
  line-height: 48px;
  letter-spacing: -0.125rem;
}
.ts-sale__tabs, .ts-sale__footer, .ts-sale__controls, .ts-sale__colors {
  display: flex;
  align-items: center;
}
.ts-sale__tabs {
  justify-content: center;
  gap: 12px;
}
.ts-sale__tab {
  position: relative;
  height: 44px;
  padding: 0 12px;
  border: 0;
  background: transparent;
  color: #444547;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
  font-size: 0.875rem;
  line-height: 20px;
  cursor: pointer;
  transition: color 0.2s ease;
}
.ts-sale__tab::after {
  position: absolute;
  right: 12px;
  bottom: 6px;
  left: 12px;
  height: 2px;
  border-radius: 2px;
  background: #254e7b;
  content: "";
  transform: scaleX(0);
  transition: transform 0.2s ease;
}
.ts-sale__tab:hover {
  background: transparent;
  color: #254e7b;
}
.ts-sale__tab:hover::after {
  transform: scaleX(1);
}
.ts-sale__tab.is-active, .ts-sale__tab[aria-selected=true] {
  color: #254e7b;
  font-weight: 600;
}
.ts-sale__tab.is-active::after, .ts-sale__tab[aria-selected=true]::after {
  transform: scaleX(1);
}
.ts-sale__viewport {
  width: calc(100vw - 64px);
  margin-left: 64px;
  overflow: hidden;
}
.ts-sale__track {
  display: flex;
  gap: 32px;
  /* Matches the FLIP easing used by the sortiment/summer sliders. */
  transition: transform 500ms cubic-bezier(0.25, 0.1, 0.25, 1);
}
.ts-sale__footer {
  gap: 16px;
  margin: 44px 0 0 64px;
}
.ts-sale__controls {
  gap: 4px;
}
.ts-sale__control {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid #dbdbdb;
  border-radius: 50%;
  background: #f5f5f5;
  color: #444547;
  cursor: pointer;
  /* Hover lives in _button-resets.scss — one shared soft-fade rule
   * for every slider arrow. */
}
.ts-sale__all {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 16px;
  border-radius: 32px;
  background: #007eb0;
  color: #fff;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
  font-size: 0.875rem;
  line-height: 20px;
  text-decoration: none;
}
.ts-sale__all:hover, .ts-sale__all:focus, .ts-sale__all:active, .ts-sale__all:visited {
  color: #fff;
}

.ts-sale-product {
  position: relative;
  flex: 0 0 424px;
  min-width: 0;
}
.ts-sale-product__media-link {
  display: block;
}
.ts-sale-product__media {
  height: 428px;
  border-radius: 32px;
  overflow: hidden;
  background: #cce3ef;
}
.ts-sale-product__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ts-sale-product__wish {
  position: absolute;
  top: 24px;
  right: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #254e7b;
  cursor: pointer;
  transition: transform 0.2s ease;
}
.ts-sale-product__wish:hover {
  background: transparent;
  transform: translateY(-3px);
}
.ts-sale-product__badge {
  /* "-X%" discount pill over the image, top-left (the heart keeps
   * the top-right corner). */
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 1;
  padding: 4px 12px;
  border-radius: 999px;
  background: #e03131;
  color: #fff;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 20px;
}
.ts-sale-product__body {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-top: 16px;
}
.ts-sale-product__category, .ts-sale-product__name, .ts-sale-product__price {
  display: block;
}
.ts-sale-product__category {
  color: #757575;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 1rem;
  line-height: 24px;
}
.ts-sale-product__name {
  overflow: hidden;
  color: #444547;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 32px;
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ts-sale-product__price {
  display: flex;
  align-items: baseline;
  gap: 8px;
  color: #254e7b;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 32px;
  /* Discounted: struck-through old price + the active price in red,
   * always on a single line. The currency symbol sits smaller so
   * the pair fits narrow slides without shrinking the numbers. */
}
.ts-sale-product__price--sale {
  color: #e03131;
}
.ts-sale-product__price .woocommerce-Price-currencySymbol {
  font-size: 0.75em;
}
.ts-sale-product__old-price {
  color: #757575;
  font-size: 1rem;
  font-weight: 400;
}
.ts-sale-product__colors {
  display: flex;
  gap: 8px;
}
.ts-sale-product__color {
  display: inline-block;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  /* Real hexes now come from the term colors — a hairline ring
   * keeps light ones (Белый, Молочный…) visible on white cards. */
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.14);
}
.ts-sale-product__color--white {
  border: 1px solid #dbdbdb;
  background: #f5f5f5;
}
.ts-sale-product__color--pink {
  background: #eab2b4;
}
.ts-sale-product__color--blue {
  background: #b3d9eb;
}
.ts-sale-product__color--purple {
  background: #adade8;
}

@media (max-width: 1279px) {
  .ts-sale-product {
    flex-basis: 432px;
  }
}
@media (max-width: 767px) {
  .ts-sale {
    padding: 40px 0;
  }
  .ts-sale__header {
    margin-bottom: 24px;
  }
  .ts-sale__title {
    font-size: 2.25rem;
    line-height: 40px;
    letter-spacing: 0;
  }
  .ts-sale__tabs {
    gap: 12px;
  }
  .ts-sale__tab {
    height: 32px;
    padding: 0 4px;
    font-size: 0.75rem;
    line-height: 16px;
  }
  .ts-sale__viewport {
    width: calc(100vw - 16px);
    margin-left: 16px;
  }
  .ts-sale__track {
    gap: 16px;
  }
  .ts-sale__footer {
    gap: 16px;
    margin: 44px 16px 0;
  }
  .ts-sale__all {
    flex: 1 1 auto;
  }
  .ts-sale-product {
    flex-basis: 171px;
  }
  .ts-sale-product__media {
    height: 208px;
    border-radius: 16px;
  }
  .ts-sale-product__badge {
    top: 8px;
    left: 8px;
    padding: 2px 8px;
    font-size: 0.75rem;
    line-height: 16px;
  }
  .ts-sale-product__wish {
    top: 8px;
    right: 8px;
    width: 32px;
    height: 32px;
  }
  .ts-sale-product__wish .ts-icon {
    width: 16px;
    height: 16px;
  }
  .ts-sale-product__body {
    gap: 8px;
    padding-top: 12px;
  }
  .ts-sale-product__category {
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    font-size: 0.75rem;
    line-height: 16px;
  }
  .ts-sale-product__name, .ts-sale-product__price {
    font-size: 0.9375rem;
    line-height: 24px;
  }
  .ts-sale-product__price {
    gap: 6px;
  }
  .ts-sale-product__old-price {
    font-size: 0.75rem;
  }
  .ts-sale-product__colors {
    gap: 8px;
  }
  .ts-sale-product__color {
    width: 16px;
    height: 16px;
  }
}
/*
 * Contained variant (product & cart pages): the track aligns with the
 * page container (64px gutters) instead of the homepage full-bleed edge,
 * keeping every element on the page at a consistent width.
 */
.ts-sale--contained {
  padding-right: 64px;
  padding-left: 64px;
}
.ts-sale--contained .ts-sale__viewport {
  width: 100%;
  margin-left: 0;
}
.ts-sale--contained .ts-sale__footer {
  margin-left: 0;
}
.ts-sale--contained {
  /* Fit exactly four cards in the container so the last one is never
   * visually cut (32px gap: 4 × calc(25% - 24px) + 3 × 32px = 100%).
   * Desktop only — tablets keep the 432px home-style slides. */
}
@media (min-width: 1280px) {
  .ts-sale--contained .ts-sale-product {
    flex-basis: calc(25% - 24px);
  }
}
@media (max-width: 767px) {
  .ts-sale--contained {
    padding-right: 16px;
    padding-left: 16px;
  }
  .ts-sale--contained .ts-sale__footer {
    margin-left: 0;
  }
}

.ts-campaigns {
  padding: 74px 64px;
}
.ts-campaigns__layout {
  display: grid;
  grid-template-columns: minmax(480px, 576px) repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(2, 380px);
  gap: 32px;
}
.ts-campaigns__card {
  position: relative;
  display: flex;
  min-width: 0;
  border-radius: 32px;
  overflow: hidden;
  background-color: #e1eef7;
}
.ts-campaigns__card::before {
  position: absolute;
  background-image: var(--ts-campaign-image, none);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  content: "";
  pointer-events: none;
}
.ts-campaigns__card--lead {
  grid-row: span 2;
  height: 792px;
  /* The photo always sits flush on the card's bottom edge. */
}
.ts-campaigns__card--lead::before {
  bottom: 0;
  left: 0;
  width: 100%;
  aspect-ratio: 832/1144;
}
.ts-campaigns__card--wide {
  grid-column: 2/4;
  grid-row: 1;
  height: 380px;
  /* Fill the card at any width: narrower cards crop the photo's
   * right side; wider ones (big monitors) let min-width take over
   * and cover-crop top/bottom so no empty strip is left. */
}
.ts-campaigns__card--wide::before {
  top: 0;
  left: 0;
  height: 100%;
  min-width: 100%;
  aspect-ratio: 1248/400;
}
.ts-campaigns__card--popular {
  grid-column: 2;
  grid-row: 2;
  height: 380px;
  background-color: #e3f1f9;
  /* Bottom-anchored: the figure's lower body stays near the card
   * bottom at any width (box overflows below like the Figma
   * frames); wider cards reveal more of the head instead of
   * cutting the figure at the waist. */
}
.ts-campaigns__card--popular::before {
  bottom: -27.4%;
  left: 12.24%;
  width: 64.44%;
  aspect-ratio: 1104/1381;
}
.ts-campaigns__card--seasonal {
  grid-column: 3;
  grid-row: 2;
  height: 380px;
  background-color: #5584b2;
}
.ts-campaigns__card--seasonal::before {
  content: none;
}
.ts-campaigns__content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  width: 452px;
  padding: 32px;
}
.ts-campaigns__eyebrow, .ts-campaigns__title {
  margin: 0;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
.ts-campaigns__eyebrow {
  color: #444547;
  font-size: 1.5rem;
  font-weight: 400;
  line-height: 32px;
}
.ts-campaigns__title {
  color: #181818;
  font-size: 2.75rem;
  font-weight: 600;
  line-height: 48px;
  letter-spacing: -0.125rem;
}
.ts-campaigns__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 16px;
  border-radius: 32px;
  background: #007eb0;
  color: #fff;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
  font-size: 0.875rem;
  line-height: 20px;
  text-decoration: none;
}
.ts-campaigns__button:hover, .ts-campaigns__button:focus, .ts-campaigns__button:active, .ts-campaigns__button:visited {
  color: #fff;
}
.ts-campaigns__card--wide .ts-campaigns__content {
  width: 518px;
}
.ts-campaigns__card--popular .ts-campaigns__content {
  align-items: flex-end;
  width: 100%;
  padding-left: 99px;
  text-align: right;
}
.ts-campaigns__card--seasonal .ts-campaigns__content {
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 79px 62px 93px;
  text-align: center;
}
.ts-campaigns__card--seasonal .ts-campaigns__content .ts-campaigns__eyebrow,
.ts-campaigns__card--seasonal .ts-campaigns__content .ts-campaigns__title {
  color: #fff;
}
.ts-campaigns__card--seasonal .ts-campaigns__content {
  /* 24px between the eyebrow and the title group, 16px to the button. */
}
.ts-campaigns__card--seasonal .ts-campaigns__content .ts-campaigns__title {
  margin-top: 8px;
}

@media (max-width: 1279px) {
  .ts-campaigns__layout {
    grid-template-columns: 1fr;
    grid-template-rows: none;
  }
  .ts-campaigns__card {
    grid-column: auto;
    grid-row: auto;
  }
  .ts-campaigns__card--lead {
    grid-row: auto;
    height: 792px;
  }
  .ts-campaigns__card--lead::before {
    bottom: 0;
    left: 14.86%;
    width: 87.45%;
  }
  .ts-campaigns__card--wide {
    height: 380px;
  }
  .ts-campaigns__card--popular {
    height: 380px;
  }
  .ts-campaigns__card--popular::before {
    bottom: -32.3%;
    left: 0.43%;
    width: 53.61%;
  }
  .ts-campaigns__card--seasonal {
    height: 380px;
  }
}
@media (max-width: 767px) {
  .ts-campaigns {
    padding: 40px 16px;
  }
  .ts-campaigns__layout {
    gap: 16px;
  }
  .ts-campaigns__card--lead {
    height: 653px;
  }
  .ts-campaigns__card--lead::before {
    bottom: 0;
    left: -12.96%;
    width: 132.66%;
  }
  .ts-campaigns__card--wide::before {
    top: 0;
    left: -81.49%;
    height: 100%;
  }
  .ts-campaigns__card--popular::before {
    bottom: -17.8%;
    left: -45.61%;
    width: 100%;
    transform: none;
  }
  .ts-campaigns__content, .ts-campaigns__card--wide .ts-campaigns__content {
    width: 294px;
    padding: 32px 16px;
  }
  .ts-campaigns__eyebrow {
    font-size: 1rem;
    line-height: 24px;
  }
  .ts-campaigns__title {
    font-size: 1.5rem;
    line-height: 32px;
    letter-spacing: 0;
  }
  .ts-campaigns__card--wide .ts-campaigns__content {
    width: 292px;
  }
  .ts-campaigns__card--popular .ts-campaigns__content {
    width: 100%;
    padding: 32px 32px 32px 99px;
  }
  .ts-campaigns__card--seasonal .ts-campaigns__content {
    width: 100%;
    padding: 79px 30px 93px;
  }
}
.ts-monthly-offers {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 44px;
  padding: 74px 64px;
}
.ts-monthly-offers__heading, .ts-monthly-offers__title, .ts-monthly-offers__kicker {
  margin: 0;
  font-family: Inter, sans-serif;
}
.ts-monthly-offers__heading {
  color: #444547;
  font-size: 2.75rem;
  font-weight: 600;
  line-height: 48px;
  letter-spacing: -0.125rem;
  text-align: center;
}
.ts-monthly-offers__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 32px;
  width: 100%;
}
.ts-monthly-offers__card {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 584px;
  /* Figma 239-8399: the title block sits slightly above the card's
   * vertical center (174px top vs 206px bottom inset). */
  padding: 174px 24px 206px;
  border-radius: 32px;
  overflow: hidden;
  background: #d9d9d9 var(--ts-monthly-offer-image) center/cover no-repeat;
}
.ts-monthly-offers__card::before {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.2);
  content: "";
}
.ts-monthly-offers__content {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  width: 100%;
  color: #fff;
  text-align: center;
}
.ts-monthly-offers__kicker {
  color: #fff;
  font-size: 1.5rem;
  font-weight: 400;
  line-height: 32px;
}
.ts-monthly-offers__title {
  /* Explicit: base heading rules set a dark color that would otherwise
   * beat inheritance from __content. */
  color: #fff;
  font-size: 2.75rem;
  font-weight: 600;
  line-height: 48px;
  letter-spacing: -0.125rem;
}
.ts-monthly-offers__button, .ts-monthly-offers__all {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 16px;
  border-radius: 32px;
  background: #007eb0;
  color: #fff;
  font-family: Inter, sans-serif;
  font-size: 0.875rem;
  line-height: 20px;
  text-decoration: none;
}
.ts-monthly-offers__button:hover, .ts-monthly-offers__button:focus, .ts-monthly-offers__button:active, .ts-monthly-offers__button:visited, .ts-monthly-offers__all:hover, .ts-monthly-offers__all:focus, .ts-monthly-offers__all:active, .ts-monthly-offers__all:visited {
  color: #fff;
}
.ts-monthly-offers__all {
  /* Centered pill under the grid (Figma desktop/tablet); full-width on
   * mobile via the media query below. */
  display: inline-flex;
}

@media (max-width: 1279px) {
  .ts-monthly-offers__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .ts-monthly-offers__card {
    height: 728px;
  }
}
@media (max-width: 767px) {
  .ts-monthly-offers {
    gap: 44px;
    padding: 40px 16px;
  }
  .ts-monthly-offers__heading {
    width: 100%;
    font-size: 2.25rem;
    line-height: 40px;
    letter-spacing: 0;
  }
  .ts-monthly-offers__grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .ts-monthly-offers__card {
    height: 728px;
  }
  .ts-monthly-offers__kicker {
    font-size: 1.5rem;
    line-height: 32px;
  }
  .ts-monthly-offers__title {
    font-size: 2.75rem;
    line-height: 48px;
  }
  .ts-monthly-offers__all {
    display: flex;
    width: 100%;
  }
}
[data-ts-home-tabs] {
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: center;
  gap: 12px;
  max-width: min(100%, 44rem);
  margin-inline: auto;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
[data-ts-home-tabs]::-webkit-scrollbar {
  display: none;
}
[data-ts-home-tabs].ts-tabscroll {
  -webkit-mask-image: linear-gradient(to right, rgba(0, 0, 0, 0) 0, #000 24px, #000 calc(100% - 24px), rgba(0, 0, 0, 0) 100%);
  mask-image: linear-gradient(to right, rgba(0, 0, 0, 0) 0, #000 24px, #000 calc(100% - 24px), rgba(0, 0, 0, 0) 100%);
}
[data-ts-home-tabs].ts-tabscroll--start {
  -webkit-mask-image: linear-gradient(to left, rgba(0, 0, 0, 0) 0, #000 24px);
  mask-image: linear-gradient(to left, rgba(0, 0, 0, 0) 0, #000 24px);
}
[data-ts-home-tabs].ts-tabscroll--end {
  -webkit-mask-image: linear-gradient(to right, rgba(0, 0, 0, 0) 0, #000 24px);
  mask-image: linear-gradient(to right, rgba(0, 0, 0, 0) 0, #000 24px);
}

[data-ts-home-tab] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  flex-shrink: 0;
  white-space: nowrap;
}

.ts-best-sellers__grid.is-loading,
.ts-sale__viewport.is-loading {
  position: relative;
}
.ts-best-sellers__grid.is-loading::before,
.ts-sale__viewport.is-loading::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 5;
  border-radius: 32px;
  background: rgba(255, 255, 255, 0.72);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  animation: ts-veil-in 240ms ease both;
  pointer-events: none;
}
.ts-best-sellers__grid.is-loading::after,
.ts-sale__viewport.is-loading::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 6;
  width: 44px;
  height: 44px;
  margin: -22px 0 0 -22px;
  border: 3px solid rgba(37, 78, 123, 0.15);
  border-top-color: #254e7b;
  border-radius: 50%;
  /* Same ring as the add-to-cart button spinner (content/_toasts). */
  animation: ts-spin 700ms linear infinite, ts-veil-in 240ms ease both;
  pointer-events: none;
}

@keyframes ts-veil-in {
  from {
    opacity: 0;
  }
}
@media (max-width: 767px) {
  .ts-best-sellers__grid.is-loading::before,
  .ts-sale__viewport.is-loading::before {
    border-radius: 16px;
  }
}
@media (prefers-reduced-motion: reduce) {
  /* No rotation for motion-sensitive visitors — the ring breathes instead. */
  .ts-best-sellers__grid.is-loading::before,
  .ts-sale__viewport.is-loading::before {
    animation: none;
  }
  .ts-best-sellers__grid.is-loading::after,
  .ts-sale__viewport.is-loading::after {
    animation: ts-veil-pulse 1.4s ease-in-out infinite alternate;
  }
}
@keyframes ts-veil-pulse {
  from {
    opacity: 0.4;
  }
}
.ts-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0 0 2rem;
  padding: 0;
  list-style: none;
}
.ts-tabs__item {
  margin: 0;
}
.ts-tabs__btn {
  padding: 0.6em 1.2em;
  border: 1px solid #e0e0e2;
  border-radius: 999px;
  background: #fff;
  color: #5d5d61;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
  font-weight: 500;
  font-size: 1.125rem;
  line-height: 1.75rem;
  line-height: 1;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.ts-tabs__btn:focus-visible {
  outline: 2px solid #007eb0;
  outline-offset: 2px;
}
.ts-tabs__btn:hover {
  border-color: #cce3ef;
  color: #254e7b;
}
.ts-tabs__btn.is-active, .ts-tabs__btn[aria-selected=true] {
  background: #254e7b;
  border-color: #254e7b;
  color: #ffffff;
}

.ts-product-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}
@media (min-width: 768px) {
  .ts-product-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
@media (min-width: 768px) {
  .ts-product-grid--5 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}

.ts-product-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid #e0e0e2;
  border-radius: 16px;
  overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.ts-product-card:hover {
  transform: translateY(-4px);
  border-color: #cce3ef;
  box-shadow: 0 8 12 4 rgba(18, 19, 23, 0.12), 0 2 4 0 rgba(18, 19, 23, 0.12);
}
.ts-product-card__media-link {
  position: relative;
  display: block;
}
.ts-product-card__media {
  aspect-ratio: 1/1;
  border-radius: 0;
}
.ts-product-card__wish {
  position: absolute;
  z-index: 2;
  top: 0.6rem;
  right: 0.6rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: none;
  border-radius: 999px;
  background: transparent;
  color: #5d5d61;
  cursor: pointer;
  transition: color 0.15s ease;
}
.ts-product-card__wish:hover {
  color: #007eb0;
}
.ts-product-card__body {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0.9rem;
}
.ts-product-card__title {
  margin: 0;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.5rem;
  line-height: 1.4;
  color: #1a1a1c;
}
.ts-product-card__title a {
  color: inherit;
  text-decoration: none;
}
.ts-product-card__title a:hover {
  color: #254e7b;
}
.ts-product-card__title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.8em;
}
.ts-product-card__price {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-top: auto;
}
.ts-product-card__price-main {
  font-weight: 700;
  font-size: 1.125rem;
  line-height: 1.75rem;
  color: #1a1a1c;
}
.ts-product-card__price-old {
  font-size: 0.8125rem;
  color: #8e8e92;
  text-decoration: line-through;
}
.ts-product-card__cta {
  margin-top: 0.25rem;
  font-size: 1rem;
  line-height: 1.5rem;
  padding: 0.7em 1em;
}

.ts-showcase--blue {
  background: #e3f1f9;
}

.ts-editorial--cream {
  background: #f8f3e9;
}
.ts-editorial__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
  align-items: center;
}
@media (min-width: 1024px) {
  .ts-editorial__inner {
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
  }
}
@media (min-width: 1024px) {
  .ts-editorial__media-col {
    order: 2;
  }
}
.ts-editorial__media {
  aspect-ratio: 4/5;
  border-radius: 16px;
  box-shadow: 0 8 12 4 rgba(18, 19, 23, 0.12), 0 2 4 0 rgba(18, 19, 23, 0.12);
}
.ts-editorial__content {
  max-width: 34rem;
}
.ts-editorial__title {
  margin: 0 0 1rem;
  color: #1a1a1c;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.ts-editorial__text {
  margin: 0 0 1.25rem;
  color: rgba(26, 26, 28, 0.82);
  font-size: 1.25rem;
  line-height: 1.75rem;
  line-height: 1.6;
}
.ts-editorial__note {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 1.5rem;
  color: #254e7b;
  font-weight: 600;
  font-size: 1.125rem;
  line-height: 1.75rem;
}
.ts-editorial__note-icon {
  flex-shrink: 0;
  color: #254e7b;
}
.ts-editorial__brand {
  display: inline-block;
  margin-bottom: 1.25rem;
}
.ts-editorial__brand-text {
  display: inline-block;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-weight: 700;
  font-size: 1.5rem;
  line-height: 2rem;
  letter-spacing: 0.08em;
  color: #1a1a1c;
}
.ts-editorial .ts-btn {
  display: inline-flex;
}

.ts-promo-banner {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  margin-top: 2.5rem;
  border-radius: 16px;
  overflow: hidden;
  background: #fff;
  border: 1px solid #e0e0e2;
  box-shadow: 0 4 8 2 rgba(18, 19, 23, 0.12), 0 2 4 0 rgba(18, 19, 23, 0.08);
}
@media (min-width: 768px) {
  .ts-promo-banner {
    grid-template-columns: 1fr 1fr;
  }
}
.ts-promo-banner__media {
  min-height: 240px;
}
@media (min-width: 768px) {
  .ts-promo-banner__media {
    min-height: 0;
  }
}
.ts-promo-banner__slot {
  border: none;
  border-radius: 0;
  min-height: 240px;
}
.ts-promo-banner__content {
  padding: clamp(1.5rem, 4vw, 2.5rem);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.75rem;
}
.ts-promo-banner__title {
  margin: 0;
  color: #1a1a1c;
  font-weight: 600;
}
.ts-promo-banner__text {
  margin: 0;
  color: #5d5d61;
  font-size: 1.125rem;
  line-height: 1.75rem;
  line-height: 1.6;
}

.ts-benefits {
  display: flex;
  flex-direction: column;
  gap: 44px;
  padding: 74px 64px;
  background: transparent;
  border: 0;
}
.ts-benefits__heading, .ts-benefits__description p, .ts-benefits__title {
  margin: 0;
  font-family: Inter, sans-serif;
}
.ts-benefits__heading {
  color: #444547;
  font-size: 2.75rem;
  font-weight: 600;
  line-height: 48px;
  letter-spacing: -0.125rem;
  text-align: center;
}
.ts-benefits__content {
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.ts-benefits__banner {
  position: relative;
  min-height: 415px;
  padding: 32px;
  border-radius: 32px;
  overflow: hidden;
  background: #e3f1f9;
  /* Photo layer (Figma 239:8413) — flush with the card's right edge. */
}
.ts-benefits__banner::before {
  position: absolute;
  top: -29.83%;
  right: 0;
  z-index: 1;
  width: 70.73%;
  aspect-ratio: 1880/1253;
  background-image: var(--ts-benefits-image, none);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  content: "";
  pointer-events: none;
}
.ts-benefits__banner {
  /* Fade overlay on top of the photo: the card color dissolves into
   * the image left-to-right (the design's topmost layer). */
}
.ts-benefits__banner::after {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(94.06deg, #e3f1f9 33.973%, rgba(230, 236, 235, 0) 55.494%);
  content: "";
  pointer-events: none;
}
.ts-benefits__banner-content {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  gap: 24px;
  max-width: 542px;
}
.ts-benefits__description {
  display: flex;
  flex-direction: column;
  gap: 16px;
  color: #444547;
  font-size: 1.5rem;
  font-weight: 400;
  line-height: 32px;
}
.ts-benefits__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: flex-start;
  min-height: 44px;
  padding: 0 16px;
  border-radius: 32px;
  background: #007eb0;
  color: #fff;
  font-family: Inter, sans-serif;
  font-size: 0.875rem;
  line-height: 20px;
  text-decoration: none;
}
.ts-benefits__button:hover, .ts-benefits__button:focus, .ts-benefits__button:active, .ts-benefits__button:visited {
  color: #fff;
}
.ts-benefits {
  /* Wholesale contact phones — pill links in the button's visual
   * language (phone icon + number, tappable tel:). */
}
.ts-benefits__phones {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.ts-benefits__phone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 20px;
  border-radius: 32px;
  background: #007eb0;
  color: #fff;
  font-family: Inter, sans-serif;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 20px;
  text-decoration: none;
  transition: background 0.2s ease;
}
.ts-benefits__phone .ts-benefits__phone-icon {
  flex: 0 0 auto;
  margin-right: 10px;
}
.ts-benefits__phone:hover, .ts-benefits__phone:focus, .ts-benefits__phone:active, .ts-benefits__phone:visited {
  background: #006a94;
  color: #fff;
}
.ts-benefits__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 32px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ts-benefit {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  min-height: 226px;
  padding: 34px 32px 32px;
  border-radius: 32px;
  background: #e3f1f9;
}
.ts-benefit__icon {
  display: block;
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  object-fit: contain;
}
.ts-benefit__title {
  margin: 0;
  color: #444547;
  font-family: Inter, sans-serif;
  font-size: 1.875rem;
  font-weight: 600;
  line-height: 36px;
}

@media (max-width: 1279px) {
  .ts-benefits__banner::before {
    top: -29.98%;
    left: 0;
    width: 100%;
  }
  .ts-benefits__banner::after {
    background: linear-gradient(92.03deg, #e3f1f9 33.973%, rgba(230, 236, 235, 0) 55.494%);
  }
  .ts-benefits__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 31px;
  }
}
@media (max-width: 767px) {
  .ts-benefits {
    gap: 44px;
    padding: 40px 16px;
  }
  .ts-benefits__heading {
    font-size: 2.25rem;
    line-height: 40px;
    letter-spacing: 0;
  }
  .ts-benefits__content {
    gap: 16px;
  }
  .ts-benefits__banner {
    min-height: 270px;
    padding: 32px;
    /* No photo on mobile (Figma 263:5800) — copy only. */
  }
  .ts-benefits__banner::before {
    content: none;
  }
  .ts-benefits__banner::after {
    background: linear-gradient(90.9deg, #e3f1f9 33.973%, rgba(230, 236, 235, 0) 55.494%);
  }
  .ts-benefits__banner-content {
    gap: 24px;
    max-width: none;
  }
  .ts-benefits__description {
    font-size: 1.125rem;
    line-height: 28px;
    text-align: center;
  }
  .ts-benefits__button {
    align-self: stretch;
  }
  .ts-benefits__phones {
    flex-direction: column;
    align-self: stretch;
  }
  .ts-benefits__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
  }
  .ts-benefit {
    min-height: 128px;
    padding: 34px 32px 32px;
  }
  .ts-benefit__title {
    font-size: 1.25rem;
    line-height: 28px;
  }
}
.ts-inspire {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 44px;
  padding: 74px 64px;
}
.ts-inspire__header {
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: 100%;
  color: #444547;
}
.ts-inspire__heading, .ts-inspire__subtitle {
  margin: 0;
  font-family: Inter, sans-serif;
}
.ts-inspire__heading {
  font-size: 2.75rem;
  font-weight: 600;
  line-height: 48px;
  letter-spacing: -0.125rem;
}
.ts-inspire__subtitle {
  font-size: 1.5rem;
  font-weight: 400;
  line-height: 32px;
}
.ts-inspire__viewport {
  width: 100%;
  overflow: hidden;
}
.ts-inspire__gallery {
  display: flex;
  gap: 32px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.ts-inspire__item {
  flex: 0 0 calc((100% - 96px) / 4);
  height: 625px;
  border-radius: 32px;
  overflow: hidden;
}
.ts-inspire__item img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ts-inspire__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 16px;
  border-radius: 32px;
  background: #007eb0;
  color: #fff;
  font-family: Inter, sans-serif;
  font-size: 0.875rem;
  line-height: 20px;
  text-decoration: none;
}
.ts-inspire__button:hover, .ts-inspire__button:focus, .ts-inspire__button:active, .ts-inspire__button:visited {
  color: #fff;
}
.ts-inspire__button img {
  width: 20px;
  height: 20px;
}

@media (max-width: 767px) {
  .ts-inspire {
    gap: 47px;
    padding: 40px 16px;
  }
  .ts-inspire__header {
    gap: 24px;
  }
  .ts-inspire__heading {
    font-size: 2.25rem;
    line-height: 40px;
    letter-spacing: 0;
    text-align: center;
  }
  .ts-inspire__subtitle {
    font-size: 1.125rem;
    line-height: 28px;
  }
  .ts-inspire__gallery {
    gap: 16px;
  }
  .ts-inspire__item {
    flex-basis: calc((100% - 16px) / 2);
    height: 253px;
  }
  .ts-inspire__button {
    width: 100%;
  }
}
/* Posts and pages
--------------------------------------------- */
.sticky {
  display: block;
}

.post,
.page {
  margin: 0 0 1.5em;
}

.updated:not(.published) {
  display: none;
}

.page-content,
.entry-content,
.entry-summary {
  margin: 1.5em 0 0;
}

.page-links {
  clear: both;
  margin: 0 0 1.5em;
}

.ts-page {
  padding-block: 64px;
}
@media (min-width: 1024px) {
  .ts-page {
    padding-block: 96px;
  }
}

.ts-page-head {
  background: #eff9ff;
  padding-block: 3rem;
  text-align: center;
}
@media (min-width: 768px) {
  .ts-page-head {
    padding-block: 4rem;
  }
}
.ts-page-head .ts-container {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.ts-page-head__title {
  margin: 0;
  color: #1a1a1c;
  font-size: 2.25rem;
  line-height: 2.5rem;
}
.ts-page-head__subtitle {
  max-width: 560px;
  margin: 0.75rem 0 0;
  color: #5d5d61;
  font-size: 1.25rem;
  line-height: 1.75rem;
}

.ts-prose {
  max-width: 760px;
  margin-inline: auto;
  font-size: 1.125rem;
  line-height: 1.75rem;
  color: #242424;
}
.ts-prose h2 {
  margin: 2.25rem 0 0.75rem;
  color: #1a1a1c;
  font-size: 1.875rem;
  line-height: 2.25rem;
}
.ts-prose h3 {
  margin: 1.75rem 0 0.5rem;
  color: #1a1a1c;
  font-size: 1.5rem;
  line-height: 2rem;
}
.ts-prose p {
  margin: 0 0 1rem;
  line-height: 1.7;
}
.ts-prose ul,
.ts-prose ol {
  margin: 0 0 1rem;
  padding-inline-start: 1.25rem;
}
.ts-prose ul li,
.ts-prose ol li {
  margin-bottom: 0.5rem;
  line-height: 1.6;
}
.ts-prose a {
  color: #254e7b;
  text-decoration: underline;
}
.ts-prose a:hover {
  color: #007eb0;
}
.ts-prose table {
  width: 100%;
  margin: 0 0 1.5rem;
  border-collapse: collapse;
}
.ts-prose table th,
.ts-prose table td {
  padding: 0.6rem 0.8rem;
  border: 1px solid #e0e0e2;
  text-align: start;
}
.ts-prose table th {
  background: #eff9ff;
  color: #1a1a1c;
}

.ts-info-grid {
  display: grid;
  gap: 24px;
  grid-template-columns: 1fr;
}
@media (min-width: 768px) {
  .ts-info-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 1024px) {
  .ts-info-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.ts-info-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 1.75rem;
  background: #fff;
  border: 1px solid #e0e0e2;
  border-radius: 16px;
  box-shadow: 0 2 8 0 rgba(18, 19, 23, 0.06), 0 4 8 1 rgba(18, 19, 23, 0.04);
}
.ts-info-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 999px;
  background: #eff9ff;
  color: #254e7b;
}
.ts-info-card__title {
  margin: 0;
  color: #1a1a1c;
  font-size: 1.25rem;
  line-height: 1.75rem;
}
.ts-info-card__text {
  margin: 0;
  color: #5d5d61;
  line-height: 1.6;
}
.ts-info-card__list {
  margin: 0;
  padding-inline-start: 1.1rem;
  color: #5d5d61;
  line-height: 1.7;
}
.ts-info-card__list li + li {
  margin-top: 0.25rem;
}

.ts-ty {
  position: relative;
  height: 1112px;
  overflow: hidden;
  background: linear-gradient(181.9deg, #cce3ef -67.594%, #78a0c4 22.125%, #254e7b 97.643%);
  color: #fff;
  text-align: center;
}
.ts-ty__icon {
  position: absolute;
  top: calc(50% - 62px);
  left: 50%;
  width: 212px;
  height: 212px;
  transform: translate(-50%, -50%);
}
.ts-ty__icon svg {
  display: block;
  width: 100%;
  height: 100%;
}
.ts-ty__content {
  position: absolute;
  top: 644px;
  left: 50%;
  width: min(788px, 100% - 32px);
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
}
.ts-ty__copy {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
}
.ts-ty__title {
  margin: 0;
  color: #fff;
  font-size: 36px;
  font-weight: 600;
  line-height: 40px;
}
.ts-ty__text {
  margin: 0;
  color: #fff;
  font-size: 24px;
  font-weight: 400;
  line-height: 32px;
}
.ts-ty__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 44px;
  padding: 0 16px;
  border-radius: 999px;
  background: #fff;
  color: #00366b;
  font-size: 14px;
  line-height: 20px;
  text-decoration: none;
  transition: background-color 0.15s ease;
}
.ts-ty__button svg {
  width: 20px;
  height: 20px;
}
.ts-ty__button .ts-ty__button-icon {
  display: none;
}
.ts-ty__button:hover {
  background: #eff9ff;
  color: #00366b;
}
@media (max-width: 767px) {
  .ts-ty {
    height: 854px;
    background: linear-gradient(189.2deg, #cce3ef -67.594%, #78a0c4 22.125%, #254e7b 97.643%);
  }
  .ts-ty__icon {
    top: calc(50% - 52px);
  }
  .ts-ty__content {
    top: 501px;
    width: calc(100% - 32px);
  }
  .ts-ty__title {
    font-size: 24px;
    line-height: 32px;
  }
  .ts-ty__text {
    font-size: 18px;
    line-height: 28px;
  }
  .ts-ty__button {
    width: 100%;
    box-sizing: border-box;
  }
  .ts-ty__button .ts-ty__button-icon {
    display: block;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .ts-ty {
    background: linear-gradient(183.5deg, #cce3ef -67.594%, #78a0c4 22.125%, #254e7b 97.643%);
  }
  .ts-ty__button .ts-ty__button-icon {
    display: block;
  }
}

.editor-styles-wrapper {
  box-sizing: border-box;
}

.ts-404 {
  position: relative;
  height: 1112px;
  overflow: hidden;
  background: linear-gradient(181.9deg, #cce3ef -67.594%, #78a0c4 22.125%, #254e7b 97.643%);
  color: #fff;
  text-align: center;
}
.ts-404__code {
  position: absolute;
  top: 203px;
  left: 50%;
  margin: 0;
  transform: translateX(-50%);
  background: linear-gradient(180deg, #fff 51.693%, #567ea6 90.365%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  opacity: 0.2;
  font-size: 485px;
  font-weight: 600;
  letter-spacing: -22px;
  line-height: 529px;
  white-space: nowrap;
}
.ts-404__content {
  position: absolute;
  top: 644px;
  left: 50%;
  width: min(788px, 100% - 32px);
  transform: translateX(-50%);
}
.ts-404__title {
  margin: 0 0 16px;
  color: #fff;
  font-size: 36px;
  font-weight: 600;
  line-height: 40px;
}
.ts-404__text {
  margin: 0 0 16px;
  color: #fff;
  font-size: 24px;
  font-weight: 400;
  line-height: 32px;
}
.ts-404__back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 44px;
  padding: 0 16px;
  border-radius: 999px;
  background: #fff;
  color: #00366b;
  font-size: 14px;
  line-height: 20px;
  text-decoration: none;
  transition: background-color 0.15s ease;
}
.ts-404__back svg {
  width: 20px;
  height: 20px;
}
.ts-404__back:hover {
  background: #eff9ff;
  color: #00366b;
}
@media (max-width: 767px) {
  .ts-404 {
    height: 854px;
    background: linear-gradient(189.2deg, #cce3ef -67.594%, #78a0c4 22.125%, #254e7b 97.643%);
  }
  .ts-404__code {
    top: 235px;
    left: -15.5px;
    transform: none;
    font-size: 193px;
    letter-spacing: -9px;
    line-height: 211px;
  }
  .ts-404__content {
    top: 407px;
    width: calc(100% - 32px);
  }
  .ts-404__title {
    font-size: 24px;
    line-height: 32px;
  }
  .ts-404__text {
    font-size: 18px;
    line-height: 28px;
  }
  .ts-404__back {
    width: 100%;
    box-sizing: border-box;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .ts-404 {
    background: linear-gradient(183.5deg, #cce3ef -67.594%, #78a0c4 22.125%, #254e7b 97.643%);
  }
}

.ts-privacy {
  background: #fff;
  /* The fixed header overlays the page; the design puts the title
   * 74px (desktop/tablet) below the header's bottom edge. */
  padding: 74px 64px;
  padding-top: calc(var(--ts-header-clearance, 144px) + 74px);
}
.ts-privacy__inner {
  max-width: 1792px;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.ts-privacy h1 {
  margin: 0;
  color: #444547;
  font-size: 44px;
  font-weight: 600;
  line-height: 48px;
  letter-spacing: -2px;
  text-align: center;
}
.ts-privacy .ts-privacy__body,
.ts-privacy p {
  color: #757575;
  font-size: 24px;
  font-weight: 400;
  line-height: 32px;
}
.ts-privacy p {
  margin: 0 0 8px;
}
.ts-privacy p:last-child {
  margin-bottom: 0;
}
.ts-privacy a {
  color: #069;
}
.ts-privacy strong {
  font-weight: 600;
}
.ts-privacy {
  /* Section sub-headings on Terms / Client Support pages (no Figma node;
   * styled to sit between the title and body scale). */
}
.ts-privacy h2 {
  margin: 24px 0 8px;
  color: #444547;
  font-size: 24px;
  font-weight: 600;
  line-height: 32px;
}
.ts-privacy h2:first-child {
  margin-top: 0;
}
.ts-privacy h2.wp-block-heading {
  color: #444547;
  font-size: 24px;
  font-weight: 600;
  line-height: 32px;
  letter-spacing: normal;
  text-align: left;
}
.ts-privacy .wp-block-heading {
  color: #444547;
  font-size: 44px;
  font-weight: 600;
  line-height: 48px;
  letter-spacing: -2px;
  text-align: center;
}
@media (max-width: 767px) {
  .ts-privacy {
    padding: 46px 16px;
    padding-top: calc(var(--ts-header-clearance, 102px) + 46px);
  }
  .ts-privacy h1,
  .ts-privacy .wp-block-heading {
    font-size: 36px;
    line-height: 40px;
  }
  .ts-privacy h2.wp-block-heading {
    font-size: 24px;
    line-height: 32px;
  }
}

/*
 * About Us (Figma 287-9190 desktop / 287-9425 tablet / 311-6161 mobile).
 * Rendered by the terminalstore/about-us block (hero + location/map only;
 * the wholesale and gallery sections are shared Home page blocks).
 */
.ts-about {
  background: #fff;
}
.ts-about__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 44px;
  padding: 0 16px;
  border-radius: 32px;
  background: #007eb0;
  color: #fff;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  text-decoration: none;
  transition: background 0.2s ease;
}
.ts-about__button:hover, .ts-about__button:focus {
  background: #006a94;
  color: #fff;
}
.ts-about {
  /* --- Hero --- */
}
.ts-about__hero {
  position: relative;
  height: 1112px;
  overflow: hidden;
  background: linear-gradient(236.87deg, #cce3ef 19.43%, #78a0c4 41.856%, #254e7b 93.442%);
  color: #fff;
}
.ts-about__hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: url("assets/images/about/texture.png") right center/auto 100% no-repeat;
  pointer-events: none;
}
.ts-about__hero-inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 32px;
  margin-inline: auto;
  padding: 292px 64px 0;
  width: 100%;
}
.ts-about__hero-title {
  margin: 0;
  max-width: 880px;
  color: #fff;
  font-size: 44px;
  font-weight: 600;
  line-height: 48px;
  letter-spacing: -2px;
}
.ts-about__hero-copy {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 880px;
}
.ts-about__hero-intro, .ts-about__hero-launch {
  color: #fff;
  font-size: 24px;
  font-weight: 400;
  line-height: 32px;
}
.ts-about__hero-intro p, .ts-about__hero-launch p {
  margin: 0;
}
.ts-about__hero-sign {
  margin: 0;
  max-width: 316px;
  color: #fff;
  font-size: 24px;
  font-weight: 600;
  line-height: 32px;
}
.ts-about {
  /* --- Location + map --- */
}
.ts-about__location {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 35px;
  max-width: 1920px;
  margin-inline: auto;
  padding: 74px 64px;
}
.ts-about__location-text {
  display: flex;
  flex-direction: column;
  gap: 32px;
  width: 880px;
  max-width: 880px;
}
.ts-about__location-title {
  margin: 0;
  color: #444547;
  font-size: 44px;
  font-weight: 600;
  line-height: 48px;
  letter-spacing: -2px;
}
.ts-about__location-lead {
  margin: 0;
  color: #444547;
  font-size: 24px;
  font-weight: 400;
  line-height: 32px;
}
.ts-about__contacts {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 16px 0 24px;
  padding: 0;
  list-style: none;
}
.ts-about__contacts li {
  display: flex;
  align-items: center;
  gap: 12px;
  color: #444547;
  font-size: 24px;
  line-height: 32px;
}
.ts-about__contacts li a {
  color: inherit;
  text-decoration: none;
}
.ts-about__contacts li a:hover {
  text-decoration: underline;
}
.ts-about__contacts li svg {
  display: block;
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}
.ts-about__map {
  position: relative;
  width: 877px;
  max-width: 877px;
  height: 637px;
  border-radius: 32px;
  overflow: hidden;
  flex-shrink: 0;
}
.ts-about__map iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  /* Grey map styling to match the design. */
  filter: grayscale(100%);
  /* Non-interactive: the design pin is a page overlay and cannot
   * track the iframe's panning — clicking opens Google Maps. */
  pointer-events: none;
}
.ts-about__map-link {
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
}
.ts-about {
  /* Blue design pin, anchored at the map center — the ll= embed centers
   * exactly on the store (str. Tâmplarilor 1A, Bălți). */
}
.ts-about__map-pin {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -100%);
  pointer-events: none;
}
.ts-about__map-pin svg {
  display: block;
  width: 48px;
  height: 61px;
}
.ts-about {
  /* --- Tablet (768–1023) --- */
}
@media (min-width: 768px) and (max-width: 1023px) {
  .ts-about__hero {
    background: linear-gradient(250.81deg, #cce3ef 19.43%, #78a0c4 41.856%, #254e7b 93.442%);
  }
  .ts-about__hero-inner {
    padding-top: 216px;
  }
  .ts-about__hero-title, .ts-about__hero-copy {
    max-width: 601px;
  }
  .ts-about__location {
    flex-direction: column;
  }
  .ts-about__location-text {
    width: 100%;
    max-width: 100%;
  }
  .ts-about__map {
    width: 100%;
    max-width: 100%;
  }
}
.ts-about {
  /* --- Mobile (<768) --- */
}
@media (max-width: 767px) {
  .ts-about__hero {
    height: 1157px;
    background: linear-gradient(262.74deg, #cce3ef 19.43%, #78a0c4 41.856%, #254e7b 93.442%);
    text-align: center;
  }
  .ts-about__hero-inner {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 160px 16px 280px;
  }
  .ts-about__hero-title {
    font-size: 36px;
    line-height: 40px;
    color: #f5f5f5;
  }
  .ts-about__hero-copy {
    gap: 8px;
    align-items: center;
  }
  .ts-about__hero-intro, .ts-about__hero-launch {
    font-size: 20px;
    line-height: 28px;
  }
  .ts-about__hero-sign {
    font-size: 20px;
    line-height: 28px;
  }
  .ts-about__location {
    flex-direction: column;
    padding: 46px 16px;
    gap: 35px;
  }
  .ts-about__location-text {
    width: 100%;
    max-width: 100%;
    gap: 32px;
  }
  .ts-about__location-title {
    font-size: 36px;
    line-height: 40px;
  }
  .ts-about__location-lead {
    font-size: 18px;
    line-height: 28px;
  }
  .ts-about__contacts li {
    font-size: 18px;
    line-height: 28px;
  }
  .ts-about__button--loc {
    width: 100%;
  }
  .ts-about__map {
    width: 100%;
    max-width: 100%;
    height: 637px;
  }
}

/*
 * Single product page (Figma 316-9223 / 316-10172 / 316-10625).
 * Rendered by woocommerce/content-single-product.php; the related section
 * reuses the Home page .ts-best-sellers / .ts-best-product classes.
 * Desktop layout from 1280px (fluid between 1280 and the design's 1921px),
 * stacked tablet layout 768–1279, mobile below 768.
 */
.ts-product-page {
  background: #fff;
}

.ts-product {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
  /* ---------- Main area ---------- */
}
.ts-product__main {
  /* Clear the fixed header, then the design's 74px breathing room
   * (Figma 316-9201: breadcrumb sits 74px below the menu bar). */
  padding: calc(var(--ts-header-clearance, 144px) + 74px) 64px 0;
}
.ts-product .woocommerce-breadcrumb {
  margin: 0 0 32px;
  color: #757575;
  font-size: 14px;
  line-height: 20px;
}
.ts-product .woocommerce-breadcrumb a {
  color: #069;
  text-decoration: none;
}
.ts-product .woocommerce-breadcrumb a:hover {
  text-decoration: underline;
}
.ts-product .woocommerce-breadcrumb {
  /* Home crumb is the Carbon Home 16 icon (Figma 316-9225), colored
   * like every other breadcrumb link. */
}
.ts-product .woocommerce-breadcrumb .ts-breadcrumb-home {
  display: inline-flex;
  align-items: center;
  vertical-align: -2px;
}
.ts-product .woocommerce-breadcrumb .ts-breadcrumb-home:hover {
  text-decoration: none;
}
.ts-product .woocommerce-breadcrumb .ts-breadcrumb-home .ts-icon {
  display: block;
}
.ts-product__cols {
  display: flex;
  align-items: flex-start;
  gap: 32px;
}
.ts-product {
  /* ---------- Gallery ---------- */
  /* Basis 1032px with shrink allowed: between 1280px and the design's
   * 1921px the gallery narrows (object-fit crops) instead of squeezing
   * the summary column to a sliver. */
}
.ts-product__gallery {
  flex: 0 1 1032px;
  max-width: 100%;
  display: flex;
  gap: 32px;
}
.ts-product {
  /* The thumbnail rail never grows taller than the main preview: it
   * scrolls vertically instead (js/product-page.js keeps the active
   * thumb in view and toggles the edge fades). */
}
.ts-product__thumbs {
  display: flex;
  flex-direction: column;
  gap: 16px;
  flex: 0 0 120px;
  position: relative;
  max-height: 817px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scroll-snap-type: y proximity;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.ts-product__thumbs::-webkit-scrollbar {
  display: none;
}
.ts-product__thumbs.is-scrollable-up.is-scrollable-down {
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 28px, #000 calc(100% - 28px), transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 28px, #000 calc(100% - 28px), transparent 100%);
}
.ts-product__thumbs.is-scrollable-up:not(.is-scrollable-down) {
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 28px, #000 100%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 28px, #000 100%);
}
.ts-product__thumbs.is-scrollable-down:not(.is-scrollable-up) {
  -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 calc(100% - 28px), transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0, #000 calc(100% - 28px), transparent 100%);
}
.ts-product__thumb {
  padding: 0;
  width: 120px;
  height: 150px;
  flex: 0 0 150px;
  border: 0;
  border-radius: 12px;
  overflow: hidden;
  background: #e3f1f9;
  cursor: pointer;
  opacity: 0.7;
  scroll-snap-align: start;
  transition: opacity 0.2s ease, box-shadow 0.2s ease;
}
.ts-product__thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ts-product__thumb.is-active {
  opacity: 1;
  box-shadow: 0 0 0 2px #3398c0;
}
.ts-product__image {
  position: relative;
  flex: 1;
  min-width: 0;
  height: 817px;
  border-radius: 32px;
  overflow: hidden;
  background: #e3f1f9;
}
.ts-product__image img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ts-product__dots {
  display: none;
  justify-content: center;
  /* Figma 316-10625: 16px dots at 16px pitch (touching). */
  gap: 0;
  margin-top: 8px;
}
.ts-product__dot {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: transparent;
  border: 0;
  position: relative;
  cursor: pointer;
  /* Figma dot component: 7.5px circle, #8E8E8E active,
   * #6C7584 @ 12% inactive. */
}
.ts-product__dot::after {
  content: "";
  position: absolute;
  inset: 4.25px;
  border-radius: 50%;
  background: rgba(108, 117, 132, 0.12);
}
.ts-product__dot.is-active::after {
  background: #8e8e8e;
}
.ts-product {
  /* ---------- Summary ---------- */
  /* Basis 400px keeps the column usable while the gallery shrinks on
   * narrower desktops; at 1921px it grows to the design's 729px. */
}
.ts-product__summary {
  flex: 1 1 400px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 32px;
}
.ts-product__head {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  order: 1;
}
.ts-product__eyebrow {
  color: #757575;
  font-size: 16px;
  line-height: 24px;
}
.ts-product__title {
  margin: 0;
  color: #444547;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 36px;
  font-weight: 600;
  line-height: 40px;
}
.ts-product__price {
  color: #007eb0;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 36px;
  font-weight: 600;
  line-height: 40px;
}
.ts-product__price del {
  color: #757575;
  font-size: 24px;
}
.ts-product__price del span {
  text-decoration: line-through;
}
.ts-product__price ins {
  /* Discounted active price — sale red like the catalog cards. */
  color: #e03131;
  text-decoration: none;
}
.ts-product {
  /* WooCommerce variation form flows into the summary column; the
   * simple-product form (no variations table) renders the same cart
   * row itself: button + favorite, quantity hidden per design. */
}
.ts-product form.variations_form.cart {
  display: contents;
}
.ts-product form.cart:not(.variations_form) {
  order: 5;
  display: flex;
  align-items: center;
  gap: 25px;
  margin: 0;
}
.ts-product form.cart:not(.variations_form) .quantity {
  /* Same as the variation form: the design has no stepper. */
  display: none !important;
}
.ts-product table.variations {
  order: 2;
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
  border: 0;
  /* WooCommerce wraps the rows in a tbody, so the table's own gap
   * never reaches the rows — flex the tbody too, or the attribute
   * groups (Culoare circles / Mărime chips) collapse together. */
}
.ts-product table.variations tbody {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.ts-product table.variations tr {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ts-product table.variations th,
.ts-product table.variations td {
  padding: 0;
  border: 0;
  text-align: left;
  background: transparent;
}
.ts-product table.variations label {
  color: #444547;
  font-weight: 600;
  font-size: 16px;
  line-height: 24px;
  /* Figma labels read "Culoare:" / "Marime:". */
}
.ts-product table.variations label::after {
  content: ":";
}
.ts-product table.variations {
  /* Not in the design — WooCommerce's "Șterge" reset link. */
}
.ts-product table.variations .reset_variations {
  display: none !important;
}
.ts-product table.variations select {
  width: auto;
  min-width: 160px;
  height: 48px;
  padding: 0 40px 0 16px;
  border: 1px solid #dbdbdb;
  border-radius: 999px;
  background-color: #f5f5f5;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='m16 22-8-8 1.5-1.5L16 19l6.5-6.5L24 14z' fill='%23444547'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 16px;
  appearance: none;
  color: #444547;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
  font-size: 16px;
  line-height: 24px;
}
.ts-product table.variations .ts-visually-hidden-select {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
.ts-product__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.ts-product__chip {
  min-width: 48px;
  height: 48px;
  padding: 0 14px;
  border: 1px solid #dbdbdb;
  border-radius: 999px;
  background: #f5f5f5;
  color: #444547;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
  font-size: 16px;
  line-height: 24px;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease;
}
.ts-product__chip:hover {
  border-color: #3398c0;
}
.ts-product__chip.is-active {
  border-color: #3398c0;
  background: rgba(0, 173, 241, 0.24);
  color: #004e82;
}
.ts-product {
  /* Color swatches (Figma 316-9223 "Frame 127", same on tablet/mobile):
   * 48px circles at a 56px pitch; every circle carries a 1px #D9D9D9
   * hairline (the design strokes even the white one) and the selected
   * one gets a 2px #3398C0 ring drawn inside, like the SVG stroke. */
}
.ts-product__swatches {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.ts-product__swatch {
  width: 48px;
  height: 48px;
  padding: 0;
  border: 1px solid #d9d9d9;
  border-radius: 50%;
  background: #f5f5f5;
  cursor: pointer;
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
}
.ts-product__swatch:hover {
  border-color: #3398c0;
}
.ts-product__swatch.is-active {
  border-color: #3398c0;
  box-shadow: inset 0 0 0 2px #3398c0;
}
.ts-product__swatch.is-disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.ts-product__swatch:focus-visible {
  outline: 2px solid #007eb0;
  outline-offset: 2px;
}
.ts-product {
  /* Attributes + description + cart row ordering (Figma order). */
}
.ts-product__attrs {
  order: 3;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
  width: 100%;
  color: #444547;
  font-size: 16px;
  line-height: 24px;
}
.ts-product__attr {
  display: flex;
  gap: 4px;
}
.ts-product__attr dt {
  font-weight: 600;
}
.ts-product__attr dd {
  margin: 0;
}
.ts-product__desc {
  order: 4;
  width: 100%;
  color: #444547;
  font-size: 16px;
  line-height: 24px;
}
.ts-product__desc p {
  margin: 0 0 8px;
}
.ts-product__desc-label {
  font-weight: 600;
}
.ts-product {
  /* Cart row: quantity hidden per design; button + favorite pill/circle. */
}
.ts-product .single_variation_wrap {
  display: contents;
}
.ts-product .single_variation_wrap .woocommerce-variation,
.ts-product .single_variation_wrap .woocommerce-variation-price,
.ts-product .single_variation_wrap .woocommerce-variation-availability,
.ts-product .single_variation_wrap .woocommerce-message {
  display: none;
}
.ts-product .woocommerce-variation-add-to-cart {
  order: 5;
  display: flex;
  align-items: center;
  gap: 25px;
  margin: 0;
}
.ts-product .woocommerce-variation-add-to-cart .quantity {
  /* !important: WooCommerce's variation JS re-shows the stepper
   * with an inline style; the design has no quantity control and
   * its 243px input was forcing the mobile column to 421px. */
  display: none !important;
}
.ts-product {
  /* Add-to-cart pill — shared by the variation row and the simple form. */
}
.ts-product .woocommerce-variation-add-to-cart .button,
.ts-product .woocommerce-variation-add-to-cart .single_add_to_cart_button,
.ts-product form.cart:not(.variations_form) .button,
.ts-product form.cart:not(.variations_form) .single_add_to_cart_button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  padding: 0 16px;
  border: 0;
  border-radius: 32px;
  background: #007eb0;
  color: #fff;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
  font-size: 14px;
  line-height: 20px;
  cursor: pointer;
  transition: background 0.2s ease;
}
.ts-product .woocommerce-variation-add-to-cart .button:hover, .ts-product .woocommerce-variation-add-to-cart .button:focus,
.ts-product .woocommerce-variation-add-to-cart .single_add_to_cart_button:hover,
.ts-product .woocommerce-variation-add-to-cart .single_add_to_cart_button:focus,
.ts-product form.cart:not(.variations_form) .button:hover,
.ts-product form.cart:not(.variations_form) .button:focus,
.ts-product form.cart:not(.variations_form) .single_add_to_cart_button:hover,
.ts-product form.cart:not(.variations_form) .single_add_to_cart_button:focus {
  background: #006a94;
  color: #fff;
}
.ts-product .woocommerce-variation-add-to-cart .button.disabled, .ts-product .woocommerce-variation-add-to-cart .button[disabled],
.ts-product .woocommerce-variation-add-to-cart .single_add_to_cart_button.disabled,
.ts-product .woocommerce-variation-add-to-cart .single_add_to_cart_button[disabled],
.ts-product form.cart:not(.variations_form) .button.disabled,
.ts-product form.cart:not(.variations_form) .button[disabled],
.ts-product form.cart:not(.variations_form) .single_add_to_cart_button.disabled,
.ts-product form.cart:not(.variations_form) .single_add_to_cart_button[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
}
.ts-product__fav {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid #dbdbdb;
  border-radius: 999px;
  background: #f5f5f5;
  color: #444547;
  cursor: pointer;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.ts-product__fav .ts-icon {
  width: 20px;
  height: 20px;
}
.ts-product__fav.is-active {
  color: #007eb0;
  border-color: #3398c0;
}
.ts-product {
  /* ---------- Tablet (768–1279, Figma 316-10172) ----------
   * Stacked below 1280: the two-column desktop layout needs
   * ~1600px to breathe, and the Figma tablet frame (1025) sits
   * inside this range. */
}
@media (min-width: 768px) and (max-width: 1279px) {
  .ts-product__main {
    padding-top: calc(var(--ts-header-clearance, 144px) + 74px);
  }
  .ts-product__cols {
    flex-direction: column;
  }
  .ts-product {
    /* flex: none — the desktop row sets flex-basis 1032px, which in
     * this column layout would become the gallery's height. */
  }
  .ts-product__gallery {
    flex: none;
    width: 100%;
  }
  .ts-product__image {
    height: 817px;
  }
  .ts-product__thumbs {
    flex: 0 0 120px;
  }
  .ts-product__summary {
    flex: none;
  }
}
.ts-product {
  /* ---------- Mobile (<768, Figma 316-10625) ---------- */
}
@media (max-width: 767px) {
  .ts-product__main {
    /* Figma 316-10625: breadcrumb 40px below the header bar. */
    padding: calc(var(--ts-header-clearance, 102px) + 40px) 16px 0;
  }
  .ts-product .woocommerce-breadcrumb {
    margin-bottom: 32px;
  }
  .ts-product__cols {
    flex-direction: column;
  }
  .ts-product {
    /* flex: none — same column-basis trap as tablet: without it the
     * image's flex-basis 0px becomes its height and it collapses. */
  }
  .ts-product__gallery {
    flex: none;
    flex-direction: column;
    width: 100%;
  }
  .ts-product__thumbs {
    display: none;
  }
  .ts-product__image {
    flex: none;
    height: 473px;
  }
  .ts-product__dots {
    display: flex;
  }
  .ts-product__summary {
    flex: none;
    gap: 32px;
  }
  .ts-product__title {
    font-size: 30px;
    line-height: 36px;
  }
  .ts-product__price {
    font-size: 36px;
    line-height: 40px;
  }
  .ts-product .woocommerce-variation-add-to-cart,
  .ts-product form.cart:not(.variations_form) {
    width: 100%;
    flex-direction: row;
  }
  .ts-product .woocommerce-variation-add-to-cart .button,
  .ts-product .woocommerce-variation-add-to-cart .single_add_to_cart_button,
  .ts-product form.cart:not(.variations_form) .button,
  .ts-product form.cart:not(.variations_form) .single_add_to_cart_button {
    flex: 1;
  }
}

/*
 * Product category / archive page (Figma 331-10427 / 331-11358 / 331-11557)
 * plus the "Filtru si Sortare" modal. Rendered by
 * woocommerce/archive-product.php; cards reuse the .ts-best-product classes.
 */
.ts-archive-page {
  background: #fff;
}

.ts-archive {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
}
.ts-archive__main {
  /* Clear the fixed header + the design's 74px breathing room. */
  padding: calc(var(--ts-header-clearance, 144px) + 74px) 64px;
}
.ts-archive .woocommerce-breadcrumb {
  margin: 0 0 32px;
  color: #757575;
  font-size: 14px;
  line-height: 20px;
}
.ts-archive .woocommerce-breadcrumb a {
  color: #069;
  text-decoration: none;
}
.ts-archive .woocommerce-breadcrumb a:hover {
  text-decoration: underline;
}
.ts-archive .woocommerce-breadcrumb {
  /* Home crumb is the Carbon Home 16 icon (Figma 316-9225), colored
   * like every other breadcrumb link. */
}
.ts-archive .woocommerce-breadcrumb .ts-breadcrumb-home {
  display: inline-flex;
  align-items: center;
  vertical-align: -2px;
}
.ts-archive .woocommerce-breadcrumb .ts-breadcrumb-home:hover {
  text-decoration: none;
}
.ts-archive .woocommerce-breadcrumb .ts-breadcrumb-home .ts-icon {
  display: block;
}
.ts-archive__header {
  margin-bottom: 32px;
}
.ts-archive__title {
  margin: 0;
  color: #444547;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 44px;
  font-weight: 600;
  line-height: 48px;
  letter-spacing: -2px;
}
.ts-archive__subtitle {
  margin: 24px 0 0;
  max-width: 1486px;
  color: #444547;
  font-size: 24px;
  line-height: 32px;
}
.ts-archive__toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 32px 0 32px;
}
.ts-archive__count {
  margin: 0;
  color: #444547;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 18px;
  font-weight: 600;
  line-height: 28px;
}
.ts-archive__filter-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 44px;
  padding: 0 16px;
  border: 1px solid #3398c0;
  border-radius: 999px;
  background: transparent;
  color: #004e82;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
  font-size: 14px;
  line-height: 20px;
  cursor: pointer;
  transition: background 0.2s ease;
}
.ts-archive__filter-btn .ts-icon {
  width: 20px;
  height: 20px;
}
.ts-archive__filter-btn:hover {
  background: rgba(0, 173, 241, 0.12);
}
.ts-archive__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 32px;
}
.ts-archive {
  /* Shop collection: category tiles (Sortiment card markup, resized to
   * the archive grid — the fixed 424×480 slider size doesn't fit). */
}
.ts-archive__cats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 32px;
}
.ts-archive__cats .ts-sortiment-card {
  width: 100%;
  height: auto;
  aspect-ratio: 20/23;
  border-radius: 24px;
  padding: 0 20px 20px;
}
.ts-archive__cats .ts-sortiment-card__name {
  font-size: 1.25rem;
  line-height: 28px;
}
.ts-archive__cats .ts-sortiment-card__badge {
  font-size: 0.8125rem;
}
.ts-archive__cats .ts-sortiment-card__icon {
  flex-basis: 20px;
  width: 20px;
  height: 20px;
}
.ts-archive__pagination {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px;
  row-gap: 8px;
  margin-top: 56px;
  /* paginate_links() (type=plain) outputs flat <a>/<span class="page-numbers">. */
}
.ts-archive__pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  height: 44px;
  padding: 0 10px;
  border-radius: 999px;
  color: #444547;
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
  text-decoration: none;
  transition: background 0.2s ease;
}
.ts-archive__pagination .page-numbers.current {
  background: rgba(0, 173, 241, 0.24);
  color: #004e82;
}
.ts-archive__pagination .page-numbers:hover {
  background: rgba(0, 173, 241, 0.12);
  color: #444547;
}
.ts-archive__pagination .page-numbers.dots {
  min-width: 44px;
  letter-spacing: 1px;
}
.ts-archive__pagination .page-numbers.is-disabled {
  opacity: 0.4;
  cursor: default;
  pointer-events: none;
}
.ts-archive__pagination .page-numbers .ts-icon {
  width: 20px;
  height: 20px;
}
.ts-archive__pagination ul.page-numbers {
  display: flex;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.ts-archive__pagination ul.page-numbers li {
  display: contents;
}
.ts-archive {
  /* Zero-results message — plain, background-free text with a pill link
   * (WooCommerce's .woocommerce-info bar is intentionally suppressed).
   * Prefixed with .woocommerce (present on the #ts-archive wrapper) so the
   * specificity beats the generic .woocommerce-info bar styles. */
}
.woocommerce .ts-archive__none {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
  color: #444547;
  font-size: 16px;
  line-height: 24px;
}
.woocommerce .ts-archive__none::before {
  display: none;
}
.woocommerce .ts-archive__none a {
  display: flex;
  align-items: center;
  width: fit-content;
  margin: 16px 0 0;
  padding: 12px 16px;
  border-radius: 32px;
  background: #007eb0;
  color: #fff;
  font-size: 14px;
  line-height: 20px;
  text-decoration: none;
  white-space: nowrap;
}
.woocommerce .ts-archive__none a:hover, .woocommerce .ts-archive__none a:focus {
  color: #fff;
  background: #006a94;
}
.ts-archive {
  /* Tablet (768–1023) */
}
@media (min-width: 768px) and (max-width: 1023px) {
  .ts-archive__main {
    padding: calc(var(--ts-header-clearance, 144px) + 74px) 64px;
  }
  .ts-archive__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .ts-archive__cats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.ts-archive {
  /* Mobile (<768) */
}
@media (max-width: 767px) {
  .ts-archive__main {
    padding: calc(var(--ts-header-clearance, 102px) + 46px) 16px;
  }
  .ts-archive__title {
    font-size: 36px;
    line-height: 40px;
    letter-spacing: 0;
  }
  .ts-archive__subtitle {
    font-size: 18px;
    line-height: 28px;
  }
  .ts-archive__toolbar {
    margin: 24px 0;
  }
  .ts-archive__filter-btn {
    flex-shrink: 0;
  }
  .ts-archive__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
  }
  .ts-archive__cats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
  }
  .ts-archive__cats .ts-sortiment-card {
    border-radius: 16px;
    padding: 0 12px 12px;
  }
  .ts-archive__cats .ts-sortiment-card__name {
    font-size: 1rem;
    line-height: 22px;
  }
  .ts-archive__cats .ts-sortiment-card__badge {
    font-size: 0.75rem;
    line-height: 16px;
  }
  .ts-archive__cats .ts-sortiment-card__icon {
    flex-basis: 16px;
    width: 16px;
    height: 16px;
  }
  .ts-archive__pagination {
    /* Flat paginate_links() output — the <a>/<span> elements ARE
     * .page-numbers (a descendant selector never matched them). */
  }
  .ts-archive__pagination .page-numbers {
    min-width: 36px;
    height: 36px;
    font-size: 12px;
  }
}

/* ---------- Filtru si Sortare modal ---------- */
.ts-filters-open {
  overflow: hidden;
}

.ts-filters {
  position: fixed;
  inset: 0;
  z-index: 99999;
}
.ts-filters__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(18, 43, 68, 0.55);
}
.ts-filters__panel {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  width: 640px;
  max-width: calc(100vw - 32px);
  max-height: min(80vh, 720px);
  border-radius: 32px;
  background: #fff;
  overflow: hidden;
  box-shadow: 0 24px 64px rgba(18, 43, 68, 0.24);
}
.ts-filters__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px 32px 16px;
}
.ts-filters__title {
  margin: 0;
  color: #444547;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 24px;
  font-weight: 600;
  line-height: 32px;
}
.ts-filters__close {
  /* Bare icon button: padding must be reset or the UA default eats the
   * 44px box (flex-shrink squeezed the 20px icon to ~3.6px). */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: #444547;
  cursor: pointer;
}
.ts-filters__close .ts-icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
}
.ts-filters__close:hover, .ts-filters__close:focus {
  background: transparent;
  color: #254e7b;
}
.ts-filters__body {
  flex: 1;
  overflow-y: auto;
  padding: 8px 32px 16px;
}
.ts-filters__group {
  padding: 16px 0;
}
.ts-filters__group + .ts-filters__group {
  border-top: 1px solid #e5e5e5;
}
.ts-filters__group-title {
  margin: 0 0 12px;
  color: #444547;
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
}
.ts-filters__options {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.ts-filters__option {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 36px;
  color: #444547;
  font-size: 16px;
  line-height: 24px;
  cursor: pointer;
}
.ts-filters__option input {
  width: 18px;
  height: 18px;
  accent-color: #007eb0;
}
.ts-filters__price {
  display: flex;
  align-items: center;
  gap: 12px;
}
.ts-filters__price input {
  flex: 1;
  height: 48px;
  padding: 0 16px;
  border: 1px solid #dbdbdb;
  border-radius: 999px;
  background: #f5f5f5;
  color: #444547;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
  font-size: 16px;
}
.ts-filters__price input:focus {
  outline: none;
  border-color: #3398c0;
}
.ts-filters__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.ts-filters__chip input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.ts-filters__chip span {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: 0 16px;
  border: 1px solid #dbdbdb;
  border-radius: 999px;
  background: #f5f5f5;
  color: #444547;
  font-size: 16px;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease;
}
.ts-filters__chip input:checked + span {
  border-color: #3398c0;
  background: rgba(0, 173, 241, 0.24);
  color: #004e82;
}
.ts-filters__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 32px 24px;
  border-top: 1px solid #e5e5e5;
}
.ts-filters__reset {
  color: #069;
  font-size: 14px;
  line-height: 20px;
  text-decoration: none;
}
.ts-filters__reset:hover {
  text-decoration: underline;
}
.ts-filters__apply {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  padding: 0 16px;
  border: 0;
  border-radius: 32px;
  background: #007eb0;
  color: #fff;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
  font-size: 14px;
  line-height: 20px;
  cursor: pointer;
  transition: background 0.2s ease;
}
.ts-filters__apply:hover {
  background: #006a94;
}
.ts-filters {
  /* Mobile: floating card with a 12px gutter on every side — rounded
   * corners stay visible against the backdrop instead of bleeding into
   * the screen edges (mirrors the header pill's inset framing). */
}
@media (max-width: 767px) {
  .ts-filters__panel {
    top: auto;
    bottom: 12px;
    left: 12px;
    right: 12px;
    transform: none;
    width: auto;
    max-width: none;
    max-height: calc(86vh - 24px);
    border-radius: 24px;
  }
  .ts-filters__head, .ts-filters__foot {
    padding-inline: 20px;
  }
  .ts-filters__body {
    padding-inline: 20px;
  }
  .ts-filters {
    /* Was nested under &__foot (compiled to the non-existent
     * .ts-filters__foot__apply), so the button never stretched. */
  }
  .ts-filters__apply {
    flex: 1;
  }
}

/*
 * Cart page (Figma 318-11848 desktop / 318-12503 tablet / 318-13343 mobile).
 * Rendered by page-templates/template-cart.php; the "Top produse pentru
 * tine" section reuses the Home page .ts-best-sellers classes.
 */
.ts-cart-page {
  background: #fff;
}

.ts-cart {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
}
.ts-cart__main {
  /* Clear the fixed header + the design's 74px breathing room. */
  padding: calc(var(--ts-header-clearance, 144px) + 74px) 64px 60px;
}
.ts-cart__header {
  margin-bottom: 60px;
}
.ts-cart__title {
  margin: 0 0 12px;
  color: #444547;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 44px;
  font-weight: 600;
  letter-spacing: -2px;
  line-height: 48px;
}
.ts-cart__subtitle {
  margin: 0;
  color: #757575;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 24px;
  font-weight: 400;
  line-height: 32px;
}
.ts-cart__layout {
  display: flex;
  align-items: stretch;
  gap: 32px;
}
.ts-cart__form {
  /* Design ratio 1032:727 between the two columns; basis 0 keeps the
   * proportion at any viewport so nothing overflows between the
   * Figma breakpoints. Capped at the design width. */
  flex: 1032 1 0;
  max-width: 1032px;
  min-width: 0;
}
.ts-cart__items {
  display: flex;
  flex-direction: column;
  gap: 32px;
  /* Two items fit; taller lists scroll (max-height set by JS) so the
   * page height does not grow with the product count. */
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: #dbdbdb transparent;
  padding-right: 8px;
}
.ts-cart__items::-webkit-scrollbar {
  width: 6px;
}
.ts-cart__items::-webkit-scrollbar-thumb {
  border-radius: 3px;
  background: #dbdbdb;
}
.ts-cart__items::-webkit-scrollbar-track {
  background: transparent;
}
.ts-cart {
  /* ---------- Item card ---------- */
}
.ts-cart__item {
  display: flex;
  align-items: stretch;
  gap: 34px;
  padding-right: 32px;
  border: 1px solid #e8e8e8;
  border-radius: 32px;
  background: #fff;
}
.ts-cart {
  /* Stretches with the card so the image always covers the full height,
   * even when the body column grows (multiple attribute lines, wrapping). */
}
.ts-cart__item-media {
  flex: 0 0 272px;
  min-height: 257px;
  overflow: hidden;
  border-radius: 32px 0 0 32px;
  background: #e3f1f9;
}
.ts-cart__item-media img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center;
}
.ts-cart__item-body {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 32px 0 32px 0;
  min-width: 0;
}
.ts-cart__item-info {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.ts-cart__item-eyebrow {
  margin: 0 0 8px;
  color: #757575;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 16px;
  line-height: 24px;
}
.ts-cart__item-titlerow {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
}
.ts-cart__item-name {
  margin: 0;
  color: #444547;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 30px;
  font-weight: 600;
  line-height: 36px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ts-cart__item-name a {
  color: inherit;
  text-decoration: none;
}
.ts-cart__item-name a:hover {
  text-decoration: underline;
}
.ts-cart__item-price {
  flex-shrink: 0;
  margin: 0;
  color: #004e82;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 24px;
  font-weight: 600;
  line-height: 32px;
  text-align: right;
}
.ts-cart__item-price .woocommerce-Price-currencySymbol {
  font-size: inherit;
}
.ts-cart__item-attr {
  margin: 0;
  color: #444547;
  font-size: 16px;
  line-height: 24px;
}
.ts-cart__item-attr-label {
  font-weight: 400;
}
.ts-cart__item-attr-value {
  font-weight: 600;
}
.ts-cart__item-actions {
  display: flex;
  align-items: center;
  gap: 24px;
}
.ts-cart__qty {
  display: block;
}
.ts-cart__qty-input {
  width: 62px;
  height: 44px;
  padding: 12px;
  border: 1px solid #dbdbdb;
  border-radius: 12px;
  background: #fff;
  color: #444547;
  font-size: 14px;
  line-height: 20px;
  text-align: left;
  -moz-appearance: textfield;
}
.ts-cart__qty-input::-webkit-outer-spin-button, .ts-cart__qty-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.ts-cart__qty-input:focus {
  outline: none;
  border-color: #3398c0;
}
.ts-cart {
  /* Plain icon buttons per the Figma design — no border, no hover state. */
}
.ts-cart__icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0 12px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: #444547;
  text-decoration: none;
  cursor: pointer;
}
.ts-cart__icon-btn .ts-icon {
  width: 20px;
  height: 20px;
}
.ts-cart__icon-btn:hover, .ts-cart__icon-btn:focus, .ts-cart__icon-btn:active, .ts-cart__icon-btn:visited {
  background: transparent;
  color: #444547;
  outline: none;
}
.ts-cart__fav.is-active {
  color: #004e82;
}
.ts-cart__update {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.ts-cart {
  /* ---------- Summary (card + checkout button column) ---------- */
}
.ts-cart__aside {
  flex: 727 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  align-self: stretch;
  gap: 24px;
}
.ts-cart__summary {
  display: flex;
  flex-direction: column;
  gap: 24px;
  flex: 1 1 auto;
  width: 100%;
  padding: 32px;
  border: 1px solid #dbdbdb;
  border-radius: 32px;
}
.ts-cart {
  /* Guard against DOM-rewriting scripts nesting a clone of the heading. */
}
.ts-cart__summary-title .ts-cart__summary-title {
  display: none;
}
.ts-cart__summary-title {
  margin: 0;
  color: #444547;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 44px;
  font-weight: 600;
  letter-spacing: -2px;
  line-height: 48px;
}
.ts-cart__summary-rows {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.ts-cart__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  color: #757575;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 24px;
  font-weight: 400;
  line-height: 32px;
}
.ts-cart__row-label {
  flex: 0 1 272px;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ts-cart__row-value {
  color: #007eb0;
  font-weight: 600;
  text-align: right;
}
.ts-cart__row--total {
  align-items: center;
  margin-top: auto;
}
.ts-cart__row--total .ts-cart__row-value {
  font-size: 30px;
  line-height: 36px;
}
.ts-cart__divider {
  height: 2px;
  background: #e8e8e8;
}
.ts-cart__checkout, .ts-cart__empty-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  padding: 0 16px;
  border-radius: 32px;
  background: #007eb0;
  color: #fff;
  font-size: 14px;
  line-height: 20px;
  text-decoration: none;
  white-space: nowrap;
  /* Keep the label white in every state — the theme's global link
   * colors would otherwise recolor it on hover/focus/active/visited. */
}
.ts-cart__checkout:hover, .ts-cart__empty-link:hover, .ts-cart__checkout:focus, .ts-cart__empty-link:focus, .ts-cart__checkout:active, .ts-cart__empty-link:active, .ts-cart__checkout:visited, .ts-cart__empty-link:visited {
  color: #fff;
}
.ts-cart__checkout:hover, .ts-cart__empty-link:hover {
  background: #006a94;
}
.ts-cart {
  /* ---------- Empty state ---------- */
}
.ts-cart__empty {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
}
.ts-cart__empty-text {
  margin: 0;
  color: #757575;
  font-size: 24px;
  line-height: 32px;
}
.ts-cart {
  /* ---------- Tablet (single column per Figma 318-12503) ---------- */
}
@media (max-width: 1279px) {
  .ts-cart__main {
    padding: calc(var(--ts-header-clearance, 144px) + 74px) 64px 48px;
  }
  .ts-cart__layout {
    flex-direction: column;
    align-items: stretch;
  }
  .ts-cart__form {
    flex-basis: auto;
    max-width: none;
  }
  .ts-cart__summary {
    height: auto;
  }
  .ts-cart__row--total {
    margin-top: 0;
  }
}
.ts-cart {
  /* ---------- Mobile ---------- */
}
@media (max-width: 767px) {
  .ts-cart__main {
    padding: calc(var(--ts-header-clearance, 102px) + 46px) 16px 40px;
  }
  .ts-cart__header {
    margin-bottom: 32px;
  }
  .ts-cart__title {
    font-size: 36px;
    line-height: 40px;
  }
  .ts-cart {
    /* Guard against DOM-rewriting scripts nesting a clone of the heading. */
  }
  .ts-cart__summary-title .ts-cart__summary-title {
    display: none;
  }
  .ts-cart__summary-title {
    font-size: 30px;
    line-height: 36px;
  }
  .ts-cart__item {
    flex-direction: column;
    gap: 0;
    padding-right: 16px;
  }
  .ts-cart__item-media {
    flex-basis: auto;
    width: 100%;
    height: 321px;
    border-radius: 32px 32px 0 0;
  }
  .ts-cart__item-media img {
    max-width: none;
    object-fit: cover;
  }
  .ts-cart__item-body {
    padding: 24px 16px 24px 16px;
  }
  .ts-cart__item-name {
    font-size: 24px;
    line-height: 32px;
    white-space: normal;
  }
  .ts-cart__item-price {
    font-size: 24px;
    text-align: right;
  }
  .ts-cart__item-titlerow {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  .ts-cart__item-titlerow .ts-cart__item-price {
    align-self: stretch;
  }
  .ts-cart__row {
    font-size: 20px;
    line-height: 28px;
  }
  .ts-cart__row-label {
    flex-basis: auto;
  }
  .ts-cart__row--total .ts-cart__row-value {
    font-size: 24px;
    line-height: 32px;
  }
  .ts-cart__item-actions {
    gap: 16px;
  }
}

/*
 * Checkout page (Figma 318-11148 desktop / 330-9294 tablet / 330-9765 mobile).
 * Rendered by page-templates/template-checkout.php +
 * woocommerce/checkout/form-checkout.php. The "Rezumatul comenzii" card
 * reuses the .ts-cart__summary classes from the cart page.
 */
.ts-checkout-page {
  background: #fff;
}

.ts-checkout {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
}
.ts-checkout__main {
  /* Clear the fixed header + the design's 74px breathing room. */
  padding: calc(var(--ts-header-clearance, 144px) + 74px) 64px 60px;
}
.ts-checkout__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 44px;
}
.ts-checkout__title {
  margin: 0;
  color: #444547;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 44px;
  font-weight: 600;
  letter-spacing: -2px;
  line-height: 48px;
}
.ts-checkout__login {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  padding: 0 16px;
  border-radius: 36px;
  background: rgba(0, 173, 241, 0.12);
  color: #004e82;
  font-size: 14px;
  line-height: 20px;
  text-decoration: none;
  white-space: nowrap;
}
.ts-checkout__login:hover, .ts-checkout__login:focus, .ts-checkout__login:active, .ts-checkout__login:visited {
  color: #004e82;
}
.ts-checkout__cols {
  display: flex;
  align-items: flex-start;
  gap: 32px;
}
.ts-checkout {
  /* Design ratio 1032:727 between the two columns; caps at design width. */
}
.ts-checkout__billing {
  flex: 1032 1 0;
  max-width: 1032px;
  min-width: 0;
}
.ts-checkout__aside {
  flex: 727 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.ts-checkout {
  /* ---------- Billing fields ---------- */
}
.ts-checkout #customer_details .col-2 {
  display: none;
}
.ts-checkout .woocommerce-billing-fields__wrapper h3,
.ts-checkout .woocommerce-billing-fields h3 {
  display: none;
}
.ts-checkout .form-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0;
  width: auto;
  padding: 0;
}
.ts-checkout {
  /* Figma 318-11158: field rows at 21px, label 4px above the input,
   * three-column Adresă|Scară|Apartament row, textarea 180px.
   * Grid placement is by field id so the layout is independent of DOM
   * order — WooCommerce's address-i18n script re-sorts the fields by
   * priority after load. */
}
.ts-checkout .woocommerce-billing-fields__field-wrapper,
.ts-checkout .woocommerce-additional-fields {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 21px;
}
.ts-checkout .woocommerce-billing-fields__field-wrapper > .form-row,
.ts-checkout .woocommerce-additional-fields > .form-row {
  grid-column: 1/-1;
  float: none;
  width: auto;
}
.ts-checkout .woocommerce-billing-fields__field-wrapper > p[id=billing_first_name_field],
.ts-checkout .woocommerce-additional-fields > p[id=billing_first_name_field] {
  grid-area: 1/1/2/4;
}
.ts-checkout .woocommerce-billing-fields__field-wrapper > p[id=billing_last_name_field],
.ts-checkout .woocommerce-additional-fields > p[id=billing_last_name_field] {
  grid-area: 1/4/2/7;
}
.ts-checkout .woocommerce-billing-fields__field-wrapper > p[id=billing_country_field],
.ts-checkout .woocommerce-additional-fields > p[id=billing_country_field] {
  grid-area: 2/1/3/4;
}
.ts-checkout .woocommerce-billing-fields__field-wrapper > p[id=billing_city_field],
.ts-checkout .woocommerce-additional-fields > p[id=billing_city_field] {
  grid-area: 2/4/3/7;
}
.ts-checkout .woocommerce-billing-fields__field-wrapper > p[id=billing_address_1_field],
.ts-checkout .woocommerce-additional-fields > p[id=billing_address_1_field] {
  grid-area: 3/1/4/3;
}
.ts-checkout .woocommerce-billing-fields__field-wrapper > p[id=billing_address_2_field],
.ts-checkout .woocommerce-additional-fields > p[id=billing_address_2_field] {
  grid-area: 3/3/4/5;
}
.ts-checkout .woocommerce-billing-fields__field-wrapper > p[id=billing_apartament_field],
.ts-checkout .woocommerce-additional-fields > p[id=billing_apartament_field] {
  grid-area: 3/5/4/7;
}
.ts-checkout .woocommerce-billing-fields__field-wrapper > p[id=billing_phone_field],
.ts-checkout .woocommerce-additional-fields > p[id=billing_phone_field] {
  grid-area: 4/1/5/4;
}
.ts-checkout .woocommerce-billing-fields__field-wrapper > p[id=billing_email_field],
.ts-checkout .woocommerce-additional-fields > p[id=billing_email_field] {
  grid-area: 4/4/5/7;
}
.ts-checkout .woocommerce-account-fields,
.ts-checkout .woocommerce-additional-fields {
  margin-top: 21px;
}
.ts-checkout label {
  margin: 0 0 4px 4px;
  color: #444547;
  font-size: 14px;
  line-height: 20px;
}
.ts-checkout label .required,
.ts-checkout label abbr.required {
  color: #940000;
  text-decoration: none;
}
.ts-checkout label .optional {
  visibility: hidden;
}
.ts-checkout .input-text,
.ts-checkout #customer_details select,
.ts-checkout .ts-checkout__billing select {
  width: 100%;
  height: 44px;
  padding: 12px;
  border: 1px solid #dbdbdb;
  border-radius: 12px;
  background: #fff;
  color: #444547;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
  font-size: 14px;
  line-height: 20px;
}
.ts-checkout .input-text:focus,
.ts-checkout #customer_details select:focus,
.ts-checkout .ts-checkout__billing select:focus {
  outline: none;
  border-color: #3398c0;
}
.ts-checkout .input-text::placeholder,
.ts-checkout #customer_details select::placeholder,
.ts-checkout .ts-checkout__billing select::placeholder {
  color: #8e8e8e;
}
.ts-checkout select {
  appearance: none;
  padding-right: 36px;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath fill='%23444547' d='M16 22L6 12 7.4 10.6 16 19.2 24.6 10.6 26 12z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 16px;
}
.ts-checkout textarea.input-text {
  height: 180px;
  resize: vertical;
}
.ts-checkout .woocommerce-validated .input-text {
  border-color: #dbdbdb;
}
.ts-checkout .woocommerce-invalid .input-text {
  border-color: #e2401c;
}
.ts-checkout {
  /* ---------- Order review card ---------- */
  /* Title rendered via ::before, and any nested clone produced by the
   * site's DOM-rewriting scripts (they nest a copy of the heading inside
   * itself) is hidden so the title renders exactly once. */
}
.ts-checkout__card-title::before {
  content: "Rezumatul comenzii";
}
.ts-checkout__card-title {
  /* The site locale switches per visitor (html[lang]) — the RU
   * catalog can't reach CSS-generated text, so it's swapped here. */
}
html[lang^=ru] .ts-checkout__card-title::before {
  content: "Итог заказа";
}
.ts-checkout__card-title {
  /* Hide clones injected by the site's DOM-rewriting scripts, whether
   * nested inside or placed after the original heading. */
}
.ts-checkout__card-title .ts-checkout__card-title, .ts-checkout__card-title ~ .ts-checkout__card-title {
  display: none;
}
.ts-checkout__card {
  /* The site's DOM-rewriting scripts wrap the card inside a duplicate
   * of itself (card > card). The outer copy becomes the visual card,
   * so the nested original must render as plain content — no second
   * border, padding or background. */
}
.ts-checkout__card .ts-checkout__card {
  display: block;
  border: 0;
  padding: 0;
  background: transparent;
  border-radius: 0;
}
.ts-checkout__card {
  /* The title inside the nested (content) copy is a duplicate — only
   * the outer wrapper's title stays visible. */
}
.ts-checkout__card .ts-checkout__card .ts-checkout__card-title {
  display: none;
}
.ts-checkout__card .shop_table {
  width: 100%;
  border-collapse: collapse;
}
.ts-checkout__card .shop_table th,
.ts-checkout__card .shop_table td {
  padding: 0;
  border: 0;
  background: transparent;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
.ts-checkout__card .shop_table thead {
  display: none;
}
.ts-checkout__card .shop_table tbody tr td.product-name {
  padding: 12px 0;
  border-bottom: 1px solid #e8e8e8;
  color: #757575;
  font-size: 16px;
  line-height: 24px;
}
.ts-checkout__card .shop_table tbody tr td.product-name .product-quantity {
  color: inherit;
}
.ts-checkout__card .shop_table tbody tr td.product-name .variation {
  display: none;
}
.ts-checkout__card .shop_table tbody tr td.product-total {
  padding: 12px 0;
  border-bottom: 1px solid #e8e8e8;
  color: #007eb0;
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
  text-align: right;
  vertical-align: top;
  white-space: nowrap;
}
.ts-checkout__card .shop_table tfoot th {
  padding: 12px 0 0;
  color: #757575;
  font-size: 24px;
  font-weight: 400;
  line-height: 32px;
  text-align: left;
}
.ts-checkout__card .shop_table tfoot td {
  padding: 12px 0 0;
  color: #007eb0;
  font-size: 24px;
  font-weight: 600;
  line-height: 32px;
  text-align: right;
  white-space: nowrap;
}
.ts-checkout__card .shop_table tfoot .order-total th {
  font-size: 24px;
}
.ts-checkout__card .shop_table tfoot .order-total td {
  font-size: 30px;
  line-height: 36px;
}
.ts-checkout__card .shop_table + .shop_table {
  margin-top: 24px;
}
.ts-checkout__card {
  /* Shipping methods inside the summary (design radios). */
}
.ts-checkout__card ul#shipping_method {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}
.ts-checkout__card ul#shipping_method li {
  margin: 0;
}
.ts-checkout__card ul#shipping_method input[type=radio] {
  width: 20px;
  height: 20px;
  margin-right: 12px;
  accent-color: #007eb0;
}
.ts-checkout__card ul#shipping_method label {
  color: #444547;
  font-size: 14px;
  line-height: 20px;
}
.ts-checkout__card tr.shipping th {
  font-size: 24px;
}
.ts-checkout {
  /* ---------- Payment methods + place order (below the card) ---------- */
}
.ts-checkout #payment {
  background: transparent;
  border-radius: 0;
}
.ts-checkout #payment ul.wc_payment_methods {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
  padding: 0;
  border: 0;
  list-style: none;
}
.ts-checkout #payment ul.wc_payment_methods li.wc_payment_method {
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
}
.ts-checkout #payment ul.wc_payment_methods li.wc_payment_method input[type=radio] {
  width: 20px;
  height: 20px;
  margin-right: 12px;
  accent-color: #007eb0;
}
.ts-checkout #payment ul.wc_payment_methods li.wc_payment_method label {
  color: #444547;
  font-size: 14px;
  line-height: 20px;
}
.ts-checkout #payment ul.wc_payment_methods li.wc_payment_method .payment_box {
  margin: 8px 0 0 32px;
  color: #757575;
  font-size: 14px;
  line-height: 20px;
  background: transparent;
}
.ts-checkout #payment .place-order {
  margin-top: 24px;
}
.ts-checkout #payment .place-order .woocommerce-terms-and-conditions-wrapper {
  margin-bottom: 16px;
  color: #757575;
  font-size: 14px;
  line-height: 20px;
}
.ts-checkout #payment .place-order .woocommerce-terms-and-conditions-wrapper input[type=checkbox] {
  accent-color: #007eb0;
}
.ts-checkout #payment .place-order #place_order {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  padding: 0 16px;
  border: 0;
  border-radius: 32px;
  background: #007eb0;
  color: #fff;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
  font-size: 14px;
  line-height: 20px;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}
.ts-checkout #payment .place-order #place_order:hover, .ts-checkout #payment .place-order #place_order:focus, .ts-checkout #payment .place-order #place_order:active {
  background: #006a94;
  color: #fff;
  outline: none;
}
.ts-checkout {
  /* Coupon / login forms rendered by Woo above the fields. */
}
.ts-checkout .woocommerce-form-login,
.ts-checkout .woocommerce-form-coupon {
  margin: 0 0 21px;
  padding: 24px;
  border: 1px solid #dbdbdb;
  border-radius: 12px;
}
.ts-checkout .woocommerce-form-login p,
.ts-checkout .woocommerce-form-coupon p {
  margin: 0 0 12px;
}
.ts-checkout .woocommerce-form-login .button,
.ts-checkout .woocommerce-form-coupon .button {
  border: 0;
  border-radius: 32px;
  background: #007eb0;
  color: #fff;
  padding: 0 16px;
  height: 44px;
  cursor: pointer;
}
.ts-checkout {
  /* ---------- Tablet (single column per Figma 330-9294) ---------- */
}
@media (max-width: 1279px) {
  .ts-checkout__main {
    padding: calc(var(--ts-header-clearance, 144px) + 74px) 64px 48px;
  }
  .ts-checkout__cols {
    flex-direction: column;
    align-items: stretch;
  }
  .ts-checkout__billing {
    flex-basis: auto;
    max-width: none;
  }
}
.ts-checkout {
  /* ---------- Mobile (Figma 330-9765) ---------- */
}
@media (max-width: 767px) {
  .ts-checkout__main {
    padding: calc(var(--ts-header-clearance, 102px) + 46px) 16px 40px;
  }
  .ts-checkout__header {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 24px;
  }
  .ts-checkout__title {
    font-size: 36px;
    line-height: 40px;
    letter-spacing: 0;
  }
  .ts-checkout__login {
    height: 44px;
  }
  .ts-checkout .woocommerce-billing-fields__field-wrapper,
  .ts-checkout .woocommerce-additional-fields {
    grid-template-columns: 1fr;
    gap: 21px;
  }
  .ts-checkout .woocommerce-billing-fields__field-wrapper > p[id=billing_first_name_field],
  .ts-checkout .woocommerce-billing-fields__field-wrapper > p[id=billing_last_name_field],
  .ts-checkout .woocommerce-billing-fields__field-wrapper > p[id=billing_country_field],
  .ts-checkout .woocommerce-billing-fields__field-wrapper > p[id=billing_city_field],
  .ts-checkout .woocommerce-billing-fields__field-wrapper > p[id=billing_phone_field],
  .ts-checkout .woocommerce-billing-fields__field-wrapper > p[id=billing_email_field],
  .ts-checkout .woocommerce-billing-fields__field-wrapper > p[id=billing_address_1_field],
  .ts-checkout .woocommerce-billing-fields__field-wrapper > p[id=billing_address_2_field],
  .ts-checkout .woocommerce-billing-fields__field-wrapper > p[id=billing_apartament_field],
  .ts-checkout .woocommerce-additional-fields > p[id=billing_first_name_field],
  .ts-checkout .woocommerce-additional-fields > p[id=billing_last_name_field],
  .ts-checkout .woocommerce-additional-fields > p[id=billing_country_field],
  .ts-checkout .woocommerce-additional-fields > p[id=billing_city_field],
  .ts-checkout .woocommerce-additional-fields > p[id=billing_phone_field],
  .ts-checkout .woocommerce-additional-fields > p[id=billing_email_field],
  .ts-checkout .woocommerce-additional-fields > p[id=billing_address_1_field],
  .ts-checkout .woocommerce-additional-fields > p[id=billing_address_2_field],
  .ts-checkout .woocommerce-additional-fields > p[id=billing_apartament_field] {
    grid-area: auto/1/auto/-1;
  }
  .ts-checkout .woocommerce-billing-fields__field-wrapper,
  .ts-checkout .woocommerce-additional-fields {
    /* Stacked order per the design: Regiune before Adresă, whatever
     * order Woo's priority sort left the fields in. */
  }
  .ts-checkout .woocommerce-billing-fields__field-wrapper > p[id=billing_city_field],
  .ts-checkout .woocommerce-additional-fields > p[id=billing_city_field] {
    order: 1;
  }
  .ts-checkout .woocommerce-billing-fields__field-wrapper > p[id=billing_address_1_field],
  .ts-checkout .woocommerce-billing-fields__field-wrapper > p[id=billing_address_2_field],
  .ts-checkout .woocommerce-billing-fields__field-wrapper > p[id=billing_apartament_field],
  .ts-checkout .woocommerce-additional-fields > p[id=billing_address_1_field],
  .ts-checkout .woocommerce-additional-fields > p[id=billing_address_2_field],
  .ts-checkout .woocommerce-additional-fields > p[id=billing_apartament_field] {
    order: 2;
  }
  .ts-checkout .woocommerce-billing-fields__field-wrapper > p[id=billing_phone_field],
  .ts-checkout .woocommerce-billing-fields__field-wrapper > p[id=billing_email_field],
  .ts-checkout .woocommerce-additional-fields > p[id=billing_phone_field],
  .ts-checkout .woocommerce-additional-fields > p[id=billing_email_field] {
    order: 3;
  }
  .ts-checkout__card {
    padding: 24px 16px;
  }
  .ts-checkout__card .ts-cart__summary-title {
    font-size: 24px;
    line-height: 32px;
  }
  .ts-checkout__card .shop_table tfoot th,
  .ts-checkout__card .shop_table tfoot td {
    font-size: 20px;
    line-height: 28px;
  }
  .ts-checkout__card .shop_table tfoot .order-total td {
    font-size: 24px;
    line-height: 32px;
  }
  .ts-checkout #payment .place-order #place_order {
    width: 100%;
  }
}

.ts-account {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
  background: #fff;
  /* Same header clearance as the other full-bleed pages, 74px of air
   * below the fixed header before the title. */
  padding: 74px 64px;
  padding-top: calc(var(--ts-header-clearance, 144px) + 74px);
  /* Horizontal nav + content column. */
}
.ts-account__layout {
  display: grid;
  grid-template-columns: 288px minmax(0, 1fr);
  gap: 32px;
  align-items: start;
  max-width: 1792px;
  margin-inline: auto;
}
.ts-account {
  /* The h1 comes from the page content (like privacy/terms). */
}
.ts-account > h1,
.ts-account > .wp-block-heading {
  max-width: 1792px;
  margin: 0 auto 32px;
  color: #444547;
  font-size: 44px;
  font-weight: 600;
  line-height: 48px;
  letter-spacing: -2px;
  text-align: center;
}
.ts-account {
  /* ---- Sidebar navigation ------------------------------------------- */
}
.ts-account__nav ul {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0;
  padding: 8px;
  list-style: none;
  background: #eff9ff;
  border-radius: 24px;
}
.ts-account__nav li {
  margin: 0;
}
.ts-account__nav li a {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  padding: 12px 16px;
  border-radius: 32px;
  color: #444547;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  text-decoration: none;
  transition: background 0.15s ease, color 0.15s ease;
}
.ts-account__nav li a .ts-icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  color: #004e82;
}
.ts-account__nav li a:hover, .ts-account__nav li a:focus {
  background: rgba(0, 126, 176, 0.12);
  color: #004e82;
}
.ts-account__nav li.is-active a {
  background: #007eb0;
  color: #fff;
}
.ts-account__nav li.is-active a .ts-icon {
  color: #fff;
}
.ts-account {
  /* ---- Content column ------------------------------------------------ */
  /* Content typography (also covers the logged-out login form, which
   * WooCommerce renders outside the __content wrapper). */
}
.ts-account p {
  color: #757575;
  font-size: 16px;
  line-height: 24px;
}
.ts-account h2,
.ts-account h3 {
  margin: 24px 0 12px;
  color: #444547;
  font-size: 24px;
  font-weight: 600;
  line-height: 32px;
}
.ts-account a {
  color: #069;
}
.ts-account {
  /* Order/account tables. */
}
.ts-account table {
  width: 100%;
  margin: 0 0 24px;
  border-collapse: collapse;
}
.ts-account table th,
.ts-account table td {
  padding: 12px 16px;
  border-bottom: 1px solid #dbdbdb;
  text-align: left;
  font-size: 14px;
  line-height: 20px;
  color: #444547;
  vertical-align: middle;
}
.ts-account table th {
  font-weight: 600;
}
.ts-account table a {
  color: #069;
}
.ts-account {
  /* Buttons — same pill primary as the rest of the theme. */
}
.ts-account .woocommerce-button,
.ts-account .button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 12px 16px;
  border: 0;
  border-radius: 32px;
  background: #007eb0;
  color: #fff;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.2s ease;
  /* Some of these render as anchors (e.g. "view cart", order actions)
   * — keep the label white once the URL has been visited. */
}
.ts-account .woocommerce-button, .ts-account .woocommerce-button:visited,
.ts-account .button,
.ts-account .button:visited {
  color: #fff;
}
.ts-account .woocommerce-button:hover, .ts-account .woocommerce-button:focus,
.ts-account .button:hover,
.ts-account .button:focus {
  background: #006a94;
  color: #fff;
}
.ts-account {
  /* Login / edit account / address forms — same fields as checkout. */
}
.ts-account form .form-row {
  margin: 0 0 21px;
}
.ts-account form .form-row label {
  display: block;
  margin: 0 0 4px 4px;
  color: #444547;
  font-size: 14px;
  line-height: 20px;
}
.ts-account form .form-row label .required {
  color: #940000;
  text-decoration: none;
}
.ts-account form .form-row .input-text,
.ts-account form .form-row select {
  width: 100%;
  min-height: 44px;
  padding: 12px;
  border: 1px solid #dbdbdb;
  border-radius: 12px;
  background: #fff;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
  font-size: 14px;
  line-height: 20px;
  color: #444547;
}
.ts-account form .form-row .input-text:focus,
.ts-account form .form-row select:focus {
  outline: none;
  border-color: #3398c0;
}
.ts-account form .form-row .input-text::placeholder,
.ts-account form .form-row select::placeholder {
  color: #8e8e8e;
}
.ts-account form .form-row {
  /* Select — Figma 318-11170: input container plus a 16px
   * Carbon chevron-down icon at the right edge. */
}
.ts-account form .form-row select {
  appearance: none;
  padding-right: 36px;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath fill='%23444547' d='M16 22L6 12 7.4 10.6 16 19.2 24.6 10.6 26 12z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 16px;
  cursor: pointer;
}
.ts-account form {
  /* WooCommerce renders the address form's selects with select2 —
   * the visible control is this container, styled like Figma 318-11170. */
}
.ts-account form .select2-container .select2-selection--single {
  display: flex;
  align-items: center;
  height: 46px;
  padding: 0 12px;
  border: 1px solid #dbdbdb;
  border-radius: 12px;
  background: #fff;
}
.ts-account form .select2-container .select2-selection--single .select2-selection__rendered {
  padding: 0;
  color: #444547;
  font-size: 14px;
  line-height: 20px;
}
.ts-account form .select2-container .select2-selection--single .select2-selection__rendered.select2-selection__placeholder {
  color: #8e8e8e;
}
.ts-account form .select2-container--open .select2-selection--single {
  border-color: #3398c0;
}
.ts-account {
  /* select2's --default rules (3 classes) anchor the arrow at
   * top:1px right:1px — this flat 4-class selector outranks them and
   * centers the chevron vertically, 12px from the right edge. */
}
.ts-account .select2-container--default .select2-selection--single .select2-selection__arrow {
  top: calc(50% - 1px);
  right: 12px;
  width: 16px;
  height: 16px;
  transform: translateY(-50%) rotate(0deg);
  transform-origin: center;
  transition: transform 0.2s ease;
  background: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath fill='%23444547' d='M16 22L6 12 7.4 10.6 16 19.2 24.6 10.6 26 12z'/%3E%3C/svg%3E") center/16px no-repeat;
}
.ts-account .select2-container--default .select2-selection--single .select2-selection__arrow b {
  display: none;
}
.ts-account {
  /* Flip the chevron while the dropdown is open. */
}
.ts-account .select2-container--open .select2-selection--single .select2-selection__arrow {
  transform: translateY(-50%) rotate(180deg);
}
.ts-account__content {
  min-width: 0;
}
.ts-account__content > p:first-child {
  margin-top: 0;
}
.ts-account {
  /* ---- Login / registration (logged-out state) ---------------------- */
}
.ts-account .ts-account__login-cols {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 32px;
  max-width: 1792px;
  margin-inline: auto;
}
.ts-account .ts-account__login-cols > div {
  background: #fff;
  border: 1px solid #dbdbdb;
  border-radius: 24px;
  padding: 32px;
}
.ts-account {
  /* WooCommerce pairs login + register in .col2-set / u-columns. */
}
.ts-account .col2-set {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 32px;
  max-width: 1792px;
  margin-inline: auto;
}
.ts-account .col2-set .col-1,
.ts-account .col2-set .col-2,
.ts-account .col2-set .u-column1 {
  background: #fff;
  border: 1px solid #dbdbdb;
  border-radius: 24px;
  padding: 32px;
}
.ts-account .col2-set h2 {
  margin: 0 0 24px;
  color: #444547;
  font-size: 24px;
  font-weight: 600;
  line-height: 32px;
}
.ts-account {
  /* ---- Responsive ----------------------------------------------------- */
}
@media (max-width: 767px) {
  .ts-account {
    padding: 46px 16px;
    padding-top: calc(var(--ts-header-clearance, 102px) + 46px);
  }
  .ts-account > h1,
  .ts-account > .wp-block-heading {
    font-size: 36px;
    line-height: 40px;
  }
  .ts-account__layout {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .ts-account {
    /* Nav becomes a horizontally scrollable pill row. min-width: 0
     * lets the grid item shrink below its content so the list
     * scrolls inside itself instead of stretching the page. */
  }
  .ts-account__nav {
    min-width: 0;
    max-width: 100%;
  }
  .ts-account__nav ul {
    flex-direction: row;
    overflow-x: auto;
    padding: 8px;
    -webkit-overflow-scrolling: touch;
  }
  .ts-account__nav ul li a {
    white-space: nowrap;
    min-height: 44px;
  }
  .ts-account .col2-set {
    grid-template-columns: 1fr;
  }
  .ts-account__content table {
    display: block;
    overflow-x: auto;
  }
}

/* select2 renders its dropdown list at the <body> level, outside
 * .ts-account — styled globally (the account pages are its only user). */
.select2-dropdown {
  border-color: #dbdbdb;
  border-radius: 12px;
  overflow: hidden;
}
.select2-dropdown .select2-results__option {
  padding: 12px;
  color: #444547;
  font-size: 14px;
  line-height: 20px;
}
.select2-dropdown .select2-results__option.select2-results__option--highlighted {
  background: #eff9ff;
  color: #444547;
}

.ts-contact {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
  background: #fff;
  /* ---- Map at the very top of the page (header floats over it) ------ */
}
.ts-contact__map {
  position: relative;
  width: 100%;
  height: 600px;
  overflow: hidden;
  border-radius: 0 0 32px 32px;
}
.ts-contact__map iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  /* Grey map styling to match the About page design. */
  filter: grayscale(100%);
  /* Non-interactive: the blue pin is a page overlay and cannot
   * track the iframe's panning — clicking opens Google Maps. */
  pointer-events: none;
}
.ts-contact__map-link {
  position: absolute;
  inset: 0;
  z-index: 1;
}
.ts-contact {
  /* Blue pin anchored at the map center — the ll= embed centers exactly
   * on the store (str. Tâmplarilor 1A, Bălți). */
}
.ts-contact__map-pin {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -100%);
  pointer-events: none;
}
.ts-contact__map-pin svg {
  display: block;
  width: 48px;
  height: 61px;
}
.ts-contact__map-card {
  position: absolute;
  z-index: 2;
  left: 64px;
  bottom: 42px;
  max-width: 424px;
  padding: 24px 32px;
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
}
.ts-contact__map-card h2 {
  margin: 0 0 12px;
  color: #444547;
  font-size: 24px;
  font-weight: 600;
  line-height: 32px;
}
.ts-contact__map-card p {
  margin: 0;
  color: #757575;
  font-size: 16px;
  line-height: 24px;
}
.ts-contact {
  /* ---- FAQ + form side by side (original page grid) ------------------- */
}
.ts-contact__cols {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 64px;
  /* Same container convention as checkout/cart/about: full-width box
   * with 64px gutters, so content starts at the page grid edge. */
  max-width: 1920px;
  margin-inline: auto;
  padding: 0 64px;
}
.ts-contact__col {
  min-width: 0;
}
.ts-contact__col h2 {
  margin: 74px 0 0;
  color: #444547;
  font-size: 44px;
  font-weight: 600;
  line-height: 48px;
  letter-spacing: -2px;
  text-align: left;
}
.ts-contact__col .helpie-faq {
  padding-top: 32px;
  padding-bottom: 74px;
}
.ts-contact__col .wpforms-container {
  padding-top: 32px;
  padding-bottom: 74px;
}
.ts-contact {
  /* ---- FAQ accordion + contact form ----------------------------------
   * Shared with the info pages via the ts-plugin-forms mixin. */
  /* ---- FAQ accordion (helpie) ---------------------------------------- */
  /* Full width of the column, with the theme's typography and separators.
   * Helpie nests UL/LI wrappers with their own padding — flatten them so
   * items span the full column width. Selector matches both helpie
   * variants (with and without its "custom-styles" toggle). */
}
.ts-contact .helpie-faq {
  width: 100%;
}
.ts-contact .helpie-faq .accordion,
.ts-contact .helpie-faq .accordion ul,
.ts-contact .helpie-faq .accordion__item {
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}
.ts-contact .helpie-faq .accordion .accordion__item {
  margin: 0;
  border: 0;
  border-bottom: 1px solid #dbdbdb !important;
  border-radius: 0;
}
.ts-contact .helpie-faq .accordion .accordion__item .accordion__header,
.ts-contact .helpie-faq .accordion .accordion__item .accordion__body {
  padding: 15px 4px;
}
.ts-contact {
  /* Mirrors helpie's strongest selector (.accordions + header + div) and
   * adds the page scope, so the theme wins the cascade on both helpie
   * variants (with/without "custom-styles"). */
}
.ts-contact .helpie-faq.accordions .accordion .accordion__item .accordion__header div.accordion__title,
.ts-contact .helpie-faq .accordion .accordion__item .accordion__title {
  color: #444547;
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
}
.ts-contact .helpie-faq .accordion .accordion__item .accordion__body p,
.ts-contact .helpie-faq .accordion__item .accordion__body p {
  margin: 0;
  color: #757575;
  font-size: 14px;
  line-height: 20px;
}
.ts-contact .helpie-faq .accordion__header .accordion__toggle .accordion__toggle-icons,
.ts-contact .helpie-faq .accordion__header:after,
.ts-contact .helpie-faq .accordion__header:before {
  background-color: #004e82 !important;
  color: #004e82 !important;
}
.ts-contact {
  /* ---- Contact form (wpforms) ---------------------------------------- */
}
.ts-contact .wpforms-container .wpforms-form .wpforms-field {
  padding: 0 0 21px;
}
.ts-contact .wpforms-container .wpforms-form .wpforms-field-label {
  /* Same label spacing as the checkout form (4px below, 4px indent). */
  margin: 0 0 4px 4px;
  color: #444547;
  font-size: 14px;
  line-height: 20px;
}
.ts-contact .wpforms-container .wpforms-form .wpforms-field-label .wpforms-required-label {
  color: #940000;
}
.ts-contact .wpforms-container .wpforms-form input[type=text],
.ts-contact .wpforms-container .wpforms-form input[type=email],
.ts-contact .wpforms-container .wpforms-form input[type=tel],
.ts-contact .wpforms-container .wpforms-form textarea {
  width: 100%;
  min-height: 44px;
  padding: 12px;
  border: 1px solid #dbdbdb;
  border-radius: 12px;
  background: #fff;
  color: #444547;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
  font-size: 14px;
  line-height: 20px;
}
.ts-contact .wpforms-container .wpforms-form input[type=text]:focus,
.ts-contact .wpforms-container .wpforms-form input[type=email]:focus,
.ts-contact .wpforms-container .wpforms-form input[type=tel]:focus,
.ts-contact .wpforms-container .wpforms-form textarea:focus {
  outline: none;
  border-color: #3398c0;
}
.ts-contact .wpforms-container .wpforms-form input[type=text]::placeholder,
.ts-contact .wpforms-container .wpforms-form input[type=email]::placeholder,
.ts-contact .wpforms-container .wpforms-form input[type=tel]::placeholder,
.ts-contact .wpforms-container .wpforms-form textarea::placeholder {
  color: #8e8e8e;
}
.ts-contact .wpforms-container .wpforms-form textarea {
  min-height: 180px;
  resize: vertical;
}
.ts-contact .wpforms-container .wpforms-form button[type=submit],
.ts-contact .wpforms-container .wpforms-form .wpforms-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 12px 16px;
  border: 0;
  border-radius: 32px;
  background: #007eb0;
  color: #fff;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  cursor: pointer;
  transition: background 0.2s ease;
}
.ts-contact .wpforms-container .wpforms-form button[type=submit]:hover, .ts-contact .wpforms-container .wpforms-form button[type=submit]:focus,
.ts-contact .wpforms-container .wpforms-form .wpforms-submit:hover,
.ts-contact .wpforms-container .wpforms-form .wpforms-submit:focus {
  background: #006a94;
}
.ts-contact {
  /* ---- Responsive ----------------------------------------------------- */
}
@media (max-width: 1023px) {
  .ts-contact__map {
    height: 420px;
  }
  .ts-contact__map-card {
    left: 64px;
    bottom: 32px;
  }
}
@media (max-width: 767px) {
  .ts-contact__map {
    height: 280px;
  }
  .ts-contact {
    /* Card flows below the map instead of covering it. */
  }
  .ts-contact__map-card {
    position: static;
    max-width: none;
    margin: 0 16px;
    padding: 20px 24px;
    border-radius: 0 0 24px 24px;
    box-shadow: none;
    border-top: 1px solid #dbdbdb;
  }
  .ts-contact {
    /* Columns stack on small screens. */
  }
  .ts-contact__cols {
    grid-template-columns: 1fr;
    gap: 0;
    padding: 0 16px;
  }
  .ts-contact__col h2 {
    margin-top: 46px;
    font-size: 36px;
    line-height: 40px;
  }
  .ts-contact__col .helpie-faq,
  .ts-contact__col .wpforms-container {
    padding-top: 24px;
    padding-bottom: 46px;
  }
}

.ts-info-page {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
  background: #fff;
  /* Mirror .ts-privacy (client-support): the fixed header overlays the
   * page, so the title sits 74px below the header's bottom edge. */
  padding-block: 0;
  padding-top: calc(var(--ts-header-clearance, 144px) + 74px);
  padding-bottom: 74px;
}
@media (max-width: 767px) {
  .ts-info-page {
    padding-top: calc(var(--ts-header-clearance, 102px) + 46px);
    padding-bottom: 46px;
  }
}
.ts-info-page {
  /* Same content box as the privacy page (64px gutters, 1792px cap) —
   * the default .ts-container (1320/32) would sit narrower and deeper
   * than the rest of the inner pages. */
}
.ts-info-page .ts-container {
  max-width: 1792px;
  padding-inline: 64px;
}
@media (max-width: 767px) {
  .ts-info-page .ts-container {
    padding-inline: 16px;
  }
}
.ts-info-page {
  /* Plain page head like the privacy page — no blue band. */
}
.ts-info-page .ts-page-head {
  background: transparent;
  padding-block: 0;
}
.ts-info-page .ts-page-head__title {
  color: #444547;
  font-size: 44px;
  font-weight: 600;
  line-height: 48px;
  letter-spacing: -2px;
}
@media (max-width: 767px) {
  .ts-info-page .ts-page-head__title {
    font-size: 36px;
    line-height: 40px;
    letter-spacing: 0;
  }
}
.ts-info-page__body {
  /* Full container width like the other inner pages (64px gutters,
   * $size__container-max cap); ts-prose's 760px measure would make
   * these pages visibly narrower than the rest of the site. */
  max-width: none;
  padding-block: 46px 0;
  /* Prose at the client-support scale: full-width paragraphs in the
   * privacy page's 24px — not a narrow left-hanging column. */
}
.ts-info-page__body > p {
  color: #757575;
  font-size: 24px;
  line-height: 32px;
}
.ts-info-page__body .helpie-faq,
.ts-info-page__body .wpforms-container,
.ts-info-page__body .mailpoet_form {
  padding-top: 32px;
}
.ts-info-page {
  /* ---- FAQ accordion (helpie) ---------------------------------------- */
  /* Full width of the column, with the theme's typography and separators.
   * Helpie nests UL/LI wrappers with their own padding — flatten them so
   * items span the full column width. Selector matches both helpie
   * variants (with and without its "custom-styles" toggle). */
}
.ts-info-page .helpie-faq {
  width: 100%;
}
.ts-info-page .helpie-faq .accordion,
.ts-info-page .helpie-faq .accordion ul,
.ts-info-page .helpie-faq .accordion__item {
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}
.ts-info-page .helpie-faq .accordion .accordion__item {
  margin: 0;
  border: 0;
  border-bottom: 1px solid #dbdbdb !important;
  border-radius: 0;
}
.ts-info-page .helpie-faq .accordion .accordion__item .accordion__header,
.ts-info-page .helpie-faq .accordion .accordion__item .accordion__body {
  padding: 15px 4px;
}
.ts-info-page {
  /* Mirrors helpie's strongest selector (.accordions + header + div) and
   * adds the page scope, so the theme wins the cascade on both helpie
   * variants (with/without "custom-styles"). */
}
.ts-info-page .helpie-faq.accordions .accordion .accordion__item .accordion__header div.accordion__title,
.ts-info-page .helpie-faq .accordion .accordion__item .accordion__title {
  color: #444547;
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
}
.ts-info-page .helpie-faq .accordion .accordion__item .accordion__body p,
.ts-info-page .helpie-faq .accordion__item .accordion__body p {
  margin: 0;
  color: #757575;
  font-size: 14px;
  line-height: 20px;
}
.ts-info-page .helpie-faq .accordion__header .accordion__toggle .accordion__toggle-icons,
.ts-info-page .helpie-faq .accordion__header:after,
.ts-info-page .helpie-faq .accordion__header:before {
  background-color: #004e82 !important;
  color: #004e82 !important;
}
.ts-info-page {
  /* ---- Contact form (wpforms) ---------------------------------------- */
}
.ts-info-page .wpforms-container .wpforms-form .wpforms-field {
  padding: 0 0 21px;
}
.ts-info-page .wpforms-container .wpforms-form .wpforms-field-label {
  /* Same label spacing as the checkout form (4px below, 4px indent). */
  margin: 0 0 4px 4px;
  color: #444547;
  font-size: 14px;
  line-height: 20px;
}
.ts-info-page .wpforms-container .wpforms-form .wpforms-field-label .wpforms-required-label {
  color: #940000;
}
.ts-info-page .wpforms-container .wpforms-form input[type=text],
.ts-info-page .wpforms-container .wpforms-form input[type=email],
.ts-info-page .wpforms-container .wpforms-form input[type=tel],
.ts-info-page .wpforms-container .wpforms-form textarea {
  width: 100%;
  min-height: 44px;
  padding: 12px;
  border: 1px solid #dbdbdb;
  border-radius: 12px;
  background: #fff;
  color: #444547;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
  font-size: 14px;
  line-height: 20px;
}
.ts-info-page .wpforms-container .wpforms-form input[type=text]:focus,
.ts-info-page .wpforms-container .wpforms-form input[type=email]:focus,
.ts-info-page .wpforms-container .wpforms-form input[type=tel]:focus,
.ts-info-page .wpforms-container .wpforms-form textarea:focus {
  outline: none;
  border-color: #3398c0;
}
.ts-info-page .wpforms-container .wpforms-form input[type=text]::placeholder,
.ts-info-page .wpforms-container .wpforms-form input[type=email]::placeholder,
.ts-info-page .wpforms-container .wpforms-form input[type=tel]::placeholder,
.ts-info-page .wpforms-container .wpforms-form textarea::placeholder {
  color: #8e8e8e;
}
.ts-info-page .wpforms-container .wpforms-form textarea {
  min-height: 180px;
  resize: vertical;
}
.ts-info-page .wpforms-container .wpforms-form button[type=submit],
.ts-info-page .wpforms-container .wpforms-form .wpforms-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 12px 16px;
  border: 0;
  border-radius: 32px;
  background: #007eb0;
  color: #fff;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  cursor: pointer;
  transition: background 0.2s ease;
}
.ts-info-page .wpforms-container .wpforms-form button[type=submit]:hover, .ts-info-page .wpforms-container .wpforms-form button[type=submit]:focus,
.ts-info-page .wpforms-container .wpforms-form .wpforms-submit:hover,
.ts-info-page .wpforms-container .wpforms-form .wpforms-submit:focus {
  background: #006a94;
}
.ts-info-page {
  /* ---- Brand logo tiles (Бренды) -------------------------------------- */
}
.ts-info-page .ts-brands {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px;
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (max-width: 767px) {
  .ts-info-page .ts-brands {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}
.ts-info-page .ts-brands__item {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 20/11;
  border: 1px solid #dbdbdb;
  border-radius: 32px;
  background: #fff;
  overflow: hidden;
}
.ts-info-page .ts-brands__item img {
  width: 60%;
  height: auto;
  object-fit: contain;
}
@media (max-width: 767px) {
  .ts-info-page .ts-brands__item {
    border-radius: 16px;
  }
}
.ts-info-page {
  /* ---- MailPoet subscribe form ---------------------------------------- */
  /* Same input/button language as the WPForms fields above. */
}
.ts-info-page .mailpoet_form input[type=text],
.ts-info-page .mailpoet_form input[type=email] {
  width: 100%;
  min-height: 44px;
  padding: 12px;
  border: 1px solid #dbdbdb;
  border-radius: 12px;
  background: #fff;
  color: #444547;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
  font-size: 14px;
  line-height: 20px;
}
.ts-info-page .mailpoet_form input[type=text]:focus,
.ts-info-page .mailpoet_form input[type=email]:focus {
  outline: none;
  border-color: #3398c0;
}
.ts-info-page .mailpoet_form input[type=submit],
.ts-info-page .mailpoet_form button[type=submit],
.ts-info-page .mailpoet_form .button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 12px 16px;
  border: 0;
  border-radius: 32px;
  background: #007eb0;
  color: #fff;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  cursor: pointer;
  transition: background 0.2s ease;
}
.ts-info-page .mailpoet_form input[type=submit]:hover, .ts-info-page .mailpoet_form input[type=submit]:focus,
.ts-info-page .mailpoet_form button[type=submit]:hover,
.ts-info-page .mailpoet_form button[type=submit]:focus,
.ts-info-page .mailpoet_form .button:hover,
.ts-info-page .mailpoet_form .button:focus {
  background: #006a94;
  color: #fff;
}
.ts-info-page .mailpoet_form p {
  margin: 0 0 12px;
  color: #757575;
  font-size: 14px;
  line-height: 20px;
}

/* ---- Shared wish (heart) button state ----------------------------------
 * Every heart button carries [data-ts-wish]; js/wishlist.js toggles
 * .is-active. Outline heart = not saved, filled blue heart = saved. */
[data-ts-wish] .ts-wish__icon--filled {
  display: none;
}
[data-ts-wish].is-active {
  color: #007eb0;
}
[data-ts-wish].is-active .ts-wish__icon--outline {
  display: none;
}
[data-ts-wish].is-active .ts-wish__icon--filled {
  display: block;
}
[data-ts-wish].is-busy {
  opacity: 0.6;
  pointer-events: none;
}

/* ---- Header wishlist / cart count badges ---------------------------------
 * The wishlist badge is synced by js/wishlist.js, the cart badge by
 * js/cart.js — both start hidden until the count arrives. */
.ts-header__wish-badge,
.ts-header__cart-badge {
  position: absolute;
  top: 2px;
  right: 2px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 999px;
  background: #007eb0;
  color: #fff;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
  font-size: 10px;
  font-weight: 600;
  line-height: 16px;
  text-align: center;
  pointer-events: none;
}

/* ---- Wishlist page ------------------------------------------------------ */
.ts-wishlist {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
  background: #fff;
  /* Same header clearance as the other full-bleed pages. */
  padding: 74px 64px;
  padding-top: calc(var(--ts-header-clearance, 144px) + 74px);
  /* The h1 comes from the page content (like account/privacy). */
}
.ts-wishlist > h1,
.ts-wishlist > .wp-block-heading {
  max-width: 1792px;
  margin: 0 auto 56px;
  color: #444547;
  font-size: 44px;
  font-weight: 600;
  line-height: 48px;
  letter-spacing: -2px;
  text-align: center;
}
.ts-wishlist__content {
  max-width: 1792px;
  margin-inline: auto;
}
.ts-wishlist__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 32px;
}
.ts-wishlist {
  /* ---- Empty state -------------------------------------------------- */
}
.ts-wishlist__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 96px 16px;
  text-align: center;
  /* The flex display above would override the UA's [hidden] rule. */
}
.ts-wishlist__empty[hidden] {
  display: none;
}
.ts-wishlist__empty-icon {
  color: #dbdbdb;
  margin-bottom: 16px;
}
.ts-wishlist__empty-title {
  margin: 0;
  color: #444547;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 24px;
  font-weight: 600;
  line-height: 32px;
}
.ts-wishlist__empty-text {
  max-width: 360px;
  margin: 0 0 24px;
  color: #757575;
  font-size: 16px;
  line-height: 24px;
}
.ts-wishlist__empty-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  padding: 0 32px;
  border-radius: 32px;
  background: #007eb0;
  color: #fff;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
  text-decoration: none;
  transition: background 0.2s ease;
  /* The global a:visited link color must not bleed into the button
   * (its href is the homepage — always visited). */
}
.ts-wishlist__empty-button, .ts-wishlist__empty-button:visited {
  color: #fff;
}
.ts-wishlist__empty-button:hover, .ts-wishlist__empty-button:focus {
  background: #006a94;
  color: #fff;
}
.ts-wishlist {
  /* ---- Tablet (768–1023) --------------------------------------------- */
}
@media (min-width: 768px) and (max-width: 1023px) {
  .ts-wishlist {
    padding: 56px 32px;
    padding-top: calc(var(--ts-header-clearance, 144px) + 56px);
  }
  .ts-wishlist__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
  }
}
.ts-wishlist {
  /* ---- Mobile (<768) --------------------------------------------------- */
}
@media (max-width: 767px) {
  .ts-wishlist {
    padding: 46px 16px;
    padding-top: calc(var(--ts-header-clearance, 102px) + 46px);
  }
  .ts-wishlist > h1,
  .ts-wishlist > .wp-block-heading {
    margin-bottom: 32px;
    font-size: 36px;
    line-height: 40px;
  }
  .ts-wishlist__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
  }
  .ts-wishlist__empty {
    padding: 64px 8px;
  }
}

/* ---- Wishlist card (same language as the Home best-sellers card) ------- */
.ts-wishlist-card {
  position: relative;
  min-width: 0;
}
.ts-wishlist-card__media-link {
  display: block;
}
.ts-wishlist-card__media {
  height: 340px;
  border: 0;
  border-radius: 32px;
  background: #cce3ef;
  overflow: hidden;
}
.ts-wishlist-card__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ts-wishlist-card__wish {
  position: absolute;
  top: 24px;
  right: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: #254e7b;
  cursor: pointer;
  transition: transform 0.2s ease;
}
.ts-wishlist-card__wish:hover {
  background: transparent;
  transform: translateY(-3px);
}
.ts-wishlist-card__wish .ts-icon {
  width: 32px;
  height: 32px;
}
.ts-wishlist-card__body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 16px;
}
.ts-wishlist-card__category {
  color: #757575;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 1rem;
  font-weight: 400;
  line-height: 24px;
}
.ts-wishlist-card__name {
  color: #444547;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 28px;
  text-decoration: none;
}
.ts-wishlist-card__name:hover, .ts-wishlist-card__name:focus, .ts-wishlist-card__name:active, .ts-wishlist-card__name:visited {
  color: #444547;
}
.ts-wishlist-card__price {
  display: flex;
  align-items: baseline;
  gap: 8px;
  color: #444547;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 28px;
  /* Discounted: the active price turns sale red next to the struck
   * old price, on a single line; the smaller currency symbol keeps
   * the pair inside narrow cards. */
}
.ts-wishlist-card__price--sale {
  color: #e03131;
}
.ts-wishlist-card__price .woocommerce-Price-currencySymbol {
  font-size: 0.75em;
}
.ts-wishlist-card__price del {
  color: #757575;
  font-size: 0.9375rem;
  font-weight: 400;
}
.ts-wishlist-card__cart {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  margin-top: 8px;
  padding: 0 16px;
  border: 0;
  border-radius: 32px;
  background: #007eb0;
  color: #fff;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
  text-decoration: none;
  transition: background 0.2s ease;
  /* Keeps the label white once the add-to-cart URL has been visited
   * (global a:visited would otherwise darken it). */
}
.ts-wishlist-card__cart, .ts-wishlist-card__cart:visited {
  color: #fff;
}
.ts-wishlist-card__cart:hover, .ts-wishlist-card__cart:focus {
  background: #006a94;
  color: #fff;
}
.ts-wishlist-card__cart.loading {
  opacity: 0.6;
  pointer-events: none;
}
.ts-wishlist-card__cart {
  /* Turned into a "view cart" link after a successful add. */
}
.ts-wishlist-card__cart.added {
  background: #006a94;
}
.ts-wishlist-card {
  /* ---- Tablet (768–1023) --------------------------------------------- */
}
@media (min-width: 768px) and (max-width: 1023px) {
  .ts-wishlist-card__media {
    height: 300px;
  }
}
.ts-wishlist-card {
  /* ---- Mobile (<768) --------------------------------------------------- */
}
@media (max-width: 767px) {
  .ts-wishlist-card__media {
    height: 200px;
    border-radius: 24px;
  }
  .ts-wishlist-card__wish {
    top: 8px;
    right: 8px;
    width: 32px;
    height: 32px;
  }
  .ts-wishlist-card__wish .ts-icon {
    width: 16px;
    height: 16px;
  }
  .ts-wishlist-card__body {
    gap: 4px;
  }
  .ts-wishlist-card__name {
    font-size: 1rem;
    line-height: 20px;
  }
  .ts-wishlist-card__price {
    font-size: 1rem;
    line-height: 24px;
  }
  .ts-wishlist-card__cart {
    height: 40px;
    margin-top: 4px;
  }
}

/* Very narrow phones (≤400px): the 2-up card drops to ~130px, so the
 * price pair gets one more size step down to stay on a single line. */
@media (max-width: 400px) {
  .ts-wishlist-card__price {
    gap: 4px;
    font-size: 0.875rem;
  }
  .ts-wishlist-card__price del {
    font-size: 0.6875rem;
  }
}
.ts-toasts {
  position: fixed;
  top: calc(var(--ts-header-clearance, 144px) + 16px);
  right: 24px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: min(400px, 100vw - 48px);
  pointer-events: none;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
}

.ts-toast {
  display: flex;
  align-items: center;
  gap: 14px;
  box-sizing: border-box;
  padding: 14px 16px;
  background: #fff;
  border-radius: 32px;
  box-shadow: 0 18px 44px rgba(23, 55, 83, 0.18);
  opacity: 0;
  transform: translateX(32px);
  transition: opacity 360ms cubic-bezier(0.25, 0.1, 0.25, 1), transform 360ms cubic-bezier(0.25, 0.1, 0.25, 1);
  pointer-events: auto;
}
.ts-toast.is-in {
  opacity: 1;
  transform: none;
}

.ts-toast__media {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 56px;
  width: 56px;
  height: 56px;
  border-radius: 18px;
  overflow: hidden;
  background: #eff9ff;
}
.ts-toast__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ts-toast__media--icon svg {
  width: 26px;
  height: 26px;
  color: #007eb0;
}

.ts-toast--error .ts-toast__media--icon svg {
  color: #d9534f;
}

.ts-toast__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}

.ts-toast__title {
  overflow: hidden;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
  color: #25364d;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.ts-toast__body {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  font-size: 13px;
  line-height: 1.45;
  color: #5c6b7d;
}

.ts-toast__link {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  padding: 10px 16px;
  border-radius: 999px;
  background: #007eb0;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  transition: background 200ms cubic-bezier(0.25, 0.1, 0.25, 1);
}
.ts-toast__link, .ts-toast__link:visited {
  color: #fff;
}
.ts-toast__link:hover {
  background: #006a94;
  color: #fff;
}

.ts-toast__close {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #9aa8b8;
  cursor: pointer;
  transition: color 200ms ease, background 200ms ease;
}
.ts-toast__close svg {
  display: block;
  width: 14px;
  height: 14px;
}
.ts-toast__close:hover {
  color: #25364d;
  background: rgba(23, 55, 83, 0.08);
}

/* Add-to-cart button spinner while the form is posting. */
.single_add_to_cart_button.is-loading {
  position: relative;
  color: transparent;
  pointer-events: none;
}
.single_add_to_cart_button.is-loading svg {
  opacity: 0;
}
.single_add_to_cart_button.is-loading::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 18px;
  height: 18px;
  margin: -9px 0 0 -9px;
  border: 2px solid rgba(255, 255, 255, 0.45);
  border-top-color: #fff;
  border-radius: 50%;
  animation: ts-spin 700ms linear infinite;
}

@keyframes ts-spin {
  to {
    transform: rotate(360deg);
  }
}
@media (max-width: 600px) {
  .ts-toasts {
    top: calc(var(--ts-header-clearance, 102px) + 12px);
    right: 16px;
    width: calc(100vw - 32px);
  }
  .ts-toast {
    gap: 12px;
    padding: 12px 14px;
    border-radius: 24px;
    transform: translateY(-24px);
  }
  .ts-toast__media {
    flex-basis: 48px;
    width: 48px;
    height: 48px;
    border-radius: 14px;
  }
  .ts-toast__link {
    padding: 9px 14px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .ts-toast {
    transform: none;
    transition-duration: 1ms;
  }
}
/* Plugin stylesheets loaded after the theme (page builders etc.) target
 * plain `button` elements and can out-rank the theme's single-class button
 * rules. Restate the custom surfaces with a higher specificity so the
 * design holds no matter what loads later. */
html button.ts-header__action {
  background: transparent;
  color: #444547;
  text-shadow: none;
  letter-spacing: normal;
}
html button.ts-header__action--text {
  font-weight: 400;
}
html button[data-ts-wish],
html button.ts-product-card__wish {
  background: transparent;
  color: #5d5d61;
  text-shadow: none;
  letter-spacing: normal;
  font-weight: 400;
}
html {
  /* Slider arrows ("Распродажа", "Подготовьтесь к лету", "Ассортимент",
   * "Лучшие товары для вас"): the base element rule repaints every bare
   * button dark navy on hover, which is why the arrows used to react
   * differently depending on which rule won the cascade. One shared
   * rest state and one shared hover — a soft fade to a slightly darker
   * gray, icon color untouched — keeps them identical everywhere. */
}
html button.ts-sale__control,
html button.ts-summer__arrow,
html button.ts-sortiment__arrow {
  background: #f5f5f5;
  border: 1px solid #dbdbdb;
  color: #444547;
  text-shadow: none;
  letter-spacing: normal;
  font-weight: 400;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
html button.ts-sale__control:hover,
html button.ts-sale__control:active,
html button.ts-summer__arrow:hover,
html button.ts-summer__arrow:active,
html button.ts-sortiment__arrow:hover,
html button.ts-sortiment__arrow:active {
  background: #e8e8e8;
  border-color: #c9c9c9;
  color: #444547;
}

/* Comments
--------------------------------------------- */
.comment-content a {
  word-wrap: break-word;
}

.bypostauthor {
  display: block;
}

/* Widgets
--------------------------------------------- */
.widget {
  margin: 0 0 1.5em;
}
.widget select {
  max-width: 100%;
}

/* Media
--------------------------------------------- */
.page-content .wp-smiley,
.entry-content .wp-smiley,
.comment-content .wp-smiley {
  border: none;
  margin-bottom: 0;
  margin-top: 0;
  padding: 0;
}

/* Make sure logo link wraps around logo image. */
.custom-logo-link {
  display: inline-block;
}

/* Captions
--------------------------------------------- */
.wp-caption {
  margin-bottom: 1.5em;
  max-width: 100%;
}
.wp-caption img[class*=wp-image-] {
  display: block;
  margin-left: auto;
  margin-right: auto;
}
.wp-caption .wp-caption-text {
  margin: 0.8075em 0;
}

.wp-caption-text {
  text-align: center;
}

/* Galleries
--------------------------------------------- */
.gallery {
  margin-bottom: 1.5em;
  display: grid;
  grid-gap: 1.5em;
}

.gallery-item {
  display: inline-block;
  text-align: center;
  width: 100%;
}

.gallery-columns-2 {
  grid-template-columns: repeat(2, 1fr);
}

.gallery-columns-3 {
  grid-template-columns: repeat(3, 1fr);
}

.gallery-columns-4 {
  grid-template-columns: repeat(4, 1fr);
}

.gallery-columns-5 {
  grid-template-columns: repeat(5, 1fr);
}

.gallery-columns-6 {
  grid-template-columns: repeat(6, 1fr);
}

.gallery-columns-7 {
  grid-template-columns: repeat(7, 1fr);
}

.gallery-columns-8 {
  grid-template-columns: repeat(8, 1fr);
}

.gallery-columns-9 {
  grid-template-columns: repeat(9, 1fr);
}

.gallery-caption {
  display: block;
}

/*--------------------------------------------------------------
# Plugins
--------------------------------------------------------------*/
/* Jetpack infinite scroll
--------------------------------------------- */
/* Hide the Posts Navigation and the Footer when Infinite Scroll is in use. */
.infinite-scroll .posts-navigation,
.infinite-scroll.neverending .site-footer {
  display: none;
}

/* Re-display the Theme Footer when Infinite Scroll has reached its end. */
.infinity-end.neverending .site-footer {
  display: block;
}

/*--------------------------------------------------------------
# Utilities
--------------------------------------------------------------*/
/* Accessibility
--------------------------------------------- */
/* Text meant only for screen readers. */
.screen-reader-text {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute !important;
  width: 1px;
  word-wrap: normal !important;
}
.screen-reader-text:focus {
  background-color: #ededee;
  border-radius: 3px;
  box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
  clip: auto !important;
  clip-path: none;
  color: #007eb0;
  display: block;
  font-size: 0.875rem;
  font-weight: 700;
  height: auto;
  left: 5px;
  line-height: normal;
  padding: 15px 23px 14px;
  text-decoration: none;
  top: 5px;
  width: auto;
  z-index: 100000;
}

/* Do not show the outline on the skip link target. */
#primary[tabindex="-1"]:focus {
  outline: 0;
}

/* Alignments
--------------------------------------------- */
.alignleft {
  /*rtl:ignore*/
  float: left;
  /*rtl:ignore*/
  margin-right: 1.5em;
  margin-bottom: 1.5em;
}

.alignright {
  /*rtl:ignore*/
  float: right;
  /*rtl:ignore*/
  margin-left: 1.5em;
  margin-bottom: 1.5em;
}

.aligncenter {
  clear: both;
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 1.5em;
}

/* Hidden GTranslate free-widget wrapper (the header Ro/Ru switcher drives
 * the translation via the googtrans cookie; the widget stays off-screen). */
.ts-gtranslate-hidden {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}