body {
  background: #fafbfc;
}

/* Improve iOS text sizing behavior */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* === SECTION & HEADER === */
h3 {
  text-align: center;
  font-size: clamp(14px, 1.8vw, 17px);
  font-weight: 100;
  letter-spacing: 0.1px;
  opacity: 0.6;
  margin-bottom: 22px;
}

/* === MAIN PRODUCT CONTAINER (card) === */
.container {
  display: flex;
  flex-direction: row;
  max-width: 1020px;
  margin: 40px auto 0 auto;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 14px rgba(0, 0, 0, 0.07);
  overflow: hidden;
}

/* === IMAGE SIDEBAR IN CONTAINER === */
.image-section {
  flex: 1.25 1 480px;
  min-width: 240px;
  padding: 38px 18px;
  background: #f5f6fa;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* === PRODUCT MAIN IMAGE BOX (gallery area) === */
.main-img-wrapper {
  width: 100%;
  max-width: 640px;              /* allow wider on large screens */
  aspect-ratio: 4/5;             /* fluid height based on width */
  max-height: 82vh;              /* allow a bit more room for contained images */
  max-height: 82svh;             /* account for iOS dynamic toolbar */
  max-height: 82dvh;             /* modern viewport unit */
  margin-bottom: 28px;
  background: #f0f0f0;           /* subtle neutral background behind images */
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.09);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative; /* make wrapper positioning context for absolute images */
}

/* Slide + fade effect for gallery main images */
.main-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;   /* always show full image */
  object-position: center center;
  border: 1px solid rgba(0, 0, 0, 0.12); /* subtle image border for separation */
  box-sizing: border-box;
  opacity: 0;
  transform: translateX(8%) scale(1.02); /* start slightly to the right */
  transition: opacity .6s cubic-bezier(.2,.8,.2,1), transform .6s cubic-bezier(.2,.8,.2,1);
  pointer-events: none;
  z-index: 1;
  will-change: opacity, transform;
}

/* Visible default fallback (first image) */
.main-img-1 {
  opacity: 1;
  transform: translateX(0) scale(1);
  z-index: 2;
}

/* When a radio is checked, bring that image into view with slide+fade */
input[id^="img1-"]:checked ~ .container .main-img-1,
input[id^="img2-"]:checked ~ .container .main-img-2,
input[id^="img3-"]:checked ~ .container .main-img-3,
input[id^="img4-"]:checked ~ .container .main-img-4,
input[id^="img5-"]:checked ~ .container .main-img-5,
input[id^="img6-"]:checked ~ .container .main-img-6,
input[id^="img7-"]:checked ~ .container .main-img-7,
input[id^="img8-"]:checked ~ .container .main-img-8,
input[id^="img9-"]:checked ~ .container .main-img-9,
input[id^="img10-"]:checked ~ .container .main-img-10,
input[id^="img11-"]:checked ~ .container .main-img-11,
input[id^="img12-"]:checked ~ .container .main-img-12,
input[id^="img13-"]:checked ~ .container .main-img-13,
input[id^="img14-"]:checked ~ .container .main-img-14,
input[id^="img15-"]:checked ~ .container .main-img-15,
input[id^="img16-"]:checked ~ .container .main-img-16,
input[id^="img17-"]:checked ~ .container .main-img-17,
input[id^="img18-"]:checked ~ .container .main-img-18,
input[id^="img19-"]:checked ~ .container .main-img-19,
input[id^="img20-"]:checked ~ .container .main-img-20,
input[id^="img21-"]:checked ~ .container .main-img-21,
input[id^="img22-"]:checked ~ .container .main-img-22,
input[id^="img23-"]:checked ~ .container .main-img-23,
input[id^="img24-"]:checked ~ .container .main-img-24,
input[id^="img25-"]:checked ~ .container .main-img-25,
input[id^="img26-"]:checked ~ .container .main-img-26,
input[id^="img27-"]:checked ~ .container .main-img-27,
input[id^="img28-"]:checked ~ .container .main-img-28,
input[id^="img29-"]:checked ~ .container .main-img-29,
input[id^="img30-"]:checked ~ .container .main-img-30 {
  opacity: 1;
  transform: translateX(0) scale(1);
  z-index: 3;
  pointer-events: auto;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: scale(1.06);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

.color-bar {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 18px;
  margin-top: 22px;
  overflow-x: auto;
  padding-bottom: 12px;
}

.color-dot {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 2.2px solid #e7e7e7;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.09);
  transition: border 0.15s, opacity 0.13s;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  outline: none;
  opacity: 0.96;
  flex-shrink: 0;
}

.color-dot img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* keep thumbnails visually filled */
  border-radius: 50%;
  display: block;
  opacity: 0.94;
}

