/* Explicit global styles for MVC layouts and catalog pages. */
.quick-catalog {
  border-bottom: 1px solid #f0e7e8;
  background: #fffafb;
}

.site-header .brand__photo {
  display: none;
}

.content-page__media .content-page__image {
  display: block;
  margin-inline: auto;
}

.content-page__body .content-page__link {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}


.site-header .navbar-nav .nav-link {
  color: #2f2527 !important;
  font-size: 1rem;
  font-weight: 600;
  padding: .8rem .9rem;
}

.site-header .navbar-nav .nav-link:hover,
.site-header .navbar-nav .nav-link:focus {
  color: #d94f78 !important;
}

.site-header .brand::first-letter {
  color: #e9517d;
}

.quick-catalog__scroll {
  display: flex;
  gap: 1.75rem;
  overflow-x: auto;
  padding: .7rem 1rem;
  scrollbar-width: thin;
  scroll-behavior: smooth;
  flex: 1 1 auto;
}

.quick-catalog__wrapper { display: flex; align-items: center; gap: .35rem; }
.quick-catalog__button { flex: 0 0 auto; border: 0; border-radius: 50%; width: 2rem; height: 2rem; background: transparent; color: #5f4d50; }
.quick-catalog__button:hover, .quick-catalog__button:focus { background: #f9e8ed; color: #ed5f83; }

a, a:visited { color: inherit; text-decoration: none; }

.header-auth-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.35rem;
  padding: .45rem .95rem;
  border: 1px solid #d94f78;
  border-radius: 999px;
  font-size: .85rem;
  font-weight: 700;
  text-decoration: none !important;
  white-space: nowrap;
}

.header-auth-button--secondary { color: #d94f78 !important; background: #fff; }
.header-auth-button--primary { color: #fff !important; background: #d94f78; }
.header-auth-button--secondary:hover, .header-auth-button--secondary:focus { color: #fff !important; background: #d94f78; }
.header-auth-button--primary:hover, .header-auth-button--primary:focus { color: #fff !important; background: #bd3c62; border-color: #bd3c62; }

/* На насыщенном красном/розовом фоне текст кнопок всегда белый. */
.btn-primary,
.btn-primary:hover,
.btn-primary:focus,
.btn-danger,
.btn-danger:hover,
.btn-danger:focus,
.btn-success,
.btn-success:hover,
.btn-success:focus,
.btn-pink,
.btn-pink:hover,
.btn-pink:focus,
.auth-btn,
.auth-btn:hover,
.auth-btn:focus,
.header-auth-button--primary,
.header-auth-button--primary:hover,
.header-auth-button--primary:focus {
  color: #fff !important;
}

.quick-catalog a,
.quick-catalog a:visited {
  flex: 0 0 auto;
  color: #5f4d50 !important;
  font-size: .78rem;
  letter-spacing: .04em;
  text-decoration: none !important;
  text-transform: uppercase;
  white-space: nowrap;
}

.quick-catalog a:hover,
.quick-catalog a:focus {
  color: #ed5f83 !important;
}

.product-card[data-details-url] {
  cursor: pointer;
}

.home-hero-carousel {
  position: relative;
  max-width: 1440px;
  margin: 0 auto;
}

.home-hero-legacy { display: none; }

.home-hero-slide {
  margin: 2rem auto 0;
  padding: 4.25rem 5.5rem;
  border-radius: 28px;
  background: #fff2f6;
}

.home-hero-eyebrow {
  display: inline-block;
  padding: .45rem .9rem;
  border-radius: 999px;
  background: #ffe4ed;
  color: #ee5b86;
  font-size: .85rem;
  font-weight: 700;
}

.home-hero-title {
  margin: 1rem 0;
  color: #2f2527;
  font-size: clamp(2rem, 4vw, 4rem);
  font-weight: 800;
  letter-spacing: .03em;
}

.home-hero-description {
  max-width: 35rem;
  color: #665458;
  font-size: 1.2rem;
}

.home-hero-image {
  width: 100%;
  max-height: 410px;
  object-fit: cover;
}

.home-hero-image-carousel {
  overflow: hidden;
  border-radius: 2px;
}

.home-hero-image-carousel .carousel-control-prev,
.home-hero-image-carousel .carousel-control-next {
  width: 3.5rem;
  height: 3.5rem;
  top: 50%;
  transform: translateY(-50%);
  border-radius: 50%;
  background: rgba(47, 37, 39, .55);
}

.home-hero-image-carousel .carousel-control-prev { left: .75rem; }
.home-hero-image-carousel .carousel-control-next { right: .75rem; }
.home-hero-image-carousel .carousel-indicators { bottom: .5rem; }
.home-hero-image-carousel .carousel-indicators button { background-color: #e9517d; }

.home-hero-image-only .home-hero-slide {
  padding: 0;
  overflow: hidden;
}

.home-hero-image-only .row {
  display: block;
}

.home-hero-image-only .row > .col-lg-6:first-child {
  display: none;
}

.home-hero-image-only .row > .col-lg-6:last-child {
  width: 100%;
  padding: 0;
}

.home-hero-image-link {
  display: block;
  line-height: 0;
}

.home-hero-image-only .home-hero-image {
  display: block;
  width: 100%;
  max-width: none;
  max-height: none;
  height: clamp(260px, 36vw, 560px);
  object-fit: cover;
}

.home-hero-carousel > .carousel-control-prev,
.home-hero-carousel > .carousel-control-next {
  width: 3.5rem;
  height: 3.5rem;
  top: 50%;
  transform: translateY(-50%);
  border-radius: 50%;
  background: #2f2527;
}

.home-hero-carousel > .carousel-control-prev { left: 1rem; }
.home-hero-carousel > .carousel-control-next { right: 1rem; }
.home-hero-carousel .carousel-indicators { bottom: -1.5rem; }
.home-hero-carousel .carousel-indicators button { background-color: #e9517d; }

.brand-carousel { position: relative; padding: 0 3.5rem; }

.brand-carousel-card {
  display: flex;
  min-height: 150px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: .75rem;
  padding: 1.25rem;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 8px 25px rgba(68, 38, 47, .10);
  color: #2f2527 !important;
  font-weight: 700;
  text-decoration: none !important;
}

.brand-carousel-card:hover { transform: translateY(-3px); color: #e9517d !important; }
.brand-carousel-card img { width: 100%; height: 88px; object-fit: contain; }
.brand-carousel .carousel-control-prev, .brand-carousel .carousel-control-next { width: 3rem; }
.brand-carousel .carousel-control-prev-icon, .brand-carousel .carousel-control-next-icon { filter: invert(1); }

.home-about-box {
  margin-bottom: 2rem;
  overflow: hidden;
  border-radius: 24px;
  background: #fff7f9;
}

.home-about-image {
  max-height: 340px;
  object-fit: cover;
}

main > .container > section {
  margin-top: 3rem !important;
}

main > .container > section:first-child {
  margin-top: 0 !important;
}

@media (max-width: 576px) {
  .quick-catalog__scroll {
    justify-content: flex-start;
    gap: 1.15rem;
  }

  .quick-catalog__wrapper { padding: 0 .25rem; }
  .quick-catalog__button { display: none; }

  .home-hero-slide { margin-top: 1rem; padding: 2.5rem 2rem; }
  .home-hero-carousel > .carousel-control-prev { left: .25rem; }
  .home-hero-carousel > .carousel-control-next { right: .25rem; }
}

/* =========================================================
   ХЕДЕР: ЦЕНТРАЛЬНЫЙ ЛОГОТИП И РАВНЫЕ ОТСТУПЫ
   ========================================================= */

/* Три колонки одинаковой ширины по краям и узкая колонка логотипа по центру.
   Так логотип не зависит от разной ширины левого и правого меню. */
.site-navbar__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  /* Шапка имеет ту же рабочую ширину, что и основной контент сайта. */
  width: min(100%, 1320px);
  min-height: 128px;
  margin-inline: auto;
  padding: 0 clamp(24px, 4vw, 72px);
}

/* Все четыре текстовые ссылки находятся слева от логотипа. */
.header-main-nav > .nav-item { display: list-item; }

/* Контакты и подбор ухода продублированы в Razor-блоке правой группы для
   совместимости со старой разметкой, поэтому здесь они скрываются справа.
   Справа остаются только Instagram, поиск, корзина и авторизация. */
.header-duplicate-link { display: none !important; }

/* «Підбір догляду» находится справа рядом с иконками, а «Доставка та оплата» — слева. */
.header-main-nav > .nav-item:nth-child(4) { display: none; }
.header-actions .header-duplicate-link { display: none !important; }

/* Левая группа прижимается к логотипу правым краем, правая — левым краем.
   Поэтому визуальное расстояние от логотипа до обеих групп одинаковое. */
.header-main-nav {
  grid-column: 1;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: clamp(18px, 2.5vw, 44px);
  min-width: 0;
  margin: 0;
  padding: 0;
  /* Левая группа заканчивается на одинаковом расстоянии от логотипа. */
  transform: none;
}

.header-actions {
  grid-column: 3;
  display: flex;
  /* Правая группа прижата к правой границе контейнера, а не к логотипу. */
  justify-content: flex-start;
  align-items: center;
  gap: clamp(9px, 1.1vw, 18px);
  min-width: 0;
  margin: 0;
  padding: 0;
  /* Правая группа начинается на том же расстоянии от логотипа,
     на котором заканчивается левая группа. */
  /* Правая группа начинается у зеркальной границы центральной колонки,
     поэтому расстояние до логотипа совпадает с расстоянием слева. */
  transform: none;
}

/* Ограничиваем ширину логотипа, чтобы он оставался читаемым и не растягивал хедер. */
.brand--header {
  grid-column: 2;
  width: clamp(129px, 10.35vw, 156px);
  margin: 0 clamp(20px, 2.5vw, 38px);
  padding: 4px 0;
}

.brand--header img {
  display: block;
  width: 100%;
  max-height: 84px;
  height: auto;
  object-fit: contain;
}

/* Логотип в шапке увеличен на 35%, сохраняя круглую форму изображения. */
.brand--header {
  width: 142px;
}

.brand--header img {
  width: 142px;
  max-height: 113px;
}

.brand--header .brand__wordmark {
  mix-blend-mode: multiply;
}

.brand--footer .brand__wordmark {
  display: block;
  width: 150px;
  height: auto;
  margin-top: -14px;
  margin-bottom: -14px;
  object-fit: contain;
  mix-blend-mode: multiply;
}

/* У ссылок и иконок одинаковая вертикальная зона, поэтому интерфейс не прыгает. */
.header-main-nav .nav-link,
.header-actions .nav-link {
  padding: 10px 0;
  font-size: clamp(14px, 1.05vw, 17px);
  line-height: 1.2;
  white-space: nowrap;
}

.header-actions .nav-icon {
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  font-size: 18px;
}

/* Компактные кнопки авторизации не перетягивают внимание с логотипа. */
.header-actions .header-auth-button {
  min-height: 36px;
  padding: 0 14px;
  font-size: 13px;
  border-radius: 20px;
}

/* Профиль и выход имеют одинаковую высоту и читаемый размер текста. */
.header-profile-button,
.header-logout-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  padding: 0 14px;
  border: 1px solid #e4cbd3;
  border-radius: 20px;
  color: #d94f78 !important;
  background: #fff;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
}

.header-profile-button:hover,
.header-logout-button:hover,
.header-profile-button:focus,
.header-logout-button:focus {
  color: #fff !important;
  background: #d94f78;
  border-color: #d94f78;
}

.header-profile-button i { margin-right: 6px; }

/* Кнопка сердца располагается поверх изображения карточки и меняет цвет
   после добавления товара в обране. */
.product-card__image-wrap {
  position: relative;
}

.product-card__favorite-form {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
}

.favorite-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 1px solid #ead6dc;
  border-radius: 50%;
  background: rgba(255, 255, 255, .94);
  color: #c65d7a;
  font-size: 1.05rem;
  line-height: 1;
  transition: background .2s ease, color .2s ease, transform .2s ease;
}

.favorite-button:hover,
.favorite-button:focus,
.favorite-button.is-favorite {
  background: #c65d7a;
  color: #fff;
  transform: translateY(-1px);
}

.favorite-button--details { width: 48px; height: 48px; font-size: 1.2rem; }

/* Логотип в футере имеет самостоятельный размер и не наследует размер хедера. */
.brand--footer .brand__photo {
  display: block;
  width: clamp(120px, 11vw, 156px);
  height: auto;
  object-fit: contain;
}

/* На узких ноутбуках уменьшаем только расстояния, сохраняя центральную колонку. */
@media (max-width: 1199.98px) {
  .site-navbar__inner { padding-inline: 28px; }
  .header-main-nav { gap: 20px; }
  .header-actions { gap: 10px; }
  .brand--header { margin-inline: 20px; }
}

/* Планшеты и телефоны: desktop-группы скрываются, а мобильное меню открывается кнопкой. */
@media (max-width: 1199.98px) {
  .site-navbar { min-height: 78px; position: relative; }
  .site-navbar__inner {
    display: flex;
    justify-content: center;
    min-height: 76px;
    padding-inline: 16px;
  }
  .header-main-nav,
  .header-actions { display: none; }
  .brand--header {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 153px;
    margin: 0;
    transform: translate(-50%, -50%);
    z-index: 2;
  }
  .brand--header img {
    width: 153px;
    max-height: 122px;
  }
  .site-navbar__toggler {
    display: block;
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
  }
  .mobile-navbar {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 10;
    padding: 16px 20px 20px;
    background: #fff;
    border-top: 1px solid #eee;
    border-bottom: 1px solid #eee;
    box-shadow: 0 10px 24px rgba(47, 41, 43, .08);
  }
  .mobile-navbar__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
  }
  .mobile-navbar__inner > a { padding: 7px 0; font-weight: 600; }
  .mobile-navbar__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 8px;
    width: 100%;
    margin-top: 8px;
    padding-top: 12px;
    border-top: 1px solid #eee;
  }
  .mobile-navbar__actions .header-auth-button { width: auto; min-width: 110px; }
}

/* Очень маленькие телефоны: уменьшаем логотип и кнопку, чтобы ничего не упиралось в края. */
@media (max-width: 575.98px) {
  .shipping-ticker { gap: 1rem; font-size: .68rem; }
  .site-navbar,
  .site-navbar__inner { min-height: 68px; }
  .brand--header { width: 127px; padding: 2px 0; }
  .brand--header img { width: 127px; max-height: 102px; }
  .site-navbar__toggler { left: 10px; padding: 5px 8px; }
  .mobile-navbar { padding-inline: 14px; }
  .brand--footer .brand__photo { width: 124px; }
}

/* Форма варіантів товару на телефоні: кожен рядок стає компактною карткою,
   тому ціна та стара ціна отримують повну ширину і не стискаються до вузьких колонок. */
@media (max-width: 767.98px) {
  #variantsTable {
    width: 100%;
    min-width: 0;
    table-layout: fixed;
  }

  #variantsTable thead {
    display: none;
  }

  #variantsTable tbody,
  #variantsTable .variant-row {
    display: block;
    width: 100%;
  }

  #variantsTable .variant-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: .65rem .8rem;
    padding: .75rem 0;
    border-bottom: 1px solid #eee;
  }

  #variantsTable .variant-row > td {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: .25rem;
    padding: 0;
    border: 0;
  }

  #variantsTable .variant-row > td::before {
    color: #665458;
    font-size: .78rem;
    font-weight: 700;
  }

  #variantsTable .variant-row > td:nth-child(1)::before { content: "Об'єм"; }
  #variantsTable .variant-row > td:nth-child(2)::before { content: "Одиниця"; }
  #variantsTable .variant-row > td:nth-child(3)::before { content: "Ціна"; }
  #variantsTable .variant-row > td:nth-child(4)::before { content: "Стара ціна"; }
  #variantsTable .variant-row > td:nth-child(5)::before { content: "Залишок"; }
  #variantsTable .variant-row > td:nth-child(6) { justify-content: flex-end; }
  #variantsTable .variant-row > td:nth-child(6)::before { content: "\00a0"; }
  #variantsTable .variant-row .form-control { width: 100%; min-width: 0; }
  #variantsTable .variant-row .remove-variant { width: 100%; }
  #variantsTable .variant-row.d-none { display: none !important; }
  .table-responsive:has(#variantsTable) { overflow-x: visible; }
}

