/* ==========================================================================
   SilkAesthetic — interaction & layout fixes layered on the mirrored theme.
   The theme stylesheets (camille-theme / theme-custom) are kept verbatim;
   everything we need to adjust lives here.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Visual Composer "full width" rows.
   The live site stretches these rows to the viewport with js_composer_front.js.
   The exact pixel math lives in assets/js/app.js (stretchFullWidthRows/0) so
   the rows line up with the viewport even when a scrollbar is present; this
   rule is only the pre-JS fallback.
   -------------------------------------------------------------------------- */
.vc_row[data-vc-full-width="true"] {
  position: relative;
}

body, html {
  overflow-x: hidden;
}

/* --------------------------------------------------------------------------
   1b. Scroll-in animation wrappers.
   The theme hides these blocks inline (`opacity: 0`) and fades them in from
   lastudio's AnimationBlock component. Nothing runs that here, so reveal them
   instead of leaving whole sections blank.
   -------------------------------------------------------------------------- */
.la-animation-block,
[data-la_component="AnimationBlock"],
.wpb_column[data-lacolumn_animation_viewport="true"] {
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
  animation: none !important;
}

/* --------------------------------------------------------------------------
   1c. Carousel wrappers.
   `.la-showposts` starts transparent until slick builds the track; with slick
   absent the wrapper would stay invisible and leave a blank band.
   -------------------------------------------------------------------------- */
.la-showposts,
.la-showposts .la-loop {
  opacity: 1 !important;
  visibility: visible !important;
}

/* --------------------------------------------------------------------------
   1d. Hero brand slider ("პროფესიული აპარატურა").
   The source CSS hides every slide except the checked one, so the outgoing
   image is removed the moment you switch and the track glides over a blank
   pane. Keeping all slides rendered turns it into a real slide transition:
   the current image moves out while the next one moves in.
   -------------------------------------------------------------------------- */
#main .silk-plum-cover .silk-plum-slide {
  visibility: visible !important;
}

/* Neighbouring slides are clipped by the window, so nothing leaks at rest. */
#main .silk-plum-cover .silk-plum-window {
  overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
  #main .silk-plum-cover .silk-plum-track {
    transition: none !important;
  }
}

/* --------------------------------------------------------------------------
   1e. Home portfolio strip.
   The block is built as a single horizontally scrolling row (three cards plus
   a swipe hint). Show the whole portfolio instead: four columns on desktop,
   two on tablets, one on phones, with no horizontal scrolling at all.
   -------------------------------------------------------------------------- */
#main .sa-portfolio-strip {
  display: grid !important;
  grid-auto-flow: row !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  grid-auto-columns: auto !important;
  gap: 20px !important;
  overflow: visible !important;
  scroll-snap-type: none !important;
  padding: 4px 0 0 !important;
}

/* The swipe instruction is meaningless once everything fits. */
#main .sa-showcase-hint {
  display: none !important;
}

@media (max-width: 1199px) {
  #main .sa-portfolio-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 639px) {
  #main .sa-portfolio-strip {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 16px !important;
  }
}

/* --------------------------------------------------------------------------
   1f. Home video cards.
   The players ship collapsed behind a <details> summary. They are opened from
   JS and a poster with a play button is shown instead, so a visitor sees the
   preview immediately and the video plays in place on click.
   -------------------------------------------------------------------------- */
#main .sa-home-video-card details > summary {
  display: none !important;
}

#main .sa-home-video-card details {
  border-top: 1px solid var(--sh-line);
  padding-top: 14px;
}

.sa-video-poster {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: #161616;
  cursor: pointer;
  overflow: hidden;
}

.sa-video-poster img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease, opacity 0.3s ease;
}

.sa-video-poster:hover img {
  transform: scale(1.04);
  opacity: 0.92;
}

.sa-video-play {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 64px;
  height: 64px;
  margin: -32px 0 0 -32px;
  border-radius: 50%;
  background: rgba(67, 37, 55, 0.9);
  box-shadow: 0 8px 24px rgba(34, 18, 27, 0.35);
  transition: transform 0.25s ease, background 0.25s ease;
}

.sa-video-play::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -11px 0 0 -7px;
  border-style: solid;
  border-width: 11px 0 11px 18px;
  border-color: transparent transparent transparent #faf5ef;
}

.sa-video-poster:hover .sa-video-play,
.sa-video-poster:focus-visible .sa-video-play {
  transform: scale(1.08);
  background: rgba(107, 52, 79, 0.95);
}

.sa-video-poster:focus-visible {
  outline: 3px solid #432537;
  outline-offset: 3px;
}

#main .sa-home-video-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Compact cards: each one is only as tall and as wide as its own video, so a
   portrait reel neither stretches the landscape card beside it nor floats in a
   wide empty box. The platform label and the "watch on …" link are dropped. */
#main .sa-home-video-grid {
  display: flex !important;
  flex-wrap: wrap;
  align-items: flex-start !important;
  gap: 14px !important;
}

#main .sa-home-video-card {
  display: flex;
  flex-direction: column;
  flex: 1 1 0;
  min-width: 0;
  padding: 8px !important;
  border-radius: 10px;
}

/* Portrait reels: the card hugs the frame instead of stretching. */
#main .sa-home-video-card.sa-video-card--portrait {
  flex: 0 0 auto;
  width: 346px;
  max-width: 100%;
}

#main .sa-home-video-platform,
#main .sa-home-video-card > .sa-home-video-source,
#main .sa-video-note {
  display: none !important;
}

#main .sa-home-video-card h3 {
  margin: 0 0 4px !important;
  font-size: 15px;
  line-height: 1.35;
}

#main .sa-home-video-card p {
  margin: 0 0 8px !important;
  font-size: 12.5px;
  line-height: 1.5;
}

#main .sa-home-video-card > details {
  margin-top: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}

#main .sa-home-video-frame {
  margin: 0 !important;
  border-radius: 8px;
  width: 100%;
}

/* Wider portrait previews; the card width follows. */
#main .sa-home-video-frame--portrait {
  max-width: 330px;
  width: 100%;
  margin-left: auto !important;
  margin-right: auto !important;
}

#main .sa-home-videos {
  margin-top: 28px !important;
}

/* Two per row before the three-across layout gets too tight for the
   landscape clip. */
/* Below the three-across layout the portraits stay snug and the landscape
   clip takes a full row of its own. */
@media (max-width: 1199px) {
  #main .sa-home-video-card {
    flex: 1 1 340px;
    width: auto;
  }

  #main .sa-home-video-card.sa-video-card--portrait {
    flex: 0 0 auto;
    width: 346px;
  }
}

@media (max-width: 767px) {
  #main .sa-home-video-card,
  #main .sa-home-video-card.sa-video-card--portrait {
    flex: 0 0 100%;
    width: 100%;
  }

  #main .sa-home-video-frame--portrait {
    max-width: 100%;
  }
}

/* --------------------------------------------------------------------------
   1g. Main navigation.
   The live stylesheet singles out the two dropdown parents (Machines, Brands)
   with a larger bold underlined label. Drop that and mark every parent with a
   small bullet after the word instead, so the affordance is uniform.
   -------------------------------------------------------------------------- */
/* One size for the whole desktop bar (the theme ships 12px, which reads small
   at 1440px), shared by the plain links and the two dropdown parents. */
#masthead .site-main-nav .main-menu {
  --nav-font-size: 13px;

  /* Inline-block items inherit the whitespace between <li> tags (which is what
     pushed the bar past the container width), so lay the row out with flex and
     use a real gap between the entries. */
  display: flex !important;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 0;
}

/* Items keep their width; when the bar runs out of room they wrap instead of
   squeezing their labels into the logo. A label that is wider than the whole
   row breaks inside the word rather than sliding under the icon cluster. */
#masthead .site-main-nav .main-menu > li {
  flex: 0 1 auto;
  max-width: 100%;
}

#masthead .site-main-nav .main-menu > li > a,
#masthead .site-main-nav .main-menu > li > a > .mm-text {
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: normal;
  hyphens: auto;
}

body.camille-body #masthead .site-main-nav .main-menu > li > a,
body.camille-body #masthead .site-main-nav .main-menu > .menu-item-4392 > a,
body.camille-body #masthead .site-main-nav .main-menu > .menu-item-5038 > a {
  font-size: var(--nav-font-size) !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  opacity: 1 !important;
  /* The theme pads 15px a side and letterspaces 1px, which is what pushed the
     bar onto a second row. A 4px pad per side keeps a comfortable gap between
     the entries (8px total) and still fits the row. */
  padding-left: 3px !important;
  padding-right: 3px !important;
  letter-spacing: 0 !important;
}

body.camille-body .site-header-mobile #la_mobile_nav .dl-menu > .menu-item-4392 > a,
body.camille-body .site-header-mobile #la_mobile_nav .dl-menu > .menu-item-5038 > a {
  font-size: 16px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  opacity: 1 !important;
}

/* Bullet marking a label that opens a submenu. Desktop: just after the word.
   Mobile drawer: inset from the right edge of the full-width row. */
#masthead .site-main-nav .main-menu li.menu-item-has-children:not(.qtranxs-lang-menu) > a > .mm-text {
  position: relative;
  padding-right: 9px;
}

#masthead .site-main-nav .main-menu li.menu-item-has-children:not(.qtranxs-lang-menu) > a > .mm-text::after,
.site-header-mobile #la_mobile_nav .dl-menu li.menu-item-has-children:not(.qtranxs-lang-menu) > a::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  width: 4px;
  height: 4px;
  margin-top: -2px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.5;
  pointer-events: none;
}

.site-header-mobile #la_mobile_nav .dl-menu li.menu-item-has-children:not(.qtranxs-lang-menu) > a {
  position: relative;
}

.site-header-mobile #la_mobile_nav .dl-menu li.menu-item-has-children:not(.qtranxs-lang-menu) > a::after {
  right: 18px;
}

#masthead .site-main-nav .main-menu li.menu-item-has-children > a:hover > .mm-text::after {
  opacity: 0.8;
}

/* --------------------------------------------------------------------------
   1h. Language switcher in the icon cluster.
   The menu is rendered by SiteStore, which lifts the switcher out of the main
   bar and into the header-right cluster so the navigation fits on one line.
   -------------------------------------------------------------------------- */
/* One row: social icons, language switcher, search, burger. */
#masthead .header-right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

#masthead .header-right .header-component-inner {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0;
  height: 100%;
  width: auto;
}

#masthead .header-right .header_component {
  float: none !important;
}

/* The icon list stays on one line inside its flex item. */
#masthead .header-right .social-media-link {
  display: inline-flex;
  align-items: center;
  gap: 0;
}

#masthead .header-right .social-media-link a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
}

#masthead .header-right .sa-header-language {
  position: relative;
  margin: 0;
}

#masthead .sa-lang-menu {
  position: relative;
  display: block;
}

#masthead .sa-lang-menu > li {
  position: relative;
}

#masthead .sa-lang-menu > li > a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 4px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  color: #432537;
}

#masthead .sa-lang-menu > li > a .mm-text {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding-right: 0;
}

#masthead .sa-lang-menu > li > a .mm-text::after {
  content: none;
}

