/* =========================================================
   SASSY BELLE CANDLE CO., LLC
   MAIN WEBSITE STYLESHEET
   Southern Bluegrass • Artisan Luxury
========================================================= */


/* =========================================================
   BRAND COLORS & FONTS
========================================================= */

:root {

  --sage: #a8b5a0;
  --sage-dark: #7d8d75;
  --sage-light: #dce3d8;

  --lavender: #c8bdd0;
  --lavender-dark: #9d8ca8;
  --lavender-light: #e4ddea;

  --mauve: #b99aa3;
  --mauve-light: #e4d3d8;

  --brown: #765b4a;
  --brown-dark: #5d4638;
  --brown-light: #9a7e6b;

  --cream: #f7f1e7;
  --ivory: #fcf9f3;
  --white: #ffffff;

  --charcoal: #302d2a;

  --serif: "Cormorant Garamond", Georgia, serif;
  --sans: "Montserrat", Arial, sans-serif;
  --script: "Allura", "Brush Script MT", cursive;

}


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

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;

  background: var(--cream);
  color: var(--charcoal);

  font-family: var(--sans);
  line-height: 1.6;

  overflow-x: hidden;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font-family: inherit;
}

::selection {
  background: var(--mauve);
  color: var(--white);
}


/* =========================================================
   ANNOUNCEMENT BAR
========================================================= */

.announcement-bar {

  min-height: 43px;

  padding: 10px 20px;

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

  gap: 15px;

  background: var(--sage-dark);
  color: var(--ivory);

  font-family: var(--serif);
  font-size: 13px;

  letter-spacing: .18em;
  text-align: center;
  text-transform: uppercase;
}

.announcement-bar span {
  color: var(--ivory);
  opacity: .8;
}


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

.site-header {

  position: relative;
  z-index: 100;

  background: rgba(252, 249, 243, .98);

  border-bottom:
    1px solid rgba(118, 91, 74, .12);
}

.navbar {

  width: min(1400px, calc(100% - 70px));

  min-height: 108px;

  margin: auto;

  display: grid;

  grid-template-columns:
    1fr auto 1fr;

  align-items: center;

  gap: 35px;
}


/* =========================================================
   NAVIGATION
========================================================= */

.nav-left,
.nav-right {

  display: flex;
  align-items: center;

  gap: 34px;
}

.nav-right {
  justify-content: flex-end;
}

.nav-left a,
.nav-right a {

  position: relative;

  color: var(--brown-dark);

  font-family: var(--serif);
  font-size: 17px;
  font-weight: 500;

  white-space: nowrap;

  transition: color .25s ease;
}

.nav-left a:hover,
.nav-right a:hover {
  color: var(--mauve);
}


/* Navigation underline */

.nav-left a::after,
.nav-right a:not(.shop-button)::after {

  content: "";

  position: absolute;

  left: 0;
  bottom: -8px;

  width: 0;
  height: 1px;

  background: var(--mauve);

  transition: width .25s ease;
}

.nav-left a:hover::after,
.nav-right a:not(.shop-button):hover::after,
.nav-left a.active::after {

  width: 100%;
}

.nav-left small {
  font-size: 12px;
  margin-left: 2px;
}


/* =========================================================
   CENTER LOGO
========================================================= */

.main-logo {

  width: 128px;
  height: 128px;

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

  position: relative;
  z-index: 10;
}

.main-logo img {

  width: 128px;
  height: 128px;

  object-fit: cover;
  border-radius: 50%;
}


/* =========================================================
   SHOP BUTTON
========================================================= */

