/* =========================================================
   OHS — SHOP Mega Menu (Desktop) — CLEAN LOCKED BUILD v1.2
   Scope: add CSS class "oh-shop-mega" to the SHOP menu item
   ========================================================= */

@media (min-width:1025px){

  /* ==========================
     GLOBAL DIALS (locked)
     ========================== */
  .oh-shop-mega{
    /* spacing between mega columns */
    --oh-gap: 14px;
    --oh-col-pad: 14px;

    /* Health Benefit (LOCKED by you) */
    --oh-hb-colw: 180px;
    --oh-hb-gap:  16px;
    --oh-hb-min:  640px;

    /* Featured tiles */
    --oh-feat-tile: 270px;       /* square size */
    --oh-feat-gap:  22px;        /* gap between tiles */
    --oh-feat-radius: 22px;      /* rounding */
    --oh-feat-title-h: 46px;     /* reserved bottom title height */
    --oh-feat-inset: 14px;       /* padding inside tile */
    --oh-feat-img-inset: 12px;   /* bottle zone inset (smaller = bigger bottle) */
  }

  /* ==========================
     1) MEGA COLUMNS GRID
     (Supplements | Health Benefit | Featured)
     ========================== */
  .oh-shop-mega > .sub-menu{
    display: grid !important;
    align-items: start !important;
    column-gap: var(--oh-gap) !important;
    row-gap: 0 !important;
    grid-template-columns: max-content max-content max-content !important;
  }

  .oh-shop-mega > .sub-menu > li{
    width: auto !important;
    box-sizing: border-box !important;
    padding-left: var(--oh-col-pad) !important;
    padding-right: var(--oh-col-pad) !important;
  }

  .oh-shop-mega > .sub-menu > li:first-child{ padding-right: 10px !important; }
  .oh-shop-mega > .sub-menu > li:nth-child(2){ padding-left: 10px !important; }

  /* ==========================
     2) HEALTH BENEFIT (2nd column)
     ========================== */
  .oh-shop-mega > .sub-menu > li:nth-child(2){
    width: max-content !important;
    min-width: var(--oh-hb-min) !important;
    max-width: calc(100vw - 520px) !important;
  }

  .oh-shop-mega > .sub-menu > li:nth-child(2) > .sub-menu{
    display: block !important;
    flex: initial !important;
    flex-direction: initial !important;
    flex-wrap: initial !important;

    column-count: 3 !important;
    column-width: var(--oh-hb-colw) !important;
    column-gap: var(--oh-hb-gap) !important;
    column-fill: balance !important;

    width: max-content !important;
    max-width: 100% !important;
  }

  .oh-shop-mega > .sub-menu > li:nth-child(2) > .sub-menu > li{
    break-inside: avoid !important;
    -webkit-column-break-inside: avoid !important;
    page-break-inside: avoid !important;
  }

  .oh-shop-mega > .sub-menu > li:nth-child(2) > .sub-menu > li > a{
    display: flex !important;
    width: 100% !important;
    align-items: center !important;
  }

  /* ==========================
     3) FEATURED (3rd column)
     2 premium square tiles + badges + no cropping
     ========================== */

  .oh-shop-mega > .sub-menu > li:nth-child(3){
    width: max-content !important;
  }

  .oh-shop-mega > .sub-menu > li:nth-child(3) > .sub-menu{
    display: grid !important;
    grid-template-columns: repeat(2, var(--oh-feat-tile)) !important;
    gap: var(--oh-feat-gap) !important;
    width: max-content !important;
    margin-top: 12px !important;
    align-items: start !important;
    justify-content: start !important;
  }

  .oh-shop-mega > .sub-menu > li:nth-child(3) > .sub-menu > li{
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
  }

  /* Assign NEW images + badge text */
  .oh-shop-mega > .sub-menu > li:nth-child(3) > .sub-menu > li:nth-child(1) > a{
    --oh-feature-img: url("https://optimumhealthstores.com/wp-content/uploads/2026/03/Bosmeric-SR-120caps-Bottle.webp");
    --oh-badge: "BEST SELLER";
  }
  .oh-shop-mega > .sub-menu > li:nth-child(3) > .sub-menu > li:nth-child(2) > a{
    --oh-feature-img: url("https://optimumhealthstores.com/wp-content/uploads/2026/03/Mara-labs-brocelite-kids-30caps-Bottle.webp");
    --oh-badge: "FLASH SALE";
  }

  .oh-shop-mega > .sub-menu > li:nth-child(3) > .sub-menu > li > a{
    width: var(--oh-feat-tile) !important;
    aspect-ratio: 1 / 1 !important;
    position: relative !important;
    overflow: hidden !important;
    border-radius: var(--oh-feat-radius) !important;
    isolation: isolate !important;

    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-end !important;

    padding: var(--oh-feat-inset) !important;
    text-align: center !important;
    text-decoration: none !important;

    background:
      linear-gradient(135deg, rgba(255,255,255,.10), rgba(255,255,255,.04)) !important;
    border: 1px solid rgba(255,255,255,.18) !important;
    box-shadow:
      0 14px 30px rgba(0,0,0,.18),
      inset 0 1px 0 rgba(255,255,255,.10) !important;

    transition: transform .18s ease, background .18s ease, border-color .18s ease;
  }

  .oh-shop-mega > .sub-menu > li:nth-child(3) > .sub-menu > li > a:hover{
    transform: translateY(-3px) !important;
    border-color: rgba(255,255,255,.26) !important;
    background:
      linear-gradient(135deg, rgba(255,255,255,.13), rgba(255,255,255,.05)) !important;
  }

  /* Hide any theme icon wrapper (we render the bottle ourselves) */
  .oh-shop-mega > .sub-menu > li:nth-child(3) > .sub-menu > li > a
  :is(.ct-menu-item-icon,.ct-icon-container,.ct-image-container,.menu-item-icon){
    display: none !important;
  }

  /* Bottle image layer (NO CROPPING) */
  .oh-shop-mega > .sub-menu > li:nth-child(3) > .sub-menu > li > a::before{
    content: "" !important;
    position: absolute !important;
    left: var(--oh-feat-img-inset) !important;
    right: var(--oh-feat-img-inset) !important;
    top: var(--oh-feat-img-inset) !important;
    bottom: calc(var(--oh-feat-img-inset) + var(--oh-feat-title-h)) !important;

    background-image: var(--oh-feature-img) !important;
    background-repeat: no-repeat !important;
    background-position: center !important;

    /* contain = never chop top/bottom */
    background-size: contain !important;

    filter: drop-shadow(0 14px 18px rgba(0,0,0,.28));
    pointer-events: none !important;
    z-index: 0 !important;
  }

  /* Badge */
  .oh-shop-mega > .sub-menu > li:nth-child(3) > .sub-menu > li > a::after{
    content: var(--oh-badge) !important;
    position: absolute !important;
    top: 14px !important;
    left: 14px !important;
    z-index: 2 !important;

    font-size: 11px !important;
    font-weight: 800 !important;
    letter-spacing: .8px !important;
    text-transform: uppercase !important;

    padding: 7px 10px !important;
    border-radius: 999px !important;

    color: rgba(255,255,255,.95) !important;
    background: rgba(0,0,0,.30) !important;
    border: 1px solid rgba(255,255,255,.22) !important;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
  }

  /* Title */
  .oh-shop-mega > .sub-menu > li:nth-child(3) > .sub-menu > li > a
  :is(.ct-menu-item-title,.menu-item-title,.ct-menu-item-label){
    min-height: var(--oh-feat-title-h) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    font-weight: 850 !important;
    font-size: 15px !important;
    letter-spacing: .2px !important;
    line-height: 1.1 !important;

    margin: 0 !important;
    padding: 0 !important;

    position: relative !important;
    z-index: 1 !important;
  }
}

