/* Geist, Manrope and Kanit are self-hosted and subsetted; their @font-face block
   is inlined in <head> by core/_web_fonts_inline.html, which core/base.html
   includes for every theme. Regenerate with scripts/build_web_font_subsets.py.

   This file used to open with an @import to fonts.googleapis.com for four
   families. That is the worst place to put one: the browser must fetch this
   73 KiB stylesheet before it can even discover the font stylesheet, and only
   then the font files -- a three-hop serialized chain to an origin base.html
   does not preconnect to. Of the four, Geist was already self-hosted here (so
   UnBox Labs downloaded a second, unsubsetted copy) and Sora was never
   referenced by a single rule. */

html:root {
  /**colors unboxlabs.ai*/
  --nav-color: #ffffff;
  --text-color-card: #1a1a1a;
  --new-primary-color: #280a5e; /* Viola scuro */
  --bg-filter-color: #f5f5f5;
  --primary-color: #280a5e;
  --secondary-color: #6a1b9a;
  --primary-bg-color: #f8f9fa;
  --menu-bg-color: #e9dcc9; /* Colore tan dallo screenshot */
  --mega-menu-bg-color: #ffffff;
  --mega-menu-separator-color: #eeeeee;
  --offer-color-pill: #280a5e;
  --merchant-color-pill: #f3e5f5;
  --limited-offer-pill-color: #6a1b9a;
  --price-discount-color: #28a745; /* Verde per i prezzi */
  --discount-pill-color: #ede7f6; /* Sfondo badge sconto */
  --discount-color: #6a1b9a; /* Testo badge sconto */

  --pn-primary-rgb: 40, 10, 94;

  --header-bg: #efe6fd;
  --header-txt: #000000;

  --ubl-orange: #ff8000;

  --bg-color: #eef0fe;

  --bg-color-beige: #E5D3BA;
  --bg-color-brown: #977246;

  --primary: #250770;
  --green: #0dbd79;
  --light-gray: #837e80;

  --section-text-color: #353333;
  --section-bg-color: #E9E6F1;
  --ubl-nav-search-border: #db9e71;
  --ubl-nav-search-text: #913600;

  --pp-accent: #ff8000;
  --pp-accent-2: #ff5f00;
}

body {
  background-color: #fff8dc !important;
}

.bluebg, form.bluebg, button.bluebg, #mobileSearchForm.bluebg, #menuToggleButton.bluebg {
  background-color: transparent !important;
  color: #000000 !important;
  border: 1px solid rgba(0,0,0,0.1) !important;
}

input#serachDesktop, input#expandableSearch {
  background-color: var(--bg-color-beige) !important;
  color: #1a1a1a !important;
  border: 1px solid rgba(0,0,0,0.1) !important;
}

.navbar-container {
  background-color: var(--bg-color-beige) !important;
  padding: 0;
  width: 100% !important;
  max-width: none !important;
}

header.bg-mobile {
  background-color: var(--bg-color-beige) !important;
}

body.has-admin-top-menu {
  --admin-top-menu-height: 58px;
}

body.has-admin-top-menu #admin-menu {
  z-index: 1100;
}

@media (min-width: 992px) {
  body:has(.ubl-navbar-shell[data-ubl-navbar-home="false"]) {
    padding-top: 74px;
  }

  body.ubl-navbar-static-attached {
    padding-top: 74px;
  }

  header.bg-mobile:has(.ubl-navbar-shell[data-ubl-navbar-home="false"]) {
    background-color: #e2cfb4 !important;
    box-shadow: 0 1px 0 rgba(53, 51, 51, 0.08);
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    pointer-events: auto;
  }

  body:has(.ubl-navbar-shell[data-ubl-navbar-home="false"]),
  body.ubl-navbar-static-attached {
    padding-top: 0;
  }

  header.bg-mobile {
    background-color: transparent !important;
    background-image: none !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 40 !important;
    pointer-events: none;
    transition: background-color 180ms ease, box-shadow 180ms ease, backdrop-filter 180ms ease;
  }

  body.ubl-navbar-is-scrolled header.bg-mobile {
    background-color: transparent !important;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  header.bg-mobile.is-scrolled {
    background-color: transparent !important;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  header.bg-mobile:has(.ubl-navbar-shell[data-ubl-navbar-home="false"]) {
    position: sticky !important;
    top: 0 !important;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.35) 0%, rgba(255, 255, 255, 0.10) 100%) !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.13);
    -webkit-backdrop-filter: blur(24px) !important;
    backdrop-filter: blur(24px) !important;
    pointer-events: auto;
  }

  body.has-admin-top-menu header.bg-mobile,
  body.has-admin-top-menu header.bg-mobile:has(.ubl-navbar-shell[data-ubl-navbar-home="false"]) {
    top: var(--admin-top-menu-height) !important;
  }

  header.bg-mobile .container.bg-mobile,
  header.bg-mobile .navbar-container {
    background-color: transparent !important;
    background-image: none !important;
    position: static !important;
    box-shadow: none !important;
  }

  header.bg-mobile .ubl-navbar-shell,
  header.bg-mobile .dropdown-menu {
    pointer-events: auto;
  }
}

.container.bg-mobile {
  max-width: none !important;
  width: 100% !important;
  padding: 0 !important;
}

#serachDesktop::placeholder, #expandableSearch::placeholder {
  color: #837e80 !important;
}

.bi-search, .search-mobile-icon path {
  fill: #280a5e !important;
}

.bg-menu, .bg-new-primary-color,
.dropdown-menu.bg-menu,
.navbar.bg-menu,
div.bg-menu,
#mobile-menu-dropdown.bg-menu {
  background-color: var(--bg-color-beige) !important;
  color: #1a1a1a !important;
}

#navbarSupportedContent {
  background-color: transparent !important;
}

.main-navbar {
  margin-top: 0 !important;
  border-bottom: none !important;
  min-height: 70px !important;
  display: flex !important;
  align-items: center !important;
  background-color: var(--bg-color-beige) !important;
}

.main-navbar .container-fluid {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Rimuovi margini che potrebbero staccare il dropdown */
.main-navbar .navbar-nav, .main-navbar .nav-item {
  margin: 0 !important;
}

.dropdown-menu {
  border: 1px solid #dee2e6 !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1) !important;
  border-radius: 8px !important;
  margin-top: 0 !important; /* Ridotto da 10px a 0 per evitare distacchi */
  top: 100% !important;
  padding: 0 !important;
  overflow: hidden !important;
}

.main-navbar .nav-link {
  color: #000000 !important;
  font-weight: 700 !important;
  font-size: 0.9rem !important;
  text-transform: capitalize !important;
  display: flex !important;
  align-items: center !important;
  padding-left: 0.4rem !important;
  padding-right: 0.4rem !important;
  white-space: nowrap !important;
}

/* Puntino viola come separatore */
.main-navbar .nav-item:not(:last-child) .nav-link::after {
  content: "•";
  color: #c5b2f1; /* Viola più vicino allo screenshot */
  margin-left: 0.5rem;
  font-size: 1rem;
  font-weight: bold;
}

/* Rimuovi freccia dropdown default se presente */
.main-navbar .dropdown-toggle::after {
  display: none !important;
}

.dropdown-item {
  color: #1a1a1a !important;
}

.dropdown-item:hover {
  background-color: transparent !important;
  color: var(--primary-color) !important;
  text-decoration: underline !important;
}

.main-navbar .nav-link:hover,
.main-navbar .nav-link.show,
.main-navbar .nav-link.active {
  background-color: transparent !important;
  color: var(--new-primary-color) !important;
}

.menu-subcategory-title {
  color: #977246 !important;
  font-weight: bold !important;
}

.menu-separator {
  border-color: #977246 !important;
}

.dropdown-menu h5 {
  color: #000000 !important;
}

@media (min-width: 992px) {
  .ubl-navbar-shell {
    width: 100%;
    padding: 16px clamp(24px, 4vw, 64px) 0;
    position: relative !important;
    top: 0 !important;
    left: 0 !important;
    z-index: 1030 !important;
    transition: padding 220ms ease;
  }

  .ubl-navbar-shell.is-scrolled,
  body.ubl-navbar-is-scrolled .ubl-navbar-shell {
    position: relative !important;
    top: 0 !important;
    padding: 0 0px;
  }

  .ubl-navbar-shell[data-ubl-navbar-home="false"] {
    padding: 0 24px;
  }

  .ubl-navbar {
    width: 100%;
    min-height: 74px !important;
    padding: 0 !important;
    background-color: transparent !important;
    position: static !important;
  }

  .ubl-navbar-container {
    width: 100%;
    max-width: 1312px;
    min-height: 74px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 16px 24px;
    border-radius: 24px;
    border: 1px solid rgba(255, 255, 255, 0.55);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.35) 0%, rgba(255, 255, 255, 0.10) 100%);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.13);
    -webkit-backdrop-filter: blur(24px);
    backdrop-filter: blur(24px);
    transition: max-width 220ms ease, border-radius 220ms ease, background 220ms ease, background-color 220ms ease, box-shadow 220ms ease, border-color 220ms ease, backdrop-filter 220ms ease;
  }

  .ubl-navbar-shell.is-scrolled .ubl-navbar-container,
  body.ubl-navbar-is-scrolled .ubl-navbar-shell .ubl-navbar-container {
    max-width: 100vw;
    min-height: 74px;
    border-radius: 0px;
    border-color: rgba(255, 255, 255, 0.55);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.35) 0%, rgba(255, 255, 255, 0.10) 100%);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.13);
    -webkit-backdrop-filter: blur(24px);
    backdrop-filter: blur(24px);
  }

  .ubl-navbar-shell[data-ubl-navbar-home="false"] .ubl-navbar-container {
    max-width: 1312px;
    border-radius: 0;
    border-color: transparent;
    background: transparent;
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  .ubl-navbar-brand {
    width: 162px;
    min-width: 162px;
    height: 42px;
    margin: 0 !important;
    display: flex;
    align-items: center;
  }

  .ubl-navbar-brand img {
    width: 162px;
    max-width: 162px;
    height: 42px;
    max-height: 42px;
    object-fit: contain;
  }

  .ubl-navbar-content {
    display: flex !important;
    align-items: center;
    justify-content: flex-end;
    gap: 16px;
    flex: 1 1 auto;
    min-width: 0;
  }

  .ubl-navbar-menu-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
  }

  .ubl-navbar-menu {
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: nowrap;
    overflow: visible;
  }

  .ubl-navbar .navbar-nav,
  .ubl-navbar .nav-item {
    margin: 0 !important;
  }

  .ubl-navbar .nav-item {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .ubl-navbar .nav-link {
    height: 50px;
    padding: 8px 12px !important;
    gap: 8px;
    color: #000000 !important;
    font-family: "Manrope", sans-serif;
    font-size: 12px !important;
    font-weight: 700 !important;
    line-height: 0.8;
    letter-spacing: 0.12px;
    text-transform: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center;
    white-space: nowrap !important;
  }

  .ubl-navbar .nav-item:not(:last-child) .nav-link::after {
    content: none !important;
  }

  .ubl-navbar .dropdown-toggle::after {
    display: inline-block !important;
    width: 8px;
    height: 8px;
    margin-left: 2px;
    border: solid currentColor;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
    vertical-align: 1px;
  }

  .ubl-navbar .nav-link:hover,
  .ubl-navbar .nav-link.show,
  .ubl-navbar .nav-link.active {
    color: var(--ubl-nav-search-text) !important;
  }

  .ubl-navbar-search-wrap {
    width: 275px;
    min-width: 275px;
    margin-left: 0;
    display: flex;
    align-items: center;
  }

  .ubl-navbar-search {
    width: 275px;
    height: 50px;
    margin: 0;
  }

  .ubl-navbar-search-control {
    position: relative;
    width: 100%;
    height: 50px;
  }

  input#serachDesktop.ubl-navbar-search-input {
    width: 100%;
    height: 50px;
    padding: 12px 48px 12px 24px !important;
    border: 2px solid var(--ubl-nav-search-border) !important;
    border-radius: 100px !important;
    background-color: #ffffff !important;
    color: var(--ubl-nav-search-text) !important;
    font-family: "Geist", "Manrope", sans-serif;
    font-size: 16px;
    line-height: normal;
    box-shadow: none !important;
  }

  input#serachDesktop.ubl-navbar-search-input::placeholder {
    color: var(--ubl-nav-search-text) !important;
    opacity: 1;
  }

  input#serachDesktop.ubl-navbar-search-input:focus {
    border-color: var(--ubl-nav-search-text) !important;
    box-shadow: 0 0 0 3px rgba(219, 158, 113, 0.25) !important;
  }

  .ubl-navbar-search-button {
    position: absolute;
    top: 50%;
    right: 20px;
    width: 20px;
    height: 20px;
    padding: 0 48px;
    border: 0;
    background: transparent;
    color: #000000;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: translateY(-50%);
  }

  .ubl-navbar-search-button .bi-search {
    fill: currentColor !important;
  }

  .ubl-navbar .dropdown-menu {
    top: 100% !important;
    margin-top: 0 !important;
    border: 1px solid rgba(151, 114, 70, 0.2) !important;
    border-radius: 16px !important;
    background-color: #ffffff !important;
    box-shadow: 0 18px 40px rgba(53, 51, 51, 0.14) !important;
  }
}