/* Текст во всех кнопках проекта выровнен по центру по горизонтали и вертикали. */
button,
.btn,
input[type="button"],
input[type="submit"],
input[type="reset"] {
  text-align: center;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Контрастная и заметная иконка мобильного меню из трёх полосок. */
.site-navbar__toggler .navbar-toggler-icon {
  width: 24px;
  height: 18px;
  background-image: linear-gradient(
    to bottom,
    #2f2527 0 3px,
    transparent 3px 7px,
    #2f2527 7px 10px,
    transparent 10px 14px,
    #2f2527 14px 17px
  );
  background-size: 24px 18px;
  opacity: 1;
}

.site-navbar__toggler:hover,
.site-navbar__toggler:focus {
  border-color: #d94f78 !important;
  background: #fff4f7;
}

/* Типографика и логотип увеличены примерно на 15% по запросу. */
html {
  font-size: 115%;
}

.shipping-ticker {
  font-size: .92rem;
}

.quick-catalog__scroll {
  font-size: 1.035rem;
}

.header-main-nav .nav-link,
.header-actions .nav-link {
  font-size: clamp(16px, 1.2vw, 20px);
}

.header-actions .nav-icon {
  font-size: 21px;
}

.header-actions .header-auth-button,
.header-profile-button,
.header-logout-button {
  font-size: 15px;
}

.brand--header {
  width: 163px;
}

.brand--header img {
  width: 163px;
  max-height: 130px;
}

@media (max-width: 1199.98px) {
  .brand--header { width: 176px; }
  .brand--header img { width: 176px; max-height: 140px; }
}

@media (max-width: 575.98px) {
  .shipping-ticker { font-size: .78rem; }
  .brand--header { width: 146px; }
  .brand--header img { width: 146px; max-height: 117px; }
}

/* Все кнопки авторизации в шапке используют одну типографику. */
.header-actions .header-auth-button,
.header-actions .header-profile-button,
.header-actions .header-logout-button,
.mobile-navbar__actions .header-auth-button {
  font-family: inherit;
  font-size: 15px !important;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0;
  min-height: 42px;
  padding: 0 18px;
  border-radius: 22px;
}

.cart-quantity-button {
  min-width: 48px;
  min-height: 40px;
  padding: 0 14px;
  font-size: 1.15rem;
  line-height: 1;
}

.brand__wordmark { background: transparent; mix-blend-mode: normal !important; }

.category-order-form {
  display: grid;
  grid-template-columns: auto minmax(72px, 90px) auto;
  gap: .5rem;
  align-items: center;
}

.category-order-input {
  width: 100%;
  min-width: 72px;
}

@media (max-width: 767.98px) {
  .crm-categories-table,
  .crm-categories-table table,
  .crm-categories-table tbody,
  .crm-categories-table tr,
  .crm-categories-table td {
    display: block;
    width: 100%;
  }

  .crm-categories-table thead { display: none; }
  .crm-categories-table { overflow: visible; }
  .crm-categories-table tr {
    margin-bottom: 1rem;
    padding: 1rem;
    border: 1px solid #eadde1;
    border-radius: 16px;
    background: #fff;
  }
  .crm-categories-table td {
    padding: .5rem 0;
    border: 0;
  }
  .category-order-form {
    grid-template-columns: minmax(72px, 1fr) minmax(90px, 1fr);
  }
  .category-order-form label { grid-column: 1 / -1; }
  .category-order-form .btn { width: 100%; }
  .crm-categories-table .input-group {
    display: grid;
    grid-template-columns: 1fr;
    gap: .5rem;
  }
  .crm-categories-table .input-group > .form-control,
  .crm-categories-table .input-group > .btn {
    width: 100%;
    border-radius: .375rem !important;
  }
}

@media (min-width: 1200px) and (max-width: 1399.98px) {
  .site-navbar__inner { padding-inline: 20px; }
  .header-main-nav { gap: 12px; }
  .header-main-nav .nav-link, .header-actions .nav-link { font-size: 14px; }
  .header-actions { gap: 8px; flex-wrap: wrap; }
  .header-actions .header-auth-button { padding-inline: 12px; font-size: 13px !important; }
  .brand--header { margin-inline: 16px; }
}

/* Keep long names, actions and modal forms usable at narrow widths. */
main { min-width: 0; }
main .card, main .row > *, .modal-content { min-width: 0; }
main h1, main h2, main h4, .card-title, .breadcrumb, main td { overflow-wrap: anywhere; }
.product-card .card-img-top { object-fit: contain !important; }
.modal-dialog-scrollable .modal-content > form {
  display: flex;
  flex-direction: column;
  min-height: 0;
  max-height: 100%;
  overflow: hidden;
}
.modal-dialog-scrollable .modal-header,
.modal-dialog-scrollable .modal-footer { flex-shrink: 0; }
.modal-dialog-scrollable .modal-body { min-height: 0; overflow-y: auto; }
.ttn-parcel legend { font-weight: 600; }
.ttn-parcel .form-label { font-size: .85rem; }

/* Nova Poshta form: readable sections and a fixed action bar on small screens. */
.ttn-modal .modal-dialog { max-width: 760px; }
.product-gallery { min-width: 0; }
.product-gallery-frame { position: relative; }
.product-gallery-track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; border-radius: 12px; }
.product-gallery-track::-webkit-scrollbar { display: none; }
.product-gallery-slide { flex: 0 0 100%; min-width: 0; width: 100%; border: 0; background: #fff; padding: 0; scroll-snap-align: start; cursor: zoom-in; }
.product-gallery-slide img { display: block; width: 100%; aspect-ratio: 1; max-height: 470px; object-fit: contain; }
.product-gallery-arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; border: 1px solid #e5dce0; border-radius: 50%; background: rgba(255,255,255,.95); color: #30272b; font-size: 30px; line-height: 1; }
.product-gallery-arrow.previous { left: 8px; }
.product-gallery-arrow.next { right: 8px; }
.product-gallery-thumbnails { display: flex; gap: 8px; overflow-x: auto; padding: 10px 2px 4px; }
.product-gallery-thumbnails button { flex: 0 0 68px; width: 68px; height: 68px; padding: 4px; border: 2px solid #e5dce0; border-radius: 8px; background: white; }
.product-gallery-thumbnails button[aria-pressed=true] { border-color: #e8387e; }
.product-gallery-thumbnails img { width: 100%; height: 100%; object-fit: contain; }
.product-gallery button:focus-visible { outline: 3px solid #285da8; outline-offset: 2px; }
.product-gallery-zoom { width: min(1000px, 94vw); max-width: 94vw; max-height: 92dvh; padding: 48px 16px 16px; border: 0; border-radius: 16px; }
.product-gallery-zoom::backdrop { background: rgba(0,0,0,.75); }
.product-gallery-zoom > img { display: block; width: 100%; height: 68dvh; object-fit: contain; }
.product-gallery-close { position: absolute; top: 4px; right: 8px; width: 44px; height: 44px; font-size: 30px; border: 0; background: white; border-radius: 50%; }
.product-gallery-zoom-controls { display: flex; align-items: center; justify-content: center; gap: 20px; margin-top: 8px; }
.product-gallery-zoom-controls .btn { min-width: 44px; min-height: 44px; }
.product-photo-editor { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 12px; }
.product-photo-card { border: 1px solid #e5dce0; border-radius: 10px; padding: 10px; min-width: 0; overflow-wrap: anywhere; }
.product-photo-card img { display: block; width: 100%; height: 110px; object-fit: contain; margin-bottom: 8px; }
.product-photo-card label { display: flex; align-items: center; gap: 8px; min-height: 36px; font-size: .9rem; }
.product-photo-card input { flex: 0 0 auto; }
.order-editor .validation-summary-valid { display: none; }
.order-editor fieldset { min-width: 0; }
.order-edit-line { display: grid; grid-template-columns: minmax(0, 1fr) 110px 120px auto; align-items: center; gap: 16px; padding: 16px 0; border-bottom: 1px solid #eee; }
.order-edit-line input[type=number] { width: 100%; min-width: 80px; }
.order-edit-product { overflow-wrap: anywhere; }
.order-add-product { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) auto; gap: 12px; align-items: end; margin-top: 16px; }
.order-editor .form-control, .order-editor .form-select { min-height: 44px; }
.order-edit-summary { display: flex; flex-direction: row; align-items: center; justify-content: space-between; gap: 16px; }
.order-editor [hidden] { display: none !important; }
@media (max-width: 767.98px) {
  .order-edit-line { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
  .order-edit-product { grid-column: 1 / -1; }
  .order-add-product { grid-template-columns: minmax(0, 1fr); }
  .order-edit-summary { flex-direction: column; align-items: stretch; }
  .order-editor input, .order-editor select, .order-editor textarea { font-size: 16px; }
}
.ttn-modal .modal-body { padding: 24px; scrollbar-gutter: stable; }
.ttn-modal .modal-header { padding: 18px 24px; }
.ttn-modal .modal-title { font-size: 1.3rem; font-weight: 700; }
.ttn-modal .modal-footer { padding: 14px 24px; background: #fff; }
.ttn-modal .modal-footer .btn-danger { background: #f04438; border-color: #f04438; }
.ttn-modal .form-control, .ttn-modal .form-select { min-height: 44px; }
.ttn-modal .ttn-section-title { display: flex; align-items: center; gap: 10px; font-size: 1.1rem; font-weight: 700; margin: 22px 0 18px; }
.ttn-modal .ttn-section-title:first-child { margin-top: 0; }
.ttn-section-title > span { display: inline-grid; place-items: center; border-radius: 50%; width: 26px; height: 26px; background: #fff0ee; color: #c6342b; font-size: .85rem; flex: 0 0 26px; }
.ttn-services-note { padding: 12px 14px; border: 1px solid #e0e0e0; border-radius: 10px; background: #f7f7f7; color: #4b4b4b; font-size: .9rem; }
.ttn-service { padding: 16px 0; border-bottom: 1px solid #eee; }
.ttn-switch { display: flex; align-items: center; gap: 12px; min-height: 44px; cursor: pointer; margin: 0; font-weight: 600; }
.ttn-switch input { appearance: none; -webkit-appearance: none; width: 42px; min-width: 42px; height: 24px; border: 1px solid #a0a0a0; border-radius: 14px; background: #a0a0a0; position: relative; cursor: pointer; margin: 0; transition: background .15s; }
.ttn-switch input::before { content: ''; display: block; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: transform .15s; }
.ttn-switch input:checked { background: #e94236; border-color: #e94236; }
.ttn-switch input:checked::before { transform: translateX(18px); }
.ttn-switch input:disabled { opacity: .4; cursor: default; }
.ttn-switch input:disabled + span { color: #777; }
.ttn-switch input:focus-visible { outline: 3px solid #296dbb; outline-offset: 3px; }
.ttn-help { margin: 4px 0 0 54px; font-size: .85rem; color: #626262; }
.ttn-help summary { cursor: pointer; padding: 5px 0; }
.ttn-help p { margin-bottom: 0; }
.ttn-service-fields { padding: 12px 0; }
.ttn-modal [hidden] { display: none !important; }
@media (max-width: 575.98px) {
  .ttn-modal .modal-dialog { margin: 0; width: 100%; height: 100%; max-height: 100%; }
  .ttn-modal .modal-content { height: 100%; max-height: 100%; border: 0; border-radius: 0; }
  .ttn-modal .modal-content > form { height: 100%; }
  .ttn-modal .modal-header { padding: 14px 16px; }
  .ttn-modal .modal-body { padding: 16px; scrollbar-gutter: auto; }
  .ttn-modal .modal-footer { padding: 12px 16px max(12px, env(safe-area-inset-bottom)); }
  .ttn-modal input, .ttn-modal select { font-size: 16px; }
  .ttn-modal .modal-footer .btn { min-height: 44px; font-size: .9rem; }
  .ttn-modal .ttn-parcel { padding: 12px !important; }
  .ttn-modal .ttn-section-title { font-size: 1rem; }
  .ttn-modal .btn-close { width: 24px; height: 24px; }
}

@media (max-width: 767.98px) {
  main .d-flex.justify-content-between { flex-wrap: wrap; gap: .75rem; }
  main .btn { white-space: normal; }
  .responsive-records, .responsive-records tbody,
  .responsive-records tr, .responsive-records td {
    display: block;
    width: 100%;
    min-width: 0;
  }
  .responsive-records thead { display: none; }
  .responsive-records tr { border: 1px solid #eadde1; border-radius: 12px; margin-bottom: 1rem; padding: .75rem; }
  .responsive-records td { border: 0; padding: .4rem 0; text-align: left !important; }
  .responsive-records td[data-label]::before {
    content: attr(data-label);
    display: block;
    color: #6c757d;
    font-size: .78rem;
    margin-bottom: .25rem;
  }
  .responsive-records td .d-flex { flex-wrap: wrap; gap: .5rem; }
  .responsive-records td .btn { margin-block: .15rem; min-height: 40px; }
  .responsive-records .badge { white-space: normal; text-align: left; }
  .modal-footer { gap: .5rem; }
  .modal-footer > .btn { flex: 1; margin: 0; }
  .home-hero-title { overflow-wrap: anywhere; }
}

@media (max-width: 375px) {
  .ttn-parcel .row > * { width: 100%; }
  .modal-body { padding: .75rem; }
}

@media (max-width: 1199.98px) {
  .site-navbar__inner { min-height: 100px; }
  .brand--header { display: flex; justify-content: center; }
  .brand--header img { width: auto; max-width: 100%; max-height: 90px; }
  .mobile-navbar { max-height: calc(100dvh - 145px); overflow-y: auto; }
}
@media (max-width: 575.98px) {
  .site-navbar__inner { min-height: 80px; }
  .brand--header img { max-height: 76px; }
}

@media (min-width: 1200px) {
  .site-navbar .header-main-nav .nav-link,
  .site-navbar .header-actions .nav-link { margin-inline: 0; padding-inline: 0; }
}

/* Text controls grow with their labels, including enlarged system fonts. */
main .btn, .modal .btn { height: auto; min-height: 44px; white-space: normal; overflow-wrap: anywhere; }
main .table .btn { width: auto; height: auto; min-height: 44px; padding: .5rem .75rem; font-size: .875rem; }
main .table td, main .table th { white-space: normal; }
main h3, main h5, main h6, main p, main label, main dt, main dd,
.content-page__body, .footer-links, .footer-description { overflow-wrap: anywhere; }
main .form-control, main .form-select, main fieldset { min-width: 0; }
main textarea.form-control { height: auto; min-height: 120px; }
.cart-quantity-controls { display: inline-flex; align-items: center; gap: 8px; flex-wrap: nowrap; }
.cart-quantity-controls form { flex: 0 0 auto; }
.cart-quantity-controls > span { margin: 0 !important; min-width: 2ch; text-align: center; }
main .table .cart-quantity-button {
  display: inline-flex; align-items: center; justify-content: center;
  width: 52px; height: 52px; min-width: 52px; min-height: 52px;
  padding: 0; margin: 0; font-size: 38px; font-weight: 600; line-height: 1;
}
@media (max-width: 767.98px) {
  .cart-table { display: block; overflow: visible; }
  .cart-table td { white-space: normal; }
  main .responsive-records td.text-nowrap { white-space: normal !important; }
  main .responsive-records .flex-nowrap { flex-wrap: wrap !important; }
  .cart-table .cart-quantity-controls { flex-wrap: nowrap; }
  .shipping-ticker { white-space: normal; text-align: center; justify-content: center; }
  .shipping-ticker > span:not(:first-child) { display: none; }
}

/* Preserve the intended Bootstrap heading size inside product/CRM cards. */
main .card h2.h4 { font-size: calc(1.275rem + .3vw); }
@media (min-width: 1200px) { main .card h2.h4 { font-size: 1.5rem; } }
@media (max-width: 575.98px) {
  main .card h2:not(.h4) { font-size: 1.5rem; }
  main .card-body { padding: 18px; }
}