/* ==========================================================
   INESS Beauty — Mini App Shell
   Shop / Booking standalone experience
   ========================================================== */

body.iness-mini-page {
  --iness-mini-max: 720px;

  min-height: 100dvh;

  background:
    radial-gradient(
      circle at 50% -180px,
      rgba(255,255,255,.88),
      transparent 390px
    ),
    var(--iness-bg);
}


/* ----------------------------------------------------------
   Header
   ---------------------------------------------------------- */

.iness-mini-shell {
  position: sticky;
  z-index: 80;
  top: 0;

  width: 100%;

  padding:
    max(8px, env(safe-area-inset-top))
    max(14px, env(safe-area-inset-right))
    8px
    max(14px, env(safe-area-inset-left));

  background:
    linear-gradient(
      to bottom,
      rgba(245,241,235,.97),
      rgba(245,241,235,.91)
    );

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

.iness-mini-shell::after {
  content: "";

  position: absolute;
  left: 50%;
  bottom: 0;

  width:
    min(
      calc(100% - 28px),
      var(--iness-mini-max)
    );
  height: 1px;

  transform: translateX(-50%);

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(112,91,72,.12) 15%,
      rgba(112,91,72,.12) 85%,
      transparent
    );
}

.iness-mini-shell__inner {
  width: 100%;
  max-width: var(--iness-mini-max);
  min-height: 43px;

  margin: 0 auto;

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}


/* ----------------------------------------------------------
   Brand
   ---------------------------------------------------------- */

.iness-mini-shell__brand {
  min-width: 0;

  display: flex;
  flex-direction: column;

  line-height: 1;
}

.iness-mini-shell__name {
  overflow: hidden;

  color: var(--iness-text);

  font-family: var(--iness-font-display);
  font-size: 18px;
  font-weight: 400;
  letter-spacing: -.015em;

  white-space: nowrap;
  text-overflow: ellipsis;
}

.iness-mini-shell__section {
  margin-top: 5px;

  color: var(--iness-accent);

  font-family: var(--iness-font-ui);
  font-size: 8px;
  font-weight: 750;
  line-height: 1;
  letter-spacing: 1.65px;

  text-transform: uppercase;
}


/* ----------------------------------------------------------
   Full app button
   ---------------------------------------------------------- */

.iness-mini-shell__app {
  flex: 0 0 auto;

  width: 36px;
  height: 36px;

  padding: 0;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  border:
    1px solid
    rgba(112,91,72,.13);
  border-radius: 13px;

  background:
    rgba(255,253,249,.72);

  color: var(--iness-text);

  box-shadow:
    0 4px 18px
    rgba(55,42,28,.045);

  cursor: pointer;

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

  transition:
    transform .13s ease,
    background-color .15s ease,
    box-shadow .15s ease;
}

.iness-mini-shell__app svg {
  display: block;

  width: 16px;
  height: 16px;

  stroke: currentColor;
  stroke-width: 1.55;
  stroke-linecap: round;
  stroke-linejoin: round;

  fill: none;
}

.iness-mini-shell__app:active {
  transform: scale(.94);
}

.iness-mini-shell__app:focus-visible {
  outline: none;

  box-shadow:
    0 0 0 3px
    rgba(161,122,82,.10),
    0 4px 18px
    rgba(55,42,28,.045);
}


/* ----------------------------------------------------------
   Standalone shop integration
   Old shop logo is replaced by shared shell.
   ---------------------------------------------------------- */

body.iness-mini-page.iness-shop-scope
.tg-hide-brand {
  display: none !important;
}

body.iness-mini-page.iness-shop-scope
.hero {
  padding-top: 18px;
}


/* ----------------------------------------------------------
   Booking integration
   ---------------------------------------------------------- */

body.iness-booking-page
.wrap {
  padding-top: 0;
}


/* ----------------------------------------------------------
   Desktop / tablet
   ---------------------------------------------------------- */

@media (min-width: 760px) {
  .iness-mini-shell {
    padding-top:
      max(
        12px,
        env(safe-area-inset-top)
      );
  }

  .iness-mini-shell__inner {
    min-height: 48px;
  }

  .iness-mini-shell__name {
    font-size: 19px;
  }
}


