/**
 * Andre Anri — Button Library CSS
 * Drupal Compatible
 * Version: 1.0.0
 */

:root {
  --aa-bg: #000;
  --aa-blue: #2f86ff;
  --aa-blue-2: #69b6ff;
  --aa-text: #f7f7f7;
  --aa-muted: rgba(215, 225, 245, .55);
  --aa-card: rgba(5, 12, 24, .92);
}

/* ========== ACTION BUTTONS ========== */

.aa-button {
  position: relative;
  width: min(100%, 320px);
  min-height: 74px;
  border: 2px solid rgba(86, 160, 255, .95);
  border-radius: 999px;
  padding: 0 26px;
  display: grid;
  grid-template-columns: 54px 1fr 38px;
  align-items: center;
  gap: 12px;
  color: #fff;
  text-decoration: none;
  background:
    linear-gradient(160deg, rgba(255,255,255,.16) 0%, rgba(255,255,255,.05) 34%, rgba(255,255,255,0) 36%),
    linear-gradient(180deg, rgba(30, 105, 210, .38), rgba(3, 7, 15, .96) 58%),
    var(--aa-card);
  box-shadow:
    0 0 0 1px rgba(127,188,255,.18) inset,
    0 0 16px rgba(47,134,255,.76),
    0 0 38px rgba(47,134,255,.28);
  cursor: pointer;
  overflow: visible;
  -webkit-tap-highlight-color: transparent;
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  font-size: 0;
}

.aa-button::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, transparent, rgba(105,182,255,.26), transparent);
  transform: translateX(-120%);
  transition: transform .65s ease;
}

/* Boosted specificity + explicit inset reset: some Drupal theme markup (e.g.
   ".details" trigger) ships its own ::after icon glyph on the same element.
   Without this, properties from both rules mix on the shared pseudo-element. */
.aa-button.aa-button.aa-button.aa-button::after {
  content: "";
  position: absolute;
  inset: auto auto -8px 50%;
  top: auto;
  right: auto;
  width: 100%;
  height: 3px;
  background: var(--aa-blue);
  transform: translateX(-50%) scaleX(0);
  transform-origin: center;
  transition: transform .3s cubic-bezier(0.34, 1.56, 0.64, 1);
  box-shadow: 0 0 12px rgba(47, 134, 255, 0.8);
  border-radius: 2px;
  font-family: inherit;
  color: transparent;
}

.aa-button.aa-button.aa-button.aa-button:hover::after,
.aa-button.aa-button.aa-button.aa-button:focus-visible::after {
  transform: translateX(-50%) scaleX(1);
}

.aa-button:hover,
.aa-button:focus-visible {
  transform: translateY(-2px) scale(1.015);
  border-color: #78bdff;
  box-shadow:
    0 0 0 1px rgba(150,205,255,.34) inset,
    0 0 22px rgba(47,134,255,.94),
    0 0 58px rgba(47,134,255,.38);
  outline: none;
}

.aa-button:hover::before,
.aa-button:focus-visible::before {
  transform: translateX(120%);
}

.aa-button:active {
  transform: translateY(1px) scale(.985);
}

/* ========== ICON ANIMATIONS ========== */

.aa-icon {
  position: relative;
  z-index: 1;
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  color: var(--aa-blue-2);
  filter: drop-shadow(0 0 8px rgba(47,134,255,.8));
}

.aa-icon svg {
  animation: float-icon 3s ease-in-out infinite;
}

.aa-button:hover .aa-icon svg {
  animation: none;
}

@keyframes float-icon {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-8px); }
}

/* ========== WIDE VARIANT (e.g. "Детали") ========== */

/* Theme fixes ".control" to 50% width (leftover from the old small pill
   button), which pins our full-width button to the left half instead of
   centering it. Widen it back out only when it holds our enhanced button —
   its only sibling is the (independently full-width) description panel. */
.control.control.control:has(> .aa-button--wide) {
  width: 100%;
}

.aa-button--wide {
  width: min(100%, 390px);
  margin: 0 auto;
  min-height: 82px;
  grid-template-columns: 58px 1fr 52px;
  border-radius: 38px;
  background:
    radial-gradient(circle at 8% 50%, rgba(47,134,255,.22), transparent 28%),
    radial-gradient(circle at 92% 50%, rgba(47,134,255,.20), transparent 24%),
    linear-gradient(160deg, rgba(255,255,255,.12) 0%, rgba(255,255,255,.04) 34%, rgba(255,255,255,0) 36%),
    linear-gradient(180deg, rgba(30, 105, 210, .34), rgba(3, 7, 15, .96) 62%);
}

.aa-button--wide .aa-button-title {
  font-size: clamp(22px, 6vw, 30px);
}

/* ========== TITLE ========== */

.aa-button-title {
  position: relative;
  z-index: 1;
  font-size: 32px;
  font-weight: 800;
  line-height: 1.1;
  text-align: center;
  letter-spacing: .01em;
  text-shadow: 0 2px 12px rgba(0,0,0,.7);
}

/* ========== ARROWS & CHEVRONS ========== */

.aa-arrow,
.aa-chevron {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  color: var(--aa-blue-2);
  filter: drop-shadow(0 0 8px rgba(47,134,255,.85));
  transition: transform .22s ease;
}

.aa-arrow svg,
.aa-chevron svg {
  animation: pulse-arrow 2s ease-in-out infinite;
}

.aa-button:hover .aa-arrow svg,
.aa-button:hover .aa-chevron svg {
  animation: none;
}

@keyframes pulse-arrow {
  0%, 100% { transform: translateX(0px) translateY(0px); opacity: 1; }
  50% { transform: translateX(3px) translateY(0px); opacity: 0.8; }
}

.aa-button:hover .aa-arrow,
.aa-button:focus-visible .aa-arrow {
  transform: translateX(5px);
}

.aa-button:hover .aa-chevron,
.aa-button:focus-visible .aa-chevron {
  transform: translateY(4px);
}

.aa-subtitle {
  margin: 0;
  color: var(--aa-muted);
  font-size: 13px;
  line-height: 1.35;
  text-align: center;
  letter-spacing: .01em;
  max-width: 320px;
}

/* ========== NAVIGATION BUTTONS ========== */

.aa-nav-btn {
  padding: 10px 20px;
  border: 2px solid rgba(47, 134, 255, 0.3);
  background: transparent;
  color: var(--aa-muted);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  border-radius: 999px;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.aa-nav-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(105, 182, 255, 0.3), transparent);
  transform: translateX(-120%);
  transition: transform 0.6s ease;
}

.aa-nav-btn:hover::before {
  transform: translateX(120%);
}

.aa-nav-btn:hover,
.aa-nav-btn.active {
  border-color: var(--aa-blue);
  color: var(--aa-blue-2);
  background: rgba(47, 134, 255, 0.1);
  transform: translateY(-2px);
  box-shadow: 0 0 20px rgba(47, 134, 255, 0.3);
}

/* Larger variant (currently: print-type buttons). */
.aa-nav-btn--lg {
  padding: 13px 26px;
  font-size: 16px;
}

/* ========== SIZE PICKER (theme's own .size-buttons__button, restyled to match) ==========
   Theme already renders these as real <button> elements via its own JS
   (size-picker-clone.js) — no JS needed here, only CSS. Theme's own rule for
   this class is a single class selector too, so we repeat ours to stay
   strictly more specific (its stylesheet loads after ours). */

.size-buttons__button.size-buttons__button {
  padding: 10px 20px;
  border: 2px solid rgba(47, 134, 255, 0.3);
  background: transparent;
  color: var(--aa-muted);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  border-radius: 999px;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.size-buttons__button.size-buttons__button::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(105, 182, 255, 0.3), transparent);
  transform: translateX(-120%);
  transition: transform 0.6s ease;
}

.size-buttons__button.size-buttons__button:hover::before {
  transform: translateX(120%);
}

.size-buttons__button.size-buttons__button:hover,
.size-buttons__button--active.size-buttons__button--active {
  border-color: var(--aa-blue);
  color: var(--aa-blue-2);
  background: rgba(47, 134, 255, 0.1);
  transform: translateY(-2px);
  box-shadow: 0 0 20px rgba(47, 134, 255, 0.3);
}

/* ========== OPTION BUTTON GROUPS (select → buttons clone) ========== */

.aa-option-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 6px;
}

.aa-visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* ========== FILE PICKER (native <input type=file> clone) ========== */

.aa-file-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.aa-file-label {
  display: inline-block;
  margin-left: 10px;
  color: var(--aa-muted);
  font-size: 13px;
  vertical-align: middle;
}

/* ========== CARDS ========== */

.aa-card {
  position: relative;
  overflow: hidden;
  border-radius: 24px;
  background:
    linear-gradient(160deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.04) 34%, rgba(255, 255, 255, 0) 36%),
    linear-gradient(180deg, rgba(30, 105, 210, 0.34), rgba(3, 7, 15, 0.96) 62%),
    var(--aa-card);
  border: 2px solid rgba(47, 134, 255, 0.5);
  padding: 28px;
  cursor: pointer;
  transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  min-height: 320px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  box-shadow: 0 8px 32px rgba(47, 134, 255, 0.2);
}

.aa-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 50% 0%, rgba(47, 134, 255, 0.3), transparent 50%),
    linear-gradient(135deg, rgba(105, 182, 255, 0.1), transparent);
  opacity: 0;
  transition: opacity 0.4s ease;
}

.aa-card:hover::before {
  opacity: 1;
}

.aa-card:hover {
  border-color: var(--aa-blue);
  box-shadow:
    0 0 40px rgba(47, 134, 255, 0.5),
    0 0 80px rgba(47, 134, 255, 0.2);
  transform: translateY(-8px);
}

.aa-card-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.7;
  z-index: 1;
}

.aa-card-overlay {
  position: relative;
  z-index: 2;
  background: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.8) 60%, rgba(0, 0, 0, 0.95) 100%);
  padding: 24px 0 0;
  min-height: 140px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.aa-card-title {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 8px;
  color: #fff;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
}

.aa-card-subtitle {
  font-size: 13px;
  color: var(--aa-muted);
  line-height: 1.4;
  margin: 0;
}

.aa-card-arrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--aa-blue-2);
  font-size: 13px;
  font-weight: 600;
  margin-top: 12px;
  transition: all 0.3s ease;
}

.aa-card:hover .aa-card-arrow {
  gap: 10px;
}

/* ========== COMMERCE ADD-TO-CART (auto-styled, no markup changes needed) ========== */

.button--add-to-cart.button--add-to-cart.button--add-to-cart {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 56px;
  padding: 0 32px;
  border: 2px solid rgba(86, 160, 255, .95);
  border-radius: 999px;
  color: #fff;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: .01em;
  text-decoration: none;
  cursor: pointer;
  background:
    linear-gradient(160deg, rgba(255,255,255,.16) 0%, rgba(255,255,255,.05) 34%, rgba(255,255,255,0) 36%),
    linear-gradient(180deg, rgba(30, 105, 210, .38), rgba(3, 7, 15, .96) 58%),
    var(--aa-card);
  box-shadow:
    0 0 0 1px rgba(127,188,255,.18) inset,
    0 0 16px rgba(47,134,255,.76),
    0 0 38px rgba(47,134,255,.28);
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}

.button--add-to-cart.button--add-to-cart.button--add-to-cart:hover {
  transform: translateY(-2px) scale(1.02);
  border-color: #78bdff;
  box-shadow:
    0 0 0 1px rgba(150,205,255,.34) inset,
    0 0 22px rgba(47,134,255,.94),
    0 0 58px rgba(47,134,255,.38);
}

.button--add-to-cart.button--add-to-cart.button--add-to-cart:active {
  transform: translateY(1px) scale(.985);
}

/* ========== RESPONSIVE ========== */

@media (max-width: 768px) {
  .aa-button {
    min-height: 68px;
    grid-template-columns: 48px 1fr 32px;
    gap: 10px;
    padding: 0 20px;
  }

  .aa-button-title {
    font-size: 24px;
  }

  .aa-nav-btn {
    padding: 8px 12px;
    font-size: 12px;
  }

  /* Print type ("Односторонняя"/"Двусторонняя") — without this, the plain
     .aa-nav-btn mobile rule above (equal specificity, later in source)
     overwrites the --lg variant's own padding/font-size and it collapses
     to the same small size as quantity/other nav buttons on mobile. Sized
     to still fit both buttons on one line at narrow widths — see the
     tighter ≤480px override below for the width-constrained case. */
  .aa-nav-btn--lg {
    padding: 12px 20px;
    font-size: 14px;
  }

  /* Only the print-type group (the only user of --lg) needs to stay on one
     line — quantity's group can have many more options and should keep
     wrapping normally, so this is scoped rather than applied to every
     .aa-option-buttons. */
  .aa-option-buttons:has(.aa-nav-btn--lg) {
    flex-wrap: nowrap;
    gap: 8px;
  }
}

