/*
Theme Name: Tanghulu Bros
Version: 5.0.0
*/


/* =========================================================
   VARIABLES
   ========================================================= */

:root {

  --cream:
    #fff8ed;

  --cream-light:
    #fffdf8;

  --ink:
    #2e2724;

  --muted:
    #755f53;

  --berry:
    #ef596a;

  --berry-dark:
    #d84456;

  --pistachio:
    #aac85e;

  --orange:
    #efa44f;

  --line:
    #eaded0;

  --shadow:
    0 18px 44px
    rgba(
      73,
      47,
      34,
      0.08
    );

  --heavy-shadow:
    0 30px 70px
    rgba(
      63,
      38,
      27,
      0.16
    );

  --container:
    1240px;

}


/* =========================================================
   RESET
   ========================================================= */

* {

  box-sizing:
    border-box;

}


html {

  scroll-behavior:
    smooth;

}


body {

  margin:
    0;

  overflow-x:
    hidden;

  background:
    var(--cream);

  color:
    var(--ink);

  font-family:
    "Inter",
    sans-serif;

}


img {

  max-width:
    100%;

}


a {

  color:
    inherit;

  text-decoration:
    none;

}


button,
input,
select,
textarea {

  font:
    inherit;

}


/* =========================================================
   TYPOGRAPHY
   ========================================================= */

h1,
h2,
h3,
h4 {

  margin-top:
    0;

  color:
    var(--ink);

  font-family:
    "Baloo 2",
    sans-serif;

}


h1 {

  margin-bottom:
    24px;

  font-size:
    clamp(
      4rem,
      7vw,
      7rem
    );

  font-weight:
    800;

  line-height:
    0.9;

  letter-spacing:
    -0.045em;

}


h2 {

  margin-bottom:
    18px;

  font-size:
    clamp(
      2.8rem,
      5vw,
      4.7rem
    );

  font-weight:
    800;

  line-height:
    0.96;

  letter-spacing:
    -0.035em;

}


h3 {

  margin-bottom:
    10px;

  font-size:
    1.3rem;

  line-height:
    1.1;

}


p {

  line-height:
    1.65;

}


.lead {

  color:
    var(--muted);

  font-size:
    1.17rem;

}


/* =========================================================
   LAYOUT
   ========================================================= */

.container {

  width:
    min(
      calc(
        100% - 48px
      ),
      var(--container)
    );

  margin:
    0 auto;

}


.section {

  padding:
    100px 0;

}


.section-tight {

  padding:
    55px 0 85px;

}


.split {

  display:
    grid;

  grid-template-columns:
    repeat(
      2,
      minmax(
        0,
        1fr
      )
    );

  gap:
    36px;

}


/* =========================================================
   EYEBROW
   ========================================================= */

.eyebrow {

  display:
    inline-flex;

  align-items:
    center;

  padding:
    8px 15px;

  border:
    1px solid
    var(--line);

  border-radius:
    999px;

  background:
    rgba(
      255,
      255,
      255,
      0.80
    );

  font-size:
    0.77rem;

  font-weight:
    800;

  letter-spacing:
    0.07em;

  text-transform:
    uppercase;

}


/* =========================================================
   BUTTONS
   ========================================================= */

.btn-row {

  display:
    flex;

  flex-wrap:
    wrap;

  gap:
    13px;

}


.btn {

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  min-height:
    52px;

  padding:
    0 23px;

  border:
    0;

  border-radius:
    999px;

  cursor:
    pointer;

  font-weight:
    800;

  transition:
    transform
      180ms ease,
    box-shadow
      180ms ease;

}


.btn:hover {

  transform:
    translateY(
      -2px
    );

}


.btn-primary {

  color:
    white;

  background:
    var(--berry);

  box-shadow:
    0 14px 28px
    rgba(
      239,
      89,
      106,
      0.25
    );

}


.btn-soft {

  border:
    1px solid
    var(--line);

  background:
    white;

}


.btn-dark {

  color:
    white;

  background:
    var(--ink);

}


/* =========================================================
   HEADER
   ========================================================= */

.site-header {

  position:
    sticky;

  z-index:
    1000;

  top:
    0;

  border-bottom:
    1px solid
    rgba(
      225,
      212,
      197,
      0.8
    );

  background:
    rgba(
      255,
      248,
      237,
      0.94
    );

  backdrop-filter:
    blur(
      18px
    );

  -webkit-backdrop-filter:
    blur(
      18px
    );

}


.header-inner {

  min-height:
    78px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    28px;

}


.brand {

  display:
    inline-flex;

  align-items:
    center;

}