.shop-button {

  min-height: 49px;

  padding: 0 27px;

  display: inline-flex;

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

  gap: 8px;

  border-radius: 30px;

  background: var(--mauve);

  color: var(--ivory) !important;

  font-family: var(--serif) !important;
  font-size: 17px !important;

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

.shop-button:hover {

  background: var(--brown);

  transform: translateY(-2px);
}

.shop-button::after {
  display: none !important;
}


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

.mobile-menu {

  display: none;

  width: 45px;
  height: 45px;

  padding: 0;

  border:
    1px solid rgba(118, 91, 74, .2);

  background: transparent;

  cursor: pointer;
}

.mobile-menu span {

  display: block;

  width: 22px;
  height: 1px;

  margin: 5px auto;

  background: var(--brown);

  transition: .25s ease;
}


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

.hero {

  position: relative;

  min-height: 620px;

  display: flex;
  align-items: stretch;

  overflow: hidden;

  background: var(--cream);
}


/* Hero photograph */

.hero-photo {

  position: absolute;

  inset: 0;

  background-image:
    url("assets/A99FE850-9B03-426E-965D-B580A9F09220.png");

  background-position: center;
  background-size: cover;

  transform: scale(1.01);
}


/* Hero overlay */

.hero-overlay {

  position: absolute;

  inset: 0;

  background:

    linear-gradient(
      90deg,

      rgba(252, 249, 243, .10) 0%,

      rgba(252, 249, 243, .20) 40%,

      rgba(247, 241, 231, .82) 68%,

      rgba(247, 241, 231, .96) 100%
    );
}


/* Hero content */

.hero-content {

  position: relative;
  z-index: 2;

  width: min(
    1400px,
    calc(100% - 70px)
  );

  margin: auto;

  display: grid;

  grid-template-columns:
    1fr 1.15fr;

  align-items: center;

  gap: 60px;

  padding: 55px 0;
}


/* Hero logo */

.hero-logo {

  display: flex;

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

.hero-logo img {

  width: min(340px, 75%);

  border-radius: 50%;

  filter:
    drop-shadow(
      0 15px 25px
      rgba(60, 45, 35, .15)
    );
}


/* Hero copy */

.hero-copy {

  max-width: 650px;

  text-align: center;
}

.script-heading {

  margin-bottom: -5px;

  color: var(--brown-dark);

  font-family: var(--script);

  font-size:
    clamp(45px, 5vw, 75px);

  line-height: 1;
}

.hero h1 {

  color: var(--brown-dark);

  font-family: var(--serif);

  font-size:
    clamp(45px, 5vw, 70px);

  font-weight: 600;

  line-height: .95;

  text-transform: uppercase;

  letter-spacing: .04em;
}

.hero-copy > p:not(.script-heading) {

  max-width: 560px;

  margin: 20px auto;

  color: var(--brown-dark);

  font-family: var(--serif);

  font-size: 21px;

  line-height: 1.35;
}


/* =========================================================
   DECORATIVE DIVIDER
========================================================= */

.little-divider {

  display: flex;

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

  gap: 10px;

  margin: 17px auto;
}

.little-divider i {

  display: block;

  width: 45px;
  height: 1px;

  background: var(--brown);
}

.little-divider span {

  color: var(--mauve);

  font-size: 10px;
}


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

.hero-buttons {

  display: flex;

  justify-content: center;

  flex-wrap: wrap;

  gap: 10px;

  margin-top: 25px;
}

.category-button {

  min-width: 145px;
  min-height: 44px;

  padding: 9px 20px;

  display: inline-flex;

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

  border-radius: 30px;

  color: var(--white);

  font-family: var(--serif);

  font-size: 15px;

  letter-spacing: .08em;

  text-transform: uppercase;

  box-shadow:
    0 6px 15px
    rgba(60, 45, 35, .10);

  transition:
    transform .25s ease,
    box-shadow .25s ease;
}

.category-button:hover {

  transform: translateY(-3px);

  box-shadow:
    0 10px 20px
    rgba(60, 45, 35, .15);
}

.category-button.sage {
  background: var(--sage-dark);
}

.category-button.mauve {
  background: var(--mauve);
}

.category-button.lavender {
  background: var(--lavender-dark);
}


/* =========================================================
   BRAND PROMISES
========================================================= */

.promises {

  min-height: 125px;

  padding: 20px 5vw;

  display: grid;

  grid-template-columns:
    repeat(4, 1fr);

  align-items: center;

  gap: 20px;

  background: var(--ivory);

  border-bottom:
    1px solid rgba(118, 91, 74, .12);
}

.promise {

  min-height: 70px;

  display: flex;

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

  gap: 16px;

  padding: 5px 20px;

  border-right:
    1px solid rgba(118, 91, 74, .25);
}

.promise:last-child {
  border-right: 0;
}

.promise-icon {

  width: 52px;
  height: 52px;

  flex-shrink: 0;

  display: flex;

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

  border-radius: 50%;

  background: #eadfd8;

  color: var(--brown);

  font-family: var(--serif);

  font-size: 27px;
}

.promise strong {

  display: block;

  color: var(--brown);

  font-family: var(--serif);

  font-size: 15px;

  font-weight: 600;

  letter-spacing: .08em;
}

.promise span {

  display: block;

  color: var(--brown-light);

  font-family: var(--serif);

  font-size: 15px;

  line-height: 1.25;
}


/* =========================================================
   SHOP CATEGORIES
========================================================= */

.shop-categories {

  padding:
    25px 2.2vw 30px;

  display: grid;

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

  gap: 12px;

  background: var(--cream);
}

.category-card {

  position: relative;

  min-height: 350px;

  overflow: hidden;

  border-radius: 7px;

  background: var(--sage-light);

  transition:
    transform .35s ease;
}

.category-card:hover {
  transform: translateY(-5px);
}

.category-image {

  position: absolute;

  inset: 0;

  background-position: center;
  background-size: cover;

  transition:
    transform .5s ease;
}

.category-card:hover
.category-image {

  transform: scale(1.04);
}


/* =========================================================
   PRODUCT IMAGES
========================================================= */

.candle-image {

  background:

    linear-gradient(
      rgba(65, 48, 38, .08),
      rgba(65, 48, 38, .08)
    ),

    url("assets/84D81C6B-CEC8-4B19-8C51-52285CA076A0.png")
    center / cover,

    var(--sage-light);
}


.minis-image {

  background:

    linear-gradient(
      rgba(65, 48, 38, .06),
      rgba(65, 48, 38, .06)
    ),

    url("assets/C93B361D-7C9D-4F1D-BC28-1D8A29E8AA83.png")
    center / cover,

    var(--lavender-light);
}


.fragrance-image {

  background:

    linear-gradient(
      rgba(65, 48, 38, .06),
      rgba(65, 48, 38, .06)
    ),

    url("assets/D0E70EB3-2B4B-478E-A06B-3CD5E94860ED.png")
    center / cover,

    var(--mauve-light);
}


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

.category-content {

  position: absolute;

  z-index: 2;

  right: 20px;
  bottom: 20px;

  width:
    min(78%, 350px);

  padding: 22px 25px;

  background:
    rgba(252, 249, 243, .94);

  text-align: center;

  box-shadow:
    0 10px 25px
    rgba(60, 45, 35, .10);
}

.category-script {

  display: block;

  color: var(--brown-dark);

  font-family: var(--script);

  font-size: 44px;

  line-height: 1;
}

.category-content p {

  margin: 8px 0 15px;

  color: var(--brown);

  font-family: var(--serif);

  font-size: 14px;

  line-height: 1.3;

  letter-spacing: .08em;
}

.category-shop-button {

  min-height: 40px;

  padding: 8px 18px;

  display: inline-flex;

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

  gap: 7px;

  border-radius: 30px;

  background: var(--sage-dark);

  color: var(--white);

  font-family: var(--serif);

  font-size: 14px;

  letter-spacing: .06em;
}

.minis-card
.category-shop-button {

  background: var(--mauve);
}

.fragrance-card
.category-shop-button {

  background: var(--lavender-dark);
}


/* =========================================================
   BLUEGRASS STORY
========================================================= */

.bluegrass-story {

  position: relative;

  min-height: 350px;

  overflow: hidden;

  display: flex;

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

  text-align: center;

  background: var(--brown);
}

.bluegrass-background {

  position: absolute;

  inset: 0;

  background:

    linear-gradient(
      rgba(247, 241, 231, .80),
      rgba(247, 241, 231, .88)
    ),

    url("assets/9FCE4801-09C3-4F65-9F54-085B392BD931.png")
    center / cover;

  opacity: .95;
}

.bluegrass-content {

  position: relative;

  z-index: 2;

  width:
    min(700px, calc(100% - 40px));

  padding: 70px 20px;
}

.section-kicker {

  color: var(--brown);

  font-family: var(--serif);

  font-size: 13px;

  font-weight: 600;

  letter-spacing: .28em;

  text-transform: uppercase;
}

.bluegrass-content
p:not(.section-kicker) {

  max-width: 680px;

  margin: 18px auto;

  color: var(--brown-dark);

  font-family: var(--serif);

  font-size: 21px;

  line-height: 1.4;
}


/* =========================================================
   OUTLINE BUTTON
========================================================= */

.outline-button {

  display: inline-flex;

  min-height: 45px;

  padding: 9px 25px;

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

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

  color: var(--brown);

  font-family: var(--serif);

  font-size: 15px;

  text-transform: uppercase;

  letter-spacing: .1em;

  transition: .25s ease;
}

.outline-button:hover {

  background: var(--brown);

  color: var(--ivory);
}


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

.fragrance-section {

  padding:
    105px 7vw;

  background: var(--ivory);

  text-align: center;
}

.section-heading {

  max-width: 760px;

  margin: auto;
}

.section-heading h2 {

  margin: 7px 0 15px;

  color: var(--brown);

  font-family: var(--serif);

  font-size:
    clamp(44px, 5vw, 68px);

  font-weight: 500;

  line-height: .98;
}

.section-heading h2 em {

  color: var(--sage-dark);

  font-weight: 400;
}

.section-heading > p:last-child {

  max-width: 620px;

  margin: auto;

  color: var(--brown-light);

  font-family: var(--serif);

  font-size: 18px;
}


/* Fragrance cards */

.fragrance-notes {

  max-width: 1050px;

  margin: 65px auto 0;

  display: grid;

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

  gap: 20px;
}

.fragrance-notes > div {

  padding: 35px 25px;

  border-top:
    1px solid rgba(118, 91, 74, .25);

  border-bottom:
    1px solid rgba(118, 91, 74, .25);
}

.fragrance-notes span {

  display: block;

  margin-bottom: 12px;

  color: var(--mauve);

  font-size: 11px;

  letter-spacing: .2em;
}

.fragrance-notes strong {

  display: block;

  color: var(--brown);

  font-family: var(--serif);

  font-size: 27px;

  font-weight: 500;
}

.fragrance-notes p {

  margin-top: 7px;

  color: var(--brown-light);

  font-family: var(--serif);

  font-size: 15px;
}


/* =========================================================
   FRAGRANCE PHOTOGRAPHY
========================================================= */

.fragrance-notes {
  align-items: stretch;
}

.fragrance-card {
  overflow: hidden;
  padding: 0 !important;
  border: 1px solid rgba(118, 91, 74, .18) !important;
  background: var(--cream);
}

.fragrance-photo {
  width: 100%;
  height: 220px;
  overflow: hidden;
}

.fragrance-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .45s ease;
}

.fragrance-card:hover .fragrance-photo img {
  transform: scale(1.04);
}

.fragrance-card-content {
  padding: 28px 22px 32px;
}

.fragrance-card-content span {
  margin-bottom: 10px;
}


/* =========================================================
   CONTACT PHOTOGRAPHY
========================================================= */

.contact-section {
  position: relative;
}

.contact-photo {
  max-width: 1050px;
  height: 300px;
  margin: 0 auto 25px;
  overflow: hidden;
}

.contact-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* =========================================================
   CANDLE CARE
========================================================= */

.candle-care {

  min-height: 480px;

  padding: 85px 8vw;

  display: grid;

  grid-template-columns:
    1fr 1fr;

  align-items: center;

  gap: 60px;

  background:

    linear-gradient(
      90deg,

      var(--cream) 0%,
      var(--cream) 52%,

      var(--sage-light) 52%,
      var(--sage-light) 100%
    );
}

.care-content {
  max-width: 600px;
}

.care-content h2 {

  margin: 10px 0 25px;

  color: var(--brown);

  font-family: var(--serif);

  font-size:
    clamp(45px, 5vw, 65px);

  font-weight: 500;

  line-height: .98;
}

.care-content h2 em {

  display: block;

  color: var(--sage-dark);
}

.care-content
> p:not(.section-kicker) {

  max-width: 530px;

  color: var(--brown-light);

  font-family: var(--serif);

  font-size: 18px;
}

.text-link {

  display: inline-block;

  margin-top: 25px;

  color: var(--brown);

  font-family: var(--serif);

  font-size: 16px;

  border-bottom:
    1px solid var(--brown);
}

.care-mark {

  display: flex;

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

.care-mark img {

  width:
    min(330px, 70%);

  opacity: .75;

  filter:
    drop-shadow(
      0 15px 25px
      rgba(70, 55, 45, .08)
    );
}


/* =========================================================
   CONTACT
========================================================= */

.contact-section {

  padding: 85px 6vw;

  background: var(--ivory);
}

.contact-card {

  max-width: 1050px;

  margin: auto;

  padding: 75px 35px;

  text-align: center;

  background:

    linear-gradient(
      135deg,
      #e4e9df,
      #eee5e7
    );

  border:
    1px solid rgba(118, 91, 74, .12);
}

.contact-card h2 {

  margin: 10px auto 20px;

  max-width: 700px;

  color: var(--brown);

  font-family: var(--serif);

  font-size:
    clamp(45px, 5vw, 67px);

  font-weight: 500;

  line-height: .98;
}

.contact-card h2 em {

  display: block;

  color: var(--sage-dark);
}

.contact-card
> p:not(.section-kicker) {

  max-width: 600px;

  margin: auto;

  color: var(--brown-light);

  font-family: var(--serif);

  font-size: 18px;
}


/* Contact buttons */

.contact-buttons {

  margin-top: 30px;

  display: flex;

  justify-content: center;

  flex-wrap: wrap;

  gap: 10px;
}

.contact-buttons a {

  min-width: 130px;

  padding: 10px 20px;

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

  color: var(--brown);

  font-family: var(--serif);

  font-size: 14px;

  transition: .25s ease;
}

.contact-buttons a:hover {

  background: var(--brown);

  color: var(--ivory);
}


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

.site-footer {

  padding: 65px 6vw 25px;

  background: var(--brown);

  color: var(--ivory);

  text-align: center;
}

.footer-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 12px;
}

.site-footer .footer-logo img {
  width: 120px;
  height: 120px;
  max-width: 120px;
  object-fit: cover;
  display: block;
  margin: 0 auto;
  border-radius: 50%;
  filter: none;
  opacity: 1;
  border: 2px solid rgba(252, 249, 243, .7);
  box-shadow: 0 8px 22px rgba(48, 45, 42, .22);
}

.footer-script {
  margin: 12px 0 30px;
  color: var(--ivory);
  font-family: var(--script);
  font-size: 30px;
}

.footer-navigation {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 25px;
}

.footer-navigation a {
  color: var(--ivory);
  font-family: var(--serif);
  font-size: 15px;
  transition: color .25s ease;
}

.footer-navigation a:hover {
  color: var(--mauve-light);
}

.footer-bottom {
  max-width: 1200px;
  margin: 45px auto 0;
  padding-top: 18px;
  display: flex;
  justify-content: space-between;
  gap: 20px;
  border-top: 1px solid rgba(252, 249, 243, .2);
  color: rgba(252, 249, 243, .65);
  font-size: 10px;
  letter-spacing: .06em;
}

@media (max-width: 600px) {
  .site-footer {
    padding: 50px 20px 22px;
  }

  .site-footer .footer-logo img {
    width: 96px;
    height: 96px;
    max-width: 96px;
  }

  .footer-script {
    font-size: 26px;
  }

  .footer-bottom {
    flex-direction: column;
    align-items: center;
    gap: 8px;
    margin-top: 35px;
    text-align: center;
  }
}


/* =========================================================
   DESKTOP HERO REFINEMENT
========================================================= */

@media (min-width: 1051px) {

  /* Remove the logo from the hero banner without changing
     the established position of the hero text. */
  .hero-logo {
    visibility: hidden;
  }

  /* Give the copy a cleaner, more readable field against
     the photograph while keeping the text in its current position. */
  .hero-overlay {
    background:
      linear-gradient(
        90deg,
        rgba(252, 249, 243, .06) 0%,
        rgba(252, 249, 243, .12) 42%,
        rgba(247, 241, 231, .90) 68%,
        rgba(247, 241, 231, .985) 100%
      );
  }

  .hero-copy {
    text-shadow:
      0 1px 2px rgba(252, 249, 243, .45);
  }

  .hero h1,
  .script-heading {
    text-shadow:
      0 2px 4px rgba(252, 249, 243, .55);
  }

}


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

@media (max-width: 1050px) {

  .navbar {

    width:
      calc(100% - 35px);

    gap: 20px;
  }

  .nav-left,
  .nav-right {
    gap: 18px;
  }

  .nav-left a,
  .nav-right a {
    font-size: 15px;
  }

  .main-logo,
  .main-logo img {

    width: 105px;
    height: 105px;
  }

  .main-logo,
  .main-logo img {
    border-radius: 50%;
  }

  .hero-content {

    width:
      calc(100% - 40px);
  }

  .promises {

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

  .promise:nth-child(2) {
    border-right: 0;
  }

  .promise:nth-child(-n + 2) {

    border-bottom:
      1px solid rgba(118, 91, 74, .15);

    padding-bottom: 15px;
  }

}


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

@media (max-width: 850px) {

  .announcement-bar {

    font-size: 9px;

    letter-spacing: .12em;

    gap: 7px;
  }


  .navbar {

    min-height: 82px;

    display: flex;

    justify-content: space-between;

    position: relative;
  }


  .mobile-menu {
    display: block;
  }


  .main-logo,
  .main-logo img {

    width: 82px;
    height: 82px;
    border-radius: 50%;
  }


  .nav-left,
  .nav-right {

    display: none;

    position: absolute;

    left: 0;
    right: 0;

    width: 100%;

    padding:
      15px 25px;

    flex-direction: column;

    align-items: stretch;

    gap: 0;

    background: var(--ivory);

    box-shadow:
      0 12px 25px
      rgba(60, 45, 35, .10);
  }


  .nav-left {
    top: 82px;
  }


  .nav-right {
    top: 297px;
  }


  .nav-left.mobile-open,
  .nav-right.mobile-open {
    display: flex;
  }


  .nav-left a,
  .nav-right a {

    padding: 13px 5px;

    border-bottom:
      1px solid rgba(118, 91, 74, .12);

    font-size: 17px;
  }


  .nav-left a::after,
  .nav-right a::after {
    display: none;
  }


  .shop-button {
    margin-top: 10px;
  }


  /* HERO */

  .hero {
    min-height: 680px;
  }


  .hero-photo {

    background-position:
      35% center;
  }


  .hero-overlay {

    background:

      linear-gradient(
        90deg,

        rgba(247, 241, 231, .75),

        rgba(247, 241, 231, .92)
      );
  }


  .hero-content {

    grid-template-columns: 1fr;

    gap: 5px;

    padding: 45px 0;
  }


  .hero-logo img {
    width: 180px;
  }


  .hero-copy {
    margin: auto;
  }


  .hero h1 {
    font-size: 48px;
  }


  .script-heading {
    font-size: 53px;
  }


  .hero-copy
  > p:not(.script-heading) {

    font-size: 18px;
  }


  /* PROMISES */

  .promises {

    grid-template-columns:
      1fr 1fr;

    padding: 20px;
  }


  .promise {
    padding: 10px;
  }


  /* CATEGORY CARDS */

  .shop-categories {

    grid-template-columns: 1fr;

    padding: 15px;
  }


  .category-card {
    min-height: 390px;
  }


  /* FRAGRANCE */

  .fragrance-notes {

    grid-template-columns: 1fr;

    max-width: 500px;

    margin-top: 40px;
  }


  /* CANDLE CARE */

  .candle-care {

    grid-template-columns: 1fr;

    padding: 80px 8vw;

    text-align: center;

    background: var(--cream);
  }


  .care-content {
    margin: auto;
  }


  .care-content
  > p:not(.section-kicker) {

    margin: auto;
  }


  .care-mark {
    display: none;
  }


  /* FOOTER */

  .footer-bottom {

    flex-direction: column;

    text-align: center;
  }

}


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

@media (max-width: 550px) {

  .announcement-bar {

    min-height: 38px;

    padding: 8px 10px;

    font-size: 7px;

    letter-spacing: .1em;
  }


  .navbar {

    width:
      calc(100% - 25px);
  }


  .main-logo,
  .main-logo img {

    width: 72px;
    height: 72px;
    border-radius: 50%;
  }


  .nav-left {
    top: 82px;
  }


  .nav-right {
    top: 310px;
  }


  /* HERO */

  .hero {
    min-height: 690px;
  }


  .hero-content {

    width:
      calc(100% - 30px);

    padding: 35px 0;
  }


  .hero-logo img {
    width: 155px;
  }


  .script-heading {
    font-size: 48px;
  }


  .hero h1 {
    font-size: 40px;
  }


  .hero-copy
  > p:not(.script-heading) {

    font-size: 17px;
  }


  .hero-buttons {
    gap: 7px;
  }


  .category-button {

    min-width: 125px;

    padding: 8px 13px;

    font-size: 12px;
  }


  /* PROMISES */

  .promises {

    grid-template-columns: 1fr;

    gap: 0;

    padding: 10px 20px;
  }


  .promise {

    justify-content: flex-start;

    border-right: 0 !important;

    border-bottom:
      1px solid rgba(118, 91, 74, .15);

    padding: 17px 5px;
  }


  .promise:last-child {
    border-bottom: 0;
  }


  .promise-icon {

    width: 45px;
    height: 45px;

    font-size: 23px;
  }


  /* CATEGORY CARDS */

  .category-card {
    min-height: 340px;
  }


  .category-content {

    right: 12px;
    bottom: 12px;

    width:
      calc(100% - 24px);

    padding: 20px 15px;
  }


  .category-script {
    font-size: 39px;
  }


  /* BLUEGRASS */

  .bluegrass-story {
    min-height: 390px;
  }


  .bluegrass-content {
    padding: 55px 10px;
  }


  .bluegrass-content
  p:not(.section-kicker) {

    font-size: 18px;
  }


  /* FRAGRANCE */

  .fragrance-section {

    padding: 75px 25px;
  }


  .section-heading h2 {
    font-size: 47px;
  }


  .section-heading
  > p:last-child {

    font-size: 17px;
  }


  /* CANDLE CARE */

  .candle-care {

    padding: 75px 25px;
  }


  .care-content h2 {
    font-size: 48px;
  }


  /* CONTACT */

  .fragrance-photo {
    height: 190px;
  }

  .contact-photo {
    height: 220px;
    margin-bottom: 15px;
  }

  .contact-section {

    padding: 60px 15px;
  }


  .contact-card {

    padding: 55px 20px;
  }


  .contact-card h2 {
    font-size: 48px;
  }


  /* FOOTER */

  .footer-navigation {

    gap: 15px;

    flex-direction: column;
  }


  .footer-bottom {
    font-size: 9px;
  }

}