/*
 * clutchstore.net — static archive layer.
 * Deliberately minimal: the store's own stylesheets do the work. This only
 * marks the controls that no longer function.
 */

.archive-hidden {
  display: none !important;
}

.archive-disabled,
[data-archive-disabled] {
  opacity: 0.4;
  cursor: not-allowed !important;
  pointer-events: none;
}

/* Keep the accelerated-checkout slots from reserving space for wallets that
   will never load offline. */
shopify-accelerated-checkout,
shopify-accelerated-checkout-cart,
.shopify-payment-button {
  display: none !important;
}

/* Anchors that pointed at pages the crawl never captured keep their styling
   but must not look clickable. */
[data-archive-dead] {
  cursor: default;
}

/* ---------------------------------------------------------------------------
   The one deliberate addition to the store's own markup: a notice under the
   add-to-cart button saying, in plain terms, that nothing here can be bought.
   Red, and at full opacity, so it reads as a warning rather than as more of
   the faded chrome around it. Colours are literal, not inherited from the
   page's colour scheme, so the warning stays red on every section background
   the theme uses (#ffffff and #eef1ea).
   --------------------------------------------------------------------------- */
.archive-buy-notice {
  direction: rtl;
  text-align: right;
  margin: 0.75rem 0 0;
  padding: 0.625rem 0.75rem;
  border: 1px solid #d32f2f;
  border-radius: 0.25rem;
  background-color: rgba(211, 47, 47, 0.08);
  color: #a3170c;
  font-size: 0.8125rem;
  line-height: 1.5;
}

.archive-buy-notice strong {
  display: block;
  margin-block-end: 0.125rem;
  color: #8c1209;
  font-weight: 700;
}

/* ---------------------------------------------------------------------------
   Product pages are rebuilt from the theme export (the crawl saved none), so
   the gallery grid is laid out here rather than by <media-gallery>, whose
   JS-driven layout needs a live storefront. Matches the store's own settings:
   media_presentation "grid", media_columns "two", image_gap 4.
   --------------------------------------------------------------------------- */
.product-information__media .media-gallery__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--image-gap, 4px);
}

.product-information__media .media-gallery__grid > .product-media-container:only-child {
  grid-column: span 2;
}

@media screen and (max-width: 749px) {
  .product-information__media .media-gallery__grid {
    grid-template-columns: 1fr;
  }
}