/* ==========================================================================
   My Home Studio, product detail tools
   Shortlist dock, save button, quantity calculator, sticky mobile action bar.

   Kept in its own sheet rather than appended to myhome.css, which is already
   17,700 lines. It loads last, so the two offset overrides at the bottom win
   over the theme without needing !important.

   Palette follows the header and footer work: terracotta #c27266, ink #2c2825,
   muted #9a928c, hairline #ece8e4, tint #f6f0ee.
   ========================================================================== */

/* --mhs-dock-h  height of the shortlist dock, so the sticky bar can sit on top
   --mhs-bottom  both of them together, so the lead popup and the scroll to top
                 button lift clear of the whole stack. Both are written by JS. */
:root { --mhs-bottom: 0px; --mhs-dock-h: 0px; }

/* --------------------------------------------------------------------------
   Save button
   -------------------------------------------------------------------------- */
.mhs-save {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: #ffffff;
  border: 1px solid #e2dcd7;
  border-radius: 8px;
  color: #2c2825;
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  padding: 15px 18px;
  cursor: pointer;
  transition: border-color .18s ease, color .18s ease, background .18s ease;
}
.mhs-save:hover { border-color: #c27266; color: #c27266; }
.mhs-save svg { flex: none; transition: fill .18s ease; fill: none; }
.mhs-save.is-saved { border-color: #c27266; color: #c27266; background: #fdf7f5; }
.mhs-save.is-saved svg { fill: currentColor; }

/* --------------------------------------------------------------------------
   Save on a product card.
   The whole card is wrapped in an <a>, so the button cannot live inside it:
   .pc-card-wrap is the positioning context and the button is a sibling of the
   link, floated over the top right of the image. The discount badge already
   owns the top left.
   -------------------------------------------------------------------------- */
/* height:100% matters as much as the positioning here. The theme already builds
   equal height cards through .product-part > .pc-card-link{height:100%} >
   .pc-card{height:100%}, and inserting this wrapper into that chain breaks it
   unless the wrapper passes the height through. */
.pc-card-wrap { position: relative; height: 100%; }

.mhs-save--card {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 3;
  width: 36px;
  height: 36px;
  padding: 0;
  gap: 0;
  border-radius: 50%;
  border: 1px solid rgba(44, 40, 37, .10);
  background: rgba(255, 255, 255, .94);
  color: #6b635d;
  box-shadow: 0 3px 10px -4px rgba(38, 34, 31, .35);
  transition: background .16s ease, color .16s ease, border-color .16s ease;
}
.mhs-save--card svg { width: 16px; height: 16px; }

.mhs-save--card:hover { background: #ffffff; color: #c27266; border-color: rgba(194, 114, 102, .5); }
.mhs-save--card.is-saved { background: #c27266; color: #ffffff; border-color: #c27266; }
.mhs-save--card.is-saved:hover { background: #a95c51; color: #ffffff; }

/* the search page uses the older .collection-one__single card, which is already
   position:relative, so the same button drops straight onto it */
.collection-one__single { position: relative; }

/* Three stacked full width buttons is too heavy, so Save shares a row with
   WhatsApp. .pd-btn is width:100% in the theme, hence the explicit override. */
.mhs-actions-row { display: flex; gap: 12px; align-items: stretch; }
.mhs-actions-row .pd-btn { width: auto; flex: 1 1 auto; min-width: 0; }
.mhs-actions-row .mhs-save { flex: none; }

/* --------------------------------------------------------------------------
   Calculator
   -------------------------------------------------------------------------- */
.mhs-calc {
  border: 1px solid #ece8e4;
  border-radius: 12px;
  padding: 18px;
  margin: 26px 0 0;
  background: #fdfcfb;
}
.mhs-calc__title {
  margin: 0 0 3px;
  font-size: 15.5px;
  font-weight: 600;
  color: #2c2825;
}
.mhs-calc__sub {
  margin: 0 0 15px;
  font-size: 12.5px;
  color: #9a928c;
  line-height: 1.5;
}

.mhs-calc__fields { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; }
.mhs-calc__field { flex: 1 1 108px; min-width: 0; }
.mhs-calc__field label {
  display: block;
  margin: 0 0 5px;
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #9a928c;
}
.mhs-calc__field input,
.mhs-calc__field select {
  /* box-sizing is not global in this theme, so without it the select renders
     2px taller than the inputs and the row stops lining up */
  box-sizing: border-box;
  display: block;
  width: 100%;
  height: 42px;
  padding: 0 11px;
  margin: 0;
  border: 1px solid #e2dcd7;
  border-radius: 8px;
  background: #ffffff;
  font-family: inherit;
  font-size: 14.5px;
  line-height: 40px;
  color: #2c2825;
  outline: none;
  transition: border-color .18s ease;
}
/* native select chrome varies by platform, so it is replaced with one caret */
.mhs-calc__field select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  padding-right: 30px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='7' viewBox='0 0 11 7' fill='none'%3E%3Cpath d='M1 1l4.5 4.5L10 1' stroke='%239a928c' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 11px center;
}
.mhs-calc__field input:focus,
.mhs-calc__field select:focus { border-color: #c27266; }
/* the number spinners crowd an already narrow field on mobile */
.mhs-calc__field input[type=number]::-webkit-outer-spin-button,
.mhs-calc__field input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.mhs-calc__field input[type=number] { -moz-appearance: textfield; }

.mhs-calc__waste {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 13px 0 0;
  font-size: 13px;
  color: #6b635d;
  cursor: pointer;
}
.mhs-calc__waste input { width: 15px; height: 15px; accent-color: #c27266; cursor: pointer; }

.mhs-calc__out { margin: 15px 0 0; border-top: 1px solid #f0ecE8; padding-top: 13px; }
.mhs-calc__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  padding: 7px 0;
  font-size: 13.5px;
  color: #6b635d;
}
.mhs-calc__row b { font-weight: 600; color: #2c2825; text-align: right; }
.mhs-calc__row em { font-style: normal; font-weight: 400; color: #9a928c; font-size: 12px; }
.mhs-calc__row.is-total {
  border-top: 1px solid #f0ecE8;
  margin-top: 6px;
  padding-top: 12px;
}
.mhs-calc__row.is-total b { font-size: 18px; color: #c27266; }
.mhs-calc__hint { margin: 8px 0 0; font-size: 12.5px; color: #9a928c; line-height: 1.55; }

.mhs-calc__wa {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 14px 0 0;
  background: #2c2825;
  color: #ffffff;
  border-radius: 8px;
  padding: 12px 17px;
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1;
  text-decoration: none;
  transition: background .18s ease;
}
.mhs-calc__wa:hover { background: #c27266; color: #ffffff; }

.mhs-calc__inbox {
  margin: 14px 0 0;
  padding: 12px 14px;
  background: #f6f0ee;
  border-radius: 8px;
  font-size: 12.5px;
  color: #6b635d;
  line-height: 1.6;
}
.mhs-calc__inbox b { color: #2c2825; font-weight: 600; }

/* --------------------------------------------------------------------------
   Shortlist dock
   Docked to the bottom edge, only present once something is saved.
   -------------------------------------------------------------------------- */
.mhs-dock {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9995;
  background: #ffffff;
  border-top: 1px solid #ece8e4;
  box-shadow: 0 -12px 34px -20px rgba(38, 34, 31, .5);
  transform: translateY(101%);
  transition: transform .22s ease;
}
.mhs-dock.is-on { transform: none; }

.mhs-dock__inner {
  max-width: 1328px;
  margin: 0 auto;
  padding: 11px 15px;
  display: flex;
  align-items: center;
  gap: 16px;
}

.mhs-dock__thumbs { display: flex; gap: 7px; flex: 0 1 auto; min-width: 0; }
.mhs-dock__thumb {
  position: relative;
  width: 46px;
  height: 46px;
  flex: none;
  border: 1px solid #ece8e4;
  border-radius: 7px;
  overflow: hidden;
  background: #f7f5f3;
}
.mhs-dock__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mhs-dock__x {
  position: absolute;
  top: -1px;
  right: -1px;
  width: 17px;
  height: 17px;
  border: 0;
  border-radius: 0 6px 0 6px;
  background: rgba(44, 40, 37, .82);
  color: #ffffff;
  font-size: 13px;
  line-height: 15px;
  padding: 0;
  cursor: pointer;
}
.mhs-dock__x:hover { background: #c27266; }

.mhs-dock__meta { flex: 1 1 auto; min-width: 0; }
.mhs-dock__count { display: block; font-size: 13.5px; font-weight: 600; color: #2c2825; }
.mhs-dock__clear {
  border: 0;
  background: none;
  padding: 2px 0 0;
  font-size: 12px;
  color: #9a928c;
  text-decoration: underline;
  cursor: pointer;
}
.mhs-dock__clear:hover { color: #c27266; }

.mhs-dock__actions { display: flex; gap: 9px; flex: none; }
.mhs-dock__btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-radius: 8px;
  padding: 12px 17px;
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  transition: background .18s ease, border-color .18s ease, color .18s ease;
}
.mhs-dock__btn--compare {
  border: 1px solid #e2dcd7;
  color: #2c2825;
  background: #ffffff;
}
.mhs-dock__btn--compare:hover { border-color: #c27266; color: #c27266; }
.mhs-dock__btn--compare.is-off { opacity: .4; pointer-events: none; }
.mhs-dock__btn--wa { background: #c27266; color: #ffffff; }
.mhs-dock__btn--wa:hover { background: #a95c51; color: #ffffff; }

/* --------------------------------------------------------------------------
   Sticky action bar, phones only
   -------------------------------------------------------------------------- */
.mhs-stickybar { display: none; }

@media (max-width: 991px) {
  .mhs-stickybar {
    display: block;
    position: fixed;
    left: 0;
    right: 0;
    bottom: var(--mhs-dock-h, 0px);
    z-index: 9994;
    background: #ffffff;
    border-top: 1px solid #ece8e4;
    box-shadow: 0 -12px 34px -20px rgba(38, 34, 31, .5);
    transform: translateY(101%);
    transition: transform .22s ease;
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  .mhs-stickybar.is-on { transform: none; }

  .mhs-stickybar__inner {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 15px;
  }
  .mhs-stickybar__price { flex: 1 1 auto; min-width: 0; line-height: 1.25; }
  .mhs-stickybar__price strong { display: block; font-size: 16px; font-weight: 600; color: #2c2825; }
  .mhs-stickybar__price span {
    display: block;
    font-size: 11.5px;
    color: #9a928c;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .mhs-stickybar .mhs-save { flex: none; padding: 13px; border-radius: 8px; }
  .mhs-stickybar .mhs-save__label { display: none; }
  .mhs-stickybar__wa {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #c27266;
    color: #ffffff;
    border-radius: 8px;
    padding: 13px 16px;
    font-size: 14px;
    font-weight: 500;
    line-height: 1;
    text-decoration: none;
  }
  .mhs-stickybar__wa:hover { background: #a95c51; color: #ffffff; }

  /* the dock loses the thumbnails and the clear link on a narrow screen so the
     count and the two actions still fit on one line */
  .mhs-dock__inner { gap: 11px; padding: 9px 15px; }
  .mhs-dock__thumbs { display: none; }
  .mhs-dock__btn { padding: 11px 13px; font-size: 13px; }
  .mhs-dock__btn--wa span { display: none; }
}

@media (max-width: 420px) {
  .mhs-stickybar__wa span { display: none; }
  .mhs-calc__field { flex: 1 1 100%; }
}

/* --------------------------------------------------------------------------
   Lift the two pre-existing fixed controls above whatever we have docked.
   This sheet loads after myhome.css, so these win on source order alone.
   -------------------------------------------------------------------------- */
.mhs-lead { bottom: calc(24px + var(--mhs-bottom, 0px)); transition: bottom .22s ease; }
.scroll-to-top { bottom: calc(40px + var(--mhs-bottom, 0px)); transition: bottom .22s ease; }

/* On phones the three floating controls share one baseline. These repeat the
   14px from myhome.css because this sheet loads later and would otherwise put
   the lead pill and the scroll button back at 24 and 40. */
@media (max-width: 991px) {
  .mhs-lead      { bottom: calc(14px + var(--mhs-bottom, 0px)); }
  .scroll-to-top { bottom: calc(14px + var(--mhs-bottom, 0px)); }
}

/* ==========================================================================
   Compare page, /compare?p=slug-a,slug-b
   ========================================================================== */
.mhs-cmp__head { margin: 0 0 26px; }
.mhs-cmp__title { margin: 0 0 8px; font-size: 30px; font-weight: 600; color: #2c2825; }
.mhs-cmp__sub { margin: 0; max-width: 62ch; font-size: 14px; color: #6b635d; line-height: 1.65; }

.mhs-cmp__empty {
  border: 1px solid #ece8e4;
  border-radius: 12px;
  padding: 34px;
  background: #fdfcfb;
  max-width: 560px;
}
.mhs-cmp__empty p { margin: 0 0 10px; font-size: 14.5px; color: #6b635d; line-height: 1.65; }
.mhs-cmp__empty p:last-child { margin-bottom: 0; }
.mhs-cmp__empty strong { color: #2c2825; }
.mhs-cmp__cta {
  display: inline-block;
  margin-top: 6px;
  background: #c27266;
  color: #ffffff;
  border-radius: 8px;
  padding: 12px 20px;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
}
.mhs-cmp__cta:hover { background: #a95c51; color: #ffffff; }

/* the table is the one thing on the site allowed to scroll sideways, and it
   does it inside this box so the page body never does */
.mhs-cmp__scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.mhs-cmp {
  width: 100%;
  border-collapse: collapse;
  /* fixed layout so every product column is exactly the same width: with auto
     layout the columns size to their content and the header images, which are
     aspect-ratio boxes, end up different heights and stop lining up */
  table-layout: fixed;
  /* a two product compare should not stretch each column half a screen wide */
  min-width: calc(150px + var(--cmp-cols, 2) * 190px);
}
.mhs-cmp td, .mhs-cmp thead th { word-break: break-word; }
.mhs-cmp th,
.mhs-cmp td {
  border-bottom: 1px solid #f0ecE8;
  padding: 13px 14px;
  vertical-align: top;
  text-align: left;
  font-size: 13.5px;
  color: #2c2825;
  font-weight: 400;
}
.mhs-cmp__rowhead {
  width: 150px;
  min-width: 150px;
  color: #9a928c;
  font-size: 12.5px;
  font-weight: 500;
  background: #fdfcfb;
  position: sticky;
  left: 0;
  z-index: 1;
}
.mhs-cmp thead th { border-bottom: 1px solid #ece8e4; padding-bottom: 18px; }

.mhs-cmp__card { display: block; text-decoration: none; }
.mhs-cmp__img {
  display: block;
  aspect-ratio: 4 / 3;
  border-radius: 9px;
  overflow: hidden;
  background: #f7f5f3;
  margin-bottom: 10px;
}
.mhs-cmp__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mhs-cmp__name { display: block; font-size: 14.5px; font-weight: 600; color: #2c2825; line-height: 1.35; }
.mhs-cmp__card:hover .mhs-cmp__name { color: #c27266; }
.mhs-cmp__cat { display: block; margin-top: 3px; font-size: 12px; color: #c27266; }

.mhs-cmp__price-row td b { font-size: 17px; font-weight: 600; color: #2c2825; }
.mhs-cmp__act-row td, .mhs-cmp__act-row th { border-bottom: 0; padding-top: 18px; }
.mhs-cmp__view {
  display: inline-block;
  border: 1px solid #e2dcd7;
  border-radius: 8px;
  padding: 10px 15px;
  font-size: 13px;
  color: #2c2825;
  text-decoration: none;
}
.mhs-cmp__view:hover { border-color: #c27266; color: #c27266; }

.mhs-cmp__foot { margin: 30px 0 0; }
.mhs-cmp__wa {
  display: inline-flex;
  align-items: center;
  background: #c27266;
  color: #ffffff;
  border-radius: 8px;
  padding: 14px 22px;
  font-size: 14.5px;
  font-weight: 500;
  text-decoration: none;
}
.mhs-cmp__wa:hover { background: #a95c51; color: #ffffff; }
.mhs-cmp__note { margin: 14px 0 0; font-size: 13.5px; color: #9a928c; line-height: 1.6; max-width: 60ch; }
.mhs-cmp__note a { color: #c27266; }

@media (max-width: 767px) {
  .mhs-cmp__title { font-size: 24px; }
  .mhs-cmp__rowhead { width: 116px; min-width: 116px; }
  .mhs-cmp { min-width: calc(116px + var(--cmp-cols, 2) * 168px); }
  .mhs-cmp th, .mhs-cmp td { padding: 11px 11px; font-size: 13px; }
}

/* ==========================================================================
   Product information tabs (2026-08-22)

   Replaces the five stacked boxes under the spec table. The tab set is built
   per product in product_details.php, so the count and the labels differ by
   category; nothing here assumes a fixed number of tabs.

   Colour discipline: terracotta is the accent throughout. Green and ochre, the
   other two tiles in the logo, appear in exactly one place, separating what is
   in the box from what has to be bought alongside it. There the colour is
   information, not decoration.
   ========================================================================== */
/* The section used to carry an inline padding-top:0, so the tabs sat straight
   under the action buttons and straight on top of "You may also like". The
   inline is gone from the markup and the room is set here instead. */
.additional_details.normal-section-padding { padding: 60px 0 72px; }

/* Same card recipe as .mhs-calc above, so the two boxes on this page are
   plainly the same component: #fdfcfb ground, #ece8e4 hairline, 12px radius,
   18px padding, and the same 2c2825 / 6b635d / 9a928c type ramp. */
.mhs-ptabs {
  background: #fdfcfb;
  border: 1px solid #ece8e4;
  border-radius: 12px;
  padding: 18px;

  --pt-terra: #c27266;
  --pt-green: #58997f;
  --pt-ochre: #b8862c;
  --pt-ink:   #2c2825;
  --pt-body:  #575049;
  --pt-muted: #9a928c;
  --pt-hair:  #ece8e4;
  color: var(--pt-body);
  font-size: 14.5px;
  line-height: 1.62;
}

.mhs-ptabs__nav { position: relative; border-bottom: 1px solid var(--pt-hair); }
.mhs-ptabs__strip button { margin-bottom: -1px; }
.mhs-ptabs__strip {
  display: flex;
  gap: 0;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  scroll-snap-type: x proximity;
}
.mhs-ptabs__strip::-webkit-scrollbar { display: none; }

/* the fade only appears when something is genuinely off screen; JS toggles it */
.mhs-ptabs__nav::after {
  content: "";
  position: absolute;
  right: 0; top: 0; bottom: 1px;
  width: 38px;
  pointer-events: none;
  opacity: 0;
  transition: opacity .2s ease;
  background: linear-gradient(to right, rgba(253, 252, 251, 0), #fdfcfb 72%);
}
.mhs-ptabs__nav.is-scrollable::after { opacity: 1; }

/* label only. Five icons against five labels was the noisiest thing in the
   block and every one of them was decorative: the words already say it. */
.mhs-ptabs__strip button {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  flex: none;
  scroll-snap-align: start;
  font-family: inherit;
  font-size: 14px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: .005em;
  color: var(--pt-muted);
  background: none;
  border: 0;
  border-bottom: 1px solid transparent;
  padding: 0 2px 14px;
  margin: 0 26px 0 0;
  cursor: pointer;
  white-space: nowrap;
  transition: color .16s ease, border-color .16s ease;
}
.mhs-ptabs__strip button:last-child { margin-right: 0; }
/* 14px on a 1.6 stroke, sitting well back until the tab is active: present
   enough to scan by, quiet enough not to compete with the label */
.mhs-ptabs__strip button svg {
  width: 14px;
  height: 14px;
  flex: none;
  opacity: .42;
  transition: opacity .16s ease;
}
.mhs-ptabs__strip button:hover svg { opacity: .75; }
.mhs-ptabs__strip button[aria-selected="true"] svg { opacity: 1; color: var(--pt-terra); }
.mhs-ptabs__strip button:hover { color: var(--pt-ink); }
.mhs-ptabs__strip button:focus-visible { outline: 2px solid var(--pt-terra); outline-offset: 3px; border-radius: 3px; }
.mhs-ptabs__strip button[aria-selected="true"] {
  color: var(--pt-ink);
  font-weight: 500;
  border-bottom-color: var(--pt-terra);
}

.mhs-ptabs__panel { padding: 18px 0 2px; animation: mhsPtFade .22s ease both; }
.mhs-ptabs__panel[hidden] { display: none; }
@keyframes mhsPtFade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* 14.5px rather than the calculator's 13.5: those are short label/value rows,
   this is a paragraph and needs the extra size to read. Colour and weight
   follow the calculator exactly. */
.mhs-ptabs__panel > p {
  margin: 0;
  max-width: 68ch;
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--pt-body);
}

/* real lists, replacing the • characters that used to sit inside one <p> */
.mhs-ptabs__panel ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 11px; max-width: 76ch; font-size: 13.5px; color: var(--pt-body); }
.mhs-ptabs__panel li { position: relative; padding-left: 20px; }
/* one small dot. The square-inside-a-square marker was doing decoration, not work. */
.mhs-ptabs__panel li::before {
  content: "";
  position: absolute; left: 2px; top: .68em;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--pt-terra);
  opacity: .55;
}

/* ---- in the box / order separately ---- */
.mhs-kit { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.mhs-kit[data-one] { grid-template-columns: minmax(0, 480px); }
/* no tinted fills: a hairline and a coloured label carry the distinction just
   as clearly, and two filled boxes were the heaviest thing on the page */
/* .mhs-calc__inbox is the reference: #f6f0ee strip, 8px radius, 12/14 padding */
.mhs-kit__col {
  background: #f6f0ee;
  border: 0;
  border-radius: 8px;
  padding: 13px 15px 15px;
}
.mhs-kit__col h3 {
  margin: 0 0 5px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 7px;
}
.mhs-kit__col h3 svg { width: 14px; height: 14px; flex: none; }
.mhs-kit__col p { margin: 0; font-size: 13px; line-height: 1.6; color: var(--pt-ink); }
.mhs-kit__col small { display: block; margin-top: 7px; font-size: 12px; color: var(--pt-muted); line-height: 1.55; }
.mhs-kit--in h3  { color: var(--pt-green); }
.mhs-kit--out h3 { color: var(--pt-ochre); }

@media (max-width: 767px) {
  .additional_details.normal-section-padding { padding: 38px 0 44px; }
  .mhs-ptabs { padding: 16px 14px 18px; }
  .mhs-kit { grid-template-columns: 1fr; }
  .mhs-ptabs__panel { padding-top: 22px; }
  .mhs-ptabs__panel > p { font-size: 15px; }
  .mhs-ptabs__strip button { margin-right: 20px; }
}

@media (prefers-reduced-motion: reduce) {
  .mhs-ptabs__panel { animation: none; }
}

/* ==========================================================================
   Sticky product gallery (2026-08-22)

   The right column runs long: price, calculator, twenty-odd spec rows and the
   actions. The left column is the gallery and stops less than half way down,
   leaving the customer scrolling specs with nothing to look at. Pinning the
   gallery keeps the product in view for the whole read.

   Three things have to be true for this to work, and all three are:
     - no ancestor may scroll-clip. .page-wrapper uses overflow-x: clip, which
       unlike hidden does not create a scroll container, so sticky survives.
     - the column must not be stretched by the flex row, or it is already as
       tall as its parent and can never move. Hence align-self on the item.
     - the offset has to clear .stricky-header, the nav that becomes fixed on
       scroll, otherwise the top of the gallery hides behind it.
   ========================================================================== */
@media (min-width: 992px) {
  /* the row is display:flex, so items stretch by default */
  .pd-split { align-items: flex-start; }

  /* .main_product_details_padding_top puts 70px of padding on BOTH columns.
     On a sticky element that padding lives inside the sticky box, so the image
     came to rest 70px below the offset: pinned at 96, but visually starting at
     166. Moving the same 70px up to the row keeps the at-rest layout identical
     and lets the sticky box begin at the image. */
  .pd-split { padding-top: 70px; }
  .pd-split > .main_product_details_padding_top { padding-top: 0; }

  .pd-media {
    position: -webkit-sticky;
    position: sticky;
    top: 88px;            /* ~58px sticky nav plus 30px of air */
    align-self: flex-start;
  }
}

/* On a short laptop the gallery can be taller than the space above the fold.
   Letting it scroll internally keeps the bottom reachable instead of clipped. */
@media (min-width: 992px) and (max-height: 860px) {
  .pd-media {
    max-height: calc(100vh - 104px);
    overflow-y: auto;
    scrollbar-width: thin;
  }
}


/* ==========================================================================
   Collection page filters, sidebar rail (2026-08-23)

   A 3 column rail of facets beside a 3 up grid. The rail is sticky so the
   filters stay reachable through a 226 product page, using the same three
   preconditions as the product gallery: no scroll-clipping ancestor, the flex
   row must not stretch the column, and the offset clears the sticky nav.
   ========================================================================== */
.mhs-shop { align-items: flex-start; }

.mhs-facets { margin-bottom: 26px; }
.mhs-facets__inner {
  background: #fdfcfb;
  border: 1px solid #ece8e4;
  border-radius: 12px;
  padding: 18px;
}
.mhs-facets__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding-bottom: 12px;
  border-bottom: 1px solid #ece8e4;
}
.mhs-facets__title {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  color: #2c2825;
  text-transform: none;
  letter-spacing: 0;
  line-height: 1.3;
}
.mhs-facets__clear { font-size: 12.5px; color: #9a928c; text-decoration: underline; }
.mhs-facets__clear:hover { color: #c27266; }
.mhs-facets__count { margin: 11px 0 4px; font-size: 12.5px; color: #9a928c; }
.mhs-facets__count strong { color: #2c2825; font-weight: 600; }

.mhs-facet { border-top: 1px solid #f0ece8; padding: 14px 0 4px; }
.mhs-facet:first-of-type { border-top: 0; }
.mhs-facet__label {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin: 0 0 9px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: #9a928c;
  line-height: 1.4;
}
.mhs-facet.is-active .mhs-facet__label { color: #c27266; }
.mhs-facet__reset {
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: #9a928c;
  text-decoration: underline;
}
.mhs-facet__reset:hover { color: #c27266; }

.mhs-facet__list { list-style: none; margin: 0; padding: 0; }
.mhs-facet__list li { list-style: none; margin: 0; }
.mhs-facet__list li::before { content: none; }
.mhs-facet__opt {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 6px 2px;
  font-size: 13.5px;
  line-height: 1.4;
  color: #575049;
  text-decoration: none;
  border-radius: 6px;
  transition: color .14s ease;
}
.mhs-facet__opt:hover { color: #2c2825; }
.mhs-facet__opt:hover .mhs-facet__box { border-color: #c8bdb6; }
.mhs-facet__opt:focus-visible { outline: 2px solid #c27266; outline-offset: 1px; }

/* A drawn checkbox rather than an <input>: every option is a link, so it works
   with JavaScript off and the result is a shareable URL. */
.mhs-facet__box {
  flex: none;
  width: 15px;
  height: 15px;
  border: 1.5px solid #ddd4ce;
  border-radius: 4px;
  background: #ffffff;
  position: relative;
  transition: background .14s ease, border-color .14s ease;
}
.mhs-facet__opt.is-on .mhs-facet__box { background: #c27266; border-color: #c27266; }
.mhs-facet__opt.is-on .mhs-facet__box::after {
  content: "";
  position: absolute;
  left: 4px;
  top: 1px;
  width: 4px;
  height: 8px;
  border: solid #ffffff;
  border-width: 0 2px 2px 0;
  transform: rotate(43deg);
}
.mhs-facet__opt.is-on { color: #2c2825; font-weight: 500; }
.mhs-facet__name { flex: 1 1 auto; min-width: 0; }
.mhs-facet__n { flex: none; font-size: 11.5px; color: #b0a8a2; font-variant-numeric: tabular-nums; }

/* chips above the grid mirror what is ticked in the rail */
.mhs-facets__chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 15px 18px; }
.mhs-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: #f6f0ee;
  color: #a9564a;
  border-radius: 999px;
  padding: 5px 12px;
  font-size: 12.5px;
  text-decoration: none;
  transition: background .16s ease;
}
.mhs-chip:hover { background: #efe2de; color: #8f463c; }
.mhs-chip span[aria-hidden] { font-size: 14px; line-height: 1; opacity: .7; }

.mhs-filters__empty {
  margin: 0 15px 30px;
  padding: 28px 24px;
  border: 1px solid #ece8e4;
  border-radius: 12px;
  background: #fdfcfb;
  text-align: center;
}
.mhs-filters__empty p { margin: 0 0 8px; font-size: 14.5px; color: #6b635d; }
.mhs-filters__empty p:last-child { margin-bottom: 0; }
.mhs-filters__empty strong { color: #2c2825; }
.mhs-filters__empty a { color: #c27266; }

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

/* ---- sticky rail, desktop only ---- */
@media (min-width: 992px) {
  .mhs-facets {
    position: -webkit-sticky;
    position: sticky;
    top: 88px;
    align-self: flex-start;
  }
  /* a long facet list must never push its own bottom off screen */
  .mhs-facets__inner {
    max-height: calc(100vh - 112px);
    overflow-y: auto;
    scrollbar-width: thin;
  }
}

/* ---- phones and tablets: options wrap inline so the rail stays short ---- */
@media (max-width: 991px) {
  .mhs-facets__inner { padding: 15px 16px; }
  .mhs-facet__list { display: flex; flex-wrap: wrap; gap: 4px 16px; }
  .mhs-facet__list li { flex: 0 0 auto; }
  .mhs-facet__opt { padding: 5px 0; }
  .mhs-facets__chips { margin-left: 0; margin-right: 0; }
  .mhs-filters__empty { margin-left: 0; margin-right: 0; }
}

/* the grid dims while a filter is being fetched, so a slow connection still
   feels like something happened */
.mhs-shop.is-loading { opacity: .55; pointer-events: none; transition: opacity .12s ease; }

/* --------------------------------------------------------------------------
   Rail fallback: shown on the 12 pages that have nothing to filter on, so the
   grid never runs full width and every collection page keeps one shape.
   -------------------------------------------------------------------------- */
.mhs-rail__group { padding-bottom: 4px; }
.mhs-rail__label {
  margin: 0 0 10px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: #9a928c;
  line-height: 1.4;
}
.mhs-rail__list { list-style: none; margin: 0 0 12px; padding: 0; }
.mhs-rail__list li { list-style: none; margin: 0; }
.mhs-rail__list li::before { content: none; }
.mhs-rail__list a {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 7px 2px;
  font-size: 13.5px;
  line-height: 1.4;
  color: #575049;
  text-decoration: none;
  border-bottom: 1px solid #f4f0ed;
  transition: color .14s ease;
}
.mhs-rail__list li:last-child a { border-bottom: 0; }
.mhs-rail__list a:hover { color: #c27266; }
.mhs-rail__n { flex: none; font-size: 11.5px; color: #b0a8a2; font-variant-numeric: tabular-nums; }
.mhs-rail__all { display: inline-block; font-size: 12.5px; color: #c27266; text-decoration: none; }
.mhs-rail__all:hover { text-decoration: underline; }

/* the enquiry block. Tinted so it reads as an offer rather than another control */
.mhs-rail__help {
  margin-top: 16px;
  padding: 16px;
  background: #f6f0ee;
  border-radius: 10px;
}
.mhs-rail__group + .mhs-rail__help { margin-top: 18px; }
.mhs-rail__title {
  margin: 0 0 7px;
  font-size: 14.5px;
  font-weight: 600;
  color: #2c2825;
  line-height: 1.35;
  text-transform: none;
  letter-spacing: 0;
}
.mhs-rail__copy { margin: 0 0 14px; font-size: 12.5px; line-height: 1.62; color: #6b635d; }
.mhs-rail__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 8px;
  padding: 11px 14px;
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1;
  text-decoration: none;
  transition: background .18s ease, border-color .18s ease, color .18s ease;
}
.mhs-rail__btn--wa { background: #c27266; color: #ffffff; margin-bottom: 8px; }
.mhs-rail__btn--wa:hover { background: #a95c51; color: #ffffff; }
.mhs-rail__btn--tel { background: #ffffff; border: 1px solid #e6dcd7; color: #2c2825; }
.mhs-rail__btn--tel:hover { border-color: #c27266; color: #c27266; }
.mhs-rail__status {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 12px 0 0;
  font-size: 12px;
  color: #8c847e;
}
.mhs-rail__dot { width: 6px; height: 6px; border-radius: 50%; background: #b0a8a1; flex: none; }
.mhs-rail__status.is-open { color: #4e8a66; }
.mhs-rail__status.is-open .mhs-rail__dot { background: #3f9c62; }
.mhs-rail__status.is-shut .mhs-rail__dot { background: #c2846b; }
.mhs-rail__addr { margin: 6px 0 0; font-size: 11.5px; line-height: 1.55; color: #a49b95; }

@media (max-width: 991px) {
  /* the sibling list goes inline like the facets do, so the panel stays short */
  .mhs-rail__list { display: flex; flex-wrap: wrap; gap: 0 18px; }
  .mhs-rail__list li { flex: 0 0 auto; }
  .mhs-rail__list a { border-bottom: 0; padding: 5px 0; }
}

/* --------------------------------------------------------------------------
   Phones and tablets: the filter rail becomes a drawer (2026-08-23)

   Inline, the rail pushed the first product most of a screen down and was
   unreachable once you had scrolled. As a drawer it is one tap away at any
   scroll depth. Only the facet rail becomes a drawer; the fallback panel on
   filterless pages stays inline, because it has nothing to open.

   Open state lives on <body>, not on the aside, so it survives the ajax swap
   that replaces the whole .mhs-shop block on every filter change.
   -------------------------------------------------------------------------- */
.mhs-filterfab { display: none; }
.mhs-drawer__scrim { display: none; }
.mhs-drawer__x { display: none; }
.mhs-drawer__apply { display: none; }

@media (max-width: 991px) {
  /* ---- the button ---- */
  .mhs-filterfab {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    position: fixed;
    left: 50%;
    /* --mhs-bottom is whatever the shortlist dock is occupying */
    bottom: calc(14px + var(--mhs-bottom, 0px));
    transform: translateX(-50%);
    z-index: 9992;
    height: 44px;
    border: 0;
    border-radius: 999px;
    padding: 0 20px;
    background: #2c2825;
    color: #ffffff;
    font-family: inherit;
    font-size: 14px;
    font-weight: 500;
    line-height: 1;
    cursor: pointer;
    /* same lift as the other two floating controls */
    box-shadow: 0 10px 24px -8px rgba(38, 34, 31, .5), 0 2px 6px rgba(38, 34, 31, .14);
    transition: bottom .22s ease, background .18s ease;
  }
  .mhs-filterfab:hover { background: #c27266; }
  .mhs-filterfab:focus-visible { outline: 2px solid #c27266; outline-offset: 3px; }
  .mhs-filterfab__n {
    display: inline-grid;
    place-items: center;
    min-width: 19px;
    height: 19px;
    padding: 0 5px;
    border-radius: 999px;
    background: #c27266;
    font-size: 11.5px;
    font-weight: 600;
  }
  body.mhs-drawer-open .mhs-filterfab,
  body.mhs-drawer-open .mhs-lead,
  body.mhs-drawer-open .scroll-to-top { opacity: 0; pointer-events: none; }

  /* ---- the drawer ---- */
  .mhs-facets--drawer {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: min(86vw, 340px);
    max-width: 340px;
    z-index: 9997;
    margin: 0;
    padding: 0;
    background: #ffffff;
    transform: translateX(-100%);
    transition: transform .26s cubic-bezier(.4, 0, .2, 1);
    box-shadow: 8px 0 32px -12px rgba(38, 34, 31, .5);
    display: flex;
    flex-direction: column;
  }
  body.mhs-drawer-open .mhs-facets--drawer { transform: none; }

  .mhs-facets--drawer .mhs-facets__inner {
    border: 0;
    border-radius: 0;
    background: #ffffff;
    padding: 16px 18px 0;
    flex: 1 1 auto;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  /* the drawer is its own column, so options go back to one per line */
  .mhs-facets--drawer .mhs-facet__list { display: block; }
  .mhs-facets--drawer .mhs-facet__opt { padding: 8px 0; }

  .mhs-facets--drawer .mhs-facets__head {
    position: sticky;
    top: 0;
    background: #ffffff;
    z-index: 2;
    padding-top: 2px;
  }
  .mhs-drawer__x {
    display: block;
    border: 0;
    background: none;
    font-size: 26px;
    line-height: 1;
    color: #9a928c;
    padding: 0 2px;
    cursor: pointer;
  }
  .mhs-drawer__x:hover { color: #2c2825; }

  .mhs-drawer__apply {
    display: block;
    position: sticky;
    bottom: 0;
    margin: 10px -18px 0;
    padding: 12px 18px calc(12px + env(safe-area-inset-bottom, 0px));
    background: #ffffff;
    border-top: 1px solid #ece8e4;
  }
  .mhs-drawer__applybtn {
    width: 100%;
    border: 0;
    border-radius: 8px;
    padding: 14px;
    background: #c27266;
    color: #ffffff;
    font-family: inherit;
    font-size: 14.5px;
    font-weight: 500;
    cursor: pointer;
  }
  .mhs-drawer__applybtn:hover { background: #a95c51; }

  /* ---- scrim ---- */
  .mhs-drawer__scrim {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 9996;
    background: rgba(30, 26, 24, .45);
    opacity: 0;
    pointer-events: none;
    transition: opacity .22s ease;
  }
  body.mhs-drawer-open .mhs-drawer__scrim { opacity: 1; pointer-events: auto; }
  body.mhs-drawer-open { overflow: hidden; }
}

@media (prefers-reduced-motion: reduce) {
  .mhs-facets--drawer, .mhs-drawer__scrim, .mhs-filterfab { transition: none; }
}