/* =========================================================================
   Museum of Arcadia — Shop pages
   Shop banner + GRID/FEED toggle + artwork tiles
   ========================================================================= */


/* =========================================================================
   SHOP BANNER
   ========================================================================= */

.shop-banner {
  width: 100%;
  height: 460px;
  background-image: var(--img-shop-banner-desktop);
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  background-color: #e8e8e6;
}

@media (max-width: 768px) {
  .shop-banner {
    height: 280px;
    background-image: var(--img-shop-banner-mobile);
  }
}


/* =========================================================================
   VIEW TOGGLE — GRID / FEED switch
   ========================================================================= */

.view-toggle {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: var(--s-5);
  padding: var(--s-6) var(--container-pad-d);
  max-width: var(--container-max);
  margin: 0 auto;
}

.view-toggle__btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-sans);
  font-size: var(--fs-small);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--moa-black);
  cursor: pointer;
  background: none;
  border: none;
  padding: 4px 0;
  opacity: 0.5;
  transition: opacity var(--t-fast) var(--ease-standard);
}

.view-toggle__btn[aria-pressed="true"] {
  opacity: 1;
}

.view-toggle__icon {
  width: 18px;
  height: 18px;
  display: inline-block;
  border: 1.5px solid currentColor;
  position: relative;
}

/* Grid icon: 4 small squares */
.view-toggle__icon--grid {
  border: none;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 2px;
}

.view-toggle__icon--grid::before,
.view-toggle__icon--grid::after,
.view-toggle__icon--grid {
  --c: var(--moa-black);
}

.view-toggle__icon--grid > i {
  background-color: currentColor;
  display: block;
  width: 100%;
  height: 100%;
  opacity: 1;
}

.view-toggle__btn[aria-pressed="false"] .view-toggle__icon--grid > i {
  background-color: transparent;
  border: 1.5px solid currentColor;
}

/* Feed icon: single rectangle */
.view-toggle__icon--feed {
  display: inline-block;
  width: 18px;
  height: 18px;
  border: 1.5px solid currentColor;
  background-color: currentColor;
}

.view-toggle__btn[aria-pressed="false"] .view-toggle__icon--feed {
  background-color: transparent;
}

@media (max-width: 768px) {
  .view-toggle {
    padding: var(--s-5) var(--container-pad-m);
  }
}


/* =========================================================================
   PRODUCT GRID (default)
   ========================================================================= */

.product-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--s-7) var(--s-5);
  padding: 0 var(--container-pad-d) var(--s-9);
  max-width: var(--container-max);
  margin: 0 auto;
}

@media (max-width: 1280px) {
  .product-grid { grid-template-columns: repeat(4, 1fr); }
}

@media (max-width: 968px) {
  .product-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 768px) {
  .product-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--s-5) var(--s-3);
    padding: 0 var(--container-pad-m) var(--s-8);
  }
}

@media (max-width: 414px) {
  .view-toggle {
    gap: var(--s-4);
  }

  .product-grid {
    grid-template-columns: 1fr;
  }

  .product-grid--feed {
    grid-template-columns: 1fr;
  }

  .shop-pagination {
    padding-left: var(--container-pad-m);
    padding-right: var(--container-pad-m);
  }
}


/* =========================================================================
   ARTWORK TILE (Grid view)
   ========================================================================= */

.tile {
  position: relative;
  display: block;
  /* The .tile__link <a> below carries text-decoration:none + color:inherit
     for the click-through. The .tile container itself is now a <div> on
     shop archives (Phase 5 fix) but stays an <a> in the "Discover More"
     row inside single-product.php — both are styled identically here. */
  text-decoration: none;
  color: inherit;
  border: 1px solid transparent;
  transition: border-color var(--t-fast) var(--ease-standard);
}

.tile__link {
  display: block;
  text-decoration: none;
  color: inherit;
}

.tile:hover {
  border-color: var(--moa-rule);
}

.tile__media {
  position: relative;
  aspect-ratio: 1 / 1;
  background-color: #f3f3f1;
  overflow: hidden;
}

.tile__images {
  position: relative;
  width: 100%;
  height: 100%;
}

.tile__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity var(--t-base) var(--ease-standard);
}

.tile__image--active { opacity: 1; }

/* Carousel chevron — visible on hover (desktop), default on mobile */
.tile__chevron {
  position: absolute;
  right: var(--s-3);
  bottom: 36px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background-color: var(--moa-white);
  border: 1px solid var(--moa-rule);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--t-base) var(--ease-standard);
  z-index: 2;
}

.tile__chevron svg {
  width: 14px;
  height: 14px;
  stroke: var(--moa-black);
  fill: none;
  stroke-width: 1.6;
}

