.swiper.brandline.bg3 img:hover
{
cursor: pointer;
}

.module_38
{
	background: var(--color8) !important;
}

.test_alert
{
	position: absolute;
    top: 0;
    right: 0;
    margin-top: 130px;
    z-index: 99999;
    background: #316a7e;
    color: #fff;
    border: none;
    font-size: 18px;
    box-shadow: none;
    border-top-right-radius: 0px;
    border-bottom-right-radius: 0px;
    transition: ease-in-out .3s;


}



.test_alert .close,
.test_alert .close:hover
{
	color: #FFF;
    text-decoration: none;
    cursor: pointer;
    filter: alpha(opacity = 50);
    opacity: 1;
    top: -2px;
    font-size: 30px;
    width: 20px;
    height: 20px;
}

#column-left
{
    width: 100%;
}


/* === OCFilter redesign === */

/* Remove card backgrounds from vertical filter blocks */
.ocf-theme-light-block.ocf-vertical .ocf-filter {
  background-color: transparent !important;
  padding: 0 0 20px 0 !important;
  border-radius: 0 !important;
  border-bottom: 1px solid #e5e5e5;
  margin-bottom: 20px !important;
}

.ocf-theme-light-block.ocf-vertical .ocf-active {
  background-color: transparent !important;
}

/* Section header: clean bold text, no card background */
.ocf-theme-light-block .ocf-filter-header {
  background-color: transparent !important;
  padding: 0 !important;
  border-radius: 0 !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  margin-bottom: 14px !important;
}

.ocf-theme-light-block .ocf-filter-header .ocf-filter-name,
.ocf-theme-light-block .ocf-filter-header .ocf-active-label {
  color: #1a1a1a !important;
  text-transform: none !important;
}

/* "See all" link */
.ocf-btn-show-values {
  color: #444 !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  padding-left: 0 !important;
}
.ocf-btn-show-values:hover {
  color: #111 !important;
  text-decoration: underline !important;
}


/* Scroll container: white background for transparent filter blocks */
.ocf-theme-light-block.ocf-vertical .ocf-filter .ocf-scroll-y {
  background-color: transparent !important;
  background-image: none !important;
}

/* Force expand dropdown filters: show values inline, not as popup or mobile slide-panel */
.ocf-theme-light-block.ocf-vertical .ocf-dropdown .ocf-filter-body > .ocf-value-list {
  display: block !important;
  position: static !important;
  transform: none !important;
  transition: none !important;
  padding: 0 !important;
  margin: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  min-width: auto !important;
  background-color: transparent !important;
  z-index: auto !important;
  height: auto !important;
  overflow: visible !important;
  width: 100% !important;
}

/* Restore header bottom margin after removing popup offset */
.ocf-theme-light-block.ocf-vertical .ocf-dropdown .ocf-filter-header {
  margin-bottom: 14px !important;
  cursor: default !important;
}

/* Hide dropdown toggle arrow since filters are always expanded */
.ocf-theme-light-block.ocf-vertical .ocf-dropdown .ocf-filter-header .ocf-angle-down {
  display: none !important;
}

/* Fix hover jitter: keep padding and scrollbar width constant (no layout shift on hover) */
.ocf-container .ocf-scroll-y,
.ocf-container .ocf-scroll-y:hover {
  padding-right: 10px !important;
  margin-right: -12px !important;
}
.ocf-container .ocf-scroll-y::-webkit-scrollbar,
.ocf-container .ocf-scroll-y:hover::-webkit-scrollbar {
  width: 4px !important;
}

/* Lock filter value font to 16px across all states (overrides .app button { font-size: 16px } cascade conflict) */
.ocf-container .ocf-value,
.ocf-container .ocf-value:hover,
.ocf-container .ocf-value:focus,
.ocf-container .ocf-value:active {
  font-size: 16px !important;
  line-height: 1.5 !important;
  padding: 0 !important;
  border-radius: 0 !important;
}

/* Hide header sliders icon */
.ocf-header .ocf-brand.ocf-sliders {
  display: none !important;
}

/* Slider layout: track first, inputs below, no pips.
   5-class specificity matches force-expand rule so flex wins for sliders. */
.ocf-theme-light-block.ocf-vertical .ocf-filter.ocf-slider .ocf-filter-body > .ocf-value-list,
.ocf-theme-light-block.ocf-vertical .ocf-dropdown.ocf-slider .ocf-filter-body > .ocf-value-list {
  display: flex !important;
  flex-direction: column !important;
}
.ocf-container .ocf-filter.ocf-slider .ocf-value-slider {
  order: 1 !important;
}
.ocf-container .ocf-filter.ocf-slider .ocf-slider-input-group {
  order: 2 !important;
  margin-top: 12px !important;
  margin-bottom: 0 !important;
}
.ocf-container .ocf-noUi-pips {
  display: none !important;
}
/* Slider inputs: two separate square boxes spread to edges */
.ocf-container .ocf-filter.ocf-slider .ocf-slider-input-group {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
  border-collapse: separate !important;
}
.ocf-container .ocf-filter.ocf-slider .ocf-slider-input-group .ocf-form-control {
  display: block !important;
  float: none !important;
  flex: 0 0 42% !important;
  width: 42% !important;
  border-radius: 0 !important;
  background-color: #fff !important;
  border: 1.5px solid #222 !important;
  color: #333 !important;
  box-shadow: none !important;
  padding: 6px 10px !important;
}
/* "-" separator and currency addon: plain text */
.ocf-container .ocf-filter.ocf-slider .ocf-slider-input-group .ocf-input-group-addon {
  display: inline !important;
  float: none !important;
  width: auto !important;
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 4px !important;
  border-radius: 0 !important;
  color: #999 !important;
  font-size: 13px !important;
  flex-shrink: 0 !important;
}

/* Hide selected filters pills block */
.ocf-selected-card,
.ocf-selecteds {
  display: none !important;
}

/* Footer: stack buttons vertically, apply on top — clear on bottom */
.ocf-theme-light-block.ocf-vertical .ocf-footer .ocf-between {
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 8px;
}
.ocf-theme-light-block.ocf-vertical .ocf-footer .ocf-search-btn-static {
  order: 1;
  width: 100% !important;
  border-radius: 4px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  background-color: rgb(238, 116, 99) !important;
  border-color: rgb(238, 116, 99) !important;
  color: #fff !important;
  padding: 10px 16px !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
}
.ocf-theme-light-block.ocf-vertical .ocf-footer .ocf-search-btn-static:hover {
  background-color: rgb(220, 95, 77) !important;
  border-color: rgb(220, 95, 77) !important;
  color: #fff !important;
}
.ocf-theme-light-block.ocf-vertical .ocf-footer .ocf-search-btn-static:disabled,
.ocf-theme-light-block.ocf-vertical .ocf-footer .ocf-search-btn-static.ocf-disabled {
  background-color: rgb(238, 116, 99) !important;
  border-color: rgb(238, 116, 99) !important;
  color: #fff !important;
  opacity: 0.6 !important;
}

/* Popover "Показать N товаров" button */
.ocf-search-btn-popover {
  background-color: #316a7e !important;
  border-color: #316a7e !important;
  color: #fff !important;
  border-radius: 4px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  padding: 8px 16px !important;
  white-space: nowrap !important;
}
.ocf-search-btn-popover:hover {
  background-color: #265869 !important;
  border-color: #265869 !important;
  color: #fff !important;
}
/* Hide floating popover — footer static button is used instead */
.ocf-popover {
  display: none !important;
}
.ocf-theme-light-block.ocf-vertical .ocf-footer .ocf-btn-link {
  order: 2;
  text-align: center !important;
  font-size: 12px !important;
  letter-spacing: 1px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  color: #e53935 !important;
  background: transparent !important;
  border: 1px solid #e53935 !important;
  border-radius: 4px !important;
  padding: 8px 16px !important;
}
.ocf-theme-light-block.ocf-vertical .ocf-footer .ocf-btn-link:hover {
  background: #ffeaea !important;
}

@media (max-width: 767px) {

/* Mobile: bring #column-left and OCFilter back into sidebar flow
   Overrides mobile.css which positions them off-screen via absolute/fixed */
.catalog__sidebar #column-left {
  position: static !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  display: block !important;
  width: 100% !important;
  float: none !important;
  padding: 0 !important;
  z-index: auto !important;
  visibility: visible !important;
  overflow: visible !important;
  opacity: 1 !important;
}
.catalog__sidebar .ocf-container {
  position: static !important;
  transform: none !important;
  width: 100% !important;
  height: auto !important;
  z-index: auto !important;
  display: block !important;
  box-shadow: none !important;
  transition: none !important;
}
.catalog__sidebar .ocf-container .ocf-content {
  display: block !important;
  position: static !important;
  transform: none !important;
  box-shadow: none !important;
  background: transparent !important;
  overflow: visible !important;
  height: auto !important;
  max-height: none !important;
}
.catalog__sidebar .ocf-btn-mobile-fixed {
  display: none !important;
}
.catalog__sidebar .ocf-is-mobile {
  display: none !important;
}
/* Hide OCFilter header (close button etc) — sidebar already has its own header */
.catalog__sidebar .ocf-container .ocf-header {
  display: none !important;
}
/* Reset absolute-positioned body/footer from mobile.css */
.catalog__sidebar .ocf-container .ocf-body {
  position: static !important;
  top: auto !important;
  bottom: auto !important;
  width: 100% !important;
  height: auto !important;
  overflow: visible !important;
}
.catalog__sidebar .ocf-container .ocf-body > .ocf-filter-list {
  overflow: visible !important;
  height: auto !important;
}
.catalog__sidebar .ocf-container .ocf-footer {
  position: static !important;
  bottom: auto !important;
  width: 100% !important;
  padding: 10px 16px !important;
  margin: 0 !important;
}
/* Reset filter item margins (mobile.css adds 20px sides) */
.catalog__sidebar .ocf-container .ocf-filter {
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
}
.catalog__sidebar .ocf-container .ocf-content {
  height: auto !important;
  background-color: transparent !important;
}
/* Non-dropdown, non-slider filters (e.g. radio "In stock/Out of stock"):
   override mobile.css translateX(-100%) so values render inline in the sidebar
   instead of sliding off-screen as a sliver. */
.catalog__sidebar .ocf-container .ocf-filter:not(.ocf-slider) .ocf-filter-body > .ocf-value-list {
  display: block !important;
  position: static !important;
  transform: none !important;
  transition: none !important;
  width: 100% !important;
  height: auto !important;
  min-width: 0 !important;
  overflow: visible !important;
  padding: 0 !important;
  margin: 0 !important;
  background-color: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  z-index: auto !important;
}

/* Slider track: override mobile.css translateX(-100%) and desktop white-box */
.catalog__sidebar .ocf-container .ocf-filter.ocf-slider .ocf-filter-body > .ocf-value-list {
  display: flex !important;
  flex-direction: column !important;
  position: static !important;
  transform: none !important;
  transition: none !important;
  overflow: visible !important;
  padding: 8px 16px 12px !important;
  height: auto !important;
  width: 100% !important;
  background-color: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}