@media (max-width: 480px) {
  .aa-button {
    min-height: 64px;
    grid-template-columns: 44px 1fr 28px;
    gap: 8px;
    padding: 0 16px;
  }

  .aa-button-title {
    font-size: 20px;
  }

  .aa-icon {
    width: 40px;
    height: 40px;
  }

  .aa-nav-btn {
    padding: 6px 10px;
    font-size: 11px;
  }

  .aa-nav-btn--lg {
    padding: 10px 14px;
    font-size: 13px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .aa-button,
  .aa-button::before,
  .aa-arrow,
  .aa-chevron,
  .aa-icon svg,
  .aa-arrow svg,
  .aa-chevron svg {
    transition: none;
    animation: none;
  }
}

/* ========== COLOR SWATCHES (Характеристики) ========== */

.aa-color-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 14px;
}

.aa-color-row .js-form-type-radio {
  margin: 0;
}

/* Every swatch floats gently (staggered per-item delay set by JS), the
   theme's static selection ring is left alone (no competing ring drawn by
   us — that's what caused the "double circle" the first time around), and
   the selected one additionally gets a soft blurred halo in its OWN color
   (--aa-swatch-glow, set by JS from the swatch's own background) instead of
   a hard-edged ring, so it doesn't read as a second circle even while
   moving. Animating the wrapper div (not the swatch) keeps this transform
   independent from the swatch's own hover-scale transform below. */
.aa-color-row .aa-color-float-wrap {
  animation: float-icon 3s ease-in-out infinite;
}

/* ...except when that swatch is the selected one: the theme draws a static
   ring around it (see above), and a floating swatch drifting away from a
   ring that never moves is exactly what recreated the "extra blue circle"
   — the ring itself, exposed by the gap. Freeze the float there; the glow
   below is still enough to show it's selected. */
.aa-color-row input.product--rendered-attribute__selected:checked + label .aa-color-float-wrap {
  animation: none;
}

.aa-color-row .color_field__swatch {
  transition: transform .3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow .3s ease;
}

.aa-color-row label.option:hover .color_field__swatch {
  transform: scale(1.15);
  box-shadow: 0 0 20px rgba(255, 255, 255, .35);
}

.aa-color-row input.product--rendered-attribute__selected:checked + label .color_field__swatch {
  box-shadow: 0 0 18px 2px var(--aa-swatch-glow, rgba(47, 134, 255, .6));
}

/* Forces an even 2-row wrap regardless of swatch count (inserted by JS
   right after the middle item) — but only above 768px. Below that, the row
   isn't wide enough to fit "half the swatches" on one line to begin with,
   so the browser's own natural flex-wrap already breaks earlier than our
   forced split point, leaving a lone orphan swatch stranded on its own
   line between two forced breaks. Disabling the forced break on narrow
   viewports just lets it wrap naturally (however many fit per line),
   which is what "оddly positioned colors on mobile" turned out to be. */
.aa-color-row-break {
  flex-basis: 100%;
  height: 0;
  margin: 0;
  padding: 0;
}

@media (max-width: 768px) {
  .aa-color-row-break {
    display: none;
  }
}

/* ========== "Создать дизайн" moved under size picker ========== */

.aa-design-link-wrap {
  margin-top: 16px;
}

/* "Заказать" is moved to sit right after "Создать дизайн" by JS —
   space the two CTAs apart instead of them touching. Two selectors: desktop
   wraps the design link in .aa-design-link-wrap, mobile leaves it unwrapped
   in its original spot (size picker is hidden there, see JS comment). */
.aa-design-link-wrap + .button--add-to-cart,
a[href*="print-app"] + .button--add-to-cart {
  margin-top: 28px;
}

/* ========== SIZE PICKER FALLBACK (raw radio fieldset) ==========
   Below 768px the theme hides its own JS-built ".size-buttons" clone
   entirely and falls back to rendering the plain underlying radio fieldset
   for field_selected_size — completely unstyled otherwise. Style it to
   match the clone's pills. Only one of the two is ever visible at a time
   (theme's own CSS already toggles between them per breakpoint), so this
   never creates a second interactive control, just a styled version of
   whichever one the theme is currently showing. Moved next to the image by
   JS below; the ID here is Drupal's deterministic field-machine-name-based
   id (field_selected_size, delta 0), stable across every product page that
   has this field, so no per-product markup is needed. */
