/* Smart Promo Media — Evellmax / Journal 3.1.7 — UX layer v2
 * Scope: visual styles only. No cart, price, checkout or stock behavior changes.
 * Install only on protected staging; remove the matching OCMOD to roll back.
 */
:root {
  --evx-ink: #192534;
  --evx-blue: #0a378f;   /* existing Journal COLOR_4 */
  --evx-link: #075db4;
  --evx-pale: #f4f7fb;
  --evx-line: #e1e7ef;
  --evx-soft-ink: #596879;
  --evx-radius: 10px;
  --evx-shadow: 0 12px 35px rgba(15, 35, 56, .075);
}
/* A. Base: consistent keyboard focus and predictable layout with Greek text. */
.site-wrapper { color: var(--evx-ink); }
.site-wrapper *, .mobile-container * { min-width: 0; }
.site-wrapper a:focus-visible,
.site-wrapper button:focus-visible,
.site-wrapper select:focus-visible,
.site-wrapper input:focus-visible,
.mobile-container a:focus-visible,
.mobile-container button:focus-visible {
  outline: 3px solid #5198e5 !important;
  outline-offset: 3px;
}
.site-wrapper img { max-width: 100%; }
.site-wrapper h1, .site-wrapper h2, .site-wrapper h3,
.site-wrapper .name, .site-wrapper .banner-text,
.site-wrapper .title, .site-wrapper .refine-name {
  overflow-wrap: anywhere;
  hyphens: auto;
}
/* B. Header. Preserve Journal's native structure and all dropdown behaviors. */
.site-wrapper > header { box-shadow: 0 5px 24px rgba(0,0,0,.09); }
.site-wrapper > header .top-bar { min-height: 30px; }
.site-wrapper > header .mid-bar { min-height: 76px; }
.site-wrapper > header #logo img {
  width: auto;
  max-height: 53px;
  object-fit: contain;
}
.site-wrapper > header .desktop-main-menu-wrapper .j-menu > li > a {
  padding-inline: clamp(9px, 1vw, 19px) !important;
  letter-spacing: .012em;
  font-weight: 650;
  overflow-wrap: normal;
  white-space: nowrap;
  transition: color .18s ease, background-color .18s ease;
}
.site-wrapper > header .desktop-main-menu-wrapper .j-menu > li > a:hover,
.site-wrapper > header .desktop-main-menu-wrapper .j-menu > li > a:focus-visible {
  color: #a9d4ff !important;
}
/* Don't put overflow:hidden on any navigation ancestor: dropdowns need it visible. */
.site-wrapper > header .desktop-main-menu-wrapper .dropdown-menu {
  border: 1px solid rgba(0,0,0,.09);
  box-shadow: 0 18px 38px rgba(0,0,0,.17);
}
/* C. Page rhythm and section headings. */
.site-wrapper .container { max-width: 1440px; }
.site-wrapper .module-title,
.site-wrapper .page-title {
  letter-spacing: -.025em;
  line-height: 1.2;
  overflow-wrap: anywhere;
}
.site-wrapper .breadcrumb { row-gap: 5px; }
.site-wrapper .breadcrumb li { overflow-wrap: anywhere; }
/* D. Promoted category banners: maintain editorial image-first layout. */
.site-wrapper .module-banners .banner,
.site-wrapper .module-banners .banner-item {
  position: relative;
  border-radius: var(--evx-radius);
}
.site-wrapper .module-banners .banner a,
.site-wrapper .module-banners .banner-item a {
  display: block;
  position: relative;
  overflow: hidden;
  border-radius: var(--evx-radius);
}
.site-wrapper .module-banners .banner img,
.site-wrapper .module-banners .banner-item img {
  width: 100%;
  height: auto;
  transition: transform .4s ease;
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .site-wrapper .module-banners .banner a:hover img,
  .site-wrapper .module-banners .banner-item a:hover img { transform: scale(1.025); }
}
/* E. Listing filters, subcategories and editorial cards. */
.site-wrapper .refine-categories .refine-item a {
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 10px;
  border: 1px solid var(--evx-line);
  border-radius: var(--evx-radius);
  padding: 12px;
  background: #fff;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.site-wrapper .refine-categories .refine-item a:hover {
  border-color: #98badd;
  box-shadow: var(--evx-shadow);
}
.site-wrapper .refine-categories .refine-item img {
  max-height: 190px;
  width: 100%;
  object-fit: contain;
}
.site-wrapper .refine-name { line-height: 1.35; font-weight: 650; }
.site-wrapper .products-filter {
  border: 1px solid var(--evx-line);
  border-radius: 10px;
  padding: 10px 14px;
  background: #fff;
}
.site-wrapper .products-filter select { max-width: 100%; }
.site-wrapper .main-products .product-layout,
.site-wrapper .module-products .product-layout { display: flex; }
.site-wrapper .main-products .product-layout > .product-thumb,
.site-wrapper .module-products .product-layout > .product-thumb {
  width: 100%;
  border: 1px solid var(--evx-line);
  border-radius: var(--evx-radius);
  background: #fff;
  overflow: hidden;
  transition: box-shadow .2s ease, border-color .2s ease;
}
.site-wrapper .main-products .product-layout > .product-thumb:hover,
.site-wrapper .module-products .product-layout > .product-thumb:hover {
  box-shadow: var(--evx-shadow);
  border-color: #bfd0e4;
}
.site-wrapper .main-products .product-thumb .image,
.site-wrapper .module-products .product-thumb .image { background: #fff; }
.site-wrapper .main-products .product-thumb .name a,
.site-wrapper .module-products .product-thumb .name a {
  color: var(--evx-ink);
  font-weight: 650;
  line-height: 1.5;
  white-space: normal;
  overflow-wrap: anywhere;
}
.site-wrapper .main-products .product-thumb .name a:hover,
.site-wrapper .module-products .product-thumb .name a:hover { color: var(--evx-link); }
.site-wrapper .main-products .product-thumb .price,
.site-wrapper .module-products .product-thumb .price { font-weight: 700; }
.site-wrapper .product-thumb .btn-cart,
.site-wrapper .product-info .btn-cart,
.site-wrapper .product-info #button-cart {
  border-radius: 6px;
  min-height: 42px;
}
/* F. Product page. Leave variant forms, B2B price rules and gallery scripts alone. */
body.product-product #product-product .product-info .product-image img {
  max-width: 100%;
  height: auto;
  object-fit: contain;
}
body.product-product #product-product .product-info .product-right {
  overflow-wrap: anywhere;
}
body.product-product #product-product .product-info input,
body.product-product #product-product .product-info select {
  max-width: 100%;
}
/* G. Contact form and footer: readability without hiding live validation. */
body.information-contact #content .form-control,
body.information-contact #content textarea,
.site-wrapper .form-control {
  max-width: 100%;
  border-radius: 6px;
}
body.information-contact #content textarea { min-height: 120px; }
.site-wrapper footer a:focus-visible { outline-offset: 3px; }
/* H. Phone/tablet. Only layout rules; native Journal mobile menu remains in control. */
@media (max-width: 1024px) {
  .site-wrapper > header .desktop-main-menu-wrapper .j-menu > li > a {
    padding-inline: 8px !important;
  }
  .site-wrapper .products-filter { padding: 10px; }
}
@media (max-width: 767px) {
  .site-wrapper .container { padding-inline: 14px; }
  .site-wrapper .module-title,
  .site-wrapper .page-title { font-size: clamp(24px, 6vw, 33px); }
  .site-wrapper .main-products .product-thumb .name,
  .site-wrapper .module-products .product-thumb .name { line-height: 1.4; }
  .site-wrapper .main-products .product-thumb .caption,
  .site-wrapper .module-products .product-thumb .caption { overflow-wrap: anywhere; }
  .site-wrapper .products-filter .select-group {
    max-width: 100%;
    flex-wrap: wrap;
  }
  .mobile-container .j-menu a,
  .mobile-container .j-menu span { overflow-wrap: anywhere; }
}
@media (prefers-reduced-motion: reduce) {
  .site-wrapper .module-banners img,
  .site-wrapper .product-thumb,
  .site-wrapper .refine-item a { transition: none !important; }
}