/* ===========================================================================
   PRIME — shared theme layer

   Loaded on every site, after base.css and before the layout overlay.
   Its job is to replace the handful of places where the old stylesheet
   hard-coded a colour with the customer's own palette, and to add the
   general polish every layout benefits from.

   All colour values here come from the CSS variables written inline by
   prime_theme_style_block(), so changing the colour in the admin panel
   restyles the whole site with no CSS regeneration.
   ======================================================================== */

/* --------------------------------------------------------------------- *
   1. Header top bar — was one of seven fixed classes, now any colour
 * --------------------------------------------------------------------- */
.prime-topbar {
  background-color: var(--prime-header-bg);
  color: var(--prime-header-fg);
}
.prime-topbar a,
.prime-topbar p,
.prime-topbar span,
.prime-topbar .tp-header-welcome,
.prime-topbar .tp-header-top-menu-item a {
  color: var(--prime-header-fg);
}
.prime-topbar a:hover {
  color: var(--prime-header-fg);
  opacity: .78;
}
.prime-topbar .tp-header-top-menu-item + .tp-header-top-menu-item {
  margin-left: 22px;
}
.prime-topbar p {
  margin-bottom: 0;
}

/* --------------------------------------------------------------------- *
   2. Images — stop the page jumping while they load
 * --------------------------------------------------------------------- */
img {
  max-width: 100%;
  height: auto;
}

/* A fixed-ratio box that an image fills completely, cropping the overflow
   rather than leaving a gap.

   The width/height attributes we put on every <img> reserve the right space
   while the file downloads, but they also make the browser lay the image out
   at its natural proportions. Inside one of these boxes that has to be
   overridden, and the selector has to be specific enough to win against
   those attributes — hence naming the class twice. */
.prime-media {
  position: relative;
  overflow: hidden;
  background-color: var(--prime-tint-50);
  display: block;
}

/* Most card images are wrapped in a link, so the wrapper has to stretch to
   the box before the image can fill it — otherwise the link shrinks to the
   image's natural height and leaves a gap underneath. */
.prime-media.prime-media > a,
.prime-media.prime-media > picture,
.prime-media.prime-media > figure {
  display: block;
  width: 100%;
  height: 100%;
  margin: 0;
}

/* Deliberately a descendant selector, not a child one: the image may be
   directly inside the box or nested in that link. Naming the class twice
   keeps this ahead of the width/height attributes the templates put on
   every image to reserve space while it loads. */
.prime-media.prime-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}
.prime-ratio-16x9 { aspect-ratio: 16 / 9; }
.prime-ratio-4x3  { aspect-ratio: 4 / 3; }
.prime-ratio-1x1  { aspect-ratio: 1 / 1; }
.prime-ratio-3x2  { aspect-ratio: 3 / 2; }

/* Older browsers without aspect-ratio fall back to a padding box. */
@supports not (aspect-ratio: 1 / 1) {
  .prime-ratio-16x9 { padding-top: 56.25%; }
  .prime-ratio-4x3  { padding-top: 75%; }
  .prime-ratio-1x1  { padding-top: 100%; }
  .prime-ratio-3x2  { padding-top: 66.66%; }
  .prime-media.prime-media > a,
  .prime-media.prime-media img { position: absolute; inset: 0; }
}

/* --------------------------------------------------------------------- *
   2b. Navigation stays on one line

   The base stylesheet spaces menu items with a 27px margin and gives the
   links no horizontal padding. A design that adds padding to the links
   without taking that margin back makes every item wider, and a site with
   six or seven categories wraps onto a second row.

   So: the row never wraps, and any design other than Classic trades the
   margin for its own padding instead of stacking the two.
 * --------------------------------------------------------------------- */
/* Classic is deliberately left exactly as the base stylesheet lays it out —
   it is the design every existing site already uses. */
.prime-theme:not(.prime-layout-classic) .main-menu > nav > ul {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-end;
  margin: 0;
  padding: 0;
}
.prime-theme:not(.prime-layout-classic) .main-menu > nav > ul > li {
  white-space: nowrap;
  list-style: none;
  margin-right: 2px;
}