.brand-logo {

  display:
    block;

  width:
    auto;

  height:
    62px;

  object-fit:
    contain;

}


.nav {

  display:
    flex;

  align-items:
    center;

  gap:
    30px;

  font-weight:
    700;

}


.menu-toggle {

  display:
    none;

  border:
    0;

  background:
    transparent;

  cursor:
    pointer;

  font-size:
    1.8rem;

}


/* =========================================================
   HERO
   ========================================================= */

.hero {

  position:
    relative;

  overflow:
    hidden;

  padding:
    82px 0 65px;

}


.hero::after {

  content:
    "";

  position:
    absolute;

  z-index:
    0;

  right:
    -8%;

  bottom:
    -135px;

  left:
    -8%;

  height:
    220px;

  border-radius:
    50% 50% 0 0 /
    35% 35% 0 0;

  background:
    #b9d479;

}


.hero-grid {

  position:
    relative;

  z-index:
    2;

  display:
    grid;

  grid-template-columns:
    0.95fr
    1.05fr;

  align-items:
    center;

  gap:
    60px;

}


.hero-copy p {

  max-width:
    650px;

  margin-bottom:
    28px;

  color:
    var(--muted);

  font-size:
    1.18rem;

}


.hero-art {

  min-height:
    510px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

}


.hero-product-card {

  position:
    relative;

  width:
    100%;

  max-width:
    670px;

  min-height:
    460px;

  padding:
    24px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  overflow:
    hidden;

  border:
    1px solid
    rgba(
      238,
      225,
      210,
      0.9
    );

  border-radius:
    46px;

  background:
    linear-gradient(
      145deg,
      #fffdfa,
      #fff5e7
    );

  box-shadow:
    var(--shadow);

}


.hero-product-image {

  position:
    relative;

  z-index:
    4;

  width:
    100%;

  height:
    410px;

  object-fit:
    contain;

  filter:
    drop-shadow(
      0 18px 24px
      rgba(
        60,
        36,
        24,
        0.12
      )
    );

}


.hero-circle {

  position:
    absolute;

  z-index:
    1;

  border-radius:
    50%;

}


.hero-circle-pink {

  width:
    200px;

  height:
    200px;

  top:
    -75px;

  right:
    -55px;

  background:
    rgba(
      242,
      191,
      205,
      0.64
    );

}


.hero-circle-green {

  width:
    150px;

  height:
    150px;

  left:
    -45px;

  bottom:
    -45px;

  background:
    rgba(
      171,
      201,
      94,
      0.60
    );

}


/* =========================================================
   MENU
   ========================================================= */

.menu-section {

  position:
    relative;

  overflow:
    hidden;

  padding-bottom:
    135px;

}


.menu-heading {

  position:
    relative;

  z-index:
    5;

  max-width:
    760px;

}


/* =========================================================
   FIGHTER ARENA
   ========================================================= */

.fighter-arena {

  position:
    relative;

  width:
    100%;

  height:
    1050px;

  margin:
    40px auto 0;

  perspective:
    1500px;

}


/* =========================================================
   ARENA DECORATIONS
   ========================================================= */

.arena-ring {

  position:
    absolute;

  left:
    50%;

  top:
    50%;

  pointer-events:
    none;

  border-radius:
    50%;

  transform:
    translate(
      -50%,
      -50%
    );

}


.arena-ring-one {

  width:
    88%;

  height:
    72%;

  border:
    2px solid
    rgba(
      170,
      200,
      94,
      0.19
    );

}


.arena-ring-two {

  width:
    73%;

  height:
    60%;

  border:
    1px dashed
    rgba(
      239,
      89,
      106,
      0.24
    );

  animation:
    arenaSpin
    35s linear
    infinite;

}


@keyframes arenaSpin {

  from {

    transform:
      translate(
        -50%,
        -50%
      )
      rotate(
        0deg
      );

  }


  to {

    transform:
      translate(
        -50%,
        -50%
      )
      rotate(
        360deg
      );

  }

}


.arena-center-light {

  position:
    absolute;

  left:
    50%;

  top:
    50%;

  width:
    520px;

  height:
    520px;

  pointer-events:
    none;

  border-radius:
    50%;

  transform:
    translate(
      -50%,
      -50%
    );

  background:
    radial-gradient(
      circle,
      rgba(
        239,
        89,
        106,
        0.10
      ),
      rgba(
        239,
        164,
        79,
        0.06
      )
      45%,
      transparent
      70%
    );

}


/* =========================================================
   FIGHTER CARD BASE
   ========================================================= */