[id^="edit-field-selected-size-"][id$="-value"] {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.field--name-field-selected-size .js-form-type-radio {
  margin: 0;
}

.field--name-field-selected-size input.form-radio {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* Theme has its own rule targeting this exact element at higher specificity
   (.block-product .field--name-field-selected-size .product--pseudo-attribute
   label.option, loaded after ours) — was previously winning the border-width
   and border-radius half of the shorthand while our :checked/:hover rule
   only won the color half (higher specificity there from the extra input+
   label type selectors), producing a chimera: selected size got our blue
   but everyone kept the theme's chunky 3px/10px-radius gray box. Repeat
   classes so the base style wins outright instead of splitting the fight. */
.field--name-field-selected-size.field--name-field-selected-size .fieldset-wrapper label.option.option {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  padding: 10px 18px;
  border: 2px solid rgba(47, 134, 255, 0.3);
  background: transparent;
  color: var(--aa-muted);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  border-radius: 999px;
  transition: all 0.3s ease;
}

.field--name-field-selected-size.field--name-field-selected-size .fieldset-wrapper label.option.option:hover,
.field--name-field-selected-size.field--name-field-selected-size .fieldset-wrapper input.form-radio:checked + label.option.option {
  border-color: var(--aa-blue);
  color: var(--aa-blue-2);
  background: rgba(47, 134, 255, 0.1);
  box-shadow: 0 0 20px rgba(47, 134, 255, 0.3);
}

.field--name-field-selected-size {
  margin: 12px 0 0;
}

/* At narrow widths 5 pills at the base padding/gap don't fit one line (S–XL
   fit, XXL wraps alone) — tighten padding/gap/min-width just enough that
   all 5 stay on one row instead of stranding the last one. Kept as a wrap
   fallback (not forced nowrap) rather than risking overflow on the
   narrowest phones. Placed after the base rule above (not before it) —
   equal-specificity rules resolve by source order regardless of which
   media condition is active, so this has to come later to actually win. */
@media (max-width: 480px) {
  [id^="edit-field-selected-size-"][id$="-value"] {
    gap: 6px;
  }

  .field--name-field-selected-size.field--name-field-selected-size .fieldset-wrapper label.option.option {
    padding: 8px 13px;
    min-width: 36px;
  }
}

/* ========== HIDE REDUNDANT LABELS (self-explanatory controls) ========== */
/* Visually hidden, not removed — kept for screen readers via the same
   clip-based technique as .aa-visually-hidden. */

.size-buttons h2,
label[for*="attribute-print-type"],
.color-picker h3.block-title,
.field--name-field-selected-size legend {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* "Пользовательские файлы" is a <summary> toggle for a <details> that's
   always rendered open="open" by default — hide the toggle text + its
   marker triangle, not just clip it, since a visible marker with no label
   would look like a stray arrow. Content stays visible either way since
   the <details> itself is left untouched (still open). */
details[id^="edit-field-user-files"] > summary {
  display: none !important;
}

/* ========== PRODUCT IMAGE — ANIMATED BORDER ==========
   A thin light "chases" around the product photo's border instead of the
   theme's plain static blue outline. Pure CSS, no JS, no layout/repaint of
   surrounding content — only a small pseudo-element the size of the image
   repaints its own background on each frame, same cost class as the
   button hover/float animations already running elsewhere on this page.
   Spins the conic-gradient's own start angle (via a registered custom
   property, so it's animatable) instead of `transform: rotate()` on the
   element — rotating the element itself would swing its square corners
   out past the image's rounded-rect bounds on every frame (tried first,
   visibly bled outside the photo as a rotating diamond). The opaque photo
   sits on top and naturally masks the pseudo down to a thin ring at its
   edges — no mask-image needed. Targets the image's immediate wrapper via
   a stable substring (the class carries a per-product numeric suffix, e.g.
   "variation_field_image__6") rather than the full class name, so it works
   unchanged across every product page. Browsers without @property support
   just keep the ring static (no animation) — a harmless fallback, not a
   broken one.

   Arc length (~165deg span) is intentionally long and soft — that's the
   look the owner asked for. NOTE for future debugging: the "static blue
   bars" reported on /hoodie and /t-shirt-polo were NOT this animation.
   They are painted into the product PNGs themselves (see the crop rule
   below). Two rounds were wasted shortening this arc chasing that symptom
   before the images were actually inspected — don't repeat that. If a
   static edge line shows up again, check the source PNG's pixels FIRST
   (hide the <img> and see whether the line disappears with it). */
@property --aa-spin-angle {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}

.image-wrapper [class*="variation_field_image"] {
  position: relative;
  z-index: 0;
}

.image-wrapper [class*="variation_field_image"]::before {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 36px;
  background: conic-gradient(from var(--aa-spin-angle), transparent 0deg, var(--aa-blue-2) 55deg, var(--aa-blue) 95deg, transparent 165deg, transparent 360deg);
  filter: blur(1.5px);
  animation: aa-border-spin 2.6s linear infinite;
  pointer-events: none;
  z-index: -1;
}

/* Theme draws its own static blue border directly on the <img>
   (.block-product .col:first-child img, specificity 0,3,1) — now that the
   animated ring above replaces it, drop the static one so only the moving
   light remains. Keeps the theme's own border-radius untouched (not
   targeted here), so the photo's rounded corners still match the ring's
   shape; only the border line itself goes. Repeated class beats the
   theme's selector regardless of load order. */
.block-product.block-product .col:first-child img {
  border: 0;
}

/* ...and a SECOND blue frame that is not CSS at all: two product PNGs have
   a decorative blue border painted into the image file itself. Measured by
   reading their pixels (худиxx.png, "поло 4.png", both 650x650):

     0–6px    solid rgb(0,166,255)  — hard frame line
     7–31px   fully transparent      — gap
     32–52px  blue glow fading to black along the whole border
     53px+    plain black backdrop

   Other products have none of it — t-shirt (бела]яя2.png), cap, shopper
   are plain black to the edge — which is exactly why the line appeared
   "on some pictures and not others". No stylesheet change can remove
   something that is painted into the photo, and two rounds of tuning the
   ring animation above were wasted before the pixels were actually read.

   Cropping 6.5% (≈42px of 650) clears the frame and all of the bright
   part of the glow (by 42px it is already down to rgb(0,7,17), i.e.
   effectively black), while the garment itself only starts at 44px on the
   hoodie / 53px on the polo — so it stops just short of the product.
   Scaling by 1/0.87 puts the photo back to filling the same box, so
   nothing shrinks or leaves a gap.

   MUST stay scoped to the affected photos: the t-shirt's garment starts
   just 1.6% in, so a blanket 6.5% crop would slice into it. The JS block
   in andre-anri-buttons.js samples each image's corner pixel and adds
   .aa-img-framed only when that decorative border is actually present.
   Kept in CSS/JS rather than editing the PNGs so it stays reversible and
   the originals are untouched — the real fix is re-exporting those two
   photos without the border, after which this can be dropped. */
.image-wrapper img.aa-img-framed {
  clip-path: inset(6.5% round 30px);
  transform: scale(1.149);
}

@keyframes aa-border-spin {
  to { --aa-spin-angle: 360deg; }
}

@media (prefers-reduced-motion: reduce) {
  .image-wrapper [class*="variation_field_image"]::before {
    animation: none;
    content: none;
  }
}


/* ==========================================================================
   HOMEPAGE HERO  (главная страница — верхний экран)
   ==========================================================================
   Портирован из макета buttons/ГлавнаяV2-2026/homepage-hero-print.html.
   Разметку вставляет JS (см. блок "HOMEPAGE HERO" в andre-anri-buttons.js)
   и только на главной — тема не выставляет body-класс главной, поэтому
   определяем её по пути в JS, а не селектором.

   ВСЁ здесь заключено в .aa-hero-scope. Библиотека подключена сайт-вайд,
   поэтому неизолированные правила с такими общими именами, как .tab,
   .active или .arrow, могли бы «протечь» на товарные страницы и корзину.
   Проверено, что сейчас ни одного из этих классов нет ни в DOM сайта, ни
   (кроме .active) в CSS темы — изоляция стоит как страховка на будущее,
   когда разметка изменится.

   Изоляция сделана скриптом с учётом вложенности скобок
   (scratchpad/scope_css.py): наивная замена по регулярке ломала
   многострочные значения вроде background с несколькими градиентами.
   Если герой будет обновляться из макета — прогонять тем же способом.
   ========================================================================== */

.aa-hero-scope {
  /* Базовая ширина/фон: секция должна идти во всю ширину main, поэтому JS
     вставляет её первым элементом main.main-content, а не внутрь .container. */
  display: block;
  width: 100%;
  position: relative;
  isolation: isolate;
}

/* Защита от стилей темы: тема задаёт свои h1/p/button/img/a внутри main,
   и без этих сбросов заголовок героя и кнопки вкладок приезжают с чужими
   отступами, рамками и подчёркиваниями. */
.aa-hero-scope h1,
.aa-hero-scope p {
  margin: 0;
  padding: 0;
}

.aa-hero-scope button {
  margin: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
}

.aa-hero-scope a {
  text-decoration: none;
}

.aa-hero-scope img {
  border: 0;
  border-radius: 0;
  max-width: none;
}

.aa-hero-scope * {
  box-sizing: border-box;
}

    /* =========================================
       HERO PRINT SECTION
    ========================================= */
    .aa-hero-scope .hero-print {
      --accent: #1769ff;
      --accent-soft: rgba(23, 105, 255, 0.35);
      --accent-glow: rgba(23, 105, 255, 0.55);

      position: relative;
      min-height: 100vh;
      padding: 120px 7vw 60px;
      display: grid;
      grid-template-columns: minmax(380px, 44%) minmax(480px, 56%);
      grid-template-rows: 1fr auto;
      gap: 40px;
      overflow: hidden;
      background:
        radial-gradient(circle at 72% 44%, var(--accent-soft), transparent 34%),
        #030305;
      color: #fff;
      transition: background 0.8s ease;
    }

    /* Glow follows the image side */
    .aa-hero-scope .hero-print[data-active="tshirt"], .aa-hero-scope .hero-print[data-active="canvas"] {
      background:
        radial-gradient(circle at 26% 48%, var(--accent-soft), transparent 36%),
        #030305;
    }

    .aa-hero-scope .hero-print[data-active="hoodie"], .aa-hero-scope .hero-print[data-active="photo"] {
      background:
        radial-gradient(circle at 74% 48%, var(--accent-soft), transparent 36%),
        #030305;
    }

    /* Hero content */
    .aa-hero-scope .hero-content {
      grid-row: 1;
      align-self: center;
      max-width: 520px;
      transition:
        opacity 240ms ease,
        transform 240ms ease,
        filter 240ms ease;
    }

    /* Hero visual */
    .aa-hero-scope .hero-visual {
      grid-row: 1;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    /* tshirt + canvas: image LEFT, text RIGHT */
    .aa-hero-scope .hero-print[data-active="tshirt"] .hero-visual, .aa-hero-scope .hero-print[data-active="canvas"] .hero-visual {
      grid-column: 1;
    }
    .aa-hero-scope .hero-print[data-active="tshirt"] .hero-content, .aa-hero-scope .hero-print[data-active="canvas"] .hero-content {
      grid-column: 2;
      justify-self: end;
    }

    /* hoodie + photo: image RIGHT, text LEFT */
    .aa-hero-scope .hero-print[data-active="hoodie"] .hero-visual, .aa-hero-scope .hero-print[data-active="photo"] .hero-visual {
      grid-column: 2;
    }
    .aa-hero-scope .hero-print[data-active="hoodie"] .hero-content, .aa-hero-scope .hero-print[data-active="photo"] .hero-content {
      grid-column: 1;
      justify-self: start;
    }

    /* Eyebrow */
    .aa-hero-scope .eyebrow {
      color: var(--accent);
      font-size: 13px;
      letter-spacing: 0.28em;
      font-weight: 700;
      text-transform: uppercase;
      margin: 0 0 22px;
      transition: color 0.4s ease;
    }

    /* Title */
    .aa-hero-scope .hero-title {
      margin: 0;
      font-size: clamp(40px, 3.8vw, 72px);
      line-height: 0.95;
      letter-spacing: -0.05em;
      font-weight: 800;
      color: rgba(255,255,255,.92);
      text-shadow: 0 0 30px rgba(255,255,255,.08);
    }

    /* Description */
    .aa-hero-scope .hero-description {
      margin-top: 24px;
      max-width: 460px;
      color: rgba(255,255,255,.62);
      font-size: 17px;
      line-height: 1.55;
    }

    /* Spec card */
    .aa-hero-scope .spec-card {
      margin-top: 32px;
      padding: 24px 26px;
      border-radius: 22px;
      background: rgba(255,255,255,.035);
      border: 1px solid rgba(255,255,255,.085);
      box-shadow:
        0 24px 80px rgba(0,0,0,.50),
        inset 0 1px 0 rgba(255,255,255,.045);
      backdrop-filter: blur(18px);
    }

    .aa-hero-scope .spec-row { margin-bottom: 20px; }
    .aa-hero-scope .spec-row:last-of-type { margin-bottom: 0; }

    .aa-hero-scope .spec-line {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      margin-bottom: 9px;
    }

    .aa-hero-scope .spec-label {
      display: flex;
      align-items: center;
      gap: 10px;
      color: rgba(255,255,255,.84);
      font-size: 14px;
      font-weight: 600;
    }

    .aa-hero-scope .spec-icon {
      width: 16px;
      height: 16px;
      display: inline-block;
      border-radius: 4px;
      border: 1px solid var(--accent);
      box-shadow: 0 0 10px var(--accent-glow);
      flex-shrink: 0;
      transition: border-color 0.4s ease, box-shadow 0.4s ease;
    }

    .aa-hero-scope .spec-value { color: rgba(255,255,255,.60); font-size: 13px; white-space: nowrap; }

    .aa-hero-scope .spec-bar {
      width: 100%;
      height: 5px;
      border-radius: 999px;
      background: rgba(255,255,255,.10);
      overflow: hidden;
    }

    .aa-hero-scope .spec-bar-fill {
      width: 0;
      height: 100%;
      border-radius: inherit;
      background: linear-gradient(
        90deg,
        var(--accent),
        color-mix(in srgb, var(--accent) 72%, white)
      );
      box-shadow: 0 0 16px var(--accent-glow);
      animation: fillBar 900ms cubic-bezier(.22, 1, .36, 1) forwards;
    }

    @keyframes fillBar {
      from { width: 0; }
      to   { width: var(--target-width); }
    }

    /* View examples link */
    .aa-hero-scope .view-examples {
      margin-top: 22px;
      display: inline-flex;
      align-items: center;
      gap: 10px;
      color: rgba(255,255,255,.80);
      text-decoration: none;
      font-size: 12px;
      font-weight: 800;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      transition: color 0.2s ease;
    }

    .aa-hero-scope .view-examples:hover { color: var(--accent); }

    .aa-hero-scope .view-examples .arrow {
      font-size: 16px;
      line-height: 1;
    }

    /* Quality */
    .aa-hero-scope .quality {
      margin-top: 20px;
      display: flex;
      align-items: center;
      gap: 10px;
      color: rgba(255,255,255,.44);
      font-size: 13px;
    }

    .aa-hero-scope .shield-icon {
      width: 18px;
      height: 18px;
      display: inline-block;
      border: 1px solid rgba(255,255,255,.28);
      border-radius: 50% 50% 44% 44%;
      flex-shrink: 0;
    }

    /* =========================================
       PRODUCT ORBIT (right visual)
    ========================================= */
    .aa-hero-scope .product-orbit {
      position: relative;
      width: min(680px, 44vw);
      aspect-ratio: 1 / 1;
      height: auto;
      max-width: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      transition:
        opacity 240ms ease,
        transform 240ms ease,
        filter 240ms ease;
    }

    .aa-hero-scope .product-orbit::before {
      content: "";
      position: absolute;
      inset: 10%;
      border-radius: 50%;
      background: radial-gradient(circle, var(--accent-soft) 0%, transparent 68%);
      filter: blur(22px);
      transition: background 0.6s ease;
    }

    .aa-hero-scope .orbit-ring--outer {
      position: absolute;
      width: 100%;
      height: 100%;
      border-radius: 50%;
      border: 1px dashed var(--accent-soft);
      animation: orbitSpin 28s linear infinite;
      transition: border-color 0.6s ease;
    }

    .aa-hero-scope .orbit-ring--inner {
      position: absolute;
      width: 72%;
      height: 72%;
      border-radius: 50%;
      border: 1px solid rgba(255,255,255,.06);
    }

    @keyframes orbitSpin {
      from { transform: rotate(0deg); }
      to   { transform: rotate(360deg); }
    }

    .aa-hero-scope .product-image {
      position: relative;
      z-index: 2;
      max-width: 88%;
      max-height: 88%;
      object-fit: contain;
      filter:
        drop-shadow(0 30px 60px rgba(0,0,0,.60))
        drop-shadow(0 0 40px var(--accent-glow));
      animation: productOrbit 12s linear infinite;
      transition: filter 0.6s ease;
    }

    /* Continuous clockwise elliptical orbit — no pause at keyframes */
    @keyframes productOrbit {
      0%   { transform: translate(0px, -18px) rotate(-1deg); }
      12%  { transform: translate(14px, -12px) rotate(0deg); }
      25%  { transform: translate(20px, 0px) rotate(1.5deg); }
      37%  { transform: translate(14px, 14px) rotate(1deg); }
      50%  { transform: translate(0px, 20px) rotate(0deg); }
      62%  { transform: translate(-14px, 14px) rotate(-1deg); }
      75%  { transform: translate(-20px, 0px) rotate(-1.5deg); }
      87%  { transform: translate(-14px, -12px) rotate(0deg); }
      100% { transform: translate(0px, -18px) rotate(-1deg); }
    }

    .aa-hero-scope .hero-print[data-active="tshirt"]  .product-image { max-width: 88%; max-height: 88%; }
    .aa-hero-scope .hero-print[data-active="hoodie"]  .product-image { max-width: 92%; max-height: 92%; }
    .aa-hero-scope .hero-print[data-active="canvas"]  .product-image { max-width: 80%; max-height: 80%; }
    .aa-hero-scope .hero-print[data-active="photo"]   .product-image { max-width: 82%; max-height: 82%; }

    /* Status pill */
    .aa-hero-scope .status-pill {
      position: absolute;
      z-index: 3;
      bottom: 48px;
      left: 50%;
      transform: translateX(-50%);
      display: inline-flex;
      align-items: center;
      gap: 10px;
      padding: 10px 20px;
      border-radius: 999px;
      background: rgba(255,255,255,.055);
      border: 1px solid rgba(255,255,255,.10);
      color: rgba(255,255,255,.68);
      font-size: 11px;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      backdrop-filter: blur(14px);
      white-space: nowrap;
    }

    .aa-hero-scope .status-dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: var(--accent);
      box-shadow: 0 0 14px var(--accent-glow);
      animation: dotPulse 2s ease-in-out infinite;
      flex-shrink: 0;
      transition: background 0.4s ease, box-shadow 0.4s ease;
    }

    @keyframes dotPulse {
      0%, 100% { opacity: 1; transform: scale(1); }
      50%       { opacity: .6; transform: scale(1.35); }
    }

    /* =========================================
       PRODUCT TABS (bottom)
    ========================================= */
    .aa-hero-scope .product-tabs {
      grid-column: 1 / -1;
      grid-row: 2;
      justify-self: center;
      align-self: end;
      display: flex;
      align-items: center;
      gap: 6px;
      padding: 8px;
      border-radius: 999px;
      background: rgba(255,255,255,.045);
      border: 1px solid rgba(255,255,255,.09);
      backdrop-filter: blur(18px);
      box-shadow: 0 20px 70px rgba(0,0,0,.42);
      margin-bottom: 8px;
    }

    .aa-hero-scope .tab {
      min-width: 136px;
      height: 52px;
      border: 0;
      border-radius: 999px;
      background: transparent;
      color: rgba(255,255,255,.52);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 9px;
      font-size: 14px;
      font-weight: 600;
      cursor: pointer;
      transition:
        color 220ms ease,
        background 220ms ease,
        box-shadow 220ms ease,
        transform 220ms ease;
    }

    .aa-hero-scope .tab:hover {
      color: rgba(255,255,255,.88);
      transform: translateY(-1px);
    }

    .aa-hero-scope .tab.active {
      color: var(--accent);
      background: color-mix(in srgb, var(--accent) 14%, transparent);
      box-shadow:
        inset 0 0 0 1px color-mix(in srgb, var(--accent) 38%, transparent),
        0 0 26px color-mix(in srgb, var(--accent) 24%, transparent);
    }

    .aa-hero-scope .tab-icon { display: none; }

    /* subtle divider between inactive tabs */
    .aa-hero-scope .tab + .tab:not(.active)::before {
      content: "";
      display: block;
      position: absolute;
      left: -1px;
      top: 25%;
      height: 50%;
      width: 1px;
      background: rgba(255,255,255,.12);
    }
    .aa-hero-scope .tab { position: relative; }

    /* =========================================
       SWITCH ANIMATION — slide direction
    ========================================= */

    /* EXIT: orbit slides in its own direction, content slides opposite */
    .aa-hero-scope .hero-print.is-exit-left .product-orbit {
      animation: exitLeft 230ms cubic-bezier(.4, 0, 1, 1) both;
    }
    .aa-hero-scope .hero-print.is-exit-right .product-orbit {
      animation: exitRight 230ms cubic-bezier(.4, 0, 1, 1) both;
    }
    .aa-hero-scope .hero-print.is-exit-left .hero-content {
      animation: exitRight 230ms cubic-bezier(.4, 0, 1, 1) both;
    }
    .aa-hero-scope .hero-print.is-exit-right .hero-content {
      animation: exitLeft 230ms cubic-bezier(.4, 0, 1, 1) both;
    }

    /* ENTER: orbit slides in from direction, content from opposite */
    .aa-hero-scope .hero-print.is-enter-left .product-orbit {
      animation: enterFromLeft 520ms cubic-bezier(.22, 1, .36, 1) both;
    }
    .aa-hero-scope .hero-print.is-enter-right .product-orbit {
      animation: enterFromRight 520ms cubic-bezier(.22, 1, .36, 1) both;
    }
    .aa-hero-scope .hero-print.is-enter-left .hero-content {
      animation: enterFromRight 520ms cubic-bezier(.22, 1, .36, 1) both;
    }
    .aa-hero-scope .hero-print.is-enter-right .hero-content {
      animation: enterFromLeft 520ms cubic-bezier(.22, 1, .36, 1) both;
    }

    @keyframes exitLeft {
      from { opacity: 1; transform: translateX(0) scale(1); filter: blur(0); }
      to   { opacity: 0; transform: translateX(-80px) scale(0.94); filter: blur(10px); }
    }
    @keyframes exitRight {
      from { opacity: 1; transform: translateX(0) scale(1); filter: blur(0); }
      to   { opacity: 0; transform: translateX(80px) scale(0.94); filter: blur(10px); }
    }
    @keyframes enterFromLeft {
      from { opacity: 0; transform: translateX(-100px) scale(0.9) rotate(-4deg); filter: blur(14px); }
      to   { opacity: 1; transform: translateX(0) scale(1) rotate(0deg); filter: blur(0); }
    }
    @keyframes enterFromRight {
      from { opacity: 0; transform: translateX(100px) scale(0.9) rotate(4deg); filter: blur(14px); }
      to   { opacity: 1; transform: translateX(0) scale(1) rotate(0deg); filter: blur(0); }
    }


    @media (max-width: 1240px) {

      .aa-hero-scope .hero-print {
        padding-inline: 5vw;
        grid-template-columns: minmax(340px, 44%) 1fr;
      }
    }

    @media (max-width: 900px) {

      /* Hero mobile */
      .aa-hero-scope .hero-print {
        min-height: auto;
        padding: 100px 20px 28px;
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto;
      }

      .aa-hero-scope .hero-print .hero-content, .aa-hero-scope .hero-print[data-active] .hero-content {
        grid-column: 1;
        grid-row: 2;
        justify-self: center;
        text-align: center;
        margin: 0 auto;
        max-width: 100%;
      }

      .aa-hero-scope .hero-description { margin-inline: auto; }

      .aa-hero-scope .hero-print .hero-visual, .aa-hero-scope .hero-print[data-active] .hero-visual {
        grid-column: 1;
        grid-row: 1;
      }

      .aa-hero-scope .product-orbit {
        width: min(480px, 88vw);
        aspect-ratio: 1 / 1;
        height: auto;
      }

      .aa-hero-scope .product-tabs {
        grid-row: 3;
        max-width: 100%;
        overflow-x: auto;
        justify-self: stretch;
        border-radius: 20px;
      }

      .aa-hero-scope .tab { min-width: 120px; font-size: 13px; }
    }

    @media (max-width: 520px) {

      .aa-hero-scope .tab { min-width: 100px; height: 48px; gap: 6px; font-size: 12px; }
      .aa-hero-scope .hero-title { font-size: clamp(34px, 9vw, 56px); }
    }

/* ==========================================================================
   КАРТОЧКИ КАТАЛОГА НА ГЛАВНОЙ — кликается вся карточка
   ==========================================================================
   Кнопка «Далее» под карточкой убрана по просьбе владельца: вместо неё
   переход даёт сама карточка (картинка и название). Ссылка у кнопки и у
   картинки была одна и та же, так что ничего не теряется.

   Селектор намеренно начинается с .block-listings — этот блок есть ТОЛЬКО
   на главной (проверено по /t-shirt, /Cup, /canvasgaler, /businesscard,
   /node/1: ни одного вхождения), поэтому правило физически не может
   зацепить кнопки на других страницах.
   ========================================================================== */

.block-listings .block-item .item-content a.button {
  display: none;
}

/* Раз явной кнопки больше нет, кликабельность должна читаться сама:
   курсор-палец на всей карточке плюс отклик на наведение. */
.block-listings .block-item {
  cursor: pointer;
}

.block-listings .block-item .title a {
  color: inherit;
  text-decoration: none;
}

.block-listings .block-item .item-image img {
  transition: transform .3s ease, box-shadow .3s ease;
}

.block-listings .block-item:hover .item-image img {
  transform: translateY(-4px);
  box-shadow: 0 0 30px rgba(47, 134, 255, .55);
}

.block-listings .block-item:hover .title {
  color: var(--aa-blue-2);
  transition: color .3s ease;
}

/* ==========================================================================
   «Заказать печать» — бывшая статичная плашка READY TO PRINT
   ==========================================================================
   Стала ссылкой на раздел текущей вкладки героя (адрес проставляет JS при
   каждом переключении). Раз это теперь кнопка, а не подпись, ей нужен
   отклик — сама по себе плашка выглядела как статус, а не как действие.

   Идёт ПОСЛЕ основной секции героя, чтобы переопределить её `.status-pill`
   при равной специфичности: в этом файле уже дважды ловили, что правило,
   написанное выше, побеждает более позднее только по порядку.
   ========================================================================== */

.aa-hero-scope .status-pill {
  cursor: pointer;
  font-weight: 700;
  color: rgba(255, 255, 255, .82);
  transition: color .25s ease, background .25s ease, border-color .25s ease,
              box-shadow .25s ease, transform .25s ease;
}

.aa-hero-scope .status-pill:hover,
.aa-hero-scope .status-pill:focus-visible {
  color: #fff;
  background: color-mix(in srgb, var(--accent) 18%, rgba(255, 255, 255, .055));
  border-color: color-mix(in srgb, var(--accent) 55%, transparent);
  box-shadow: 0 0 26px var(--accent-glow);
  transform: translateX(-50%) translateY(-2px);
  outline: none;
}

.aa-hero-scope .status-pill:active {
  transform: translateX(-50%) translateY(0);
}

/* ==========================================================================
   ВЕРХНЕЕ МЕНЮ (шапка) — перекраска под макет
   ==========================================================================
   Шапка общая для ВСЕГО сайта, поэтому здесь только CSS: разметку и
   скрипты темы не трогаем совсем. Конкретно нельзя ломать:
     • мега-меню `.main-menu-level-1` — оно `position:absolute` и
       раскрывается скриптом темы (main-menu.behavior.js). Поэтому НЕ
       задаём `position` пунктам `li` (сменился бы контейнер позицио-
       нирования и выпадашка уехала бы) и нигде не ставим `overflow:hidden`
       — она бы обрезалась;
     • форму поиска `.views-exposed-form` и её переключатель;
     • блок корзины Commerce — он перерисовывается по AJAX при добавлении
       товара, поэтому меняем только внешний вид, а не структуру.
   ========================================================================== */

/* --- пункты меню: из простого текста в «пилюли» --- */
.header .main-menu.menu-level-0 > li.menu-item > a {
  display: inline-block;
  padding: 9px 13px;
  border-radius: 999px;
  border: 1px solid transparent;
  color: rgba(255, 255, 255, .78);
  font-weight: 600;
  line-height: 1.2;
  transition: color .25s ease, background .25s ease,
              border-color .25s ease, box-shadow .25s ease;
}

.header .main-menu.menu-level-0 > li.menu-item > a:hover,
.header .main-menu.menu-level-0 > li.menu-item > a:focus-visible {
  color: #fff;
  background: rgba(47, 134, 255, .14);
  border-color: rgba(47, 134, 255, .45);
  box-shadow: 0 0 20px rgba(47, 134, 255, .28);
  outline: none;
}

/* Текущий раздел. Drupal здесь не проставляет active-trail (проверено:
   ни одного класса с "active" в меню), поэтому класс вешает наш JS,
   сравнивая адрес пункта с текущим. */
.header .main-menu.menu-level-0 > li.menu-item > a.aa-menu-current {
  color: var(--aa-blue-2);
  background: rgba(47, 134, 255, .16);
  border-color: rgba(47, 134, 255, .55);
  box-shadow: 0 0 22px rgba(47, 134, 255, .3);
}

/* Замеры на живом проде (1280×820), из-за чего вообще пришлось трогать
   раскладку шапки: пункты меню лежат в `.bottom-part` c
   `padding-right: 172px`, а корзина и поиск — `position: absolute` от
   `.header` (`right: 66px` и `right: 12px`). Корзина растёт НАЛЕВО: при
   пустой корзине («0 ₽») она шириной 100px и до «Контактов» остаётся
   6px, а с реальной суммой («4 500 ₽») пилюля становится шире и залезает
   под пункт меню — то самое наслоение со скриншота владельца. Поэтому
   ниже (в блоке про логотип) промежутки сжаты, а правый отступ
   `.bottom-part` увеличен — это резерв под корзину и поиск.

   Только десктоп: ниже 1024px меню темы превращается в выезжающую
   панель от бургера, там своя раскладка карточками — её не трогаем. */

/* --- корзина: собрать сумму, иконку и счётчик в одну «пилюлю» --- */
.header .cart--cart-block .cart-block--link__expand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  /* Высота подогнана под пилюли меню (38px): 24px иконка + 6+6 отступы
     + рамка. Раньше корзина была 42px и заметно выбивалась из ряда. */
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid rgba(47, 134, 255, .38);
  background: rgba(47, 134, 255, .10);
  color: #fff;
  font-weight: 700;
  transition: border-color .25s ease, background .25s ease, box-shadow .25s ease;
}

.header .cart--cart-block .cart-block--link__expand:hover {
  border-color: rgba(47, 134, 255, .75);
  background: rgba(47, 134, 255, .18);
  box-shadow: 0 0 22px rgba(47, 134, 255, .35);
}

/* --- поиск: белый квадратик темы → круглая кнопка в общем стиле ---
   Класс повторён (`.search-toggle.search-toggle`) не для красоты: у темы
   правило ровно той же специфичности (`.header .search-part
   .search-toggle`), а `screen.css` грузится ПОСЛЕ нашей библиотеки —
   при ничьей побеждала тема. Из-за этого на проде оставался её белый
   круг с маленькой иконкой внутри, то есть кнопка поиска выглядела как
   белое пятно.

   Саму иконку рисуем сами (маска + `currentColor`), а `<img>` темы
   прячем: файл `icon-search.svg` — чёрная лупа под белый фон темы, на
   нашем тёмно-синем круге её просто не видно. */
.header .search-part .search-toggle.search-toggle {
  width: 38px;
  height: 38px;
  padding: 0;
  box-sizing: border-box;
  border-radius: 50%;
  border: 1px solid rgba(47, 134, 255, .38);
  background: rgba(47, 134, 255, .10);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, .88);
  cursor: pointer;
  transition: border-color .25s ease, background .25s ease,
              box-shadow .25s ease, color .25s ease;
}

.header .search-part .search-toggle.search-toggle img { display: none; }

.header .search-part .search-toggle.search-toggle::before {
  content: "";
  width: 18px;
  height: 18px;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='M15.4 15.4L21 21'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='M15.4 15.4L21 21'/%3E%3C/svg%3E") center / contain no-repeat;
}

.header .search-part .search-toggle.search-toggle:hover {
  color: #fff;
  border-color: rgba(47, 134, 255, .75);
  background: rgba(47, 134, 255, .18);
  box-shadow: 0 0 22px rgba(47, 134, 255, .35);
}

/* На узких экранах меню превращается в выезжающую панель от бургера —
   там «пилюли» с рамками выглядят лишними, оставляем простой список.

   ВАЖНО: сюда обязательно входит и `.aa-menu-current`. В мобильном меню
   тема растягивает ссылку на всю карточку
   (`position: absolute; top: 14px; left: 18px; bottom: 0; right: 0`), и
   наша «пилюля» текущего раздела с `border-radius: 999px` и свечением
   рисовалась на весь этот прямоугольник — на экране это выглядело как
   огромное синее КОЛЬЦО поверх карточки «Главная». Раньше правило ниже
   не покрывало `.aa-menu-current` (у него специфичность выше), поэтому
   сброс до него не доходил. */
@media (max-width: 1023px) {
  .header .main-menu.menu-level-0 > li.menu-item > a,
  .header .main-menu.menu-level-0 > li.menu-item > a:hover,
  .header .main-menu.menu-level-0 > li.menu-item > a:focus,
  .header .main-menu.menu-level-0 > li.menu-item > a:focus-visible,
  .header .main-menu.menu-level-0 > li.menu-item > a.aa-menu-current,
  .header .main-menu .menu-item-lvl-0:hover > a,
  .header .main-menu .menu-item-lvl-0.hover > a {
    padding: 0;
    border-color: transparent;
    border-radius: 0;
    background: none;
    box-shadow: none;
  }

  /* Текущий раздел на мобильном отмечаем только цветом текста. */
  .header .main-menu.menu-level-0 > li.menu-item > a.aa-menu-current {
    color: var(--aa-blue-2);
  }
}

/* --- поле поиска в шапке --- */
/* Форма уходит на /search обычным GET — трогаем только внешний вид,
   ни имена полей, ни action не меняем. */
.header .search-part .search-wrapper input.form-text {
  padding: 10px 16px;
  border-radius: 999px;
  border: 1px solid rgba(47, 134, 255, .38);
  background: rgba(6, 14, 28, .92);
  color: #fff;
  font-size: 15px;
  transition: border-color .25s ease, box-shadow .25s ease;
}

.header .search-part .search-wrapper input.form-text::placeholder {
  color: rgba(215, 225, 245, .5);
}

.header .search-part .search-wrapper input.form-text:focus {
  border-color: rgba(47, 134, 255, .8);
  box-shadow: 0 0 22px rgba(47, 134, 255, .35);
  outline: none;
}

.header .search-part .search-wrapper input.form-submit {
  padding: 10px 22px;
  border-radius: 999px;
  border: 1px solid rgba(47, 134, 255, .55);
  background: rgba(47, 134, 255, .16);
  color: #fff;
  font-weight: 700;
  cursor: pointer;
  transition: background .25s ease, border-color .25s ease, box-shadow .25s ease;
}

.header .search-part .search-wrapper input.form-submit:hover {
  background: rgba(47, 134, 255, .28);
  border-color: rgba(47, 134, 255, .85);
  box-shadow: 0 0 22px rgba(47, 134, 255, .35);
}

.header .search-part .search-wrapper label[for="edit-query"] {
  color: var(--aa-blue-2);
  font-weight: 700;
}

/* --- логотип: из «строки по центру» в левый угол одной строкой с меню ---
   Тема кладёт логотип отдельной строкой на всю ширину
   (`.header .logo { width: 100%; justify-content: center }`), поэтому
   при сужении окна он «перекидывался» наверх, а меню уезжало под него.
   Делаем ширину по содержимому — тогда логотип и меню становятся двумя
   flex-элементами одной строки (`.bottom-part` уже с `margin-left: auto`).

   Ширины подобраны так, чтобы строка ГАРАНТИРОВАННО не переносилась даже
   в самом узком десктопном случае (1024px): логотип + меню + место под
   корзину и поиск должны уместиться, иначе вернётся ровно та же беда.
     1280+ : 170 + 640 + 240 + отступы ≈ 1085
     1024+ : 140 + 560 + 200 + отступы ≈ 940 */
@media (min-width: 1024px) {
  .header .logo.logo {
    width: auto;
    flex: 0 0 auto;
    margin: 0;
    padding-left: 40px;
    justify-content: flex-start;
  }

  /* Корзина и поиск прижаты темой к правому краю (`right: 12px`) и
     выровнены по НИЗУ шапки (`bottom: 32/33px`) — а пункты меню стоят по
     центру своей строки. Замеры на проде 1280×800: центр пункта меню
     y = 85, корзины 78, поиска 82, то есть обе кнопки были выше меню.
     Считаем от низа шапки (её высота 131): центр строки меню = 46px от
     низа, значит `bottom = 46 − половина высоты кнопки`.
     Плюс отодвигаем от края, чтобы поиск не лип к границе окна. */
  .header .cart--cart-block.cart--cart-block {
    right: 88px;
    bottom: 25px;
  }

  .header .search-part.search-part {
    right: 30px;
    bottom: 26px;
  }

  /* Точное выравнивание по центру строки меню. `bottom` выше — это
     запасной вариант на случай, если скрипт не отработает: у темы
     `min-height` нижней строки меняется по ширине окна (75px против
     134px на широких экранах), поэтому фиксированный отступ от низа на
     большом мониторе уводил корзину и поиск вниз. Центр замеряет JS и
     кладёт в `--aa-hdr-cy` (см. andre-anri-buttons.js), класс
     `aa-hdr-aligned` он же и ставит. */
  .header.aa-hdr-aligned .cart--cart-block.cart--cart-block {
    top: var(--aa-hdr-cart-top);
    bottom: auto;
  }

  .header.aa-hdr-aligned .search-part.search-part {
    top: var(--aa-hdr-search-top);
    bottom: auto;
  }

  /* Пункты меню тоже должны стоять по центру полосы. Тема резервирует
     под ними `padding-bottom: 10px` (место под свою стрелку), из-за чего
     пилюли сидели на 5px выше центра — рядом с логотипом это читалось
     как «кнопки чуть выше». Полоска-подсветка позиционируется абсолютно
     и в этом резерве не нуждается. */
  .header .main-menu .menu-item-lvl-0 {
    /* У темы `padding-top: 32px` задан БЕЗ медиа-запроса, а её же сброс
       `padding-top: 0` живёт только в диапазоне 1024–1319px. То есть на
       экранах шире 1320px пункты уезжали вниз на 16px относительно
       логотипа и корзины — «на широком мониторе всё не по центру».
       Гасим обоими: и сверху, и снизу. */
    padding-top: 0;
    padding-bottom: 0;
    /* Пункт — flex с переносом, и вторая «строка» в нём — пустой
       `.arrow-top` (высота 0) под ссылкой. При растянутых строках ссылка
       садилась в верхнюю половину пункта, то есть выше центра полосы.
       `align-content: center` собирает обе строки по центру — ссылка
       встаёт ровно по центру, `position` пункту при этом задавать НЕ
       нужно (иначе переедет мега-меню, оно absolute от `.main-menu`). */
    align-content: center;
  }

  .header .logo.logo img { max-width: 140px; }

  .header .bottom-part.bottom-part { padding-right: 246px; }

  .header .main-menu.main-menu.menu-level-0 {
    gap: 4px;
    min-width: 0;
  }

  .header .main-menu.menu-level-0 > li.menu-item > a {
    padding: 8px 8px;
    font-size: 14px;
  }
}

@media (min-width: 1280px) {
  .header .logo.logo img { max-width: 170px; }
  .header .bottom-part.bottom-part { padding-right: 266px; }
  .header .main-menu.main-menu.menu-level-0 { gap: 8px; }

  .header .main-menu.menu-level-0 > li.menu-item > a {
    padding: 9px 13px;
    font-size: 15px;
  }
}

/* На мобильном логотип центрируется темой (`margin: 0 auto`) — сдвигаем
   его чуть левее, добавляя отступ справа внутри flex-контейнера.
   Именно так, а не `transform`: логотип остаётся кликабельным ровно там,
   где нарисован. */
@media (max-width: 1023px) {
  .header .logo.logo { padding-right: 34px; }
}

/* --- иконка корзины: была заметно крупнее остальных элементов шапки --- */
.header .cart--cart-block .cart-block--link__expand .cart-block--summary__icon.cart-block--summary__icon {
  width: 24px;
  height: 24px;
}

.header .cart--cart-block .cart-block--link__expand .cart-block--summary__icon img {
  width: 100%;
  height: auto;
  display: block;
}

.header .cart--cart-block .cart-block--link__expand .cart-block--summary__count.cart-block--summary__count {
  width: 17px;
  height: 17px;
  font-size: 11px;
  line-height: 17px;
}

@media (max-width: 1023px) {
  .header .cart--cart-block .cart-block--link__expand .cart-block--summary__icon.cart-block--summary__icon {
    width: 22px;
    height: 22px;
  }
}

/* --- подсветка пункта: полоска снизу вместо треугольной стрелки ---
   Тема рисует на `.arrow-top` сразу два псевдоэлемента: `:after` —
   голубой треугольник, `:before` — полоску. Нужен только второй, поэтому
   треугольник убираем совсем, а полоску доводим до неонового вида. */
.header .main-menu .menu-item-lvl-0 .arrow-top:after {
  display: none;
}

/* Полоска висела на 24px ниже пилюли: `.arrow-top` — отдельная строка
   flex-контейнера под ссылкой, и `bottom: -7px` темы отсчитывался от её
   низа. Замер на проде: низ пилюли y = 104, полоска приходилась на 125.
   Отрицательный `bottom` опускает полоску под пилюлю с небольшим
   зазором (замер: низ пилюли 112, полоска 116–119). */
.header .main-menu .menu-item-lvl-0 .arrow-top:before {
  height: 3px;
  bottom: -8px;
  border-radius: 999px;
  background: linear-gradient(90deg,
    rgba(47, 134, 255, 0), var(--aa-blue) 25%, #9ed0ff 50%, var(--aa-blue) 75%, rgba(47, 134, 255, 0));
  box-shadow: 0 0 14px rgba(47, 134, 255, .8);
  transition: opacity .25s ease-in-out;
}

/* У текущего раздела полоска видна и без наведения. */
.header .main-menu .menu-item-lvl-0:has(> a.aa-menu-current) .arrow-top:before {
  opacity: 1;
}

/* Тема при наведении на ПУНКТ (не на саму ссылку) заливает её сплошным
   #009be2 — поверх нашей пилюли это выглядело бы как чужая кнопка.

   Только десктоп! На тач-экране `:hover` ЗАЛИПАЕТ после тапа, а в
   мобильном меню ссылка растянута абсолютом на всю карточку — и пилюля
   рисовалась поверх неё кольцом (`border-radius: 999px`) или рамкой на
   всю плитку. Именно это владелец видел как «кружочки на телефоне» и
   «квадратик при наведении». */
@media (min-width: 1024px) {
  .header .main-menu .menu-item-lvl-0:hover > a,
  .header .main-menu .menu-item-lvl-0.hover > a {
    color: #fff;
    background: rgba(47, 134, 255, .14);
    border-color: rgba(47, 134, 255, .45);
    box-shadow: 0 0 20px rgba(47, 134, 255, .28);
  }
}

/* --- выпадающее меню: 3 карточки в ряд, вид по макету ---
   Было: синий блок #263754, картинки в толстых синих рамках по 5 в ряд
   (`flex: 0 0 20%`). Стало: тёмная стеклянная панель как у панелей
   поиска/корзины, карточки с тонкой рамкой и подсветкой при наведении.
   Картинки товаров остаются — меняется только оформление вокруг них.

   Ширину панели задаём явно: она `position: absolute` и без явной
   ширины схлопывается по содержимому, а «треть» от такой ширины
   вычислить нельзя — карточки разъезжались бы по ширине текста. */
@media (min-width: 1024px) {
  .header .main-menu .main-menu-level-1 {
    width: min(660px, calc(100vw - 40px));
  }

  .header .main-menu .main-menu-level-1-content {
    gap: 14px;
    padding: 16px;
    justify-content: flex-start;
    background:
      radial-gradient(circle at 50% 0%, rgba(47, 134, 255, .18), transparent 42%),
      rgba(3, 7, 15, .97);
    border: 1px solid rgba(86, 160, 255, .34);
    border-radius: 24px;
    box-shadow: 0 30px 70px rgba(0, 0, 0, .55), 0 0 40px rgba(47, 134, 255, .16);
  }

  .header .main-menu .main-menu-level-1-content .menu-item-lvl-1 {
    flex: 0 0 calc((100% - 28px) / 3);
    max-width: calc((100% - 28px) / 3);
    min-width: 0;
    padding: 0;
  }

  .header .main-menu .main-menu-level-1-content .menu-item-lvl-1 > a {
    display: block;
    padding: 10px;
    border-radius: 18px;
    background: linear-gradient(160deg, rgba(47, 134, 255, .12), rgba(255, 255, 255, .03));
    border: 1px solid rgba(86, 160, 255, .22);
    transition: transform .22s ease, border-color .22s ease,
                box-shadow .22s ease, background .22s ease;
  }

  .header .main-menu .main-menu-level-1-content .menu-item-lvl-1 > a:hover,
  .header .main-menu .main-menu-level-1-content .menu-item-lvl-1 > a:focus-visible {
    transform: translateY(-3px);
    border-color: rgba(105, 182, 255, .6);
    background: linear-gradient(160deg, rgba(47, 134, 255, .22), rgba(255, 255, 255, .05));
    box-shadow: 0 18px 34px rgba(0, 0, 0, .5), 0 0 26px rgba(47, 134, 255, .34);
    outline: none;
  }

  /* Толстая синяя рамка нарисована темой прямо на картинке — снимаем и
     на покое, и на наведении (у темы для hover своё правило). */
  .header .main-menu .main-menu-level-1-content .menu-item-lvl-1 img,
  .header .main-menu .main-menu-level-1-content .menu-item-lvl-1 a:hover img {
    width: 100%;
    height: auto;
    border: 0;
    border-radius: 12px;
    background: #000;
  }

  .header .main-menu .main-menu-level-1-content .menu-item-lvl-1 .title {
    padding-top: 10px;
    color: var(--aa-blue-2);
    font-size: 14px;
    font-weight: 800;
    line-height: 1.25;
    text-transform: none;
    white-space: normal;
  }
}

/* --- «Processing…» при смене цвета/размера ---
   Штатный индикатор Drupal: `<div class="ajax-progress ajax-progress-throbber">`
   с крутилкой и текстом «Processing...» (по-английски, мимо стиля сайта).
   Тема гасит только `.ajax-progress-throbber`, поэтому вариант
   `ajax-progress-fullscreen` и сам контейнер `.ajax-progress` могут
   всплыть. Гасим все варианты разом — обратная связь у сайта и так есть:
   тема показывает синюю полосу загрузки в самом верху окна
   (`.ajax-custom-progress`), её не трогаем. */
.ajax-progress.ajax-progress,
.ajax-progress-throbber.ajax-progress-throbber,
.ajax-progress-fullscreen.ajax-progress-fullscreen {
  display: none;
}

/* ==========================================================================
   ПОДВАЛ САЙТА
   ==========================================================================
   Тут не перекраска, а сборка: штатный `footer.site-footer` фактически
   пустой (высота ~96px), внутри только список соцсетей — и тот
   `position: fixed`, то есть это плавающие кнопки «телефон/telegram» в
   углу экрана, а не содержимое подвала. Поэтому контент ДОБАВЛЯЕТСЯ
   рядом, а не заменяет существующее: плавающие кнопки остаются как были.

   Всё внутри .aa-footer-scope — подвал выводится на КАЖДОЙ странице,
   и неизолированные правила поехали бы по всему сайту.
   ========================================================================== */

.aa-footer-scope {
  display: block;
  padding: 56px 7vw 32px;
  background: linear-gradient(180deg, #05070d, #020306);
  border-top: 1px solid rgba(47, 134, 255, .22);
  color: rgba(255, 255, 255, .78);
  font-size: 15px;
  line-height: 1.6;
  text-align: left;
}

.aa-footer-scope * { box-sizing: border-box; }

.aa-footer-scope .aa-f-top {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1.2fr;
  gap: 40px;
  max-width: 1280px;
  margin: 0 auto;
}

.aa-footer-scope .aa-f-logo {
  display: inline-block;
  margin-bottom: 14px;
  color: #fff;
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -.02em;
  text-decoration: none;
}

.aa-footer-scope .aa-f-logo span { color: var(--aa-blue-2); }

.aa-footer-scope .aa-f-text {
  margin: 0 0 18px;
  color: rgba(255, 255, 255, .58);
  max-width: 380px;
}

.aa-footer-scope .aa-f-socials {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.aa-footer-scope .aa-f-social {
  padding: 8px 16px;
  border-radius: 999px;
  border: 1px solid rgba(47, 134, 255, .35);
  background: rgba(47, 134, 255, .08);
  color: rgba(255, 255, 255, .88);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: border-color .25s ease, background .25s ease, box-shadow .25s ease;
}

.aa-footer-scope .aa-f-social:hover {
  border-color: rgba(47, 134, 255, .8);
  background: rgba(47, 134, 255, .18);
  box-shadow: 0 0 20px rgba(47, 134, 255, .3);
}

.aa-footer-scope .aa-f-title {
  margin: 0 0 14px;
  color: #fff;
  font-size: 17px;
  font-weight: 800;
}

.aa-footer-scope .aa-f-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 9px;
}

.aa-footer-scope .aa-f-list a {
  color: rgba(255, 255, 255, .68);
  text-decoration: none;
  transition: color .2s ease;
}

.aa-footer-scope .aa-f-list a:hover { color: var(--aa-blue-2); }

.aa-footer-scope .aa-f-list span { color: rgba(255, 255, 255, .55); }

.aa-footer-scope .aa-f-card {
  display: grid;
  gap: 18px;
  align-content: start;
  padding: 22px;
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, .09);
  background: rgba(255, 255, 255, .03);
}

.aa-footer-scope .aa-f-card strong {
  display: block;
  margin-bottom: 8px;
  color: #fff;
  font-size: 15px;
}

.aa-footer-scope .aa-f-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  max-width: 1280px;
  margin: 40px auto 0;
  padding-top: 22px;
  border-top: 1px solid rgba(255, 255, 255, .08);
  color: rgba(255, 255, 255, .48);
  font-size: 13px;
}

.aa-footer-scope .aa-f-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.aa-footer-scope .aa-f-badge {
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .12);
  color: rgba(255, 255, 255, .6);
  font-size: 12px;
}

