/* TantraGuru. WordPress compatibility layer for site.css (homepage A, verbatim).
   Every rule here exists because core or WooCommerce block markup differs from
   A's hand-written markup. No new design decisions live in this file. */

/* Core button shell: the link carries A's .btn classes (inc/render.php), the
   wrapper leaves the flex row. */
.tg-button-shell,
.wp-block-buttons > .wp-block-button.tg-button-shell { display: contents; margin: 0; }

/* A used <a class="store-all"> and <a class="card-link">. Core paragraphs wrap the link. */
p.store-all a,
p.card-link a { display: block; color: inherit; text-decoration: none; }
p.store-all,
p.card-link { color: var(--link); }
p.card-link a:hover { text-decoration: underline; }
p.store-all a:hover,
p.card-link a:hover { color: var(--link-hover); }

/* Lists from core/list: A's lists had no browser padding. */
.nav-links li,
.nav-drawer li,
.footer-list li,
.footer-tags li { margin: 0; }

/* Post content wrapper on the front page adds no box of its own. */
.home-content { display: contents; }

/* WooCommerce product collection, mapped onto A's .products grid. */
.store-collection { margin: 0; }
ul.products.wc-block-product-template {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-3);
  /* A's ul.products kept the browser list box (1em block margin, 40px inline-start
     padding). Reproduced for parity, not a new decision. */
  margin: 1em 0;
  padding: 0;
  padding-inline-start: 40px;
  list-style: none;
  max-width: none;
}
@media (min-width: 1024px) {
  ul.products.wc-block-product-template {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--s-5);
  }
}
ul.products > li.product {
  margin: 0;
  width: auto;
  max-width: none;
  text-align: start;
}
.product .product-media.wc-block-components-product-image {
  margin: 0;
  block-size: 130px;
  background: var(--line);
  overflow: hidden;
}
@media (min-width: 1024px) {
  .product .product-media.wc-block-components-product-image { block-size: 180px; }
}
.product .product-media a { display: block; block-size: 100%; }
.product .product-media img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}
/* Placeholder image stays hidden, A's empty media block shows instead. */
.product .product-media img[src*="woocommerce-placeholder"] { visibility: hidden; }

.product-body .text-caption a { color: inherit; text-decoration: none; }
.product-body .product-name {
  margin: 0;
  font-family: var(--font-body);
  line-height: var(--lh-body);
}
.product-body .wc-block-components-product-price,
.product-body .wp-block-woocommerce-product-price {
  margin: 0;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--ink-body);
  text-align: start;
}

/* Inner pages (not part of homepage A): readable column. */
.tg-prose { max-width: 760px; display: flex; flex-direction: column; gap: var(--s-4); }
.tg-prose > h1 { margin-block-end: var(--s-2); }

/* Editor only. In the editor the btn classes stay on the core button wrapper
   (inc/render.php moves them on the front end only), so the wrapper draws A's pill
   and the inner core link steps back. This selector never matches on the front end. */
.wp-block-button.btn > .wp-block-button__link {
  background: transparent;
  color: inherit;
  padding: 0;
  border: 0;
  border-radius: inherit;
  font: inherit;
  box-shadow: none;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: inherit;
  line-height: 1.2;
}

/* WooCommerce and other plugin templates (not homepage A). Their main element uses
   the constrained layout, which in this theme has no root padding. They get A's
   gutter, and theme.json contentSize (1152px, A's 1200px wrap minus its 24px
   gutters) lines their text up with the header. */
main.wp-block-group:not(.site-main) { padding-inline: var(--gutter); }

/* WooCommerce "coming soon" page: the footer sits at the bottom of the viewport. */
.wp-block-woocommerce-coming-soon {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}
.wp-block-woocommerce-coming-soon > .site-footer { margin-block-start: auto; }