/* ==========================================================
   style.css - shared by index.html and product.html
   Change the colors here and both pages update.
   ========================================================== */

:root {
  --black: #000000;      /* page background */
  --red: #ff2d2d;        /* main red for text, borders, buttons */
  --dim-red: #d9382d;    /* softer red for less important text */
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--black);
  color: var(--red);
  font-family: "Avenir Next", "Segoe UI", Helvetica, Arial, sans-serif;
  line-height: 1.5;
}

a { color: inherit; }

/* ---------- Logo, centered at the top ---------- */
header {
  padding: 32px 24px 8px;
  text-align: center;
}
.store-name {
  display: inline-block;
}
/* To make the logo bigger or smaller, change the 400px below */
.store-name img {
  display: block;
  width: min(400px, 80vw);
  height: auto;
}
.store-name:focus-visible {
  outline: 3px solid var(--red);
  outline-offset: 6px;
}

main {
  max-width: 1100px;
  margin: 0 auto;
  padding: 40px 24px 72px;
}

footer {
  text-align: center;
  padding: 24px;
  color: var(--dim-red);
  font-size: 0.9rem;
}

/* ---------- Image placeholder (dashed red line looks like stitches) ---------- */
.image-box {
  aspect-ratio: 4 / 5;
  background: var(--black);
  border: 3px dashed var(--red);
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--dim-red);
  padding: 16px;
  overflow: hidden;
}
.image-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Size for realrawshit-back.png: shows the whole picture, smaller,
   centered, with empty space around it. To make it smaller,
   lower the 80%. To make it bigger, raise it. */
.image-box img.shrink {
  width: 80%;
  height: 80%;
  object-fit: contain;
}

/* Size for cart-monster.png only (homepage and product page).
   To make it smaller, lower the 88%. To make it bigger, raise it. */
.image-box img.cart-monster-size {
  width: 88%;
  height: 88%;
  object-fit: contain;
}
.coming-soon-text {
  margin: 0;
  color: var(--red);
  font-size: 1.4rem;
  font-weight: 800;
  letter-spacing: 0.06em;
}

/* ---------- Buttons (used for links AND real buttons) ---------- */
.button {
  display: block;
  width: 100%;
  padding: 14px 20px;
  background: var(--black);
  color: var(--red);
  border: 2px solid var(--red);
  border-radius: 6px;
  font-family: inherit;
  font-size: 1.05rem;
  font-weight: 800;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}
.button:hover { background: var(--red); color: var(--black); }
.button:focus-visible { outline: 3px solid var(--red); outline-offset: 3px; }

/* A button that can't be used yet (Coming Soon) */
.button:disabled {
  background: var(--black);
  color: var(--dim-red);
  border-style: dashed;
  border-color: var(--dim-red);
  cursor: not-allowed;
}
.button:disabled:hover {
  background: var(--black);
  color: var(--dim-red);
}

/* ==========================================================
   HOMEPAGE (index.html)
   ========================================================== */

/* The grid: as many 240px+ columns as fit, and it shrinks on phones */
.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 32px;
}
.product-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.product-card h2 {
  margin: 4px 0 0;
  font-size: 1.2rem;
}
.product-card .price {
  margin: 0 0 4px;
  font-size: 1.1rem;
  font-weight: 700;
}
/* Pushes the button to the bottom so all buttons line up in a row */
.product-card .button {
  margin-top: auto;
  line-height: 1.5;
}

/* ==========================================================
   PRODUCT PAGE (product.html)
   ========================================================== */
.back-link {
  display: inline-block;
  margin-bottom: 24px;
  color: var(--dim-red);
  font-weight: 700;
}

.product-page {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 48px;
  align-items: center;
}

