/* =========================================================
   SHOP STYLES (dropdown + product grid + modal)
========================================================= */

/* =========================
   Primary button
========================= */
.btn-primary{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 14px 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-decoration: none;
  background: #000;
  color: #fff;
  border: 1px solid #111;
  box-shadow: 2px 2px 0 rgba(0,0,0,0.25);
  text-transform: uppercase;
}
.btn-primary:hover{ filter: brightness(0.95); }

/* =========================
   Square embed box (if you ever use it again)
========================= */
.shop-embed{
  padding: 0;
  overflow: hidden;
}
.square-frame{
  width: 100%;
  height: min(78vh, 900px);
  border: 0;
  display: block;
}
@media (max-width: 600px){
  .square-frame{ height: 82vh; }
}

/* =========================
   Vendor dropdown (MySpace/classic)
========================= */
.shop-subnav{ padding: 0; }

.shop-subnav-row{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}

.shop-label{
  display:block;
  font-weight:700;
  font-size:13px;
  color:#333;
}

/* “classic” select styling */
.classic-select{
  width:100%;
  padding:6px 8px;
  font-family: Arial, Helvetica, sans-serif;
  font-size:13px;
  background:#fff;
  border:1px solid #7f9db9;
  border-radius:0;
  box-shadow:
    inset 1px 1px 0 #ffffff,
    inset -1px -1px 0 #9aaec2;
  appearance:none;
  -webkit-appearance:none;

  background-image:
    linear-gradient(45deg, transparent 50%, #333 50%),
    linear-gradient(135deg, #333 50%, transparent 50%);
  background-position:
    calc(100% - 16px) 55%,
    calc(100% - 11px) 55%;
  background-size:5px 5px;
  background-repeat:no-repeat;
}

@media(max-width:520px){
  .classic-select{ font-size:14px; }
}

/* select container rules */
.shop-select{
  font: inherit;
  max-width: 100%;
}

/* =========================
   Cart button in dropdown row
========================= */
.shop-cartbtn{
  width: auto;
  padding: 10px 12px;
  letter-spacing: 0.06em;
}

/* =========================
   Mobile: Vendor + Cart inline
========================= */
@media (max-width: 680px){

  .shop-subnav-row{
    flex-wrap: nowrap;        /* keep them on one line */
    align-items: center;
  }

  .shop-subnav-row .classic-select{
    flex: 1 1 auto;           /* allow shrinking */
    min-width: 0;             /* IMPORTANT: allow flex shrink */
    width: auto;              /* no full width */
  }

  .shop-cartbtn{
    flex: 0 0 auto;           /* don't stretch */
    width: auto;
    white-space: nowrap;      /* keep CART (2) on one line */
  }
}

/* Status text */
.shop-status{
  font-size: 13px;
  color: rgba(0,0,0,0.7);
}

/* =========================
   Product grid + cards
========================= */
.product-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
@media (max-width: 900px){
  .product-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px){
  .product-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }
  .prod{ padding: 8px; }
  .prod-name{ font-size: 12px; }
  .prod-price{ font-size: 12px; }
}

.prod{
  border: 1px solid rgba(0,0,0,0.22);
  border-right-color: rgba(0,0,0,0.35);
  border-bottom-color: rgba(0,0,0,0.35);
  background:#fff;
  padding:10px;
}

.prod-link{
  color: inherit;
  text-decoration: none;
  display: block;
}

/* button that wraps the “view” area */
.prod-view{
  border: 0;
  padding: 0;
  background: transparent;
  text-align: left;
  width: 100%;
  cursor: pointer;
}

.prod-link:hover .prod-name{
  text-decoration: underline;
}

.prod-img{
  aspect-ratio: 1 / 1;
  background: #f4f4f4;
  border: 1px solid rgba(0,0,0,0.15);
  display:grid;
  place-items:center;
  overflow:hidden;
}

.prod-img img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.prod-meta{
  margin-top:10px;
  display:grid;
  gap:6px;
}

.prod-name{
  font-weight:700;
  font-size:13px;
}

.prod-price{
  font-size:13px;
  color: rgba(0,0,0,0.7);
}

.prod-btn{
  font: inherit;
  font-weight:700;
  padding: 8px 10px;
  border-radius: 2px;
  border: 1px solid rgba(0,0,0,0.25);
  background: #eef3ff;
  box-shadow: 2px 2px 0 rgba(0,0,0,0.14);
  cursor:pointer;
}
.prod-btn:disabled{
  opacity:.6;
  cursor:not-allowed;
}

/* =========================
   Shared item typography (modal + item page)
========================= */
.item-name{
  font-weight: 800;
  font-size: 16px;
  margin: 0 0 6px;
}
.item-price{
  font-size: 14px;
  color: rgba(0,0,0,0.75);
  margin: 0 0 10px;
}
.item-desc{
  font-size: 13px;
  color: rgba(0,0,0,0.78);
  line-height: 1.6;
  margin: 0 0 12px;
}

.item-controls{
  display:flex;
  gap: 10px;
  align-items:center;
  flex-wrap: wrap;
}

.item-controls .btn-primary{
  width: auto;
  padding: 10px 12px;
  letter-spacing: 0.06em;
}

.item-back{
  width: auto;
  padding: 10px 12px;
  background: #e9e9e9;
  color: #000;
  border: 1px solid rgba(0,0,0,0.35);
  border-right-color: rgba(0,0,0,0.55);
  border-bottom-color: rgba(0,0,0,0.55);
  box-shadow: 2px 2px 0 rgba(0,0,0,0.14);
  text-decoration: none;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.item-back:hover{ filter: brightness(0.98); }

/* =========================
   Modal overlay (MySpace style) — UPDATED (taller on desktop)
========================= */
.item-modal{
  position: fixed;
  inset: 0;
  z-index: 2500;
}
.item-modal[hidden]{ display:none; }

.item-modal-backdrop{
  position:absolute;
  inset:0;
  background: rgba(0,0,0,0.45);
}

/* ✅ Bigger + taller modal on desktop */
.item-modal-card{
  position: relative;
  width: min(1100px, 94vw);
  height: 92vh;            /* ✅ fills more of screen */
  margin: 2vh auto;        /* ✅ less floating */
  overflow: hidden;        /* ✅ header stays, body scrolls */
  padding: 0;

  display: flex;           /* ✅ allow body to stretch */
  flex-direction: column;
}

/* header stays fixed at top of the modal */
.item-modal-head{
  display:flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: #f0f0f0;
  border-bottom: 1px solid rgba(0,0,0,0.14);
  font-weight: 800;
}

/* close button */
.item-modal-x{
  border: 1px solid rgba(0,0,0,0.35);
  border-right-color: rgba(0,0,0,0.55);
  border-bottom-color: rgba(0,0,0,0.55);
  background:#fff;
  box-shadow: 2px 2px 0 rgba(0,0,0,0.14);
  width: 34px;            /* slightly bigger */
  height: 34px;
  cursor:pointer;
  font-weight:900;
  line-height: 1;
}

/* ✅ modal body area stretches + scrolls */
.item-modal-card .item-grid{
  flex: 1;                          /* ✅ fills remaining height */
  overflow: auto;                   /* ✅ scroll only inside body */
  display:grid;
  grid-template-columns: 420px 1fr; /* ✅ bigger image column */
  gap: 22px;
  align-items: start;
  padding: 18px;
}

@media (max-width: 680px){
  .item-modal-card{
    height: 94vh;
    margin: 2vh auto;
    width: 94vw;
  }

  .item-modal-card .item-grid{
    grid-template-columns: 1fr;
    padding: 12px;
  }
}

/* media box around carousel */
.item-media{
  border: 1px solid rgba(0,0,0,0.22);
  border-right-color: rgba(0,0,0,0.35);
  border-bottom-color: rgba(0,0,0,0.35);
  background: #fff;
  padding: 10px; /* ✅ a bit more breathing room */
}

/* ✅ Make the modal image feel taller (not a small square) */
@media (min-width: 900px){
  .item-modal-card .prod-img{
    aspect-ratio: 4 / 5; /* ✅ taller fashion ratio */
  }
}

/* =========================
   MODAL CAROUSEL (FIXED NAV)
========================= */

#modalImgWrap{
  position: relative; /* anchor absolute buttons */
}

/* stage */
#modalImgWrap .img-stage{
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: #f4f4f4;
  border: 1px solid rgba(0,0,0,0.15);
  display: grid;
  place-items: center;
}

