/* 1. FONTS */
@import url('https://fonts.googleapis.com/css2?family=Inconsolata:wght@700&family=Roboto+Mono:wght@100;400;700&family=Spectral:wght@400;700&display=swap');

:root {
  --pop-red: #ec2027;
  --delft-blue: #21409a;
  --blue-black: #0a152a;
  --off-white: #fafaf8;
  --space-10: 10px;
  --space-40: 40px;
  --radius: 0.2in;
}

/* promo banner */
.promo-banner {
  max-width: 1200px;
  margin: 24px auto 32px;
  padding: 0 24px;
}

.promo-banner img {
  width: 100%;
  height: auto;
  display: block;
  border: 1px solid var(--border);
}

/* embedded store */
.store-embed {
  max-width: 1200px;
  margin: 0 auto 48px;
  padding: 0 24px;
}

.store-embed iframe {
  width: 100%;
  min-height: 1600px; /* safe height for product grid */
  border: none;
}

/* 2. RESET */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  background-color: var(--off-white);
  color: var(--blue-black);
  font-family: 'Spectral', serif;
  font-size: 18px;
  line-height: 1.6;
  padding-bottom: 0;
}

.container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 var(--space-40);
}

/* 3. TYPOGRAPHY */
h1 {
  font-family: 'Inconsolata', monospace;
  font-size: 3rem;
  text-transform: uppercase;
}

.label-bold {
  font-family: 'Roboto Mono', monospace;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 0.75rem;
  text-decoration: none;
  color: inherit;
}

.label-reg {
  font-family: 'Roboto Mono', monospace;
  font-weight: 400;
  font-size: 0.85rem;
  color: var(--delft-blue);
}

/* 4. HEADER & NAV */
.site-header {
  padding: var(--space-40) 0;
}

