:root {
  --color-bg: #FFFFFF;
  --color-bg-secondary: #F0F0F0;
  --color-accent: #595592;
  --color-link: #1A6AFF;
  --color-link-active: #094BCC;
  --color-text: #000000;
  --color-muted: #6E6E6E;
  --color-border: #C2C2C2;
  --font-serif: 'Montserrat', sans-serif;
  --font-main: 'Montserrat', sans-serif;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-serif);
}

a {
  color: inherit;
  text-decoration: none;
}

.gili-nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-border);
}

.gili-nav__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.6rem 2rem;
}

/* Owner preferred the earlier nav treatment; restored as it was, scaled
   up 10% (logo clamp 2/3.1vw/2.75 -> 2.2/3.41vw/3.025, links 1 -> 1.1rem),
   then scaled back down 20% per a later owner request (bar smaller overall):
   2.2/3.41vw/3.025 -> 1.76/2.728vw/2.42. */
.gili-nav__logo {
  font-size: clamp(1.76rem, 2.728vw, 2.42rem);
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.5;
  color: var(--color-text);
}

.gili-nav__links {
  display: flex;
  gap: 1.76rem;
}

.gili-nav__links a {
  font-size: 0.88rem;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0;
  color: var(--color-muted);
}

.gili-nav__links a:hover {
  color: var(--color-text);
  text-decoration: underline;
}

.gili-nav__hamburger {
  display: none;
  flex-direction: column;
  gap: 4px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.5rem;
}

.gili-nav__hamburger span {
  width: 24px;
  height: 2px;
  background: var(--color-text);
}

.gili-nav__item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

/* The Art toggle now carries the "ART" label itself (clicking opens the
   submenu instead of navigating), so it must read exactly like the sibling
   nav links. Only one item (Israel Trail) lives in the submenu now that
   Pocket Journal is gone, but the owner specifically wants the click-to-
   reveal-"Israel Trail" interaction kept, not collapsed into a plain link. */
.gili-nav__dropdown-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.28rem;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  font-family: inherit;
  font-size: 0.88rem;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0;
  line-height: 1.5;
  color: var(--color-muted);
}

.gili-nav__dropdown-toggle:hover,
.gili-nav__dropdown-toggle[aria-expanded="true"] {
  color: var(--color-text);
}

.gili-nav__dropdown-toggle.is-active {
  color: var(--color-text);
  text-decoration: underline;
}

.gili-nav__chevron {
  flex: 0 0 auto;
  transition: transform 0.15s ease;
}

.gili-nav__dropdown-toggle[aria-expanded="true"] .gili-nav__chevron {
  transform: rotate(180deg);
}

.gili-nav__dropdown {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  padding: 0.4rem 0;
  min-width: 112px;
  flex-direction: column;
  z-index: 10;
}

.gili-nav__dropdown.is-open {
  display: flex;
}

.gili-nav__dropdown a {
  padding: 0.352rem 0.88rem;
  font-size: 0.77rem;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-text);
}

.gili-nav__dropdown a:hover,
.gili-nav__dropdown a.is-active {
  text-decoration: underline;
}

.gili-nav__mobile-overlay .gili-nav__item {
  flex-direction: column;
  align-items: center;
}

.gili-nav__mobile-overlay .gili-nav__dropdown {
  position: static;
  border: none;
  align-items: center;
  padding-top: 0.5rem;
}

.gili-nav__links a.is-active {
  color: var(--color-text);
}

.gili-nav__links a.is-active,
.gili-nav__mobile-overlay nav > a.is-active,
.gili-nav__mobile-overlay .gili-nav__item > a.is-active,
.gili-nav__mobile-overlay .gili-nav__dropdown a.is-active {
  text-decoration: underline;
}

.gili-nav__mobile-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: var(--color-bg);
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2rem;
}

.gili-nav__mobile-overlay.is-open {
  display: flex;
}

.gili-nav__mobile-close {
  position: absolute;
  top: 1.5rem;
  right: 1.5rem;
  font-size: 2rem;
  background: none;
  border: none;
  cursor: pointer;
}

.gili-nav__mobile-overlay nav {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
  font-size: 1.25rem;
}

.gili-footer {
  padding: 3rem 1.5rem;
  text-align: center;
  border-top: 1px solid var(--color-border);
}

.gili-footer__copyright {
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 1rem;
  margin: 0 0 1rem;
  color: var(--color-muted);
}

.gili-footer__legal {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  margin-top: 0.5rem;
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-muted);
}

.gili-footer__legal a {
  color: var(--color-muted);
  text-decoration: underline;
}

/* Mobile only, per owner request 2026-09-08 - desktop footer stays at its
   original size/position. Text 20% smaller, and pushed further down the
   page so it doesn't land near mid-screen on short mobile pages. Every
   page template renders its own <main class="gili-*-page"> as a direct
   child of <body>; making it a flex item that grows sends the footer to
   the bottom of the viewport instead of sitting right after short content. */
@media (max-width: 767px) {
  html {
    height: 100%;
  }

  body {
    display: flex;
    flex-direction: column;
    min-height: 100%;
  }

  body > main {
    flex: 1 0 auto;
  }

  .gili-footer {
    padding: 6rem 1.5rem 3rem;
  }

  .gili-footer__copyright {
    font-size: 0.8rem;
  }

  .gili-footer__legal {
    font-size: 0.76rem;
  }
}

