/* =============================================================================
   Devision Hotel - IRONMONGER  (heritage urban)
   Loaded after the skeleton's main.css.

   Oxblood in place of the portfolio gold, deliberately - nothing else in the
   estate uses it, so this cannot read as an RHC recolour. Every brand value is
   declared once in :root and consumed as var(--dv-*).
   See ../../_SKIN-CONVENTIONS.md.

   Section order matches all six skins:
     1 tokens · 2 base type · 3 buttons · 4 header · 5 hero · 6 booking mask
     7 layout + section titles · 8 cards + prices · 9 rooms · 10 blocks
     11 module surfaces · 12 chrome · 13 footer + newsletter · 14 states
     15 responsive
   IRONMONGER-SKIN-BUILD: 20261011-fr (function rooms CD + blocks hardening)
   ============================================================================= */

/* --- 1. tokens -------------------------------------------------------------- */

:root {
  --dv-color-primary: #3B2C2F;
  --dv-color-primary-contrast: #FBFAF7;
  --dv-color-secondary: #C9C2B4;
  --dv-color-secondary-contrast: #2C2A28;
  --dv-color-accent: #7A2E2E;
  --dv-color-text: #2C2A28;
  --dv-color-heading: #3B2C2F;
  --dv-color-muted: #6E675E;
  /* Muted, taken to AA. --dv-color-muted was chosen to support body copy at 14px+,
     but this skin uses it at 0.62-0.72rem for card meta, table headers, form labels,
     calendar day names and footer copy - it measured below 4.5:1 on the page.
     #6D665D: 5.42:1 on bg, 4.81:1 on bg-alt. Every COLOUR use of muted now
     reads this token; muted itself stays declared so Branding still has both. */
  --dv-color-muted-ink: #6D665D;
  --dv-color-bg: #FBFAF7;
  --dv-color-bg-alt: #F1ECE1;
  --dv-color-border: #E3DED3;
  --dv-color-link: #7A2E2E;
  --dv-color-link-hover: #3B2C2F;

  --dv-font-body: "Work Sans", "Helvetica Neue", Arial, sans-serif;
  --dv-font-heading: "Prata", Georgia, serif;
  /* Heading scale, ratio 1.3. Prata at 1.3 - heritage weight without overpowering the 2px rules.
     calc() on --dv-font-size-base, NOT rem: rem resolves against the ROOT element,
     and the parent hardcodes :root { font-size: 16px } while the base token is applied
     to body. So rem would leave this ladder frozen when Branding changes the base -
     the opposite of the intent. Same pattern as §18.2a. Governs editor headings in
     WYSIWYG content; contextual sizes (hero, page title, cards) keep their clamps. */
  --dv-h1: calc(var(--dv-font-size-base) * 2.75);
  --dv-h2: calc(var(--dv-font-size-base) * 2.1);
  --dv-h3: calc(var(--dv-font-size-base) * 1.6);
  --dv-h4: calc(var(--dv-font-size-base) * 1.24);
  --dv-h5: calc(var(--dv-font-size-base) * 1.0);
  --dv-font-size-base: 16px;
  --dv-line-height-base: 1.68;
  --dv-font-weight-normal: 400;
  --dv-font-weight-bold: 600;

  --dv-container-max: 1280px;
  --dv-gutter: 1.5rem;
  --dv-space-section: 5.5rem;
  --dv-content-after-title-gap: 2.25rem;

  --dv-radius: 0;
  --dv-radius-lg: 0;
  --dv-shadow: 0 1px 2px rgba(59, 44, 47, .07);
  /* Error tone. Deliberately NOT --dv-color-accent: on this skin the accent does
     not clear 4.5:1 against the page, so validation messages would be
     effectively invisible. Chosen to sit in the same family as the accent while
     passing AA, and exposed as its own token so Branding can still reach it.
     --dv-rule-accent is the same idea for 1px rules, which need 3:1. */
  /* The accent used as small caps TEXT. Conventions §8: --dv-color-accent is a
     FILL colour and most accents in this set fall below 4.5:1 on their own page.
     8.91:1 on bg - the accent already clears AA, so the token equals it. */
  /* Text sitting ON the accent fill - a button label is text, so the fill does
     have a contrast bar. unchanged - the oxblood already carried its paper tone. 8.91:1 on --dv-color-accent. */
  --dv-color-accent-contrast: #FBFAF7;
  --dv-color-accent-ink: #7A2E2E;
  --dv-color-error: #7A2E2E;
  --dv-rule-accent: #7A2E2E;
  --dv-shadow-lg: 0 16px 40px rgba(59, 44, 47, .13);

  /* skin-local, derived from tokens */
  --ir-rule: 1px solid var(--dv-color-border);
  --ir-rule-heavy: 2px solid var(--dv-color-primary);
  --ir-micro: .7rem;
  --ir-track: .16em;
  /* Editorial split (hero + home booking strip share the same column math). */
  --ir-hero-editorial-copy: 1fr;
  --ir-hero-editorial-media: 1.1fr;
  --ir-hero-editorial-gap: clamp(1.5rem, 3vw, 2.75rem);
  --dv-tab-track: 0.18em;
  --dv-tab-pill-radius: 0;
  --dv-tab-label-case: uppercase;
  /* Compact desktop sticky bar (site-header__main only; booking strip hidden). */
  --ir-sticky-bar-height: 76px;
}

/* --- 2. base type ----------------------------------------------------------- */

body {
  font-family: var(--dv-font-body);
  font-size: var(--dv-font-size-base);
  line-height: var(--dv-line-height-base);
  font-weight: var(--dv-font-weight-normal);
  color: var(--dv-color-text);
  background: var(--dv-color-bg);
  /* Parent _elements.body.scss (main.css): padding-top 70px below lg for the
     skeleton fixed bar. Ironmonger header is in-flow / full chrome - no offset. */
  padding-top: 0 !important;
}
body.skin-ironmonger.sticky-menu-active {
  padding-top: 0 !important;
}

h1, h2, h3, h4, h5, .h1, .h2, .h3, .fancy-title {
  font-family: var(--dv-font-heading);
  color: var(--dv-color-heading);
  font-weight: 400;
  line-height: 1.1;
  text-wrap: pretty;
}

h1, .h1 { font-size: var(--dv-h1); }
h2, .h2 { font-size: var(--dv-h2); }
h3, .h3 { font-size: var(--dv-h3); }
h4, .h4 { font-size: var(--dv-h4); }
h5, .h5 { font-size: var(--dv-h5); }
/* h4 and h5 sit at or near body size, so they need the label treatment to read as
   headings rather than bold copy. */
h4, .h4, h5, .h5 { line-height: 1.3; }
h5, .h5 {
  font-family: var(--dv-font-body);
  font-weight: var(--dv-font-weight-bold);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--dv-color-muted-ink);
}

a { color: var(--dv-color-link); }
/* Parent `.wysiwyg a:not(.button)` uses skeleton portfolio teal - not skin link token. */
body.skin-ironmonger .wysiwyg:not(.wysiwyg--feature) a:not(.button) {
  color: var(--dv-color-link);
  text-underline-offset: 0.2em;
}
body.skin-ironmonger .wysiwyg:not(.wysiwyg--feature) a:not(.button):hover {
  color: var(--dv-color-link-hover);
  text-decoration-color: var(--dv-color-link-hover);
}

a:hover { color: var(--dv-color-link-hover); }

.container { max-width: var(--dv-container-max); }
.layout__block { padding-block: calc(var(--dv-space-section) / 2); }
/* Parent _content.scss: .home #content { margin-top: -5rem } below lg - pulls block 1 under hero. */
body.skin-ironmonger.home #content {
  margin-top: 0 !important;
}
/* Breathing room under page title / subnav (news hub, layout inner pages). First
   .layout__block must not stack utility pt on this - see contact CD rule. */
body.skin-ironmonger:not(.home) .page-title + #content {
  padding-top: var(--dv-content-after-title-gap) !important;
}

.wysiwyg h2, .wysiwyg h3 { margin-block: 1.7em .6em; }
.wysiwyg ul { padding-left: 1.1em; }
.wysiwyg li { margin-block: .38em; }
.wysiwyg blockquote {
  border-left: 2px solid var(--dv-color-accent);
  padding-left: 1.3em;
  margin-inline: 0;
  font-family: var(--dv-font-heading);
  font-size: 1.25em;
  color: var(--dv-color-heading);
}
.wysiwyg table { width: 100%; border-collapse: collapse; }
.wysiwyg th, .wysiwyg td { border-bottom: var(--ir-rule); padding: .8em .5em; text-align: left; }
.wysiwyg--light, .wysiwyg--light h2, .wysiwyg--light h3 { color: var(--dv-color-primary-contrast); }

/* --- 3. buttons ------------------------------------------------------------- */

.button,
.btn,
.ff-btn-submit,
.frm-fluent-form .ff-btn-submit,
.wpcf7-submit,
.booking-mask__button input,
.newsletter__form input[type="submit"] {
  display: inline-block;
  font-family: var(--dv-font-body);
  font-size: var(--ir-micro);
  font-weight: var(--dv-font-weight-bold);
  letter-spacing: var(--ir-track);
  text-transform: uppercase;
  padding: 1em 1.8em;
  border: 1px solid var(--dv-button-bg);
  border-radius: var(--dv-radius);
  background: var(--dv-button-bg);
  color: var(--dv-button-color);
  cursor: pointer;
  transition: background .18s ease, border-color .18s ease, color .18s ease;
}
.button:hover,
.btn:hover,
.ff-btn-submit:hover,
.wpcf7-submit:hover,
.booking-mask__button input:hover,
.newsletter__form input[type="submit"]:hover {
  background: var(--dv-button-hover-bg);
  border-color: var(--dv-button-hover-bg);
  color: var(--dv-color-primary-contrast);
}
.button--book { background: var(--dv-color-primary); border-color: var(--dv-color-primary); color: var(--dv-color-primary-contrast); }
.button--book:hover { background: var(--dv-color-accent); border-color: var(--dv-color-accent); color: var(--dv-color-accent-contrast); }
.button--clear { background: transparent; color: var(--dv-color-primary); border-color: var(--dv-color-primary); }
.button--clear:hover { background: var(--dv-color-primary); color: var(--dv-color-primary-contrast); }
.button--white { background: var(--dv-color-bg); color: var(--dv-color-primary); border-color: var(--dv-color-bg); }

/* --- 4. header -------------------------------------------------------------- */

.site-header { background: var(--dv-color-bg); }
.site-header__main { border-bottom: var(--ir-rule-heavy); }
.site-header__row {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1.25rem 1.75rem;
  padding-block: 1.35rem;
}
.site-header__row .logo { grid-column: 1; justify-self: start; }
/* #nav-main is a sibling of .container inside .site-header__main (base.twig); §4.2. */
.site-header__row .button--book {
  grid-column: 3;
  justify-self: end;
  white-space: nowrap;
}
.logo__img, .site-header__row .logo svg { max-height: 48px; width: auto; }

/* --- 4.1 Header hardening (parent main.css _site-header.scss bleed) ------------ */
/* Parent pins .button--book position:absolute to the viewport; Ironmonger keeps
   the CTA in the grid row. Parent also fixes .site-header height (170px). */

body.skin-ironmonger .site-header {
  height: auto !important;
  padding-top: 0 !important;
}

/* Below lg the skeleton fixes .site-header to the viewport; Ironmonger keeps
   normal document flow (see Esplanade §2 body padding note). */
@media (max-width: 991.98px) {
  body.skin-ironmonger .site-header {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    padding-top: 0 !important;
  }
}

body.skin-ironmonger .site-header .site-header__row .button--book {
  position: static !important;
  top: auto !important;
  right: auto !important;
  margin: 0 !important;
  display: inline-flex !important;
}
/* Drawer footer reuses .button--book; parent main.css .site-header .button--book is absolute. */
body.skin-ironmonger .site-header #nav-main.nav-main .nav-main__drawer-footer .button.button--book {
  position: static !important;
  top: auto !important;
  right: auto !important;
  left: auto !important;
  bottom: auto !important;
  margin: 0 !important;
  display: flex !important;
  width: 100%;
  justify-content: center;
  font-size: inherit;
  font-weight: inherit;
}

/* --- 4.2 Primary nav placement (lives outside .site-header__row in base.twig) ----- */

@media (min-width: 992px) {
  body.skin-ironmonger .site-header__main > #nav-main.nav-main {
    z-index: 2;
    width: max-content;
    max-width: min(62vw, 40rem);
    margin: 0;
    padding: 0 !important;
    border: 0;
    box-shadow: none;
    background: transparent;
    visibility: visible;
    overflow: visible;
    display: block;
  }
  body.skin-ironmonger .site-header__main > #nav-main.nav-main .nav-main__list {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap;
    justify-content: center;
    align-items: baseline;
    gap: clamp(0.35rem, 1vw, 1.15rem);
    width: auto !important;
    padding: 0 !important;
  }
  body.skin-ironmonger .site-header__main > #nav-main .nav-main__list > li + li {
    margin: 0 !important;
  }
  body.skin-ironmonger .site-header__main > #nav-main .nav-main__list > li.menu-item-has-children > .nav-main__item-row {
    display: contents;
  }
  body.skin-ironmonger .site-header__main > #nav-main .nav-main__submenu-toggle {
    display: none;
  }
  body.skin-ironmonger .site-header__main > #nav-main .nav-main__list > li:not(.menu-button) > .nav-main__dropdown {
    display: none !important;
  }
  body.skin-ironmonger .site-header__main > #nav-main .nav-main__list > li.menu-item-has-children {
    position: relative;
  }
  body.skin-ironmonger .site-header__main > #nav-main .nav-main__list > li.menu-item-has-children:hover,
  body.skin-ironmonger .site-header__main > #nav-main .nav-main__list > li.menu-item-has-children:focus-within {
    z-index: 80;
  }
  body.skin-ironmonger .site-header__main > #nav-main .nav-main__list > li.menu-item-has-children > .nav-main__dropdown {
    position: absolute;
    left: 50%;
    top: 100%;
    transform: translateX(-50%);
    z-index: 90;
  }
  /* Hover bridge: gap was outside the <li> box so the panel closed before the cursor arrived. */
  body.skin-ironmonger .site-header__main > #nav-main .nav-main__list > li.menu-item-has-children > .nav-main__dropdown::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 100%;
    height: 0.35rem;
  }
  body.skin-ironmonger .site-header__main > #nav-main .nav-main__list > li.menu-item-has-children:hover > .nav-main__dropdown,
  body.skin-ironmonger .site-header__main > #nav-main .nav-main__list > li.menu-item-has-children:focus-within > .nav-main__dropdown {
    display: block !important;
  }
}

/* Desktop (lg+): stack nav on the logo row via grid (sticky included). */
@media (min-width: 992px) {
  body.skin-ironmonger .site-header__main {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, auto);
    align-items: center;
    position: relative;
    overflow: visible;
  }
  body.skin-ironmonger .site-header__main > .container {
    grid-column: 1;
    grid-row: 1;
    width: 100%;
    z-index: 1;
  }
  body.skin-ironmonger .site-header__main > #nav-main.nav-main {
    grid-column: 1;
    grid-row: 1;
    position: relative !important;
    place-self: center;
    left: auto !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    width: max-content !important;
    max-width: min(62vw, 40rem) !important;
    transform: none !important;
    display: block !important;
    pointer-events: none;
  }
  body.skin-ironmonger .site-header__main > #nav-main.nav-main .nav-main__drawer-body,
  body.skin-ironmonger .site-header__main > #nav-main.nav-main .nav-main__list,
  body.skin-ironmonger .site-header__main > #nav-main.nav-main a,
  body.skin-ironmonger .site-header__main > #nav-main.nav-main button {
    pointer-events: auto;
  }
}
body.skin-ironmonger .site-header.is-sticky .site-header__row .button--book {
  top: auto !important;
}

/* Sticky: parent main.css forces display:flex + height:70px on .site-header.is-sticky,
   which lays out __main + booking strip + mobile bar in one row. Ironmonger pins only
   the nav bar; booking strip hides while stuck (CD compact chrome). */
body.skin-ironmonger .site-header.is-sticky,
body.skin-ironmonger .site-header.is-sticky-out {
  position: fixed !important;
  top: 0;
  left: 0;
  right: 0;
  display: block !important;
  flex: none !important;
  flex-direction: unset !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  animation: none !important;
  transform: none !important;
  box-shadow: 0 1px 0 var(--dv-color-border);
  background: var(--dv-color-bg);
  z-index: 100 !important;
}
body.skin-ironmonger .site-header.is-sticky .site-header__booking {
  display: none !important;
}

/* Desktop compact sticky bar only (lg+). Do not flatten #nav-main on tablet/mobile. */
@media (min-width: 992px) {
  body.skin-ironmonger .site-header.is-sticky .site-header__main {
    position: relative !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: minmax(0, auto) !important;
    align-items: center !important;
    overflow: visible !important;
  }
  body.skin-ironmonger .site-header.is-sticky .site-header__main > .container {
    grid-column: 1 !important;
    grid-row: 1 !important;
    width: 100% !important;
    z-index: 1;
  }
  body.skin-ironmonger .site-header.is-sticky .site-header__main > #nav-main.nav-main {
    grid-column: 1 !important;
    grid-row: 1 !important;
    position: relative !important;
    place-self: center !important;
    left: auto !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    width: max-content !important;
    max-width: min(62vw, 40rem) !important;
    transform: none !important;
    display: block !important;
    padding: 0 !important;
    margin: 0 !important;
    pointer-events: none;
    z-index: 2;
  }
  body.skin-ironmonger .site-header.is-sticky .site-header__main > #nav-main.nav-main .nav-main__drawer-body,
  body.skin-ironmonger .site-header.is-sticky .site-header__main > #nav-main.nav-main .nav-main__list,
  body.skin-ironmonger .site-header.is-sticky .site-header__main > #nav-main.nav-main a,
  body.skin-ironmonger .site-header.is-sticky .site-header__main > #nav-main.nav-main button {
    pointer-events: auto;
  }
  body.skin-ironmonger .site-header.is-sticky .site-header__row {
    display: grid !important;
    grid-template-columns: 1fr auto 1fr !important;
    align-items: center;
    padding-block: 0.85rem;
  }
  body.skin-ironmonger .site-header.is-sticky .nav-main__drawer-body {
    display: block !important;
    overflow: visible !important;
  }
  body.skin-ironmonger .site-header.is-sticky .nav-main__list {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: baseline;
    gap: clamp(0.5rem, 1vw, 1.25rem);
    width: auto !important;
    padding: 0 !important;
  }
  body.skin-ironmonger .site-header.is-sticky .nav-main__list > li + li {
    margin-left: 0 !important;
    margin-top: 0 !important;
  }
  body.skin-ironmonger .site-header.is-sticky .logo__img,
  body.skin-ironmonger .site-header.is-sticky .site-header__row .logo svg {
    max-height: 48px;
  }
  /* Parent `_nav-main.scss` .is-sticky .nav-main { padding: 1rem 0 } breaks overlay bar. */
  body.skin-ironmonger .site-header.is-sticky .nav-main {
    padding: 0 !important;
  }
}

@media (min-width: 992px) {
  body.skin-ironmonger .site-header__row .logo__img,
  body.skin-ironmonger .site-header__row .logo svg {
    max-height: 62px;
  }
  body.skin-ironmonger .site-header > .container:has(.mobile-header) {
    display: none !important;
  }
}

@media (max-width: 991.98px) {
  body.skin-ironmonger .site-header.is-sticky .site-header__main {
    display: block !important;
    height: 0;
    min-height: 0;
    padding: 0;
    border: 0;
    overflow: visible;
  }
  body.skin-ironmonger .site-header.is-sticky > .container:has(.mobile-header) {
    display: block !important;
  }
  body.skin-ironmonger .site-header.is-sticky .site-header__booking {
    display: none !important;
  }
  body.skin-ironmonger .site-header.is-sticky {
    height: auto !important;
    min-height: 0 !important;
    padding-top: 0 !important;
  }
}
/* Parent `_nav-main.scss` paints links Prata + wide tracking - CD is Work Sans caps.
   Bar typography below is min-width 992 only so it never bleeds into the drawer. */
body.skin-ironmonger .site-header__main > #nav-main.nav-main { padding: 0; }

@media (min-width: 992px) {
  body.skin-ironmonger .site-header__main > #nav-main .nav-main__drawer-body {
    flex: none;
    min-height: 0;
    overflow: visible;
    width: 100%;
  }
  body.skin-ironmonger .site-header__main > #nav-main .nav-main__drawer-footer {
    display: none;
  }
  body.skin-ironmonger .site-header__main > #nav-main .nav-main__list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .65rem 1.35rem;
    list-style: none;
    margin: 0;
    padding: 0;
    width: auto;
    align-items: baseline;
  }
  body.skin-ironmonger .site-header__main > #nav-main .nav-main__list > li + li { margin-left: 0; }
  body.skin-ironmonger .site-header__main > #nav-main .nav-main__list > li:not(.menu-button) > a,
  body.skin-ironmonger .site-header__main > #nav-main .nav-main__list > li:not(.menu-button) > .nav-main__item-row > a {
    font-family: var(--dv-font-body) !important;
    font-size: .82rem !important;
    font-weight: var(--dv-font-weight-normal) !important;
    letter-spacing: var(--ir-track) !important;
    text-transform: uppercase !important;
    color: var(--dv-color-text);
    text-decoration: none;
    padding: 0.5rem 0 !important;
    padding-bottom: .2rem !important;
    border-bottom: 2px solid transparent;
    line-height: 1.2;
    vertical-align: baseline;
  }
  .nav-main__list > li:not(.menu-item-has-children) > a {
    font-size: .82rem;
    color: var(--dv-color-text);
    text-decoration: none;
    padding: 0.5rem 0;
    padding-bottom: .2rem;
    border-bottom: 2px solid transparent;
    line-height: 1.2;
  }
  body.skin-ironmonger .site-header__main > #nav-main .nav-main__list > li > a:hover,
  body.skin-ironmonger .site-header__main > #nav-main .nav-main__list > li > .nav-main__item-row > a:hover,
  body.skin-ironmonger .site-header__main > #nav-main .nav-main__list > li.current-menu-item > a,
  body.skin-ironmonger .site-header__main > #nav-main .nav-main__list > li.current-menu-item > .nav-main__item-row > a,
  body.skin-ironmonger .site-header__main > #nav-main .nav-main__list > li.current-menu-parent > .nav-main__item-row > a,
  body.skin-ironmonger .site-header__main > #nav-main .nav-main__list > li.current-menu-ancestor > .nav-main__item-row > a,
  .nav-main__list > li:not(.menu-item-has-children) > a:hover,
  .nav-main__list > li:not(.menu-item-has-children).current-menu-item > a { color: var(--dv-color-primary); border-bottom-color: var(--dv-color-accent); }
}
.nav-main__dropdown {
  list-style: none;
  margin: 0;
  padding: .4rem 0;
  background: var(--dv-color-bg);
  border: var(--ir-rule);
  min-width: 13rem;
}
.nav-main__dropdown a { display: block; padding: .5rem 1rem; font-size: .84rem; color: var(--dv-color-text); text-decoration: none; }
.nav-main__dropdown a:hover { background: var(--dv-color-bg-alt); }
.mobile-header { display: none; }
.hamburger-inner,
.hamburger-inner::before,
.hamburger-inner::after { background: var(--dv-color-primary); }

/* --- 4.3 Content-aware nav (see CONTENT-AWARE-NAV-SPEC) -------------------- */

@media (min-width: 992px) {
  body.skin-ironmonger .site-header__main > #nav-main .nav-main__list > li > a,
  body.skin-ironmonger .site-header__main > #nav-main .nav-main__list > li > .nav-main__item-row > a {
    white-space: nowrap;
  }
  body.skin-ironmonger .site-header__main > #nav-main .nav-main__list {
    flex-wrap: nowrap !important;
  }
  body.skin-ironmonger .site-header__main > #nav-main .nav-main__list > li {
    flex: none;
  }

  html.nav-adaptive-step-1 body.skin-ironmonger .site-header__main > #nav-main .nav-main__list {
    gap: clamp(0.25rem, 0.75vw, 0.85rem);
  }
  html.nav-adaptive-step-2 body.skin-ironmonger .site-header__main > #nav-main .nav-main__list {
    gap: 0.35rem;
  }
  html.nav-adaptive-step-2 body.skin-ironmonger .site-header__main > #nav-main .nav-main__list > li:not(.menu-button) > a,
  html.nav-adaptive-step-2 body.skin-ironmonger .site-header__main > #nav-main .nav-main__list > li:not(.menu-button) > .nav-main__item-row > a {
    letter-spacing: 0.06em !important;
  }

  html.nav-collapsed body.skin-ironmonger .site-header {
    display: flex;
    flex-direction: column;
  }
  html.nav-collapsed body.skin-ironmonger .site-header > .container:has(.mobile-header) {
    order: -1;
    display: block !important;
    width: 100%;
    max-width: none;
    margin-inline: 0;
    padding-inline: var(--dv-gutter);
    border-bottom: var(--ir-rule-heavy);
    box-sizing: border-box;
  }
  html.nav-collapsed body.skin-ironmonger .mobile-header {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    padding-block: 0.65rem !important;
  }
  html.nav-collapsed body.skin-ironmonger .site-header__main > .container {
    display: flex !important;
    width: 100%;
  }
  html.nav-collapsed body.skin-ironmonger .site-header__main > #nav-main.nav-main {
    position: fixed;
    top: var(--ir-mobile-header-height, 4.43rem);
    left: auto;
    right: 0;
    bottom: 0;
    width: min(78vw, 320px);
    max-width: none;
    margin: 0;
    padding: 1.25rem 0 2rem !important;
    transform: translateX(100%);
    visibility: hidden;
    pointer-events: none;
    display: flex !important;
    flex-direction: column;
    background: var(--dv-color-bg);
    border-left: var(--ir-rule-heavy);
    box-shadow: var(--dv-shadow-lg);
    z-index: var(--ir-mobile-drawer-z, 125);
    overflow: hidden;
  }
  html.nav-collapsed body.skin-ironmonger .site-header__main > #nav-main.nav-main.is-open,
  html.nav-collapsed body.skin-ironmonger.nav-open .site-header__main > #nav-main.nav-main,
  html.nav-collapsed body.skin-ironmonger .site-header:has(.hamburger.is-active) .site-header__main > #nav-main.nav-main {
    transform: none;
    visibility: visible;
    pointer-events: auto;
  }
  html.nav-collapsed body.skin-ironmonger .site-header__main > #nav-main .nav-main__list {
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    width: 100% !important;
    gap: 0 !important;
  }
  html.nav-collapsed body.skin-ironmonger .site-header__main > #nav-main .nav-main__submenu-toggle {
    display: inline-flex !important;
  }
  html.nav-collapsed body.skin-ironmonger .site-header__main > #nav-main .nav-main__list > li.menu-item-has-children > .nav-main__dropdown {
    position: static !important;
    transform: none !important;
    display: none !important;
  }
}

