@import url('https://fonts.googleapis.com/css2?family=Racing+Sans+One&display=swap');

/* ————— Basiskleuren / pagina ————— */
:root{
  --bg: #9bd4e4;     /* pagina-achtergrond */
  --panel: #fdfee9;  /* lichte panel-achtergrond */
  --ink: #042698;    /* blauwe tekst/border */
  --text: #0b1220;   /* algemene tekstkleur voor leesbaarheid */
}




html, body{
  background: var(--bg);
  color: var(--text);
  scroll-behavior: smooth;
}

main{
  margin-top: 8vw;
  margin-right: 20vw;


}
.page-title {
  margin: 0;
  padding-bottom: .3rem;
  font-size: clamp(2rem, 1.5rem + 2vw, 2.8rem);
  color: var(--ink);

  text-align: right;          /* tekst blijft rechts in het vak */
  width: fit-content;         /* 👉 blok krimpt tot de tekst + border */
  margin-left: auto;          /* duwt 'm naar rechts */
  margin-right: 10vw;         /* 👉 schuift het hele vak naar links */
}

/* zorg dat de grid direct tegen de title aansluit */
.grid {
  margin-top: 0;
}

/* bovenrand van het image-vak weghalen zodat de lijn van de title doorloopt */
.grid > section:first-child {
  border-top: none;
}

/* ————— Galerij vak (met PNG erin) ————— */
/* het 1e <section> in de grid is je galerij */



body {
  background: var(--bg);
  color: var(--text);
  font-family: system-ui, -apple-system, sans-serif;
  margin: 0;
  padding: 0;

  display: flex;
  justify-content: center;   /* horizontaal centreren */
  align-items: flex-start;   /* boven uitlijnen */
  min-height: 100vh;
}

.phone-page {
  display: block;
}

.sticky-product-summary{
  position:fixed;
  top:0;
  left:0;
  right:0;
  z-index:1100;
  background:rgba(253,254,233,.98);
  border-bottom:2px solid var(--ink);
  box-shadow:0 12px 28px rgba(4,38,152,.18);
  transform:translateY(-110%);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:transform .24s ease, opacity .2s ease, visibility 0s linear .24s;
}

.sticky-product-summary.is-visible{
  transform:translateY(0);
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transition:transform .24s ease, opacity .2s ease;
}

.sticky-product-summary__inner{
  box-sizing:border-box;
  width:min(1120px, calc(100% - 2rem));
  min-height:76px;
  margin:0 auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1.25rem;
  padding:.68rem 0;
}

.sticky-product-summary__copy{
  min-width:0;
  display:grid;
  gap:.28rem;
}

.sticky-product-summary__title{
  display:block;
  color:var(--ink);
  font-family:"Racing Sans One", system-ui, sans-serif;
  font-size:clamp(1.2rem, .92rem + 1vw, 2rem);
  font-weight:500;
  line-height:1;
}

.sticky-product-summary__meta{
  display:flex;
  flex-wrap:wrap;
  gap:.38rem;
  color:var(--text);
  font-size:.86rem;
  font-weight:800;
  line-height:1;
}

.sticky-product-summary__meta span{
  display:inline-flex;
  align-items:center;
  min-height:24px;
  border:1px solid rgba(4,38,152,.2);
  border-radius:999px;
  background:#fff;
  padding:.28rem .52rem;
}

.sticky-product-summary__action{
  flex:0 0 auto;
  display:grid;
  justify-items:end;
  gap:.34rem;
}

.sticky-product-summary__price{
  color:var(--ink);
  font-size:clamp(1.15rem, .96rem + .7vw, 1.6rem);
  font-weight:900;
  line-height:1;
}

.sticky-product-summary__button.primary{
  min-height:34px;
  width:auto;
  min-width:8.8rem;
  padding:.46rem .9rem;
  font-size:1rem;
}

.wrap {
  max-width: 1100px;
  width: 100%;
  margin-top: 10vw;  /* schuif de hele container iets naar beneden */
}

.mobile-model-head{
  display:none;
}

/* Desktop: schuif content iets naar rechts */
.phone-page .wrap {
  margin-left: 11vw;
  margin-right: auto;
  padding-bottom: 3rem; /* extra ruimte voor footer onder de view cart knop */
  margin-top: 6vw;
}

.phone-page footer{
  margin-top: 2rem;
}

.grid {
  display: grid;
  gap: 20px;
}
@media (min-width: 770px){
  .grid { 
    grid-template-columns: 1.1fr .9fr; 
    align-items: start;   /* zorgt dat beide secties bovenaan starten */
  }
}

/* FOTO-VAK (linker kolom) — één nette versie */
/* FOTO-VAK (linker kolom) — geen echte borders meer */
.grid > section:first-child{
  position: relative;
  z-index: 0;
  border: 0;
  border-radius: 16px 0 24px 16px; /* TL TR BR BL (BR extra rond) */
  padding: 16px;

  position: sticky;
  top: 20px;
  align-self: start;
  background: transparent; /* bg via ::after */
}

/* Achtergrond + alle randen in één, zodat de hoek perfect meegolft */
.grid > section:first-child::after{
  content:"";
  position:absolute;
  top:0; left:0; bottom:0;
  right:8vw;                      /* snij rechts in zoals je wilde */
  background: var(--panel);
  border-radius: inherit;
  z-index:-1;

  /* teken randen met inset shadows — volgen de border-radius exact */
  box-shadow:
    inset 4px 0 0 var(--ink),     /* links */
    inset 0 4px 0 var(--ink),     /* boven */
    inset 0 -4px 0 var(--ink);    /* onder (loopt tot waar right:8vw stopt) */
}

/* bovenlijn los verlengen naar rechts, maar start iets van links af */
.grid > section:first-child::before{
  content:"";
  position:absolute;
  top:0;
  left:16px;                  /* 👉 begin 16px vanaf links, niet helemaal links */
  right: -11vw;   /* 👉 laat 'm extra ver doorlopen naar rechts */
  height:4px;
  background: var(--ink);
  border-top-left-radius:0;   /* geen radius meer nodig, want we starten niet bij de hoek */
}

/* hoofdafbeelding zelf netjes binnen het vakje */
.mainimg{
  width: 100%;
  max-height: 620px;
  object-fit: contain;     /* PNG toont mooi met transparantie */
  object-position: center center;
  background: transparent; /* PNG mag z’n eigen transparantie gebruiken */
  display: block;
  margin: 0 auto;
}

.phone-gallery{
  position: relative;
}

