/* Add-to-cart pop-up and cart drawer, shared by the homepage and the shop page. */

.overlay button { font-family: inherit; cursor: pointer; }
.product:focus, .drawer:focus { outline: none; }

.overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(0, 0, 0, 0.6);
  align-items: center;
  justify-content: center;
  padding: 16px;
  font-family: 'Outfit', sans-serif;
  font-weight: 200;
  color: #2a2a2a;
}
.overlay.active { display: flex; }

/* ─── Add-to-cart pop-up ─── */
/* Layout A (default, narrower screens): picture on top, then one row with the name and price,
   the size and paper line on the left and ADD TO CART on the right.
   The picture has the SAME white space above and below it (the top strip also keeps the
   close button clear of the picture). */
.product {
  background: #fff;
  border-radius: 4px;
  width: 100%;
  max-width: 1100px;
  max-height: 96vh;
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.product-img {
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px 20px;
  min-height: 0;
  flex: 1 1 auto;
  position: relative;
}
/* The picture's width comes from its known shape (--ar = width/height) and the height
   available (--max-h), so the box is the final size before the image has downloaded. */
.product-img img {
  --max-h: calc(96vh - 248px);
  display: block;
  width: min(100%, calc(var(--max-h) * var(--ar, 1)));
  height: auto;
  aspect-ratio: var(--ar, 1);
  object-fit: contain;
  background: #f0f0f0;
  transition: filter 0.35s ease;
}
.product-img.is-loading img { filter: blur(10px); }
.product-img.is-loading::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  box-sizing: border-box;
  width: 32px;
  height: 32px;
  margin: -16px 0 0 -16px;
  border: 3px solid rgba(0, 0, 0, 0.15);
  border-top-color: #000;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 8px #fff; /* white disc so the spinner reads over a busy picture */
  animation: shop-spin 0.8s linear infinite;
}
@keyframes shop-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .product-img.is-loading::after { animation: none; }
  .product-img img { transition: none; }
}

.product-info {
  background: #f4f4f4;
  flex: 0 0 auto;
  padding: 20px 24px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
}
.product-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
/* Name and price share one line (the price drops underneath only if the name is very long). */
.product-head { display: flex; align-items: baseline; flex-wrap: wrap; column-gap: 16px; row-gap: 2px; }
.product-head h2 {
  font-family: 'Futura', 'Futura PT', 'Trebuchet MS', 'Century Gothic', sans-serif;
  font-weight: 500;
  font-size: 24px;
  letter-spacing: 1px;
}
.product-head .price { font-weight: 600; font-size: 18px; color: #000; white-space: nowrap; }
.product-info .blurb { font-weight: 300; font-size: 14px; line-height: 1.6; }
.product-info .primary { flex: 0 0 auto; min-width: 210px; }
.product-info [hidden] { display: none !important; }

@media (max-width: 400px) {
  .product-head h2 { font-size: 20px; }
  .product-head .price { font-size: 16px; }
  .product-head { column-gap: 10px; }
}

/* Phones: everything in one column, button full width, the pop-up scrolls if needed. */
@media (max-width: 560px) {
  .product { overflow: auto; max-height: 94vh; }
  .product-img { flex: 0 0 auto; padding: 48px 16px; }
  .product-img img { --max-h: 46vh; }
  .product-info {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    padding: 18px 20px 22px;
  }
  .product-info .primary { width: 100%; min-width: 0; }
}

/* Large landscape screens: the picture gets most of the space, details in a column beside it.
   The close button sits in the details column here, so the picture has even 28px margins all round. */
@media (min-width: 1000px) and (min-aspect-ratio: 5/4) {
  .overlay { padding: 2vh 2vw; }
  .product {
    max-width: min(1500px, 96vw);
    height: 94vh;
    max-height: 94vh;
    display: grid;
    grid-template-columns: minmax(0, 1fr) clamp(300px, 28vw, 400px);
  }
  .product-img { padding: 28px; }
  .product-img img { --max-h: calc(94vh - 56px); }
  .product-info {
    padding: 56px 34px 34px;
    overflow: auto;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 14px;
  }
  .product-text { flex: 0 0 auto; }
  .product-info .primary { width: 100%; min-width: 0; margin-top: auto; } /* pinned to the bottom of the column */
}

.sizes { display: flex; flex-wrap: wrap; gap: 10px; }
.size-btn {
  border: 1px solid #000;
  background: #fff;
  padding: 12px 16px;
  font-size: 14px;
  font-weight: 300;
  border-radius: 2px;
}
.size-btn small { display: block; font-size: 12px; opacity: 0.7; margin-top: 2px; }
.size-btn.selected { background: #000; color: #fff; }

.primary {
  background: #000;
  color: #fff;
  border: none;
  padding: 14px 20px;
  font-size: 15px;
  letter-spacing: 1.5px;
  border-radius: 2px;
}
.primary:hover { opacity: 0.8; }
.primary:disabled { opacity: 0.4; cursor: default; }

.x-btn {
  position: absolute;
  top: 2px;
  right: 6px;
  width: 44px;
  height: 44px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  font-size: 2rem;
  line-height: 1;
  z-index: 2;
}
.x-btn:hover { opacity: 0.6; }

/* ─── Cart drawer ─── */
.drawer-overlay { justify-content: flex-end; align-items: stretch; padding: 0; }
@media (min-width: 701px) { .drawer-overlay { padding: 0; } }
.drawer {
  background: #fff;
  width: min(420px, 100%);
  height: 100%;
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
  position: relative;
}
.drawer h2 {
  font-family: 'Futura', 'Futura PT', 'Trebuchet MS', 'Century Gothic', sans-serif;
  font-weight: 500;
  letter-spacing: 1.5px;
  margin-bottom: 20px;
}
.cart-lines { flex: 1; overflow: auto; }
.cart-line { display: grid; grid-template-columns: 64px 1fr auto; gap: 14px; padding: 14px 0; border-bottom: 1px solid #eee; align-items: center; }
.cart-line img { width: 64px; height: 64px; object-fit: cover; border-radius: 2px; }
.cart-line .t { font-size: 14px; font-weight: 400; }
.cart-line .s { font-size: 13px; font-weight: 300; opacity: 0.75; }
.qty { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
.qty button:not(.remove) { width: 26px; height: 26px; border: 1px solid #000; background: #fff; border-radius: 2px; }
.remove { background: none; border: none; font-size: 12px; text-decoration: underline; margin-left: 6px; }
.cart-line .p { font-size: 14px; font-weight: 400; }
.cart-foot { padding-top: 18px; display: flex; flex-direction: column; gap: 12px; }
.row { display: flex; justify-content: space-between; font-size: 15px; font-weight: 300; }
.row.total { font-weight: 400; font-size: 17px; }
.fine { font-size: 12px; opacity: 0.7; line-height: 1.5; }
.empty { text-align: center; padding: 40px 0; font-weight: 300; }
.error { color: #b00020; font-size: 13px; min-height: 1em; }

/* ─── Thank-you dialog (after paying) ─── */
.thanks {
  background: #fff;
  border-radius: 4px;
  width: 100%;
  max-width: 460px;
  padding: 44px 32px 36px;
  text-align: center;
  position: relative;
}
.thanks h2 {
  font-family: 'Futura', 'Futura PT', 'Trebuchet MS', 'Century Gothic', sans-serif;
  font-weight: 500;
  letter-spacing: 2px;
  font-size: 26px;
  margin-bottom: 14px;
}
.thanks p { font-weight: 300; line-height: 1.7; margin-bottom: 26px; }
.thanks:focus { outline: none; }