/* Pawon Nusantara v6.9 — small-screen layout stabilization */
html,body{max-width:100%;overflow-x:hidden}

@media(max-width:900px){
  .hero-grid{
    grid-template-columns:minmax(0,1fr);
    align-items:start;
  }
  .hero__content{order:1;min-width:0}
  .hero-visual{order:2;width:100%;max-width:720px;margin:4px auto 0;min-width:0}
}

@media(max-width:680px){
  .container{width:min(calc(100% - 24px),var(--container))}

  /* Announcement */
  .announcement{font-size:12px}
  .announcement__inner{min-height:40px;padding-block:6px}
  .announcement__message{display:flex;align-items:center;justify-content:center;line-height:1.3}

  /* Compact mobile header */
  .site-header{backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
  .header-main{min-height:72px;gap:8px}
  .brand{gap:8px;min-width:0;flex:1 1 auto}
  .brand__mark--logo,.brand__mark--logo img{width:48px;height:48px}
  .brand__copy{min-width:0}
  .brand__copy strong{overflow:hidden;font-size:16px;line-height:1.15;text-overflow:ellipsis;white-space:nowrap}
  .brand__copy small{display:none}
  .header-actions{flex:0 0 auto;gap:6px}
  .icon-button,.menu-toggle,.account-link{width:40px;min-width:40px;height:40px;padding:0;border-radius:13px}
  .icon-button svg{width:18px;height:18px}
  .cart-count{right:-3px;top:-6px}

  /* Hero content first, carousel second */
  .hero{padding:14px 0 26px}
  .hero-shell{padding:22px 20px;border-radius:24px}
  .hero-grid{gap:24px}
  .hero__content{position:relative;z-index:3}
  .hero .eyebrow{margin-bottom:8px;font-size:11px;line-height:1.3}
  .hero h1{max-width:100%;font-size:clamp(34px,7.6vw,40px);line-height:1.08;letter-spacing:-.045em}
  .hero__lead{max-width:100%;margin-top:15px;font-size:15px;line-height:1.55}
  .hero__actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;margin-top:20px}
  .hero__actions .button{width:100%;min-height:48px;padding:0 12px;font-size:12px;line-height:1.2;text-align:center}
  .hero__meta{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:18px}
  .hero__meta div{grid-template-columns:25px minmax(0,1fr);padding:10px 9px;border-radius:13px}
  .hero__meta span{width:25px;height:25px;font-size:12px}
  .hero__meta strong{font-size:10.5px;line-height:1.25}
  .hero__meta small{margin-top:2px;font-size:9px;line-height:1.25}

  /* Give the carousel an explicit box so absolute images cannot collapse it */
  .hero-visual.hero-slider{
    position:relative;
    display:block;
    width:100%;
    aspect-ratio:4 / 3;
    min-height:0;
    margin-top:0;
    isolation:isolate;
  }
  .hero-slider .hero-visual__frame,
  .hero-slider__link{
    position:absolute;
    inset:0;
    display:block;
    width:100%;
    height:100%;
    aspect-ratio:auto;
    border-width:5px;
    border-radius:20px;
  }
  .hero-slider__image{object-fit:contain;background:#fffaf3}
  .hero-slider .hero-visual__card{display:none!important}
  .hero-slider__badge{
    left:11px;
    top:11px;
    max-width:44%;
    min-height:27px;
    padding-inline:9px;
    overflow:hidden;
    font-size:8px;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
  .hero-visual__status{
    right:11px;
    top:11px;
    max-width:48%;
    min-height:29px;
    padding-inline:10px;
    overflow:hidden;
    font-size:9px;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
  .hero-slider__controls{left:11px;right:auto;bottom:12px;top:auto;min-height:40px;padding:4px}
  .hero-slider__button{width:31px;height:31px;font-size:14px}
  .hero-slider__counter{display:none}
  .hero-slider__progress{left:9px;right:9px;bottom:4px;height:2px}

  /* Keep the next section visually separated */
  .service-strip{margin-top:0}
  .service-strip__grid{gap:7px;padding-block:12px}
  .service-point{padding:13px 14px!important;border:1px solid #eedbc9!important;border-radius:15px}
  .service-point:last-child{border-bottom:1px solid #eedbc9!important}

  .section{padding:42px 0}
  .section--tight{padding:30px 0}
  .section-header{gap:12px;margin-bottom:20px}
  .section-header h2,.section-copy h2{font-size:28px}
  .section-header p,.section-copy>p{font-size:14px;line-height:1.55}
}

@media(max-width:520px){
  .account-link{display:none}
  .hero-shell{padding:20px 17px}
  .hero h1{font-size:clamp(32px,9.2vw,37px)}
  .hero__meta{grid-template-columns:1fr}
  .hero__meta div{grid-template-columns:27px minmax(0,1fr);grid-template-rows:auto auto}
  .hero__meta span{grid-row:1 / 3;width:27px;height:27px}
  .hero__meta strong{font-size:11px}
  .hero__meta small{font-size:9.5px}
  .hero-visual.hero-slider{aspect-ratio:4 / 3}
}

@media(max-width:420px){
  .container{width:min(calc(100% - 20px),var(--container))}
  .header-main{min-height:66px}
  .brand__mark--logo,.brand__mark--logo img{width:44px;height:44px}
  .brand__copy strong{font-size:14px}
  .header-actions{gap:5px}
  .icon-button,.menu-toggle{width:38px;min-width:38px;height:38px;border-radius:12px}
  .hero{padding-top:10px}
  .hero-shell{padding:18px 15px;border-radius:21px}
  .hero h1{font-size:32px;line-height:1.09}
  .hero__lead{font-size:14px}
  .hero__actions{grid-template-columns:1fr}
  .hero__actions .button{min-height:46px}
  .hero-slider__badge{display:none}
  .hero-visual__status{max-width:62%;font-size:8.5px}
  .hero-slider__controls{left:9px;right:auto;bottom:10px}
  .hero-slider__progress{left:7px;right:7px;bottom:3px}
  .category-grid,.product-grid{grid-template-columns:1fr}
}

@media(max-width:350px){
  .brand__copy{display:none}
  .brand{flex:0 0 auto}
  .search-toggle{margin-left:auto}
  .hero h1{font-size:30px}
}

@media(max-width:420px){
  .hero__meta{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
  .hero__meta div{grid-template-columns:22px minmax(0,1fr);grid-template-rows:auto;padding:8px 6px;min-height:48px}
  .hero__meta span{grid-row:auto;width:22px;height:22px;font-size:10px}
  .hero__meta strong{font-size:9px;line-height:1.2}
  .hero__meta small{display:none}
}