@media (max-width: 767px) {
  /* Wordmark 15% smaller on mobile only, per owner request 2026-09-08.
     The desktop rule is a clamp() whose 2.728vw middle term collapses far
     below the floor at phone widths, so the 1.76rem minimum is what
     actually renders here - that floor is the number being reduced
     (1.76 -> 1.496). Overriding font-size outright rather than editing the
     clamp keeps the desktop size untouched. */
  .gili-nav__logo {
    font-size: 1.496rem;
  }

  .gili-nav__links {
    display: none;
  }
  .gili-nav__hamburger {
    display: flex;
  }

  /* Mobile menu items, per owner request 2026-09-08. The plain links
     (Jewelry/Prints/Info/Contact/cart) are direct children of <nav> with no
     shared class, so unlike the desktop nav (.gili-nav__links a) they never
     got text-transform: uppercase - fixed here rather than adding a class
     to every link in header.php. font-family is set explicitly even though
     it already inherits Montserrat from body, so this menu is guaranteed to
     match the PC nav's typeface, not just happen to via inheritance. */
  .gili-nav__mobile-overlay nav > a {
    font-family: var(--font-main);
    text-transform: uppercase;
  }

  /* The Art toggle reuses .gili-nav__dropdown-toggle, which is sized for
     the compact desktop nav (0.88rem) - that's why it read smaller than
     its siblings here, which inherit the mobile nav's own 1.25rem. Matched
     up to that same size instead (higher specificity, so it doesn't touch
     the desktop rule or this button's own hover/active color logic). */
  .gili-nav__mobile-overlay .gili-nav__item .gili-nav__dropdown-toggle {
    font-family: var(--font-main);
    font-size: 1.25rem;
  }
}

.gili-home {
  display: flex;
  justify-content: center;
  padding: 5rem 1.5rem;
}

/* Reference videobox is 45.35vw / 65.7vw; owner asked for 15% smaller. */
.gili-home__image,
.gili-home__video {
  width: 38.55vw;
  max-width: none;
  height: auto;
  display: block;
}

@media (max-width: 1000px) {
  .gili-home__image,
  .gili-home__video {
    width: 55.85vw;
  }
}

.gili-page {
  max-width: 800px;
  margin: 0 auto;
  padding: 3rem 1.5rem 5rem;
}

.gili-page__title {
  font-size: 1.5rem;
  font-weight: 400;
  margin: 0 0 2rem;
}

.gili-page__content {
  font-size: 0.95rem;
  line-height: 1.7;
}

.gili-page__content h2 {
  font-size: 1.1rem;
  font-weight: 500;
  margin: 2.25rem 0 0.75rem;
}

.gili-page__content ul {
  padding-left: 1.25rem;
}

/* Reference sizes its artworks against a full-width section, so a narrow
   page cap is what made them read small - widened to match. */
.gili-art-page {
  /* More background space above the first photos so they start lower down
     the page (owner's request). Page width scales every artwork uniformly at
     the same proportions without touching the column/gap math (must total
     100%): 1500 -> 1605 (+7%) -> 1525 (-5% from there) -> 1220 (-20%,
     owner asked for every Israel Trail image 20% smaller, same proportions). */
  padding: 6rem 3rem 3rem;
  max-width: 1220px;
  margin: 0 auto;
}

/* ---- Cart page (minimal, matches site aesthetic) ---- */

.gili-nav__cart {
  position: relative;
  display: inline-flex;
  align-items: center;
  color: var(--color-muted);
}

.gili-nav__cart:hover,
.gili-nav__cart.is-active {
  color: var(--color-text);
}

.gili-nav__cart-icon {
  display: block;
  width: 22px;
  height: 22px;
}

.gili-nav__cart-count {
  position: absolute;
  top: -0.4rem;
  right: -0.55rem;
  min-width: 1.1rem;
  height: 1.1rem;
  padding: 0 0.2rem;
  border-radius: 50%;
  background: var(--color-accent);
  color: #fff;
  font-size: 0.65rem;
  font-weight: 500;
  line-height: 1.1rem;
  text-align: center;
}

/* Box 30% narrower than before (1400 -> 980), replacing the earlier
   zoom:0.7 approach - this time the box itself shrinks but text/photos
   go the other way (+15%, see below), so a single uniform zoom no longer
   fits both asks at once. */
.woocommerce-cart .gili-page {
  max-width: 980px;
  /* .gili-page's base padding (3rem top, 5rem bottom) is tuned for long
     text pages - on the cart it pushed the totals/checkout button below
     the fold even with only 1-2 items. Cut well down so the whole card
     fits in view without scrolling for a typical small cart. */
  padding-top: 1rem;
  padding-bottom: 1.25rem;
}

.woocommerce-cart .gili-page__title {
  font-size: 1.61rem;
  margin-bottom: 0.15rem;
}

/* Item count under the title, matching the owner-supplied reference's
   card header ("Your Shopping Cart" + item count) - our colors, not
   theirs, and no separate card chrome around the title itself since the
   card wrapper below already frames the whole page content. */
.gili-cart-count {
  margin: 0 0 0.5rem;
  font-size: 0.87rem;
  color: var(--color-muted);
}

.gili-cart-delay-notice {
  margin: 0 0 1rem;
  padding: 0.65rem 0.9rem;
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--color-text);
  background: var(--color-bg-secondary);
  border-radius: 4px;
}

.gili-cart-delay-notice a {
  color: var(--color-accent);
  text-decoration: underline;
}