.color-dot:hover,
.color-dot:focus {
  /* Don't change border on hover/focus to avoid flicker/border flash */
  background: #f0f0f0;
  opacity: 1;
  transition: background 0.15s, opacity 0.13s;
}

/* === Active color-dot based on checked input (for 30 images) === */
input[id^="img1-"]:checked~.container .color-bar label[for^="img1-"],
input[id^="img2-"]:checked~.container .color-bar label[for^="img2-"],
input[id^="img3-"]:checked~.container .color-bar label[for^="img3-"],
input[id^="img4-"]:checked~.container .color-bar label[for^="img4-"],
input[id^="img5-"]:checked~.container .color-bar label[for^="img5-"],
input[id^="img6-"]:checked~.container .color-bar label[for^="img6-"],
input[id^="img7-"]:checked~.container .color-bar label[for^="img7-"],
input[id^="img8-"]:checked~.container .color-bar label[for^="img8-"],
input[id^="img9-"]:checked~.container .color-bar label[for^="img9-"],
input[id^="img10-"]:checked~.container .color-bar label[for^="img10-"],
input[id^="img11-"]:checked~.container .color-bar label[for^="img11-"],
input[id^="img12-"]:checked~.container .color-bar label[for^="img12-"],
input[id^="img13-"]:checked~.container .color-bar label[for^="img13-"],
input[id^="img14-"]:checked~.container .color-bar label[for^="img14-"],
input[id^="img15-"]:checked~.container .color-bar label[for^="img15-"],
input[id^="img16-"]:checked~.container .color-bar label[for^="img16-"],
input[id^="img17-"]:checked~.container .color-bar label[for^="img17-"],
input[id^="img18-"]:checked~.container .color-bar label[for^="img18-"],
input[id^="img19-"]:checked~.container .color-bar label[for^="img19-"],
input[id^="img20-"]:checked~.container .color-bar label[for^="img20-"],
input[id^="img21-"]:checked~.container .color-bar label[for^="img21-"],
input[id^="img22-"]:checked~.container .color-bar label[for^="img22-"],
input[id^="img23-"]:checked~.container .color-bar label[for^="img23-"],
input[id^="img24-"]:checked~.container .color-bar label[for^="img24-"],
input[id^="img25-"]:checked~.container .color-bar label[for^="img25-"],
input[id^="img26-"]:checked~.container .color-bar label[for^="img26-"],
input[id^="img27-"]:checked~.container .color-bar label[for^="img27-"],
input[id^="img28-"]:checked~.container .color-bar label[for^="img28-"],
input[id^="img29-"]:checked~.container .color-bar label[for^="img29-"],
input[id^="img30-"]:checked~.container .color-bar label[for^="img30-"] {
  border: 2.2px solid #5c5c5c;
  opacity: 1;
}

/* === FABRIC SECTION === */
.fabric-section {
  flex: 1.8 1 560px;
  min-width: 200px;
  max-width: 430px;
  padding: 45px 36px 36px 26px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  background: none;
}