/* Small photo buttons under the big photo (only for shirts with 2+ photos) */
.thumbs {
  display: flex;
  gap: 12px;
  margin-top: 16px;
}
.thumbs:empty { display: none; }
.thumb {
  width: 72px;
  aspect-ratio: 4 / 5;
  padding: 0;
  background: var(--black);
  border: 2px solid var(--dim-red);
  border-radius: 4px;
  overflow: hidden;
  cursor: pointer;
}
.thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* The photo currently showing gets a bright red frame */
.thumb[aria-pressed="true"] {
  border-color: var(--red);
  box-shadow: 0 0 0 2px var(--red);
}
.thumb:focus-visible { outline: 3px solid var(--red); outline-offset: 4px; }
.details h1 {
  margin: 0 0 12px;
  font-size: clamp(2.2rem, 5vw, 3.4rem);
  line-height: 1.05;
}
.description {
  margin: 0 0 24px;
  color: var(--dim-red);
  font-size: 1.1rem;
  max-width: 40ch;
}
.details .price {
  margin: 0 0 28px;
  font-size: 2rem;
  font-weight: 800;
}

fieldset {
  border: 0;
  padding: 0;
  margin: 0 0 32px;
}
legend {
  font-weight: 700;
  margin-bottom: 12px;
  padding: 0;
}
.sizes {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.sizes input {
  /* hide the round radio button but keep it usable with the keyboard */
  position: absolute;
  opacity: 0;
}
.sizes label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  background: var(--black);
  color: var(--red);
  border: 2px solid var(--red);
  border-radius: 6px;
  font-weight: 700;
  cursor: pointer;
}
.sizes input:checked + label {
  background: var(--red);
  color: var(--black);
}
.sizes input:focus-visible + label {
  outline: 3px solid var(--red);
  outline-offset: 3px;
}

.details .button {
  padding: 18px 24px;
  font-size: 1.2rem;
}

/* The message that appears after clicking Buy Now */
.message {
  margin: 16px 0 0;
  min-height: 1.5em;
  font-weight: 700;
}

/* ---------- Phones: stack things vertically ---------- */
@media (max-width: 800px) {
  .product-page { grid-template-columns: 1fr; gap: 32px; }
}

/* ==========================================================
   SHOPPING CART
   ========================================================== */

/* ---------- Cart button in the top-right corner (every page) ---------- */
header { position: relative; }

.cart-link {
  position: absolute;
  top: 28px;
  right: 24px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px;
  color: var(--red);
  font-size: 1.2rem;
  font-weight: 800;
  text-decoration: none;
}
.cart-link:hover .cart-count { background: var(--red); color: var(--black); }
.cart-link:focus-visible {
  outline: 3px solid var(--red);
  outline-offset: 3px;
}
.cart-count {
  min-width: 1.9em;
  padding: 2px 6px;
  border: 2px solid var(--red);
  border-radius: 999px;
  line-height: 1.4;
  text-align: center;
}

/* On phones the cart button sits above the logo so they don't overlap */
@media (max-width: 640px) {
  header { padding-top: 72px; }
  .cart-link { top: 16px; right: 16px; }
}

/* ---------- Cart page (cart.html) ---------- */
.cart-title {
  margin: 0 0 32px;
  font-size: clamp(2rem, 5vw, 3rem);
  line-height: 1.1;
}
.cart-title:focus { outline: none; }

.cart-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.cart-item + .cart-item { margin-top: 24px; }

/* One row per shirt: picture | name/size/price | quantity | line price.
   Everything has a fixed or flexible width set right here, so the row
   can't collapse or overlap, whatever browser or picture size is used. */
.cart-item {
  display: flex;
  align-items: center;
  gap: 20px;
  padding-bottom: 24px;
  border-bottom: 2px dashed var(--dim-red);
}
/* The picture box has a fixed size (96 x 120). The picture inside is
   placed and sized by the box, not by the picture file itself. */