/* ----------------------------------------------------------
   Reduced motion
   ---------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .iness-mini-shell__app {
    transition: none;
  }
}


/* ==========================================================
   INESS Beauty — Mini App UI-2 polish
   2026-09-17
   ========================================================== */


/* ----------------------------------------------------------
   SHELL — quieter and more compact
   ---------------------------------------------------------- */

body.iness-mini-page
.iness-mini-shell {
  padding-top:
    max(
      5px,
      env(safe-area-inset-top)
    );

  padding-bottom: 5px;
}

body.iness-mini-page
.iness-mini-shell__inner {
  min-height: 38px;
}

body.iness-mini-page
.iness-mini-shell__name {
  font-size: 17px;
}

body.iness-mini-page
.iness-mini-shell__section {
  margin-top: 4px;
  font-size: 7.5px;
  letter-spacing: 1.5px;
}

body.iness-mini-page
.iness-mini-shell__app {
  width: 34px;
  height: 34px;

  border-radius: 12px;

  background:
    rgba(255,253,249,.64);

  box-shadow:
    0 3px 14px
    rgba(55,42,28,.04);
}

body.iness-mini-page
.iness-mini-shell__app svg {
  width: 15px;
  height: 15px;
}


/* ----------------------------------------------------------
   CONSISTENT CONTENT WIDTH
   ---------------------------------------------------------- */

body.iness-mini-page {
  --iness-mini-content:
    680px;
}


/* ----------------------------------------------------------
   SHOP
   ---------------------------------------------------------- */

body.iness-mini-page.iness-shop-scope
.hero,
body.iness-mini-page.iness-shop-scope
.search-zone,
body.iness-mini-page.iness-shop-scope
.primary-filters,
body.iness-mini-page.iness-shop-scope
.mood-label,
body.iness-mini-page.iness-shop-scope
.moods,
body.iness-mini-page.iness-shop-scope
.section-head,
body.iness-mini-page.iness-shop-scope
.catalog {
  width: 100%;
  max-width:
    var(--iness-mini-content);

  margin-left: auto;
  margin-right: auto;
}


/* Hero becomes closer to full app */

body.iness-mini-page.iness-shop-scope
.hero {
  padding:
    16px
    18px
    7px;
}

body.iness-mini-page.iness-shop-scope
.hero-copy {
  margin-top: 0;
  max-width: 390px;
}

body.iness-mini-page.iness-shop-scope
.hero-copy h1 {
  font-size: 24px;
  line-height: 1.08;

  letter-spacing: -.018em;
}

body.iness-mini-page.iness-shop-scope
.hero-copy p {
  margin-top: 7px;

  font-size: 12.5px;
  line-height: 1.45;
}


/* Search/filter rhythm */

body.iness-mini-page.iness-shop-scope
.search-zone {
  padding:
    7px
    14px
    0;
}

body.iness-mini-page.iness-shop-scope
.search {
  min-height: 48px;

  padding:
    0
    44px
    0
    16px;

  border-radius: 15px;

  background:
    rgba(255,253,249,.94);

  box-shadow:
    0 5px 18px
    rgba(45,35,25,.035);
}

body.iness-mini-page.iness-shop-scope
.primary-filters {
  padding:
    9px
    14px
    2px;
}

body.iness-mini-page.iness-shop-scope
.mood-label {
  padding:
    13px
    17px
    6px;
}

body.iness-mini-page.iness-shop-scope
.moods {
  padding:
    0
    14px
    11px;
}

body.iness-mini-page.iness-shop-scope
.section-head {
  padding:
    11px
    16px
    11px;
}

body.iness-mini-page.iness-shop-scope
.section-title {
  font-size: 21px;
}


/* Product list */

body.iness-mini-page.iness-shop-scope
.catalog {
  padding:
    0
    11px;

  gap: 12px;
}

body.iness-mini-page.iness-shop-scope
.product {
  border-radius: 22px;

  box-shadow:
    0 8px 28px
    rgba(55,42,28,.045);
}


/* Cart bar — lighter, closer to native app */

body.iness-mini-page.iness-shop-scope
.cart-bar {
  left: 12px;
  right: 12px;

  width: auto;
  max-width: 656px;

  height: 54px;

  margin-left: auto;
  margin-right: auto;

  bottom:
    max(
      10px,
      env(safe-area-inset-bottom)
    );

  border-radius: 17px;

  box-shadow:
    0 11px 34px
    rgba(30,24,20,.14);
}