/* The reference wraps the whole cart in a card; here that's the page
   content area itself, kept subtle to match the site's flat aesthetic
   elsewhere (thin border, not a heavy shadow). Padding shrunk 30% along
   with the box above (2.5rem -> 1.75rem); text and photos inside are
   sized up individually below instead of via a blanket zoom, since they
   now need to move in the opposite direction from the box itself. */
.woocommerce-cart .gili-page__content {
  border: 1px solid var(--color-border);
  border-radius: 12px;
  padding: 0.85rem 1.75rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

/* WooCommerce's empty-cart notice renders an icon via a custom icon font
   character (content:"\e028"); that font isn't loading in this environment,
   so browsers were showing its "missing glyph" box instead of a real icon.
   Not worth chasing the font-loading issue - just remove it. */
.woocommerce-cart .woocommerce-info::before {
  content: none;
}

.woocommerce-cart .woocommerce-info {
  padding-left: 2em;
}

.woocommerce-cart table.shop_table {
  width: 100%;
  border: none;
  border-collapse: collapse;
  font-size: 1.15rem;
}

.woocommerce-cart table.shop_table th,
.woocommerce-cart table.shop_table td {
  border: none;
  border-bottom: 1px solid var(--color-bg-secondary);
  /* Was 2rem, then 1.1rem, top+bottom on every row - shrinking the product
     photo above matters more for row height than this padding does, but
     every bit counts toward the "checkout near where subtotal is now"
     target. */
  padding: 0.6rem 1rem;
  text-align: left;
  vertical-align: middle;
}

.woocommerce-cart table.shop_table thead th {
  font-weight: 500;
  text-transform: uppercase;
  font-size: 0.92rem;
  letter-spacing: 0.08em;
  color: var(--color-muted);
}

/* WooCommerce core ships `table.cart img { width: 32px }` and its stylesheet
   loads after ours, so these need !important to actually win. Cut back down
   from the 136/117 "+15%" size - with portrait product photos, that made
   every row tall enough on its own to push the totals off-screen, which
   directly fights the "checkout button near where subtotal is now" goal. */
.woocommerce-cart .product-thumbnail {
  width: 76px !important;
}

.woocommerce-cart table.cart .product-thumbnail img {
  width: 64px !important;
  max-width: 64px !important;
  height: auto !important;
  aspect-ratio: auto;
  object-fit: contain;
  display: block;
  box-shadow: none;
}

.woocommerce-cart .product-remove a {
  display: inline-flex;
  color: var(--color-muted);
  text-decoration: none;
}

.woocommerce-cart .product-remove a:hover {
  color: #cc1818;
}

.gili-cart-qty {
  display: inline-flex;
  align-items: stretch;
}

/* Higher specificity than .woocommerce-cart .quantity .qty (below), which
   would otherwise win on source order and restore the 84px/all-sides-border
   look this stepper is replacing. */
.woocommerce-cart .product-quantity .gili-cart-qty .qty {
  width: 52px;
  border-left: none;
  border-right: none;
  border-radius: 0;
}

.gili-qty-btn {
  width: 2.5rem;
  background: none;
  border: 1px solid var(--color-border);
  color: var(--color-text);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
}

.gili-qty-btn--minus {
  border-radius: 4px 0 0 4px;
}

.gili-qty-btn--plus {
  border-radius: 0 4px 4px 0;
}

.gili-qty-btn:hover {
  background: var(--color-bg-secondary);
}

.woocommerce-cart .quantity .qty {
  width: 84px;
  padding: 0.75rem;
  border: 1px solid var(--color-border);
  text-align: center;
  font-size: 1.15rem;
}

.woocommerce-cart .coupon {
  display: none;
}

/* Subtotal now sits above a Shipping row, so it's meaningful again:
   Subtotal + Shipping = Total. */
.woocommerce-cart .cart_totals .cart-subtotal th,
.woocommerce-cart .cart_totals .shipping th {
  font-weight: 400;
  color: var(--color-muted);
}

.woocommerce-cart .cart_totals .cart-subtotal td,
.woocommerce-cart .cart_totals .shipping td {
  color: var(--color-muted);
}

.woocommerce-cart .cart_totals .order-total th,
.woocommerce-cart .cart_totals .order-total td {
  border-top: 1px solid var(--color-border);
  font-size: 1.06rem;
}

.woocommerce-cart button[name="update_cart"] {
  background: none;
  border: 1px solid var(--color-border);
  padding: 0.6rem 1.25rem;
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  cursor: pointer;
  font-family: var(--font-main);
}

.woocommerce-cart .cart_totals {
  float: none !important;
  width: 100% !important;
  max-width: 420px;
  margin-left: auto !important;
  margin-right: auto !important;
  margin-top: 0.75rem;
  font-size: 0.97rem;
}

/* "Cart totals" heading dropped entirely - the table right below it makes
   it self-evident, and it was pure vertical space for no real content. */
.woocommerce-cart .cart_totals h2 {
  display: none;
}

/* WooCommerce core's own rule (.woocommerce-cart .wc-proceed-to-checkout
   div) reserves 1em top+bottom around this button we never asked for. */
.woocommerce-cart .wc-proceed-to-checkout {
  padding: 0 !important;
}

/* WooCommerce core's selector for this exact button
   (.woocommerce-cart .wc-proceed-to-checkout a.checkout-button) is 3
   classes + an element - more specific than the 2-class selector below,
   so it was silently winning on padding/font-size/margin-bottom
   regardless of load order. !important on every property here, not just
   color, closes that gap for good (same cascade issue already fixed once
   on Add to Cart). */
.woocommerce-cart .checkout-button {
  display: block !important;
  width: 100% !important;
  background: var(--color-accent) !important;
  color: #fff !important;
  border: 1px solid var(--color-accent) !important;
  padding: 0.6rem 1.5rem !important;
  margin-bottom: 0 !important;
  font-size: 0.87rem !important;
  font-family: var(--font-main);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  text-align: center;
  cursor: pointer;
  text-decoration: none;
}

.woocommerce-cart .checkout-button:hover {
  background: #474372 !important;
  border-color: #474372;
  color: #fff !important;
}

/* Update cart + block checkout's Place Order share the same accent */
.woocommerce-cart button[name="update_cart"]:not(:disabled) {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: #fff;
}

.woocommerce-checkout .wc-block-components-checkout-place-order-button {
  background: var(--color-accent) !important;
  color: #fff !important;
  border-color: var(--color-accent) !important;
}

.woocommerce-checkout .wc-block-components-checkout-place-order-button:hover {
  background: #474372 !important;
  border-color: #474372 !important;
}

.woocommerce-cart .product-name a {
  font-size: 1.1rem;
  color: var(--color-text);
}

.woocommerce-cart .product-price,
.woocommerce-cart .product-subtotal {
  font-size: 1.15rem;
  white-space: nowrap;
}

/* Line subtotal shows its arithmetic: "2 x 100.00" muted, result below */
.gili-cart-math {
  display: block;
  font-size: 0.87rem;
  color: var(--color-muted);
}

.gili-cart-math__result {
  display: block;
  margin-top: 0.2rem;
}

.cart-empty.woocommerce-info,
.woocommerce-cart .return-to-shop {
  text-align: center;
}

/* ---- Checkout: bigger order summary ---- */

/* Give the whole checkout more room, and a much wider summary sidebar -
   the default ~380px column made the item names and prices collide and
   wrap onto their own lines. The critical part: the checkout renders inside
   the theme's generic .gili-page wrapper (800px cap), which starved the
   whole block layout - lift that cap here or nothing else matters. */
.woocommerce-checkout .gili-page {
  max-width: 1400px;
}

.woocommerce-checkout .wc-block-checkout,
.woocommerce-checkout .wp-block-woocommerce-checkout {
  max-width: 1400px;
  margin-left: auto;
  margin-right: auto;
}

.woocommerce-checkout .wp-block-woocommerce-checkout-totals-block {
  font-size: 1.25rem;
}

/* WooCommerce blocks CSS loads after ours and ties on specificity, so the
   sidebar widening must be !important or the default ~35% column wins and
   names/prices wrap mid-word and overflow the box. */
.woocommerce-checkout .wc-block-components-sidebar-layout .wc-block-components-sidebar,
.woocommerce-checkout .wc-block-checkout__sidebar {
  width: 46% !important;
  max-width: 680px !important;
  flex-basis: 46% !important;
  padding-left: 2.5rem;
}

.woocommerce-checkout .wc-block-components-sidebar-layout .wc-block-components-main,
.woocommerce-checkout .wc-block-checkout__main {
  width: 54% !important;
  flex-basis: 54% !important;
  padding-right: 2.5rem;
}

/* Keep the panel's contents inside the box */
.woocommerce-checkout .wc-block-components-order-summary,
.woocommerce-checkout .wc-block-components-order-summary .wc-block-components-panel__content {
  overflow: visible;
}

/* Let long names use the space: never break words in half, and give the
   description column the remaining row width. */
.woocommerce-checkout .wc-block-components-order-summary-item__description {
  padding-right: 0.75rem;
  flex: 1 1 auto;
  min-width: 0;
  overflow-wrap: normal;
  word-break: keep-all;
}

.woocommerce-checkout .wc-block-components-order-summary-item__description .wc-block-components-product-name {
  white-space: normal;
}

.woocommerce-checkout .wc-block-components-order-summary-item__total-price {
  white-space: nowrap;
  flex: 0 0 auto;
}

/* "2 x 100.00" stays on one line under the product name */
.woocommerce-checkout .wc-block-components-order-summary-item__individual-prices,
.woocommerce-checkout .wc-block-components-order-summary-item__individual-price {
  white-space: nowrap;
}

@media (max-width: 1099px) {
  .woocommerce-checkout .wc-block-components-sidebar-layout .wc-block-components-sidebar,
  .woocommerce-checkout .wc-block-checkout__sidebar,
  .woocommerce-checkout .wc-block-components-sidebar-layout .wc-block-components-main,
  .woocommerce-checkout .wc-block-checkout__main {
    width: 100% !important;
    max-width: none !important;
    flex-basis: 100% !important;
    padding-left: 0;
    padding-right: 0;
  }
}

/* Keep the order summary always expanded - hiding what's being bought
   behind a toggle is exactly what made it hard to read. */
.woocommerce-checkout .wc-block-components-order-summary .wc-block-components-panel__button {
  font-size: 1.35rem;
  font-weight: 500;
  pointer-events: none;
}

.woocommerce-checkout .wc-block-components-order-summary .wc-block-components-panel__button svg {
  display: none;
}

.woocommerce-checkout .wc-block-components-order-summary .wc-block-components-panel__content {
  display: block !important;
  height: auto !important;
  opacity: 1 !important;
  visibility: visible !important;
}

.woocommerce-checkout .wc-block-components-order-summary-item__image {
  width: 109px;
  flex: 0 0 109px;
}

.woocommerce-checkout .wc-block-components-order-summary-item__image img {
  max-width: 109px;
  width: 109px;
  height: auto;
  object-fit: contain;
}

.woocommerce-checkout .wc-block-components-order-summary-item__description,
.woocommerce-checkout .wc-block-components-order-summary-item__total-price {
  font-size: 1.25rem;
}

.woocommerce-checkout .wc-block-components-product-name {
  font-size: 1.35rem;
  line-height: 1.4;
}

.woocommerce-checkout .wc-block-components-order-summary-item {
  padding-top: 2rem;
  padding-bottom: 2rem;
}

.woocommerce-checkout .wc-block-components-order-summary-item__quantity {
  font-size: 1.05rem;
}

.woocommerce-checkout .wc-block-components-totals-item,
.woocommerce-checkout .wc-block-components-totals-footer-item {
  font-size: 1.25rem;
}

.woocommerce-checkout .wc-block-components-totals-footer-item .wc-block-components-totals-item__value,
.woocommerce-checkout .wc-block-components-totals-footer-item .wc-block-components-totals-item__label {
  font-size: 1.5rem;
}

.woocommerce-cart .woocommerce-info {
  border: none;
  background: none;
  color: var(--color-muted);
  padding: 2rem 0;
}

/* Israel Trail layout - TWEAK THE SPACING HERE.
   --art-landscape-w : landscape width, as % of the container (unitless)
   --art-portrait-w  : portrait width,  as % of the container (unitless)
   --art-gap-y       : vertical gap between stacked images in a column
/* Israel Trail layout - TWEAK THE SPACING HERE.
     --art-landscape-w : landscape image width, % of container
     --art-portrait-w  : portrait image width, % of container
     --art-gap-x       : horizontal gap between the two columns, % of container
     --art-gap-y       : vertical gap between stacked images in a column
   The three X values must add up to 100.

   Each column is only as wide as its widest image (the landscape), and the
   portrait inside it is sized relative to that. The gap is set explicitly
   rather than left as arithmetic slack: with both columns at landscape
   width they'd total >100% and flexbox would silently shrink them, which is
   why earlier gap tweaks appeared to do nothing. */
.gili-art-grid {
  --art-landscape-w: 48.57;
  --art-portrait-w: 43.41;
  --art-gap-x: 2.86;
  --art-gap-y: 44px;

  display: flex;
  justify-content: space-between;
  gap: calc(var(--art-gap-x) * 1%);
}

.gili-art-grid__col {
  display: flex;
  flex-direction: column;
  gap: var(--art-gap-y);
  /* two landscape-wide columns + the gap must fill exactly 100% */
  width: calc((100% - var(--art-gap-x) * 1%) / 2);
  flex: 0 0 auto;
}

/* Outer edges stay flush (owner's rule: all corners in a column align), so
   images pin to the page-facing side of their column. NOTE: because a
   landscape always faces a portrait, the portrait's narrower width adds to
   the visible middle space - --art-portrait-w is therefore the real lever
   for how close the two sides look, not --art-gap-x alone. */
.gili-art-grid__col:first-child {
  align-items: flex-start;
}

.gili-art-grid__col:last-child {
  align-items: flex-end;
}

.gili-art-grid__item {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  display: block;
}

/* The column IS the landscape width, so a landscape fills it. */
.gili-art-grid__item.is-landscape {
  width: 100%;
}

/* Portrait as a share of that column: portrait-w / landscape-w */
.gili-art-grid__item.is-portrait {
  width: calc(var(--art-portrait-w) / var(--art-landscape-w) * 100%);
}

/* Never crop: natural height, no fixed aspect, nothing overflows */
.gili-art-grid__item img {
  width: 100%;
  height: auto;
  max-height: none;
  object-fit: unset;
  display: block;
}

@media (max-width: 767px) {
  /* Single column: the wrappers dissolve and order (set inline from the
     original interleaved index) restores the reading sequence. */
  .gili-art-grid {
    flex-direction: column;
    align-items: center;
    gap: var(--art-gap-y);
  }

  .gili-art-grid__col {
    display: contents;
  }

  .gili-art-grid__item.is-landscape {
    width: 100%;
  }

  .gili-art-grid__item.is-portrait {
    width: calc(var(--art-portrait-w) / var(--art-landscape-w) * 100%);
  }
}

.gili-lightbox {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
}

.gili-lightbox[hidden] {
  display: none;
}

.gili-lightbox__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
}

