/* ancientfit-frontend/css/event.css
   ============================================
   EVENT PAGE - RED SCROLLBAR EDITION
   - Solid red scrollbars (no gradients)
   - "Cultured T-Shirt" as graphical white with Font Awesome
   - Fully responsive across ALL devices
   ============================================ */

/* === FONT AWESOME & GOOGLE FONTS === */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&family=Inter:wght@300;400;500;600;700;800&display=swap');

/* ============================================
   CSS CUSTOM PROPERTIES
   ============================================ */
:root {
  --red-primary:    #ff0000;
  --red-dark:       #cc0000;
  --blue-accent:    #4d9eff;
  --blue-accent-bg: rgba(77, 158, 255, 0.15);
  --blue-accent-bd: rgba(77, 158, 255, 0.4);
  --glass-bg:       rgba(0, 0, 0, 0.65);
  --glass-border:   rgba(255, 255, 255, 0.15);
  --text-primary:   rgba(255, 255, 255, 0.95);
  --text-muted:     rgba(255, 255, 255, 0.7);
  --overlay-bg:     rgba(0, 0, 0, 0.85);
  --radius-sm:      clamp(12px, 2vw, 20px);
  --radius-md:      clamp(16px, 3vw, 28px);
  --radius-lg:      clamp(20px, 4vw, 36px);
}

/* ============================================
   RESET & BASE
   ============================================
   Both html AND body must have overflow-x:hidden.
   Locking only one of them is a common mistake —
   the browser uses the other one as the scroll root.
   ============================================ */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  overflow-x: hidden;    /* scroll root lock #1 */
}