.header-wrap {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.main-nav ul {
  list-style: none;
  display: flex;
  gap: var(--space-40);
}

.main-nav a {
  text-decoration: none;
  color: inherit;
  font-family: 'Roboto Mono', monospace;
  font-weight: 700;
  font-size: 0.8rem;
}

/* 5. PRODUCT GRID */

/* 1. DYNAMIC CONTAINER */
.content-wrapper.container {
  max-width: 100%;
  /* This adds the padding to both sides of the grid */
  padding: 0 5vw; /* 5% of the viewport width - scales with screen size */
  margin: 0 auto;
}

/* 2. THE DYNAMIC PRODUCT GRID */
/* ===== Home: 4-up Store Grid (scoped) ===== */
.hp-store {
  --hp-bg: var(--bg, #fff);
  --hp-fg: var(--fg, #000);
  --hp-stroke: var(--stroke, #000);
  --hp-muted: var(--muted, #666);
  background: var(--hp-bg);
  color: var(--hp-fg);
  padding: 28px 16px 10px;
}

.hp-store__wrap {
  max-width: 1100px;
  margin: 0 auto;
}

.hp-store__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}

.hp-store__title {
  font-size: 22px;
  margin: 0;
  font-weight: 700;
  letter-spacing: .02em;
}

.hp-store__link {
  color: var(--hp-fg);
  text-decoration: none;
  border: 1px solid var(--hp-stroke);
  padding: 6px 10px;
  font-weight: 700;
  letter-spacing: .02em;
}

.hp-store__link:hover {
  box-shadow: 4px 4px 0 0 var(--hp-stroke);
  transform: translate(-2px, -2px);
}

.hp-store__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

@media (min-width: 900px) {
  .hp-store__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.hp-card {
  border: 1px solid var(--hp-stroke);
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: var(--hp-bg);
  text-decoration: none;
  color: var(--hp-fg);
  transition: transform .08s ease, box-shadow .08s ease;
}

.hp-card:hover {
  box-shadow: 4px 4px 0 0 var(--hp-stroke);
  transform: translate(-2px, -2px);
}

.hp-card__thumb {
  aspect-ratio: 1 / 1;
  width: 100%;
  border: 1px solid var(--hp-stroke);
  object-fit: cover;
  background: #fafafa;
  display: block;
}

.hp-card__name {
  font-weight: 700;
  font-size: 15px;
  line-height: 1.2;
  margin: 0;
}

.hp-card__meta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 13px;
  color: var(--hp-muted);
}

.hp-pill {
  border: 1px solid var(--hp-stroke);
  padding: 2px 6px;
  font-size: 12px;
  line-height: 1;
  color: var(--hp-fg);
  background: var(--hp-bg);
}

.product-grid{
  display:grid;
  gap:0; /* grid lines come from borders */
  grid-template-columns:repeat(3, minmax(0, 1fr)); /* full screen: 3 wide */
  width:100%;
  border-top:1px solid #f1f2f2;
  border-left:1px solid #f1f2f2;
}

/* Large screens (optional breathing room) */
@media (min-width: 1600px){
  .product-grid{ grid-template-columns:repeat(3, minmax(0, 1fr)); }
}

/* Tablet / small laptop */
@media (max-width: 1100px){
  .product-grid{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
}

/* Phone */
@media (max-width: 640px){
  .product-grid{ grid-template-columns:repeat(1, minmax(0, 1fr)); }
}

/* 3. THE CARD & BORDER HACK */
.product-card {
  border-right: 1px solid #f1f2f2;
  border-bottom: 1px solid #f1f2f2;
  /* To remove the "outside" left border look, we ensure only internal borders show */
  text-decoration: none;
  color: inherit;
  background: #fff;
  display: flex;
  flex-direction: column;
}

.product-card:hover {
  opacity: 0.7;
  transform: none;
}
/* Image container (support both class names) */
.image-container {
  aspect-ratio: 1/1;
  width: 100%;
  overflow: hidden;
}

.image-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* Placeholder if no image */
.img-placeholder {
  width: 100%;
  height: 100%;
  background: #fff;
  border: 1px dashed rgba(10, 21, 42, 0.35);
}

/* Meta/info (support both class names) */
.product-info {
  padding: 15px;
  font-family: 'Roboto Mono', monospace;
  font-size: 10px;
  text-transform: uppercase;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.product-meta {
  padding: 15px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}

/* Text (support both idiosyncratic markup and the JS renderer) */
.product-title {
  font-family: 'Roboto Mono', monospace;
  font-weight: 700;
  font-size: 0.8rem;
  text-transform: uppercase;
  color: var(--blue-black);
}

.product-price {
  font-family: 'Roboto Mono', monospace;
  font-weight: 400;
  font-size: 0.85rem;
  color: var(--delft-blue);
}

.product-desc {
  font-family: 'Roboto Mono', monospace;
  font-size: 0.95rem;
  color: var(--blue-black);
  opacity: 0.85;
}

/* Loading / errors */
.loading {
  padding: 15px;
  border-right: 1px solid #f1f2f2;
  border-bottom: 1px solid #f1f2f2;
}

.product-error {
  margin-top: 12px;
  padding: 12px;
  border: 1px solid rgba(10, 21, 42, 0.25);
  border-radius: 12px;
  background: #fff;
  color: var(--blue-black);
  font-family: 'Roboto Mono', monospace;
  font-size: 0.8rem;
}

/* 4. RESPONSIVE TWEAK FOR SMALL SCREENS */
@media (max-width: 600px) {
  .content-wrapper.container {
    padding: 0 15px; /* Tighter padding on mobile */
  }
  .product-grid {
    /* Forces 2 columns on mobile even if screen is tiny */
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .header-wrap {
    flex-direction: column;
    gap: 20px;
    text-align: center;
  }
  .main-nav ul {
    gap: 15px;
    flex-wrap: wrap;
    justify-content: center;
  }
  .footer-wrap {
    flex-direction: column;
    align-items: center;
    gap: 40px;
  }
}


/* 6. PRODUCT DETAIL MODAL (OVERLAY) */
#productModal,
#product-modal,
.product-modal,
.modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
}

/* common "open" states */
#productModal.is-open,
#productModal.open,
#product-modal.is-open,
#product-modal.open,
.product-modal.is-open,
.product-modal.open,
.modal.is-open,
.modal.open,
.modal.active,
.modal[aria-hidden="false"]{
  display: block;
}

/* backdrop */
#productModal .modal__backdrop,
#product-modal .modal__backdrop,
.product-modal .modal__backdrop,
.modal .modal__backdrop,
#productModal .modal-backdrop,
#product-modal .modal-backdrop,
.product-modal .modal-backdrop,
.modal .modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.55);
}

/* panel/container */
#productModal .modal__panel,
#product-modal .modal__panel,
.product-modal .modal__panel,
.modal .modal__panel,
#productModal .modal-content,
#product-modal .modal-content,
.product-modal .modal-content,
.modal .modal-content {
  position: relative;
  max-width: 980px;
  width: calc(100% - 32px);
  margin: 32px auto;
  background: #fff;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0,0,0,0.25);
}

/* close button */
#productModal .modal__close,
#product-modal .modal__close,
.product-modal .modal__close,
.modal .modal__close,
#productModal .close,
#product-modal .close,
.product-modal .close,
.modal .close {
  position: absolute;
  top: 10px;
  right: 12px;
  border: 0;
  background: transparent;
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
  color: #0a152f;
}

/* body layout inside modal */
#productModal .modal__content,
#product-modal .modal__content,
.product-modal .modal__content,
.modal .modal__content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  padding: 18px;
}

#productModal img,
#product-modal img,
.product-modal img,
.modal img{
  width: 100%;
  height: auto;
  display: block;
  border-radius: 12px;
  background: #f6f6f6;
}

/* text inside modal uses Roboto Mono for descriptions/meta */
#productModal .modal__info,
#product-modal .modal__info,
.product-modal .modal__info,
.modal .modal__info,
#productModal .product-desc,
#product-modal .product-desc,
.product-modal .product-desc,
.modal .product-desc{
  font-family: 'Roboto Mono', monospace;
  color: #0a152f;
}

@media (max-width: 820px){
  #productModal .modal__content,
  #product-modal .modal__content,
  .product-modal .modal__content,
  .modal .modal__content{
    grid-template-columns: 1fr;
  }
  #productModal .modal__panel,
  #product-modal .modal__panel,
  .product-modal .modal__panel,
  .modal .modal__panel,
  #productModal .modal-content,
  #product-modal .modal-content,
  .product-modal .modal-content,
  .modal .modal-content{
    margin: 14px auto;
  }
}



/* ===== GRID PERFORMANCE + LAYOUT OVERRIDES ===== */
:root{
  --grid-line:#f1f2f2;
  --ink:#0a152f;
  --mono:"Roboto Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono","Courier New", monospace;
}

/* Keep the grid comfortably centered like a premium gallery */
.content-wrapper.container{
  max-width: 1600px;            /* prevents ultra-wide stretching */
  margin: 0 auto;
  padding: 0 5vw;               /* maintains your current aesthetic */
}

/* Make each product cell feel like a clean “card” inside the grid */
.product-card,
.product,
.product-item{
  border-right:1px solid var(--grid-line);
  border-bottom:1px solid var(--grid-line);
  padding: 18px 18px 22px;
  background: transparent;
}

/* Image: contain, not crop; avoid giant images taking over */
.product-card img,
.product img,
.product-item img{
  width: 100%;
  height: auto;
  display:block;
  object-fit: contain;
  max-height: 520px;            /* keeps rows balanced */
  margin: 0 auto 14px;
}

/* Typography: crisp mono for product copy */
.product-title,
.product-name,
.product-card .title,
.product-card .name,
.product-card h3,
.product-desc,
.product-card .description,
.product-card p,
.product-meta,
.product-card .meta{
  font-family: var(--mono) !important;
  color: var(--ink);
}

/* Keep description readable and not sprawling */
.product-desc,
.product-card .description{
  font-size: 13px;
  line-height: 1.35;
  max-width: 52ch;
}

/* Price / meta */
.product-price,
.product-card .price,
.product-meta,
.product-card .meta{
  font-size: 13px;
  letter-spacing: 0.02em;
}

/* Hover: subtle, performance-friendly */
.product-card:hover img,
.product:hover img,
.product-item:hover img{
  filter: drop-shadow(0 10px 18px rgba(10,21,47,0.12));
}

/* Prevent accidental huge vertical gaps if an element is injected above grid */
#productDetail,
.product-detail,
.product-details{
  max-width: 900px;
}

/* =========================
   HOMEPAGE LAYOUT TWEAKS
   ========================= */

/* 1) Site background */
html, body {
  background: #f1f2f2;
}

/* 2) Left/right padding for header + main content */
:root {
  --side-pad: 5vw;   /* tweak this: try 4vw–6vw */
  --max-content: 1200px;
}

/* If your CSS already defines .site-container, this will refine it */
.site-container {
  max-width: var(--max-content);
  margin: 0 auto;
  padding-left: var(--side-pad);
  padding-right: var(--side-pad);
}

/* Your main uses: <main class="content-wrapper container"> */
.content-wrapper.container {
  max-width: var(--max-content);
  margin: 0 auto;
  padding-left: var(--side-pad);
  padding-right: var(--side-pad);
}

/* 3) Product grid: 2-wide, each slot 500px, image 450px */
.grid {
  display: grid;
  grid-template-columns: repeat(2, 500px);
  gap: 24px;
  justify-content: center; /* keeps the 2 columns nicely centered */
}

/* Make each card fit the grid slot */
.grid .card {
  width: 500px;
}

/* Product image sizing */
.grid .thumb {
  width: 450px;
  height: 450px;       /* square */
  object-fit: contain; /* show whole artwork without cropping */
  display: block;
  margin: 0 auto;
}

/* Optional: stack to 1 column on smaller screens */
@media (max-width: 1100px) {
  .grid {
    grid-template-columns: 1fr;
    justify-content: stretch;
  }
  .grid .card {
    width: 100%;
  }
  .grid .thumb {
    width: min(450px, 100%);
    height: auto;
  }
}

.product-grid {
  margin-top: 40px;
}

/* Match homepage side padding on the store page */
.store-content-wrapper,
.store-main,
#MainContent {
  max-width: 1200px;      /* keeps content centered and not full width */
  margin-left: auto;      /* center horizontally */
  margin-right: auto;     /* center horizontally */
  padding-left: 20px;     /* adjust to match homepage */
  padding-right: 20px;    /* adjust to match homepage */
  box-sizing: border-box; /* ensures padding doesn’t break layout */
}

@media (min-width: 768px) {
  .store-content-wrapper,
  .store-main,
  #MainContent {
    padding-left: 40px;
    padding-right: 40px;
  }
}