/* ASAS996 / Marcus: optional detail polish, version 7.
   Font family and size remain controlled by the existing theme settings.
   No font imports, icon substitutions, layout resets or payment-widget rules. */
@media screen {
  :root {
    --sf-line: #e4e7ec;
    --sf-line-hover: #bac5d3;
    --sf-radius: 8px;
    --sf-focus: #1d4ed8;
    --sf-shadow: 0 6px 20px rgba(20, 32, 53, .07);
  }

  /* Navigation: retain positions, menu colors, and hover/click handlers. */
  #headerWrapper .mainmenu-nav ul.nav > li > a {
    font-weight: 600;
    border-radius: 5px;
    transition: background-color .16s ease, color .16s ease;
  }
  #headerWrapper .mainmenu-nav ul.nav > li > a:hover,
  #headerWrapper .mainmenu-nav ul.nav > li > a:focus-visible {
    background-color: rgba(128, 128, 128, .09);
  }
  #headerWrapper .mainmenu-nav ul.classic,
  #headerWrapper .mainmenu-nav ul.mega-menu,
  #headerWrapper .mainmenu-nav ul.megamenu__submenu {
    border-radius: var(--sf-radius);
    box-shadow: 0 10px 30px rgba(20, 32, 53, .13);
  }
  #headerWrapper .mainmenu-nav ul.classic li > a,
  #headerWrapper .mainmenu-nav ul.megamenu__submenu li > a {
    border-radius: 4px;
    transition: background-color .16s ease, color .16s ease;
  }
  #headerWrapper .mainmenu-nav ul.classic li > a:hover,
  #headerWrapper .mainmenu-nav ul.megamenu__submenu li > a:hover {
    background-color: rgba(128, 128, 128, .08);
  }
  #headerWrapper .mainmenu-nav .megamenu-category-image img {
    border-radius: 6px;
  }
  #headerWrapper .search-content,
  #headerWrapper .shopping-cart,
  #headerWrapper .ht-config .sub-menu {
    border-radius: var(--sf-radius);
    box-shadow: var(--sf-shadow);
  }
  #headerWrapper .header-search input[name="keyword"] {
    border-radius: 6px 0 0 6px;
  }
  #headerWrapper .header-search .btn-search {
    border-radius: 0 6px 6px 0;
  }
  #headerWrapper .navbar-toggle.mpzen-menu-action,
  #headerWrapper .header-mob-search .search-hand { border-radius: 5px; }

  /* Requested emphasis: navigation and module headings only. */
  #headerWrapper .mainmenu-nav ul.nav > li > a > .act-underline { font-weight: 600; }
  #indexHomeBody #centercontent-wrapper .page-title > .section-title {
    font-weight: 600;
  }
  #indexHomeBody #centercontent-wrapper .page-title > .section-title > span {
    font-weight: 400;
  }
  #mainWrapper .col-sidebar .box > .title,
  #mainWrapper .leftBoxContainer > .title,
  #mainWrapper .rightBoxContainer > .title {
    background: linear-gradient(90deg, #e5edf9 0%, #f2f6fc 60%, #fbfcfe 100%);
    border-bottom: 1px solid #e0e6ef;
    border-radius: 6px;
    padding: 10px 0;
    margin-bottom: 16px;
  }
  #mainWrapper .col-sidebar .box > .title > .box-title,
  #mainWrapper .leftBoxContainer > .title > .box-title,
  #mainWrapper .rightBoxContainer > .title > .box-title {
    border-left: 3px solid var(--sf-focus);
    padding-left: 10px;
    font-weight: 600;
  }

  /* Breadcrumb-only typography exception, requested to match the reference.
     Font family/size continue to come from the theme configuration. */
  #contentMainWrapper .breadcrumb {
    background: #fff;
    padding: 18px 0;
    margin-bottom: 0;
    border: 0;
    box-shadow: none;
  }
  #contentMainWrapper .breadcrumb::before { display: none; }
  #contentMainWrapper .breadcrumb + .body-content { margin-top: 16px; }
  #contentMainWrapper .breadcrumb-ul {
    display: flex;
    align-items: center;
    margin: 0;
    padding: 0;
    list-style: none;
    min-width: 0;
  }
  #contentMainWrapper .breadcrumb,
  #contentMainWrapper .breadcrumb-ul > li,
  #contentMainWrapper .breadcrumb-ul > li > a {
    font-weight: 400;
    font-style: normal;
  }
  #contentMainWrapper .breadcrumb-ul > li {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    color: #7b8087;
    white-space: nowrap;
  }
  #contentMainWrapper .breadcrumb-ul > li > a { color: #7b8087; }
  #contentMainWrapper .breadcrumb-ul > li > a:hover { color: #20242b; }
  #contentMainWrapper .breadcrumb-ul > li::after {
    content: "\00b7";
    display: inline-block;
    padding: 0;
    margin: 0 10px;
    color: #a8adb5;
  }
  #contentMainWrapper .breadcrumb-ul > li:last-child {
    display: block;
    flex: 0 1 auto;
    min-width: 0;
    color: #20242b;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  #contentMainWrapper .breadcrumb-ul > li:last-child::after { display: none; }

  /* Cards: decorate the existing grid instead of replacing it. */
  #centercontent-wrapper .product:not(.product-micro) > .product-wrapper {
    box-sizing: border-box;
    border: 1px solid var(--sf-line);
    border-radius: var(--sf-radius);
    background: #fff;
    transition: border-color .18s ease, box-shadow .18s ease;
  }
  #centercontent-wrapper .product:not(.product-micro) > .product-wrapper:hover,
  #centercontent-wrapper .product:not(.product-micro) > .product-wrapper:focus-within {
    border-color: var(--sf-line-hover);
    box-shadow: var(--sf-shadow);
  }
  #centercontent-wrapper .product:not(.product-micro) > .product-wrapper > .product-img,
  #centercontent-wrapper .product:not(.product-micro) > .product-wrapper > .product-img .image,
  #centercontent-wrapper .product:not(.product-micro) > .product-wrapper > .product-img img {
    border-radius: 7px;
  }
  #centercontent-wrapper .product:not(.product-micro) > .product-wrapper > .product-content {
    padding: 14px 12px;
  }
  #centercontent-wrapper .product:not(.product-micro) .product-content .product-name {
    margin-top: 0;
    margin-bottom: 9px;
  }
  #centercontent-wrapper .product .product-cart .button {
    border-radius: 5px;
    transition: background-color .16s ease, border-color .16s ease, color .16s ease;
  }
  #centercontent-wrapper .product .badges > span,
  #centercontent-wrapper .product .badges > a { border-radius: 4px; }
  /* Do not turn the compact sidebar product list into large cards. */
  .col-sidebar .product > .product-wrapper { box-shadow: none; }
  #mainWrapper .col-sidebar .box,
  #mainWrapper .leftBoxContainer,
  #mainWrapper .rightBoxContainer {
    border: 1px solid #cbd2dc !important;
    border-radius: 10px !important;
    box-shadow: 0 2px 10px rgba(20, 32, 53, .045);
    background-clip: padding-box;
    background: #fff;
    transition: border-color .18s ease, box-shadow .18s ease;
  }
  #mainWrapper .col-sidebar .box:hover,
  #mainWrapper .leftBoxContainer:hover,
  #mainWrapper .rightBoxContainer:hover {
    border-color: #aebacc !important;
    box-shadow: var(--sf-shadow);
  }
  #mainWrapper .col-sidebar .box > .title,
  #mainWrapper .leftBoxContainer > .title,
  #mainWrapper .rightBoxContainer > .title { border-radius: 9px 9px 0 0; }
  #mainWrapper .col-sidebar .box > .box-content,
  #mainWrapper .leftBoxContainer > .box-content,
  #mainWrapper .rightBoxContainer > .box-content { border-radius: 0 0 9px 9px; }
  #mainWrapper .col-sidebar .product-img img {
    border-radius: 6px;
  }
  #categoryImgListing img,
  #categoryImg img {
    border-radius: 10px;
  }
  /* Apply image rounding independently of desktop gallery layout/support. */
  #productGeneral .product-main-image,
  #productGeneral .product-main-image-item,
  #productGeneral .product-main-image__item,
  #productGeneral .product-main-image img,
  #productGeneral .fotorama__stage,
  #productGeneral .fotorama__img {
    border-radius: 10px !important;
  }
  #productGeneral .product-main-image img {
    box-sizing: border-box;
    border: 1px solid var(--sf-line);
  }
  #productGeneral #productAdditionalImages li > a,
  #productGeneral #productAdditionalImages li > a > img { border-radius: 6px !important; }

  /* Detail controls keep all option selection, zoom and quantity behavior. */
  #productGeneral .cart-wrapper .button,
  #productGeneral .cart-wrapper .btn,
  #productGeneral .product-link > li > a { border-radius: 6px; }
  #productGeneral .qty-wra,
  #productGeneral .qty-wra input { border-radius: 5px; }
  #productGeneral #cartAdd .qty-wra input[name="cart_quantity"] {
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: transparent;
  }
  #productGeneral .productAttributes select { border-radius: 6px; }
  #productGeneral .navNextPrevList a { border-radius: 4px; }
  #productGeneral #product-tabs > li > a { border-radius: 6px 6px 0 0; }
  #productGeneral .collateral-tabs > dt { border-radius: 6px; }

  /* Forms: target store inputs only; exclude hidden, radio, checkbox, iframe. */
  #centercontent-wrapper .centerColumn input[type="text"],
  #centercontent-wrapper .centerColumn input[type="email"],
  #centercontent-wrapper .centerColumn input[type="password"],
  #centercontent-wrapper .centerColumn input[type="tel"],
  #centercontent-wrapper .centerColumn select,
  #centercontent-wrapper .centerColumn textarea {
    border: 1px solid #cbd2dc;
    border-radius: 6px;
    box-shadow: none;
    transition: border-color .16s ease, box-shadow .16s ease;
  }
  #centercontent-wrapper .centerColumn input[type="text"]:focus,
  #centercontent-wrapper .centerColumn input[type="email"]:focus,
  #centercontent-wrapper .centerColumn input[type="password"]:focus,
  #centercontent-wrapper .centerColumn input[type="tel"]:focus,
  #centercontent-wrapper .centerColumn select:focus,
  #centercontent-wrapper .centerColumn textarea:focus {
    border-color: var(--sf-focus);
    box-shadow: 0 0 0 3px rgba(29, 78, 216, .12);
  }
  #centercontent-wrapper .centerColumn form .button,
  #centercontent-wrapper .centerColumn form .btn,
  #centercontent-wrapper .centerColumn input[type="submit"] {
    border-radius: 6px;
    transition: background-color .16s ease, border-color .16s ease, box-shadow .16s ease;
  }
  #mainWrapper a:focus-visible,
  #mainWrapper button:focus-visible,
  #mainWrapper input:focus-visible,
  #mainWrapper select:focus-visible,
  #mainWrapper textarea:focus-visible {
    outline: 2px solid var(--sf-focus);
    outline-offset: 3px;
  }
  #mainWrapper button:disabled,
  #mainWrapper input[type="submit"]:disabled { cursor: not-allowed; }

  /* Small surrounding components. No new spacing for the hero or sections. */
  #centercontent-wrapper .list-mode select { border-radius: 5px; }
  #centercontent-wrapper .pagination li > a,
  #centercontent-wrapper .pagination li > span,
  #centercontent-wrapper .pagination li.current { border-radius: 5px; }
  #centercontent-wrapper .pagination li > a {
    transition: background-color .16s ease, border-color .16s ease;
  }
  #centercontent-wrapper .messageStackError,
  #centercontent-wrapper .messageStackSuccess,
  #centercontent-wrapper .messageStackWarning,
  #centercontent-wrapper .messageStackCaution { border-radius: 6px; }
  .pzenajx-wrapper .modal-content,
  #quickViewModal .modal-content { border-radius: 10px; }

  /* Current Marcus zoom gallery only. Keep original image/link nodes and
     original zoom handlers; unrecognized galleries use the original layout. */
  @media (min-width: 992px) {
    @supports selector(:has(*)) {
      #productGeneral #prod-info-top > .sigle-product:has(#smallGallery) > .product-img-box {
        width: 56%;
      }
      #productGeneral #prod-info-top > .sigle-product:has(#smallGallery) > .product-info-main {
        width: 44%;
      }
    #productGeneral .prodinfo-image:has(#smallGallery) {
      float: none;
      width: 100%;
      max-width: none;
      display: grid;
      grid-template-columns: 72px minmax(0, 1fr);
      gap: 16px;
      align-items: start;
    }
    #productGeneral .prodinfo-image:has(#smallGallery) > .product-main-image {
      grid-column: 2;
      grid-row: 1;
      min-width: 0;
      margin: 0;
    }
    #productGeneral .prodinfo-image:has(#smallGallery) .product-main-image-item {
      float: none;
      width: 100%;
      margin-bottom: 0;
    }
    #productGeneral .prodinfo-image:has(#smallGallery) .product-zoom {
      display: block;
      width: 100%;
      max-width: 100%;
      height: auto;
      border-radius: var(--sf-radius);
    }
    #productGeneral .prodinfo-image:has(#smallGallery) > #productAdditionalImages {
      grid-column: 1;
      grid-row: 1;
      min-width: 0;
      min-height: 0;
      align-self: stretch;
      position: relative;
      margin: 0;
    }
    /* The rail cannot size the grid row: the main image alone sets its height.
       Native overflow appears only if all thumbnails exceed that height. */
    #productGeneral .prodinfo-image:has(#smallGallery) > #productAdditionalImages > .product-images-carousel {
      position: absolute;
      inset: 0;
      min-height: 0;
    }
    #productGeneral #smallGallery { height: 100%; margin: 0; padding: 0; }
    #productGeneral #smallGallery .owl-stage-outer,
    #productGeneral #smallGallery .owl-wrapper-outer {
      height: 100% !important;
      max-height: none;
      overflow-x: hidden;
      overflow-y: auto;
      overscroll-behavior: contain;
      scrollbar-width: thin;
      touch-action: pan-y;
    }
    #productGeneral #smallGallery .owl-stage,
    #productGeneral #smallGallery .owl-wrapper {
      display: flex;
      flex-direction: column;
      width: 100% !important;
      transform: none !important;
      left: 0 !important;
    }
    #productGeneral #smallGallery .owl-item {
      float: none;
      width: 100% !important;
      margin: 0 0 10px !important;
    }
    #productGeneral #smallGallery .owl-item:last-child { margin-bottom: 0 !important; }
    #productGeneral #smallGallery li { float: none; margin: 0; }
    #productGeneral #smallGallery li > a {
      display: block;
      padding: 3px;
      border: 1px solid var(--sf-line);
      border-radius: 6px;
      background: #fff;
    }
    #productGeneral #smallGallery li > a.active,
    #productGeneral #smallGallery li > a:hover,
    #productGeneral #smallGallery li > a:focus-visible { border-color: var(--sf-focus); }
    #productGeneral #smallGallery li > a > img {
      display: block;
      width: 100%;
      height: auto;
      border-radius: 3px;
    }
    #productGeneral #smallGallery .owl-controls,
    #productGeneral #smallGallery .owl-nav,
    #productGeneral #smallGallery .owl-dots { display: none; }
    }
  }

  @media (max-width: 767px) {
    #contentMainWrapper .breadcrumb { padding: 13px 0; }
    #contentMainWrapper .breadcrumb-ul { flex-wrap: wrap; row-gap: 4px; }
    #contentMainWrapper .breadcrumb-ul > li:last-child { flex-basis: 100%; }
    #centercontent-wrapper .product:not(.product-micro) > .product-wrapper > .product-content {
      padding: 11px 10px;
    }
  }
  @media (prefers-reduced-motion: reduce) {
    #headerWrapper .mainmenu-nav ul.nav > li > a,
    #headerWrapper .mainmenu-nav ul.classic li > a,
    #headerWrapper .mainmenu-nav ul.megamenu__submenu li > a,
    #centercontent-wrapper .product > .product-wrapper,
    #left-column .leftBoxContainer.box,
    #right-column .rightBoxContainer.box,
    #centercontent-wrapper .product .product-cart .button,
    #centercontent-wrapper .centerColumn input,
    #centercontent-wrapper .centerColumn select,
    #centercontent-wrapper .centerColumn textarea,
    #centercontent-wrapper .centerColumn form .button,
    #centercontent-wrapper .centerColumn form .btn,
    #centercontent-wrapper .pagination li > a { transition: none; }
  }
}