/* ============================================================
   Toys & Gifts — design refinement layer.
   Loaded after style.css. Purely additive polish: unified gold
   accent, elevated cards, softer surfaces, micro-interactions,
   scroll reveal. Delete the <link> to return to the base look.
   ============================================================ */
:root {
  --gold:#a3763a;
  --gold-deep:#7d5726;
  --gold-soft:#e8d9c2;
  --shadow-sm:0 1px 2px #1c130a0a,0 4px 12px #1c130a0d;
  --shadow-md:0 2px 6px #1c130a0f,0 14px 34px -8px #1c130a1f;
  --ease:cubic-bezier(.4,.14,.2,1);
}

::selection {
  background:var(--gold-soft);
  color:#1a1208;
}

button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible {
  outline-color:var(--gold);
  outline-offset:3px;
  border-radius:3px;
}

/* --- Header: stays with the reader, lifts once the page scrolls --- */
.site-header {
  position:sticky;
  top:0;
  z-index:20;
  /* isolate: the logo's mix-blend-mode repaints wrong inside a sticky layer. */
  isolation:isolate;
  max-width:100%;
  padding-inline:6.3%;
  background:#fdfcfa;
  border-bottom:1px solid transparent;
  transition:box-shadow .3s var(--ease),border-color .3s var(--ease);
}

.site-header.is-stuck {
  box-shadow:var(--shadow-sm);
  border-bottom-color:#00000010;
}

.desktop-nav a:hover {
  color:var(--gold-deep);
}

.nav-dropdown {
  position:relative;
}

.nav-dropdown summary {
  display:flex;
  align-items:center;
  gap:.35rem;
  padding:.65rem 0;
  list-style:none;
  cursor:pointer;
  transition:color .2s var(--ease);
}

.nav-dropdown summary::-webkit-details-marker { display:none; }
.nav-dropdown summary:hover { color:var(--gold-deep); }
.nav-dropdown summary .ph { font-size:.75rem; transition:transform .25s var(--ease); }
.nav-dropdown[open] summary .ph { transform:rotate(180deg); }

.nav-dropdown-menu {
  position:absolute;
  z-index:8;
  top:calc(100% + .35rem);
  left:50%;
  min-width:11rem;
  padding:.55rem;
  border:1px solid #e5dace;
  border-radius:7px;
  background:#fffdfb;
  box-shadow:0 16px 38px #4d321a1c;
  transform:translate(-50%,-6px);
  opacity:0;
  animation:nav-menu-in .24s var(--ease) forwards;
}

.nav-dropdown-menu a {
  display:block;
  padding:.7rem .8rem;
  border-radius:4px;
  font-size:.9rem;
}

.nav-dropdown-menu a:hover {
  background:#f3ece4;
  color:var(--gold-deep);
}

.nav-dropdown-menu a:after { display:none!important; }

@keyframes nav-menu-in {
  to { opacity:1; transform:translate(-50%,0); }
}

/* Navbar search: navigation gives way to a focused, full-width search field. */
.nav-stage {
  position:relative;
  flex:1;
  min-width:0;
  display:flex;
  justify-content:center;
  align-items:center;
}

.desktop-nav {
  transition:opacity .22s var(--ease),transform .3s var(--ease),visibility 0s linear .3s;
}

.nav-search-form {
  position:absolute;
  inset:50% 0 auto;
  transform:translateY(calc(-50% + 8px)) scaleX(.96);
  transform-origin:center;
  display:flex;
  align-items:center;
  gap:.75rem;
  width:100%;
  max-width:52rem;
  margin:auto;
  padding:.65rem .85rem .65rem 1.05rem;
  border:0;
  border-radius:6px;
  background:#fffdfaf2;
  box-shadow:0 10px 30px #6f4b2014;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .24s var(--ease),transform .34s var(--ease),visibility 0s linear .34s;
}

.nav-search-form>.ph {
  flex:0 0 auto;
  color:var(--gold-deep);
  font-size:1.25rem;
}

.nav-search-input {
  min-width:0;
  flex:1;
  border:0;
  outline:0;
  background:transparent;
  color:#17130f;
  font:500 1rem/1.4 'DM Sans',sans-serif;
}

.nav-search-input::placeholder {
  color:#81776b;
}