body {
  margin: 0;
  padding: 0;
  min-height: 100vh;
  background: transparent;
  color: var(--text-primary);
  font-family: 'Inter', 'Lato', sans-serif;
  line-height: 1.6;
  /* position:relative is intentionally removed —
     it was making body the scroll container for
     fixed pseudo-elements on certain browsers,
     which added phantom scroll width */
  overflow-x: hidden;    /* scroll root lock #2 */
  width: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ============================================
   MODAL-OPEN BODY LOCK
   JS: document.body.classList.add('modal-open')
   when any modal opens, remove on close.
   ============================================ */
body.modal-open {
  overflow: hidden !important;
  /* position:fixed + width:100% stops iOS bounce
     from allowing the page to scroll behind the modal */
  position: fixed;
  width: 100%;
}

/* ============================================
   FIXED BACKGROUND — pseudo-element technique
   Avoids background-attachment:fixed which causes
   scroll jank / repaint loops on iOS and Android.

   CRITICAL: do NOT use will-change:transform here.
   will-change promotes the element to its own
   compositing layer and forces the browser to
   recalculate the page's scroll width, which is
   exactly what creates the top-right scrollbar.
   ============================================ */
body::after {
  content: '';
  position: fixed;
  top: 0; left: 0;
  /* Use 100% not 100vw — on iOS, 100vw includes
     the scrollbar gutter and adds phantom width */
  width: 100%;
  height: 100%;
  background: url('../Images/Event/EventHomePage.jpg') no-repeat center center / cover;
  z-index: -2;
  /* NO will-change here — see note above */
}

/* Dark overlay */
body::before {
  content: '';
  position: fixed;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  z-index: -1;
}

/* ============================================
   NOTICE CONTAINER
   ============================================ */
.notice-container {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(12px, 4vw, 40px);
  margin: 0 auto;
  max-width: 1400px;
  position: relative;
  z-index: 2;
}

/* ============================================
   GLASS CARD
   ============================================ */
.glass-card {
  max-width: min(90vw, 700px);
  width: 100%;
  padding: clamp(16px, 4vw, 48px) clamp(14px, 4vw, 48px);
  border-radius: var(--radius-lg);
  background: var(--glass-bg);
  backdrop-filter: blur(18px) saturate(180%);
  -webkit-backdrop-filter: blur(18px) saturate(180%);
  border: 1px solid var(--glass-border);
  box-shadow:
    0 20px 40px rgba(0, 0, 0, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  text-align: center;
  transition:
    transform 0.4s cubic-bezier(0.4, 0, 0.2, 1),
    background 0.4s cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
}

.glass-card:hover {
  transform: translateY(-6px) scale(1.01);
  background: rgba(0, 0, 0, 0.75);
  border-color: rgba(255, 255, 255, 0.25);
  box-shadow:
    0 30px 60px rgba(0, 0, 0, 0.6),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.glass-card p {
  font-size: clamp(0.875rem, 2.5vw, 1.25rem);
  line-height: 1.7;
  margin: 0;
  color: var(--text-primary);
}

/* ============================================
   HIGHLIGHT
   ============================================ */
.highlight {
  color: var(--blue-accent);
  font-weight: 700;
  text-shadow: 0 0 10px rgba(77, 158, 255, 0.3);
}

/* ============================================
   SHOP SECTION
   ============================================ */
.shop-section {
  width: min(92%, 1400px);
  max-height: 75vh;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
  padding: clamp(14px, 3vw, 32px);
  margin: clamp(14px, 4vw, 40px) auto;
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(12px) saturate(160%);
  -webkit-backdrop-filter: blur(12px) saturate(160%);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  box-shadow:
    inset 0 0 40px rgba(0, 0, 0, 0.5),
    0 12px 48px rgba(0, 0, 0, 0.4);
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
  position: relative;
  z-index: 2;
}

.shop-section:hover {
  border-color: rgba(255, 255, 255, 0.25);
  box-shadow:
    inset 0 0 40px rgba(0, 0, 0, 0.5),
    0 12px 48px rgba(0, 0, 0, 0.5);
}

/* Red scrollbar — Webkit */
.shop-section::-webkit-scrollbar       { width: 12px; height: 12px; }
.shop-section::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.5);
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}
.shop-section::-webkit-scrollbar-thumb {
  background: var(--red-primary);
  border-radius: 10px;
  border: 2px solid rgba(0, 0, 0, 0.3);
}
.shop-section::-webkit-scrollbar-thumb:hover { background: var(--red-dark); }
.shop-section::-webkit-scrollbar-corner      { background: rgba(0, 0, 0, 0.5); }

/* Red scrollbar — Firefox */
.shop-section {
  scrollbar-width: thick;
  scrollbar-color: var(--red-primary) rgba(0, 0, 0, 0.5);
}

/* ============================================
   SECTION TITLE
   ============================================ */
.section-title {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: clamp(8px, 2vw, 20px);
  width: fit-content;
  max-width: min(92%, 800px);
  margin: clamp(16px, 4vw, 40px) auto clamp(20px, 5vw, 50px);
  font-size: clamp(1.3rem, 5vw, 3rem);
  font-weight: 800;
  color: #ffffff;
  text-shadow:
    0 0 20px rgba(255, 255, 255, 0.5),
    0 2px 10px rgba(0, 0, 0, 0.3);
  letter-spacing: -0.5px;
  text-align: center;
  overflow-wrap: break-word;
  word-break: break-word;
  padding: clamp(10px, 2vw, 20px) clamp(16px, 4vw, 40px);
  border-radius: clamp(28px, 8vw, 60px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(10px);
  background: rgba(0, 0, 0, 0.4);
  box-shadow: 0 0 30px rgba(255, 255, 255, 0.1);
}

.section-title i {
  font-size: clamp(1.1rem, 4vw, 2.5rem);
  color: #ffffff;
  filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.5));
  animation: iconPulse 2s ease-in-out infinite;
  flex-shrink: 0;
}

@keyframes iconPulse {
  0%, 100% {
    transform: scale(1);
    filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.5));
  }
  50% {
    transform: scale(1.05);
    filter: drop-shadow(0 0 15px rgba(255, 255, 255, 0.8));
  }
}

/* ============================================
   SHIRT GRID
   ============================================ */
.shirt-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr));
  gap: clamp(14px, 3vw, 40px);
  padding: clamp(6px, 2vw, 20px);
  overflow: hidden;
}

/* ============================================
   SHIRT CARD
   ============================================ */
.shirt-card {
  background: rgba(0, 0, 0, 0.6);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  padding: clamp(14px, 2.5vw, 28px);
  cursor: pointer;
  transition:
    transform 0.4s cubic-bezier(0.4, 0, 0.2, 1),
    background 0.4s cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  backdrop-filter: blur(12px);
  position: relative;
  overflow: hidden;
  will-change: transform;
  min-width: 0;
  max-width: 100%;
}