/* Open the drop-down towards the left so it cannot leave the viewport. */
#masthead .sa-lang-menu .popup {
  left: auto;
  right: 0;
}

/* The theme fixes the nav column at 64% of the container, which is what made
   the eight entries wrap; give it room to keep them on one line. */
/* The theme floats the three header columns, so the middle one drops to a new
   line as soon as its content is a few pixels too wide. Lay them out with flex
   instead: the navigation takes whatever the logo and icon cluster leave. */
#masthead .header-main {
  display: flex;
  align-items: center;
  gap: 6px;
}

#masthead .header-left,
#masthead .header-middle,
#masthead .header-right {
  float: none !important;
}

/* Markup order is logo, icons, navigation — put the bar back in the middle. */
#masthead .header-left {
  /* Wide enough for the 240px logo, otherwise the mark spills over the column
     and the wrapped nav starts underneath it. */
  flex: 0 0 250px;
  width: 250px !important;
  order: 1;
}

#masthead .header-middle {
  order: 2;
}

#masthead .header-right {
  order: 3;
}

#masthead .header-middle {
  flex: 0 0 auto;
  width: auto !important;
  min-width: 0;
}

#masthead .header-middle .site-main-nav {
  width: auto !important;
  text-align: center;
}

#masthead .header-right {
  flex: 0 0 auto;
  width: auto !important;
  margin-left: auto;
}

/* The bar is centred on the page (not on its own column) by taking it out of
   the flex flow between the logo and the icon cluster. Narrower screens keep
   the flow layout so nothing can overlap. */
/* --------------------------------------------------------------------------
   1i. Mobile drawer.
   The theme builds this menu with a JS plugin we do not mirror (it stayed at
   zero height), so lay the drawer out from the .is-open state instead.
   -------------------------------------------------------------------------- */
.site-header-mobile .mobile-menu-wrap {
  width: 100%;
}

/* The drawer fills the space between the header and the bottom of the screen,
   and only scrolls when the entries are taller than that. */
.site-header-mobile {
  --sa-mobile-header: 70px;
}

.site-header-mobile #la_mobile_nav.is-open,
.site-header-mobile #la_mobile_nav.is-open > .dl-menu {
  position: static !important;
  display: flex !important;
  flex-direction: column;
  width: 100% !important;
  height: auto !important;
  min-height: calc(100dvh - var(--sa-mobile-header));
  max-height: calc(100dvh - var(--sa-mobile-header)) !important;
  overflow-y: auto;
  transform: none !important;
  background: #faf5ef;
  border-top: 1px solid #d8c4bc;
}

.site-header-mobile #la_mobile_nav.is-open > .dl-menu > li {
  display: block;
  flex: 0 0 auto;
  width: 100%;
  border-bottom: 1px solid #eadcd9;
}

.site-header-mobile #la_mobile_nav.is-open > .dl-menu > li > a {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 18px;
  font-size: 15px;
  color: #432537;
}

/* Nested sub-menus stay closed until their parent is opened. */
.site-header-mobile #la_mobile_nav .dl-menu .sub-menu {
  display: none !important;
  padding-left: 0;
  background: #f3e8e1;
}

.site-header-mobile #la_mobile_nav .dl-menu li > a {
  position: relative;
}

.site-header-mobile #la_mobile_nav .dl-menu .sub-menu > li > a {
  padding-left: 34px;
  font-size: 14px;
}

.site-header-mobile #la_mobile_nav .dl-menu .sub-menu .sub-menu > li > a {
  padding-left: 50px;
}

.site-header-mobile #la_mobile_nav .dl-menu li.is-open > .sub-menu {
  display: block !important;
}

.site-header-mobile #la_mobile_nav .dl-menu .sub-menu > li > a {
  display: block;
  padding: 9px 18px;
  font-size: 14px;
  color: #432537;
}

/* --------------------------------------------------------------------------
   1j. Navigation hover state.
   The theme draws the hover underline inset by the old 15px padding and tints
   the button background. Span the whole item and drop the fill instead.
   -------------------------------------------------------------------------- */
#masthead .site-main-nav .main-menu > li > a {
  position: relative;
}

#masthead .site-main-nav .main-menu > li > a:after {
  left: 0;
  right: auto;
  width: 0;
  bottom: 6px;
}

#masthead .site-main-nav .main-menu > li:hover > a:after,
#masthead .site-main-nav .main-menu > li.active > a:after {
  left: 0;
  right: 0;
  width: 100%;
}

#masthead .site-main-nav .main-menu > li:hover > a,
#masthead .site-main-nav .main-menu > li.active > a,
body.home.page-id-278 #masthead .site-main-nav .main-menu li:hover > a,
body.home.page-id-278 #masthead .site-main-nav .main-menu li.active > a {
  background-color: transparent !important;
}

/* --------------------------------------------------------------------------
   1k. Drop-down entries.
   The bullet only marks a parent in the top bar; inside a drop-down the
   chevron already says "has more", so drop the bullet there. Labels also stay
   on a single line, with the chevron after the text instead of below it.
   -------------------------------------------------------------------------- */
#masthead .main-menu .sub-menu li > a > .mm-text,
#masthead .site-main-nav .main-menu li.menu-item-has-children .sub-menu > li > a > .mm-text {
  padding-right: 0;
}

#masthead .main-menu .sub-menu li > a > .mm-text::after {
  content: none !important;
}

#masthead .main-menu .sub-menu li > a {
  white-space: nowrap;
}

#masthead .main-menu .sub-menu li.menu-item-has-children > a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

/* A little more room so the longest label and its chevron share one line. */
#masthead .main-menu > li > .popup {
  min-width: 264px;
}

/* --------------------------------------------------------------------------
   1l. Icon cluster hover colours.
   Each social link takes its own brand colour on hover, the search button gets
   the wine accent, and the icons lift very slightly so the change reads as a
   deliberate target rather than a colour glitch.
   -------------------------------------------------------------------------- */
#masthead .header-right .social-media-link a,
#masthead .header-right .header_component--searchbox a,
#masthead .header-right .header_component--link a {
  transition: color 0.18s ease, transform 0.18s ease, background-color 0.18s ease;
}

#masthead .header-right .social-media-link a:hover,
#masthead .header-right .header_component--searchbox a:hover,
#masthead .header-right .header_component--link a:hover {
  transform: translateY(-1px);
}

#masthead .header-right .social-media-link a.facebook:hover {
  color: #1877f2 !important;
}

#masthead .header-right .social-media-link a.instagram:hover {
  color: #d6249f !important;
}

#masthead .header-right .social-media-link a.youtube:hover {
  color: #ff0000 !important;
}

/* Same selector the theme uses for the base colour, plus :hover, so the accent
   wins instead of being pinned by that !important rule. */
body.home.page-id-278 #masthead .header_component--searchbox > .component-target:hover,
#masthead .header-right .header_component--searchbox > .component-target:hover {
  color: #856047 !important;
}

body.home.page-id-278 #masthead .header_component--link > .component-target:hover,
#masthead .header-right .header_component--link > .component-target:hover {
  color: #856047 !important;
}

/* The aside repeats the same links; give them the brand colours as well. */
#header_aside .social-media-link a.facebook:hover {
  color: #1877f2 !important;
}

#header_aside .social-media-link a.instagram:hover {
  color: #d6249f !important;
}

#header_aside .social-media-link a.youtube:hover {
  color: #ff0000 !important;
}

/* --------------------------------------------------------------------------
   1m. Drop-down palette.
   The theme paints the menu panels near-black on every page except the home
   page, where the palette override turns them cream. Keep the cream panel and
   wine text everywhere so the menus look the same on /about-us, /machines…
   -------------------------------------------------------------------------- */
#masthead .site-main-nav .main-menu .popup > .inner,
#masthead .site-main-nav .main-menu .sub-menu,
#masthead .sa-lang-menu .popup > .inner,
#masthead .sa-lang-menu .popup .sub-menu,
body.home.page-id-278 #masthead .site-main-nav .main-menu .popup > .inner,
body.home.page-id-278 #masthead .site-main-nav .main-menu .sub-menu,
body.home.page-id-278 #masthead .sa-lang-menu .popup > .inner,
body.home.page-id-278 #masthead .sa-lang-menu .popup .sub-menu {
  background-color: #f1e9dd !important;
}

#masthead .main-menu .sub-menu a,
#masthead .main-menu .sub-menu a .mm-text,
#masthead .main-menu .sub-menu a span {
  color: #432537 !important;
  background-color: transparent !important;
}

#masthead .main-menu .sub-menu a:hover,
#masthead .main-menu .sub-menu a:hover .mm-text,
#masthead .main-menu .sub-menu a:hover span {
  color: #856047 !important;
}

#masthead .main-menu .sub-menu li {
  background-color: transparent !important;
}

/* The nested fly-out (third level) needs its own panel edge to stay readable. */
#masthead .main-menu .sub-menu .sub-menu {
  border-left: 1px solid rgba(133, 96, 71, 0.18);
  box-shadow: 6px 0 18px rgba(67, 37, 55, 0.12);
}

/* --------------------------------------------------------------------------
   1n. Gift banner: silk shader backdrop.
   The banner hosts a WebGL canvas (assets/js/silk-shader.js) that drifts a
   soft pink silk field behind the copy, plus a slow rose glow on the card.
   -------------------------------------------------------------------------- */
#main .sa-home-campaign,
body.home.page-id-278 #main .sa-home-campaign {
  position: relative;
  overflow: hidden;
  background-image: none !important;
  animation: sa-gift-glow 6s ease-in-out infinite;
}

@keyframes sa-gift-glow {
  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(216, 140, 160, 0), 0 8px 26px rgba(216, 140, 160, 0.18);
  }
  50% {
    box-shadow: 0 0 0 6px rgba(216, 140, 160, 0.1), 0 18px 46px rgba(216, 140, 160, 0.34);
  }
}

/* The palette override sets `position: relative; z-index: 1` on every child of
   the banner, so the canvas needs to outrank that. */
body.home.page-id-278 #main .sa-home-campaign > canvas.sa-silk-canvas,
#main .sa-home-campaign > canvas.sa-silk-canvas {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  z-index: 0 !important;
  pointer-events: none;
  border-radius: inherit;
}

/* Copy and button sit above the shader. */
#main .sa-home-campaign > *:not(.sa-silk-canvas) {
  position: relative;
  z-index: 1;
}

/* The ripple/shimmer pseudo elements are superseded by the shader. */
#main .sa-home-campaign::before,
#main .sa-home-campaign::after,
body.home.page-id-278 #main .sa-home-campaign::before,
body.home.page-id-278 #main .sa-home-campaign::after {
  content: none !important;
  display: none !important;
  animation: none !important;
}

@media (prefers-reduced-motion: reduce) {
  #main .sa-home-campaign,
  body.home.page-id-278 #main .sa-home-campaign {
    animation: none !important;
  }
}

/* --------------------------------------------------------------------------
   1o. Footer pre-menu.
   The mirrored markup repeats the site navigation in a "საიტის მენიუ" block
   right above the footer; the footer columns already carry the same links, so
   drop it.
   -------------------------------------------------------------------------- */