@media (max-width: 1023px) {
  .aa-footer-scope .aa-f-top { grid-template-columns: 1fr 1fr; gap: 32px; }
}

@media (max-width: 640px) {
  .aa-footer-scope { padding: 40px 20px 26px; }
  .aa-footer-scope .aa-f-top { grid-template-columns: 1fr; gap: 28px; }
  .aa-footer-scope .aa-f-bottom { flex-direction: column; align-items: flex-start; }
  /* Плавающие кнопки связи висят в правом нижнем углу — даём отступ,
     чтобы они не легли поверх нижней строки подвала. */
  .aa-footer-scope .aa-f-bottom { padding-bottom: 60px; }
}

/* ==========================================================================
   ВЫЕЗЖАЮЩИЕ ПАНЕЛИ ПОИСКА И КОРЗИНЫ (drawers)
   ==========================================================================
   Штатные всплывашки темы выглядели чужеродно: поиск — серая полоска с
   подчёркнутым инпутом (`.search-wrapper.is-visible`), корзина — серый
   блок `.cart-block--contents` с таблицей. Их не переделываем, а
   ПОДМЕНЯЕМ: JS перехватывает клик по `.search-toggle` и по
   `.cart-block--link__expand` и открывает нашу панель, а блоки темы
   просто остаются закрытыми (класс `is-visible` им никто не ставит).
   Разметку темы не меняем — значит и AJAX-перерисовка блока корзины
   Commerce ничего не сломает.

   Вид — по макету `buttons/ГлавнаяV2-2026/homepage-hero-print.html`
   (панель справа, шапка с заголовком и крестиком, карточки товаров).
   Свой префикс `aa-dw-`, чтобы не пересечься ни с темой, ни с нашими
   же классами `aa-cart-*` из макета главной.
   ========================================================================== */