.fabric-list {
  list-style: none;
  padding: 0;
  margin: 0 auto;
  width: 100%;
  max-width: 320px;
  background: none;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.fabric-item {
  width: 100%;
  margin-bottom: 14px;
}

.fabric-radio {
  display: none;
}

.fabric-label {
  display: block;
  background: rgba(200, 200, 200, 0.16);
  color: #212121;
  padding: 14px 20px;
  font-size: 14px;
  font-weight: 300;
  opacity: 0.88;
  border-radius: 10px;
  cursor: pointer;
  width: 100%;
  text-align: center;
  margin-bottom: 0;
  transition: background 0.15s, opacity 0.14s;
  user-select: none;
  outline: none;
  border: 1px solid transparent; /* keep spacing but no visible border */
  box-sizing: border-box;
}

.fabric-radio:checked+.fabric-label,
.fabric-label:focus {
  background: rgba(180, 180, 180, 0.18);
  opacity: 1;
  border-color: transparent; /* no visible border when focused/checked */
}

.child-list {
  background: none;
  margin: 0;
  padding: 7px 0 0 0;
  border-radius: 0;
  display: none;
  flex-direction: column;
  align-items: center;
}

.fabric-radio:checked+.fabric-label+.child-list {
  display: flex;
}

.child-list li {
  font-size: 12px;
  color: #232323;
  font-weight: 300;
  margin: 0 0 4px 0;
  padding: 2px 10px;
  min-width: 36px;
  background: none;
  border: none;
  border-radius: 0;
  text-align: center;
  display: block;
  cursor: pointer;
  opacity: 0.83;
  transition: color 0.13s, opacity 0.13s;
}

.child-list li:hover {
  color: #000;
  opacity: 1;
}

.fabric-label {
  transition: background 0.15s, color 0.15s, opacity 0.14s;
}

.fabric-label:hover,
.fabric-label:focus {
  background: #474545;
  color: #fff9f9;
  opacity: 1;
  border-color: transparent;
}

.fabric-radio:checked+.fabric-label {
  background: #474545;
  color: #fff9f9;
  opacity: 1;
  border: 1px solid transparent;      /* keep spacing but no visible border */
  box-shadow: none;     /* remove any shadow */
  outline: none;
}

/* === MODAL ZOOM GALLERY === */
.zoom-overlay {
  display: none;
  position: fixed;
  z-index: 99999;
  inset: 0;
  background: rgba(20, 20, 20, 0.97);
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(1.5px);
}

input[type="checkbox"]:checked~.zoom-overlay {
  display: flex;
}

.zoom-img-box {
  position: relative;
  max-width: 98vw;
  max-height: 92vh;
  max-height: 92svh;
  max-height: 92dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 28px;
  background: transparent;
}

.zoom-img {
  display: none;
  max-width: 94vw;
  max-height: 88vh;
  max-height: 88svh;
  max-height: 88dvh;
  object-fit: contain;
  object-position: center center;
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-sizing: border-box;
  border-radius: 22px;
  background: #222;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.23);
  animation: fadeInZoom 0.27s;
}

@keyframes fadeInZoom {
  from {
    opacity: 0;
    transform: scale(1.03);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* === Show zoom image based on checked inputs (for 30 images) === */
input[id^="img1-"]:checked~input[type="checkbox"]:checked~.zoom-overlay .zoom-img-1,
input[id^="img2-"]:checked~input[type="checkbox"]:checked~.zoom-overlay .zoom-img-2,
input[id^="img3-"]:checked~input[type="checkbox"]:checked~.zoom-overlay .zoom-img-3,
input[id^="img4-"]:checked~input[type="checkbox"]:checked~.zoom-overlay .zoom-img-4,
input[id^="img5-"]:checked~input[type="checkbox"]:checked~.zoom-overlay .zoom-img-5,
input[id^="img6-"]:checked~input[type="checkbox"]:checked~.zoom-overlay .zoom-img-6,
input[id^="img7-"]:checked~input[type="checkbox"]:checked~.zoom-overlay .zoom-img-7,
input[id^="img8-"]:checked~input[type="checkbox"]:checked~.zoom-overlay .zoom-img-8,
input[id^="img9-"]:checked~input[type="checkbox"]:checked~.zoom-overlay .zoom-img-9,
input[id^="img10-"]:checked~input[type="checkbox"]:checked~.zoom-overlay .zoom-img-10,
input[id^="img11-"]:checked~input[type="checkbox"]:checked~.zoom-overlay .zoom-img-11,
input[id^="img12-"]:checked~input[type="checkbox"]:checked~.zoom-overlay .zoom-img-12,
input[id^="img13-"]:checked~input[type="checkbox"]:checked~.zoom-overlay .zoom-img-13,
input[id^="img14-"]:checked~input[type="checkbox"]:checked~.zoom-overlay .zoom-img-14,
input[id^="img15-"]:checked~input[type="checkbox"]:checked~.zoom-overlay .zoom-img-15,
input[id^="img16-"]:checked~input[type="checkbox"]:checked~.zoom-overlay .zoom-img-16,
input[id^="img17-"]:checked~input[type="checkbox"]:checked~.zoom-overlay .zoom-img-17,
input[id^="img18-"]:checked~input[type="checkbox"]:checked~.zoom-overlay .zoom-img-18,
input[id^="img19-"]:checked~input[type="checkbox"]:checked~.zoom-overlay .zoom-img-19,
input[id^="img20-"]:checked~input[type="checkbox"]:checked~.zoom-overlay .zoom-img-20,
input[id^="img21-"]:checked~input[type="checkbox"]:checked~.zoom-overlay .zoom-img-21,
input[id^="img22-"]:checked~input[type="checkbox"]:checked~.zoom-overlay .zoom-img-22,
input[id^="img23-"]:checked~input[type="checkbox"]:checked~.zoom-overlay .zoom-img-23,
input[id^="img24-"]:checked~input[type="checkbox"]:checked~.zoom-overlay .zoom-img-24,
input[id^="img25-"]:checked~input[type="checkbox"]:checked~.zoom-overlay .zoom-img-25,
input[id^="img26-"]:checked~input[type="checkbox"]:checked~.zoom-overlay .zoom-img-26,
input[id^="img27-"]:checked~input[type="checkbox"]:checked~.zoom-overlay .zoom-img-27,
input[id^="img28-"]:checked~input[type="checkbox"]:checked~.zoom-overlay .zoom-img-28,
input[id^="img29-"]:checked~input[type="checkbox"]:checked~.zoom-overlay .zoom-img-29,
input[id^="img30-"]:checked~input[type="checkbox"]:checked~.zoom-overlay .zoom-img-30 {
  display: block;
}

/* Close zoom button */
.close-zoom {
  position: absolute;
  top: 22px;
  right: 26px;
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border-radius: 50%;
  font-size: 1.7rem;
  color: #232323;
  font-weight: 400;
  border: none;
  box-shadow: 0 4px 18px rgba(50, 50, 50, 0.14);
  cursor: pointer;
  opacity: 0.90;
  transition: opacity 0.15s, background 0.15s, color 0.15s;
  line-height: 1;
  z-index: 30;
  filter: none;
}

.close-zoom:hover,
.close-zoom:focus {
  background: #f3f3f3;
  color: #000;
  opacity: 1;
}

/* Replace fragile `display:none` hiding with a robust visually-hidden pattern
   so radios/checkboxes remain operable but never visible on any device. */
input[type="radio"],
input[type="checkbox"] {
  /* keep elements in DOM for :checked selectors but remove visual presence */
  position: absolute !important;
  top: 0 !important; /* pin to top so browsers don't jump-scroll to them */
  left: 0 !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  padding: 0 !important;
  border: 0 !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  overflow: hidden !important;
  white-space: nowrap !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Hide any native focus outlines that might appear around image labels or wrappers */
.image-section label,
.main-img-wrapper,
.main-img,
.color-dot,
.fabric-label {
  outline: none;
}

/* Remove border/outline around the slide image and its wrapper (including focus) */
.main-img-wrapper,
.main-img-wrapper:focus,
.main-img,
.main-img:focus {
  border: none !important;
  outline: none !important;
  box-shadow: none !important; /* if you prefer to keep the visual depth, remove this line */
}

/* If you still want the subtle card shadow but not a hard border, restore only shadow */
.main-img-wrapper.keep-shadow {
  box-shadow: 0 4px 14px rgba(0,0,0,0.09);
}

/* Prevent label focus from showing an undesirable ring on touch devices */
label[for^="img"],
label[for^="zoom-modal-"] {
  -webkit-tap-highlight-color: transparent;
  outline: none !important;
  box-shadow: none !important;
  border: none !important;
  touch-action: manipulation;
}

/* === RESPONSIVE STYLES === */

/* Make the gallery show the whole image on narrower viewports */
@media (max-width: 900px) {
  .container {
    flex-direction: column;
  }

  .fabric-section {
    max-width: 94vw;
    padding: 26px 3vw;
  }

  /* smaller wrapper and let image scale inside without cropping */
  .main-img-wrapper {
    max-width: 92vw;
    aspect-ratio: 3/4;
    max-height: 68vh;
    margin-left: auto;
    margin-right: auto;
  }

  /* show the full image (contain) on tablets/phones */
  .main-img {
    object-fit: contain;
  }

  .fabric-list {
    max-width: 360px;
  }

  .zoom-img-box {
    border-radius: 14px;
  }

  .zoom-img {
    border-radius: 10px;
  }

  .close-zoom {
    width: 34px;
    height: 34px;
    font-size: 1.2rem;
    top: 8px;
    right: 10px;
  }
}

@media (max-width: 600px) {
  .main-img-wrapper {
    max-width: 98vw;
    aspect-ratio: 3/4;
    max-height: 78vh;
    min-height: 120px;
  }

  .main-img {
    object-fit: contain;
  }

  .fabric-list {
    max-width: 98vw;
  }

  .fabric-label {
    font-size: 14px;
  }

  .child-list li {
    font-size: 12px;
  }
}

/* .......................Search ber CSS........................*/

.search-container {
  position: fixed;
  /* fixed position for top-right corner */
  top: calc(12px + env(safe-area-inset-top));
  right: 20px;
  display: flex;
  align-items: center;
  max-width: 400px;
  background: transparent;
  z-index: 1000;
  /* ensure it stays above other elements */
  transition: all 0.3s ease;
  margin: 0;
  /* remove auto margin since fixed */
}

#searchButton {
  background: none;
  border: none;
  color: #000;
  cursor: pointer;
  padding: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  transition: color 0.3s ease;
  z-index: 3;
}

#searchButton:hover,
#searchButton:focus {
  color: #555;
}

#searchInput {
  flex-grow: 1;
  border: none;
  background: transparent;
  color: #000;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 300;
  font-size: 1.1rem;
  padding: 8px 40px 8px 10px;
  /* space right for clear button */
  outline: none;
  transition: width 0.3s ease, opacity 0.3s ease;
  opacity: 0;
  width: 0;
  pointer-events: none;
  letter-spacing: 0.03em;
  position: relative;
  z-index: 1;
  box-sizing: border-box;
  -webkit-appearance: none;
  appearance: none;
}

.search-container.active #searchInput {
  opacity: 1;
  width: 100%;
  pointer-events: auto;
  margin-left: 8px;
}