.cart-item-image {
  position: relative;
  flex: 0 0 96px;
  width: 96px;
  height: 120px;
  background: var(--black);
  border: 2px dashed var(--red);
  border-radius: 4px;
  overflow: hidden;
}
.cart-item-image img {
  position: absolute;
  top: 6px;
  left: 6px;
  width: calc(100% - 12px);
  height: calc(100% - 12px);
  object-fit: contain;
}
.cart-item-info {
  flex: 1 1 auto;
  min-width: 0;
}
.cart-item-name {
  margin: 0 0 4px;
  font-size: 1.2rem;
}
.cart-item-detail {
  margin: 0;
  color: var(--dim-red);
}
.remove-button {
  margin-top: 8px;
  padding: 0;
  background: none;
  border: 0;
  color: var(--dim-red);
  font-family: inherit;
  font-size: 1rem;
  font-weight: 700;
  text-decoration: underline;
  cursor: pointer;
}
.remove-button:hover { color: var(--red); }
.remove-button:focus-visible { outline: 3px solid var(--red); outline-offset: 3px; }

.cart-item-qty {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 8px;
}
.qty-button {
  width: 40px;
  height: 40px;
  padding: 0;
  background: var(--black);
  color: var(--red);
  border: 2px solid var(--red);
  border-radius: 6px;
  font-family: inherit;
  font-size: 1.2rem;
  font-weight: 800;
  cursor: pointer;
}
.qty-button:hover { background: var(--red); color: var(--black); }
.qty-button:focus-visible { outline: 3px solid var(--red); outline-offset: 3px; }
.qty-button:disabled {
  background: var(--black);
  color: var(--dim-red);
  border-style: dashed;
  border-color: var(--dim-red);
  cursor: not-allowed;
}
.qty-number {
  min-width: 2ch;
  text-align: center;
  font-size: 1.2rem;
  font-weight: 800;
}
.cart-item-total {
  flex: 0 0 100px;
  margin: 0;
  text-align: right;
  font-size: 1.2rem;
  font-weight: 800;
}

/* Empty cart */
.cart-empty p {
  margin: 0 0 20px;
  font-size: 1.2rem;
}
.cart-empty .button {
  max-width: 320px;
}

/* Total and Checkout button at the bottom */
.cart-summary {
  max-width: 480px;
  margin: 40px 0 0 auto;
}
.cart-total {
  display: flex;
  justify-content: space-between;
  margin: 0 0 20px;
  padding-top: 20px;
  border-top: 2px solid var(--red);
  font-size: 1.6rem;
  font-weight: 800;
}
.cart-summary .button {
  padding: 18px 24px;
  font-size: 1.2rem;
}
.continue-link {
  display: inline-block;
  margin-top: 16px;
  color: var(--dim-red);
  font-weight: 700;
}

/* Note under the cart total ("Shipping and taxes are calculated at checkout.") */
.cart-note {
  margin: -8px 0 16px;
  color: var(--dim-red);
  font-size: 0.95rem;
}

/* ---------- Success page (success.html) ---------- */
.success-page {
  max-width: 640px;
}
.success-text {
  margin: 0 0 32px;
  font-size: 1.2rem;
}
.order-lines {
  list-style: none;
  margin: 0 0 8px;
  padding: 0;
}
.order-line {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding: 14px 0;
  border-bottom: 2px dashed var(--dim-red);
  font-weight: 700;
}
.order-line span:last-child {
  flex: 0 0 auto;
}
.order-totals p {
  display: flex;
  justify-content: space-between;
  margin: 10px 0 0;
}
.order-totals .order-total {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 2px solid var(--red);
  font-size: 1.6rem;
  font-weight: 800;
}
.success-button {
  max-width: 320px;
  margin-top: 40px;
}

/* Phones: the quantity and price go on a second line under each item */
@media (max-width: 700px) {
  .cart-item { flex-wrap: wrap; }
  /* The info fills the rest of the first line (100% minus the 96px picture
     and the 20px gap), which pushes quantity and price onto the second line. */
  .cart-item-info { flex: 0 0 calc(100% - 116px); }
  .cart-item-total { flex: 1 1 0; }
  .cart-summary { max-width: none; }
}