/* Aroma 2026 — restyle of Flatsome's own pages (shop, category, product,
   cart, checkout, account and UX Builder pages). Layout stays Flatsome's;
   only type, colour, shapes and spacing follow the new design. */

body.aroma-site {
  --ar-ivory: #f4efe7; --ar-salt: #faf7f2; --ar-sand: #e8ded0; --ar-ink: #0f1b19; --ar-deep: #14302b;
  --ar-gold: #b8955d; --ar-gold-l: #d9c08f; --ar-muted: #6f6a61;
  --ar-f: "Caesarea", "Jost", system-ui, sans-serif;
  --ar-ease: cubic-bezier(.22,1,.36,1);
  background: var(--ar-ivory);
  color: var(--ar-ink);
  font-family: var(--ar-f);
  font-weight: 300;
}
body.aroma-site #wrapper, body.aroma-site #main { background: transparent; }

/* Type everywhere in Flatsome content */
body.aroma-inner #main,
body.aroma-inner #main h1, body.aroma-inner #main h2, body.aroma-inner #main h3,
body.aroma-inner #main h4, body.aroma-inner #main h5, body.aroma-inner #main h6,
body.aroma-site .nav > li > a, body.aroma-site .button, body.aroma-site input, body.aroma-site select, body.aroma-site textarea {
  font-family: var(--ar-f);
}
body.aroma-inner #main h1, body.aroma-inner #main h2, body.aroma-inner #main h3, body.aroma-inner #main h4 {
  font-weight: 300; color: var(--ar-ink); letter-spacing: -.005em;
}
body.aroma-inner.aroma-ltr #main, body.aroma-inner.aroma-ltr #main h1, body.aroma-inner.aroma-ltr #main h2,
body.aroma-inner.aroma-ltr #main h3, body.aroma-site.aroma-ltr .button { font-family: "Jost", system-ui, sans-serif; }
body.aroma-inner #main a { color: inherit; }
body.aroma-inner #main a:hover { color: var(--ar-gold); }
body.aroma-site .price, body.aroma-site .amount { font-family: "Jost", sans-serif; font-weight: 300; color: var(--ar-ink); }
body.aroma-site ins .amount, body.aroma-site .price ins { color: var(--ar-gold); text-decoration: none; }

/* Buttons */
body.aroma-site .button, body.aroma-site button.button, body.aroma-site input[type=submit].button,
body.aroma-site .checkout-button, body.aroma-site .single_add_to_cart_button, body.aroma-site #place_order {
  border-radius: 999px !important; background-color: var(--ar-ink) !important; border-color: var(--ar-ink) !important; color: var(--ar-ivory) !important;
  font-weight: 300; letter-spacing: .02em; text-transform: none; box-shadow: none; transition: background-color .45s var(--ar-ease), border-color .45s var(--ar-ease);
}
body.aroma-site .button:hover, body.aroma-site .checkout-button:hover, body.aroma-site .single_add_to_cart_button:hover, body.aroma-site #place_order:hover {
  background-color: var(--ar-gold) !important; border-color: var(--ar-gold) !important; box-shadow: none;
}
body.aroma-site .button.is-outline, body.aroma-site .button.is-link {
  background-color: transparent !important; color: var(--ar-ink) !important; border-color: currentColor !important;
}
body.aroma-site input[type=text], body.aroma-site input[type=email], body.aroma-site input[type=tel], body.aroma-site input[type=number],
body.aroma-site input[type=password], body.aroma-site input[type=search], body.aroma-site select, body.aroma-site textarea {
  border-radius: 10px; border-color: rgba(15,27,25,.18); box-shadow: none; background-color: #fff;
}
body.aroma-site .quantity input[type=number] { border-radius: 0; }

/* Product grid boxes (shop, categories, related, UX Builder product sliders)
   — same feel as the homepage cards: soft sand tile, square packshot,
   short title, muted detail line, price. */
