/*
 * Storefront corrections layered over the purchased theme.
 *
 * Loaded last by `components/theme/theme-styles.tsx` so it wins on equal
 * specificity without anything here needing `!important`. The vendor
 * stylesheets are left byte-for-byte untouched, which keeps them replaceable
 * when the template ships an update.
 */

/* The Next storefront renders server content immediately; no loading overlay
   is used anywhere on the site. Keep the vendor selector disabled as well so
   legacy theme markup can never reintroduce a blank loading screen. */
.preloader {
  display: none !important;
}

/* ---------------------------------------------------------------------------
 * 1. Logo sizing
 *
 * The template ships no rule at all for the header logo, so an image uploaded
 * through the admin panel rendered at its intrinsic size and pushed the header
 * to whatever height the file happened to be. Every logo slot now has a fixed
 * box and the image is contained inside it: aspect ratio is preserved, nothing
 * is cropped or stretched, and the header height no longer depends on which
 * file was uploaded.
 * ------------------------------------------------------------------------- */
.header .logo-box .logo a,
.footer-logo a,
.offcanvas-logo a {
  display: inline-flex;
  align-items: center;
}

.header .logo-box .logo figure,
.footer-logo figure,
.offcanvas-logo figure {
  margin: 0;
  display: block;
  line-height: 0;
}

.header .logo-box .logo img {
  display: block;
  width: auto;
  height: auto;
  max-height: 72px;
  max-width: 280px;
  object-fit: contain;
}

.footer-logo img {
  display: block;
  width: auto;
  height: auto;
  max-height: 56px;
  max-width: 220px;
  object-fit: contain;
}

.offcanvas-logo img {
  display: block;
  width: auto;
  height: auto;
  max-height: 44px;
  max-width: 170px;
  object-fit: contain;
}

@media (max-width: 991px) {
  .header .logo-box .logo img {
    max-height: 60px;
    max-width: 230px;
  }
}

@media (max-width: 575px) {
  .header .logo-box .logo img {
    max-height: 64px;
    max-width: 210px;
  }
}

/* ---------------------------------------------------------------------------
 * 2. Desktop navigation
 *
 * `.navbar-nav .nav-item .nav-link { width: 100% }` in the template makes a
 * top-level item shrink with its row, so a two-word label such as "Contact Us"
 * broke onto a second line and made the bar taller. Only the top-level links
 * are corrected here — inside a dropdown the full-width link is wanted, so the
 * child combinator matters.
 * ------------------------------------------------------------------------- */
.navbar-nav > .nav-item > .nav-link {
  width: auto;
  white-space: nowrap;
}

.navbar-nav {
  flex-wrap: nowrap;
  align-items: center;
}

.navbar-nav > .nav-item {
  flex: 0 0 auto;
}

/* Tighten the gap instead of letting labels wrap or the bar overflow. */
@media (max-width: 1400px) {
  .navbar-nav > .nav-item {
    margin-inline-end: 24px;
  }
}

@media (max-width: 1320px) {
  .navbar-nav > .nav-item {
    margin-inline-end: 16px;
  }

  .navbar-nav > .nav-item > .nav-link {
    font-size: 15px;
  }
}

@media (max-width: 1230px) {
  .navbar-nav > .nav-item {
    margin-inline-end: 12px;
  }

  .navbar-nav > .nav-item > .nav-link {
    font-size: 14px;
  }
}

/* ---------------------------------------------------------------------------
 * 3. Mobile bottom navigation
 *
 * Fixed to the bottom on phones and tablets. The matching bottom padding on
 * the page wrapper is what stops it covering the end of the page, and the
 * safe-area inset keeps it clear of the iOS home indicator.
 * ------------------------------------------------------------------------- */
.mobile-bottom-navigation-menu {
  padding-bottom: env(safe-area-inset-bottom, 0px);
  padding-left: env(safe-area-inset-left, 0px);
  padding-right: env(safe-area-inset-right, 0px);
  /* Above the footer and the back-to-top button, below modals and the
     offcanvas menu, which the template puts at 99999. */
  z-index: 1030;
}