.shirt-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, #ffffff, transparent);
  transform: scaleX(0);
  transition: transform 0.5s ease;
}

.shirt-card:hover::before { transform: scaleX(1); }

.shirt-card:hover {
  transform: translateY(-8px) scale(1.02);
  background: rgba(0, 0, 0, 0.75);
  border-color: rgba(255, 255, 255, 0.3);
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5);
}

.shirt-card img {
  width: 100%;
  max-width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: clamp(10px, 2vw, 24px);
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
  background: rgba(0, 0, 0, 0.3);
  display: block;
}

.shirt-card:hover img { transform: scale(1.05); }

.shirt-card h3 {
  margin-top: clamp(10px, 2vw, 20px);
  color: var(--text-primary);
  font-size: clamp(0.9rem, 2.2vw, 1.3rem);
  font-weight: 700;
  text-align: center;
  letter-spacing: -0.3px;
  overflow-wrap: break-word;
  word-break: break-word;
}

/* ============================================
   LAZY LOAD
   ============================================ */
.lazy-img        { filter: blur(12px); opacity: 0; transition: filter 0.4s ease-out, opacity 0.4s ease-out; }
.lazy-img.loaded { filter: blur(0);    opacity: 1; }

/* ============================================
   MODAL OVERLAY
   ============================================
   width:100% NOT 100vw — 100vw includes the
   scrollbar gutter on iOS, adding phantom width.
   overflow:hidden on the wrapper means only
   .modal-content scrolls, not the backdrop.
   ============================================ */
.modal {
  display: none;
  position: fixed;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  background: var(--overlay-bg);
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  z-index: 10000;
  padding: clamp(12px, 4vw, 24px);
  justify-content: center;
  align-items: flex-start;
}

.modal.is-open { display: flex; }

/* ============================================
   MODAL CONTENT
   ============================================ */
.modal-content {
  background: rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(30px) saturate(180%);
  -webkit-backdrop-filter: blur(30px) saturate(180%);
  padding: clamp(20px, 4vw, 48px);
  border-radius: var(--radius-lg);
  width: min(100%, 600px);
  max-width: 100%;
  max-height: 90dvh;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
  color: var(--text-primary);
  position: relative;
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow:
    0 30px 70px rgba(0, 0, 0, 0.6),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  animation: modalSlideIn 0.5s cubic-bezier(0.4, 0, 0.2, 1) both;
  margin: auto;
  contain: layout;
}

@keyframes modalSlideIn {
  from { opacity: 0; transform: translateY(40px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0)    scale(1);    }
}

.modal-content::-webkit-scrollbar       { width: 8px; }
.modal-content::-webkit-scrollbar-track { background: rgba(0,0,0,0.4); border-radius: 10px; }
.modal-content::-webkit-scrollbar-thumb { background: var(--red-primary); border-radius: 10px; }

/* ============================================
   CLOSE BUTTON
   ============================================ */
.modal-content .close {
  position: absolute;
  right: clamp(10px, 3vw, 24px);
  top:   clamp(10px, 3vw, 24px);
  font-size: clamp(18px, 4vw, 28px);
  cursor: pointer;
  color: var(--text-muted);
  transition: all 0.3s ease;
  width: 40px; height: 40px; min-width: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  touch-action: manipulation;
  z-index: 2;
}

.modal-content .close:hover {
  color: white;
  background: rgba(255, 255, 255, 0.2);
  transform: rotate(90deg);
}

/* ============================================
   CAROUSEL
   ============================================ */
.shirt-carousel {
  position: relative;
  width: 100%;
  margin-bottom: clamp(14px, 4vw, 32px);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid var(--glass-border);
}

.shirt-carousel img {
  width: 100%;
  max-width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  background: rgba(0, 0, 0, 0.3);
  transition: transform 0.35s ease;
  display: block;
}

/* ============================================
   CAROUSEL BUTTONS
   ============================================ */