.fighter-card {

  --mouse-x:
    50%;

  --mouse-y:
    50%;

  position:
    absolute;

  z-index:
    10;

  width:
    270px;

  height:
    350px;

  cursor:
    pointer;

  outline:
    none;

  perspective:
    1300px;

  animation:
    fighterFloat
    4.5s ease-in-out
    infinite;

  -webkit-tap-highlight-color:
    transparent;

}


.fighter-slot-2,
.fighter-slot-5 {

  animation-delay:
    -1.5s;

}


.fighter-slot-3,
.fighter-slot-6 {

  animation-delay:
    -2.7s;

}


@keyframes fighterFloat {

  0%,
  100% {

    margin-top:
      -5px;

  }


  50% {

    margin-top:
      8px;

  }

}


.fighter-card-inner {

  position:
    relative;

  width:
    100%;

  height:
    100%;

  transform-style:
    preserve-3d;

  transition:
    transform
      700ms
      cubic-bezier(
        0.2,
        0.8,
        0.2,
        1
      );

}


/* =========================================================
   CARD FACES
   ========================================================= */

.fighter-face {

  position:
    absolute;

  inset:
    0;

  display:
    flex;

  flex-direction:
    column;

  align-items:
    center;

  padding:
    17px;

  overflow:
    hidden;

  border:
    1px solid
    rgba(
      228,
      211,
      193,
      0.96
    );

  border-radius:
    30px;

  background:
    rgba(
      255,
      253,
      249,
      0.98
    );

  box-shadow:
    0 17px 42px
    rgba(
      70,
      45,
      30,
      0.10
    );

  backface-visibility:
    hidden;

  -webkit-backface-visibility:
    hidden;

}


.fighter-front {

  transform:
    rotateY(
      0deg
    );

}


.fighter-back {

  justify-content:
    center;

  text-align:
    center;

  transform:
    rotateY(
      180deg
    );

  background:
    linear-gradient(
      145deg,
      #fff7ea,
      #ffedf0
    );

}


.fighter-front::after {

  content:
    "";

  position:
    absolute;

  inset:
    0;

  z-index:
    2;

  pointer-events:
    none;

  opacity:
    0;

  background:
    radial-gradient(
      circle
      at
      var(--mouse-x)
      var(--mouse-y),
      rgba(
        255,
        255,
        255,
        0.62
      ),
      rgba(
        239,
        89,
        106,
        0.08
      )
      28%,
      transparent
      56%
    );

  transition:
    opacity
      220ms ease;

}


/* =========================================================
   DESKTOP FLIP
   ONLY REAL DESKTOP MOUSE DEVICES
   ========================================================= */

@media
  (min-width: 901px)
  and (hover: hover)
  and (pointer: fine) {

  .fighter-card.is-open
  .fighter-card-inner {

    transform:
      rotateY(
        180deg
      );

  }


  .fighter-card:hover {

    z-index:
      100;

  }


  .fighter-card:hover
  .fighter-front::after {

    opacity:
      1;

  }

}


/* =========================================================
   PRODUCT IMAGE
   ========================================================= */

.fighter-image-stage {

  position:
    relative;

  width:
    100%;

  height:
    235px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  overflow:
    hidden;

  border-radius:
    22px;

}


.fighter-product-image {

  position:
    relative;

  z-index:
    4;

  display:
    block;

  width:
    auto;

  height:
    auto;

  max-width:
    95%;

  max-height:
    225px;

  object-fit:
    contain;

  filter:
    drop-shadow(
      0 14px 19px
      rgba(
        62,
        33,
        21,
        0.17
      )
    );

  transition:
    transform
      350ms
      cubic-bezier(
        0.2,
        0.8,
        0.2,
        1
      ),
    filter
      350ms ease;

}


@media
  (min-width: 901px)
  and (hover: hover)
  and (pointer: fine) {

  .fighter-card:hover
  .fighter-product-image {

    transform:
      translateY(
        -12px
      )
      scale(
        1.07
      );

    filter:
      drop-shadow(
        0 25px 30px
        rgba(
          62,
          33,
          21,
          0.26
        )
      );

  }

}


/* =========================================================
   GLOW
   ========================================================= */

.fighter-glow {

  position:
    absolute;

  z-index:
    1;

  width:
    190px;

  height:
    190px;

  border-radius:
    50%;

  opacity:
    0.25;

  transform:
    scale(
      0.78
    );

  background:
    radial-gradient(
      circle,
      rgba(
        239,
        89,
        106,
        0.24
      ),
      rgba(
        239,
        164,
        79,
        0.11
      )
      42%,
      transparent
      72%
    );

  transition:
    opacity
      300ms ease,
    transform
      300ms ease;

}


