/* =========================================================
   WOMANHOOD BEAUTY & CARE
   MAIN SERVICE CATEGORIES
   MODERN EDITORIAL LUXURY
   ========================================================= */


/* =========================================================
   SECTION
   ========================================================= */

.packages-section{

  --wbc-ivory:#f7f3ed;
  --wbc-paper:#fffdfa;
  --wbc-paper-soft:#fbf8f3;

  --wbc-charcoal:#272522;
  --wbc-brown:#665548;
  --wbc-muted:#8b8177;

  --wbc-gold:#b9975b;
  --wbc-gold-light:#d8bd89;

  --wbc-line:rgba(185,151,91,.22);

  width:100%;
  max-width:100%;

  margin:0;
  padding:78px 0 92px;

  box-sizing:border-box;

  overflow:hidden;
/*
  background:
    radial-gradient(
      circle at 8% 8%,
      rgba(185,151,91,.09),
      transparent 27%
    ),
    radial-gradient(
      circle at 92% 82%,
      rgba(102,85,72,.045),
      transparent 28%
    ),
    linear-gradient(
      180deg,
      #fbf8f3 0%,
      #f7f3ed 100%
    );
*/
  color:var(--wbc-charcoal);

  font-family:
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    sans-serif;
}


/* =========================================================
   GLOBAL BOX MODEL INSIDE COMPONENT
   ========================================================= */

.packages-section *,
.packages-section *::before,
.packages-section *::after{

  box-sizing:border-box;
}


/* =========================================================
   INNER CONTAINER
   ========================================================= */

.packages-section .packages-inner{

  width:100%;
  max-width:1180px;

  margin:0 auto;

  padding:
    0 20px;

  min-width:0;
}


/* =========================================================
   HEADING
   ========================================================= */

.packages-section .packages-heading{

  max-width:720px;

  margin:
    0 auto 46px;

  text-align:center;
}


/* Small editorial label */

.packages-section .packages-eyebrow{

  display:block;

  margin-bottom:12px;

  color:var(--wbc-gold);

  font-size:10px;
  font-weight:750;

  letter-spacing:2.2px;

  line-height:1.2;

  text-transform:uppercase;
}


/* Main title */

.packages-section h2{

  position:relative;

  margin:0;

  color:var(--wbc-charcoal);

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size:
    clamp(34px,4vw,48px);

  font-weight:500;

  line-height:1.05;

  letter-spacing:-1px;

  text-align:center;
}


/* Gold line */

.packages-section h2::after{

  content:"";

  display:block;

  width:42px;
  height:1px;

  margin:
    17px auto 0;

  background:var(--wbc-gold);
}


/* Intro */

.packages-section .packages-intro{

  max-width:620px;

  margin:
    18px auto 0;

  color:#766d65;

  font-size:13px;

  line-height:1.7;
}


/* =========================================================
   GRID
   ========================================================= */

.packages-section .packages-grid{

  width:100%;
  max-width:100%;

  min-width:0;

  margin:0;

  display:grid;

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

  gap:22px;
}


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

.packages-section .package-card{

  position:relative;

  width:100%;
  max-width:100%;

  min-width:0;

  margin:0;

  display:flex;
  flex-direction:column;

  overflow:hidden;

  background:
    rgba(255,253,250,.96);

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

  border-radius:24px;

  box-shadow:
    0 7px 25px rgba(55,43,34,.045);

  transition:
    transform .35s ease,
    box-shadow .35s ease,
    border-color .35s ease;
    
      border-color:
    rgba(185,151,91,.46);

  box-shadow:
    0 20px 50px rgba(55,43,34,.10);
}
}


.packages-section .package-card:hover{

  transform:translateY(-6px);

  border-color:
    rgba(185,151,91,.46);

  box-shadow:
    0 20px 50px rgba(55,43,34,.10);
}


/* =========================================================
   IMAGE WRAPPER
   ========================================================= */