.la-block-content-bottom {
  display: none !important;
}

/* --------------------------------------------------------------------------
   2. Header icons. The theme relies on three different icon fonts; the
   bundled FontAwesome 4 build is the one the markup was written for.
   -------------------------------------------------------------------------- */
.social-media-link .fa,
.social-media-link i {
  font-family: "FontAwesome" !important;
  font-style: normal;
  font-weight: normal;
}

.fa-facebook:before { content: "\f09a" !important; }
.fa-instagram:before { content: "\f16d" !important; }
.fa-youtube-play:before { content: "\f16a" !important; }

/* --------------------------------------------------------------------------
   3. Responsive header: desktop masthead vs. mobile bar.
   -------------------------------------------------------------------------- */
.site-header-mobile { display: none; }

@media (max-width: 991px) {
  .site-header { display: none; }
  .site-header-mobile { display: block; }
}

/* --------------------------------------------------------------------------
   4. Slide-in sidebar (#header_aside).
   The theme ships the markup, the close button and the widget styling; only
   the sliding behaviour and the dark backdrop are restored here.
   -------------------------------------------------------------------------- */
#header_aside {
  position: fixed !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 360px !important;
  max-width: 88vw !important;
  height: 100vh !important;
  background-color: #faf5ef !important;
  color: #432537 !important;
  box-shadow: -6px 0 40px rgba(40, 20, 32, 0.22) !important;
  z-index: 9999 !important;
  overflow: hidden !important;
  visibility: hidden !important;
  opacity: 0 !important;
  transform: translateX(100%) !important;
  transition:
    transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    opacity 0.25s ease,
    visibility 0.25s ease !important;
}

body.open-header-aside #header_aside {
  visibility: visible !important;
  opacity: 1 !important;
  transform: translateX(0) !important;
}

#header_aside .header-aside-wrapper {
  display: block !important;
  height: 100% !important;
  overflow-y: auto !important;
}

#header_aside .header-aside-wrapper:before {
  display: none !important;
}

#header_aside .header-aside-inner {
  display: block !important;
  height: auto !important;
  width: 100% !important;
  margin-top: 0 !important;
  padding: 64px 28px 48px !important;
}

#header_aside img {
  max-width: 100% !important;
  height: auto !important;
  margin-bottom: 10px;
}

#header_aside .widget {
  margin-bottom: 26px;
}

#header_aside .widget-title {
  font-size: 17px;
  font-weight: 600;
  color: #432537 !important;
  border-bottom: 1px solid #eadcd9;
  padding-bottom: 6px;
  margin-bottom: 12px;
}

#header_aside p,
#header_aside .la-contact-info span {
  color: #634b55 !important;
  font-size: 13.5px;
  line-height: 1.7;
}

#header_aside a {
  color: #856047 !important;
}

#header_aside a:hover {
  color: #432537 !important;
}

/* Close button: large, always reachable. */
#header_aside .btn-aside-toggle {
  position: absolute !important;
  top: 14px !important;
  right: 14px !important;
  width: 44px !important;
  height: 44px !important;
  line-height: 44px !important;
  text-align: center !important;
  color: #432537 !important;
  font-size: 26px !important;
  z-index: 10 !important;
  border-radius: 50%;
  transition: background 0.2s ease;
}

#header_aside .btn-aside-toggle:hover {
  background: #eadcd9;
}

#header_aside .btn-aside-toggle i {
  display: inline-block !important;
  line-height: inherit !important;
  transition: transform 0.3s ease;
}

#header_aside .btn-aside-toggle:hover i {
  transform: rotate(90deg);
}

/* Backdrop */
.la-overlay-global {
  position: fixed;
  inset: 0;
  background: rgba(38, 22, 32, 0.66);
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  z-index: 9990;
  cursor: pointer;
}

body.open-header-aside .la-overlay-global,
body.open-cart-aside .la-overlay-global,
body.open-search-form .la-overlay-global {
  visibility: visible !important;
  opacity: 1 !important;
}

/* --------------------------------------------------------------------------
   5. Search fly-out (markup lives in the overlays partial).
   -------------------------------------------------------------------------- */
.searchform-fly-overlay {
  position: fixed;
  inset: 0;
  background: rgba(38, 22, 32, 0.94);
  z-index: 9995;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

body.open-search-form .searchform-fly-overlay {
  display: flex;
}

.searchform-fly-overlay .btn-close-search {
  position: absolute;
  top: 28px;
  right: 36px;
  color: #faf5ef;
  cursor: pointer;
}

.searchform-fly-overlay .searchform-fly {
  width: min(720px, 100%);
  text-align: center;
  color: #faf5ef;
}

.searchform-fly-overlay .search-field {
  width: 100%;
  padding: 14px 18px;
  border: 1px solid #d8c4bc;
  border-radius: 4px;
  background: #fff;
  color: #432537;
}

.searchform-fly-overlay .search-button {
  margin-top: 14px;
  padding: 12px 22px;
  background: #432537;
  color: #faf5ef;
  border: 0;
  border-radius: 4px;
  cursor: pointer;
}

/* --------------------------------------------------------------------------
   6. Leaflet map on /partners-map.
   The WordPress "open user map" plugin stylesheet is not bundled, so the
   geometry the plugin normally provides is supplied here.
   -------------------------------------------------------------------------- */
.open-user-map .box-wrap {
  margin: 0;
}

.open-user-map .map-wrap {
  position: relative;
  height: 560px;
  padding: 0 !important;
  border-radius: 12px;
  overflow: hidden;
  background: #eee1d5;
}

.open-user-map .oum-loading-overlay,
.open-user-map .oum-loading-spinner {
  display: none !important;
}

.leaflet-map {
  height: 100%;
  min-height: 480px;
  width: 100%;
  border-radius: 12px;
  z-index: 0;
}

@media (max-width: 767px) {
  .open-user-map .map-wrap { height: 420px; }
  .leaflet-map { min-height: 420px; }
}

img { max-width: 100%; height: auto; }

.screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* --------------------------------------------------------------------------
   7. WooCommerce product page.
   The theme fades the gallery in from JS (`opacity: 0` inline); we do not run
   that script, so reveal it and keep the layout intact.
   -------------------------------------------------------------------------- */
[class*="woocommerce-product-gallery"] {
  opacity: 1 !important;
  visibility: visible !important;
}

.woocommerce-product-gallery__wrapper {
  display: block;
  margin: 0;
}

.woocommerce-product-gallery__image img {
  width: 100%;
  height: auto;
  border-radius: 12px;
}

.la_woo_loading {
  display: none !important;
}

/* --------------------------------------------------------------------------
   7b. Slider grids.
   The theme turns `.la-slick-slider` into a slick carousel from JavaScript.
   That script is not mirrored, so the same markup is laid out here as a
   single-row snap scroller (4 visible at xl, 3 at lg, 2 at md, 1 on phones).
   Without this the 12 "popular products" and the blog cards stack into a
   column and the page becomes twice as tall as the original.
   -------------------------------------------------------------------------- */
#main .la-slick-slider.grid-items,
#main .la-slick-slider.products,
#main .la-slick-slider.showposts-loop {
  display: flex !important;
  flex-wrap: nowrap;
  align-items: stretch;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  margin-left: -15px;
  margin-right: -15px;
}

#main .la-slick-slider.grid-items::-webkit-scrollbar,
#main .la-slick-slider.products::-webkit-scrollbar,
#main .la-slick-slider.showposts-loop::-webkit-scrollbar {
  display: none;
}

/* Each carousel declares its column count in data-slider_config, which
   assets/js/app.js copies into --slide-count. Slides are an exact fraction of
   the track so a page of slides covers the viewport completely — no leftover
   strip at the end. */
#main .la-slick-slider > .grid-item {
  flex: 0 0 calc(100% / var(--slide-count, 4));
  max-width: calc(100% / var(--slide-count, 4));
  scroll-snap-align: start;
}

/* Page dots for the carousels (slick renders these from JS on the live site). */
.sa-carousel-dots {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 26px;
}

.sa-carousel-dots button {
  width: 7px;
  height: 7px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #cbb6b0;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;
}

.sa-carousel-dots button:hover {
  background: #9a717b;
}

.sa-carousel-dots button.is-active {
  background: #432537;
  transform: scale(1.25);
}

.sa-carousel-dots button:focus-visible {
  outline: 2px solid #432537;
  outline-offset: 3px;
}

/* The slick scaffolding is never hydrated here. */
#main .la-slick-slider .slick-arrow,
#main .la-slick-slider .slick-dots {
  display: none !important;
}

/* --------------------------------------------------------------------------
   8. Page title / breadcrumb banner (rendered above #main on sub pages).
   Values mirror the live theme: the banner keeps no padding of its own, the
   inner wrapper carries it, and the breadcrumbs follow the section alignment.
   -------------------------------------------------------------------------- */
#section_page_header.section-page-header {
  position: relative;
  padding: 0 !important;
  overflow: hidden;
}

#section_page_header .page-header-inner {
  padding: 100px 0 75px;
}

#section_page_header .page-title {
  font-size: 36px;
  font-weight: 600;
  line-height: 1.4;
  margin: 0;
}

#section_page_header .la-breadcrumbs {
  float: none;
  margin-top: 10px;
  font-size: 14px;
  text-transform: none;
  letter-spacing: 0;
}

#section_page_header .la-breadcrumb-item {
  float: none;
  display: inline-block;
  vertical-align: middle;
}

#section_page_header .la-breadcrumb-wrap {
  display: block;
}

/* The studio page uses a tighter banner on the live site. */
body.page-id-4354 #section_page_header .page-header-inner {
  padding: 72px 0;
}

@media (max-width: 767px) {
  #section_page_header .page-header-inner { padding: 56px 0 44px; }
  #section_page_header .page-title { font-size: 26px; }
  #section_page_header .la-breadcrumbs { display: none; }
}

/* --------------------------------------------------------------------------
   9. LiveView navigation: avoid the white flash while the next page renders.
   -------------------------------------------------------------------------- */
html { background-color: #faf5ef; }
body { background-color: #faf5ef; }

/* --------------------------------------------------------------------------
   Navigation layout across widths.
   Above 1380 the bar is centred on the page; between 1200 and 1380 that would
   collide with the icon cluster, so it centres and wraps inside its column.
   -------------------------------------------------------------------------- */
@media (min-width: 1380px) {
  #masthead .header-main {
    position: relative;
  }

  /* Centre the bar on the page. `width: max-content` keeps the box as wide as
     the menu itself, so it never covers the logo or the icon cluster. */
  #masthead .header-middle {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    margin: 0;
    width: max-content !important;
    max-width: calc(100% - 470px);
  }

  #masthead .header-middle .site-main-nav {
    width: auto !important;
  }

  #masthead .site-main-nav .main-menu {
    justify-content: center;
    flex-wrap: wrap;
    row-gap: 2px;
  }
}

/* Narrow desktops lose the space the logo and icon cluster need, so tighten the
   bar before it has to wrap onto a third row. */
@media (min-width: 992px) and (max-width: 1199px) {
  #masthead .site-main-nav .main-menu {
    --nav-font-size: 12px;
    column-gap: 2px;
  }

  #masthead .site-main-nav .main-menu > li > a {
    padding-left: 3px !important;
    padding-right: 3px !important;
  }
}

