/*
Theme Name: Pin Tiler
Theme URI: https://pintiler-dev.dara-soft.com/
Author: Dara Soft
Description: Block theme for the Pin Tiler WooCommerce store.
Version: 0.3.0
Requires at least: 6.6
Requires PHP: 8.0
Text Domain: pintiler
*/

/* WordPress shell normalization; visual rules live in the approved prototype CSS. */
html, body { margin: 0 !important; padding: 0 !important; border: 0 !important; }
html {
  background: #121920 url("assets/images/hero-background.webp") center top / auto 780px no-repeat;
}
body { font-size: 16px; background: transparent !important; }
.wp-site-blocks { padding: 0 !important; margin: 0 !important; background: transparent !important; }
.wp-site-blocks > * { margin-block-start: 0 !important; }
.site-shell { overflow: clip; margin-top: 0 !important; }
.site-main > * { margin-block-start: 0; }
.hero-wrap, .hero-wrap > * { margin-top: 0 !important; }
.hero-wrap > .wp-block-template-part {
  position: relative;
  z-index: 10;
  padding-top: 12px;
}
.hero-backdrop {
  inset: 0 0 auto !important;
  height: 780px;
}

/* The footer rule resets all margins; restore the shared container centering. */
.site-footer .footer-bottom { margin-inline: auto; }

/* Keep the outlined, connected header treatment on tablet as well. */
@media (min-width: 761px) and (max-width: 1050px) {
  .topbar {
    padding-inline: 18px;
    border: 1px solid rgba(255, 255, 255, .72);
    border-bottom: 0;
    border-radius: 12px 12px 0 0;
    background: rgba(5, 10, 14, .92);
  }
  .main-header {
    border: 1px solid rgba(12, 18, 24, .12);
    border-top: 0;
    border-radius: 0 0 10px 10px;
  }
  .main-header.is-sticky {
    border: 1px solid rgba(12, 18, 24, .12);
    border-radius: 10px;
  }
}

/* Keep the approved sticky appearance beyond the hero wrapper. */
.main-header.is-sticky {
  position: fixed;
  top: 12px;
  left: 50%;
  width: min(var(--shell), calc(100% - 48px));
  transform: translateX(-50%);
  z-index: 110;
}

/* WooCommerce foundation outside this homepage fidelity pass. */
.woocommerce .button, .wc-block-components-button {
  background: var(--brand-primary);
  color: var(--ink);
  border-radius: 8px;
  font-weight: 800;
}
.woocommerce main, .woocommerce-page main {
  width: min(1200px, calc(100% - 48px));
  margin: 48px auto 80px;
}

@media (max-width: 760px) {
  html { background-size: auto 710px; }
  .hero-backdrop { height: 710px; }
  .main-header.is-sticky { top: 12px; width: calc(100% - 28px); }
  .category-card > div { text-align: center; }
  .category-card button { margin: 7px auto 0; }
}

@media (max-width: 390px) {
  html { background-size: auto 700px; }
  .hero-backdrop { height: 700px; }
}