/* =========================================================
   OHS — MEET US Mega Menu — CLEAN LOCKED BUILD v1.2
   Scope: add CSS class "oh-meet-us-mega" to the MEET US menu item
   Purpose: 3 premium 1:1 tiles + BIG 1:1 image window + premium title
   ========================================================= */

@media (min-width: 1025px) {

  /* ===== DIALS (Configuration) ===== */
  .oh-meet-us-mega {
    --oh-mu-tile: 320px;       /* Tile size (1:1) */
    --oh-mu-gap: 26px;         /* Gap between tiles */
    --oh-mu-pad: 18px;         /* Tile padding */
    --oh-mu-radius: 26px;      /* Rounding */

    --oh-mu-title-h: 62px;     /* Title zone height */
    --oh-mu-img-inset: 12px;   /* Image window inset */
    --oh-mu-img-fit: cover;    /* Image scaling */

    /* Computed: BIG square image window size */
    --oh-mu-imgbox: calc(var(--oh-mu-tile) - var(--oh-mu-title-h) - (var(--oh-mu-img-inset) * 2));
  }

  /* ===== 1) Layout: Centered 3-tile row ===== */
  .oh-meet-us-mega > .sub-menu {
    display: grid !important;
    grid-template-columns: repeat(3, var(--oh-mu-tile)) !important;
    gap: var(--oh-mu-gap) !important;
    justify-content: center !important;
    align-content: start !important;
    padding: 22px 26px !important;
  }

  .oh-meet-us-mega > .sub-menu > li {
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
  }

  /* ===== 2) Tile Base (Glassmorphism) ===== */
  .oh-meet-us-mega > .sub-menu > li > a {
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-end !important;
    align-items: center !important;
    width: var(--oh-mu-tile) !important;
    aspect-ratio: 1 / 1 !important;
    padding: var(--oh-mu-pad) !important;
    border-radius: var(--oh-mu-radius) !important;
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.04)) !important;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
    overflow: hidden !important;
    isolation: isolate !important;
    text-align: center !important;
    text-decoration: none !important;
    transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease;
  }

  .oh-meet-us-mega > .sub-menu > li > a:hover {
    transform: translateY(-3px) !important;
    border-color: rgba(255, 255, 255, 0.26) !important;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.13), rgba(255, 255, 255, 0.05)) !important;
  }

  /* ===== 3) Image Asset Mapping ===== */
  .oh-meet-us-mega > .sub-menu > li:nth-child(1) > a { --oh-meet-img: url("https://optimumhealthstores.com/wp-content/uploads/2026/04/Mega-Menu-Our-Story-Image.webp"); }
  .oh-meet-us-mega > .sub-menu > li:nth-child(2) > a { --oh-meet-img: url("https://optimumhealthstores.com/wp-content/uploads/2026/04/Mega-Menu-Contact-Us-Image.webp"); }
  .oh-meet-us-mega > .sub-menu > li:nth-child(3) > a { --oh-meet-img: url("https://optimumhealthstores.com/wp-content/uploads/2026/04/Tareq-Photo-Square.webp"); }

  /* Hide default theme icon/image wrappers */
  .oh-meet-us-mega > .sub-menu > li > a :is(.ct-menu-item-icon, .ct-icon-container, .ct-image-container, .menu-item-icon) {
    display: none !important;
  }

  /* ===== 4) BIG 1:1 Image Window ===== */
  .oh-meet-us-mega > .sub-menu > li > a::before {
    content: "" !important;
    position: absolute !important;
    top: var(--oh-mu-img-inset) !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: var(--oh-mu-imgbox) !important;
    height: var(--oh-mu-imgbox) !important;
    border-radius: calc(var(--oh-mu-radius) - 8px) !important;
    background-image: linear-gradient(180deg, rgba(0, 0, 0, 0.08) 0%, rgba(0, 0, 0, 0.3) 100%), var(--oh-meet-img) !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: var(--oh-mu-img-fit) !important;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1) !important;
    filter: saturate(1.06) contrast(1.06) !important;
    opacity: 0.99 !important;
    z-index: 0 !important;
    pointer-events: none !important;
  }

  /* Legibility overlay */
  .oh-meet-us-mega > .sub-menu > li > a::after {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.24), rgba(0, 0, 0, 0) 60%) !important;
    z-index: 1 !important;
    pointer-events: none !important;
  }

  /* ===== 5) Premium Title Styling ===== */
  .oh-meet-us-mega > .sub-menu > li > a :is(.ct-menu-item-title, .menu-item-title, .ct-menu-item-label) {
    position: relative !important;
    z-index: 2 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: var(--oh-mu-title-h) !important;
    margin: 0 !important;
    color: rgba(255, 255, 255, 0.96) !important;
    font-weight: 850 !important;
    font-size: 17px !important;
    line-height: 1.15 !important;
    letter-spacing: 0.25px !important;
    text-shadow: 0 2px 14px rgba(0, 0, 0, 0.35) !important;
  }

  /* Ensure all nested text/content stays above overlays */
  .oh-meet-us-mega > .sub-menu > li > a * {
    position: relative !important;
    z-index: 2 !important;
  }
}