/* 4k-override.css */

/* Base paragraph gap (used on big desktops 1920px+) */
.description-container p {
  margin: 0 0 12px;
  line-height: 1.4;
}

.description-container p:last-child {
  margin-bottom: 0;
}

/* =========================================================
   BASE PRICE STYLING (ALL DEVICES)
   ========================================================= */
.price {
  color: #ff2600;                           /* old original red */
  font-family: 'Anonymous Pro', monospace;
  font-weight: 700;
}

/* Non-phone (PC + tablets): make price same size as old price
   and make old price underlined + smaller so it's not enormous */
@media (min-width: 481px) {
  .price {
    font-size: 1.2rem;
  }

  .old-price {
    color: #cfcfcf;
    font-size: 1.2rem;
    text-decoration: line-through;
    text-decoration-thickness: 2px;
    text-decoration-color: #cfcfcf;
  }
}


/* =========================================================
   1) PHONE LAYOUT – ≤480px
   ========================================================= */
@media (max-width: 480px) {

  /* Main hero wrapper – 80% width, centered */
  .image-text-container {
    position: static !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 20px !important;

    width: 80vw !important;
    max-width: 480px !important;
    margin: 140px auto 60px !important;
    padding: 0 !important;
  }

  /* Product image */
  .book3-image {
    position: static !important;
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 0 16px 0 !important;
    padding: 0 !important;
    border-radius: 10px;
  }

  /* Text block */
  .book3-text {
    position: static !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    padding: 0 !important;
    text-align: center !important;
  }

  .book3-text > * {
    text-align: center !important;
  }

  .book3-text h1 {
    width: 100% !important;
    margin: 10px 0 5px !important;
    font-size: 3.2rem !important;
    line-height: 1 !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
  }

  /* Yellow label */
  .highlighted-text {
    display: inline-block !important;
    white-space: nowrap !important;
    padding: 0 10px !important;
    border-radius: 8px !important;
  }

  /* Badges */
  .preset-packs,
  .preset-packs1 {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    white-space: nowrap !important;

    font-size: clamp(0.8rem, 3vw, 1.1rem) !important;
    padding: 5px clamp(18px, 10vw, 48px) !important;
    width: auto !important;
    max-width: 100% !important;
    margin: 0 auto 10px !important;
  }

  /* Stars */
  .star-rating {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    margin-top: 10px !important;
    margin-bottom: 4px !important;
  }

  /* Price area */
  .price-container {
    display: inline-flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 10px !important;

    width: 100% !important;
    max-width: 320px !important;
    margin: 24px auto !important;
    padding: 0 !important;
    text-align: center !important;
    font-size: inherit !important;
  }

  .price-paragraph {
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.2 !important;
  }

  /* Quantity centered */
  .quantity-container {
    margin: 10px auto 20px !important;
    display: flex !important;
    justify-content: center !important;
  }

  /* Buttons */
  .button-stack {
    width: 100% !important;
    max-width: 320px !important;
    margin: 0 auto 20px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    align-items: center !important;
  }

  .button-stack .buy-now-button {
    display: block !important;
    width: 100% !important;
    padding: 10px 0 !important;
    box-sizing: border-box !important;
  }

  /* Description */
  .description-container {
    width: 100% !important;
    max-width: 360px !important;
    margin: 0 auto 60px !important;
    text-align: center !important;
    font-size: 1rem !important;
  }

  .description-container p {
    width: 100% !important;
    margin: 0 0 22px !important;   /* EXTRA gap on phones */
  }

  .description-container p:last-child {
    margin-bottom: 0 !important;
  }
}


/* =========================================================
   2) TABLETS & SMALL DESKTOPS – 481px to 1919px
   Same centered layout as 480px, just scaled up
   ========================================================= */