/* A site with eight or nine categories is tight at the narrowest desktop
   width, so the row tightens rather than spilling over. */
@media (min-width: 1200px) and (max-width: 1399px) {
  .prime-theme:not(.prime-layout-classic) .main-menu > nav > ul > li > a {
    padding-left: 8px;
    padding-right: 8px;
    font-size: 13.5px;
  }
}

/* Submenus are absolutely positioned, so they must not inherit the row. */
.main-menu > nav > ul > li .tp-submenu {
  display: block;
  white-space: normal;
}

/* Logos keep their proportions instead of being stretched to a fixed box. */
.prime-logo img {
  max-height: 52px;
  width: auto;
  height: auto;
  object-fit: contain;
}
.prime-footer-logo img {
  max-height: 180px;
  width: auto;
  height: auto;
  object-fit: contain;
}

/* --------------------------------------------------------------------- *
   2b-i. Hero slide (designs other than Classic)

   Classic keeps its original fixed 410px strip with the image stretched to
   fill it — that is what every existing site looks like and it is left
   alone. The newer designs instead give the slide a known aspect ratio, so
   the image can be cropped to fit without being wildly zoomed in when the
   upload is not the shape of the strip.
 * --------------------------------------------------------------------- */
.prime-hero-slide {
  aspect-ratio: 1920 / 560;
  min-height: 0;
  overflow: hidden;
}
.prime-hero-slide > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}
@media (max-width: 767px) {
  .prime-hero-slide { aspect-ratio: 16 / 10; }
}

/* --------------------------------------------------------------------- *
   2c. Floating multi-banner

   Used by the designs whose hero is 'split'. Every banner the customer has
   uploaded is shown at once, as overlapping cards, instead of one at a time
   in a carousel. Banners are still managed in the same place — this only
   changes how they are presented.
 * --------------------------------------------------------------------- */
.prime-hero--mosaic {
  padding: 26px 0 10px;
}
.prime-mosaic {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(2, 1fr);
  align-items: stretch;
}
.prime-mosaic__cell {
  /* <figure> carries a browser default margin of 1em 40px, which would push
     every cell out of its grid track. */
  margin: 0;
  border-radius: 14px;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  box-shadow: 0 10px 30px rgba(16, 24, 40, .12);
  transition: transform .35s cubic-bezier(.2, .7, .3, 1), box-shadow .35s ease;
}
.prime-mosaic__cell:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 44px rgba(var(--prime-primary-rgb), .26);
  z-index: 2;
}

/* Cells that share a row are always the same width and the same ratio, so
   they line up exactly whatever shape the uploaded images happen to be.
   Only a cell that has a row to itself gets a wider ratio. */

/* Two: side by side, matched. */
.prime-mosaic--2 { grid-template-columns: repeat(2, 1fr); }

/* Three: one across the top, two beneath. */
.prime-mosaic--3 { grid-template-columns: repeat(2, 1fr); }
.prime-mosaic--3 .prime-mosaic__cell:first-child {
  grid-column: 1 / -1;
  aspect-ratio: 21 / 8;
}

/* Four: a tidy 2 x 2. */
.prime-mosaic--4 { grid-template-columns: repeat(2, 1fr); }

@media (min-width: 992px) {
  /* Roomy enough for a taller lead without it towering over the page. */
  .prime-mosaic--2 .prime-mosaic__cell,
  .prime-mosaic--4 .prime-mosaic__cell { aspect-ratio: 16 / 9; }
}