/* booking strip built into the header - unique to this skin (Complete Reference v6 / native strip) */
.site-header__booking {
  position: relative;
  z-index: 2;
  width: 100%;
  background: var(--dv-color-bg-alt);
  border-bottom: var(--ir-rule);
}

html.booking-focus-open.booking-focus--header-strip body.skin-ironmonger #hero-booking.booking-focus-host,
html.booking-focus-open body.skin-ironmonger #hero-booking.booking-focus-host {
  position: relative;
  z-index: 3;
  filter: none !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  box-shadow: 0 12px 40px rgba(59, 44, 47, 0.14);
}

html.booking-focus-open body.skin-ironmonger #hero-booking .easepick-wrapper,
html.booking-focus-open body.skin-ironmonger .easepick-wrapper--hero-portal,
html.booking-focus-open body.skin-ironmonger .easepick-wrapper--viewport-portal {
  z-index: 112;
}
.site-header__booking .booking-mask {
  width: 100%;
}
/* Same horizontal box as .hero-wrapper .container (not a wider strip). */
.site-header__booking .booking-mask .container {
  max-width: var(--dv-container-max);
  width: 100%;
  margin-inline: auto;
  padding-inline: var(--dv-gutter);
  box-sizing: border-box;
}
/* Booking row: inner = full-width bg-alt; home = white wings + framed mask (hero below). */
body.skin-ironmonger .site-header__booking {
  border-bottom: 0;
  background: var(--dv-color-bg-alt);
}
body.skin-ironmonger .site-header__booking .booking-mask {
  max-width: var(--dv-container-max);
  width: 100%;
  margin-inline: auto;
  box-sizing: border-box;
  background: transparent;
  border-left: var(--ir-rule);
  border-right: var(--ir-rule);
  border-bottom: var(--ir-rule);
}
body.skin-ironmonger .site-header__booking .booking-mask .container {
  max-width: none;
  width: 100%;
  margin-inline: 0;
  padding-inline: 0;
}
body.skin-ironmonger.home .site-header__booking {
  background: var(--dv-color-bg);
}
body.skin-ironmonger.home .site-header__booking .booking-mask {
  background: var(--dv-color-bg-alt);
}
body.skin-ironmonger.home .hero-wrapper--editorial > .container {
  max-width: var(--dv-container-max);
  width: 100%;
  margin-inline: auto;
  padding-inline: 0;
  box-sizing: border-box;
  border-left: var(--ir-rule);
  border-right: var(--ir-rule);
  border-bottom: var(--ir-rule);
}
body.skin-ironmonger.home .hero--editorial .hero__panel {
  padding-inline: var(--dv-gutter);
}
.site-header__booking .booking-mask__title { display: none; }
.site-header__booking .booking-mask--inline .booking-mask__form {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
  align-items: stretch;
  min-height: 4.25rem;
}
.site-header__booking .booking-mask__field {
  padding: 1.15rem 1.25rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.site-header__booking .booking-mask__button {
  display: flex;
  align-items: stretch;
  margin: 0;
  padding: 0;
}
.site-header__booking .booking-mask__button input {
  flex: 0 0 auto;
  width: auto;
  max-width: 100%;
  height: auto;
  min-height: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .85rem 1.75rem !important;
  line-height: 1.25;
  text-align: center;
  white-space: nowrap;
}

/* --- 5. hero ---------------------------------------------------------------- */

.hero-wrapper--editorial { background: var(--dv-color-bg); }
/* Kill parent `.hero::before` scrim - copy sits on page ground, not a grey panel. */
body.skin-ironmonger .hero.hero--editorial::before {
  display: none !important;
  content: none !important;
}
body.skin-ironmonger .hero--editorial {
  display: grid !important;
  min-height: 0 !important;
  position: relative;
  width: 100%;
}
.hero--editorial {
  display: grid;
  grid-template-columns: var(--ir-hero-editorial-copy) var(--ir-hero-editorial-media);
  align-items: stretch;
  gap: var(--ir-hero-editorial-gap);
}
.hero--editorial .hero__panel {
  display: flex;
  align-items: center;
  padding-block: 3.5rem;
  background: transparent;
}
.hero--editorial .hero__eyebrow {
  display: block;
  font-family: var(--dv-font-body);
  font-weight: var(--dv-font-weight-bold);
  font-size: var(--ir-micro);
  letter-spacing: var(--ir-track);
  text-transform: uppercase;
  color: var(--dv-color-accent-ink);
  margin-bottom: .85rem;
}
.hero--editorial .hero__rule {
  display: block;
  width: 2.8rem;
  height: 2px;
  background: var(--dv-color-accent);
  margin-bottom: 1.4rem;
}
.hero--editorial .hero__title .h1 {
  display: block;
  font-size: clamp(2rem, 3.4vw, 2.9rem);
  color: var(--dv-color-heading);
  margin-bottom: .9rem;
  max-width: 24ch;
}
.hero--editorial .hero__title p {
  font-family: var(--dv-font-body);
  font-size: 1.05rem;
  font-style: normal;
  font-weight: var(--dv-font-weight-normal);
  line-height: var(--dv-line-height-base);
  color: var(--dv-color-text);
  margin: 0;
  max-width: 44ch;
}
.hero--editorial .hero__slider { overflow: hidden; align-self: stretch; }
.hero--editorial .hero__slide img {
  width: 100%;
  height: auto;
  min-height: 28rem;
  object-fit: cover;
  display: block;
}
/* Home: hero sits below the booking strip (no pull-up over the mask). */
body.skin-ironmonger.home .hero-wrapper--editorial {
  position: relative;
  z-index: 0;
  margin-top: 0 !important;
}
body.skin-ironmonger.home .hero--editorial { gap: var(--ir-hero-editorial-gap); }
body.skin-ironmonger.home .hero--editorial .hero__slider {
  margin-top: 0 !important;
}

/* --- 5.1 Hero typography + layout hardening (parent main.css bleed) ------------- */
/* Parent _hero.scss: absolute centred .hero__title, white italic intro, min-height
   500px, .hero__slide img { height: 100% }. Same specificity as §5 unless reset. */

body.skin-ironmonger .hero--editorial .hero__title {
  position: static !important;
  left: auto !important;
  right: auto !important;
  top: auto !important;
  transform: none !important;
}
body.skin-ironmonger .hero--editorial .hero__title .h1 {
  font-family: var(--dv-font-heading) !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
  line-height: 1.1 !important;
  color: var(--dv-color-heading) !important;
}
body.skin-ironmonger .hero--editorial .hero__title p {
  font-family: var(--dv-font-body) !important;
  font-style: normal !important;
  font-weight: var(--dv-font-weight-normal) !important;
  text-align: left !important;
  color: var(--dv-color-text) !important;
  margin: 0 !important;
}
body.skin-ironmonger .hero.hero--editorial {
  min-height: 0 !important;
  height: auto;
}
body.skin-ironmonger .hero--editorial .hero__slide img:not(.hero__video-poster) {
  height: auto !important;
}
body.skin-ironmonger .hero--editorial .hero__slide--video .hero__video-poster {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}
body.skin-ironmonger .hero--editorial .hero__slider.slick:not(.slick-initialized) .hero__slide:not(:first-child) {
  display: none;
}

/* --- 6. booking mask -------------------------------------------------------- */
/* CSS only. The inline variant becomes the full-width header strip; the same     */
/* variant dropped into content sits on a bordered panel instead.                 */

.booking-mask .container { padding-inline: 0; }
.booking-mask__title {
  font-size: var(--ir-micro);
  letter-spacing: var(--ir-track);
  text-transform: uppercase;
  color: var(--dv-color-muted-ink);
  margin-bottom: .5rem;
}
.booking-mask--inline .booking-mask__form {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  align-items: stretch;
}
.site-header__booking .booking-mask__field { border-right: var(--ir-rule); }
.booking-mask__field label {
  display: block;
  font-size: .62rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--dv-color-muted-ink);
  margin-bottom: .2rem;
}
.booking-mask__field input,
.booking-mask__field .form-control {
  width: 100%;
  background: transparent;
  border: 0;
  padding: 0;
  font-family: var(--dv-font-body);
  font-size: .92rem;
  color: var(--dv-color-text);
}
.booking-mask__field input:focus { outline: 0; color: var(--dv-color-primary); }
.site-header__booking .booking-mask__button input {
  border: 0;
  background: var(--dv-color-accent);
  color: var(--dv-color-primary-contrast);
}
.site-header__booking .booking-mask__button input:hover { background: var(--dv-color-primary); }
/* in-content instance */
.layout__block .booking-mask { background: var(--dv-color-bg-alt); border: var(--ir-rule); padding: 1.1rem; }
.layout__block .booking-mask__form { gap: 1rem; align-items: end; }
.layout__block .booking-mask__field input { border-bottom: var(--ir-rule); padding-bottom: .3rem; }
.booking-mask--stacked .booking-mask__form { grid-template-columns: 1fr 1fr; }
/* --- 6.1 Booking mask type + method variants (engine markup, 19 Aug) ------- */
/* From components/booking-mask.twig. The room and table masks are the SAME component:
   type is --room or --table, variant is --inline, --stacked or --compact, and the three
   methods produce three different children. The §6 pass only covered the variant, so
   these were uncovered:
     .booking-mask--table   table booking, which pairs date + time + covers
     .booking-mask--room    room booking, check-in + check-out + guests
     .booking-mask__field--time   <input type="time">, which UAs style themselves
     .booking-mask__link    method=link, an anchor instead of a form
     .booking-mask__embed   method=embed, raw provider HTML - contain it, do not style in
*/

.booking-mask__field--time input[type="time"] {
  font-family: var(--dv-font-body);
  color: var(--dv-color-heading);
  background: transparent;
  border: 0;
  padding: 0;
}
.booking-mask__field--time input[type="time"]::-webkit-calendar-picker-indicator { opacity: .5; cursor: pointer; }
.booking-mask__field--small input[type="number"] { -moz-appearance: textfield; }
.booking-mask__field--small input::-webkit-outer-spin-button,
.booking-mask__field--small input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* method=link: no form, so the anchor carries the whole surface */
.booking-mask__link { display: inline-block; }
.booking-mask--stacked .booking-mask__link,
.booking-mask--compact .booking-mask__link { width: 100%; text-align: center; }

/* method=embed: provider HTML. Give it room and a max width, style nothing inside. */
.booking-mask__embed { width: 100%; }
.booking-mask__embed iframe { width: 100%; border: 0; display: block; }

/* the table mask is the narrower of the two, so it does not want the room mask's
   four-column stretch when it appears in content */
.booking-mask--table.booking-mask--stacked .booking-mask__form { grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr)); }

/* --- 6.2 Booking overlay (dialog variant; parent booking-overlay.css is shell only) */
body.skin-ironmonger .booking-overlay {
  z-index: 140;
}

body.skin-ironmonger .booking-overlay__panel {
  background: var(--dv-color-bg);
  border: var(--ir-rule-heavy);
  box-shadow: var(--dv-shadow-lg);
  width: min(36rem, calc(100vw - 2rem));
  padding: 2.35rem 1.5rem 1.35rem;
}

body.skin-ironmonger .booking-overlay .booking-mask__title {
  display: block;
  font-size: var(--ir-micro);
  letter-spacing: var(--ir-track);
  text-transform: uppercase;
  color: var(--dv-color-heading);
  margin: 0 0 1rem;
  padding-bottom: 0.75rem;
  border-bottom: var(--ir-rule);
}

body.skin-ironmonger .booking-overlay .booking-mask--dialog .booking-mask__form {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  align-items: stretch;
}

@media (min-width: 480px) {
  body.skin-ironmonger .booking-overlay .booking-mask--dialog .booking-mask__form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

body.skin-ironmonger .booking-overlay .booking-mask__field {
  padding: 0.85rem 0;
  border-bottom: var(--ir-rule);
  border-right: 0;
}

@media (min-width: 480px) {
  body.skin-ironmonger .booking-overlay .booking-mask__field:nth-child(odd) {
    padding-right: 1rem;
  }
  body.skin-ironmonger .booking-overlay .booking-mask__field:nth-child(even) {
    padding-left: 1rem;
  }
}

body.skin-ironmonger .booking-overlay .booking-mask__field label {
  margin-bottom: 0.35rem;
  color: var(--dv-color-muted-ink);
}

body.skin-ironmonger .booking-overlay .booking-mask__field input,
body.skin-ironmonger .booking-overlay .booking-mask__field .form-control {
  background: var(--dv-color-bg);
  color: var(--dv-color-text);
  padding: 0.15rem 0 0.25rem;
}

body.skin-ironmonger .booking-overlay .booking-mask__button {
  grid-column: 1 / -1;
  display: block;
  margin: 1rem 0 0;
  padding: 0;
  border-bottom: 0;
}

body.skin-ironmonger .booking-overlay .booking-mask__button input {
  width: 100%;
  border: 0;
  background: var(--dv-color-accent);
  color: var(--dv-color-primary-contrast);
  padding: 0.9rem 1.25rem;
  font-family: var(--dv-font-body);
  font-size: var(--ir-micro);
  font-weight: var(--dv-font-weight-normal);
  letter-spacing: var(--ir-track);
  text-transform: uppercase;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

body.skin-ironmonger .booking-overlay .booking-mask__button input:hover {
  background: var(--dv-color-primary);
}

body.skin-ironmonger .booking-overlay__close {
  border: var(--ir-rule);
  border-radius: 0;
  background: var(--dv-color-bg);
  color: var(--dv-color-heading);
}

body.skin-ironmonger .booking-overlay__close:hover {
  background: var(--dv-color-bg-alt);
  color: var(--dv-color-primary);
}

html.booking-overlay-open body.skin-ironmonger .site-header,
html.booking-overlay-open body.skin-ironmonger .hero-wrapper--editorial,
html.booking-overlay-open body.skin-ironmonger #content,
html.booking-overlay-open body.skin-ironmonger #footer,
html.booking-overlay-open body.skin-ironmonger .newsletter {
  filter: blur(4px);
  opacity: 0.52;
  pointer-events: none;
  transition: filter 0.25s ease, opacity 0.25s ease;
}

html.booking-overlay-open body.skin-ironmonger .booking-overlay {
  filter: none;
  opacity: 1;
  pointer-events: auto;
}

@media (prefers-reduced-motion: reduce) {
  html.booking-overlay-open body.skin-ironmonger .site-header,
  html.booking-overlay-open body.skin-ironmonger .hero-wrapper--editorial,
  html.booking-overlay-open body.skin-ironmonger #content,
  html.booking-overlay-open body.skin-ironmonger #footer,
  html.booking-overlay-open body.skin-ironmonger .newsletter {
    filter: none;
    opacity: 0.45;
  }
}

@media (max-width: 767.98px) {
  body.skin-ironmonger .booking-overlay__panel {
    width: 100%;
    max-width: none;
    margin: auto auto 0;
    max-height: min(90vh, 100%);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    border-left: 0;
    border-right: 0;
    border-bottom: 0;
    padding: 2.5rem 1.15rem 1.25rem;
  }

  body.skin-ironmonger .booking-overlay .booking-mask--dialog .booking-mask__form {
    grid-template-columns: 1fr;
  }

  body.skin-ironmonger .booking-overlay .booking-mask__field:nth-child(odd),
  body.skin-ironmonger .booking-overlay .booking-mask__field:nth-child(even) {
    padding-left: 0;
    padding-right: 0;
  }
}


/* --- 7. layout + section titles --------------------------------------------- */
/* The pretitle carries a rule, matching the hero lead-in. */

.pretitle {
  display: inline-flex;
  align-items: center;
  gap: .8rem;
  font-size: var(--ir-micro);
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--dv-color-accent);
}
.pretitle::before { content: ""; width: 2.4rem; height: 2px; background: var(--dv-color-accent); }
.fancy-title { border-bottom: var(--ir-rule-heavy); display: inline-block; padding-bottom: .5rem; }

/* --- 8. cards + price contexts ---------------------------------------------- */
/* Horizontal rows. The Bootstrap column from archive-promo / promo-embed is
   widened here rather than by overriding those templates - see conventions §4. */

/* Index hubs: desktop list rows; <=991 stacked tile cards in a grid (see §15). */
body.skin-ironmonger .promo-index > [class*="col-"],
body.skin-ironmonger .filter-results > [class*="col-"],
body.skin-ironmonger .news-index .row.gx-lg-6 > [class*="col-"] {
  min-width: 0;
}
body.skin-ironmonger .promo-index .card--row,
body.skin-ironmonger .filter-results .card--row,
body.skin-ironmonger .news-index .card--row {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  padding-inline: clamp(0.65rem, 2vw, 1.35rem);
}
body.skin-ironmonger .promo-index .card--row .card__content,
body.skin-ironmonger .filter-results .card--row .card__content {
  min-width: 0;
}
body.skin-ironmonger .promo-index .card--row .card__aside,
body.skin-ironmonger .filter-results .card--row .card__aside {
  padding-right: 0.15rem;
}
/* Row numeral: increment on column wrappers (AJAX hubs + archive); reset once on list. */
body.skin-ironmonger .promo-index,
body.skin-ironmonger .filter-results,
body.skin-ironmonger .news-index .row.gx-lg-6 {
  counter-reset: promo-row;
}
body.skin-ironmonger .promo-index > [class*="col-"],
body.skin-ironmonger .filter-results > [class*="col-"],
body.skin-ironmonger .news-index .row.gx-lg-6 > [class*="col-"] {
  counter-increment: promo-row;
}
.promo-index { border-top: var(--ir-rule-heavy); }
.promo-embed__grid > [class*="col-"] {
  display: flex;
  flex-direction: column;
}
.promo-embed__grid .card--surface {
  flex: 1 1 auto;
  width: 100%;
}

/* Promo embed strip - surface cards; equal height via flex stretch (not index rows). */
.promo-embed--strip .promo-embed__track {
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  gap: 1.25rem;
  align-items: stretch;
}
.promo-embed--strip .promo-embed__item {
  flex: 0 0 auto;
  scroll-snap-align: start;
  min-width: 0;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  align-self: stretch;
}
.promo-embed--strip.promo-embed--cols-2 .promo-embed__item {
  width: min(16rem, calc((100% - 1.25rem) / 2));
}
.promo-embed--strip.promo-embed--cols-3 .promo-embed__item {
  width: min(13rem, calc((100% - 2.5rem) / 3));
}
.promo-embed--strip.promo-embed--cols-4 .promo-embed__item {
  width: min(11rem, calc((100% - 3.75rem) / 4));
}
.promo-embed--strip .card--row {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: .65rem;
  padding-block: .75rem;
}
.promo-embed--strip .card--row::before { display: none; }
.promo-embed--strip .card--row .card__image { width: 100%; }
.promo-embed--strip .card--row .card__image img {
  width: 100%;
  max-width: 100%;
  height: auto;
}
.promo-embed--strip .card--row .card__content h3 { font-size: 1.05rem; }
.promo-embed--strip .card--row .card__content p { display: none; }
.promo-embed--strip .card--row .card__aside {
  text-align: left;
  min-width: 0;
}
body.skin-ironmonger .promo-embed--strip .promo-embed__track {
  align-items: stretch !important;
}
body.skin-ironmonger .promo-embed--strip .promo-embed__item {
  display: flex !important;
  flex-direction: column !important;
  align-self: stretch !important;
}
body.skin-ironmonger .promo-embed--strip a.card--surface.card--link,
body.skin-ironmonger .promo-embed--strip .card--surface {
  display: flex !important;
  flex-direction: column;
  flex: 1 1 auto !important;
  width: 100%;
  min-height: 100%;
  height: 100%;
}
.promo-embed--strip .card--surface .card__image {
  flex: 0 0 auto;
}
.promo-embed--strip .card--surface .card__content h3 { font-size: 1.05rem; }
.promo-embed--strip .card--surface .card__excerpt { display: none; }
.promo-embed--strip .card--surface .card__image img {
  width: 100% !important;
  max-width: 100%;
  height: auto !important;
  aspect-ratio: 4 / 3 !important;
  object-fit: cover !important;
}
body.skin-ironmonger .promo-embed--strip .card--surface .card__content {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  padding: 0.85rem 1rem 1rem;
  min-height: 0;
}
body.skin-ironmonger .promo-embed--strip .card--surface .card__meta {
  flex: 0 0 auto;
  min-height: 1.35rem;
}
body.skin-ironmonger .promo-embed--strip .card--surface .card__content h3 {
  flex: 1 1 auto;
  margin-bottom: 0;
}
body.skin-ironmonger .promo-embed--strip .card--surface .card__price {
  flex: 0 0 auto;
  margin-top: auto;
  padding-top: 0.65rem;
  border-top: var(--ir-rule);
}

/* Promo embed surface card (grid / carousel / strip) - not index row layout. */
body.skin-ironmonger a.card--surface.card--link {
  display: flex !important;
  flex-direction: column;
}
.card--surface {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--dv-color-bg);
  border: var(--ir-rule-heavy);
  border-radius: var(--dv-radius);
  box-shadow: none;
  text-decoration: none;
  overflow: hidden;
  counter-increment: none;
}
.card--surface::before { display: none !important; }
.card--surface .card__image {
  display: block;
  width: 100%;
  overflow: hidden;
  background: var(--dv-color-bg-alt);
}
.card--surface .card__image img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
}
.card--surface .card__content {
  flex: 1 1 auto;
  padding: 1rem 1.15rem 1.25rem;
  min-width: 0;
}
.card--surface .card__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.65rem;
  margin-bottom: 0.5rem;
}
.card--surface .card__cat {
  display: inline-block;
  padding: 0.2rem 0.45rem;
  font-family: var(--dv-font-body);
  font-size: 0.68rem;
  font-weight: var(--dv-font-weight-bold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--dv-color-primary-contrast);
  background: var(--dv-color-primary);
}
.card--surface .card__date {
  position: static;
  background: none;
  padding: 0;
  font-size: 0.76rem;
  color: var(--dv-color-muted-ink);
}
.card--surface .card__price {
  display: block;
  margin: 0 0 0.5rem;
}
.card--surface .card__content h3 {
  font-size: 1.2rem;
  margin: 0 0 0.45rem;
  line-height: 1.25;
}
.card--surface .card__excerpt {
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--dv-color-muted-ink);
  margin: 0;
}
.card--surface .card__excerpt p:last-child { margin-bottom: 0; }
.card--link.card--surface:hover { background: var(--dv-color-bg-alt); }
.card--surface .card__aside { display: none !important; }

