/* A compact appliance controller, shown at a restrained scale. */
.magicdot-product .magicdot-opening { background:var(--surface-stone); }
.magicdot-product .magicdot-opening-inner { display:grid; grid-template-columns:1.2fr 1fr; align-items:center; gap:8%; padding-block:76px 86px; }
.magicdot-product .magicdot-opening-copy { min-width:0; }
.magicdot-product .magicdot-opening h1 { font-size:clamp(38px,4.05vw,59px); line-height:1.1; letter-spacing:-.045em; margin:20px 0 24px; }
.magicdot-product .magicdot-opening h1 span { display:block; }
.magicdot-product .magicdot-opening .product-arrival-name { display:none; }
.magicdot-product .magicdot-opening .sp-copy { max-width:450px; margin:0; }
.magicdot-product .magicdot-opening .sp-link { margin-top:18px; }
.magicdot-product .magicdot-opening figure { width:76%; max-width:325px; justify-self:center; margin:0; }
.magicdot-product .magicdot-opening img { display:block; width:100%; height:auto; }
.magicdot-product .magicdot-everyday { padding-block:65px 68px; }
.magicdot-product .magicdot-everyday .sp-heading { max-width:640px; margin:0; font-size:clamp(29px,2.7vw,38px); }
.magicdot-product .magicdot-benefits { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:6%; margin-top:36px; }
.magicdot-product .magicdot-benefits h3 { font-size:19px; line-height:1.4; letter-spacing:-.02em; margin:0 0 10px; }
.magicdot-product .magicdot-benefits p { color:var(--sp-muted); font-size:15px; line-height:1.65; margin:0; }
.magicdot-product .magicdot-compatibility { max-width:720px; font-size:13px; line-height:1.65; color:var(--sp-muted); margin:32px 0 0; }
.magicdot-product .magicdot-enquiry { padding-block:62px 66px; }
.magicdot-product .magicdot-enquiry .sp-heading { max-width:660px; font-size:clamp(29px,3vw,42px); }
.magicdot-product .magicdot-enquiry-actions { display:flex; justify-content:center; flex-wrap:wrap; gap:8px 30px; margin-top:20px; }

@media(max-width:760px) {
  .magicdot-product .magicdot-opening-inner { grid-template-columns:1fr; gap:35px; padding-block:42px 47px; }
  .magicdot-product .magicdot-opening-copy { max-width:550px; }
  .magicdot-product .magicdot-opening h1 { font-size:clamp(33px,6.7vw,48px); margin:17px 0 20px; }
  .magicdot-product .magicdot-opening figure { width:62%; max-width:240px; }
  .magicdot-product .magicdot-everyday { padding-block:44px 48px; }
  .magicdot-product .magicdot-benefits { grid-template-columns:1fr; gap:24px; margin-top:29px; }
  .magicdot-product .magicdot-benefits article { max-width:480px; }
  .magicdot-product .magicdot-benefits h3 { margin-bottom:5px; }
  .magicdot-product .magicdot-compatibility { margin-top:27px; }
  .magicdot-product .magicdot-enquiry { padding-block:46px 49px; }
  .magicdot-product .magicdot-enquiry-actions { flex-direction:column; align-items:center; gap:3px; }
}

@media(max-width:360px) {
  .magicdot-product .magicdot-opening h1 { font-size:30px; }
  .magicdot-product .magicdot-opening figure { width:70%; }
  .magicdot-product .magicdot-everyday .sp-heading,
  .magicdot-product .magicdot-enquiry .sp-heading { font-size:28px; }
  .magicdot-product .sp-local-nav :is(div,nav):not(.sp-wrap) { column-gap:18px; }
}

.magicdot-product .magicdot-room { margin:32px 0 0; overflow:hidden; aspect-ratio:16 / 9; border-radius:24px; background:#353535; }
.magicdot-product .magicdot-room img { display:block; width:100%; height:100%; object-fit:cover; object-position:center bottom; }
@media(max-width:760px) {
  .magicdot-product .magicdot-opening-inner { padding-block:28px 32px; gap:24px; }
  .magicdot-product .magicdot-opening :is(.sp-eyebrow,.product-arrival-story) { display:none; }
  .magicdot-product .magicdot-opening .product-arrival-name { display:block; }
  .magicdot-product .magicdot-opening h1 { font-size:clamp(32px,8.5vw,38px); margin:0 0 14px; }
  .magicdot-product .magicdot-opening figure { max-width:180px; }
  .magicdot-product .magicdot-room { margin-top:24px; aspect-ratio:3 / 2; border-radius:18px; }
  .magicdot-product .magicdot-benefits { margin-top:27px; gap:18px; }
}

/* Mobile readability: keep the shared heading scale unchanged. */
@media(max-width:760px){
 .magicdot-product .magicdot-benefits p{font-size:18px;line-height:1.6}
 .magicdot-product .magicdot-compatibility{font-size:16px;line-height:1.6}
}

@media(max-width:760px){
 .magicdot-product .magicdot-opening figure{width:76%;max-width:240px}
}