/* ==========================================================
   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;
}

/* Homepage shirts have no visible box: they sit right on the black background.
   The border is kept at the same width but made invisible, so every picture
   stays exactly the same size and position as before.
   (This only affects the homepage cards, not the product pages.) */
.product-card .image-box {
  position: relative;
  border-style: solid;
  border-color: transparent;
}

/* FRONT / BACK HOVER
   A card whose picture box has the class "has-back" holds two pictures:
   the front (shown normally) and the back (invisible until the mouse is
   over the picture). They crossfade in about a quarter of a second. */
.product-card .image-box .back-image {
  position: absolute;
  top: 16px;
  right: 16px;
  bottom: 16px;
  left: 16px;
  width: calc(100% - 32px);
  height: calc(100% - 32px);
  object-fit: contain;
  transform: scale(0.8);    /* the same size the back picture has on its product page */
  opacity: 0;
  transition: opacity 0.25s ease;
  pointer-events: none;
}

/* Only on devices with a real mouse. Phones and tablets keep showing the front. */
@media (hover: hover) and (pointer: fine) {
  .product-card .image-box.has-back .front-image {
    transition: opacity 0.25s ease;
  }
  .product-card .image-box.has-back:hover .front-image {
    opacity: 0;
  }
  .product-card .image-box.has-back:hover .back-image {
    opacity: 1;
  }
}

/* ==========================================================
   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; }
}