/* Geometry measured off the reference popup screenshot (panel 1075x637):
   artwork ~73% of panel height and up to ~77% of its width, caption
   starting ~78% down. Scaled up 25% from those reference dimensions per
   the owner's preference (1075x637 -> 1344x796); internal proportions and
   the 25%-larger text keep the reference's look at the bigger size.

   The artwork and caption are independently absolutely-positioned rather
   than stacked in a flex column - a flex-column stack (image on top,
   caption below, squeezed into whatever height the image left over) was
   shipped here previously despite this comment describing the real
   geometry, which is exactly the bug the owner reported: the image never
   used the panel's actual size and the caption got crushed into a sliver
   at the bottom-left. Decoupling them so the caption always gets the same
   reserved bottom-left space regardless of the artwork's own aspect ratio
   (landscape vs portrait) is what makes both orientations match the
   reference without special-casing either one. Desktop only - see the
   mobile override below, where a full-width stacked layout still makes
   more sense. */
.gili-lightbox__panel {
  position: relative;
  z-index: 1;
  background: var(--color-bg);
  width: 1344px;
  max-width: 94vw;
  height: min(796px, 94vh);
  padding: 2.5rem;
  overflow-y: auto;
}

.gili-lightbox__image,
.gili-lightbox__video {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-width: 77%;
  max-height: 73%;
  width: auto;
  height: auto;
  object-fit: contain;
}