.ubl-hero {
  position: relative;
  min-height: 971px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 190px 16px 120px;
  border-radius: 0 0 70px 70px;
  background:
    radial-gradient(72% 82% at 50% -17%, #fcf8db 0%, #ffe7cd 47%, #f8c797 54%, #f2a761 63%, #f8bc5f 75%, #f1a939 88%, #eb9512 100%);
}

.ubl-hero-copy {
  position: relative;
  z-index: 2;
  width: min(610px, 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.ubl-hero-title {
  width: min(548px, 100%);
  margin: 0 0 18px;
  color: #353333;
  font-family: "Kanit", "Manrope", sans-serif;
  font-size: 42px;
  font-weight: 900;
  line-height: 0.96;
  letter-spacing: 0;
  text-align: center;
}

.ubl-hero-title span {
  display: block;
}

.ubl-hero-title span + span {
  margin-top: 18px;
}

.ubl-hero-title strong {
  color: #ff5f00;
  font-weight: 900;
}

.ubl-hero-search {
  width: min(610px, 100%);
  height: 72px;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 8px 8px 8px 42px;
  margin-top: 0;
  border: 1px solid #dce1fc;
  border-radius: 16px;
  background-color: #eef0fe;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.1), 0 8px 32px rgba(0,0,0,0.16);
}

.ubl-hero-search input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: #353333;
  font-family: "Kanit", "Manrope", sans-serif;
  font-size: 20px;
  font-weight: 400;
}

.ubl-hero-search input::placeholder {
  color: #353333;
  opacity: 1;
}

.ubl-hero-search button {
  width: 64px;
  height: 56px;
  border: 0;
  border-radius: 16px;
  background-color: #ff5f00;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ubl-hero-search button .bi {
  fill: currentColor !important;
  font-size: 22px;
}

.ubl-hero-suggestions {
  width: min(610px, 100%);
  margin-top: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
  color: #353333;
  font-family: "Kanit", "Manrope", sans-serif;
  font-size: 14px;
  font-weight: 400;
}

.ubl-hero-suggestions a {
  padding: 8px 16px;
  border: 1px solid rgba(182,196,250,0.15);
  border-radius: 100px;
  background-color: #913600;
  color: #ffffff;
  font-size: 11px;
  font-weight: 500;
  line-height: 16px;
  letter-spacing: 0.1px;
  text-decoration: none;
  white-space: nowrap;
}

.ubl-hero-asset {
  position: absolute;
  z-index: 1;
  display: block;
  height: auto;
  pointer-events: none;
  user-select: none;
  --ubl-parallax-x: 0px;
  --ubl-parallax-y: 0px;
  --ubl-parallax-rotate: 0deg;
  --ubl-parallax-scale: 1;
  --ubl-hero-asset-rotation: 0deg;
  transform:
    translate3d(var(--ubl-parallax-x), var(--ubl-parallax-y), 0)
    rotate(calc(var(--ubl-hero-asset-rotation) + var(--ubl-parallax-rotate)))
    scale(var(--ubl-parallax-scale));
  will-change: transform;
}

.ubl-hero-dyson {
  width: 238px;
  left: 7.5%;
  top: 31%;
  --ubl-hero-asset-rotation: -23deg;
}

.ubl-hero-macbook {
  width: 215px;
  left: 28.2%;
  top: 15.1%;
  --ubl-hero-asset-rotation: -14.5deg;
}

.ubl-hero-gamepad {
  width: 178px;
  left: 56.2%;
  top: 14.2%;
  --ubl-hero-asset-rotation: 28deg;
}

.ubl-hero-sneakers {
  width: 183px;
  right: 8.8%;
  top: 28.9%;
  --ubl-hero-asset-rotation: 10.5deg;
}

.ubl-hero-sunglasses {
  width: 196px;
  right: 1.5%;
  top: 56%;
  --ubl-hero-asset-rotation: 15.7deg;
}

.ubl-hero-yoga-mat {
  width: 229px;
  right: 15.4%;
  top: 70.5%;
  --ubl-hero-asset-rotation: -19deg;
}

.ubl-hero-bikini {
  width: 164px;
  left: 11%;
  top: 59.2%;
  --ubl-hero-asset-rotation: -21.5deg;
}

.ubl-hero-flip-flops {
  width: 304px;
  left: 36.1%;
  top: 70.5%;
  --ubl-hero-asset-rotation: 25deg;
}

@media (prefers-reduced-motion: reduce) {
  .ubl-hero-asset {
    will-change: auto;
  }
}

.ubl-about {
  width: 100%;
  padding: 120px 16px;
  background-color: #fff8dc;
}

.ubl-about-container {
  width: 100%;
  max-width: 1320px;
  margin: 0 auto;
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: 64px;
}

.ubl-about-copy {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 24px;
}

.ubl-about-logo {
  width: 416px;
  height: 107px;
  display: block;
  object-fit: contain;
}

.ubl-about-title {
  max-width: 680px;
  margin: 0;
  color: #000000;
  font-family: "Kanit", "Manrope", sans-serif;
  font-size: 49.21px;
  font-weight: 300;
  line-height: 46px;
  letter-spacing: 0;
}

.ubl-about-title span,
.ubl-about-title strong {
  display: block;
}

.ubl-about-title strong {
  font-weight: 800;
}

.ubl-about-media {
  width: 553px;
  height: 554px;
  flex: 0 0 553px;
  overflow: hidden;
  border-radius: 90px;
}

.ubl-about-media img,
.ubl-about-media video {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.ubl-seasonal-campaign {
  position: relative;
  overflow: hidden;
  width: 100%;
  padding: 120px 16px;
  border-radius: 0 0 55px 55px;
  background-image:
    linear-gradient(rgba(255, 119, 29, 0.7), rgba(255, 119, 29, 0.7)),
    var(--ubl-seasonal-bg);
  background-size: cover;
  background-position: center;
}

.home-page-section.section-1 .ubl-seasonal-campaign {
  padding-top: 150px;
}

.ubl-seasonal-campaign-inner {
  width: 100%;
  max-width: 1320px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-template-rows: repeat(2, auto);
  gap: 16px;
  align-items: stretch;
}

.ubl-seasonal-grid {
  display: contents;
}

.ubl-seasonal-title-card {
  min-height: 377px;
  padding: 10px;
  display: flex;
  align-items: center;
  grid-column: span 2;
}

.ubl-seasonal-title-card h2 {
  max-width: 525px;
  margin: 0;
  color: #ffffff;
  font-family: "Kanit", "Manrope", sans-serif;
  font-size: 106px;
  font-weight: 900;
  line-height: 0.925;
  letter-spacing: 0;
}

.ubl-seasonal-product-card {
  min-width: 0;
  min-height: 0;
  padding: 12px;
  border: 1px solid #eef0fe;
  border-radius: 16px;
  background-color: #ffffff;
  display: flex;
  flex-direction: column;
  gap: 12px;
  box-shadow: 0 10px 24px rgba(53, 51, 51, 0.08);
}

.ubl-seasonal-card-1 {
  grid-column: 3;
  grid-row: 1;
}

.ubl-seasonal-card-2 {
  grid-column: 4;
  grid-row: 1;
}

.ubl-seasonal-card-3 {
  grid-column: 1;
  grid-row: 2;
}

.ubl-seasonal-card-4 {
  grid-column: 2;
  grid-row: 2;
}

.ubl-seasonal-card-5 {
  grid-column: 3;
  grid-row: 2;
}

.ubl-seasonal-card-6 {
  grid-column: 4;
  grid-row: 2;
}

.ubl-seasonal-product-media {
  position: relative;
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 8px;
  background-color: #ffffff;
  text-decoration: none;
}

.ubl-seasonal-product-media img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center center;
  border-radius: 8px;
}

.ubl-seasonal-discount {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 1;
  padding: 4px 12px;
  border: 1px solid rgba(182, 196, 250, 0.15);
  border-radius: 100px;
  background-color: #b6c4fa;
  color: #051747;
  font-family: "Manrope", sans-serif;
  font-size: 11px;
  font-weight: 400;
  line-height: 16px;
  letter-spacing: 0.1px;
  white-space: nowrap;
}

.ubl-seasonal-product-body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  min-width: 0;
}

.ubl-seasonal-product-identity,
.ubl-seasonal-product-pricing {
  width: 100%;
}

.ubl-seasonal-original-price {
  color: #837e80;
  font-family: "Manrope", sans-serif;
  font-size: 14px;
  line-height: 20px;
  text-decoration: line-through;
}

.ubl-seasonal-price-row {
  display: flex;
  align-items: flex-end;
  gap: 8px;
}

.ubl-seasonal-price {
  color: #0dbd79;
  font-family: "Manrope", sans-serif;
  font-size: 24px;
  line-height: 30px;
}

.ubl-seasonal-saving {
  color: #d93025;
  font-family: "Manrope", sans-serif;
  font-size: 14px;
  line-height: 20px;
}

.ubl-seasonal-product-name {
  width: 100%;
  margin-top: 4px;
  color: #212529;
  display: -webkit-box;
  overflow: hidden;
  font-family: "Manrope", sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  text-decoration: none;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}

.ubl-seasonal-product-name:hover {
  color: var(--ubl-nav-search-text);
}

.ubl-seasonal-product-meta {
  width: 100%;
  margin-top: 4px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  color: #837e80;
  font-family: "Manrope", sans-serif;
  font-size: 11px;
  font-weight: 400;
  line-height: 16px;
  letter-spacing: 0.1px;
  text-transform: uppercase;
}

.ubl-seasonal-rating {
  color: #ea4600;
  text-transform: none;
  white-space: nowrap;
}

.ubl-summer-offers {
  position: relative;
  overflow: hidden;
  width: 100%;
  padding: 120px 16px;
  background:
    radial-gradient(circle at 8% 6%, rgba(182, 196, 250, 0.55) 0%, transparent 62%),
    radial-gradient(circle at 94% 4%, rgba(255, 95, 0, 0.28) 0%, transparent 58%),
    radial-gradient(circle at 78% 92%, rgba(13, 189, 121, 0.16) 0%, transparent 60%),
    linear-gradient(135deg, #dff9f5 0%, #fff8dc 48%, #ffd3ae 100%);
}

/* Soft sun glow, top-right corner — pure CSS */
.ubl-summer-sun {
  position: absolute;
  z-index: 0;
  top: -120px;
  right: -120px;
  width: 360px;
  height: 360px;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle, rgba(255, 209, 102, 0.85) 0%, rgba(255, 159, 64, 0.45) 38%, transparent 70%);
  filter: blur(2px);
}

/* Wavy "sea" band along the bottom edge */
.ubl-summer-offers::after {
  content: "";
  position: absolute;
  z-index: 0;
  left: 0;
  right: 0;
  bottom: 0;
  height: 90px;
  pointer-events: none;
  background: linear-gradient(180deg, transparent 0%, rgba(95, 199, 230, 0.16) 100%);
  -webkit-mask: radial-gradient(22px 22px at 22px 0, transparent 0 22px, #000 23px) repeat-x 0 0 / 44px 90px;
  mask: radial-gradient(22px 22px at 22px 0, transparent 0 22px, #000 23px) repeat-x 0 0 / 44px 90px;
}

/* Scattered confetti dots */
.ubl-summer-confetti {
  position: absolute;
  z-index: 0;
  inset: 0;
  pointer-events: none;
}

.ubl-summer-dot {
  position: absolute;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  opacity: 0.85;
}

.ubl-summer-dot-1 { top: 12%; left: 24%; background-color: #ff5f00; }
.ubl-summer-dot-2 { top: 8%;  left: 62%; width: 10px; height: 10px; background-color: #0dbd79; }
.ubl-summer-dot-3 { top: 30%; left: 4%;  width: 18px; height: 18px; background-color: #b6c4fa; }
.ubl-summer-dot-4 { bottom: 18%; right: 6%; background-color: #ffd166; }
.ubl-summer-dot-5 { bottom: 10%; left: 30%; width: 10px; height: 10px; background-color: #ff5f00; }
.ubl-summer-dot-6 { top: 18%; right: 22%; width: 12px; height: 12px; background-color: #0dbd79; }

.ubl-summer-inner {
  position: relative;
  z-index: 1;
  width: min(1140px, 100%);
  margin: 0 auto;
}

.ubl-summer-heading {
  margin: 0 0 24px;
  color: #243634;
  font-family: "Kanit", "Manrope", sans-serif;
  font-size: 64px;
  font-weight: 900;
  line-height: 0.95;
  text-transform: none;
  text-wrap: balance;
}

.ubl-summer-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 12px;
}

.ubl-summer-card {
  min-width: 0;
  padding: 12px;
  border: 1px solid rgba(234, 234, 234, 0.86);
  border-radius: 16px;
  background-color: #ffffff;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.ubl-summer-media {
  position: relative;
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 8px;
  background-color: #ffffff;
  text-decoration: none;
}

.ubl-summer-media img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center center;
  border-radius: 8px;
}

.ubl-summer-discount {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 1;
  padding: 4px 10px;
  border-radius: 100px;
  background-color: #b6c4fa;
  color: #051747;
  font-family: "Manrope", sans-serif;
  font-size: 10px;
  font-weight: 400;
  line-height: 14px;
  white-space: nowrap;
}

.ubl-summer-body {
  min-width: 0;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.ubl-summer-identity,
.ubl-summer-pricing {
  width: 100%;
}

.ubl-summer-card-name {
  color: #212529;
  display: -webkit-box;
  overflow: hidden;
  font-family: "Manrope", sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  text-decoration: none;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.ubl-summer-card-meta {
  margin-top: 4px;
  color: #5c7772;
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-family: "Manrope", sans-serif;
  font-size: 11px;
  font-weight: 400;
  line-height: 16px;
}

.ubl-summer-rating {
  color: #ff5f00;
  white-space: nowrap;
}

.ubl-summer-original-price {
  color: #837e80;
  font-family: "Manrope", sans-serif;
  font-size: 14px;
  line-height: 20px;
  text-decoration: line-through;
}

.ubl-summer-price-row {
  display: flex;
  align-items: flex-end;
  gap: 8px;
}

.ubl-summer-price {
  color: #0dbd79;
  font-family: "Manrope", sans-serif;
  font-size: 24px;
  font-weight: 400;
  line-height: 30px;
}

.ubl-summer-saving {
  color: #d93025;
  font-family: "Manrope", sans-serif;
  font-size: 14px;
  line-height: 20px;
}

.ubl-summer-deco {
  position: absolute;
  z-index: 0;
  display: block;
  pointer-events: none;
  user-select: none;
  filter: drop-shadow(0 18px 24px rgba(53, 51, 51, 0.16));
  transform: rotate(var(--ubl-summer-rot, 0deg));
  animation: ubl-summer-float 6s ease-in-out infinite;
}

@keyframes ubl-summer-float {
  0%,
  100% {
    transform: translateY(0) rotate(var(--ubl-summer-rot, 0deg));
  }
  50% {
    transform: translateY(-16px) rotate(calc(var(--ubl-summer-rot, 0deg) + 2deg));
  }
}

/* Top-left anchor — enlarged */
.ubl-summer-sunglasses-one {
  width: 196px;
  left: 2%;
  top: 40px;
  --ubl-summer-rot: -12deg;
  animation-duration: 7s;
}

/* Top-right, near the heading's free space */
.ubl-summer-bikini-one {
  width: 150px;
  right: 4%;
  top: -28px;
  --ubl-summer-rot: 10deg;
  animation-duration: 6.5s;
  animation-delay: -1.2s;
}

/* Bottom-right corner */
.ubl-summer-flipflops-one {
  width: 156px;
  right: 6%;
  bottom: -36px;
  --ubl-summer-rot: 8deg;
  animation-duration: 8s;
  animation-delay: -0.6s;
}

/* Bottom-left corner — fills the previously empty area */
.ubl-summer-yogamat-one {
  width: 170px;
  left: -28px;
  bottom: -24px;
  --ubl-summer-rot: -16deg;
  animation-duration: 7.5s;
  animation-delay: -2s;
}

/* Mid-left accent */
.ubl-summer-sneakers-one {
  width: 130px;
  left: 1%;
  top: 52%;
  --ubl-summer-rot: 6deg;
  animation-duration: 6.8s;
  animation-delay: -3s;
}

/* Confetti dots get a gentle drift too */
.ubl-summer-dot {
  animation: ubl-summer-float 5.5s ease-in-out infinite;
}
.ubl-summer-dot-2 { animation-delay: -1s; }
.ubl-summer-dot-3 { animation-delay: -2s; }
.ubl-summer-dot-4 { animation-delay: -2.5s; }
.ubl-summer-dot-5 { animation-delay: -3.5s; }
.ubl-summer-dot-6 { animation-delay: -4s; }

@media (prefers-reduced-motion: reduce) {
  .ubl-summer-deco,
  .ubl-summer-dot {
    animation: none;
  }
}

.ubl-featured-grid-section {
  width: 100%;
  padding: 96px 16px;
  background-color: #fff8dc;
}

.ubl-featured-grid-inner {
  width: 100%;
  max-width: 1320px;
  margin: 0 auto;
}

.ubl-featured-grid-heading {
  width: 100%;
  margin: 0 0 40px;
  color: #353333;
  font-family: "Manrope", sans-serif;
  font-size: 36px;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: 0;
}

.ubl-featured-grid {
  display: grid;
  grid-template-columns: minmax(0, 654px) minmax(0, 1fr);
  gap: 10px;
  align-items: stretch;
}

.ubl-featured-product-card {
  min-width: 0;
  overflow: hidden;
  border-radius: 16px;
  background-color: #fbf9f5;
  display: flex;
  flex-direction: column;
}

.ubl-featured-product-media {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background-color: #fbf9f5;
  text-decoration: none;
}

.ubl-featured-product-media img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center center;
}

.ubl-featured-discount {
  position: absolute;
  z-index: 1;
  top: 16px;
  left: 16px;
  min-height: 24px;
  padding: 4px 16px;
  border-radius: 30px;
  background-color: #e9e6f1;
  color: #360083;
  font-family: "Manrope", sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: normal;
  white-space: nowrap;
}

.ubl-featured-small-discount {
  position: absolute;
  z-index: 1;
  top: 12px;
  left: 12px;
  min-height: 24px;
  padding: 4px 12px;
  border: 1px solid rgba(182, 196, 250, 0.15);
  border-radius: 100px;
  background-color: #b6c4fa;
  color: #051747;
  font-family: "Manrope", sans-serif;
  font-size: 11px;
  font-weight: 400;
  line-height: 16px;
  letter-spacing: 0.1px;
  white-space: nowrap;
}

.ubl-featured-product-body {
  flex: 1;
  padding: 24px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 25px;
}

.ubl-featured-product-identity,
.ubl-featured-product-pricing {
  display: flex;
  flex-direction: column;
  gap: 25px;
}

.ubl-featured-product-meta {
  min-height: 37px;
  padding: 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  color: #051747;
  font-family: "Manrope", sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 1;
}

.ubl-featured-rating {
  color: #ea4600;
  font-size: 14px;
  white-space: nowrap;
}

.ubl-featured-product-name {
  color: #212529;
  display: -webkit-box;
  overflow: hidden;
  font-family: "Manrope", sans-serif;
  font-size: 36px;
  font-weight: 400;
  line-height: 40.9px;
  text-decoration: none;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.ubl-featured-product-name:hover {
  color: var(--ubl-nav-search-text);
}

.ubl-featured-price-block {
  display: flex;
  flex-direction: column;
}

.ubl-featured-price-label {
  color: #837e80;
  font-family: "Manrope", sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 1;
}

.ubl-featured-price-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.ubl-featured-price {
  color: #0dbd79;
  font-family: "Manrope", sans-serif;
  font-size: 23px;
  font-weight: 400;
  line-height: 1.2;
}

.ubl-featured-original-price {
  color: #837e80;
  font-family: "Manrope", sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 1;
  text-decoration: line-through;
}

.ubl-featured-small-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: 10px;
  align-items: stretch;
  height: 100%;
}

.ubl-featured-small-card {
  min-width: 0;
  min-height: 0;
  padding: 12px;
  border: 1px solid #eef0fe;
  border-radius: 16px;
  background-color: #ffffff;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.ubl-featured-small-media {
  position: relative;
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 8px;
  background-color: #ffffff;
  text-decoration: none;
}

.ubl-featured-small-media img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center center;
  border-radius: 8px;
}

.ubl-featured-small-body {
  display: flex;
  flex: 1;
  min-width: 0;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
}

.ubl-featured-small-identity,
.ubl-featured-small-pricing {
  width: 100%;
}

.ubl-featured-small-original-price {
  color: #837e80;
  font-family: "Manrope", sans-serif;
  font-weight: 400;
  font-size: 12px;
  line-height: 1.2;
  text-decoration: line-through;
}

.ubl-featured-small-price-row {
  display: flex;
  align-items: flex-end;
  gap: 8px;
}

.ubl-featured-small-price {
  color: #0dbd79;
  font-family: "Manrope", sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.25;
}

.ubl-featured-small-saving {
  color: #d93025;
  font-family: "Manrope", sans-serif;
  font-size: 14px;
  line-height: 20px;
}

.ubl-featured-small-name {
  width: 100%;
  margin-top: 4px;
  color: #212529;
  display: -webkit-box;
  overflow: hidden;
  font-family: "Manrope", sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  text-decoration: none;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}

.ubl-featured-small-name:hover {
  color: var(--ubl-nav-search-text);
}

.ubl-featured-small-meta {
  width: 100%;
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  color: #837e80;
  font-family: "Manrope", sans-serif;
  font-size: 11px;
  font-weight: 400;
  line-height: 16px;
  letter-spacing: 0.1px;
  text-transform: uppercase;
}

.ubl-featured-small-rating {
  color: #ea4600;
  text-transform: none;
  white-space: nowrap;
}

.ubl-guides {
  width: 100%;
  padding: 120px 16px;
  background-color: #fff8dc;
}

.ubl-guides-inner {
  width: 100%;
  max-width: 1320px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.ubl-guides-header {
  width: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
}

.ubl-guides-header h2 {
  margin: 0;
  color: #000000;
  font-family: "Manrope", sans-serif;
  font-size: 20px;
  font-weight: 800;
  line-height: 28px;
  letter-spacing: 0;
  text-transform: uppercase;
}

.ubl-guides-link {
  min-height: 48px;
  padding: 12px 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: #163da0;
  font-family: "Manrope", sans-serif;
  font-size: 16px;
  font-weight: 700;
  line-height: 24px;
  text-decoration: none;
  text-transform: uppercase;
  white-space: nowrap;
}

.ubl-guides-link:hover {
  color: var(--ubl-nav-search-text);
}

.ubl-guides-grid {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
  align-items: stretch;
}

.ubl-guide-card {
  max-width: 340px;
  min-width: 0;
  padding: 16px;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  background-color: #ffffff;
  display: flex;
  flex-direction: column;
  gap: 16px;
  overflow: hidden;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
}

.ubl-guide-media {
  width: 100%;
  height: 190px;
  display: block;
  overflow: hidden;
  border-radius: 8px;
  background-color: #f3f4f6;
  text-decoration: none;
}

.ubl-guide-media img {
  width: 100%;
  height: 118.5%;
  display: block;
  object-fit: cover;
  transform: translateY(-9.25%);
}

.ubl-guide-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.ubl-guide-meta {
  width: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}

.ubl-guide-category {
  padding: 2px 10px;
  border-radius: 9999px;
  background-color: rgba(255, 87, 34, 0.1);
  color: #ff5722;
  font-family: "Manrope", sans-serif;
  font-size: 12px;
  font-weight: 700;
  line-height: 16px;
  white-space: nowrap;
}

.ubl-guide-meta time {
  color: #9ca3af;
  font-family: "Manrope", sans-serif;
  font-size: 11px;
  font-weight: 700;
  line-height: 16px;
  letter-spacing: 0.1px;
  white-space: nowrap;
}

.ubl-guide-title {
  color: #111827;
  display: -webkit-box;
  overflow: hidden;
  font-family: "Manrope", sans-serif;
  font-size: 16px;
  font-weight: 700;
  line-height: 24px;
  text-decoration: none;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.ubl-guide-title:hover {
  color: var(--ubl-nav-search-text);
}

.ubl-guide-excerpt {
  margin: 0;
  color: #353333;
  display: -webkit-box;
  overflow: hidden;
  font-family: "Manrope", sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.ubl-valentine-offers {
  position: relative;
  overflow: hidden;
  width: 100%;
  padding: 120px 16px;
  background-color: rgba(255, 142, 144, 0.25);
}

.ubl-valentine-inner {
  position: relative;
  z-index: 1;
  width: min(1140px, 100%);
  margin: 0 auto;
}

.ubl-valentine-heading {
  margin: 0 0 24px;
  color: #000000;
  font-family: "Manrope", sans-serif;
  font-size: 20px;
  font-weight: 800;
  line-height: 28px;
  text-transform: uppercase;
}

.ubl-valentine-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 12px;
}

.ubl-valentine-card {
  min-width: 0;
  padding: 12px;
  border: 1px solid #eaeaea;
  border-radius: 16px;
  background-color: #f5f5f5;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.ubl-valentine-media {
  position: relative;
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 8px;
  background-color: #ffffff;
  text-decoration: none;
}

.ubl-valentine-media img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center center;
  border-radius: 8px;
}

.ubl-valentine-discount {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 1;
  padding: 4px 10px;
  border-radius: 100px;
  background-color: #b6c4fa;
  color: #051747;
  font-family: "Kanit", "Manrope", sans-serif;
  font-size: 10px;
  font-weight: 700;
  line-height: 14px;
  white-space: nowrap;
}

.ubl-valentine-body {
  min-width: 0;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.ubl-valentine-identity,
.ubl-valentine-pricing {
  width: 100%;
}

.ubl-valentine-original-price {
  color: #aca8a9;
  font-family: "Kanit", "Manrope", sans-serif;
  font-size: 11px;
  line-height: 16px;
  text-decoration: line-through;
}

.ubl-valentine-price-row {
  display: flex;
  align-items: flex-end;
  gap: 8px;
}

.ubl-valentine-price {
  color: #0dbd79;
  font-family: "Kanit", "Manrope", sans-serif;
  font-size: 16px;
  line-height: 24px;
}

.ubl-valentine-saving {
  color: #d93025;
  font-family: "Kanit", "Manrope", sans-serif;
  font-size: 13px;
  line-height: 20px;
}

.ubl-valentine-name {
  margin-top: 4px;
  color: #000000;
  display: -webkit-box;
  overflow: hidden;
  font-family: "Manrope", sans-serif;
  font-size: 14px;
  font-weight: 700;
  line-height: 20px;
  text-decoration: none;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.ubl-valentine-meta {
  width: 100%;
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  color: #5b5759;
  font-family: "Manrope", sans-serif;
  font-size: 10px;
  font-weight: 700;
  line-height: 14px;
  text-transform: uppercase;
}

.ubl-valentine-rating {
  color: #ea4600;
  text-transform: none;
  white-space: nowrap;
}

.ubl-valentine-deco {
  position: absolute;
  z-index: 0;
  pointer-events: none;
  user-select: none;
}

.ubl-valentine-heart-one {
  width: 116px;
  left: 7%;
  top: 12px;
}

.ubl-valentine-heart-two {
  width: 116px;
  right: 12%;
  top: -36px;
  transform: rotate(18deg);
}

.ubl-valentine-confetti-one {
  width: 116px;
  left: 52%;
  top: -36px;
}

.ubl-brands {
  width: 100%;
  padding: 100px 16px;
  background-color: #fff8dc;
}

.ubl-brands-inner {
  width: 100%;
  max-width: 1320px;
  margin: 0 auto;
}

.ubl-brands h2,
.ubl-top-categories h2 {
  margin: 0 0 40px;
  color: #353333;
  font-family: "Manrope", sans-serif;
  font-size: 36px;
  font-weight: 800;
  line-height: 1.2;
}

.ubl-brands-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
}

.ubl-brand-card {
  min-height: 226px;
  padding: 16px;
  border: 1px solid #dce1fc;
  border-radius: 16px;
  background-color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

.ubl-brand-card img {
  width: 67%;
  max-height: 96px;
  display: block;
  object-fit: contain;
}

.ubl-top-categories {
  width: 100%;
  padding: 80px 16px;
  background-color: #f57a1b;
}

.ubl-top-categories-inner {
  width: 100%;
  max-width: 1320px;
  margin: 0 auto;
  overflow: hidden;
}

.ubl-top-categories h2 {
  margin-bottom: 32px;
  color: #ffffff;
}

.ubl-top-categories-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
}

.ubl-top-category-card {
  min-height: 221px;
}

.ubl-top-category-card h3 {
  min-height: 62px;
  margin: 0 0 13px;
  padding: 10px 10px 16px;
  border-bottom: 1px solid #ffffff;
  color: #ffffff;
  font-family: "Manrope", sans-serif;
  font-size: 26px;
  font-weight: 800;
  line-height: 1.25;
}

.ubl-top-category-card a {
  min-height: 40px;
  margin-top: 13px;
  padding: 10px;
  border-bottom: 1px solid #ffffff;
  color: #ffffff;
  display: block;
  font-family: "Manrope", sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 20px;
  text-decoration: none;
}

.ubl-top-category-card a:hover {
  color: #fff8dc;
}

/* ---------- the footer --------------------------------------------------------
   Rewritten on the design system. Three things change, and none of them is
   taste.

   THE TOKENS. The footer sits OUTSIDE `.serp-pagina`, which is where the theme
   declares the palette: writing `var(--divisore)` here would resolve nothing,
   because at this point in the tree those names don't exist. As with the top
   bar's `--h-`, it needs its own block. The values are copied from
   serp-skin.css and must not drift from it.

   THE INK. It used to be white on orange: 2.3:1, below the 4.5 threshold for
   normal text — and the disclaimer is a 14px block. The system declares
   --etichetta specifically for use ON orange fills, and it's the only pairing
   that passes; here it measures about 7:1.

   THE ORANGE. It used to be #ff711f, while the search band right above it
   uses #F57A1B: two different oranges stacked, with the seam visible in
   between. Now it's a single one and the two bands read as one footer. */
.ubl-footer {
  --f-field:      #F57A1B;
  --f-ink: #2B1200;
  --f-line:       rgba(43, 18, 0, .2);
  --f-headings:     'Kanit', system-ui, -apple-system, sans-serif;
  --f-text:      'Geist', system-ui, -apple-system, sans-serif;

  width: 100%;
  padding: clamp(40px, 5vw, 72px) 16px clamp(24px, 2.6vw, 36px);
  background: var(--f-field);
  color: var(--f-ink);
  font-family: var(--f-text);
}

.ubl-footer-inner {
  width: min(100% - 32px, 1280px);
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: clamp(26px, 3.2vw, 42px);
}

/* Three columns, not five. The other two used to be vertical hairlines made
   with two pseudo-elements and a fixed 121px min-height: they hung in empty
   space as soon as a column got shorter than that. Spacing separates just as
   well and has no height to guess at. */
.ubl-footer-main {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(136px, max-content) minmax(0, 1.35fr);
  gap: clamp(24px, 3vw, 56px);
  align-items: start;
  padding-bottom: clamp(22px, 2.6vw, 34px);
  border-bottom: 1px solid var(--f-line);
}

.ubl-footer-logo {
  display: inline-flex;
  align-items: center;
}

/* Height, not width: the logo is a single image and constraining its long
   side distorts it as soon as the file changes. */
.ubl-footer-logo img {
  display: block;
  width: auto;
  height: clamp(36px, 3.2vw, 50px);
  object-fit: contain;
}

.ubl-footer-brand p {
  margin: clamp(16px, 2vw, 26px) 0 0;
  font-size: 14px;
  line-height: 1.5;
  /* A diluted ink, NOT an opacity. On a solid field the two are the same
     composite -- but an opacity hides the result from anyone reading the
     stylesheet, and this one was hiding a contrast failure: --f-ink at .76 over
     --f-field composites to #5B2B06, which is 4.27:1 against that field, under
     the 4.5 a 14px normal-weight paragraph needs. Lighthouse caught it.

     Written as a color-mix, the number is the thing being chosen: 86% measures
     5.18:1, and it still reads a step quieter than the headings at full
     strength (6.46:1). It also survives a change of --f-field, which a
     hard-coded composite would not. */
  color: color-mix(in srgb, var(--f-ink) 86%, var(--f-field));
}

.ubl-footer-menu {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 9px;
}

.ubl-footer-menu strong {
  margin-bottom: 3px;
  font-family: var(--f-headings);
  font-size: 17px;
  font-weight: 500;
  letter-spacing: -.01em;
}

.ubl-footer-disclaimer {
  /* In characters, not pixels: the right line length is measured in
     characters, and this text is translated into eleven languages that the
     same pixel width would wrap differently. */
  max-width: 62ch;
  margin: 0;
  font-size: 13px;
  line-height: 1.55;
  /* Same correction as the tagline above, and worse before it: .72 composited
     to #642F08, 3.93:1. 82% measures 4.80:1 and stays one step quieter than the
     tagline's 86%, which is the hierarchy the opacities were reaching for.
     13px is still normal text, so the threshold is 4.5 and not 3. */
  color: color-mix(in srgb, var(--f-ink) 82%, var(--f-field));
}

.ubl-footer-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px clamp(16px, 2vw, 28px);
}

/* A step down via opacity, kept here because these transition on hover and a
   color does not interpolate as cleanly as an alpha.
   On a solid field an opacity IS a second ink tint -- the composite is the same
   arithmetic -- so the number still has to be checked: --f-ink at .8 over
   --f-field lands on #532705, which measures 4.62:1. That clears the 4.5 a
   14.5px and a 13px link need, but by 0.12. Lower this alpha, or darken the
   field, and it fails; the two paragraphs above got there at .76 and .72. */
.ubl-footer-menu a,
.ubl-footer-bottom a {
  font-size: 14.5px;
  line-height: 1.3;
  color: inherit;
  text-decoration: none;
  opacity: .8;
  transition: opacity .15s ease;
}

.ubl-footer-bottom a { font-size: 13px; }

.ubl-footer-menu a:hover,
.ubl-footer-bottom a:hover,
.ubl-footer-menu a:focus-visible,
.ubl-footer-bottom a:focus-visible {
  opacity: 1;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* The cookie preferences link carries `color: var(--ubl-orange) !important`
   from a general theme rule: on an orange field it became orange on orange,
   i.e. invisible. This is the only spot in the footer that needs an
   !important of our own, and it's only there to defuse theirs. */
.ubl-footer-bottom .ubl-cookie-settings-link {
  display: inline;
  color: inherit !important;
  font-weight: 400 !important;
}

@media (max-width: 899px) {
  .ubl-footer-main { grid-template-columns: 1fr; }
  .ubl-footer-bottom { justify-content: flex-start; }
}

.card-product {
  background-color: #ffffff !important;
  border-radius: 12px !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05) !important;
  padding: 1rem !important;
}

.price {
  color: var(--price-discount-color) !important;
}

.product-percentage {
  background-color: var(--discount-pill-color) !important;
  color: var(--discount-color) !important;
}

.btn-primary, .card-product .btn-primary, .btn-discover-more {
  background-color: #280a5e !important;
  border-color: #280a5e !important;
  color: #ffffff !important;
  border-radius: 4px !important;
}

.custom-indicators {
  position: relative;
  margin-top: 20px;
  margin-bottom: 0px;
}

.custom-indicators [data-bs-target] {
  background-color: var(--bg-color-brown) !important;
  opacity: 0.5;
}

.custom-indicators [data-bs-target].active {
  background-color: var(--ubl-orange) !important;
  opacity: 1;
}

/* Footer / Top Category Section */
#top-category-section, .footer-top-categories, .top-category-block-container {
  background-color: #8d6e63 !important;
  color: #000000 !important;
}

.footer-top-categories h4, .footer-top-categories h5, .footer-top-categories a,
.top-category-block-container h4, .top-category-block-container h5, .top-category-block-container a {
  color: #ffffff !important;
}

.footer-top-categories .border-bottom, .top-category-block-container .border-bottom {
  border-bottom-color: rgba(255,255,255,0.3) !important;
}

/* Sezione Brand */
.brands-section, .our-brands-section {
  background-color: #f3e5f5 !important; /* Lavanda chiaro */
  padding: 4rem 0 !important;
}

.ubl-footer-container {
  background-color: var(--bg-color-beige) !important;
  color: #000000;
  .ubl-footer-link-list {
    color: #000000 !important;
    text-decoration: none;
    font-size: 0.85rem;
  }
  .ubl-copyright {
    font-size: 0.85rem;
    color: #000000;
  }
  a {
    color: #000000 !important;
    text-decoration: none;
  }
}

.home-page-section {
  padding: 0 !important;
  margin-bottom: 0 !important;
}

.trending-product {
  color: var(--section-text-color);
  margin-bottom: 40px;
  margin-top: 0;
  font-family: 'Manrope', sans-serif;
  font-weight: 800;
  font-size: 36px;
  line-height: 1;
  letter-spacing: 0;
  vertical-align: middle;
}

.custom-small-card {
  transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

.custom-small-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0,0,0,0.1) !important;
}

.small-starting-from {
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
}

.custom-row-layout-card {
  border: none !important;
  box-shadow: 0 4px 6px rgba(0,0,0,0.05) !important;
  transition: transform 0.3s ease;
}

.custom-row-layout-card:hover {
  transform: translateY(-5px);
}

.custom-row-layout-card,
.custom-small-card {
  border-radius: 16px !important;
}

.custom-discount-badge {
  background-color: #EFE8FF !important;
  color: #6E39F5 !important;
  font-family: "Kanit", "Manrope", sans-serif !important;
  font-weight: 600 !important;
  padding: 0.5rem 1rem !important;
  font-size: 0.75rem !important;
  border-radius: 20px !important;
}

.custom-card-title {
  font-family: 'Manrope', sans-serif;
  font-weight: 700;
  line-height: 1.2;
  color: #1a1a1a;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  height: 2.4em;
  font-size: 1.1rem;
}

.custom-green-price {
  color: #0DB877 !important;
  font-family: "Kanit", "Manrope", sans-serif !important;
}

.custom-card-pricing,
.custom-card-pricing .text-success,
.custom-card-pricing .text-muted,
.custom-card-pricing .text-decoration-line-through,
.custom-card-pricing .discount-color,
.custom-card-pricing .starting-from-color,
.custom-card-pricing .small-starting-from {
  font-family: "Kanit", "Manrope", sans-serif !important;
}

.custom-discover-btn {
  background-color: #1D0B63 !important;
  border-color: #1D0B63 !important;
  padding: 0.75rem 1rem !important;
  font-weight: 600 !important;
}

.custom-discover-btn:hover {
  background-color: #2D1475 !important;
  border-color: #2D1475 !important;
}

.home-page-section.section-1 .trending-product p {
  color: #353333 !important;
}

.home-page-section.section-2 .trending-product p {
  color: #ffffff !important;
}

/* Mobile Fixes */
html, body {
  overflow-x: hidden !important;
  width: 100%;
}

@media (max-width: 991px) {
  body {
    background-color: #fff8dc !important;
  }

  header.bg-mobile {
    position: absolute !important;
    top: 4px !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 1030 !important;
    background-color: transparent !important;
    background-image: none !important;
  }

  header.bg-mobile:has(.ubl-navbar-shell[data-ubl-navbar-home="false"]) {
    position: sticky !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 1030 !important;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.35) 0%, rgba(255, 255, 255, 0.10) 100%) !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.13);
    -webkit-backdrop-filter: blur(24px) !important;
    backdrop-filter: blur(24px) !important;
  }

  body.has-admin-top-menu header.bg-mobile:has(.ubl-navbar-shell[data-ubl-navbar-home="false"]) {
    top: var(--admin-top-menu-height) !important;
  }

  /* The ceiling was 388px: the width of a large phone, written when this block
     only served phones. But the block reaches 991, so on a tablet the pill stayed
     a 364-wide stamp in the middle of 768 while the search field below it
     measured 736 — two objects on the same page with two different ideas of
     where the screen ends.

     Without a ceiling the width is decided by `calc(100% - 8px)`, which on a
     phone already gave the same result as before (367, against a ceiling of 388
     that never bit) and on a tablet follows the format. */
  .container.bg-mobile {
    width: calc(100% - 8px) !important;
    max-width: none !important;
    min-height: 64px !important;
    margin: 0 auto !important;
    padding: 0 !important;
    background-color: transparent !important;
    background-image: none !important;
  }

  header.bg-mobile:has(.ubl-navbar-shell[data-ubl-navbar-home="false"]) .container.bg-mobile {
    width: 100% !important;
    max-width: none !important;
    min-height: 64px !important;
    background-color: transparent !important;
  }

  .navbar-container {
    width: 100% !important;
    min-height: 64px !important;
    border-radius: 24px !important;
    background-color: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
  }

  header.bg-mobile:has(.ubl-navbar-shell[data-ubl-navbar-home="false"]) .navbar-container,
  header.bg-mobile:has(.ubl-navbar-shell[data-ubl-navbar-home="false"]) .navbar-container .bg-new-primary-color,
  header.bg-mobile:has(.ubl-navbar-shell[data-ubl-navbar-home="false"]) .ubl-mobile-header {
    border-radius: 0 !important;
    background-color: transparent !important;
  }

  .navbar-container .bg-new-primary-color {
    min-height: 64px !important;
    border-radius: 24px !important;
    background-color: transparent !important;
    color: #353333 !important;
  }

  .ubl-mobile-header {
    min-height: 64px;
    padding: 16px;
    border-radius: 24px;
    border: 1px solid rgba(255, 255, 255, 0.55);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.35) 0%, rgba(255, 255, 255, 0.10) 100%);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.13);
    -webkit-backdrop-filter: blur(24px);
    backdrop-filter: blur(24px);
  }

  header.bg-mobile:has(.ubl-navbar-shell[data-ubl-navbar-home="false"]) .navbar-container .bg-new-primary-color,
  header.bg-mobile:has(.ubl-navbar-shell[data-ubl-navbar-home="false"]) .ubl-mobile-header {
    border-radius: 0 !important;
    border-color: rgba(255, 255, 255, 0.55) !important;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.35) 0%, rgba(255, 255, 255, 0.10) 100%) !important;
  }

  .ubl-mobile-header-row {
    width: 100%;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
  }

  .ubl-mobile-logo {
    height: 42px;
    flex: 0 0 auto;
    display: block;
  }

  .ubl-mobile-logo img {
    height: 100%;
    width: auto;
    max-width: 162px;
    display: block;
    object-fit: contain;
  }

  .ubl-mobile-actions {
    width: 72px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    flex: 0 0 72px;
  }

  .ubl-mobile-search-form {
    position: relative;
    width: 32px;
    height: 32px;
    margin: 0;
    flex: 0 0 32px;
    transition: width 220ms ease, flex-basis 220ms ease;
  }

  .ubl-mobile-search-form input {
    position: absolute;
    inset: 0;
    width: 32px !important;
    height: 32px !important;
    padding: 0 !important;
    border: 0 !important;
    opacity: 0;
    border-radius: 999px !important;
    background-color: #fefbff !important;
    color: #353333 !important;
    font-family: "Manrope", sans-serif;
    font-size: 14px;
    line-height: 20px;
    pointer-events: none;
    transition: width 220ms ease, opacity 160ms ease, padding 220ms ease;
  }

  .ubl-mobile-action-button {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 50% !important;
    background-color: #fd7b1a !important;
    color: #fefbff !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: none !important;
  }

  .ubl-mobile-action-button svg {
    width: 16px;
    height: 16px;
    display: block;
  }

  .ubl-mobile-action-button svg path {
    fill: #fefbff;
  }

  .ubl-mobile-search-form.is-search-expanded,
  .ubl-mobile-search-form:has(.search-bar-expanded) {
    width: 188px !important;
    flex-basis: 188px !important;
  }

  .ubl-mobile-search-form input.search-bar-expanded {
    width: 188px !important;
    padding: 0 40px 0 14px !important;
    border: 1px solid rgba(255, 255, 255, 0.55) !important;
    opacity: 1;
    pointer-events: auto;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.10);
  }

  .ubl-mobile-search-form.is-search-expanded .ubl-mobile-action-button,
  .ubl-mobile-search-form:has(.search-bar-expanded) .ubl-mobile-action-button {
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
  }

  .ubl-mobile-header-row.is-search-expanded .ubl-mobile-logo,
  .ubl-mobile-header-row:has(.search-bar-expanded) .ubl-mobile-logo {
    max-width: 116px;
    overflow: hidden;
  }

  .ubl-mobile-header-row.is-search-expanded .ubl-mobile-actions,
  .ubl-mobile-header-row:has(.search-bar-expanded) .ubl-mobile-actions {
    width: 228px;
    flex-basis: 228px;
  }

  .ubl-mobile-menu-button span {
    width: 16px;
    height: 14px;
    display: block;
    background:
      linear-gradient(#fefbff, #fefbff) 0 0 / 16px 2px no-repeat,
      linear-gradient(#fefbff, #fefbff) 0 6px / 16px 2px no-repeat,
      linear-gradient(#fefbff, #fefbff) 0 12px / 16px 2px no-repeat;
  }

  .navbar-container .row {
    min-height: 64px !important;
    padding: 0 !important;
  }

  .navbar-container .original-logo {
    width: calc(100% - 88px) !important;
    max-width: none !important;
    flex: 0 0 calc(100% - 88px) !important;
    padding-left: 16px !important;
  }

  .navbar-container #logoImage {
    width: 162px !important;
    max-width: 162px !important;
    height: 42px !important;
    max-height: 42px !important;
    object-fit: contain !important;
    padding-bottom: 0 !important;
  }

  .navbar-container .col-3 {
    width: 88px !important;
    max-width: 88px !important;
    flex: 0 0 88px !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 8px !important;
    padding-right: 16px !important;
  }

  #mobileSearchForm {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    margin: 0 !important;
    border: 0 !important;
    background-color: transparent !important;
  }

  #mobileSearchForm .position-relative {
    width: 32px !important;
    height: 32px !important;
  }

  #expandableSearch {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    padding: 0 !important;
    opacity: 0;
  }

  #mobileSearchForm.is-search-expanded,
  #mobileSearchForm:has(#expandableSearch.search-bar-expanded) {
    width: 188px !important;
    min-width: 188px !important;
    flex: 0 0 188px !important;
  }

  #expandableSearch.search-bar-expanded {
    width: 188px !important;
    min-width: 188px !important;
    padding: 0 40px 0 14px !important;
    opacity: 1;
    pointer-events: auto;
  }

  .mobile-search-button {
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 50% !important;
    background-color: #fd7b1a !important;
    color: #fefbff !important;
    transform: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .menu-mobile-icon,
  #menuToggleButton {
    position: static !important;
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 50% !important;
    background-color: #fd7b1a !important;
    color: #fefbff !important;
    transform: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: none !important;
    outline: 0 !important;
  }

  .mobile-search-button svg path,
  .search-mobile-icon path {
    fill: #fefbff !important;
  }

  .menu-mobile-icon .menu-icon,
  #menuToggleButton .menu-icon {
    color: #fefbff !important;
    fill: #fefbff !important;
    stroke: #fefbff !important;
  }

  .menu-mobile-icon .icon-wrapper,
  #menuToggleButton .icon-wrapper {
    width: 32px !important;
    height: 32px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .menu-mobile-icon .menu-bars,
  .menu-mobile-icon .menu-close,
  #menuToggleButton .menu-bars,
  #menuToggleButton .menu-close {
    display: none !important;
  }

  .menu-mobile-icon .icon-wrapper::before,
  #menuToggleButton .icon-wrapper::before {
    content: "";
    width: 16px;
    height: 14px;
    display: block;
    background:
      linear-gradient(#fefbff, #fefbff) 0 0 / 16px 2px no-repeat,
      linear-gradient(#fefbff, #fefbff) 0 6px / 16px 2px no-repeat,
      linear-gradient(#fefbff, #fefbff) 0 12px / 16px 2px no-repeat;
    border-radius: 8px;
  }

  /* The panel is THE SAME MATERIAL as the pill above it, not a different object
     hung underneath: same 24 radius, same shadow, and the same gradient — only
     baked.

     The pill declares `white .35 -> white .10` over whatever passes behind it.
     On a panel seventeen hundred tall that transparency does not hold: the
     ground changes under the text as you scroll, and the hero's orange halo
     ended up over the category names. So here the same gradient is computed
     against the page's ground — white .35 on #F8F7F4 makes #FCFBFA, white .10
     makes #F9F8F5 — and declared opaque. It looks identical wherever the pill
     merely sits over the page: the only difference is that it lets nothing
     through.

     The white it starts from is the desktop menu's (`.ubl-navbar
     .dropdown-menu`, #ffffff), and the hairline is its own: warm at 20%. A white
     hairline like the pill's would not be visible on a light, opaque panel.

     No `backdrop-filter`: with an opaque ground it blurs nothing and only the
     compositing layer it drags along is left. */
  #mobile-menu-dropdown,
  #mobile-menu-dropdown.bg-menu {
    margin-top: 8px !important;
    overflow: hidden;
    border: 1px solid rgba(151, 114, 70, 0.2) !important;
    border-radius: 24px !important;
    background-color: #FCFBFA !important;
    background-image: linear-gradient(180deg, #FCFBFA 0%, #F9F8F5 100%) !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.13) !important;
  }

  /* Pill and panel sat FOUR pixels from the edge of the screen, against the
     sixteen the rest of the page keeps — `.ubl-h-rail` is `100% - 32px` wide.
     Four pixels do not read as a margin, they read as a cropping mistake, and on
     an object floating with its own shadow and rounded corners it shows twice as
     much. Twelve here plus the four already there make sixteen: the header lines
     up with the content instead of sticking out. */
  .container.bg-mobile {
    padding-inline: 12px !important;
  }

  .ubl-hero {
    min-height: 896px;
    padding: 284px 16px 108px;
    align-items: flex-start;
    border-radius: 0 0 70px 70px;
    background:
      radial-gradient(122% 79% at 50% -3%, #fcf8db 0%, #ffe7cd 39%, #f8c797 49%, #f2a761 60%, #f8bc5f 75%, #f1a939 88%, #eb9512 100%);
  }

  .ubl-hero-copy {
    width: 100%;
    max-width: 370px;
    margin: 0 auto;
  }

  .ubl-hero-title {
    width: min(303px, 100%);
    margin-bottom: 24px;
    font-size: 43px;
    line-height: 1.08;
  }

  .ubl-hero-title span + span {
    margin-top: 0;
  }

  .ubl-hero-search {
    width: min(347px, 100%);
    height: 72px;
    padding: 8px;
    gap: 16px;
    border: 1px solid #dce1fc;
    border-radius: 16px;
    background-color: #eef0fe;
  }

  .ubl-hero-search input {
    height: 56px;
    padding: 0 0 0 17px;
    font-size: 16px;
    font-family: "Kanit", "Manrope", sans-serif;
  }

  .ubl-hero-search button {
    width: 64px;
    min-width: 64px;
    height: 56px;
    border-radius: 16px;
  }

  .ubl-hero-suggestions {
    width: 100%;
    margin-top: 10px;
    justify-content: center;
    flex-wrap: wrap;
  }

  .ubl-hero-suggestions span {
    display: none;
  }

  .ubl-hero-suggestions a {
    height: 32px;
    display: inline-flex;
    align-items: center;
    padding: 8px 16px;
    flex: 0 0 auto;
  }

  .ubl-hero-dyson {
    width: 122px;
    left: auto;
    right: -45px;
    top: 452px;
  }

  .ubl-hero-macbook {
    width: 111px;
    left: -36px;
    top: 469px;
  }

  .ubl-hero-gamepad {
    width: 94px;
    left: auto;
    right: 4px;
    top: 698px;
  }

  .ubl-hero-sneakers {
    width: 109px;
    right: 8px;
    top: 208px;
  }

  .ubl-hero-sunglasses {
    width: 123px;
    right: auto;
    left: 35px;
    top: 202px;
  }

  .ubl-hero-yoga-mat {
    width: 139px;
    right: auto;
    left: 24px;
    top: 727px;
  }

  .ubl-hero-bikini {
    width: 124px;
    left: 161px;
    top: 775px;
  }

  .ubl-hero-flip-flops {
    width: 142px;
    left: 154px;
    top: 128px;
  }

  .ubl-about {
    padding: 80px 16px;
  }

  .ubl-about-container {
    max-width: 370px;
    flex-direction: column;
    gap: 32px;
  }

  .ubl-about-copy {
    align-items: center;
    gap: 8px;
  }

  .ubl-about-logo {
    width: 320px;
    height: 59.064px;
    object-fit: contain;
  }

  .ubl-about-title {
    max-width: 370px;
    text-align: center;
    font-size: 28.21px;
    line-height: 32px;
  }

  .ubl-about-title span {
    display: inline;
    font-weight: 300;
  }

  .ubl-about-title span + span::before {
    content: " ";
  }

  .ubl-about-title strong {
    display: block;
    font-weight: 800;
  }

  .ubl-about-media {
    width: 100%;
    height: auto;
    aspect-ratio: 850 / 851;
    flex: none;
    border-radius: 55px;
  }

  .ubl-seasonal-campaign,
  .home-page-section.section-1 .ubl-seasonal-campaign {
    width: calc(100% - 24px);
    max-width: 369px;
    min-height: 707px;
    margin: 0 auto;
    padding: 16px;
    border-radius: 40px;
    background-position: center;
  }

  .ubl-seasonal-campaign-inner {
    max-width: none;
    height: 100%;
    overflow: hidden;
    display: block;
  }

  .ubl-seasonal-grid {
    display: grid;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    scroll-snap-type: x mandatory;
  }

  .ubl-seasonal-grid::-webkit-scrollbar {
    display: none;
  }

  .ubl-seasonal-grid {
    min-height: 0;
    margin-top: 24px;
    width: calc(100% + 32px);
    margin-left: -16px;
    padding: 0 32px;
    transform: none;
    grid-template-columns: repeat(4, 320px);
    grid-template-rows: auto;
    grid-auto-flow: column;
    gap: 16px;
    align-content: start;
    align-items: start;
  }

  .ubl-seasonal-title-card {
    width: 100%;
    min-height: auto;
    padding: 0 8px;
    position: relative;
    z-index: 2;
  }

  .ubl-seasonal-title-card h2 {
    max-width: 333px;
    font-size: 66px;
    line-height: 59px;
  }

  .ubl-seasonal-product-card {
    width: 320px;
    min-height: 0;
    padding: 12px;
    border-radius: 16px;
    gap: 12px;
    grid-column: auto;
    grid-row: 1;
    scroll-snap-align: center;
    box-shadow: none;
  }

  .ubl-seasonal-product-body {
    flex: 1 1 auto;
  }

  .ubl-seasonal-card-1,
  .ubl-seasonal-card-2,
  .ubl-seasonal-card-3,
  .ubl-seasonal-card-4,
  .ubl-seasonal-card-5,
  .ubl-seasonal-card-6 {
    grid-column: auto;
    grid-row: 1;
  }

  .ubl-seasonal-product-meta {
    margin-top: 4px;
  }

  .ubl-valentine-offers {
    width: calc(100% - 24px);
    max-width: 369px;
    min-height: 707px;
    margin: 0 auto;
    padding: 16px;
    border-radius: 40px;
    background-color: #ffd9c9;
  }

  .ubl-valentine-inner {
    width: 100%;
    max-width: none;
    overflow: hidden;
  }

  .ubl-valentine-heading {
    width: 100%;
    margin: 0;
    padding: 0 8px;
    color: #ffffff;
    font-family: "Kanit", "Manrope", sans-serif;
    font-size: 48px;
    font-weight: 900;
    line-height: 48px;
    text-transform: none;
  }

  .ubl-valentine-grid {
    margin-top: 24px;
    display: grid;
    width: calc(100% + 32px);
    margin-left: -16px;
    padding: 0 32px;
    transform: none;
    grid-template-columns: repeat(6, 320px);
    grid-auto-flow: column;
    gap: 16px;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    scroll-snap-type: x mandatory;
  }

  .ubl-valentine-grid::-webkit-scrollbar {
    display: none;
  }

  .ubl-valentine-card {
    width: 320px;
    height: 448px;
    padding: 12px;
    border-color: #eef0fe;
    border-radius: 16px;
    background-color: #ffffff;
    gap: 12px;
    scroll-snap-align: center;
    box-shadow: none;
  }


  .ubl-valentine-media {
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 8px;
  }

  .ubl-valentine-media img {
    object-fit: cover;
    object-position: center center;
    width: 100%;
    height: 100%;
    border-radius: 8px;
  }

  .ubl-valentine-discount {
    top: 12px;
    left: 12px;
    padding: 4px 12px;
    border: 1px solid rgba(182, 196, 250, 0.15);
    font-size: 11px;
    font-weight: 600;
    line-height: 16px;
  }

  .ubl-valentine-body {
    flex: 1 1 auto;
  }

  .ubl-valentine-original-price {
    color: #837e80;
    font-size: 14px;
    line-height: 20px;
  }

  .ubl-valentine-price {
    font-size: 24px;
    line-height: 30px;
  }

  .ubl-valentine-saving {
    font-size: 14px;
    line-height: 20px;
  }

  .ubl-valentine-name {
    color: #212529;
    font-size: 16px;
    font-weight: 600;
    line-height: 24px;
    -webkit-line-clamp: 1;
  }

  .ubl-valentine-meta {
    margin-top: 4px;
    color: #837e80;
    font-size: 11px;
    font-weight: 600;
    line-height: 16px;
    letter-spacing: 0.1px;
  }

  .ubl-valentine-deco {
    opacity: 0.9;
  }

  .ubl-valentine-heart-one {
    width: 116px;
    left: 9%;
    top: 34px;
  }

  .ubl-valentine-heart-two {
    width: 116px;
    right: 9%;
    top: -16px;
  }

  .ubl-valentine-confetti-one {
    width: 116px;
    left: 56%;
    top: -20px;
  }

  .ubl-seasonal-card-1,
  .ubl-seasonal-card-2 {
    grid-column: auto;
  }

  .ubl-seasonal-product-media {
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 8px;
  }

  .ubl-seasonal-discount,
  .ubl-featured-discount,
  .ubl-featured-small-discount {
    top: 12px;
    left: 12px;
    padding: 4px 12px;
    font-size: 11px;
  }

  .ubl-seasonal-original-price,
  .ubl-featured-small-original-price {
    font-size: 14px;
    line-height: 20px;
  }

  .ubl-seasonal-price,
  .ubl-featured-small-price {
    font-size: 24px;
    line-height: 30px;
  }

  .ubl-seasonal-saving,
  .ubl-featured-small-saving {
    font-size: 14px;
    line-height: 20px;
  }

  .ubl-seasonal-product-name,
  .ubl-featured-small-name {
    font-size: 16px;
    line-height: 24px;
    -webkit-line-clamp: 1;
  }

  .ubl-seasonal-product-meta,
  .ubl-featured-small-meta {
    font-size: 11px;
    line-height: 16px;
  }

  .ubl-summer-offers {
    width: calc(100% - 24px);
    max-width: 369px;
    min-height: 707px;
    margin: 0 auto;
    padding: 16px;
    border-radius: 40px;
    background:
      radial-gradient(circle at 6% 5%, rgba(182, 196, 250, 0.5) 0%, transparent 55%),
      radial-gradient(circle at 96% 6%, rgba(255, 95, 0, 0.26) 0%, transparent 52%),
      linear-gradient(145deg, #dff9f5 0%, #fff8dc 50%, #ffd4b2 100%);
  }

  .ubl-summer-sun {
    width: 200px;
    height: 200px;
    top: -70px;
    right: -70px;
  }

  .ubl-summer-offers::after {
    height: 56px;
    -webkit-mask-size: 32px 56px;
    mask-size: 32px 56px;
  }

  .ubl-summer-inner {
    width: 100%;
    max-width: none;
    overflow: hidden;
  }

  .ubl-summer-heading {
    width: 100%;
    margin: 0;
    padding: 0 8px;
    color: #243634;
    font-family: "Kanit", "Manrope", sans-serif;
    font-size: 48px;
    font-weight: 900;
    line-height: 48px;
    text-transform: none;
  }

  .ubl-summer-grid {
    margin-top: 24px;
    display: grid;
    width: calc(100% + 32px);
    margin-left: -16px;
    padding: 0 32px;
    transform: none;
    grid-template-columns: repeat(6, 320px);
    grid-auto-flow: column;
    gap: 16px;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    scroll-snap-type: x mandatory;
  }

  .ubl-summer-grid::-webkit-scrollbar {
    display: none;
  }

  .ubl-summer-card {
    width: 320px;
    height: 448px;
    padding: 12px;
    border-color: #eef0fe;
    border-radius: 16px;
    background-color: #ffffff;
    gap: 12px;
    scroll-snap-align: center;
    box-shadow: none;
  }

  .ubl-summer-media {
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 8px;
  }

  .ubl-summer-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    border-radius: 8px;
  }

  .ubl-summer-discount {
    top: 12px;
    left: 12px;
    padding: 4px 12px;
    border: 1px solid rgba(182, 196, 250, 0.15);
    font-size: 11px;
    font-weight: 400;
    line-height: 16px;
  }

  .ubl-summer-body {
    flex: 1 1 auto;
  }

  .ubl-summer-original-price {
    color: #837e80;
    font-size: 14px;
    line-height: 20px;
  }

  .ubl-summer-price {
    font-size: 24px;
    line-height: 30px;
  }

  .ubl-summer-saving {
    font-size: 14px;
    line-height: 20px;
  }

  .ubl-summer-card-name {
    color: #212529;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    -webkit-line-clamp: 1;
  }

  .ubl-summer-card-meta {
    margin-top: 4px;
    color: #837e80;
    font-size: 11px;
    font-weight: 400;
    line-height: 16px;
    letter-spacing: 0.1px;
  }

  .ubl-summer-deco {
    opacity: 0.9;
  }

  .ubl-summer-sunglasses-one {
    width: 124px;
    top: 24px;
    right: auto;
    left: 4%;
  }

  .ubl-summer-bikini-one {
    width: 116px;
    top: -16px;
    right: 6%;
  }

  .ubl-summer-flipflops-one {
    width: 120px;
    left: auto;
    right: 8%;
    bottom: 10px;
  }

  .ubl-summer-yogamat-one {
    width: 118px;
    left: -22px;
    bottom: 18px;
  }

  /* Keep the small mobile card frame uncluttered */
  .ubl-summer-sneakers-one {
    display: none;
  }

  /* Calmer drift on mobile */
  @keyframes ubl-summer-float {
    0%,
    100% {
      transform: translateY(0) rotate(var(--ubl-summer-rot, 0deg));
    }
    50% {
      transform: translateY(-9px) rotate(var(--ubl-summer-rot, 0deg));
    }
  }

  .ubl-featured-grid-section {
    padding: 96px 16px;
  }

  .ubl-featured-grid-inner {
    max-width: none;
    margin: 0;
  }

  .ubl-featured-grid-heading {
    margin-bottom: 40px;
    font-size: 40px;
    line-height: 49px;
  }

  .ubl-featured-grid {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  .ubl-featured-product-card {
    border-radius: 16px;
    background-color: #ffffff;
  }

  .ubl-featured-product-media {
    height: auto;
    aspect-ratio: 1 / 1;
    padding: 0;
  }

  .ubl-featured-product-body {
    padding: 16px;
    gap: 16px;
  }

  .ubl-featured-product-identity,
  .ubl-featured-product-pricing {
    gap: 16px;
  }

  .ubl-featured-product-meta {
    min-height: auto;
    padding: 0;
    font-size: 16px;
  }

  .ubl-featured-product-name {
    font-size: 28px;
    line-height: 36px;
  }

  .ubl-featured-small-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .ubl-featured-small-card {
    min-height: 295px;
    padding: 10px;
    border-radius: 16px;
    gap: 8px;
  }

  .ubl-featured-small-media {
    aspect-ratio: 1 / 1;
    border-radius: 8px;
  }

  .ubl-brands {
    padding: 80px 16px;
  }

  .ubl-brands-inner,
  .ubl-top-categories-inner,
  .ubl-footer-inner {
    max-width: 370px;
  }

  .ubl-brands h2,
  .ubl-top-categories h2 {
    margin-bottom: 12px;
    font-size: 37px;
    line-height: 45px;
  }

  .ubl-brands-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  .ubl-brand-card {
    min-height: 170px;
    padding: 16px;
    border-radius: 12px;
  }

  .ubl-brand-card img {
    width: 82%;
    max-height: 128px;
  }

  .ubl-top-categories {
    padding: 80px 16px;
  }

  .ubl-top-categories h2 {
    margin-bottom: 32px;
  }

  .ubl-top-categories-grid {
    display: flex;
    flex-direction: column;
    gap: 24px;
  }

  .ubl-top-category-card {
    min-height: 221px;
  }

  .ubl-top-category-card h3 {
    min-height: 62px;
    margin-bottom: 13px;
    padding: 10px;
    font-size: 28px;
    line-height: 36px;
  }

  .ubl-top-category-card a {
    min-height: 40px;
    margin-top: 13px;
    padding: 10px;
    font-size: 16px;
    line-height: 20px;
  }

  .ubl-footer {
    padding: 80px 16px 32px;
  }

  .ubl-footer-main {
    min-height: 0;
    padding-bottom: 32px;
    display: flex;
    flex-direction: column;
    gap: 32px;
    border-bottom: 1px solid #8c4600;
  }

  .ubl-footer-main::before,
  .ubl-footer-main::after {
    content: none;
  }

  .ubl-footer-logo {
    width: 240px;
    height: 60px;
  }

  .ubl-footer-brand p {
    margin-top: 32px;
    font-size: 14px;
    line-height: 20px;
  }

  .ubl-footer-menu {
    width: 90px;
    padding-top: 32px;
    border-top: 1px solid #8c4600;
  }

  .ubl-footer-menu strong {
    font-size: 20px;
    line-height: 25px;
  }

  .ubl-footer-menu a {
    font-size: 14px;
    line-height: 20px;
  }

  .ubl-footer-disclaimer {
    width: 100%;
    max-width: none;
    padding-top: 32px;
    border-top: 1px solid #8c4600;
    font-size: 14px;
    line-height: 21.8px;
  }

  .ubl-footer-bottom {
    justify-content: flex-end;
    gap: 16px;
  }

  .ubl-footer-bottom a {
    font-size: 14px;
    line-height: 20px;
  }
}

/* Cookie Settings Link */
.ubl-cookie-settings-link {
  color: var(--ubl-orange) !important;
  font-weight: 500 !important;
}

/* Hide default CookieScript floating badge */
#cookiescript_badge {
  display: none !important;
}

/* ===========================================================================
   /c/ PRODUCT PAGE: MOTION BUDGET
   ---------------------------------------------------------------------------
   Measured on the live page (Lighthouse mobile, 4x CPU): Paint was 333.9 ms
   across 467 events and LCP was 88% "Render Delay" -- the hero image finished
   downloading at 142 ms and the browser still could not paint for 3.2 s. The
   cause is not bytes: parsing all 135 KiB of the purged bundle costs 5.8 ms.
   It is four infinite animations, three of which repaint rather than composite.
   These animations are declared in the DB-backed page bodies (v5 v33 for
   pn-ang / pn-shine, v9 v2 for ubl-cangia), which we do not edit here: v5 is
   shared with Price Ninja's ?v=5 and the v9 body belongs to the designer. All
   of their animation declarations are non-!important, and this stylesheet is
   purged into <head> while the bodies' <style> sits in <body>, so !important
   here wins regardless of order.

   Only `transform` and `opacity` are guaranteed composited across engines;
   `filter` is composited only for the duration of an animation and only on a
   GPU path, so it is not a safe substitute. The idea of each effect is kept --
   the implementation is not.
   =========================================================================== */

/* 1. THE EXPENSIVE ONE. `@keyframes pn-ang{to{--pn-ang:360deg}}` animates a
      REGISTERED custom property, and @property makes animating a gradient
      possible, not cheap: every element reading the property repaints on every
      frame. Here that element is `.pn-bar::before`, a conic-gradient ring
      spanning the full width of a `position:fixed` bar that also carries
      `backdrop-filter`, so each frame forced the blur to be recomputed as well
      -- forever, whether or not anyone was scrolling or looking at it.

      The idea (an iridescent edge catching the light) is kept, driven by SCROLL
      instead of by time: it advances only while the page moves and costs
      nothing at rest. Firefox stable still has scroll-driven animations behind
      layout.css.scroll-driven-animations.enabled as of 152, so the @supports
      guard leaves it a static ring there -- which is what the gradient already
      looks like at 0deg. */
.pn-bar::before { animation: none !important; }

@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .pn-bar::before {
      animation-name: pn-ang !important;
      animation-timing-function: linear !important;
      animation-iteration-count: 1 !important;
      animation-fill-mode: both !important;
      /* A progress timeline ignores animation-duration by design. */
      animation-timeline: scroll(root block) !important;
    }
  }
}