/* --- 8.1 Promo embed carousel (slick) -------------------------------------- */
.promo-embed__track:not(.slick-initialized) {
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}
body.skin-ironmonger .promo-embed--carousel .promo-embed__track {
  overflow: hidden !important;
  position: relative;
}
body.skin-ironmonger .promo-embed--carousel .promo-embed__track.slick-initialized {
  display: block !important;
}
body.skin-ironmonger .promo-embed--carousel .promo-embed__track .slick-list {
  overflow: hidden;
  margin: 0 -0.75rem;
}
body.skin-ironmonger .promo-embed--carousel .promo-embed__track .slick-slide {
  padding: 0 0.75rem;
  height: auto;
}
body.skin-ironmonger .promo-embed--carousel .promo-embed__track .slick-track {
  display: flex !important;
  align-items: stretch !important;
}
body.skin-ironmonger .promo-embed--carousel .promo-embed__track .slick-slide {
  display: flex !important;
  flex-direction: column;
}
body.skin-ironmonger .promo-embed--carousel .promo-embed__track .slick-slide > div {
  display: flex !important;
  flex-direction: column;
  flex: 1 1 auto;
  width: 100%;
  height: 100% !important;
}
body.skin-ironmonger .promo-embed--carousel .promo-embed__item {
  display: flex !important;
  flex-direction: column;
  flex: 1 1 auto;
  width: 100%;
  max-width: none;
  height: 100% !important;
}
body.skin-ironmonger .promo-embed--carousel a.card--surface.card--link,
body.skin-ironmonger .promo-embed--carousel .card--surface {
  display: flex !important;
  flex-direction: column;
  flex: 1 1 auto;
  width: 100%;
  min-height: 100%;
}
body.skin-ironmonger .promo-embed--carousel .card--surface .card__image {
  flex: 0 0 auto;
}
body.skin-ironmonger .promo-embed--carousel .card--surface .card__content {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
body.skin-ironmonger .promo-embed--carousel .card--surface .card__content h3 {
  flex: 0 0 auto;
}
body.skin-ironmonger .promo-embed--carousel .card--surface .card__excerpt {
  flex: 1 1 auto;
}
body.skin-ironmonger .promo-embed--carousel .card--surface .card__price {
  flex: 0 0 auto;
  margin: 0;
  margin-top: auto;
  padding-top: 0.65rem;
  border-top: var(--ir-rule);
}
body.skin-ironmonger .promo-embed--carousel .card--surface .card__image {
  flex: 0 0 auto;
  aspect-ratio: 4 / 3;
}
body.skin-ironmonger .promo-embed--carousel .card--surface .card__image img {
  width: 100% !important;
  height: 100% !important;
  aspect-ratio: 4 / 3 !important;
  object-fit: cover !important;
  object-position: center;
  display: block !important;
}
body.skin-ironmonger .promo-embed--carousel .promo-embed__track--nav-arrows-below.slick-initialized {
  padding-bottom: 3.25rem !important;
}
body.skin-ironmonger .promo-embed--carousel .promo-embed__track--nav-arrows-below .slick-prev,
body.skin-ironmonger .promo-embed--carousel .promo-embed__track--nav-arrows-below .slick-next {
  top: auto !important;
  bottom: 0 !important;
  transform: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}
body.skin-ironmonger .promo-embed--carousel .promo-embed__track--nav-arrows-below .slick-prev {
  left: calc(50% - 3.25rem) !important;
  right: auto !important;
}
body.skin-ironmonger .promo-embed--carousel .promo-embed__track--nav-arrows-below .slick-next {
  left: calc(50% - 0.5rem) !important;
  right: auto !important;
}
body.skin-ironmonger .promo-embed--carousel .promo-embed__track--nav-arrows-overlay .slick-prev,
body.skin-ironmonger .promo-embed--carousel .promo-embed__track--nav-arrows-overlay .slick-next {
  top: 38% !important;
  bottom: auto !important;
  transform: translateY(-50%) !important;
}
body.skin-ironmonger .promo-embed--carousel .promo-embed__track--nav-arrows-overlay .slick-prev {
  left: 0.35rem !important;
  right: auto !important;
}
body.skin-ironmonger .promo-embed--carousel .promo-embed__track--nav-arrows-overlay .slick-next {
  left: auto !important;
  right: 0.35rem !important;
}

.card--row {
  counter-increment: none;
  display: grid;
  grid-template-columns: 3rem 12.5rem 1fr auto;
  align-items: center;
  gap: 1.8rem;
  padding-block: 1.25rem;
  border-bottom: var(--ir-rule);
  background: transparent;
  border-radius: var(--dv-radius);
  box-shadow: none;
  text-decoration: none;
  transition: background .18s ease;
}
.card--row::before {
  content: counter(promo-row, decimal-leading-zero);
  font-family: var(--dv-font-body);
  font-size: .78rem;
  color: var(--dv-color-secondary);
}
.card--link.card--row:hover { background: var(--dv-color-bg-alt); }
.card--row .card__image { overflow: hidden; }
.card--row .card__image img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; display: block; }
.card--row .card__meta { display: flex; align-items: center; gap: .9rem; margin-bottom: .45rem; }
.card--row .card__cat {
  position: static;
  padding: .2rem .55rem;
  background: var(--dv-color-primary);
  color: var(--dv-color-primary-contrast);
  font-size: .6rem;
  letter-spacing: .18em;
  text-transform: uppercase;
}
.card--row .card__date { position: static; background: none; padding: 0; font-size: .76rem; color: var(--dv-color-muted-ink); }
.card--row .card__content h3 { font-size: 1.4rem; margin: 0 0 .35rem; }
.card--row .card__content p { color: var(--dv-color-muted-ink); margin: 0; font-size: .94rem; }
.card--row .card__aside { text-align: right; min-width: 7rem; }

/* price - inline flow, but stacked to three lines in the row's fourth column */
.card--row .card__price { display: block; }
.card--row .card__price__prefix,
.card--row .card__price__amount,
.card--row .card__price__unit { display: block; }
.card__price__prefix,
.room__price__prefix,
.promo-single__price-line__prefix {
  font-size: .6rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--dv-color-muted-ink);
}
.card__price__amount,
.room__price__amount,
.promo-single__price-line__amount {
  font-family: var(--dv-font-heading);
  font-weight: 400;
  font-size: 1.6rem;
  color: var(--dv-color-accent);
  line-height: 1.1;
}
.card__price__unit,
.room__price__unit,
.promo-single__price-line__unit { font-size: .7rem; color: var(--dv-color-muted-ink); }
/* room + single keep inline flow (only the row card stacks) */
.room__price, .promo-single__price-line { display: block; margin-top: 1rem; }
.promo-single__price-line { margin-top: 1.4rem; }
.promo-single__price-line__amount { font-size: 2rem; }

/* --- 9. rooms --------------------------------------------------------------- */

.room {
  border: var(--ir-rule);
  border-top: var(--ir-rule-heavy);
  background: var(--dv-color-bg);
  height: 100%;
  display: flex;
  flex-direction: column;
}
.room__carousel { position: relative; }
.room__carousel img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; display: block; }
.room__nav { position: absolute; inset: auto 0 .6rem; display: flex; justify-content: space-between; padding-inline: .6rem; }
.room__prev, .room__next {
  width: 2rem; height: 2rem;
  border: 0;
  background: var(--dv-color-bg);
  color: var(--dv-color-primary);
  cursor: pointer;
}
.room__content { padding: 1.4rem; display: flex; flex-direction: column; flex: 1; }
.room__content h3 { font-size: 1.35rem; margin: 0 0 .5rem; }
.room__footer { margin-top: auto; }
.room__buttons { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1rem; }
.room-feature { padding: 1.4rem 0; border-top: var(--ir-rule); display: flex; gap: 1rem; }
.room-feature__icon { width: 2rem; height: 2rem; flex: none; color: var(--dv-color-accent); }
.room-feature h3, .room-feature h4 { font-size: 1.05rem; margin: 0 0 .25rem; }
.room-feature p { color: var(--dv-color-muted-ink); font-size: .9rem; margin: 0; }

/* --- 10. blocks ------------------------------------------------------------- */

.promo { position: relative; display: block; overflow: hidden; }
.promo img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; display: block; transition: transform .5s ease; }
.promo:hover img { transform: scale(1.04); }
.promo__overlay {
  position: absolute;
  inset: auto 0 0;
  padding: 1.2rem 1.3rem;
  background: var(--dv-color-primary);
  color: var(--dv-color-primary-contrast);
  font-family: var(--dv-font-heading);
  font-size: 1.2rem;
}

a.gallery { display: block; overflow: hidden; }
a.gallery img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }

.carousel__card { background: var(--dv-color-bg-alt); border-top: var(--ir-rule-heavy); padding: 1.6rem; }
.carousel__nav { display: flex; gap: .5rem; margin-top: 1rem; }

.feature-margin { background: var(--dv-color-bg-alt); }

.embed-container { position: relative; aspect-ratio: 16 / 9; }
.embed-container iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* tables and tabs matter on this skin - dining menus and tariffs */
.info-table { width: 100%; border-collapse: collapse; }
.info-table th, .info-table td { border-bottom: var(--ir-rule); padding: .85rem .6rem; text-align: left; }
.info-table th {
  font-family: var(--dv-font-body);
  font-size: var(--ir-micro);
  font-weight: var(--dv-font-weight-bold);
  letter-spacing: var(--ir-track);
  text-transform: uppercase;
  color: var(--dv-color-muted-ink);
  border-bottom: var(--ir-rule-heavy);
}
.info-table tr:last-child td { border-bottom: 0; }
/* Tables block: beat parent `_info-table.scss` teal price cells. */
body.skin-ironmonger .info-table thead tr th {
  opacity: 1 !important;
}
body.skin-ironmonger .info-table tbody tr td {
  color: var(--dv-color-text) !important;
  font-weight: var(--dv-font-weight-normal) !important;
}
body.skin-ironmonger .info-table tbody tr td:not(:first-child) {
  font-family: var(--dv-font-heading);
  color: var(--dv-color-heading) !important;
  text-align: right;
}

.table-item { border-top: var(--ir-rule-heavy); padding-top: 1.4rem; }

.features__slide { padding-top: 1.8rem; }

.features .slide__content h3 {
  font-family: var(--dv-font-heading);
  font-size: var(--dv-h3);
  margin: 0 0 .75rem;
}

.accordion, .faq .accordion { border-top: var(--ir-rule-heavy); }
.accordion-item { border: 0; border-bottom: var(--ir-rule); background: transparent; }
.accordion-button {
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: 1.15rem 0;
  font-family: var(--dv-font-heading);
  font-size: 1.15rem;
  color: var(--dv-color-heading);
}
.accordion-button:not(.collapsed) { background: transparent; color: var(--dv-color-accent); box-shadow: none; }
.accordion-body { padding: 0 0 1.2rem; color: var(--dv-color-muted-ink); }
.faq-intro { margin-bottom: 1.6rem; }


/* --- 10.3 Info panel (INFO-PANEL CD Oct 2026) ------------------------------- */
/* Scoped to .info-panel--* so Tables block .info-table menus are unchanged. */

body.skin-ironmonger .info-panel--panel .info-panel__panel {
  max-width: 48rem;
  margin-inline: auto;
  text-align: center;
  background: var(--dv-color-bg-alt);
  border-radius: var(--dv-radius-lg);
  padding: 2.5rem 2.75rem;
  border: 0;
  box-shadow: none;
}
body.skin-ironmonger .info-panel--panel .info-panel__heading {
  margin: 0 0 0.875rem;
  font-family: var(--dv-font-heading);
  font-weight: 400;
  font-size: clamp(1.35rem, 2.5vw, 1.75rem);
  letter-spacing: 0;
  text-transform: none;
  color: var(--dv-color-heading);
}
body.skin-ironmonger .info-panel--panel .info-panel__body {
  text-align: center;
}

body.skin-ironmonger .info-panel--table .info-panel__table-wrap {
  max-width: 64rem;
  margin-inline: auto;
}
body.skin-ironmonger .info-panel--table .info-panel__table {
  display: block;
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}
body.skin-ironmonger .info-panel--table .info-panel__table tbody {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
}
body.skin-ironmonger .info-panel--table .info-panel__table tr {
  display: flex;
  flex-direction: column-reverse;
  align-items: center;
  text-align: center;
  gap: 0.625rem;
  padding: 2rem 1.5rem 1.875rem;
  min-width: 0;
  border-top: 0;
}
body.skin-ironmonger .info-panel--table .info-panel__table th,
body.skin-ironmonger .info-panel--table .info-panel__table td {
  display: block;
  width: auto;
  padding: 0;
  border: 0;
  background: transparent;
}
body.skin-ironmonger .info-panel--table .info-panel__table th {
  font-family: var(--dv-font-body);
  font-weight: 400;
  font-size: 0.9375rem;
  letter-spacing: 0;
  text-transform: none;
  color: var(--dv-color-muted-ink);
}
body.skin-ironmonger .info-panel--table .info-panel__table td {
  font-family: var(--dv-font-heading);
  font-weight: 400;
  font-size: clamp(1.75rem, 3.2vw, 2.875rem);
  line-height: 1;
  color: var(--dv-color-heading);
}

body.skin-ironmonger .info-panel--strip:not(.info-panel--full-bleed) .info-panel__strip {
  justify-content: center;
  gap: 0;
  border-block: 1px solid var(--dv-color-border);
  padding-block: 1.625rem;
}
body.skin-ironmonger .info-panel--strip:not(.info-panel--full-bleed) .info-panel__strip-item {
  flex: 0 1 auto;
  flex-direction: row;
  align-items: center;
  text-align: left;
  gap: 0.875rem;
  padding: 0 2.5rem;
  border-inline-start: 1px solid var(--dv-color-border);
}
body.skin-ironmonger .info-panel--strip:not(.info-panel--full-bleed) .info-panel__strip-item:first-child {
  border-inline-start: 0;
}
body.skin-ironmonger .info-panel--strip .info-panel__icon {
  flex: none;
  width: 3rem;
  height: 3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0;
  background: transparent;
  border: 0;
}
body.skin-ironmonger .info-panel--strip .info-panel__icon img {
  width: 3rem;
  height: 3rem;
  object-fit: contain;
}
body.skin-ironmonger .info-panel--strip .info-panel__label {
  font-family: var(--dv-font-body);
  font-weight: 700;
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--dv-color-muted-ink);
}
body.skin-ironmonger .info-panel--strip .info-panel__value {
  font-family: var(--dv-font-heading);
  font-weight: 400;
  font-size: 1.25rem;
  line-height: 1.2;
  color: var(--dv-color-heading);
}

body.skin-ironmonger .info-panel--strip.info-panel--full-bleed {
  background: var(--dv-color-primary);
  border-block: 0;
}
body.skin-ironmonger .info-panel--strip.info-panel--full-bleed .info-panel__strip {
  max-width: 68.75rem;
  margin-inline: auto;
  padding: 2.125rem var(--dv-gutter, 1.5rem);
}
body.skin-ironmonger .info-panel--strip.info-panel--full-bleed .info-panel__strip-item {
  flex: 1 1 0;
  justify-content: center;
  border-inline-start-color: color-mix(in srgb, var(--dv-color-primary-contrast) 35%, transparent);
}
body.skin-ironmonger .info-panel--strip.info-panel--full-bleed .info-panel__label {
  color: color-mix(in srgb, var(--dv-color-primary-contrast) 72%, transparent);
}
body.skin-ironmonger .info-panel--strip.info-panel--full-bleed .info-panel__value {
  color: var(--dv-color-primary-contrast);
}
body.skin-ironmonger .info-panel--strip.info-panel--full-bleed .info-panel__icon {
  background: transparent;
  border: 0;
  border-radius: 0;
}

@media (max-width: 767.98px) {
  body.skin-ironmonger .info-panel--table .info-panel__table tbody {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  body.skin-ironmonger .info-panel--table .info-panel__table tr {
    padding: 1.375rem 0.875rem;
  }
  body.skin-ironmonger .info-panel--table .info-panel__table td {
    font-size: clamp(1.35rem, 6vw, 2.125rem);
  }
  body.skin-ironmonger .info-panel--strip:not(.info-panel--full-bleed) .info-panel__strip {
    flex-direction: column;
    align-items: stretch;
    padding-block: 0;
    border-block: 1px solid var(--dv-color-border);
  }
  body.skin-ironmonger .info-panel--strip:not(.info-panel--full-bleed) .info-panel__strip-item {
    flex: none;
    width: 100%;
    border-inline-start: 0;
    border-top: 1px solid var(--dv-color-border);
    padding: 0.875rem 0;
  }
  body.skin-ironmonger .info-panel--strip:not(.info-panel--full-bleed) .info-panel__strip-item:first-child {
    border-top: 0;
  }
  body.skin-ironmonger .info-panel--strip.info-panel--full-bleed .info-panel__strip {
    flex-direction: column;
    padding: 0.5rem 1.5rem;
  }
  body.skin-ironmonger .info-panel--strip.info-panel--full-bleed .info-panel__strip-item {
    justify-content: flex-start;
    text-align: left;
    border-inline-start: 0;
    border-top: 1px solid color-mix(in srgb, var(--dv-color-primary-contrast) 35%, transparent);
    padding: 0.875rem 0;
  }
  body.skin-ironmonger .info-panel--strip.info-panel--full-bleed .info-panel__strip-item:first-child {
    border-top: 0;
  }
}

body.skin-ironmonger .info-panel--panel .info-panel__panel {
  background: #fff;
  border: var(--ir-rule-heavy);
  border-radius: 0;
  text-align: left;
  box-shadow: 6px 6px 0 var(--dv-color-primary);
  padding: 2.125rem 2.375rem;
}
body.skin-ironmonger .info-panel--panel .info-panel__heading {
  font-family: var(--dv-font-body);
  font-weight: 600;
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--dv-color-accent);
}
body.skin-ironmonger .info-panel--panel .info-panel__body {
  text-align: left;
}
body.skin-ironmonger .info-panel--table .info-panel__table tbody {
  border: var(--ir-rule-heavy);
  background: #fff;
}
body.skin-ironmonger .info-panel--table .info-panel__table tr {
  align-items: flex-start;
  text-align: left;
  padding: 1.75rem 1.5rem;
  border-top: var(--ir-rule-heavy);
  border-inline-start: var(--ir-rule-heavy);
}
/* 4-up grid: only row 2+ gets a top rule (not cells 3-4 on row 1). */
body.skin-ironmonger .info-panel--table .info-panel__table tr:nth-child(-n+4) {
  border-top: 0;
}
body.skin-ironmonger .info-panel--table .info-panel__table tr:nth-child(4n+1),
body.skin-ironmonger .info-panel--table .info-panel__table tr:first-child {
  border-inline-start: 0;
}
body.skin-ironmonger .info-panel--table .info-panel__table th {
  font-weight: 600;
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
body.skin-ironmonger .info-panel--strip:not(.info-panel--full-bleed) .info-panel__strip {
  border: var(--ir-rule-heavy);
  padding: 0;
}
body.skin-ironmonger .info-panel--strip:not(.info-panel--full-bleed) .info-panel__strip-item {
  flex: 1 1 0;
  border-inline-start: var(--ir-rule-heavy);
  padding: 1.25rem 1.375rem;
}
body.skin-ironmonger .info-panel--strip .info-panel__icon {
  border-radius: 0;
  background: transparent;
  border: 0;
  width: 3rem;
  height: 3rem;
}
body.skin-ironmonger .info-panel--strip .info-panel__icon img {
  width: 3rem;
  height: 3rem;
}
body.skin-ironmonger .info-panel--strip.info-panel--full-bleed {
  background: var(--dv-color-primary);
}
body.skin-ironmonger .info-panel--strip.info-panel--full-bleed .info-panel__strip {
  padding: 0 var(--dv-gutter, 1.5rem);
}
body.skin-ironmonger .info-panel--strip.info-panel--full-bleed .info-panel__strip-item {
  padding: 1.875rem 1.625rem;
  border-inline-start-color: #6B5458;
}
body.skin-ironmonger .info-panel--strip.info-panel--full-bleed .info-panel__icon {
  background: transparent;
  border: 0;
  border-radius: 0;
  width: 3rem;
  height: 3rem;
}
body.skin-ironmonger .info-panel--strip.info-panel--full-bleed .info-panel__icon img {
  width: 3rem;
  height: 3rem;
}
@media (max-width: 767.98px) {
  body.skin-ironmonger .info-panel--table .info-panel__table tr:nth-child(-n+4) {
    border-top: var(--ir-rule-heavy);
  }
  body.skin-ironmonger .info-panel--table .info-panel__table tr:nth-child(-n+2) {
    border-top: 0;
  }
  body.skin-ironmonger .info-panel--strip:not(.info-panel--full-bleed) .info-panel__strip-item,
  body.skin-ironmonger .info-panel--strip.info-panel--full-bleed .info-panel__strip-item {
    border-top: var(--ir-rule-heavy);
  }
}

/* --- 11. module surfaces ---------------------------------------------------- */

.reviews { border-top: var(--ir-rule-heavy); padding-top: 1.5rem; }
.reviews__title { font-size: 1.3rem; margin: 0 0 1rem; }
.reviews__score { display: flex; align-items: baseline; gap: .8rem; flex-wrap: wrap; }
.reviews__rating { font-family: var(--dv-font-heading); font-size: 2.5rem; color: var(--dv-color-primary); }
.reviews__stars { display: inline-flex; gap: .12rem; }
.reviews__star { width: 1rem; height: 1rem; display: inline-block; background: var(--dv-color-border); }
.reviews__star--full { background: var(--dv-star-color); }
.reviews__star--half { background: linear-gradient(90deg, var(--dv-star-color) 50%, var(--dv-color-border) 50%); }
.reviews__count { font-size: .8rem; color: var(--dv-color-muted-ink); }
.reviews__list { list-style: none; margin: 1.4rem 0 0; padding: 0; display: grid; gap: 1.1rem; }
.reviews__item { border-top: var(--ir-rule); padding-top: 1.1rem; }
.reviews__item-head { display: flex; align-items: center; gap: .6rem; }
.reviews__avatar { width: 2rem; height: 2rem; border-radius: 50%; }
.reviews__author { font-weight: var(--dv-font-weight-bold); }
.reviews__when { font-size: .76rem; color: var(--dv-color-muted-ink); }
.reviews__text { color: var(--dv-color-muted-ink); margin: .5rem 0 0; }

/* --- 11.1b Reviews + calendar hooks (engine markup, 19 Aug) ---------------- */
/* Added after reading components/reviews.twig and components/promo-calendar.twig.
   Hooks the earlier §11 pass did not cover because they were written before the
   rendered markup was available. */

/* the provider modifier exists so a second source can diverge later */
.reviews--google { }
/* empty is a real third state alongside full and half */
.reviews__star--empty { background: var(--dv-color-border); }
/* the count wraps an external link */
.reviews__count a { color: var(--dv-color-accent-ink); text-decoration: none; }
.reviews__count a:hover { color: var(--dv-color-link-hover); text-decoration: underline; text-underline-offset: 2px; }
/* per-review stars, smaller than the headline set */
.reviews__item-rating {
  display: inline-flex;
  gap: .1rem;
  margin-top: .35rem;
}
.reviews__item-rating .reviews__star { width: .8rem; height: .8rem; }

.promo-calendar__title {
  font-family: var(--dv-font-heading);
  font-size: var(--dv-h3);
  color: var(--dv-color-heading);
  margin: 0 0 .8rem;
}
/* month and list are the two views; both share the head */
.promo-calendar--month .promo-calendar__grid { width: 100%; }
.promo-calendar__nav--prev { margin-right: auto; }
.promo-calendar__nav--next { margin-left: auto; }
/* a day carrying events is distinct from today - both can apply at once */
.promo-calendar__cell.has-events .promo-calendar__day { font-weight: var(--dv-font-weight-bold); color: var(--dv-color-heading); }
.promo-calendar__grid th { text-align: center; }

.promo-calendar__head { display: flex; align-items: center; justify-content: space-between; border-bottom: var(--ir-rule-heavy); padding-bottom: .8rem; margin-bottom: 1rem; }
.promo-calendar__month { font-family: var(--dv-font-heading); font-size: 1.5rem; color: var(--dv-color-heading); }
.promo-calendar__nav { text-decoration: none; padding: .35rem .7rem; border: var(--ir-rule); }
.promo-calendar__grid { width: 100%; border-collapse: collapse; table-layout: fixed; }
.promo-calendar__grid th {
  font-size: .62rem;
  letter-spacing: var(--ir-track);
  text-transform: uppercase;
  color: var(--dv-color-muted-ink);
  padding-bottom: .5rem;
  font-weight: var(--dv-font-weight-bold);
}
.promo-calendar__cell { border: var(--ir-rule); vertical-align: top; height: 6.2rem; padding: .4rem; }
.promo-calendar__cell--empty { background: var(--dv-color-bg-alt); }
.promo-calendar__cell.is-today { outline: 2px solid var(--dv-color-accent-ink); outline-offset: -2px; }
.promo-calendar__day { font-size: .76rem; color: var(--dv-color-muted-ink); }
.promo-calendar__events { list-style: none; margin: .3rem 0 0; padding: 0; display: grid; gap: .2rem; }
.promo-calendar__event a {
  display: block;
  font-size: .68rem;
  line-height: 1.3;
  padding: .2rem .38rem;
  background: var(--dv-event-color);
  color: var(--dv-color-primary-contrast);
  text-decoration: none;
}
.promo-calendar__event--events a { background: var(--dv-color-accent); }
.promo-calendar__list { list-style: none; margin: 0; padding: 0; border-top: var(--ir-rule-heavy); }
.promo-calendar__list-item { border-bottom: var(--ir-rule); }
.promo-calendar__list-item a { display: flex; gap: 1.2rem; padding: .95rem 0; text-decoration: none; }
.promo-calendar__list-date { font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; color: var(--dv-color-muted-ink); min-width: 7rem; }
.promo-calendar__list-title { font-family: var(--dv-font-heading); font-size: 1.1rem; color: var(--dv-color-heading); }
.promo-calendar__empty { color: var(--dv-color-muted-ink); }

/* function rooms carry real weight on this skin - private hire is the sell */
/* --- 11 / 11.2 Function rooms (ROOM-01 - Sep 2026 CD comp) ------------------ */
.function-rooms {
  display: flex;
  flex-direction: column;
  gap: var(--dv-content-block-gap, 2.25rem);
}
.function-room {
  box-sizing: border-box;
  background: var(--dv-color-bg);
  border: var(--ir-rule-heavy);
  padding: clamp(1.25rem, 2vw, 1.75rem);
  margin-bottom: 0;
}
.function-room__shell {
  align-items: start;
}
.function-room__media,
.function-room__body {
  align-self: start;
}
.function-room__matrix-wrap[hidden] {
  display: none !important;
}
.function-room__image {
  border-radius: 0;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--dv-color-heading) 10%, transparent);
}
/* Divide panel CD: 2px primary frame, cream page, A/B section bars, accent title. */
.function-room__divide-panel {
  background: var(--dv-color-bg);
  border: var(--ir-rule-heavy);
  border-radius: 0;
  color: inherit;
  padding: 0.875rem 1rem;
  transition: border-color .2s ease;
}
.function-room__divide-panel:hover,
.function-room.is-matrix-open .function-room__divide-panel {
  border-color: var(--dv-color-primary);
  background: var(--dv-color-bg);
}
.function-room__divide-title,
.function-room__matrix-heading,
.function-room__matrix-foot-label {
  color: var(--dv-color-accent-ink);
  font-family: var(--dv-font-body);
  font-weight: var(--dv-font-weight-bold);
  letter-spacing: var(--ir-track);
}
.function-room__divide-caret {
  color: var(--dv-color-heading);
  font-size: 0.625rem;
  line-height: 1;
}
.function-room__divide-bars {
  gap: 0.35rem;
}
.function-room__divide-bar {
  border-radius: 0;
  font-family: var(--dv-font-body);
  font-weight: var(--dv-font-weight-bold);
  font-size: 0.71875rem;
  letter-spacing: 0.1em;
}
.function-room__divide-bar:nth-child(odd) {
  background: var(--dv-color-primary);
  color: var(--dv-color-primary-contrast);
}
.function-room__divide-bar:nth-child(even) {
  background: var(--dv-color-bg-alt);
  color: var(--dv-color-primary);
}
.function-room__divide-note { color: var(--dv-color-muted-ink); }
.function-room__divide-toggle {
  color: var(--dv-color-heading);
  border-bottom: 1px solid var(--dv-rule-accent);
  font-family: var(--dv-font-body);
  font-weight: var(--dv-font-weight-bold);
}
.function-room__divide-panel:hover .function-room__divide-toggle,
.function-room.is-matrix-open .function-room__divide-toggle {
  color: var(--dv-color-heading);
  border-bottom-color: var(--dv-rule-accent);
}
.function-room__title {
  font-family: var(--dv-font-heading);
  font-size: var(--dv-h3);
  font-weight: var(--dv-font-weight-bold);
  color: var(--dv-color-heading);
}
.function-room__desc {
  font-size: .9375rem;
  line-height: 1.65;
  color: var(--dv-color-muted-ink);
  margin: 0 0 1.25rem;
}
.function-room__desc :first-child { margin-top: 0; }
.function-room__desc :last-child { margin-bottom: 0; }
.function-room__desc p { color: inherit; }
.function-room__badge {
  background: var(--dv-color-bg-alt);
  border: 1px solid var(--dv-color-border);
  color: var(--dv-color-accent-ink);
  font-family: var(--dv-font-body);
}
.function-room__qualifier {
  background: var(--dv-color-bg-alt);
  border: 1px solid var(--dv-color-border);
  color: var(--dv-color-heading);
  font-family: var(--dv-font-body);
}
.function-room__dims { border-color: var(--dv-color-border); }
.function-room__dim-label {
  color: var(--dv-color-accent-ink);
  font-family: var(--dv-font-body);
  font-size: .656rem;
  letter-spacing: var(--ir-track);
  text-transform: uppercase;
  font-weight: var(--dv-font-weight-bold);
}
.function-room__dim-value {
  font-family: var(--dv-font-heading);
  font-size: 1.25rem;
  color: var(--dv-color-heading);
}
.function-room__capacities th,
.function-room__capacities td,
.function-room__matrix-table th,
.function-room__matrix-table td {
  border-color: var(--dv-color-border);
}
.function-room__capacities th,
.function-room__matrix-table thead th {
  font-family: var(--dv-font-body);
  font-weight: var(--dv-font-weight-bold);
  font-size: .656rem;
  letter-spacing: var(--ir-track);
  text-transform: uppercase;
  color: var(--dv-color-accent-ink);
}
.function-room__capacities thead th.function-room__col-capacity,
.function-room__matrix-table thead th.function-room__matrix-col--whole {
  color: var(--dv-color-accent-ink);
}
.function-room__matrix-table thead th.function-room__matrix-col--whole {
  background: var(--dv-color-bg-alt);
  border-radius: 0;
}
.function-room__col-layout,
.function-room__matrix-table tbody td:first-child,
.function-room__layout-name { color: var(--dv-color-text); }
.function-room__layout-note { color: var(--dv-color-muted); }
.function-room__col-capacity,
.function-room__matrix-table tbody td:not(:first-child) {
  font-family: var(--dv-font-heading);
  font-size: 1.0625rem;
  color: var(--dv-color-heading);
  text-align: right;
}
.function-room__matrix-cell--whole {
  background: var(--dv-color-bg-alt);
  font-size: 1.125rem;
}
.function-room__matrix-foot-row { background: var(--dv-color-bg-alt); }
.function-room__matrix-foot-row td {
  font-family: var(--dv-font-body);
  font-weight: var(--dv-font-weight-bold);
  font-size: .6875rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--dv-color-accent-ink);
}
.function-room__matrix-foot-row .function-room__matrix-cell--meta {
  font-weight: 400;
  font-size: .84375rem;
  letter-spacing: 0;
  text-transform: none;
  color: var(--dv-color-muted);
}
.function-room__matrix-foot-row .function-room__matrix-cell--whole.function-room__matrix-cell--meta {
  color: var(--dv-color-heading);
  font-weight: 700;
}
.function-room__matrix-wrap { border-top-color: var(--dv-color-border); }
.function-room__matrix-group-title { color: var(--dv-color-heading); font-weight: var(--dv-font-weight-bold); }
.function-room__matrix-pair dt { color: var(--dv-color-muted); font-size: .82rem; }
.function-room__matrix-pair dd {
  font-family: var(--dv-font-heading);
  color: var(--dv-color-heading);
  font-weight: var(--dv-font-weight-bold);
}
.function-room__actions {
  margin-top: 1.375rem;
  margin-bottom: 0;
}
.function-room__actions .function-room__cta--enquire {
  display: inline-block;
  font-family: var(--dv-font-body);
  font-weight: var(--dv-font-weight-bold);
  font-size: var(--ir-micro);
  letter-spacing: var(--ir-track);
  text-transform: uppercase;
  text-decoration: none;
  color: var(--dv-color-primary-contrast);
  background: var(--dv-color-primary);
  padding: .8125rem 1.375rem;
  border-radius: var(--dv-radius);
  border: 0;
  transition: background-color .25s ease, border-color .25s ease, color .25s ease;
}
.function-room__actions .function-room__cta--enquire:hover {
  background: var(--dv-color-primary);
  color: var(--dv-color-primary-contrast);
}
.function-room__actions .function-room__cta--pdf {
  display: inline-block;
  font-family: var(--dv-font-body);
  font-weight: var(--dv-font-weight-bold);
  font-size: var(--ir-micro);
  letter-spacing: var(--ir-track);
  text-transform: uppercase;
  text-decoration: none;
  color: var(--dv-color-link);
  border: 0;
  border-bottom: 1px solid var(--dv-rule-accent);
  padding: 0 0 .1875rem;
  background: transparent;
}
.function-room__actions .function-room__cta--pdf:hover {
  color: var(--dv-color-accent-ink);
}