@media (max-width: 767px) {
  .prime-mosaic,
  .prime-mosaic--2,
  .prime-mosaic--3,
  .prime-mosaic--4 {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .prime-mosaic__cell,
  .prime-mosaic--3 .prime-mosaic__cell:first-child {
    grid-column: auto;
    grid-row: auto;
    aspect-ratio: 16 / 9;
  }
}

/* --------------------------------------------------------------------- *
   3. Buttons and links follow the brand colour
 * --------------------------------------------------------------------- */
.tp-btn,
.prime-btn {
  background-color: var(--prime-primary);
  color: var(--prime-on-primary);
  border: 1px solid var(--prime-primary);
  transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}
.tp-btn:hover,
.prime-btn:hover {
  background-color: var(--prime-hover);
  border-color: var(--prime-hover);
  color: var(--prime-on-primary);
}
.prime-btn-outline {
  background-color: transparent;
  color: var(--prime-primary);
  border: 1px solid var(--prime-primary);
}
.prime-btn-outline:hover {
  background-color: var(--prime-primary);
  color: var(--prime-on-primary);
}

/* The newsletter strip used .theme-bg, which is now variable-driven. */
.tp-subscribe-area.theme-bg,
.theme-bg {
  background-color: var(--prime-primary);
}
.tp-subscribe-area.theme-bg,
.tp-subscribe-area.theme-bg .tp-subscribe-title {
  color: var(--prime-on-primary);
}

/* ===================================================================== *
   3b. Newsletter layouts

   The customer picks one of these in Settings > Design & Colour. They are
   deliberately shape-only — every colour still comes from the site palette,
   so a chosen layout still looks like that site rather than a stock block.

   'auto' is styled by the design's own stylesheet instead, which is why
   nothing here targets it.
 * ===================================================================== */

/* ------------------------------------------- shared by every explicit layout */

/* The decorative artwork — the paper plane, the figure, the blobs — belongs
   to the original design. Anywhere the customer has deliberately chosen a
   layout, it is removed, so those layouts read as their own thing rather
   than as the default with different corners. */
.prime-nl:not(.prime-nl--auto) .tp-subscribe-shape {
  display: none;
}

.prime-nl:not(.prime-nl--auto) .tp-subscribe-input {
  position: relative;
}

/* The base stylesheet pins the button to top:0 and stretches it over the
   full 60px field. Once a layout gives the field a different height that
   leaves the button hanging out of its box, so it is centred instead and
   the field reserves room for it. */
.prime-nl:not(.prime-nl--auto) .tp-subscribe-input input {
  width: 100%;
  padding-right: 140px;
}
.prime-nl:not(.prime-nl--auto) .tp-subscribe-input button {
  top: 50%;
  bottom: auto;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  line-height: 1;
}

/* ---------------------------------------------- meeting the footer ---- */
/*
   A newsletter that runs edge to edge already ends with its own generous
   bottom padding — 65px of it, in the block's own colour. The footer then
   adds 95px of its near-white padding on top, and that second band is what
   shows up as blank space between the two.

   So when the newsletter is full width the footer drops its top padding and
   the two meet directly; the newsletter's coloured padding is the separation.
   An inset newsletter is a floating panel with space around it by design, so
   there the footer is left exactly as it was.
*/
/* Establish a block formatting context first.

   Without it, taking the footer's top padding to zero lets the top margin of
   whatever sits inside it collapse straight out through the footer, which
   shows up as a band of page background between the newsletter and the
   footer — the very gap we are trying to remove. flow-root keeps those
   margins inside, so the footer's background starts exactly where the
   newsletter ends. */
body.prime-nl-full .tp-footer-area {
  display: flow-root;
  margin-top: 0 !important;
}
/* Nothing between the two may contribute space of its own. */
body.prime-nl-full .tp-subscribe-area {
  margin-bottom: 0 !important;
}
body.prime-nl-full footer {
  margin-top: 0;
  padding-top: 0;
}

/* Tighter than the default 95px so the footer reads as continuing straight
   on from the newsletter, but not so tight that the headings sit on the
   join. This space is inside the footer and carries its background, so it
   is not the blank band. */
body.prime-nl-full .tp-footer-top {
  padding-top: 48px;
}

/* The slim layouts contribute little height of their own, so they close up
   a bit further still. */
body.prime-nl-full.prime-nl-minimal .tp-footer-top,
body.prime-nl-full.prime-nl-compact .tp-footer-top {
  padding-top: 40px;
}

/* ----------------------------------------------------- wide banner ---- */
/* Edge to edge in the brand colour, sitting straight on top of the footer. */
.prime-nl--banner.tp-subscribe-area {
  background: var(--prime-primary) !important;
  border-radius: 0;
  margin: 0;
  max-width: none;
}
.prime-nl--banner .tp-subscribe-title { color: var(--prime-on-primary); }
.prime-nl--banner .tp-subscribe-input input {
  border-radius: 6px; border: 0; height: 54px; padding-left: 20px;
}
.prime-nl--banner .tp-subscribe-input button {
  border-radius: 6px; background: var(--prime-deep); color: var(--prime-on-deep);
  height: 44px; padding: 0 24px; right: 5px;
}

/* ------------------------------------------------------ floating card - */
.prime-nl--card.tp-subscribe-area {
  background: var(--prime-primary) !important;
  border-radius: 24px;
  max-width: 1180px;
  /* A floating panel needs clear space on every side, above as well as
     below — otherwise it butts into the section above it and stops reading
     as something separate from the page. */
  margin: 45px auto;
  box-shadow: 0 18px 46px rgba(var(--prime-primary-rgb), .28);
  padding-top: 48px !important;
  padding-bottom: 48px !important;
}
.prime-nl--card .tp-subscribe-title { color: var(--prime-on-primary); }
.prime-nl--card .tp-subscribe-input input {
  border-radius: 999px; border: 0; height: 54px; padding-left: 22px;
}
.prime-nl--card .tp-subscribe-input button {
  border-radius: 999px; background: var(--prime-deep); color: var(--prime-on-deep);
  height: 44px; padding: 0 26px; right: 5px;
}

/* ------------------------------------------------------ minimal line -- */
/* No colour block and no artwork — just a rule and a field. */
.prime-nl--minimal.tp-subscribe-area {
  background: transparent !important;
  border-top: 1px solid var(--prime-tint-200);
  border-bottom: 1px solid var(--prime-tint-200);
  margin: 0;
  padding-top: 30px !important;
  padding-bottom: 30px !important;
}
.prime-nl--minimal .tp-subscribe-shape { display: none; }
.prime-nl--minimal .tp-subscribe-title {
  color: inherit;
  font-size: 21px;
  margin: 0;
}
.prime-nl--minimal .tp-subscribe-input input {
  border-radius: 0;
  border: 0;
  border-bottom: 1px solid var(--prime-tint-200);
  background: transparent;
  color: inherit;
  height: 46px;
  padding-left: 2px;
  padding-right: 96px;       /* the button here is text only, so less room */
}
.prime-nl--minimal .tp-subscribe-input button {
  border-radius: 0;
  background: transparent;
  color: var(--prime-primary);
  border-bottom: 1px solid var(--prime-primary);
  height: 38px;
  padding: 0 4px;
  right: 0;
  font-weight: 600;
}

/* ------------------------------------------------------------- split -- */
.prime-nl--split.tp-subscribe-area {
  background: var(--prime-deep) !important;
  border-radius: 0;
  margin: 0;
  position: relative;
  overflow: hidden;
}
.prime-nl--split.tp-subscribe-area::after {
  /* A soft wash on the form half, so the two sides read as separate. */
  content: "";
  position: absolute; right: 0; top: 0; bottom: 0;
  width: 44%;
  background: rgba(var(--prime-primary-rgb), .16);
  pointer-events: none;
}
.prime-nl--split .tp-subscribe-shape { opacity: .16; }
.prime-nl--split .tp-subscribe-title { color: var(--prime-on-deep); font-size: 30px; }
.prime-nl--split .tp-subscribe-input input {
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, .26);
  background: rgba(255, 255, 255, .08);
  color: #fff;
  height: 54px;
  padding-left: 18px;
}
.prime-nl--split .tp-subscribe-input input::placeholder { color: rgba(255, 255, 255, .62); }
.prime-nl--split .tp-subscribe-input button {
  border-radius: 8px; background: var(--prime-primary); color: var(--prime-on-primary);
  height: 44px; padding: 0 24px; right: 5px;
}

