/*
 * Storefront shell: the few interaction rules Elementor has no control for.
 * Loaded after the token stylesheet (style.css). Anything a native Elementor
 * control can express belongs in Elementor, not here. Selectors use the stable
 * element ids the generator writes (data-id), not Elementor's internal classes.
 */

/* Wordmark: the clay full stop (DESIGN.novamira.md, open substitution 1). */
.hs-logo-dot { color: var(--clay); }

/* Brand marks (design/brand/). Fixed height and auto width, so the image widgets never drive
   the header row height or the footer brand row's line height; the heights below sit just
   inside the header row min-heights. */
[data-id="hdr-logo"] img { height: 68px; width: auto; display: block; }
[data-id="ftr-icon"] img { height: 48px; width: auto; display: block; }
@media (max-width: 1024px) {
  [data-id="hdr-logo"] img { height: 60px; }
}
@media (max-width: 767px) {
  [data-id="hdr-logo"] img { height: 50px; }
  [data-id="ftr-icon"] img { height: 40px; }
}

/* Sub-navigation stays on one line and scrolls sideways inside itself on
   narrow screens (design: overflow-x: auto). The page itself never scrolls sideways. */
[data-id="hdr-subnav-menu"] .elementor-nav-menu--main { overflow-x: auto; scrollbar-width: none; }
[data-id="hdr-subnav-menu"] .elementor-nav-menu--main::-webkit-scrollbar { display: none; }
[data-id="hdr-subnav-menu"] .elementor-nav-menu { flex-wrap: nowrap; }
[data-id="hdr-subnav-menu"] .elementor-nav-menu > li { flex: 0 0 auto; }

/* Main nav: one line at desktop, matching design/Homeshopping.dc.html (line
   42-46), which sets the header row's nav as a plain non-wrapping flex with
   gap:22px and white-space: nowrap links inside a native grid-template-columns:
   1fr auto 1fr row - no framework in the way. Two things stand between the
   Elementor build and that behaviour, both scoped to the header's own main-nav
   container (data-id, not a global .elementor-nav-menu selector) and to
   Elementor's own desktop breakpoint (>=1025px, widget-nav-menu.min.css) so the
   <=1024px dropdown panel - `.elementor-nav-menu--dropdown`, a separate element
   from `--main` - is untouched:
   1. Elementor's nav-menu widget wraps its <ul> by default, so its min-content
      contribution collapses to its single widest item instead of all five in a
      row. flex-wrap: nowrap (plus nowrap links, matching the design) restores
      the same min-content the design's plain flex nav has natively.
   2. Elementor also resets `min-width: 0` on the nav's own grid cell (hdr-nav)
      and on the nav-menu widget wrapper, which are the actual CSS Grid item and
      its flex child. That 0 caps the "1fr" track's automatic minimum before the
      browser ever looks at the nav's content, so even a truly non-wrapping menu
      still can't grow its track (Elementor v3 containers apply this min-width
      reset broadly, to stop long content blowing out flex/grid layouts - here it
      defeats the specific min-content sizing the design's grid relies on).
      Restoring min-width to the content's own size on both elements lets the
      grid size the nav track the way a plain grid would, which is what shrinks
      the icons track (much smaller content: 3 small SVG icons vs. 5 nav links)
      instead, exactly as design/Homeshopping.dc.html's native grid does. */
@media (min-width: 1025px) {
  [data-id="hdr-nav-menu"] .elementor-nav-menu--main .elementor-nav-menu { flex-wrap: nowrap; }
  [data-id="hdr-nav-menu"] .elementor-nav-menu--main .elementor-nav-menu > li { flex: 0 0 auto; }
  [data-id="hdr-nav-menu"] .elementor-nav-menu--main .elementor-nav-menu > li > a { white-space: nowrap; }
  [data-id="hdr-nav"], [data-id="hdr-nav-menu"] { min-width: max-content; }
}

