/* ppage.css – Product Detail Overrides
   Mosaic positioned to the right of thumbnails (view-options)
*/

/*──────────────────────────────────────────────────────────
  :root Variables
──────────────────────────────────────────────────────────*/
:root {
  --color-primary: #a67c52;            /* Brand brown */
  --color-secondary: #555;             /* Secondary text color */
  --color-bg: #fafafa;                 /* Light background */
  --color-text: #333;                  /* Main text color */
  --color-border: #ddd;                /* Neutral border */

  --font-base: 'Poppins','Noto Sans SC',sans-serif;
  --font-secondary:  'Noto Sans SC',sans-serif;      /* Base font stack */
  --line-height-base: 1.6;             /* Base line height */

  --spacing-xs: 6px;                   /* Extra small spacing */
  --spacing-sm: 12px;                  /* Small spacing */
  --spacing-md: 20px;                  /* Medium spacing */
  --spacing-lg: 40px;                  /* Large spacing */
}

/*──────────────────────────────────────────────────────────
  Reset & Base
──────────────────────────────────────────────────────────*/
* {
  box-sizing: border-box;              /* Include border/padding in size */
  margin: 0;
  padding: 0;
}
body {
  font-family: var(--font-base);       /* Set base font */
  font-size: var(--font-size-base);    /* Set base font size */
  line-height: var(--line-height-base);/* Set base line height */
  background-color: var(--color-bg);   /* Light background */
  color: var(--color-text);            /* Main text color */
  overflow-x: hidden;                  /* Prevent horizontal scroll */
  padding-top: 70px;                   /* Offset for fixed header */
}

/*──────────────────────────────────────────────────────────
  Header 1 (optional top nav)
──────────────────────────────────────────────────────────*/
.header1 {
  text-align: center;                              /* Centered heading */
  padding: var(--spacing-lg) 0 var(--spacing-md);  /* Vertical padding */
}
.header1 .site-title {
  font-size: 2.2rem;               /* Large title */
  color: var(--color-primary);      /* Brand color */
  letter-spacing: 2px;              /* Space out letters */
  margin-bottom: var(--spacing-xs); /* Space below */
}
.top-nav a {
  margin: 0 var(--spacing-sm);      /* Side margin for nav links */
  color: var(--color-secondary);    /* Secondary color */
  font-size: 0.9rem;                /* Small nav text */
  text-decoration: none;            /* No underline */
  transition: color 0.3s;           /* Smooth color change */
}
.top-nav a:hover {
  color: var(--color-primary);      /* Brand color on hover */
}

/*──────────────────────────────────────────────────────────
  Product Container & Main Layout
──────────────────────────────────────────────────────────*/
.product-container {
  display: flex;                    /* Side-by-side columns */
  flex-wrap: nowrap;                /* No wrapping */
  align-items: flex-start;          /* Top align items */
  gap: var(--spacing-lg);           /* Space between columns */
  max-width: 1600px;                /* Layout max width (was 1800px) */
  margin: 0 auto;                   /* Center layout */
  padding: 0 2rem;                  /* Add horizontal padding */
}

/*──────────────────────────────────────────────────────────
  Gallery (Left Column)
──────────────────────────────────────────────────────────*/
.gallery {
  display: flex;
  flex-direction: row;              /* Thumbs left, mosaic right */
  align-items: flex-start;
  gap: var(--spacing-md);           /* Space between thumbs and mosaic */
  flex: 1 1 60%;                    /* Take about 60% of row */
}
/* Thumbnails container comes first (order 0) */
.gallery .view-options {
  order: 0;                         /* First in flex row */
  display: flex;
  flex-direction: column;           /* Stack thumbnails vertically */
  gap: var(--spacing-sm);
  align-items: center;
  margin-top: var(--spacing-md);
}
/* Mosaic container comes second (order 1) */
.gallery .mosaic {
  order: 1;                         /* Second in flex row */
  position: relative;
  width: 100%;
  max-width: 1800px;                /* Limit mosaic width */
  aspect-ratio: 4/3;                /* Maintain aspect ratio */
  overflow: hidden;                 /* Hide overflow */
}

/*──────────────────────────────────────────────────────────
  Mosaic Images
──────────────────────────────────────────────────────────*/
.mosaic img {
  position: absolute;               /* Stack images for crossfade */
  top: 0; left: 0; width: 100%; height: 100%;
  object-fit: cover;                /* Fill container, crop if needed */
  opacity: 0;                       /* Hide all by default */
  transition: opacity 0.4s ease;    /* Smooth fade in/out */
}
.mosaic img.active {
  opacity: 1;                       /* Show active image */
  z-index: 1;                       /* On top */
}