/* ----------------------------------------------------------- centred -- */
.prime-nl--centred.tp-subscribe-area {
  background: var(--prime-tint-50) !important;
  border-radius: 0;
  margin: 0;
  text-align: center;
  padding-top: 66px !important;
  padding-bottom: 66px !important;
}
.prime-nl--centred .tp-subscribe-shape { opacity: .3; }
.prime-nl--centred .tp-subscribe-content { text-align: center; }
.prime-nl--centred .tp-subscribe-title {
  color: inherit;
  font-size: 30px;
  margin-bottom: 22px;
}
/* Stack the two Bootstrap columns and centre the form under the heading. */
.prime-nl--centred .row > [class*="col-"] {
  flex: 0 0 100%;
  max-width: 100%;
}
.prime-nl--centred .tp-subscribe-form {
  max-width: 470px;
  margin: 0 auto;
}
.prime-nl--centred .tp-subscribe-input input {
  border-radius: 999px; border: 1px solid var(--prime-tint-200);
  background: #fff; color: inherit; height: 54px; padding-left: 22px;
}
.prime-nl--centred .tp-subscribe-input button {
  border-radius: 999px; background: var(--prime-primary); color: var(--prime-on-primary);
  height: 44px; padding: 0 26px; right: 5px;
}

/* ------------------------------------------------------- compact bar -- */
.prime-nl--compact.tp-subscribe-area {
  background: var(--prime-deep) !important;
  border-radius: 0;
  margin: 0;
  padding-top: 14px !important;
  padding-bottom: 14px !important;
}
.prime-nl--compact .tp-subscribe-content { margin: 0; }
.prime-nl--compact .tp-subscribe-title {
  color: var(--prime-on-deep);
  font-size: 16px;
  font-weight: 600;
  margin: 0;
}
.prime-nl--compact .tp-subscribe-input input {
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, .24);
  background: rgba(255, 255, 255, .08);
  color: #fff;
  height: 42px;
  padding-left: 14px;
  padding-right: 116px;      /* clears the button, which is 106px + the inset */
  font-size: 14px;
}
.prime-nl--compact .tp-subscribe-input input::placeholder { color: rgba(255, 255, 255, .6); }
.prime-nl--compact .tp-subscribe-input button {
  border-radius: 5px;
  background: var(--prime-primary);
  color: var(--prime-on-primary);
  height: 32px;
  padding: 0 16px;
  right: 5px;
  font-size: 13px;
}

