/* SmileSteps production bundle v16 */
/* SmileSteps Quiet Luxury route contract v11. Loaded after the legacy cascade. */
:root {
    --ss-forest: #285b3e;
    --ss-forest-deep: #183e2a;
    --ss-cream: #f3f0e8;
    --ss-paper: #fffdf8;
    --ss-plum: #69516f;
    --ss-gold: #b08d4f;
    --ss-line: rgba(23,37,30,.12);
}
body.site { background: linear-gradient(180deg,#f8f6f0,var(--ss-cream)) !important; }
.ss-unified-utility { background: linear-gradient(90deg,#14251d,#244733 72%,#3e3342) !important; }
.ss-unified-shell-header { border-bottom: 1px solid rgba(176,141,79,.22) !important; box-shadow: 0 10px 34px rgba(22,37,29,.065) !important; }
.ss-unified-shell-header::after { background: linear-gradient(90deg,transparent,var(--ss-gold),rgba(105,81,111,.42),transparent) !important; opacity: .65; }
.ss-unified-nav a, .ss-unified-actions a, .ss-unified-mega > summary { border-radius: 8px !important; font-size: 14px !important; font-weight: 680 !important; padding: 9px 10px !important; }
.ss-unified-mega { position: relative; }
.ss-unified-mega > summary { cursor: pointer; list-style: none; }
.ss-unified-mega > summary::-webkit-details-marker { display: none; }
.ss-unified-mega > summary::after { content: "⌄"; font-size: 12px; margin-left: 6px; }
.ss-unified-nav a:hover, .ss-unified-nav a[aria-current="page"], .ss-unified-mega[open] > summary { background: linear-gradient(135deg,#eaf1e9,#f2eee6) !important; color: var(--ss-forest-deep) !important; }
.ss-unified-mega__panel { background: rgba(255,253,248,.99); border: 1px solid rgba(176,141,79,.28); box-shadow: 0 30px 80px rgba(22,37,29,.16); display: grid; gap: 36px; grid-template-columns: 1fr 1fr; left: -150px; min-width: 620px; padding: 28px; position: absolute; top: calc(100% + 13px); z-index: 1010; }
.ss-unified-mega__panel > div { display: grid; gap: 7px; }
.ss-unified-mega__panel span { color: var(--ss-plum); font-size: 11px; font-weight: 800; letter-spacing: .12em; margin-bottom: 5px; text-transform: uppercase; }
.ss-unified-mega__panel a { background: transparent !important; padding: 7px 0 !important; }
.ss-unified-cart { border-color: rgba(176,141,79,.34) !important; background: linear-gradient(135deg,#f4f0e5,#edf3eb) !important; }
#sp-page-title { background: radial-gradient(circle at 82% 10%,rgba(176,141,79,.24),transparent 19rem),linear-gradient(125deg,#173d29,#285b3e 57%,#453649) !important; }
.ss-page-hero__kicker { color: #e1cca2 !important; }
#sp-main-body .product, #sp-main-body .itemContainer, #sp-main-body .mnwall-item { align-self: stretch; }
body.site.com-virtuemart.view-category #product_list > .row { align-items: stretch !important; grid-auto-flow: row !important; }
body.site.com-virtuemart.view-category #product_list > .row > .product { height: 100% !important; }
body.site.com-virtuemart.view-category #product_list .product-container { border-color: rgba(176,141,79,.22) !important; box-shadow: 0 10px 30px rgba(22,37,29,.055) !important; height: 100% !important; }
.catItemView, .mnwall-item-inner, .sppb-addon-feature, .sppb-addon-article { border-color: rgba(176,141,79,.22) !important; }
.ss-unified-shell-footer { background: radial-gradient(circle at 76% 0,rgba(176,141,79,.16),transparent 20rem),linear-gradient(135deg,#14251d,#234332 62%,#413544) !important; }
.ss-navigating body { cursor: progress; }
body.site #sp-main-body { content-visibility: auto; contain-intrinsic-size: auto 900px; }
@media (max-width: 820px) {
    .ss-unified-mega { display: none !important; }
    .ss-unified-mega__panel { min-width: 0; }
}

/* SmileSteps global UX layer v14. Loaded last; core Joomla/VirtueMart files are untouched. */
:root {
  --ss-bg: #f7f5f1;
  --ss-surface: #ffffff;
  --ss-ink-v14: #26312e;
  --ss-muted-v14: #66706c;
  --ss-border-v14: #ded8cf;
  --ss-green-v14: #315f42;
  --ss-green-hover-v14: #284f37;
  --ss-green-soft-v14: #e8f0e9;
  --ss-purple-v14: #756276;
  --ss-purple-soft-v14: #eee8ef;
  --ss-gold-v14: #b08d4f;
  --ss-danger-v14: #a34646;
  --ss-shadow-v14: 0 16px 42px rgba(31, 48, 40, .10);
}

html { color-scheme: light; }
body.site { background: var(--ss-bg) !important; color: var(--ss-ink-v14) !important; }
body.site #sp-main-body { background: transparent !important; }
body.site #sp-main-body > .container { width: min(1180px, calc(100% - 40px)) !important; }

.ss-unified-utility { background: var(--ss-ink-v14) !important; }
.ss-unified-utility__inner { justify-content: flex-start !important; }
.ss-unified-contacts { gap: 24px !important; }
.ss-unified-shell-header { border-bottom: 1px solid rgba(176, 141, 79, .22) !important; }
.ss-unified-header__inner {
  gap: 14px !important;
  grid-template-columns: 158px minmax(0, 1fr) auto !important;
  min-height: 74px !important;
}
.ss-unified-brand img { max-height: 46px !important; width: auto !important; }
.ss-unified-nav { gap: 0 !important; min-width: 0; }
.ss-unified-nav > a {
  border-radius: 9px !important;
  color: var(--ss-ink-v14) !important;
  font-size: 12.5px !important;
  font-weight: 720 !important;
  padding: 10px 9px !important;
  white-space: nowrap;
}
.ss-unified-nav > a:hover,
.ss-unified-nav > a:focus-visible,
.ss-unified-nav > a[aria-current="page"] { background: var(--ss-green-soft-v14) !important; color: var(--ss-green-hover-v14) !important; }
.ss-unified-mega { position: relative; }
.ss-unified-mega > summary {
  border-radius: 9px !important;
  color: var(--ss-ink-v14) !important;
  cursor: pointer;
  font-size: 12.5px !important;
  font-weight: 720 !important;
  list-style: none;
  padding: 10px 8px !important;
  white-space: nowrap;
}
.ss-unified-mega > summary::-webkit-details-marker { display: none; }
.ss-unified-mega > summary::after { color: var(--ss-purple-v14); content: "⌄"; font-size: 11px; margin-left: 5px; }
.ss-unified-mega[open] > summary,
.ss-unified-mega > summary:hover,
.ss-unified-mega > summary:focus-visible { background: var(--ss-green-soft-v14) !important; color: var(--ss-green-hover-v14) !important; }
.ss-unified-mega__panel {
  background: rgba(255, 255, 255, .985) !important;
  border: 1px solid var(--ss-border-v14) !important;
  border-radius: 16px !important;
  box-shadow: 0 26px 70px rgba(28, 43, 36, .16) !important;
  display: grid !important;
  gap: 30px !important;
  grid-template-columns: minmax(210px, 1fr) minmax(210px, 1fr) !important;
  left: 50% !important;
  min-width: 540px !important;
  padding: 26px !important;
  position: absolute !important;
  top: calc(100% + 12px) !important;
  transform: translateX(-50%);
  z-index: 1200 !important;
}
.ss-unified-mega:first-child .ss-unified-mega__panel { left: 0 !important; transform: none; }
.ss-unified-mega__panel--right { left: auto !important; right: 0 !important; transform: none; }
.ss-unified-mega__panel::before { content: ""; height: 14px; left: 0; position: absolute; right: 0; top: -14px; }
.ss-unified-mega__panel > div { align-items: start; display: flex !important; flex-direction: column; gap: 4px !important; }
.ss-unified-mega__panel span { color: var(--ss-purple-v14) !important; font-size: 11px !important; font-weight: 800 !important; letter-spacing: .11em !important; margin: 0 0 8px !important; text-transform: uppercase; }
.ss-unified-mega__panel a { background: transparent !important; border-radius: 8px !important; color: var(--ss-muted-v14) !important; font-size: 13.5px !important; line-height: 1.35 !important; padding: 7px 8px !important; width: 100%; }
.ss-unified-mega__panel a:hover,
.ss-unified-mega__panel a:focus-visible { background: var(--ss-green-soft-v14) !important; color: var(--ss-green-hover-v14) !important; }
.ss-unified-actions { gap: 7px !important; }
.ss-unified-actions > a { border-radius: 9px !important; font-size: 12.5px !important; padding: 9px 8px !important; }
.ss-unified-actions .ss-unified-cart { padding: 7px 8px 7px 11px !important; }

body.site #sp-page-title { background: linear-gradient(115deg, #20392d, #315f42 62%, #645269) !important; }
body.site #sp-page-title .ss-page-hero { min-height: 138px !important; padding-block: 28px !important; }
body.site #sp-page-title .ss-page-hero__title { color: #fff !important; font-size: clamp(32px, 4.3vw, 54px) !important; line-height: 1.04 !important; }
body.site #sp-page-title .ss-page-hero__kicker { color: #ead9b6 !important; }

body.site .category_description,
body.site .item-page,
body.site #k2Container,
body.site .login,
body.site .registration,
body.site .reset,
body.site .remind,
body.site .profile,
body.site .vm-cart-container,
body.site .cart-view {
  color: var(--ss-muted-v14) !important;
  line-height: 1.68 !important;
}

body.site.com-virtuemart.view-category #product_list > .row {
  display: grid !important;
  gap: 24px !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  margin: 0 !important;
}
body.site.com-virtuemart.view-category #product_list > .row > .product {
  float: none !important;
  margin: 0 !important;
  max-width: none !important;
  min-width: 0 !important;
  padding: 0 !important;
  width: 100% !important;
}
body.site.com-virtuemart.view-category .product-container {
  background: var(--ss-surface) !important;
  border: 1px solid var(--ss-border-v14) !important;
  border-radius: 18px !important;
  box-shadow: 0 10px 30px rgba(31, 48, 40, .07) !important;
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
  min-width: 0 !important;
  overflow: hidden !important;
  padding: 18px !important;
}
body.site.com-virtuemart.view-category .vm-product-media-container {
  align-items: center !important;
  background: linear-gradient(145deg, #edf4eb, #f7f1e5) !important;
  border-radius: 13px !important;
  display: flex !important;
  justify-content: center !important;
  min-height: 220px !important;
  overflow: hidden !important;
}
body.site.com-virtuemart.view-category .vm-product-media-container img {
  aspect-ratio: 4 / 3 !important;
  display: block !important;
  height: auto !important;
  max-height: 250px !important;
  max-width: 100% !important;
  object-fit: contain !important;
  opacity: 1 !important;
  padding: 10px !important;
  visibility: visible !important;
  width: 100% !important;
}
body.site.com-virtuemart.view-category .product-container h2,
body.site.com-virtuemart.view-category .product-container h3,
body.site.com-virtuemart.view-category .product-container .product-title {
  color: var(--ss-ink-v14) !important;
  font-family: "Literata", Georgia, serif !important;
  font-size: 20px !important;
  line-height: 1.28 !important;
  overflow-wrap: anywhere !important;
  text-align: left !important;
}
body.site.com-virtuemart.view-category .product-price { color: var(--ss-green-hover-v14) !important; font-weight: 800 !important; }
body.site.com-virtuemart.view-category .addtocart-area { margin-top: auto !important; }
body.site.com-virtuemart.view-category .addtocart-button,
body.site.com-virtuemart.view-category input.addtocart-button {
  max-width: 100% !important;
  white-space: normal !important;
  width: 100% !important;
}
body.site.com-virtuemart .orderby-displaynumber {
  align-items: center !important;
  background: rgba(255, 255, 255, .72) !important;
  border: 1px solid var(--ss-border-v14) !important;
  border-radius: 14px !important;
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
  margin: 0 0 26px !important;
  padding: 14px !important;
}

body.site input[type="text"],
body.site input[type="email"],
body.site input[type="password"],
body.site input[type="search"],
body.site input[type="tel"],
body.site select,
body.site textarea {
  background: #fff !important;
  border: 1px solid #cfc8bd !important;
  border-radius: 9px !important;
  box-shadow: none !important;
  color: var(--ss-ink-v14) !important;
  min-height: 44px;
  max-width: 100%;
}
body.site input:focus,
body.site select:focus,
body.site textarea:focus { border-color: var(--ss-green-v14) !important; box-shadow: 0 0 0 3px rgba(49, 95, 66, .14) !important; outline: none !important; }
body.site .btn-primary,
body.site button.default,
body.site input.default,
body.site .addtocart-button,
body.site .vm-button-correct {
  background: var(--ss-green-v14) !important;
  border: 1px solid var(--ss-green-v14) !important;
  border-radius: 9px !important;
  color: #fff !important;
}
body.site .btn-primary:hover,
body.site button.default:hover,
body.site input.default:hover,
body.site .addtocart-button:hover,
body.site .vm-button-correct:hover { background: var(--ss-green-hover-v14) !important; }

.ss-unified-footer__grid { grid-template-columns: 1.15fr .8fr .8fr 1.25fr !important; gap: 46px !important; }
.ss-unified-footer__brand { display: flex; flex-direction: column; align-items: flex-start; }
.ss-unified-footer__brand a { margin-top: 5px; }

.ss-unified-mobile-menu details { border-bottom: 1px solid var(--ss-border-v14); }
.ss-unified-mobile-menu summary { color: var(--ss-ink-v14); cursor: pointer; font-size: 14px; font-weight: 760; list-style: none; min-height: 46px; padding: 13px 4px; }
.ss-unified-mobile-menu summary::after { color: var(--ss-purple-v14); content: "+"; float: right; }
.ss-unified-mobile-menu details[open] summary::after { content: "−"; }
.ss-unified-mobile-menu details a { border-bottom: 0 !important; color: var(--ss-muted-v14) !important; min-height: 40px !important; padding: 9px 12px !important; }
.ss-mobile-dock { display: none; }

.ss-section-directory {
  margin: 0 auto 34px;
  padding: 30px;
  border: 1px solid var(--ss-border-v14);
  border-radius: 20px;
  background: linear-gradient(130deg, rgba(255,255,255,.92), rgba(232,240,233,.72));
  box-shadow: 0 12px 36px rgba(31,48,40,.07);
}
.ss-section-directory__heading { align-items: end; display: flex; justify-content: space-between; gap: 30px; margin-bottom: 22px; }
.ss-section-directory__heading h2 { color: var(--ss-ink-v14) !important; font-size: clamp(26px,3.2vw,40px) !important; margin: 0 !important; }
.ss-section-directory__heading p { color: var(--ss-muted-v14); margin: 0; max-width: 520px; }
.ss-section-directory__grid { display: grid; gap: 12px; grid-template-columns: repeat(4,minmax(0,1fr)); }
.ss-section-directory__grid a { align-items: flex-start; background: rgba(255,255,255,.88); border: 1px solid var(--ss-border-v14); border-radius: 13px; color: var(--ss-ink-v14) !important; display: flex; flex-direction: column; min-height: 132px; padding: 17px; text-decoration: none !important; transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease; }
.ss-section-directory__grid a:hover,
.ss-section-directory__grid a:focus-visible { border-color: rgba(49,95,66,.45); box-shadow: var(--ss-shadow-v14); transform: translateY(-2px); }
.ss-section-directory__grid a[aria-current="page"] { background: var(--ss-green-v14); border-color: var(--ss-green-v14); color: #fff !important; }
.ss-section-directory__grid span { color: var(--ss-purple-v14); font-size: 11px; font-weight: 800; letter-spacing: .1em; }
.ss-section-directory__grid a[aria-current="page"] span { color: #ead9b6; }
.ss-section-directory__grid strong { font-family: "Literata",Georgia,serif; font-size: 17px; line-height: 1.25; margin: auto 0 7px; }
.ss-section-directory__grid small { color: var(--ss-muted-v14); }
.ss-section-directory__grid a[aria-current="page"] small { color: rgba(255,255,255,.75); }

@media (max-width: 1240px) {
  .ss-unified-nav, .ss-unified-actions { display: none !important; }
  .ss-unified-header__inner { grid-template-columns: 1fr auto !important; }
  .ss-unified-menu-button { display: grid !important; }
  .ss-unified-mobile-menu:not([hidden]) { display: flex !important; max-height: calc(100vh - 104px); overflow-y: auto; }
}

@media (max-width: 900px) {
  body.site.com-virtuemart.view-category #product_list > .row { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .ss-unified-footer__grid { grid-template-columns: 1fr 1fr !important; }
  .ss-section-directory__grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .ss-section-directory__heading { align-items: flex-start; flex-direction: column; }
  .ss-unified-footer__brand { grid-column: 1 / -1 !important; }
}

@media (max-width: 640px) {
  body.site #sp-main-body > .container { width: min(100% - 24px, 1180px) !important; }
  .ss-unified-contacts { align-items: center; flex-wrap: wrap; gap: 4px 16px !important; justify-content: center; padding: 5px 0; }
  body.site.com-virtuemart.view-category #product_list > .row { grid-template-columns: 1fr !important; }
  body.site.com-virtuemart.view-category .vm-product-media-container { min-height: 190px !important; }
  .ss-unified-footer__grid { grid-template-columns: 1fr !important; }
  .ss-section-directory { padding: 20px; }
  .ss-section-directory__grid { grid-template-columns: 1fr; }
  .ss-section-directory__grid a { min-height: 112px; }
  .ss-unified-footer__brand { grid-column: auto !important; }
  .ss-mobile-dock {
    align-items: center;
    background: rgba(255, 255, 255, .96);
    border-top: 1px solid var(--ss-border-v14);
    bottom: 0;
    box-shadow: 0 -10px 30px rgba(31, 48, 40, .09);
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    left: 0;
    min-height: 58px;
    padding-bottom: env(safe-area-inset-bottom);
    position: fixed;
    right: 0;
    z-index: 1300;
  }
  .ss-mobile-dock a { color: var(--ss-ink-v14) !important; font-size: 11px; font-weight: 750; padding: 17px 5px; text-align: center; text-decoration: none !important; }
  body.site { padding-bottom: calc(58px + env(safe-area-inset-bottom)); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; }
}

/* SmileSteps performance layer v16. Visual and commercial content stay unchanged. */
@font-face {
  font-family: "Onest SS";
  src: url("/ss2026/fonts/Onest-Variable.woff2") format("woff2");
  font-display: swap;
  font-style: normal;
  font-weight: 100 900;
}
@font-face {
  font-family: "Literata SS";
  src: url("/ss2026/fonts/Literata-Variable.woff2") format("woff2");
  font-display: swap;
  font-style: normal;
  font-weight: 200 900;
}
body.site #sp-main-body .ss-section-directory,
body.site #sp-main-body .browse-view,
body.site #sp-main-body .category-view,
body.site #sp-main-body #k2Container,
body.site .ss-unified-shell-footer {
  content-visibility: auto;
  contain-intrinsic-size: auto 720px;
}
body.site img[loading="lazy"] { content-visibility: auto; }
.ss-unified-shell-header,
.ss-mobile-dock { contain: layout style; }
@media (prefers-reduced-data: reduce) {
  body.site .ss-page-hero::before,
  body.site .ss-page-hero::after { display: none !important; }
}
