/* ===================================================================
   Results Page — PixRemix v2.1
   Product configuration, checkout, and sticker preview layout.
   =================================================================== */

@layer pages {

  /* -------------------------------------------------------------------
     Body modifier: hide mobile tab bar on results page
     ------------------------------------------------------------------- */
  body.page-results .tab-bar {
    display: none;
  }

  /* -------------------------------------------------------------------
     Page title
     ------------------------------------------------------------------- */
  .results-title {
    font-family: var(--font-heading);
    font-size: var(--text-2xl);
    font-weight: var(--weight-bold);
    color: var(--neutral-900);
    text-align: center;
    margin-bottom: var(--space-4);
  }

  @media (min-width: 800px) {
    .results-title {
      font-size: var(--text-3xl);
      margin-bottom: var(--space-6);
    }
  }

  /* -------------------------------------------------------------------
     Two-column layout (desktop 50/50)
     ------------------------------------------------------------------- */
  .results-layout {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
    align-items: center;
    margin-top: var(--space-4);
  }

  @media (min-width: 800px) {
    .results-layout {
      flex-direction: row;
      gap: var(--space-8);
      align-items: flex-start;
      justify-content: center;
      margin-top: var(--space-6);
    }
  }

  /* --- Left column: sticker + mockups --- */
  .results-col-preview {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 420px;
  }

  @media (min-width: 800px) {
    .results-col-preview {
      flex: 1 1 50%;
      max-width: 50%;
      position: sticky;
      top: calc(var(--header-height) + var(--space-4));
    }
  }

  /* --- Right column: config + CTAs --- */
  .results-col-config {
    width: 100%;
    max-width: 480px;
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
  }

  @media (min-width: 800px) {
    .results-col-config {
      flex: 1 1 50%;
      max-width: 50%;
    }
  }

  /* -------------------------------------------------------------------
     Sticker preview image (200px+ centered)
     ------------------------------------------------------------------- */
  .results-sticker-preview {
    width: 200px;
    max-width: calc(100% - 24px);
    max-height: calc(100% - 28px);
    height: auto;
    background: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
    transition: opacity var(--duration-fast) var(--ease-out);
    filter: url(#results-sticker-outline);
    -webkit-filter: url(#results-sticker-outline);
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
  }

  .results-sticker-preview.mockup-view {
    filter: none;
    -webkit-filter: none;
    width: 100%;
    height: 100%;
    max-width: 100%;
    object-fit: contain;
    border-radius: var(--radius-md);
  }

  /* -------------------------------------------------------------------
     Carousel viewport override for results page
     ------------------------------------------------------------------- */
  .results-col-preview .carousel-viewport {
    width: 300px;
    height: 300px;
    border-radius: var(--radius-lg);
    background: var(--neutral-50);
  }

  @media (min-width: 800px) {
    .results-col-preview .carousel-viewport {
      width: 380px;
      height: 380px;
    }
  }

  /* -------------------------------------------------------------------
     Try again / create another link
     ------------------------------------------------------------------- */
  .results-try-again {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    margin-top: var(--space-4);
    padding: var(--space-2) var(--space-4);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    color: var(--neutral-600);
    background: var(--neutral-50);
    border: 1.5px solid var(--neutral-200);
    border-radius: var(--radius-md);
    text-decoration: none;
    cursor: pointer;
    transition: all var(--duration-fast) var(--ease-out);
  }

  .results-try-again:hover {
    background: var(--surface-warm);
    border-color: var(--accent);
    color: var(--accent-hover);
  }

  .results-try-again-icon {
    font-size: var(--text-lg);
  }

  /* -------------------------------------------------------------------
     Email capture section
     ------------------------------------------------------------------- */
  .results-email-capture {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    margin-top: var(--space-4);
    padding: var(--space-4);
    background: var(--neutral-50);
    border-radius: var(--radius-md);
    border: 1px solid var(--neutral-100);
    width: 100%;
    box-sizing: border-box;
  }

  .results-email-label {
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    color: var(--neutral-600);
  }

  .results-email-form {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    width: 100%;
  }

  .results-email-input {
    width: 100%;
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-sm);
    border: 1.5px solid var(--neutral-200);
    font-size: var(--text-sm);
    min-height: 40px;
    box-sizing: border-box;
    transition: border-color var(--duration-fast) var(--ease-out);
  }

  .results-email-input:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-glow);
  }

  .results-email-consent {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    font-size: var(--text-xs);
    color: var(--neutral-600);
    cursor: pointer;
  }

  .results-email-consent input[type="checkbox"] {
    margin-top: 2px;
    flex-shrink: 0;
  }

  .results-email-send {
    min-width: 80px;
  }

  .results-email-message {
    font-size: var(--text-sm);
    text-align: center;
    min-height: 0;
  }

  .results-email-message.email-success {
    color: var(--success);
    font-weight: var(--weight-semibold);
  }

  .results-email-message.email-error {
    color: var(--error);
  }

  /* -------------------------------------------------------------------
     Example mode CTA card
     ------------------------------------------------------------------- */
  .results-example-cta {
    background: var(--surface-white);
    border-radius: var(--radius-lg);
    border: 1px solid var(--neutral-100);
    padding: var(--space-8) var(--space-5);
    box-shadow: var(--shadow-md);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-3);
  }

  .results-example-cta h2 {
    font-family: var(--font-heading);
    font-size: var(--text-2xl);
    font-weight: var(--weight-bold);
    color: var(--neutral-900);
    margin: 0;
  }

  .results-example-cta > p {
    font-size: var(--text-base);
    color: var(--neutral-600);
    line-height: var(--leading-relaxed);
    margin: 0;
    max-width: 360px;
  }

  .results-example-cta .btn {
    margin-top: var(--space-2);
  }

  .results-example-cta-note {
    font-size: var(--text-sm);
    color: var(--neutral-400);
    margin: 0;
  }

  /* -------------------------------------------------------------------
     Product config card
     ------------------------------------------------------------------- */
  .results-config-card {
    background: var(--surface-white);
    border-radius: var(--radius-lg);
    border: 1px solid var(--neutral-100);
    padding: var(--space-5);
    box-shadow: var(--shadow-md);
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
  }

  /* --- Section labels inside config --- */
  .results-section-label {
    display: block;
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--neutral-900);
    margin-bottom: var(--space-2);
  }

  /* -------------------------------------------------------------------
     Option tile group (Type, Size, Qty toggles)
     ------------------------------------------------------------------- */
  .results-tile-group {
    display: flex;
    gap: var(--space-2);
  }

  .results-tile-group input[type="radio"] {
    display: none;
  }

  /* --- Individual tile --- */
  .results-tile {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--space-3) var(--space-2);
    border: 2px solid var(--neutral-200);
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: all var(--duration-fast) var(--ease-out);
    text-align: center;
    min-height: 44px;
    background: var(--surface-white);
    -webkit-tap-highlight-color: transparent;
  }

  .results-tile:hover {
    border-color: var(--neutral-400);
  }

  /* Selected tile state using :has() */
  .results-tile:has(input:checked) {
    border-color: var(--accent);
    background: rgba(255, 140, 0, 0.04);
    box-shadow: 0 0 0 1px var(--accent);
  }

  /* Fallback selected class for JS-driven selection */
  .results-tile.selected {
    border-color: var(--accent);
    background: rgba(255, 140, 0, 0.04);
    box-shadow: 0 0 0 1px var(--accent);
  }

  /* Tile text */
  .results-tile-label {
    font-weight: var(--weight-semibold);
    font-size: var(--text-sm);
    color: var(--neutral-900);
  }

  .results-tile-sub {
    font-size: var(--text-xs);
    color: var(--neutral-600);
    margin-top: 2px;
  }

  /* --- Size tile price text (updated by JS) --- */
  /* Compatibility: keep .size-btn and .size-price classes for JS selectors */
  .size-btn {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--space-3) var(--space-2);
    border: 2px solid var(--neutral-200);
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: all var(--duration-fast) var(--ease-out);
    text-align: center;
    min-height: 44px;
    background: var(--surface-white);
    -webkit-tap-highlight-color: transparent;
  }

  .size-btn:hover {
    border-color: var(--neutral-400);
  }

  .size-btn.selected {
    border-color: var(--accent);
    background: rgba(255, 140, 0, 0.04);
    box-shadow: 0 0 0 1px var(--accent);
  }

  .size-value {
    font-weight: var(--weight-bold);
    font-size: var(--text-base);
    color: var(--neutral-900);
  }

  .size-price {
    font-size: var(--text-xs);
    color: var(--neutral-600);
    margin-top: 2px;
  }

  /* -------------------------------------------------------------------
     Type tile group
     ------------------------------------------------------------------- */
  .results-type-group {
    display: flex;
    gap: var(--space-2);
  }

  .results-type-group input[type="radio"] {
    display: none;
  }

  .type-option {
    flex: 1 1 0;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: var(--text-sm);
    margin: 0;
    padding: var(--space-3) var(--space-2);
    border-radius: var(--radius-lg);
    background: var(--surface-white);
    border: 2px solid var(--neutral-200);
    transition: all var(--duration-fast) var(--ease-out);
    font-weight: var(--weight-semibold);
    min-width: 0;
    width: 100%;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
    min-height: 44px;
  }

  .type-option:hover {
    border-color: var(--neutral-400);
  }

  .type-option:has(input:checked) {
    border-color: var(--accent);
    background: rgba(255, 140, 0, 0.04);
    box-shadow: 0 0 0 1px var(--accent);
  }

  .type-option:has(input:checked) .type-label {
    color: var(--neutral-900);
  }

  .type-label {
    font-weight: var(--weight-semibold);
    color: var(--neutral-900);
  }

  /* -------------------------------------------------------------------
     Quantity tile group
     ------------------------------------------------------------------- */
  .results-qty-group {
    display: flex;
    gap: var(--space-2);
  }

  .quantity-option {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--space-3) var(--space-2);
    border-radius: var(--radius-lg);
    background: var(--surface-white);
    border: 2px solid var(--neutral-200);
    cursor: pointer;
    transition: all var(--duration-fast) var(--ease-out);
    position: relative;
    margin: 0;
    min-height: 44px;
    -webkit-tap-highlight-color: transparent;
  }

  .quantity-option input[type="radio"] {
    display: none;
  }

  .quantity-option:hover {
    border-color: var(--neutral-400);
  }

  .quantity-option:has(input:checked) {
    border-color: var(--accent);
    background: rgba(255, 140, 0, 0.04);
    box-shadow: 0 0 0 1px var(--accent);
  }

  .quantity-option:has(input:checked) .qty-label {
    color: var(--neutral-900);
  }

  .qty-label {
    font-size: var(--text-sm);
    font-weight: var(--weight-bold);
    color: var(--neutral-900);
    transition: color var(--duration-fast);
  }

  /* Bundle badge (quantity savings) */
  .bundle-badge {
    font-size: var(--text-xs);
    background: var(--accent);
    color: var(--surface-white);
    padding: 2px var(--space-2);
    border-radius: var(--radius-full);
    margin-top: var(--space-1);
    font-weight: var(--weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.02em;
    line-height: 1.4;
  }

  /* -------------------------------------------------------------------
     Live price display
     ------------------------------------------------------------------- */
  .results-price-display {
    text-align: center;
    padding: var(--space-3) 0;
  }

  .results-price-current {
    font-family: var(--font-heading);
    font-size: var(--text-3xl);
    font-weight: var(--weight-bold);
    color: var(--neutral-900);
    line-height: var(--leading-tight);
  }

  .results-price-original {
    display: none;
    margin-left: var(--space-2);
    font-size: var(--text-lg);
    color: var(--neutral-400);
    text-decoration: line-through;
    font-weight: var(--weight-regular);
  }

  .results-price-original.visible {
    display: inline;
  }

  /* Shipping info line */
  .results-shipping-info {
    font-size: var(--text-sm);
    color: var(--neutral-600);
    text-align: center;
    margin-top: var(--space-1);
  }

  .results-shipping-info .free-shipping {
    font-weight: var(--weight-bold);
    color: var(--success);
  }

  /* -------------------------------------------------------------------
     Feature pills
     ------------------------------------------------------------------- */
  .results-features {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    justify-content: center;
  }

  .results-features .feature {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-1) var(--space-3);
    background: var(--neutral-50);
    border-radius: var(--radius-full);
    font-size: var(--text-xs);
    font-weight: var(--weight-medium);
    color: var(--neutral-600);
  }

  /* -------------------------------------------------------------------
     Upsell banner
     ------------------------------------------------------------------- */
  .results-upsell {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    background: var(--surface-warm);
    border-radius: var(--radius-md);
    border: 1px solid rgba(255, 140, 0, 0.15);
    cursor: pointer;
    transition: all var(--duration-fast) var(--ease-out);
  }

  .results-upsell:hover {
    border-color: var(--accent);
    background: rgba(255, 140, 0, 0.08);
  }

  .results-upsell-icon {
    font-size: var(--text-xl);
    flex-shrink: 0;
  }

  .results-upsell-text {
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    color: var(--neutral-900);
  }

  .results-upsell-text strong {
    font-weight: var(--weight-bold);
    color: var(--accent-hover);
  }

  /* Hidden when holographic already selected */
  .results-upsell.hidden {
    display: none;
  }

  /* -------------------------------------------------------------------
     CTA buttons section
     ------------------------------------------------------------------- */
  .results-cta-section {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
  }

  .results-cta-buttons {
    display: flex;
    gap: var(--space-3);
    align-items: stretch;
  }

  .results-cta-buttons .btn-add-cart {
    flex: 0 0 auto;
    min-width: 120px;
  }

  .results-cta-buttons .btn-checkout {
    flex: 1;
    padding: var(--space-3) var(--space-5);
    font-size: var(--text-lg);
    font-weight: var(--weight-bold);
    border-radius: var(--radius-md);
    background: var(--accent);
    color: var(--surface-white);
    border: 2px solid var(--accent);
    cursor: pointer;
    box-shadow: var(--shadow-sm);
    transition: all var(--duration-fast) var(--ease-out);
    min-height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
  }

  .results-cta-buttons .btn-checkout:hover:not(:disabled) {
    background: var(--accent-hover);
    border-color: var(--accent-hover);
    box-shadow: var(--shadow-glow);
    transform: translateY(-1px);
  }

  .results-cta-buttons .btn-checkout:disabled {
    background: var(--neutral-200);
    color: var(--neutral-400);
    border-color: var(--neutral-200);
    cursor: not-allowed;
    box-shadow: none;
  }

  /* Original price badge on buy button */
  #original-price-badge {
    display: none;
    margin-left: var(--space-1);
    padding: 2px var(--space-2);
    background: rgba(255, 255, 255, 0.25);
    border-radius: var(--radius-sm);
    font-size: var(--text-sm);
    text-decoration: line-through;
    opacity: 0.85;
    font-weight: var(--weight-regular);
  }

  /* Cart added message */
  .cart-added-msg {
    color: var(--success);
    font-weight: var(--weight-semibold);
    font-size: var(--text-sm);
    text-align: center;
    animation: cartFadeIn var(--duration-normal) var(--ease-out);
  }

  /* Shipping note below CTA */
  .shipping-note {
    font-size: var(--text-sm);
    color: var(--neutral-600);
    text-align: center;
    margin: 0;
  }

  /* -------------------------------------------------------------------
     Trust bar
     ------------------------------------------------------------------- */
  .results-trust-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-4);
    padding: var(--space-3) 0;
    flex-wrap: wrap;
  }

  .results-trust-item {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    font-size: var(--text-xs);
    font-weight: var(--weight-medium);
    color: var(--neutral-600);
    white-space: nowrap;
  }

  .results-trust-item svg {
    width: 14px;
    height: 14px;
    stroke: var(--success);
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex-shrink: 0;
  }

  /* -------------------------------------------------------------------
     Discount section (always visible, not collapsible)
     ------------------------------------------------------------------- */
  .results-discount {
    border-top: 1px solid var(--neutral-100);
    padding-top: var(--space-4);
  }

  .results-discount-label {
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--neutral-900);
    margin-bottom: var(--space-2);
    display: block;
  }

  .results-discount .discount-input-group {
    display: flex;
    gap: var(--space-2);
  }

  .results-discount .discount-input-group input[type="text"] {
    flex: 1;
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-sm);
    border: 1.5px solid var(--neutral-200);
    font-size: var(--text-sm);
    transition: border-color var(--duration-fast) var(--ease-out);
    min-height: 40px;
  }

  .results-discount .discount-input-group input[type="text"]:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-glow);
  }

  #discount-message {
    margin-top: var(--space-2);
    font-size: var(--text-sm);
  }

  .discount-success {
    color: var(--success);
    font-weight: var(--weight-semibold);
  }

  .discount-error {
    color: var(--error);
  }

  .discount-warning {
    color: var(--warning);
  }

  /* Also keep the toggle-based discount for backwards compat */
  .discount-toggle {
    display: none;
  }

  .discount-form {
    display: block;
  }

  .discount-form.open {
    display: block;
  }

  /* -------------------------------------------------------------------
     Satisfaction guarantee badge
     ------------------------------------------------------------------- */
  .results-guarantee {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    background: var(--neutral-50);
    border-radius: var(--radius-md);
    border: 1px solid var(--neutral-100);
  }

  .results-guarantee svg {
    width: 24px;
    height: 24px;
    stroke: var(--success);
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex-shrink: 0;
  }

  .results-guarantee-text {
    font-size: var(--text-sm);
    color: var(--neutral-600);
    line-height: var(--leading-normal);
  }

  .results-guarantee-text strong {
    color: var(--neutral-900);
    font-weight: var(--weight-semibold);
  }

  /* -------------------------------------------------------------------
     Sticky bottom bar (mobile)
     ------------------------------------------------------------------- */
  .results-sticky-bar {
    display: none;
  }

  @media (max-width: 799px) {
    .results-sticky-bar {
      display: flex;
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      padding: var(--space-3) var(--space-4);
      background: var(--surface-white);
      box-shadow: 0 -4px 16px rgba(28, 25, 23, 0.10);
      z-index: var(--z-sticky);
      gap: var(--space-3);
      align-items: center;
      transition: transform var(--duration-normal) var(--ease-out);
    }

    .results-sticky-bar .btn-add-cart-sticky {
      flex: 0 0 auto;
      display: inline-flex;
      align-items: center;
      gap: var(--space-2);
      padding: var(--space-3) var(--space-4);
      background: transparent;
      color: var(--accent);
      border: 2px solid var(--accent);
      border-radius: var(--radius-md);
      font-weight: var(--weight-semibold);
      font-size: var(--text-sm);
      cursor: pointer;
      transition: all var(--duration-fast) var(--ease-out);
      min-height: 48px;
    }

    .results-sticky-bar .btn-add-cart-sticky:hover {
      background: rgba(255, 140, 0, 0.06);
      border-color: var(--accent-hover);
    }

    .results-sticky-bar .btn-buy-sticky {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: var(--space-2);
      padding: var(--space-3) var(--space-5);
      background: var(--accent);
      color: var(--surface-white);
      border: 2px solid var(--accent);
      border-radius: var(--radius-md);
      font-weight: var(--weight-bold);
      font-size: var(--text-base);
      cursor: pointer;
      box-shadow: var(--shadow-sm);
      transition: all var(--duration-fast) var(--ease-out);
      min-height: 48px;
    }

    .results-sticky-bar .btn-buy-sticky:hover {
      background: var(--accent-hover);
      border-color: var(--accent-hover);
      box-shadow: var(--shadow-glow);
    }

    .results-sticky-bar .btn-buy-sticky:disabled {
      background: var(--neutral-200);
      color: var(--neutral-400);
      border-color: var(--neutral-200);
      cursor: not-allowed;
      box-shadow: none;
    }

    /* Add bottom padding to content to prevent sticky bar overlap */
    .results-col-config {
      padding-bottom: 80px;
    }

    /* When sticky bar is hidden (unstick), remove overlap padding */
    .results-sticky-bar.unstick {
      position: static;
      box-shadow: none;
      padding: 0;
      display: none;
    }
  }

  /* -------------------------------------------------------------------
     Shipping form (expanded checkout, hidden by default)
     ------------------------------------------------------------------- */
  #shipping-form {
    display: none;
    margin-top: 0;
    background: var(--surface-white);
    border-radius: var(--radius-lg);
    border: 1px solid var(--neutral-100);
    padding: var(--space-5);
    box-shadow: var(--shadow-md);
  }

  #shipping-form h3 {
    font-family: var(--font-heading);
    font-size: var(--text-lg);
    font-weight: var(--weight-bold);
    margin-bottom: var(--space-4);
    color: var(--neutral-900);
  }

  #shipping-form input,
  #shipping-form select {
    width: 100%;
    padding: var(--space-3) var(--space-4);
    font-size: var(--text-base);
    border-radius: var(--radius-sm);
    border: 1.5px solid var(--neutral-200);
    margin-bottom: var(--space-3);
    background: var(--surface-white);
    color: var(--neutral-900);
    box-sizing: border-box;
    transition: border-color var(--duration-fast), box-shadow var(--duration-fast);
    min-height: 44px;
  }

  #shipping-form input:focus,
  #shipping-form select:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-glow);
  }

  #shipping-info {
    margin: var(--space-3) 0;
    font-size: var(--text-sm);
    color: var(--neutral-600);
    line-height: var(--leading-normal);
  }

  #shipping-form button[type="submit"] {
    width: 100%;
    padding: var(--space-3) var(--space-5);
    font-size: var(--text-lg);
    border-radius: var(--radius-md);
    background: var(--accent);
    color: var(--surface-white);
    border: 2px solid var(--accent);
    cursor: pointer;
    font-weight: var(--weight-bold);
    box-shadow: var(--shadow-sm);
    transition: all var(--duration-fast) var(--ease-out);
    min-height: 52px;
  }

  #shipping-form button[type="submit"]:hover {
    background: var(--accent-hover);
    border-color: var(--accent-hover);
    box-shadow: var(--shadow-glow);
  }

  /* -------------------------------------------------------------------
     AI Generation limit bars
     ------------------------------------------------------------------- */
  .ai-gen-bar {
    margin-bottom: var(--space-4);
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    padding: var(--space-3) var(--space-4);
    display: flex;
    align-items: center;
    gap: var(--space-3);
  }

  .ai-gen-bar svg {
    flex-shrink: 0;
  }

  .ai-gen-blocked {
    background: var(--color-alert-error-bg);
    color: var(--color-alert-error-text);
    border: 1px solid var(--error);
  }

  .ai-gen-warning {
    background: #FFFBEB;
    color: #92400E;
    border: 1px solid var(--warning);
  }

  /* -------------------------------------------------------------------
     Alert styles
     ------------------------------------------------------------------- */
  .results-alert-danger {
    background: var(--color-alert-error-bg);
    color: var(--color-alert-error-text);
    padding: var(--space-4);
    border-radius: var(--radius-md);
    border: 1px solid var(--error);
  }

  .feedback-messages {
    margin-bottom: var(--space-4);
  }

  /* -------------------------------------------------------------------
     FAQ section — only 3 items near Buy button
     ------------------------------------------------------------------- */
  .results-faq {
    border-top: 1px solid var(--neutral-100);
    padding-top: var(--space-4);
  }

  .results-faq-title {
    font-family: var(--font-heading);
    font-size: var(--text-base);
    font-weight: var(--weight-semibold);
    color: var(--neutral-900);
    margin-bottom: var(--space-3);
  }

  .results-faq .faq-item {
    background: var(--neutral-50);
    border-radius: var(--radius-md);
    border: 1px solid var(--neutral-100);
    overflow: hidden;
    transition: border-color var(--duration-fast) var(--ease-out);
  }

  .results-faq .faq-item + .faq-item {
    margin-top: var(--space-2);
  }

  .results-faq .faq-item:hover {
    border-color: var(--neutral-200);
  }

  .results-faq .faq-item summary {
    padding: var(--space-3) var(--space-4);
    font-weight: var(--weight-medium);
    font-size: var(--text-sm);
    cursor: pointer;
    color: var(--neutral-900);
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    min-height: 40px;
  }

  .results-faq .faq-item summary::-webkit-details-marker {
    display: none;
  }

  .results-faq .faq-item summary::after {
    content: '';
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23A8A29E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='12' y1='5' x2='12' y2='19'%3E%3C/line%3E%3Cline x1='5' y1='12' x2='19' y2='12'%3E%3C/line%3E%3C/svg%3E");
    background-size: contain;
    transition: transform var(--duration-fast) var(--ease-out);
  }

  .results-faq .faq-item[open] summary::after {
    transform: rotate(45deg);
  }

  .results-faq .faq-item p {
    padding: 0 var(--space-4) var(--space-4);
    margin: 0;
    line-height: var(--leading-relaxed);
    color: var(--neutral-600);
    font-size: var(--text-xs);
  }

  /* -------------------------------------------------------------------
     Full FAQ section (bottom of page)
     ------------------------------------------------------------------- */
  .results-full-faq {
    max-width: var(--container-max);
    width: 100%;
    margin: var(--space-8) auto;
    padding: var(--space-6) var(--space-4);
  }

  .results-full-faq h2 {
    text-align: center;
    margin-bottom: var(--space-2);
    font-family: var(--font-heading);
    font-weight: var(--weight-bold);
  }

  .results-full-faq > p {
    text-align: center;
    color: var(--neutral-600);
    margin-bottom: var(--space-6);
  }

  /* -------------------------------------------------------------------
     Checkout section (in config card, desktop only)
     ------------------------------------------------------------------- */
  .checkout-section {
    margin-bottom: 0;
  }

  .checkout-buttons {
    display: flex;
    gap: var(--space-3);
    align-items: stretch;
  }

  /* -------------------------------------------------------------------
     Responsive adjustments
     ------------------------------------------------------------------- */
  @media (max-width: 799px) {
    /* On mobile, the inline CTA buttons in the config card are hidden;
       the sticky bar handles the CTAs instead */
    .results-config-card .checkout-section {
      display: block;
    }
  }

  @media (min-width: 800px) {
    /* On desktop, hide the sticky bar completely */
    .results-sticky-bar {
      display: none !important;
    }
  }

}