/* ============================================
   Существующие кастомные правила магазина
   ============================================ */

.footer__title {
  font-weight: bold;
  font-size: var(--body-font-size) !important;
}

.type-banner .promo-grid__container {
  align-items: center;
  height: 100%;
}

.type-banner__text {
  flex-direction: column;
  gap: 1rem;
}

.flex-grid__item--75 .type-banner__text,
.flex-grid__item--100 .type-banner__text {
  flex-direction: row;
}

.type-banner__text h2,
.type-banner__text p {
  margin: 0;
}

.type-banner__text .element-button {
  margin: 0;
}

.collection-hero__content.overlay {
  --element-text-color: rgb(255, 255, 255);
  --color-secondary: rgb(0, 0, 0, 0.6);
}

.element-input:not(.element-input--transparent) {
  --element-input-color-primary: var(--root-color-primary, #000);
  --element-input-color-secondary: var(--root-color-secondary, #fff);
}

.newsletter__input-group .element-input ~ button {
  --element-button-height: initial;
}

.newsletter-section .element-text.element-text--heading-h0 {
  font-size: var(--element-text-font-size--heading-2xl);
  line-height: var(--element-text-line-height--heading-2xl);
}

.newsletter-section .element-text.element-text--heading-h1 {
  font-size: var(--element-text-font-size--heading-xl);
  line-height: var(--element-text-line-height--heading-xl);
}

.newsletter-section .element-text.element-text--heading-h2 {
  font-size: var(--element-text-font-size--heading-lg);
  line-height: var(--element-text-line-height--heading-lg);
}

.newsletter-section .element-text.element-text--heading-h3 {
  font-size: var(--element-text-font-size--heading-md);
  line-height: var(--element-text-line-height--heading-md);
}

.text-with-icons__block-text a,
.newsletter-section__content a {
  text-decoration: underline;
}

/* ============================================
   ВОССТАНОВЛЕНИЕ СТИЛЕЙ ТЕМЫ
   Точная копия оригинала из cart.line-item.liquid
   и element.quantity-selector.liquid.
   Нужно из-за бага сборки стилей в Expanse 10.0.0
   (блоки {% stylesheet %} не доходят до страницы).
   Удалить, когда Archetype выпустит фикс.
   ============================================ */

/* --- Карточка товара в корзине --- */
.cart__item {
  display: grid;
  grid-template-areas:
    'cartImage cartTitle .'
    'cartImage cartQuantity cartPrice'
    '. cartRemove cartPrice';
  grid-template-columns: 150px auto auto;
  grid-column-gap: 20px;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid;
  border-bottom-color: color-mix(in srgb, var(--color-primary) var(--shade-12), var(--color-secondary));
}

.cart__item:last-of-type {
  border-bottom: 0;
}

/* Меньше картинка в выдвижной корзине */
.site-header__cart .cart__item {
  grid-template-columns: 100px auto auto;
  grid-column-gap: 10px;
}

@media only screen and (max-width: 959px) {
  .cart__item {
    grid-template-areas:
      'cartImage cartTitle cartTitle'
      'cartImage cartQuantity cartPrice'
      'cartImage cartRemove cartPrice';
  }
}

.cart__image {
  grid-area: cartImage;
  align-self: flex-start;
}

.cart__image a {
  position: relative;
  display: block;
  width: 100%;
  height: 100px;
}

.cart__image .image-wrap img,
.cart__image img {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  display: block;
  object-fit: contain;
}

.cart__item-title {
  grid-area: cartTitle;
}

.cart__item-quantity {
  grid-area: cartQuantity;
}

.cart__item-remove {
  grid-area: cartRemove;
}

.cart__item-remove a {
  display: inline-block;
  margin-top: 10px;
}

.cart__drawer-form .cart__item-remove {
  display: none;
}

.cart__item-price {
  grid-area: cartPrice;
}

.cart__item-name {
  display: block;
  font-size: calc(var(--element-text-font-size--body-md) + 1px);
  margin-bottom: 8px;
}

.cart__item--variants {
  font-size: calc(var(--element-text-font-size--body-md) - 2px);
  margin-bottom: 10px;
}

.cart__item--variants span {
  font-weight: var(--element-text-font-weight--heading);
}

.cart__price {
  display: block;
}

.cart__price:not(.cart__price--strikethrough) {
  font-weight: var(--element-text-font-weight--heading);
  font-size: calc(var(--element-text-font-size--body-md) + 2px);
}

.cart__price--strikethrough {
  text-decoration: line-through;
}

.cart__item--properties {
  font-size: calc(var(--element-text-font-size--body-md) - 2px);
  margin-bottom: 10px;
  line-height: 1.3;
}

.cart__item--properties span {
  font-weight: 700;
}

/* --- Счётчик количества (размеры считаются сами) --- */
.element-quantity-selector {
  --element-input-color-primary: var(--color-primary, #000);
  --element-input-color-secondary: var(--color-secondary, #fff);

  width: fit-content;
  display: inline-block;
  position: relative;
  overflow: visible;
  pointer-events: auto;
}

.element-quantity-selector.is-loading {
  opacity: 0.5;
  pointer-events: none;
}

.element-quantity-selector__input {
  --element-input-radius: var(--element-button-radius);
  --element-input-padding-inline: calc(
    var(--element-input-line-height) * var(--element-input-font-size) + 2 * var(--element-input-padding-block)
  );
  --element-input-width: max(calc(var(--digit-count, 1ch) + 2 * var(--size-1)), 32px);
  box-sizing: content-box;
  text-align: center;
}

.element-quantity-selector__button {
  --element-button-border-width: 0;
  --element-button-color-primary: var(--element-input-color-primary, var(--root-color-primary, #000));
  --element-button-color-secondary: var(--element-input-color-secondary, var(--root-color-secondary, #fff));

  position: absolute;
  top: 0;
  height: 100%;
  aspect-ratio: 1;
  border: 1px solid transparent;
  background-clip: padding-box;
  z-index: 1;
}

.element-quantity-selector__button--minus {
  border-radius: var(--element-button-radius) 0 0 var(--element-button-radius);
  left: 0;
}

.element-quantity-selector__button--plus {
  border-radius: 0 var(--element-button-radius) var(--element-button-radius) 0;
  right: 0;
}

/* --- Кнопки (element.button.liquid) --- */
:root {
  --element-button-display: inline-flex;
  --element-button-width: fit-content;
  --element-button-height: auto;
  --element-button-radius: var(--radius-xs);
  --element-button-flex-direction: row;
  --element-button-gap: var(--size-2);
  --element-button-justify-content: center;
  --element-button-align-items: center;
  --element-button-white-space: nowrap;
  --element-button-icon-size: var(--element-text-font-size--body-md);

  --element-button-padding-block: var(--size-3);
  --element-button-padding-inline: var(--size-5);
  --element-button-border-width: var(--size-0-25);

  --element-button-color-primary: initial;
  --element-button-color-secondary: initial;
  --element-button-shade-background: 0%;
  --element-button-shade-text: 0%;
  --element-button-shade-border: 20%;

  --element-button-box-shadow: initial;
  --element-button-transition-duration: 200ms;
  --element-button-transition-timing: ease;
  --element-button-transform: none;
  --element-button-backdrop-filter: none;
  --element-button-opacity: 1;

  --element-button-shade-background--hover: 8%;
  --element-button-shade-border--hover: 30%;

  --element-button-color-focus: var(--color-focus);
  --element-button-border-width--focus: var(--size-0-5);

  --element-button-shade-background--active: 16%;
  --element-button-shade-border--active: var(--element-button-shade-border);

  --element-button-shade-background--disabled: 12%;
  --element-button-shade-text--disabled: 70%;
  --element-button-shade-border--disabled: 12%;
}

.element-button,
.element-button--shopify-payment-wrapper .shopify-payment-button .shopify-payment-button__button--unbranded {
  --_display: var(--element-button-display);
  --_width: var(--element-button-width);
  --_height: var(--element-button-height);
  --_radius: var(--element-button-radius);
  --_flex-direction: var(--element-button-flex-direction);
  --_gap: var(--element-button-gap);
  --_justify-content: var(--element-button-justify-content);
  --_align-items: var(--element-button-align-items);
  --_white-space: var(--element-button-white-space);

  --_padding-block: var(--element-button-padding-block);
  --_padding-inline: var(--element-button-padding-inline);
  --_border-width: var(--element-button-border-width);

  --_color-primary: var(--element-button-color-primary, var(--color-primary));
  --_color-secondary: var(--element-button-color-secondary, var(--color-secondary));
  --_color-focus: var(--element-button-color-focus, var(--color-focus, #4a9afc));
  --_color-text: var(--_color-secondary);
  --_color-background: var(--_color-primary);
  --_outline: none;
  --_border: none;
  --_shade-background: var(--element-button-shade-background);
  --_shade-text: var(--element-button-shade-text);
  --_shade-border: var(--element-button-shade-border);
  --_box-shadow: var(
    --element-button-box-shadow,
    inset 0 0 0 var(--_border-width) color-mix(in srgb, var(--_color-text) var(--_shade-border), transparent)
  );

  --_transition-duration: var(--element-button-transition-duration);
  --_transition-timing: var(--element-button-transition-timing);
  --_transform: var(--element-button-transform);
  --_backdrop-filter: var(--element-button-backdrop-filter);
  --_opacity: var(--element-button-opacity);

  --element-text-font-family: var(--element-button-font-family);
  --element-text-font-family-fallback: var(--element-button-font-family-fallback);
  --element-text-font-weight: var(--element-button-font-weight);
  --element-text-letter-spacing: var(--element-button-letter-spacing);
  --element-text-text-transform: var(--element-button-text-transform);
  --element-text-line-height: var(--element-button-line-height);
  --element-text-color: var(--element-button-color);
  --element-text-font-size: var(--element-button-font-size);

  --element-icon-size: var(--element-button-icon-size);

  display: var(--_display);
  width: var(--_width);
  height: var(--_height);
  justify-content: var(--_justify-content);
  align-items: var(--_align-items);
  white-space: var(--_white-space);
  flex-direction: var(--_flex-direction);
  gap: var(--_gap);
  padding-block: var(--_padding-block);
  padding-inline: var(--_padding-inline);
  border-radius: var(--_radius);
  background-color: color-mix(in srgb, var(--_color-text) var(--_shade-background), var(--_color-background));
  color: color-mix(in srgb, var(--_color-background) var(--_shade-text), var(--_color-text));
  box-shadow: var(--_box-shadow);
  outline: var(--_outline);
  border: var(--_border);
  transform: var(--_transform);
  backdrop-filter: var(--_backdrop-filter);
  opacity: var(--_opacity);
  transition: all var(--_transition-duration) var(--_transition-timing);
  cursor: pointer;
  line-height: 0;

  &:is(button.shopify-payment-button__button--unbranded) {
    width: 100%;
    line-height: var(--element-text-line-height--body-md);
    min-height: 32px;
  }

  &:has(> svg:only-child),
  &:has(> element-icon:only-child) {
    --_padding-inline: var(--_padding-block);
    --_display: flex;
  }

  &:hover {
    --_shade-background: var(--element-button-shade-background--hover);
    --_shade-border: var(--element-button-shade-border--hover);
  }

  &:focus-visible,
  input[type='radio']:focus-visible + & {
    --_border-width: var(--element-button-border-width--focus);
    --_box-shadow: inset 0 0 0 var(--_border-width) var(--_color-focus);
  }

  &:disabled,
  input[type='radio']:disabled + &,
  .disabled > input[type='radio'] + &,
  shopify-buy-it-now-button[disabled] > & {
    --_shade-background: var(--element-button-shade-background--disabled);
    --_shade-text: var(--element-button-shade-text--disabled);
    --_shade-border: var(--element-button-shade-border--disabled);

    &:is(:disabled),
    shopify-buy-it-now-button[disabled] > & {
      cursor: not-allowed;
    }
  }

  &:active,
  input[type='radio']:checked + & {
    --_shade-background: var(--element-button-shade-background--active);
    --_shade-border: var(--element-button-shade-border--active);
  }

  &.element-button--size-xs {
    --_padding-block: var(--size-2);
    --_padding-inline: var(--size-2);
  }

  &.element-button--size-sm {
    --_padding-block: var(--size-2);
    --_padding-inline: var(--size-4);
  }

  &.element-button--size-lg {
    --_padding-block: var(--size-4);
    --_padding-inline: var(--size-6);
  }

  &.element-button--inverted {
    --_color-text: var(--_color-primary);
    --_color-background: var(--_color-secondary);
  }

  &.element-button--transparent {
    --_color-background: transparent;

    &:disabled {
      --_shade-border: var(--element-button-shade-border--disabled);
      --_shade-background: 0%;
    }

    &:disabled:active {
      --_border-width: var(--element-button-border-width);
      --_shade-border: var(--element-button-shade-border--disabled);
    }
  }

  &.element-button--plain {
    --_color-background: transparent;
    --_color-text: var(--element-text-color--body, var(--_color-primary));
    --_box-shadow: none;

    &:focus-visible {
      --_box-shadow: inset 0 0 0 var(--_border-width) var(--_color-focus);
    }
  }

  &:is(.shopify-payment-button__button--unbranded):hover:not([disabled]) {
    background-color: color-mix(in srgb, var(--_color-secondary) var(--_shade-background), var(--_color-primary));
    color: color-mix(in srgb, var(--_color-background) var(--_shade-text), var(--_color-text));
  }
}

.element-button--shopify-payment-wrapper {
  --_radius: var(--element-button-radius);
  --_padding-block: var(--element-button-padding-block);
  --_line-height: var(--element-button-line-height, var(--element-text-line-height--body));
  --_font-size: var(--element-button-font-size, var(--element-text-font-size--body-md));

  --shopify-accelerated-checkout-button-border-radius: var(--_radius);
  --shopify-accelerated-checkout-button-block-size: calc(
    (2 * var(--_padding-block)) + (var(--_line-height) * var(--_font-size))
  );

  font-family: var(--element-button-font-family, var(--element-text-font-family));
}

/* ============================================
   Осознанные кастомизации
   ============================================ */

/* Кнопка "Add to cart" на всю ширину, как "Buy with Shop" под ней */
.add-to-cart {
  width: 100%;
}

/* Отступ между Add to cart и Buy with Shop.
   Не через flex/gap — форма получает инлайновый
   style="display: block !important" от темы,
   его не перебить через внешний CSS. Используем margin. */
.element-button--shopify-payment-wrapper {
  margin-top: var(--size-2-5);
}

/* Выпадающие меню без вложенных подпунктов (например, "Shop by Brand") —
   несколько колонок вместо одного длинного списка.
   Меню с вложенными подпунктами (например, "Shop by Categories") не трогаем —
   там колонки поломают раскрывающиеся flyout-подменю. */
.site-nav__dropdown:not(.megamenu):not(:has(.site-nav__dropdown-link--has-children)) {
  width: 780px;
}

.site-nav__dropdown:not(.megamenu):not(:has(.site-nav__dropdown-link--has-children))
  .site-nav__dropdown-list {
  columns: 4;
  column-gap: var(--gutter);
}

/* Компактный блок "Goes great with" в корзине */
@media only screen and (max-width: 768px) {
  .site-header__cart .scrollable-grid .grid-item,
  .cart-recommendations .scrollable-grid .grid-item,
  .cart-recommendations .scrollable-grid--small .grid-item {
    min-width: 130px;
    flex: 0 0 130px;
  }
}

@media only screen and (min-width: 769px) {
  .cart-recommendations .grid-item,
  .site-header__cart .scrollable-grid .grid-item {
    flex: 0 0 160px;
    min-width: 160px;
    max-width: 160px;
  }
}

/* Без лишней горизонтальной прокрутки в выдвижной корзине */
.cart__drawer-form .cart__scrollable {
  overflow-x: hidden;
}

/* ===== Базовая типографика (head.styles.base.typography.liquid) ===== */
html {
  font-size: var(--root-font-size);
}

body,
.body-font-stack {
  font-family: var(--element-text-font-family--body), var(--element-text-font-family-fallback--body);
  font-weight: var(--element-text-font-weight--body);
  letter-spacing: var(--element-text-letter-spacing--body);
  text-transform: var(--element-text-text-transform--body);
  line-height: var(--element-text-line-height--body);
  -webkit-font-smoothing: antialiased;

  &:not(.body-font-stack) {
    font-size: var(--element-text-font-size--body-md);
  }
}

small {
  font-size: var(--element-text-font-size--body-sm)
}

.accent-font-stack {
  font-family: var(--element-text-font-family--accent), var(--element-text-font-family-fallback--accent);
  font-weight: var(--element-text-font-weight--accent);
  letter-spacing: var(--element-text-letter-spacing--accent);
  text-transform: var(--element-text-text-transform--accent);
  line-height: var(--element-text-line-height--accent);
  font-size: var(--element-text-font-size--accent);
}

.h0, h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 {
    margin: 0 0 var(--size-4);
}

@media only screen and (min-width: 769px) {
  .h0, h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 {
      margin: 0 0 var(--size-5);
  }
}

.heading-font-stack,
:where(h1, h2, h3, h4, h5, h6),
:is(.heading-2xl, .heading-xl, .heading-lg, .heading-md, .heading-sm, .heading-xs),
:is(.heading-h0, .h0, .heading-h1, .h1, .heading-h2, .h2, .heading-h3, .h3, .heading-h4, .h4, .heading-h5, .h5) {
  font-family: var(--element-text-font-family--heading), var(--element-text-font-family-fallback--heading);
  font-weight: var(--element-text-font-weight--heading);
  letter-spacing: var(--element-text-letter-spacing--heading);
  text-transform: var(--element-text-text-transform--heading);

  &:not(.heading-font-stack) {
    display: block;

    & a {
      text-decoration: none;
      font-weight: inherit;
    }
  }

  &:is(.heading-2xl),
  &:is(.heading-h0, .h0) {
    font-size: var(--element-text-font-size--heading-2xl);
    line-height: var(--element-text-line-height--heading-2xl);
  }

  &:where(h1),
  &:is(.heading-xl),
  &:is(.heading-h1, .h1) {
    font-size: var(--element-text-font-size--heading-xl);
    line-height: var(--element-text-line-height--heading-xl);
  }

  &:where(h2),
  &:is(.heading-lg),
  &:is(.heading-h2, .h2) {
    font-size: var(--element-text-font-size--heading-lg);
    line-height: var(--element-text-line-height--heading-lg);
  }

  &:where(h3),
  &:is(.heading-md),
  &:is(.heading-h3, .h3) {
    font-size: var(--element-text-font-size--heading-md);
    line-height: var(--element-text-line-height--heading-md);
  }

  &:where(h4),
  &:is(.heading-sm),
  &:is(.heading-h4, .h4) {
    font-size: var(--element-text-font-size--heading-sm);
    line-height: var(--element-text-line-height--heading-sm);
  }

  &:where(h5),
  &:is(.heading-xs),
  &:is(.heading-h5, .h5) {
    font-size: var(--element-text-font-size--heading-xs);
    line-height: var(--element-text-line-height--heading-xs);
  }

  &:where(h6),
  &:is(.heading-2xs),
  &:is(.heading-h6, .h6) {
    font-size: var(--element-text-font-size--heading-2xs);
    line-height: var(--element-text-line-height--heading-2xs);
  }
}

p {
  margin: 0 0 calc(var(--gutter) / 2) 0;
}

p:last-child {
  margin-bottom: 0;
}

blockquote,
.rte blockquote {
  margin: 0;
  padding: calc(var(--gutter) / 2) var(--gutter) 40px;

  & p {
    margin-bottom: 0;

    & + cite {
      margin-top: calc(var(--gutter) / 2);
    }
  }

  & cite {
    display: block;
  }
}

code,
pre {
  background-color: #faf7f5;
  font-family: Consolas, monospace;
  font-size: 1em;
  border: 0 none;
  padding: 0 2px;
  color: #51ab62;
}

pre {
  overflow: auto;
  padding: calc(var(--gutter) / 2);
  margin: 0 0 var(--gutter);
}

.text-label a {
  text-decoration: underline;
  text-underline-offset: 2px;
}

.label-info {
  display: block;
  margin-bottom: 10px;
}

.accent-subtitle {
  letter-spacing: 0.07em;
  margin: 0 0 20px;
}

.text-spacing,
.text-spacing.rte:last-child {
  margin-bottom: 15px;

  @media only screen and (min-width: 769px) {
    margin-bottom: 25px;
  }
}

.enlarge-text {
  font-size: calc(var(--element-text-font-size--body-md) + 2px);

  @media only screen and (min-width: 769px) {
    font-size: calc(var(--element-text-font-size--body-md) + 4px);
  }
}

@media only screen and (min-width: 769px) {
  .table--small-text {
    font-size: calc(var(--element-text-font-size--body-md) * 0.85);
  }
}

.index-section--footer {
  & h3 {
    font-size: 1.5em;
  }
}

html[dir='rtl'] {
  & .text-left {
    text-align: right !important;
  }

  & .text-right {
    text-align: left !important;
  }
}

.icon-and-text {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;

  & .element-icon {
    flex: 0 0 auto;
  }
}

.text-highlight {
  & em {
    font-style: normal;
  }

  &.heading-2xl a,
  &.heading-xl a,
  &.heading-lg a,
  &.heading-md a,
  &.heading-sm a,
  &.heading-xs a {
    text-decoration: underline;
    text-underline-offset: 2px;
  }
}

.text-highlight--outline {
  & em {
    -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: inherit;
    -webkit-text-fill-color: var(--root-color-secondary);

    .color-scheme-1 & {
      -webkit-text-fill-color: var(--color-scheme-1-secondary);
    }

    .color-scheme-2 & {
      -webkit-text-fill-color: var(--color-scheme-2-secondary);
    }

    .color-scheme-3 & {
      -webkit-text-fill-color: var(--color-scheme-3-secondary);
    }
  }
}

.text-highlight--regular {
  & em {
    font-style: italic;
  }
}

.text-highlight--serif {
  & em {
    font-family: serif;
    font-style: italic;
  }
}

.text-highlight--handwrite {
  & em {
    font-family: cursive;
    font-style: italic;
  }
}

.text-highlight--accent-color {
  & em {
    color: var(--color-sale-tag);
  }
}