/* Remove mobile.css extra 20px side padding on track — aligns with inputs */
.catalog__sidebar .ocf-container .ocf-value-slider {
  padding: 0 !important;
}
.catalog__sidebar .ocf-container .ocf-value-scale {
  width: 100% !important;
}
/* Slider number inputs: dark theme — match reference style */
.catalog__sidebar .ocf-container .ocf-slider-input-group .ocf-form-control {
  background-color: rgba(255,255,255,0.15) !important;
  border: 1.5px solid rgba(255,255,255,0.6) !important;
  color: #fff !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
.catalog__sidebar .ocf-container .ocf-slider-input-group .ocf-input-group-addon {
  background: transparent !important;
  border: none !important;
  color: rgba(255,255,255,0.5) !important;
}
/* Mobile handle: white border on dark bg */
.catalog__sidebar .ocf-container .ocf-noUi-handle {
  border-color: #fff !important;
  background-color: transparent !important;
}
/* Hide ">" mobile nav arrow and "←" back arrow — values show inline */
.catalog__sidebar .ocf-container .ocf-filter-header .ocf-angle-right,
.catalog__sidebar .ocf-container .ocf-filter-header .ocf-arrow-long.ocf-arrow-left {
  display: none !important;
}
/* Filter section header: white on teal */
.catalog__sidebar .ocf-container .ocf-filter-header,
.catalog__sidebar .ocf-container .ocf-filter-header .ocf-filter-name {
  color: #fff !important;
  background-color: transparent !important;
  border-bottom: none !important;
  padding: 14px 0 8px !important;
  margin: 0 !important;
  font-weight: 700 !important;
  font-size: 14px !important;
}
/* Filter name: grow to fill space, pushing chip rightward */
.catalog__sidebar .ocf-container .ocf-filter-header .ocf-filter-name {
  flex: 1 !important;
  min-width: 0 !important;
}
/* Selected values label: chip between filter-name and header-append */
.catalog__sidebar .ocf-container .ocf-filter-header .ocf-active-label {
  order: 5 !important;
  flex-basis: auto !important;
  flex-shrink: 1 !important;
  margin: 0 6px 0 8px !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  color: #fff !important;
  background-color: rgba(255,255,255,0.18) !important;
  border-radius: 20px !important;
  padding: 2px 10px !important;
  max-width: 140px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  text-decoration: none !important;
  border-bottom: none !important;
}
/* Filter section divider */
.catalog__sidebar .ocf-container .ocf-filter {
  border-bottom: 1px solid rgba(255,255,255,0.2) !important;
  padding-bottom: 12px !important;
}
/* Value items: white text on teal */
.catalog__sidebar .ocf-container .ocf-value {
  color: #fff !important;
  padding: 6px 0 !important;
  font-size: 14px !important;
}
.catalog__sidebar .ocf-container .ocf-value .ocf-value-name {
  color: #fff !important;
}
.catalog__sidebar .ocf-container .ocf-value .ocf-value-count {
  color: rgba(255,255,255,0.5) !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  font-size: 12px !important;
}
.catalog__sidebar .ocf-container .ocf-value .ocf-value-input-checkbox::before {
  background-color: transparent !important;
  border-color: rgba(255,255,255,0.6) !important;
}
.catalog__sidebar .ocf-container .ocf-value.ocf-selected .ocf-value-input-checkbox {
  border-color: #fff !important;
  background-color: rgba(255,255,255,0.3) !important;
}
/* Disabled (unavailable) values: dim out */
.catalog__sidebar .ocf-container .ocf-value.ocf-disabled,
.catalog__sidebar .ocf-container .ocf-value.ocf-disabled .ocf-value-name,
.catalog__sidebar .ocf-container .ocf-value.ocf-disabled .ocf-value-count {
  color: rgba(255,255,255,0.3) !important;
}
.catalog__sidebar .ocf-container .ocf-value.ocf-disabled .ocf-value-input-checkbox {
  border-color: rgba(255,255,255,0.2) !important;
  opacity: 0.4 !important;
}
/* Selected values: white filled checkbox with teal checkmark */
.catalog__sidebar .ocf-container .ocf-value.ocf-selected .ocf-value-input-checkbox::before {
  background-color: #fff !important;
  border-color: #fff !important;
}
.catalog__sidebar .ocf-container .ocf-value.ocf-selected .ocf-value-input-checkbox::after {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath fill='%23316a7e' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26l2.974 2.99L8 2.193z'/%3e%3c/svg%3e") !important;
}
.catalog__sidebar .ocf-container .ocf-value.ocf-selected .ocf-value-name {
  font-weight: 600 !important;
}
/* "Show more" link */
.catalog__sidebar .ocf-container .ocf-btn-show-values {
  color: rgba(255,255,255,0.7) !important;
  padding-left: 0 !important;
  font-size: 13px !important;
}
/* Ensure expanded collapse section is visible inline in mobile sidebar */
.catalog__sidebar .ocf-container .ocf-collapse.ocf-vl-expanded,
.catalog__sidebar .ocf-container .ocf-collapse.ocf-vl-expanded.ocf-in,
.catalog__sidebar .ocf-container .ocf-collapsing.ocf-vl-expanded {
  position: static !important;
  transform: none !important;
  transition: none !important;
  height: auto !important;
  overflow: visible !important;
  max-height: none !important;
}
.catalog__sidebar .ocf-container .ocf-collapse.ocf-vl-expanded.ocf-in {
  display: block !important;
}
/* Search input: clean white pill on dark bg */
.catalog__sidebar .ocf-container .ocf-vl-search-wrap {
  padding: 8px 0 12px !important;
}
.catalog__sidebar .ocf-container .ocf-vl-search-wrap .ocf-form-control {
  background-color: rgba(255,255,255,0.12) !important;
  border: 1px solid rgba(255,255,255,0.35) !important;
  border-radius: 8px !important;
  color: #fff !important;
  font-size: 14px !important;
  padding: 8px 12px !important;
  width: 100% !important;
}
.catalog__sidebar .ocf-container .ocf-vl-search-wrap .ocf-form-control::placeholder {
  color: rgba(255,255,255,0.45) !important;
}
.catalog__sidebar .ocf-container .ocf-vl-no-results {
  color: rgba(255,255,255,0.5) !important;
  padding: 4px 0 0 !important;
  font-size: 13px !important;
}
/* Scroll container in expanded section */
.catalog__sidebar .ocf-container .ocf-vl-scroll {
  max-height: 260px !important;
  overflow-y: auto !important;
  background-color: transparent !important;
}
.catalog__sidebar .ocf-container .ocf-slider-inputs input {
  background-color: rgba(255,255,255,0.12) !important;
  border: 1px solid rgba(255,255,255,0.35) !important;
  color: #fff !important;
  border-radius: 6px !important;
}
/* Open filter header stays inline (not absolute as mobile.css sets it) */
.catalog__sidebar .ocf-container .ocf-open .ocf-filter-header {
  position: static !important;
  bottom: auto !important;
  width: auto !important;
  height: auto !important;
  background-color: transparent !important;
}
/* Footer */
.catalog__sidebar .ocf-container .ocf-footer {
  background-color: transparent !important;
  box-shadow: none !important;
}

} /* end @media (max-width: 767px) */

/* Footer фильтра: убрать белый фон и тень глобально */
.catalog__sidebar .ocf-container .ocf-footer {
  background-color: transparent !important;
  box-shadow: none !important;
  border: none !important;
  padding: 12px 16px !important;
}
.catalog__sidebar .ocf-container .ocf-footer::after {
  display: none !important;
}

/* Desktop: align "Filter by" heading with OCFilter items (which have 16px default padding) */
@media (min-width: 768px) {
  .catalog__sidebar .catalog__title {
    padding-left: 16px;
  }
}

/* ── ocf-noUi slider: clean minimal look (desktop + mobile) ── */
/* Track background */
.ocf-container .ocf-noUi-base:before {
  background-color: #d8d8d8 !important;
  height: 2px !important;
  margin-top: -1px !important;
  border-radius: 2px !important;
}
/* End-cap dots */
.ocf-container .ocf-noUi-connects:before,
.ocf-container .ocf-noUi-connects:after {
  background-color: #d8d8d8 !important;
  width: 4px !important;
  height: 4px !important;
  margin-top: -2px !important;
}
/* Connect (selected range) */
.ocf-container .ocf-noUi-connect:before {
  background-color: rgb(238, 116, 99) !important;
  height: 2px !important;
  margin-top: -1px !important;
}
/* Handle — 18px circle centered on 18px connects container: top = (18-18)/2 = 0px */
.ocf-container .ocf-noUi-handle {
  width: 18px !important;
  height: 18px !important;
  right: -9px !important;
  top: 0px !important;
  background-color: #fff !important;
  border: 2px solid rgb(238, 116, 99) !important;
  border-width: 2px !important;
  box-shadow: none !important;
}
.ocf-container .ocf-noUi-active { box-shadow: 0 0 0 4px rgba(238,116,99,0.25) !important; }

/* Mobile overrides on dark teal background */
@media (max-width: 767px) {
  .catalog__sidebar .ocf-container .ocf-noUi-base:before,
  .catalog__sidebar .ocf-container .ocf-noUi-connects:before,
  .catalog__sidebar .ocf-container .ocf-noUi-connects:after {
    background-color: rgba(255,255,255,0.3) !important;
  }
  .catalog__sidebar .ocf-container .ocf-noUi-handle {
    border-color: rgba(255,255,255,0.8) !important;
  }
}

/* Expanded values section: search + scroll */
.ocf-vl-search-wrap {
  padding-bottom: 10px;
}
.ocf-vl-search-wrap .ocf-form-control {
  border-radius: 20px !important;
  border-color: #ddd !important;
  background-color: #f5f5f5 !important;
  font-size: 13px !important;
}
.ocf-vl-no-results {
  display: none;
  font-size: 13px;
  color: #999;
  padding: 4px 0 8px;
}
.ocf-vl-scroll {
  max-height: 320px;
}

/* Hide preview when expanded section is open (collapse comes before preview in DOM) */
.ocf-collapse-value.ocf-in ~ .ocf-vl-preview,
.ocf-collapsing ~ .ocf-vl-preview {
  display: none !important;
}


/* ══════════════════════════════════════
   Cart page  (#checkout-cart)
   ══════════════════════════════════════ */

.cart-page {
  min-height: 60vh;
}
.cart-page__alert {
  margin-top: 16px;
}

/* Two-column layout: products left, summary card right */
.cart-layout {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 40px;
  align-items: start;
  margin-top: 32px;
}
@media (max-width: 1023px) {
  .cart-layout {
    grid-template-columns: 1fr;
  }
}

/* Column headers */
.cart-head-row {
  display: grid;
  grid-template-columns: 1fr 160px 120px;
  gap: 16px;
  padding: 0 0 14px;
  border-bottom: 2px solid #e0e0e0;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #999;
}
.cart-head-row__qty,
.cart-head-row__price {
  text-align: center;
}

/* Single cart row */
.cart-item {
  display: grid;
  grid-template-columns: 1fr 160px 120px;
  gap: 16px;
  align-items: center;
  padding: 20px 0;
  border-bottom: 1px solid #e8e8e8;
}