/* Between the desktop breakpoint and 1380 the centred bar would collide with
   the icon cluster, so keep it in flow and let it centre (and wrap) inside its
   own column. */
@media (min-width: 992px) and (max-width: 1379px) {
  #masthead .header-middle {
    flex: 1 1 auto;
    width: auto !important;
    min-width: 0;
  }

  #masthead .header-middle .site-main-nav {
    width: 100% !important;
  }

  #masthead .site-main-nav .main-menu {
    justify-content: center;
    flex-wrap: wrap;
    row-gap: 2px;
    width: 100%;
  }
}

#masthead .site-branding img {
  max-width: 240px;
  height: auto;
}

.site-header-mobile .site-branding img {
  max-width: 220px;
  height: auto;
}

/* The contact form closes the page; without this its submit button sits flush
   against the footer. */
#main .wpcf7-form {
  margin-bottom: 44px;
}

@media (max-width: 767px) {
  #main .wpcf7-form {
    margin-bottom: 28px;
  }
}

/* --------------------------------------------------------------------------
   Collection catalogue (DjgLive): the 28 model cards, filterable and endless.
   -------------------------------------------------------------------------- */
#main.sa-djg {
  padding-top: 28px;
  padding-bottom: 48px;
}

#main.sa-djg .sa-djg-hero {
  max-width: 780px;
  margin-bottom: 34px;
}

#main.sa-djg .sa-djg-kicker {
  margin: 0 0 10px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: #a1746b;
  text-transform: uppercase;
}

#main.sa-djg .sa-djg-title {
  margin: 0 0 16px;
  font-size: clamp(26px, 3.4vw, 40px);
  line-height: 1.15;
  color: #432537;
}

#main.sa-djg .sa-djg-lede {
  margin: 0 0 12px;
  font-size: 15px;
  line-height: 1.7;
  color: #5f4048;
}

#main.sa-djg .sa-djg-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin: 22px 0 26px;
}

#main.sa-djg .sa-djg-actions .djg-button {
  padding: 12px 18px;
  font-size: 13px;
  line-height: 1.45;
  color: #fdf7f5;
  text-decoration: none;
  background: #432537;
  border: 1px solid #432537;
  border-radius: 10px;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

#main.sa-djg .sa-djg-actions .djg-secondary {
  color: #432537;
  background: transparent;
}

#main.sa-djg .sa-djg-actions .djg-button:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 26px -18px rgba(67, 37, 55, 0.6);
}

#main.sa-djg .sa-djg-index {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 4px 24px;
  margin: 0;
  padding: 18px 20px;
  font-size: 13px;
  list-style: decimal inside;
  color: #5f4048;
  background: #fffaf7;
  border: 1px solid #eadcd9;
  border-radius: 14px;
}

#main.sa-djg .sa-djg-index a {
  color: #432537;
  text-decoration: none;
}

#main.sa-djg .sa-djg-index a:hover {
  color: #8a5363;
  text-decoration: underline;
}

#main.sa-djg .sa-djg-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 18px;
  margin-bottom: 22px;
}

#main.sa-djg .sa-djg-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

#main.sa-djg .sa-djg-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: #5f4048;
  cursor: pointer;
  background: #fffaf7;
  border: 1px solid #eadcd9;
  border-radius: 999px;
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

#main.sa-djg .sa-djg-chip span {
  font-size: 10.5px;
  color: #a1746b;
}

#main.sa-djg .sa-djg-chip:hover {
  color: #432537;
  border-color: #8a5363;
}

#main.sa-djg .sa-djg-chip.is-active {
  color: #fdf7f5;
  background: #432537;
  border-color: #432537;
}

#main.sa-djg .sa-djg-chip.is-active span {
  color: #e8cfc7;
}

#main.sa-djg .sa-djg-count {
  margin: 0;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: #8a6a6f;
  text-transform: uppercase;
}

#main.sa-djg .sa-djg-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
}

#main.sa-djg .sa-djg-card {
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
  text-align: left;
  cursor: pointer;
  background: #fffaf7;
  border: 1px solid #eadcd9;
  border-radius: 16px;
  transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}

#main.sa-djg .sa-djg-card:hover {
  border-color: #ddc9c2;
  box-shadow: 0 18px 38px -26px rgba(67, 37, 55, 0.5);
  transform: translateY(-3px);
}

#main.sa-djg .sa-djg-card-media {
  display: block;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: #f3e9e4;
}

#main.sa-djg .sa-djg-card-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}

#main.sa-djg .sa-djg-card:hover img {
  transform: scale(1.03);
}

#main.sa-djg .sa-djg-card-body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px 16px 16px;
}

#main.sa-djg .sa-djg-card-brand {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: #8a5363;
  text-transform: uppercase;
}

#main.sa-djg .sa-djg-card-title {
  font-size: 15px;
  line-height: 1.35;
  color: #432537;
}

#main.sa-djg .sa-djg-card-index {
  font-size: 11px;
  color: #a1746b;
}

@media (max-width: 1199px) {
  #main.sa-djg .sa-djg-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 767px) {
  #main.sa-djg .sa-djg-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Model panel. */
.sa-djg-panel {
  position: fixed;
  inset: 0;
  z-index: 10040;
  display: grid;
  place-items: center;
  padding: 4vh 4vw;
  background: rgba(35, 18, 28, 0.72);
}

.sa-djg-panel-card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 320px) minmax(0, 1fr);
  gap: 24px;
  width: min(1000px, 94vw);
  max-height: 88vh;
  padding: 24px;
  overflow-y: auto;
  background: #fffaf7;
  border-radius: 18px;
}

.sa-djg-panel-image {
  width: 100%;
  border-radius: 12px;
}

.sa-djg-panel-brand {
  margin: 0 0 6px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: #8a5363;
  text-transform: uppercase;
}

.sa-djg-panel-title {
  margin: 0 0 10px;
  font-size: 22px;
  line-height: 1.25;
}

.sa-djg-panel-summary {
  margin: 0 0 14px;
  font-size: 14px;
  line-height: 1.6;
  color: #5f4048;
}

.sa-djg-panel-specs {
  width: 100%;
  margin-bottom: 16px;
  font-size: 13px;
  border-collapse: collapse;
}

.sa-djg-panel-specs caption {
  padding-bottom: 8px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: #a1746b;
  text-align: left;
  text-transform: uppercase;
}

.sa-djg-panel-specs th,
.sa-djg-panel-specs td {
  padding: 7px 10px;
  text-align: left;
  border-bottom: 1px solid #f0e5e0;
}

.sa-djg-panel-specs th {
  font-weight: 600;
  color: #7b5a5f;
}

.sa-djg-panel-cta {
  display: inline-block;
  padding: 11px 18px;
  font-size: 13px;
  font-weight: 600;
  color: #fdf7f5;
  text-decoration: none;
  background: #432537;
  border-radius: 10px;
}

.sa-djg-panel-close {
  position: absolute;
  top: 12px;
  right: 14px;
  width: 34px;
  height: 34px;
  font-size: 20px;
  color: #432537;
  cursor: pointer;
  background: #f2e6e1;
  border: 0;
  border-radius: 50%;
}

@media (max-width: 767px) {
  .sa-djg-panel-card {
    grid-template-columns: minmax(0, 1fr);
    padding: 18px;
  }
}

/* The collection page runs to ~28,000px; skipping the render of offscreen
   sections keeps the first paint and the scroll smooth. */
#main .djg-brand,
#main .djg-extension,
#main .djg-purpose {
  content-visibility: auto;
  contain-intrinsic-size: auto 1400px;
}

/* Collection page (DERMANOVA · GENESIS · JOULE): the two calls to action sat
   12px apart with square corners, reading as one block. */
#main .djg-actions {
  gap: 16px !important;
  margin: 26px 0 34px !important;
}

#main .djg-actions .djg-button {
  padding: 13px 20px;
  font-size: 13.5px;
  line-height: 1.45;
  border-radius: 10px;
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

#main .djg-actions .djg-button:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 26px -18px rgba(67, 37, 55, 0.6);
}

/* --------------------------------------------------------------------------
   Full-bleed rows, before the bundle runs.
   js_composer stretches [data-vc-full-width] rows from JS, so the first paint
   showed them at container width and they snapped out to the viewport a moment
   later — the "narrow, then normal" flicker on a hard refresh. The CSS below
   already spans the viewport; the script only refines it by the scrollbar width.
   -------------------------------------------------------------------------- */
#main {
  overflow-x: clip;
}

.vc_row[data-vc-full-width="true"]:not([data-vc-stretch-content="false"]) {
  width: 100vw;
  max-width: none;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

/* --------------------------------------------------------------------------
   Image skeletons.
   The shimmer sits on the <img> itself: it shows while the picture is still on
   its way, and disappears the moment it decodes (attribute set by app.js), so
   transparent artwork never keeps a gradient behind it.
   -------------------------------------------------------------------------- */
/* Cards must reserve the picture box before the image arrives, otherwise the
   shimmer has nowhere to paint. */
#main .products-grid .product_item--thumbnail,
#main .products-grid .product_item--thumbnail-holder {
  aspect-ratio: 4 / 5;
  overflow: hidden;
}

#main .products-grid .product_item--thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

#main .row-related-posts .loop__item__thumbnail {
  min-height: 180px;
}

[data-sa-img-box]:not([data-sa-img-box-loaded]),
img[data-sa-img]:not([data-sa-img-loaded]) {
  background-color: #f3e9e4;
  background-image: linear-gradient(
    100deg,
    #ecdcd4 20%,
    #fbf3ee 42%,
    #f4e6e0 58%,
    #ecdcd4 80%
  );
  background-size: 240% 100%;
  background-position: 120% 0;
  animation: sa-img-shimmer 1.5s linear infinite;
}

@keyframes sa-img-shimmer {
  from {
    background-position: 120% 0;
  }
  to {
    background-position: -120% 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  /* Cards must reserve the picture box before the image arrives, otherwise the
   shimmer has nowhere to paint. */
#main .products-grid .product_item--thumbnail,
#main .products-grid .product_item--thumbnail-holder {
  aspect-ratio: 4 / 5;
  overflow: hidden;
}

#main .products-grid .product_item--thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

#main .row-related-posts .loop__item__thumbnail {
  min-height: 180px;
}

[data-sa-img-box]:not([data-sa-img-box-loaded]),
img[data-sa-img]:not([data-sa-img-loaded]) {
    animation: none;
    background-image: none;
  }
}

/* --------------------------------------------------------------------------
   Page rhythm.
   Every page that opens with the mirrored header banner starts its content 28px
   below it (20px on phones) instead of sitting flush under the picture.
   -------------------------------------------------------------------------- */
#section_page_header + #main {
  padding-top: 28px;
}

@media (max-width: 767px) {
  #section_page_header + #main {
    padding-top: 20px;
  }
}

/* --------------------------------------------------------------------------
   Journal index.
   WordPress shipped nine cards with cut-off pictures and a pager that went
   nowhere; the listing is rendered by BlogLive as proper cards.
   -------------------------------------------------------------------------- */