/* Click-to-zoom hint on the artwork image only - videos aren't zoomable */
.gili-lightbox__image {
  cursor: zoom-in;
}

/* Reference popup: artwork centred, caption block bottom-left */
.gili-lightbox__title {
  display: none;
}

/* Reference caption: ~43px line pitch, ~31px in from the panel's left edge,
   scaled 25% with the panel (1.35rem -> 1.7rem), then reduced a further 35%
   per owner request 2026-09-08 (1.7rem -> 1.1rem, too big at full size).
   Anchored to the panel's own corner (independent of the artwork), so it
   never overlaps the image and never gets squeezed by it. */
.gili-lightbox__description {
  position: absolute;
  left: 2.5rem;
  bottom: 1.75rem;
  max-width: 260px;
  padding-left: 0;
  font-size: 1.1rem;
  line-height: 1.75;
  color: var(--color-text);
}

.gili-lightbox__description p {
  margin: 0;
}

.gili-lightbox__close,
.gili-lightbox__prev,
.gili-lightbox__next {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1.5rem;
}

/* z-index matters here: lightbox.js writes the close button into the panel
   BEFORE the <img>, and both are absolutely positioned with no z-index, so
   the artwork paints over the button and swallows it. On mobile a portrait
   piece runs the full panel width and starts near the top, which put it
   directly on top of the X. Lifting the button above the artwork keeps it
   visible and tappable for any image size or orientation. */