/* Book cell (image + text) */
.cart-item__book {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}
.cart-item__img-wrap {
  flex-shrink: 0;
}
.cart-item__img {
  width: 64px;
  height: 88px;
  object-fit: cover;
  display: block;
}
.cart-item__info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.cart-item__author {
  font-size: 12px;
  color: #888;
}
.cart-item__title {
  font-size: 13px;
  font-weight: 700;
  color: var(--black);
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  line-height: 1.3;
  display: block;
}
.cart-item__title:hover {
  color: var(--color2);
}
.cart-item__unit-price {
  font-size: 13px;
  color: #888;
  margin-top: 2px;
}
.cart-item__options {
  font-size: 12px;
  color: #888;
}
.cart-item__stock-warn {
  font-size: 12px;
  color: #e53935;
}

/* Qty stepper + remove button */
.cart-item__controls {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.cart-item__remove {
  background: none;
  border: none;
  cursor: pointer;
  color: #aaa;
  font-size: 15px;
  padding: 2px 6px;
  line-height: 1;
  transition: color 0.2s;
}
.cart-item__remove:hover {
  color: #e53935;
}

/* Row total price */
.cart-item__total {
  text-align: right;
  font-weight: 700;
  font-size: 16px;
  color: var(--black);
}

/* ── Right sidebar card ── */
.cart-aside-card {
  background: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  padding: 24px;
  position: sticky;
  top: 24px;
}
.cart-aside-card__checkout {
  display: block !important;
  width: 100%;
  text-align: center;
  margin-bottom: 12px;
  padding: 14px 20px !important;
  font-weight: 700;
  letter-spacing: 0.08em;
  font-size: 14px;
}
.cart-aside-card__note {
  font-size: 13px;
  color: #888;
  line-height: 1.45;
  margin: 0 0 16px;
}
.cart-aside-card__divider {
  border-top: 1px solid #e8e8e8;
  margin: 0 0 14px;
}
.cart-aside-card__label {
  font-weight: 700;
  font-size: 15px;
  margin-bottom: 10px;
  color: var(--black);
}
.cart-aside-totals {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 16px;
}
.cart-aside-total-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 15px;
  color: var(--black);
}
.cart-aside-total-row__val {
  font-weight: 700;
}
.cart-continue-link {
  display: block;
  text-align: center;
  font-size: 13px;
  color: #888;
  text-decoration: none;
  padding-top: 8px;
  border-top: 1px solid #e8e8e8;
}
.cart-continue-link:hover {
  color: var(--color2);
}

/* Mobile: stack quantity stepper horizontally on small screens */
@media (max-width: 767px) {
  .cart-item {
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto;
  }
  .cart-item__total {
    grid-column: 2;
    grid-row: 1;
    align-self: start;
    padding-top: 4px;
  }
  .cart-item__controls {
    grid-column: 1 / -1;
    flex-direction: row;
    justify-content: space-between;
  }
  .cart-head-row {
    display: none;
  }
}

/* ── Cart add toast notification ── */
.nl-cart-toast {
  position: fixed;
  top: 24px;
  right: 24px;
  z-index: 9999;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: var(--color5, #044553);
  color: #fff;
  padding: 16px 20px;
  max-width: 380px;
  width: calc(100vw - 48px);
  box-shadow: 0 4px 20px rgba(0,0,0,.18);
  opacity: 0;
  transform: translateY(-12px);
  transition: opacity .25s ease, transform .25s ease;
  pointer-events: none;
}
.nl-cart-toast._visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.nl-cart-toast__icon {
  flex-shrink: 0;
  margin-top: 2px;
  color: var(--color7, #A7D8DC);
}
.nl-cart-toast__msg {
  flex: 1;
  font-size: 14px;
  line-height: 1.5;
}
.nl-cart-toast__msg a {
  color: var(--color7, #A7D8DC);
  text-decoration: underline;
}
.nl-cart-toast__close {
  background: none;
  border: none;
  color: rgba(255,255,255,.6);
  font-size: 20px;
  line-height: 1;
  padding: 0;
  cursor: pointer;
  flex-shrink: 0;
  margin-top: -1px;
}
.nl-cart-toast__close:hover {
  color: #fff;
}
@media (max-width: 480px) {
  .nl-cart-toast {
    top: auto;
    bottom: 16px;
    right: 16px;
    left: 16px;
    width: auto;
    max-width: none;
  }
}

/* Breadcrumbs */
.breadcrumb-nav {
  padding: 12px 0;
  background: var(--color4);
}
.breadcrumb-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  list-style: none;
  padding: 0;
  margin: 0;
}
.breadcrumb-list__item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--color2);
}
.breadcrumb-list__item a {
  color: var(--color2);
  opacity: 0.6;
  transition: opacity 0.2s;
}
.breadcrumb-list__item a:hover {
  opacity: 1;
}
.breadcrumb-list__item span {
  opacity: 0.9;
}
.breadcrumb-list__item .icon {
  font-size: 8px;
  opacity: 0.4;
}

/* Mobile search bar */
.header-mob__search {
  display: flex;
  align-items: center;
  margin: 16px 20px 0;
  border: 1px solid var(--black);
  border-radius: 50px;
  background: var(--color10);
  position: relative;
}
.header-mob__search input[type="text"] {
  border-radius: 50px 0 0 50px;
}
.header-mob__search button {
  border-radius: 0 50px 50px 0;
}
/* AutoSearch dropdown inside mobile search form */
.header-mob__search #autosearch_search_results {
  top: 100%;
  margin-top: 4px;
  border-radius: 8px;
  z-index: 10000;
  color: #1a1a1a;
}
.header-mob__search input[type="text"] {
  flex: 1;
  border: none;
  background: transparent;
  padding: 10px 16px;
  font-size: 16px;
  outline: none;
}
.header-mob__search button {
  background: transparent;
  border: none;
  padding: 10px 14px 10px 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  font-size: 20px;
  color: var(--black);
}

/* Mobile menu scrolling when content is taller than viewport */
@media (max-width: 1280px) {
  .app .header-mob__toggle:checked ~ .header-mob {
    display: flex !important;
    flex-direction: column;
    gap: 2rem;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }
  .app .header-mob > * {
    flex-shrink: 0;
  }
}

/* Mobile accordion dropdown. The JS at catalog/view/javascript/nl/script.js animates the
   open/close via inline `height` + `opacity`; CSS only declares the steady states and the
   transition spec. Animating max-height here additionally caused a one-frame flash on close
   (max-height was still ~3000 while JS already cleared inline height, so the dropdown briefly
   re-expanded before CSS shrank max-height to 0). max-height is now only a gate, no transition.
   overflow: hidden in both states clips the dropdown's items as JS shrinks its height. */
.header-mob .accordionDropdown {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: height 0.5s ease, opacity 0.3s ease;
}
.header-mob .accordionItem._active > .accordionDropdown {
  max-height: 3000px;
  overflow: hidden;
  opacity: 1;
}

