*{box-sizing:border-box}
html,body{margin:0;background:#2c160d;color:#24160f;font-family:Georgia,"Times New Roman",serif}
body{min-width:320px}
.bazar{position:relative;width:min(100%,1024px);margin:0 auto;aspect-ratio:2/3;overflow:hidden;background:#b87435}
.master{position:absolute;inset:0;width:100%;height:100%;display:block}

.micro-nav{position:absolute;z-index:5;top:1.2%;left:50%;transform:translateX(-50%);display:flex;gap:.45rem;white-space:nowrap}
.micro-btn{font:700 clamp(9px,1.25vw,13px)/1 system-ui,sans-serif;letter-spacing:.06em;text-decoration:none;color:#25150d;background:rgba(244,218,166,.88);border:1px solid rgba(62,35,20,.5);padding:.48em .7em;border-radius:999px;box-shadow:0 2px 8px rgba(0,0,0,.18);backdrop-filter:blur(2px)}

/* Desktop master geometry: 745 px wide at the 1024 px reference canvas. */
.blocks{position:absolute;z-index:3;left:13.67%;top:26.56%;width:72.75%;display:flex;flex-direction:column;gap:8px}
.block-row{display:grid;width:100%;column-gap:10px;align-items:center}
.block-row.row-pg{grid-template-columns:minmax(0,2fr) minmax(0,3fr)}
.block-row.row-gp{grid-template-columns:minmax(0,3fr) minmax(0,2fr)}
.block{position:relative;min-width:0;height:auto}
.block img{width:100%;height:auto;display:block;object-fit:contain}

.hit{position:absolute;z-index:4;display:block;bottom:5%;height:20%;border-radius:10px}
.hit:focus-visible{outline:3px solid #ffd15b;outline-offset:2px;background:rgba(255,209,91,.18)}
.hit-main{left:7%;right:7%}
.hit-left{left:5%;width:42%}
.hit-right{right:5%;width:42%}

@media(max-width:700px){
  body{background:#b87435}
  .bazar{width:100%;aspect-ratio:auto;min-height:100vh;overflow:visible;background:#b87435}
  .master{position:relative;width:100%;height:auto}
  .blocks{position:relative;left:auto;top:auto;width:94%;margin:-1.5rem auto 2rem;display:flex;flex-direction:column;gap:.45rem}
  .block-row,.block-row.row-pg,.block-row.row-gp{display:flex;flex-direction:column;gap:.45rem}
  .block img{height:auto}
  .micro-nav{position:fixed;top:.55rem;left:50%;transform:translateX(-50%)}
  .micro-btn{font-size:10px;background:rgba(244,218,166,.95)}
}

/* MOBILE FIX v1 — desktop above 700px remains untouched. */
@media(max-width:700px){
  body{background:#2c160d}

  .bazar{
    position:relative;
    display:flex;
    flex-direction:column;
    width:100%;
    max-width:700px;
    min-height:100vh;
    margin:0 auto;
    overflow:visible;
    background:#7b3d1d url("assets/legno-mobile.jpg") center top / cover repeat-y;
  }

  /* On mobile the tall master is not shown in full: it is split into
     a compact hero crop and a compact closing crop. */
  .master{display:none}

  .bazar::before{
    content:"";
    display:block;
    width:100%;
    aspect-ratio:1024/390;
    flex:0 0 auto;
    background-image:url("assets/master.png");
    background-repeat:no-repeat;
    background-size:100% auto;
    background-position:center top;
  }

  .bazar::after{
    content:"";
    display:block;
    width:100%;
    aspect-ratio:1024/320;
    flex:0 0 auto;
    background-image:url("assets/master.png");
    background-repeat:no-repeat;
    background-size:100% auto;
    background-position:center bottom;
  }

  .micro-nav{
    position:absolute;
    z-index:10;
    top:.55rem;
    left:50%;
    transform:translateX(-50%);
    gap:.35rem;
  }

  .micro-btn{
    font-size:10px;
    padding:.48em .68em;
    background:rgba(244,218,166,.95);
  }

  .blocks{
    position:relative;
    z-index:3;
    left:auto;
    top:auto;
    width:96%;
    margin:.35rem auto .45rem;
    display:flex;
    flex-direction:column;
    gap:.38rem;
  }

  .block-row,
  .block-row.row-pg,
  .block-row.row-gp{
    display:flex;
    flex-direction:column;
    width:100%;
    gap:.38rem;
  }

  .block{
    width:100%;
    min-width:0;
  }

  .block img{
    display:block;
    width:100%;
    height:auto;
    object-fit:contain;
  }
}

/* VIDEO: three equal clickable areas for the three YouTube channels. */
.hit-third-left { left: 0; top: 0; width: 33.333%; height: 100%; }
.hit-third-center { left: 33.333%; top: 0; width: 33.334%; height: 100%; }
.hit-third-right { left: 66.667%; top: 0; width: 33.333%; height: 100%; }

/* Visible CTA links — added without changing the approved block/grid geometry. */
.cta-bar{
  position:absolute;
  z-index:6;
  left:6%;
  right:6%;
  bottom:3.5%;
  display:flex;
  justify-content:center;
  align-items:center;
  gap:.32rem;
  pointer-events:none;
}
.cta{
  pointer-events:auto;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:22px;
  padding:.42em .72em;
  border:1px solid rgba(54,31,17,.62);
  border-radius:999px;
  background:rgba(246,220,164,.94);
  box-shadow:0 2px 7px rgba(0,0,0,.20);
  color:#24150d;
  font:800 clamp(7px,.88vw,10px)/1.05 system-ui,sans-serif;
  letter-spacing:.035em;
  text-align:center;
  text-decoration:none;
  white-space:nowrap;
}
.cta:hover{transform:translateY(-1px);background:rgba(255,231,178,.98)}
.cta:focus-visible{outline:3px solid #ffd15b;outline-offset:2px}
.cta-three{left:2.5%;right:2.5%;gap:.18rem}
.cta-three .cta{padding:.38em .48em}

@media(max-width:700px){
  .cta-bar{left:5%;right:5%;bottom:3%;gap:.4rem}
  .cta{min-height:30px;padding:.52em .8em;font-size:clamp(8px,2.35vw,11px)}
  .cta-three{left:3%;right:3%;gap:.25rem}
  .cta-three .cta{padding:.48em .62em}
}


/* MOBILE CTA visibility hardening + cache-safe build. */
@media(max-width:700px){
  .block{position:relative;}
  .cta-bar{
    display:flex !important;
    visibility:visible !important;
    opacity:1 !important;
    z-index:20 !important;
    pointer-events:none;
  }
  .cta{
    display:inline-flex !important;
    visibility:visible !important;
    opacity:1 !important;
    position:relative;
    z-index:21;
    pointer-events:auto;
    background:#f6dca4;
    color:#24150d;
    border:1px solid rgba(54,31,17,.72);
  }
}