.aa-dw-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1180;
  background: rgba(0, 0, 0, .62);
  opacity: 0;
  pointer-events: none;
  transition: opacity .24s ease;
}

.aa-dw-backdrop.is-open {
  opacity: 1;
  pointer-events: auto;
}

.aa-dw {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 1190;
  width: min(430px, 100vw);
  height: 100vh;
  height: 100dvh;
  display: grid;
  grid-template-rows: auto 1fr;
  box-sizing: border-box;
  color: var(--aa-text);
  background:
    radial-gradient(circle at 50% 0%, rgba(47, 134, 255, .18), transparent 36%),
    rgba(3, 7, 15, .98);
  border-left: 1px solid rgba(86, 160, 255, .34);
  box-shadow: -24px 0 70px rgba(0, 0, 0, .56), 0 0 40px rgba(47, 134, 255, .18);
  transform: translateX(105%);
  visibility: hidden;
  transition: transform .34s cubic-bezier(.2, .8, .2, 1), visibility .34s step-end;
  text-align: left;
  font-size: 15px;
}

.aa-dw.is-open {
  transform: translateX(0);
  visibility: visible;
  transition: transform .34s cubic-bezier(.2, .8, .2, 1), visibility 0s;
}

.aa-dw * { box-sizing: border-box; }