#clearButton {
  display: none;
  position: absolute;
  right: 48px;
  /* adjusted for better alignment */
  background: none;
  border: none;
  color: rgba(0, 0, 0, 0.7);
  /* stronger black with 70% opacity */
  font-size: 1.2rem;
  cursor: pointer;
  padding: 0;
  line-height: 1;
  transition: color 0.3s ease;
  z-index: 4;
  user-select: none;
}

#clearButton:hover,
#clearButton:focus {
  color: rgba(0, 0, 0, 1);
  /* full black on hover/focus */
}

/* Responsive adjustments */
@media (max-width: 1024px) {

  /* iPad and tablets */
  #clearButton {
    right: 45px;
  }

  #searchInput {
    font-size: 1rem;
  }
}

@media (max-width: 768px) {

  /* Mobile landscape and small tablets */
  #clearButton {
    right: 40px;
  }

  #searchInput {
    font-size: 0.95rem;
    padding: 8px 36px 8px 10px;
  }

  #searchButton {
    font-size: 1.3rem;
    padding: 6px;
    z-index: 3;
  }
}

@media (max-width: 480px) {
  /* Mobile portrait (search controls) */
  #clearButton {
    right: 36px;
    font-size: 1rem;
  }

  #searchInput {
    font-size: 0.9rem;
    padding: 6px 30px 6px 10px;
  }

  #searchButton {
    font-size: 1.1rem;
    padding: 6px 4px;
    z-index: 3;
  }
}