@media
  (min-width: 901px)
  and (hover: hover)
  and (pointer: fine) {

  .fighter-card:hover
  .fighter-glow {

    opacity:
      1;

    transform:
      scale(
        1.35
      );

  }

}


/* =========================================================
   FIGHTER TEXT
   ========================================================= */

.fighter-face h3 {

  position:
    relative;

  z-index:
    5;

  margin:
    10px 0 5px;

  text-align:
    center;

  font-size:
    1.25rem;

}


.flip-hint {

  position:
    relative;

  z-index:
    5;

  margin-top:
    auto;

  color:
    #a08576;

  font-size:
    0.65rem;

  font-weight:
    700;

  letter-spacing:
    0.08em;

  text-transform:
    uppercase;

}


.back-label {

  display:
    inline-flex;

  padding:
    7px 11px;

  border:
    1px solid
    var(--line);

  border-radius:
    999px;

  background:
    white;

  color:
    var(--berry-dark);

  font-size:
    0.68rem;

  font-weight:
    800;

  letter-spacing:
    0.05em;

  text-transform:
    uppercase;

}


.fighter-back h3 {

  margin:
    10px 0 5px;

  font-size:
    1.5rem;

}


.fighter-back p {

  max-width:
    220px;

  margin:
    3px auto 14px;

  color:
    var(--muted);

  font-size:
    0.87rem;

  line-height:
    1.45;

}


.fighter-back-image {

  display:
    block;

  width:
    auto;

  height:
    105px;

  max-width:
    125px;

  margin:
    12px auto 2px;

  object-fit:
    contain;

  filter:
    drop-shadow(
      0 10px 13px
      rgba(
        65,
        35,
        24,
        0.14
      )
    );

}


/* =========================================================
   DESKTOP POSITIONS
   ========================================================= */

.fighter-slot-1 {

  left:
    3%;

  top:
    8%;

}


.fighter-slot-2 {

  right:
    3%;

  top:
    8%;

}


.fighter-slot-3 {

  right:
    0;

  top:
    56%;

}


.fighter-slot-4 {

  right:
    23%;

  bottom:
    0;

}


.fighter-slot-5 {

  left:
    23%;

  bottom:
    0;

}


.fighter-slot-6 {

  left:
    0;

  top:
    56%;

}


/* =========================================================
   FINAL BOSS
   ========================================================= */

.fighter-card-boss {

  width:
    350px;

  height:
    470px;

  left:
    50%;

  top:
    50%;

  z-index:
    50;

  transform:
    translate(
      -50%,
      -50%
    );

  animation:
    bossFloat
    3.5s ease-in-out
    infinite;

}


@keyframes bossFloat {

  0%,
  100% {

    transform:
      translate(
        -50%,
        -50%
      )
      translateY(
        -5px
      );

  }


  50% {

    transform:
      translate(
        -50%,
        -50%
      )
      translateY(
        9px
      );

  }

}


.fighter-card-boss
.fighter-face {

  border:
    2px solid
    rgba(
      239,
      89,
      106,
      0.42
    );

  background:
    linear-gradient(
      145deg,
      #fff9ed,
      #fff1e4
      55%,
      #ffedf0
    );

  box-shadow:
    0 32px 78px
    rgba(
      91,
      50,
      37,
      0.20
    );

}


.boss-image-stage {

  height:
    340px;

  overflow:
    visible;

}


.boss-product-image {

  max-height:
    325px;

}


.boss-aura {

  position:
    absolute;

  z-index:
    1;

  width:
    285px;

  height:
    285px;

  border-radius:
    50%;

  background:
    radial-gradient(
      circle,
      rgba(
        239,
        89,
        106,
        0.28
      ),
      rgba(
        239,
        164,
        79,
        0.15
      )
      38%,
      transparent
      70%
    );

  animation:
    bossPulse
    2.7s ease-in-out
    infinite;

}


@keyframes bossPulse {

  0%,
  100% {

    opacity:
      0.55;

    transform:
      scale(
        0.87
      );

  }


  50% {

    opacity:
      1;

    transform:
      scale(
        1.15
      );

  }

}


.boss-badge {

  position:
    absolute;

  z-index:
    10;

  left:
    15px;

  top:
    15px;

  padding:
    7px 12px;

  border-radius:
    999px;

  background:
    var(--ink);

  color:
    white;

  font-size:
    0.67rem;

  font-weight:
    900;

  letter-spacing:
    0.09em;

}