.gallery-track{
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.gallery-track::-webkit-scrollbar{
  display: none;
}

.gallery-slide{
  min-width: 100%;
  scroll-snap-align: start;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.gallery-nav{
  position: absolute;
  top: 44%;
  transform: translateY(-50%);
  width: 38px;
  height: 38px;
  border-radius: 999px;
  border: 2px solid var(--ink);
  background: rgba(253, 254, 233, 0.9);
  color: var(--ink);
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 2;
}

.gallery-nav.prev{
  left: 9%;
}

.gallery-nav.next{
  right: 9%;
}

.gallery-dots{
  margin-top: 10px;
  display: flex;
  justify-content: center;
  gap: 8px;
}

.gallery-dot{
  width: 9px;
  height: 9px;
  border-radius: 999px;
  border: 1px solid var(--ink);
  background: rgba(4, 38, 152, 0.2);
  cursor: pointer;
  padding: 0;
}

.gallery-dot.is-active{
  background: var(--ink);
}

.gallery-thumbnails{
  margin-top:12px;
  padding:3px 2px 5px;
  display:flex;
  justify-content:safe center;
  gap:8px;
  overflow-x:auto;
  overscroll-behavior-x:contain;
  scrollbar-width:none;
}

.gallery-thumbnails::-webkit-scrollbar{
  display:none;
}

.phone-page .gallery-thumbnail{
  width:62px;
  height:62px;
  flex:0 0 62px;
  padding:4px;
  border:2px solid rgba(24, 58, 99, .2);
  border-radius:10px;
  background:rgba(255, 255, 255, .62);
  cursor:pointer;
  overflow:hidden;
}

.phone-page .gallery-thumbnail img{
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
}

.phone-page .gallery-thumbnail.is-active{
  border-color:#183a63;
  box-shadow:0 0 0 1px #183a63;
  background:#fff;
}

@media (max-width: 900px){
  .gallery-thumbnails{
    margin-top:9px;
    gap:6px;
  }

  .phone-page .gallery-thumbnail{
    width:50px;
    height:50px;
    flex-basis:50px;
    padding:3px;
    border-radius:8px;
  }
}


/* thumbnails netjes */
.thumbs{
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 10px;
}
.thumbs img{
  width: 70px; height: 88px; object-fit: cover;
  border-radius: 8px;
  border: 1px solid rgba(4,38,152,.25);
  opacity: .9; cursor: pointer;
  background: #fff0;
}
.thumbs img[aria-current="true"]{
  outline: 4px solid var(--ink);
  opacity: 1;
}

/* ————— Specificaties blok ————— */
/* Grote modelnaam boven de specificaties, in dezelfde inkt-kleur */
.specs-heading{
  color: var(--ink);
  font-size: clamp(1.8rem, 1.2rem + 2vw, 2.4rem);
  margin: 20px 0 10px;
  line-height: 1.1;
}

.model-head-row{
  display: none;
}

.model-head-price{
  margin: 0;
  color: var(--ink);
  font-family: inherit;
  font-size: clamp(1.8rem, 1.2rem + 2vw, 2.4rem);
  font-weight: 700;
  line-height: 1.1;
  white-space: nowrap;
}

.variant-selector-form{
  margin: 0 0 1rem;
}

.variant-selector-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
}

.variant-selector-field{
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.variant-selector-label{
  color: var(--ink);
  font-weight: 700;
  font-size: 0.95rem;
}

.variant-selector-input{
  width: 100%;
  border: 2px solid var(--ink);
  border-radius: 12px;
  background: var(--panel);
  color: var(--text);
  padding: 0.8rem 0.95rem;
  font-size: 0.98rem;
}

.variant-selector-submit{
  margin-top: 10px;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: var(--panel);
  color: var(--ink);
  padding: 0.65rem 1rem;
  font-weight: 700;
}

@media (min-width: 901px){
  .model-head-row{
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    margin: 20px 0 10px;
  }

  .model-head-row .specs-heading{
    margin: 0;
  }

}

.specs-boxes {
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 80%;
  margin-left: -4vw;   /* 👉 schuift de hele stapel naar links */
  position: relative;
  z-index: 3;          /* boven de image-box */
  margin-top: 14px;
}
.specs-boxes:has(.info-popover[open]),
.specs-boxes:has(.info-popover:hover),
.specs-boxes:has(.info-popover:focus-within){
  z-index:1100;
}

.spec-box {
  background: var(--panel);          /* #fdfee9 */
  border: 4px solid var(--ink);      /* #042698 */
  border-radius: 24px;
  padding: 10px 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-sizing: border-box;
}
.spec-box--stack{
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}
.spec-box--with-info{
  display:grid;
  grid-template-columns:auto minmax(0, 1fr) auto;
  gap:10px;
  align-items:center;
  position:relative;
}
.spec-box--with-info:has(.info-popover[open]),
.spec-box--with-info:has(.info-popover:hover),
.spec-box--with-info:has(.info-popover:focus-within){
  z-index:1101;
}
.spec-box--with-info .spec-value{
  justify-self:end;
  text-align:right;
}
.spec-box--link{
  color:inherit;
  text-decoration:none;
  transition:transform .18s ease, background .18s ease;
}
.spec-box--link:hover,
.spec-box--link:focus-visible{
  background:#fff;
  transform:translateY(-1px);
}
.spec-box--link:focus-visible{
  outline:3px solid rgba(4,38,152,.28);
  outline-offset:3px;
}

.spec-label {
  font-weight: 600;
  color: var(--ink);                 /* blauwe tekst */
}

.spec-value {
  color: var(--ink);
}
.spec-value.stock.ok {
  color: #15803d;
  font-weight: 700;
}
.spec-value.stock.error {
  color: #b91c1c;
  font-weight: 700;
}
.spec-value--nowrap{
  white-space: nowrap;
  font-size: .9rem;
}
.spec-info{
  font-size: 0.85rem;
  color: var(--ink);
}
.spec-info summary,
.info-popover summary{
  cursor: pointer;
  font-weight: 600;
}
.spec-info ul{
  margin: 0;
  padding-left: 18px;
}
.info-popover{
  position:relative;
  z-index:1;
}
.info-popover[open],
.info-popover:hover,
.info-popover:focus-within{
  z-index:1001;
}
.info-popover summary{
  width:26px;
  height:26px;
  border:2px solid var(--ink);
  border-radius:50%;
  color:var(--ink);
  background:#eef3f9;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:.9rem;
  line-height:1;
  list-style:none;
  user-select:none;
}
.info-popover summary::-webkit-details-marker{
  display:none;
}
.info-popover-panel{
  display:none;
  position:absolute;
  top:calc(100% + 8px);
  right:0;
  width:min(320px, 72vw);
  padding:12px 14px;
  border:2px solid var(--ink);
  border-radius:14px;
  background:var(--panel);
  color:var(--ink);
  box-shadow:0 12px 28px rgba(4, 38, 152, .18);
  z-index:1002;
  font-size:.85rem;
  line-height:1.4;
  font-weight:400;
}
.info-popover[open] > .info-popover-panel,
.info-popover:hover > .info-popover-panel,
.info-popover:focus-within > .info-popover-panel{
  display:block;
}
.condition-popover-panel{
  width:min(440px, 82vw);
}
.condition-grade-tabs{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  margin-bottom:12px;
}
.condition-grade-tab{
  padding:4px 7px;
  border-radius:7px;
  color:#52657c;
  text-align:center;
  font-size:.78rem;
  font-weight:700;
  line-height:1.2;
  white-space:nowrap;
}
.condition-grade-tab.is-active{
  background:var(--ink);
  color:#fff;
  box-shadow:0 3px 8px rgba(4, 38, 152, .2);
}
.condition-grade-separator{
  color:rgba(24, 58, 99, .45);
  font-weight:700;
}
.condition-grade-copy p{
  margin:0;
}
.condition-grade-copy p + p{
  margin-top:9px;
}
.battery-options{
  margin:16px 0 20px;
  margin-left:-4vw;
  max-width:80%;
  padding:16px 20px;
  border:4px solid var(--ink);
  border-radius:24px;
  background:var(--panel);
  display:flex;
  flex-direction:column;
  gap:10px;
  position:relative;
  z-index:3;
}
.battery-options:has(.info-popover[open]),
.battery-options:has(.info-popover:hover),
.battery-options:has(.info-popover:focus-within){
  z-index:1000;
}
.battery-options-header{
  display:grid;
  grid-template-columns:auto minmax(0, 1fr) auto;
  align-items:center;
  gap:10px;
  margin:-6px -6px 0;
  position:relative;
}
.battery-options-header p{
  margin:0;
  color:var(--ink);
  font-weight:700;
}
.battery-options-header .info-popover{
  grid-column:3;
  flex:0 0 auto;
}
.battery-status-info{
  display:inline-flex;
  align-items:center;
  gap:8px;
  flex:0 0 auto;
}
.battery-status-label{
  color:#183a63;
  font-weight:400;
  font-size:1rem;
}
.specs-boxes--after-battery{
  margin-top: 0;
}
.included-box{
  margin-top: 10px;
}
.gallery-included-box{
  width:auto;
  max-width:none;
  margin:16px 0 0;
}
.product-accessories{
  margin: 16px 0 20px;
  margin-left: -4vw;
  max-width: 80%;
  padding: 14px 16px;
  border: 4px solid var(--ink);
  border-radius: 24px;
  background: var(--panel);
  color:#183a63;
  position: relative;
  z-index: 3;
}

.product-accessories-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.75rem;
  margin-bottom:.7rem;
}

.product-accessories-head p{
  margin:0;
  color:#183a63;
  font-weight:600;
}

.product-accessories-head span{
  color:var(--panel);
  border:1px solid var(--ink);
  border-radius:999px;
  background:var(--ink);
  padding:.18rem .55rem;
  font-size:.78rem;
  font-weight:700;
}

.product-accessory-grid{
  display:grid;
  grid-template-columns:repeat(5, minmax(0, 1fr));
  gap:.5rem;
}

.product-accessory-choice{
  position:relative;
  display:grid;
  grid-template-rows:96px auto;
  gap:.5rem;
  min-width:0;
  padding:0;
  border:none;
  border-radius:0;
  background:transparent;
  color:#183a63;
  text-align:center;
  cursor:pointer;
}

.product-accessory-choice input{
  position:absolute;
  top:.35rem;
  left:.35rem;
  accent-color:#183a63;
}

.product-accessory-choice img{
  width:auto;
  max-width:100%;
  height:96px;
  object-fit:contain;
  object-position:center;
  justify-self:center;
  border:2px solid var(--ink);
  border-radius:10px;
  padding:3px;
  color:#183a63;
  font:600 .68rem/1.18 system-ui, -apple-system, sans-serif;
}

.product-accessory-choice em{
  color:#183a63;
  font-style:normal;
  font-size:.72rem;
  font-weight:700;
  margin-top:.1rem;
}

.product-accessory-choice:has(input:checked){
  box-shadow:none;
}

.product-accessory-choice:has(input:checked) img{
  box-shadow:0 0 0 3px rgba(4,38,152,.14);
}

.product-accessory-none{
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  margin-top:.65rem;
  color:#183a63;
  font-size:.88rem;
  cursor:pointer;
}

.product-accessory-none input{
  accent-color:#183a63;
}
.product-detail-section{
  margin:36px 0 0;
  padding:24px;
  border:2px solid rgba(24,58,99,.24);
  border-radius:18px;
  background:linear-gradient(180deg, #f7fbff 0%, #eaf1f8 100%);
  color:#183a63;
  box-shadow:0 14px 32px rgba(24, 58, 99, .08);
}
.product-detail-head{
  display:flex;
  align-items:flex-end;
  justify-content:center;
  gap:16px;
  margin-bottom:18px;
  text-align:center;
}
.product-detail-head h2{
  margin:0;
  color:#183a63;
  font-family:"Racing Sans One", sans-serif;
  font-size:clamp(2.2rem, 1.55rem + 2.2vw, 3.8rem);
  font-weight:400;
  line-height:1;
}
.product-accessories--showcase{
  margin:0;
  margin-left:0;
  max-width:100%;
  padding:0;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
}
.product-accessories--showcase .product-accessories-head{
  margin-bottom:16px;
}
.product-accessories--showcase .product-accessories-head p{
  font-size:1.1rem;
  color:#183a63;
}
.product-accessories--showcase .product-accessory-grid{
  grid-template-columns:repeat(auto-fit, minmax(150px, 1fr));
  gap:18px;
}
.product-accessories--showcase .product-accessory-choice{
  grid-template-rows:280px minmax(2.4em, auto) auto;
  gap:10px;
  padding:0;
  border:0;
  border-radius:0;
  background:transparent;
  overflow:visible;
  transition:border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.product-accessories--showcase .product-accessory-choice:hover,
.product-accessories--showcase .product-accessory-choice:has(input:checked){
  box-shadow:none;
  transform:translateY(-1px);
}
.product-accessories--showcase .product-accessory-choice input{
  display:none;
}
.product-accessories--showcase .product-accessory-choice::after{
  content:"";
  position:absolute;
  top:10px;
  right:10px;
  width:22px;
  height:22px;
  border:2px solid var(--ink);
  border-radius:999px;
  background:#f7fbff;
  opacity:0;
  transform:scale(.85);
  transition:opacity .18s ease, transform .18s ease, background-color .18s ease;
  pointer-events:none;
}
.product-accessories--showcase .product-accessory-choice:has(input:checked)::after{
  opacity:1;
  transform:scale(1);
  background:var(--ink);
  box-shadow:inset 0 0 0 5px #f7fbff;
}
.product-accessories--showcase .product-accessory-choice img{
  width:auto;
  max-width:100%;
  height:280px;
  justify-self:center;
  border:2px solid var(--ink);
  border-radius:14px;
  padding:0;
  object-fit:contain;
  object-position:center;
}
.product-accessories--showcase .product-accessory-choice em{
  color:#183a63;
  font-size:.9rem;
  padding:0;
}
.product-accessories--showcase .product-accessory-choice strong{
  color:#183a63;
  font-size:.95rem;
  line-height:1.18;
  align-self:start;
}
.product-accessories--showcase .product-accessory-choice:has(input:checked) img{
  box-shadow:0 0 0 3px rgba(4,38,152,.16);
}
.product-accessories--showcase .product-accessory-none{
  margin-top:16px;
  padding:9px 12px;
  border:2px solid rgba(4,38,152,.2);
  border-radius:999px;
  background:#f7fbff;
}
.product-detail-grid{
  display:flex;
  flex-direction:column;
  gap:20px;
  margin-top:26px;
}
.product-detail-section .battery-options,
.product-detail-section .accordion,
.product-detail-section .refurbishment-details-mini,
.product-detail-section .btw-regeling-bar{
  margin:0;
  margin-left:0;
  max-width:100%;
  position:relative;
  z-index:1;
}
.product-detail-section .included-box{
  padding:18px 20px;
  border:2px solid rgba(4,38,152,.24);
  border-radius:16px;
  background:#f7fbff;
  box-shadow:0 10px 24px rgba(4,38,152,.08);
}
.product-detail-section .accordion{
  border:2px solid rgba(4,38,152,.24);
  border-radius:16px;
  background:#f7fbff;
  box-shadow:0 10px 24px rgba(4,38,152,.08);
}
.product-detail-section .refurbishment-details-mini{
  border:2px solid rgba(4,38,152,.24);
  border-radius:16px;
  background:#f7fbff;
  box-shadow:0 10px 24px rgba(4,38,152,.08);
}
.product-detail-section .accordion-summary{
  padding:16px 18px;
}
.product-detail-section .part-status-legend{
  padding:0 18px 14px;
}
.product-detail-section .accordion #techBoxes{
  padding:16px 18px 18px;
}
.product-detail-section .refurbishment-details-mini #techBoxes{
  padding:16px 18px 18px;
}
.battery-options p{
  margin:0;
  color:var(--ink);
  font-weight:600;
}
.battery-note{
  font-weight:400 !important;
}
.battery-extra{
  color:#c1121f;
  font-weight:400;
}
.battery-options .battery-extra{
  font-weight:400 !important;
}
.battery-choice{
  display:flex;
  gap:12px;
  align-items:center;
  font-size:0.95rem;
  padding:10px 12px;
  border-radius:16px;
  background:transparent;
  border:2px solid rgba(4,38,152,.25);
  transition:border-color .2s ease, background-color .2s ease;
}
.battery-choice-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:10px;
}
.battery-choice-grid .battery-choice{
  min-width:0;
  align-items:flex-start;
  cursor:pointer;
}
.battery-choice-grid .battery-choice span{
  display:flex;
  min-width:0;
  flex-direction:column;
  gap:3px;
  line-height:1.25;
}
.battery-choice-grid .battery-choice strong{
  color:inherit;
  font-size:.95rem;
}
.battery-choice-grid .battery-choice small{
  color:#52657c;
  font-size:.78rem;
}
.battery-choice-grid .battery-choice:has(input:checked){
  border-color:var(--ink);
  background:#e6eef9;
  box-shadow:0 0 0 1px var(--ink);
}
.battery-choice-grid .battery-choice.is-disabled{
  border-color:rgba(24, 58, 99, .15);
  background:#eef1f4;
  cursor:not-allowed;
  opacity:.58;
}
.battery-choice-grid .battery-choice.is-disabled input{
  cursor:not-allowed;
}
.battery-policy-info p{
  margin:0;
}
.battery-policy-info p + p{
  margin-top:9px;
}
.battery-policy-tabs{
  font-size:inherit;
}
.battery-policy-copy{
  font-size:inherit;
  font-weight:400;
}
.battery-options .battery-policy-copy p{
  font-size:inherit;
  font-weight:400;
}
.battery-options .battery-policy-copy strong{
  font-weight:800;
}
.battery-choice input{
  width:18px;
  height:18px;
  accent-color: var(--ink);
}
.battery-choice span{
  color:#242842;
  font-weight:400;
}
.battery-choice input:checked + span,
.battery-choice:hover span{
  font-weight:400;
}