.enquiry-form { background: var(--dv-color-bg-alt); border-top: var(--ir-rule-heavy); padding: 2rem; }
.enquiry-form__title { font-size: 1.6rem; margin: 0 0 .6rem; }
.enquiry-form__intro { color: var(--dv-color-muted-ink); margin-bottom: 1.4rem; }
.ff-el-input--label label,
.wpcf7 label { font-size: .64rem; font-weight: var(--dv-font-weight-bold); letter-spacing: var(--ir-track); text-transform: uppercase; color: var(--dv-color-muted-ink); }
.ff-el-form-control,
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 textarea {
  background: var(--dv-color-bg);
  border: var(--ir-rule);
  border-radius: var(--dv-radius);
  padding: .75rem .9rem;
  font-family: var(--dv-font-body);
}
.ff-el-progress-bar,
.ff-step-header .ff-el-progress-bar,
.ff-el-progress-status { background-color: var(--dv-form-accent); }
.ff-step-titles li.ff_active { color: var(--dv-color-primary); }

.social-wall { margin-block: 1rem; }
.juicer-feed .j-text, #curator-feed-default-layout { font-family: var(--dv-font-body) !important; }

.button--download::after { content: " \2193"; }
.modal-content { background: var(--dv-color-bg); border: var(--ir-rule); border-radius: var(--dv-radius); }
.modal-header { border-bottom: var(--ir-rule-heavy); }
.modal-footer { border-color: var(--dv-color-border); }
.modal-title { font-family: var(--dv-font-heading); color: var(--dv-color-heading); }

/* --- 12. chrome ------------------------------------------------------------- */

.page-title { position: relative; background: var(--dv-color-bg-alt); border-bottom: var(--ir-rule-heavy); }
.page-title__background { position: absolute; inset: 0; background-size: cover; background-position: center; }
.page-title__background::after { content: ""; position: absolute; inset: 0; background: rgba(59, 44, 47, .48); }
.page-title__overlay { position: relative; padding-block: 4.5rem; }
.page-title h1 { font-size: clamp(1.9rem, 3.4vw, 2.9rem); color: var(--dv-color-primary-contrast); }
.page-title--no-bg h1 { color: var(--dv-color-heading); }
.page-title--tall .page-title__overlay { padding-block: 7.5rem; }
/* Parent `_page-title.scss` padding/margin + deep-page-title (news/promo singles). */
body.skin-ironmonger .page-title {
  padding: 0 !important;
  margin-bottom: 0 !important;
}
body.skin-ironmonger .page-title::before {
  display: none !important;
}
body.skin-ironmonger:not(.home):not(.deep-page-title) .page-title__overlay {
  padding-block: 2.25rem 2rem;
}
body.skin-ironmonger:not(.home):not(.deep-page-title) .page-title--tall .page-title__overlay {
  padding-block: 3.5rem 2rem;
}
body.skin-ironmonger:not(.home) .page-title__overlay .container > div {
  text-align: left;
}
body.skin-ironmonger:not(.home) .page-title h1 {
  margin-inline: 0;
  max-width: none;
}
/* Subnav carries the foot rule - avoid double 2px with .page-title border-bottom. */
body.skin-ironmonger .page-title:has(.subnav) {
  border-bottom: 0;
}
body.skin-ironmonger.deep-page-title .page-title:not(.page-title--no-bg) .page-title__overlay {
  padding-block: clamp(4.5rem, 10vw, 7rem) clamp(2.75rem, 5vw, 4.25rem);
}
body.skin-ironmonger.deep-page-title .page-title--tall .page-title__overlay {
  padding-block: clamp(5.25rem, 11vw, 8.5rem) clamp(2.75rem, 5vw, 4.25rem);
}
body.skin-ironmonger.deep-page-title .page-title:has(.page-title__background) {
  min-height: clamp(16rem, 34vw, 24rem);
}
body.skin-ironmonger.deep-page-title .page-title:not(.page-title--no-bg) h1 {
  font-size: clamp(2rem, 4.2vw, 3.15rem);
}
body.skin-ironmonger.deep-page-title .page-title__overlay .container > div {
  display: flex;
  flex-direction: column;
}
body.skin-ironmonger.deep-page-title .page-title #breadcrumbs {
  order: -1;
  margin: 0 0 0.85rem;
  width: 100%;
}
body.skin-ironmonger.deep-page-title .page-title h1 {
  order: 0;
}

.promo-filter { display: flex; flex-wrap: wrap; gap: 0; margin-bottom: 2rem; border-bottom: var(--ir-rule); }
.promo-filter .btn-secondary {
  background: transparent;
  border: 0;
  border-bottom: 3px solid transparent;
  margin-bottom: -1px;
  border-radius: 0;
  color: var(--dv-color-muted-ink);
  font-size: var(--ir-micro);
  font-weight: var(--dv-font-weight-bold);
  letter-spacing: var(--ir-track);
  text-transform: uppercase;
  padding: .8em 1.2em;
}
.promo-filter .btn-secondary:hover { color: var(--dv-color-primary); }
.promo-filter .btn-secondary.active { color: var(--dv-color-primary); border-bottom-color: var(--dv-color-accent); background: transparent; }
.promo-index__empty {
  border-top: var(--ir-rule-heavy);
  border-bottom: var(--ir-rule);
  padding: 3rem 0;
  font-family: var(--dv-font-heading);
  font-size: 1.25rem;
  color: var(--dv-color-muted-ink);
}

.pagination-block { margin-top: 2.6rem; }
.pagination { display: flex; gap: 0; list-style: none; padding: 0; }
.pagination li + li { border-left: var(--ir-rule); }
.pagination a, .pagination span {
  display: block;
  min-width: 2.6rem;
  padding: .6rem;
  text-align: center;
  border: var(--ir-rule);
  border-left: 0;
  text-decoration: none;
  font-size: .82rem;
}
.pagination li:first-child a, .pagination li:first-child span { border-left: var(--ir-rule); }
.pagination a:hover { background: var(--dv-color-bg-alt); }
.pagination .current span,
.pagination li.current span { background: var(--dv-color-primary); border-color: var(--dv-color-primary); color: var(--dv-color-primary-contrast); }

/* --- 13. footer + newsletter ------------------------------------------------ */

.newsletter { background: var(--dv-color-primary); color: var(--dv-color-primary-contrast); padding-block: 4rem; }
.newsletter__form { display: grid; grid-template-columns: repeat(3, 1fr) auto; gap: .9rem; align-items: end; text-align: left; }
.form__group label { display: block; font-size: .62rem; font-weight: var(--dv-font-weight-bold); letter-spacing: var(--ir-track); text-transform: uppercase; opacity: .8; margin-bottom: .3rem; }
.form__control {
  width: 100%;
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(251, 250, 247, .4);
  padding: .55rem 0;
  color: var(--dv-color-primary-contrast);
  font-family: var(--dv-font-body);
}
.form__control::placeholder { color: rgba(251, 250, 247, .5); }
.form__group--submit input { background: var(--dv-color-accent); border-color: var(--dv-color-accent); color: var(--dv-color-accent-contrast); }

#footer { background: var(--dv-color-bg-alt); color: var(--dv-color-text); padding-block: 3.6rem 1.4rem; border-top: var(--ir-rule-heavy); }
.footer__info .logo--footer .logo__img,
.footer__info .logo--footer svg { max-height: 44px; width: auto; }
#footer .footer__heading { color: var(--dv-color-heading); letter-spacing: var(--ir-track); }
.footer__address { color: var(--dv-color-muted-ink); margin-block: 1rem; }
.social-links { display: flex; gap: 0; list-style: none; margin: 0; padding: 0; border: var(--ir-rule); width: max-content; }
.social-links li + li { border-left: var(--ir-rule); }
.social-links a { display: grid; place-items: center; width: 2.4rem; height: 2.4rem; }
.social-links svg { width: 1rem; height: 1rem; }
/* Footer: square filled cells + glyph-only partial/social.twig (not bundled disk SVGs). */
body.skin-ironmonger #footer .social-links {
  align-items: stretch;
  /* No frame on the <ul> - outer border drew horizontal hairlines in column gutters. */
  border: 0;
}
body.skin-ironmonger #footer .social-links li {
  display: flex;
  margin: 0;
}
body.skin-ironmonger #footer .social-links li + li {
  border-left: 0;
}
body.skin-ironmonger #footer .social-links li + li > a {
  border-left: var(--ir-rule);
}
body.skin-ironmonger #footer .social-links a,
body.skin-ironmonger.footer-chrome--light #footer .social-links a {
  box-sizing: border-box;
  width: 2.4rem;
  min-width: 2.4rem;
  min-height: 2.4rem;
  flex: 1 1 auto;
  align-self: stretch;
  background: var(--dv-color-primary);
  color: var(--dv-color-primary-contrast) !important;
}
body.skin-ironmonger #footer .social-links a:hover,
body.skin-ironmonger #footer .social-links a:focus-visible,
body.skin-ironmonger.footer-chrome--light #footer .social-links a:hover,
body.skin-ironmonger.footer-chrome--light #footer .social-links a:focus-visible {
  background: var(--dv-color-accent);
  color: var(--dv-color-accent-contrast) !important;
}
body.skin-ironmonger #footer .social-links li svg {
  width: 1.35rem !important;
  height: 1.35rem !important;
}
body.skin-ironmonger #footer .social-links svg path,
body.skin-ironmonger.footer-chrome--light #footer .social-links svg path {
  fill: currentColor !important;
}
body.skin-ironmonger #footer .social-links a[title*="Facebook"] svg {
  transform: scale(1.16);
  transform-origin: center center;
}
body.skin-ironmonger #footer .social-links svg.social-icon--x {
  transform: scale(0.94);
  transform-origin: center center;
}
@media (max-width: 767.98px) {
  body.skin-ironmonger #footer .social-links li svg {
    width: 1.35rem !important;
    height: 1.35rem !important;
  }
}
#footer ul:not(.social-links) { list-style: none; padding: 0; }
#footer li a { text-decoration: none; font-size: .9rem; }
.footer__copy { border-top: var(--ir-rule); margin-top: 2.4rem; padding-top: 1.1rem; font-size: .76rem; color: var(--dv-color-muted-ink); }
.footer__copy p { display: flex; flex-wrap: wrap; gap: .6rem; justify-content: space-between; margin: 0; }
.devision-link-dark svg { height: .9rem; width: auto; }

/* FOCUS RINGS use --dv-color-accent-ink, not --dv-color-accent.
   A focus ring is a non-text UI indicator, so WCAG 1.4.11 wants 3:1 against the
   colour it sits on - and the raw accent failed that on three of the seven skins
   (Thermae 1.81, Esplanade 2.94 on bg-alt, Tidewell's field ring on secondary 1.73).
   accent-ink is the one accent-family token already measured against BOTH grounds in
   every skin, so it clears 3:1 with margin everywhere. All rings are 2px with a 2px
   offset: Nocturne's was 1px, which is harder to see and inconsistent for no reason.
   Conventions §18. */

/* --- 14. states ------------------------------------------------------------- */

.card--link:focus-visible,
.button:focus-visible,
.promo:focus-visible { outline: 2px solid var(--dv-color-accent-ink); outline-offset: 2px; }

/* --- 15. responsive --------------------------------------------------------- */

@media (min-width: 992px) {
  /* Offers / news / promo archive: full-width horizontal list (not Bootstrap multi-col). */
  body.skin-ironmonger .promo-index > [class*="col-"],
  body.skin-ironmonger .filter-results > [class*="col-"],
  body.skin-ironmonger .news-index .row.gx-lg-6 > [class*="col-"] {
    flex: 0 0 100% !important;
    width: 100% !important;
    max-width: 100% !important;
  }
}

@media (min-width: 768px) and (max-width: 991.98px) {
  body.skin-ironmonger .row.promo-index > [class*="col-"],
  body.skin-ironmonger .row.filter-results > [class*="col-"],
  body.skin-ironmonger .news-index .row.gx-lg-6 > [class*="col-"] {
    flex: 0 0 33.333333% !important;
    width: 33.333333% !important;
    max-width: 33.333333% !important;
    display: flex;
    flex-direction: column;
  }
}

@media (max-width: 991.98px) {
  body.skin-ironmonger .promo-index,
  body.skin-ironmonger .filter-results,
  body.skin-ironmonger .news-index .row.gx-lg-6 {
    align-items: stretch;
  }
  body.skin-ironmonger .promo-index > [class*="col-"],
  body.skin-ironmonger .filter-results > [class*="col-"],
  body.skin-ironmonger .news-index .row.gx-lg-6 > [class*="col-"] {
    display: flex;
    flex-direction: column;
  }
  body.skin-ironmonger .promo-index .card--row,
  body.skin-ironmonger .filter-results .card--row,
  body.skin-ironmonger .news-index .card--row {
    display: flex !important;
    flex-direction: column;
    flex: 1 1 auto;
    height: 100%;
    gap: 0.9rem;
    padding-block: 1.25rem;
  }
  body.skin-ironmonger .promo-index .card--row .card__content,
  body.skin-ironmonger .filter-results .card--row .card__content,
  body.skin-ironmonger .news-index .card--row .card__content {
    flex: 1 1 auto;
  }
  body.skin-ironmonger .promo-index .card--row::before,
  body.skin-ironmonger .filter-results .card--row::before,
  body.skin-ironmonger .news-index .card--row::before {
    display: none;
  }
  body.skin-ironmonger .promo-index .card--row .card__aside,
  body.skin-ironmonger .filter-results .card--row .card__aside,
  body.skin-ironmonger .news-index .card--row .card__aside {
    text-align: left;
  }
  body.skin-ironmonger .promo-index .card--row .card__price__prefix,
  body.skin-ironmonger .promo-index .card--row .card__price__amount,
  body.skin-ironmonger .promo-index .card--row .card__price__unit,
  body.skin-ironmonger .filter-results .card--row .card__price__prefix,
  body.skin-ironmonger .filter-results .card--row .card__price__amount,
  body.skin-ironmonger .filter-results .card--row .card__price__unit,
  body.skin-ironmonger .news-index .card--row .card__price__prefix,
  body.skin-ironmonger .news-index .card--row .card__price__amount,
  body.skin-ironmonger .news-index .card--row .card__price__unit {
    display: inline;
  }
}

@media (max-width: 767.98px) {
  body.skin-ironmonger .promo-index > [class*="col-"],
  body.skin-ironmonger .filter-results > [class*="col-"],
  body.skin-ironmonger .news-index .row.gx-lg-6 > [class*="col-"] {
    flex: 0 0 100% !important;
    width: 100% !important;
    max-width: 100% !important;
  }
}

@media (min-width: 992px) and (max-width: 1199.98px) {
  .card--row { grid-template-columns: 2.4rem 10rem 1fr auto; gap: 1.2rem; }
  .hero--editorial { gap: 1.8rem; }
}

@media (max-width: 991px) {
  .hero--editorial { grid-template-columns: 1fr; }
  .hero--editorial .hero__panel { padding-block: 2.5rem 1.5rem; }
  .hero--editorial .hero__slide img { min-height: 22rem; }
  body.skin-ironmonger.home .hero-wrapper--editorial {
    display: flow-root;
    position: relative;
    z-index: 0;
  }
  body.skin-ironmonger.home #content {
    position: relative;
    z-index: 0;
    background: var(--dv-color-bg);
  }
  .newsletter__form { grid-template-columns: 1fr; }
}