.boss-back
.fighter-back-image {

  height:
    170px;

  max-width:
    180px;

}


/* =========================================================
   GENERIC CARD
   ========================================================= */

.card {

  border:
    1px solid
    var(--line);

  border-radius:
    30px;

  background:
    rgba(
      255,
      255,
      255,
      0.85
    );

  box-shadow:
    var(--shadow);

}


/* =========================================================
   CALENDAR
   ========================================================= */

.calendar-wrap {

  padding:
    30px;

}


.calendar-head {

  margin-bottom:
    24px;

}


.calendar-head h3 {

  margin:
    12px 0 0;

}


.calendar-grid {

  display:
    grid;

  grid-template-columns:
    repeat(
      7,
      minmax(
        0,
        1fr
      )
    );

  gap:
    7px;

}


.cal-label {

  padding:
    6px 0;

  text-align:
    center;

  color:
    var(--muted);

  font-size:
    0.74rem;

  font-weight:
    700;

}


.cal-day {

  min-height:
    49px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  border-radius:
    13px;

  background:
    #f5eee5;

  font-weight:
    800;

}


.cal-empty {

  opacity:
    0.25;

}


.cal-day.available {

  background:
    #eaf3d6;

}


.cal-day.limited {

  background:
    #ffe9cc;

}


.cal-day.booked {

  color:
    #a63f4c;

  background:
    #ffe0e5;

}


.legend {

  display:
    flex;

  flex-wrap:
    wrap;

  gap:
    18px;

  margin-top:
    20px;

  color:
    var(--muted);

  font-size:
    0.8rem;

}


.legend span {

  display:
    inline-flex;

  align-items:
    center;

  gap:
    7px;

}


.legend i {

  width:
    10px;

  height:
    10px;

  border-radius:
    50%;

}


.legend-available {

  background:
    var(--pistachio);

}


.legend-limited {

  background:
    var(--orange);

}


.legend-booked {

  background:
    var(--berry);

}


/* =========================================================
   UPCOMING EVENTS
   ========================================================= */

.info-panel,
.upcoming-events-panel {

  padding:
    32px;

}


.upcoming-events-title {

  margin:
    12px 0 12px;

  font-size:
    2.7rem;

}


.upcoming-events-intro {

  margin-bottom:
    20px;

  color:
    var(--muted);

}


.google-events-frame {

  overflow:
    hidden;

  border:
    1px solid
    var(--line);

  border-radius:
    20px;

  background:
    white;

}


.google-events-frame iframe {

  display:
    block;

  width:
    100%;

  border:
    0;

}


.events-footer {

  margin-top:
    20px;

}


/* =========================================================
   BOOKING INFORMATION
   ========================================================= */

.info-panel ul {

  padding:
    0;

  margin-top:
    25px;

  list-style:
    none;

}


.info-panel li {

  display:
    flex;

  gap:
    13px;

  margin-bottom:
    18px;

}


.dot {

  width:
    11px;

  height:
    11px;

  flex:
    0 0 auto;

  margin-top:
    7px;

  border-radius:
    50%;

  background:
    var(--berry);

}


.event-meta {

  color:
    var(--muted);

  font-size:
    0.88rem;

}


/* =========================================================
   FORM
   ========================================================= */

.booking-box {

  padding:
    30px;

}


.form-grid {

  display:
    grid;

  grid-template-columns:
    repeat(
      2,
      minmax(
        0,
        1fr
      )
    );

  gap:
    17px;

}


.form-field {

  display:
    flex;

  flex-direction:
    column;

  gap:
    7px;

}


.form-field.full {

  grid-column:
    1 / -1;

}


.form-field label {

  font-size:
    0.82rem;

  font-weight:
    700;

}


.form-field input,
.form-field select,
.form-field textarea {

  width:
    100%;

  padding:
    13px 14px;

  border:
    1px solid
    #dfd2c4;

  border-radius:
    14px;

  outline:
    0;

  background:
    white;

}


.form-field textarea {

  min-height:
    120px;

  resize:
    vertical;

}


.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {

  border-color:
    var(--berry);

  box-shadow:
    0 0 0 4px
    rgba(
      239,
      89,
      106,
      0.09
    );

}


.notice {

  margin-bottom:
    18px;

  padding:
    13px 15px;

  border-radius:
    13px;

}


.notice.success {

  background:
    #eaf4da;

}


.notice.error {

  background:
    #ffe0e5;

}


/* =========================================================
   ABOUT
   ========================================================= */