/* 2. `pn-shine` animates `background-position` -- a paint property, not a
      composited one -- on `.price-amount`, the largest text on the page, on a
      10s loop with no end. Bounded to a single sweep on arrival: the price
      still glints when you land, then costs zero for the rest of the session. */
.price-amount {
  animation-iteration-count: 1 !important;
  animation-duration: 2.2s !important;
}

/* 3. `ubl-cangia` animates `fill` on four injected 26x22px marks. Small area,
      but four elements repainting every frame for the life of the page. Bounded
      to three cycles, so the mark still shifts colour on arrival and then rests
      at black. The designer's prefers-reduced-motion gate already disables it
      outright; this only bounds the case where motion is allowed. */
.ubl-gatto,
.ubl-pupilla {
  animation-iteration-count: 3 !important;
}

/* 4. `backdrop-filter: blur(32px) saturate(1.8)` on a `position:fixed`
      full-width bar is among the most expensive effects available on mobile,
      and it was being re-run every frame by (1). Halved, and the veil raised
      from .60 to .78 -- which is ALSO the fix for the contrast defect the
      designer documented against it: the price read 4.66:1 on a light
      background but 2.2:1 over a dark photo, against the 4.5:1 that 23px/500
      requires. "Veil toward 75%" was one of the two remedies in his own notes,
      so this is a deliberate visual change, not a side effect.
      NOTE: this is the only rule here that changes how the page looks.

      Scoped to the same <=600px query the body rule uses -- the bar only exists
      on mobile -- and selected as `body .pn-bar` rather than `.pn-bar`. That
      prefix is load-bearing: the body's `background` declaration is itself
      `!important` and sits later in the document, so at equal specificity it
      wins and the veil stays at .60. Verified against computed style: with a
      bare `.pn-bar` the blur applied (that declaration is not !important) while
      the background did not. `body .pn-footer` in core/base.html exists for the
      same reason. */
