/* =========================================================================
   ARCOS SHOP — header menu entry (loads SITEWIDE, incl. non-ARCOS pages).
   The menu item itself is managed in wp-admin (ניהול ← תפריטים):
   the Arcos product category, label "ARCOS SHOP",
   CSS class "arcos-shop-item", item image = the mobile tile photo.
   ========================================================================= */

/* ===== desktop pill (radius 6, compact) ===== */
/* li pinned to the menu row height (41px) and centers the pill on its axis */
.desktop-menu-wrapper li.arcos-shop-item{display:flex;align-items:center;height:41px;}
.desktop-menu-wrapper li.arcos-shop-item > a{
  display:inline-flex;align-items:center;gap:4px;direction:ltr;
  background:#0e0e0e;border-radius:6px;padding:8px 13px;
  line-height:1;font-size:0;transition:background .15s;
  align-self:center;vertical-align:middle;
}
/* hover: lighten the pill only — no opacity fade, nothing moves */
.desktop-menu-wrapper li.arcos-shop-item > a:hover{background:#2a2a2a;opacity:1;}
/* ARCOS wordmark — the source PNG is already white, so a plain background-image
   with the same crop math replaces the old CSS mask. Masks are CORS-gated and
   silently vanish when the CSS is served from the CDN origin (b-cdn.net);
   background images are not. */
.desktop-menu-wrapper li.arcos-shop-item > a::before{
  content:"";display:inline-block;width:78px;height:13px;
  background:url(/wp-content/themes/getraffic-child/assets/arcos-media/arcos-4.png) no-repeat;
  background-size:110.8px auto;background-position:-16.4px -22.8px;
}
/* SHOP — pinned hard so the theme's nav-underline ::after hover animation
   can't hijack it (that's what made the word vanish on hover) */
.desktop-menu-wrapper li.arcos-shop-item > a::after,
.desktop-menu-wrapper li.arcos-shop-item > a:hover::after{
  content:"SHOP"!important;
  font-family:"Assistant",Arial,sans-serif;font-weight:700;
  font-size:13px!important;letter-spacing:.12em;color:#fff!important;
  line-height:13px;transform:translateY(1px)!important;
  position:static!important;display:inline-block!important;
  width:auto!important;height:auto!important;
  background:none!important;border:none!important;
  opacity:1!important;visibility:visible!important;transition:none!important;
}

/* ===== hide the entry ONLY on the main ARCOS category, the 6 info pages and
   the co-brand categories (daniel-amit) ====
   .term-arcos is an EXACT class match — series children (term-arcos-clara etc.)
   keep the button. Mobile needs its own selector: #menu-mobile items don't
   print custom classes, so li.arcos-shop-item only matches the desktop menu. */
body.term-arcos li.arcos-shop-item,
body.term-daniel-amit li.arcos-shop-item,
body.page-template-page-brand-builder li.arcos-shop-item,
body.term-arcos #menu-mobile li[onclick*="product-category/arcos"],
body.term-daniel-amit #menu-mobile li[onclick*="product-category/arcos"],
body.page-template-page-brand-builder #menu-mobile li[onclick*="product-category/arcos"]{display:none!important;}

/* ===== mobile mega-menu tile ===== */
/* the black lives ONLY on the label <span> — painting the whole <a> put a
   black halo around the photo's edges/corners. The <a> keeps the theme's
   rounded corners + overflow hidden and clips everything cleanly. */
#menu-mobile li[onclick*="product-category/arcos"]{background:transparent!important;}
#menu-mobile li[onclick*="product-category/arcos"] > a{
  background:transparent!important;
  min-height:110px; /* match the other tiles (font-size:0 shrank ours to 100) */
}
#menu-mobile li[onclick*="product-category/arcos"] > a > span{
  font-size:0;display:flex;flex-direction:column;align-items:flex-start;
  justify-content:center;gap:6px;background:#0e0e0e!important;
  flex:1;align-self:stretch;
}
#menu-mobile li[onclick*="product-category/arcos"] > a > span::before{
  content:"";display:inline-block;width:104px;height:18px;
  /* background-image, not mask — see the desktop note (CDN + CORS) */
  background:url(/wp-content/themes/getraffic-child/assets/arcos-media/arcos-4.png) no-repeat;
  background-size:147.7px auto;background-position:-21.9px -30.4px;
}
#menu-mobile li[onclick*="product-category/arcos"] > a > span::after{
  content:"SHOP";font-family:"Assistant",Arial,sans-serif;font-weight:800;
  font-size:13px;letter-spacing:.22em;color:#fff;line-height:1;
}
/* the tile photo — must STRETCH to the tile's full height (its natural ratio
   left a black band under it), frame control via object-position: */
#menu-mobile li[onclick*="product-category/arcos"] img{
  align-self:stretch;height:auto;min-height:110px;
  object-fit:cover;
  object-position:center center; /* e.g. 20% center to shift the frame */
}