.battery-choice:has(input:checked){
  border-color:var(--ink);
  background:#eef3f9;
}
.spec-value.stock.warn{
  color:#c26a00;
  font-weight:700;
}

@media (max-width: 900px){
  .sticky-product-summary__inner{
    width:calc(100% - 1rem);
    min-height:112px;
    display:grid;
    grid-template-columns:minmax(0, 1fr);
    align-items:start;
    gap:.58rem;
    padding:.72rem 0 .62rem;
  }

  .sticky-product-summary__copy{
    padding-right:5.5rem;
  }

  .sticky-product-summary__title{
    font-size:clamp(1rem, 4.8vw, 1.38rem);
  }

  .sticky-product-summary__meta{
    gap:.22rem;
    font-size:.68rem;
  }

  .sticky-product-summary__meta span{
    min-height:20px;
    padding:.2rem .36rem;
  }

  .sticky-product-summary__action{
    width:100%;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:.7rem;
  }

  .sticky-product-summary__price{
    font-size:1.16rem;
  }

  .sticky-product-summary__button.primary{
    min-width:6.8rem;
    min-height:30px;
    padding:.34rem .58rem;
    font-size:.9rem;
  }

  .battery-options{
    margin-left:0;
    max-width:100%;
    align-self:center;
  }
}