.about-grid {

  display:
    grid;

  grid-template-columns:
    0.9fr
    1.1fr;

  align-items:
    center;

  gap:
    48px;

}


.about-art {

  position:
    relative;

  min-height:
    390px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  overflow:
    hidden;

  border:
    1px solid
    white;

  border-radius:
    38px;

  background:
    linear-gradient(
      150deg,
      #fff0f2,
      #fff8ec
    );

  box-shadow:
    var(--shadow);

}


.about-art::before {

  content:
    "";

  position:
    absolute;

  width:
    180px;

  height:
    180px;

  left:
    -55px;

  top:
    -55px;

  border-radius:
    50%;

  background:
    var(--pistachio);

}


.about-art::after {

  content:
    "";

  position:
    absolute;

  width:
    165px;

  height:
    165px;

  right:
    -50px;

  bottom:
    -50px;

  border-radius:
    50%;

  background:
    var(--orange);

}


.about-bear-img {

  position:
    relative;

  z-index:
    3;

  width:
    245px;

  max-width:
    68%;

  height:
    auto;

  filter:
    drop-shadow(
      0 15px 21px
      rgba(
        76,
        42,
        30,
        0.11
      )
    );

}


/* =========================================================
   CTA
   ========================================================= */

.cta {

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    30px;

  padding:
    30px 35px;

  border-radius:
    30px;

  color:
    white;

  background:
    var(--ink);

}


.cta h2 {

  margin-bottom:
    10px;

  color:
    white;

  font-size:
    clamp(
      2rem,
      4vw,
      3.5rem
    );

}


.cta p {

  margin:
    0;

  color:
    #eee3dc;

}


/* =========================================================
   FOOTER
   ========================================================= */

.site-footer {

  padding:
    60px 0 30px;

  border-top:
    1px solid
    var(--line);

  background:
    #fffdf8;

}


.footer-grid {

  display:
    grid;

  grid-template-columns:
    1.4fr
    0.75fr
    0.75fr;

  gap:
    50px;

}


.footer-bottom {

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    20px;

  margin-top:
    40px;

  padding-top:
    22px;

  border-top:
    1px solid
    var(--line);

  color:
    var(--muted);

  font-size:
    0.85rem;

}


/* =========================================================
   CHAT
   ========================================================= */

.chat-button {

  position:
    fixed;

  z-index:
    1200;

  right:
    24px;

  bottom:
    24px;

  width:
    58px;

  height:
    58px;

  display:
    grid;

  place-items:
    center;

  border:
    0;

  border-radius:
    50%;

  color:
    white;

  background:
    var(--berry);

  cursor:
    pointer;

  box-shadow:
    0 16px 30px
    rgba(
      239,
      89,
      106,
      0.30
    );

}


.chat-panel {

  position:
    fixed;

  z-index:
    1190;

  right:
    24px;

  bottom:
    94px;

  width:
    min(
      380px,
      calc(
        100vw - 40px
      )
    );

  padding:
    24px;

  border:
    1px solid
    var(--line);

  border-radius:
    25px;

  background:
    white;

  box-shadow:
    var(--heavy-shadow);

  opacity:
    0;

  visibility:
    hidden;

  transform:
    translateY(
      15px
    );

  transition:
    opacity
      180ms ease,
    visibility
      180ms ease,
    transform
      180ms ease;

}


.chat-panel.open {

  opacity:
    1;

  visibility:
    visible;

  transform:
    translateY(
      0
    );

}


/* =========================================================
   KEYBOARD ACCESSIBILITY
   ========================================================= */

.fighter-card:focus-visible
.fighter-face {

  outline:
    3px solid
    rgba(
      239,
      89,
      106,
      0.55
    );

  outline-offset:
    4px;

}


/* =========================================================
   TABLET NAVIGATION / GENERAL LAYOUT
   ========================================================= */

@media
  (max-width: 1000px) {

  .nav {

    position:
      absolute;

    top:
      100%;

    left:
      20px;

    right:
      20px;

    display:
      none;

    flex-direction:
      column;

    align-items:
      stretch;

    gap:
      8px;

    padding:
      18px;

    border:
      1px solid
      var(--line);

    border-radius:
      22px;

    background:
      white;

    box-shadow:
      var(--heavy-shadow);

  }


  .nav.open {

    display:
      flex;

  }


  .menu-toggle {

    display:
      block;

  }


  .hero-grid {

    grid-template-columns:
      1fr;

  }


  .split,
  .about-grid {

    grid-template-columns:
      1fr;

  }


  .footer-grid {

    grid-template-columns:
      1fr 1fr;

  }

}