.carousel-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0, 0, 0, 0.7);
  color: white;
  border: 1px solid rgba(255, 255, 255, 0.3);
  font-size: clamp(14px, 3.5vw, 28px);
  cursor: pointer;
  border-radius: 50%;
  transition: all 0.3s ease;
  backdrop-filter: blur(10px);
  line-height: 1;
  font-weight: bold;
  min-width: 44px; min-height: 44px;
  width: clamp(36px, 8vw, 48px);
  height: clamp(36px, 8vw, 48px);
  display: flex;
  align-items: center;
  justify-content: center;
  touch-action: manipulation;
  z-index: 1;
}

.carousel-btn:hover {
  background: rgba(255, 255, 255, 0.2);
  transform: translateY(-50%) scale(1.1);
  border-color: rgba(255, 255, 255, 0.6);
}

.left-btn  { left:  clamp(6px, 2vw, 20px); }
.right-btn { right: clamp(6px, 2vw, 20px); }

/* ============================================
   MODAL TITLE
   ============================================ */
.modal-content h3 {
  margin: clamp(8px, 2vw, 16px) 0 clamp(14px, 3vw, 32px);
  font-size: clamp(1rem, 4vw, 1.8rem);
  font-weight: 800;
  text-align: center;
  color: white;
  overflow-wrap: break-word;
  word-break: break-word;
  padding-right: 48px;
  padding-left: 8px;
}

/* ============================================
   FORM ELEMENTS
   ============================================ */
#genderSelect,
#sizeSelect,
#quantityInput {
  display: block;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  margin: clamp(8px, 2vw, 16px) 0;
  padding: clamp(11px, 2vw, 16px) clamp(12px, 2.5vw, 20px);
  /* >= 16px prevents iOS Safari from auto-zooming
     the viewport on focus, which causes a horizontal scroll */
  font-size: max(1rem, 16px);
  border-radius: var(--radius-sm);
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(0, 0, 0, 0.5);
  color: white;
  backdrop-filter: blur(10px);
  outline: none;
  transition: border-color 0.3s ease, background 0.3s ease, box-shadow 0.3s ease;
  font-family: 'Inter', sans-serif;
}

#genderSelect:focus,
#sizeSelect:focus,
#quantityInput:focus {
  border-color: rgba(255, 255, 255, 0.5);
  background: rgba(0, 0, 0, 0.7);
  box-shadow: 0 0 20px rgba(255, 255, 255, 0.1);
}

#genderSelect option,
#sizeSelect option { background: #1a1a1a; color: white; }

#genderSelect,
#sizeSelect {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg fill='%23ffffff' height='20' viewBox='0 0 24 24' width='20' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/></svg>");
  background-repeat: no-repeat;
  background-position: right clamp(12px, 2.5vw, 20px) center;
  background-color: rgba(0, 0, 0, 0.5);
  background-size: 18px;
  cursor: pointer;
  padding-right: clamp(36px, 7vw, 48px);
}

.modal-content label {
  display: block;
  font-size: clamp(0.875rem, 2vw, 1rem);
  margin-top: clamp(12px, 2.5vw, 20px);
  margin-bottom: clamp(4px, 1vw, 10px);
  color: rgba(255, 255, 255, 0.9);
  font-weight: 600;
}

.modal-content label strong { color: #ffffff; }

/* ============================================
   BUTTON ROW
   ============================================ */
.button-row {
  margin-top: clamp(18px, 4vw, 36px);
  display: flex;
  flex-direction: column;
  gap: clamp(10px, 2vw, 20px);
}

/* ============================================
   ADD TO CART BUTTON
   ============================================ */
#addCartBtn {
  background: rgba(255, 255, 255, 0.9);
  color: #000000;
  font-weight: 800;
  width: 100%;
  padding: clamp(11px, 2.5vw, 18px);
  font-size: clamp(0.875rem, 2.5vw, 1.1rem);
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
  font-family: 'Plus Jakarta Sans', sans-serif;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  touch-action: manipulation;
}

#addCartBtn:hover {
  background: #ffffff;
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
}

#addCartBtn:active { transform: translateY(0) scale(1); }

/* ============================================
   SHARE BUTTON
   ============================================ */
