/* =========================================================
   MCP — ZARA LOOKBOOK (scoped)
   Minimal fashion • whitespace • black/white • editorial
   ========================================================= */

.mcp-page{
  --zr-bg:#ffffff;
  --zr-card:#ffffff;
  --zr-ink:#0b0b0d;
  --zr-muted:#6b7280;
  --zr-line: rgba(0,0,0,.10);
  --zr-soft: rgba(0,0,0,.04);

  --zr-radius: 18px;
  --zr-radius-sm: 14px;
  --zr-shadow: 0 18px 60px rgba(0,0,0,.08);

  background: var(--zr-bg) !important;
  color: var(--zr-ink) !important;
  direction: rtl !important;
  text-align: right !important;

  font-family: ui-sans-serif, system-ui, -apple-system, "Helvetica Neue", Helvetica, Arial,
               "Noto Sans Arabic","Noto Kufi Arabic", sans-serif !important;
  -webkit-font-smoothing: antialiased;
  letter-spacing: .2px;
}

/* Reset local */
.mcp-page, .mcp-page *{ box-sizing:border-box; }
.mcp-page img{ max-width:100%; height:auto; display:block; }

/* Topbar: ultra discret (editorial) */
.mcp-topbar{
  background: transparent !important;
  border-bottom: 1px solid var(--zr-line) !important;
  padding: 10px 0 !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  color: var(--zr-muted) !important;
}
.mcp-topbar div{
  opacity: .95;
  text-transform: none;
}
@keyframes mcp-mq{
  0%{transform:translateX(20%);}
  100%{transform:translateX(-120%);}
}

/* Shell: lookbook spacing */
.mcp-shell{
  max-width: 1180px !important;
  margin: 0 auto !important;
  padding: 22px 14px 42px !important;
}

/* Hero layout: editorial grid */
.mcp-hero{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;

  display:grid !important;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr) !important;
  gap: 18px !important;
  align-items: start;
}

