:root{
  --brand-1:#0f52ba;
  --brand-2:#1a237e;
  --ink:#111;
  --muted:#2f2f2f;
  --ctl-bg:#eef1f3;

  --radius:12px;
  --h:44px;
  --w:200px;
  --gap:16px;

  
  --ok:#1b5e20;           /* green for success */
  --ok-badge:#2e7d32;     /* darker green badge */
  --ok-badge-fg:#c8e6c9;  /* light green tick color */
  --danger:#b71c1c;       /* remove button color */
  --danger-2:#d32f2f;
}

/* Heavy extended font for title/price */
@font-face {
  font-family: 'HelveticaNeueExtended';
  src:
    url('HelveticaNeueLTPro-93BlackExtended.otf') format('opentype');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

.wrap{max-width:1100px; margin-inline:auto; padding:60px 24px 24px; font-family:Arial, sans-serif; color:var(--ink);}

/* ----- Layout ----- */
.product-layout{ display:flex; gap:28px; align-items:flex-start; }
.product-img{ flex:1; display:flex; }

/* MAIN PRODUCT IMAGE*/
.product-img a{
  display:block;
  width:100%;
  height:clamp(260px, 52vh, 520px);   
  border-radius:18px;
  overflow:hidden;
}
.product-img img{
  width:100%;
  height:100%;
  object-fit:cover;                  
  display:block;
  border-radius:0;
}

.product-actions{ flex:1; display:grid; gap:22px; }

/* ----- Header and price ----- */
.product-header h1,
.price-line { font-family:'HelveticaNeueExtended', Arial, sans-serif; font-weight:900; }
.product-header h1{ font-size:40px; margin:0 0 6px; line-height:1.05; }

.price-line{ font-size:32px; }
.price-line .price-old{ text-decoration: line-through; opacity:.65; margin-right:8px; }
.price-line .price-new{ color:#d32f2f; font-weight:900; }
.price-line .price-single{ font-weight:900; }

/* ----- Select (Weight/Size) ----- */
.field{ display:grid; gap:8px; }
.field label{ font-weight:800; }
.select-wrap{ position:relative; }
.select-wrap select{
  width:100%; padding:6px 28px 6px 0; border:none;
  border-bottom:2px solid transparent;
  border-image: linear-gradient(90deg,var(--brand-1),var(--brand-2)) 1;
  background:transparent; font-size:16px;
  appearance:none; -webkit-appearance:none; -moz-appearance:none; cursor:pointer;
}
.select-wrap select:focus{ outline:none; border-bottom-color:var(--brand-1); }
.select-wrap .chev{ position:absolute; right:0; top:50%; transform:translateY(-50%); pointer-events:none; color:#000; font-size:14px; }

/* ----- Qty + Add to Cart ----- */
.qty-block{ display:grid; gap:8px; }
.qty-block .label{ font-weight:800; }
.controls-row{ display:flex; gap:var(--gap); align-items:stretch; flex-wrap:nowrap; }

.qty{
  flex:0 0 var(--w); height:var(--h); border-radius:var(--radius); background:var(--ctl-bg);
  display:flex; align-items:center; justify-content:space-between; padding:0 12px;
}
.qty button{
  width:32px; height:32px; border:0; background:transparent; color:var(--brand-1);
  border-radius:50%; cursor:pointer; font-size:16px;
}
.qty button[disabled]{ opacity:.45; cursor:not-allowed; }
.qty .value{
  width:32px; height:32px; border-radius:50%; display:grid; place-items:center;
  background:var(--brand-1); color:#fff; font-weight:800; user-select:none;
}

.btn-cart{
  flex:1 1 auto; min-width:0; height:var(--h); border-radius:var(--radius); border:0;
  background:linear-gradient(135deg,var(--brand-1),var(--brand-2)); color:#fff; font-weight:800;
  padding:0 20px; white-space:nowrap; display:flex; align-items:center; justify-content:center;
  transition:transform .06s ease, filter .15s ease; text-decoration:none;
}
.btn-cart:hover{ filter:brightness(1.05); }
.btn-cart:active{ transform:translateY(1px); }

/* ----- Backup CTA ----- */
.backup p{ font-weight:800; margin:18px 0 10px; }
.backup-btn{
  width:100%; padding:14px 18px; border-radius:12px; border:none;
  background:#2f2f2f; color:#fff; font-weight:700; font-size:16px;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  cursor:pointer; transition:background .2s ease, transform .06s ease, filter .15s ease;
}
.backup-btn:hover{ background:#1e1e1e; filter:brightness(1.05); }
.backup-btn:focus-visible{ outline:3px solid color-mix(in srgb, var(--brand-1) 65%, white); outline-offset:3px; }
.backup-btn .left{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.backup-btn.is-confirmed{ background:var(--ok); }
.backup-btn.is-confirmed .fa-circle-check{ color:#a5d6a7; }

/* Inline backup preview (image + name) */
.backup-btn .backup-mini{
  display:inline-flex; align-items:center; gap:6px; margin-left:8px;
  background:rgba(255,255,255,.12); padding:2px 6px; border-radius:8px;
  max-width:260px; overflow:hidden;
}
.backup-btn .backup-mini img{
  width:28px; height:28px; object-fit:cover; border-radius:6px; flex:0 0 28px;
}
.backup-btn .backup-mini .name{
  font-size:14px; font-weight:600; color:#fff; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

/* Remove backup button */
.btn-remove-backup{
  height:var(--h);
  border-radius:12px;
  border:1px solid rgba(183,28,28,.4);
  background:#fff;
  color:var(--danger);
  font-weight:800;
  padding:0 14px;
  display:inline-flex; align-items:center; gap:8px;
  cursor:pointer;
  transition:transform .06s ease, box-shadow .15s ease, background .15s ease, color .15s ease, border-color .15s ease;
}
.btn-remove-backup:hover{
  background:rgba(211,47,47,.06);
  border-color:rgba(211,47,47,.7);
  color:var(--danger-2);
  box-shadow:0 2px 10px rgba(0,0,0,.08);
}
.btn-remove-backup:active{ transform:translateY(1px); }
.btn-remove-backup:focus-visible{ outline:3px solid color-mix(in srgb, var(--danger-2) 60%, white); outline-offset:3px; }

/* ----- Description ----- */
.product-desc{ margin:36px 0 0; padding:18px 0 0; border-top:1px solid rgba(0,0,0,.08); }
.product-desc h2{ font-size:22px; margin:0 0 10px; font-weight:800; }
.product-desc p{ margin:0 0 10px; line-height:1.55; }

/* ----- Related ----- */
.related{ margin:36px 0 0; }
.related h2{ font-size:26px; margin:0 0 16px; font-weight:800; }
.rel-grid{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:22px; }
.rel-card{ display:grid; gap:10px; }
.rel-card .thumb{ border-radius:18px; overflow:hidden; background:#ddd; aspect-ratio:4/3; }
.rel-card .thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.rel-title{ font-weight:700; }
.rel-price{ font-size:13px; color:#333; margin-top:-2px; }
.rel-card .btn{
  height:40px; border:0; border-radius:12px;
  background:linear-gradient(135deg,var(--brand-1),var(--brand-2));
  color:#fff; font-weight:700; display:flex; align-items:center; justify-content:center;
  cursor:pointer; transition:filter .15s ease, transform .06s ease; text-decoration:none;
}
.rel-card .btn:hover{ filter:brightness(1.05); }
.rel-card .btn:active{ transform:translateY(1px); }

/* ----- Modal (backup) ----- */
.mw-modal{ position:fixed; inset:0; display:none; }
.mw-modal[aria-hidden="false"]{ display:block; z-index:1000; }
.mw-modal-open{ overflow:hidden; }
.mw-modal__overlay{ position:absolute; inset:0; background:rgba(0,0,0,.5); cursor:pointer; }
.mw-modal__panel{
  position:relative; max-width:800px; margin:60px auto; background:#fff; border-radius:20px; overflow:hidden;
  display:flex; flex-direction:column;
}
.mw-modal__head{ padding:16px 18px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid rgba(0,0,0,.08); }
.mw-modal__head h3{ margin:0; font-weight:800; }
.mw-modal__close{ background:transparent; border:0; font-size:20px; cursor:pointer; }
.mw-modal__close:focus-visible{ outline:3px solid color-mix(in srgb, var(--brand-1) 60%, white); border-radius:8px; }
.mw-modal__body{ padding:16px 18px; }
.mw-modal__note{ background:#eef6ff; color:#0b3b7a; padding:10px 12px; border-radius:10px; margin-bottom:12px; }

/* backup list cards */
.mw-modal__list{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
.mw-backup-card{
  position:relative;
  display:flex; gap:12px; align-items:center;
  padding:12px;
  border-radius:12px;
  border:1px solid rgba(0,0,0,.08);
  background:#fafafa;
  cursor:pointer;
  transition: box-shadow .15s ease, transform .06s ease, background .15s ease, border-color .15s ease;
}
.mw-backup-card:hover{
  background:#fff;
  border-color: color-mix(in srgb, var(--brand-1) 40%, rgba(0,0,0,.12));
  box-shadow:0 6px 18px rgba(0,0,0,.12);
  transform: translateY(-2px);
}
.mw-backup-card__img{ width:64px; height:64px; border-radius:12px; overflow:hidden; flex:0 0 64px; background:#ddd; }
.mw-backup-card__img img{ width:100%; height:100%; object-fit:cover; display:block; }
.mw-backup-card__title{ font-weight:700; }

/* selected state + badge */
.mw-backup-card.is-selected{
  outline:3px solid var(--brand-1);
  background:#f0f6ff;
  border-color: var(--brand-1);
  box-shadow:0 8px 22px rgba(15,82,186,.22);
}
.mw-backup-card.is-selected::after{
  content: "\f058"; 
  font: var(--fa-font-solid);
  position:absolute; top:8px; right:8px;
  width:26px; height:26px; display:grid; place-items:center;
  border-radius:50%; background: var(--ok-badge); color: var(--ok-badge-fg);
  font-size:14px; line-height:1;
}

/* Modal footer buttons */
.mw-modal__foot{ padding:12px 18px; display:flex; gap:10px; justify-content:flex-end; border-top:1px solid rgba(0,0,0,.08); }
.btn-primary{
  height:40px; border:0; border-radius:12px; padding:0 16px; font-weight:800; color:#fff;
  background:linear-gradient(135deg,var(--brand-1),var(--brand-2)); cursor:pointer;
}
.btn-secondary{
  height:40px; border:1px solid rgba(0,0,0,.15); border-radius:12px; padding:0 16px; font-weight:700; background:#fff; cursor:pointer;
}

/* ----- Responsive ----- */
@media (max-width: 768px){
  .product-layout{ flex-direction:column; }
  .rel-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .mw-modal__list{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .backup-btn .backup-mini{ max-width: 100%; }
}
@media (max-width: 480px){
  .rel-grid{ grid-template-columns:1fr; }
  .mw-modal__list{ grid-template-columns:1fr; }
}

/* ===== Mobile scroll fix for modal ===== */

/* Make the modal use flex so the panel can size within the viewport */
.mw-modal[aria-hidden="false"]{
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Panel: cap its height to viewport, so the body can scroll inside */
@media (max-width: 768px){
  .mw-modal__panel{
    width: min(94vw, 560px);
    margin: 12px;                 /* small safe margin */
    max-height: 90vh;             /* <= key: limit total height */
    display: flex;                /* allow column layout to stretch */
    flex-direction: column;
    border-radius: 16px;
  }

  /* Head/foot: keep compact so more room for scrolling content */
  .mw-modal__head{ padding:12px 14px; }
  .mw-modal__foot{ padding:10px 14px; }

  /* Body: make THIS the scroll container */
  .mw-modal__body{
    padding:12px 14px;
    overflow: auto !important;             /* <= key: scroll here */
    -webkit-overflow-scrolling: touch;     /* iOS momentum */
    overscroll-behavior: contain;          /* avoid rubber-banding the page */
    max-height: calc(90vh - 12px - 12px - 44px - 44px);
    /* 90vh minus margins and approx head/foot heights (tweak if needed) */
  }

  /* Card grid: collapse columns for small screens */
  .mw-modal__list{ grid-template-columns: repeat(2, minmax(0, 1fr)); gap:12px; }
}

@media (max-width: 480px){
  .mw-modal__panel{
    width: calc(100vw - 20px);
    margin: 10px;
    max-height: 92vh;                       /* slightly taller on very small phones */
    border-radius: 14px;
  }
  .mw-modal__list{ grid-template-columns: 1fr; gap:10px; }
}

/* While the page is locked, still allow touch/scroll inside the modal */
.mw-modal-open{ overflow: hidden; }
.mw-modal__panel, .mw-modal__body{ touch-action: auto; }