#modalImgWrap .img-stage img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display:block;
}

/* arrows — hard reset so they DON'T inherit big button styles */
#modalImgWrap .img-nav{
  all: unset;                 /* ✅ kills inherited button styles */
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 50;

  width: 34px !important;     /* ✅ override any global width rules */
  height: 34px !important;

  display: grid;
  place-items: center;

  background: rgba(255,255,255,0.92);
  border: 1px solid rgba(0,0,0,0.35);
  box-shadow: 2px 2px 0 rgba(0,0,0,0.14);

  font-weight: 900;
  font-size: 22px;
  line-height: 1;

  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

#modalImgWrap .img-nav.prev{ left: 10px; }
#modalImgWrap .img-nav.next{ right: 10px; }

/* dots */
#modalImgWrap .img-dots{
  display:flex;
  gap: 6px;
  justify-content:center;
  padding-top: 8px;
}

#modalImgWrap .img-dots .dot{
  all: unset;
  width: 10px;
  height: 10px;
  border: 1px solid rgba(0,0,0,0.35);
  background: #fff;
  box-shadow: 1px 1px 0 rgba(0,0,0,0.14);
  cursor: pointer;
}

#modalImgWrap .img-dots .dot.on{
  background: #f7b24a;
}

/* placeholder used if no image */
.ph{
  width: 100%;
  height: 100%;
}