@media (min-width: 481px) and (max-width: 1919px) {

  .image-text-container {
    position: static !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 24px !important;

    width: 80vw !important;
    max-width: 900px !important;
    margin: 160px auto 80px !important;
    padding: 0 !important;
  }

  .book3-image {
    position: static !important;
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 0 20px 0 !important;
    padding: 0 !important;
    border-radius: 10px;
  }

  .book3-text {
    position: static !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    padding: 0 !important;
    text-align: center !important;
  }

  .book3-text > * {
    text-align: center !important;
  }

  .book3-text h1 {
    width: 100% !important;
    margin: 12px 0 8px !important;
    font-size: clamp(3rem, 4vw, 4rem) !important;
    line-height: 1 !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
  }

  .highlighted-text {
    display: inline-block !important;
    white-space: nowrap !important;
    padding: 0 12px !important;
    border-radius: 8px !important;
    font-size: clamp(2rem, 3vw, 2.6rem) !important;
  }

  .preset-packs,
  .preset-packs1 {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    white-space: nowrap !important;
    font-size: clamp(0.9rem, 1.2vw, 1.1rem) !important;
    padding: 6px clamp(20px, 8vw, 52px) !important;
    width: auto !important;
    max-width: 100% !important;
    margin: 0 auto 12px !important;
  }

  .star-rating {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    margin-top: 12px !important;
    margin-bottom: 4px !important;
  }

  .price-container {
    display: inline-flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 10px !important;

    width: 100% !important;
    max-width: 320px !important;
    margin: 24px auto !important;
    padding: 0 !important;
    text-align: center !important;
    font-size: inherit !important;
  }

  .price-paragraph {
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.2 !important;
  }

  .quantity-container {
    margin: 12px auto 24px !important;
    display: flex !important;
    justify-content: center !important;
  }

  .button-stack {
    width: 100% !important;
    max-width: 360px !important;
    margin: 0 auto 24px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    align-items: center !important;
  }

  .button-stack .buy-now-button {
    display: block !important;
    width: 100% !important;
    padding: 12px 0 !important;
    box-sizing: border-box !important;
  }

  .description-container {
    width: 100% !important;
    max-width: 520px !important;
    margin: 0 auto 80px !important;
    text-align: center !important;
    font-size: 1rem !important;
  }

  .description-container p {
    width: 100% !important;
    margin: 0 0 22px !important;   /* same extra gap as phones */
  }

  .description-container p:last-child {
    margin-bottom: 0 !important;
  }
}
/* === FINAL PRICE FIX – KEEP THIS AT THE END OF 4k-override.css === */

/* Reset crazy scaling coming from .price-container { font-size: 10rem; } */
.price-container {
  font-size: 1rem; /* or whatever your normal base is */
}

/* Make both prices the same size everywhere */
.price-container .price,
.price-container .old-price {
  font-size: 1.2rem;
  font-family: 'Anonymous Pro', monospace;
  font-weight: 700;
}

/* Old price: grey + strike-through, always */
.price-container .old-price {
  color: #cfcfcf;
  text-decoration: line-through !important;
  text-decoration-thickness: 2px;
  text-decoration-color: #cfcfcf;
}
/* Phones: make new and old price same size + underline old price */
@media (max-width: 480px) {
  .price-container .price,
  .price-container .old-price {
    font-size: 1.2rem;
    font-family: 'Anonymous Pro', monospace;
    font-weight: 700;
  }

  .price-container .old-price {
    color: #cfcfcf;
    text-decoration: line-through;
    text-decoration-thickness: 2px;
    text-decoration-color: #cfcfcf;
  }
}
/* Force 4K tutorial description text to be left aligned */
.description-container {
  text-align: left !important;
  max-width: 700px;
  margin: 30px 0 0;   /* adjust if you want more/less space above */
}

/* Make sure all text lines inside stay left aligned */
.description-container p {
  text-align: left !important;
  margin-bottom: 10px; /* optional: nicer spacing between lines */
}
/* Make current and old price same size on phones */
@media (max-width: 768px) {
  .price-container .price,
  .price-container .old-price {
    font-size: 1.2rem !important;   /* tweak size if you want */
    line-height: 1.1;
  }

  .price-container .old-price {
    font-weight: 400;                /* optional – keep old price lighter */
  }
}
@media (max-width: 768px) {
  .price-container .price,
  .price-container .old-price {
    display: inline-block;
    vertical-align: baseline;
  }
}
/* Price colors override */
.price-container .price {
  color: #e5e5e5;        /* white-grey */
}

.price-container .old-price {
  color: #ff3b3b;        /* red for the old underlined/striked price */
}