/* Mobile megamenu layout */
.header-mob .megamenu {
  position: static;
  background: none;
  border: none;
  padding: 0;
  width: auto;
  max-width: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.header-mob .megamenu__i {
  position: static;
  display: block;
}
.header-mob .megamenu__drop,
.header-mob .megamenu__i:hover .megamenu__drop {
  position: static;
  background: none;
  border: none;
  padding: 0;
  width: auto;
  max-width: none;
  min-width: 0;
  min-height: 0;
  display: block !important;
}
.header-mob .megamenu__title {
  display: none !important;
}
.header-mob .megamenu a,
.header-mob .megamenu__drop a {
  padding: 4px 0;
  font-size: 16px;
  font-weight: 400;
  text-transform: none;
}
.header-mob .megamenu__i > a:after {
  display: inline-block;
}

/* Product description "Read more" — label has two spans, only one visible at a time depending
   on the checkbox state. Replaces the stock ::after content:"Read more"/"Close" which is
   hard-coded English. We also blank out the stock ::after so it doesn't append after our spans;
   :checked variant needed because the stock rule for it has higher specificity than the base. */
.app .readmore label::after,
.app .readmore label:after,
.app .readmore input:checked ~ label::after,
.app .readmore input:checked ~ label:after { content: none !important; }
.app .readmore .readmore__txt._close { display: none; }
.app .readmore input:checked ~ label .readmore__txt._open { display: none; }
.app .readmore input:checked ~ label .readmore__txt._close { display: inline; }

/* Product description "Read more" — keep label in normal flow on mobile (no gradient overlay covering text) */
@media (max-width: 767px) {
  .app .readmore label {
    position: static !important;
    background: none !important;
    height: auto !important;
    width: auto !important;
    color: inherit !important;
  }
}
/* Старое правило скрывало «Read more» если у описания <2 абзацев. */
/* Удалено: теперь обрезка по max-height на десктопе и по gradient'у на мобиле */
/* — обрезка зависит от высоты текста, а не от числа <p>, и кнопка должна */
/* быть доступна всегда, чтобы пользователь мог раскрыть длинный одиночный абзац. */

/* Cart button animations */
@keyframes nl-cart-pulse {
  0%   { transform: scale(1); }
  35%  { transform: scale(0.92); }
  100% { transform: scale(1); }
}

.btn._cart-adding {
  animation: nl-cart-pulse 0.3s ease;
  pointer-events: none;
}

.btn._cart-added {
  background: var(--color6) !important;
  pointer-events: none;
}

.btn._cart-added:hover {
  filter: none !important;
}

/* Cart toast notification */
.nl-toast {
  position: fixed;
  top: 24px;
  right: 24px;
  background: var(--color5);
  color: #fff;
  padding: 14px 22px;
  border-radius: 6px;
  z-index: 99999;
  font-size: 15px;
  font-weight: 500;
  opacity: 0;
  transform: translateY(-12px);
  transition: opacity 0.25s, transform 0.25s;
  pointer-events: none;
  max-width: 320px;
}
.nl-toast._show {
  opacity: 1;
  transform: translateY(0);
}

/* Quantity stepper (replaces "Add to cart" in listings) */
.nl-qty {
  display: flex !important;
  flex-flow: row nowrap;
  align-items: stretch;
  width: 100%;
  min-height: 6rem;
  background: var(--color8);
  overflow: hidden;
  box-sizing: border-box;
  position: relative;
  z-index: 6;
}

.card__buy .nl-qty {
  width: auto;
  min-width: 14rem;
  margin-left: 1rem;
}

.nl-qty__btn {
  display: flex !important;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 5rem;
  cursor: pointer;
  color: var(--color1);
  font-size: 2rem;
  transition: background 0.2s;
  user-select: none;
}

.nl-qty__btn:hover {
  background: var(--color7);
}

.nl-qty__val {
  flex: 1;
  display: flex !important;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  font-weight: 600;
  color: var(--color5);
  user-select: none;
}

/* Privacy-agreement checkbox (used on checkout, footer subscribe form, blog subscribe form) */
label.nl-ds-newsletter,
.simplecheckout label.nl-ds-newsletter {
  display: flex !important;
  flex-direction: row !important;
  align-items: center;
  justify-content: flex-start;
  width: 100% !important;
  gap: 10px;
  margin: 28px 0 4px !important;
  padding: 0;
  font-size: 14px;
  color: #1a1a1a;
  cursor: pointer;
  user-select: none;
  text-align: left;
}
.nl-ds-newsletter input[type="checkbox"] {
  position: absolute !important;
  opacity: 0 !important;
  width: 0 !important;
  height: 0 !important;
  pointer-events: none !important;
  margin: 0 !important;
  padding: 0 !important;
}
.nl-ds-newsletter__box {
  display: inline-block;
  flex-shrink: 0;
  width: 20px !important;
  height: 20px !important;
  min-width: 20px;
  min-height: 20px;
  border: 2px solid #b5afa7 !important;
  background: #fff !important;
  box-sizing: border-box;
  position: relative;
  transition: background .15s, border-color .15s;
}
.nl-ds-newsletter input[type="checkbox"]:checked + .nl-ds-newsletter__box {
  background: var(--color2, #EE7463) !important;
  border-color: var(--color2, #EE7463) !important;
}
.nl-ds-newsletter input[type="checkbox"]:checked + .nl-ds-newsletter__box::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 1px;
  width: 5px;
  height: 10px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.nl-ds-newsletter__label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 20px;
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  color: #1a1a1a;
}
.nl-ds-newsletter__label a {
  color: var(--color2, #EE7463);
  text-decoration: underline;
}
.nl-ds-newsletter__label a:hover {
  text-decoration: none;
}

/* Subscribe-form specific overrides: smaller text, tighter margin, wrap long label */
.nl-subscribe-form label.nl-ds-newsletter {
  margin: 14px 0 0 !important;
  font-size: 13px;
}
.nl-subscribe-form .nl-ds-newsletter__label {
  display: inline;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.35;
  height: auto;
}

/* Dark variant (footer) */
.nl-ds-newsletter._on-dark .nl-ds-newsletter__label {
  color: #fff;
}
.nl-ds-newsletter._on-dark .nl-ds-newsletter__box {
  border-color: #fff !important;
  background: transparent !important;
}

/* Subscribe form feedback message */
.nl-subscribe-message {
  font-size: 13px;
  margin-top: 6px;
  line-height: 1.35;
}
.nl-subscribe-message._error {
  color: var(--color2, #EE7463);
}
.nl-subscribe-message._ok {
  color: #4CAF50;
}
/* On-dark surfaces keep success legible */
.color-w .nl-subscribe-message._ok {
  color: #9be5a8;
}

/* Subscribe button states: loading spinner + success checkmark */
.nl-subscribe-form button[type="submit"] {
  position: relative;
  transition: background-color .2s ease;
}
.nl-subscribe-form button[type="submit"]._loading,
.nl-subscribe-form button[type="submit"]._success {
  cursor: default;
}
.nl-subscribe-form button[type="submit"]._success {
  background: #4CAF50;
  border-color: #4CAF50;
}

.nl-subscribe-spinner {
  display: inline-block;
  width: 18px;
  height: 18px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: nl-subscribe-spin 0.7s linear infinite;
  vertical-align: middle;
}

@keyframes nl-subscribe-spin {
  to { transform: rotate(360deg); }
}

.nl-subscribe-check {
  display: inline-block;
  width: 20px;
  height: 20px;
  vertical-align: middle;
  animation: nl-subscribe-check-in 0.3s ease-out;
}

@keyframes nl-subscribe-check-in {
  0% {
    opacity: 0;
    transform: scale(0.4);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

/* === Personal Account (LK) ============================================== */
/* Imported from catalog_lk on 2026-04-25                                    */
/* Source: catalog_lk/view/theme/default/stylesheet/custom.css               */

/* Notification toast for LK actions */
.test_alert {
  position: absolute;
  top: 0;
  right: 0;
  margin-top: 130px;
  z-index: 99999;
  background: #316a7e;
  color: #fff;
  border: none;
  font-size: 18px;
  box-shadow: none;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  transition: ease-in-out .3s;
}
.test_alert .close,
.test_alert .close:hover {
  color: #fff;
  text-decoration: none;
  cursor: pointer;
  filter: alpha(opacity=50);
  opacity: 1;
  top: -2px;
  font-size: 30px;
  width: 20px;
  height: 20px;
}

/* My Account dashboard tiles */
.myaccount_area {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 10px;
  min-width: 0;
}
.myaccount_item {
  background-color: #EAE7DC;
  padding: 33px 25px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 15px;
  flex-direction: column;
  width: 100%;
  height: 162px;
  min-width: 0;
  transition: all ease .2s;
}
.myaccount_item:hover {
  transition: all ease .2s;
  filter: contrast(1.2);
}
.myaccount_item_text {
  text-align: center;
  color: #1D1D1D;
  font-size: 18px;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
}
.myaccount_item_img {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  font-size: 36px;
  color: #044553;
  line-height: 1;
}
.myaccount_item_img i.icon {
  font-size: 36px;
  display: inline-flex;
}
.myaccount_item:hover .myaccount_item_img {
  color: #EE7463;
  transition: color .2s ease;
}

/* "Back to my account" link arrow — overrides .app .account__menu i.icon (2.4rem) */
.app .account__menu a > i.icon-left {
  font-size: 10px;
  margin-right: 6px;
  vertical-align: middle;
  opacity: 0.7;
}

/* Wishlist remove button on the LK wishlist page — always filled red */
.app .account-page .fav.wishlist-remove a > i.icon-heart {
  font-size: 22px;
  color: #E53935;
  cursor: pointer;
  transition: transform .15s ease, opacity .15s ease;
}
.app .account-page .fav.wishlist-remove a > i.icon-heart:after {
  color: #E53935;
  opacity: 1;
  margin-left: -1em;
}
.app .account-page .fav.wishlist-remove a:hover > i.icon-heart {
  transform: scale(1.15);
  opacity: 0.85;
}

/* Heart state on product cards (catalog/category/search/manufacturer/product page).
   When the product is in the user's wishlist, fill the heart with red. */
.app .fav._in-wishlist i.icon-heart:after,
.app .fav input:checked ~ i.icon-heart:after {
  color: #E53935 !important;
  opacity: 1;
}

/* Address list cards */
.myaccount_address_item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  border: 1px solid #F3F3F3;
  padding: 10px 15px;
  min-height: 80px;
}
.myaccount_address_item_btns {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 20px;
}
.myaccount_address_item_btns a:hover {
  color: #FFF8B4;
}
.myaccount_select {
  width: 100%;
  padding: 0 16px !important;
}

/* Reward points table */
.myaccount_rewards_form {
  width: 100%;
  display: flex;
  flex-direction: column;
}
.myaccount_rewards_form_title {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  padding: 10px 5px;
}
.myaccount_rewards_form_item {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  padding: 10px 5px;
  border-top: 1px solid #F3F3F3;
}
.myaccount_pagination {
  margin-top: 20px;
}

/* Greyed-out button (used for "out of stock" in wishlist) */
._greybtn {
  background-color: #e0e0e0 !important;
  color: #374151 !important;
  border-radius: 4px;
}

/* Rounded corners on buttons inside the LK only (don't touch contact/manufacturer/etc) */
.account-page button.btn._alt._full,
.account-page input.btn._alt._full {
  border-radius: 4px;
}

/* Misc tiny utilities used inside LK / brand carousel */
.swiper.brandline.bg3 img:hover { cursor: pointer; }
.module_38 { background: var(--color8) !important; }

/* Mobile: 2-col grid for dashboard */
@media (min-width: 320px) and (max-width: 530px) {
  .myaccount_area {
    grid-template-columns: repeat(2, 1fr);
  }
  .myaccount_item {
    padding: 23px 15px;
  }
}
/* === /Personal Account (LK) ============================================= */

/* === Register pages: tweak existing entrance-page layout ============== */
/* Reuses .form, .input, .pass-input, .btn._alt._full from style.css       */
.app .entrance-page .form .text {
  font-size: 14px;
  line-height: 1.6;
  margin: 0 0 24px;
  max-width: 42ch;
}
.app .entrance-page .form .text._email {
  font-size: 16px;
  font-weight: 600;
  color: var(--color3);
}
.app .entrance-page .link._muted {
  color: rgba(243, 243, 243, 0.7);
  text-decoration: none;
  font-size: 13px;
}
.app .entrance-page .link._muted a {
  color: var(--color3);
  text-decoration: underline;
}
/* === /Register pages =================================================== */

/* === Categories sidebar module — own classes (no OCFilter dependency) === */
.nl-cat-filter {
  width: 100%;
  display: block;
  margin-bottom: 24px;
}
.nl-cat-filter__header {
  margin-bottom: 14px;
}
.nl-cat-filter__title {
  font-size: 22px;
  font-weight: 600;
  line-height: 1.2;
  color: inherit;
}
.nl-cat-filter__list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.nl-cat-filter__item {
  display: block;
  padding: 4px 0;
  font-size: 16px;
  line-height: 1.4;
  color: inherit;
  text-decoration: none;
  transition: color 0.15s ease;
}
.nl-cat-filter__item:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Скрываем категории сверх лимита (show_limit=6) до клика на «See all». */
.nl-cat-filter__extra {
  display: none !important;
}
.nl-cat-filter._expanded .nl-cat-filter__extra {
  display: block !important;
}
.nl-cat-filter__see-all {
  display: inline-block;
  margin-top: 14px;
  font-size: 15px;
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.nl-cat-filter__see-all:hover {
  text-decoration-thickness: 2px;
}

/* На мобиле — чуть компактнее. */
@media (max-width: 767px) {
  .nl-cat-filter__title {
    font-size: 18px;
  }
  .nl-cat-filter__item {
    font-size: 15px;
  }
}
/* === /Categories sidebar module ======================================== */

/* === "View all" links — mobile only ===================================== */
/* Ссылка «Посмотреть все» рендерится в menu.twig внутри каждой категории — */
/* и попадает одинаково в десктопный (.header__menu) и мобильный (.header-mob__menu) */
/* контексты. Прячем её только в десктопной навигации. */
/* .app в селекторе обязателен — иначе .app .megamenu a { display: block } */
/* из style.css:6179 побеждает по специфичности и ссылка остаётся видимой. */
.app .header__menu .megamenu__see-all {
  display: none;
}
/* === /"View all" links ================================================== */

/* === Contacts page — without map ======================================= */
/* Карта удалена из шаблона; убираем отступы, заточенные под наличие карты, */
/* и делаем колонку с контактами компактнее. */
.app .contacts__map {
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
}
.app .contacts__list {
  margin-top: 0;
  flex-direction: column;
  gap: 2rem;
}
.app .contacts__list > * {
  flex-grow: 0;
}
/* === /Contacts page ==================================================== */

/* === Product description — 5-line clamp on desktop ===================== */
/* Описание режется по высоте через max-height; по клику на «Read more» снимается.
   Стоковая обрезка p:not(:first-of-type){display:none} работает только если описание
   из нескольких <p> — если один блок, ничего не обрезалось. Делаем универсально по высоте. */
.app .readmore .text {
  overflow: hidden;
  max-height: 12em;             /* ~7–8 строк на мобиле */
  position: relative;
}
.app .readmore .text p {
  display: block;
}
.app .readmore label.link {
  display: inline-block;
  margin-top: 1.5rem;
  cursor: pointer;
  font-weight: 400;
}
.app .readmore input:checked ~ .text {
  max-height: none;
  overflow: visible;
}
@media (min-width: 768px) {
  .app .readmore .text {
    max-height: 8.5em;          /* ~5 строк на десктопе */
  }
}
/* === /Product description ============================================== */

/* === Product page main image — match target layout ===================== */
/* Перестраиваем грид: картинке больше места, гэп меньше, правая колонка уже. */
.app .card {
  grid-template-columns: 1.4fr 1fr;
  grid-gap: 5rem 6rem;
}
/* Картинка заполняет колонку. На широких мониторах растёт до 95rem. */
/* max-width: none снимает глобальный img{max-width:100%}. */
.app .card .gallery-top img {
  width: clamp(60rem, 100%, 95rem);
  max-width: none;
}
/* === /Product page main image ========================================== */

/* ══════════════════════════════════════════════════════════════════════════
   Order success page (checkout/success)
   ══════════════════════════════════════════════════════════════════════════ */
.nl-success {
  position: relative;
  background: #316a7e;
  color: #fff;
  padding: 60px 0 80px;
  overflow: hidden;
}

/* Body text base: Manrope Light 20/100% per design spec.
   Form elements (input/textarea/button) don't inherit font props by default — set explicitly.
   Title (.nl-success__title) and badge (.nl-success__meta-id) override below. */
.app .nl-success,
.app .nl-success input,
.app .nl-success textarea,
.app .nl-success button {
  font-family: Manrope, sans-serif;
  font-weight: 300;
  font-size: 20px;
  line-height: 1;
  letter-spacing: 0;
}
.nl-success__inner {
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 32px;
  z-index: 1;
}

/* Decorative SVG bottom-right — anchored to viewport's right edge (sibling of .nl-success__inner,
   not nested inside it, so right:0 is the section/viewport edge, not the centered container's edge). */
.nl-success__illustration {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 26%;
  max-width: 460px;
  pointer-events: none;
  z-index: 0;
  opacity: 0.95;
}
.nl-success__illustration img {
  display: block;
  width: 100%;
  height: auto;
}

/* Title — uses theme's FactorA with ss01 stylistic set (the decorative "С"/"ш" letterforms). */
.app .nl-success__title {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 0 0 48px;
  font-family: FactorA, sans-serif !important;
  font-size: 30px !important;
  font-weight: 600 !important;
  line-height: 1.1 !important;
  color: #fff !important;
  text-transform: capitalize !important;
  -webkit-font-feature-settings: "ss01";
  font-feature-settings: "ss01";
}
.nl-success__title-icon {
  display: inline-flex;
  align-items: center;
  color: #f3f3f3;
  flex-shrink: 0;
}
.nl-success__title-icon svg {
  /* Native 30×30 to match user-supplied SVG and title font-size. */
  width: 30px;
  height: 30px;
}

/* Order meta line — badge + track link, all 20px text */
.nl-success__meta {
  display: flex;
  align-items: center;
  gap: 28px;
  margin-bottom: 22px;
  flex-wrap: wrap;
}
.nl-success__meta-label {
  font-size: 20px;
  color: #fff;
  opacity: 0.95;
}
.nl-success__meta-id {
  display: inline-block;
  background: #5b97a8;
  color: #FFF8B4;
  font-weight: 700;
  font-size: 30px;
  padding: 10px 30px;
  border-radius: 14px;
  letter-spacing: 0.5px;
  line-height: 1.15;
}
.app a.nl-success__meta-track,
.app .nl-success__meta-track {
  color: #fff;
  font-size: 20px;
  text-decoration: underline !important;
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
  margin-left: 6px;
}
.app a.nl-success__meta-track:hover,
.app .nl-success__meta-track:hover {
  color: #FFF8B4;
  text-decoration: underline !important;
}

/* Email confirmation note — plain (no underline) per design */
.nl-success__email-note {
  margin: 8px 0 0;
  font-size: 20px;
  color: #fff;
  opacity: 0.95;
  text-decoration: none;
}

/* Status timeline: alternating "label → dot → label → dot → label → dot" inline.
   Labels sit above the line; dots are pushed down (margin-top) so they sit on the line.
   Line spans the steps container width; empty dots have solid page-bg to mask line passing through. */
.nl-success__steps {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 30px;
  list-style: none;
  margin: 100px 0 70px;
  padding: 0;
  position: relative;
  width: max-content;
  max-width: 100%;
}
.nl-success__steps::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 11px;        /* line at dot vertical center: dot is 22px tall, top at 32px → center at 43px → from 54px height that's 11px from bottom */
  height: 1px;
  background: rgba(255, 255, 255, 0.55);
  z-index: 0;
}
.nl-success__step {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 30px;            /* gap between label and its dot */
  position: relative;
  z-index: 1;
}
.nl-success__step-label {
  font-size: 20px;
  color: #fff;
  opacity: 0.95;
  font-weight: 300;
  line-height: 1;
}
.nl-success__step-dot {
  display: block;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, 0.75);
  /* Page-bg fill so the timeline line doesn't show through inside empty circles. */
  background: #316a7e;
  box-sizing: border-box;
  flex-shrink: 0;
  margin-top: 32px;     /* push dot below label baseline so it sits on the line */
}
.nl-success__step--active .nl-success__step-dot {
  background: #fff;
  border-color: #fff;
}
.nl-success__step--active .nl-success__step-label {
  opacity: 1;
  font-weight: 700;
}

/* "Order details" heading + chevron.
   `.app h2 { margin: 0 }` from style.css beats single-class selectors — bump with element + class. */
.app h2.nl-success__details-title {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 48px;
  font-size: 20px;
  font-weight: 300;
  color: #fff;
  line-height: 1;
}
.nl-success__details-chevron {
  display: inline-flex;
  align-items: center;
  color: #fff;
  flex-shrink: 0;
}
.nl-success__details-chevron svg {
  width: 22px;
  height: 22px;
}

/* Address fields grid (3×3 readonly inputs) */
.nl-success__fields {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px 36px;       /* row | column — slightly wider per design */
  margin-bottom: 56px;
  max-width: 70%;
}
.app .nl-success__field input {
  width: 100%;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.85);
  color: #fff;
  font-family: Manrope, sans-serif;
  font-size: 14px;
  font-weight: 300;
  line-height: 1;
  letter-spacing: 0;
  padding: 18px 22px;
  border-radius: 0;
  box-sizing: border-box;
  cursor: default;
}
.nl-success__field input::placeholder {
  color: rgba(255, 255, 255, 0.6);
  opacity: 1;
}
.nl-success__field input:focus {
  outline: none;
  border-color: #fff;
}

/* Products grid (3 per row): bigger covers, text vertically centered against image */
.nl-success__products {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 50px 40px;
  margin-bottom: 64px;
  max-width: 70%;
}
.nl-success__product {
  display: flex;
  gap: 28px;
  align-items: center;       /* center text block vertically against image */
}
.nl-success__product-img {
  flex-shrink: 0;
  width: 160px;
  height: 224px;             /* book cover ratio ~1.4 */
  overflow: hidden;
}
.nl-success__product-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.nl-success__product-img--empty {
  background: rgba(255, 255, 255, 0.08);
}
.nl-success__product-info {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}
.nl-success__product-author {
  font-family: Manrope, sans-serif;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: 0;
  text-align: left;
  color: #fff;
  opacity: 0.95;
}
.nl-success__product-name {
  font-family: Manrope, sans-serif;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: 0;
  text-align: left;
  color: #fff;
  text-transform: uppercase;
  margin: 4px 0 18px;
}
.nl-success__product-row {
  display: flex;
  align-items: center;
  gap: 22px;
  margin-top: 4px;
}
.nl-success__product-qty {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  height: 36px;
  padding: 0 10px;
  border: 1px solid #fff;
  background: transparent;
  color: #fff;
  font-family: Manrope, sans-serif;
  font-size: 18px;
  font-weight: 300;
  line-height: 1;
}
.nl-success__product-price {
  font-family: Manrope, sans-serif;
  font-size: 22px;
  font-weight: 700;
  line-height: 1;
  color: #fff;
}

/* Summary line */
.nl-success__summary {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 56px;
  align-items: baseline;
  margin-bottom: 28px;
}
.nl-success__summary-row {
  display: flex;
  align-items: baseline;
  gap: 14px;
}
.nl-success__summary-label {
  font-family: FactorA, sans-serif;
  font-size: 30px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0;
  color: #fff;
  -webkit-font-feature-settings: "ss01";
  font-feature-settings: "ss01";
}
.nl-success__summary-value {
  font-size: 22px;
  font-weight: 700;
  color: #fff;
}
.nl-success__summary-value--muted {
  font-size: 16px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.85);
  letter-spacing: 0.5px;
}

/* "Continue shopping" button */
.nl-success__continue {
  display: inline-block;
  padding: 18px 36px;
  background: rgb(238, 116, 99);
  color: #fff;
  font-family: Manrope, sans-serif;
  font-size: 20px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0;
  text-transform: uppercase;
  text-decoration: none;
  margin-bottom: 80px;
  transition: background-color 0.2s;
}
.nl-success__continue:hover {
  background: rgb(220, 95, 77);
  color: #fff;
}

/* Problem form */
.nl-success__problem {
  max-width: 560px;
  margin-top: 40px;
}
.app h2.nl-success__problem-title {
  font-family: FactorA, sans-serif;
  font-size: 30px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0;
  color: #fff;
  margin: 0 0 24px;
  -webkit-font-feature-settings: "ss01";
  font-feature-settings: "ss01";
}
.nl-success__problem-form {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.nl-success__problem-label {
  font-family: Manrope, sans-serif;
  font-size: 20px;
  font-weight: 300;
  line-height: 1;
  letter-spacing: 0;
  color: rgba(255, 255, 255, 0.95);
  margin: 18px 0 8px;
}
.nl-success__problem-label:first-of-type {
  margin-top: 0;
}
/* Specificity bump: .app input/.app button/.app textarea win over single-class selectors,
   so we use input.<class>/button.<class>/textarea.<class> (0,1,1) to match and override. */
input.nl-success__problem-input,
textarea.nl-success__problem-textarea {
  width: 100%;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.85) !important;
  color: #fff !important;
  font-family: Manrope, sans-serif !important;
  font-size: 14px !important;
  font-weight: 300 !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  padding: 18px 22px !important;
  border-radius: 0 !important;
  box-sizing: border-box;
  box-shadow: none !important;
}
input.nl-success__problem-input:focus,
textarea.nl-success__problem-textarea:focus {
  outline: none;
  border-color: #fff !important;
  background: transparent !important;
}
textarea.nl-success__problem-textarea {
  min-height: 160px;
  resize: vertical;
  line-height: 1.4;
}
input.nl-success__problem-input::placeholder,
textarea.nl-success__problem-textarea::placeholder {
  color: rgba(255, 255, 255, 0.55);
  opacity: 1;
}
input.nl-success__problem-input[readonly] {
  cursor: default;
  opacity: 0.85;
}
button.nl-success__problem-submit {
  display: inline-block;
  margin-top: 18px;
  padding: 18px 36px !important;
  background: rgb(238, 116, 99) !important;
  background-color: rgb(238, 116, 99) !important;
  color: #fff !important;
  font-family: Manrope, sans-serif !important;
  font-size: 20px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  text-transform: uppercase !important;
  border: none !important;
  border-radius: 0 !important;
  cursor: pointer;
  transition: background-color 0.2s, opacity 0.2s;
  width: auto;
}
button.nl-success__problem-submit:hover {
  background: rgb(220, 95, 77) !important;
  background-color: rgb(220, 95, 77) !important;
  color: #fff !important;
}
button.nl-success__problem-submit:disabled {
  opacity: 0.6;
  cursor: default;
}
.nl-success__problem-msg {
  margin-top: 12px;
  font-size: 13px;
  line-height: 1.4;
}
.nl-success__problem-msg--ok {
  color: #b6e6b8;
}
.nl-success__problem-msg--err {
  color: #ffb4ad;
}

/* Tablet */
@media (max-width: 1023px) {
  .nl-success__fields,
  .nl-success__products {
    max-width: 100%;
  }
  .nl-success__products {
    grid-template-columns: repeat(2, 1fr);
  }
  .nl-success__illustration {
    width: 32%;
    opacity: 0.45;
  }
}

/* Mobile */
@media (max-width: 767px) {
  .nl-success {
    padding: 32px 0 56px;
  }
  .nl-success__inner {
    padding: 0 18px;
  }
  .nl-success__title {
    font-size: 24px;
    gap: 10px;
  }
  .nl-success__meta {
    flex-wrap: wrap;
    gap: 10px;
  }
  .nl-success__meta-id {
    font-size: 16px;
  }
  .nl-success__steps {
    margin-bottom: 36px;
  }
  .nl-success__step-label {
    font-size: 13px;
    text-align: center;
  }
  .nl-success__details-title {
    font-size: 18px;
    margin-bottom: 16px;
  }
  .nl-success__fields {
    grid-template-columns: 1fr;
    gap: 12px;
    margin-bottom: 36px;
  }
  .nl-success__products {
    grid-template-columns: 1fr;
    gap: 18px;
    margin-bottom: 36px;
  }
  .nl-success__summary {
    flex-direction: column;
    gap: 8px;
  }
  .nl-success__summary-label,
  .nl-success__summary-value {
    font-size: 18px;
  }
  .nl-success__continue {
    width: 100%;
    text-align: center;
    margin-bottom: 56px;
  }
  .nl-success__problem-title {
    font-size: 18px;
  }
  .nl-success__problem-submit {
    width: 100%;
  }
  .nl-success__illustration {
    width: 60%;
    opacity: 0.25;
  }
}
/* ══════════════════════════════════════════════════════════════════════════
   /Order success page
   ══════════════════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════════════════
   Account / login page alerts (.alert-danger / .alert-success)
   Replaces unstyled default Bootstrap alerts with brand-consistent look.
   Same palette as checkout error block (#fdecea bg, #d32f2f text).
   ══════════════════════════════════════════════════════════════════════════ */
.app .entrance-page .alert,
.app .account-page .alert {
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: 53rem;
  margin: 24px auto 0;
  padding: 14px 20px;
  border: 1px solid transparent;
  border-radius: 4px;
  font-family: Manrope, sans-serif;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: 0;
  box-sizing: border-box;
}

.app .entrance-page .alert-danger,
.app .account-page .alert-danger {
  background: #fdecea;
  color: #d32f2f;
  border-color: #f5b7b1;
}
.app .entrance-page .alert-danger i.fa,
.app .account-page .alert-danger i.fa {
  color: #d32f2f;
  font-size: 16px;
  flex-shrink: 0;
}

.app .entrance-page .alert-success,
.app .account-page .alert-success {
  background: #e7f4ea;
  color: #2e7d32;
  border-color: #b9d9bc;
}
.app .entrance-page .alert-success i.fa,
.app .account-page .alert-success i.fa {
  color: #2e7d32;
  font-size: 16px;
  flex-shrink: 0;
}

/* Mobile: full-width with edge padding */
@media (max-width: 767px) {
  .app .entrance-page .alert,
  .app .account-page .alert {
    margin: 16px;
    max-width: none;
  }
}

/* === Gift voucher purchase page (works in both guest contacts-page layout and LC account-page layout) === */
.voucher-form {
  max-width: 640px;
  margin: 32px auto 0;
}
.voucher-form__heading {
  margin: 28px 0 14px;
  color: #FFF8B4;
}
.voucher-form__heading:first-of-type {
  margin-top: 0;
}
.voucher-form .form__hint {
  font-size: 12px;
  color: #888;
  font-weight: 400;
}

.voucher-themes {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 14px;
  margin: 8px 0 22px;
}
.voucher-theme {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  cursor: pointer;
  border: 2px solid #EAE7DC;
  border-radius: 10px;
  padding: 10px;
  background: #fff;
  transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease, transform .15s ease;
  position: relative;
}
.voucher-theme:hover {
  border-color: #5b97a8;
}
.voucher-theme._selected,
.voucher-theme:has(input[type="radio"]:checked) {
  border-color: #EE7463;
  background: #FFF8B4;
  box-shadow: 0 0 0 3px rgba(238,116,99,0.25);
  transform: translateY(-1px);
}
.voucher-theme input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.voucher-theme__check {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid #EAE7DC;
  transition: background-color .15s ease, border-color .15s ease;
  z-index: 1;
}
.voucher-theme._selected .voucher-theme__check,
.voucher-theme:has(input[type="radio"]:checked) .voucher-theme__check {
  background: #EE7463;
  border-color: #EE7463;
  background-image: linear-gradient(45deg, transparent 38%, #fff 38%, #fff 44%, transparent 44%),
                    linear-gradient(-45deg, transparent 50%, #fff 50%, #fff 56%, transparent 56%);
  background-size: 60% 2px, 60% 2px;
  background-position: 4px 11px, 9px 13px;
  background-repeat: no-repeat;
}
.voucher-theme__img {
  display: block;
  margin: 0 0 10px;
  border-radius: 6px;
  overflow: hidden;
  background: #F3F3F3;
  aspect-ratio: 4/3;
  position: relative;
}
.voucher-theme__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.voucher-theme__img._placeholder {
  background:
    radial-gradient(circle at 50% 42%, rgba(255,255,255,0.55) 0 18%, transparent 19%),
    linear-gradient(135deg, #EAE7DC 0%, #F8F4E8 100%);
}
.voucher-theme__img._placeholder::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23EE7463' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 12 20 22 4 22 4 12'/><rect x='2' y='7' width='20' height='5'/><line x1='12' y1='22' x2='12' y2='7'/><path d='M12 7H7.5a2.5 2.5 0 0 1 0-5C11 2 12 7 12 7z'/><path d='M12 7h4.5a2.5 2.5 0 0 0 0-5C13 2 12 7 12 7z'/></svg>");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 38%;
  opacity: 0.85;
}
.voucher-theme__name {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 13px;
  font-weight: 700;
  color: #044553;
  text-align: center;
  letter-spacing: 0.3px;
}
.voucher-theme._selected .voucher-theme__name {
  color: #044553;
}

.voucher-form .nl-ds-newsletter {
  margin: 18px 0 22px;
}
.voucher-form .btn._alt._full {
  margin-top: 8px;
}

.voucher-form__note {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 0 0 28px;
  padding: 14px 18px;
  background: #EAE7DC;
  border-left: 3px solid #EE7463;
  border-radius: 4px;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  color: #1D1D1D;
}
.voucher-form__note .icon {
  flex-shrink: 0;
  font-size: 18px;
  color: #EE7463;
  margin-top: 1px;
}

/* Voucher-only cart: no left "Delivery information" column, so center the summary aside. */
.nl-section--delivery-hidden .nl-checkout-layout {
  grid-template-columns: minmax(0, 480px);
  justify-content: center;
}
.nl-section--delivery-hidden .nl-checkout-aside {
  position: static;
}

/* === Contacts page — form-only layout === */
#information-contact .contact-form {
  max-width: 720px;
  margin: 24px 0 0;
}
#information-contact .contact-form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
@media (max-width: 600px) {
  #information-contact .contact-form__row {
    grid-template-columns: 1fr;
  }
}

/* === FAQ accordion (contacts page) === */
.nl-faq-section .section__title { text-align: center; }
.nl-faq__heading {
  margin: 0 auto 32px;
  font-family: 'Factor A', Manrope, Arial, Helvetica, sans-serif;
  font-weight: 700;
  font-size: 60px;
  line-height: 100%;
  letter-spacing: 0;
  color: #191919;
}
.nl-faq {
  margin: 0 auto;
  border-top: 1px solid rgba(4, 69, 83, 0.18);
}
.nl-faq__item {
  border-bottom: 1px solid rgba(4, 69, 83, 0.18);
}
.nl-faq__item > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 22px 8px;
  font-family: Manrope, Arial, Helvetica, sans-serif;
  font-weight: 700;
  font-size: 30px;
  line-height: 100%;
  letter-spacing: 0;
  color: #191919;
  user-select: none;
}
.nl-faq__item > summary::-webkit-details-marker { display: none; }
.nl-faq__q-text { flex: 1; }
.nl-faq__chevron {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #044553;
  transition: transform .2s ease;
}
.nl-faq__item[open] .nl-faq__chevron { transform: rotate(180deg); }
.nl-faq__a {
  padding: 0 8px 22px;
  font-family: Manrope, Arial, Helvetica, sans-serif;
  font-weight: 300;
  font-size: 20px;
  line-height: 140%;
  letter-spacing: 0;
  color: #191919;
}
.nl-faq__a p:first-child { margin-top: 0; }
.nl-faq__a p:last-child  { margin-bottom: 0; }
@media (max-width: 600px) {
  .nl-faq__item > summary { font-size: 22px; padding: 18px 4px; }
  .nl-faq__a { padding: 0 4px 18px; font-size: 16px; }
}

/* === Hero banner image (slideshow module) ===
   Keep the image's natural aspect ratio (no stretch / no crop). Empty space inside the cell
   is filled with the same dark teal as the left panel — looks intentional, not "white border". */
.app .banner-slider .banner__img,
.banner-slider .banner__img {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  min-height: 100%;
  align-self: stretch;
  justify-self: stretch;
  overflow: hidden;
  background: var(--color1);
}
.app .banner-slider .banner__img img,
.banner-slider .banner__img img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  object-position: right center;
}