#main.sa-blog {
  padding-top: 28px;
}

#main.sa-blog .sa-blog-inner {
  padding-bottom: 40px;
}

#main.sa-blog .sa-blog-count {
  margin: 0 0 18px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: #8a6a6f;
  text-transform: uppercase;
}

#main.sa-blog .sa-blog-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 26px;
}

#main.sa-blog .sa-blog-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #fffaf7;
  border: 1px solid #eadcd9;
  border-radius: 18px;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

#main.sa-blog .sa-blog-card:hover {
  border-color: #ddc9c2;
  box-shadow: 0 18px 40px -24px rgba(67, 37, 55, 0.45);
  transform: translateY(-3px);
}

#main.sa-blog .sa-blog-card-media {
  display: block;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: #f3e9e4;
}

#main.sa-blog .sa-blog-card-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}

#main.sa-blog .sa-blog-card:hover .sa-blog-card-media img {
  transform: scale(1.04);
}

#main.sa-blog .sa-blog-card-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 8px;
  padding: 18px 20px 20px;
}

#main.sa-blog .sa-blog-card-date {
  margin: 0;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: #a1746b;
  text-transform: uppercase;
}

#main.sa-blog .sa-blog-card-title {
  margin: 0;
  font-size: 18px;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

#main.sa-blog .sa-blog-card-title a {
  color: #432537;
  text-decoration: none;
}

#main.sa-blog .sa-blog-card-title a:hover {
  color: #8a5363;
}

#main.sa-blog .sa-blog-card-excerpt {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.6;
  color: #6d4a52;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

#main.sa-blog .sa-blog-card-more {
  margin-top: auto;
  padding-top: 6px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: #8a5363;
  text-decoration: none;
}

#main.sa-blog .sa-blog-card-more:hover {
  color: #432537;
}

@media (max-width: 1199px) {
  #main.sa-blog .sa-blog-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 767px) {
  #main.sa-blog {
    padding-top: 20px;
  }

  #main.sa-blog .sa-blog-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
  }
}

/* The service-centre video needs no heading, and the card sat in 34px of air. */
#main .sa-service-video > h2 {
  display: none;
}

#main .sa-service-video {
  padding: 18px 20px;
}

#main .sa-service-video .silk-video-gallery {
  gap: 14px;
}

#main .sa-service-video figure {
  max-width: 262px !important;
}

#main .sa-service-video figcaption {
  padding-top: 8px !important;
  font-size: 13px;
}

/* --------------------------------------------------------------------------
   Gallery viewer (product page).
   -------------------------------------------------------------------------- */
.sa-gallery-modal {
  position: fixed;
  inset: 0;
  z-index: 10050;
  display: grid;
  place-items: center;
  padding: 4vh 4vw;
  background: rgba(35, 18, 28, 0.86);
  opacity: 0;
  transition: opacity 0.2s ease;
}

.sa-gallery-modal.is-open {
  opacity: 1;
}

.sa-gallery-modal-image {
  max-width: min(1200px, 92vw);
  max-height: 86vh;
  object-fit: contain;
  background: #fffaf7;
  border-radius: 12px;
  box-shadow: 0 30px 80px -30px rgba(0, 0, 0, 0.7);
}

.sa-gallery-modal-counter {
  position: absolute;
  bottom: 3vh;
  left: 50%;
  margin: 0;
  font-size: 12px;
  letter-spacing: 0.18em;
  color: #f1e2dc;
  transform: translateX(-50%);
}

.sa-gallery-modal-nav,
.sa-gallery-modal-close {
  position: absolute;
  display: grid;
  place-items: center;
  padding: 0;
  color: #432537;
  cursor: pointer;
  background: rgba(253, 247, 245, 0.94);
  border: 0;
  border-radius: 50%;
  transition: background 0.18s ease, opacity 0.18s ease, transform 0.18s ease;
}

.sa-gallery-modal-nav {
  top: 50%;
  width: 48px;
  height: 48px;
  font-size: 26px;
  line-height: 1;
  transform: translateY(-50%);
}

.sa-gallery-modal-nav--prev {
  left: 2vw;
}

.sa-gallery-modal-nav--next {
  right: 2vw;
}

.sa-gallery-modal-nav:hover:not(:disabled) {
  background: #fff;
  transform: translateY(-50%) scale(1.05);
}

.sa-gallery-modal-nav:disabled {
  opacity: 0.3;
  cursor: default;
}

.sa-gallery-modal-close {
  top: 2.5vh;
  right: 2.5vw;
  width: 42px;
  height: 42px;
  font-size: 24px;
}

.sa-gallery-modal-close:hover {
  background: #fff;
}

/* --------------------------------------------------------------------------
   Journal article.
   The mirrored article runs the full 900px column with default type and a plain
   sidebar; give it a readable measure, calmer rhythm and the same sidebar card
   the catalogue uses.
   -------------------------------------------------------------------------- */
#main.sa-post {
  padding-top: 28px;
}

#main.sa-post .entry-content,
#main.sa-post .post-content {
  font-size: 16px;
  line-height: 1.8;
  color: #4a2b3a;
}

#main.sa-post .entry-content > * + * {
  margin-top: 18px;
}

#main.sa-post .entry-content img {
  width: auto;
  max-width: 100%;
  max-height: 460px;
  height: auto;
  object-fit: cover;
  border-radius: 14px;
}

#main.sa-post .entry-content h2,
#main.sa-post .entry-content h3 {
  margin-top: 34px;
  margin-bottom: 12px;
  line-height: 1.25;
}

#main.sa-post .entry-content h2 {
  font-size: 26px;
}

#main.sa-post .entry-content h3 {
  font-size: 21px;
}

#main.sa-post .entry-content p {
  margin: 0;
}

#main.sa-post .entry-content ul,
#main.sa-post .entry-content ol {
  padding-left: 22px;
}

#main.sa-post .entry-content li + li {
  margin-top: 6px;
}

#main.sa-post .entry-content blockquote {
  margin: 26px 0;
  padding: 18px 22px;
  font-size: 17px;
  color: #432537;
  background: #fdf4ef;
  border-left: 3px solid #8a5363;
  border-radius: 0 14px 14px 0;
}

#main.sa-post .entry-content a {
  color: #8a5363;
  text-decoration: underline;
  text-underline-offset: 3px;
}

#main.sa-post .entry-content a:hover {
  color: #432537;
}

/* Article meta line: author · date · category. */
#main.sa-post .sa-post-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0 0 24px;
  padding: 10px 14px;
  font-size: 12px;
  letter-spacing: 0.04em;
  color: #7b5a5f;
  background: #fffaf7;
  border: 1px solid #eadcd9;
  border-radius: 999px;
}

#main.sa-post .sa-post-meta-author {
  font-weight: 600;
  color: #432537;
}

#main.sa-post .sa-post-meta a {
  color: #8a5363;
  text-decoration: none;
}

#main.sa-post .sa-post-meta a:hover {
  text-decoration: underline;
}

#main.sa-post .sa-post-meta-sep {
  color: #c9a8a0;
}

/* Article meta and navigation. */
#main.sa-post .entry-meta,
#main.sa-post .post-meta,
#main.sa-post .entry-footer {
  font-size: 12px;
  letter-spacing: 0.06em;
  color: #a1746b;
}

#main.sa-post .post-navigation {
  margin-top: 34px;
  padding-top: 22px;
  border-top: 1px solid #eadcd9;
}

/* Previous and next sit side by side on one row, each a single line. */
#main.sa-post .nav-links {
  display: flex;
  gap: 14px;
  align-items: stretch;
}

#main.sa-post .nav-links > div {
  flex: 1 1 0;
  min-width: 0;
}

#main.sa-post .nav-next > a {
  justify-content: flex-end;
  text-align: right;
}

#main.sa-post .nav-previous > a,
#main.sa-post .nav-next > a {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 16px 18px;
  background: #fffaf7;
  border: 1px solid #eadcd9;
  border-radius: 14px;
  transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

#main.sa-post .nav-previous > a:hover,
#main.sa-post .nav-next > a:hover {
  border-color: #8a5363;
  transform: translateY(-2px);
  box-shadow: 0 14px 30px -22px rgba(67, 37, 55, 0.5);
}

#main.sa-post .nav-previous .meta-nav,
#main.sa-post .nav-next .meta-nav {
  flex: none;
  order: -1;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: #a1746b;
  text-transform: uppercase;
}

#main.sa-post .nav-previous .post-title,
#main.sa-post .nav-next .post-title {
  overflow: hidden;
  font-size: 15px;
  line-height: 1.4;
  color: #432537;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Related posts: the same card language as the journal index. */
#main .row-related-posts {
  padding: 40px 0 56px;
  margin-top: 20px;
  background: #fbf3ee;
  border-top: 1px solid #eadcd9;
}

#main .row-related-posts .block_heading--title {
  margin: 0 0 20px;
  font-size: 22px;
}

#main .row-related-posts .la-loop {
  margin: 0 -12px;
}

#main .row-related-posts .loop__item {
  padding: 0 12px;
}

#main .row-related-posts .loop__item__inner {
  overflow: hidden;
  background: #fffaf7;
  border: 1px solid #eadcd9;
  border-radius: 16px;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

#main .row-related-posts .loop__item__inner:hover {
  border-color: #ddc9c2;
  box-shadow: 0 18px 40px -26px rgba(67, 37, 55, 0.45);
  transform: translateY(-3px);
}

#main .row-related-posts .loop__item__thumbnail {
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: #f3e9e4;
}

#main .row-related-posts .loop__item__thumbnail img,
#main .row-related-posts .loop__item__thumbnail--bkg {
  width: 100%;
  height: 100%;
  object-fit: cover;
  background-size: cover;
  background-position: center;
}

#main .row-related-posts .loop__item__info {
  padding: 14px 16px 16px !important;
}

/* The theme floats the date over the title in this carousel; the cards read
   better as title + standfirst only. */
#main .row-related-posts .loop__item__meta {
  display: none !important;
}

#main .row-related-posts .loop__item__desc {
  margin: 6px 0 0 !important;
  font-size: 13px;
  line-height: 1.6;
  color: #6d4a52;
}

#main .row-related-posts .loop__item__title {
  margin: 0;
  font-size: 15px;
  line-height: 1.4;
}

#main .row-related-posts .loop__item__title a {
  color: #432537;
  text-decoration: none;
}

#main .row-related-posts .loop__item__title a:hover {
  color: #8a5363;
}

/* Sidebar: same card and category rows as the catalogue. */
#main.sa-post #sidebar_primary .sidebar-inner {
  padding: 16px;
  background: #fffaf7;
  border: 1px solid #eadcd9;
  border-radius: 16px;
}

#main.sa-post #sidebar_primary .widget {
  margin-bottom: 22px;
}

#main.sa-post #sidebar_primary .widget:last-child {
  margin-bottom: 0;
}

#main.sa-post #sidebar_primary .widget-title {
  margin: 0 0 10px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: #a1746b;
  text-transform: uppercase;
}

#main.sa-post #sidebar_primary .search-form {
  position: relative;
  display: flex;
  align-items: center;
}

