/*
 * Brutarii p13 (visual): fixes for the Journal 3.1.8 -> 3.2.10 upgrade.
 * Loaded after the Journal CSS and the skin custom CSS (br_p13_visual.xml), so a selector that repeats the Journal
 * one wins by order. !important only where Journal itself uses !important, an id selector or an inline style.
 * Font sizes: the font_size variables (DEFAULT 14, Medium 1/2 15/16, Heading 4 22) all have values on brutarii,
 * so the 10px fallback fix is NOT needed here (overriding them with 1em would shrink the real sizes).
 */

/* Category sidebar (accordion menu): long names ran under the +/- toggle; the ellipsis now ends before it */
.accordion-menu .j-menu .menu-item > a > .links-text {
  padding-right: 28px;
  box-sizing: border-box;
}

/* Mobile menu: the submenu items are 10px in 3.2; 15px rows of 44px (touch target), next level 14px */
html body .mobile-main-menu-wrapper .main-menu.accordion-menu .j-menu .j-menu .menu-item > a,
html body .mobile-main-menu-wrapper .main-menu.accordion-menu .j-menu .j-menu .menu-item > a > .links-text {
  font-size: 15px;
}

html body .mobile-main-menu-wrapper .main-menu.accordion-menu .j-menu .j-menu .menu-item > a {
  min-height: 44px;
  padding-top: 11px;
  padding-bottom: 11px;
}

html body .mobile-main-menu-wrapper .main-menu.accordion-menu .j-menu .j-menu .j-menu .menu-item > a,
html body .mobile-main-menu-wrapper .main-menu.accordion-menu .j-menu .j-menu .j-menu .menu-item > a > .links-text {
  font-size: 14px;
}

/* Phones: the "added to cart" popup is 400px wide in Journal 3.2 and is cut on a 360-414px screen */
@media (max-width: 575px) {
  html body .notification-wrapper .notification {
    width: calc(100vw - 16px);
    max-width: calc(100vw - 16px);
    margin-right: 8px;
    margin-left: 8px;
  }

  html body .notification-wrapper .notification-content > img {
    flex-shrink: 0;
    width: 88px;
    height: auto;
  }

  html body .notification-wrapper .notification-buttons {
    flex-wrap: wrap;
    gap: 8px;
  }

  html body .notification-wrapper .notification-buttons .btn {
    flex: 1 1 auto;
    margin: 0;
  }
}

/* Product options (product page and the "add to cart" options popup): the label column has no right padding, so a long
   label and its required asterisk touched the first option box */
.product-options .form-group > .control-label {
  padding-right: 12px;
}

/* Google My Maps / YouTube embeds in Journal blocks (home map, videos) keep a fixed 640px width from the editor:
   never wider than the column on phones */
.module-blocks iframe {
  max-width: 100%;
}