@media (max-width: 600px) {
  body .pn-bar {
    background: rgba(255, 248, 236, 0.78) !important;
    backdrop-filter: blur(14px) saturate(1.4) !important;
    -webkit-backdrop-filter: blur(14px) saturate(1.4) !important;
  }
}


/* ---------- the icon in the menu columns -------------------------------------
   The markup is emitted by custom_menu/menu_v2.html only when the includer
   raises the `category_icons` flag, and the only one that raises it is this
   theme's navbar: on Price Ninja, which includes the same file, nothing
   comes out.

   The rules live here and not in core/css/home.css because the menu is on
   every UnBox Labs page while that stylesheet only loads on the home page:
   keeping them there meant an icon composed well on the home page and just
   resting against the text with no alignment everywhere else.

   The title becomes a flex row so the glyph sits on the text's baseline
   block instead of above it. The color is the action orange on hover: 3.1:1,
   which passes the 3:1 required for non-text graphics — the solid orange, at
   2.5:1, wouldn't reach it. */
.ubl-navbar-shell .dropdown-menu h5 {
  display: flex;
  align-items: center;
  gap: 9px;
}

.ubl-navbar-shell .ubl-ico-cat {
  flex: none;
  color: #F26F09;
}


/* ---------- the phone menu ---------------------------------------------------
   Same content as the desktop's, stacked instead of in columns. The panel itself
   is already dressed by `#mobile-menu-dropdown` above — glass, 24 corners, the
   same material as the bar — what is here is only what sits inside it.

   The arrow rotates instead of swapping glyph: they are two states of one thing,
   and a glyph that changes reads as a second control. <summary>'s native marker
   has to be removed twice because two engines draw it in two places:
   `list-style` for Firefox, the pseudo-element for WebKit. */