/* === Newsletter checkbox label — make sure long text wraps and stays visible === */
/* Stock .nl-ds-newsletter__label has `height: 20px` + `display: inline-flex`, which clips
   labels longer than one line. Force auto height + plain inline-block here. */
.app .nl-ds-newsletter .nl-ds-newsletter__label,
.nl-ds-newsletter .nl-ds-newsletter__label {
  display: inline-block;
  height: auto;
  line-height: 1.35;
  white-space: normal;
}
/* Ensure label color stays readable regardless of context. */
.app .nl-ds-newsletter._on-dark .nl-ds-newsletter__label {
  color: #fff;
}

/* === Newsletter auto-subscribe notice (register page + simplecheckout cart) — soft opt-in disclosure === */
.form__newsletter-notice,
.nl-checkout-newsletter-notice {
  margin: 8px 0 16px;
  font-family: Manrope, Arial, Helvetica, sans-serif;
  font-size: 12px;
  line-height: 1.5;
  font-weight: 400;
  letter-spacing: 0;
}
/* Register page — light text on dark teal page bg */
.form__newsletter-notice {
  color: rgba(243, 243, 243, 0.7);
}
/* Cart summary card — bg is light cream, use muted dark text */
.nl-checkout-newsletter-notice {
  color: #6b6b6b;
}