/* Тема задаёт `h2 { font-size: 2.8rem }` и прочее глобально — гасим на
   уровне панели, чтобы заголовки внутри не разъезжались. */
.aa-dw h2,
.aa-dw h3,
.aa-dw p {
  margin: 0;
  padding: 0;
  font-family: inherit;
}

.aa-dw-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  padding: 22px 22px 16px;
  border-bottom: 1px solid rgba(86, 160, 255, .22);
}

.aa-dw-title {
  color: #fff;
  font-size: 24px;
  font-weight: 800;
  line-height: 1.05;
}

.aa-dw-sub {
  margin-top: 6px;
  color: var(--aa-muted);
  font-size: 13px;
  line-height: 1.4;
}

.aa-dw-close {
  width: 42px;
  height: 42px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--aa-text);
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(86, 160, 255, .32);
  border-radius: 10px;
  cursor: pointer;
  font-size: 26px;
  line-height: 1;
  transition: transform .2s ease, color .2s ease,
              border-color .2s ease, background .2s ease;
}

.aa-dw-close:hover,
.aa-dw-close:focus-visible {
  color: var(--aa-blue-2);
  background: rgba(47, 134, 255, .12);
  border-color: var(--aa-blue-2);
  transform: rotate(90deg);
  outline: none;
}