/* Hide native clear (×) for WebKit browsers like Chrome, Safari, Edge */
#searchInput::-webkit-search-cancel-button {
  display: none;
}

/* Hide native clear button for Internet Explorer and Edge Legacy */
#searchInput::-ms-clear {
  display: none;
}

/* For Firefox (if needed) */
#searchInput[type="search"] {
  appearance: none;
  -moz-appearance: textfield;
}

/* Layout improvements: make sections snap into view on smaller devices and scale cards down */
#dressSections {
  /* preserve center layout on wide screens; enable snapping on narrow screens via media queries below */
  box-sizing: border-box;
}

/* Ensure each section aligns for snap and can shrink */
#dressSections > section {
  scroll-snap-align: start;
  width: min(1020px, 96%);
  margin: 18px auto;
  box-sizing: border-box;
  transition: transform .18s ease, padding .18s ease;
}

/* Slightly smaller card on medium screens for better fit */
@media (min-width: 1025px) and (max-width: 1366px) {
  #dressSections > section {
    width: min(960px, 96%);
    margin: 20px auto;
  }
}

/* Wide desktops: keep comfortable width */
@media (min-width: 1367px) {
  #dressSections > section {
    width: min(1100px, 90%);
  }
}

/* SMALL DEVICES: enable full-viewport sections with scroll-snap and compact spacing */
@media (max-width: 900px) {
  html, body { height: 100%; }
  /* make container scrollable and snap per section */
  #dressSections {
    height: 100vh;
    height: 100svh;
    height: 100dvh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: y mandatory;
    padding: calc(12px + env(safe-area-inset-top)) 12px 12px 12px;
    scroll-padding-top: calc(52px + env(safe-area-inset-top));
    gap: 16px;
  }

  /* make each section occupy most of the viewport and be compact */
  #dressSections > section {
    min-height: calc(100vh - 28px); /* allow small header/footer */
    min-height: calc(100svh - 28px);
    min-height: calc(100dvh - 28px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 14px 12px;
    margin: 0 auto;
    border-radius: 10px;
  }

  /* stack container and make the card narrower so it fits fully */
  .container {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
    width: 100%;
  }

  /* reduce side image section padding */
  .image-section {
    padding: 18px 12px;
  }

  /* shrink image wrapper to fit viewport comfortably */
  .main-img-wrapper {
    width: 88%;
    max-width: 88%;
    aspect-ratio: 3/4;
    max-height: 68vh;
    max-height: 68svh;
    max-height: 68dvh;
    margin-bottom: 14px;
    border-radius: 10px;
    box-shadow: 0 6px 22px rgba(0,0,0,0.06);
  }

  /* ensure image shows fully and not cropped */
  .main-img { object-fit: contain; }

  /* smaller color dots and ensure visible overflow */
  .color-bar { gap: 14px; padding-bottom: 12px; }
  .color-dot { width: 40px; height: 40px; border-radius: 50%; }

  /* compact fabric panel */
  .fabric-section {
    padding: 16px 12px;
    max-width: 96%;
    width: 100%;
    align-items: center;
  }
  .fabric-list {
    gap: 10px;
    max-width: 100%;
    align-items: stretch;          /* stretch to full width */
    display: grid;                 /* single column grid for clean edges */
    grid-template-columns: 1fr;
  }
  .fabric-item { width: 100%; margin-bottom: 0; } /* use grid gap instead */
  .fabric-label { padding: 12px 14px; font-size: 15px; border-radius: 12px; width: 100%; box-sizing: border-box; }

  /* Zoom overlay adjustments */
  .zoom-img-box { padding: 12px; max-height: 86vh; max-height: 86svh; max-height: 86dvh; }
  .zoom-img { max-width: 95vw; max-height: 80vh; max-height: 80svh; max-height: 80dvh; border-radius: 12px; }
  .close-zoom { top: calc(8px + env(safe-area-inset-top)); right: 10px; }

  /* make back button/search not overlap card */
  .search-container { top: 10px; right: 10px; }
  /* push content a bit for fixed header tools */
  #dressSections { padding-top: 36px; }
}