#shirt-shareBtn {
  background: var(--blue-accent-bg);
  color: var(--blue-accent);
  width: 100%;
  padding: clamp(11px, 2.5vw, 18px);
  font-size: clamp(0.875rem, 2.5vw, 1.1rem);
  border: 1px solid var(--blue-accent-bd);
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-weight: 700;
  backdrop-filter: blur(12px);
  transition:
    background 0.3s ease, transform 0.3s ease,
    border-color 0.3s ease, box-shadow 0.3s ease, color 0.3s ease;
  font-family: 'Plus Jakarta Sans', sans-serif;
  text-transform: uppercase;
  touch-action: manipulation;
}

#shirt-shareBtn:hover {
  background: rgba(77, 158, 255, 0.3);
  transform: translateY(-3px) scale(1.02);
  border-color: rgba(77, 158, 255, 0.7);
  box-shadow: 0 8px 25px rgba(77, 158, 255, 0.2);
  color: white;
}

/* ============================================
   IMAGE ZOOM
   ============================================ */
#shirt-modal-img {
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), filter 0.35s ease;
  cursor: zoom-in;
}

#shirt-modal-img:hover       { transform: scale(1.9);  filter: brightness(1.1);  cursor: zoom-out; }
#shirt-modal-img.clicked      { transform: scale(2.3);  filter: brightness(1.15); cursor: zoom-out; }
#shirt-modal-img.clicked:hover{ transform: scale(2.3); }

/* ============================================
   SHARE POPUP
   Same containment rules as .modal
   ============================================ */
.shirt-share-popup {
  position: fixed;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  display: none;
  justify-content: center;
  align-items: flex-start;
  overflow: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  backdrop-filter: blur(15px);
  background: var(--overlay-bg);
  z-index: 10001;
  padding: clamp(12px, 4vw, 24px);
}

.shirt-share-popup.is-open { display: flex; }

.shirt-share-content {
  background: rgba(0, 0, 0, 0.9);
  padding: clamp(20px, 4vw, 48px) clamp(16px, 4vw, 40px);
  border-radius: var(--radius-lg);
  text-align: center;
  width: min(100%, 500px);
  max-width: 100%;
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(25px);
  animation: shirtPopIn 0.4s cubic-bezier(0.4, 0, 0.2, 1) both;
  margin: auto;
  overflow: hidden;
}

@keyframes shirtPopIn {
  from { opacity: 0; transform: scale(0.92) translateY(20px); }
  to   { opacity: 1; transform: scale(1)    translateY(0);    }
}

.shirt-share-close {
  float: right;
  cursor: pointer;
  font-size: 26px;
  color: var(--text-muted);
  transition: all 0.3s ease;
  width: 40px; height: 40px; min-width: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  touch-action: manipulation;
}

.shirt-share-close:hover {
  color: white;
  background: rgba(255, 255, 255, 0.2);
  transform: rotate(90deg);
}

.shirt-share-content h3 {
  font-size: clamp(1rem, 4vw, 1.8rem);
  margin: clamp(14px, 4vw, 30px) 0 clamp(18px, 4vw, 35px);
  color: white;
  font-weight: 800;
  clear: both;
  overflow-wrap: break-word;
}

/* ============================================
   SHARE ICONS GRID
   ============================================ */
.shirt-share-icons {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(60px, 100%), 80px));
  gap: clamp(14px, 3vw, 30px);
  justify-content: center;
  margin-top: clamp(18px, 4vw, 35px);
}

.shirt-share-icons a {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  transition: all 0.3s ease;
  gap: 8px;
  touch-action: manipulation;
  min-width: 0;
}

.shirt-share-icons img {
  width: clamp(40px, 8vw, 55px);
  height: clamp(40px, 8vw, 55px);
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.4));
  transition: transform 0.3s ease, filter 0.3s ease;
  border-radius: 50%;
  display: block;
}

.shirt-share-icons span {
  font-size: clamp(0.6rem, 2vw, 0.8rem);
  color: var(--text-muted);
  font-weight: 500;
}

.shirt-share-icons a:hover img {
  transform: translateY(-8px) scale(1.12);
  filter: drop-shadow(0 8px 20px rgba(255, 255, 255, 0.3));
}