body.aroma-inner .products .product-small.col,
body.aroma-inner .products .product-small.col.has-hover { padding: 0 9px 30px; }
body.aroma-site .product-small .col-inner { background: transparent; }
body.aroma-site .product-small .box-image {
  border-radius: 8px; overflow: hidden; background: linear-gradient(160deg, #efe7da, #e2d6c4);
}
body.aroma-site .product-small .box-image .image-fade_in_back,
body.aroma-site .product-small .box-image .image-zoom,
body.aroma-site .product-small .box-image > div > a { display: block; }
body.aroma-site .product-small .box-image img {
  mix-blend-mode: multiply; aspect-ratio: 1; height: auto; object-fit: contain;
  transition: transform 1.1s var(--ar-ease), opacity .55s var(--ar-ease);
}
/* second photo on hover: a real swap — the first photo fades out */
body.aroma-site .product-small .box-image img.back-image { mix-blend-mode: normal; object-fit: cover; z-index: 1; }
body.aroma-site .product-small.has-hover:hover .box-image:has(img.back-image) img:not(.back-image) { opacity: 0; }
body.aroma-site .product-small:hover .box-image img:not(.back-image) { transform: translateY(-6px) scale(1.03); }
body.aroma-site .product-small .box-text { padding: 16px 6px 0; text-align: center; }
body.aroma-site .product-small .box-text .price-wrapper, body.aroma-site .product-small .box-text .add-to-cart-button { justify-content: center; text-align: center; }
body.aroma-site .product-small .name, body.aroma-site .product-small .product-title {
  font-size: 17px; line-height: 1.35; font-weight: 400; color: var(--ar-ink); margin-bottom: 4px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
body.aroma-site .product-small .aroma-sub {
  font-size: 13px; line-height: 1.5; color: var(--ar-muted); margin: 0 0 8px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
body.aroma-site .product-small .category { color: var(--ar-muted); opacity: 1; letter-spacing: .08em; }
body.aroma-site .product-small .price { font-size: 17px; }
body.aroma-site .badge-inner, body.aroma-site .onsale { background: rgba(255,255,255,.8) !important; color: var(--ar-ink) !important; border-radius: 999px !important; font-weight: 400; }
body.aroma-site .product-small .add-to-cart-button .button { padding-inline: 18px; }
/* "sold out" label → small dark pill like the homepage badges */
body.aroma-site .box-image .out-of-stock-label {
  top: 14px; bottom: auto; inset-inline-start: 14px; inset-inline-end: auto; left: auto; right: auto;
  width: auto; padding: 7px 14px; border-radius: 999px; transform: none; z-index: 2;
  background: rgba(15,27,25,.82); color: var(--ar-ivory); opacity: 1;
  font-size: 12px; font-weight: 400; letter-spacing: .04em; text-transform: none;
}
body.aroma-site .product-small.outofstock .box-image img { opacity: .55; }

/* Page / shop titles and breadcrumbs */
body.aroma-site .shop-page-title, body.aroma-site .page-title { background: var(--ar-salt); }
body.aroma-site .shop-page-title h1, body.aroma-site .page-title h1 { font-size: clamp(30px, 3.6vw, 56px); font-weight: 300; text-transform: none; letter-spacing: 0; }
body.aroma-site .breadcrumbs, body.aroma-site .woocommerce-breadcrumb { color: var(--ar-muted); text-transform: none; letter-spacing: 0; font-weight: 300; }

/* Single product */
body.aroma-site .product-gallery .woocommerce-product-gallery__wrapper, body.aroma-site .product-gallery-slider {
  background: linear-gradient(160deg, #efe7da, #e2d6c4); border-radius: 8px;
}
body.aroma-site .product-gallery img { mix-blend-mode: multiply; }
body.aroma-site .product-info .product-title { font-size: clamp(26px, 2.6vw, 42px); font-weight: 300; line-height: 1.2; }
body.aroma-site .product-info .price { font-size: 26px; }
body.aroma-site .product-short-description { color: #4a463f; font-size: 16px; }
body.aroma-site .is-divider { background-color: var(--ar-gold); opacity: .6; }
body.aroma-site .product-tabs a, body.aroma-site .tabs a { font-weight: 300; letter-spacing: 0; text-transform: none; }
body.aroma-site .nav-line > li.active > a::before, body.aroma-site .tabs .active > a::before { background-color: var(--ar-gold); }

/* Cart & checkout */
body.aroma-site .cart_totals, body.aroma-site #order_review, body.aroma-site .checkout-sidebar, body.aroma-site .cart-sidebar .col-inner {
  border-radius: 10px;
}
body.aroma-site .cart_totals > table th, body.aroma-site .shop_table thead th { font-weight: 400; text-transform: none; letter-spacing: 0; }
body.aroma-site .checkout-breadcrumbs a { text-transform: none; letter-spacing: 0; }
body.aroma-site .woocommerce-message, body.aroma-site .woocommerce-info, body.aroma-site .message-container {
  border-radius: 8px;
}

/* Flatsome off-canvas pieces we no longer use */
body.aroma-site #main-menu.mobile-sidebar { display: none; }

/* Lenis smooth scroll (homepage only) */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }

/* ---------- side cart (opens after "add to cart" / from the bag) ---------- */
.aroma-cart { position: fixed; inset: 0; z-index: 99990; visibility: hidden; pointer-events: none; font-family: var(--ar-f); }
.aroma-cart.is-open { visibility: visible; pointer-events: auto; }
.aroma-cart__shade { position: absolute; inset: 0; background: rgba(15,27,25,.45); opacity: 0; transition: opacity .45s var(--ar-ease); }
.aroma-cart.is-open .aroma-cart__shade { opacity: 1; }
.aroma-cart__panel {
  position: absolute; top: 0; bottom: 0; left: 0; width: min(430px, 92vw);
  background: var(--ar-ivory); color: var(--ar-ink); display: flex; flex-direction: column;
  padding: 26px 24px 22px; box-shadow: 0 0 60px rgba(15,27,25,.22);
  transform: translateX(-104%); transition: transform .6s var(--ar-ease); overflow: hidden;
}
body.aroma-ltr .aroma-cart__panel { left: auto; right: 0; transform: translateX(104%); }
.aroma-cart.is-open .aroma-cart__panel { transform: none; }
.aroma-cart__head { display: flex; align-items: center; justify-content: space-between; padding-bottom: 16px; border-bottom: 1px solid rgba(15,27,25,.12); }
.aroma-cart__head h3 { margin: 0; font-size: 24px; font-weight: 300; color: var(--ar-ink); }
.aroma-cart__x { background: none; border: 0; font-size: 34px; line-height: 1; font-weight: 200; color: var(--ar-ink); cursor: pointer; padding: 0 4px; margin: 0; min-height: 0; }
.aroma-cart .widget_shopping_cart_content { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.aroma-cart ul.woocommerce-mini-cart { list-style: none; margin: 0; padding: 6px 0; flex: 1; overflow-y: auto; }
.aroma-cart li.mini_cart_item {
  position: relative; list-style: none; margin: 0; padding: 16px 88px 16px 30px; min-height: 104px;
  border-bottom: 1px solid rgba(15,27,25,.08); font-size: 15px; line-height: 1.4;
}
body.aroma-ltr .aroma-cart li.mini_cart_item { padding: 16px 30px 16px 88px; }
.aroma-cart li.mini_cart_item a:not(.remove) {
  color: var(--ar-ink); font-weight: 400; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.aroma-cart li.mini_cart_item img {
  position: absolute !important; top: 16px; right: 0; left: auto; float: none;
  width: 72px !important; height: 72px !important; max-width: none; object-fit: contain; margin: 0 !important; border-radius: 6px;
  background: linear-gradient(160deg, #efe7da, #e2d6c4); mix-blend-mode: multiply; box-shadow: none;
}
body.aroma-ltr .aroma-cart li.mini_cart_item img { right: auto; left: 0; }
.aroma-cart li.mini_cart_item .quantity { display: block; margin-top: 6px; color: var(--ar-muted); font-size: 14px; }
.aroma-cart li.mini_cart_item a.remove {
  position: absolute; top: 16px; left: 0; width: 22px; height: 22px; line-height: 20px; text-align: center;
  border: 1px solid rgba(15,27,25,.2) !important; border-radius: 50%; color: var(--ar-muted) !important; font-size: 15px; background: none;
}
body.aroma-ltr .aroma-cart li.mini_cart_item a.remove { left: auto; right: 0; }
.aroma-cart li.mini_cart_item a.remove:hover { background: var(--ar-ink); color: var(--ar-ivory) !important; }
.aroma-cart .woocommerce-mini-cart__total { display: flex; justify-content: space-between; align-items: baseline; margin: 0; padding: 16px 0 14px; border-top: 1px solid rgba(15,27,25,.12); font-size: 17px; }
.aroma-cart .woocommerce-mini-cart__total strong { font-weight: 400; }
.aroma-cart .woocommerce-mini-cart__buttons { display: flex; flex-direction: column; gap: 10px; margin: 0; }
.aroma-cart .woocommerce-mini-cart__buttons a.button {
  display: block; width: 100%; margin: 0; text-align: center; padding: 14px 20px; border-radius: 999px;
  background: transparent; color: var(--ar-ink); border: 1px solid var(--ar-ink); font-size: 15px; font-weight: 400; letter-spacing: .02em; text-transform: none;
}
.aroma-cart .woocommerce-mini-cart__buttons a.button.checkout { background: var(--ar-ink); color: var(--ar-ivory); }
.aroma-cart .woocommerce-mini-cart__buttons a.button:hover { background: var(--ar-gold); border-color: var(--ar-gold); color: #fff; }
.aroma-cart .woocommerce-mini-cart__empty-message { margin: 40px 0; text-align: center; color: var(--ar-muted); font-size: 16px; }
.aroma-cart .blockUI.blockOverlay { background: rgba(244,239,231,.6) !important; }