/* lg-down: hamburger bar + slide-out drawer (matches parent nav breakpoint). */
@media (max-width: 991.98px) {
  :root {
    --ir-mobile-header-height: 4.43rem;
    --ir-mobile-scrim-z: 120;
    --ir-mobile-drawer-z: 125;
    --ir-mobile-bar-z: 130;
  }
  /*
   * Compact logo bar. Strip hidden (Book in drawer opens modal via
   * devision_booking_force_modal). #nav-main lives under .site-header__main.
   */
  body.skin-ironmonger .site-header {
    display: flex;
    flex-direction: column;
  }
  body.skin-ironmonger .mobile-header {
    padding-bottom: 0 !important;
  }
  body.skin-ironmonger .site-header__main {
    display: block !important;
    height: 0;
    min-height: 0;
    padding: 0;
    margin: 0;
    border: 0;
    overflow: visible;
  }
  body.skin-ironmonger .site-header__main > .container {
    display: none !important;
  }
  body.skin-ironmonger .site-header__booking {
    display: none !important;
  }
  body.skin-ironmonger .site-header > .container:has(.mobile-header) {
    order: -1;
    padding-block: 0;
    width: 100%;
    max-width: none;
    margin-inline: 0;
    padding-inline: var(--dv-gutter);
    border-bottom: var(--ir-rule-heavy);
    box-sizing: border-box;
  }
  body.nav-open {
    overflow: hidden;
  }
  body.skin-ironmonger.nav-open::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: var(--ir-mobile-scrim-z, 120);
    background: rgba(20, 20, 20, 0.45);
    pointer-events: auto;
  }
  body.skin-ironmonger.nav-open .site-header {
    z-index: calc(var(--ir-mobile-bar-z, 130) + 1) !important;
  }
  .mobile-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-block: 0.65rem !important;
    padding-bottom: 0.65rem !important;
    position: relative;
    z-index: var(--ir-mobile-bar-z, 130);
    background: var(--dv-color-bg);
    border-bottom: 0;
  }
  /* Parent _logo.scss lg-down: 150 x 41px SVG; ~32% above skeleton mobile logo. */
  body.skin-ironmonger .mobile-header .logo svg {
    width: calc(150px * 1.15 * 1.15);
    height: calc(41px * 1.15 * 1.15);
  }
  body.skin-ironmonger .mobile-header .logo__img {
    max-height: calc(41px * 1.15 * 1.15);
    width: auto;
  }
  body.skin-ironmonger .mobile-header .hamburger .hamburger-inner,
  body.skin-ironmonger .mobile-header .hamburger .hamburger-inner::before,
  body.skin-ironmonger .mobile-header .hamburger .hamburger-inner::after {
    background-color: var(--dv-color-primary);
  }
  body.skin-ironmonger .mobile-header .hamburger.is-active .hamburger-inner,
  body.skin-ironmonger .mobile-header .hamburger.is-active .hamburger-inner::before,
  body.skin-ironmonger .mobile-header .hamburger.is-active .hamburger-inner::after {
    background-color: var(--dv-color-primary) !important;
  }
  body.skin-ironmonger .site-header__main > #nav-main.nav-main {
    position: fixed;
    top: var(--ir-mobile-header-height, 3.35rem);
    right: 0;
    bottom: 0;
    left: auto;
    width: min(85vw, 320px);
    max-width: 100%;
    background: var(--dv-color-bg);
    border-left: var(--ir-rule-heavy);
    box-shadow: var(--dv-shadow-lg);
    z-index: var(--ir-mobile-drawer-z, 125);
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    padding: 1.35rem var(--dv-gutter) 1.25rem !important;
    margin: 0;
    transform: translateX(100%);
    visibility: hidden;
    pointer-events: none;
    overflow: hidden;
    transition: none;
  }
  body.skin-ironmonger .site-header__main > #nav-main.nav-main.is-open,
  body.skin-ironmonger .site-header:has(.hamburger.is-active) .site-header__main > #nav-main.nav-main {
    transform: translateX(0);
    visibility: visible;
    pointer-events: auto;
    display: flex !important;
    transition: transform 0.35s ease, visibility 0.35s ease;
  }
  body.skin-ironmonger .site-header .nav-main .nav-main__drawer-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  body.skin-ironmonger .site-header .nav-main .nav-main__list {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0 !important;
    width: 100% !important;
    padding: 0 !important;
  }
  body.skin-ironmonger .site-header .nav-main .nav-main__list > li {
    width: 100%;
    border-bottom: var(--ir-rule);
  }
  /* Parent _nav-main.scss lg-down: li+li { margin: 10px 0 0 } - drawer uses row borders only. */
  body.skin-ironmonger .site-header__main > #nav-main.nav-main .nav-main__list > li + li {
    margin: 0 !important;
  }
  body.skin-ironmonger .site-header__main > #nav-main.nav-main .nav-main__list > li > a,
  body.skin-ironmonger .site-header__main > #nav-main.nav-main .nav-main__list > li > .nav-main__item-row > a,
  body.skin-ironmonger .site-header__main > #nav-main.nav-main .nav-main__list > li:not(.menu-button) > a,
  body.skin-ironmonger .site-header__main > #nav-main.nav-main .nav-main__list > li:not(.menu-button) > .nav-main__item-row > a,
  body.skin-ironmonger .site-header__main > #nav-main.nav-main .nav-main__dropdown li > a,
  body.skin-ironmonger .site-header__main > #nav-main.nav-main .nav-main__dropdown > li > a {
    font-family: var(--dv-font-body) !important;
    font-size: 1.125rem !important;
    line-height: 1.25;
  }
  body.skin-ironmonger .site-header__main > #nav-main.nav-main .nav-main__list > li > a,
  body.skin-ironmonger .site-header__main > #nav-main.nav-main .nav-main__list > li > .nav-main__item-row > a {
    display: flex;
    align-items: center;
    min-height: 3rem;
    padding: 0.65rem 0 !important;
    font-weight: var(--dv-font-weight-normal) !important;
    letter-spacing: var(--ir-track) !important;
    text-transform: uppercase !important;
  }
  body.skin-ironmonger .site-header__main > #nav-main.nav-main .nav-main__drawer-footer {
    flex: 0 0 auto;
    margin-top: auto;
    padding-top: 1rem;
    border-top: var(--ir-rule);
  }
  body.skin-ironmonger .site-header #nav-main.nav-main .nav-main__drawer-footer .button.button--book {
    position: static !important;
    top: auto !important;
    right: auto !important;
    left: auto !important;
    bottom: auto !important;
    display: flex !important;
    width: 100%;
    justify-content: center;
  }
  /* Parent _nav-main.scss lg-down: white 20px links + open submenus in the drawer. */
  body.skin-ironmonger .site-header__main > #nav-main.nav-main .nav-main__list > li:not(.menu-button) > a,
  body.skin-ironmonger .site-header__main > #nav-main.nav-main .nav-main__list > li:not(.menu-button) > .nav-main__item-row > a {
    color: var(--dv-color-text) !important;
  }
  body.skin-ironmonger .site-header .nav-main .nav-main__list > li.menu-item-has-children > .nav-main__item-row {
    display: flex;
    align-items: stretch;
    width: 100%;
  }
  body.skin-ironmonger .site-header .nav-main .nav-main__list > li.menu-item-has-children > .nav-main__item-row > a {
    flex: 1 1 auto;
    min-width: 0;
  }
  body.skin-ironmonger .site-header .nav-main .nav-main__submenu-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--dv-color-text);
    min-width: 3rem;
    min-height: 3rem;
    border-left: var(--ir-rule);
  }
  body.skin-ironmonger .site-header .nav-main .nav-main__submenu-caret {
    width: 0.45rem;
    height: 0.45rem;
    border-color: var(--dv-color-primary);
  }
  body.skin-ironmonger .site-header .nav-main .nav-main__list > li.menu-item-has-children > a::after,
  body.skin-ironmonger .site-header .nav-main .nav-main__list > li.menu-item-has-children > .nav-main__item-row > a::after {
    display: none !important;
    content: none !important;
  }
  body.skin-ironmonger.nav-open .site-header .nav-main .nav-main__dropdown,
  body.skin-ironmonger .site-header:has(.hamburger.is-active) .nav-main .nav-main__dropdown,
  body.skin-ironmonger .site-header .nav-main.is-open .nav-main__dropdown {
    background-color: transparent !important;
    background-image: none !important;
    border: 0 !important;
    border-left: var(--ir-rule) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    position: static !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    inset: auto !important;
    min-width: 0 !important;
    width: 100% !important;
    padding: 0.25rem 0 0.65rem 0.75rem !important;
    margin: 0 0 0.25rem !important;
  }
  body.skin-ironmonger .site-header__main > #nav-main.nav-main .nav-main__dropdown > li > a,
  body.skin-ironmonger .site-header__main > #nav-main.nav-main .nav-main__dropdown li > a {
    color: var(--dv-color-muted-ink) !important;
    font-weight: var(--dv-font-weight-normal) !important;
    letter-spacing: 0.02em !important;
    text-transform: none !important;
    padding: 0.55rem 0 !important;
    min-height: 2.75rem;
    display: flex;
    align-items: center;
  }
  body.skin-ironmonger .site-header__main > #nav-main.nav-main .nav-main__dropdown > li > a:hover,
  body.skin-ironmonger .site-header__main > #nav-main.nav-main .nav-main__dropdown > li > a:focus-visible {
    color: var(--dv-color-primary) !important;
    background: transparent !important;
  }
  body.skin-ironmonger .site-header__main > #nav-main.nav-main .nav-main__dropdown > li.current-menu-item > a,
  body.skin-ironmonger .site-header__main > #nav-main.nav-main .nav-main__dropdown > li.current_page_item > a {
    color: var(--dv-color-heading) !important;
    font-weight: var(--dv-font-weight-bold) !important;
  }
}

@media (max-width: 767px) {
  :root {
    /* mobile ladder: the ratio compresses from 1.3 to 1.18 rather than each level
       getting its own clamp(). Keeps the tokens as the single source of truth, so
       Branding still moves the whole ladder, and keeps this skin's proportions
       recognisable instead of flattening every skin to the same small-screen scale.
       h5 holds at body size - it is a label, and it never goes below the copy. */
    --dv-h1: calc(var(--dv-font-size-base) * 1.94);
    --dv-h2: calc(var(--dv-font-size-base) * 1.64);
    --dv-h3: calc(var(--dv-font-size-base) * 1.39);
    --dv-h4: calc(var(--dv-font-size-base) * 1.18);
    --dv-h5: calc(var(--dv-font-size-base) * 1);
    --dv-space-section: 4rem;
  }
  .card--row { grid-template-columns: 1fr; gap: .9rem; padding-block: 1.4rem; }
  .card--row::before { display: none; }
  .card--row .card__aside { text-align: left; }
  .card--row .card__price__prefix,
  .card--row .card__price__amount,
  .card--row .card__price__unit { display: inline; }
  .function-room__capacities, .info-table { display: block; overflow-x: auto; }
}

/* =============================================================================
   16. SHARED SURFACES  (added after the §11 pass - see ../../_REMAINING-SURFACES.md)
   Slick controls, skip link, contact + map, promo hub, spinner, Easepick.
   Written against --dv-* tokens only, so this block stays brandable and reads the
   same across all six skins - only the values below differ per skin.
   ============================================================================= */

/* --- 16.1 Slick carousel controls ------------------------------------------- */
/* Applies to the hero slider and the room carousel, both of which are Slick.
   Note (verified Aug 2026): init.slick.js runs the hero with dots: false and no
   arrows (fade autoplay), and the room carousel supplies its own .room__prev /
   .room__next. The dot rules below are therefore INERT on the current build -
   kept because they cost nothing and any skin or client enabling dots gets a
   treatment rather than default Slick chrome. The .slick-track rule is not
   inert: it equalises slide heights.                                            */

.slick-slider { position: relative; }
.slick-track { display: flex; align-items: stretch; }
.slick-slide { height: auto; }
.slick-slide > div { height: 100%; }

.slick-dots {
  position: absolute;
  inset: auto 0 1.25rem;
  display: flex;
  justify-content: center;
  gap: .5rem;
  list-style: none;
  margin: 0;
  padding: 0;
  z-index: 2;
}
.slick-dots li { line-height: 0; }
.slick-dots li button {
  width: 2.25rem;
  height: 3px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: var(--dv-color-secondary);
  color: transparent;
  font-size: 0;
  cursor: pointer;
  opacity: .8;
  transition: background .2s ease, opacity .2s ease;
}
.slick-dots li button:hover { opacity: 1; }
.slick-dots li.slick-active button { background: var(--dv-color-accent); opacity: 1; }
.slick-dots li button::before { display: none; }

.slick-prev,
.slick-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  width: 2.75rem;
  height: 2.75rem;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 0;
  background: var(--dv-color-bg);
  color: var(--dv-color-primary);
  font-size: 0;
  cursor: pointer;
  transition: background .2s ease, color .2s ease;
}
.slick-prev { left: 1rem; }
.slick-next { right: 1rem; }
.slick-prev.slick-disabled,
.slick-next.slick-disabled { opacity: .35; cursor: default; }

/* --- 16.2 Skip link --------------------------------------------------------- */
/* Hidden until focused. Present in base.twig on every page.                     */

.skip-link.screen-reader-text {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.skip-link.screen-reader-text:focus {
  left: 1rem;
  top: 1rem;
  width: auto;
  height: auto;
  padding: .75rem 1.25rem;
  background: var(--dv-color-primary);
  color: var(--dv-color-primary-contrast);
  border-radius: var(--dv-radius);
  font-size: .85rem;
  text-decoration: none;
  outline: 2px solid var(--dv-color-accent-ink);
  outline-offset: 2px;
}

/* --- 16.3 Contact page + map ------------------------------------------------ */
/* #map is initialised by JS with no intrinsic height, so it collapses without   */
/* this rule. That was the actual bug, not the styling.                          */

#map {
  width: 100%;
  height: clamp(20rem, 42vh, 30rem);
  background: var(--dv-color-bg-alt);
  border: 1px solid var(--dv-color-border);
  border-radius: var(--dv-radius);
}
.contact-details { display: grid; gap: 1.25rem; }
.contact-details a { text-decoration: none; }
.contact-details p { margin: 0; }
.contact-details strong,
.contact-details dt {
  display: block;
  font-family: var(--dv-font-body);
  font-size: .66rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--dv-color-muted-ink);
  margin-bottom: .2rem;
}

/* --- 16.4 Promo hub -------------------------------------------------------- */
/* Verified against ajax.js and page-promo-hub.twig (Theo, Aug 2026): the flex
   row is .promo-hub__filter, the buttons themselves carry .js-hub-type /
   .js-hub-cat, and the active one gets a plain .active class - not .is-active
   and not [aria-pressed]. The loader is a separate #js-hub-loader that is
   shown and hidden, so results are not dimmed.                                 */

.js-promo-hub { display: block; }
.promo-hub__filter,
.promo-hub__filter--cat {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  list-style: none;
  margin: 0 0 1.25rem;
  padding: 0;
}
button.js-hub-type,
button.js-hub-cat,
.promo-hub__filter a {
  background: transparent;
  border: 1px solid var(--dv-color-border);
  border-radius: 0;
  padding: .6em 1.15em;
  font-family: var(--dv-font-body);
  font-size: .7rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--dv-color-text);
  text-decoration: none;
  cursor: pointer;
  transition: background .16s ease, border-color .16s ease, color .16s ease;
}
button.js-hub-type:hover,
button.js-hub-cat:hover { border-color: var(--dv-color-primary); color: var(--dv-color-heading); }
button.js-hub-type.active,
button.js-hub-cat.active {
  background: var(--dv-color-primary);
  border-color: var(--dv-color-primary);
  color: var(--dv-color-primary-contrast);
}
.promo-hub__filter--cat { margin-bottom: 2rem; }
#js-hub-results { min-height: 8rem; }
#js-hub-loader:not([hidden]) { display: grid; place-items: center; min-height: 4rem; }
/* --- 16.5 AJAX spinner ----------------------------------------------------- */

.spinner {
  width: 1.75rem;
  height: 1.75rem;
  margin: 2rem auto;
  border: 2px solid var(--dv-color-border);
  border-top-color: var(--dv-color-accent);
  border-radius: 50%;
  animation: dv-spin .7s linear infinite;
}
@keyframes dv-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .spinner { animation-duration: 2s; }
}

/* --- 16.6a Easepick date picker (rewritten 20 Aug, smoke QA) --------------- */
/*
 * WHY THE PREVIOUS RULES DID NOTHING. Easepick renders its panel inside a SHADOW
 * ROOT. Descendant selectors from this stylesheet - .easepick-wrapper .day,
 * .easepick-wrapper .month-name and so on - cannot cross that boundary, so every
 * one of them was inert. The smoke build showed the library defaults throughout:
 * indigo selected days, a pale blue in-range band, red for today, square white
 * panel.
 *
 * CSS custom properties DO inherit through a shadow boundary, and easepick reads a
 * documented set off .easepick-wrapper. That is the only CSS-only route in, so the
 * whole picker is themed through them here - which also keeps it token-driven and
 * therefore brandable.
 *
 * The three that mattered visually:
 *   --easepick-primary-color    selected day fill + header chevrons  (was indigo)
 *   --easepick-in-range-color   the band between two dates           (was pale blue)
 *   --easepick-today-color      today's marker                       (was red)
 *
 * Anything genuinely outside the shadow root - the wrapper's own box - is still
 * styled with ordinary rules below.
 */

.easepick-wrapper {
  --easepick-font-family: var(--dv-font-body);
  --easepick-color: var(--dv-color-text);
  --easepick-background-color: var(--dv-color-bg);
  --easepick-border-radius: var(--dv-radius);
  --easepick-wrapper-box-shadow: var(--dv-shadow-lg);
  --easepick-z-index: 60;

  /* selected days and the header chevrons */
  --easepick-primary-color: var(--dv-color-primary);
  --easepick-secondary-color: var(--dv-color-text);

  /* the in-range band sits behind ~13px numerals, so it takes bg-alt rather than a
     tint of primary - the numerals stay on --dv-color-text and keep their contrast */
  --easepick-in-range-color: var(--dv-color-bg-alt);
  --easepick-day-hover-color: var(--dv-color-accent-ink);

  /* today, and days the provider has closed off */
  --easepick-today-color: var(--dv-color-accent-ink);
  --easepick-locked-color: var(--dv-color-muted-ink);
  --easepick-disabled-color: var(--dv-color-muted-ink);
  --easepick-highlighted-day-color: var(--dv-color-accent-ink);

  /* a little more room than the default 36px, so the panel does not feel cramped
     against these skins' generous field padding */
  --easepick-day-width: 2.4rem;
  --easepick-day-height: 2.2rem;
}

/* the wrapper itself is in the light DOM, so ordinary rules reach it */
.easepick-wrapper { position: relative; z-index: 60; }

/* --- 17.1 Blog ------------------------------------------------------------- */
/* Verified: page-blog.twig routes posts through partial/card.twig with
   class "card--blog", so blog cards inherit this skin's card treatment. Only the
   filter form, the blog-specific card tweaks and the pagination wrapper need
   rules. .button--purple / .button--thic are legacy classes on the Apply button;
   they are neutralised here so it matches the skin's own button. */

.form--light { display: flex; flex-wrap: wrap; gap: 1rem; align-items: end; }
.form--light .form__group { flex: 1 1 16rem; }
.form--light label {
  display: block;
  font-family: var(--dv-font-body);
  font-size: .66rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--dv-color-muted-ink);
  margin-bottom: .3rem;
}
select.form__control {
  width: 100%;
  background: var(--dv-color-bg-alt);
  border: 1px solid var(--dv-color-border);
  border-radius: var(--dv-radius);
  padding: .7rem 2.2rem .7rem .8rem;
  font-family: var(--dv-font-body);
  font-size: .95rem;
  color: var(--dv-color-text);
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--dv-color-muted) 50%),
                    linear-gradient(135deg, var(--dv-color-muted) 50%, transparent 50%);
  background-position: calc(100% - 1.1rem) 1.15rem, calc(100% - .8rem) 1.15rem;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}
select.form__control:focus { outline: 2px solid var(--dv-color-accent-ink); outline-offset: -2px; }
.filters__apply { flex: 0 0 auto; }
.button--purple,
.button--thic {
  background: var(--dv-button-bg);
  border-color: var(--dv-button-bg);
  color: var(--dv-button-color);
}
.button--purple:hover,
.button--thic:hover { background: var(--dv-button-hover-bg); border-color: var(--dv-button-hover-bg); }
/* Blog/news rows use .card--row chip styling - do not recolour label onto primary fill. */
.card--blog.card--row .card__cat {
  color: var(--dv-color-primary-contrast);
  background: var(--dv-color-primary);
}

/* teases - used by search and archive listings */
.tease { border-bottom: 1px solid var(--dv-color-border); padding-block: 1.6rem; }
.tease:first-of-type { padding-top: 0; }
.tease .h2, .tease h2 { font-size: 1.5rem; margin: 0 0 .5rem; }
.tease .h2 a, .tease h2 a { text-decoration: none; color: var(--dv-color-heading); }
.tease .h2 a:hover, .tease h2 a:hover { color: var(--dv-color-link-hover); }
.tease p { color: var(--dv-color-muted-ink); margin: 0; max-width: 68ch; }
.tease img {
  display: block;
  width: 100%;
  max-width: 22rem;
  height: auto;
  margin-top: 1rem;
  border-radius: var(--dv-radius);
}

/* --- 17.2a Related row (promo + news singles) -------------------------------- */
body.skin-ironmonger .promo-single__related-heading {
  font-family: var(--dv-font-heading);
  color: var(--dv-color-heading);
  letter-spacing: 0.06em;
}
body.skin-ironmonger .promo-single__related-col {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
body.skin-ironmonger .promo-single__related .card--surface {
  flex: 1 1 auto;
  width: 100%;
  height: 100%;
}
body.skin-ironmonger .promo-single__related .card--surface .card__content h3 {
  font-size: 1.05rem;
  line-height: 1.3;
}
body.skin-ironmonger .promo-single__related .card--surface .card__excerpt {
  font-size: 0.875rem;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}
@media (max-width: 991.98px) {
  body.skin-ironmonger .promo-single__related-row {
    align-items: stretch;
  }
}

/* --- 17.2 Promo single date title ------------------------------------------ */

.date-title {
  display: inline-block;
  font-family: var(--dv-font-body);
  font-size: .72rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--dv-color-muted-ink);
  padding-bottom: .5rem;
  margin-bottom: 1.1rem;
  border-bottom: 1px solid var(--dv-rule-accent, var(--dv-color-accent));
}
article[class*="post-type-"] > .container:first-of-type { padding-top: 2.5rem; }

/* --- 17.3 Form controls and error states ---------------------------------- */
/* Fluent Forms and CF7 side by side - the theme is form-plugin-agnostic, so both
   get the same treatment. Labels, text inputs, submit and the progress bar are
   already handled in §11; this is everything else. */

.ff-el-form-check,
.wpcf7-list-item { display: flex; align-items: flex-start; gap: .55rem; margin: 0 0 .45rem; }
.wpcf7-list-item { margin-left: 0; }
.ff-el-form-check input[type="checkbox"],
.ff-el-form-check input[type="radio"],
.wpcf7-list-item input[type="checkbox"],
.wpcf7-list-item input[type="radio"] {
  appearance: none;
  flex: none;
  width: 1.05rem;
  height: 1.05rem;
  margin-top: .18rem;
  background: var(--dv-color-bg-alt);
  border: 1px solid var(--dv-color-border);
  cursor: pointer;
}
.ff-el-form-check input[type="radio"],
.wpcf7-list-item input[type="radio"] { border-radius: 50%; }
.ff-el-form-check input[type="checkbox"] { border-radius: var(--dv-radius); }
.ff-el-form-check input[type="checkbox"]:checked,
.wpcf7-list-item input[type="checkbox"]:checked {
  background: var(--dv-color-primary);
  border-color: var(--dv-color-primary);
}
.ff-el-form-check input[type="checkbox"]:checked::after,
.wpcf7-list-item input[type="checkbox"]:checked::after {
  content: "";
  display: block;
  width: .28rem;
  height: .55rem;
  margin: .1rem auto 0;
  border-right: 2px solid var(--dv-color-primary-contrast);
  border-bottom: 2px solid var(--dv-color-primary-contrast);
  transform: rotate(45deg);
}
.ff-el-form-check input[type="radio"]:checked,
.wpcf7-list-item input[type="radio"]:checked {
  border-color: var(--dv-color-primary);
  box-shadow: inset 0 0 0 3px var(--dv-color-bg-alt), inset 0 0 0 1rem var(--dv-color-primary);
}
.ff-el-form-check input:focus-visible,
.wpcf7-list-item input:focus-visible { outline: 2px solid var(--dv-color-accent-ink); outline-offset: 2px; }
.ff-el-form-check-label,
.wpcf7-list-item-label {
  font-family: var(--dv-font-body);
  font-size: .92rem;
  color: var(--dv-color-text);
  cursor: pointer;
  text-transform: none;
  letter-spacing: 0;
}

select.ff-el-form-control,
.wpcf7 select {
  width: 100%;
  background: var(--dv-color-bg-alt);
  border: 1px solid var(--dv-color-border);
  border-radius: var(--dv-radius);
  padding: .7rem .8rem;
  font-family: var(--dv-font-body);
  color: var(--dv-color-text);
}
textarea.ff-el-form-control,
.wpcf7 textarea { min-height: 8rem; resize: vertical; }

/* error and success. --dv-color-accent doubles as the error tone rather than
   introducing a red that no skin declares - a hardcoded red would be the one
   value Branding could not reach. */
.ff-el-is-error .ff-el-form-control,
.wpcf7 .wpcf7-not-valid {
  border-color: var(--dv-color-error, var(--dv-color-heading));
  outline: 1px solid var(--dv-color-error, var(--dv-color-heading));
  outline-offset: -2px;
}
.ff-el-input--content .error,
.text-danger,
.wpcf7-not-valid-tip {
  display: block;
  font-family: var(--dv-font-body);
  font-size: .78rem;
  letter-spacing: 0;
  text-transform: none;
  color: var(--dv-color-error, var(--dv-color-heading));
  margin-top: .3rem;
}
.ff-message-success,
.wpcf7-response-output {
  border: 1px solid var(--dv-color-border);
  border-left: 3px solid var(--dv-color-primary);
  border-radius: var(--dv-radius);
  background: var(--dv-color-bg-alt);
  padding: 1rem 1.2rem;
  margin-top: 1.2rem;
  font-family: var(--dv-font-body);
  font-size: .95rem;
  color: var(--dv-color-text);
}
.wpcf7-response-output.wpcf7-validation-errors,
.wpcf7 form.invalid .wpcf7-response-output { border-left-color: var(--dv-color-error, var(--dv-color-heading)); }

/* --- 17.4 Featherlight lightbox ------------------------------------------- */
/* Was styled in Fell & Fold only. Backdrop is derived from --dv-color-bg, so it
   reads correctly on the dark skin as well as the five light ones. */

.featherlight { background: transparent; }
.featherlight:last-of-type { background: color-mix(in srgb, var(--dv-color-bg) 88%, transparent); }
.featherlight .featherlight-content {
  background: var(--dv-color-bg);
  border: 0;
  border-bottom: 0;
  border-radius: var(--dv-radius);
  padding: 1rem;
  max-width: 92vw;
  max-height: 92vh;
}
.featherlight .featherlight-inner { display: block; }
.featherlight .featherlight-image { max-height: 82vh; width: auto; }
.featherlight .featherlight-close-icon {
  background: transparent;
  color: var(--dv-color-heading);
  font-family: var(--dv-font-body);
  font-size: 1.5rem;
  line-height: 1;
  width: 2.5rem;
  height: 2.5rem;
}
.featherlight .featherlight-close-icon:hover { color: var(--dv-color-link-hover); }
.featherlight-next span,
.featherlight-previous span {
  color: var(--dv-color-heading);
  text-shadow: none;
  font-size: 1.6rem;
}
.featherlight-next:hover span,
.featherlight-previous:hover span { color: var(--dv-color-link-hover); }