.aa-dw-body {
  min-height: 0;
  padding: 20px 22px 26px;
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* --- поиск --- */

.aa-dw-form {
  display: grid;
  gap: 12px;
}

.aa-dw-input.aa-dw-input {
  width: 100%;
  height: 52px;
  padding: 0 16px;
  color: #fff;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(86, 160, 255, .34);
  border-radius: 12px;
  font-size: 16px;
  outline: none;
  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}

.aa-dw-input.aa-dw-input::placeholder { color: rgba(215, 225, 245, .5); }

.aa-dw-input.aa-dw-input:focus {
  background: rgba(47, 134, 255, .08);
  border-color: var(--aa-blue-2);
  box-shadow: 0 0 22px rgba(47, 134, 255, .24);
}

.aa-dw-btn {
  width: 100%;
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 18px;
  color: #fff;
  background: linear-gradient(135deg, var(--aa-blue), #69b6ff);
  border: 0;
  border-radius: 12px;
  box-shadow: 0 12px 26px rgba(47, 134, 255, .28);
  cursor: pointer;
  text-decoration: none;
  font-size: 16px;
  font-weight: 800;
  transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}

.aa-dw-btn:hover,
.aa-dw-btn:focus-visible {
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 16px 34px rgba(47, 134, 255, .38);
  filter: brightness(1.06);
  outline: none;
  text-decoration: none;
}

.aa-dw-btn--ghost {
  color: var(--aa-blue-2);
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(86, 160, 255, .28);
  box-shadow: none;
}

.aa-dw-btn--ghost:hover,
.aa-dw-btn--ghost:focus-visible {
  color: var(--aa-blue-2);
  background: rgba(47, 134, 255, .12);
  box-shadow: 0 10px 24px rgba(47, 134, 255, .18);
}

.aa-dw-section {
  margin: 24px 0 12px;
  color: rgba(247, 247, 247, .92);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.aa-dw-list {
  display: grid;
  gap: 10px;
}

.aa-dw-item {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 12px;
  align-items: center;
  padding: 10px;
  color: #fff;
  text-decoration: none;
  background: rgba(255, 255, 255, .045);
  border: 1px solid rgba(86, 160, 255, .20);
  border-radius: 14px;
  transition: transform .2s ease, border-color .2s ease, background .2s ease;
}

a.aa-dw-item:hover,
a.aa-dw-item:focus-visible {
  color: #fff;
  background: rgba(47, 134, 255, .10);
  border-color: rgba(105, 182, 255, .52);
  transform: translateY(-2px);
  outline: none;
  text-decoration: none;
}

.aa-dw-thumb {
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 20%, rgba(105, 182, 255, .36), transparent 58%),
    rgba(47, 134, 255, .10);
  border: 1px solid rgba(86, 160, 255, .24);
  border-radius: 12px;
  color: var(--aa-blue-2);
  font-size: 20px;
  font-weight: 800;
}

.aa-dw-thumb img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  border: 0;
  border-radius: 0;
}

.aa-dw-item-title {
  display: block;
  color: #fff;
  font-size: 15px;
  font-weight: 800;
  line-height: 1.25;
}

.aa-dw-item-meta {
  display: block;
  margin-top: 4px;
  color: var(--aa-muted);
  font-size: 13px;
  line-height: 1.35;
}

/* --- корзина --- */

.aa-dw-qty {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  color: rgba(255, 255, 255, .82);
  font-size: 13px;
  font-weight: 700;
}

.aa-dw-qty button {
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  color: #fff;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(86, 160, 255, .28);
  border-radius: 8px;
  cursor: pointer;
  font-size: 15px;
  line-height: 1;
  transition: background .2s ease, border-color .2s ease;
}

.aa-dw-qty button:hover:not([disabled]) {
  background: rgba(47, 134, 255, .18);
  border-color: var(--aa-blue-2);
}

.aa-dw-qty button[disabled] {
  opacity: .45;
  cursor: default;
}

.aa-dw-item-price {
  margin-top: 6px;
  color: var(--aa-blue-2);
  font-size: 14px;
  font-weight: 800;
}

.aa-dw-sum {
  display: grid;
  gap: 10px;
  margin-top: 20px;
  padding: 16px 18px;
  background: rgba(47, 134, 255, .08);
  border: 1px solid rgba(86, 160, 255, .24);
  border-radius: 16px;
}

.aa-dw-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  color: var(--aa-muted);
  font-size: 14px;
}

.aa-dw-row strong {
  color: #fff;
  font-size: 16px;
  white-space: nowrap;
}

.aa-dw-row--total strong { color: var(--aa-blue-2); font-size: 19px; }

.aa-dw-actions {
  display: grid;
  gap: 10px;
  margin-top: 18px;
}

.aa-dw-note {
  margin-top: 14px;
  color: var(--aa-muted);
  font-size: 12px;
  line-height: 1.45;
  text-align: center;
}

.aa-dw-empty {
  padding: 34px 10px;
  color: var(--aa-muted);
  font-size: 15px;
  line-height: 1.5;
  text-align: center;
}

.aa-dw-empty strong {
  display: block;
  margin-bottom: 8px;
  color: #fff;
  font-size: 18px;
}

/* Скелетон на время загрузки: панель открывается сразу, содержимое
   подтягивается запросом к /cart (или /search) — без него панель
   мигала бы пустотой. */
.aa-dw-skeleton {
  display: grid;
  gap: 10px;
}

.aa-dw-skeleton span {
  height: 78px;
  display: block;
  border-radius: 14px;
  background: linear-gradient(90deg,
    rgba(255, 255, 255, .04) 0%,
    rgba(105, 182, 255, .13) 50%,
    rgba(255, 255, 255, .04) 100%);
  background-size: 220% 100%;
  animation: aa-dw-shimmer 1.2s linear infinite;
}

@keyframes aa-dw-shimmer {
  from { background-position: 120% 0; }
  to   { background-position: -120% 0; }
}

.aa-dw.is-busy .aa-dw-body { opacity: .55; pointer-events: none; }

body.aa-dw-lock { overflow: hidden; }

@media (max-width: 520px) {
  .aa-dw { width: 100vw; }
  .aa-dw-head { padding: 18px 16px 14px; }
  .aa-dw-body { padding: 16px 16px 22px; }
  .aa-dw-title { font-size: 21px; }
}

@media (prefers-reduced-motion: reduce) {
  .aa-dw,
  .aa-dw-backdrop { transition: none; }
  .aa-dw-skeleton span { animation: none; }
  .aa-dw-close:hover { transform: none; }
}

/* --- крестик «убрать позицию» в панели корзины --- */
.aa-dw-item--cart {
  position: relative;
  padding-right: 44px;
}

.aa-dw-remove {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  color: rgba(255, 255, 255, .55);
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(86, 160, 255, .22);
  border-radius: 8px;
  cursor: pointer;
  font-size: 17px;
  line-height: 1;
  transition: color .2s ease, background .2s ease, border-color .2s ease;
}

.aa-dw-remove:hover,
.aa-dw-remove:focus-visible {
  color: #fff;
  background: rgba(229, 0, 107, .22);
  border-color: rgba(229, 0, 107, .55);
  outline: none;
}

/* --- «товар улетает в корзину» ---
   Летящая копия фотографии: `fixed`, поверх всего и без перехвата
   кликов, чтобы не мешать самой отправке формы. */
.aa-fly-ghost {
  position: fixed;
  z-index: 1300;
  pointer-events: none;
  border-radius: 16px;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  box-shadow: 0 18px 40px rgba(0, 0, 0, .55), 0 0 30px rgba(47, 134, 255, .45);
  will-change: transform, opacity;
}

.aa-cart-bump {
  animation: aa-cart-bump .55s cubic-bezier(.3, 1.4, .5, 1);
}

@keyframes aa-cart-bump {
  0%   { transform: scale(1); }
  35%  { transform: scale(1.35); }
  60%  { transform: scale(.92); }
  100% { transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .aa-fly-ghost { display: none; }
  .aa-cart-bump { animation: none; }
}

/* ==========================================================================
   СТРАНИЦА КОРЗИНЫ /cart
   ==========================================================================
   Раскладку темы не трогаем (колонки, порядок полей, AJAX-поле
   количества) — только оформление: страница была светло-серой вставкой
   посреди тёмного сайта. Селекторы привязаны к разметке именно этой
   страницы (`.order-cart-cols`, `.cart-product`, `.order-cart-summary`),
   поэтому в других местах ничего не заденут.
   ========================================================================== */

/* Строка позиции: у темы это flex без переноса, ширины полей заданы
   жёстко (`.views-field-anri-edit-quantity-ajax { width: 105px }`), а
   цена набрана крупным шрифтом (1.8rem) в колонке по содержимому. На
   широком экране цена не влезала в свою колонку и наезжала на «+»
   количества. Поэтому: цену прижимаем вправо, запрещаем ей переносы и
   сжатие, количеству даём вырасти по содержимому, а всей строке —
   переноситься на узких экранах вместо наложения. */
.order-cart-cols .cart-product {
  flex-wrap: wrap;
  align-items: center;
  gap: 18px;
  padding: 14px 16px;
  margin-bottom: 14px;
  background: linear-gradient(160deg, rgba(47, 134, 255, .10), rgba(255, 255, 255, .03));
  border: 1px solid rgba(86, 160, 255, .22);
  border-radius: 18px;
  transition: border-color .2s ease, background .2s ease;
}

.order-cart-cols .cart-product:hover {
  border-color: rgba(105, 182, 255, .45);
  background: linear-gradient(160deg, rgba(47, 134, 255, .16), rgba(255, 255, 255, .05));
}

.order-cart-cols .cart-product > .views-field-purchased-entity {
  flex: 1 1 260px;
  min-width: 0;
}

.order-cart-cols .cart-product > .views-field-field-user-files {
  flex: 0 0 auto;
}

.order-cart-cols .cart-product > .views-field-anri-edit-quantity-ajax {
  flex: 0 0 auto;
  width: auto;
  min-width: 118px;
}

.order-cart-cols .cart-product > .views-field-total-price__number {
  flex: 0 0 auto;
  min-width: 128px;
  margin-left: auto;
  text-align: right;
  white-space: nowrap;
}

/* Толстая синяя рамка у фотографии — от темы; делаем аккуратную. */
.order-cart-cols .cart-product__preview img {
  border: 1px solid rgba(86, 160, 255, .3);
  border-radius: 14px;
  background: #000;
}

.order-cart-cols .cart-product__name > div:first-child {
  color: #fff;
  font-weight: 800;
}

.order-cart-cols .unit-price-info,
.order-cart-cols .views-label {
  color: var(--aa-muted);
  font-size: 13px;
}

.order-cart-cols .views-field-total-price__number .field-content {
  color: var(--aa-blue-2);
  font-weight: 800;
}

/* --- правая колонка с итогами: была светло-серой плашкой --- */
/* Внутренняя плашка с итогами приходит светло-серой (#cfcfcf) — на
   тёмной странице это было единственное белое пятно. */
.order-cart-summary .order-cart-summary__container {
  padding: 16px;
  background: rgba(47, 134, 255, .08);
  border: 1px solid rgba(86, 160, 255, .24);
  border-radius: 16px;
}

.order-cart-summary {
  padding: 18px;
  background:
    radial-gradient(circle at 50% 0%, rgba(47, 134, 255, .16), transparent 60%),
    rgba(5, 12, 24, .92);
  border: 1px solid rgba(86, 160, 255, .28);
  border-radius: 20px;
}

.order-cart-summary .order-total-line,
.order-cart-summary .order-total-line-label {
  /* Метки тема красила тёмным под светлую плашку — на тёмной они
     пропадали. */
  color: var(--aa-muted);
}

.order-cart-summary .order-total-line__total .order-total-line-label {
  color: rgba(255, 255, 255, .85);
  font-weight: 700;
}

.order-cart-summary .order-total-line-value,
.order-total-line__total .order-total-line-value {
  color: #fff;
  font-weight: 800;
}

.order-total-line__total .order-total-line-value {
  color: var(--aa-blue-2);
}

/* --- кнопки страницы --- */
/* Кнопку «Заказать» тема КЛОНИРУЕТ в блок итогов (cart-summary-clone.js),
   и у клона свои правила `.cart-form .form-submit { background: none }` и
   `.order-total-line-holder .edit-checkout-clone` — обе по два класса, то
   есть при равной специфичности они выигрывали у нас (screen.css темы
   грузится последним). Поэтому селектор из трёх классов. */
.order-cart-summary .order-total-line-holder .edit-checkout-clone,
.order-cart-cols input#edit-checkout,
.order-cart-summary input#edit-checkout,
.order-cart-summary .edit-checkout-clone,
.order-cart-summary input[value="Заказать"] {
  width: 100%;
  min-height: 48px;
  padding: 0 18px;
  color: #fff;
  background: linear-gradient(135deg, var(--aa-blue), #69b6ff);
  border: 0;
  border-radius: 12px;
  box-shadow: 0 12px 26px rgba(47, 134, 255, .28);
  cursor: pointer;
  font-size: 16px;
  font-weight: 800;
  transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}

.order-cart-summary .order-total-line-holder .edit-checkout-clone:hover,
.order-cart-summary input[value="Заказать"]:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 34px rgba(47, 134, 255, .38);
  filter: brightness(1.06);
}

.order-cart-summary .order-cart-summary__continue,
.order-cart-cols .anri-cart-item-bulk-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  margin-top: 10px;
  padding: 0 18px;
  color: var(--aa-blue-2);
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(86, 160, 255, .28);
  border-radius: 12px;
  cursor: pointer;
  font-weight: 700;
  text-decoration: none;
  transition: background .2s ease, border-color .2s ease, color .2s ease;
}

.order-cart-summary .order-cart-summary__continue { width: 100%; }

.order-cart-summary .order-cart-summary__continue:hover,
.order-cart-cols .anri-cart-item-bulk-remove:hover {
  color: #fff;
  background: rgba(47, 134, 255, .16);
  border-color: rgba(47, 134, 255, .6);
}

