/**************************************************
 * css/styles.css
 *
 * Stylesheet for the Goofy Los Angeles Apparel Store
 * Based on v6 provided previously.
 * MODIFIED: Unified white background, removed boxes/borders, increased logo size.
 * MODIFIED: Added styles for Clear Cart button.
 * MODIFIED: Added styles for promo banner, cart discount, delivery options (2025-05-04).
 * MODIFIED: Updated delivery option styles for full-box click (2025-05-04).
 * MODIFIED: Removed empty rulesets (2025-05-04).
 **************************************************/

/**************************************************
 * CSS Variables (Theme Configuration)
 **************************************************/
 :root {
  /* Colors */
  --color-text-primary: #333;
  --color-text-secondary: #666;
  --color-text-dark: #222;
  --color-text-headings: #222;
  --color-text-light: #fff;
  --color-text-link: #007aff;
  --color-text-link-hover: #0056b3;
  --color-text-muted: #555;
  --color-text-error: #dc3545; /* Slightly standard red */
  --color-text-error-hover: #c82333; /* Darker red */


  --color-bg-body: #fff; /* CHANGED: Made body background white */
  --color-bg-main: #fff;
  --color-bg-header-footer: #fff;
  --color-bg-preview: #fff; /* CHANGED: Made preview background white */
  --color-bg-button-default: #fff;
  --color-bg-button-hover: #f0f2f5;
  --color-bg-button-active: #3b82f6; /* Blue */
  --color-bg-button-add: #10b981;     /* Green */
  --color-bg-button-add-hover: #059669;
  --color-bg-button-checkout: #3b82f6; /* Blue */
  --color-bg-button-checkout-hover: #2563eb;
  --color-bg-button-checkout-disabled: #9ca3af;
  --color-bg-button-submit: #28a745;     /* Green */
  --color-bg-button-submit-hover: #218838;
  --color-bg-contact-block: transparent; /* CHANGED: Removed contact block background */
  --color-bg-modal-overlay: rgba(0, 0, 0, 0.6);
  --color-bg-thumbnail-placeholder: #f0f0f0;
  --color-bg-qty-button: #f0f2f5;
  --color-bg-qty-button-hover: #e5e7eb;


  --color-border-light: #eef0f2;
  --color-border-medium: #d1d5db;
  --color-border-dark: #adb5bd;
  --color-border-swatch: #e5e7eb;
  --color-border-swatch-hover: #9ca3af;
  --color-border-swatch-active: #1f2937;
  --color-border-swatch-white: #d1d5db;
  --color-border-swatch-white-hover: #9ca3af;
  --color-border-input: #ccc; /* Changed input border */
  --color-border-qty-widget: #ccc;


  --color-shadow: rgba(0, 0, 0, 0.05);
  --color-shadow-modal: rgba(0, 0, 0, 0.2);
  --color-shadow-active: rgba(0, 0, 0, 0.1);

  /* Typography */
  --font-family-base: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  --font-size-base: 16px;
  --line-height-base: 1.6;

  /* Layout */
  --container-max-width: 1200px;
  --container-padding: 1.5rem;
  --main-padding: 2rem;
  --footer-padding: 1.5rem;
  --header-padding-x: 1.5rem;
  --border-radius: 8px;
  --border-radius-small: 6px;
  --border-radius-input: 5px;

  /* Preview - Defined here but can be overridden by JS if needed */
  --preview-base-size: 600px; /* Matches JS CONFIG */
  --thumbnail-size: 50px; /* For cart thumbnails, used in calc */
  }


  /**************************************************
   * Global Reset & Base Styles
   **************************************************/
  *,
  *::before,
  *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }

  html {
    scroll-behavior: smooth;
    height: 100%;
    font-size: var(--font-size-base); /* Base font size on html */
  }

  body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    font-family: var(--font-family-base); /* Apply base font family */
    line-height: var(--line-height-base); /* Apply base line height */
    color: var(--color-text-primary);
    background-color: var(--color-bg-body); /* Now white */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  /**************************************************
   * Layout Containers
   **************************************************/
  header {
    padding: 0 var(--header-padding-x); /* Horizontal padding only */
    text-align: center;
    background-color: var(--color-bg-header-footer);
    flex-shrink: 0;
    /* border-bottom: 1px solid var(--color-border-light); */ /* REMOVED: Header border */
  }

  footer {
    /* border-top: 1px solid var(--color-border-light); */ /* REMOVED: Footer border */
    margin-top: auto; /* Pushes footer to bottom */
    padding: var(--footer-padding);
    font-size: 0.9rem;
    color: var(--color-text-secondary);
    text-align: center;
    background-color: var(--color-bg-header-footer);
    flex-shrink: 0;
  }
  footer a { color: var(--color-text-muted); text-decoration: none; }
  footer a:hover { text-decoration: underline; }

  main {
    flex: 1 0 auto; /* Allows main content to grow and shrink */
    max-width: var(--container-max-width);
    width: 100%;
    margin: var(--container-padding) auto; /* Vertical margin - Keep for spacing */
    padding: var(--main-padding); /* Keep padding for content */
    background-color: var(--color-bg-main); /* Keep main area white */
    /* border-radius: var(--border-radius); */ /* REMOVED: Main content rounding */
    /* box-shadow: 0 4px 15px var(--color-shadow); */ /* REMOVED: Main content shadow */
  }

  /* Layout for product pages (now index.html) */
  .product-customizer {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
    align-items: flex-start;
  }
  .preview-section {
    flex: 1 1 600px;
    min-width: 300px;
    text-align: center;
    /* position: sticky; top: var(--container-padding); */ /* Optional sticky preview */
  }
  .options-section {
    flex: 1 1 300px;
    min-width: 280px;
    padding-top: 1rem;
  }

  /**************************************************
   * Typography
   **************************************************/
  h1, h2, h3, h4 {
    margin-top: 0; /* Reset top margin for headings */
    margin-bottom: 0.75em;
    line-height: 1.3;
    font-weight: 600;
    color: var(--color-text-headings);
  }

  /* REMOVED empty header h1 rule */

  h1.page-title { /* Specific class for Cart page H1 etc. */
        margin-top: 1.5rem;
        margin-bottom: 1rem;
        font-size: 1.8rem;
        text-align: center;
    }

  /* General H2, used on index page */
  h2 {
    font-size: 1.5rem;
    text-align: center;
    margin-bottom: 1.5rem;
  }

  /* Section Headings (h4 in options) */
  h4.options-title {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--color-text-dark);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--color-border-light); /* Keep this border for section clarity? Optional. */
  }

  a {
    color: var(--color-text-link);
    text-decoration: none;
  }
  a:hover {
    text-decoration: underline;
    color: var(--color-text-link-hover);
  }

  p {
    margin-top: 0; /* Reset top margin for paragraphs */
    margin-bottom: 1rem;
  }

  /**************************************************
   * Header Logo & Navigation
   **************************************************/
  .logo-container {
    text-align: center;
    padding-top: 1rem; /* Adjust if needed for larger logo */
    margin-bottom: 0.5rem; /* Adjust if needed for larger logo */
  }

  .site-logo {
    max-height: 105px; /* CHANGED: Increased logo size by 50% (70px * 1.5) */
    width: auto;
    vertical-align: middle;
  }

  header nav.site-menu {
    /* border-top: 1px solid var(--color-border-light); */ /* REMOVED: Nav border */
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
    margin-top: 0.75rem;
    background-color: transparent;
    margin-bottom: 0;
  }

  .site-menu ul {
    list-style-type: none;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.3rem 0.5rem;
    padding-left: 0;
  }

  .site-menu li {
    margin: 0;
  }

  .site-menu a {
    color: var(--color-text-muted);
    text-decoration: none;
    font-weight: 500;
    font-size: 0.95rem;
    padding: 0.5em 1em;
    border-radius: var(--border-radius-small);
    display: inline-block;
    transition: background-color 0.2s ease, color 0.2s ease;
  }

  .site-menu a:hover {
    background-color: var(--color-bg-button-hover);
    color: var(--color-text-dark);
    text-decoration: none;
  }

  .site-menu a.active {
    background-color: var(--color-border-light);
    color: var(--color-text-dark);
    font-weight: 600;
  }

  #nav-cart-link a span#cart-item-count {
    font-weight: bold;
    margin-left: 2px;
  }


  /**************************************************
   * Index Page (Home) - Specific Styles Removed
   * (Now uses standard layout/typography)
   **************************************************/


  /**************************************************
   * Preview Section (Product Page - now index.html)
   **************************************************/
  .preview {
    position: relative;
    width: 100%;
    max-width: var(--preview-base-size);
    aspect-ratio: 1 / 1;
    margin: 0 auto;
    background-color: var(--color-bg-preview); /* Now white */
    overflow: hidden;
    /* border-radius: var(--border-radius); */ /* REMOVED: Preview rounding */
    /* border: 1px solid var(--color-border-light); */ /* REMOVED: Preview border */
  }

  .preview img {
    position: absolute;
    display: block;
    -webkit-user-drag: none;
    user-select: none;
  }

  #baseImage {
    position: absolute;
    width: 95%; /* Adjust as needed for fit */
    height: auto;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
    object-fit: contain;
  }

  #rightChestLogoImage, /* Small logo placement */
  #largeChestLogoImage { /* Large logo placement */
    z-index: 2;
    display: none; /* JS controls display */
    position: absolute; /* Position controlled by JS */
  }

  /**************************************************
   * Options Section (Product Page - now index.html)
   **************************************************/
  .options-group {
    margin-bottom: 2rem;
  }

  .item-button,
  .logo-button,
  .color-swatch {
    display: inline-block;
    vertical-align: middle;
    margin: 0.25rem;
  }

  /* Garment and Logo Buttons */
  .item-button,
  .logo-button {
    padding: 0.6em 1.1em;
    border: 1px solid var(--color-border-medium);
    border-radius: var(--border-radius-small);
    background-color: var(--color-bg-button-default);
    color: var(--color-text-primary);
    cursor: pointer;
    font-size: 0.95rem;
    font-weight: 500;
    line-height: 1.2;
    text-align: center;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
  }

  .item-button:hover,
  .logo-button:hover:not([disabled]) { /* Don't change hover if disabled */
    background-color: var(--color-bg-button-hover);
    border-color: var(--color-border-dark);
    color: var(--color-text-dark);
  }

  .item-button.active,
  .logo-button.active {
    background-color: var(--color-bg-button-active);
    color: var(--color-text-light);
    border-color: var(--color-bg-button-active);
    font-weight: 600;
    box-shadow: 0 1px 3px var(--color-shadow-active);
  }

  /* Style for disabled logo buttons (e.g., Large on Zip Hoodie) */
  .logo-button:disabled,
  .logo-button[style*="display: none"] {
        opacity: 0.5;
        cursor: not-allowed;
        background-color: var(--color-bg-button-default); /* Reset background */
        border-color: var(--color-border-medium); /* Reset border */
        color: var(--color-text-muted); /* Muted text */
        box-shadow: none;
    }
  .item-button[style*="display: none"],
  .color-swatch[style*="display: none"] {
    display: none !important;
  }


  /* Color Swatches */
  .color-swatch {
    width: 32px;
    height: 32px;
    border: 2px solid var(--color-border-swatch);
    border-radius: 50%;
    cursor: pointer;
    transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
    box-shadow: 0 1px 2px var(--color-shadow);
  }

  .color-swatch:hover {
    border-color: var(--color-border-swatch-hover);
    transform: scale(1.1);
  }

  .color-swatch[data-color="white"] {
    border-color: var(--color-border-swatch-white);
  }
  .color-swatch[data-color="white"]:hover {
    border-color: var(--color-border-swatch-white-hover);
  }

  .color-swatch.active {
    border-color: var(--color-border-swatch-active);
    transform: scale(1.1);
    box-shadow: 0 0 0 2px var(--color-bg-main), 0 0 0 4px var(--color-bg-button-active);
  }


  /**************************************************
   * Order Inputs (Size, Qty, Add Button)
   **************************************************/
  #order-inputs h4.options-title {
    margin-top: 0;
  }

  .input-row {
    display: flex;
    align-items: center;
    margin-bottom: 1rem;
    flex-wrap: wrap;
    gap: 10px;
  }

  .input-row label {
    flex: 0 0 80px; /* Adjust label width if needed */
    font-weight: 500;
    font-size: 0.95rem;
    text-align: left;
  }

  .input-row select { /* Select styling */
    flex: 1 1 auto;
    min-width: 120px;
    padding: 0.7em;
    border: 1px solid var(--color-border-input);
    border-radius: var(--border-radius-input);
    font-size: 1rem;
    font-family: inherit;
    line-height: inherit;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-color: var(--color-bg-button-default);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23333'%3E%3Cpath d='M7 10l5 5 5-5H7z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.7em center;
    background-size: 1.2em;
    padding-right: 2.5em;
    cursor: pointer;
  }
  .input-row select::-ms-expand {
    display: none;
  }

  /* Quantity Widget Styles */
  .quantity-widget {
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--color-border-qty-widget);
    border-radius: var(--border-radius-input);
    overflow: hidden;
    flex-shrink: 0;
  }

  .qty-btn {
    background-color: var(--color-bg-qty-button);
    border: none;
    padding: 0.6em 0.8em;
    cursor: pointer;
    font-size: 1.2rem;
    line-height: 1;
    font-weight: bold;
    color: var(--color-text-primary);
    transition: background-color 0.2s ease;
  }
  .qty-btn:hover:not(:disabled) {
    background-color: var(--color-bg-qty-button-hover);
  }
  .qty-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }
  .qty-btn.decrease-qty {
    border-right: 1px solid var(--color-border-qty-widget);
  }
  .qty-btn.increase-qty {
        border-left: 1px solid var(--color-border-qty-widget);
    }

  .qty-display {
    padding: 0.6em 1em;
    font-size: 1rem;
    min-width: 40px;
    text-align: center;
    font-weight: 500;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
  }
  /* End Quantity Widget Styles */

  #order-inputs .button-container {
    text-align: left;
    margin-top: 1.5rem;
  }

  .add-to-cart-btn {
    padding: 0.8em 1.8em;
    border: none;
    border-radius: var(--border-radius-small);
    background-color: var(--color-bg-button-add);
    color: var(--color-text-light);
    cursor: pointer;
    font-size: 1rem;
    font-weight: 600;
    transition: background-color 0.2s ease, color 0.2s ease, opacity 0.2s ease; /* Added transitions */
    width: auto;
    text-align: center;
  }

  .add-to-cart-btn:hover:not(:disabled) { /* Added :not(:disabled) */
    background-color: var(--color-bg-button-add-hover);
  }

  .add-to-cart-btn:disabled { /* Style for temporary 'Added!' state */
        background-color: var(--color-bg-button-add); /* Keep green */
        opacity: 0.8;
        cursor: default;
    }


  /**************************************************
   * Cart Section / Cart Page
   **************************************************/
  .cart-section {
    /* border: 1px solid var(--color-border-light); */ /* REMOVED: Cart section border */
    /* border-radius: var(--border-radius); */ /* REMOVED: Cart section rounding */
    padding: 1.5rem;
    margin-top: 2rem;
    width: 100%;
    flex-basis: 100%;
  }

  .cart-items-list {
    list-style: none;
    padding: 0;
    margin: 0 0 1rem 0;
  }

  .cart-items-list li {
    display: flex;
    align-items: center;
    padding: 0.75rem 0;
    border-bottom: 1px dashed var(--color-border-light);
    font-size: 0.95rem;
    gap: 15px;
  }

  .cart-items-list li:last-child {
    border-bottom: none;
  }

  .cart-item-thumbnail-container {
    position: relative;
    width: var(--thumbnail-size);
    height: var(--thumbnail-size);
    flex-shrink: 0;
    background-color: var(--color-bg-thumbnail-placeholder);
    border-radius: 4px;
    overflow: hidden;
    border: 1px solid var(--color-border-light); /* Keep border on thumb for definition? Optional */
  }

  .cart-item-thumbnail-container img {
    position: absolute;
    display: block;
    -webkit-user-drag: none;
    user-select: none;
    object-fit: contain;
  }
  .thumb-base {
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 1;
  }
  .thumb-logo {
    z-index: 2;
    height: auto;
  }

  .cart-item-details {
    flex-grow: 1;
    line-height: 1.4;
    display: flex;
    flex-direction: column;
    text-align: left;
  }

  .cart-detail-line {
    display: block;
    width: 100%;
  }
  .cart-detail-line.school {
    font-size: 0.9em;
    color: var(--color-text-muted);
    margin-bottom: 0.1em;
  }
  .cart-detail-line.garment {
    font-weight: 500;
    margin-bottom: 0.1em;
  }
  .cart-detail-line.logo-price {
    font-size: 0.9em;
    color: var(--color-text-primary);
  }
  .cart-detail-line.logo-price strong {
    font-weight: 700;
    color: var(--color-text-dark);
  }

  .cart-empty-message {
    color: var(--color-text-secondary);
    font-style: italic;
    text-align: center;
    padding: 2rem 0;
    border-bottom: none;
  }

  .remove-item-btn {
    background: none;
    border: none;
    color: var(--color-text-error-hover); /* Original: Slightly darker red */
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    padding: 0.2rem 0.5rem;
    flex-shrink: 0;
    margin-left: auto;
    align-self: center;
    transition: color 0.2s ease;
  }
  .remove-item-btn:hover {
    color: var(--color-text-error); /* Lighter red on hover */
  }

  .cart-summary {
    border-top: 1px solid var(--color-border-medium); /* Keep border for summary separation */
    padding-top: 1rem;
    margin-top: 1rem;
    text-align: right;
  }
  .cart-summary p {
    margin-bottom: 0.5rem;
    font-size: 1rem;
  }
  .cart-summary .cart-grand-total { /* Class name matches HTML again */
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--color-text-dark);
  }

  /* *** MODIFIED: Cart Button Container Layout *** */
  .cart-section .button-container {
        display: flex; /* Use flexbox for alignment */
        justify-content: flex-end; /* Align buttons to the right */
        align-items: center;
        flex-wrap: wrap; /* Allow wrapping on smaller screens */
        gap: 10px; /* Space between buttons */
        margin-top: 1.5rem;
  }

  .checkout-btn {
    padding: 0.8em 2em;
    border: none;
    border-radius: var(--border-radius-small);
    background-color: var(--color-bg-button-checkout);
    color: var(--color-text-light);
    cursor: pointer;
    font-size: 1.05rem;
    font-weight: 600;
    transition: background-color 0.2s ease;
    order: 2; /* Make checkout button appear last if wrapping */
  }
  .checkout-btn:hover:not(:disabled) {
    background-color: var(--color-bg-button-checkout-hover);
  }
  .checkout-btn:disabled {
    background-color: var(--color-bg-button-checkout-disabled);
    cursor: not-allowed;
  }

  /* *** ADDED: Clear Cart Button Styles *** */
  .clear-cart-btn {
        padding: 0.7em 1.5em;
        border: 1px solid var(--color-border-medium);
        border-radius: var(--border-radius-small);
        background-color: #f8f9fa; /* Light gray background */
        color: var(--color-text-error); /* Use error color for text */
        cursor: pointer;
        font-size: 0.95rem; /* Slightly smaller than checkout */
        font-weight: 500;
        transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
        /* display: inline-block; JS will control display */
        order: 1; /* Make clear button appear first if wrapping */
  }

  .clear-cart-btn:hover {
        background-color: #e9ecef; /* Darker gray on hover */
        border-color: var(--color-border-dark);
        color: var(--color-text-error-hover); /* Darker red on hover */
  }


  /**************************************************
   * Checkout Modal
   **************************************************/
  .modal-overlay {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: var(--color-bg-modal-overlay);
    z-index: 1000;
    display: none;
    justify-content: center;
    align-items: center;
    overflow-y: auto;
    padding: 1rem;
  }

  .modal-content {
    background-color: var(--color-bg-main);
    padding: 1.5rem 2rem;
    border-radius: var(--border-radius);
    box-shadow: 0 5px 25px var(--color-shadow-modal);
    width: 100%;
    max-width: 550px;
    position: relative;
    max-height: 90vh;
    overflow-y: auto;
  }

  .modal-close-btn {
    position: absolute;
    top: 8px;
    right: 12px;
    background: none;
    border: none;
    font-size: 1.8rem;
    font-weight: 300;
    color: var(--color-text-muted);
    cursor: pointer;
    line-height: 1;
  }
  .modal-close-btn:hover {
    color: var(--color-text-primary);
  }

  .modal-content h2 {
    text-align: center;
    font-size: 1.4rem;
    margin-bottom: 1.5rem;
    margin-top: 0;
  }
  .modal-content h3 {
    font-size: 1.1rem;
    margin-top: 1.2rem; /* Adjusted spacing */
    margin-bottom: 1rem;
    border-bottom: 1px solid var(--color-border-light);
    padding-bottom: 0.3rem;
    font-weight: 600;
  }

  .modal-content .form-row {
    margin-bottom: 0.8rem; /* Adjusted spacing */
    display: flex;
    flex-direction: column;
  }
  .modal-content .form-row label {
    margin-bottom: 0.4rem;
    font-weight: 600;
    font-size: 0.9rem;
  }
  .modal-content .form-row input,
  .modal-content .form-row select {
    width: 100%;
    padding: 0.7em;
    font-size: 1rem;
    border: 1px solid var(--color-border-input);
    border-radius: var(--border-radius-input);
    font-family: inherit;
  }

  .modal-content .button-container {
    text-align: center;
    margin-top: 2rem;
  }

  .submit-order-btn {
    padding: 0.8em 2em;
    border: none;
    border-radius: var(--border-radius-small);
    background-color: var(--color-bg-button-submit);
    color: var(--color-text-light);
    cursor: pointer;
    font-size: 1.05rem;
    font-weight: 600;
    transition: background-color 0.2s ease;
  }
  .submit-order-btn:hover {
    background-color: var(--color-bg-button-submit-hover);
  }

  /**************************************************
   * Utility & Content Classes
   **************************************************/
  .text-center { text-align: center; }

  .content-narrow {
    max-width: 750px;
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--container-padding);
    padding-right: var(--container-padding);
  }

  .text-center h2,
  .text-center h3,
  .text-center p {
    text-align: center;
  }

  .contact-email-block {
    margin-top: 1.5rem;
    padding: 1rem;
    background-color: var(--color-bg-contact-block); /* Now transparent */
    /* border-radius: var(--border-radius-small); */ /* REMOVED: Contact block rounding */
    display: inline-block;
    /* border: 1px solid var(--color-border-light); */ /* REMOVED: Contact block border */
  }
  .contact-email-block p { margin-bottom: 0.5rem; font-weight: 500; }
  .contact-email-block p:last-child { margin-bottom: 0; }
  .contact-email-block a { font-size: 1.15em; font-weight: 600; }

  /* --- ADDED: Banner Styling --- */
  .promo-banner {
      background-color: #3b82f6; /* Blue background */
      color: white;
      text-align: center;
      padding: 0.75rem 1rem;
      font-size: 1.1rem;
      font-weight: 600;
      /* No margin needed when at the very top */
  }
  /* --- END ADDED --- */

  /* --- ADDED: Cart Page Discount Styling --- */
  .cart-discount { color: #059669; /* Green */ font-weight: 600; }
  .cart-subtotal-original { font-size: 0.9em; color: var(--color-text-muted); text-decoration: line-through; margin-left: 5px;}
  .cart-subtotal-final { font-weight: bold; } /* Style for subtotal after discount */
  /* --- END ADDED --- */

  /* --- UPDATED: Checkout Modal Delivery Options Styling (for clickable label) --- */
  .delivery-options {
      margin-top: 1.5rem;
      border-top: 1px solid var(--color-border-light);
      padding-top: 1rem;
  }
  .delivery-options h3 {
      font-size: 1.1rem;
      margin-bottom: 1rem;
  }
  /* Make the outer div less prominent, the label is the main thing */
  .delivery-option {
      margin-bottom: 0.8rem;
      border: 1px solid var(--color-border-medium);
      border-radius: var(--border-radius-small);
      /* Remove padding here, it's moved to the label */
      transition: background-color 0.2s, border-color 0.2s;
      overflow: hidden; /* Contain the label's background */
  }
  .delivery-option:hover {
        background-color: #f8f9fa; /* Light hover effect on the box */
  }

  /* The LABEL is now the clickable area */
  .delivery-option label {
      display: flex; /* Use flexbox for alignment */
      align-items: flex-start; /* Align items to the top */
      padding: 0.8rem; /* Padding inside the label */
      cursor: pointer;
      width: 100%;
      font-weight: 500;
      line-height: 1.3;
      border-radius: var(--border-radius-small); /* Match parent border */
        transition: background-color 0.2s; /* Add transition to label */
  }
    .delivery-option label:hover {
        background-color: var(--color-bg-button-hover); /* Apply hover effect to label */
    }

  .delivery-option input[type="radio"] {
      flex-shrink: 0; /* Prevent radio from shrinking */
      margin-right: 12px; /* Increase space */
      /* Adjust vertical alignment slightly if needed */
      margin-top: 0.2em;
      width: 1.1em;
      height: 1.1em;
  }

  /* Container for the text parts */
  .option-text-content {
      flex-grow: 1; /* Allow text to take remaining space */
  }

  /* Style for the main label text */
    .option-label-text {
        display: block; /* Ensure it takes full width */
        margin-bottom: 0.3rem; /* Space before description */
    }


  .delivery-option .option-description {
      display: block;
      font-size: 0.9em;
      color: var(--color-text-secondary);
      line-height: 1.4;
      /* Remove extra padding-left, alignment handled by flexbox/margin */
      padding-left: 0;
  }

  /* Highlight when checked (optional, but good UX) */
    .delivery-option input[type="radio"]:checked + .option-text-content .option-label-text {
      font-weight: 700;
  }
  /* REMOVED empty ruleset here */

    /* Highlight border of outer div when checked */
    .delivery-option:has(input[type="radio"]:checked) {
      border-color: var(--color-bg-button-active); /* Blue border */
      background-color: #f0f8ff; /* Very light blue background */
    }
  /* --- END UPDATED --- */

  /**************************************************
   * Responsive Adjustments (Media Queries)
   **************************************************/

  /* Smaller Desktops / Larger Tablets */
  @media (max-width: 1200px) {
    main {
        max-width: 95%;
        /* Keep padding & margin adjustments */
        padding: 1.5rem;
        margin: 1.5rem auto;
      }
    .product-customizer {
        gap: 1.5rem;
      }
    .preview-section { flex-basis: 500px; }
  }

  /* Tablets and Smaller - Stack layout for product page */
  @media (max-width: 992px) {
    .product-customizer {
        flex-direction: column;
        gap: 2.5rem;
      }
    .preview-section {
        order: 1;
        min-width: 0;
        width: 100%;
        max-width: 600px; /* Keep max-width for preview */
        margin-left: auto;
        margin-right: auto;
      }
    .options-section {
        order: 2;
        min-width: 0;
        width: 100%;
        padding-top: 0;
      }
    .content-narrow { max-width: 90%; }
  }

  /* Smaller Tablets / Large Phones */
  @media (max-width: 768px) {
    body { font-size: 15px; }
    main {
        padding: 1rem;
        margin: 1rem auto;
        /* Shadow/border already removed from main */
      }
    header { padding: 0 1rem; }

    header h1, h1.page-title { font-size: 1.5rem; margin-top: 1rem; }

    .site-menu a { font-size: 0.9rem; padding: 0.5em 0.8em; }
    .site-logo {
        max-height: 90px; /* CHANGED: Increased logo size (60px * 1.5) */
    }
    .logo-container { padding-top: 0.8rem; }
    header nav.site-menu { padding-top: 0.6rem; padding-bottom: 0.6rem; margin-top: 0.6rem; }

    .preview-section { max-width: 500px; } /* Keep max-width */

    /* Cart Adjustments */
    .cart-items-list li { font-size: 0.9rem; gap: 10px; }
    .cart-item-thumbnail-container { --thumbnail-size: 45px; }
    .remove-item-btn { font-size: 1.3rem; }
    .cart-summary p { font-size: 0.95rem; }
    .cart-summary .cart-grand-total { font-size: 1.05rem; }
    .checkout-btn, .submit-order-btn { font-size: 1rem; padding: 0.7em 1.5em; }
    .clear-cart-btn { font-size: 0.9rem; padding: 0.6em 1.2em; } /* Adjust clear button */

    /* Modal Adjustments */
    .modal-content { padding: 1.5rem 1.5rem; }
    .modal-content h2 { font-size: 1.3rem; }
    .modal-content h3 { font-size: 1rem; }
    /* Delivery option responsive */
    .delivery-option label { padding: 0.7rem; }
    .delivery-option input[type="radio"] { margin-right: 10px; }
    .option-label-text { font-size: 0.95em; }
    .delivery-option .option-description { font-size: 0.85em; }

  }

  /* Mobile Phones - Refined Product Page Layout */
  @media (max-width: 480px) {
    body { font-size: 15px; }
    main {
        /* These styles already make main blend in */
        padding: 0;
        margin: 0.8rem auto;
        box-shadow: none;
        border-radius: 0;
        max-width: 100%;
        border: none;
        background-color: transparent;
      }
      /* These keep content areas white */
      main .product-customizer,
      main .cart-section,
      main .content-narrow {
        background-color: var(--color-bg-main); /* White */
        padding: 1rem;
      }
      main .content-narrow {
          padding-left: 1rem;
          padding-right: 1rem;
          max-width: 100%;
      }
      main .cart-section {
        /* These styles already remove border/radius */
        border-radius: 0;
        margin-top: 0;
        border: none;
        /* border-top: 1px solid var(--color-border-light); */ /* REMOVED: Cart top border */
      }


    header h1, h1.page-title {
        font-size: 1.3rem;
        margin-top: 0.8rem;
        padding: 0 0.8rem;
      }

    /* --- Mobile Product Page Layout --- */
    .product-customizer {
        gap: 0;
        padding: 0;
      }

    .preview-section {
        margin-bottom: 0;
        padding: 0;
        width: 100%;
      }
    .preview {
        /* These styles already remove border/radius */
        border-radius: 0;
        border: none;
        /* border-bottom: 1px solid var(--color-border-light); */ /* REMOVED: Preview bottom border */
        max-width: 100%;
        margin: 0;
      }

    .options-section {
        padding: 1rem;
      }

    .options-group {
        margin-bottom: 1.5rem;
      }

    h4.options-title {
        font-size: 0.8rem;
        margin-bottom: 0.8rem;
        text-align: left;
      }

    /* Option Buttons/Swatches */
    .item-button, .logo-button {
        font-size: 0.9rem;
        padding: 0.6em 1em;
      }
    .color-swatch {
        width: 36px;
        height: 36px;
        margin: 0.3rem;
      }
    #item-options, #color-options, #logo-options {
        text-align: center;
      }


    /* Input Row adjustments */
    .input-row {
        margin-bottom: 1rem;
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
      }
    .input-row label {
        flex-basis: auto;
        margin-bottom: 0.2rem;
        font-size: 0.9rem;
        text-align: left;
      }

    .input-row select {
        font-size: 1rem;
        padding: 0.8em;
        padding-right: 2.5em;
        width: 100%;
        max-width: 200px;
        box-sizing: border-box;
      }

    .quantity-widget {
        width: auto;
        max-width: 140px;
      }
    .qty-btn {
        padding: 0.7em;
        font-size: 1.2rem;
      }
    .qty-display {
        padding: 0.7em;
        font-size: 1rem;
        min-width: 40px;
      }

    /* Add to Cart Button */
    #order-inputs .button-container {
        width: 100%;
        margin-top: 2rem;
        text-align: center;
      }
    .add-to-cart-btn {
        font-size: 1rem;
        padding: 0.9em 1.5em;
        width: 100%;
        max-width: 320px;
        text-align: center;
      }
    /* --- End Mobile Product Page Layout --- */

    /* Cart Page Layout on Mobile */
    .cart-items-list li { align-items: center; gap: 10px; }
    .cart-item-details { text-align: left; }
    .remove-item-btn { align-self: center; margin-top: 0; margin-left: auto; padding: 0.5rem; }
    .cart-summary { text-align: right; }

    /* *** MODIFIED: Cart Button Container on Mobile *** */
    .cart-section .button-container {
      justify-content: center; /* Center buttons */
      flex-direction: column-reverse; /* Stack checkout below clear */
    }
    .clear-cart-btn, .checkout-btn {
      width: 100%;
      max-width: 300px;
      text-align: center;
    }
     .clear-cart-btn {
        margin-bottom: 10px; /* Space below clear button when stacked */
     }


    /* Modal on Mobile */
    .modal-content { padding: 1rem 1rem; width: 95%; max-height: 95vh;}
    .modal-content h2 { font-size: 1.2rem; }
    .modal-content .form-row input { font-size: 0.95rem; padding: 0.6em;}
    .submit-order-btn { font-size: 1rem; width: 100%; max-width: 300px;}
    /* Mobile: Make delivery option text smaller */
    .delivery-option label { font-size: 0.95em; padding: 0.6rem; } /* Adjust padding */
    .delivery-option input[type="radio"] { margin-right: 8px; margin-top: 0.15em;} /* Adjust spacing */
    .option-label-text { font-size: 1em; } /* Keep label text size */
    .delivery-option .option-description { font-size: 0.85em; }


    /* Header on smallest screens */
    .site-logo {
        max-height: 75px; /* CHANGED: Increased logo size (50px * 1.5) */
    }
    .logo-container { padding-top: 0.6rem; }
    header nav.site-menu { padding-top: 0.5rem; padding-bottom: 0.5rem; margin-top: 0.5rem; }
    .site-menu a { font-size: 0.85rem; padding: 0.4em 0.7em; }
    .site-menu ul { gap: 0.2rem 0.3rem; }
  }