/* --- 17.5 The four inheriting blocks -------------------------------------- */

/* two_col_text - a real gutter, and the columns stack cleanly on mobile */
.layout__block .row.gx-lg-6 > [class*="col-lg-6"] .wysiwyg { max-width: 60ch; }
@media (max-width: 991px) {
  .layout__block .row > [class*="col-lg-6"] + [class*="col-lg-6"] { margin-top: 1.6rem; }
}

/* text_portrait + full_width_image - shared figure treatment */
.layout__block figure { margin: 0; }
.layout__block figure img { display: block; width: 100%; height: auto; border-radius: var(--dv-radius); }
.layout__block figcaption {
  font-family: var(--dv-font-body);
  font-size: .78rem;
  line-height: 1.5;
  color: var(--dv-color-muted-ink);
  padding-top: .6rem;
  border-top: 1px solid var(--dv-color-border);
  margin-top: .7rem;
}
.container-fluid.px-0 figcaption { padding-inline: var(--dv-gutter); }
img.ukiyo { will-change: transform; }
@media (prefers-reduced-motion: reduce) {
  img.ukiyo { transform: none !important; }
}

/* post_carousel - shares .carousel hooks with the carousel block, so only the
   post-specific parts are set here */
.post-carousel { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 2rem; align-items: start; }
.post-carousel .carousel__images { position: relative; }
.post-carousel .carousel__image img { width: 100%; aspect-ratio: 6 / 5; object-fit: cover; display: block; border-radius: var(--dv-radius); }
.post-carousel .carousel__nav { position: absolute; inset: auto .7rem .7rem auto; display: flex; gap: .4rem; margin: 0; }
.carousel__prev,
.carousel__next {
  width: 2.4rem;
  height: 2.4rem;
  border: 1px solid var(--dv-color-border);
  border-radius: var(--dv-radius);
  background: var(--dv-color-bg);
  color: var(--dv-color-heading);
  cursor: pointer;
}
.carousel__prev:hover,
.carousel__next:hover { background: var(--dv-color-primary); border-color: var(--dv-color-primary); color: var(--dv-color-primary-contrast); }
.post-carousel .carousel__card h3 { font-size: 1.4rem; margin: 0 0 .6rem; }
.post-carousel .carousel__card .button { margin-top: 1rem; }
@media (max-width: 767px) {
  .post-carousel { grid-template-columns: minmax(0, 1fr); }
}

/* --- 17.6 404 -------------------------------------------------------------- */
/* The template hardcodes inline font-size on its h1 and h3, so those cannot be
   restyled from here without !important - which would break Branding. Only the
   surrounding treatment is set. Flagged in _REMAINING-SURFACES.md. */

.error404 #content,
body.error404 #content { background: var(--dv-color-bg); }
body.error404 .wysiwyg h1 { color: var(--dv-color-heading); font-family: var(--dv-font-heading); }
body.error404 .wysiwyg strong {
  display: inline-block;
  font-family: var(--dv-font-body);
  font-size: .72rem;
  font-weight: var(--dv-font-weight-normal);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--dv-color-muted-ink);
  border: 1px solid var(--dv-color-border);
  border-radius: var(--dv-radius);
  padding: .4rem .8rem;
}
body.error404 .wysiwyg p { color: var(--dv-color-muted-ink); }

/* =============================================================================
   18. SUBNAV-01 + HEADER DROPDOWN
   Section subnav (`partial/subnav.twig`, rendered by `partial/page-title.twig`)
   and the header dropdown (`menu.twig` -> `.nav-main__dropdown`). Two different
   surfaces, designed together because they answer the same question.

   CSS only. Token-only, so Branding still drives both.

   THIS SKIN
   Placement: Bordered strip with a 2px foot rule, items divided by vertical hairlines - the header pattern repeated.
   Active:    Oxblood 3px foot rule, matching the filter tabs.
   Mobile:    Horizontal scroll; the dividers survive it.
   Sticky:    No - the header scrolls away, so pinning would float a bar over nothing.

   THREE PARENT-THEME NOTES - read before debugging
   1. `_nav-main.scss` sets `background-color: white !important` on
      `.nav-main__dropdown`. A skin cannot beat that without its own `!important`,
      which would then beat Branding too (conventions §1). Worked around below with
      `background-image`, a different property that paints over background-color and
      still reads from tokens. Remove the workaround if the parent drops the
      `!important`.
   2. Same file sets `padding-top: 8px !important` on the mobile dropdown. Not
      overridable either, so vertical rhythm below 992px is set with `margin`.
   3. `menu.twig` is recursive and reuses `.nav-main__dropdown` at EVERY depth,
      while the parent only positions `> li.menu-item-has-children`. A third level
      would anchor to the first, so third-level positioning is added here.
   ============================================================================= */

/* --- 18.1 Subnav ----------------------------------------------------------- */

.subnav {
  background: var(--dv-color-bg-alt);
  border-top: var(--ir-rule);
  border-bottom: var(--ir-rule-heavy);
}
.subnav .container {
  padding-block: 0;
}

.subnav__list {
  display: flex;
  
  align-items: stretch;
  flex-wrap: nowrap;
  gap: 0;
  list-style: none;
  margin: 0;
  padding: 0;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.subnav__list::-webkit-scrollbar { display: none; }
.subnav__item + .subnav__item { border-left: 1px solid var(--dv-color-border); }

.subnav__item { flex: none; display: flex; }

.subnav__item > a {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .95em 1.3em;
  border-radius: 0;
  font-family: var(--dv-font-body);
  font-weight: var(--dv-font-weight-bold);
  font-size: .7rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--dv-color-muted-ink);
  text-decoration: none;
  transition: color .18s ease, background .18s ease, box-shadow .18s ease;
}
.subnav__item > a:hover { color: var(--dv-color-heading); }
.subnav__item > a:focus-visible {
  outline: 2px solid var(--dv-color-accent-ink);
  outline-offset: 2px;
}

/* is-current is on the item; aria-current is on the link. Match both, because
   either one alone is a legitimate render. */
.subnav__item.is-current > a,
.subnav__item > a[aria-current="page"] {
  color: var(--dv-color-primary);
  box-shadow: inset 0 -3px 0 var(--dv-color-accent);
}

@media (max-width: 991.98px) {
  /* Full-bleed foot rule (match site-header__main / mobile bar, not inset .container). */
  body.skin-ironmonger .page-title > .subnav {
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    box-sizing: border-box;
  }
  body.skin-ironmonger .subnav .container {
    width: 100%;
    max-width: var(--dv-container-max);
    margin-inline: auto;
    padding-inline: var(--dv-gutter);
  }
  body.skin-ironmonger .subnav__list {
    padding-inline: 0;
    margin-inline: 0;
  }
}

@media (max-width: 767px) {
  body.skin-ironmonger .subnav__list {
    padding-inline: 0;
    margin-inline: 0;
  }
}

/* --- 18.2 Header dropdown -------------------------------------------------- */

.nav-main__list > li.menu-item-has-children { position: relative; }

.nav-main__dropdown {
  /* background-image, not background-color - see note 1 above */
  background-image: linear-gradient(var(--dv-color-bg), var(--dv-color-bg));
  border: 1px solid var(--dv-color-border);
  border-radius: 0;
  box-shadow: var(--dv-shadow-lg);
  padding: 0.35rem 0;
  min-width: 14rem;
  text-align: left;
  z-index: 60;
}
.nav-main__dropdown > li { white-space: nowrap; }
.nav-main__dropdown > li + li { margin-left: 0; }
.nav-main__dropdown > li > a {
  display: block;
  padding: 0.5rem 1rem;
  font-family: var(--dv-font-body);
  font-size: .85rem;
  letter-spacing: 0;
  text-transform: none;
  color: var(--dv-color-text);
  text-decoration: none;
}
/* --dv-color-accent-ink, NOT --dv-color-link-hover: a dropdown row is ~13.6px text
   on --dv-color-bg-alt, and in three skins link-hover is the raw accent, which
   fails AA on that ground (Esplanade 2.90, Fell & Fold 3.49, Tidewell 3.59). The
   ink token is defined to clear 4.5:1 on BOTH grounds, which is exactly the pair a
   row sits on. Conventions §8. */
.nav-main__dropdown > li > a:hover,
.nav-main__dropdown > li > a:focus-visible { background: var(--dv-color-bg-alt); color: var(--dv-color-accent-ink); }
.nav-main__dropdown > li.current-menu-item > a,
.nav-main__dropdown > li.current_page_item > a { color: var(--dv-color-heading); font-weight: var(--dv-font-weight-bold); }

/* a parent item earns a caret so the dropdown is discoverable */
.nav-main__list > li.menu-item-has-children > a::after,
.nav-main__list > li.menu-item-has-children > .nav-main__item-row > a::after {
  content: "";
  display: inline-block;
  width: .3rem;
  height: .3rem;
  margin-left: .45rem;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  vertical-align: middle;
  transform: rotate(45deg);
  opacity: .7;
}
.nav-main__list > li.current-menu-parent > a,
.nav-main__list > li.current-menu-parent > .nav-main__item-row > a,
.nav-main__list > li.current-menu-ancestor > a,
.nav-main__list > li.current-menu-ancestor > .nav-main__item-row > a { color: var(--dv-color-heading); }

/* third level: menu.twig recurses with the same class - see note 3 */
.nav-main__dropdown li.menu-item-has-children { position: relative; }
.nav-main__dropdown .nav-main__dropdown {
  top: -.5rem;
  left: 100%;
  transform: none;
}
.nav-main__dropdown li.menu-item-has-children > a::after {
  content: "";
  float: right;
  width: .3rem;
  height: .3rem;
  margin-top: .38rem;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  transform: rotate(-45deg);
  opacity: .7;
}


/* --- 18.3 Mobile nav open state ------------------------------------------- */
/* nav-toggle.js adds .is-open to `.menu-container` and .is-active to the
   `.hamburger`. These skins render their nav as `.nav-main` with no
   `.menu-container` wrapper, so the .is-open class never lands and the drawer
   would never open. Driving it from the hamburger instead keeps this CSS-only:
   no Twig change, no JS change. The .is-open selector is kept as a fallback for
   any skin that does wrap in `.menu-container`. */

/* =============================================================================
   19. BREADCRUMB-01
   `#breadcrumbs`, rendered inside `partial/page-title.twig`. A Theme Options
   toggle, so every rule here has to degrade to nothing when it is off - which it
   does, because it is all scoped to #breadcrumbs.

   THIS SKIN
   Placement: Inside the band. Slashes, matching the rule-heavy header.
   Separator: "/" - see the note below, this is a Yoast setting not CSS.

   TWO CONSTRAINTS WORTH KNOWING
   1. The separator is a TEXT NODE between spans, so no skin can restyle or
      replace it from CSS - there is nothing to select. It is set once per
      deployment in Yoast > Search Appearance > Breadcrumbs. The character above
      is this skin's recommendation; the CSS below is written so any character
      works, because spacing comes from flex gap rather than from the glyph.
   2. Yoast nests one wrapper span around the whole trail, so the flex container
      is `#breadcrumbs > span`, not `#breadcrumbs`. Both are set below, so this
      survives a Timber-rendered trail that omits the wrapper.
   ============================================================================= */

#breadcrumbs,
#breadcrumbs > span {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .7rem;
  
  font-family: var(--dv-font-body);
  font-size: .68rem;
  font-weight: var(--dv-font-weight-normal);
  letter-spacing: .16em;
  text-transform: uppercase;
  line-height: 1.4;
}
#breadcrumbs > span { gap: .7rem; }
#breadcrumbs span { display: inline-flex; align-items: center; gap: .7rem; }

#breadcrumbs a {
  color: inherit;
  text-decoration: none;
  transition: color .18s ease;
}
#breadcrumbs a:hover { color: var(--dv-color-accent-ink); }
/* over photography the ink token is too dark, so the crumb brightens instead */
.page-title:not(.page-title--no-bg) #breadcrumbs a:hover { color: var(--dv-color-primary-contrast); text-decoration: underline; text-underline-offset: 3px; }
#breadcrumbs a:focus-visible {
  outline: 2px solid var(--dv-color-accent-ink);
  outline-offset: 3px;
  opacity: 1;
}
/* Yoast marks the current crumb .breadcrumb_last; a Timber trail may use
   aria-current instead. Match both - either alone is a legitimate render. */
#breadcrumbs .breadcrumb_last,
#breadcrumbs [aria-current="page"] {
  color: var(--dv-color-primary-contrast);
  font-weight: var(--dv-font-weight-bold);
  opacity: 1;
}
/* on the image band */
/* Full-strength white over photography: 0.85 measured 4.53 on Thermae's band before
   any real-image variance, and a scrim is never as predictable as a flat swatch. */
.page-title #breadcrumbs { color: var(--dv-color-primary-contrast); }
/* and on the plain band, where the ground is light */
/* --dv-color-text, NOT --dv-color-muted: the trail is 11px uppercase, so it needs
   4.5:1, and muted was built for 14px+ body support - it failed on four of the seven
   light grounds (Thermae 3.25, Fell & Fold 3.59, Meridian 3.77, Esplanade 4.48).
   Conventions §8. */
.page-title--no-bg #breadcrumbs { color: var(--dv-color-text); }
.page-title--no-bg #breadcrumbs .breadcrumb_last,
.page-title--no-bg #breadcrumbs [aria-current="page"] { color: var(--dv-color-heading); }

@media (max-width: 767px) {
  #breadcrumbs,
  #breadcrumbs > span { font-size: .64rem; gap: .4rem; }
}

/* --- 18.2a Dropdown hardening (from the Esplanade smoke build, 18 Aug) ------ */
/*
 * Two defects seen on the server that §18.2 could not prevent on its own.
 *
 * 1. ROWS RENDERED AS TRACKED CAPS. The parent's nav typography reaches the
 *    dropdown anchors as well as the bar, and lands with enough weight to
 *    survive the plain `text-transform: none` in §18.2. Forced here.
 *
 *    On the !important: text-transform and letter-spacing are not
 *    Branding-controlled - no token feeds them - so forcing them cannot break
 *    re-branding. The font-size IS derived from --dv-font-size-base rather than
 *    pinned to a literal, so Branding still moves it (conventions §1: important
 *    on a var() is fine, important on a literal is not).
 *
 * 2. THE HOVER/CURRENT BAND DID NOT REACH THE PANEL EDGES. The parent pads the
 *    <ul> horizontally, so every row sat inset. Padding is zeroed on the list and
 *    carried by the anchors instead, which is where a full-bleed row needs it.
 *
 * `overflow: hidden` is what lets a full-bleed row clip to the panel radius -
 * without it the first and last rows square off the rounded corners. That is
 * visible on the two skins with a radius, invisible on the five without.
 *
 * DELETE WHEN: the parent stops applying bar typography and list padding to
 * `.nav-main__dropdown`. Then §18.2 alone is enough.
 */

.nav-main__dropdown {
  padding-inline: 0 !important;
  overflow: hidden;
}
.nav-main__dropdown > li,
.nav-main__dropdown li { padding-inline: 0; margin-inline: 0; }
.nav-main__dropdown li > a {
  display: block;
  width: 100%;
  box-sizing: border-box;
  text-transform: none !important;
  letter-spacing: 0 !important;
  font-family: var(--dv-font-body);
  font-size: calc(var(--dv-font-size-base) * .85) !important;
  font-weight: var(--dv-font-weight-normal);
  line-height: 1.4;
}
.nav-main__dropdown > li.current-menu-item > a,
.nav-main__dropdown > li.current_page_item > a { font-weight: var(--dv-font-weight-bold); }

@media (max-width: 991px) {
  .nav-main__dropdown { overflow: visible; }
  .nav-main__dropdown li > a { font-size: calc(var(--dv-font-size-base) * .9) !important; }
}


/* =============================================================================
   20. FEATURE GROUNDS  (block: feature)
   Replaces the old free colour picker, which wrote a literal into an inline
   style and so beat both this file and Branding. Four named grounds, each
   carrying its own text colour, so the pairing is decided here and cannot be
   mis-set by an editor.

   ONE CORRECTION TO THE HANDOFF: the accent ground uses
   --dv-color-accent-contrast, NOT --dv-color-secondary-contrast.
   secondary-contrast is checked against --dv-color-secondary, which is a light
   neutral in most of these skins, so on the accent it fails AA in five of the
   seven - Ironmonger 1.54, Meridian 2.35, Tidewell 3.92, Esplanade 3.94,
   Fell & Fold 4.11. accent-contrast is the token defined for exactly this pairing
   and passes in all seven (4.81 to 9.14). Conventions §8.
   ============================================================================= */

.wysiwyg--feature { padding: 2rem; }

.wysiwyg--feature--ground-page { background: var(--dv-color-bg); color: var(--dv-color-text); }
.wysiwyg--feature--ground-alt { background: var(--dv-color-bg-alt); color: var(--dv-color-text); }
.wysiwyg--feature--ground-page h1, .wysiwyg--feature--ground-page h2,
.wysiwyg--feature--ground-page h3, .wysiwyg--feature--ground-page h4,
.wysiwyg--feature--ground-alt h1, .wysiwyg--feature--ground-alt h2,
.wysiwyg--feature--ground-alt h3, .wysiwyg--feature--ground-alt h4 { color: var(--dv-color-heading); }
.wysiwyg--feature--ground-page a { color: var(--dv-color-link); }
.wysiwyg--feature--ground-alt a { color: var(--dv-color-link); }

.wysiwyg--feature--ground-primary {
  background: var(--dv-color-primary);
  color: var(--dv-color-primary-contrast);
}
.wysiwyg--feature--ground-accent {
  background: var(--dv-color-accent);
  color: var(--dv-color-accent-contrast);
}
/* On the two filled grounds every child inherits the ground's own contrast colour:
   the skin's heading and link tokens are chosen against the PAGE, so letting them
   through here is how a heading ends up invisible on a dark fill. */
.wysiwyg--feature--ground-primary h1, .wysiwyg--feature--ground-primary h2,
.wysiwyg--feature--ground-primary h3, .wysiwyg--feature--ground-primary h4,
.wysiwyg--feature--ground-primary strong, .wysiwyg--feature--ground-primary blockquote,
.wysiwyg--feature--ground-accent h1, .wysiwyg--feature--ground-accent h2,
.wysiwyg--feature--ground-accent h3, .wysiwyg--feature--ground-accent h4,
.wysiwyg--feature--ground-accent strong, .wysiwyg--feature--ground-accent blockquote { color: inherit; }
.wysiwyg--feature--ground-primary a:not(.button),
.wysiwyg--feature--ground-accent a:not(.button) {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.wysiwyg--feature--ground-primary blockquote,
.wysiwyg--feature--ground-accent blockquote { border-color: currentColor; }
.wysiwyg--feature--ground-primary .button,
.wysiwyg--feature--ground-accent .button {
  background: transparent;
  border-color: currentColor;
  color: inherit;
  text-decoration: none;
}
.wysiwyg--feature--ground-primary .button:hover,
.wysiwyg--feature--ground-accent .button:hover {
  background: currentColor;
  color: var(--dv-color-primary);
}
.wysiwyg.wysiwyg--feature h2,
.wysiwyg.wysiwyg--feature h3 {
  margin-block-start: 0;
}
.wysiwyg.wysiwyg--feature--ground-primary h2,
.wysiwyg.wysiwyg--feature--ground-alt h2,
.wysiwyg.wysiwyg--feature--ground-page h2 {
  margin-top: 0;
  margin-block-start: 0;
}

/* --- 20.1 Feature block (panel overlap - same margin/padding every ground) --- */
body.skin-ironmonger .layout__block .row > [class*="col-lg-6"] {
  align-self: flex-start !important;
}
body.skin-ironmonger .layout__block .wysiwyg--feature,
body.skin-ironmonger .layout__block .wysiwyg--feature--ground-page,
body.skin-ironmonger .layout__block .wysiwyg--feature--ground-alt,
body.skin-ironmonger .layout__block .wysiwyg--feature--ground-primary,
body.skin-ironmonger .layout__block .wysiwyg--feature--ground-accent {
  margin-top: 5rem !important;
  padding: 2rem !important;
  position: relative !important;
}
body.skin-ironmonger .layout__block figure.feature-margin {
  margin-top: 0 !important;
}
body.skin-ironmonger .layout__block .wysiwyg--feature > :first-child {
  margin-top: 0 !important;
  margin-block-start: 0 !important;
}
body.skin-ironmonger .layout__block .wysiwyg--feature h1,
body.skin-ironmonger .layout__block .wysiwyg--feature h2,
body.skin-ironmonger .layout__block .wysiwyg--feature h3,
body.skin-ironmonger .layout__block .wysiwyg--feature h4 {
  margin-top: 0 !important;
  margin-block-start: 0 !important;
}
body.skin-ironmonger .layout__block .wysiwyg--feature h2,
body.skin-ironmonger .layout__block .wysiwyg--feature h3 {
  margin-bottom: .75rem !important;
  margin-block-end: .75rem !important;
}
@media (max-width: 991px) {
  body.skin-ironmonger .layout__block .wysiwyg--feature,
  body.skin-ironmonger .layout__block .wysiwyg--feature--ground-page,
  body.skin-ironmonger .layout__block .wysiwyg--feature--ground-alt,
  body.skin-ironmonger .layout__block .wysiwyg--feature--ground-primary,
  body.skin-ironmonger .layout__block .wysiwyg--feature--ground-accent {
    margin-top: 0 !important;
  }
}

/* =============================================================================
   20. SESSION HARDENING (content blocks, hubs, forms, singles)
   ============================================================================= */
/* --- Promo / offer cards: parent `.card--link:hover` teal text bleed ---------- */

body.skin-ironmonger a.card.card--link:hover,
body.skin-ironmonger a.card.card--link:focus,
body.skin-ironmonger a.card.card--link:focus-visible {
  transform: none;
}
body.skin-ironmonger .card--surface .card__date {
  position: static !important;
  display: inline !important;
  width: auto !important;
  height: auto !important;
  background: none !important;
  font-family: inherit !important;
  font-size: inherit !important;
  font-weight: inherit !important;
  line-height: inherit !important;
  color: inherit !important;
  text-align: left !important;
}
body.skin-ironmonger a.card.card--link:hover .card__content h3,
body.skin-ironmonger a.card.card--link:focus .card__content h3,
body.skin-ironmonger a.card.card--link:focus-visible .card__content h3 {
  color: var(--dv-color-heading);
}
body.skin-ironmonger a.card.card--link:hover .card__content p,
body.skin-ironmonger a.card.card--link:focus .card__content p,
body.skin-ironmonger a.card.card--link:focus-visible .card__content p,
body.skin-ironmonger a.card.card--link:hover .card__content .wysiwyg,
body.skin-ironmonger a.card.card--link:focus .card__content .wysiwyg,
body.skin-ironmonger a.card.card--link:focus-visible .card__content .wysiwyg {
  color: var(--dv-color-text);
}

/* --- Buttons: visited must not beat hover ----------------------------------- */

body.skin-ironmonger .button:hover,
body.skin-ironmonger .btn:hover,
body.skin-ironmonger .button:visited:hover,
body.skin-ironmonger .btn:visited:hover,
body.skin-ironmonger .ff-btn-submit:hover,
body.skin-ironmonger .wpcf7-submit:hover {
  background: var(--dv-button-hover-bg);
  border-color: var(--dv-button-hover-bg);
  color: var(--dv-color-primary-contrast);
}
body.skin-ironmonger .button,
body.skin-ironmonger .btn {
  transition: background .2s ease, border-color .2s ease, color .2s ease;
}

/* --- Breadcrumbs: parent `--no-bg` $primary link bleed (not Esplanade hero) -- */

body.skin-ironmonger .page-title--no-bg #breadcrumbs {
  color: var(--dv-color-muted-ink);
}
body.skin-ironmonger .page-title--no-bg #breadcrumbs a {
  color: var(--dv-color-heading) !important;
}
body.skin-ironmonger .page-title--no-bg #breadcrumbs a:hover {
  color: var(--dv-color-link-hover) !important;
}

/* --- Post carousel: slick fade + link buttons -------------------------------- */

body.skin-ironmonger .post-carousel .carousel__cards .slick-slide:not(.slick-active) {
  pointer-events: none;
}

/* --- Journal + promo hub (POST-01): news.css loads after skin.css ------------- */