@media (max-width: 767px) {
  .prime-nl--card.tp-subscribe-area { margin: 0 10px 20px; border-radius: 18px; }
  .prime-nl--split.tp-subscribe-area::after { display: none; }
  .prime-nl--compact.tp-subscribe-area {
    padding-top: 22px !important;
    padding-bottom: 22px !important;
  }
  .prime-nl--minimal .tp-subscribe-title,
  .prime-nl--compact .tp-subscribe-title { margin-bottom: 12px; }
}

/* --------------------------------------------------------------------- *
   3c. Form submit buttons

   The base stylesheet styles .tp-contact-btn as though the element itself
   were the button — black fill, white text, its own padding. Our forms put
   a real <button> inside it, so that black block showed up as a box sitting
   behind the button. The wrapper is neutralised and the button carries the
   styling instead.
 * --------------------------------------------------------------------- */
.tp-contact-btn {
  background-color: transparent;
  padding: 0;
  display: block;
}
.tp-contact-btn:hover {
  background-color: transparent;
}
.tp-contact-btn button {
  background-color: var(--prime-primary);
  color: var(--prime-on-primary);
  border: 0;
  border-radius: 8px;
  padding: 13px 34px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.tp-contact-btn button:hover {
  background-color: var(--prime-hover);
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(var(--prime-primary-rgb), .3);
}

/* In the narrow sidebar the button fills the width. */
.tp-sidebar-wrapper .tp-contact-btn button,
.code-frame .tp-contact-btn button {
  width: 100%;
  padding: 12px;
}

/* --------------------------------------------------------------------- *
   4. Accessibility
 * --------------------------------------------------------------------- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 2px solid var(--prime-primary);
  outline-offset: 2px;
}

.prime-skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 999;
  padding: 10px 18px;
  background: var(--prime-primary);
  color: var(--prime-on-primary);
  border-radius: 0 0 6px 0;
}
.prime-skip-link:focus {
  left: 0;
}

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

/* --------------------------------------------------------------------- *
   5. Empty-state and layout helpers used by the templates
 * --------------------------------------------------------------------- */
.prime-section-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 28px;
  flex-wrap: wrap;
}
.prime-eyebrow {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--prime-primary);
  margin-bottom: 8px;
}
.prime-card {
  background: #fff;
  border: 1px solid var(--prime-tint-100);
  border-radius: 10px;
  overflow: hidden;
  height: 100%;
  display: flex;
  flex-direction: column;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.prime-card:hover {
  transform: translateY(-4px);
  border-color: var(--prime-primary);
  box-shadow: 0 12px 28px rgba(var(--prime-primary-rgb), .14);
}
.prime-card-body {
  padding: 18px 20px 22px;
  flex: 1 1 auto;
}
.prime-card-title {
  font-size: 17px;
  line-height: 1.4;
  margin: 0;
}
.prime-card-title a {
  color: inherit;
}
.prime-card-title a:hover {
  color: var(--prime-primary);
}

/* --------------------------------------------------------------------- *
   5b. reCAPTCHA

   Google renders the widget in a fixed 302px iframe that cannot be resized,
   so in the narrow sidebar of a product page it hangs out over the edge of
   its box. Scaling it down from its top-left corner keeps it inside, and
   the reserved height is corrected to match so it does not leave a gap.
 * --------------------------------------------------------------------- */
.captcha,
.g-recaptcha {
  max-width: 100%;
}
.g-recaptcha {
  transform-origin: 0 0;
}
.tp-sidebar-wrapper .g-recaptcha,
.code-frame .g-recaptcha {
  transform: scale(0.79);
  height: 60px;          /* 78px widget * 0.79, so the box does not over-reserve */
  margin-bottom: 4px;
}
@media (max-width: 400px) {
  .g-recaptcha {
    transform: scale(0.85);
    height: 66px;
  }
}

/* --------------------------------------------------------------------- *
   5c. Contact page icons

   The three icons beside the contact details were fixed PNG files, which
   meant they looked identical whatever design was chosen. They are now
   icon-font glyphs in a themeable frame, so each design styles them its
   own way — round, square, outlined, filled.
 * --------------------------------------------------------------------- */
.prime-contact-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  flex: 0 0 auto;
  font-size: 19px;
  background: var(--prime-tint-100);
  color: var(--prime-primary);
  border-radius: 50%;
  transition: background .22s ease, color .22s ease, transform .22s ease, border-radius .3s ease;
}
.tp-contact-info-item:hover .prime-contact-icon {
  background: var(--prime-primary);
  color: var(--prime-on-primary);
}

/* --------------------------------------------------------------------- *
   6. Floating WhatsApp button — was fixed at a size that clipped the icon
 * --------------------------------------------------------------------- */
.float {
  position: fixed;
  right: 18px;
  bottom: 18px;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #25D366;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .22);
  z-index: 100;
  transition: transform .2s ease;
}
.float:hover {
  transform: scale(1.06);
}
.float img {
  width: 30px;
  height: 30px;
}

/* --------------------------------------------------------------------- *
   7. Print
 * --------------------------------------------------------------------- */
@media print {
  header, footer, .float, .back-to-top-wrapper, .tp-subscribe-area {
    display: none !important;
  }
  body {
    color: #000;
  }
}