.gili-lightbox__close {
  position: absolute;
  top: 1.5rem;
  right: 2rem;
  z-index: 2;
  font-size: 2rem;
  font-weight: 300;
  line-height: 1;
  color: var(--color-text);
}

.gili-lightbox__prev,
.gili-lightbox__next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

.gili-lightbox__prev {
  left: 0.5rem;
}

.gili-lightbox__next {
  right: 0.5rem;
}

body.gili-lightbox-open {
  overflow: hidden;
}

/* The reference's side-margin caption placement only works with a wide
   desktop panel that has real margin either side of the artwork - on a
   narrow panel there isn't room for both without overlapping, so mobile
   falls back to the simple stacked layout (image on top, caption below,
   full width) that this component used before the desktop geometry fix
   above. */
/* Mobile only, per owner request 2026-09-08. The previous stacked layout
   (caption in normal flow right after the image) put the caption directly
   under whatever height that painting's image happened to render at, so
   a short landscape piece left it much higher on screen than a tall
   portrait one. The image keeps its original size (max-height: 55vh,
   unchanged - a later pass shrank it by mistake and that was reverted).
   The caption's "top" is anchored to 55vh + a fixed gap - i.e. below the
   image's own maximum possible height, not its actual rendered height -
   so it never touches the artwork no matter how tall that image renders,
   and every painting's caption still lands in the exact same spot since
   the offset doesn't depend on the actual image. The white panel itself
   is grown to comfortably fit image + gap + caption + padding at any
   viewport height (scales with vh like the image, plus a fixed rem
   buffer for the caption block), so nothing gets clipped or forces the
   image to shrink to make room. */
@media (max-width: 767px) {
  .gili-lightbox__panel {
    display: block;
    height: min(calc(55vh + 13rem), 92vh);
    padding: 1.5rem 1.5rem 1.75rem;
  }

  /* Centred in the image area rather than pinned to its top, per owner
     request 2026-09-08. Pinned to the top, a landscape piece (42x29.7)
     rendered only ~226px tall inside a ~488px slot, leaving a huge gap
     down to the caption, while a portrait piece (29.7x42) nearly filled
     the slot - so the two orientations looked completely different and
     the arrows floated in the landscape gap rather than on the artwork.
     The image area runs from the panel's top padding (1.5rem) down to the
     caption's fixed top (55vh + 3rem), so its midpoint is
     (1.5rem + 55vh + 3rem) / 2 = 27.5vh + 2.25rem. Centring on that one
     value fixes both orientations without special-casing either, and the
     caption keeps its fixed position so every artwork's text still lands
     in the same spot. */
  .gili-lightbox__image,
  .gili-lightbox__video {
    position: absolute;
    top: calc(27.5vh + 2.25rem);
    left: 50%;
    bottom: auto;
    transform: translate(-50%, -50%);
    max-width: 100%;
    max-height: 55vh;
    margin: 0;
  }

  /* Arrows share the image area's midpoint instead of the panel's, so they
     sit on the middle of the artwork itself - the panel's own centre sits
     well below it, since the panel also has to house the caption block. */
  .gili-lightbox__prev,
  .gili-lightbox__next {
    top: calc(27.5vh + 2.25rem);
  }

  /* Raised further, per owner request 2026-09-08 - a portrait artwork's top
     edge sits at 2.25rem here (its centred midpoint minus half of its 55vh
     height), so the button is pulled above that edge as well as being
     lifted above it in z-order. */
  .gili-lightbox__close {
    top: 0.5rem;
    right: 1.25rem;
  }

  .gili-lightbox__description {
    position: absolute;
    top: calc(55vh + 3rem);
    left: 1.5rem;
    right: 1.5rem;
    bottom: auto;
    max-width: none;
    margin-top: 0;
    align-self: auto;
  }
}