body.skin-ironmonger .news-index__filters--promo.news-index__filters--advanced.mb-4 {
  margin-bottom: 1rem !important;
}
body.skin-ironmonger .news-index__row--category,
body.skin-ironmonger .news-index__row--tags {
  margin-bottom: 0.5rem;
}
body.skin-ironmonger .news-index__row-label,
body.skin-ironmonger .news-index__filtered-label {
  font-size: 0.72rem;
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--dv-color-muted-ink);
}
body.skin-ironmonger .news-index__search.form__control,
body.skin-ironmonger .news-index__search,
body.skin-ironmonger .news-index__panel-search.form__control,
body.skin-ironmonger .news-index__panel-search {
  border-radius: var(--dv-radius) !important;
  font-family: var(--dv-font-body);
  font-size: var(--dv-font-size-base);
  font-weight: var(--dv-font-weight-normal);
  letter-spacing: normal;
  text-transform: none;
  border: 1px solid var(--dv-color-border) !important;
  background: var(--dv-color-bg) !important;
  color: var(--dv-color-text) !important;
  box-shadow: none !important;
}
body.skin-ironmonger .news-index__search:focus,
body.skin-ironmonger .news-index__search:focus-visible,
body.skin-ironmonger .news-index__panel-search:focus,
body.skin-ironmonger .news-index__panel-search:focus-visible {
  outline: none;
  border-color: var(--dv-color-primary) !important;
}
body.skin-ironmonger .news-index__category-select.form__control,
body.skin-ironmonger .news-index__category-select {
  border-radius: var(--dv-radius) !important;
  border: 1px solid var(--dv-color-border) !important;
  background: var(--dv-color-bg) !important;
  color: var(--dv-color-text) !important;
}
body.skin-ironmonger .news-index__chip,
body.skin-ironmonger .news-index__panel-trigger,
body.skin-ironmonger .news-index__filters-mobile,
body.skin-ironmonger .news-index__sheet-chips .news-index__chip {
  border-radius: var(--dv-radius) !important;
  font-family: var(--dv-font-body);
  font-size: 0.72rem;
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 0.55em 1.15em;
  border: 1px solid var(--dv-color-border) !important;
  background: transparent !important;
  color: var(--dv-color-text) !important;
}
body.skin-ironmonger .news-index__chip:hover,
body.skin-ironmonger .news-index__panel-trigger:hover {
  border-color: var(--dv-color-primary) !important;
  color: var(--dv-color-heading) !important;
}
body.skin-ironmonger .news-index__chip.is-active {
  background: var(--dv-color-primary) !important;
  border-color: var(--dv-color-primary) !important;
  color: var(--dv-color-primary-contrast) !important;
}
body.skin-ironmonger .news-index__chip.is-active:not([data-slug=""])::before {
  content: none !important;
}
body.skin-ironmonger .news-index__chip--tag {
  background: var(--dv-color-bg-alt) !important;
}
body.skin-ironmonger .news-index__chip--tag.is-active {
  background: var(--dv-color-primary) !important;
  border-color: var(--dv-color-primary) !important;
  color: var(--dv-color-primary-contrast) !important;
}
body.skin-ironmonger .news-index__panel-trigger--selector.is-open {
  background: var(--dv-color-primary) !important;
  border-color: var(--dv-color-primary) !important;
  color: var(--dv-color-primary-contrast) !important;
}
body.skin-ironmonger .news-index__trigger-count,
body.skin-ironmonger .news-index__filters-mobile-count,
body.skin-ironmonger .news-index__active-chip,
body.skin-ironmonger .news-index__panel-inner,
body.skin-ironmonger .news-index__panel-close,
body.skin-ironmonger .news-layout-tuner__pill {
  border-radius: var(--dv-radius) !important;
}
body.skin-ironmonger .news-index__meta-row {
  border-top: 1px solid var(--dv-color-border);
  padding-top: 0.75rem;
}

/* --- Fluent Forms (boxed skins; Fell & Fold underline stays in child skin.css) - */

body.skin-ironmonger .frm-fluent-form abbr.required,
body.skin-ironmonger .frm-fluent-form .required,
body.skin-ironmonger .frm-fluent-form .ff-el-is-required .required {
  color: var(--dv-color-error, var(--dv-color-heading)) !important;
  text-decoration: none !important;
}
body.skin-ironmonger .frm-fluent-form .ff-el-form-control,
body.skin-ironmonger .frm-fluent-form input.ff-el-form-control,
body.skin-ironmonger .frm-fluent-form select.ff-el-form-control,
body.skin-ironmonger .frm-fluent-form textarea.ff-el-form-control {
  background: var(--dv-color-bg) !important;
  border: 1px solid var(--dv-color-border) !important;
  border-radius: var(--dv-radius) !important;
  box-shadow: none !important;
  font-family: var(--dv-font-body) !important;
  color: var(--dv-color-text) !important;
}
body.skin-ironmonger .frm-fluent-form .ff-el-form-control:focus {
  border-color: var(--dv-color-accent) !important;
  outline: 0 !important;
  box-shadow: none !important;
}
body.skin-ironmonger .frm-fluent-form .ff-el-is-error .ff-el-form-control {
  border-color: var(--dv-color-error, var(--dv-color-heading)) !important;
  outline: 0 !important;
}
body.skin-ironmonger .frm-fluent-form .ff-btn.ff-btn-submit,
body.skin-ironmonger .frm-fluent-form .ff-btn-submit,
body.skin-ironmonger .contact__form .ff-btn.ff-btn-submit,
body.skin-ironmonger .contact__form .ff-btn-submit,
body.skin-ironmonger .enquiry-form .ff-btn.ff-btn-submit,
body.skin-ironmonger .enquiry-form .ff-btn-submit {
  background: var(--dv-button-bg) !important;
  border: 1px solid var(--dv-button-bg) !important;
  border-radius: var(--dv-radius) !important;
  color: var(--dv-button-color) !important;
  font-family: var(--dv-font-body) !important;
  box-shadow: none !important;
  transform: none !important;
}
body.skin-ironmonger .frm-fluent-form .ff-btn.ff-btn-submit:hover,
body.skin-ironmonger .frm-fluent-form .ff-btn-submit:hover,
body.skin-ironmonger .frm-fluent-form .ff-btn.ff-btn-submit:visited:hover,
body.skin-ironmonger .frm-fluent-form .ff-btn-submit:visited:hover,
body.skin-ironmonger .contact__form .ff-btn.ff-btn-submit:hover,
body.skin-ironmonger .enquiry-form .ff-btn.ff-btn-submit:hover {
  background: var(--dv-button-hover-bg) !important;
  border-color: var(--dv-button-hover-bg) !important;
  color: var(--dv-color-primary-contrast) !important;
}
body.skin-ironmonger .enquiry-wizard__progress--blocks .enquiry-wizard__step.is-active {
  border-color: var(--dv-color-primary) !important;
  background: var(--dv-color-primary) !important;
  color: var(--dv-color-primary-contrast) !important;
}
body.skin-ironmonger .enquiry-form .enquiry-wizard__next.button,
body.skin-ironmonger .enquiry-form .enquiry-wizard__back.button--clear {
  box-shadow: none !important;
  transform: none !important;
}

/* --- Promo / news singles: back link + title rhythm --------------------------- */

body.skin-ironmonger .news-single__back,
body.skin-ironmonger .promo-single__back {
  padding-top: 0.85rem;
}
body.skin-ironmonger.deep-page-title .news-single__back,
body.skin-ironmonger.deep-page-title .promo-single__back {
  padding-top: 1.35rem;
}
body.skin-ironmonger .news-single__byline {
  padding-top: 0.35rem;
  padding-bottom: 0.5rem;
}
body.skin-ironmonger .news-single__back-link,
body.skin-ironmonger .promo-single__back-link {
  color: var(--dv-color-heading);
  text-decoration: none;
  border-bottom: 2px solid var(--dv-color-accent);
  padding-bottom: 0.15rem;
}
body.skin-ironmonger .news-single__back-link:hover,
body.skin-ironmonger .promo-single__back-link:hover {
  color: var(--dv-color-accent-ink);
}

/* --- Promo single: facts rail (CD Sep 2026) ----------------------------------- */
body.skin-ironmonger .promo-single__intro {
  padding-top: 1.35rem !important;
  padding-bottom: 2rem;
}
body.skin-ironmonger .promo-single__facts-rail {
  margin-top: 1.5rem;
}
@media (min-width: 992px) {
  body.skin-ironmonger .promo-single__facts-rail {
    margin-top: 0;
  }
}
body.skin-ironmonger .promo-single__facts-panel {
  background: var(--dv-color-bg-alt);
  border: var(--ir-rule);
  border-top: var(--ir-rule-heavy);
  border-radius: 0;
  padding: 1.65rem 1.5rem 1.45rem;
  box-shadow: none;
}
body.skin-ironmonger .promo-single__facts-items .promo-single__facts-item {
  padding: 0 0 1rem;
  margin: 0 0 1rem;
}
body.skin-ironmonger .promo-single__facts-items .promo-single__facts-item:not(:last-child) {
  border-bottom: var(--ir-rule);
}
body.skin-ironmonger .promo-single__facts-items .promo-single__facts-item:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
}
body.skin-ironmonger .promo-single__facts-label {
  font-family: var(--dv-font-body);
  font-size: var(--ir-micro);
  font-weight: var(--dv-font-weight-bold);
  letter-spacing: var(--ir-track);
  text-transform: uppercase;
  color: var(--dv-color-accent-ink);
  margin-bottom: 0.35rem;
}
body.skin-ironmonger .promo-single__facts-value {
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--dv-color-text);
}
body.skin-ironmonger .promo-single__facts-items:not(:empty) + .promo-single__facts-price {
  margin-top: 1.15rem;
  padding-top: 1.15rem;
  border-top: var(--ir-rule-heavy);
}
body.skin-ironmonger .promo-single__facts-items:empty + .promo-single__facts-price {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}
body.skin-ironmonger .promo-single__facts-rail .promo-single__price-line {
  margin: 0;
  text-align: left;
}
body.skin-ironmonger .promo-single__facts-rail .promo-single__price-line__prefix {
  display: block;
  margin-bottom: 0.15rem;
}
body.skin-ironmonger .promo-single__facts-rail .promo-single__price-line__amount {
  font-size: 2.1rem;
}
body.skin-ironmonger .promo-single__facts-cta {
  margin-top: 1.25rem;
}
body.skin-ironmonger .promo-single__facts-cta .button {
  width: 100%;
  text-align: center;
  justify-content: center;
}


/* =============================================================================
   CONTACT PAGE - IRONMONGER CD (search: IRONMONGER-CONTACT-CD)
   Twig: Visit | Call | Write tiles, map band + footer, form band (not parent grid).
   ============================================================================= */

.contact.contact--ironmonger {
  --ir-contact-rule: 2px solid var(--dv-color-primary, #3b2c2f);
}

.contact.contact--ironmonger.contact--after-blocks {
  padding-bottom: var(--dv-content-block-gap, 3rem);
}

.contact.contact--ironmonger.contact--after-blocks.contact--has-layout-above {
  --dv-contact-after-blocks-gap: 0;
}

body.skin-ironmonger .layout.layout--contact-above + .contact.contact--ironmonger.contact--after-blocks {
  margin-top: var(--dv-content-block-gap, 2.25rem);
}

/* Do not stack block pt utilities on --dv-content-after-title-gap (#content). */
body.skin-ironmonger .page-title + #content > .layout > .layout__block:first-child {
  padding-top: 0 !important;
}

.contact.contact--ironmonger .contact__stack {
  display: flex;
  flex-direction: column;
  gap: var(--dv-content-block-gap, 2.25rem);
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.contact.contact--ironmonger .contact__tiles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border: var(--ir-contact-rule);
  background: var(--dv-color-bg);
}

.contact.contact--ironmonger .contact__tile {
  padding: clamp(1.25rem, 2.5vw, 2rem) clamp(1rem, 2.5vw, 1.75rem);
  min-width: 0;
}

.contact.contact--ironmonger .contact__tile-label {
  margin: 0 0 0.5rem;
  font-family: var(--dv-font-body);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--dv-color-muted-ink);
}

.contact.contact--ironmonger .contact__tile-body {
  font-family: var(--dv-font-heading);
  font-size: clamp(1.0625rem, 1.35vw, 1.25rem);
  font-weight: 400;
  line-height: 1.45;
  color: var(--dv-color-heading);
}

.contact.contact--ironmonger .contact__tile-value {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
}

.contact.contact--ironmonger .contact__tile-lines {
  list-style: none;
  margin: 0;
  padding: 0;
}

.contact.contact--ironmonger .contact__tile-line {
  margin: 0 0 0.5rem;
}

.contact.contact--ironmonger .contact__tile-line:last-child {
  margin-bottom: 0;
}

.contact.contact--ironmonger .contact__tile-line-label {
  display: block;
  font-family: var(--dv-font-body);
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--dv-color-muted-ink);
  margin-bottom: 0.15rem;
}

.contact.contact--ironmonger .contact__tile .contact__link {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 0.18em;
  text-decoration-color: var(--dv-color-border);
}

.contact.contact--ironmonger .contact__tile .contact__link:hover {
  color: var(--dv-color-accent-ink);
  text-decoration-color: currentColor;
}

.contact.contact--ironmonger .contact__map-stage {
  display: flex;
  flex-direction: column;
  border: var(--ir-contact-rule);
  background: var(--dv-color-bg);
}

.contact.contact--ironmonger .contact__map-stage-media,
.contact.contact--ironmonger .contact__map-footer {
  flex: 0 0 auto;
  min-height: 0;
}

.contact.contact--ironmonger .contact__map-stage-media {
  position: relative;
  overflow: hidden;
  background: var(--dv-color-bg-alt);
}

.contact.contact--ironmonger .contact__map-stage-media .contact__map {
  margin: 0;
}

.contact.contact--ironmonger .contact__map-link,
.contact.contact--ironmonger .contact__map-stage-media .contact__map-image {
  display: block;
  width: 100%;
  height: auto;
  max-height: clamp(11rem, 22vw, 16.5rem);
  aspect-ratio: 2.35 / 1;
  object-fit: cover;
  object-position: center;
  border-radius: 0;
}

.contact.contact--ironmonger .contact__map-badge {
  position: absolute;
  top: 0.85rem;
  right: 0.85rem;
  padding: 0.35rem 0.55rem;
  border: 1px solid var(--dv-color-border);
  background: var(--dv-color-bg);
  font-family: var(--dv-font-body);
  font-size: 0.625rem;
  font-weight: var(--dv-font-weight-bold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--dv-color-muted-ink);
}

.contact.contact--ironmonger .contact__map-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 1.5rem;
  padding: clamp(0.85rem, 2vw, 1.15rem) clamp(1rem, 2.5vw, 1.75rem);
  background: var(--dv-color-primary);
  color: var(--dv-color-primary-contrast);
}

.contact.contact--ironmonger .contact__map-footer-copy {
  margin: 0;
  flex: 1 1 16rem;
  max-width: 52ch;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--dv-color-primary-contrast);
}

.contact.contact--ironmonger .contact__map-footer .contact__directions-link.button--primary {
  flex-shrink: 0;
  background: var(--dv-color-accent);
  border: 1px solid var(--dv-color-accent);
  border-radius: 0;
  color: var(--dv-color-accent-contrast);
  font-family: var(--dv-font-body);
  font-size: var(--ir-micro, 0.6875rem);
  font-weight: var(--dv-font-weight-bold);
  letter-spacing: var(--ir-track, 0.14em);
  text-transform: uppercase;
  padding: 0.95em 1.75em;
  min-height: 2.75rem;
  box-shadow: none;
  text-decoration: none;
}

.contact.contact--ironmonger .contact__map-footer .contact__directions-link.button--primary:hover {
  background: var(--dv-color-primary-contrast);
  border-color: var(--dv-color-primary-contrast);
  color: var(--dv-color-primary);
  text-decoration: none;
}

.contact.contact--ironmonger .contact__form-band {
  border: var(--ir-contact-rule);
  background: var(--dv-color-bg);
  padding: clamp(1.35rem, 3vw, 2.15rem) clamp(1rem, 3vw, 2.5rem);
}

.contact.contact--ironmonger .contact__form-band-inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.5rem, 3vw, 2rem);
  align-items: start;
}

.contact.contact--ironmonger .contact__form-intro.wysiwyg,
.contact.contact--ironmonger .contact__form-fields {
  min-width: 0;
  width: 100%;
}

.contact.contact--ironmonger .contact__form-fields,
.contact.contact--ironmonger .contact__form-fields .frm-fluent-form {
  display: block;
}

.contact.contact--ironmonger .contact__form-intro.wysiwyg {
  margin: 0;
  text-align: left;
}

.contact.contact--ironmonger .contact__form-intro .contact__form-title {
  font-family: var(--dv-font-heading);
  font-size: clamp(1.75rem, 3vw, 2.125rem);
  font-weight: 400;
  letter-spacing: 0.02em;
  color: var(--dv-color-heading);
  margin: 0 0 0.5rem;
  line-height: 1.12;
}

.contact.contact--ironmonger .contact__form-intro.wysiwyg p {
  max-width: 34ch;
  margin: 0;
  font-family: var(--dv-font-body);
  font-size: 0.9375rem;
  color: var(--dv-color-text);
  line-height: 1.65;
}

.contact.contact--ironmonger .contact__form.contact__form-fields {
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
}

.contact.contact--ironmonger .contact__form .ff-t-container,
.contact.contact--ironmonger .contact__form .ff-t-container.ff_columns_total_3 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem 1.375rem;
}

.contact.contact--ironmonger .contact__form .ff-t-cell.ff-t-column-1.ff-t-full-width,
.contact.contact--ironmonger .contact__form .ff-t-cell.ff-t-column-2.ff-t-full-width,
.contact.contact--ironmonger .contact__form .ff-t-cell.ff-t-full-width {
  grid-column: 1 / -1;
}

.contact.contact--ironmonger .contact__form .ff-el-input--label label,
.contact.contact--ironmonger .contact__form .ff-el-form-check-label {
  font-family: var(--dv-font-body);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--dv-color-muted-ink);
}

.contact.contact--ironmonger .contact__form .ff_submit_btn_wrapper.ff-el-group,
.contact.contact--ironmonger .contact__form .ff-el-group.ff_submit_btn_wrapper {
  margin-bottom: 0 !important;
  text-align: left;
}

.contact.contact--ironmonger .contact__form .ff-btn.ff-btn-submit,
.contact.contact--ironmonger .contact__form .ff-btn-submit {
  background: var(--dv-color-accent) !important;
  border-color: var(--dv-color-accent) !important;
  color: var(--dv-color-accent-contrast) !important;
  border-radius: 0 !important;
  font-size: var(--ir-micro, 0.6875rem) !important;
  letter-spacing: var(--ir-track, 0.14em) !important;
  text-transform: uppercase !important;
}

.contact.contact--ironmonger .contact__form .ff-btn.ff-btn-submit:hover,
.contact.contact--ironmonger .contact__form .ff-btn-submit:hover {
  background: var(--dv-color-primary) !important;
  border-color: var(--dv-color-primary) !important;
  color: var(--dv-color-primary-contrast) !important;
}