/* Удаление — действие разрушительное, подсвечиваем розовым темы. */
.order-cart-cols .anri-cart-item-bulk-remove:hover {
  color: #fff;
  background: rgba(229, 0, 107, .18);
  border-color: rgba(229, 0, 107, .55);
}

/* --- поле количества --- */
.order-cart-cols input.quantity-edit-input {
  height: 38px;
  padding: 0 8px;
  color: #fff;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(86, 160, 255, .3);
  border-radius: 10px;
  text-align: center;
}

.order-cart-cols input.quantity-edit-input:focus {
  border-color: var(--aa-blue-2);
  box-shadow: 0 0 18px rgba(47, 134, 255, .28);
  outline: none;
}

/* ==========================================================================
   СИСТЕМНЫЕ СООБЩЕНИЯ DRUPAL → аккуратный тост
   ==========================================================================
   После заказа Drupal печатал «Футболка белая добавлено в корзину»
   голым текстом в левом верхнем углу содержимого — выглядело как сбой
   вёрстки. Показываем сообщение плашкой в правом верхнем углу; статусы
   гаснут сами (см. andre-anri-buttons.js), ошибки остаются на экране.
   ========================================================================== */

[data-drupal-messages] {
  position: fixed;
  top: 18px;
  right: 18px;
  z-index: 1250;
  width: min(420px, calc(100vw - 32px));
  display: grid;
  gap: 10px;
  pointer-events: none;
}

[data-drupal-messages] .messages,
[data-drupal-messages] > div[role] {
  position: relative;
  padding: 14px 16px 14px 46px;
  color: #fff;
  background:
    radial-gradient(circle at 12% 0%, rgba(47, 134, 255, .22), transparent 60%),
    rgba(5, 12, 24, .97);
  border: 1px solid rgba(86, 160, 255, .4);
  border-radius: 14px;
  box-shadow: 0 20px 44px rgba(0, 0, 0, .5), 0 0 26px rgba(47, 134, 255, .22);
  font-size: 15px;
  line-height: 1.4;
  pointer-events: auto;
  animation: aa-toast-in .28s cubic-bezier(.2, .8, .2, 1);
}

[data-drupal-messages] .messages::before,
[data-drupal-messages] > div[role]::before {
  content: "✓";
  position: absolute;
  top: 14px;
  left: 16px;
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  color: #fff;
  background: linear-gradient(135deg, var(--aa-blue), #69b6ff);
  border-radius: 50%;
  font-size: 12px;
  font-weight: 900;
}

[data-drupal-messages] .messages a,
[data-drupal-messages] > div[role] a {
  color: var(--aa-blue-2);
  font-weight: 700;
}

[data-drupal-messages] .messages--error,
[data-drupal-messages] .messages--warning,
[data-drupal-messages] > div[role="alert"] {
  border-color: rgba(229, 0, 107, .55);
  box-shadow: 0 20px 44px rgba(0, 0, 0, .5), 0 0 26px rgba(229, 0, 107, .25);
}

[data-drupal-messages] .messages--error::before,
[data-drupal-messages] .messages--warning::before,
[data-drupal-messages] > div[role="alert"]::before {
  content: "!";
  background: linear-gradient(135deg, #e5006b, #ff5aa0);
}

/* Заголовки «Сообщение об ошибке»/«Статус» Drupal печатает скрытыми для
   скринридеров — на этом сайте они видимы и ломают плашку. */
[data-drupal-messages] .messages__header,
[data-drupal-messages] .visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  white-space: nowrap;
}

[data-drupal-messages] .messages.aa-toast-out,
[data-drupal-messages] > div[role].aa-toast-out {
  animation: aa-toast-out .32s ease forwards;
}

@keyframes aa-toast-in {
  from { opacity: 0; transform: translateX(24px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes aa-toast-out {
  to { opacity: 0; transform: translateX(24px); }
}

@media (prefers-reduced-motion: reduce) {
  [data-drupal-messages] .messages,
  [data-drupal-messages] > div[role] { animation: none; }
}

/* --- корзина на телефоне: компактная строка ---
   На мобильном каждое поле вставало в свою строку, и одна позиция
   занимала почти весь экран (замер: 477px высоты). Собираем картинку и
   название в одну строку, количество с ценой — во вторую. */
@media (max-width: 767px) {
  .order-cart-cols .cart-product {
    /* Тема ниже 1023px раскладывает поля позиции в СТОЛБИК
       (`.cart-product { flex-direction: column }`) — из-за этого одна
       позиция и занимала весь экран. Возвращаем ряд с переносом:
       первая строка — фото и название, вторая — файлы, количество,
       цена. */
    flex-direction: row;
    flex-wrap: wrap;
    gap: 8px 12px;
    padding: 12px;
    align-items: center;
  }

  .order-cart-cols .cart-product > .views-field-purchased-entity {
    flex: 1 1 100%;
    min-width: 0;
  }

  .order-cart-cols .cart-product .cart-product__preview {
    display: flex;
    align-items: center;
    gap: 12px;
  }

  .order-cart-cols .cart-product .cart-product__preview > div:first-child {
    flex: 0 0 auto;
  }

  /* Тема резервирует слева 120px под фотографию (она позиционирована
     абсолютно) — при ширине экрана 375px колонке с содержимым остаётся
     185px, поэтому количество и цена вставали друг под друга. Мы уже
     уменьшили миниатюру до 64px, значит и резерв нужен меньше. */
  .views-element-container .cart-product.views-row.views-row {
    padding: 12px 12px 12px 88px;
  }

  .order-cart-cols .cart-product .cart-product__preview img {
    top: 12px;
    left: 12px;
  }

  /* Ширину картинке тема задаёт и атрибутом, и своим правилом —
     перебиваем повтором класса. */
  .order-cart-cols .cart-product .cart-product__preview img.cart-product__preview-img,
  .order-cart-cols .cart-product .cart-product__preview img {
    width: 64px !important;
    height: 64px;
    min-width: 0;
    object-fit: contain;
  }

  .order-cart-cols .cart-product .cart-product__name {
    min-width: 0;
    font-size: 13px;
    line-height: 1.35;
  }

  .order-cart-cols .cart-product > .views-field-field-user-files {
    flex: 0 0 auto;
    font-size: 12px;
  }

  .order-cart-cols .cart-product > .views-field-field-user-files .views-label {
    display: none;
  }

  .order-cart-cols .cart-product > .views-field-anri-edit-quantity-ajax {
    flex: 0 0 auto;
  }

  /* Цена по содержимому, а не растянутая: иначе она занимала всю ширину
     и уезжала на третью строку. */
  .order-cart-cols .cart-product > .views-field-total-price__number {
    flex: 0 0 auto;
    width: auto;
    min-width: 0;
    margin-left: auto;
  }

  .order-cart-cols .cart-product .views-field-total-price__number .field-content {
    font-size: 16px;
  }

  /* Подпись «Количество:» на узком экране только съедает место. */
  .order-cart-cols .cart-product .views-label-anri-edit-quantity-ajax {
    display: none;
  }

  /* Плашки сообщений на телефоне уводим вниз: сверху они перекрывали
     строку соцсетей и шапку. */
  [data-drupal-messages] {
    top: auto;
    bottom: 16px;
    right: 12px;
    left: 12px;
    width: auto;
  }
}

/* --- «Заказать» под выбором файла на телефоне ---
   Скрипт кладёт кнопку внутрь блока загрузки макета, но визуально она
   всё равно оставалась под описанием: тема прибивает её абсолютом
   (`@media (max-width: 767px) { .block-product-description
   .button--add-to-cart { position: absolute; left: 0; bottom: 0 } }`),
   а блок файлов лежит внутри той же колонки — правило продолжало
   действовать и после переноса. Возвращаем кнопку в поток. */
@media (max-width: 1023px) {
  .field--name-field-user-files .button--add-to-cart.button--add-to-cart {
    position: static;
    left: auto;
    right: auto;
    top: auto;
    bottom: auto;
    margin-top: 14px;
  }
}

/* Статусное «Товар добавлен в корзину» на странице товара не показываем:
   обратную связь даёт анимация полёта в корзину и счётчик в шапке, а
   плашка перекрывала соцсети сверху. Класс ставит JS. Сообщения об
   ошибках остаются видимыми — их нужно прочитать. */
/* У этой темы сообщение выводится БЕЗ класса `messages` — просто
   `<div role="contentinfo" aria-label="Статус">` внутри
   `[data-drupal-messages]`. Из-за этого первые попытки его убрать не
   срабатывали: селекторы искали `.messages`, которого в разметке нет.
   ВАЖНО: у ошибки внешний контейнер точно такой же
   (`role="contentinfo"`), отличается только `aria-label`: «Статус» против
   «Сообщение об ошибке» (внутри неё ещё и `div[role="alert"]`). Поэтому
   селектор обязан проверять именно `aria-label` — иначе вместе с
   подтверждением исчезнет и текст ошибки, и покупатель не поймёт, почему
   заказ не прошёл. */
body.aa-product-page [data-drupal-messages] .messages--status,
body.aa-product-page [data-drupal-messages] > div[role="contentinfo"][aria-label="Статус"],
body.aa-product-page .messages.messages--status {
  display: none;
}

/* ==========================================================================
   КАРТОЧКИ КАТАЛОГА НА ГЛАВНОЙ И ВЕРХНЯЯ ПОЛОСА
   ========================================================================== */

/* Тема рисует вокруг фотографии товара рамку в 5px ярко-синим
   (`.block-listings .block-item .item-image img`) — рядом с тонкими
   рамками макета это выглядит грубо. Делаем 1px в общем неоновом
   ключе; форму и скругление карточки не трогаем. */
/* Селектор темы точно такой же, а её CSS грузится последним — при
   равной специфичности победила бы она, поэтому повторяем класс. */
.block-listings.block-listings .block-item .item-image img {
  border-width: 1px;
  border-color: rgba(86, 160, 255, .35);
  transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease;
}

.block-listings.block-listings .block-item:hover .item-image img,
.block-listings.block-listings .block-item:focus-within .item-image img {
  border-color: rgba(105, 182, 255, .75);
  box-shadow: 0 0 24px rgba(47, 134, 255, .35);
}

/* Верхняя строка с соцсетями идёт фоновой картинкой темы
   (`bg-image-anri.jpg`) и светлым пятном выбивается из тёмной шапки.
   Гасим её умножением на тёмный цвет: текстура остаётся, но полоса
   становится частью шапки. Сами иконки не затрагиваются — затемняется
   только фон элемента. */
.header .top-part {
  background-color: rgba(3, 7, 15, .82);
  background-blend-mode: multiply;
  border-bottom: 1px solid rgba(86, 160, 255, .16);
}

/* --- мобильное меню: тонкие рамки и тёмный фон подменю ---
   На телефоне тема рисует и карточки пунктов, и иконки подменю в рамке
   5px ярко-синим (#4f8bfd), а панель второго уровня заливает сплошным
   #009be2 — на фоне тёмного сайта это выбивалось сильнее всего.
   Все селекторы начинаются с `.header`: у правил темы на класс меньше,
   иначе они бы выиграли (её CSS грузится последним). */
@media (max-width: 1023px) {
  .header .main-menu .menu-item.menu-item-lvl-0 .mobile-img img {
    border-width: 1px;
    border-color: rgba(86, 160, 255, .35);
    opacity: 1;
  }

  .header .main-menu .main-menu-level-1-content .menu-item-lvl-1 img {
    border-width: 1px;
    border-color: rgba(86, 160, 255, .35);
  }

  /* Панель подменю: вместо заливки #009be2 — тёмный фон в тон сайта. */
  .header .main-menu .menu-item.menu-item-lvl-0.is-active .main-menu-level-1,
  .header .main-menu .menu-item.menu-item-lvl-0.is-active .main-menu-level-1 .main-menu-level-1-content,
  .header .main-menu .menu-item .main-menu-level-1 .main-menu-level-1-content {
    background:
      radial-gradient(circle at 50% 0%, rgba(47, 134, 255, .14), transparent 40%),
      #03070f;
    color: #fff;
  }

  /* Подписи и «Назад» были рассчитаны на синий фон. */
  .header .main-menu .menu-item.menu-item-lvl-0.is-active .main-menu-level-1 .menu-item-lvl-1 .title,
  .header .main-menu .main-menu-level-1-content .menu-item-lvl-1 .title {
    color: var(--aa-blue-2);
  }

  .header .main-menu .main-menu-level-1 .back-link,
  .header .main-menu .main-menu-level-1 .back-link span {
    color: #fff;
  }
}