/* Product image zoom (Prints + Jewelry single-product pages) - a simple
   single-image lightbox, separate from the Art gallery's .gili-lightbox
   since it needs none of that component's prev/next/video logic. */
.gili-zoom {
  position: fixed;
  inset: 0;
  /* Higher than .gili-lightbox (300) - the Israel Trail gallery reuses this
     component to zoom the artwork that's already open in that lightbox, so
     it has to render on top of it, not beside it. */
  z-index: 400;
  display: flex;
  align-items: center;
  justify-content: center;
}

.gili-zoom[hidden] {
  display: none;
}

.gili-zoom__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.75);
}

.gili-zoom__panel {
  position: relative;
  z-index: 1;
  max-width: 94vw;
  max-height: 94vh;
  display: flex;
}

.gili-zoom__image {
  max-width: 94vw;
  max-height: 94vh;
  width: auto;
  height: auto;
  object-fit: contain;
  margin: 0 auto;
}

.gili-zoom__close {
  position: absolute;
  top: -2.5rem;
  right: -0.5rem;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 2rem;
  font-weight: 300;
  line-height: 1;
  color: #fff;
}

@media (max-width: 767px) {
  .gili-zoom__close {
    top: 0.5rem;
    right: 0.5rem;
    color: var(--color-text);
    background: rgba(255, 255, 255, 0.85);
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
  }
}

body.gili-zoom-open {
  overflow: hidden;
}

.gili-info-page {
  max-width: 650px;
  padding: 3rem 2.5rem;
}

.gili-info-page h2 {
  margin-top: 2.5rem;
  font-weight: normal;
}

.gili-info-page p {
  line-height: 1.6;
}

/* Page width drives the 3-column image size: 1500 -> 1350px makes every
   product render 10% smaller without touching the grid or its spacing.
   Top padding pushes the products ~10% further down the page. */
.gili-prints-page {
  padding: 6rem 4rem 3rem;
  max-width: 1350px;
  margin: 0 auto;
}

.gili-prints-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: start;
  gap: 7.5rem 7rem;
}

.gili-prints-grid__item img {
  max-width: 100%;
  max-height: 558px;
  width: auto;
  height: auto;
  display: block;
  margin: 0 auto;
}

/* Collages are the odd ones out: narrower and taller than the plain prints
   (reference: 15.7% of the page vs 20.6%), one per row. */
.gili-prints-grid__item.is-collage img {
  max-width: 76%;
  max-height: 720px;
}

.gili-prints-grid__title {
  margin: 1rem 0 0;
  font-size: 0.99rem;
  font-weight: 400;
  color: var(--color-text);
}

.gili-prints-grid__price {
  margin: 0.3rem 0 0;
  font-size: 0.99rem;
  color: var(--color-muted);
}

@media (max-width: 767px) {
  .gili-prints-grid {
    grid-template-columns: 1fr;
  }

  /* Matched to the jewelry grid's new mobile size below, per owner request
     2026-09-08 - both grids show thumbnails at the same scale on mobile.
     Listing-page thumbnail only, not the single-product page (that's a
     different class, .gili-product-page__media, untouched here). */
  .gili-prints-grid__item img {
    max-width: 70%;
  }

  .gili-prints-grid__item.is-collage img {
    max-width: 53%;
  }

  /* The thumbnail is centered at 70% width above, but title/price stayed
     full-width, so their left edge no longer matched the now-inset
     thumbnail's left edge - per owner request 2026-09-08, match their
     width/centering to the thumbnail so both start at the same left
     edge (text itself stays left-aligned within that narrower box). */
  .gili-prints-grid__title,
  .gili-prints-grid__price {
    max-width: 70%;
    margin-left: auto;
    margin-right: auto;
  }

  .gili-prints-grid__item.is-collage .gili-prints-grid__title,
  .gili-prints-grid__item.is-collage .gili-prints-grid__price {
    max-width: 53%;
  }
}

.gili-jewelry-page {
  padding: 6rem 4rem 3rem;
  max-width: 1350px;
  margin: 0 auto;
}

.gili-jewelry-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: start;
  gap: 7.5rem 7rem;
}

.gili-jewelry-grid__item img {
  width: 100%;
  max-height: none;
  height: auto;
  display: block;
  margin: 0 auto;
}

.gili-jewelry-grid__title {
  margin: 1rem 0 0;
  font-size: 0.99rem;
  font-weight: 400;
  color: var(--color-text);
}

.gili-jewelry-grid__price {
  margin: 0.3rem 0 0;
  font-size: 0.99rem;
  color: var(--color-muted);
}

/* Sits where the price used to, but letter-spaced uppercase so it reads as
   a status rather than something you can buy. */
.gili-jewelry-grid__coming-soon {
  margin: 0.3rem 0 0;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-muted);
}

@media (max-width: 767px) {
  .gili-jewelry-grid {
    grid-template-columns: 1fr;
  }

  /* 30% smaller than the previous mobile size (full column width) per
     owner request 2026-09-08, and matched by the prints grid above so
     both listing pages show thumbnails at the same scale. Listing-page
     thumbnail only, not the single-product page (untouched, different
     class/template). */
  .gili-jewelry-grid__item img {
    max-width: 70%;
    width: 70%;
    margin: 0 auto;
  }

  /* Same reasoning as the prints grid above - match title/price/status
     width and centering to the now-smaller thumbnail so their left edge
     lines up with the thumbnail's left edge instead of the full column. */
  .gili-jewelry-grid__title,
  .gili-jewelry-grid__price,
  .gili-jewelry-grid__coming-soon {
    max-width: 70%;
    margin-left: auto;
    margin-right: auto;
  }
}