/* =========================================================
   TOUCH / MOBILE FIGHTER SYSTEM

   This applies if:
   1. screen is <= 900px
   OR
   2. device has no hover
   OR
   3. device has coarse touch pointer

   Therefore iPhone 12, iPhone 17 Pro,
   iPhone 17 Pro Max, iPads and touch devices
   all use the same behavior.

   NO 3D FLIPPING HERE.
   ========================================================= */

@media
  (max-width: 900px),
  (hover: none),
  (pointer: coarse) {


  /*
   * Arena becomes normal vertical layout.
   */

  .fighter-arena {

    position:
      relative !important;

    display:
      grid !important;

    grid-template-columns:
      1fr !important;

    gap:
      22px !important;

    width:
      100% !important;

    height:
      auto !important;

    margin-top:
      35px !important;

    perspective:
      none !important;

  }


  .arena-ring,
  .arena-center-light {

    display:
      none !important;

  }


  /*
   * Remove desktop positioning.
   */

  .fighter-card,
  .fighter-card-boss,
  .fighter-slot-1,
  .fighter-slot-2,
  .fighter-slot-3,
  .fighter-slot-4,
  .fighter-slot-5,
  .fighter-slot-6 {

    position:
      relative !important;

    left:
      auto !important;

    right:
      auto !important;

    top:
      auto !important;

    bottom:
      auto !important;

    width:
      100% !important;

    height:
      auto !important;

    min-height:
      0 !important;

    margin:
      0 !important;

    transform:
      none !important;

    perspective:
      none !important;

    animation:
      none !important;

    touch-action:
      manipulation !important;

  }


  /*
   * Destroy all 3D behavior.
   */

  .fighter-card-inner,
  .fighter-card.is-open
  .fighter-card-inner,
  .fighter-card.is-flipped
  .fighter-card-inner,
  .fighter-card.is-open-mobile
  .fighter-card-inner {

    position:
      relative !important;

    display:
      block !important;

    width:
      100% !important;

    height:
      auto !important;

    transform:
      none !important;

    transform-style:
      flat !important;

    perspective:
      none !important;

    transition:
      none !important;

  }


  /*
   * Front card remains visible.
   */

  .fighter-front,
  .fighter-card.is-open
  .fighter-front {

    position:
      relative !important;

    inset:
      auto !important;

    display:
      flex !important;

    width:
      100% !important;

    height:
      auto !important;

    min-height:
      420px !important;

    padding:
      20px !important;

    overflow:
      hidden !important;

    opacity:
      1 !important;

    visibility:
      visible !important;

    transform:
      none !important;

    backface-visibility:
      visible !important;

    -webkit-backface-visibility:
      visible !important;

    border:
      1px solid
      var(--line) !important;

    border-radius:
      28px !important;

    background:
      rgba(
        255,
        253,
        249,
        0.98
      ) !important;

  }


  .fighter-card-boss
  .fighter-front {

    min-height:
      500px !important;

    border:
      2px solid
      rgba(
        239,
        89,
        106,
        0.42
      ) !important;

    background:
      linear-gradient(
        145deg,
        #fff9ed,
        #fff1e4
        55%,
        #ffedf0
      ) !important;

  }


  /*
   * Back becomes hidden accordion.
   */

  .fighter-back,
  .boss-back {

    position:
      relative !important;

    inset:
      auto !important;

    display:
      flex !important;

    width:
      100% !important;

    height:
      auto !important;

    max-height:
      0 !important;

    margin:
      0 !important;

    padding:
      0 20px !important;

    overflow:
      hidden !important;

    opacity:
      0 !important;

    visibility:
      hidden !important;

    pointer-events:
      none !important;

    transform:
      none !important;

    backface-visibility:
      visible !important;

    -webkit-backface-visibility:
      visible !important;

    border:
      0 !important;

    border-radius:
      28px !important;

    transition:
      max-height
        450ms ease,
      opacity
        280ms ease,
      padding
        350ms ease,
      margin
        350ms ease !important;

  }


  /*
   * Tap opens description below.
   */

  .fighter-card.is-open
  .fighter-back {

    max-height:
      650px !important;

    margin-top:
      10px !important;

    padding:
      25px 20px 23px !important;

    opacity:
      1 !important;

    visibility:
      visible !important;

    pointer-events:
      auto !important;

    border:
      1px solid
      var(--line) !important;

    background:
      linear-gradient(
        145deg,
        #fff7ea,
        #ffedf0
      ) !important;

    box-shadow:
      0 15px 35px
      rgba(
        70,
        45,
        30,
        0.08
      ) !important;

  }


  /*
   * Front product images.
   */

  .fighter-image-stage {

    position:
      relative !important;

    width:
      100% !important;

    height:
      300px !important;

    display:
      flex !important;

    align-items:
      center !important;

    justify-content:
      center !important;

    overflow:
      visible !important;

  }


  .fighter-product-image {

    display:
      block !important;

    width:
      auto !important;

    height:
      auto !important;

    max-width:
      92% !important;

    max-height:
      285px !important;

    object-fit:
      contain !important;

    transform:
      none !important;

  }


  .fighter-card:hover
  .fighter-product-image {

    transform:
      none !important;

  }


  /*
   * Final Boss image.
   */

  .boss-image-stage {

    height:
      365px !important;

  }


  .boss-product-image {

    max-height:
      350px !important;

  }


  /*
   * Description image.
   */

  .fighter-back-image {

    display:
      block !important;

    width:
      auto !important;

    height:
      125px !important;

    max-width:
      150px !important;

    margin:
      10px auto 8px !important;

    object-fit:
      contain !important;

    transform:
      none !important;

  }


  .boss-back
  .fighter-back-image {

    height:
      155px !important;

    max-width:
      180px !important;

  }


  /*
   * Disable mouse-only visual effects.
   */

  .fighter-front::after,
  .fighter-glow {

    display:
      none !important;

  }


  /*
   * Mobile fighter text.
   */

  .fighter-face h3 {

    margin:
      13px 0 5px !important;

    text-align:
      center !important;

    font-size:
      1.45rem !important;

  }


  .fighter-back h3 {

    margin:
      7px 0 7px !important;

    font-size:
      1.55rem !important;

  }


  .fighter-back p {

    max-width:
      340px !important;

    margin:
      3px auto 15px !important;

    color:
      var(--muted) !important;

    text-align:
      center !important;

    font-size:
      0.96rem !important;

    line-height:
      1.55 !important;

  }


  .flip-hint {

    margin-top:
      auto !important;

    padding-top:
      13px !important;

    font-size:
      0.71rem !important;

  }


  /*
   * Open fighter emphasis.
   */

  .fighter-card.is-open
  .fighter-front {

    border-color:
      rgba(
        239,
        89,
        106,
        0.42
      ) !important;

    box-shadow:
      0 18px 42px
      rgba(
        70,
        45,
        30,
        0.11
      ) !important;

  }

}