/*──────────────────────────────────────────────────────────
  Thumbnail & Scroll Button Styles
──────────────────────────────────────────────────────────*/
.thumbs img,
.scroll-btn {
  width: 80px; height: 60px;        /* Thumbnail size */
  object-fit: cover;                /* Crop/cover */
  border: 2px solid transparent;    /* Border for focus/hover effect */
  transition: border-color 0.3s, background 0.3s;
}
.thumbs img:hover,
.scroll-btn:hover {
  border-color: var(--color-primary);   /* Brown border on hover */
  background: var(--color-primary);     /* Brown bg on hover */
  color: #fff;                          /* White text on hover */
}

/*──────────────────────────────────────────────────────────
  Info Panel (Right Column)
──────────────────────────────────────────────────────────*/
.info-panel {
  flex: 1 1 40%;                  /* ~40% width in row */
  box-sizing: border-box;
  padding-left: var(--spacing-md); /* Spacing from gallery */
  margin-top: -10px;               /* Slight adjustment */
}
.info-panel h2 {
  font-size: 1rem;                 /* Small heading */
  color: var(--color-secondary);   /* Grey */
  margin-bottom: var(--spacing-xs);
}
.info-panel p {
  margin-bottom: var(--spacing-lg);/* Space below paragraphs */
}

/*──────────────────────────────────────────────────────────
  Buttons & Actions
──────────────────────────────────────────────────────────*/
.btn-row {
  display: flex;
  gap: var(--spacing-sm);          /* Space between buttons */
  margin-bottom: var(--spacing-md);
}
.btn {
  flex: none; width: 150px; height: 40px;     /* Button size */
  display: flex; align-items: center; justify-content: center;
  text-align: center; box-sizing: border-box;
  border: 2px solid var(--color-primary);     /* Brown border */
  background: #fff; color: var(--color-secondary);   /* Grey text */
  font-size: 0.8rem; position: relative;
  cursor: pointer;
  transition: background 0.3s;
}
.btn > span {
  margin-right: var(--spacing-sm);            /* Space between icon and text */
}
.btn:hover {
  background: #f5f5f5;                        /* Light grey on hover */
}
.locator {
  display: flex;
  justify-content: center;
  margin-bottom: var(--spacing-md);
}

/*──────────────────────────────────────────────────────────
  More Collection Link & Separator
──────────────────────────────────────────────────────────*/
.more-collection {
  display: inline-block;
  font-size: 0.85rem; color: var(--color-secondary);   /* Grey text */
  text-decoration: none; margin-bottom: var(--spacing-lg);
  transition: color 0.3s;
}
.more-collection:hover {
  color: var(--color-primary);         /* Brown on hover */
}
hr {
  border: none; border-top: 1px solid var(--color-border); /* Subtle line */
  margin: var(--spacing-lg) 0;
}

/*──────────────────────────────────────────────────────────
  Specs & Applications
──────────────────────────────────────────────────────────*/
.specs-apps {
  display: flex; gap: var(--spacing-lg); flex-wrap: wrap;  /* Side by side, wraps on small */
}
.specs, .applications { flex: 1 1 200px; }                 /* Flexible min width */
.specs h3, .applications h3 {
  font-size: 1rem; color: var(--color-secondary);          /* Section headings */
  margin-bottom: var(--spacing-xs);
}
dl dt { font-weight: bold; }                               /* Bold for dt */
dl dd { margin-bottom: var(--spacing-sm); }                /* Space after dd */

/*──────────────────────────────────────────────────────────
  Responsive (Stack on Mobile)
──────────────────────────────────────────────────────────*/
@media (max-width: 768px) {
  .product-container {
    flex-direction: column !important;
    gap: var(--spacing-lg) !important;
  }
  .gallery {
    flex-direction: column !important;
    align-items: center !important;
    width: 100% !important;
  }
  .mosaic {
    order: 1 !important;
    width: 100% !important;
    margin-bottom: 1rem !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    position: static !important;
    min-height: 200px;
  }
  .mosaic img {
    position: absolute !important;
    width: 100% !important;
    height: auto !important;
    max-width: 400px;
    left: 0 !important;
    top: 0 !important;
    display: block !important;
    margin: 0 auto !important;
    object-fit: contain !important;
    opacity: 0 !important;
    z-index: 0;
    transition: opacity 0.4s;
  }
  .mosaic img.active {
    position: static !important;
    opacity: 1 !important;
    z-index: 1;
    display: block !important;
    margin: 0 auto !important;
  }
  .view-options.thumbs {
    order: 2 !important;
    flex-direction: row !important;
    width: 100% !important;
    justify-content: center !important;
    align-items: center !important;
    margin: 0 !important;
    gap: 0.5rem !important;
    text-align: center !important;
  }
  .thumbs img, .scroll-btn {
    width: 60px !important;
    height: 60px !important;
  }
}