/* Very small phones (iPhone SE, etc.) */
@media (max-width: 420px) {
  #dressSections { padding: 8px 8px; }
  #dressSections > section { padding: 10px; min-height: calc(100vh - 20px); min-height: calc(100svh - 20px); min-height: calc(100dvh - 20px); }
  .main-img-wrapper { aspect-ratio: 4/5; max-height: 66vh; max-height: 66svh; max-height: 66dvh; }
  h3 { font-size: clamp(14px, 4.6vw, 18px); }
  .color-bar { gap: 10px; }
  .color-dot { width: 36px; height: 36px; }
  .fabric-list { gap: 8px; }
  .fabric-label { font-size: 14px; padding: 10px 12px; line-height: 1.25; word-break: break-word; hyphens: auto; }
  .wadha_logo { width: clamp(56px, 18vw, 120px); }
  .logout-container { top: 8px; right: 8px; }
}

/* Ultra-small phones (<=360px logical width) */
@media (max-width: 360px) {
  #dressSections > section { padding: 8px; }
  .main-img-wrapper { width: 94%; }
  .color-bar { gap: 8px; }
  .color-dot { width: 32px; height: 32px; }
  .fabric-list { gap: 8px; }
  .fabric-label { font-size: 13px; padding: 9px 10px; }
}

