/* TAWHOO Hero Rotator V1: scoped; keep existing hero typography. */
.hr1-hero{display:block!important;position:relative}
.hr1-slide{display:grid;grid-template-columns:1.1fr .9fr;gap:22px;align-items:center;min-width:0}
.hr1-slide[hidden]{display:none!important}
.hr1-copy,.hr1-visual{min-width:0}
.hr1-controls{display:flex;justify-content:center;align-items:center;gap:16px;margin:14px auto 0;position:relative;z-index:2}
.hr1-controls>button{width:40px;height:40px;border:1px solid #e9b8cd;border-radius:50%;background:#fff;color:#9c275a;font-size:25px;line-height:1;cursor:pointer}
.hr1-dots{display:flex;gap:9px;align-items:center;justify-content:center;flex-wrap:wrap}
.hr1-dots button{width:11px;height:11px;border:0;padding:0;border-radius:50%;background:#e4b8cb;cursor:pointer}
.hr1-dots button[aria-current=true]{background:#ae2b65;box-shadow:0 0 0 3px #f9e0ea}
.hr1-controls button:focus-visible{outline:3px solid #a72d67;outline-offset:4px}
.hr1-slide .ph-hero-visual picture,.hr1-slide .ph-hero-visual img{display:block;width:100%;height:100%}
.hr1-slide .ph-hero-visual img{object-fit:cover;aspect-ratio:1/1}
@media(max-width:700px){.hr1-slide{grid-template-columns:1fr;gap:15px}.hr1-hero{padding-bottom:12px}.hr1-controls{padding-bottom:8px}}


/* TAWHOO_HERO_MOBILE_COMPACT_V1 */
@media (max-width: 700px) {

  .hr1-hero .hp-hero-actions,
  .hr1-hero .hp-hero-actions {
    gap: 8px !important;
  }

  .hr1-hero .hp-button {
    min-height: 38px !important;
    padding: 9px 15px !important;
    font-size: 12px !important;
    line-height: 1.3 !important;
    width: auto !important;
    flex: 0 1 auto !important;
    border-radius: 999px !important;
  }

  .hr1-controls {
    gap: 8px !important;
    margin-top: 8px !important;
  }

  .hr1-controls > button {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    min-height: 32px !important;
    padding: 0 !important;
    font-size: 20px !important;
  }

  .hr1-dots {
    gap: 5px !important;
    flex-wrap: nowrap !important;
  }

  .hr1-dots button {
    width: 9px !important;
    height: 9px !important;
    min-width: 9px !important;
    min-height: 9px !important;
    padding: 0 !important;
    border-radius: 50% !important;
    flex: none !important;
  }

  .hr1-dots button[aria-current="true"] {
    box-shadow: 0 0 0 2px #f9e0ea !important;
  }
}


/* TAWHOO_HERO_DOTS_TOUCH_TARGET_V2 */
@media (max-width: 700px) {

  .hr1-dots {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0 !important;
  }

  /* พื้นที่สัมผัส 44 × 44px */
  .hr1-dots button {
    position: relative !important;
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    border-radius: 50% !important;
    flex: 0 0 44px !important;
  }

  /* วงกลมที่มองเห็นจริง 9px */
  .hr1-dots button::after {
    content: "" !important;
    position: absolute !important;
    width: 9px !important;
    height: 9px !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    border-radius: 50% !important;
    background: #e6b7ce !important;
  }

  .hr1-dots button[aria-current="true"]::after {
    background: #b32869 !important;
    box-shadow: 0 0 0 3px #f9e0ea !important;
  }

  .hr1-dots button:focus-visible {
    outline: 2px solid #b32869 !important;
    outline-offset: -4px !important;
  }
}


/* TAWHOO_HERO_DOTS_FINAL_V3 */
@media (max-width: 700px) {

  .hr1-hero .hr1-dots {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0 !important;
  }

  .hr1-hero .hr1-dots button {
    appearance: none !important;
    display: block !important;
    position: relative !important;
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    flex: 0 0 44px !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 50% !important;
    box-shadow: none !important;
    background: radial-gradient(
      circle 4.5px at center,
      #e6b7ce 98%,
      transparent 100%
    ) !important;
    cursor: pointer !important;
  }

  .hr1-hero .hr1-dots button[aria-current="true"] {
    box-shadow: none !important;
    background: radial-gradient(
      circle 4.5px at center,
      #b32869 98%,
      transparent 100%
    ) !important;
  }

  .hr1-hero .hr1-dots button::before,
  .hr1-hero .hr1-dots button::after {
    content: none !important;
    display: none !important;
  }

  .hr1-hero .hr1-dots button:focus-visible {
    outline: 2px solid #b32869 !important;
    outline-offset: -3px !important;
  }
}