/* Image tiles: quiet zoom on hover (design: .hs-tile:hover .hs-tile-img scale 1.04). */
.hs-tile-img { transition: transform var(--dur-base) var(--ease-out); }
[data-id^="room-tile-"]:hover .hs-tile-img,
[data-id^="style-tile-"]:hover .hs-tile-img { transform: scale(1.04); }

/* Hero A: mirror the photo so its subject sits right of the headline. This belongs to one
   photo, not to the slot - Itamoby Diamante, attachment 4489. Swap the hero image and the flip
   applies to whatever replaces it, so the two have to change together; the placeholder is due
   to be replaced before launch (TD-01). scripts/hero-mirror-selftest.php fails when they drift. */
[data-id="hero-a-img"] { transform: scaleX(-1); }

/* Buttons press 1px and never scale (DESIGN.novamira.md, Motion). */
.hs-btn-primary:active, .hs-btn-dark:active { transform: translateY(1px); }

/* In-page anchors (#synergates, #katastimata) clear the sticky header. */
:target { scroll-margin-top: 170px; }

/* Cart toggle keeps the clay focus ring (every focused header control shows
   --focus-ring). The toggle also carries Kadence's own
   `.elementor-button` class, and Kadence's global
   `.elementor-button-wrapper .elementor-button:focus` rule (specificity 0,3,0,
   kadence/assets/css/global.min.css) is more specific than the site's global
   `:focus-visible` rule (0,1,0, style.css), so it would win the box-shadow
   property and show Kadence's generic drop-shadow instead of the ring. This
   scoped, more-specific rule restores it for the cart control only - the other
   header controls (nav, wordmark, search, account, sub-nav) are plain links
   with no competing rule and already show the ring from the global default. */
[data-id="hdr-cart"] .elementor-button-wrapper .elementor-button:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

/* Header icon tap targets (design/Homeshopping.dc.html ~line 49-60: each icon is
   its own 40x40 flex box with a centred 20px glyph, and the icons row uses
   gap: 2px). Left alone, Elementor renders the search and account icons at
   20x20 and the cart toggle at 36x36 - all under the WCAG 2.5.8 Target Size
   (Minimum) of 24px.
   Padding plus an equal negative margin is the wrong way to grow them: it keeps
   the icon's *layout footprint* unchanged while making the *rendered* box
   bigger, so neighbouring icons' clickable areas overlap (search/account by
   12px, account/cart by 4px at 375px - elementFromPoint on the shared band then
   always hits whichever icon comes later in source order). So each clickable
   element is an actual 40x40 flex box (padding 0, glyph centred by
   align-items/justify-content): the rendered box IS the layout footprint, and
   neighbouring boxes can only touch, never overlap. The icons row gets the
   design's 2px gap instead of Elementor's 8px/18px setting.
   None of this needs !important: every selector below (an attribute selector
   plus one or two classes, sometimes an element type) is already more
   specific than the Elementor/Kadence rule it overrides - e.g. Elementor's
   own `.elementor-menu-cart__toggle .elementor-button` is (0,2,0); ours,
   `[data-id="hdr-cart"] a.elementor-menu-cart__toggle_button`, is (0,2,1). */
[data-id="hdr-icons"] { gap: 2px; }

[data-id="hdr-search"] .elementor-icon-wrapper,
[data-id="hdr-account"] .elementor-icon-wrapper {
  margin: 0;
}
[data-id="hdr-search"] a.elementor-icon,
[data-id="hdr-account"] a.elementor-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  margin: 0;
}
[data-id="hdr-cart"] a.elementor-menu-cart__toggle_button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  margin: 0;
}

@media (prefers-reduced-motion: reduce) {
  .hs-tile-img { transition: none; }
  [data-id^="room-tile-"]:hover .hs-tile-img,
  [data-id^="style-tile-"]:hover .hs-tile-img { transform: none; }
}