/* Typical 6" phones and phablets */
@media (min-width: 421px) and (max-width: 767px) {
  #dressSections { padding: 10px 10px; gap: 12px; }
  #dressSections > section { padding: 12px; min-height: calc(100vh - 24px); min-height: calc(100svh - 24px); min-height: calc(100dvh - 24px); }
  .main-img-wrapper { max-width: 88vw; aspect-ratio: 3/4; max-height: 70vh; max-height: 70svh; max-height: 70dvh; }
  .fabric-section { padding: 16px 14px; }
  /* two-column balanced grid for fabric buttons on mid-small screens */
  .fabric-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    align-items: stretch;
  }
  .fabric-item { margin-bottom: 0; }
  .fabric-label { text-align: center; }
}

/* iPad portrait / 9-11 inch */
@media (min-width: 768px) and (max-width: 1024px) {
  #dressSections { padding: 16px 16px; gap: 18px; height: auto; scroll-snap-type: none; }
  #dressSections > section { min-height: auto; width: min(1000px, 96%); margin: 18px auto; }
  .container { display: grid; grid-template-columns: minmax(440px, 1fr) 340px; gap: 18px; align-items: start; }
  .fabric-section { max-width: 100%; padding: 22px 18px; }
  .fabric-list { max-width: none; width: 100%; }
  .main-img-wrapper { max-width: 540px; aspect-ratio: 4/5; max-height: 74vh; }
  .main-img { object-fit: contain; } /* show full image on iPad when needed */
}

/* Ensure desktop keeps layout but slightly tighter box on laptops */
@media (min-width: 1025px) {
  #dressSections { scroll-snap-type: none; height: auto; overflow: visible; padding: 22px 18px; }
  #dressSections > section { min-height: auto; padding: 20px; }
  .container { display: grid; grid-template-columns: minmax(520px, 1fr) 360px; gap: 22px; align-items: start; }
  .fabric-section { max-width: 100%; padding: 26px 20px; }
  .fabric-list { max-width: none; width: 100%; }
  .main-img-wrapper { max-width: 520px; aspect-ratio: 4/5; max-height: 78vh; }
}

/* Landscape optimizations for phones/tablets */
@media (orientation: landscape) and (max-width: 900px) {
  #dressSections { padding-top: 28px; }
  #dressSections > section { min-height: auto; }
  .main-img-wrapper {
    aspect-ratio: 4/3;
    max-height: 74vh;
    max-height: 70svh;
    max-height: 70dvh;
  }
}

/* subtle focus accessibility when sections snap */
/* Remove any section outline on interaction to avoid perceived borders */
#dressSections > section:focus-within,
#dressSections > section:active {
  outline: none !important;
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .main-img { transform: none !important; }
  html:focus-within { scroll-behavior: auto; }
}