:root{
    --c-text:#111827; --c-muted:#6b7280; --c-bg:#ffffff; --c-border:#e5e7eb;
    --c-primary:#1b6698; --c-primary-ink:#ffffff;
    --c-accent:#f59e0b; --c-accent-ink:#111827;
    --c-danger:#dc2626; --c-danger-ink:#ffffff;

    --c-primary-rgb:27,102,152;
    --c-accent-rgb:245,158,11;
    --c-danger-rgb:220,38,38;
    --c-border-rgb:229,231,235;

    --btn-radius:10px; --btn-radius-pill:999px;
    --btn-shadow:0 1px 0 rgba(0,0,0,.04);
    --ring:0 0 0 3px rgba(27,102,152,.28);
    --ring-danger:0 0 0 3px rgba(220,38,38,.25);

    --btn-muted-bg:#fafafa; --btn-muted-hover:#f3f4f6;
  }
  @media (prefers-color-scheme: dark){
    :root{
      --c-text:#e5e7eb; --c-muted:#9ca3af; --c-bg:#0b0f14; --c-border:#1f2937;
      --btn-muted-bg:#0f141b; --btn-muted-hover:#131a22;
      --ring:0 0 0 3px rgba(27,102,152,.35);
    }
  }
  
  
  /* Amazon shop section - start */

  .amz-grid{display:block}
  @media (min-width:720px){.amz-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px} }