.shirt-share-icons a:hover span { color: #ffffff; }

/* ============================================
   SCROLL TO TOP BUTTON
   ============================================ */
#scrollToTopMainBtn {
  position: fixed;
  bottom: clamp(14px, 4vw, 30px);
  right:  clamp(14px, 4vw, 30px);
  width:  clamp(44px, 8vw, 50px);
  height: clamp(44px, 8vw, 50px);
  border-radius: 50%;
  background: var(--red-primary);
  color: white;
  border: 2px solid rgba(255, 255, 255, 0.5);
  cursor: pointer;
  font-size: clamp(16px, 4vw, 24px);
  font-weight: bold;
  transition: transform 0.3s ease, background 0.3s ease, box-shadow 0.3s ease;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
  touch-action: manipulation;
}

#scrollToTopMainBtn:hover {
  transform: translateY(-5px) scale(1.1);
  background: var(--red-dark);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4);
}

/* ============================================
   UTILITY
   ============================================ */
.hidden { display: none !important; }

/* ============================================
   RESPONSIVE BREAKPOINTS
   ============================================ */

@media (min-width: 1400px) {
  .shirt-grid { grid-template-columns: repeat(4, 1fr); }
}

@media (max-width: 768px) {
  .shop-section { max-height: 70vh; }
  .shirt-grid   { grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr)); gap: 16px; }
  .modal-content{ padding: 20px; }
  .carousel-btn { font-size: 18px; }
}

@media (max-width: 640px) {
  .shirt-grid   { grid-template-columns: repeat(auto-fill, minmax(min(200px, 100%), 1fr)); gap: 12px; }
  .shirt-card   { padding: 14px; }
  .shirt-card h3{ font-size: 0.9rem; }
  .button-row   { gap: 10px; }
  #addCartBtn, #shirt-shareBtn { padding: 12px; font-size: 0.875rem; }
  .shirt-share-icons { grid-template-columns: repeat(3, 1fr); gap: 12px; }
}

@media (max-width: 480px) {
  .notice-container { padding: 10px; }
  .glass-card       { padding: 14px; }
  .glass-card p     { font-size: 0.875rem; }
  .shop-section     { max-height: 65vh; padding: 10px; }
  .shirt-grid       { grid-template-columns: 1fr; gap: 14px; }
  .shirt-card       { max-width: 320px; width: 100%; margin: 0 auto; }
  .modal-content    { padding: 14px; border-radius: 18px; width: 100%; }
  .carousel-btn     { font-size: 14px; width: 36px; height: 36px; min-width: 36px; min-height: 36px; }
  .shirt-share-icons{ grid-template-columns: repeat(2, 1fr); gap: 14px; }
}

@media (max-width: 360px) {
  .section-title    { font-size: 1.15rem; padding: 8px 12px; }
  .shirt-card h3    { font-size: 0.85rem; }
  .modal-content h3 { font-size: 0.95rem; padding-right: 44px; }
  .shirt-share-icons{ grid-template-columns: repeat(2, 1fr); gap: 10px; }
}

/* ============================================
   TOUCH DEVICE OPTIMIZATIONS
   ============================================ */
@media (hover: none) and (pointer: coarse) {
  .shirt-card:hover      { transform: none; background: rgba(0,0,0,0.6); border-color: var(--glass-border); box-shadow: none; }
  .shirt-card:active     { transform: scale(0.98); }
  .glass-card:hover      { transform: none; }
  .carousel-btn:hover    { transform: translateY(-50%); background: rgba(0,0,0,0.7); border-color: rgba(255,255,255,0.3); }
  .carousel-btn:active   { transform: translateY(-50%) scale(0.93); }
  #addCartBtn:hover,
  #shirt-shareBtn:hover  { transform: none; }
  #addCartBtn:active,
  #shirt-shareBtn:active { transform: scale(0.97); }
  #shirt-modal-img:hover { transform: none; cursor: default; }
  #shirt-modal-img.clicked { transform: scale(1.6); }
}

/* ============================================
   HIGH DPI / RETINA
   ============================================ */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .glass-card, .modal-content, .shirt-share-content { border-width: 0.5px; }
}

/* ============================================
   REDUCED MOTION (Accessibility)
   ============================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration:        0.01ms !important;
    animation-iteration-count: 1      !important;
    transition-duration:       0.01ms !important;
  }
}