.nav-search-close {
  width:2rem;
  height:2rem;
  display:grid;
  place-items:center;
  border:0;
  border-radius:50%;
  background:#efe7dd;
  font-size:1.1rem;
  transition:background .2s var(--ease),transform .2s var(--ease);
}

.nav-search-close:hover {
  background:#e2d2bf;
  transform:rotate(6deg);
}

.site-header.search-open .desktop-nav {
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transform:translateY(-8px);
}

.site-header.search-open .nav-search-form {
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transform:translateY(-50%) scaleX(1);
  transition-delay:.08s,0s,0s;
}

.site-header.search-open [data-nav-search] {
  color:var(--gold-deep);
}

@media(max-width:767px) {
  .announcement {
    min-height:0;
    display:flex;
    align-items:center;
    border-top:0;
  }
  .announcement-inner {
    display:grid;
    grid-template-columns:1fr;
    gap:.6rem;
    width:100%;
    min-height:0;
    padding:.7rem 1rem .75rem;
    font-size:.86rem;
    font-weight:550;
    line-height:1.2;
    letter-spacing:.015em;
    text-align:center;
  }
  .announcement-promise {
    display:none;
  }
  .announcement-inner .announcement-actions {
    display:flex;
    justify-content:center;
    gap:1.35rem;
    width:100%;
  }
  body.mobile-nav-open { overflow:hidden; }
  .mobile-nav-backdrop:not([hidden]) {
    display:block;
    position:fixed;
    z-index:29;
    inset:0;
    background:#17120d66;
    opacity:0;
    transition:opacity .3s var(--ease);
  }
  .mobile-nav-backdrop.is-open { opacity:1; }
  .mobile-nav:not([hidden]) {
    display:flex;
    position:fixed;
    z-index:30;
    top:0;
    right:0;
    bottom:0;
    width:min(86vw,24rem);
    padding:1.25rem 1.4rem 2rem;
    overflow-y:auto;
    flex-direction:column;
    grid-template-columns:none;
    gap:.15rem;
    background:#f8f4ef;
    box-shadow:-1rem 0 3rem #24170d24;
    transform:translateX(105%);
    transition:transform .32s var(--ease);
  }
  .mobile-nav.is-open { transform:translateX(0); }
  .mobile-nav-head {
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-bottom:1.2rem;
    padding-bottom:1rem;
    border-bottom:1px solid #ded4c8;
    font-family:var(--serif);
    font-size:1.65rem;
  }
  .mobile-nav-close { display:grid; }
  .mobile-nav > a {
    padding:1rem .35rem;
    border-bottom:1px solid #e2d9ce;
    font-size:1.05rem;
    text-align:left;
  }
  .nav-stage {
    position:absolute;
    left:16px;
    right:16px;
    z-index:2;
    pointer-events:none;
  }
  .nav-search-form {
    max-width:none;
  }
  .site-header.search-open .nav-stage {
    pointer-events:auto;
  }
  .nav-dropdown-mobile {
    width:100%;
    border-bottom:1px solid #e2d9ce;
  }
  .nav-dropdown-mobile summary {
    justify-content:space-between;
    padding:1rem .35rem;
    font-size:1.05rem;
  }
  .nav-dropdown-mobile .nav-dropdown-menu {
    position:static;
    display:grid;
    grid-template-columns:1fr;
    min-width:0;
    padding:.35rem;
    margin:.2rem 0 .5rem;
    border:0;
    box-shadow:none;
    background:#eee5db;
    transform:none;
    animation:none;
    opacity:1;
  }
  .nav-dropdown-mobile .nav-dropdown-menu a {
    padding:.75rem 1rem;
    text-align:left;
    font-size:.92rem;
  }
  .site-header.search-open .brand,
  .site-header.search-open .header-actions>[data-nav-search],
  .site-header.search-open .header-actions>[data-wishlist],
  .site-header.search-open .header-actions>[data-cart],
  .site-header.search-open .mobile-toggle {
    opacity:0;
    visibility:hidden;
    pointer-events:none;
  }
}

@media(prefers-reduced-motion:reduce) {
  .desktop-nav,.nav-search-form,.nav-search-close,.mobile-nav,.mobile-nav-backdrop {
    transition-duration:0s!important;
  }
}