/* === Reward points block (simplecheckout summary panel) === */
.nl-ds-reward { margin: 12px 0; }
.nl-ds-reward__hint {
  font-family: Manrope, Arial, Helvetica, sans-serif;
  font-size: 12px;
  color: #aaa;
  margin: 0 0 8px;
}
.nl-ds-reward__applied {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
  background: rgba(238, 116, 99, 0.12);
  border-radius: 6px;
  font-family: Manrope, Arial, Helvetica, sans-serif;
  font-weight: 600;
  font-size: 14px;
  color: #044553;
}
.nl-reward-remove {
  background: transparent;
  border: 0;
  color: #EE7463;
  font-family: Manrope, Arial, Helvetica, sans-serif;
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
  text-decoration: underline;
}
.nl-reward-remove:hover { opacity: 0.8; }
.nl-ds-reward-error {
  font-family: Manrope, Arial, Helvetica, sans-serif;
  font-size: 12px;
  color: #d32f2f;
  margin-top: 6px;
}

/* === Gift voucher (collapsible block under promo code) === */
.nl-ds-voucher { margin: 8px 0 12px; }
.nl-ds-voucher__toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: 0;
  padding: 4px 0;
  font-family: Manrope, Arial, Helvetica, sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: #EE7463;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.nl-ds-voucher__toggle:hover { opacity: 0.85; }