#main.sa-post #sidebar_primary .search-field {
  width: 100%;
  height: 42px;
  padding: 0 40px 0 14px;
  font-size: 13px;
  color: #432537;
  background: #fff;
  border: 1px solid #e3d2cc;
  border-radius: 999px;
  outline: none;
}

#main.sa-post #sidebar_primary .search-field:focus {
  border-color: #8a5363;
  box-shadow: 0 0 0 4px rgba(138, 83, 99, 0.12);
}

#main.sa-post #sidebar_primary .search-button {
  position: absolute;
  right: 4px;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
  color: #432537;
  cursor: pointer;
  background: #f2e6e1;
  border: 0;
  border-radius: 50%;
}

#main.sa-post #sidebar_primary .product-categories {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* WordPress puts the count beside the link, not inside it, so the row itself
   has to be the flex container. */
#main.sa-post #sidebar_primary .product-categories > li,
#main.sa-post #sidebar_primary .cat-item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 4px 8px;
  padding: 4px 8px;
  border-radius: 8px;
  transition: background 0.18s ease;
}

#main.sa-post #sidebar_primary .product-categories > li:hover,
#main.sa-post #sidebar_primary .cat-item:hover {
  background: #f6ece7;
}

#main.sa-post #sidebar_primary .product-categories > li > a,
#main.sa-post #sidebar_primary .cat-item > a {
  flex: 1;
  padding: 0;
  font-size: 12.5px;
  line-height: 1.3;
  color: #4a2b3a;
  text-decoration: none;
  border-radius: 8px;
  transition: background 0.18s ease, color 0.18s ease;
}

#main.sa-post #sidebar_primary .product-categories > li > a:hover,
#main.sa-post #sidebar_primary .cat-item > a:hover {
  color: #432537;
  background: #f6ece7;
}

#main.sa-post #sidebar_primary .cat-item > .children {
  flex: 0 0 100%;
  width: 100%;
  margin: 2px 0 2px 10px;
  padding: 0 0 0 8px;
  list-style: none;
  border-left: 1px solid #efe1dc;
}

#main.sa-post #sidebar_primary .cat-item > .children .cat-item {
  padding-left: 0;
}

#main.sa-post #sidebar_primary .product-categories .count {
  flex: none;
  padding: 1px 6px;
  font-size: 10.5px;
  font-weight: 600;
  color: #a1746b;
  background: #f4ebe6;
  border-radius: 999px;
}

#main.sa-post #sidebar_primary .widget_recent_entries ul,
#main.sa-post #sidebar_primary .widget_nav_menu ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

#main.sa-post #sidebar_primary .widget_recent_entries a,
#main.sa-post #sidebar_primary .widget_nav_menu a {
  display: block;
  padding: 5px 8px;
  font-size: 13px;
  line-height: 1.35;
  color: #4a2b3a;
  text-decoration: none;
  border-radius: 8px;
}

#main.sa-post #sidebar_primary .widget_recent_entries a:hover,
#main.sa-post #sidebar_primary .widget_nav_menu a:hover {
  background: #f6ece7;
}

/* --------------------------------------------------------------------------
   Product page.
   The mirrored single-product layout leans on theme chrome: a bordered media
   box, an instalments banner blown up to 430px and a one-item tab strip whose
   label is clipped. Tighten it into something that reads like a product sheet.
   -------------------------------------------------------------------------- */
/* Space between the page header banner and the product sheet. */
#main.sa-product {
  padding-top: 28px;
}

@media (max-width: 767px) {
  #main.sa-product {
    padding-top: 20px;
  }
}

#main .la-p-single-wrap .la-single-product-page {
  margin-bottom: 8px;
}

#main .la-p-single-wrap .product-main-image {
  padding-right: 26px;
}

/* Gallery: thumbnails on the left, the picture they select on the right. */
#main .la-p-single-wrap .sa-gallery {
  display: grid;
  grid-template-columns: 84px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}

#main .la-p-single-wrap .sa-gallery--single {
  grid-template-columns: minmax(0, 1fr);
}

#main .la-p-single-wrap .sa-gallery-rail {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

#main .la-p-single-wrap .sa-gallery-scroll {
  display: none;
}

@media (min-width: 768px) {
  #main .la-p-single-wrap .sa-gallery-scroll {
    display: grid;
    place-items: center;
    width: 100%;
    height: 24px;
    padding: 0;
    font-size: 12px;
    color: #8a6a6f;
    cursor: pointer;
    background: #fffaf7;
    border: 1px solid #eadcd9;
    border-radius: 8px;
    transition: color 0.18s ease, border-color 0.18s ease;
  }

  #main .la-p-single-wrap .sa-gallery-scroll:hover {
    color: #432537;
    border-color: #8a5363;
  }
}

#main .la-p-single-wrap .sa-gallery-thumbs {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 560px;
  overflow-y: auto;
  padding-right: 2px;
}

#main .la-p-single-wrap .sa-gallery-thumb {
  padding: 0;
  overflow: hidden;
  cursor: pointer;
  background: #fffaf7;
  border: 1px solid #eadcd9;
  border-radius: 12px;
  transition: border-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}

#main .la-p-single-wrap .sa-gallery-thumb img {
  display: block;
  width: 100%;
  height: 84px;
  padding: 3px;
  object-fit: contain;
  background: #fffaf7;
}

#main .la-p-single-wrap .sa-gallery-thumb:hover {
  border-color: #8a5363;
  transform: translateY(-1px);
}

#main .la-p-single-wrap .sa-gallery-thumb.is-active {
  border-color: #432537;
  box-shadow: 0 0 0 2px rgba(67, 37, 55, 0.15);
}

#main .la-p-single-wrap .sa-gallery-main {
  position: relative;
  margin: 0;
  overflow: hidden;
  cursor: zoom-in;
  background: #fffaf7;
  border: 1px solid #eadcd9;
  border-radius: 18px;
}

#main .la-p-single-wrap .sa-gallery-main img {
  transition: transform 0.6s ease;
}

#main .la-p-single-wrap .sa-gallery-main:hover img {
  transform: scale(1.03);
}

#main .la-p-single-wrap .sa-gallery-zoom {
  position: absolute;
  right: 12px;
  bottom: 12px;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  font-size: 18px;
  line-height: 1;
  color: #432537;
  background: rgba(253, 247, 245, 0.92);
  border: 1px solid #eadcd9;
  border-radius: 50%;
  box-shadow: 0 6px 16px -8px rgba(67, 37, 55, 0.45);
  pointer-events: none;
}

#main .la-p-single-wrap .sa-gallery-main img {
  display: block;
  width: 100%;
  height: auto;
}

@media (max-width: 767px) {
  #main .la-p-single-wrap .sa-gallery {
    grid-template-columns: minmax(0, 1fr);
  }

  #main .la-p-single-wrap .sa-gallery-rail {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

#main .la-p-single-wrap .sa-gallery-scroll {
  display: none;
}

@media (min-width: 768px) {
  #main .la-p-single-wrap .sa-gallery-scroll {
    display: grid;
    place-items: center;
    width: 100%;
    height: 24px;
    padding: 0;
    font-size: 12px;
    color: #8a6a6f;
    cursor: pointer;
    background: #fffaf7;
    border: 1px solid #eadcd9;
    border-radius: 8px;
    transition: color 0.18s ease, border-color 0.18s ease;
  }

  #main .la-p-single-wrap .sa-gallery-scroll:hover {
    color: #432537;
    border-color: #8a5363;
  }
}

#main .la-p-single-wrap .sa-gallery-thumbs {
    order: 2;
    flex-direction: row;
    max-height: none;
    overflow-x: auto;
  }

  #main .la-p-single-wrap .sa-gallery-thumb {
    flex: 0 0 68px;
  }

  #main .la-p-single-wrap .sa-gallery-thumb img {
    height: 68px;
  }
}

#main .la-p-single-wrap .product--large-image {
  overflow: hidden;
  background: #fffaf7;
  border: 1px solid #eadcd9;
  border-radius: 18px;
}

#main .la-p-single-wrap .product--large-image img {
  display: block;
  width: 100%;
  height: auto;
}

#main .la-p-single-wrap .product--summary {
  padding-top: 2px;
}

#main .la-p-single-wrap .product_title {
  margin: 0 0 10px;
  font-size: 30px;
  line-height: 1.15;
}

#main .la-p-single-wrap .product_meta-top .sku_wrapper,
#main .la-p-single-wrap .sku_wrapper {
  display: inline-block;
  padding: 3px 10px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: #8a5363;
  text-transform: uppercase;
  background: #f6ece7;
  border-radius: 999px;
}

#main .la-p-single-wrap .summary .vc_row,
#main .la-p-single-wrap .summary .wpb_content_element {
  margin-bottom: 14px;
}

/* Instalments banner: a strip, not a billboard. */
#main .la-p-single-wrap .product--summary .widget_media_image img,
#main .la-p-single-wrap .product--summary .wp-image-4092 {
  width: auto;
  max-width: 100%;
  max-height: 64px;
  border-radius: 8px;
}

#main .la-p-single-wrap .product--summary p {
  margin-bottom: 14px;
  font-size: 15px;
  line-height: 1.65;
  color: #5f4048;
}

/* One tab is not a tab bar: drop the clipped strip, keep the panel. */
#main .woocommerce-tabs .tabs.wc-tabs {
  display: none;
}

#main .woocommerce-tabs .woocommerce-Tabs-panel {
  padding: 0;
  border: 0;
}

#main .woocommerce-tabs .woocommerce-Tabs-panel > h2 {
  margin: 0 0 16px;
  font-size: 22px;
}

#main .woocommerce-tabs .woocommerce-Tabs-panel p {
  font-size: 15px;
  line-height: 1.7;
}

/* --------------------------------------------------------------------------
   Back-to-top button.
   Sits in the bottom-right corner and fades in once the visitor has scrolled
   past the first screen.
   -------------------------------------------------------------------------- */
.sa-back-to-top {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 9000;
  width: 46px;
  height: 46px;
  padding: 0;
  border: 1px solid rgba(250, 245, 239, 0.25);
  border-radius: 50%;
  background: #432537;
  color: #faf5ef;
  cursor: pointer;
  display: grid;
  place-items: center;
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition:
    opacity 0.25s ease,
    transform 0.25s ease,
    visibility 0.25s ease,
    background 0.2s ease;
  box-shadow: 0 10px 26px rgba(67, 37, 55, 0.28);
}

.sa-back-to-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.sa-back-to-top:hover {
  background: #6b3045;
}

.sa-back-to-top:focus-visible {
  outline: 3px solid #856047;
  outline-offset: 3px;
}

/* Arrow drawn with a border so it inherits the button colour. */
.sa-back-to-top-arrow {
  width: 12px;
  height: 12px;
  margin-top: 4px;
  border-left: 2px solid currentColor;
  border-top: 2px solid currentColor;
  transform: rotate(45deg);
}

@media (max-width: 767px) {
  .sa-back-to-top {
    right: 14px;
    bottom: 14px;
    width: 42px;
    height: 42px;
  }
}