/* Card */
  .amz-card{
    display:flex; flex-direction:column; gap:10px;
    background:#fff; border:1px solid #ddd; border-radius:14px;
    padding:14px; margin:12px 0;
  }
  .amz-card *{ box-sizing:border-box; }

  /* Equal-height media box (4:3) – no CLS */
  .amz-media{
    position:relative; border-radius:10px; overflow:hidden; background:#eee;
    /* Progressive enhancement for modern browsers */
    aspect-ratio:4/3;
  }
  .amz-media::before{ content:""; display:block; padding-top:75%; } /* fallback */

  /* Make <picture> and <img> fill the box */
  .amz-media picture{ position:absolute; inset:0; display:block; width:100%; height:100%; }
  .amz-media img{
    position:absolute; inset:0; width:100%; height:100%;
    object-fit:cover; display:block;
  }

  .amz-title{margin:8px 0 4px;font-size:1.1rem;line-height:1.25}
  .amz-blurb{margin:0 0 6px;color:#444;line-height:1.4}

  .amz-buy{
    width:100%; display:flex; justify-content:space-between; align-items:center;
    padding:10px 12px; border:1px solid #cfcfcf; border-radius:10px; background:#f7f7f7; cursor:pointer;
  }
  .amz-buy:focus{ outline:2px solid #1b6698; outline-offset:2px; }
  .amz-caret{margin-left:8px}


  .amz-picker{display:none;margin-top:8px}
  .amz-picker.open{display:grid;gap:6px}
  .amz-store,.amz-search{
    display:flex; align-items:center; gap:8px;
    padding:10px 12px; border:1px solid #ddd; border-radius:10px;
    text-decoration:none; color:#111;
  }
  .amz-store .label{flex:1}
  .amz-search{margin-top:8px;font-weight:600;justify-content:center}


  .flag-img{width:20px;height:14px;display:inline-block;border-radius:2px;
    box-shadow:0 0 0 1px #d0d0d0 inset;overflow:hidden;flex:0 0 auto}
  .flag-img img{width:100%;height:100%;display:block;object-fit:cover}

.tabs-container {min-height:400px; width:100%; overflow:hidden; }
.tab-radio { display:none; }

.tab-labels { display:block; background:#fff; }

.tab-labels label {
  display:inline-block;
  padding:10px 24px;
  cursor:pointer;
  background:#1b6698; color:#fff;
  margin-right:-2px;
  border-radius:8px 8px 0 0;
  position:relative; top:2px; z-index:1;}

.tab-labels label:hover,
.tab-labels label:focus { background:#d0d7eb; color:#222; outline:2px solid #5689d4; z-index:2; }

#tab1:checked ~ .tab-labels #tab1-label,
#tab2:checked ~ .tab-labels #tab2-label,
#tab3:checked ~ .tab-labels #tab3-label,
#tab4:checked ~ .tab-labels #tab4-label,
#tab5:checked ~ .tab-labels #tab5-label { background:#6CF; color:#000; z-index:3; }

/* Panels */
.amz-tabs-content .amz-tab-content { display:none; padding:10px; background:#fff; }
#tab1:checked ~ .amz-tabs-content #content1,
#tab2:checked ~ .amz-tabs-content #content2,
#tab3:checked ~ .amz-tabs-content #content3,
#tab4:checked ~ .amz-tabs-content #content4,
#tab5:checked ~ .amz-tabs-content #content5 { display:block; }


/* ========= HORIZONTAL TABS — sizing tweaks ????? ========= */

/* Desktop / default This does not change the damn size of the amazon product section*/ 
.tab-labels label {
  display:inline-block;
  padding:10px 24px;
  font-size:16px;           /* add an explicit base */
  line-height:1.1;          /* keeps labels tight */
  cursor:pointer;
  background:#1b6698; color:#fff;
  margin-right:-2px;
  border-radius:8px 8px 0 0;
  position:relative; top:2px; z-index:1;
}


.padding-card {padding:20px 0;}


/* the section below changes the size of the amazon shop tabs */

@media (max-width:700px){
  .tab-labels label { padding:9px 12px; font-size:15px; }
  .amz-tabs-content .amz-tab-content { padding:14px 8px; font-size:15px; }
}

/* Tablet-ish  */
@media (max-width:600px){
  .tab-labels label { 
    font-size:14px; 
    padding:8px 14px; 
  }
  .amz-tabs-content .amz-tab-content { padding:14px 8px; font-size:15px; }
}

/* Small phones */
@media (max-width:500px){
  .tab-labels label { 
    font-size:12px; 
    padding:7px 10px; 
  }
}

/* Very small phones */
@media (max-width:450px){
  .tab-labels label { 
    font-size:11px; 
    padding:6px 8px; 
  }
}

@media (max-width:360px){
  .tab-labels{ overflow-x:auto; white-space:nowrap; -webkit-overflow-scrolling:touch; }
  .tab-labels label{ display:inline-block; }
}

/* end of horitzontal tabs area */
/* end of Amazon shop section from main css file */



  .btn{
    -webkit-tap-highlight-color: transparent;
    display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
    padding:.56rem .9rem;
    font:500 0.95rem/1.2 system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
    color:var(--c-text); text-decoration:none; user-select:none; cursor:pointer;
    background:var(--btn-muted-bg); border:1px solid var(--c-border); border-radius:var(--btn-radius);
    box-shadow:var(--btn-shadow);
    transition:transform .06s ease, background-color .12s ease, border-color .12s ease, opacity .12s ease;
  }
  .btn:hover{ background:var(--btn-muted-hover); }
  .btn:active{ transform:translateY(1px); }
  .btn:focus-visible{ outline:2px solid transparent; box-shadow:var(--btn-shadow), var(--ring); }
  .btn[disabled], .btn[aria-disabled="true"]{ opacity:.55; pointer-events:none; }
  .btn--sm{ padding:.38rem .7rem; font-size:.9rem; }
  .btn--lg{ padding:.7rem 1rem; font-size:1.05rem; }
  .btn--block{ display:flex; width:100%; }
  .btn--pill{ border-radius:var(--btn-radius-pill); }

  .btn--solid{ color:var(--c-primary-ink); background:var(--c-primary); border-color:transparent; }
  .btn--solid:hover {background:#099;}
  .btn--accent{ background:var(--c-accent); color:var(--c-accent-ink); }
  .btn--danger{ background:var(--c-danger); color:var(--c-danger-ink); }

  .btn--outline{ background:transparent; color:var(--c-text); }
  .btn--outline-primary{ color:var(--c-primary); border-color:rgba(var(--c-primary-rgb), .60); }
  .btn--outline-primary:hover{ background:rgba(var(--c-primary-rgb), .10); }

  .btn__icon{ width:1.1em; height:1.1em; display:inline-block; }
  .btn--icon{ padding:.5rem; min-width:2.25rem; }

  .btn[aria-busy="true"]{ pointer-events:none; opacity:.9; }
  .btn[aria-busy="true"] .btn__label{ opacity:0;}  
  .btn__spinner{
    width:1.1em; height:1.1em; border-radius:50%;
    border:2px solid currentColor; border-right-color:transparent;
    animation:btn-spin .7s linear infinite; display:none;
  }
  .btn[aria-busy="true"] .btn__spinner{ display:inline-block; }
  @keyframes btn-spin{ to{ transform:rotate(360deg); } }

  :root{ --b:#e5e7eb; --t:var(--c-text); --mut:var(--c-muted); --bg:var(--c-bg); --sh:0 10px 30px rgba(0,0,0,.12); }
/* added .wrap in again from max-width 1000 to 1260 

  .wrap{max-width:1260px;margin:0 auto; overflow:hidden;}
  
  
  */
  .amz-card{border:1px solid var(--b);border-radius:12px;padding:1rem 1.2rem;margin:.75rem 0;background:#fff}
  .title{font-weight:700;margin-bottom:.35rem}
  .muted{color:var(--mut)}
  .flex{display:flex;gap:.6rem;align-items:center}

  .amz-header{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:.5rem}
  .amz-header h1{margin:0;font-size:1.5rem}
  .amz-header-right{display:flex;gap:.5rem;align-items:center}


  #searchForm{display:flex;gap:.6rem;align-items:center;flex-wrap:nowrap}
  #category{flex:0 0 230px;padding:.6rem .75rem;border:1px solid var(--b);border-radius:10px}
  #q{flex:1 1 auto;min-width:240px;padding:.6rem .75rem;border:1px solid var(--b);border-radius:10px}
  #storeLine{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap;margin-top:.5rem}

  .amz-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}
  .amz-card{border:1px solid var(--b);border-radius:12px;padding:1rem;display:flex;flex-direction:column;gap:.5rem;background:#fff}
  .amz-card img{width:100%;height:auto;border-radius:10px;border:1px solid var(--b)}
  .amz-actions{display:flex;gap:.5rem;flex-wrap:wrap;width:100%;margin-bottom:30px;}

/* ---------- Visibility control (you use [hidden]) ---------- */
.amz-modal-backdrop[hidden],
.amz-modal[hidden] { display: none !important; }

/* ---------- Backdrop + shell ---------- */
.amz-modal-backdrop{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.38);
  z-index: 9998;
}

.amz-modal{
  position: fixed;
  inset: 0;
  display: flex;                 /* visible state */
  align-items: center;
  justify-content: center;
  padding: clamp(.75rem, 2vw, 1rem);
  z-index: 9999;
}


/* ---------- Panel ---------- */
.amz-modal-panel{
  max-width: 720px;
  width: 100%;
  display: flex;                 /* header fixed + body scroll */
  flex-direction: column;
  background: #fff;
  border-radius: 12px;
  border: 1px solid var(--b);
  box-shadow: 0 10px 30px rgba(0,0,0,.12);
  overflow: hidden;              /* keep rounded corners during scroll */
  /* cap height to dynamic viewport; never exceed screen */
  max-height: min(80dvh, calc(100dvh - 2 * clamp(.75rem, 2vw, 1rem)));
}

/* ---------- Header (always visible) ---------- */
.amz-modal-header{
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.2rem;          /* inner spacing so text doesn’t kiss edges */
  border-bottom: 1px solid rgba(0,0,0,.06);
  flex: 0 0 auto;                /* don’t shrink */
  position: sticky;              /* stays in view while body scrolls */
  top: 0;
  background: #fff;
  z-index: 1;
}

.amz-modal-header h2{
  margin: 0;
  font-size: 1.15rem;
}

/* ---------- Body (the only scroller) ---------- */
/* Match your class name; also support the old one if you use it elsewhere */
.modal-body,
.amz-modal-body{
  flex: 1 1 auto;
  min-height: 0;                 /* let it shrink inside flex column */
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding: 1rem 1.2rem;          /* restore inner padding */
}

/* Optional: style the inline close button if needed */
.btn.btn--outline.btn--icon{
  display: inline-grid;
  place-items: center;
  width: 2.25rem; height: 2.25rem;
  border-radius: 999px;
  border: 1px solid var(--b);
  background: #fff;
}

  .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
 
 /* drop down search in shop */
 
 .amz-select {
  display: inline-block;
  width: 100%;
  max-width: 320px;
  padding: 10px 12px;
  font-size: 16px;
  color: #333;
  background: linear-gradient(135deg, #f5f5ff 0%, #eceaff 100%);
  border: 2px solid #667eea;
  border-radius: 9px;
  box-shadow: 0 2px 8px rgba(102, 126, 234, 0.2);
  cursor: pointer;
  transition: all 0.3s ease;
  appearance: none; /* hides default arrow on most browsers */
  background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23667eea' stroke-width='2' fill='none'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 12px;
}

.amz-select:focus {
  outline: none;
  border-color: #764ba2;
  box-shadow: 0 0 8px rgba(118, 75, 162, 0.3);
  background: linear-gradient(135deg, #ffffff 0%, #f2efff 100%);
}

.amz-select option {
  color: #333;
}

 
 /* end drop down search in shop */
 
  
  @media (max-width: 800px){ .amz-grid{grid-template-columns:repeat(1,minmax(0,1fr));} }
  @media (max-width: 640px){
    #searchForm{flex-wrap:wrap}
    #category,#q,#go{flex:1 0 100%}
    #go{order:3}
    .amz-grid{grid-template-columns:1fr}
  }

  #dbg{position:fixed;right:.75rem;bottom:.75rem;z-index:9999;background:#0b1220;color:#e5e7eb;
       border:1px solid #1f2937;border-radius:10px;box-shadow:0 10px 30px rgba(0,0,0,.35);
       padding:.6rem .7rem;max-width:360px;font:12.5px ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;display:none}
  #dbg b{color:#93c5fd}
  #dbg .muted{color:#9ca3af}

@media (max-width: 600px) {
  .amz-select {
    max-width: 100%;
    padding: 8px 10px;
    font-size: 15px;
    border-radius: 20px;
    box-shadow: 0 1px 4px rgba(102, 126, 234, 0.15);
    background-position: right 10px center;
    background-size: 10px;
  }
}


  html.is-modal-open, body.is-modal-open{
    overflow: hidden;
    height: 100%;
  }