.ubl-menu-mobile { padding: 6px 4px 10px; }

.ubl-menu-cat + .ubl-menu-cat { border-top: 1px solid rgba(43, 18, 0, .10); }

.ubl-menu-cat-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 15px 16px;
  list-style: none;
  cursor: pointer;
  font-family: 'Kanit', sans-serif;
  font-weight: 500;
  font-size: 17px;
  line-height: 1.2;
  color: #2B1200;
  -webkit-tap-highlight-color: transparent;
}

.ubl-menu-cat-head::-webkit-details-marker { display: none; }

.ubl-menu-arrow {
  flex: none;
  color: #736A65;
  transition: transform .18s ease;
}

.ubl-menu-cat[open] > .ubl-menu-cat-head .ubl-menu-arrow { transform: rotate(180deg); }

.ubl-menu-sub { padding: 0 16px 16px; }

/* The subcategory's name in orange, and the orange is #913600: at 15px this is
   normal text, so the threshold is 4.5:1 and on this light panel only that one
   passes (7.7:1). The vivid one would stop at 3.7 — enough for large text, which
   starts at 24px, and a 24px sub-heading has no place in a menu.

   The icon, on the other hand, is #F26F09, the desktop menu's: non-text graphics
   have a threshold of 3:1 rather than 4.5, and that is where the two oranges
   divide the work between them. */
.ubl-menu-sub-head {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 10px;
  font-family: 'Kanit', sans-serif;
  font-weight: 500;
  font-size: 15px;
  line-height: 1.2;
  color: #913600;
}

.ubl-menu-mobile .ubl-ico-cat {
  flex: none;
  color: #F26F09;
}

/* The lists inside a subcategory: indented by the icon plus its gap, so the
   links line up in a column under the name and not under the symbol. */
.ubl-menu-sub > div { margin-left: 28px; }
.ubl-menu-sub .menu-subcategory-title { margin-bottom: 4px !important; font-size: 11px; }
.ubl-menu-sub .dropdown-item { padding: 3px 0 !important; font-size: 14px; }