@media (max-width: 900px){
  .phone-page .wrap{
    margin-left: 0;
    padding-bottom: 2rem;
  }
}
/* “Specificaties” subtitel mag wat subtieler, blijft boven de tabel */
h3{
  margin: 14px 0 8px;
  color: var(--ink);
  font-weight: 700;
}


.swatches{
  display:flex;
  gap:16px;
  flex-wrap:wrap;
}

.swatch-item{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:4px;
}

.swatch{
  width:34px; height:34px;
  border-radius:50%;
  border:4px solid #042698;
  background:#ddd; /* fallback */
  cursor:pointer;
}

.swatch[aria-checked="true"]{
  outline:3px solid #183a63;
}

.swatch-label{
  font-size:14px;
  color:#042698;
  text-align:center;
}

.opt{
  border: 1px solid rgba(4,38,152,.35);
  padding: 8px 14px;
  border-radius: 10px;
  cursor: pointer;
  background: transparent;
  color: #042698;                 /* tekst duidelijk zichtbaar */
}
.opt:hover{ background: rgba(4,38,152,.06); }
.opt[aria-checked="true"]{
  outline: 4px solid var(--ink);
  background: rgba(4,38,152,.10);
}

/* ————— Prijs / voorraad ————— */
.price{
  font-size: 1.8rem; font-weight: 700; margin: .5rem 0;
  color: var(--ink);
}
.price .old{
  color: #b3261e; /* evt. rood voor oude prijs */
  text-decoration: line-through;
  font-size: 1rem; margin-left: .6rem;
}
.stock{ margin: .4rem 0; }
.stock.ok{ color: #0a7d28; }
.stock.no{ color: #b3261e; }

/* ————— CTA’s ————— */
button{
  border: 0; border-radius: 10px; padding: 14px 14px; font-weight: 700; cursor: pointer;
}
button.primary{ background: var(--ink); color: #fff; font-size: 1.12rem; }
button.primary.is-cart-button{
  border:2px solid #4338ca;
  background:#4f46e5;
  color:#fff;
}
button.primary.is-cart-button:hover{
  background:#4338ca;
}
button.buy{ background: #0bd46e; color: #072d1b; }
button:disabled{ opacity: .5; cursor: not-allowed; }
button.primary.is-unavailable,
button.primary.is-unavailable:hover{
  background:#8290a3;
  color:#eef3f9;
  opacity:.48;
  filter:grayscale(1);
  box-shadow:none;
  transform:none;
  cursor:not-allowed;
  pointer-events:none;
}

.view-cart-btn{
  margin-top: 12px;
  margin-left: -4vw;
  width: calc(80% + 4vw);
  border: 2px solid var(--ink);
  border-radius: 999px;
  padding: 11px 16px;
  background: var(--panel);
  color: var(--ink);
  font-weight: 600;
  font-size: 1.1rem;
  cursor: pointer;
  transition: background .2s, color .2s, transform .2s;
  position: relative;
  z-index: 3;
}
.view-cart-btn:hover{
  background: var(--ink);
  color: #fff;
  transform: translateY(-1px);
}

.btw-regeling-bar{
  margin: 10px 0 14px;
  border: 2px solid rgba(4,38,152,.28);
  border-radius: 12px;
  background: #eef4fb;
  padding: 8px 10px;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.btw-regeling-label{
  color: var(--ink);
  font-weight: 700;
  font-size: .88rem;
}

.btw-regeling-value{
  color: var(--ink);
  font-size: .82rem;
  opacity: .9;
  flex: 1 1 auto;
  min-width: 0;
  text-align: center;
  overflow-wrap: anywhere;
}

.btw-regeling-price{
  color: var(--ink);
  font-size: .8rem;
  font-weight: 600;
  white-space: nowrap;
  opacity: .9;
}
.klarna-message--product{
  width:80%;
  max-width:none;
  margin:10px 0 16px -4vw;
  display:flex;
  align-items:center;
  gap:12px;
  padding:10px 14px;
  border:4px solid var(--ink);
  border-radius:24px;
  background:var(--panel);
  color:var(--ink);
  box-sizing:border-box;
}
.klarna-message--product img{
  width:78px;
  height:auto;
  object-fit:contain;
}
.klarna-message--product p{
  margin:0;
  font-size:.82rem;
  line-height:1.35;
}
.klarna-message--product small{
  display:block;
  margin-top:2px;
  color:var(--ink);
  opacity:.72;
}




/* Accordion container */
.accordion {
  border: 4px solid var(--ink);            /* #042698 */
  border-radius: 14px;
  background: var(--panel);                 /* #fdfee9 */
  overflow: hidden;
  margin: 16px auto;

}
/* schuif ook de accordion-blokken naar links */
.accordion {
  margin-left: -4vw;   /* zelfde als specs-boxes */
  max-width: 80%;      /* idem: maak ze smaller */
  position: relative;
  z-index: 3;
  
}



/* Summary header (klikbare balk) */
.accordion-summary {
  list-style: none;                         /* verberg default marker */
  cursor: pointer;
  padding: 14px 16px;
  font-weight: 700;
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Verberg standaard disclosure triangle in sommige browsers */
.accordion > summary::-webkit-details-marker { display: none; }

/* Chevron */
.accordion-summary::after {
  content: "▶";
  transform: rotate(0deg);
  transition: transform .2s ease;
  font-size: 0.9rem;
  opacity: .9;
}

/* Gedraaid als open */
.accordion[open] .accordion-summary::after {
  transform: rotate(90deg);
}

/* Inhoud (waar je spec-boxes al in komen) */
.accordion #techBoxes {
  padding: 14px 16px 16px;
  /* spec-boxes hebben al eigen styling, dit voegt wat binnenmarge toe */
}

/* Optioneel: hover feedback */
.accordion-summary:hover {
  background: rgba(4, 38, 152, 0.06);
}

.refurbishment-details-mini {
  border: 4px solid var(--ink);
  border-radius: 14px;
  background: var(--panel);
  overflow: hidden;
  width: 100%;
  max-width: 100%;
  margin: 16px 0;
  position: relative;
  z-index: 3;
}

.product-quality-grid{
  margin:32px 0 0;
  display:grid;
  grid-template-columns:minmax(0, 1fr) minmax(0, 1fr);
  gap:20px;
  align-items:stretch;
}

.product-quality-grid .refurbishment-details-mini{
  margin:0;
}

.inspection-results-panel{
  min-width:0;
  border:2px solid rgba(24, 58, 99, 0.28);
  border-radius:14px;
  background:linear-gradient(180deg, #f7fbff 0%, #eaf1f8 100%);
  box-shadow:0 14px 32px rgba(9, 26, 52, 0.08);
  padding-bottom:16px;
  overflow:hidden;
  display:flex;
  flex-direction:column;
}

.phone-page .inspection-results-panel .inspection-strip{
  width:calc(100% - 28px);
  box-sizing:border-box;
  grid-auto-columns:104px;
  gap:14px;
  padding:16px 18px;
  margin: auto 14px 0;
  border:3px solid #183a63;
  border-radius:16px;
  clip-path:inset(0 round 16px);
  background:rgba(234, 241, 248, .72);
  scroll-snap-type:none;
  scroll-behavior:auto;
  scrollbar-width:none;
}

.phone-page .inspection-results-panel .inspection-strip::-webkit-scrollbar{
  display:none;
}

.inspection-scrollbar{
  position:relative;
  z-index:2;
  height:14px;
  margin:-17px 30px 3px;
  cursor:ew-resize;
  touch-action:none;
}

.inspection-scrollbar::before{
  content:"";
  position:absolute;
  top:6px;
  right:0;
  left:0;
  height:1px;
  border-radius:999px;
  background:rgba(0, 0, 0, .15);
}

.inspection-scrollbar__thumb{
  position:absolute;
  top:5px;
  left:0;
  width:12.5%;
  height:4px;
  border-radius:999px;
  background:#000;
}

.phone-page .inspection-results-panel .inspection-card{
  min-height:104px;
  padding:0;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
  align-items:center;
  justify-content:flex-start;
  gap:6px;
  scroll-snap-align:none;
}

.phone-page .inspection-results-panel .inspection-card__icon-image{
  width:66px;
  height:66px;
}

.phone-page .inspection-results-panel .inspection-card__label{
  position:static;
  width:100%;
  height:auto;
  padding:0;
  margin:0;
  overflow:visible;
  clip:auto;
  white-space:normal;
  border:0;
  color:#183a63;
  font-size:.68rem;
  font-weight:700;
  line-height:1.1;
  text-align:center;
  overflow-wrap:anywhere;
}

.phone-page .inspection-results-panel .inspection-report-placeholder{
  margin:auto 14px 0;
}

.refurbishment-details-title {
  scroll-margin-top: 24px;
  margin: 0;
  padding: 16px 16px 4px;
  color: var(--ink);
  font-family:"Racing Sans One", sans-serif;
  font-size: clamp(1.7rem, 1.35rem + 1vw, 2.35rem);
  font-weight: 400;
  line-height: 1;
  text-align: center;
}

.refurbishment-details-subtitle {
  max-width: 42rem;
  margin: 0 auto;
  padding: 0 16px 12px;
  color: var(--ink);
  font-size: .92rem;
  font-weight: 600;
  line-height: 1.35;
  text-align: center;
}

.options .opt.disabled,
.swatches .swatch.disabled {
  opacity: .4;
  pointer-events: none;
  filter: saturate(0.3);
}
.stock.ok{color:#0a7a0a;}
.stock.warn{color:#9a6b00;}
.stock.error{color:#c10015;}

/* Specs ín de accordion: niet overlappen, gewoon centreren */
.accordion .specs-boxes {
  margin-left: 0;        /* geen negatieve marge binnen accordion */
  max-width: 100%;       /* mag volledige breedte van accordion gebruiken */
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: center;   /* center de children horizontaal */
}

.accordion .spec-box {
  width: 85%;            /* iets smaller voor mooie margins */
  margin: 0 auto;        /* centreer de card in de accordion */
  min-width: 0;
}

/* Voorkom dat lange technische waarden buiten beeld vallen */
.accordion .spec-box{
  align-items: flex-start;
  gap: 10px;
}

.accordion .spec-box .spec-value{
  flex: 1 1 auto;
  min-width: 0;
  text-align: right;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.accordion .spec-box .spec-value--nowrap{
  white-space: normal;
}

.part-status-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:10px;
  padding:14px 16px 16px;
}

.part-status-legend{
  display:flex;
  flex-wrap:wrap;
  gap:8px 12px;
  padding:0 16px 12px;
  color:var(--ink);
  font-size:.82rem;
  line-height:1.2;
}

.part-status-legend span{
  display:inline-flex;
  align-items:center;
  gap:5px;
}

.part-status-legend img{
  width:20px;
  height:20px;
  object-fit:contain;
}

.part-status-row{
  min-width:0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  border:2px solid rgba(4,38,152,.24);
  border-radius:12px;
  background:rgba(255,255,255,.3);
  padding:8px 10px;
}

.part-status-label{
  min-width:0;
  color:var(--ink);
  font-weight:700;
  line-height:1.2;
  overflow-wrap:anywhere;
}

.part-status-icon{
  width:34px;
  height:34px;
  flex:0 0 34px;
  object-fit:contain;
  object-position:center;
}

.technical-spec-panel{
  margin:16px 0 18px;
  border:2px solid rgba(4,38,152,.24);
  border-radius:14px;
  background:#eaf1f8;
  padding:16px;
  color:var(--ink);
}

.technical-spec-panel__title{
  margin:0 0 12px;
  color:var(--ink);
  font-size:1rem;
  line-height:1.2;
}

.technical-spec-list{
  margin:0;
  display:grid;
  gap:10px;
}

.technical-spec-list div{
  display:grid;
  grid-template-columns:minmax(130px, .42fr) minmax(0, 1fr);
  gap:14px;
  align-items:start;
  padding-top:10px;
  border-top:1px solid rgba(4,38,152,.16);
}

.technical-spec-list div:first-child{
  padding-top:0;
  border-top:0;
}

.technical-spec-list dt{
  font-weight:700;
}

.technical-spec-list dd{
  margin:0;
  min-width:0;
  overflow-wrap:anywhere;
  text-align:right;
}

.technical-spec-panel--bottom{
  margin:0;
}

.inspection-report-placeholder{
  margin:0;
  border:2px dashed rgba(4,38,152,.32);
  border-radius:18px;
  background:#eaf1f8;
  color:var(--ink);
  padding:18px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
}

.inspection-report-placeholder h2{
  margin:0 0 6px;
  color:var(--ink);
  font-size:clamp(1.2rem, 1rem + .8vw, 1.7rem);
  line-height:1.15;
}

.inspection-report-placeholder p{
  margin:0;
  color:var(--ink);
}

.inspection-report-placeholder__badge{
  flex:0 0 auto;
  border:1px solid rgba(4,38,152,.3);
  border-radius:999px;
  background:#f7fbff;
  padding:.45rem .75rem;
  color:var(--ink);
  font-weight:700;
  white-space:nowrap;
  text-decoration:none;
}
.product-side-report{
  position:relative;
  margin-top:16px;
}

@media (min-width:770px){
  .product-side-report{
    grid-column:2;
  }
}

.tech-spec-section{
  margin:32px 0 0;
  border:2px solid rgba(4,38,152,.24);
  border-radius:18px;
  background:linear-gradient(180deg, #f7fbff 0%, #eaf1f8 100%);
  padding:18px;
  display:grid;
  gap:18px;
}

.tech-spec-section__heading{
  margin:0;
  color:var(--ink);
  font-family:"Racing Sans One", sans-serif;
  font-size:clamp(2.2rem, 1.55rem + 2.2vw, 3.8rem);
  font-weight:400;
  line-height:1;
}

.tech-spec-media{
  min-width:0;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:18px;
}

.tech-spec-media img{
  max-width:min(49%, 390px);
  max-height:620px;
  width:auto;
  height:auto;
  object-fit:contain;
}

.tech-spec-section--device-template .tech-spec-media img{
  width:auto;
  height:min(clamp(300px, 34vw, 500px), 100%);
  max-width:none;
  max-height:none;
  object-fit:contain;
}

.product-faq-section{
  margin:34px 0 42px;
  border:2px solid rgba(4,38,152,.22);
  border-radius:18px;
  background:#f7fbff;
  padding:22px;
  box-shadow:0 12px 28px rgba(9,26,52,.07);
}

.product-faq-head{
  margin:0 0 16px;
  text-align:center;
}

.product-faq-head h2{
  margin:0;
  color: #183a63;
  font-family:"Racing Sans One", sans-serif;
  font-size:clamp(2rem, 1.35rem + 2vw, 3.4rem);
  font-weight:400;
  line-height:1;
}

.product-faq-list{
  display:grid;
  gap:10px;
}

.product-faq-item{
  border:1px solid rgba(24,58,99,.2);
  border-radius:12px;
  background:#fff;
  overflow:hidden;
}

.product-faq-item summary{
  cursor:pointer;
  list-style:none;
  padding:15px 17px;
  color:#183a63;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  font-weight:800;
  line-height:1.25;
}

.product-faq-item summary::-webkit-details-marker{
  display:none;
}

.product-faq-item summary::after{
  content:"";
  flex:0 0 auto;
  width:.62rem;
  height:.62rem;
  margin-right:.18rem;
  border-right:2.5px solid #042698;
  border-bottom:2.5px solid #042698;
  transform:rotate(45deg) translateY(-2px);
  transform-origin:center;
  transition:transform .2s ease;
}

.product-faq-item[open] summary::after{
  transform:rotate(225deg) translate(-2px,-2px);
}

@media (max-width: 900px){
  .product-quality-grid{
    margin-top:16px;
    grid-template-columns:1fr;
    gap:12px;
  }

  .inspection-results-panel{
    border-width:2px;
    border-color:rgba(24, 58, 99, 0.28);
    border-radius:12px;
    background:#edf3fa;
    padding-bottom:10px;
  }

  .phone-page .inspection-results-panel .inspection-strip{
    width:calc(100% - 20px);
    grid-auto-columns:88px;
    gap:10px;
    margin-right:10px;
    margin-left:10px;
    padding:13px 14px;
    border-radius:13px;
    clip-path:inset(0 round 13px);
  }

  .phone-page .inspection-results-panel .inspection-card{
    min-height:90px;
    gap:5px;
  }

  .phone-page .inspection-results-panel .inspection-card__icon-image{
    width:54px;
    height:54px;
  }

  .phone-page .inspection-results-panel .inspection-card__label{
    font-size:.62rem;
    line-height:1.08;
  }

  .phone-page .inspection-results-panel .inspection-report-placeholder{
    margin:12px 10px 0;
  }
}

.product-faq-item p{
  margin:0;
  padding:0 17px 16px;
  color:#263955;
  line-height:1.58;
}

@media (min-width: 901px){
  .phone-page .product-quality-grid{
    grid-template-columns:minmax(0, 1.04fr) minmax(0, .96fr);
    align-items:stretch;
  }

  .phone-page .product-quality-grid .refurbishment-details-mini{
    grid-column:1;
    width:100%;
    min-width:0;
    box-sizing:border-box;
  }

  .phone-page .product-quality-grid .inspection-results-panel{
    grid-column:2;
    width:100%;
    min-width:0;
    box-sizing:border-box;
  }
}

.back-btn{
  position: fixed;                       /* altijd linksboven in viewport */
  top: calc(12px + env(safe-area-inset-top));
  left: calc(12px + env(safe-area-inset-left));
  z-index: 9999;                         /* boven alles */
  text-decoration: none;
  font-weight: 600;
  color: var(--ink);
  font-size: 0.95rem;
  padding: 6px 10px;
  border: 2px solid var(--ink);
  border-radius: 8px;
  background: var(--panel);
  box-shadow: 0 1px 4px rgba(0,0,0,.08);
  transition: background .2s;
}
.back-btn:hover{ background: rgba(4,38,152,.08); }

/* Desktop redesign (keep mobile untouched) */
@media (min-width: 901px){
  .phone-page{
    --d-card: #eef3f9;
    --d-card-soft: #f6f9fd;
    --d-ink: #183a63;
    --d-border: rgba(24, 58, 99, 0.28);
  }

  .phone-page main{
    margin: 0;
  }

  .phone-page .wrap{
    max-width: min(1380px, calc(100vw - 32px));
    margin: 28px auto 0;
    padding: 0 16px 4rem;
  }

  .phone-page .grid{
    grid-template-columns: minmax(0, 1.04fr) minmax(0, .96fr);
    gap: 24px;
    align-items: stretch;
  }

  .phone-page .grid > section:first-child,
  .phone-page .grid > section:nth-child(2){
    border: 2px solid var(--d-border);
    border-radius: 18px;
    background: linear-gradient(180deg, #f7fbff 0%, #eaf1f8 100%);
    box-shadow: 0 14px 32px rgba(9, 26, 52, 0.1);
  }

  .phone-page .grid > section:first-child{
    position:relative;
    top:auto;
    align-self:stretch;
    padding:22px;
    border:2px solid var(--d-border);
    border-radius:18px;
    background:linear-gradient(180deg, #f7fbff 0%, #eaf1f8 100%);
    box-shadow:0 14px 32px rgba(9, 26, 52, 0.1);
    display:flex;
    flex-direction:column;
    gap:0;
  }

  .phone-page .grid > section:first-child .phone-gallery{
    border:0;
    border-radius:0;
    background:transparent;
    box-shadow:none;
    padding:0;
  }

  .phone-page .grid > section:first-child .gallery-included-box{
    width:auto;
    max-width:none;
    margin:auto 0 0;
    padding:14px 16px;
    gap:6px;
    border:2px solid var(--d-border);
    border-radius:12px;
    background:rgba(247, 251, 255, .72);
    box-shadow:none;
  }

  .phone-page .grid > section:first-child .inspection-panel{
    margin-top:0;
    border-top:0;
    border-radius:0 0 18px 18px;
    box-shadow:0 14px 32px rgba(9, 26, 52, 0.08);
  }

  .phone-page .grid > section:nth-child(2){
    padding: 22px;
    display:flex;
    flex-direction:column;
    gap:16px;
  }

  .phone-page .grid > section:first-child::before,
  .phone-page .grid > section:first-child::after{
    content: none !important;
  }

  .phone-page .mainimg{
    width: 88%;
    max-height: 560px;
    margin: 0 auto;
  }

  .phone-page .gallery-nav{
    background: rgba(247, 249, 252, 0.92);
    border-color: var(--d-border);
    color: var(--d-ink);
  }

  .phone-page .gallery-nav.prev{ left: 6%; }
  .phone-page .gallery-nav.next{ right: 6%; }


  .phone-page .model-head-row{
    margin: 0;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    border-bottom: 2px solid rgba(24, 58, 99, 0.22);
    padding-bottom: 10px;
  }

  .phone-page .specs-heading,
  .phone-page .model-head-price{
    margin: 0;
    color: var(--d-ink);
    font-family: "Racing Sans One", sans-serif;
    font-size: clamp(2rem, 1.7rem + 1vw, 2.55rem);
    font-weight: 400;
    line-height: 1.05;
  }

  .phone-page .model-head-price{
    font-size: clamp(1.55rem, 1.35rem + .55vw, 2rem);
    white-space: nowrap;
    background: #d7e5f7;
    border: 1px solid rgba(24, 58, 99, 0.28);
    border-radius: 999px;
    padding: .22rem .66rem .27rem;
  }

  .phone-page .specs-boxes,
  .phone-page .battery-options,
  .phone-page .product-accessories,
  .phone-page .accordion,
  .phone-page .technical-spec-panel,
  .phone-page .variant-selector-form{
    max-width: 100%;
    margin-left: 0;
  }

  .phone-page .variant-selector-form{
    margin-bottom:0;
  }

  .phone-page .specs-boxes{
    gap: 12px;
    margin-top:0;
    margin-bottom:0;
  }

  .phone-page .spec-box{
    border: 2px solid rgba(24, 58, 99, 0.26);
    border-radius: 12px;
    background: var(--d-card);
    padding: 8px 10px;
  }

  .phone-page .spec-box--with-info{
    grid-template-columns:auto minmax(0, 1fr) auto;
  }

  .phone-page .spec-label{
    color: var(--d-ink);
    font-weight: 700;
  }

  .phone-page .spec-value,
  .phone-page .spec-info,
  .phone-page .spec-info summary,
  .phone-page .spec-info ul,
  .phone-page .spec-info li{
    color: var(--d-ink);
  }

  .phone-page .info-popover summary{
    border-color:rgba(24, 58, 99, .55);
    color:var(--d-ink);
    background:var(--d-card-soft);
  }

  .phone-page .info-popover-panel{
    border-color:rgba(24, 58, 99, .38);
    background:#f7fbff;
    color:var(--d-ink);
  }

  .phone-page .battery-options{
    margin: 0;
    padding: 14px;
    border: 2px solid rgba(24, 58, 99, 0.28);
    border-radius: 12px;
    background: var(--d-card);
    gap: 8px;
    box-shadow:none;
  }

  .phone-page .battery-choice{
    border-radius: 10px;
    border: 2px solid rgba(24, 58, 99, 0.24);
    background: transparent;
    padding: 8px 10px;
  }

  .phone-page .battery-choice-grid .battery-choice:has(input:checked){
    background:#e6eef9;
  }

  .phone-page .battery-choice span,
  .phone-page .battery-options p{
    color: var(--d-ink);
  }

  .phone-page .product-accessories{
    margin: 0;
    padding: 14px;
    border: 2px solid rgba(24, 58, 99, 0.28);
    border-radius: 12px;
    background: #eaf1f8;
  }

  .phone-page .product-accessory-grid{
    gap: .45rem;
  }

  .phone-page .product-accessory-choice{
    grid-template-rows: 86px auto;
  }

  .phone-page .product-accessory-choice img{
    height: 86px;
  }

  .phone-page .product-accessories--showcase .product-accessory-choice{
    grid-template-rows: 280px minmax(2.4em, auto) auto;
  }

  .phone-page .product-accessories--showcase .product-accessory-choice img{
    height: 280px;
  }

  .phone-page .product-side-report{
    align-self:start;
  }

  .phone-page .product-side-report .inspection-report-placeholder{
    margin:0;
  }

  .phone-page .accordion,
  .phone-page .refurbishment-details-mini{
    grid-column:1 / -1;
    margin: 0;
    border: 2px solid rgba(24, 58, 99, 0.28);
    border-radius: 12px;
    background: #edf3fa;
  }

  .phone-page .accordion-summary{
    padding: 11px 12px;
    color: var(--d-ink);
  }

  .phone-page .accordion #techBoxes,
  .phone-page .refurbishment-details-mini #techBoxes{
    padding: 10px;
  }

  .phone-page .accordion .spec-box{
    width: 100%;
  }

  .phone-page .part-status-legend{
    color:var(--d-ink);
    padding:0 10px 10px;
  }

  .phone-page .refurbishment-details-title,
  .phone-page .refurbishment-details-subtitle{
    color:var(--d-ink);
  }

  .phone-page .refurbishment-details-title{
    font-family:"Racing Sans One", sans-serif;
    font-weight:400;
  }

  .phone-page .part-status-grid{
    grid-template-columns:1fr;
    gap:8px;
    padding:10px;
  }

  .phone-page .part-status-row{
    border-color:rgba(24, 58, 99, 0.24);
    background:var(--d-card);
    padding:8px 9px;
  }

  .phone-page .part-status-label{
    color:var(--d-ink);
    font-size:.9rem;
  }

  .phone-page .technical-spec-panel{
    margin:0;
    border-color:rgba(24, 58, 99, 0.24);
    background:#eaf1f8;
  }

  .phone-page .inspection-report-placeholder{
    margin-top:10px;
    min-height:190px;
    color:var(--d-ink);
    border-color:rgba(24, 58, 99, 0.28);
    box-shadow:0 10px 24px rgba(9, 26, 52, 0.06);
  }

  .phone-page .inspection-report-placeholder h2,
  .phone-page .inspection-report-placeholder p,
  .phone-page .inspection-report-placeholder__badge{
    color:var(--d-ink);
  }

  .phone-page .tech-spec-section{
    margin-top:34px;
    grid-template-columns:1fr;
    align-items:center;
    padding:22px;
    border-color:rgba(24, 58, 99, 0.28);
    box-shadow:0 14px 32px rgba(9, 26, 52, 0.08);
  }

  .phone-page .product-faq-section{
    border-color:rgba(24, 58, 99, 0.28);
    background:#edf3fa;
  }

  .phone-page .tech-spec-section__heading{
    grid-column:1 / -1;
    color:var(--d-ink);
    text-align:center;
  }

  .phone-page .tech-spec-media{
    min-height:0;
    height:clamp(430px, 45vw, 620px);
    border:1px solid rgba(24, 58, 99, 0.16);
    border-radius:14px;
    background:#fff;
  }

  .phone-page .tech-spec-media img{
    max-width:min(49%, 520px);
    max-height:640px;
  }

  .phone-page .tech-spec-section--device-template .tech-spec-media img{
    width:auto;
    height:min(clamp(300px, 38vw, 540px), 100%);
    max-width:none;
    max-height:none;
    object-fit:contain;
  }

  .phone-page .tech-spec-section--device-template .tech-spec-media{
    display:flex;
    flex-direction:row;
    align-items:center;
    justify-content:center;
    min-height:0;
    gap:16px;
    padding:14px;
  }

  .phone-page .tech-spec-section--device-template .tech-spec-media img:first-child,
  .phone-page .tech-spec-section--device-template .tech-spec-media img:nth-child(2){
    width:auto;
    max-width:none;
    max-height:none;
    height:min(clamp(300px, 38vw, 540px), 100%);
  }

  .phone-page .technical-spec-panel,
  .phone-page .technical-spec-panel__title,
  .phone-page .technical-spec-list{
    color:var(--d-ink);
  }

  .phone-page .technical-spec-list{
    grid-template-columns:1fr;
  }

  .phone-page .product-action-row{
    display:grid;
    grid-template-columns:1fr;
    gap:16px;
  }

  .phone-page .product-action-row #addToCartForm,
  .phone-page .product-action-row .view-cart-btn{
    margin-left: 0;
    margin-top:0;
    width:100%;
  }

  .phone-page #addToCartForm .primary,
  .phone-page .view-cart-btn{
    width: 100%;
    border-radius: 12px;
  }

  .phone-page #addToCartForm{
    margin:0;
  }

  .phone-page .klarna-message--product{
    width:100%;
    max-width:none;
    margin:10px 0 16px;
    padding:8px 10px;
    border:2px solid rgba(24, 58, 99, 0.26);
    border-radius:12px;
    background:var(--d-card);
    color:var(--d-ink);
  }

  .phone-page .klarna-message--product small{
    color:var(--d-ink);
  }

  .phone-page .view-cart-btn{
    margin-top: 0;
    border: 1px solid rgba(24, 58, 99, 0.34);
    background: #f1f5fb;
    color: var(--d-ink);
    font-size: 1rem;
    font-weight: 600;
    padding: 11px 13px;
  }

  .phone-page .btw-regeling-bar{
    margin: 0;
    border-color: rgba(24, 58, 99, 0.28);
    background: #edf3fa;
  }

  .phone-page .btw-regeling-label,
  .phone-page .btw-regeling-value,
  .phone-page .btw-regeling-price{
    color: var(--d-ink);
  }
}

@media (max-width: 900px){
  .phone-page .tech-spec-section--device-template .tech-spec-media{
    display:flex;
    flex-direction:column;
    align-items:center;
    min-height:0;
    gap:18px;
    padding:14px 0;
  }

  .phone-page .tech-spec-section--device-template .tech-spec-media img:first-child,
  .phone-page .tech-spec-section--device-template .tech-spec-media img:nth-child(2){
    width:min(92%, 420px);
    max-width:92%;
    height:auto;
    max-height:none;
    object-fit:contain;
  }

  .phone-page .product-faq-section{
    margin:18px 0 30px;
    border:1px solid rgba(24, 58, 99, 0.24);
    border-radius:14px;
    background:#edf3fa;
    padding:12px;
    box-shadow:none;
  }

  .phone-page .product-faq-head{
    margin-bottom:10px;
  }

  .phone-page .product-faq-head h2{
    font-size:1.75rem;
  }

  .phone-page .product-faq-list{
    gap:8px;
  }

  .phone-page .product-faq-item{
    border-radius:10px;
  }

  .phone-page .product-faq-item summary{
    padding:13px 14px;
    font-size:.94rem;
  }

  .phone-page .product-faq-item p{
    padding:0 14px 14px;
    font-size:.9rem;
  }
}