/* Scroll lock while a drawer, the sidebar or the search overlay is open. */
html.sa-no-scroll,
html.sa-no-scroll body {
  overflow: hidden !important;
}

/* --------------------------------------------------------------------------
   Language modal.
   Tapping the language row in the mobile drawer opens this dialog instead of
   expanding a sub-list inside the menu.
   -------------------------------------------------------------------------- */
.sa-lang-modal {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: grid;
  place-items: center;
  background: rgba(38, 22, 32, 0.55);
  opacity: 0;
  transition: opacity 0.2s ease;
  padding: 20px;
}

.sa-lang-modal.is-open {
  opacity: 1;
}

.sa-lang-modal[hidden] {
  display: none;
}

.sa-lang-modal-card {
  position: relative;
  width: min(420px, 100%);
  background: #faf5ef;
  border: 1px solid #eadcd9;
  border-radius: 16px;
  padding: 26px 22px 22px;
  box-shadow: 0 28px 60px rgba(38, 22, 32, 0.28);
  transform: translateY(8px) scale(0.98);
  transition: transform 0.2s ease;
}

.sa-lang-modal.is-open .sa-lang-modal-card {
  transform: translateY(0) scale(1);
}

.sa-lang-modal-title {
  margin: 0 0 16px;
  font: 600 13px/1.4 Arial, sans-serif;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #856047;
}

.sa-lang-modal-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.sa-lang-modal-option {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 52px;
  padding: 12px 14px;
  border: 1px solid #eadcd9;
  border-radius: 10px;
  color: #432537;
  font-size: 16px;
  text-decoration: none;
  transition: background 0.18s ease, border-color 0.18s ease;
}

.sa-lang-modal-option:hover {
  background: #f3e8e1;
  border-color: #d8c4bc;
}

.sa-lang-modal-option img {
  width: 22px;
  height: auto;
  border-radius: 2px;
}

.sa-lang-modal-close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #432537;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  transition: background 0.18s ease;
}

.sa-lang-modal-close:hover {
  background: #f3e8e1;
}

@media (max-width: 767px) {
  .sa-lang-modal {
    place-items: end center;
    padding: 0;
  }

  .sa-lang-modal-card {
    width: 100%;
    border-radius: 18px 18px 0 0;
    padding: 24px 18px calc(24px + env(safe-area-inset-bottom));
    transform: translateY(16px);
  }

  .sa-lang-modal.is-open .sa-lang-modal-card {
    transform: translateY(0);
  }
}

/* --------------------------------------------------------------------------
   Home category cards.
   The "აპარატების კატეგორიები" tiles are full-bleed cards: the picture runs to
   the frame edges and the title sits on the picture over a soft scrim, so no
   space is spent on a caption row.
   -------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------
   "შემოგვიერთდით" join block: brighter social discs and a readable call button.
   -------------------------------------------------------------------------- */
#main .social-media-link.style-default a {
  background: #94596c !important;
  transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

/* The glyphs were 16px in the circle's own plum, so they read as smudges. */
#main .social-media-link.style-default a i {
  font-size: 26px !important;
  line-height: 1 !important;
  color: #fdf7f5 !important;
  vertical-align: middle;
  transition: color 0.2s ease, transform 0.2s ease;
}

#main .social-media-link.style-default a:hover {
  background: #432537 !important;
  transform: translateY(-2px);
  box-shadow: 0 8px 18px rgba(67, 37, 55, 0.22);
}

#main .social-media-link.style-default a:hover i {
  transform: scale(1.08);
}

/* The call button carried 11px text and a FontAwesome 5 icon, and that font is
   not part of the mirror; the shipped FontAwesome 4 supplies the WhatsApp
   mark instead. */
#main .vc_cta3-actions .vc_btn3 {
  font-size: 15px !important;
  letter-spacing: 0.01em;
}

#main .vc_btn3-icon.fa-phone-alt {
  font-family: FontAwesome !important;
  font-size: 17px !important;
  margin-right: 9px;
}

#main .vc_btn3-icon.fa-phone-alt::before {
  content: "\f232" !important;
  font-family: FontAwesome !important;
  font-weight: 400 !important;
}

/* The contact blocks link to WhatsApp now, so the phone glyph becomes the
   WhatsApp mark. */
.la-contact-item.la-contact-phone::before {
  content: "\f232" !important;
  font-family: FontAwesome !important;
  font-weight: 400 !important;
  color: #25d366 !important;
}

/* --------------------------------------------------------------------------
   Equipment catalogue (`/machines/` and the category archives).
   -------------------------------------------------------------------------- */
/* The WordPress toolbar is replaced by a single card: search, count, sort and
   page size in one row. */
#main.sa-catalog .sa-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 20px;
  padding: 14px 18px;
  margin-bottom: 26px;
  background: #fffaf7;
  border: 1px solid #eadcd9;
  border-radius: 16px;
  box-shadow: 0 8px 22px rgba(67, 37, 55, 0.05);
}

#main.sa-catalog .sa-toolbar-search {
  position: relative;
  display: flex;
  align-items: center;
  flex: 1 1 260px;
  max-width: 380px;
}

#main.sa-catalog .sa-toolbar-search svg {
  position: absolute;
  left: 13px;
  width: 17px;
  height: 17px;
  color: #a1746b;
  pointer-events: none;
}

#main.sa-catalog .sa-toolbar-search input {
  width: 100%;
  height: 44px;
  padding: 0 42px 0 40px;
  font-size: 14px;
  color: #432537;
  background: #fff;
  border: 1px solid #e3d2cc;
  border-radius: 999px;
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

#main.sa-catalog .sa-toolbar-search input::placeholder {
  color: #a1746b;
}

#main.sa-catalog .sa-toolbar-search input:focus {
  border-color: #8a5363;
  box-shadow: 0 0 0 4px rgba(138, 83, 99, 0.12);
}

#main.sa-catalog .sa-toolbar-search .sa-search-clear {
  position: absolute;
  right: 6px;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  padding: 0;
  font-size: 17px;
  line-height: 1;
  color: #8a6a6f;
  cursor: pointer;
  background: #f2e6e1;
  border: 0;
  border-radius: 50%;
  transition: background 0.18s ease, color 0.18s ease;
}

#main.sa-catalog .sa-toolbar-search .sa-search-clear:hover {
  color: #432537;
  background: #e8d5cd;
}

#main.sa-catalog .sa-toolbar-search .sa-search-clear[hidden] {
  display: none;
}

#main.sa-catalog .sa-toolbar-count {
  margin: 12px 4px 18px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: #8a6a6f;
  text-transform: uppercase;
}

#main.sa-catalog .sa-toolbar-controls {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-left: auto;
}

/* Sort: a small CSS-only drop-down. */
#main.sa-catalog .sa-sort {
  position: relative;
}

#main.sa-catalog .sa-sort summary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 14px;
  font-size: 13px;
  color: #5f4048;
  cursor: pointer;
  background: #fff;
  border: 1px solid #e3d2cc;
  border-radius: 999px;
  list-style: none;
  transition: border-color 0.2s ease, color 0.2s ease;
}

#main.sa-catalog .sa-sort summary::-webkit-details-marker {
  display: none;
}

#main.sa-catalog .sa-sort summary::after {
  content: "▾";
  font-size: 10px;
  color: #a1746b;
  transition: transform 0.2s ease;
}

#main.sa-catalog .sa-sort[open] summary {
  color: #432537;
  border-color: #8a5363;
}

#main.sa-catalog .sa-sort[open] summary::after {
  transform: rotate(180deg);
}

#main.sa-catalog .sa-sort strong {
  font-weight: 600;
  color: #432537;
}

#main.sa-catalog .sa-sort ul {
  position: absolute;
  z-index: 20;
  top: calc(100% + 8px);
  right: 0;
  min-width: 210px;
  padding: 6px;
  margin: 0;
  list-style: none;
  background: #fffaf7;
  border: 1px solid #eadcd9;
  border-radius: 14px;
  box-shadow: 0 18px 36px -18px rgba(67, 37, 55, 0.35);
}

#main.sa-catalog .sa-sort li a {
  display: block;
  padding: 9px 12px;
  font-size: 13px;
  color: #4a2b3a;
  text-decoration: none;
  border-radius: 9px;
}

#main.sa-catalog .sa-sort li a:hover {
  background: #f6ece7;
}

#main.sa-catalog .sa-sort li.is-active a {
  font-weight: 600;
  color: #432537;
  background: #f1e3dd;
}

/* Page size pills. */
#main.sa-catalog .sa-page-size {
  display: flex;
  gap: 4px;
  padding: 4px;
  margin: 0;
  list-style: none;
  background: #f4ebe6;
  border-radius: 999px;
}

#main.sa-catalog .sa-page-size li a {
  display: grid;
  place-items: center;
  min-width: 34px;
  height: 30px;
  padding: 0 8px;
  font-size: 12px;
  font-weight: 600;
  color: #7b5a5f;
  text-decoration: none;
  border-radius: 999px;
  transition: background 0.2s ease, color 0.2s ease;
}

#main.sa-catalog .sa-page-size li a:hover {
  color: #432537;
  background: #fff;
}

#main.sa-catalog .sa-page-size li.is-active a {
  color: #fdf7f5;
  background: #432537;
}

/* Sidebar: a card that sticks while the grid scrolls. */
#main.sa-catalog #sidebar_primary .sidebar-inner {
  padding: 12px 14px;
  background: #fffaf7;
  border: 1px solid #eadcd9;
  border-radius: 16px;
}

@media (min-width: 992px) {
  #main.sa-catalog #sidebar_primary {
    align-self: start;
  }

  /* The filter panel fills the viewport and sticks under the top edge: every
     category is visible, nothing scrolls inside the card. */
  #main.sa-catalog #sidebar_primary .sidebar-inner {
    position: sticky;
    top: 20px;
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - 40px);
  }
}

/* The catalogue sidebar is a filter card: the toolbar owns the search, and the
   footer-style widgets (site menu, about copy, a duplicate category menu, recent
   posts) only add noise next to the grid. */
#main.sa-catalog #sidebar_primary .widget_search,
#main.sa-catalog #sidebar_primary .sa-footer-navigation-widget,
#main.sa-catalog #sidebar_primary .widget_nav_menu,
#main.sa-catalog #sidebar_primary .widget_recent_entries,
#main.sa-catalog #sidebar_primary #text-11 {
  display: none;
}

/* Sidebar heading: a quiet label above the list. */
#main.sa-catalog #sidebar_primary .widget-title {
  margin: 0 0 6px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: #a1746b;
  text-transform: uppercase;
}

/* Category list: rebuilt markup, one row per category with its count. */
#main.sa-catalog .sa-cat-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

#main.sa-catalog .sa-cat-item,
#main.sa-catalog .sa-cat-all {
  margin: 0;
}

#main.sa-catalog .sa-cat-item > a,
#main.sa-catalog .sa-cat-all > a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 3px 10px;
  font-size: 12.5px;
  line-height: 1.25;
  color: #4a2b3a;
  text-decoration: none;
  border-radius: 10px;
  transition: background 0.18s ease, color 0.18s ease;
}

#main.sa-catalog .sa-cat-item > a:hover,
#main.sa-catalog .sa-cat-all > a:hover {
  color: #432537;
  background: #f6ece7;
}

