/* ================================
   App-compact sizing (final pass)
   ================================ */

/* Tweakable caps */
:root {
  --card-max: 384px;   /* overall card/tile width cap on phones */
  --img-max:  180px;   /* hero image width on phones */
}

/* --- Product pages --- */
.page-product .product-card{
  max-width: var(--card-max);
  margin: 0 auto;
  padding: 12px;
  gap: 12px;
}
.page-product .product-card__media img{
  max-width: var(--img-max);
  max-height: 160px;
  margin: 0 auto;
  border-radius: 10px;
}
.page-product .product-card__body{
  gap: 10px;
  justify-items: center;
  text-align: center;
}
.page-product h1{ font-size: 1.25rem; margin-bottom: 6px; }
.page-product h2{ font-size: 1.25rem; }
.page-product .price{ font-size: 1.125rem; }
.page-product .product-card__body .btn{
  justify-self: center;
  min-height: 44px;
  padding: 10px 14px;
}

/* Swatch picker (site style) */
.page-product .swatch-row{ display:flex; gap:8px; margin:8px 0 6px; }
.page-product .swatch{
  width:36px; height:36px; border:1px solid var(--line); border-radius:12px;
  display:flex; align-items:center; justify-content:center; background:#f8fafc; cursor:pointer;
  transition: transform .12s ease, box-shadow .12s ease;
}
.page-product .swatch .dot{ width:14px; height:14px; border-radius:50%; }
.page-product .swatch[data-color="green"]  .dot{ background:#22c55e; }
.page-product .swatch[data-color="blue"]   .dot{ background:#3b82f6; }
.page-product .swatch[data-color="pink"]   .dot{ background:#ec4899; }
.page-product .swatch[data-color="red"]    .dot{ background:#ef4444; }
.page-product .swatch[data-color="yellow"] .dot{ background:#eab308; }
.page-product .swatch:hover{ transform:translateY(-1px); box-shadow:0 6px 14px rgba(2,6,12,.10); }
.page-product .swatch:focus-visible{ outline:2px solid var(--green); outline-offset:3px; }
.page-product .swatch.active{ outline:2px solid var(--green); box-shadow:0 0 0 3px rgba(7,192,103,.18); }
.page-product .selected-label{ text-align:center; font-size:12px; line-height:1.2; }
.page-product .selected-label span{ font-weight:800; }

/* Smaller swatches on narrow devices */
@media (max-width: 380px){
  .page-product .swatch{ width:30px; height:30px; border-radius:10px; }
  .page-product .swatch .dot{ width:10px; height:10px; }
}

/* Desktop: allow a wider, two-column layout */
@media (min-width: 960px){
  .page-product .product-card{
    grid-template-columns: 1fr 1fr;
    max-width: 900px;
    padding: 20px;
    gap: 24px;
  }
  .page-product .product-card__body{ justify-items:start; text-align:left; }
  .page-product .product-card__media img{ max-width: 360px; max-height: 300px; }
}

/* --- Shop home grid --- */
.page-shop-home .grid-products{
  max-width: 900px;
  margin: 0 auto;
  padding: 0 12px;
  display: grid;
  gap: 12px;
  justify-items: center;
}
/* 1-col phone, 2-col tablet, 3-col desktop */
@media (min-width: 720px){  .page-shop-home .grid-products{ grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (min-width: 1040px){ .page-shop-home .grid-products{ grid-template-columns: repeat(3, minmax(0,1fr)); } }

/* Tile sizing (single definition) */
.page-shop-home .product-tile{
  width: 100%;
  max-width: var(--card-max);   /* caps width consistently */
  padding: 10px 12px;           /* tight padding to preview next card */
}

/* Tile image */
.page-shop-home .product-tile img{
  display: block;
  max-width: var(--img-max);    /* matches product pages */
  width: 100%;
  height: auto;
  margin: 4px auto 0;
  border-radius: 12px;
}

/* Tile content */
.page-shop-home .product-tile__body{
  display: grid;
  gap: 10px;
  justify-items: center;
  text-align: center;
}
.page-shop-home .product-tile h2{ font-size: 1.125rem; }
.page-shop-home .product-tile .price{ font-size: 1.125rem; }

/* CTA natural width */
.page-shop-home .product-tile .btn{
  width: auto; max-width: 100%;
  min-height: 44px; padding: 10px 14px; justify-self: center;
}

/* Success page notes + layout */
.success-notes { margin: 0; padding-left: 1rem; }
.success-ctas { display: grid; gap: 8px; margin-top: 12px; }
.addr-lines { white-space: pre-line; }

/* Success page order summary */
.order-summary { margin-top: 12px; display: grid; gap: 10px; }
.order-summary h3 { margin: 0; font-size: 1rem; }
.order-items { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.order-items li { display: grid; grid-template-columns: 1fr auto; gap: 8px; border: 1px solid var(--border); border-radius: 10px; padding: 8px 10px; background: #fff; }
.order-items .desc { font-weight: 600; }
.order-items .meta { color: var(--text-muted); font-size: 12px; }
.order-items .amt { font-weight: 700; }
.order-totals { border-top: 1px solid var(--border); padding-top: 8px; display: grid; gap: 6px; }
.order-totals > div { display: grid; grid-template-columns: 1fr auto; gap: 8px; }
.order-total { font-weight: 800; }