.nl-ds-voucher__chevron {
  transition: transform .15s ease;
  flex-shrink: 0;
}
.nl-ds-voucher__toggle._open .nl-ds-voucher__chevron {
  transform: rotate(180deg);
}
.nl-ds-voucher__panel {
  margin-top: 10px;
  animation: nl-voucher-slide .15s ease;
}
@keyframes nl-voucher-slide {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.nl-ds-voucher__applied {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
  background: rgba(238, 116, 99, 0.12);
  border-radius: 6px;
  font-family: Manrope, Arial, Helvetica, sans-serif;
  font-weight: 600;
  font-size: 14px;
  color: #044553;
}
.nl-voucher-remove {
  background: transparent;
  border: 0;
  color: #EE7463;
  font-family: Manrope, Arial, Helvetica, sans-serif;
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
  text-decoration: underline;
}
.nl-voucher-remove:hover { opacity: 0.8; }

/* === LC breadcrumbs (rendered above tabs/content inside account__main) === */
.nl-breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 8px;
  list-style: none;
  margin: 0 0 16px;
  padding: 0;
  font-family: Manrope, Arial, Helvetica, sans-serif;
  font-size: 13px;
  font-weight: 400;
  color: rgba(243, 243, 243, 0.75);
}
.nl-breadcrumbs li {
  display: flex;
  align-items: center;
  gap: 8px;
}
.nl-breadcrumbs li:not(:first-child)::before {
  content: '/';
  color: rgba(243, 243, 243, 0.4);
}
.nl-breadcrumbs a {
  color: rgba(243, 243, 243, 0.75);
  text-decoration: none;
}
.nl-breadcrumbs a:hover {
  color: #FFF8B4;
}
.nl-breadcrumbs li:last-child a {
  color: #FFF8B4;
  pointer-events: none;
  cursor: default;
}

/* === Order history (account/order) — tabs + table-as-cards === */
.nl-orders { padding-top: 24px; padding-bottom: 24px; }

.nl-orders__tabs {
  display: flex;
  gap: 32px;
  padding: 0 0 16px;
  margin: 0 0 12px;
}
.nl-orders__tab {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: Manrope, Arial, Helvetica, sans-serif;
  font-weight: 600;
  font-size: 20px;
  line-height: 100%;
  letter-spacing: 0;
  color: #F3F3F3;
  text-decoration: none;
  padding: 4px 0;
  transition: color .15s ease;
}
.nl-orders__tab:hover { color: #FFF8B4; }
.nl-orders__tab._active { color: #FFF8B4; }
.nl-orders__tab-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}

/* Each row is its own beige strip spanning the full account__main width — no rounded corners, dark gaps between rows.
   Negative margins offset the parent .account__main padding so the strip touches both edges. */
.nl-orders__row {
  display: block;
  background: #EAE7DC;
  color: #1D1D1D;
  text-decoration: none;
  padding: 18px 5rem;
  margin: 0 calc(-1 * var(--offset)) 6px -5rem;
  border-radius: 0;
  transition: background .15s ease;
}
.nl-orders__row:hover {
  background: #E2DFD1;
  color: #1D1D1D;
}
@media (max-width: 1200px) {
  .nl-orders__row {
    /* Parent padding switches to var(--offset) on both sides at this breakpoint. */
    padding: 18px var(--offset);
    margin-left:  calc(-1 * var(--offset));
    margin-right: calc(-1 * var(--offset));
  }
}

/* Header strip + value strip share the same 6-column grid so columns align. */
.nl-orders__head,
.nl-orders__body {
  display: grid;
  grid-template-columns: 0.8fr 1.5fr 0.6fr 1fr 0.8fr 1fr;
  align-items: center;
  gap: 16px;
}
.nl-orders__head {
  padding-bottom: 12px;
  margin-bottom: 12px;
  border-bottom: 1px solid rgba(4, 69, 83, 0.18);
}
.nl-orders__th {
  font-family: Manrope, Arial, Helvetica, sans-serif;
  font-weight: 600;
  font-size: 16px;
  line-height: 100%;
  letter-spacing: 0;
  color: #044553;
}
.nl-orders__val {
  font-family: Manrope, Arial, Helvetica, sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 140%;
  letter-spacing: 0;
  color: #1D1D1D;
}
.nl-orders__th._center,
.nl-orders__val._center { text-align: center; }

/* Mobile: collapse each row into a single-column list of "label / value" pairs.
   Use the value's data-label as a pseudo-header above each line. */
@media (max-width: 900px) {
  .nl-orders__head { display: none; }
  .nl-orders__body {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .nl-orders__val { text-align: left !important; }
  .nl-orders__val::before {
    content: attr(data-label);
    display: block;
    font-family: Manrope, Arial, Helvetica, sans-serif;
    font-weight: 600;
    font-size: 14px;
    line-height: 100%;
    color: #044553;
    margin-bottom: 4px;
  }
}

.nl-orders__pagination {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin: 24px 0 0;
  color: #F3F3F3;
}
.nl-orders__pagination .pagination > li > a,
.nl-orders__pagination .pagination > li > span {
  background: transparent;
  border-color: rgba(255,255,255,0.25);
  color: #F3F3F3;
}
.nl-orders__pagination .pagination > .active > a,
.nl-orders__pagination .pagination > .active > span {
  background: #EE7463;
  border-color: #EE7463;
}
.nl-orders__results { font-size: 13px; opacity: 0.8; }

/* Empty state */
.nl-orders__empty {
  text-align: center;
  padding: 60px 24px;
  background: #EAE7DC;
  border-radius: 6px;
  color: #1D1D1D;
}
.nl-orders__empty-text {
  font-family: Manrope, Arial, Helvetica, sans-serif;
  font-weight: 400;
  font-size: 18px;
  margin: 0 0 24px;
  color: #044553;
}

/* Bottom feedback callout */
.nl-orders__feedback {
  text-align: center;
  margin: 32px 0 0;
  padding: 24px 16px 0;
  border-top: 1px solid rgba(255,248,180,0.18);
  color: #F3F3F3;
}
.nl-orders__feedback-text {
  font-family: Manrope, Arial, Helvetica, sans-serif;
  font-weight: 400;
  font-size: 16px;
  margin: 0 0 8px;
}
.app .nl-orders__feedback-link,
a.nl-orders__feedback-link {
  font-family: Manrope, Arial, Helvetica, sans-serif;
  font-weight: 600;
  font-size: 20px;
  line-height: 100%;
  letter-spacing: 0;
  text-align: center;
  color: #FFF8B4;
  text-decoration: underline;
  text-decoration-style: solid;
  text-decoration-color: #FFF8B4;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}
.app .nl-orders__feedback-link:hover,
a.nl-orders__feedback-link:hover {
  color: #FFF8B4;
  text-decoration: underline;
  opacity: 0.85;
}

/* === Order detail (account/order/info) === */
.nl-order-info { padding-top: 24px; }

.nl-card {
  background: #EAE7DC;
  color: #1D1D1D;
  margin: 0 calc(-1 * var(--offset)) 6px -5rem;
  padding: 18px 5rem;
  border: 1px solid rgba(4, 69, 83, 0.12);
  border-radius: 0;
}
.nl-card--table { padding: 0; overflow-x: auto; }
@media (max-width: 1200px) {
  .nl-card {
    margin-left:  calc(-1 * var(--offset));
    margin-right: calc(-1 * var(--offset));
    padding: 18px var(--offset);
  }
  .nl-card--table { padding: 0; }
}

.nl-card { position: relative; }

.nl-card__title {
  font-family: Manrope, Arial, Helvetica, sans-serif;
  font-weight: 700;
  font-size: 16px;
  line-height: 100%;
  letter-spacing: 0;
  color: #1D1D1D;
  margin: 0 0 14px;
  padding: 0 0 14px;
  position: relative;
}
/* Bottom divider extends to the card's outer edges via an absolute pseudo-element. */
.nl-card__title::after {
  content: '';
  position: absolute;
  left: -5rem;
  right: -5rem;
  bottom: 0;
  height: 1px;
  background: rgba(4, 69, 83, 0.18);
}
@media (max-width: 1200px) {
  .nl-card__title::after {
    left:  calc(-1 * var(--offset));
    right: calc(-1 * var(--offset));
  }
}
.nl-card__body { padding-top: 4px; }

/* Field list (Order summary / History) — 2-column grid on desktop, 1-column on mobile.
   Vertical divider down the centre, extending full card height via an absolute pseudo-element. */
.nl-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 32px;
  margin: 0;
  padding: 0;
  position: relative;
}
.nl-fields::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 1px;
  background: rgba(4, 69, 83, 0.18);
}
@media (max-width: 760px) {
  .nl-fields::before { display: none; }
}
.nl-field { display: flex; gap: 8px; align-items: baseline; margin: 0; padding: 0; }
.nl-field__label {
  font-family: Manrope, Arial, Helvetica, sans-serif;
  font-weight: 600;
  font-size: 16px;
  line-height: 100%;
  letter-spacing: 0;
  color: #1D1D1D;
  margin: 0 !important;
  padding: 0;
}
.nl-field__value {
  font-family: Manrope, Arial, Helvetica, sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 140%;
  letter-spacing: 0;
  color: #1D1D1D;
  margin: 0 !important;
  padding: 0;
  margin-inline-start: 0 !important;
}
@media (max-width: 760px) {
  .nl-fields { grid-template-columns: 1fr; }
}

/* Addresses — full-width title strip with bottom border, then a 2-column body with vertical divider. */
.nl-addresses { position: relative; }
.nl-addresses__head {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 48px;
  margin: 0;
  padding: 0 0 14px;
  position: relative;
}
.nl-addresses__head::after {
  content: '';
  position: absolute;
  left: -5rem;
  right: -5rem;
  bottom: 0;
  height: 1px;
  background: rgba(4, 69, 83, 0.18);
}
@media (max-width: 1200px) {
  .nl-addresses__head::after {
    left:  calc(-1 * var(--offset));
    right: calc(-1 * var(--offset));
  }
}
.nl-addresses__body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 48px;
  margin: 0;
  padding: 14px 0 0;
  position: relative;
}
.nl-addresses__body::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 1px;
  background: rgba(4, 69, 83, 0.18);
}
/* Inline title variant — used inside the address row, no own bottom border (parent strip has it). */
.nl-card__title--inline {
  margin: 0;
  padding: 0;
  border: 0;
}
.nl-card__title--inline::after { display: none; }
@media (max-width: 760px) {
  .nl-addresses__head,
  .nl-addresses__body { grid-template-columns: 1fr; }
  .nl-addresses__body::before { display: none; }
}
.nl-address__body {
  font-family: Manrope, Arial, Helvetica, sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 140%;
  color: #1D1D1D;
}
@media (max-width: 760px) {
  .nl-card__addresses { grid-template-columns: 1fr; }
}