#main.sa-catalog .sa-cat-count {
  flex: none;
  min-width: 20px;
  padding: 1px 6px;
  font-size: 10.5px;
  font-weight: 600;
  color: #a1746b;
  text-align: center;
  background: #f4ebe6;
  border-radius: 999px;
}

#main.sa-catalog .sa-cat-all > a {
  margin-bottom: 4px;
  font-weight: 600;
}

#main.sa-catalog .sa-cat-all.is-active > a,
#main.sa-catalog .sa-cat-item.is-active > a {
  color: #fdf7f5;
  background: #432537;
}

#main.sa-catalog .sa-cat-all.is-active .sa-cat-count,
#main.sa-catalog .sa-cat-item.is-active > a .sa-cat-count {
  color: #f6e3dc;
  background: rgba(255, 255, 255, 0.16);
}

#main.sa-catalog .sa-cat-children {
  margin: 2px 0 4px 14px;
  padding: 0 0 0 10px;
  list-style: none;
  border-left: 1px solid #efe1dc;
}

#main.sa-catalog .sa-cat-children .sa-cat-item > a {
  font-size: 12px;
  padding: 3px 9px;
}

@media (max-width: 991px) {
  #main.sa-catalog .sa-toolbar {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    border-radius: 14px;
  }

  #main.sa-catalog .sa-toolbar-search {
    flex: 0 0 auto;
    max-width: none;
  }

  #main.sa-catalog .sa-toolbar-controls {
    width: 100%;
    margin-left: 0;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 10px;
  }

  #main.sa-catalog .sa-sort {
    flex: 1 1 auto;
    min-width: 0;
  }

  #main.sa-catalog .sa-sort summary {
    display: flex;
    justify-content: space-between;
    white-space: nowrap;
    overflow: hidden;
  }

  #main.sa-catalog .sa-page-size {
    flex: none;
  }

  #main.sa-catalog .sa-sort ul {
    right: auto;
    left: 0;
    min-width: 100%;
  }
}

/* Breathing room between the page header banner and the toolbar/grid below it. */
#main.sa-catalog {
  padding-top: 28px;
}

@media (max-width: 767px) {
  #main.sa-catalog {
    padding-top: 20px;
  }
}

#main .product-categories .current-cat > a,
#main .product-categories .current-cat-parent > a {
  color: #432537 !important;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}

#main .wc-view-count li.active > a,
#main .wc-ordering li.active > a {
  color: #432537 !important;
  font-weight: 700;
}

#main .sa-catalog-empty {
  width: 100%;
  padding: 40px 0;
  color: #856047;
  list-style: none;
}

/* The generated tiles can carry long names; keep them to two lines so a row
   stays evenly tall. */
#main.sa-catalog .sa-card-brand {
  display: inline-block;
  margin-bottom: 6px;
  padding: 2px 8px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: #8a5363;
  text-transform: uppercase;
  background: #f6ece7;
  border-radius: 999px;
}

#main .products-grid .product_item--title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* --------------------------------------------------------------------------
   "მოთხოვნადი პროდუქცია" carousel.
   The tiles become bordered cards like the category grid, with chevron arrows
   over the pictures and the paging dots pulled up under them.
   -------------------------------------------------------------------------- */
#main .products-grid.grid-space-default .product_item {
  padding-left: 13px;
  padding-right: 13px;
}

/* Catalogue rows breathe: the item carries the vertical gap instead of the card
   margin, which keeps the columns aligned. */
#main.sa-catalog .products-grid.grid-space-default .product_item {
  padding-bottom: 26px;
}

/* Cards beyond the first batch wait for the scroll sentinel. */
#main.sa-catalog .products-grid .sa-card-pending {
  display: none;
}

#main.sa-catalog .products-grid .sa-card-new {
  animation: sa-card-in 0.35s ease both;
}

@keyframes sa-card-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.sa-grid-sentinel {
  height: 1px;
}

#main .products-grid .product_item--inner {
  height: 100%;
  margin-bottom: 0;
  background: #fffaf7;
  border: 1px solid #eadcd9;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 6px 18px rgba(67, 37, 55, 0.05);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

#main .products-grid .product_item--inner:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 30px rgba(67, 37, 55, 0.12);
}

#main .products-grid .product_item--thumbnail img {
  display: block;
  width: 100%;
}

#main .products-grid .product_item--info {
  padding: 16px 18px 18px !important;
}

#main.sa-catalog .sa-card-brand {
  display: inline-block;
  margin-bottom: 6px;
  padding: 2px 8px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: #8a5363;
  text-transform: uppercase;
  background: #f6ece7;
  border-radius: 999px;
}

#main .products-grid .product_item--title {
  font-size: 15px !important;
  line-height: 1.35 !important;
  margin: 0 !important;
}

/* Arrows: 40px cream circles pinned to the middle of the picture, sitting in
   the page margins so they never cover a card. */
#main .sa-carousel-nav {
  position: absolute;
  top: var(--sa-nav-top, 45%);
  left: -56px;
  right: -56px;
  display: flex;
  justify-content: space-between;
  padding: 0;
  transform: translateY(-50%);
  pointer-events: none;
  z-index: 3;
}

#main .sa-carousel-nav__btn {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid rgba(234, 220, 217, 0.9);
  border-radius: 50%;
  background: rgba(255, 250, 247, 0.92);
  color: #432537;
  box-shadow: 0 4px 14px rgba(67, 37, 55, 0.14);
  cursor: pointer;
  pointer-events: auto;
  transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease, opacity 0.2s ease;
}

#main .sa-carousel-nav__btn svg {
  width: 18px;
  height: 18px;
  display: block;
}

#main .sa-carousel-nav__btn:hover {
  background: #432537;
  color: #fdf7f5;
  transform: scale(1.06);
}

#main .sa-carousel-nav__btn:focus-visible {
  outline: 2px solid #432537;
  outline-offset: 3px;
}

#main .sa-carousel-nav__btn:disabled {
  opacity: 0.35;
  cursor: default;
}

/* Narrower screens have no side margin to park the arrows in, so they sit
   just inside the cards. */
@media (max-width: 1399px) {
  #main .sa-carousel-nav {
    left: 0;
    right: 0;
    padding: 0 6px;
  }

  #main .sa-carousel-nav__btn {
    width: 36px;
    height: 36px;
    background: rgba(255, 250, 247, 0.85);
  }
}

@media (max-width: 767px) {
  #main .sa-carousel-nav {
    padding: 0 10px;
  }

  #main .sa-carousel-nav__btn {
    width: 34px;
    height: 34px;
  }

  #main .sa-carousel-nav__btn svg {
    width: 16px;
    height: 16px;
  }
}

/* Dots sit right under the cards. */
#main .products-grid + .sa-carousel-dots,
#main .sa-carousel-dots {
  margin-top: 14px;
}

/* The blog carousel stacked 20px + 25px of padding under its last line, which
   left the dots ~95px below the cards. */
#main .showposts-loop .loop__item__inner {
  padding-bottom: 0 !important;
}

#main .showposts-loop .loop__item__info {
  padding-bottom: 4px !important;
}

#main .showposts-loop .loop__item__meta {
  margin-bottom: 0 !important;
}

/* The products row opened with a 32px spacer and a 15px heading margin. */
#main .sa-products-row .vc_empty_space {
  display: none !important;
}

#main .sa-products-row > .wpb_column > .vc_column-inner {
  padding-top: 8px !important;
}

#main .sa-products-row > .wpb_column > .vc_column-inner > .wpb_wrapper > h2:first-of-type,
#main .sa-products-row .vc_custom_heading:first-of-type {
  margin-top: 0 !important;
}

/* "რატომ SilkAesthetic?" sat behind 48px of padding plus the heading margin;
   tighten it so the two home sections follow each other more closely. */
#main .sa-home-why {
  padding-top: 16px !important;
  padding-bottom: 28px !important;
}

#main .sa-home-why h2 {
  margin-top: 0 !important;
}

/* The heading row above the cards carried 35px of padding plus a 32px spacer,
   which pushed the section far from the block above. Trim both. */
#main .sa-cat-heading-row > .wpb_column > .vc_column-inner {
  padding-top: 8px !important;
}

#main .sa-cat-heading-row .vc_empty_space {
  display: none !important;
}

/* The gap lives on the column so the horizontal and vertical gaps are both
   24px (12px of padding a side + 24px of margin below). */
#main .sa-image-card {
  padding-left: 12px;
  padding-right: 12px;
  margin-bottom: 24px;
}

#main .sa-image-card > .vc_column-inner {
  position: relative;
  margin: 0;
  width: auto;
  padding: 0;
  background: #fffaf7;
  border: 1px solid #eadcd9;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 6px 18px rgba(67, 37, 55, 0.05);
  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease,
    border-color 0.25s ease;
}

#main .sa-image-card > .vc_column-inner:hover {
  transform: translateY(-3px);
  border-color: #d8c4bc;
  box-shadow: 0 18px 38px rgba(67, 37, 55, 0.14);
}

/* One aspect ratio for every tile keeps the heights and the gaps even, even
   for the transparent PNG tile. */
#main .sa-image-card figure {
  margin: 0;
  overflow: hidden;
  display: block;
  aspect-ratio: 16 / 10;
}

#main .sa-image-card .vc_single_image-wrapper {
  display: block;
}

#main .sa-image-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s ease;
}

#main .sa-image-card:hover img {
  transform: scale(1.05);
}

/* Title lives on the picture (one tile uses an h4). The home palette pins
   .vc_custom_heading to plum with !important, so this needs the same weight. */
body.home.page-id-278 #main .sa-image-card h3,
body.home.page-id-278 #main .sa-image-card h4,
#main .sa-image-card h3,
#main .sa-image-card h4 {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  margin: 0 !important;
  padding: 54px 18px 18px !important;
  text-align: center !important;
  font-size: 17px !important;
  font-weight: 600 !important;
  line-height: 1.4 !important;
  letter-spacing: 0 !important;
  color: #ffffff !important;
  background: linear-gradient(
    to top,
    rgba(32, 14, 24, 0.92) 0%,
    rgba(32, 14, 24, 0.62) 48%,
    rgba(32, 14, 24, 0) 100%
  );
  text-shadow:
    0 1px 1px rgba(20, 8, 15, 0.55),
    0 2px 10px rgba(20, 8, 15, 0.45);
  pointer-events: none;
}

body.home.page-id-278 #main .sa-image-card h3 a,
body.home.page-id-278 #main .sa-image-card h4 a,
#main .sa-image-card h3 a,
#main .sa-image-card h4 a {
  color: inherit !important;
  text-decoration: none;
  pointer-events: auto;
  transition: color 0.2s ease;
}

#main .sa-image-card h3 a:hover,
#main .sa-image-card h4 a:hover {
  color: #f1c9d3 !important;
}

@media (max-width: 767px) {
  #main .sa-image-card {
    padding-left: 6px;
    padding-right: 6px;
  }

  #main .sa-image-card h3,
  #main .sa-image-card h4 {
    font-size: 15px !important;
    padding: 40px 14px 14px !important;
  }
}