/*
 * Brutarii p15_design: layout and responsive fixes for Journal 3.2.10, loaded last (after Journal, customCSS,
 * br_visual.css) by vqmod/xml/br_p15_design.xml. Palette and fonts are the shop's own (Journal variables):
 * brown #301605 (Accent 1), orange #eb6626 (Accent 2), slate #303841 / #3a4750 (Text Dark / Footer),
 * Ubuntu (text), Oswald (headings). !important only where Journal itself uses it, ids or inline styles.
 */
:root {
  --br-brown: #301605;
  --br-orange: #eb6626;
  --br-slate: #303841;
  --br-band: #1d1d1d;
}

/* ---------------------------------------------------------------------------------------------
 * 1. No horizontal scroll on any page (rows with negative margins, slider layers wider than the screen)
 * --------------------------------------------------------------------------------------------- */
html, body {
  overflow-x: clip;
}

@media (max-width: 1023px) {
  #content > .row,
  .container > .row {
    margin-left: 0;
    margin-right: 0;
  }
}

/* ---------------------------------------------------------------------------------------------
 * 2. Desktop header (Compact header, module 286): phone + social links sit on the dark band ABOVE the
 *    header box, as on the 3.1 site (customCSS pushes the box 45px down); only logo, main menu and
 *    search stay inside the box, so it never gets wider than the screen.
 * --------------------------------------------------------------------------------------------- */
.desktop-header-active header {
  background: var(--br-band);
}

.desktop-header-active .header-compact .mid-bar {
  position: relative;
}

.desktop-header-active .header-compact .header-cart-group > .secondary-menu {
  position: absolute;
  right: 0;
  top: auto;
  bottom: 100%;
  height: auto;
  margin-bottom: 9px;
}

.desktop-header-active div.secondary-menu .top-menu > .j-menu > .menu-item > a,
.desktop-header-active div.secondary-menu .top-menu > .j-menu > .menu-item > a > .links-text {
  color: #fff;
  text-shadow: none;
  font-size: 13px;
  letter-spacing: .03em;
}

.no-touchevents.desktop-header-active div.secondary-menu .top-menu > .j-menu > .menu-item:hover > a,
.no-touchevents.desktop-header-active div.secondary-menu .top-menu > .j-menu > .menu-item:hover > a > .links-text {
  color: var(--br-orange);
}

.desktop-header-active div.secondary-menu .top-menu > .j-menu > .menu-item > a::before {
  font-size: 18px;
}

/* the main menu shrinks before it can push the search icon off the box (1025-1279px) */
@media (max-width: 1279px) {
  .desktop-header-active .header-compact .desktop-main-menu-wrapper .j-menu > .menu-item > a {
    padding-left: 9px;
    padding-right: 9px;
  }

  .desktop-header-active .header-compact .desktop-main-menu-wrapper .j-menu > .menu-item > a > .links-text {
    font-size: 14px;
  }
}

/* ---------------------------------------------------------------------------------------------
 * 3. Top notice bar ("LICHIDARE DE STOC", custom HTML .br-notif in the Header Notice module 56):
 *    the inline style uses 24px Arial everywhere; smaller and centred on tablets and phones
 * --------------------------------------------------------------------------------------------- */
@media (max-width: 1023px) {
  .module-header_notice .br-notif {
    font-size: 17px;
    gap: 4px 10px;
    padding: 10px 16px;
  }
}

@media (max-width: 470px) {
  .module-header_notice .br-notif {
    font-size: 14px;
    line-height: 1.35;
    padding: 8px 12px;
  }
}

/* ---------------------------------------------------------------------------------------------
 * 4. Mobile top bar (account + phone on the brown band): white text, no white glow
 * --------------------------------------------------------------------------------------------- */
html.mobile-header-active .mobile-header .mobile-top-bar .top-menu > .j-menu > .menu-item > a,
html.mobile-header-active .mobile-header .mobile-top-bar .top-menu > .j-menu > .menu-item > a > .links-text,
html.mobile-header-active .mobile-header .mobile-top-bar .top-menu > .j-menu > .menu-item > a::before {
  color: #fff;
  text-shadow: none;
}

/* ---------------------------------------------------------------------------------------------
 * 5. Product page: stock / brand / model / weight / size list and the brand logo never overlap
 * --------------------------------------------------------------------------------------------- */
.product-info .product-stats {
  flex-wrap: wrap;
  gap: 10px 16px;
}

.product-info .product-stats > ul {
  flex: 1 1 220px;
  min-width: 0;
}

.product-info .product-stats > .brand-image {
  flex: 0 0 auto;
  align-self: flex-start;
}

@media (max-width: 760px) {
  .product-info .product-stats > ul {
    display: block;
    flex-basis: 100%;
    height: auto;
  }

  .product-info .product-stats > ul > li {
    overflow-wrap: anywhere;
    margin-bottom: 4px;
  }

  /* on phones the brand logo box spilled over the list: the brand is shown as a text line instead */
  .product-info .product-stats > .brand-image {
    display: none;
  }

  .product-info .product-stats > ul > li.product-manufacturer {
    display: flex;
  }
}

/* ---------------------------------------------------------------------------------------------
 * 6. "Added to cart" / wishlist / compare notification: solid card (the semi-transparent one let the
 *    header show through the text), close button inside the screen on phones
 * --------------------------------------------------------------------------------------------- */
.notification-wrapper .notification {
  background: #fff;
  box-shadow: 0 12px 40px rgba(0, 0, 0, .28);
  border-radius: 6px;
}

.notification-wrapper .notification .notification-close {
  top: 6px;
  right: 6px;
}

@media (max-width: 470px) {
  .notification-wrapper .notification {
    max-width: calc(100vw - 16px);
  }
}

/* ---------------------------------------------------------------------------------------------
 * 7. Phones: the round cookie-preferences button (bottom-left) and Journal's scroll-to-top button
 *    (bottom-right) must not cover the copyright line at the end of the page
 * --------------------------------------------------------------------------------------------- */
@media (max-width: 760px) {
  footer {
    padding-bottom: 72px;
  }
}