/* Cards: remove heavy boxes, keep subtle structure */
.mcp-media,
.mcp-info,
.mcp-section{
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* =========================
   MEDIA (lookbook visual)
   ========================= */
.mcp-media{ padding: 0 !important; }

.mcp-main{
  border:0 !important;
  background: transparent !important;
  border-radius: var(--zr-radius) !important;
  overflow:hidden !important;
}

/* Photo: big, clean, cinematic */
.mcp-main img{
  width:100% !important;
  aspect-ratio: 4 / 5 !important; /* lookbook ratio */
  object-fit: cover !important;
  border-radius: var(--zr-radius) !important;
  transition: transform .5s cubic-bezier(.2,.8,.2,1) !important;
}
.mcp-main img:hover{ transform: scale(1.02) !important; }

/* Gallery thumbs: minimal strip */
.mcp-gallery{ margin-top: 12px !important; }
.mcp-gallery-grid{
  display:flex !important;
  gap:10px !important;
  overflow-x:auto !important;
  padding: 2px 2px 10px !important;
  -webkit-overflow-scrolling:touch;
  scroll-snap-type: x mandatory !important;
}
.mcp-thumb{
  flex:0 0 auto !important;
  width: 92px !important;
  aspect-ratio: 3/4 !important;
  border-radius: 14px !important;
  border: 1px solid var(--zr-line) !important;
  background: var(--zr-soft) !important;
  opacity: .82 !important;
  cursor:pointer !important;
  scroll-snap-align:start !important;
  transition: opacity .18s ease, transform .22s ease, border-color .18s ease !important;
}
.mcp-thumb:hover{
  opacity:1 !important;
  transform: translateY(-2px) !important;
  border-color: rgba(0,0,0,.25) !important;
}
.mcp-thumb.is-active{
  opacity:1 !important;
  border-color: rgba(0,0,0,.55) !important;
}

/* Minimal scrollbar */
.mcp-gallery-grid::-webkit-scrollbar{ height:6px; }
.mcp-gallery-grid::-webkit-scrollbar-thumb{ background: rgba(0,0,0,.20); border-radius:999px; }
.mcp-gallery-grid::-webkit-scrollbar-track{ background: transparent; }

/* =========================
   INFO (editorial panel)
   ========================= */
.mcp-info{
  padding: 0 !important;
  display:flex !important;
  flex-direction:column !important;
  gap: 12px !important;
}

/* Pill: transform into subtle editorial label */
.mcp-pill{
  background: transparent !important;
  border: 0 !important;
  color: var(--zr-muted) !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  padding: 0 !important;
  border-radius: 0 !important;
  letter-spacing: .8px;
  text-transform: uppercase;
}
.mcp-pill::before{
  content:"— ";
  color: var(--zr-ink);
  opacity:.65;
}

/* Title: fashion headline */
.mcp-title{
  font-size: 34px !important;
  line-height: 1.08 !important;
  font-weight: 900 !important;
  margin: 0 !important;
  letter-spacing: -0.6px !important;
  text-transform: uppercase;
}
.mcp-sub{
  margin: 0 !important;
  font-size: 14px !important;
  color: var(--zr-muted) !important;
  line-height: 1.9 !important;
  max-width: 54ch;
}

/* Badges: ultra minimal (text only vibe) */
.mcp-badges{
  gap: 10px !important;
}
.mcp-badge{
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  border-radius: 0 !important;
  color: var(--zr-muted) !important;
  font-size: 12.5px !important;
}
.mcp-badge::before{
  content:"• ";
  color: var(--zr-ink);
  opacity:.6;
}

/* Price: clean editorial row */
.mcp-pricebox{
  padding: 14px 0 0 !important;
  border-top: 1px solid var(--zr-line) !important;
  gap: 10px !important;
}
.mcp-price{
  font-size: 28px !important;
  font-weight: 900 !important;
  color: var(--zr-ink) !important;
}
.mcp-old{
  font-size: 13px !important;
  color: var(--zr-muted) !important;
  text-decoration: line-through !important;
}
.mcp-offer{
  margin-inline-start:auto !important;
  background: transparent !important;
  border: 1px solid rgba(0,0,0,.22) !important;
  color: var(--zr-ink) !important;
  font-weight: 800 !important;
  font-size: 12px !important;
  padding: 6px 10px !important;
  border-radius: 999px !important;
}

/* USP: make it a neat list */
.mcp-usps{
  margin-top: 4px !important;
  grid-template-columns: 1fr !important;
  gap: 10px !important;
}
@media (min-width: 980px){
  .mcp-usps{ grid-template-columns: 1fr 1fr !important; }
}
.mcp-usp{
  background: transparent !important;
  border: 1px solid var(--zr-line) !important;
  border-radius: 14px !important;
  padding: 10px 12px !important;
  color: var(--zr-ink) !important;
  font-size: 13px !important;
}
.mcp-usp i{ opacity:.8; }

/* =========================
   FORM (lookbook checkout panel)
   ========================= */
.mcp-formcard{
  margin-top: 14px !important;
  background: #fff !important;
  border: 1px solid var(--zr-line) !important;
  border-radius: var(--zr-radius) !important;
  padding: 14px !important;
  box-shadow: var(--zr-shadow) !important;
}
.mcp-formcard:before{ display:none !important; }

.mcp-formtitle{
  font-size: 13px !important;
  font-weight: 900 !important;
  letter-spacing:.9px;
  text-transform: uppercase;
}
.mcp-formsub{
  color: var(--zr-muted) !important;
  font-size: 13px !important;
}

/* Fields: fashion minimal */
.mcp-field .mcp-ico{
  left: 12px !important;
  right:auto !important;
  background: transparent !important;
  border: 1px solid var(--zr-line) !important;
  color: var(--zr-ink) !important;
  border-radius: 12px !important;
}
.mcp-field input,
.mcp-field select{
  background:#fff !important;
  border:1px solid var(--zr-line) !important;
  border-radius: 16px !important;
  padding-left: 52px !important;
  padding-right: 12px !important;
  color: var(--zr-ink) !important;
  transition: box-shadow .2s ease, border-color .2s ease !important;
}
.mcp-field input:focus,
.mcp-field select:focus{
  outline:none !important;
  border-color: rgba(0,0,0,.42) !important;
  box-shadow: 0 0 0 4px rgba(0,0,0,.08) !important;
}

/* Delivery: simple segmented chips */
.mcp-delivery__opt{
  background:#fff !important;
  border:1px solid var(--zr-line) !important;
  border-radius: 16px !important;
  color: var(--zr-ink) !important;
}
.mcp-delivery__opt:hover{
  border-color: rgba(0,0,0,.28) !important;
}
.mcp-delivery__opt:has(input:checked){
  background:#0b0b0d !important;
  border-color:#0b0b0d !important;
  color:#fff !important;
}
.mcp-delivery__opt:has(input:checked)::after{
  border-color:#fff !important;
  background:#fff !important;
}

/* Qty: fashion minimal */
.mcp-qty .mcp-qtybox{
  background:#fff !important;
  border:1px solid var(--zr-line) !important;
  border-radius: 16px !important;
}
.mcp-qty .mcp-qtybtn{
  background: transparent !important;
  border:1px solid var(--zr-line) !important;
  border-radius: 14px !important;
  font-weight: 950 !important;
}
.mcp-qty .mcp-qtybtn:hover{
  border-color: rgba(0,0,0,.28) !important;
}

/* CTA: ZARA black button */
.mcp-btn{
  border-radius: 999px !important;
  padding: 14px 16px !important;
  font-size: 14px !important;
  font-weight: 950 !important;
  background: #0b0b0d !important;
  color: #fff !important;
  border: 1px solid #0b0b0d !important;
  box-shadow: 0 18px 55px rgba(0,0,0,.22) !important;
  letter-spacing: .6px;
  text-transform: uppercase;
}
.mcp-btn:hover{
  transform: translateY(-2px) !important;
  box-shadow: 0 24px 70px rgba(0,0,0,.26) !important;
}
.mcp-btn small{
  opacity:.85 !important;
  font-weight: 800 !important;
}

/* Sections bottom: editorial blocks */
.mcp-section{
  margin-top: 18px !important;
  padding: 0 !important;
}
.mcp-section h2{
  margin: 0 0 10px !important;
  font-size: 14px !important;
  font-weight: 950 !important;
  letter-spacing:.9px;
  text-transform: uppercase;
}
.mcp-text{
  color: var(--zr-muted) !important;
  line-height: 2.0 !important;
}

/* Steps: clean columns */
.mcp-step{
  background: transparent !important;
  border: 1px solid var(--zr-line) !important;
  border-radius: 16px !important;
  padding: 12px !important;
}
.mcp-step b{
  font-weight: 950 !important;
  letter-spacing:.6px;
  text-transform: uppercase;
}

/* Lightbox */
.mcp-lightbox{ background: rgba(0,0,0,.85) !important; }
.mcp-lightbox-inner img{ border-radius: 22px !important; }

/* Responsive */
@media (max-width: 980px){
  .mcp-hero{ grid-template-columns: 1fr !important; }
  .mcp-title{ font-size: 26px !important; }
  .mcp-main img{ aspect-ratio: 4/5 !important; }
}
@media (max-width: 640px){
  .mcp-shell{ padding: 16px 10px 30px !important; }
  .mcp-thumb{ width: 82px !important; }
  .mcp-form .mcp-row-2{ grid-template-columns: 1fr !important; }
  .mcp-field input, .mcp-field select{ font-size:16px !important; } /* anti-zoom iOS */
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce){
  .mcp-main img, .mcp-thumb, .mcp-btn{ transition:none !important; }
  .mcp-topbar div{ animation:none !important; }
}