.packages-section .package-img{

  position:relative;

  width:100%;
  height:225px;

  min-width:0;

  overflow:hidden;

  background:#e9e2d8;
}


/* Image */

.packages-section .package-img img{

  display:block;

  width:100%;
  height:100%;

  max-width:100%;

  object-fit:cover;

  object-position:center;

  transition:
    transform .65s cubic-bezier(.2,.7,.2,1);
}


.packages-section .package-card:hover
.package-img img{

  transform:scale(1.045);
}


/* Image cinematic overlay */

.packages-section .package-img::after{

  content:"";

  position:absolute;

  z-index:1;

  inset:0;

  background:
    linear-gradient(
      180deg,
      rgba(25,22,19,.02) 35%,
      rgba(25,22,19,.30) 100%
    );

  pointer-events:none;
}


/* =========================================================
   NUMBER
   IMPORTANT:
   The number now comes from the actual .package-number span.
   ========================================================= */

.packages-section .package-number{

  position:absolute;

  z-index:5;

  top:15px;
  left:15px;

  width:39px;
  height:39px;

  display:grid;

  place-items:center;

  border:
    1px solid var(--wbc-gold);

  border-radius:50%;

  background:
    #fff;

  color:var(--wbc-gold);

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size:14px;
  font-weight:500;

  line-height:1;

  letter-spacing:.2px;

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

  box-shadow:
    0 4px 14px rgba(30,25,20,.08);
}