body.iness-mini-page.iness-shop-scope
.cart-circle {
  width: 31px;
  height: 31px;

  font-size: 12px;
}

body.iness-mini-page.iness-shop-scope
.cart-total {
  font-size: 17px;
}


/* More breathing room under products because cart is fixed */

body.iness-mini-page.iness-shop-scope {
  padding-bottom:
    calc(
      82px
      + env(safe-area-inset-bottom)
    );
}


/* ----------------------------------------------------------
   BOOKING
   ---------------------------------------------------------- */

body.iness-booking-page
.wrap {
  width: 100%;
  max-width:
    var(--iness-mini-content);

  margin-left: auto;
  margin-right: auto;

  padding-left: 14px;
  padding-right: 14px;
  padding-bottom:
    calc(
      24px
      + env(safe-area-inset-bottom)
    );
}


/* Hero — less empty / more app-like */

body.iness-booking-page
.hero {
  padding:
    18px
    4px
    12px;
}

body.iness-booking-page
.hero h1 {
  margin: 0;

  font-size: 29px;
  line-height: 1.06;

  letter-spacing: -.025em;
}

body.iness-booking-page
.hero p {
  margin:
    8px
    0
    0;

  max-width: 420px;

  font-size: 13px;
  line-height: 1.45;
}


/* Progress — elegant and quiet */

body.iness-booking-page
.progress {
  gap: 7px;

  margin:
    3px
    0
    18px;
}

body.iness-booking-page
.progress span {
  height: 3px;

  border-radius: 999px;

  background:
    rgba(80,68,58,.11);
}

body.iness-booking-page
.progress span.active {
  background:
    var(--iness-dark);
}


/* Step title spacing */

body.iness-booking-page
.step {
  padding-bottom: 8px;
}

body.iness-booking-page
.step > h2 {
  margin-bottom: 13px;
}


/* Service card — tighter premium layout */

body.iness-booking-page
.service-card {
  border-radius: 20px;

  padding:
    17px
    17px
    15px;

  box-shadow:
    0 7px 26px
    rgba(50,39,31,.04);
}

body.iness-booking-page
.service-card + .service-card {
  margin-top: 10px;
}

body.iness-booking-page
.service-name {
  font-size: 18px;
  line-height: 1.18;
}

body.iness-booking-page
.service-description {
  margin-top: 5px;

  font-size: 12px;
  line-height: 1.42;
}

body.iness-booking-page
.service-meta {
  margin-top: 13px;
}


/* Dates */

body.iness-booking-page
.date-grid {
  gap: 8px;
}

body.iness-booking-page
.booking-date-choice {
  min-height: 62px;

  border-radius: 16px;
}


/* Slots */

body.iness-booking-page
.slot-grid {
  gap: 8px;
}

body.iness-booking-page
.booking-slot-choice {
  min-height: 46px;

  border-radius: 14px;
}


/* Forms */

body.iness-booking-page
.booking-card {
  border-radius: 20px;
}

body.iness-booking-page
.booking-field,
body.iness-booking-page
.booking-phone {
  min-height: 50px;
}


/* Main CTA consistent with app */

body.iness-booking-page
.booking-button {
  min-height: 50px;

  border-radius: 15px;
}


/* Prevent visually dead tall areas */

body.iness-booking-page
#services,
body.iness-booking-page
#dates,
body.iness-booking-page
#slots {
  min-height: 0;
}


/* ----------------------------------------------------------
   LARGE SCREEN
   ---------------------------------------------------------- */

@media (min-width: 720px) {

  body.iness-booking-page
  .wrap {
    padding-left: 20px;
    padding-right: 20px;
  }

  body.iness-mini-page.iness-shop-scope
  .catalog {
    padding-left: 0;
    padding-right: 0;
  }

}


/* ----------------------------------------------------------
   VERY SMALL PHONE
   ---------------------------------------------------------- */

@media (max-width: 380px) {

  body.iness-booking-page
  .hero h1 {
    font-size: 27px;
  }

  body.iness-mini-page.iness-shop-scope
  .hero-copy h1 {
    font-size: 23px;
  }

}