.desktop-nav a:hover:after,.desktop-nav .active:after {
  background:var(--gold);
}

.desktop-nav a:hover:after {
  animation:underline-in .25s var(--ease);
}

@keyframes underline-in {
  from { transform:scaleX(0); }
  to { transform:scaleX(1); }
}

.icon-button {
  border-radius:50%;
  transition:background .2s var(--ease),color .2s var(--ease);
}

.icon-button:hover,.social-links button:hover {
  color:var(--gold);
}

.icon-button:hover {
  background:#f4ede3;
}

.cart-count {
  background:var(--gold-deep);
  font-weight:600;
  box-shadow:0 0 0 2px #fff;
}

.announcement {
  background:linear-gradient(90deg,#f2e9de,#f7f0e6 50%,#f2e9de);
  color:#171717;
}

.announcement-actions {
  display:flex;
  align-items:center;
  gap:1.65rem;
}

.announcement-actions a,
.announcement-actions button {
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  padding:0;
  border:0;
  background:transparent;
  color:inherit;
  font-size:inherit;
  white-space:nowrap;
  transition:opacity .2s var(--ease);
}

.announcement-actions a:hover,
.announcement-actions button:hover {
  opacity:.72;
}

.announcement-actions .ph {
  font-size:1.15rem;
}

/* --- Buttons: warmer press, an arrow that leans forward --- */
.button {
  border-radius:5px;
  box-shadow:var(--shadow-sm);
  transition:background .25s var(--ease),transform .2s var(--ease),box-shadow .25s var(--ease),border-color .25s var(--ease);
}

.button:hover {
  background:linear-gradient(115deg,var(--gold),var(--gold-deep));
  border-color:var(--gold-deep);
  box-shadow:0 6px 20px -6px #7d572666;
}

.button:active {
  transform:translateY(0);
  box-shadow:var(--shadow-sm);
}

.button .ph-arrow-right,.text-link .ph-arrow-right,.journal-card span .ph-arrow-right {
  transition:transform .25s var(--ease);
}

.button:hover .ph-arrow-right,.text-link:hover .ph-arrow-right,.journal-card:hover span .ph-arrow-right {
  transform:translateX(4px);
}

.text-link {
  border-bottom-color:#cfc4b4;
  transition:color .2s var(--ease),border-color .2s var(--ease);
}

.text-link:hover {
  color:var(--gold-deep);
  border-bottom-color:var(--gold);
}

/* --- Eyebrows get a small gold rule --- */
.eyebrow {
  color:var(--gold-deep);
  display:inline-flex;
  align-items:center;
  gap:.75rem;
}

.eyebrow:before {
  content:'';
  width:1.7rem;
  height:1px;
  background:var(--gold);
  flex-shrink:0;
}

/* --- Benefits strip --- */
.benefits {
  background:linear-gradient(180deg,#f8f6f3,#f4f1ec);
  border-block:1px solid #ece6dd;
}

.benefit {
  border-right-color:#e2ddd4;
}

.benefit>.ph {
  color:var(--gold-deep);
}

/* --- Mood circles: gold ring on hover, softer caption ---
   The caption used to sit inside the circle, so wider labels
   ("Fresh & Energizing", "Perfect For Loved Ones") were sliced off
   by the round clip. It now floats free as a pill under the photo:
   the photo keeps the circular mask, the card no longer clips. */
.mood-card {
  aspect-ratio:auto;
  overflow:visible;
  background:none;
  border-radius:0;
  display:flex;
  flex-direction:column;
  gap:.6rem;
  transition:transform .3s var(--ease);
}

.mood-card:hover {
  transform:translateY(-6px);
}

/* The photo keeps the circle; the caption sits below it in normal
   flow, so long labels wrap instead of being clipped by the mask. */
.mood-photo {
  position:relative;
  inset:auto;
  aspect-ratio:1;
  border-radius:50%;
  overflow:hidden;
  box-shadow:0 0 0 1px #00000008;
  transition:transform .5s var(--ease),box-shadow .3s var(--ease);
}

.mood-card:hover .mood-photo {
  transform:scale(1.04);
  box-shadow:0 0 0 2px var(--gold),var(--shadow-md);
}

.mood-caption {
  position:static;
  width:auto;
  height:auto;
  padding:0;
  gap:.15rem;
  background:none;
  text-align:center;
}

.mood-caption strong,.mood-caption span {
  white-space:normal;
  line-height:1.3;
  transition:color .2s var(--ease);
}

.mood-caption span {
  color:var(--muted);
}

.mood-card:hover .mood-caption strong {
  color:var(--gold-deep);
}

/* --- Gift band --- */
.gift-section {
  background:linear-gradient(120deg,#f8f2ea,#f5eee5);
}

/* --- Product cards: real cards, not floating text --- */
.product-card {
  background:#fff;
  border:1px solid #efeae3;
  border-radius:8px;
  padding:.65rem .8rem 1rem;
  box-shadow:var(--shadow-sm);
  transition:transform .28s var(--ease),box-shadow .28s var(--ease),border-color .28s var(--ease);
}

.product-card:hover {
  transform:translateY(-5px);
  border-color:var(--gold-soft);
  box-shadow:var(--shadow-md);
}

.product-image {
  border:0;
  border-radius:6px;
  background:linear-gradient(165deg,#faf7f2,#f2ede5);
}

.product-image img {
  transition:transform .45s var(--ease);
}

.product-view:hover img {
  transform:scale(1.07);
}

.favorite {
  right:.45rem;
  top:.45rem;
  background:#ffffffe6;
  box-shadow:var(--shadow-sm);
  transition:color .2s var(--ease),transform .2s var(--ease);
}

.favorite:hover {
  color:#b23647;
  transform:scale(1.12);
}

.price {
  font-family:var(--serif);
  font-size:1.32rem;
  letter-spacing:-.02em;
}

.add-cart {
  border-radius:5px;
}

/* --- Journal --- */
.journal {
  background:linear-gradient(120deg,#f8f5f0,#f6f1ea);
}

.journal-card {
  border:1px solid #efe9e0;
  border-radius:8px;
  box-shadow:var(--shadow-sm);
  transition:transform .28s var(--ease),box-shadow .28s var(--ease);
}

.journal-card:hover {
  transform:translateY(-4px);
  box-shadow:var(--shadow-md);
}

.journal-card img {
  transition:transform .5s var(--ease),filter .3s var(--ease);
}

.journal-card:hover img {
  transform:scale(1.05);
}

.journal-card h3 {
  transition:color .2s var(--ease);
}

.journal-card:hover h3 {
  color:var(--gold-deep);
}

.journal-card span {
  color:var(--gold-deep);
}

/* --- Newsletter --- */
.newsletter input {
  border-color:#e0d6c9;
  transition:border-color .2s var(--ease),box-shadow .2s var(--ease);
}

.newsletter input:focus,#search-input:focus {
  border-color:var(--gold);
  box-shadow:0 0 0 3px #a3763a1f;
  outline:none;
}

/* --- Footer --- */
.site-footer {
  max-width:100%;
}

.footer-grid li a,.footer-grid li button {
  transition:color .2s var(--ease),padding-left .2s var(--ease);
}

.footer-grid li a:hover,.footer-grid li button:hover {
  color:var(--gold);
  padding-left:4px;
}

.contact-links .ph {
  color:var(--gold-deep);
}

/* --- Dialogs --- */
dialog {
  border-color:var(--gold-soft);
  border-radius:14px;
}

dialog[open] {
  animation:dialog-in .28s var(--ease);
}

@keyframes dialog-in {
  from { opacity:0; transform:translateY(12px) scale(.985); }
  to { opacity:1; transform:none; }
}

@media(max-width:767px) {
  .site-header {
    padding-inline:20px;
  }
  /* On phones the copy was tall enough to land on top of the photo.
     Stack them instead of overlaying, so nothing sits over the image. */
  .hero {
    display:flex;
    flex-direction:column;
    min-height:0;
  }
  .hero-copy {
    order:1;
    padding-bottom:22px;
  }
  .hero-image {
    order:2;
    position:relative;
    inset:auto;
    width:100%;
    height:250px;
    object-position:60% 52%;
  }
  .hero:after {
    display:none;
  }
  .hero-controls {
    bottom:14px;
  }
  .product-card {
    padding:.5rem .55rem .8rem;
  }
  .eyebrow:before {
    width:1.1rem;
  }
  /* nowrap + the new rule pushed this eyebrow past its column edge. */
  .gift-copy .eyebrow {
    white-space:normal;
    letter-spacing:.18em;
  }
}

/* ============================================================
   Breathing room. The base layout packs sections tightly; this
   pass opens up section padding, grid gaps and the space around
   headings so the page reads calmer.
   ============================================================ */
.page-shell {
  gap:1.5rem;
}

.hero-copy {
  padding-top:3.3rem;
  padding-bottom:2.7rem;
}

.hero .button {
  margin-bottom:2.3rem;
}

.hero-description {
  margin-bottom:1.6rem;
}

.benefits {
  padding:1.95rem 1.7rem;
}

.moods {
  padding:2.6rem 3.55% 2.5rem;
}

.section-heading {
  margin-bottom:2rem;
}

.section-heading p {
  margin-top:.4rem;
}

.mood-grid {
  gap:3rem;
}

.gift-section {
  min-height:23rem;
}

.gift-copy {
  padding-top:2.9rem;
  padding-bottom:2.9rem;
}

.gift-copy h2 {
  margin:.55rem 0 1.05rem;
}

.gift-copy>p:not(.eyebrow) {
  margin-bottom:1.5rem;
}

.bestsellers {
  padding:2.6rem 3.2% 2.9rem;
}

.product-grid {
  gap:2.4rem;
}

.product-card {
  padding:.7rem .9rem 1.15rem;
}

.product-card h3 {
  margin-top:.85rem;
}

/* The extra card padding narrows this line; nowrap would clip it. Since
   it can now run to two lines, reserve both so prices and
   buttons stay on a shared baseline across the row. */
.product-card {
  display:flex;
  flex-direction:column;
}

.product-card>p {
  white-space:normal;
  min-height:2.9em;
}

.add-cart {
  margin-top:auto;
}

.price {
  margin:.35rem 0 .8rem;
}

.journal {
  padding:2.5rem 3.2% 2.6rem;
  gap:1.8rem;
}

.journal-intro {
  padding:.9rem 0 1rem;
}

.journal-intro p {
  margin:1rem 0 1.6rem;
}

.journal-card button>div,
.journal-card a>div {
  padding:1rem 1.3rem 1.1rem;
}

.newsletter {
  min-height:9.2rem;
  padding-top:2.5rem;
  padding-bottom:2.5rem;
}

.newsletter p {
  margin-top:.55rem;
}

.site-footer {
  padding-top:3.3rem;
  padding-bottom:1.6rem;
}

.brand-description {
  margin:1.5rem 0 1.3rem;
}

.footer-grid h3 {
  margin-bottom:1.05rem;
}

.footer-bottom {
  margin-top:2.6rem;
  padding-top:1.3rem;
}

@media(max-width:767px) {
  .page-shell {
    gap:14px;
  }
  .hero-copy {
    padding:32px 24px 30px;
  }
  .benefits {
    padding:24px 10px;
    gap:26px 0;
  }
  .moods {
    padding:30px 18px 32px;
  }
  .section-heading {
    margin-bottom:24px;
  }
  .mood-grid {
    gap:26px 15px;
  }
  .gift-copy {
    padding:30px 0 26px 22px;
  }
  .bestsellers {
    padding:30px 18px 32px;
  }
  .product-grid {
    gap:28px 18px;
  }
  .journal {
    padding:30px 18px 32px;
    gap:20px;
  }
  .newsletter {
    padding:30px 22px;
    gap:22px;
  }
  .site-footer {
    padding:36px 26px 22px;
  }
  .footer-grid {
    gap:34px 22px;
  }
  .footer-bottom {
    margin-top:28px;
  }
}

/* Tokens used by the product, cart and checkout pages (css/product.css and
   css/shop.css). Defined here so every page has them; they set no styling of
   their own, so the homepage look is unaffected. */
:root {
  --ink-deep:#191410;
  --ivory:#faf8f5;
  --hairline:#ece5db;
  --muted-warm:#8a8177;
  --shadow-lift:0 1px 2px #1c130a08,0 18px 44px -14px #1c130a26;
}

/* Build credit in the footer bar. No underline; colour carries the link. */
.credit a {
  color:var(--gold-deep);
  font-weight:600;
  text-decoration:none;
  border-bottom:0;
  transition:color .2s var(--ease);
}

.credit a:hover {
  color:var(--gold);
}

/* Shared editorial footer: brand story, policies, and contact. */
.site-footer {
  margin-top:1rem;
  padding:clamp(3rem,5vw,5rem) 6.25% 1.5rem;
  background:#f1efec;
}

.footer-main {
  display:grid;
  grid-template-columns:minmax(20rem,1.65fr) minmax(11rem,.65fr) minmax(15rem,.8fr);
  gap:clamp(3rem,7vw,8rem);
  align-items:start;
}

.footer-brand-column .brand-description {
  max-width:41rem;
  margin:2rem 0 0;
  color:#443f3a;
  font-size:.98rem;
  line-height:1.75;
}

.footer-main h3 {
  margin:0 0 1.2rem;
  color:var(--gold-deep);
  font-family:'DM Sans',sans-serif;
  font-size:1rem;
  font-weight:700;
  letter-spacing:0;
}

.footer-main ul {
  color:#24211e;
  font-size:.93rem;
  line-height:1.55;
}

.footer-policy-column li + li {
  margin-top:.65rem;
}

.footer-policy-column button {
  padding:0;
  border:0;
  background:transparent;
  text-align:left;
}

.footer-contact-column .contact-links li {
  gap:.75rem;
  margin-bottom:.9rem;
}

.footer-contact-column .contact-links .ph {
  flex:0 0 auto;
  color:#393531;
  font-size:1.2rem;
}

.footer-follow-title {
  margin-top:1.4rem!important;
  margin-bottom:.8rem!important;
}

.footer-socials {
  display:flex;
  gap:.65rem;
}

.footer-socials a {
  display:grid;
  width:2.25rem;
  height:2.25rem;
  place-items:center;
  border:1px solid #3f3b37;
  border-radius:50%;
  font-size:1.15rem;
  transition:color .2s var(--ease),border-color .2s var(--ease),transform .2s var(--ease);
}

.footer-socials a:hover {
  color:var(--gold-deep);
  border-color:var(--gold-deep);
  transform:translateY(-2px);
}

.site-footer .footer-bottom {
  display:flex;
  justify-content:space-between;
  gap:1.5rem;
  margin-top:3.3rem;
  padding-top:1.35rem;
  border-top:1px solid #b8aa99;
  font-size:.86rem;
}

@media(max-width:900px) {
  .footer-main {
    grid-template-columns:1.3fr .7fr;
    gap:3rem;
  }
  .footer-brand-column { grid-column:1/-1; }
}

@media(max-width:560px) {
  .site-footer { padding:3rem 1.5rem 1.5rem; }
  .footer-main { grid-template-columns:1fr; gap:2.6rem; }
  .footer-brand-column { grid-column:auto; }
  .footer-brand-column .brand-description { margin-top:1.5rem; }
  .site-footer .footer-bottom { flex-direction:column; align-items:flex-start; margin-top:2.7rem; }
}

/* Floating WhatsApp contact button. */
.whatsapp-float {
  position:fixed;
  right:1.4rem;
  bottom:1.4rem;
  z-index:30;
  display:grid;
  place-items:center;
  width:3.6rem;
  height:3.6rem;
  border-radius:50%;
  background:#25d366;
  color:#fff;
  font-size:2rem;
  box-shadow:0 6px 20px -4px #25d36680,0 2px 8px #0000001f;
  transition:transform .2s var(--ease),box-shadow .2s var(--ease);
}

.whatsapp-float:hover {
  transform:translateY(-3px) scale(1.04);
  box-shadow:0 10px 26px -4px #25d36699,0 3px 10px #00000024;
}

.whatsapp-float:focus-visible {
  outline:2px solid #128c3e;
  outline-offset:3px;
}

@media(max-width:767px) {
  .whatsapp-float {
    right:1rem;
    bottom:1rem;
    width:3.1rem;
    height:3.1rem;
    font-size:1.7rem;
  }
  /* Product pages pin a buy bar to the bottom; sit above it. */
  body[data-page="product"] .whatsapp-float {
    bottom:5.5rem;
  }
}