/* =========================================================================
   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;
}



/* =========================================================================
   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);
}


.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 {
  margin: 0;
  padding: 0;

  font-family: "EB Garamond", Garamond, Georgia, serif;
  font-size: 15.5px !important;
  font-style: normal;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0;

  color: #070707;
  text-align: center;
  text-decoration: none;
}

.shop-pagination__count *,
.shop-pagination__count em,
.shop-pagination__count i {
  font-family: "EB Garamond", Garamond, Georgia, serif;
  font-style: normal;
  font-weight: 400;
}

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

/* =========================================================================
   SHOP MOBILE - Figma product grid
   ========================================================================= */

@media (max-width: 768px) {
  body.post-type-archive-product .shop-banner,
  body.woocommerce-shop .shop-banner {
    height: 279px;
    background-image: var(--img-shop-banner-mobile);
    background-size: cover;
    background-position: center top;
  }

  body.post-type-archive-product .view-toggle,
  body.woocommerce-shop .view-toggle {
    max-width: 414px;
    justify-content: flex-end;
    gap: 10px;
    padding: 18px 16px 29px;
  }

  body.post-type-archive-product .view-toggle__btn,
  body.woocommerce-shop .view-toggle__btn {
    gap: 6px;
    padding: 0;
    font-size: 9px;
    line-height: 12px;
    letter-spacing: 0.05em;
  }

  body.post-type-archive-product .view-toggle__icon,
  body.woocommerce-shop .view-toggle__icon {
    width: 12px;
    height: 12px;
    border-width: 1.25px;
  }

  body.post-type-archive-product .view-toggle__icon--grid,
  body.woocommerce-shop .view-toggle__icon--grid {
    gap: 1.5px;
  }

  body.post-type-archive-product .view-toggle__btn[aria-pressed="false"] .view-toggle__icon--grid > i,
  body.woocommerce-shop .view-toggle__btn[aria-pressed="false"] .view-toggle__icon--grid > i {
    border-width: 1.25px;
  }

  body.post-type-archive-product .product-grid:not(.product-grid--feed),
  body.woocommerce-shop .product-grid:not(.product-grid--feed) {
    max-width: 414px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 25px 8px;
    padding: 0 16px 48px;
  }

  body.post-type-archive-product .product-grid:not(.product-grid--feed) .tile,
  body.woocommerce-shop .product-grid:not(.product-grid--feed) .tile {
    padding: 8px;
    border-color: transparent;
  }

  body.post-type-archive-product .product-grid:not(.product-grid--feed) .tile:first-child,
  body.woocommerce-shop .product-grid:not(.product-grid--feed) .tile:first-child {
    border-color: var(--moa-rule);
  }

  body.post-type-archive-product .product-grid:not(.product-grid--feed) .tile__media,
  body.woocommerce-shop .product-grid:not(.product-grid--feed) .tile__media {
    aspect-ratio: 1 / 1;
  }


body.woocommerce-shop .shop-pagination__count,
body.post-type-archive-product .shop-pagination__count {
  font-family: "EB Garamond", Garamond, Georgia, serif !important;
  font-style: normal !important;
  font-weight: 500 !important;
  text-decoration: none !important;
}





  body.post-type-archive-product .product-grid:not(.product-grid--feed) .tile__chevron,
  body.woocommerce-shop .product-grid:not(.product-grid--feed) .tile__chevron {
    right: 5px;
    bottom: 35px;
    width: 23px;
    height: 23px;
  }

  body.post-type-archive-product .product-grid:not(.product-grid--feed) .tile__chevron svg,
  body.woocommerce-shop .product-grid:not(.product-grid--feed) .tile__chevron svg {
    width: 9px;
    height: 9px;
    stroke-width: 1.6;
  }

  body.post-type-archive-product .product-grid:not(.product-grid--feed) .tile__indicators,
  body.woocommerce-shop .product-grid:not(.product-grid--feed) .tile__indicators {
    left: 8px;
    bottom: 8px;
    gap: 2px;
  }

  body.post-type-archive-product .product-grid:not(.product-grid--feed) .tile__indicator,
  body.woocommerce-shop .product-grid:not(.product-grid--feed) .tile__indicator {
    width: 22px;
    height: 2px;
  }

  body.post-type-archive-product .product-grid:not(.product-grid--feed) .tile__title,
  body.woocommerce-shop .product-grid:not(.product-grid--feed) .tile__title {
    margin-top: 10px;
    min-height: 22px;
    font-size: 9px;
    line-height: 11px;
    letter-spacing: 0.035em;
  }

  body.post-type-archive-product .product-grid:not(.product-grid--feed) .tile__price,
  body.woocommerce-shop .product-grid:not(.product-grid--feed) .tile__price {
    margin-top: 3px;
    font-size: 9px;
    line-height: 11px;
    letter-spacing: 0.02em;
  }

  body.post-type-archive-product .product-grid:not(.product-grid--feed) .tile form.cart,
  body.woocommerce-shop .product-grid:not(.product-grid--feed) .tile form.cart {
    margin-top: 12px;
    opacity: 1;
    pointer-events: auto;
  }

  body.post-type-archive-product .product-grid:not(.product-grid--feed) .tile__cta,
  body.woocommerce-shop .product-grid:not(.product-grid--feed) .tile__cta {
    min-height: 25px;
    height: 25px;
    padding: 0 6px;
    font-size: 7px;
    line-height: 9px;
    letter-spacing: 0.04em;
  }

  body.post-type-archive-product .shop-pagination,
  body.woocommerce-shop .shop-pagination {
    max-width: 414px;
    padding: 0 16px 72px;
    gap: 12px;
  }

  body.post-type-archive-product .shop-pagination__count,
  body.woocommerce-shop .shop-pagination__count {
    font-size: 13.5px;
    line-height: 16px;
    color: var(--moa-black);
  }

  body.post-type-archive-product .shop-pagination .btn,
  body.woocommerce-shop .shop-pagination .btn {
    min-width: 94px;
    min-height: 31px;
    padding: 0 16px;
    border: 1px solid var(--moa-black);
    background-color: transparent;
    color: var(--moa-black);
    font-size: 9px;
    line-height: 11px;
    letter-spacing: 0.04em;
  }
}

@media (max-width: 414px) {
  body.post-type-archive-product .product-grid:not(.product-grid--feed),
  body.woocommerce-shop .product-grid:not(.product-grid--feed) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}


/* =========================================================
   SHOP MOBILE BANNER — FIGMA EXACT
   Source image: banner-mbl.png — 414 × 279px
   ========================================================= */

@media screen and (max-width: 768px) {

  body.post-type-archive-product .shop-banner,
  body.woocommerce-shop .shop-banner {
    display: block !important;
    position: relative !important;

    width: 100% !important;
    max-width: none !important;

    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: 414 / 279 !important;

    margin: 0 !important;
    padding: 0 !important;

    background-image: url("../images/banner-mbl.png") !important;
    background-repeat: no-repeat !important;

    
    background-size: 100% auto !important;
    background-position: center center !important;

    background-color: #eeeeec !important;

    border: 0 !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }
}