.tile:hover .tile__chevron,
.tile:has(:focus-visible) .tile__chevron {
  opacity: 1;
  pointer-events: auto;
}

/* Indicator bars (3 small bars showing carousel position) */
.tile__indicators {
  position: absolute;
  left: var(--s-3);
  bottom: 12px;
  display: flex;
  gap: 4px;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--t-base) var(--ease-standard);
  z-index: 2;
}

.tile:hover .tile__indicators,
.tile:has(:focus-visible) .tile__indicators {
  opacity: 1;
  pointer-events: auto;
}

.tile__indicator {
  width: 24px;
  height: 2px;
  background-color: rgba(0,0,0,0.25);
  transition: background-color var(--t-fast) var(--ease-standard);
}

.tile__indicator--active {
  background-color: var(--moa-black);
}

.tile__title {
  font-family: var(--font-sans);
  font-size: var(--fs-card-title);
  font-weight: 700;
  letter-spacing: var(--ls-caps-tight);
  text-transform: uppercase;
  text-align: center;
  margin-top: var(--s-4);
  color: var(--moa-black);
}

.tile__price {
  text-align: center;
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  font-weight: 500;
  letter-spacing: var(--ls-caps-tight);
  margin-top: var(--s-1);
  color: var(--moa-black);
}

/* Image-link wraps .tile__images and fills .tile__media so mouse clicks
   on the image area route to the product page. aria-hidden + tabindex=-1
   keep it out of the AT (the visible .tile__link below the image is the
   AT-canonical link). */
.tile__media-link {
  display: block;
  position: absolute;
  inset: 0;
  z-index: 1;
}

/* Add-to-bag form sits in normal flow below the price line. Tile height
   stays fixed across the row: the form occupies its natural height even
   when opacity:0, so hovering one tile doesn't shift the grid (matches
   the mobile resting state where the CTA is always visible). 16px gap
   between price and CTA top edge per spec. */
.tile form.cart {
  margin: var(--s-4) 0 0;
  padding: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--t-base) var(--ease-standard);
}

.tile:hover form.cart,
.tile:has(:focus-visible) form.cart {
  opacity: 1;
  pointer-events: auto;
}

.tile__cta {
  width: 100%;
  margin: 0;
}

/* WC's wc-add-to-cart.js hardcodes a "View cart" anchor after the AJAX
   button. The cart drawer is the confirmation; suppress every variant
   the script ever inserts (bare class + wc-forward variant, scoped
   broadly so it kills the leak even if the parent context changes). */
.added_to_cart,
a.added_to_cart.wc-forward,
.tile .added_to_cart { display: none; }

/* On mobile, show CTA + chevron + indicators by default (no hover) */
@media (max-width: 968px) {
  .tile { border-color: var(--moa-rule); }
  .tile__chevron,
  .tile__indicators { opacity: 1; }
  .tile form.cart {
    opacity: 1;
    pointer-events: auto;
  }
}


/* =========================================================================
   SOLD STATE
   ========================================================================= */

.tile--sold .tile__media::after {
  content: '';
  position: absolute;
  inset: 0;
  background-color: var(--moa-overlay);
  z-index: 1;
}

.tile--sold .tile__media::before {
  content: 'SOLD';
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-sans);
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: var(--ls-caps);
  color: var(--moa-white);
  z-index: 2;
}

.tile--sold .tile__chevron,
.tile--sold .tile__indicators,
.tile--sold .tile__cta {
  display: none !important;
}

.tile--sold {
  pointer-events: none;
}


/* =========================================================================
   FEED VIEW (3-column, larger, uses bare artwork image)
   ========================================================================= */

.product-grid--feed {
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-7) var(--s-5);
}

@media (max-width: 968px) {
  .product-grid--feed { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
  .product-grid--feed { grid-template-columns: 1fr; }
}

.product-grid--feed .tile__media {
  aspect-ratio: 1 / 1;
}

/* In feed view, only the bare-artwork (slot 3) image is shown */
.product-grid--feed .tile__image:not([data-slot="3"]) {
  display: none;
}

.product-grid--feed .tile__image[data-slot="3"] {
  opacity: 1;
}

.product-grid--feed .tile__chevron,
.product-grid--feed .tile__indicators {
  display: none;
}

.product-grid--feed .tile__title {
  font-size: 1.5rem;
  margin-top: var(--s-5);
}

.product-grid--feed .tile__price {
  font-size: 1.125rem;
  margin-top: var(--s-2);
}


/* =========================================================================
   PAGINATION / LOAD MORE
   ========================================================================= */

.shop-pagination {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-4);
  padding: var(--s-7) var(--container-pad-d) var(--s-10);
}

.shop-pagination__count {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--fs-small);
  color: var(--moa-muted-2);
}

.shop-pagination .btn {
  min-width: 220px;
}