/* ------------------------------------------------------------------
   Jugmug refinements — 23 Oct 2026.
   Loaded after style.css, so equal-specificity rules here win on
   source order. Keep new work in style.css; this file is for
   corrections to what is already there.
   ------------------------------------------------------------------ */

/* --- 1. Header dropdowns -------------------------------------------
   Two separate faults. The panel opened from the bottom of the link
   TEXT rather than the bottom of the header band, so it overlapped the
   header and the last item fell outside the panel's background. And a
   parent-theme rule sets right:0 on the submenu, which resolves to a
   left of about -183px — the panel hung well to the left of the item
   that opened it. That rule is more specific than ours, so the
   alignment has to be forced.

   The 2rem drop is measured, not guessed: the menu item's own box ends
   about 31px above the header band's lower edge, because the band
   carries the padding and the item only wraps its text.

   Desktop only: below 600px the block navigation becomes an overlay
   and must keep its own behaviour. */

@media (min-width: 601px) {

  .jt-header .wp-block-navigation .wp-block-navigation-item.has-child,
  .jt-header .wp-block-navigation .wp-block-navigation-submenu {
    position: relative;
  }

  .jt-header .wp-block-navigation .wp-block-navigation__submenu-container {
    position: absolute;
    top: 100%;
    left: 0 !important;
    right: auto !important;
    margin: 2rem 0 0;
    min-width: 15rem;
    width: max-content;
    max-width: 20rem;
    padding: 0.6rem 0;
    background: var(--wp--preset--color--deepest);
    border: 0;
    border-radius: 4px;
    box-shadow: 0 14px 32px rgba(20, 12, 2, 0.38);
    z-index: 60;
  }

  /* An invisible bridge across the gap, so moving the pointer down
     from the menu item does not cross dead space and close the menu. */
  .jt-header .wp-block-navigation .wp-block-navigation__submenu-container::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -2rem;
    height: 2rem;
  }

  .jt-header .wp-block-navigation__submenu-container .wp-block-navigation-item {
    display: block;
    width: 100%;
  }

  .jt-header .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
    display: block;
    width: 100%;
    padding: 0.6rem 1.25rem;
    color: var(--wp--preset--color--on-deep);
    line-height: 1.35;
    white-space: normal;
    border-bottom: 0;
  }

  .jt-header .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover {
    color: var(--wp--preset--color--gold);
    background: rgba(250, 244, 228, 0.07);
  }

}

/* --- 2. Add to cart ------------------------------------------------
   Four-fifths of the picture above it, set flush left, so the button
   reads as belonging to the card rather than as a full-width bar.

   box-sizing matters here: WooCommerce leaves these buttons on
   content-box, so 80% plus 1rem of padding each side and a border was
   rendering at 93% of the card. */

.woocommerce ul.products li.product.type-product .button,
.woocommerce ul.products li.product.type-product .added_to_cart {
  box-sizing: border-box;
  width: 80%;
  align-self: flex-start;
  margin-right: auto;
}

/* --- 2b. One button at a time ---------------------------------------
   WooCommerce does not swap the button after a successful add: its
   script marks the button .added and APPENDS a separate "View cart"
   link below it, so the card ends up with two stacked buttons.

   Hide the spent button and let the link take its place, styled solid
   rather than outlined. The card then reads as one control that has
   changed state, which is what pressing it implied would happen.

   On reload the .added class is gone and the normal button returns,
   which is correct — you can always add another. */

.woocommerce ul.products li.product.type-product .add_to_cart_button.added {
  display: none !important;
}

.woocommerce ul.products li.product.type-product .added_to_cart {
  background: var(--wp--preset--color--deep);
  border-color: var(--wp--preset--color--deep);
  color: var(--wp--preset--color--base);
}

.woocommerce ul.products li.product.type-product .added_to_cart:hover {
  background: var(--wp--preset--color--deepest);
  border-color: var(--wp--preset--color--deepest);
  color: var(--wp--preset--color--base);
}

/* --- 3. Press wall scrolls sideways --------------------------------
   Fifteen marks wrapped over three rows took a lot of vertical space
   for something that is supporting evidence rather than the point of
   the page. One row that scrolls keeps the proportion right. The fade
   on the right edge is the only cue that there is more to see, since
   most desktops hide their scrollbars until you touch them. */

.jt-press-wall.wp-block-gallery {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  align-items: center;
  gap: 2.25rem;
  margin-top: var(--wp--preset--spacing--40);
  padding-bottom: 1.1rem;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: rgba(81, 43, 25, 0.26) transparent;
  -webkit-mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 4rem), transparent 100%);
  mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 4rem), transparent 100%);
}

.jt-press-wall.wp-block-gallery .wp-block-image {
  width: 158px !important;
  min-width: 158px !important;
  max-width: 158px !important;
  flex: 0 0 158px !important;
  margin: 0;
  scroll-snap-align: start;
}

.jt-press-wall.wp-block-gallery::-webkit-scrollbar {
  height: 6px;
}

.jt-press-wall.wp-block-gallery::-webkit-scrollbar-thumb {
  background: rgba(81, 43, 25, 0.26);
  border-radius: 3px;
}

.jt-press-wall.wp-block-gallery::-webkit-scrollbar-track {
  background: transparent;
}

/* --- 4. Shop by shelf, as four distinct shelves ---------------------
   The four sat as plain columns on one flat ground, so they read as
   continuous prose rather than four separate places to go. A faint
   darker panel each is enough to separate them without turning the
   section into a grid of heavy cards. */

.jt-cat > .wp-block-column {
  background: rgba(81, 43, 25, 0.055);
  border: 1px solid rgba(81, 43, 25, 0.09);
  border-radius: 14px;
  padding: 1.75rem 1.5rem 1.6rem;
}

.jt-cat > .wp-block-column > :last-child {
  margin-bottom: 0;
}

@media (max-width: 781px) {
  .jt-cat > .wp-block-column {
    padding: 1.5rem 1.25rem 1.4rem;
  }
}

/* --- 5. The café map ------------------------------------------------
   Sits under the title on the dark band, so it is desaturated to stop
   Google's colours shouting over the cocoa, and comes back to full
   colour on hover. Height is fixed rather than an aspect ratio: a map
   needs a usable height more than it needs a shape. */

.jt-map {
  margin-top: 1.6rem;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(232, 220, 194, 0.22);
  line-height: 0;
}

.jt-map iframe {
  display: block;
  width: 100%;
  height: 300px;
  border: 0;
  filter: grayscale(0.5) contrast(0.95) brightness(0.93);
  transition: filter 0.2s ease;
}

.jt-map:hover iframe,
.jt-map:focus-within iframe {
  filter: none;
}

.jt-map-link {
  margin-top: 0.9rem !important;
  font-size: 0.8125rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

@media (max-width: 781px) {
  .jt-map iframe {
    height: 230px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .jt-map iframe {
    transition: none;
  }
}