/* Product page styles: the Shopify theme's product section stylesheet
   (sections/main-product-patch-kraze.liquid), unchanged. Additions for the static
   site are at the end of the file. */
  .product-page-main { background-color: #fff; padding: 2rem 1rem 4rem; color: #111827; font-family: 'Inter', sans-serif !important; }
  .product-container { max-width: 1300px; margin: 0 auto; display: grid; grid-template-columns: 1fr; gap: 3rem; padding: 0 1rem; }
  @media (min-width: 1024px) {
    /* minmax(0, ...) not bare fr units - a product with many media items (this
       template goes up to 39) otherwise lets the gallery's own max-content
       width (each slide, thumbnail row, etc.) inflate the grid TRACK itself
       to thousands of pixels wide, dragging .main-image-wrapper's width:100%
       along with it. The old 500px cap on .product-gallery masked this by
       capping its max-content contribution; removing that cap for full-width
       needed this instead. */
    .product-container { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; gap: 2rem; }
    .product-gallery { position: sticky; top: 5.5rem; max-width: 100%; width: 100%; margin: 0 auto; }
  }

  /* Gallery - Scroll Snap (Fast) */
  .product-gallery { display: flex; flex-direction: column; gap: 1rem; width: 100%; min-width: 0; }
  .main-image-wrapper { position: relative; width: 100%; aspect-ratio: 1 / 1; background-color: #fff; border-radius: 1.5rem; overflow: hidden; }
  .gallery-scroller { display: flex; width: 100%; height: 100%; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; -webkit-overflow-scrolling: touch; scrollbar-width: none; -ms-overflow-style: none; }
  .gallery-scroller::-webkit-scrollbar { display: none; }
  .gallery-slide { flex: 0 0 100%; width: 100%; height: 100%; scroll-snap-align: start; scroll-snap-stop: always; display: flex; align-items: center; justify-content: center; }
  .gallery-slide img { width: 100%; height: 100%; object-fit: contain; padding: 0rem; }
  .gallery-slide.pk-zoomable { cursor: zoom-in; }

  .nav-arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 3rem; height: 3rem; background-color: white; border: 1px solid #e5e7eb; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 10; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1); transition: all 0.2s; }
  .nav-arrow:hover { background-color: #f9fafb; scale: 1.05; }
  .nav-arrow.prev { left: 1rem; }
  .nav-arrow.next { right: 1rem; }
  .nav-arrow.hidden { display: none; }
  .zoom-icon.hidden { display: none; }
  /* A product with no photo to show: a quiet panel instead of a blank square. */
  .pk-gallery-empty { background: #f7f4fc; color: #d8c8f5; }
  .pk-gallery-empty svg { width: 46%; height: 46%; }

  .zoom-icon {
    position: absolute;
    bottom: 1rem;
    right: 1rem;
    width: 2.5rem;
    height: 2.5rem;
    background-color: rgba(255, 255, 255, 0.95);
    border: 1px solid #e5e7eb;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    transition: all 0.2s;
  }
  .zoom-icon:hover {
    background-color: #fff;
    scale: 1.1;
  }
  .zoom-icon svg {
    width: 1.25rem;
    height: 1.25rem;
    color: #374151;
  }

  .thumbnails-row { display: flex; gap: 0.75rem; overflow-x: auto; padding-bottom: 0.5rem; max-width: 100%; }
  .thumbnail-btn { flex-shrink: 0; width: 5.5rem; height: 5.5rem; border-radius: 0.75rem; overflow: hidden; border: 2px solid transparent; cursor: pointer; opacity: 0.8; transition: all 0.2s; background: #f3f4f6; padding:0; position: relative; }
  .thumbnail-btn.active { border-color: #a855f7; opacity: 1; box-shadow: 0 0 0 2px #f3e8ff; }
  .thumbnail-btn img { width: 100%; height: 100%; object-fit: cover; }
  .thumbnail-play-icon { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: rgba(0,0,0,0.6); color: #fff; border-radius: 50%; width: 1.5rem; height: 1.5rem; display: flex; align-items: center; justify-content: center; font-size: 0.6rem; pointer-events: none; }

  /* Info Column */
  .product-info { display: flex; flex-direction: column; gap: 1rem; }
  .product-title { font-size: 2.25rem; font-weight: 700; color: #111827; margin: 0; line-height: 1.1; letter-spacing: -0.025em; }

  /* Rating: real review data only (reviews.rating metafields); the row is not
     rendered at all for a product with no reviews. */
  .pk-rating-row { display: inline-flex; align-items: center; gap: 0.4rem; width: fit-content; font-size: 0.9rem; color: #374151; text-decoration: none; }
  .pk-rating-row__star { color: #f59e0b; }
  .pk-rating-row__score { font-weight: 700; color: #111827; }
  .pk-rating-row__count { color: #6b7280; }
  .pk-rating-row:hover .pk-rating-row__count { text-decoration: underline; }

  .pk-lede { font-size: 0.95rem; line-height: 1.6; color: #4b5563; margin: 0; }
  .pk-intro { display: grid; gap: 0.45rem; }
  .pk-bestfor { margin: 0; font-size: 0.9rem; line-height: 1.5; color: #374151; }
  .pk-bestfor__label { display: inline-block; margin-right: 0.4rem; padding: 0.1rem 0.5rem; border-radius: 999px; background: #f3e8ff; color: #6b21a8; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; vertical-align: 0.08em; }

  /* Live price card */
  .pk-price-card { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1.25rem; background: #faf5ff; border: 1px solid #e9d5ff; border-radius: 0.9rem; padding: 0.9rem 1.1rem; }
  .pk-price-card__label { display: block; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: #7e22ce; margin-bottom: 0.15rem; }
  .pk-price-card__value { font-size: 1.9rem; font-weight: 800; color: #111827; line-height: 1.1; }
  .pk-price-card__unit { font-size: 0.95rem; font-weight: 500; color: #6b7280; margin-left: 0.3rem; }
  .pk-price-card__note { flex: 1 1 14rem; font-size: 0.85rem; color: #4b5563; line-height: 1.45; }

  .pk-facts { list-style: none; display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0; padding: 0; }
  .pk-facts li { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.8rem; font-weight: 600; color: #374151; background: #f3f4f6; border-radius: 999px; padding: 0.35rem 0.75rem; }
  .pk-facts svg { width: 0.9rem; height: 0.9rem; color: #9333ea; flex-shrink: 0; }

  /* Numbered steps. CSS counters keep the numbering right when a product type
     skips the finishing step (stickers, DTF transfers). Each step opens with a
     tinted band holding a round number and the step's name, so the start of a
     step is the most visible thing in the order column; the band also does
     the job of the divider line between steps. */
  #product-form-pk { counter-reset: pkstep; }
  /* Each step is its own box: the tinted band is the top of the box and the
     step's controls sit inside the border. */
  .pk-step { counter-increment: pkstep; margin-top: 1.5rem; padding: 0 1.1rem 1.25rem; background: #fff; border: 1px solid #e3d5fb; border-radius: 1rem; }
  .pk-step--first { margin-top: 0.5rem; }
  .pk-step > :last-child { margin-bottom: 0; }
  .pk-step__head { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.8rem; margin: 0 -1.1rem 1.15rem; padding: 0.7rem 1rem 0.7rem 0.7rem; background: #f3e8ff; border-radius: calc(1rem - 1px) calc(1rem - 1px) 0 0; }
  .pk-step__num { width: 2.25rem; height: 2.25rem; border-radius: 50%; background: #9333ea; color: #fff; font-size: 1.1rem; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; box-shadow: 0 6px 14px -6px rgba(126, 34, 206, 0.75); }
  .pk-step__num::before { content: counter(pkstep); }
  .pk-step__title { font-size: 1.3rem; font-weight: 800; letter-spacing: -0.01em; color: #111827; margin: 0; line-height: 1.2; }
  .pk-step__aside { margin-left: auto; display: flex; flex-wrap: wrap; gap: 0.25rem 0.9rem; }
  .pk-step__sub { font-size: 0.9rem; color: #6b7280; margin: -0.35rem 0 1.25rem; line-height: 1.5; }
  /* Delivery card under Add to Cart: three option buttons; the chosen one shows its days and a
     date range counted from today (calendar days). Keep the days in step with the shipping rates
     and the pickup setting in the Shopify admin. */
  .pk-delivery { margin-top: 1rem; border: 1px solid #fed7aa; border-radius: 0.75rem; background: #fff7ed; padding: 0.9rem; }
  .pk-delivery__title { display: flex; align-items: center; gap: 0.4rem; font-size: 0.9rem; font-weight: 700; color: #111827; margin: 0 0 0.7rem; }
  .pk-delivery__title svg { width: 1.1rem; height: 1.1rem; color: #ea580c; flex: none; }
  .pk-delivery__tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.4rem; }
  .pk-delivery__tab {
    display: flex; flex-direction: column; align-items: center; gap: 0.2rem; min-width: 0;
    padding: 0.55rem 0.3rem; border: 1.5px solid #e5e7eb; border-radius: 0.6rem; background: #fff;
    font: inherit; color: #374151; cursor: pointer; text-align: center;
    transition: border-color .15s, background .15s, box-shadow .15s, transform .1s;
  }
  .pk-delivery__tab:hover { border-color: #fb923c; }
  .pk-delivery__tab:active { transform: scale(.98); }
  .pk-delivery__tab:focus-visible { outline: 2px solid #c2410c; outline-offset: 2px; }
  .pk-delivery__tab[aria-pressed="true"] { border-color: #ea580c; background: #ea580c; color: #fff; box-shadow: 0 1px 4px rgba(234,88,12,.3); }
  .pk-delivery__tab[aria-pressed="true"]:hover { border-color: #c2410c; background: #c2410c; }
  .pk-delivery__tab[aria-pressed="true"] svg, .pk-delivery__tab[aria-pressed="true"] .pk-delivery__price { color: #fff; }
  .pk-delivery__tab svg { width: 1.35rem; height: 1.35rem; color: #ea580c; }
  .pk-delivery__name { font-size: 0.78rem; font-weight: 700; line-height: 1.2; }
  .pk-delivery__price { font-size: 0.72rem; color: #6b7280; }
  .pk-delivery__panel { margin-top: 0.7rem; padding: 0.7rem 0.8rem; background: #fff; border-radius: 0.6rem; border: 1px solid #ffedd5; }
  .pk-delivery__when { display: block; font-size: 0.95rem; font-weight: 700; color: #111827; }
  .pk-delivery__date { display: block; font-size: 0.8rem; font-weight: 600; color: #c2410c; margin-top: 0.15rem; }
  .pk-delivery__date:empty { display: none; }
  .pk-delivery__foot { font-size: 0.78rem; color: #6b7280; margin: 0.6rem 0 0; text-align: center; }
  @media (prefers-reduced-motion: reduce) { .pk-delivery__tab { transition: none; } }
  .pk-linkbtn { background: none; border: none; padding: 0; cursor: pointer; color: #9333ea; font: inherit; font-size: 0.85rem; font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
  .pk-linkbtn:hover { color: #7e22ce; }
  .pk-field-label { display: block; font-size: 0.85rem; font-weight: 700; color: #111827; margin-bottom: 0.4rem; }
  .pk-optional { font-weight: 500; color: #9ca3af; margin-left: 0.25rem; }

  /* Step 1: artwork. One full-width button; the native file input sits on top
     of it, so a click opens the picker and a dropped file is accepted too. */
  .pk-upload { position: relative; display: flex; align-items: center; justify-content: center; gap: 0.6rem; width: 100%; min-height: 3.5rem; padding: 0.9rem 1.25rem; border-radius: 0.9rem; background: #111827; color: #fff; font-size: 1.05rem; font-weight: 700; cursor: pointer; transition: background 0.2s, box-shadow 0.2s; }
  .pk-upload:hover, .pk-upload:focus-within { background: #1f2937; box-shadow: 0 0 0 4px rgba(147, 51, 234, 0.25); }
  .pk-upload svg { width: 1.25rem; height: 1.25rem; flex-shrink: 0; }
  .native-file-input { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; z-index: 50; }
  .pk-upload__hint { margin-top: 0.6rem; font-size: 0.82rem; color: #6b7280; line-height: 1.5; }
  .pk-upload__hint a { color: #9333ea; font-weight: 600; text-decoration: underline; }

  /* CUSTOMIZE SECTION */
  .customize-ui { display: block; }

  .file-success-bar { display: none; }
  .file-thumb { display: none; }

  /* Artwork panel: the uploaded design drawn at the proportions of the size
     chosen in the next step, with the clean-up tools listed underneath. The
     checkerboard shows through wherever the artwork is transparent. */
  .pk-artwork-panel { display: none; }
  .pk-artwork-panel.active { display: block; }
  .pk-preview-label { font-size: 0.85rem; color: #4b5563; margin-bottom: 0.6rem; }
  .pk-preview-stage {
    display: flex; align-items: center; justify-content: center;
    background: #f3f4f6; border-radius: 0.9rem; padding: 1.25rem;
  }
  .pk-preview-frame-lg {
    position: relative; max-width: 100%; max-height: 320px; min-width: 64px; min-height: 64px;
    border-radius: 0.35rem; box-shadow: 0 6px 18px rgba(17, 24, 39, 0.18);
    background-color: #fff;
    background-image:
      linear-gradient(45deg, #e5e7eb 25%, transparent 25%, transparent 75%, #e5e7eb 75%),
      linear-gradient(45deg, #e5e7eb 25%, transparent 25%, transparent 75%, #e5e7eb 75%);
    background-size: 16px 16px; background-position: 0 0, 8px 8px;
    display: flex; align-items: center; justify-content: center; overflow: hidden;
  }
  .pk-preview-frame-lg img { width: 100%; height: 100%; object-fit: contain; display: block; }
  .pk-preview-meta { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.25rem 1rem; margin-top: 0.6rem; }
  .pk-preview-dims { font-size: 0.8rem; font-weight: 600; color: #374151; }
  .pk-preview-filename { font-size: 0.75rem; color: #9ca3af; word-break: break-all; }
  .pk-preview-actions { display: flex; flex-wrap: wrap; gap: 0.25rem 1.1rem; margin-top: 0.4rem; }

  .pk-ai-toolbar {
    display: flex; flex-wrap: wrap; align-items: center; gap: 0.7rem 1.1rem;
    margin-top: 0.9rem; padding: 0.8rem 0.95rem;
    border-radius: 0.75rem; background: #faf5ff;
  }
  .pk-ai-toolbar__title { flex: 1 0 100%; display: flex; align-items: center; gap: 0.45rem; font-size: 0.8rem; font-weight: 700; color: #111827; }
  .pk-ai-badge {
    display: inline-flex; align-items: center;
    font-size: 0.65rem; font-weight: 700; letter-spacing: 0.04em;
    color: #fff; background: #7c3aed; border-radius: 0.3rem; padding: 0.1rem 0.35rem;
  }
  .pk-toggle-field { display: flex; align-items: center; gap: 0.45rem; font-size: 0.85rem; color: #111827; font-weight: 600; cursor: pointer; user-select: none; }
  .pk-toggle {
    position: relative; width: 2.25rem; height: 1.25rem; border-radius: 999px; background: #d1d5db;
    transition: background 0.15s; flex-shrink: 0;
  }
  .pk-toggle.on { background: #a855f7; }
  .pk-toggle-knob {
    position: absolute; top: 0.15rem; left: 0.15rem; width: 0.95rem; height: 0.95rem;
    background: #fff; border-radius: 50%; transition: transform 0.15s; box-shadow: 0 1px 2px rgba(0,0,0,0.2);
  }
  .pk-toggle.on .pk-toggle-knob { transform: translateX(1rem); }
  .pk-edit-ai-btn {
    display: inline-flex; align-items: center; gap: 0.35rem; margin-left: auto;
    background: none; border: 1px solid #d1d5db; border-radius: 0.5rem; padding: 0.4rem 0.75rem;
    font-size: 0.8rem; font-weight: 600; color: #111827; cursor: pointer; transition: border-color 0.15s, background 0.15s;
  }
  .pk-edit-ai-btn:hover { border-color: #a78bfa; background: #faf5ff; }
  .pk-edit-ai-btn svg { width: 0.9rem; height: 0.9rem; color: #7c3aed; }
  .pk-ai-prompt-box {
    display: flex; flex-direction: column; gap: 0.6rem; margin-top: 0.6rem;
    padding: 0.9rem; border: 1px solid #ddd6fe; border-radius: 0.65rem; background: #faf5ff;
    animation: pk-ai-prompt-in 0.15s ease-out;
  }
  @keyframes pk-ai-prompt-in {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
  }
  .pk-ai-prompt-box__label { font-size: 0.8rem; font-weight: 700; color: #5b21b6; }
  .pk-ai-prompt-box__input {
    width: 100%; resize: vertical; min-height: 4.5rem; box-sizing: border-box;
    border: 1px solid #ddd6fe; border-radius: 0.5rem;
    padding: 0.6rem 0.75rem; font-size: 0.85rem; font-family: inherit; line-height: 1.4;
    background: #fff; color: #111827;
  }
  .pk-ai-prompt-box__input:focus { outline: none; border-color: #a78bfa; box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.12); }
  .pk-ai-prompt-box__actions { display: flex; justify-content: flex-end; gap: 0.5rem; }
  .pk-ai-prompt-box__submit, .pk-ai-prompt-box__cancel {
    display: inline-flex; align-items: center; gap: 0.35rem; justify-content: center;
    border-radius: 0.4rem; border: none; cursor: pointer; font-size: 0.82rem; font-weight: 600;
    padding: 0.5rem 0.9rem; font-family: inherit; transition: background 0.15s;
  }
  .pk-ai-prompt-box__submit svg { width: 0.85rem; height: 0.85rem; }
  .pk-ai-prompt-box__submit { background: #7c3aed; color: #fff; }
  .pk-ai-prompt-box__submit:hover { background: #6d28d9; }
  .pk-ai-prompt-box__cancel { background: none; color: #6b7280; }
  .pk-ai-prompt-box__cancel:hover { background: #ede9fe; color: #111827; }
  .pk-ai-note {
    display: none; align-items: flex-start; gap: 0.5rem; margin-top: 0.6rem;
    background: #f3e8ff; border: 1px solid #ddd6fe; border-radius: 0.5rem;
    padding: 0.6rem 0.8rem; font-size: 0.8rem; color: #5b21b6; line-height: 1.4;
  }
  .pk-ai-note--error { background: #fef2f2; border-color: #fecaca; color: #b91c1c; }
  .pk-ai-toolbar--busy { opacity: 0.6; pointer-events: none; }
  .pk-ai-spinner {
    width: 0.9rem; height: 0.9rem; margin-top: 0.1rem; flex-shrink: 0;
    border: 2px solid #ddd6fe; border-top-color: #7c3aed; border-radius: 50%;
    animation: pk-ai-spin 0.8s linear infinite;
  }
  @keyframes pk-ai-spin { to { transform: rotate(360deg); } }
  @media (max-width: 480px) { .pk-edit-ai-btn { margin-left: 0; } }

  /* Pricing table: stacked full-width under the quantity row at every viewport
     width. It sits inside .product-container's own half-width column, where a
     side-by-side split squeezes it narrow enough to wrap or overflow. */
  .pricing-card { background: #fff; border: 1px solid #e5e7eb; border-radius: 0.75rem; overflow: hidden; box-shadow: 0 1px 3px rgba(0,0,0,0.05); }
  /* Grid, not flex - flex's justify-content: space-between sizes each row to
     its own content, so the three columns drift out of line with each
     other row to row depending on how long that row's text happens to be.
     A shared grid-template-columns keeps every row's columns the same width
     as the header's, so values always land in a straight line. */
  .pricing-header { background: #f9fafb; padding: 0.6rem 0.85rem; border-bottom: 1px solid #e5e7eb; font-weight: 600; color: #111827; display: grid; grid-template-columns: 1fr 1fr 1fr; font-size: 0.85rem; }
  .pricing-header span:first-child, .pricing-row__cols span:first-child { text-align: left; }
  .pricing-header span:nth-child(2), .pricing-row__cols span:nth-child(2) { text-align: center; }
  .pricing-header span:last-child, .pricing-row__cols span:last-child { text-align: right; }
  .pricing-row { display: flex; flex-direction: column; gap: 0.3rem; padding: 0.6rem 0.85rem; border-bottom: 1px solid #f3f4f6; font-size: 0.85rem; color: #4b5563; }
  .pricing-row:last-child { border-bottom: none; }
  .pricing-row.active { background-color: #faf5ff; color: #6b21a8; font-weight: 600; }
  .pricing-row__cols { display: grid; grid-template-columns: 1fr 1fr 1fr; }
  .pricing-row__msg { display: none; font-size: 0.78rem; font-weight: 600; color: #6b21a8; background: #f3e8ff; border-radius: 0.375rem; padding: 0.4rem 0.6rem; }
  .pricing-row__msg.show { display: block; }
  .pricing-row__msg b { font-weight: 800; }

  /* Art-team instructions: always-visible field under the artwork */
  .pk-notes { margin-top: 0.9rem; }
  .pk-notes > summary { display: inline-flex; align-items: center; gap: 0.4rem; cursor: pointer; list-style: none; font-size: 0.9rem; font-weight: 600; color: #7e22ce; }
  .pk-notes > summary::-webkit-details-marker { display: none; }
  .pk-notes > summary::before { content: "+"; display: grid; place-items: center; width: 1.15rem; height: 1.15rem; border-radius: 50%; background: #f3e8ff; font-size: 0.95rem; line-height: 1; }
  .pk-notes[open] > summary::before { content: "\2013"; }
  .pk-notes[open] > summary { margin-bottom: 0.55rem; }
  .pk-notes > summary:focus-visible { outline: 2px solid #a855f7; outline-offset: 3px; border-radius: 0.25rem; }
  .pk-notes textarea { resize: vertical; min-height: 3.25rem; font-size: 0.95rem; font-family: inherit; line-height: 1.4; }
  .pk-tier-heading { font-size: 0.85rem; font-weight: 700; color: #111827; margin: 1.25rem 0 0.5rem; }
  /* Price-break table hidden on request (2026-11-06). Kept in the markup because the pricing script
     writes into #price-tier-N / #discount-tier-N / #tier-msg-N; remove this rule to show it again. */
  .pk-tier-heading, .pricing-card { display: none !important; }

  /* Controls */
  .control-group { margin-bottom: 1.5rem; }
  .control-label { display: block; font-weight: 700; margin-bottom: 0.75rem; color: #111827; font-size: 0.95rem; }
  .text-input { width: 100%; padding: 0.75rem 1rem; border: 1px solid #d1d5db; border-radius: 0.5rem; font-size: 1rem; background: #fff; }
  .text-input:focus { border-color: #a855f7; outline: none; ring: 2px solid #f3e8ff; }
  /* Colors: background and border side by side. Each is a swatch that opens
     the browser's color picker next to a box for typing a color instead. */
  .pk-colors__optional { margin-left: 0.4rem; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: #6b7280; }
  .pk-colors__hint { margin: -0.35rem 0 0.95rem; font-size: 0.85rem; line-height: 1.45; color: #6b7280; }
  .pk-colors { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.9rem; margin-bottom: 1rem; }
  .pk-colors__row { display: flex; align-items: stretch; gap: 0.5rem; }
  .pk-colors__chip {
    position: relative; flex-shrink: 0; width: 2.75rem; border-radius: 0.5rem; overflow: hidden; cursor: pointer;
    border: 1px solid rgba(17, 24, 39, 0.18);
    background: conic-gradient(from 180deg, #f87171, #fbbf24, #34d399, #60a5fa, #a78bfa, #f87171);
  }
  .pk-colors__chip:focus-within { outline: 2px solid #a855f7; outline-offset: 2px; }
  .pk-colors__native { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0; border: 0; opacity: 0; cursor: pointer; }
  .pk-colors__text {
    flex: 1; min-width: 0; height: 2.75rem; padding: 0 0.75rem; border: 1px solid #d1d5db; border-radius: 0.5rem;
    background: #fff; font-family: inherit; font-size: 1rem; color: #111827;
  }
  .pk-colors__text:focus { border-color: #a855f7; outline: 2px solid #f3e8ff; outline-offset: 0; }
  .pk-colors__text::placeholder { color: #9ca3af; }
  .pk-colors__suggests { display: flex; flex-wrap: wrap; gap: 0.45rem; margin-top: 0.6rem; }
  .pk-colors__suggests[hidden] { display: none; }
  .pk-colors__suggest { width: 1.7rem; height: 1.7rem; padding: 0; border-radius: 50%; border: 1px solid rgba(17, 24, 39, 0.18); cursor: pointer; }
  .pk-colors__suggest.selected { outline: 2px solid #a855f7; outline-offset: 2px; }
  .pk-colors__note { margin: 0.6rem 0 0; font-size: 0.8rem; line-height: 1.45; color: #6b7280; }
  .pk-match-artwork-btn {
    display: inline-flex; align-items: center; gap: 0.5rem; background: #fff; color: #7e22ce;
    border: 1.5px solid #c084fc; border-radius: 999px; padding: 0.5rem 1rem; font-size: 0.85rem; font-weight: 700;
    cursor: pointer; font-family: inherit;
  }
  .pk-match-artwork-btn:hover { background: #faf5ff; border-color: #9333ea; }
  @media (max-width: 520px) {
    .pk-colors { grid-template-columns: 1fr; }
  }
  .pk-color-card { background: #fff; border: 1px solid #e5e7eb; border-radius: 0.75rem; box-shadow: 0 1px 3px rgba(0,0,0,0.06); padding: 1.25rem 1.25rem 1.5rem; }
  /* Responsive Adjustments */
  @media (max-width: 768px) {
    .product-page-main { padding: 0 0 4rem 0; }
    .product-container { gap: 1rem; padding: 0; grid-template-columns: 1fr; }
    /* 100% rather than 100vw: 100vw includes the scrollbar and left a 15px horizontal scroll on narrow desktop windows. */
    .product-gallery { padding: 0; margin: 0 auto; max-width: 100%; width: 100%; overflow: hidden; }
    .main-image-wrapper { max-height: none; height: auto; width: 100%; border-radius: 0; margin: 0; padding: 0; aspect-ratio: 1 / 1; }
    .main-product-img { padding: 0.5rem; }
    .thumbnails-row { padding: 0 1rem 0.5rem 1rem; max-width: 100%; }
    .thumbnail-btn { width: 4rem; height: 4rem; }
    .nav-arrow { width: 2.5rem; height: 2.5rem; }
    .nav-arrow.prev { left: 0.5rem; }
    .nav-arrow.next { right: 0.5rem; }
    .product-info { padding: 0 1rem; }
    .product-title { font-size: 1.75rem; }
    .pk-price-card__value { font-size: 1.6rem; }
    .row-2 { grid-template-columns: 1fr; }
    .backing-grid { grid-template-columns: repeat(3, 1fr); gap: 0.75rem; }
    .pricing-header, .pricing-row { font-size: 0.8rem; padding: 0.75rem 0.5rem; min-width: unset; }
    .nav-arrow { width: 2.5rem; height: 2.5rem; }
    .pk-upload { min-height: 3.25rem; font-size: 1rem; }
    .pk-step { margin-top: 1.25rem; padding: 0 0.85rem 1rem; }
    .pk-step__head { margin: 0 -0.85rem 1rem; padding: 0.6rem 0.85rem 0.6rem 0.6rem; }
    .pk-step__num { width: 2rem; height: 2rem; font-size: 1rem; }
    .pk-step__title { font-size: 1.15rem; }
    /* The size links drop under the title, lined up with it. */
    .pk-step__aside { margin-left: 2.8rem; flex-basis: 100%; }
    .checkout-btn { font-size: 1rem; letter-spacing: 0.03em; }
    .stepper-control { height: 2.75rem; }
    .stepper-btn { width: 2.75rem; height: 2.75rem; }
  }

  @media (max-width: 600px) {
    .product-title { font-size: 1.5rem; }
  }

  @media (max-width: 480px) {
    .nav-arrow { width: 2rem; height: 2rem; }
  }

  /* Rest of desktop styles ... */
  .backing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
  .row-2 { display: grid; grid-template-columns: 1fr; gap: 1rem; }
  @media (min-width: 640px) {
    .row-2 { grid-template-columns: 1fr 1fr; }
  }

  /* Step 2: width x height, side by side at every viewport width */
  .pk-dims { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: end; gap: 0.75rem; }
  .pk-dims__x { font-size: 1.25rem; color: #9ca3af; padding-bottom: 0.95rem; }

  /* Step 3: quantity on the left, running price summary on the right */
  .pk-qty-row { display: grid; grid-template-columns: 1fr; gap: 1rem; align-items: start; }
  @media (min-width: 640px) {
    .pk-qty-row { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); }
  }
  .pk-qty-min { font-size: 0.78rem; color: #6b7280; margin-top: 0.35rem; }
  .pk-qty-error { display: none; font-size: 0.78rem; font-weight: 700; color: #dc2626; margin-top: 0.35rem; }
  .pk-summary { background: #111827; color: #fff; border-radius: 0.9rem; padding: 1rem 1.1rem; }
  .pk-summary__line { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; font-size: 0.9rem; color: #d1d5db; }
  .pk-summary__line + .pk-summary__line { margin-top: 0.6rem; padding-top: 0.6rem; border-top: 1px solid rgba(255, 255, 255, 0.14); }
  .pk-summary__unit { font-size: 1.05rem; font-weight: 700; color: #fff; }
  .pk-summary__note { font-size: 0.78rem; color: #d8b4fe; margin-top: 0.5rem; }

  /* Cut shape: one outline button per shape, three to a row. Six common
     shapes show; the rest (.pk-shape--more) open with the toggle under the
     grid. 6 and 30 both fill whole rows of three. A selected shape from the
     longer list stays visible when the list is closed. */
  .pk-shapes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.5rem; }
  .pk-shapes:not(.is-open) .pk-shape--more:not(.selected) { display: none; }
  .pk-shapes__current { font-weight: 600; color: #6b21a8; }
  .pk-shapes__toggle { display: inline-flex; align-items: center; gap: 0.35rem; margin-top: 0.75rem; padding: 0.25rem 0; border: 0; background: none; color: #7e22ce; font-family: inherit; font-size: 0.85rem; font-weight: 700; cursor: pointer; }
  .pk-shapes__toggle:hover { text-decoration: underline; text-underline-offset: 3px; }
  .pk-shapes__toggle:focus-visible { outline: 2px solid #a855f7; outline-offset: 2px; border-radius: 0.25rem; }
  .pk-shapes__toggle[hidden], .pk-shapes__toggle [hidden] { display: none; }
  .pk-shape {
    min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 0.45rem;
    padding: 0.8rem 0.3rem 0.7rem; border: 1.5px solid #e5e7eb; border-radius: 0.9rem; background: #fafafa;
    color: #6b7280; font-family: inherit; font-size: 0.8rem; font-weight: 600; line-height: 1.2; text-align: center;
    cursor: pointer; transition: border-color 0.15s, background-color 0.15s, color 0.15s;
  }
  .pk-shape svg { width: 2.25rem; height: 2.25rem; fill: currentColor; fill-opacity: 0.1; stroke: currentColor; stroke-width: 2.25; stroke-linejoin: round; }
  .pk-shape:hover { border-color: #c084fc; color: #7e22ce; }
  .pk-shape:focus-visible { outline: 2px solid #a855f7; outline-offset: 2px; }
  .pk-shape.selected { border-color: #9333ea; background: #faf5ff; color: #6b21a8; box-shadow: inset 0 0 0 1px #9333ea; }

  /* Backing Styles */
  .backing-card {
    border: 1px solid #d1d5db;
    border-radius: 0.5rem;
    overflow: hidden;
    cursor: pointer;
    text-align: center;
    transition: all 0.2s;
    background: #fff;
    padding-bottom: 0.75rem;
  }
  .backing-card:hover { border-color: #a855f7; }
  .backing-card.selected {
    border-color: #a855f7;
    box-shadow: 0 0 0 2px #a855f7 inset;
    font-weight: 700; color: #581c87;
  }
  .backing-preview {
    width: 100%;
    height: 120px;
    background-color: #f3f4f6;
    background-size: cover;
    background-position: center;
    margin-bottom: 0.75rem;
    position: relative;
  }
  .backing-price-badge {
    position: absolute;
    top: 0.35rem;
    right: 0.35rem;
    background-color: #dc2626;
    color: #fff;
    font-size: 0.65rem;
    font-weight: 700;
    padding: 0.15rem 0.4rem;
    border-radius: 0.25rem;
    text-transform: uppercase;
    letter-spacing: 0.02em;
  }

  /* Pricing Table Mobile Tweak */
  .pricing-card { overflow-x: auto; }

  /* Stepper Input Styles */
  .dimension-group { min-width: 0; }
  .stepper-control {
    display: flex; align-items: center;
    border: 1px solid #d1d5db; border-radius: 0.5rem;
    height: 3.5rem; background: #fff; overflow:hidden;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
    transition: border-color 0.2s, box-shadow 0.2s;
  }
  .stepper-control:focus-within { border-color: #a855f7; box-shadow: 0 0 0 3px rgba(147, 51, 234, 0.12); }
  .stepper-btn {
    width: 3.5rem; height: 100%; border: none; background: #f9fafb;
    cursor: pointer; font-size: 1.25rem; color: #6b7280;
    display:flex; align-items:center; justify-content:center;
    border-right: 1px solid #f3f4f6; transition: background 0.2s;
  }
  .stepper-btn:last-child { border-right: none; border-left: 1px solid #f3f4f6; }
  .stepper-btn:hover { background: #e5e7eb; color: #111827; }
  .stepper-input {
    flex: 1; text-align: center; border: none; font-size: 1.25rem; font-weight: 600; color: #111827; outline: none; background: transparent;
    -moz-appearance: textfield;
  }
  .stepper-input::-webkit-outer-spin-button, .stepper-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

  /* Tooltip Styles */
  .size-display-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; margin: 0.9rem 0 1rem; font-size: 0.9rem; font-weight: 600; color: #374151; }
  /* Stickers and transfers: the row would only repeat the width and height above it. */
  .size-display-row--echo { display: none; }
  .pk-size-hint { margin: 0.9rem 0 0; font-size: 0.82rem; line-height: 1.5; color: #6b7280; }
  .size-formula { color: #6b7280; font-weight: 500; }
  .size-formula:empty { display: none; }
  .pk-size-value { color: #7e22ce; font-weight: 800; }

  .tooltip-container { position: relative; display: inline-flex; cursor: pointer; }
  .info-icon { width: 1.25rem; height: 1.25rem; color: #1f2937; background: #e5e7eb; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.8rem; font-weight: 700; }
  .tooltip-text {
    visibility: hidden; width: 220px; background-color: #1f2937; color: #fff; text-align: center; border-radius: 6px; padding: 0.75rem; position: absolute; z-index: 10; bottom: 125%; left: 50%; margin-left: -110px; opacity: 0; transition: opacity 0.2s; font-size: 0.85rem; font-weight: 400; line-height: 1.4;
  }
  @media (max-width: 400px) {
    .tooltip-text { left: auto; right: 0; margin-left: 0; transform: translateX(20px); }
  }
  .tooltip-container:hover .tooltip-text { visibility: visible; opacity: 1; }

  .qty-box-large { border: 1px solid #d1d5db; border-radius: 0.5rem; height: 3.5rem; width: 100%; text-align: center; font-size: 1.25rem; font-weight: 700; }
  .qty-box-large:focus { border-color: #a855f7; outline: none; box-shadow: 0 0 0 3px rgba(147, 51, 234, 0.12); }
  .total-price-large { font-size: 1.75rem; font-weight: 800; color: #fff; line-height: 1; margin:0; }

  /* Checkout Button */
  .checkout-btn {
    width: 100%;
    background-color: #a855f7;
    color: white;
    border: none;
    padding: 1rem;
    font-size: 1.1rem;
    font-weight: 700;
    border-radius: 0.75rem;
    cursor: pointer;
    transition: all 0.2s;
    box-shadow: 0 4px 6px -1px rgba(147, 51, 234, 0.4);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-top: 1rem;
  }
  .checkout-btn:hover {
    background-color: #9333ea;
    transform: translateY(-2px);
    box-shadow: 0 10px 15px -3px rgba(147, 51, 234, 0.5);
  }
  .checkout-btn:active {
    transform: translateY(0);
  }

/* ===== Additions for the static site ===== */
/* Message under the order button: the cart minimum, a size and quantity with no price,
   or ordering not available yet. */
.pk-order-msg { display: none; margin: 0.75rem 0 0; padding: 0.75rem 0.9rem; border-radius: 0.6rem; background: #fef3c7; border: 1px solid #fcd34d; color: #92400e; font-size: 0.9rem; line-height: 1.45; }
.pk-order-msg a { color: #7e22ce; font-weight: 700; text-underline-offset: 2px; }