/* Products table */
.nl-products-table {
  width: 100%;
  border-collapse: collapse;
  background: #EAE7DC;
}
.nl-products-table th,
.nl-products-table td {
  padding: 14px 18px;
  text-align: left;
  vertical-align: middle;
  border: 1px solid rgba(4, 69, 83, 0.18);
  font-family: Manrope, Arial, Helvetica, sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 140%;
  letter-spacing: 0;
  color: #1D1D1D;
}
.nl-products-table th {
  font-weight: 700;
  font-size: 16px;
  line-height: 100%;
  background: #EAE7DC;
  white-space: nowrap;
}
.nl-products-table td._center,
.nl-products-table th._center { text-align: center; }
.nl-products-table td._right,
.nl-products-table th._right  { text-align: right; }
.nl-products-table__name { font-weight: 600; }
.nl-products-table__option {
  font-size: 14px;
  font-weight: 400;
  color: #4a4a4a;
}
.nl-products-table__author {
  margin-top: 4px;
  font-size: 14px;
  font-weight: 400;
  color: #4a4a4a;
}
.nl-products-table__cover {
  display: inline-block;
  max-width: 80px;
  height: auto;
  border: 0;
}
.nl-products-table__total-label { font-weight: 600; }
.nl-products-table__total-value { font-weight: 600; }
.nl-products-table__total-label._grand,
.nl-products-table__total-value._grand { font-weight: 700; }

/* Mobile fallback for the products table — keep horizontal scroll for now since the design uses a wide layout. */
@media (max-width: 760px) {
  .nl-card--table { padding: 0; }
  .nl-products-table th,
  .nl-products-table td { padding: 10px 12px; font-size: 14px; }
  .nl-products-table__cover { max-width: 60px; }
}

/* History block: each entry has left (Date + Status) and right (Comment) columns separated by a vertical divider. */
.nl-history {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 32px;
  padding: 14px 0;
  margin: 0;
  position: relative;
}
.nl-history::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 1px;
  background: rgba(4, 69, 83, 0.18);
}
.nl-history + .nl-history::after {
  content: '';
  position: absolute;
  left: -5rem;
  right: -5rem;
  top: 0;
  height: 1px;
  background: rgba(4, 69, 83, 0.18);
}
@media (max-width: 1200px) {
  .nl-history + .nl-history::after {
    left:  calc(-1 * var(--offset));
    right: calc(-1 * var(--offset));
  }
}
.nl-history:first-of-type { padding-top: 0; }
.nl-history__left {
  display: grid;
  gap: 12px;
}
.nl-history__right {
  display: block;
}
@media (max-width: 760px) {
  .nl-history {
    grid-template-columns: 1fr;
  }
  .nl-history::before { display: none; }
}

/* LC context: voucher page title block above the form */
#account-voucher-page .voucher-page__title {
  margin: 0 0 20px;
}
#account-voucher-page .voucher-page__title .text {
  margin-top: 8px;
  color: #3a3a3a;
}

/* LC context: success block on the right side panel */
#account-voucher-success-page .voucher-success {
  max-width: 520px;
  margin: 24px auto 0;
  text-align: center;
}
#account-voucher-success-page .voucher-success .text {
  margin: 12px 0 22px;
}

/* reCAPTCHA wrapper inside our forms */
.nl-captcha {
  margin-top: 16px;
}
.nl-captcha .g-recaptcha {
  display: inline-block;
}
.nl-captcha__error {
  margin-top: 10px;
  color: #EE7463;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
}

/* Cookie consent banner — vanilla-cookieconsent v3, brand colors. */
#cc-main {
  --cc-font-family: Manrope, Arial, Helvetica, sans-serif;
  --cc-bg: #F3F3F3;
  --cc-primary-color: #1D1D1D;
  --cc-secondary-color: #5b6b6e;
  --cc-btn-primary-bg: #EE7463;
  --cc-btn-primary-color: #FFF8B4;
  --cc-btn-primary-border-color: #EE7463;
  --cc-btn-primary-hover-bg: #044553;
  --cc-btn-primary-hover-color: #FFF8B4;
  --cc-btn-primary-hover-border-color: #044553;
  --cc-btn-secondary-bg: transparent;
  --cc-btn-secondary-color: #044553;
  --cc-btn-secondary-border-color: #044553;
  --cc-btn-secondary-hover-bg: #044553;
  --cc-btn-secondary-hover-color: #FFF8B4;
  --cc-btn-secondary-hover-border-color: #044553;
  --cc-toggle-on-bg: #EE7463;
  --cc-toggle-off-bg: #b9b3a4;
  --cc-toggle-readonly-bg: #cfcfcf;
  --cc-toggle-on-knob-bg: #FFF8B4;
  --cc-toggle-off-knob-bg: #fff;
  --cc-section-border: #DDD;
  --cc-cookie-category-block-bg: #EAE7DC;
  --cc-cookie-category-block-border: transparent;
  --cc-cookie-category-block-hover-bg: #F3F3F3;
  --cc-link-color: #EE7463;
  --cc-overlay-bg: rgba(4,69,83,0.45);
  --cc-modal-border-radius: 12px;
  --cc-btn-border-radius: 8px;
}
#cc-main .cm__title,
#cc-main .pm__title { font-family: Georgia, 'Times New Roman', serif; }

/* Guest variant of the reward block — shows login/register hint instead of the input. */
.nl-ds-reward--guest .nl-ds-reward__guest-hint {
  font-size: 14px;
  line-height: 1.45;
  color: #1D1D1D;
}
.nl-ds-reward--guest .nl-ds-reward__guest-hint a {
  color: #EE7463;
  text-decoration: underline;
  font-weight: 600;
}
.nl-ds-reward--guest .nl-ds-reward__guest-sep {
  margin: 0 6px;
  color: #888;
}

/* Inline success banner shown after the contact form is submitted. */
.nl-contact-success {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 0 0 24px;
  padding: 14px 18px;
  background: #FFF8B4;
  border-left: 3px solid #EE7463;
  border-radius: 8px;
  color: #044553;
  font-size: 15px;
  line-height: 1.45;
}
.nl-contact-success__icon {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #EE7463;
  color: #FFF8B4;
  border-radius: 50%;
}
.nl-contact-success__text { flex: 1 1 auto; }
.nl-contact-success__text p { margin: 0; }

/* === blog/latest — columns of category blocks, each with up to 3 cards === */
.nl-latest-block {
  margin: 0 0 60px;
}
.nl-latest-block:last-child {
  margin-bottom: 0;
}
.nl-latest-block__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 24px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(0,0,0,0.12);
}
.nl-latest-block__title {
  color: inherit;
  text-decoration: none;
}
.nl-latest-block__title:hover {
  color: #EE7463;
}
.nl-latest-block__all {
  flex-shrink: 0;
}
.nl-latest-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
@media (max-width: 1023px) {
  .nl-latest-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
}
@media (max-width: 600px) {
  .nl-latest-grid {
    grid-template-columns: 1fr;
    gap: 18px;
  }
}
.nl-latest-card {
  position: relative;
  background: #fff;
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform .15s ease, box-shadow .15s ease;
}
.nl-latest-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0,0,0,0.08);
}
.nl-latest-card__img {
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: #EAE7DC;
}
.nl-latest-card__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.nl-latest-card__body {
  padding: 16px 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1 1 auto;
}
.nl-latest-card__meta {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  font-family: Manrope, Arial, Helvetica, sans-serif;
  font-size: 12px;
  color: #6e6e6e;
}
.nl-latest-card__meta span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.nl-latest-card__meta .icon {
  font-size: 13px;
}
.nl-latest-card__title {
  font-family: Manrope, Arial, Helvetica, sans-serif;
  font-weight: 600;
  font-size: 17px;
  line-height: 1.3;
  margin: 0;
  color: #044553;
}
.nl-latest-card__desc {
  font-family: Manrope, Arial, Helvetica, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  color: #444;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* === /blog/latest === */

/* === Top Books grid mobile pairing fix === */
/* The template emits cells in desktop-3-column order: card1, img1, card2, img3, card3, img2.
   Stock mobile CSS uses grid-auto-flow:dense + nth-of-type(3){grid-column:2} which produces
   [card1][img1] / [img3][card2] / [card3][img2] — cards end up next to the WRONG images
   (card2 "Summer" sits beside img3 which belongs to card3 "Teens", and vice versa).
   Reorder via CSS `order` so each card is immediately followed by its own image:
   visual sequence becomes 1, 2, 3, 6, 5, 4 → card1/img1, card2/img2, card3/img3. */
@media (max-width: 767px) {
  .app .best-list { grid-auto-flow: row; }
  .app .best-list__i:nth-of-type(3) { grid-column: auto; }
  .app .best-list__i:nth-of-type(1) { order: 1; }
  .app .best-list__i:nth-of-type(2) { order: 2; }
  .app .best-list__i:nth-of-type(6) { order: 3; }  /* image-2 → row 2, left  */
  .app .best-list__i:nth-of-type(3) { order: 4; }  /* card-2  → row 2, right */
  .app .best-list__i:nth-of-type(5) { order: 5; }
  .app .best-list__i:nth-of-type(4) { order: 6; }
  /* All cards now sit to the LEFT of their image — unify internal layout to match _right's
     mobile look (title top, arrow below, both flush-left, arrow →). Stock _down centers
     itself vertically and pins a 20px-wide arrow to the right edge; stock _left puts the
     arrow ABOVE the title via order:-1. Both inconsistent with _right — override here. */
  .app .best-list__row._down,
  .app .best-list__row._left {
    display: grid;
    align-self: start;
    align-content: start;
    justify-items: start;
    grid-gap: 2rem;
  }
  .app .best-list__row._down i.icon,
  .app .best-list__row._left i.icon {
    order: 1;
    transform-origin: initial;
    justify-self: start;
    align-self: auto;
    width: auto;
  }
  /* card-3 (_left) sits LEFT of its image → arrow points right. */
  .app .best-list__row._left i.icon {
    transform: none;
    -webkit-transform: none;
  }
  /* card-2 (_down) sits RIGHT of its image (we swapped row 2) → arrow points left. */
  .app .best-list__row._down i.icon {
    transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
  }
}

/* === Product card mobile / tablet fix === */
/* Stock theme hard-codes width: 35.5rem (~568px) on the gallery image, which overflows the
   narrow image column at all sub-desktop widths. Constrain to the grid cell. Also strip the
   heavy 10px/10px/25px shadow that stock applies at ≤1023px — once the image fits the cell,
   that shadow reads as a dark border around the cover (esp. on products whose image canvas
   matches the page background). Same shadow is also applied to listing tiles at the same
   breakpoint (.app .product img) — drop it there too for consistency. */
@media (max-width: 1023px) {
  .app .card .gallery-top img,
  .app .product img {
    box-shadow: none;
  }
  .app .card .gallery-top img {
    width: 100%;
    max-width: 35.5rem;
    height: auto;
  }
}