@media (max-width: 1199px) {
  .page-wrapper {
    padding-bottom: calc(66px + env(safe-area-inset-bottom, 0px));
  }

  /* The back-to-top button and the floating chat launcher would otherwise sit
     underneath the bar. The launcher renders only when an admin switches chat
     or WhatsApp on, so this is here before anyone can hit it. */
  .back-to-top {
    bottom: calc(80px + env(safe-area-inset-bottom, 0px));
  }

  [data-floating-stack] {
    bottom: calc(74px + env(safe-area-inset-bottom, 0px));
    /* Above the bar (1030) so the launcher stays tappable. */
    z-index: 1040;
  }
}

.mobile-bottom-navigation-menu .mobile-bottom-navigation-wapper {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.mobile-bottom-navigation-menu
  .mobile-bottom-navigation-wapper
  .mobile-bottom-navigation-item
  a {
  min-width: 0;
  gap: 4px;
  padding: 9px 4px;
  font-size: 12px;
  line-height: 1.2;
  text-align: center;
  color: var(--black-color, #11100e);
  text-decoration: none;
}

.mobile-bottom-navigation-menu
  .mobile-bottom-navigation-wapper
  .mobile-bottom-navigation-item
  a.active {
  color: var(--primary-color, #df301c);
}

.mobile-bottom-icon {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 22px;
  font-size: 17px;
}

.mobile-bottom-label {
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mobile-bottom-badge {
  position: absolute;
  top: -6px;
  inset-inline-start: 13px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--primary-color, #df301c);
  color: #fff;
  font-size: 10px;
  font-weight: 600;
  line-height: 16px;
  text-align: center;
}

/* Very narrow phones (320px): keep four labels on one line each. */
@media (max-width: 359px) {
  .mobile-bottom-navigation-menu
    .mobile-bottom-navigation-wapper
    .mobile-bottom-navigation-item
    a {
    font-size: 10.5px;
    padding: 8px 2px;
  }

  .mobile-bottom-icon {
    font-size: 15px;
  }
}

/* ---------------------------------------------------------------------------
 * 3b. Header contact
 *
 * The number is the only thing left in this slot now that the "Sale Off" tag
 * and the "24/7 Support" caption are gone, so it must never break across two
 * lines — a half-wrapped phone number is unusable.
 * ------------------------------------------------------------------------- */
.header .header-call .header-call-content a {
  white-space: nowrap;
  display: inline-block;
}

.header .header-call {
  flex-shrink: 0;
}

/* ---------------------------------------------------------------------------
 * 3d. Abandoned-cart reminder
 *
 * Sits above the promo popup (1046) and the bottom bar, below the image
 * lightbox. Drawn in the template's own card language rather than a new style.
 * ------------------------------------------------------------------------- */
.cart-reminder {
  position: fixed;
  inset: 0;
  z-index: 1060;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(17, 16, 14, 0.55);
  animation: cart-reminder-in 0.18s ease-out;
}

.cart-reminder-card {
  position: relative;
  width: min(440px, 100%);
  max-height: calc(100dvh - 32px);
  overflow-y: auto;
  padding: 32px 28px 28px;
  border-radius: var(--border-radius-three, 24px);
  background: var(--white-color, #fff);
  box-shadow: 0 24px 60px -20px rgba(11, 13, 17, 0.4);
  text-align: center;
  animation: cart-reminder-rise 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}

.cart-reminder-icon {
  display: inline-grid;
  place-items: center;
  width: 62px;
  height: 62px;
  margin-bottom: 18px;
  border-radius: 999px;
  background: var(--primary-rgb-05, rgba(247, 97, 136, 0.16));
  color: var(--primary-color, #f76188);
  font-size: 24px;
}

.cart-reminder-title {
  margin: 0 0 10px;
  font-size: 24px;
  line-height: 1.3;
}

.cart-reminder-text {
  margin: 0 0 24px;
  color: var(--text-color, #525252);
  font-size: 15px;
  line-height: 1.6;
}

.cart-reminder-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

.cart-reminder-secondary {
  color: var(--text-color, #525252);
  font-size: 14px;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.cart-reminder-secondary:hover {
  color: var(--primary-color, #f76188);
}

.cart-reminder-close {
  position: absolute;
  top: 12px;
  inset-inline-end: 12px;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--text-color, #525252);
  cursor: pointer;
  transition: background 0.2s ease;
}

.cart-reminder-close:hover {
  background: var(--background-one, #f9f9f9);
}

@keyframes cart-reminder-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes cart-reminder-rise {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .cart-reminder,
  .cart-reminder-card {
    animation: none;
  }
}

@media (max-width: 575px) {
  .cart-reminder-card {
    padding: 28px 20px 24px;
  }

  .cart-reminder-title {
    font-size: 21px;
  }
}

/* ---------------------------------------------------------------------------
 * 4. Product image lightbox
 * ------------------------------------------------------------------------- */
.product-lightbox {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(17, 16, 14, 0.88);
  animation: product-lightbox-in 0.18s ease-out;
}

@keyframes product-lightbox-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.product-lightbox-figure {
  position: relative;
  margin: 0;
  max-width: min(1100px, 100%);
  max-height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.product-lightbox-figure img {
  display: block;
  max-width: 100%;
  /* Leaves room for the close button and the counter on short viewports. */
  max-height: calc(100dvh - 128px);
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 10px;
  background: #fff;
}

.product-lightbox-close,
.product-lightbox-nav {
  position: absolute;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  cursor: pointer;
  color: #11100e;
  background: rgba(255, 255, 255, 0.92);
  border-radius: 999px;
  transition: background 0.2s ease;
}

.product-lightbox-close:hover,
.product-lightbox-nav:hover {
  background: #fff;
}

.product-lightbox-close:focus-visible,
.product-lightbox-nav:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

.product-lightbox-close {
  top: max(16px, env(safe-area-inset-top, 0px));
  inset-inline-end: 16px;
  width: 40px;
  height: 40px;
  font-size: 16px;
}

.product-lightbox-nav {
  top: 50%;
  transform: translateY(-50%);
  width: 42px;
  height: 42px;
  font-size: 15px;
}

.product-lightbox-prev {
  inset-inline-start: 12px;
}

.product-lightbox-next {
  inset-inline-end: 12px;
}

.product-lightbox-count {
  position: absolute;
  bottom: max(14px, env(safe-area-inset-bottom, 0px));
  inset-inline-start: 50%;
  transform: translateX(-50%);
  padding: 4px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  color: #11100e;
  font-size: 12px;
  font-weight: 600;
}

@media (max-width: 575px) {
  .product-lightbox-nav {
    width: 36px;
    height: 36px;
  }

  .product-lightbox-figure img {
    max-height: calc(100dvh - 148px);
  }
}

/*
 * The large gallery image is a real button so it is keyboard reachable. It is
 * stripped back to a plain block so the template's own rules for the figure and
 * image inside it still apply untouched.
 */
.shop-product-single-slider .large-images .product-zoom-trigger {
  display: block;
  width: 100%;
  padding: 0;
  margin: 0;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  text-align: inherit;
  cursor: zoom-in;
}

.shop-product-single-slider .large-images .product-zoom-trigger:focus-visible {
  outline: 2px solid var(--primary-color, #df301c);
  outline-offset: 3px;
  border-radius: 8px;
}

/* ---------------------------------------------------------------------------
 * 5. Heading hierarchy
 *
 * Two headings changed level so each page has one H1 and card titles sit below
 * their section heading. The template styles those slots by tag name, so its
 * rules are carried across here verbatim — the markup is more correct and the
 * rendering is identical.
 * ------------------------------------------------------------------------- */

/* Product card title: was h2, now h3 (mirrors .shop-grid-content h2). */
.shop-grid-item .shop-grid-content h3 {
  color: var(--extra-color-one);
  margin-bottom: 15px;
  font-size: 20px;
  text-transform: capitalize;
  transition: var(--transition);
}

.shop-grid-item .shop-grid-content h3:hover {
  color: var(--primary-color);
}

@media (max-width: 1199px) {
  .shop-grid-item .shop-grid-content h3 {
    font-size: 18px;
    margin-bottom: 10px;
  }
}

@media (max-width: 575px) {
  .shop-grid-item .shop-grid-content h3 {
    font-size: 16px;
  }
}

/*
 * Breadcrumb banner text. It is an h1 on most pages and a plain div on pages
 * whose real heading is further down (a blog post). Both are styled from the
 * same class so the banner looks the same either way.
 */
.breadcrumb-section
  .breadcrumb-wapper
  .breadcrumb-content
  .breadcrumb-title
  .breadcrumb-heading {
  display: inline-block;
  text-transform: capitalize;
  margin: 0 0 20px;
  color: var(--white-color);
  /* Mirrors the template's global h1 scale, since a div inherits none of it. */
  font-family: var(--title-fonts);
  font-size: 68px;
  font-weight: 800;
  line-height: 1.2;
}

@media (max-width: 1400px) {
  .breadcrumb-section
    .breadcrumb-wapper
    .breadcrumb-content
    .breadcrumb-title
    .breadcrumb-heading {
    font-size: 52px;
  }
}

@media (max-width: 991px) {
  .breadcrumb-section
    .breadcrumb-wapper
    .breadcrumb-content
    .breadcrumb-title
    .breadcrumb-heading {
    font-size: 48px;
  }
}

@media (max-width: 767px) {
  .breadcrumb-section
    .breadcrumb-wapper
    .breadcrumb-content
    .breadcrumb-title
    .breadcrumb-heading {
    font-size: 34px;
  }
}

/* Blog post title, promoted from h2 to h1 — same rules as the template's h2. */
.blog-single-section .blog-single-post .blog-single-contain .blog-entry-content h1 {
  font-size: 36px;
  font-weight: bold;
  text-transform: capitalize;
  line-height: normal;
  margin-bottom: 20px;
}

@media (max-width: 767px) {
  .blog-single-section
    .blog-single-post
    .blog-single-contain
    .blog-entry-content
    h1 {
    font-size: 32px;
  }
}

/*
 * Sidebar widget labels were unstyled <div>s and are now h2s. The class already
 * carries every visual property; these two only stop the browser's default
 * heading metrics from nudging the spacing.
 */
.widget .widget-title {
  margin-top: 0;
  line-height: 1.3;
}

/* Hero carousel: every slide but the first is now an h2. */
.hero-section-2 .hero-content h2 {
  font-size: 62px;
  font-weight: 600;
  color: var(--white-color);
  text-transform: capitalize;
}

.hero-section-2
  .hero-slider
  .swiper-slide-active
  .hero-content
  .section-title
  h2 {
  animation: fadeInLeft 1.5s;
}

@media (max-width: 1499px) {
  .hero-section-2 .hero-content h2 {
    font-size: 52px;
  }
}

@media (max-width: 767px) {
  .hero-section-2 .hero-content h2 {
    font-size: 36px;
  }
}

/* ---------------------------------------------------------------------------
 * 6. Layout stability (CLS)
 *
 * The template gives its image boxes no height until the file has loaded, so
 * every grid reflowed as images arrived. The product grid is the worst of it:
 * a page of cards would jump twice. Reserving the box up front fixes that for
 * any image, including admin uploads whose dimensions are not known here.
 *
 * The template's own product shots are square (576×576), so a 1:1 box is the
 * size they already occupied — nothing moves. `contain` means an upload with
 * different proportions is letterboxed on the card's grey backdrop rather than
 * stretched or cropped.
 * ------------------------------------------------------------------------- */
.shop-grid-item .shop-grid-image figure {
  aspect-ratio: 1 / 1;
}

.shop-grid-item .shop-grid-image figure img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* The hero image is admin-uploaded, so its box is reserved rather than its
   dimensions declared. `contain` keeps whatever ratio the file has. */
.hero-section-1 .hero-image figure {
  aspect-ratio: 1 / 1;
}

.hero-section-1 .hero-image figure img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Category tiles and blog covers, same problem. */
.category-item .category-image figure {
  aspect-ratio: 4 / 3;
}

.category-item .category-image figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.blog-grid-image figure,
.blog-item .blog-image figure {
  aspect-ratio: 3 / 2;
}

.blog-grid-image figure img,
.blog-item .blog-image figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---------------------------------------------------------------------------
 * 7. Overflow guards
 *
 * Catch-alls for content that is wider than its column — long product names,
 * pasted URLs in reviews, admin-uploaded images of unknown size, and the wide
 * tables in the account area.
 * ------------------------------------------------------------------------- */
html,
body {
  overflow-x: hidden;
  max-width: 100%;
}

img,
video,
iframe {
  max-width: 100%;
}

.shop-grid-content h3,
.shop-grid-content h3 a,
.cart-product-name,
.order-receive-content-list li,
.blog-title h2 {
  overflow-wrap: anywhere;
}

/* Theme tables inside the account area scroll rather than widen the page. */
.table-responsive {
  -webkit-overflow-scrolling: touch;
}

/* The template lays its footer columns out with fixed basis values that
   overflow between 768px and 991px. */
@media (max-width: 991px) {
  .footer-widget {
    min-width: 0;
  }
}

/* Screen-reader-only helper (Bootstrap 5 ships `.visually-hidden`, but the
   template's build of it is not guaranteed to include the utility). */
.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* ---------------------------------------------------------------------------
 * 8. Floating actions: WhatsApp and support chat
 *
 * The stack used to be positioned with Tailwind classes, which the storefront
 * does not load. Unpositioned, it dropped into the page flow and left a blank
 * band under the footer. It is plain CSS now.
 *
 * It sits in the bottom-right corner, above the back-to-top button, and above
 * the mobile bottom bar on phones and tablets.
 * ------------------------------------------------------------------------- */
.floating-stack {
  position: fixed;
  right: 16px;
  bottom: calc(72px + env(safe-area-inset-bottom, 0px));
  z-index: 1040;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;
  /* The gap between buttons must not swallow taps meant for the page. */
  pointer-events: none;
  transition: transform 0.3s ease-out;
}

.floating-stack > * {
  pointer-events: auto;
}

@media (max-width: 1199px) {
  [data-floating-stack].floating-stack {
    bottom: calc(137px + env(safe-area-inset-bottom, 0px));
  }
}

/* A product page raises this while its phone purchase bar is on screen. */
body[data-buy-bar="1"] .floating-stack {
  transform: translateY(-4.25rem);
}

@media (min-width: 768px) {
  body[data-buy-bar="1"] .floating-stack {
    transform: none;
  }
}

/* The WhatsApp button, from the supplied design: a 45px green circle that
   widens into a labelled pill on hover. */
.wa-float-btn {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 45px;
  height: 45px;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition-duration: 0.3s;
  box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.199);
  background-color: #00d757;
  text-decoration: none;
}

.wa-float-btn .wa-float-sign {
  width: 100%;
  transition-duration: 0.3s;
  display: flex;
  align-items: center;
  justify-content: center;
}

.wa-float-btn .wa-float-sign svg {
  width: 25px;
  height: 25px;
}

.wa-float-btn .wa-float-sign svg path {
  fill: #fff;
}

.wa-float-btn .wa-float-text {
  position: absolute;
  right: 0%;
  width: 0%;
  opacity: 0;
  color: #fff;
  font-size: 1.2em;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  transition-duration: 0.3s;
}

.wa-float-btn:hover,
.wa-float-btn:focus-visible {
  width: 150px;
  border-radius: 40px;
  transition-duration: 0.3s;
}

/* The same managed WhatsApp action is also available in the admin header.
   It is static there, so it never creates a band in the admin page flow. */
.wa-header-btn {
  position: relative;
  right: auto;
  bottom: auto;
  z-index: auto;
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
}

.wa-header-btn:hover,
.wa-header-btn:focus-visible {
  width: 132px;
}

@media (max-width: 639px) {
  .wa-header-btn {
    display: none;
  }
}

.wa-float-btn:hover .wa-float-sign,
.wa-float-btn:focus-visible .wa-float-sign {
  width: 30%;
  transition-duration: 0.3s;
  padding-left: 10px;
}

.wa-float-btn:hover .wa-float-text,
.wa-float-btn:focus-visible .wa-float-text {
  opacity: 1;
  width: 70%;
  transition-duration: 0.3s;
  padding-right: 10px;
}

.wa-float-btn:active {
  transform: translate(2px, 2px);
}

.wa-float-btn:focus-visible {
  outline: 3px solid rgba(0, 215, 87, 0.45);
  outline-offset: 3px;
}

@media (max-width: 639px) {
  .wa-float-btn.wa-float-hide-mobile {
    display: none;
  }
}

@media (min-width: 640px) {
  .wa-float-btn.wa-float-hide-desktop {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .wa-float-btn,
  .wa-float-btn * {
    transition-duration: 0.001ms !important;
  }
}

/* ---------------------------------------------------------------------------
 * 9. Show-password toggle
 *
 * The theme placed the eye 45px from the top of the whole field, so it drifted
 * whenever the label wrapped. It is now centred inside a wrapper exactly as
 * tall as the input.
 * ------------------------------------------------------------------------- */
.password-field {
  position: relative;
}

.authentication-section-1 .default-form form .form-group .password-field .form-control {
  padding-right: 52px;
}

.authentication-section-1 .default-form form .form-group .password-field .password-toggle {
  position: absolute;
  top: 50%;
  right: 6px;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  padding: 0;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: #6b6b6b;
  cursor: pointer;
  transition: color 0.2s ease, background-color 0.2s ease;
}

.authentication-section-1 .default-form form .form-group .password-field .password-toggle:hover {
  color: var(--black-color, #11100e);
  background-color: rgba(0, 0, 0, 0.05);
}

.authentication-section-1 .default-form form .form-group .password-field .password-toggle:focus-visible {
  outline: 2px solid var(--primary-color, #f76188);
  outline-offset: 1px;
}

/* ---------------------------------------------------------------------------
 * 10. Footer newsletter field
 *
 * The theme drew the input and the round button separately: Bootstrap's
 * input-group squared the input's left edge, and the button was centred on
 * the whole form, message line included, so it hung off the field. The field
 * is now one white pill with the button inside it.
 * ------------------------------------------------------------------------- */
.footer-1 .footer-top .footer-widget-subscribe {
  padding-bottom: 26px;
}

.footer-1 .footer-top .footer-widget-subscribe .subscribe-form {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px;
  background: #fff;
  border-radius: 999px;
  box-shadow: 0 10px 30px -12px rgba(0, 0, 0, 0.45);
  transition: box-shadow 0.2s ease;
}

.footer-1 .footer-top .footer-widget-subscribe .subscribe-form:focus-within {
  box-shadow:
    0 0 0 3px rgba(247, 97, 136, 0.55),
    0 10px 30px -12px rgba(0, 0, 0, 0.45);
}

.footer-1 .footer-top .footer-widget-subscribe .subscribe-form .input-group {
  flex: 1 1 auto;
  min-width: 0;
  width: auto;
}

.footer-1 .footer-top .footer-widget-subscribe .subscribe-form .input-group input {
  width: 100%;
  height: 46px;
  padding: 0 8px 0 18px;
  border: 0;
  border-radius: 999px !important;
  background: transparent;
  box-shadow: none;
  outline: none;
  color: var(--black-color, #11100e);
  font-size: 15px;
}

.footer-1 .footer-top .footer-widget-subscribe .subscribe-form .input-group input::placeholder {
  color: #8a8a8a;
}

.footer-1 .footer-top .footer-widget-subscribe .subscribe-form .submit-btn {
  position: static;
  flex: 0 0 46px;
  width: 46px;
  height: 46px;
  margin: 0;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 999px;
}

.footer-1 .footer-top .footer-widget-subscribe .subscribe-form .submit-btn:disabled {
  opacity: 0.7;
}

/* The status line sits under the pill instead of inside it. */
.footer-1 .footer-top .footer-widget-subscribe .subscribe-form .ajax-response {
  position: absolute;
  top: calc(100% + 8px);
  left: 18px;
  right: 18px;
  margin: 0;
  color: #fff;
  font-size: 14px;
  line-height: 1.3;
}

@media (max-width: 767px) {
  .footer-1 .footer-top .footer-widget-subscribe {
    gap: 14px;
  }

  .footer-1 .footer-top .footer-widget-subscribe .subscribe-form {
    max-width: 100%;
  }
}

/* ---------------------------------------------------------------------------
 * 11. Contact links
 *
 * Phone, email and address on the contact page are links now. They keep the
 * look of the plain text they replaced.
 * ------------------------------------------------------------------------- */
.contact-section .contact-item .contact-content h3 a {
  color: inherit;
  text-decoration: none;
  word-break: break-word;
  transition: color 0.2s ease;
}

.contact-section .contact-item .contact-content h3 a:hover,
.contact-section .contact-item .contact-content h3 a:focus-visible {
  color: var(--primary-color, #f76188);
  text-decoration: underline;
  text-underline-offset: 4px;
}

.footer-1 .widget-footer-contact .contact-content p a {
  color: inherit;
  text-decoration: none;
  word-break: break-word;
}

.footer-1 .widget-footer-contact .contact-content p a:hover,
.footer-1 .widget-footer-contact .contact-content p a:focus-visible {
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* ---------------------------------------------------------------------------
 * 12. Image-only home slider
 *
 * One of the three hero designs chosen under Website settings. The header is
 * absolutely positioned over the top of the page, so the section clears it
 * the same way the theme's slideshow hero does.
 * ------------------------------------------------------------------------- */
.image-slider-section {
  /* The desktop header, with its top bar and menu, is about 225px tall. */
  padding-top: 250px;
  padding-bottom: 40px;
}

@media (max-width: 1199px) {
  .image-slider-section {
    /* Logo row plus search, about 155px. */
    padding-top: 172px;
    padding-bottom: 24px;
  }
}

.image-slider-section .image-slider {
  position: relative;
  overflow: hidden;
  border-radius: 24px;
  background: #f4f2ec;
}

.image-slider-section .image-slide {
  display: block;
}

.image-slider-section .image-slide img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1920 / 720;
  object-fit: cover;
}

@media (max-width: 767px) {
  .image-slider-section .image-slider {
    border-radius: 16px;
  }

  .image-slider-section .image-slide img {
    aspect-ratio: 4 / 3;
  }
}

.image-slider-section .image-slider-arrow {
  position: absolute;
  top: 50%;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-top: -22px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  color: var(--black-color, #11100e);
  box-shadow: 0 6px 18px -6px rgba(0, 0, 0, 0.35);
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.image-slider-section .image-slider-arrow:hover,
.image-slider-section .image-slider-arrow:focus-visible {
  background: var(--primary-color, #f76188);
  color: #fff;
}

.image-slider-section .image-slider-prev {
  left: 16px;
}

.image-slider-section .image-slider-next {
  right: 16px;
}

/* Arrows crowd a phone screen, where swiping does the same job. */
@media (max-width: 575px) {
  .image-slider-section .image-slider-arrow {
    display: none;
  }
}

.image-slider-section .image-slider-dots {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 14px;
  z-index: 3;
  display: flex;
  justify-content: center;
}

/* The theme reserves 71px under the footer for the mobile bottom bar, and
   section 3 above already pads the page wrapper for the same bar. Together
   they left a blank band between the footer and the bar. The wrapper's
   padding alone is enough. */
@media (max-width: 1199px) {
  .page-wrapper .footer {
    margin-bottom: 0;
  }
}

/* White dots, centred along the bottom of the image. */
.image-slider-section .image-slider-dots .dot {
  position: static;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: auto;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.28);
}

.image-slider-section .image-slider-dots .dot .swiper-pagination-bullet {
  margin: 0 5px;
  background: #fff;
}

.image-slider-section .image-slider-dots .dot .swiper-pagination-bullet-active::before {
  border-color: #fff;
}

/* "Featured review" tag on /reviews, beside the quote mark. */
.testimonials-section-2 .testimonials-item .testimonials-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.testimonials-section-2 .review-featured-label {
  margin: 0;
  font-size: 13px;
  white-space: nowrap;
}

.testimonials-section-2 .review-featured-label i {
  margin-right: 4px;
}