.gili-contact-page {
  display: flex;
  flex-wrap: wrap;
  gap: 4rem;
  padding: 3rem 3rem;
  max-width: 1300px;
  margin: 0 auto;
}

.gili-contact-page__media {
  flex: 1 1 480px;
  max-width: 600px;
}

.gili-contact-page__image {
  width: 100%;
  height: auto;
  display: block;
}

.gili-contact-page__phone {
  margin-top: 1.5rem;
  font-size: 1.1rem;
}

.gili-contact-page__socials {
  display: flex;
  gap: 1.25rem;
  margin-top: 1.25rem;
}

.gili-contact-page__socials a {
  color: var(--color-text);
  display: inline-flex;
}

.gili-contact-page__content {
  flex: 1 1 420px;
  max-width: 480px;
  font-size: 1.15rem;
}

.gili-contact-page__content p {
  line-height: 1.6;
}

.gili-contact-page__form {
  margin-top: 1.75rem;
}

.gili-contact-page__form label {
  display: block;
  margin-bottom: 0.5rem;
  font-size: 1.1rem;
}

.gili-contact-page__form input {
  display: block;
  width: 100%;
  max-width: 320px;
  padding: 0.65rem;
  margin-bottom: 1.25rem;
  font-size: 1.1rem;
  border: 1px solid var(--color-border);
}

.gili-contact-page__form button {
  background: var(--color-accent);
  color: #fff;
  border: none;
  padding: 0.85rem 1.75rem;
  font-size: 1.1rem;
  font-family: var(--font-main);
  cursor: pointer;
}

.gili-contact-page__form button:hover {
  background: #474372;
}

/* Honeypot - hidden from people, visible to naive bots */
.gili-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.gili-contact-page__notice {
  margin: 0 0 1rem;
  font-size: 1rem;
}

.gili-contact-page__notice--success {
  color: var(--color-accent);
}

.gili-contact-page__notice--error {
  color: #cc1818;
}

.gili-product-page {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 3rem;
  padding: 3rem 3rem;
  max-width: 1100px;
  margin: 0 auto;
}

/* Image should finish roughly where the details column's text ends, rather
   than towering over it - stretch both columns to equal height and cap the
   image to that. Sized down from the previous 550px cap per owner request
   so the image takes up noticeably less of the page. */
.gili-product-page__media {
  flex: 1 1 320px;
  max-width: 380px;
  align-self: stretch;
  display: flex;
}

.gili-product-page__zoom-trigger {
  all: unset;
  display: flex;
  width: 100%;
  cursor: zoom-in;
  position: relative;
}

.gili-product-page__image {
  width: 100%;
  max-height: 100%;
  height: auto;
  object-fit: contain;
  object-position: top;
  display: block;
}

.gili-product-page__details {
  flex: 1 1 330px;
  max-width: 418px;
  padding-top: 0.5rem;
}

.gili-product-page__title {
  font-size: 1.65rem;
  font-weight: 400;
  color: var(--color-text);
  margin: 0 0 0.5rem;
}

.gili-product-page__price {
  font-size: 1.045rem;
  color: var(--color-text);
  margin: 0 0 2.25rem;
}

/* Takes the place of both the price and the Add to Cart button on jewelry
   until final prices/sizes exist, so it carries the weight of both. */
.gili-product-page__coming-soon {
  font-size: 0.935rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-muted);
  margin: 0 0 2.25rem;
}

.gili-product-page__print-info {
  list-style: none;
  /* Sits below Add to Cart now, same spacing as the jewelry description
     text (.gili-product-page__desc) it's positioned like. */
  margin: 2rem 0 0;
  max-width: 368px;
  padding: 0;
  font-size: 0.9rem;
  color: var(--color-muted);
  line-height: 1.6;
}

.gili-product-page form.cart {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.gili-product-page .quantity {
  margin-bottom: 1rem;
}

.gili-product-page .quantity .qty {
  width: 66px;
  padding: 0.55rem;
  border: 1px solid var(--color-border);
  text-align: center;
  font-size: 1.1rem;
}

/* All purchase actions share the pen-blue accent (#595592). !important is
   needed here: WooCommerce's own default .button.alt rule (which this
   button also matches) resolves to higher specificity than a plain
   .gili-product-page .single_add_to_cart_button selector, so without it
   WC's default purple (#7f54b3) silently wins regardless of CSS load order -
   the same cascade gotcha already documented for the cart/checkout buttons
   above. */
.gili-product-page .single_add_to_cart_button {
  display: block;
  width: 100%;
  max-width: 368px;
  background: var(--color-accent) !important;
  color: #fff !important;
  border: 1px solid var(--color-accent) !important;
  padding: 0.935rem 1.65rem;
  font-size: 0.935rem;
  font-family: var(--font-main);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  text-align: center;
  cursor: pointer;
}

.gili-product-page .single_add_to_cart_button:hover {
  background: #474372 !important;
  border-color: #474372 !important;
  color: #fff !important;
}

.gili-product-page__desc {
  margin-top: 2rem;
  max-width: 368px;
  font-size: 0.99rem;
  line-height: 1.6;
  color: var(--color-muted);
}

.gili-product-page__desc p {
  margin: 0 0 1.25rem;
}

.gili-product-page__desc strong {
  color: var(--color-muted);
  font-weight: 500;
}