.package-number::before {
    content: "";
    display: block;
    width: 22px;
    height: 22px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M12 4c-3 4-3 9 0 13c3-4 3-9 0-13z' stroke='%23c5a059' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M12 17c-4.5 0-8-3-8-7c3.5 0 6.5 2 8 7z' stroke='%23c5a059' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M12 17c4.5 0 8-3 8-7c-3.5 0-6.5 2-8 7z' stroke='%23c5a059' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M7 20h10' stroke='%23c5a059' stroke-width='1.2' stroke-linecap='round'/%3E%3C/svg%3E");    background-repeat: no-repeat;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

/* =========================================================
   BADGES
   ========================================================= */

.packages-section .package-badge,
.packages-section .package-badge_1,
.packages-section .package-badge_2{

  position:absolute;

  z-index:5;

  top:15px;
  right:15px;
  left:auto;

  display:inline-flex;

  align-items:center;
  justify-content:center;

  min-height:31px;

  max-width:calc(100% - 72px);

  padding:
    7px 11px;

  border:
    1px solid rgba(255,255,255,.35);

  border-radius:999px;

  background:
    rgba(39,37,34,.78);

  color:#fffdf9;

  font-size:9px;

  font-weight:750;

  letter-spacing:1.15px;

  line-height:1;

  text-transform:uppercase;

  white-space:nowrap;

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


.packages-section .package-badge_1{

  background:
    rgba(145,111,52,.87);
}


.packages-section .package-badge_2{

  background:
    rgba(102,60,52,.90);
}


/* =========================================================
   CONTENT
   ========================================================= */

.packages-section .package-content{

  width:100%;
  min-width:0;

  padding:
    22px 22px 21px;

  display:flex;
  flex-direction:column;

  flex:1 1 auto;
}


/* =========================================================
   TOP META
   ========================================================= */

.packages-section .package-meta-top{

  width:100%;
  min-width:0;

  display:flex;

  justify-content:space-between;
  align-items:center;

  gap:10px;

  min-height:24px;

  margin:
    0 0 15px;
}


/* =========================================================
   RATING
   ========================================================= */

.packages-section .package-rating{

  min-width:0;

  display:flex;

  align-items:center;

  gap:5px;

  white-space:nowrap;

  font-size:13px;
}


.packages-section .package-rating span:first-child{

  color:var(--wbc-gold);

  font-size:13px;

  letter-spacing:.7px;
}


.packages-section .package-rating span:nth-child(2){

  color:var(--wbc-charcoal);

  font-weight:750;
}


.packages-section .package-rating span:nth-child(3){

  color:#a0988f;

  font-size:12px;
}


/* =========================================================
   DURATION
   ========================================================= */

.packages-section .package-duration{

  min-width:0;

  display:flex;

  align-items:center;

  justify-content:flex-end;

  gap:5px;

  color:var(--wbc-muted);

  font-size:11px!important;

  line-height:2;

  white-space:nowrap;
}


.packages-section .package-duration svg{

  flex:0 0 auto;

  stroke:
    var(--wbc-gold);

  stroke-width:1.6;
}


.packages-section .package-duration > span{

  min-width:0;
}


/* =========================================================
   SERVICE TITLE
   ========================================================= */

.packages-section .package-header{

  min-width:0;

  margin:0;
}


.packages-section .package-header h3{

  margin:
    0 0 14px;

  color:var(--wbc-charcoal);

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size:25px;

  font-weight:500;

  line-height:1.12;

  letter-spacing:-.45px;

  overflow-wrap:anywhere;
}


/* =========================================================
   DECISION SUPPORT
   ========================================================= */

.packages-section .wbc-card-decisions{

  width:100%;
  min-width:0;

  flex:1 1 auto;

  padding:
    0 0 17px;

  border-bottom:
    1px solid #eee8df;
}


.packages-section .wbc-card-decisions ul{

  list-style:none;

  margin:0;

  padding:0;
}


.packages-section .wbc-card-decisions li{

  position:relative;

  margin:
    0 0 8px;

  padding-left:16px;

  color:#6f675f;

  font-size:12px;

  line-height:1.48;

  overflow-wrap:anywhere;
}


.packages-section .wbc-card-decisions li:last-child{

  margin-bottom:0;
}


.packages-section
.wbc-card-decisions li::before{

  content:"";

  position:absolute;

  left:0;
  top:.63em;

  width:5px;
  height:5px;

  border-radius:50%;

  background:
    var(--wbc-gold);

  box-shadow:
    0 0 0 3px rgba(185,151,91,.08);
}


/* =========================================================
   PRICE ROW
   ========================================================= */

.packages-section .package-price-row{

  width:100%;
  min-width:0;

  display:flex;

  align-items:flex-end;

  justify-content:space-between;

  gap:12px;

  padding:
    16px 0 18px;

  margin:0;

  border:0;
}


/* =========================================================
   PAYMENT
   ========================================================= */

.packages-section .pay-later{

  min-width:0;

  display:flex;

  align-items:center;

  gap:6px;

  color:#6c7569;

  font-size:10px;

  font-weight:500;

  line-height:1.3;
}


.packages-section .pay-later svg{

  flex:0 0 auto;

  stroke:#71856d;

  stroke-width:1.5;
}


/* =========================================================
   PRICE
   ========================================================= */

.packages-section .price-box{

  flex:0 0 auto;

  color:var(--wbc-brown);

  font-size:23px;

  font-weight:750;

  line-height:1;

  text-align:right;

  white-space:nowrap;
}


.packages-section .price-box span{

  display:block;

  margin:
    0 0 4px;

  color:#9b9187;

  font-size:8.5px;

  font-weight:600;

  letter-spacing:1.15px;

  line-height:1;

  text-transform:uppercase;
}


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

.packages-section .btn-book{

  position:relative;

  width:100%;
  min-width:0;

  min-height:49px;

  display:flex;

  align-items:center;

  justify-content:space-between;

  gap:10px;

  padding:
    0 13px 0 18px;

  border:
    1px solid #37332f;

  border-radius:14px;

  background:#2c2926;

  color:#fffdfa;

  text-decoration:none;

  font-size:11px;

  font-weight:700;

  letter-spacing:.4px;

  line-height:1.2;

  overflow:hidden;

  transition:
    background .25s ease,
    transform .25s ease,
    border-color .25s ease;
}


.packages-section .btn-book span{

  min-width:0;

  overflow-wrap:anywhere;
}


.packages-section .btn-book::after{

  content:"↗";

  width:29px;
  height:29px;

  display:grid;

  place-items:center;

  flex:
    0 0 29px;

  border:
    1px solid rgba(216,189,137,.45);

  border-radius:50%;

  color:var(--wbc-gold-light);

  font-size:14px;

  line-height:1;

  transition:
    transform .25s ease,
    background .25s ease;
}


.packages-section .btn-book:hover{

  background:#171614;

  border-color:#171614;

  color:#fffdfa;

  transform:translateY(-1px);
}


.packages-section .btn-book:hover::after{

  transform:rotate(8deg);

  background:
    rgba(216,189,137,.06);
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width:991px){

  .packages-section{

    padding:
      64px 0 76px;
  }


  .packages-section .packages-inner{

    padding:
      0 20px;
  }


  .packages-section .packages-grid{

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

    gap:18px;
  }


  .packages-section .package-img{

    height:220px;
  }

}


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

@media (max-width:640px){

  .packages-section{

    width:100%;

    padding:
      54px 0 66px;

    overflow:hidden;
  }


  /*
   IMPORTANT:
   No additional width restriction here.
   The inner container owns the mobile horizontal padding.
  */

  .packages-section .packages-inner{

    width:100%;
    max-width:none;

    margin:0;

    padding:
      0 15px;

    min-width:0;
  }


  .packages-section .packages-heading{

    width:100%;

    margin:
      0 auto 32px;
  }


  .packages-section h2{

    font-size:36px;

    letter-spacing:-.7px;
  }


  .packages-section .packages-intro{

    padding:
      0 4px;

    font-size:12.5px;

    line-height:1.65;
  }


  /* ONE FULL-WIDTH COLUMN */

  .packages-section .packages-grid{

    width:100%;
    max-width:none;

    margin:0;

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

    gap:15px;
  }


  /* FULL WIDTH CARD */

  .packages-section .package-card{

    width:100%;
    max-width:none;

    min-width:0;

    margin:0;

    border-radius:21px;
  }


  /* IMAGE */

  .packages-section .package-img{

    width:100%;

    height:215px;
  }


  /* CONTENT */

  .packages-section .package-content{

    width:100%;
    min-width:0;

    padding:
      20px 18px 18px;
  }


  /* TITLE */

  .packages-section .package-header h3{

    font-size:23px;

    line-height:1.12;
  }


  /* CTA */

  .packages-section .btn-book{

    min-height:49px;
  }

}


/* =========================================================
   SMALL PHONES
   ========================================================= */

@media (max-width:390px){

  .packages-section{

    padding:
      48px 0 60px;
  }


  .packages-section .packages-inner{

    padding:
      0 12px;
  }


  .packages-section .packages-grid{

    gap:13px;
  }


  .packages-section .package-card{

    border-radius:19px;
  }


  .packages-section .package-img{

    height:205px;
  }


  .packages-section .package-number{

    top:13px;
    left:13px;

    width:36px;
    height:36px;

    font-size:11px;
  }


  .packages-section .package-badge,
  .packages-section .package-badge_1,
  .packages-section .package-badge_2{

    top:13px;
    right:13px;

    min-height:29px;

    padding:
      6px 9px;

    font-size:8px;

    letter-spacing:1px;
  }


  .packages-section .package-content{

    padding:
      18px 16px 16px;
  }


  .packages-section .package-meta-top{

    align-items:flex-start;

    gap:8px;
  }


  .packages-section .package-rating{

    gap:4px;

    font-size:10px;
  }


  .packages-section .package-duration{

    font-size:9.5px;
  }


  .packages-section .package-header h3{

    font-size:22px;
  }


  .packages-section .wbc-card-decisions li{

    font-size:11.5px;
  }


  .packages-section .price-box{

    font-size:21px;
  }


  .packages-section .btn-book{

    min-height:47px;

    padding-left:15px;

    font-size:10.5px;
  }

}