/* CD mobile tiles: md-down Visit|Call + Write full; sm-down all stacked. Desktop 3-up unchanged. */
@media (max-width: 767.98px) and (min-width: 576px) {
  .contact.contact--ironmonger .contact__tiles {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .contact.contact--ironmonger .contact__tile--visit {
    border-right: var(--ir-contact-rule);
    border-bottom: var(--ir-contact-rule);
  }

  .contact.contact--ironmonger .contact__tile--call {
    border-right: 0;
    border-bottom: var(--ir-contact-rule);
  }

  .contact.contact--ironmonger .contact__tile--write {
    grid-column: 1 / -1;
    border-right: 0;
    border-bottom: 0;
  }
}

@media (max-width: 575.98px) {
  .contact.contact--ironmonger .contact__tiles {
    grid-template-columns: 1fr;
  }

  /* One outer frame only - no internal dividers when tiles stack. */
  .contact.contact--ironmonger .contact__tile,
  .contact.contact--ironmonger .contact__tile:not(:last-child) {
    border-right: 0;
    border-bottom: 0;
  }

  .contact.contact--ironmonger .contact__tile--write {
    grid-column: auto;
  }
}

@media (max-width: 767.98px) {
  .contact.contact--ironmonger .contact__map-link {
    aspect-ratio: 4 / 3;
    max-height: none;
    min-height: clamp(12rem, 52vw, 17.5rem);
    height: auto;
  }

  .contact.contact--ironmonger .contact__map-stage-media .contact__map-image {
    width: 100%;
    height: 100%;
    min-height: inherit;
    max-height: none;
    aspect-ratio: auto;
    object-fit: cover;
  }

  .contact.contact--ironmonger .contact__map-footer {
    flex-direction: column;
    align-items: stretch;
    gap: 1rem;
    padding-block: 1rem;
  }

  .contact.contact--ironmonger .contact__map-footer-copy {
    flex: 0 0 auto;
    max-width: none;
  }

  .contact.contact--ironmonger .contact__map-footer .contact__directions-link.button--primary {
    width: 100%;
    justify-content: center;
  }

  /* Intro above form: one column (explicit reset beats sticky grid-column: 2). */
  .contact.contact--ironmonger .contact__form-band-inner {
    grid-template-columns: minmax(0, 1fr);
  }

  .contact.contact--ironmonger .contact__form-intro.wysiwyg,
  .contact.contact--ironmonger .contact__form-fields {
    grid-column: 1;
    grid-row: auto;
  }

  .contact.contact--ironmonger .contact__form .ff-t-container,
  .contact.contact--ironmonger .contact__form .ff-t-container.ff_columns_total_3 {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (min-width: 768px) {
  .contact.contact--ironmonger .contact__tile:not(:last-child) {
    border-right: var(--ir-contact-rule);
  }

  .contact.contact--ironmonger .contact__form-band-inner {
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
    gap: clamp(2rem, 4vw, 3.5rem);
  }

  .contact.contact--ironmonger .contact__form-intro.wysiwyg {
    grid-column: 1;
    grid-row: 1;
  }

  .contact.contact--ironmonger .contact__form-fields {
    grid-column: 2;
    grid-row: 1;
  }
}


/* --- 10.1 Promo box hardening (parent `_promo.scss` pill overlay + hover bleed) --- */
body.skin-ironmonger a.promo,
body.skin-ironmonger .promo {
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  border-radius: var(--dv-radius) !important;
  background: var(--dv-color-primary) !important;
  text-decoration: none !important;
}
body.skin-ironmonger .promo::before,
body.skin-ironmonger .promo::after {
  display: none !important;
  content: none !important;
  opacity: 0 !important;
}
body.skin-ironmonger .promo img {
  width: 100% !important;
  aspect-ratio: 4 / 5 !important;
  object-fit: cover !important;
  display: block !important;
  border-radius: var(--dv-radius) var(--dv-radius) 0 0 !important;
  transform: none !important;
}
body.skin-ironmonger .promo:hover img,
body.skin-ironmonger .promo:focus img,
body.skin-ironmonger .promo:focus-visible img { transform: scale(1.04) !important; }
body.skin-ironmonger .promo .promo__overlay {
  position: static !important;
  inset: auto !important;
  transform: none !important;
  left: auto !important;
  bottom: auto !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 1rem 1.25rem !important;
  background: var(--dv-color-primary) !important;
  color: var(--dv-color-primary-contrast) !important;
  font-family: var(--dv-font-heading) !important;
  font-size: clamp(1.05rem, 2vw, 1.2rem) !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  text-align: center !important;
  border-radius: 0 0 var(--dv-radius) var(--dv-radius) !important;
  white-space: normal !important;
  box-sizing: border-box !important;
}
body.skin-ironmonger .promo:hover .promo__overlay,
body.skin-ironmonger .promo:focus .promo__overlay,
body.skin-ironmonger .promo:focus-visible .promo__overlay {
  background: var(--dv-color-heading) !important;
}

/* --- 17.5a Post carousel hardening (parent `.carousel` flex + teal card bleed) --- */
body.skin-ironmonger .carousel.post-carousel {
  display: grid !important;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) !important;
  gap: 2rem !important;
  align-items: start !important;
}
body.skin-ironmonger .post-carousel .carousel__images {
  position: relative !important;
  width: auto !important;
  font-size: inherit !important;
}
body.skin-ironmonger .post-carousel .carousel__content {
  display: block !important;
  align-items: stretch !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}
body.skin-ironmonger .post-carousel .carousel__content h1,
body.skin-ironmonger .post-carousel .carousel__content h2,
body.skin-ironmonger .post-carousel .carousel__content h3,
body.skin-ironmonger .post-carousel .carousel__content h4,
body.skin-ironmonger .post-carousel .carousel__content h5 {
  color: var(--dv-color-heading) !important;
}
body.skin-ironmonger .post-carousel .carousel__card {
  background: var(--dv-color-bg) !important;
  border: 1px solid var(--dv-color-border) !important;
  border-radius: var(--dv-radius) !important;
  color: var(--dv-color-text) !important;
  padding: 1.75rem !important;
  box-shadow: none !important;
}
body.skin-ironmonger .post-carousel .carousel__card h3 {
  color: var(--dv-color-heading) !important;
}
body.skin-ironmonger .post-carousel .carousel__card p,
body.skin-ironmonger .post-carousel .carousel__card .wysiwyg {
  color: var(--dv-color-text) !important;
}
body.skin-ironmonger .post-carousel .carousel__nav {
  position: absolute !important;
  inset: auto 1.25rem 1.25rem auto !important;
  bottom: 1.25rem !important;
  right: 1.25rem !important;
  margin: 0 !important;
  display: flex !important;
  gap: .4rem !important;
  z-index: 3 !important;
}
body.skin-ironmonger .post-carousel .carousel__prev,
body.skin-ironmonger .post-carousel .carousel__next {
  width: 2.4rem !important;
  height: 2.4rem !important;
  padding: 0 !important;
  border: 1px solid var(--dv-color-border) !important;
  border-radius: 0 !important;
  background: var(--dv-color-bg) !important;
  background-image: none !important;
  box-shadow: none !important;
  transform: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 0 !important;
  line-height: 0 !important;
  overflow: hidden !important;
}
body.skin-ironmonger .post-carousel .carousel__next { transform: none !important; }
body.skin-ironmonger .post-carousel > * { min-width: 0 !important; }
body.skin-ironmonger .post-carousel .carousel__images,
body.skin-ironmonger .post-carousel .carousel__content {
  overflow: hidden !important;
  min-width: 0 !important;
}
body.skin-ironmonger .post-carousel .carousel__images .slick-list,
body.skin-ironmonger .post-carousel .carousel__cards .slick-list {
  overflow: hidden !important;
  width: 100% !important;
}
body.skin-ironmonger .post-carousel .carousel__images .slick-track,
body.skin-ironmonger .post-carousel .carousel__cards .slick-track {
  display: flex !important;
  align-items: flex-start !important;
}
body.skin-ironmonger .post-carousel .carousel__images .slick-slide,
body.skin-ironmonger .post-carousel .carousel__cards .slick-slide {
  float: none !important;
  height: auto !important;
}
body.skin-ironmonger .post-carousel .carousel__images .slick-slide > div,
body.skin-ironmonger .post-carousel .carousel__cards .slick-slide > div {
  width: 100% !important;
}
body.skin-ironmonger .post-carousel .carousel__cards .carousel__card {
  opacity: 1 !important;
  height: auto !important;
}
body.skin-ironmonger .post-carousel .carousel__image img {
  width: 100% !important;
  aspect-ratio: 6 / 5 !important;
  object-fit: cover !important;
  display: block !important;
}
body.skin-ironmonger .post-carousel .carousel__image-placeholder {
  aspect-ratio: 6 / 5;
  width: 100%;
  background: var(--dv-color-bg-alt);
}
body.skin-ironmonger .post-carousel .carousel__cards .slick-list {
  min-height: 0 !important;
  /* Slick ceil()s slide width; without this the card's 1px right border is clipped. */
  padding-right: 1px !important;
}
body.skin-ironmonger .post-carousel .carousel__cards .slick-slide.slick-active {
  z-index: 2;
}
body.skin-ironmonger .post-carousel .carousel__cards .slick-slide:not(.slick-active) {
  pointer-events: none;
}
@media (max-width: 767px) {
  body.skin-ironmonger .carousel.post-carousel {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}
/* === BLOCK-HARDENING-OCT2026-REMAINING === */

/* --- 10.2 FAQ / accordion hardening (parent teal fill + Bootstrap SVG chevron) --- */
body.skin-ironmonger .accordion .accordion-button::after,
body.skin-ironmonger .faq .accordion-button::after {
  content: "+" !important;
  background-image: none !important;
  width: 1.25rem !important;
  height: 1.25rem !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-family: var(--dv-font-body) !important;
  font-size: 1.35rem !important;
  font-weight: 300 !important;
  line-height: 1 !important;
  color: var(--dv-color-heading) !important;
  transform: none !important;
  filter: none !important;
}
body.skin-ironmonger .accordion .accordion-button:not(.collapsed)::after,
body.skin-ironmonger .faq .accordion-button:not(.collapsed)::after {
  content: "\2212" !important;
  background-image: none !important;
  color: var(--dv-color-accent-ink) !important;
  transform: none !important;
}
body.skin-ironmonger .accordion,
body.skin-ironmonger .faq .accordion {
  display: block !important;
  gap: 0 !important;
}
body.skin-ironmonger .accordion-item {
  margin-bottom: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
}
body.skin-ironmonger .accordion-button:not(.collapsed) {
  background: transparent !important;
  color: var(--dv-color-accent-ink) !important;
  box-shadow: none !important;
}


/* Gallery lightbox STY-02 (square on heritage skins; token radius on Thermae). */
body.skin-ironmonger .featherlight-next,
body.skin-ironmonger .featherlight-previous {
  top: 50%;
  right: auto;
  bottom: auto;
  left: auto;
  width: 2.75rem;
  height: 2.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translateY(-50%);
  background: color-mix(in srgb, var(--dv-color-bg) 88%, transparent) !important;
  border: 1px solid var(--dv-color-border);
  border-radius: 0;
  color: var(--dv-rule-accent);
  transition: background .18s ease, color .18s ease, box-shadow .18s ease;
}
body.skin-ironmonger .featherlight-previous {
  left: calc(1.25rem + env(safe-area-inset-left, 0px));
}
body.skin-ironmonger .featherlight-next {
  right: calc(1.25rem + env(safe-area-inset-right, 0px));
}
body.skin-ironmonger .featherlight-next:hover,
body.skin-ironmonger .featherlight-previous:hover {
  background: var(--dv-color-bg) !important;
  color: var(--dv-color-link-hover);
  box-shadow: var(--dv-shadow);
}
body.skin-ironmonger .featherlight-next span,
body.skin-ironmonger .featherlight-previous span {
  display: none !important;
}
body.skin-ironmonger .featherlight-previous::before,
body.skin-ironmonger .featherlight-next::before {
  content: "";
  display: block;
  width: var(--dv-nav-chevron-size, 0.55rem);
  height: var(--dv-nav-chevron-size, 0.55rem);
  border: solid currentColor;
  border-width: 0 2px 2px 0;
}
body.skin-ironmonger .featherlight-previous::before {
  transform: rotate(135deg);
  margin-left: var(--dv-nav-tune-lightbox-prev-x, 0.1rem);
  margin-top: var(--dv-nav-tune-lightbox-prev-y, -0.04rem);
}
body.skin-ironmonger .featherlight-next::before {
  transform: rotate(-45deg);
  margin-left: var(--dv-nav-tune-lightbox-next-x, 0);
  margin-top: var(--dv-nav-tune-lightbox-next-y, 0);
}


body.skin-ironmonger .function-room__badge,
body.skin-ironmonger .function-room__qualifier {
  border-radius: var(--dv-radius) !important;
}
body.skin-ironmonger .function-room__divide-panel {
  border-radius: 0 !important;
}
body.skin-ironmonger .function-room__divide-bar {
  border-radius: 0 !important;
}



/* --- 17.6 Block carousel (`.carousel` without `.post-carousel`) -------------- */
body.skin-ironmonger .carousel:not(.post-carousel) {
  display: flex !important;
  align-items: center !important;
  gap: clamp(1.25rem, 3vw, 2rem) !important;
}
body.skin-ironmonger .carousel:not(.post-carousel) > * {
  min-width: 0 !important;
}
body.skin-ironmonger .carousel:not(.post-carousel) .carousel__images {
  flex: 0 0 57%;
  width: 57% !important;
  max-width: 57%;
  position: relative !important;
  font-size: inherit !important;
  overflow: hidden !important;
}
body.skin-ironmonger .carousel:not(.post-carousel) .carousel__content {
  flex: 0 0 43%;
  width: 43% !important;
  max-width: 43%;
  display: block !important;
  align-items: stretch !important;
  margin: 0 !important;
  padding: 0 !important;
}
body.skin-ironmonger .carousel:not(.post-carousel) .carousel__card {
  width: 100%;
  box-sizing: border-box;
}

body.skin-ironmonger .carousel:not(.post-carousel) .carousel__card {
  background: var(--dv-color-primary) !important;
  border: var(--ir-rule) !important;
  border-radius: var(--dv-radius) !important;
  box-shadow: none !important;
  color: var(--dv-color-primary-contrast) !important;
  padding: 2rem !important;
}
body.skin-ironmonger .carousel:not(.post-carousel) .carousel__content h1,
body.skin-ironmonger .carousel:not(.post-carousel) .carousel__content h2,
body.skin-ironmonger .carousel:not(.post-carousel) .carousel__content h3,
body.skin-ironmonger .carousel:not(.post-carousel) .carousel__content h4,
body.skin-ironmonger .carousel:not(.post-carousel) .carousel__content h5,
body.skin-ironmonger .carousel:not(.post-carousel) .carousel__card h3 {
  color: var(--dv-color-primary-contrast) !important;
}
body.skin-ironmonger .carousel:not(.post-carousel) .carousel__card p,
body.skin-ironmonger .carousel:not(.post-carousel) .carousel__card .wysiwyg,
body.skin-ironmonger .carousel:not(.post-carousel) .carousel__card .wysiwyg p {
  color: var(--dv-color-primary-contrast) !important;
}

body.skin-ironmonger .carousel:not(.post-carousel) .carousel__nav {
  position: absolute !important;
  inset: auto 1.25rem 1.25rem auto !important;
  margin: 0 !important;
  display: flex !important;
  gap: .4rem !important;
  z-index: 3 !important;
}
@media (max-width: 991px) {
  body.skin-ironmonger .carousel:not(.post-carousel) {
    display: block !important;
  }
  body.skin-ironmonger .carousel:not(.post-carousel) .carousel__images,
  body.skin-ironmonger .carousel:not(.post-carousel) .carousel__content {
    width: 100% !important;
    max-width: 100%;
  }
  body.skin-ironmonger .carousel:not(.post-carousel) .carousel__content {
    margin-top: 1.25rem !important;
  }
}


/* STY-02 tail: beat parent nav-controls.css (loads after skin). */
body.skin-ironmonger .carousel .carousel__prev,
body.skin-ironmonger .carousel .carousel__next,
body.skin-ironmonger .room .room__prev,
body.skin-ironmonger .room .room__next,
body.skin-ironmonger .carousel .slick-prev,
body.skin-ironmonger .carousel .slick-next,
body.skin-ironmonger .promo-calendar .promo-calendar__nav,
body.skin-ironmonger .promo-embed--carousel .promo-embed__track .slick-prev,
body.skin-ironmonger .promo-embed--carousel .promo-embed__track .slick-next {
  border: 1px solid var(--dv-color-border) !important;
  border-radius: 0 !important;
  background: var(--dv-color-bg) !important;
  background-image: none !important;
  box-shadow: none !important;
  color: var(--dv-rule-accent) !important;
}
body.skin-ironmonger .carousel .carousel__prev:hover,
body.skin-ironmonger .carousel .carousel__next:hover,
body.skin-ironmonger .room .room__prev:hover,
body.skin-ironmonger .room .room__next:hover,
body.skin-ironmonger .carousel .slick-prev:hover,
body.skin-ironmonger .carousel .slick-next:hover,
body.skin-ironmonger .promo-calendar .promo-calendar__nav:hover,
body.skin-ironmonger .promo-embed--carousel .promo-embed__track .slick-prev:hover,
body.skin-ironmonger .promo-embed--carousel .promo-embed__track .slick-next:hover {
  background: var(--dv-color-bg-alt) !important;
  border-color: var(--dv-color-border) !important;
  color: var(--dv-color-link-hover) !important;
}
body.skin-ironmonger .post-carousel .carousel__prev,
body.skin-ironmonger .post-carousel .carousel__next {
  border-radius: 0 !important;
  color: var(--dv-rule-accent) !important;
}
body.skin-ironmonger .post-carousel .carousel__prev:hover,
body.skin-ironmonger .post-carousel .carousel__next:hover {
  background: var(--dv-color-bg-alt) !important;
  color: var(--dv-color-link-hover) !important;
}

/* --- 18.6 Desktop dropdown - CD Complete Reference v6 ---------------------- */
/*
 * Last word on the bar dropdown at 992px and up; earlier dropdown rules stay for
 * the drawer and as fallbacks. v6 specimen: 208px panel, 7px block padding,
 * 10px 18px rows at 13.5px, rows in text ink, current in heading ink + bold,
 * hover band in bg-alt with accent-ink. overflow is visible so a third-level
 * flyout is not clipped.
 */
@media (min-width: 992px) {
  body.skin-ironmonger .site-header #nav-main.nav-main .nav-main__dropdown {
    min-width: 13rem;
    padding: 7px 0 !important;
    background: var(--dv-color-bg) !important;
    border: 1px solid var(--dv-color-border) !important;
    border-radius: var(--dv-radius);
    box-shadow: 0 18px 42px -20px rgba(0, 0, 0, .28);
    overflow: visible;
  }
  body.skin-ironmonger .site-header #nav-main.nav-main .nav-main__dropdown .nav-main__dropdown {
    top: -8px;
    left: 100%;
  }
  body.skin-ironmonger .site-header #nav-main.nav-main .nav-main__dropdown li > a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 18px !important;
    font-family: var(--dv-font-body) !important;
    font-size: calc(var(--dv-font-size-base) * .84375) !important;
    font-weight: var(--dv-font-weight-normal) !important;
    line-height: 1.4;
    letter-spacing: 0 !important;
    text-transform: none !important;
    text-decoration: none;
    color: var(--dv-color-text) !important;
    background: transparent !important;
  }
  body.skin-ironmonger .site-header #nav-main.nav-main .nav-main__dropdown li.current-menu-item > a,
  body.skin-ironmonger .site-header #nav-main.nav-main .nav-main__dropdown li.current_page_item > a {
    color: var(--dv-color-heading) !important;
    font-weight: var(--dv-font-weight-bold) !important;
  }
  body.skin-ironmonger .site-header #nav-main.nav-main .nav-main__dropdown li > a:hover,
  body.skin-ironmonger .site-header #nav-main.nav-main .nav-main__dropdown li > a:focus-visible {
    background: var(--dv-color-bg-alt) !important;
    color: var(--dv-color-accent-ink) !important;
  }
  body.skin-ironmonger .site-header #nav-main.nav-main .nav-main__dropdown li.menu-item-has-children > a::after {
    content: "";
    flex: 0 0 auto;
    float: none;
    width: 5px;
    height: 5px;
    margin: 0;
    border-right: 1px solid currentColor;
    border-bottom: 1px solid currentColor;
    transform: rotate(-45deg);
    opacity: .7;
  }
}

/* =============================================================================
   21. Block signatures (CD Oct 2026 - "Block Signatures Seven Skins")
   Feature: shared 2px frame · Promo: framed tile, plum bar · Gallery: ruled grid
   Carousel + Post carousel: framed 2/3 + 1/3 · Tabs: pill as framed cells
   Tables: framed, plum band
   ============================================================================= */

/* --- 21.1 Feature: image + panel share one 2px frame with a 2px divider ---- */
body.skin-ironmonger .layout__block .row:has(> [class*="col-lg-6"] > .wysiwyg--feature) {
  --bs-gutter-x: 0;
  align-items: stretch;
  margin-inline: 0;
  border: var(--ir-rule-heavy);
}
body.skin-ironmonger .layout__block .row:has(> [class*="col-lg-6"] > .wysiwyg--feature) > [class*="col-lg-6"] {
  align-self: stretch !important;
}
body.skin-ironmonger .layout__block .row:has(> [class*="col-lg-6"] > .wysiwyg--feature) figure {
  margin: 0 !important;
  height: 100%;
  border: 0 !important;
  background: none !important;
}
body.skin-ironmonger .layout__block .row:has(> [class*="col-lg-6"] > .wysiwyg--feature) figure:not(.feature-figure--landscape) img {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 0;
}
body.skin-ironmonger .layout__block .row > [class*="col-lg-6"] > .wysiwyg--feature {
  height: 100%;
  margin: 0 !important;
  padding: clamp(2rem, 4vw, 3.25rem) !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
@media (min-width: 992px) {
  body.skin-ironmonger (:has(figure.feature-margin)) > [class*="col-lg-6"]:has(> figure) {
    border-inline-end: var(--ir-rule-heavy);
  }
  body.skin-ironmonger (figure.feature-margin) > [class*="col-lg-6"]:has(> figure) {
    border-inline-start: var(--ir-rule-heavy);
  }
}
@media (max-width: 991px) {
  body.skin-ironmonger .layout__block .row > [class*="col-lg-6"]:has(> .wysiwyg--feature) {
    border-top: var(--ir-rule-heavy);
  }
  body.skin-ironmonger .layout__block .row > [class*="col-lg-6"] > .wysiwyg--feature {
    height: auto;
  }
}

body.skin-ironmonger .layout__block .row > [class*="col-lg-6"] > .wysiwyg--feature::after {
  content: none !important;
  display: none !important;
}

/* --- 21.2 Promo: whole tile framed 2px plum, square image, plum title bar -- */
body.skin-ironmonger .layout__block .row.gx-lg-6:has(a.promo) {
  justify-content: center;
}
body.skin-ironmonger .layout__block a.promo {
  border: var(--ir-rule-heavy) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: var(--dv-color-primary) !important;
}
body.skin-ironmonger .layout__block a.promo img {
  aspect-ratio: 1 !important;
  border-radius: 0 !important;
  border: 0 !important;
}
body.skin-ironmonger .layout__block a.promo:hover img,
body.skin-ironmonger .layout__block a.promo:focus-visible img {
  transform: none !important;
}
body.skin-ironmonger .layout__block a.promo .promo__overlay {
  background: var(--dv-color-primary) !important;
  color: var(--dv-color-primary-contrast) !important;
  text-align: left !important;
  border-radius: 0 !important;
  transition: background-color .2s ease !important;
}
body.skin-ironmonger .layout__block a.promo:hover .promo__overlay,
body.skin-ironmonger .layout__block a.promo:focus-visible .promo__overlay {
  background: var(--dv-color-accent) !important;
  color: var(--dv-color-accent-contrast) !important;
}
@media (max-width: 767px) {
  body.skin-ironmonger .layout__block a.promo img {
    aspect-ratio: 16 / 9 !important;
  }
}

/* --- 21.3 Gallery: ruled grid - 2px plum lines around every square thumb -- */
body.skin-ironmonger .gallery-grid {
  --bs-gutter-x: 0;
  --bs-gutter-y: 0;
  margin-inline: 0;
  border-top: var(--ir-rule-heavy);
  border-left: var(--ir-rule-heavy);
}
body.skin-ironmonger .gallery-grid > [class*="col-"] {
  margin-bottom: 0 !important;
  border-right: var(--ir-rule-heavy);
  border-bottom: var(--ir-rule-heavy);
}
body.skin-ironmonger a.gallery {
  border: 0;
  outline: 2px solid transparent;
  outline-offset: -2px;
  transition: outline-color .15s ease;
}
body.skin-ironmonger a.gallery img {
  aspect-ratio: 1;
}
body.skin-ironmonger a.gallery:hover,
body.skin-ironmonger a.gallery:focus-visible {
  outline-color: var(--dv-color-accent);
}

/* --- 21.4 Carousel + Post carousel: one 2px frame, image 2/3 + card 1/3 --- */
body.skin-ironmonger .layout__block .carousel:not(.post-carousel),
body.skin-ironmonger .layout__block .carousel.post-carousel {
  display: grid !important;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) !important;
  grid-template-rows: 1fr auto;
  align-items: stretch !important;
  gap: 0 !important;
  border: var(--ir-rule-heavy);
  background: var(--dv-color-bg-alt);
}
body.skin-ironmonger .layout__block .carousel .carousel__images {
  display: contents !important;
}
body.skin-ironmonger .layout__block .carousel .carousel__images-slider {
  grid-column: 1;
  grid-row: 1 / span 2;
  min-width: 0;
  border-inline-end: var(--ir-rule-heavy);
}
body.skin-ironmonger .layout__block .carousel .carousel__image img {
  display: block;
  width: 100% !important;
  aspect-ratio: 4 / 3 !important;
  object-fit: cover !important;
  border-radius: 0 !important;
}
/* The card column can outgrow the 4:3 image; the image fills the frame so no strip shows below it. */
@media (min-width: 992px) {
  body.skin-ironmonger .layout__block .carousel .carousel__images-slider .slick-list,
  body.skin-ironmonger .layout__block .carousel .carousel__images-slider .slick-track {
    height: 100% !important;
  }
  body.skin-ironmonger .layout__block .carousel .carousel__images-slider .slick-track {
    display: flex !important;
  }
  body.skin-ironmonger .layout__block .carousel .carousel__images-slider .slick-slide,
  body.skin-ironmonger .layout__block .carousel .carousel__images-slider .slick-slide > div,
  body.skin-ironmonger .layout__block .carousel .carousel__images-slider .carousel__image {
    height: 100% !important;
  }
  body.skin-ironmonger .layout__block .carousel .carousel__images-slider .carousel__image img {
    height: 100% !important;
  }
}
body.skin-ironmonger .layout__block .carousel .carousel__content {
  grid-column: 2 !important;
  grid-row: 1;
  display: flex !important;
  align-items: center !important;
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
  padding: clamp(1.5rem, 3vw, 2.5rem) !important;
}
body.skin-ironmonger .layout__block .carousel .carousel__card {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  color: var(--dv-color-text) !important;
}
body.skin-ironmonger .layout__block .carousel .carousel__card h3,
body.skin-ironmonger .layout__block .carousel .carousel__content h3 {
  color: var(--dv-color-heading) !important;
}
body.skin-ironmonger .layout__block .carousel .carousel__card p,
body.skin-ironmonger .layout__block .carousel .carousel__card .wysiwyg,
body.skin-ironmonger .layout__block .carousel .carousel__card .wysiwyg p {
  color: var(--dv-color-text) !important;
}
body.skin-ironmonger .layout__block .carousel .carousel__nav {
  grid-column: 2;
  grid-row: 2;
  position: static !important;
  inset: auto !important;
  margin: 0 clamp(1.5rem, 3vw, 2.5rem) !important;
  padding: 1rem 0 clamp(1.5rem, 3vw, 2.5rem) !important;
  border-top: var(--ir-rule);
  display: flex !important;
  gap: .5rem !important;
}
body.skin-ironmonger .layout__block .carousel .carousel__nav .carousel__prev,
body.skin-ironmonger .layout__block .carousel .carousel__nav .carousel__next {
  background: transparent !important;
  border: var(--ir-rule-heavy) !important;
  color: var(--dv-color-primary) !important;
}
body.skin-ironmonger .layout__block .carousel .carousel__nav .carousel__prev:hover,
body.skin-ironmonger .layout__block .carousel .carousel__nav .carousel__next:hover,
body.skin-ironmonger .layout__block .carousel .carousel__nav .carousel__prev:focus-visible,
body.skin-ironmonger .layout__block .carousel .carousel__nav .carousel__next:focus-visible {
  background: var(--dv-color-primary) !important;
  color: var(--dv-color-primary-contrast) !important;
}
body.skin-ironmonger .layout__block .post-carousel .carousel__cards .slick-slide:not(.slick-active) {
  visibility: hidden;
}
@media (max-width: 991px) {
  body.skin-ironmonger .layout__block .carousel:not(.post-carousel),
  body.skin-ironmonger .layout__block .carousel.post-carousel {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto;
  }
  body.skin-ironmonger .layout__block .carousel .carousel__images-slider {
    grid-row: 1;
    border-inline-end: 0;
  }
  body.skin-ironmonger .layout__block .carousel .carousel__content {
    grid-column: 1 !important;
    grid-row: 2;
    border-top: var(--ir-rule-heavy);
  }
  body.skin-ironmonger .layout__block .carousel .carousel__nav {
    grid-column: 1;
    grid-row: 3;
  }
}

/* --- 21.5 Tabs: pill restyled as framed cells, active cell filled plum ---- */
body.skin-ironmonger .feature-nav--pill {
  display: inline-flex !important;
  flex-wrap: nowrap;
  gap: 0 !important;
  max-width: 100%;
  overflow-x: auto;
  scrollbar-width: none;
  border: var(--ir-rule-heavy);
}
body.skin-ironmonger .feature-nav--pill button.feature-nav__button {
  padding: .75rem 1.25rem;
  border: 0 !important;
  border-radius: 0;
  background: transparent !important;
}
body.skin-ironmonger .feature-nav--pill button.feature-nav__button + .feature-nav__button {
  border-inline-start: var(--ir-rule-heavy) !important;
}
body.skin-ironmonger .feature-nav--pill button.feature-nav__button:not(.active):hover {
  background: var(--dv-color-bg-alt) !important;
  color: var(--dv-color-heading);
}
body.skin-ironmonger .feature-nav--pill button.feature-nav__button.active {
  background: var(--dv-color-primary) !important;
  color: var(--dv-color-primary-contrast);
}
body.skin-ironmonger .tabs-block--pill .features .slide {
  border: var(--ir-rule-heavy);
  padding: clamp(1.25rem, 3vw, 2rem);
}
body.skin-ironmonger .tabs-block--pill .features .slide .slide__image > img {
  border-radius: 0;
}

/* --- 21.6 Tables: 2px framed table + plum caps band, framed image -------- */
body.skin-ironmonger .table-item .info-table {
  border: var(--ir-rule-heavy);
  background: var(--dv-color-bg);
}
body.skin-ironmonger .table-item .info-table thead tr th {
  background: var(--dv-color-primary);
  color: var(--dv-color-primary-contrast);
  border-bottom: 0;
  padding: .85rem 1rem;
}
body.skin-ironmonger .table-item .info-table tbody tr td {
  padding: .85rem 1rem;
}
body.skin-ironmonger .table-item__media {
  border: var(--ir-rule-heavy);
  border-radius: 0;
}

/* =============================================================================
   22. Library icons (Phosphor) - see _md/ICONS.md
   Info panel strip: primary glyph on bg-alt square, 2px primary frame; band:
   light glyph in a 2px soft frame (per CD).
   ============================================================================= */
body.skin-ironmonger .room-feature .room-feature__icon--glyph {
  width: 2rem;
  height: 2rem;
}
body.skin-ironmonger .info-panel.info-panel--strip .info-panel__icon--glyph {
  background: var(--dv-color-bg-alt);
  border: 2px solid var(--dv-color-primary);
  border-radius: 0;
  color: var(--dv-color-primary);
}
body.skin-ironmonger .info-panel.info-panel--strip.info-panel--full-bleed .info-panel__icon--glyph {
  background: transparent;
  border: 2px solid color-mix(in srgb, var(--dv-color-primary-contrast) 80%, var(--dv-color-primary));
  color: var(--dv-color-primary-contrast);
}