/* ==========================================================================
   Gertrudes — carousel affordances (2026-08-22)
   Loaded by BOTH header templates after stylesheet.css, so equal-specificity
   rules here win by source order alone.

   Why this file exists:
   1. stylesheet.css:1178 hides every .swiper-button-next/prev below 768px,
      and most product carousels also ship with pagination off — on phones
      they looked like static grids with hidden content and no way to page
      them except an undiscoverable swipe.
   2. stylesheet.css:415/403 keeps arrows at opacity:0 until .swiper-viewport
      is HOVERED — a state touch devices never produce. Tablets receive the
      desktop template, so they were affected at full desktop widths too.

   The nivo hero keeps its own dots and stays untouched (its arrows remain
   hidden on phones — dots + autoplay cover it).
   ========================================================================== */

:root {
	--gt-carousel-accent: #c73e12;   /* brand-strong: AA on white */
	--gt-carousel-line: #e4dcd4;
	--gt-carousel-ink: #2f2a26;
}

/* --------------------------------------------------------------------------
   1. Touch devices: arrows must not depend on hover
   -------------------------------------------------------------------------- */
@media (hover: none) {
	.swiper-viewport .swiper-button-next,
	.swiper-viewport .swiper-button-prev {
		opacity: 1;
	}

	/* stylesheet.css:410 fades disabled arrows to 0; keep them visible but
	   clearly inert so the row's affordance doesn't blink in and out. */
	.swiper-viewport .swiper-button-next.swiper-button-disabled,
	.swiper-viewport .swiper-button-prev.swiper-button-disabled {
		opacity: 0.35;
	}
}

/* --------------------------------------------------------------------------
   2. Phones: restore the arrows as compact tap targets
      (outranks stylesheet.css:1178 `.swiper-button-*{display:none}` — one
      extra class of specificity, and this file loads later.)
   -------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
	/* Product carousels keep NO arrows on phones (2026-08-22). The restored
	   arrows sat on top of the cards — at these widths a 38px control
	   centred on the viewport edge always covers part of the first and last
	   card, and it competed with the Add to Cart pill for the same thumb.
	   Swiping IS the affordance on touch, so the arrows are removed rather
	   than shrunk. Where a module has pagination enabled its dots still
	   show; the product-page thumbnail strip keeps its arrows below,
	   because that strip is narrow, non-obvious and has no dots. */
	.swiper-viewport .swiper-button-next,
	.swiper-viewport .swiper-button-prev {
		display: none;
	}

	/* Product-page thumbnail strip: the one carousel that keeps its arrows,
	   sized down so they don't dwarf the thumbs (their own display:none is
	   stylesheet.css:1171). */
	.additional-images + .swiper-pager .swiper-button-next,
	.additional-images + .swiper-pager .swiper-button-prev {
		display: block;
		width: 30px;
		height: 30px;
		line-height: 28px;
		margin-top: -15px;
		opacity: 1;
		color: var(--gt-carousel-ink);
		border-color: var(--gt-carousel-line);
		box-shadow: 0 4px 12px rgba(47, 42, 38, 0.16);
	}

	.additional-images + .swiper-pager .swiper-button-next.swiper-button-disabled,
	.additional-images + .swiper-pager .swiper-button-prev.swiper-button-disabled {
		opacity: 0.35;
	}

	.additional-images + .swiper-pager .swiper-button-next:before,
	.additional-images + .swiper-pager .swiper-button-prev:before {
		font-size: 13px;
	}

	/* …and pull them back INSIDE the strip. zoom.css:21-31 parks them in a
	   -3rem gutter with !important — fine on desktop, but on a phone there
	   is no gutter, so the next arrow hung 25px past the viewport and gave
	   the whole product page a horizontal scrollbar (measured 430px against
	   a 405px client width). Answering !important with !important is the
	   sanctioned case here: nothing else outranks it. */
	.product-details .additional-button-prev { left: 2px !important; }
	.product-details .additional-button-next { right: 2px !important; }
}

/* --------------------------------------------------------------------------
   3. Nivo hero: reserve its box before JS runs (2026-08-31)
   The slider's own <img>s are display:none and every caption is absolutely
   positioned, so until jquery.nivo.slider.js builds .nivo-main-image on
   window.load the hero is 0px tall and the whole page jumps down when it
   appears — the top layout-shift culprit in Lighthouse (CLS 0.56 phone,
   0.20 desktop). 900/380 mirrors the module's admin image size (the cached
   slides are *-900x380.jpg); update it if that setting changes. Scoped to
   :not(.nivoSlider) — Nivo adds that class on init — so once the real
   image is in place the box is content-sized exactly as before.
   -------------------------------------------------------------------------- */
.plaza-slider:not(.nivoSlider) {
	aspect-ratio: 900 / 380;
}