/* item.css */
/* Assumes shop.css provides base styles, fonts, colors, header, footer */

/* Keep specific html/body rules if needed */
html {
    scroll-behavior: smooth;
  }
  
  body.modal-open {
    overflow: hidden; /* Prevent body scroll when modal is open */
  }
  
  /* Keep specific heading font if different from shop.css */
  h1, h2, h3, h4, h5, h6 {
    font-family: 'Montserrat', sans-serif; /* Example: Use Montserrat for headings */
    line-height: 1.3;
    font-weight: 600;
  }
  
  /* Layout Container specific to item page content */
  .container {
    width: 90%;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 1rem;
    padding-right: 1rem;
    /* Add padding top to account for sticky header/nav from shop.css */
    /* Adjust this value based on the actual height of your sticky elements */
    padding-top: 1rem;
    padding-bottom: 3rem; /* Space above footer */
  }
  
  
  /* --- Main Product Display --- */
  
  .product-section {
    display: flex;
    flex-wrap: wrap;
    gap: 2.5rem; /* Increased gap */
    margin-bottom: 3rem; /* Space below main product info */
  }
  
  .product-gallery {
    flex: 1 1 50%; /* Try 50/50 split */
    min-width: 300px; /* Prevent excessive squishing */
    max-width: 600px; /* Limit gallery width */
    position: relative; /* For loading text positioning if needed */
  }
  
  .main-image {
    width: 100%;
    border-radius: var(--radius, 0.5rem); /* Use variable from shop.css or fallback */
    border: 1px solid var(--border, #eee); /* Use variable from shop.css or fallback */
    aspect-ratio: 1 / 1;
    object-fit: cover;
    margin-bottom: 1rem;
    background-color: var(--kissna-bg-light, #f0f0f0); /* Placeholder bg */
    /* cursor handled by JS */
  }
  
  /* Style for image loading placeholder - Copied from <style> block in HTML for consistency */
  #productImageLoadingText {
    text-align: center;
    padding: 4rem 1rem;
    color: var(--kissna-text-muted, #777); /* Use variable from shop.css or fallback */
    min-height: 400px; /* Approximate height of main image */
    display: flex; /* Kept from original */
    justify-content: center;
    align-items: center;
    border: 1px dashed var(--border, #eee);
    border-radius: var(--radius, 0.5rem);
    background-color: var(--kissna-bg-light, #f0f0f0); /* Use variable or fallback */
    margin-bottom: 1rem; /* Match main-image margin */
  }
  
  .thumbnail-container {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-top: 1rem; /* Space above thumbnails */
  }
  
  .thumbnail {
    width: 75px; /* Adjusted size */
    height: 75px;
    border-radius: calc(var(--radius, 0.5rem) / 2); /* Slightly less rounded */
    object-fit: cover;
    cursor: pointer;
    border: 2px solid transparent; /* Transparent border initially */
    transition: all 0.2s ease;
    opacity: 0.8;
    background-color: var(--kissna-bg-light, #f0f0f0); /* Placeholder bg */
  }
  .thumbnail:hover {
    opacity: 1;
    border-color: var(--kissna-pink-light, #f3b9cb); /* Use variable or fallback */
  }
  .thumbnail.active {
    border-color: var(--kissna-pink, #e67a9e); /* Use variable or fallback */
    opacity: 1;
    box-shadow: 0 0 5px rgba(230, 122, 158, 0.5); /* Subtle glow when active */
  }
  
  .product-info {
    flex: 1 1 45%; /* Try 45% */
    min-width: 300px;
    padding-left: 1rem; /* Add some padding when next to gallery */
  }
  /* Remove padding when stacked */
  @media (max-width: 768px) {
    .product-info { padding-left: 0; }
    .product-gallery { max-width: 100%; } /* Allow gallery full width */
  }
  
  .product-title {
    font-size: clamp(1.6rem, 5vw, 2.2rem);
    margin-bottom: 0.5rem; /* Closer to price */
    font-weight: 700;
    color: var(--kissna-text-dark, #333); /* Use variable or fallback */
  }
  
  .product-price {
    font-size: clamp(1.5rem, 4.5vw, 1.9rem);
    color: var(--kissna-pink, #e67a9e); /* Use variable or fallback */
    margin-bottom: 1.5rem;
    font-weight: 700;
  }
  
  .product-description {
    font-size: 1rem;
    line-height: 1.7; /* Slightly more line height */
    margin-bottom: 2rem;
    color: var(--kissna-text-light, #555); /* Use variable or fallback */
  }
  
  .product-request {
    font-size: 0.9rem;
    margin-bottom: 2rem;
    color: var(--kissna-text-light, #555); /* Use variable or fallback */
    background-color: var(--kissna-pink-lightest, #fdf0f4); /* Use specific light pink or fallback */
    padding: 1rem;
    border-left: 4px solid var(--kissna-pink-light, #f3b9cb); /* Use variable or fallback */
    border-radius: 0 var(--radius, 0.5rem) var(--radius, 0.5rem) 0;
  }
  
  /* Size Selector */
  .size-selector {
    margin-bottom: 2rem;
  }
  .size-label {
    display: block;
    font-weight: 600;
    margin-bottom: 0.75rem;
    font-size: 0.9rem;
    text-transform: uppercase;
    color: var(--kissna-text-muted, #777); /* Use variable or fallback */
  }
  .size-options {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
  }
  .size-option {
    min-width: 48px; /* Slightly wider */
    height: 40px; /* Slightly shorter */
    display: inline-flex; /* Use inline-flex */
    align-items: center;
    justify-content: center;
    padding: 0 1rem; /* Horizontal padding */
    border: 1px solid var(--border, #eee); /* Thinner border */
    border-radius: var(--radius, 0.5rem);
    font-weight: 500; /* Slightly lighter weight */
    font-size: 0.95rem;
    cursor: pointer;
    transition: all 0.2s ease;
    background-color: var(--kissna-bg-white, #fff); /* Use variable or fallback */
    color: var(--kissna-text-dark, #333); /* Use variable or fallback */
  }
  .size-option:hover {
    border-color: var(--kissna-pink, #e67a9e);
    color: var(--kissna-pink, #e67a9e);
    background-color: var(--kissna-pink-lightest, #fdf0f4); /* Use variable or fallback */
  }
  .size-option.selected {
    border-color: var(--kissna-pink, #e67a9e);
    background-color: var(--kissna-pink, #e67a9e);
    color: var(--primary-foreground, #fff); /* Use variable or fallback for white text */
    font-weight: 600;
  }
  
  /* Buy Button (WhatsApp) */
  .buy-button {
    width: 100%;
    padding: 0.9rem 1.5rem; /* Adjusted padding */
    /* Use brand pink consistently */
    background-color: var(--kissna-pink, #e67a9e);
    color: var(--primary-foreground, #fff); /* Use variable or fallback */
    border: none;
    border-radius: var(--radius, 0.5rem);
    font-size: 1rem;
    font-weight: 600;
    text-transform: uppercase;
    cursor: pointer;
    transition: background-color 0.3s, box-shadow 0.2s, transform 0.1s;
    margin-bottom: 2rem;
    letter-spacing: 0.5px;
    display: inline-flex; /* Align icon and text */
    align-items: center;
    justify-content: center;
    gap: 0.75rem; /* Space between icon and text */
  }
  .buy-button svg { /* Style for the SVG within the button */
      width: 1.2em;
      height: 1.2em;
      /* Alignment fix from original style block */
      display: inline-block;
      vertical-align: -0.15em;
      margin-right: 0.6em; /* Kept from original */
  }
  .buy-button:disabled {
    background-color: var(--kissna-text-muted, #aaa); /* Use muted color or fallback */
    cursor: not-allowed;
    box-shadow: none;
    transform: none;
  }
  .buy-button:not(:disabled):hover {
    background-color: #d16a8d; /* Darker pink - consider making this a variable */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    transform: translateY(-2px);
  }
  .buy-button:not(:disabled):active {
    transform: translateY(0);
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.1); /* Inset shadow on click */
  }
  
  /* Services Section */
  .services {
    margin-top: 2rem;
    border-top: 1px solid var(--border, #eee);
    padding-top: 2rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }
  .service-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    font-size: 0.9rem;
    color: var(--kissna-text-light, #555); /* Use variable or fallback */
  }
  .service-icon {
    width: 24px;
    height: 24px;
    opacity: 0.7;
    flex-shrink: 0;
  }
  
  /* Product Loading Error */
  #productLoadingError {
      text-align: center;
      padding: 2rem;
      display: none; /* Controlled by JS */
      color: var(--kissna-red, #dc3545); /* Use variable for error color */
      background-color: var(--kissna-bg-light, #f8f8f8);
      border: 1px solid var(--border, #eee);
      border-radius: var(--radius, 0.5rem);
      margin-bottom: 2rem;
  }
  #productLoadingError p {
      margin-bottom: 0.5rem;
  }
  #productLoadingError a {
      color: var(--kissna-pink, #e67a9e);
      font-weight: bold;
      text-decoration: underline;
  }
  
  
  /* --- Related & Progressive Product Sections --- */
  
  /* Shared Grid Styles for Related/Progressive */
  .products-grid {
    display: grid;
    gap: 1.5rem; /* Consistent gap */
  }
  
  /* Product Card for Related/Progressive Items */
  /* These cards might be simpler than the main shop cards */
  .product-card { /* Applied to cards in related/progressive sections */
    background-color: var(--kissna-bg-white, #fff);
    border: 1px solid var(--border, #eee);
    border-radius: var(--radius, 0.5rem);
    overflow: hidden;
    transition: transform 0.2s ease-out, box-shadow 0.2s ease-out;
    display: flex;
    flex-direction: column;
    text-align: center; /* Center text content */
    text-decoration: none; /* Ensure link itself isn't underlined */
    color: inherit; /* Inherit text color */
  }
  .product-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.07);
  }
  
  .product-card-link { /* The <a> tag wrapping the card content */
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
    height: 100%; /* Ensure link fills card */
  }
  .product-card-link:hover {
      text-decoration: none; /* Prevent underline on link hover */
  }
  
  .product-card-image { /* Image within these small cards */
    width: 100%;
    aspect-ratio: 1 / 1; /* Square images */
    object-fit: cover;
    border-bottom: 1px solid var(--border, #eee);
    background-color: var(--kissna-bg-light, #f0f0f0); /* Placeholder bg */
  }
  
  .product-card .card-content { /* Wrapper for text content */
    padding: 0.75rem;
    margin-top: auto; /* Push content to bottom if card heights vary */
  }
  
  .product-card-price { /* Price style specific to related/progressive cards */
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--kissna-pink, #e67a9e); /* Use variable or fallback */
    margin-bottom: 0.25rem; /* Space between price and size */
  }
  
  .product-card-size { /* Size style specific to related/progressive cards */
    font-size: 0.85rem;
    color: var(--kissna-text-muted, #777); /* Use variable or fallback */
  }
  
  /* Specific Section Styles */
  .related-products,
  .progressive-products {
    margin-top: 4rem; /* More space */
    padding-top: 2.5rem;
    border-top: 1px solid var(--border, #eee);
  }
  .related-title,
  .progressive-title {
    text-align: center;
    margin-bottom: 2.5rem; /* More space */
    font-weight: 600;
    font-size: clamp(1.5rem, 5vw, 1.9rem);
    color: var(--kissna-text-dark, #333); /* Use variable or fallback */
  }
  
  /* Grid column definitions specific to item page sections */
  .related-products-container.products-grid { /* Target related grid */
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  }
  .progressive-products .products-grid { /* Target progressive grid */
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); /* Slightly smaller cards */
  }
  
  
  /* Loading Indicator for Progressive Loading */
  .loading-container {
    display: flex; /* Hidden/shown by JS */
    justify-content: center;
    align-items: center;
    padding: 3rem 0; /* More padding */
    min-height: 100px;
    text-align: center;
    margin-top: 1.5rem; /* Space above indicator */
  }
  .loading-spinner { /* Container for spinner and text */
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem; /* More gap */
    color: var(--kissna-text-muted, #777); /* Use variable or fallback */
    font-size: 1rem;
  }
  /* Spinner animation (copied from original item.css, ensure it matches shop.css if needed) */
  .spinner {
    width: 32px; /* Larger spinner */
    height: 32px;
    border: 4px solid var(--kissna-pink-lightest, #fdf0f4); /* Lighter border */
    border-radius: 50%;
    border-top-color: var(--kissna-pink, #e67a9e); /* Use variable */
    animation: spin 1s linear infinite;
  }
  @keyframes spin { to { transform: rotate(360deg); } }
  
  /* Text messages within loading container */
  .loading-container p { font-size: 1rem; padding: 1rem; }
  .loading-container .text-gray-500 { color: var(--kissna-text-muted, #777); }
  .loading-container .text-red-500 { color: var(--kissna-red, #dc3545); font-weight: bold; }
  
  
  /* --- Footer --- */
  /* REMOVED - Should be styled entirely by shop.css */
  
  
  /* --- Scroll to Top Button --- */
  .scroll-to-top {
    position: fixed;
    bottom: 1.5rem;
    right: 1.5rem;
    background-color: var(--kissna-pink, #e67a9e); /* Use variable */
    color: var(--primary-foreground, #fff); /* Use variable or fallback */
    width: 44px; /* Adjusted size */
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.15);
    border: none;
    opacity: 0;
    visibility: hidden;
    transform: scale(0.8); /* Start smaller */
    transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease;
    z-index: 900; /* Below modal */
  }
  .scroll-to-top.visible {
    opacity: 1;
    visibility: visible;
    transform: scale(1); /* Scale in */
  }
  .scroll-to-top:hover {
    background-color: #d16a8d; /* Darker pink - consider variable */
    transform: scale(1.1); /* Scale up on hover */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
  }
  .scroll-to-top svg {
    width: 20px;
    height: 20px;
    stroke: currentColor; /* Ensures icon color matches button text color */
    stroke-width: 2.5;
  }
  
  
  /* --- Image Zoom Modal --- */
  .modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.85); /* Darker */
    display: none; /* Controlled by JS */
    justify-content: center;
    align-items: center;
    z-index: 1100; /* Highest layer */
    padding: 20px;
    cursor: zoom-out; /* Indicate closable by clicking overlay */
  }
  /* JS should add/remove a class like 'flex' or set display directly */
  .modal-overlay.flex { display: flex; }
  
  .modal-content { /* The enlarged image */
    max-width: 95%; /* Allow slightly larger */
    max-height: 90vh; /* Limit height */
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
    border-radius: 4px;
    box-shadow: 0 8px 25px rgba(0,0,0,0.4);
    cursor: default; /* Image itself isn't clickable to close */
  }
  
  .modal-close { /* The 'X' button */
    position: absolute;
    top: 15px;
    right: 25px;
    color: #fff;
    font-size: 36px; /* Adjusted size */
    font-weight: bold;
    cursor: pointer;
    line-height: 1;
    text-shadow: 0 1px 3px rgba(0,0,0,0.6);
    transition: color 0.2s, transform 0.2s;
    z-index: 1101; /* Above image */
  }
  .modal-close:hover {
    color: #ccc;
    transform: scale(1.1);
  }
  
  
  /* --- Responsive Media Queries --- */
  
  @media (max-width: 992px) {
     /* Adjust item page layout for tablets */
     .product-section { gap: 2rem; }
     .product-gallery { flex-basis: calc(50% - 1rem); } /* Adjust flex basis */
     .product-info { flex-basis: calc(50% - 1rem); padding-left: 0; } /* Reset padding */
     .related-products-container.products-grid,
     .progressive-products .products-grid {
          /* Example: Adjust columns if needed */
          grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
     }
  }
  
  @media (max-width: 768px) {
    /* Adjust item page layout for smaller tablets/large phones */
    .product-section { flex-direction: column; gap: 1.5rem; }
    /* .product-info already has padding-left: 0 from above */
    .related-products-container.products-grid,
    .progressive-products .products-grid {
      grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    }
  }
  
  @media (max-width: 480px) {
    /* Adjust item page layout for small phones */
    .container { width: 95%; padding: 0 0.75rem; padding-top: 1rem; } /* Keep top padding */
    .thumbnail { width: 60px; height: 60px; }
    .thumbnail-container { gap: 0.5rem; justify-content: flex-start; } /* Align left */
    .size-options { gap: 0.5rem; }
    .size-option { min-width: 40px; height: 36px; font-size: 0.9rem; padding: 0 0.75rem; }
  
    /* Force 2 columns for related/progressive on small screens */
    .related-products-container.products-grid,
    .progressive-products .products-grid {
         grid-template-columns: repeat(2, 1fr);
         gap: 1rem;
     }
  
    .scroll-to-top { bottom: 1rem; right: 1rem; width: 40px; height: 40px; }
    .scroll-to-top svg { width: 18px; height: 18px; }
  
    /* Adjust text sizes for readability */
    .product-title { font-size: 1.5rem; }
    .product-price { font-size: 1.4rem; }
    .buy-button { font-size: 0.95rem; padding: 0.8rem 1.2rem; }
    .related-title, .progressive-title { font-size: 1.5rem; margin-bottom: 2rem;}
  }