/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media
  (max-width: 620px) {

  .container {

    width:
      min(
        calc(
          100% - 30px
        ),
        var(--container)
      );

  }


  .section {

    padding:
      70px 0;

  }


  h1 {

    font-size:
      clamp(
        3.4rem,
        17vw,
        5rem
      );

  }


  h2 {

    font-size:
      clamp(
        2.5rem,
        12vw,
        3.6rem
      );

  }


  .brand-logo {

    height:
      50px;

  }


  .header-inner {

    min-height:
      70px;

  }


  .hero {

    padding:
      48px 0 55px;

  }


  .hero-art {

    min-height:
      300px;

  }


  .hero-product-card {

    min-height:
      280px;

    padding:
      14px;

    border-radius:
      30px;

  }


  .hero-product-image {

    height:
      255px;

  }


  .calendar-wrap,
  .booking-box,
  .info-panel,
  .upcoming-events-panel {

    padding:
      21px;

  }


  .calendar-grid {

    gap:
      5px;

  }


  .cal-day {

    min-height:
      43px;

    font-size:
      0.82rem;

  }


  .form-grid {

    grid-template-columns:
      1fr;

  }


  .form-field.full {

    grid-column:
      auto;

  }


  .about-art {

    min-height:
      300px;

  }


  .about-bear-img {

    width:
      195px;

  }


  .cta {

    align-items:
      flex-start;

    flex-direction:
      column;

    padding:
      25px;

  }


  .footer-grid {

    grid-template-columns:
      1fr;

  }


  .footer-bottom {

    align-items:
      flex-start;

    flex-direction:
      column;

  }


  .chat-button {

    right:
      17px;

    bottom:
      17px;

  }


  .chat-panel {

    right:
      15px;

    bottom:
      86px;

  }

}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media
  (prefers-reduced-motion: reduce) {

  .fighter-card,
  .fighter-card-boss,
  .arena-ring-two,
  .boss-aura {

    animation:
      none !important;

  }


  .fighter-card-inner {

    transition:
      none !important;

  }


  html {

    scroll-behavior:
      auto;

  }

}