/*
Theme Name: Personalized Baseball
Theme URI: https://personalizedkeepsakeclub.com
Author: Jesse Lee
Author URI: https://personalizedkeepsakeclub.com
Description: One-page WooCommerce theme for a personalized baseball keepsake. The front page and the product page share one landing layout: gallery and one purchase card that carries the personalization form first, then the checkout in the same card once a ball is in the cart.
Version: 1.0.12
Requires at least: 6.5
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: personalized-baseball
Tags: e-commerce
*/

    :root {
      --ink: #1f2523;
      --muted: #68706b;
      --paper: #f7f4ee;
      --card: #fffdf9;
      --line: #dedbd3;
      --green: #1d5b47;
      --green-dark: #123d31;
      --orange: #d86b3e;
      --shadow: 0 20px 55px rgba(31, 37, 35, .10);
    }

    * { box-sizing: border-box; }

    html { scroll-behavior: smooth; }

    body {
      margin: 0;
      color: var(--ink);
      background: var(--paper);
      font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      line-height: 1.5;
    }

    button, textarea { font: inherit; }

    button { cursor: pointer; }

    a { color: var(--green-dark); text-decoration: underline; text-underline-offset: 2px; }

    .page-shell {
      width: min(1160px, calc(100% - 32px));
      margin: 0 auto;
    }

    .topbar {
      display: flex;
      justify-content: center;
      padding: 12px 16px;
      color: #fff;
      background: var(--green-dark);
      font-size: .78rem;
      font-weight: 700;
      letter-spacing: .08em;
      text-align: center;
      text-transform: uppercase;
    }

    header {
      padding: 22px 0;
    }

    .brand {
      color: var(--green-dark);
      font-size: .85rem;
      font-weight: 900;
      letter-spacing: .16em;
      text-transform: uppercase;
    }

    .hero {
      padding: 34px 0 84px;
    }

    /* Copy block now matches the width of the purchase grid below it. */
    .hero-copy {
      max-width: 980px;
      margin: 0 auto 28px;
      text-align: center;
    }

    .purchase-row {
      display: grid;
      grid-template-columns: minmax(0, 1.1fr) minmax(340px, .9fr);
      align-items: start;
      gap: clamp(32px, 6vw, 72px);
      padding: 0;
      scroll-margin-top: 20px;
    }

    .gallery-column { min-width: 0; }

    .eyebrow {
      margin: 0 0 16px;
      color: var(--orange);
      font-size: .78rem;
      font-weight: 900;
      letter-spacing: .13em;
      text-transform: uppercase;
    }

    h1, h2, p { margin-top: 0; }

    h1 {
      max-width: 900px;
      margin-bottom: 20px;
      font-family: Georgia, "Times New Roman", serif;
      font-size: clamp(2.8rem, 6vw, 5.2rem);
      letter-spacing: -.055em;
      line-height: .98;
    }

    .intro {
      max-width: 660px;
      margin: 0 auto 20px;
      color: var(--muted);
      font-size: 1.1rem;
    }

    .trust-row {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 10px 18px;
      color: var(--green-dark);
      font-size: .85rem;
      font-weight: 800;
    }

    .trust-row span::before {
      margin-right: 6px;
      content: "✓";
      color: var(--orange);
    }

    .product-card {
      position: sticky;
      top: 20px;
      overflow: hidden;
      padding: clamp(20px, 4vw, 34px);
      border: 1px solid rgba(31, 37, 35, .10);
      border-radius: 24px;
      background: var(--card);
      box-shadow: var(--shadow);
    }

    /* Gallery frame. Outer spacing lives only on .gallery-column .product-gallery. */
    .product-gallery {
      overflow: hidden;
      background: #dce7df;
    }

    .gallery-column .product-gallery {
      margin: 28px 0 0;
      border-radius: 18px;
    }

    /* Every slide is square so switching media never changes the page height.
       Padding ratio instead of aspect-ratio, which older browsers ignore. */
    .gallery-slide {
      position: relative;
      display: none;
      place-items: center;
    }

    .gallery-slide.is-active { display: grid; }

    .gallery-image {
      padding-top: 100%;
      background: #eadfce;
    }

    /* Cover on a square source cropped the print away; contain shows the whole ball. */
    .gallery-image img {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: contain;
    }

    .required-mark { color: var(--orange); }

    .field-error {
      margin: 8px 0 0;
      color: #a33a2b;
      font-size: .76rem;
      font-weight: 800;
    }

    .field-error[hidden] { display: none; }

    /* The tile is square and the video source is square, so the frame always fits. */
    .video-art {
      position: relative;
      overflow: hidden;
      padding-top: 100%;
      background: linear-gradient(135deg, #163f34, #3f7861);
      color: #fff;
    }

    .video-player {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    /* Play and pause share one round button; the script swaps icon and label. */
    .video-play {
      position: absolute;
      right: 14px;
      bottom: 14px;
      z-index: 1;
      display: grid;
      width: 52px;
      height: 52px;
      place-items: center;
      border: 0;
      border-radius: 50%;
      background: var(--orange);
      color: #fff;
      font-size: 1.2rem;
      line-height: 1;
      box-shadow: 0 8px 22px rgba(0, 0, 0, .2);
    }

    .video-play:focus-visible { outline: 3px solid #efae76; outline-offset: 3px; }

    .gallery-thumbs {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 8px;
      padding: 10px;
      background: rgba(255, 253, 249, .75);
    }

    .gallery-note {
      margin: 12px 0 0;
      color: var(--muted);
      font-size: .78rem;
    }

    .gallery-thumb {
      min-height: 48px;
      padding: 7px 4px;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: var(--card);
      color: var(--muted);
      font-size: .7rem;
      font-weight: 800;
    }

    .gallery-thumb.is-active {
      border-color: var(--green);
      background: #e6f0e9;
      color: var(--green-dark);
    }

    .product-heading {
      display: flex;
      justify-content: space-between;
      gap: 16px;
      margin-bottom: 22px;
    }

    /* Sized so the product name fits on one line in the card's column. */
    .product-heading h2 {
      margin-bottom: 4px;
      font-family: Georgia, "Times New Roman", serif;
      font-size: 1.55rem;
      line-height: 1.05;
    }

    .product-heading p {
      margin-bottom: 0;
      color: var(--muted);
      font-size: .86rem;
    }

    .price {
      color: var(--green-dark);
      font-size: 1.25rem;
      font-weight: 900;
      white-space: nowrap;
    }

    .price-stack { text-align: right; }

    .price-note {
      margin-top: 3px;
      color: var(--green);
      font-size: .7rem;
      font-weight: 900;
      white-space: nowrap;
    }

    fieldset {
      margin: 0 0 22px;
      padding: 0;
      border: 0;
    }

    legend, label {
      display: block;
      margin-bottom: 10px;
      font-size: .84rem;
      font-weight: 900;
    }

    .recipient-options {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(105px, 1fr));
      gap: 10px;
    }

    .recipient-option {
      position: relative;
    }

    .recipient-option input {
      position: absolute;
      opacity: 0;
    }

    .recipient-option label {
      display: flex;
      min-height: 58px;
      align-items: center;
      justify-content: center;
      margin: 0;
      padding: 10px;
      border: 1.5px solid var(--line);
      border-radius: 12px;
      color: var(--ink);
      text-align: center;
      transition: border-color .2s, background .2s, color .2s;
    }

    .recipient-option input:checked + label {
      border-color: var(--green);
      background: #e6f0e9;
      color: var(--green-dark);
    }

    .recipient-option input:focus-visible + label,
    .buy-button:focus-visible { outline: 3px solid #efae76; outline-offset: 3px; }

    /* Shared look for each one-line textarea used by the personalization form. */
    .conditional-field textarea,
    .name-field textarea {
      width: 100%;
      padding: 14px 15px;
      border: 1.5px solid var(--line);
      border-radius: 12px;
      outline: 0;
      background: #fff;
    }

    .conditional-field textarea:focus,
    .name-field textarea:focus { border-color: var(--green); box-shadow: 0 0 0 3px rgba(29, 91, 71, .12); }

    .conditional-field { margin: -10px 0 22px; }
    .conditional-field[hidden] { display: none; }

    /* Only the recipient name field grows and sits taller than a single line. */
    .name-field textarea {
      min-height: 52px;
      resize: vertical;
    }

    .field-hint {
      display: flex;
      justify-content: space-between;
      margin-top: 7px;
      color: var(--muted);
      font-size: .76rem;
    }

    .product-details {
      padding: 0 0 72px;
    }

    .product-details h2,
    .reviews h2,
    .faq h2 {
      margin-bottom: 20px;
      font-family: Georgia, "Times New Roman", serif;
      font-size: clamp(1.8rem, 4vw, 2.5rem);
      letter-spacing: -.03em;
    }

    .details-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 14px;
    }

    .detail-card {
      padding: 22px;
      border: 1px solid var(--line);
      border-radius: 16px;
      background: rgba(255, 253, 249, .55);
    }

    .detail-card h3 { margin: 0 0 8px; font-size: .95rem; }
    .detail-card p { margin: 0; color: var(--muted); font-size: .86rem; }

    .refund {
      margin-top: 14px;
      padding: 22px;
      border: 1px solid var(--line);
      border-left: 3px solid var(--orange);
      border-radius: 16px;
      background: #fff8ee;
    }

    .refund h3 { margin: 0 0 8px; font-size: .95rem; }

    .refund p {
      margin: 0 0 12px;
      color: var(--muted);
      font-size: .86rem;
    }

    .refund ol {
      margin: 0;
      padding-left: 20px;
      color: var(--muted);
      font-size: .86rem;
    }

    .refund li + li { margin-top: 6px; }

    .buy-button {
      display: block;
      width: 100%;
      padding: 16px 20px;
      border: 0;
      border-radius: 12px;
      background: var(--orange);
      color: #fff;
      font-size: 1rem;
      font-weight: 900;
      text-align: center;
      text-decoration: none;
      transition: transform .2s, background .2s;
    }

    .buy-button:hover:not(:disabled) { transform: translateY(-2px); background: #bd542f; }
    .buy-button:disabled { cursor: not-allowed; opacity: .45; }

    .secure-note {
      margin: 12px 0 0;
      color: var(--muted);
      font-size: .76rem;
      text-align: center;
    }

    .status {
      min-height: 20px;
      margin: 12px 0 0;
      color: var(--green-dark);
      font-size: .82rem;
      font-weight: 800;
      text-align: center;
    }

    .benefits {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 18px;
      padding: 26px 0 80px;
      border-top: 1px solid var(--line);
    }

    .benefit { padding: 12px 0; }
    .benefit-icon { margin-bottom: 8px; color: var(--orange); font-size: 1.35rem; }
    .benefit h3 { margin: 0 0 5px; font-size: .95rem; }
    .benefit p { margin: 0; color: var(--muted); font-size: .86rem; }

    .reviews {
      padding: 0 0 80px;
    }

    .reviews-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 18px;
    }

    .review {
      display: flex;
      flex-direction: column;
      margin: 0;
      overflow: hidden;
      border: 1px solid var(--line);
      border-radius: 16px;
      background: rgba(255, 253, 249, .55);
    }

    /* Square crop so the 9:16 phone photos do not make the cards tall and narrow.
       Padding ratio instead of aspect-ratio, which older browsers ignore. */
    .review-photo {
      position: relative;
      padding-top: 100%;
    }

    .review-photo img {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      background: #eadfce;
    }

    .review blockquote {
      margin: 0;
      padding: 16px 18px 0;
      font-size: .86rem;
    }

    .review figcaption {
      padding: 10px 18px 18px;
      color: var(--muted);
      font-size: .76rem;
      font-weight: 800;
    }

    .faq {
      padding: 0 0 80px;
    }

    .faq-item {
      margin-bottom: 10px;
      padding: 18px 22px;
      border: 1px solid var(--line);
      border-radius: 16px;
      background: rgba(255, 253, 249, .55);
    }

    .faq-item summary {
      cursor: pointer;
      font-size: .95rem;
      font-weight: 900;
    }

    .faq-item summary:focus-visible { outline: 3px solid #efae76; outline-offset: 3px; }

    .faq-item p {
      margin: 12px 0 0;
      color: var(--muted);
      font-size: .86rem;
    }

    .faq-quote {
      margin: 12px 0 0;
      padding: 14px 18px;
      border-left: 3px solid var(--orange);
      background: #fff8ee;
      color: var(--ink);
      font-family: Georgia, "Times New Roman", serif;
      font-size: .95rem;
      line-height: 1.45;
    }

    .final-cta {
      max-width: 620px;
      margin: 0 auto;
      padding: 0 0 84px;
      text-align: center;
    }

    .final-cta h2 {
      margin-bottom: 12px;
      font-family: Georgia, "Times New Roman", serif;
      font-size: clamp(1.7rem, 3.4vw, 2.4rem);
      letter-spacing: -.03em;
    }

    .final-cta p {
      margin-bottom: 22px;
      color: var(--muted);
      font-size: .9rem;
    }

    .final-cta .buy-button {
      max-width: 360px;
      margin: 0 auto;
    }

    footer {
      padding: 22px 16px 100px;
      border-top: 1px solid var(--line);
      color: var(--muted);
      font-size: .76rem;
      text-align: center;
    }

    .mobile-buy {
      display: none;
    }

    /* Respect visitors who ask the system for less animation. */
    @media (prefers-reduced-motion: reduce) {
      html { scroll-behavior: auto; }
      .buy-button,
      .recipient-option label { transition: none; }
    }

    @media (max-width: 760px) {
      .page-shell { width: min(100% - 24px, 560px); }
      header { padding: 18px 0; }
      .hero { padding: 30px 0 54px; }
      .hero-copy { margin-bottom: 28px; text-align: left; }
      .intro { margin-left: 0; }
      .trust-row { justify-content: flex-start; }
      .purchase-row { display: block; padding: 0; }
      h1 { font-size: clamp(2.7rem, 14vw, 4.2rem); }
      .intro { font-size: 1rem; }
      .product-card { position: relative; margin-top: 32px; padding: 20px; }
      /* Stack the heading so the product name gets the full card width and
         stays on one line next to the price. */
      .product-heading { flex-direction: column; gap: 8px; }
      .price-stack { text-align: left; }
      .benefits { grid-template-columns: 1fr; gap: 6px; padding-bottom: 52px; }
      .faq { padding-bottom: 52px; }
      .reviews { padding-bottom: 52px; }
      .reviews-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
      .review blockquote { padding: 12px 12px 0; font-size: .78rem; }
      .review figcaption { padding: 8px 12px 12px; }
      .final-cta { padding-bottom: 24px; }
      .final-cta .buy-button { display: none; }
      .details-grid { grid-template-columns: 1fr; }
      .benefit { display: grid; grid-template-columns: 32px 1fr; column-gap: 10px; }
      .benefit-icon { grid-row: span 2; }
      .mobile-buy { display: block; position: fixed; right: 0; bottom: 0; left: 0; z-index: 5; padding: 10px 12px; border-top: 1px solid rgba(31, 37, 35, .12); background: rgba(247, 244, 238, .94); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
      .mobile-buy .buy-button { box-shadow: 0 8px 22px rgba(216, 107, 62, .28); }
      footer { padding-bottom: 94px; }
    }