/* ===========================================================================
   Discover Lanzarote front end
   ===========================================================================
   STRUCTURE is matched to turismolanzarote.com (Ian's named reference),
   verified 2026-07-15 from its child theme `rgr-localseo`, not from its
   autoptimize bundle: utility bar, category-grouped megamenu, full-bleed
   statement hero, dense photo grids, fat multi-column footer.

   Colour and corners deliberately depart from that reference. Turismo is
   red-orange (#ff2d00) with 1-2px corners; this is white, Atlantic blue and
   sand, with rounded photos and pill buttons.

   The palette that used to be here was frequency-counted from turismo's
   concatenated plugin CSS and was therefore fiction: #5aa1e3, #f7be68 and
   #6dab3c appear nowhere in its real theme. Never measure a bundle.

   Colours/type live in theme.json and arrive as --wp--preset--* custom
   properties. Do not hard-code hexes here; change theme.json instead.
   ======================================================================== */

:root {
  --dlz-container: 1200px;
  --dlz-wide: 1340px;
  --dlz-shell: 1280px;
  --dlz-gut: 24px;
  --dlz-gap: 12px;
  --dlz-head-h: 76px;

  --dlz-r:      4px;
  --dlz-r-card: 14px;
  --dlz-r-pill: 999px;

  --dlz-white:     var(--wp--preset--color--white, #ffffff);
  --dlz-paper:     var(--wp--preset--color--paper, #f6f6f6);
  --dlz-mist:      var(--wp--preset--color--mist, #eef1f4);
  --dlz-line:      var(--wp--preset--color--line, #e2e7ec);
  --dlz-ink:       var(--wp--preset--color--ink, #3d454e);
  --dlz-ink-soft:  var(--wp--preset--color--ink-soft, #6b7681);
  --dlz-ink-mute:  var(--wp--preset--color--ink-mute, #95a0aa);
  --dlz-sea:       var(--wp--preset--color--sea, #0d6ba8);
  --dlz-sea-deep:  var(--wp--preset--color--sea-deep, #08405f);
  --dlz-sea-light: var(--wp--preset--color--sea-light, #6fb9e4);
  --dlz-sea-pale:  var(--wp--preset--color--sea-pale, #eaf4fb);
  --dlz-sun:       var(--wp--preset--color--sun, #d99a2b);
  --dlz-sun-deep:  var(--wp--preset--color--sun-deep, #8a5f14);
  --dlz-sun-pale:  var(--wp--preset--color--sun-pale, #fbf0d9);
  --dlz-volcanic:  var(--wp--preset--color--volcanic, #191c20);
  --dlz-volcanic-2:#23282e;
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--dlz-white);
  color: var(--dlz-ink);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  /* Sticky footer: a short page still pushes the footer to the bottom of the
     window rather than leaving white space under it. The other body children
     (the icon sprite, the skip link, the modal) are out of flow or auto height,
     so only the main column needs to be told to grow. */
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
@supports (min-height: 100svh) {
  body { min-height: 100svh; }
}

/* 1 0 auto, not flex:1 : "auto" keeps the basis at the content's real height,
   so a long page is unaffected and only a short one stretches. */
#dlz-main { flex: 1 0 auto; }
.dlz-footer { flex-shrink: 0; }

img { max-width: 100%; height: auto; display: block; }
a { color: var(--dlz-sea); }
a:hover { color: var(--dlz-sea-deep); }
:focus-visible { outline: 2px solid var(--dlz-sea); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

.dlz-wrap { max-width: var(--dlz-shell); margin: 0 auto; padding: 0 20px; }

.dlz-skip {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--dlz-sea); color: #fff; padding: 12px 18px; border-radius: 0 0 var(--dlz-r) 0;
}
.dlz-skip:focus { left: 0; }

.dlz-eyebrow {
  font-size: 11px; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--dlz-sea); margin: 0;
}

.dlz-ico {
  width: 24px; height: 24px; stroke: currentColor; fill: none;
  stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; flex: none;
}

/* ---------------------------------------------------------------------------
   Utility bar
   ------------------------------------------------------------------------ */
.dlz-util { background: var(--dlz-volcanic); color: #c9d2da; font-size: 12.5px; }
.dlz-util-in { display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 38px; flex-wrap: wrap; }
.dlz-util a { color: inherit; text-decoration: none; }
.dlz-util a:hover { color: #fff; }
.dlz-util-now { display: flex; align-items: center; gap: 8px; }
.dlz-util-now .dlz-ico { width: 15px; height: 15px; color: var(--dlz-sun); }
.dlz-util-now b { font-weight: 500; color: #fff; font-variant-numeric: tabular-nums; }
.dlz-util-links { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; }

/* ---------------------------------------------------------------------------
   Header + megamenu
   ------------------------------------------------------------------------ */
.dlz-header { background: var(--dlz-white); border-bottom: 1px solid var(--dlz-line); position: sticky; top: 0; z-index: 50; }
.dlz-header-in { display: flex; align-items: center; gap: 28px; min-height: var(--dlz-head-h); }

.dlz-logo { text-decoration: none; color: var(--dlz-ink); font-weight: 700; font-size: 19px; letter-spacing: -.015em; line-height: 1.15; white-space: nowrap; }
.dlz-logo-text { display: block; }
.dlz-logo-sub { display: block; font-size: 9.5px; font-weight: 500; letter-spacing: .22em; color: var(--dlz-sun); text-transform: uppercase; }
.custom-logo-link img { max-height: 46px; width: auto; }

.dlz-header-cta {
  background: var(--dlz-sun); color: #241a06; font-weight: 700; font-size: 13px;
  padding: 11px 20px; border-radius: var(--dlz-r-pill); text-transform: uppercase;
  letter-spacing: .05em; white-space: nowrap; text-decoration: none; display: inline-block;
  transition: background .18s ease, color .18s ease;
}
.dlz-header-cta:hover { background: var(--dlz-sea); color: #fff; }

.dlz-nav { margin-left: auto; }
.dlz-nav > ul { display: flex; gap: 2px; margin: 0; padding: 0; list-style: none; height: var(--dlz-head-h); }
.dlz-nav > ul > li { position: relative; display: flex; align-items: center; }
.dlz-nav > ul > li > a {
  display: flex; align-items: center; height: 100%; padding: 0 13px;
  font-size: 13.5px; font-weight: 500; letter-spacing: .04em; text-transform: uppercase;
  text-decoration: none; color: var(--dlz-ink); border-bottom: 3px solid transparent;
}
.dlz-nav > ul > li:hover > a,
.dlz-nav > ul > li.current-menu-item > a,
.dlz-nav > ul > li.current-menu-ancestor > a { color: var(--dlz-sea); border-bottom-color: var(--dlz-sea); }

/* WordPress nests <ul class="sub-menu">; rendered as a dropped panel. */
.dlz-nav .sub-menu {
  position: absolute; top: var(--dlz-head-h); left: 0;
  min-width: 250px; background: var(--dlz-white); border: 1px solid var(--dlz-line);
  border-top: 3px solid var(--dlz-sea); box-shadow: 0 18px 40px rgba(8,32,52,.14);
  padding: 18px; margin: 0; list-style: none;
  display: flex; flex-direction: column; gap: 7px;
  opacity: 0; visibility: hidden; transform: translateY(-6px); transition: .16s ease;
}
.dlz-nav > ul > li:hover > .sub-menu,
.dlz-nav > ul > li:focus-within > .sub-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.dlz-nav .sub-menu a { font-size: 13.5px; color: var(--dlz-ink-soft); text-decoration: none; }
.dlz-nav .sub-menu a:hover { color: var(--dlz-sea); }

/* ---------------------------------------------------------------------------
   Mega menu.

   Opt in with the CSS class dlz-mega on a top-level item (Appearance > Menus,
   Screen Options > CSS Classes). Its children become the columns and their
   children become the links beneath each heading. No walker: WordPress already
   nests the tree, this only lays it out. Shape follows turismolanzarote.com.
   ------------------------------------------------------------------------ */

/* Static, so the panel's containing block becomes .dlz-header and it can span
   the full width instead of hanging off one nav item. */
.dlz-nav > ul > li.dlz-mega { position: static; }

.dlz-nav > ul > li.dlz-mega > .sub-menu {
  top: 100%; left: 0; right: 0; min-width: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 28px 34px; align-items: start;
  /* Panel is full width; its content still lines up with the shell. */
  padding: 32px max(20px, calc((100% - var(--dlz-shell)) / 2 + 20px));
}

/* Top of a column: a heading that happens to be clickable, not a menu row.
   Scoped to items that actually group others, so a flat category placed
   directly in the panel is not mistaken for a heading. */
.dlz-nav .dlz-mega > .sub-menu > li.menu-item-has-children > a {
  display: block; font-size: 11.5px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--dlz-sun-deep);
  padding-bottom: 9px; border-bottom: 1px solid var(--dlz-line);
}
.dlz-nav .dlz-mega > .sub-menu > li.menu-item-has-children > a:hover { color: var(--dlz-sea); }

/* The nested list is part of the panel, not a second dropdown on top of it. */
.dlz-nav .dlz-mega .sub-menu .sub-menu {
  position: static; opacity: 1; visibility: visible; transform: none;
  background: none; border: 0; box-shadow: none;
  padding: 11px 0 0; min-width: 0; gap: 9px;
}

/* Category images. A mega panel is a full-width grid, so there is room to show
   them; a normal dropdown is not, so the thumb stays hidden there. */
.dlz-mega-thumb { display: none; }
.dlz-nav .dlz-mega .dlz-mega-thumb img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}

/* Flat category: the direct grid cell is the category itself. A small square
   thumbnail beside the name, not a banner. */
.dlz-nav .dlz-mega > .sub-menu > li:not(.menu-item-has-children) > a {
  display: flex; align-items: center; gap: 11px; padding: 0; border: 0;
  font-size: 14px; font-weight: 500; letter-spacing: 0; text-transform: none;
  color: var(--dlz-ink);
}
.dlz-nav .dlz-mega > .sub-menu > li:not(.menu-item-has-children) > a:hover { color: var(--dlz-sea); }
.dlz-nav .dlz-mega > .sub-menu > li:not(.menu-item-has-children) .dlz-mega-thumb {
  display: block; flex: 0 0 42px; width: 42px; height: 42px; border-radius: 8px;
  overflow: hidden; background: var(--dlz-paper);
}

/* Grouped category: nested under a heading, so a small inline thumb beside it. */
.dlz-nav .dlz-mega .sub-menu .sub-menu a { display: flex; align-items: center; gap: 10px; }
.dlz-nav .dlz-mega .sub-menu .sub-menu .dlz-mega-thumb {
  display: block; flex: 0 0 46px; height: 34px; border-radius: 6px;
  overflow: hidden; background: var(--dlz-paper);
}

/* A third level outside a mega panel would stack a dropdown on a dropdown.
   Indent it into the parent panel instead. */
.dlz-nav > ul > li:not(.dlz-mega) .sub-menu .sub-menu {
  position: static; opacity: 1; visibility: visible; transform: none;
  background: none; border: 0; box-shadow: none;
  padding: 8px 0 0 12px; min-width: 0;
}

.dlz-burger { display: none; width: 42px; height: 42px; border: 1px solid var(--dlz-line); background: var(--dlz-white); border-radius: var(--dlz-r-pill); cursor: pointer; margin-left: auto; position: relative; }
.dlz-burger span, .dlz-burger span::before, .dlz-burger span::after {
  position: absolute; width: 18px; height: 2px; background: var(--dlz-ink);
  border-radius: 2px; transition: .2s ease;
}
.dlz-burger span { top: 50%; left: 50%; margin: -1px 0 0 -9px; }
.dlz-burger span::before { content: ""; top: -6px; left: 0; }
.dlz-burger span::after  { content: ""; top: 6px;  left: 0; }
.dlz-burger[aria-expanded="true"] span { background: transparent; }
.dlz-burger[aria-expanded="true"] span::before { top: 0; transform: rotate(45deg); }
.dlz-burger[aria-expanded="true"] span::after  { top: 0; transform: rotate(-45deg); }

/* ---------------------------------------------------------------------------
   Hero
   ------------------------------------------------------------------------ */
.dlz-hero { position: relative; min-height: 600px; display: flex; align-items: flex-end; overflow: hidden; background: var(--dlz-volcanic); }
.dlz-hero-media { position: absolute; inset: 0; }
.dlz-hero-media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 62%; }
.dlz-hero::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(6,26,44,.50) 0%, rgba(6,26,44,.10) 34%, rgba(6,26,44,.82) 100%);
}
.dlz-hero-in { position: relative; z-index: 2; padding-top: 110px; padding-bottom: 54px; width: 100%; }
.dlz-hero .dlz-eyebrow { color: var(--dlz-sun); }
.dlz-hero h1 {
  margin: 12px 0 0; color: #fff; font-weight: 700; text-transform: uppercase;
  font-size: clamp(30px, 5.1vw, 62px); line-height: 1.02; letter-spacing: -.02em;
  max-width: 16ch; text-wrap: balance; text-shadow: 0 2px 26px rgba(0,20,40,.5);
}
.dlz-hero-rule { width: 74px; height: 4px; background: var(--dlz-sun); margin: 22px 0 18px; }
.dlz-hero-sub { margin: 0; color: #e8eef4; font-size: 17px; max-width: 52ch; line-height: 1.55; }
.dlz-hero-btns { display: flex; gap: 10px; margin-top: 26px; flex-wrap: wrap; }

.dlz-btn {
  padding: 13px 24px; border-radius: var(--dlz-r-pill); font-size: 13px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .05em; text-decoration: none;
  display: inline-block; border: 0; cursor: pointer; font-family: inherit;
  transition: background .18s ease, color .18s ease;
}
.dlz-btn-p { background: var(--dlz-sun); color: #241a06; }
.dlz-btn-p:hover { background: var(--dlz-sea); color: #fff; }
.dlz-btn-s { background: rgba(255,255,255,.10); color: #fff; border: 1px solid rgba(255,255,255,.55); backdrop-filter: blur(3px); }
.dlz-btn-s:hover { background: #fff; color: var(--dlz-sea-deep); }
.dlz-btn-o { background: transparent; color: var(--dlz-sea); border: 1px solid var(--dlz-sea); }
.dlz-btn-o:hover { background: var(--dlz-sea); color: #fff; }

/* ---------------------------------------------------------------------------
   Section furniture
   ------------------------------------------------------------------------ */
.dlz-section { padding: 62px 0; }
.dlz-section--paper { background: var(--dlz-paper); }
.dlz-section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 24px; flex-wrap: wrap; }
.dlz-section-head h2 { margin: 6px 0 0; font-size: clamp(21px, 2.5vw, 31px); font-weight: 700; letter-spacing: -.015em; text-transform: uppercase; line-height: 1.1; }
.dlz-more { font-size: 12.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--dlz-sea); white-space: nowrap; text-decoration: none; }
.dlz-more:hover { color: var(--dlz-sun); }

/* ---------------------------------------------------------------------------
   Photo cards
   ------------------------------------------------------------------------ */
.dlz-grid { display: grid; gap: var(--dlz-gap); }
.dlz-grid--4 { grid-template-columns: repeat(4, 1fr); }
.dlz-grid--3 { grid-template-columns: repeat(3, 1fr); }
.dlz-grid--2 { grid-template-columns: repeat(2, 1fr); }
.dlz-grid--feature > *:first-child { grid-column: span 2; grid-row: span 2; }

/* Apple-style category rail: first card on the content edge, row runs off the
   right of the viewport. The rail spans the full section width and is padded in
   by the same gutter .dlz-wrap uses, so the first card lines up under the head. */
.dlz-termslider .dlz-section-head { margin-bottom: 18px; }
.dlz-slider-rail {
  display: flex;
  gap: var(--dlz-gap);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding: 4px max(20px, calc((100% - var(--dlz-shell)) / 2 + 20px));
  scroll-padding-left: max(20px, calc((100% - var(--dlz-shell)) / 2 + 20px));
  scrollbar-width: none;
}
.dlz-slider-rail::-webkit-scrollbar { display: none; }
.dlz-slider-rail:focus-visible { outline: 2px solid var(--dlz-sea); outline-offset: 2px; }
.dlz-slider-rail > .dlz-card {
  flex: 0 0 auto;
  width: clamp(230px, 72vw, 292px);
  scroll-snap-align: start;
}
.dlz-slider-nav { display: flex; gap: 8px; }
.dlz-slider-btn {
  width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid var(--dlz-line); background: var(--dlz-white);
  color: var(--dlz-ink); font-size: 20px; line-height: 1; cursor: pointer;
  display: grid; place-items: center; transition: background .15s ease, opacity .15s ease;
}
.dlz-slider-btn:hover { background: var(--dlz-sea-pale); }
.dlz-slider-btn[disabled] { opacity: .35; cursor: default; }

/* ---------------------------------------------------------------------------
   Site search: the homepage typeahead box with photo suggestions.
   ------------------------------------------------------------------------ */
.dlz-searchsec { padding-top: 40px; padding-bottom: 40px; }
.dlz-searchsec-h { text-align: center; margin: 0 0 18px; font-size: clamp(20px, 2.4vw, 28px); letter-spacing: -.02em; }
.dlz-sitesearch { position: relative; max-width: 760px; margin: 0 auto; }
.dlz-sitesearch-field {
  display: flex; align-items: center; gap: 10px;
  background: var(--dlz-white); border: 1px solid var(--dlz-line);
  border-radius: var(--dlz-r-pill); padding: 8px 8px 8px 20px;
  box-shadow: 0 12px 34px rgba(8,32,52,.10);
}
.dlz-sitesearch-ico { width: 20px; height: 20px; color: var(--dlz-ink-mute); flex: none; }
.dlz-sitesearch-input {
  flex: 1; min-width: 0; border: 0; background: none; outline: none;
  font-family: inherit; font-size: 16px; color: var(--dlz-ink); padding: 12px 4px;
}
.dlz-sitesearch-input::placeholder { color: var(--dlz-ink-mute); }
.dlz-sitesearch-input::-webkit-search-cancel-button { -webkit-appearance: none; }
.dlz-sitesearch-go { flex: none; }

.dlz-sitesearch-list {
  position: absolute; z-index: 30; left: 0; right: 0; top: calc(100% + 8px);
  margin: 0; padding: 6px; list-style: none;
  background: var(--dlz-white); border: 1px solid var(--dlz-line);
  border-radius: 16px; box-shadow: 0 18px 44px rgba(8,32,52,.16);
  max-height: min(70vh, 460px); overflow-y: auto;
}
.dlz-sitesearch-opt { border-radius: 12px; }
.dlz-sitesearch-opt > a {
  display: flex; align-items: center; gap: 14px;
  padding: 8px 10px; border-radius: 12px; text-decoration: none; color: inherit;
}
.dlz-sitesearch-opt.is-active > a,
.dlz-sitesearch-opt > a:hover { background: var(--dlz-sea-pale); }
.dlz-sitesearch-thumb {
  flex: none; width: 56px; height: 56px; border-radius: 10px; overflow: hidden;
  background: var(--dlz-paper);
}
.dlz-sitesearch-thumb img { width: 100%; height: 100%; object-fit: cover; }
.dlz-sitesearch-thumb--empty { background: linear-gradient(135deg, var(--dlz-sea-pale), var(--dlz-paper)); }
.dlz-sitesearch-text { display: flex; flex-direction: column; min-width: 0; }
.dlz-sitesearch-kick {
  font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--dlz-sea);
}
.dlz-sitesearch-title {
  font-size: 15px; font-weight: 600; color: var(--dlz-ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dlz-sitesearch-sub {
  font-size: 12.5px; color: var(--dlz-ink-soft);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dlz-sitesearch-empty { padding: 16px; text-align: center; color: var(--dlz-ink-mute); font-size: 14px; }

@media (max-width: 560px) {
  .dlz-sitesearch-field { padding-left: 14px; }
  .dlz-sitesearch-go { padding-left: 16px; padding-right: 16px; }
}

/* ---------------------------------------------------------------------------
   Photo gallery: a tour-header mosaic that opens a full-screen lightbox.
   ------------------------------------------------------------------------ */
.dlz-gallery {
  position: relative; display: grid; gap: 8px;
  border-radius: var(--dlz-r-card); overflow: hidden;
  aspect-ratio: 16 / 9; max-height: 62vh;
}
.dlz-gallery--1 { grid-template-columns: 1fr; grid-template-rows: 1fr; }
.dlz-gallery--2 { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr; }
.dlz-gallery--3 { grid-template-columns: 2fr 1fr; grid-template-rows: 1fr 1fr; }
.dlz-gallery--3 .dlz-gallery-item:first-child { grid-row: 1 / span 2; }
.dlz-gallery--4 { grid-template-columns: 2fr 1fr; grid-template-rows: 1fr 1fr 1fr; }
.dlz-gallery--4 .dlz-gallery-item:first-child { grid-row: 1 / span 3; }
.dlz-gallery--5 { grid-template-columns: 2fr 1fr 1fr; grid-template-rows: 1fr 1fr; }
.dlz-gallery--5 .dlz-gallery-item:first-child { grid-column: 1; grid-row: 1 / span 2; }

.dlz-gallery-item {
  position: relative; margin: 0; padding: 0; border: 0; border-radius: 0; cursor: pointer;
  -webkit-appearance: none; appearance: none;
  overflow: hidden; background: var(--dlz-volcanic);
}
/* .dlz-gallery scopes the selector so it beats .dlz-prose img (equal
   specificity, later in the file) when the block sits inside page content. */
.dlz-gallery .dlz-gallery-item img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 0; transition: transform .5s ease; }
.dlz-gallery-item:hover img { transform: scale(1.04); }
.dlz-gallery-item::after {
  content: ""; position: absolute; inset: 0; background: rgba(6,26,44,0); transition: background .2s ease;
}
.dlz-gallery-item:hover::after { background: rgba(6,26,44,.12); }

.dlz-gallery-all {
  position: absolute; right: 14px; bottom: 14px; z-index: 2;
  display: inline-flex; align-items: center; gap: 8px;
  -webkit-appearance: none; appearance: none;
  padding: 9px 16px; border: 0; border-radius: var(--dlz-r-pill); cursor: pointer;
  background: var(--dlz-white); color: var(--dlz-ink);
  font-family: inherit; font-size: 13px; font-weight: 700;
  box-shadow: 0 6px 18px rgba(8,32,52,.22);
}
.dlz-gallery-all:hover { background: var(--dlz-sea); color: #fff; }
.dlz-gallery-all-ico { width: 16px; height: 16px; }

@media (max-width: 720px) {
  .dlz-gallery { aspect-ratio: 4 / 3; grid-template-columns: 1fr !important; grid-template-rows: 1fr !important; }
  .dlz-gallery .dlz-gallery-item:not(:first-child) { display: none; }
  .dlz-gallery .dlz-gallery-item:first-child { grid-row: auto !important; grid-column: auto !important; }
}

/* Lightbox overlay (built by main.js). */
.dlz-lightbox {
  position: fixed; inset: 0; z-index: 1000;
  display: flex; align-items: center; justify-content: center;
  background: rgba(4,16,28,.94); padding: 24px;
}
.dlz-lightbox[hidden] { display: none; }
.dlz-lightbox-stage { margin: 0; max-width: min(1200px, 92vw); max-height: 88vh; display: flex; flex-direction: column; }
.dlz-lightbox-stage img {
  max-width: 100%; max-height: 82vh; object-fit: contain;
  border-radius: 6px; margin: 0 auto;
}
.dlz-lightbox-stage figcaption { margin-top: 10px; text-align: center; color: #cfdae4; font-size: 13.5px; }
.dlz-lightbox-close {
  position: absolute; top: 16px; right: 18px;
  width: 44px; height: 44px; border: 0; border-radius: 50%; cursor: pointer;
  -webkit-appearance: none; appearance: none;
  background: rgba(255,255,255,.12); color: #fff; font-size: 26px; line-height: 1;
}
.dlz-lightbox-close:hover { background: rgba(255,255,255,.24); }
.dlz-lightbox-nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 52px; height: 52px; border: 0; border-radius: 50%; cursor: pointer;
  -webkit-appearance: none; appearance: none;
  background: rgba(255,255,255,.12); color: #fff; font-size: 30px; line-height: 1;
  display: grid; place-items: center;
}
.dlz-lightbox-nav:hover { background: rgba(255,255,255,.24); }
.dlz-lightbox-nav[hidden] { display: none; }
.dlz-lightbox-prev { left: 18px; }
.dlz-lightbox-next { right: 18px; }
.dlz-lightbox-count {
  position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%);
  color: #cfdae4; font-size: 13px; letter-spacing: .04em;
}
@media (max-width: 560px) {
  .dlz-lightbox-nav { width: 42px; height: 42px; font-size: 24px; }
  .dlz-lightbox-prev { left: 8px; }
  .dlz-lightbox-next { right: 8px; }
}

.dlz-card {
  position: relative; overflow: hidden; border-radius: var(--dlz-r-card);
  background: var(--dlz-volcanic); min-height: 186px; display: flex; text-decoration: none;
}
.dlz-card--tall { min-height: 382px; }
.dlz-card-media { position: absolute; inset: 0; }
.dlz-card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.dlz-card:hover .dlz-card-media img { transform: scale(1.055); }
.dlz-card::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(9,28,46,0) 30%, rgba(9,28,46,.86) 100%);
}
.dlz-card-body { position: relative; z-index: 2; margin-top: auto; padding: 16px; }
.dlz-card-body .dlz-eyebrow { color: var(--dlz-sun); font-size: 10px; }
.dlz-card-body h3 { margin: 5px 0 0; color: #fff; font-size: 17px; font-weight: 700; line-height: 1.2; letter-spacing: -.01em; }
.dlz-card--tall .dlz-card-body h3 { font-size: 25px; }
.dlz-card-body p { margin: 6px 0 0; color: #cfdae4; font-size: 12.5px; line-height: 1.45; }
.dlz-card-sub { margin: 3px 0 0; color: var(--dlz-sun); font-size: 12px; font-weight: 600; letter-spacing: .01em; }
.dlz-card--tall .dlz-card-sub { font-size: 13.5px; }

/* ---------------------------------------------------------------------------
   Split blocks: essay, biosphere
   ------------------------------------------------------------------------ */
.dlz-split { display: grid; grid-template-columns: 1.15fr .85fr; gap: 48px; align-items: start; }
.dlz-split--center { align-items: center; grid-template-columns: 1fr 1fr; }
.dlz-split h2 { margin: 8px 0 16px; font-size: clamp(23px, 2.7vw, 34px); font-weight: 700; letter-spacing: -.02em; line-height: 1.15; text-wrap: balance; }
.dlz-split p { margin: 0 0 15px; color: var(--dlz-ink-soft); max-width: 64ch; }
.dlz-split strong { color: var(--dlz-ink); font-weight: 500; }

.dlz-pull { border-left: 4px solid var(--dlz-sun); background: var(--dlz-sea-pale); padding: 22px 26px; border-radius: 0 var(--dlz-r-card) var(--dlz-r-card) 0; }
.dlz-pull p { margin: 0; font-size: 18px; line-height: 1.45; color: var(--dlz-sea-deep); font-weight: 500; }
.dlz-pull cite { display: block; margin-top: 12px; font-size: 11.5px; font-style: normal; letter-spacing: .11em; text-transform: uppercase; color: var(--dlz-ink-mute); }

.dlz-bio-media { position: relative; border-radius: var(--dlz-r-card); overflow: hidden; min-height: 430px; background: var(--dlz-volcanic); }
.dlz-bio-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.dlz-bio-badge {
  position: absolute; z-index: 2; left: 18px; top: 18px;
  background: rgba(255,255,255,.95); border-radius: var(--dlz-r-pill); padding: 9px 15px;
  display: flex; align-items: center; gap: 8px;
  font-size: 10.5px; font-weight: 700; letter-spacing: .11em; text-transform: uppercase;
  color: var(--dlz-sea-deep); box-shadow: 0 4px 14px rgba(8,40,64,.16);
}
.dlz-bio-badge .dlz-ico { width: 16px; height: 16px; color: var(--dlz-sun); }

.dlz-chips { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 24px; padding: 0; list-style: none; }
.dlz-chip {
  border: 1px solid var(--dlz-line); border-radius: var(--dlz-r-pill); padding: 8px 15px;
  font-size: 13px; color: var(--dlz-ink-soft); background: var(--dlz-white);
  text-decoration: none; display: inline-block; transition: .18s ease;
}
.dlz-chip:hover { border-color: var(--dlz-sea); color: var(--dlz-sea); transform: translateY(-1px); }

/* ---------------------------------------------------------------------------
   Weather

   The bars encode temperature by position and length, so hue would be
   decoration pretending to be data. One hue; sand is spent on "today".
   ------------------------------------------------------------------------ */
.dlz-wx { background: linear-gradient(180deg, var(--dlz-sea-pale) 0%, var(--dlz-white) 100%); }
.dlz-wx-card {
  background: var(--dlz-white); border: 1px solid var(--dlz-line); border-radius: var(--dlz-r-card);
  box-shadow: 0 1px 2px rgba(8,40,64,.05), 0 14px 38px rgba(8,40,64,.07);
  display: grid; grid-template-columns: minmax(280px, .85fr) 1.15fr; overflow: hidden;
}
.dlz-wx-now { padding: 32px; border-right: 1px solid var(--dlz-line); display: flex; flex-direction: column; }
.dlz-wx-place { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.dlz-wx-place h3 { margin: 0; font-size: 16px; font-weight: 700; letter-spacing: -.01em; }
.dlz-wx-place time { font-size: 11px; letter-spacing: .09em; text-transform: uppercase; color: var(--dlz-ink-mute); }
.dlz-wx-read { display: flex; align-items: center; gap: 16px; margin: 20px 0 4px; }
.dlz-wx-read .dlz-ico { width: 60px; height: 60px; color: var(--dlz-sun); stroke-width: 1.3; }
.dlz-wx-temp { font-size: 70px; font-weight: 700; line-height: .86; letter-spacing: -.045em; font-variant-numeric: tabular-nums; color: var(--dlz-sea-deep); }
.dlz-wx-temp sup { font-size: 26px; font-weight: 500; vertical-align: top; line-height: 1; margin-left: 2px; letter-spacing: 0; }
.dlz-wx-cond { font-size: 15px; font-weight: 500; color: var(--dlz-ink-soft); margin: 0 0 22px; }
.dlz-wx-metrics { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--dlz-line); border: 1px solid var(--dlz-line); border-radius: var(--dlz-r); margin-top: auto; overflow: hidden; }
.dlz-wx-metric { background: var(--dlz-white); padding: 13px 14px; display: flex; align-items: center; gap: 11px; }
.dlz-wx-metric .dlz-ico { width: 19px; height: 19px; color: var(--dlz-sea); }
.dlz-wx-metric b { display: block; font-size: 15px; font-weight: 700; letter-spacing: -.01em; font-variant-numeric: tabular-nums; line-height: 1.2; }
.dlz-wx-metric span { display: block; font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--dlz-ink-mute); margin-top: 1px; }
.dlz-wx-metric em { font-style: normal; font-size: 11px; font-weight: 500; color: var(--dlz-sun-deep); margin-left: 4px; letter-spacing: .02em; }

.dlz-wx-fc { padding: 28px 32px; }
.dlz-wx-fc-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 6px; flex-wrap: wrap; }
.dlz-wx-fc-head p { margin: 0; font-size: 11.5px; color: var(--dlz-ink-mute); }
.dlz-wx-row { display: grid; grid-template-columns: 44px 26px 1fr 30px; align-items: center; gap: 14px; padding: 11px 0; border-bottom: 1px solid var(--dlz-line); }
.dlz-wx-row:last-of-type { border-bottom: 0; }
.dlz-wx-day { font-size: 11.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--dlz-ink-soft); }
.dlz-wx-row .dlz-ico { width: 20px; height: 20px; color: var(--dlz-ink-mute); }
.dlz-wx-row.is-today .dlz-wx-day,
.dlz-wx-row.is-today .dlz-ico { color: var(--dlz-sun-deep); }
.dlz-wx-bar { display: flex; align-items: center; gap: 10px; }
.dlz-wx-lo, .dlz-wx-hi { font-size: 13px; font-variant-numeric: tabular-nums; line-height: 1; }
.dlz-wx-lo { color: var(--dlz-ink-mute); text-align: right; width: 30px; }
.dlz-wx-hi { font-weight: 700; color: var(--dlz-ink); text-align: left; }
.dlz-wx-track { position: relative; flex: 1; height: 6px; background: var(--dlz-mist); border-radius: 3px; overflow: hidden; }
.dlz-wx-fill { position: absolute; top: 0; bottom: 0; background: var(--dlz-sea); border-radius: 3px; }
.dlz-wx-row.is-today .dlz-wx-fill { background: var(--dlz-sun); }
.dlz-wx-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--dlz-line); flex-wrap: wrap; }
.dlz-wx-src { font-size: 10.5px; color: var(--dlz-ink-mute); }
.dlz-wx-src b { font-weight: 500; color: var(--dlz-ink-soft); }
.dlz-wx-err { padding: 26px 32px; font-size: 13.5px; color: var(--dlz-ink-mute); }

/* ---------------------------------------------------------------------------
   Owner offer
   ------------------------------------------------------------------------ */
.dlz-offer { background: var(--dlz-sea-deep); color: #fff; border-radius: var(--dlz-r-card); overflow: hidden; display: grid; grid-template-columns: 1fr 1fr; }
.dlz-offer-in { padding: 44px; }
.dlz-offer-in .dlz-eyebrow { color: var(--dlz-sun); }
.dlz-offer-in h2 { margin: 8px 0 6px; font-size: clamp(24px, 3vw, 36px); font-weight: 700; letter-spacing: -.02em; line-height: 1.1; color: #fff; }
.dlz-offer-price { font-size: 15px; color: var(--dlz-sun); font-weight: 500; margin: 0 0 18px; }
.dlz-offer ul { list-style: none; margin: 0 0 24px; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.dlz-offer li { font-size: 14px; color: #cfe0ec; padding-left: 22px; position: relative; }
.dlz-offer li::before { content: ""; position: absolute; left: 0; top: 9px; width: 6px; height: 6px; border-radius: 50%; background: var(--dlz-sun); }
.dlz-offer-media { position: relative; overflow: hidden; min-height: 300px; background: var(--dlz-volcanic); }
.dlz-offer-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* ---------------------------------------------------------------------------
   Post cards
   ------------------------------------------------------------------------ */
.dlz-post { background: var(--dlz-white); border: 1px solid var(--dlz-line); border-radius: var(--dlz-r-card); overflow: hidden; display: flex; flex-direction: column; }
.dlz-post-media { position: relative; height: 158px; overflow: hidden; background: var(--dlz-volcanic); }
.dlz-post-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.dlz-post:hover .dlz-post-media img { transform: scale(1.05); }
.dlz-post-tag {
  position: absolute; z-index: 2; left: 10px; top: 10px; background: var(--dlz-sun); color: #241a06;
  font-size: 9.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  padding: 4px 10px; border-radius: var(--dlz-r-pill); text-decoration: none;
}
.dlz-post-body { padding: 16px; display: flex; flex-direction: column; gap: 7px; flex: 1; }
.dlz-post-body time { font-size: 11px; letter-spacing: .09em; text-transform: uppercase; color: var(--dlz-ink-mute); }
.dlz-post-body h3 { margin: 0; font-size: 16px; font-weight: 700; line-height: 1.28; letter-spacing: -.01em; }
.dlz-post-body h3 a { text-decoration: none; color: var(--dlz-ink); }
.dlz-post:hover .dlz-post-body h3 a { color: var(--dlz-sea); }
.dlz-post-body p { margin: 0; font-size: 13px; color: var(--dlz-ink-soft); line-height: 1.5; }

/* ---------------------------------------------------------------------------
   Article body: single / page
   ------------------------------------------------------------------------ */
.dlz-article { padding: 54px 0; }
/* The main article follows the breadcrumb directly, so it drops its top pad;
   the section and breadcrumb already provide the space under the hero. */
.dlz-section--tight .dlz-article { padding-top: 0; }
.dlz-article-head { max-width: 68ch; margin: 0 auto 32px; }
.dlz-article-head h1 { margin: 10px 0 12px; font-size: clamp(28px, 4vw, 46px); line-height: 1.1; letter-spacing: -.025em; text-wrap: balance; }
.dlz-article-meta { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--dlz-ink-mute); }
.dlz-article-media { border-radius: var(--dlz-r-card); overflow: hidden; margin: 0 0 34px; }
.dlz-prose { max-width: 68ch; margin: 0 auto; }
.dlz-prose > * + * { margin-top: 1.15em; }
.dlz-prose h2 { font-size: 27px; margin-top: 1.7em; letter-spacing: -.02em; }
.dlz-prose h3 { font-size: 21px; margin-top: 1.5em; letter-spacing: -.015em; }
.dlz-prose p { color: var(--dlz-ink-soft); }
.dlz-prose strong { color: var(--dlz-ink); font-weight: 500; }
.dlz-prose img { border-radius: var(--dlz-r-card); }
.dlz-prose figcaption { font-size: 12px; color: var(--dlz-ink-mute); margin-top: 8px; }
.dlz-prose blockquote { border-left: 4px solid var(--dlz-sun); background: var(--dlz-sea-pale); margin: 1.6em 0; padding: 20px 26px; border-radius: 0 var(--dlz-r-card) var(--dlz-r-card) 0; }
.dlz-prose blockquote p { color: var(--dlz-sea-deep); font-weight: 500; font-size: 18px; margin: 0; }

.dlz-with-side { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 48px; align-items: start; }
.dlz-with-side .dlz-prose,
.dlz-with-side .dlz-share { max-width: none; margin-left: 0; margin-right: 0; }
.dlz-side { position: sticky; top: calc(var(--dlz-head-h) + 20px); display: flex; flex-direction: column; gap: 20px; }

/* ---------------------------------------------------------------------------
   Adverts. 300px fixed: the IAB standard, so 300x250 and 300x600 do not scale.
   ------------------------------------------------------------------------ */
.dlz-ads { display: flex; flex-direction: column; gap: 20px; }
.dlz-ad { display: flex; flex-direction: column; gap: 6px; }
.dlz-ad-label {
  font-size: 9.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--dlz-ink-mute);
}
.dlz-ad img { border-radius: var(--dlz-r-card); width: 100%; height: auto; }
.dlz-ad a { display: block; border-radius: var(--dlz-r-card); overflow: hidden; }
.dlz-ad a:hover img { opacity: .94; }
.dlz-ad--adsense ins { min-height: 250px; }

/* Leaderboard: breaks the 68ch measure deliberately, so it reads as an advert
   rather than as part of the article. */
.dlz-ad-leader { margin: 34px 0; display: flex; justify-content: center; }
.dlz-ad-leader .dlz-ad { align-items: center; width: 100%; max-width: 728px; }
.dlz-ad-leader .dlz-ad-label { align-self: flex-start; }
.dlz-ad-leader img { border-radius: var(--dlz-r-card); }

/* ---------------------------------------------------------------------------
   Breadcrumb / pagination / search
   ------------------------------------------------------------------------ */
.dlz-crumb { font-size: 12px; color: var(--dlz-ink-mute); padding: 16px 0 4px; }
.dlz-crumb a { color: var(--dlz-ink-soft); text-decoration: none; }
.dlz-crumb a:hover { color: var(--dlz-sea); }

.dlz-pagination { display: flex; justify-content: center; gap: 6px; margin-top: 40px; flex-wrap: wrap; }
.dlz-pagination .page-numbers {
  min-width: 40px; height: 40px; padding: 0 13px; border-radius: var(--dlz-r-pill);
  border: 1px solid var(--dlz-line); background: var(--dlz-white); color: var(--dlz-ink-soft);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 13.5px; font-weight: 500; text-decoration: none; transition: .18s ease;
  font-variant-numeric: tabular-nums;
}
.dlz-pagination .page-numbers:hover { border-color: var(--dlz-sea); color: var(--dlz-sea); }
.dlz-pagination .page-numbers.current { background: var(--dlz-sea); border-color: var(--dlz-sea); color: #fff; font-weight: 700; }
.dlz-pagination .page-numbers.dots { border: 0; background: none; }

.dlz-search { display: flex; gap: 8px; }
.dlz-search input[type="search"] {
  flex: 1; min-width: 0; font-family: inherit; font-size: 14px; padding: 11px 16px;
  border: 1px solid var(--dlz-line); border-radius: var(--dlz-r-pill); background: var(--dlz-white); color: var(--dlz-ink);
}

/* ---------------------------------------------------------------------------
   Listing intro. The Posts page's own content, for SEO copy above the grid.
   ------------------------------------------------------------------------ */
.dlz-intro { max-width: none; }
/* Zero the browser default, then set our own rhythm as a start value only:
   any spacing set on a block in the editor is inline, so it wins over this and
   is honoured. */
.dlz-intro > * { margin-block: 0; }
.dlz-intro > * + * { margin-top: 1.15em; }
.dlz-intro p { color: var(--dlz-ink-soft); }
/* A blank line typed in the editor is an empty <p>, which has no height and
   would collapse. Give it one so the deliberate gap survives. */
.dlz-intro p:empty { min-height: 1.4em; }
.dlz-intro h2 { font-size: 23px; letter-spacing: -.02em; margin-top: 1.4em; }
.dlz-intro h3 { font-size: 18px; letter-spacing: -.015em; margin-top: 1.2em; }
.dlz-intro strong { color: var(--dlz-ink); font-weight: 500; }

/* ---------------------------------------------------------------------------
   Archive toolbar
   ------------------------------------------------------------------------ */
.dlz-archive-bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; margin-bottom: 22px;
  padding-bottom: 16px; border-bottom: 1px solid var(--dlz-line);
}
.dlz-archive-bar--end { justify-content: flex-end; }
.dlz-archive-count { margin: 0; font-size: 13px; color: var(--dlz-ink-mute); font-variant-numeric: tabular-nums; }
.dlz-sort { display: flex; align-items: center; gap: 10px; margin: 0; }
.dlz-sort label { font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--dlz-ink-mute); }

/* The closed control. The chevron is a background SVG rather than the browser
   default, so it matches the palette; appearance:none removes the native one.
   Extra right padding leaves room for it. */
.dlz-sort select {
  font-family: inherit; font-size: 13.5px; font-weight: 500; line-height: 1.2;
  color: var(--dlz-ink); cursor: pointer;
  padding: 10px 40px 10px 16px;
  border: 1px solid var(--dlz-line); border-radius: var(--dlz-r-pill);
  background-color: var(--dlz-white);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%233d454e' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  box-shadow: 0 1px 2px rgba(8, 32, 52, .05);
  -webkit-appearance: none; -moz-appearance: none; appearance: none;
  transition: border-color .16s ease, box-shadow .16s ease;
}
.dlz-sort select:hover { border-color: var(--dlz-sea-light); box-shadow: 0 2px 8px rgba(8, 32, 52, .08); }
.dlz-sort select:focus-visible {
  border-color: var(--dlz-sea); outline: 2px solid var(--dlz-sea); outline-offset: 1px;
}
/* The open list is OS-drawn; browsers honour little beyond these two. */
.dlz-sort select option { background: var(--dlz-white); color: var(--dlz-ink); }
.dlz-sort select option:checked { color: var(--dlz-sea-deep); font-weight: 600; }

/* JS-enhanced dropdown. The native select above is the no-JS fallback and is
   hidden once this is built (.dlz-sort.is-enhanced). Here the open list is ours,
   so it gets the white panel and spacing a native option list cannot. */
.dlz-sort.is-enhanced select { display: none; }
.dlz-select { position: relative; }
.dlz-select-btn {
  font-family: inherit; font-size: 13.5px; font-weight: 500; line-height: 1.2;
  color: var(--dlz-ink); cursor: pointer; text-align: left;
  padding: 10px 40px 10px 16px;
  border: 1px solid var(--dlz-line); border-radius: var(--dlz-r-pill);
  background-color: var(--dlz-white);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%233d454e' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center;
  box-shadow: 0 1px 2px rgba(8, 32, 52, .05);
  transition: border-color .16s ease, box-shadow .16s ease;
}
.dlz-select-btn:hover { border-color: var(--dlz-sea-light); box-shadow: 0 2px 8px rgba(8, 32, 52, .08); }
.dlz-select-btn[aria-expanded="true"] { border-color: var(--dlz-sea); }
.dlz-select-btn:focus-visible { outline: 2px solid var(--dlz-sea); outline-offset: 1px; }

.dlz-select-list {
  position: absolute; top: calc(100% + 6px); right: 0; z-index: 60;
  min-width: 100%; margin: 0; padding: 6px; list-style: none;
  background: var(--dlz-white); border: 1px solid var(--dlz-line);
  border-radius: var(--dlz-r-card); box-shadow: 0 18px 40px rgba(8, 32, 52, .16);
}
.dlz-select-list[hidden] { display: none; }
.dlz-select-option {
  padding: 9px 14px; border-radius: var(--dlz-r); font-size: 13.5px;
  color: var(--dlz-ink); white-space: nowrap; cursor: pointer;
}
.dlz-select-option:hover,
.dlz-select-option.is-active { background: var(--dlz-sea-pale); color: var(--dlz-sea-deep); }
.dlz-select-option[aria-selected="true"] { font-weight: 600; color: var(--dlz-sea-deep); }

/* ---------------------------------------------------------------------------
   Forms
   ------------------------------------------------------------------------ */
.dlz-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.dlz-field label { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--dlz-ink-soft); }
.dlz-field input, .dlz-field textarea, .dlz-field select {
  font-family: inherit; font-size: 15px; padding: 12px 16px;
  border: 1px solid var(--dlz-line); border-radius: var(--dlz-r); background: var(--dlz-white); color: var(--dlz-ink); width: 100%;
}
.dlz-field textarea { border-radius: var(--dlz-r-card); min-height: 160px; resize: vertical; }
.dlz-field input:focus-visible, .dlz-field textarea:focus-visible { border-color: var(--dlz-sea); outline: 2px solid var(--dlz-sea); outline-offset: 1px; }
.dlz-field-hint { font-size: 12px; color: var(--dlz-ink-mute); }
.dlz-notice { border-radius: var(--dlz-r); padding: 14px 16px; font-size: 14px; margin-bottom: 20px; }
.dlz-notice--ok { background: var(--dlz-sea-pale); color: var(--dlz-sea-deep); border: 1px solid var(--dlz-sea-light); }
.dlz-notice--bad { background: var(--dlz-sun-pale); color: var(--dlz-sun-deep); border: 1px solid var(--dlz-sun); }
/* Honeypot: must be reachable by bots, invisible and unfocusable for people. */
.dlz-hp { position: absolute; left: -9999px; }

/* ---------------------------------------------------------------------------
   Newsletter modal / iOS sheet
   ------------------------------------------------------------------------ */
.dlz-modal { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; padding: 22px; }
.dlz-modal[hidden] { display: none; }
.dlz-modal-back { position: absolute; inset: 0; background: rgba(6,26,44,.58); backdrop-filter: blur(4px); opacity: 0; transition: opacity .28s ease; border: 0; width: 100%; cursor: pointer; }
.dlz-modal-card {
  position: relative; width: min(440px, 100%); background: var(--dlz-white);
  border-radius: var(--dlz-r-card); overflow: hidden; box-shadow: 0 26px 70px rgba(4,20,36,.4);
  opacity: 0; transform: translateY(16px) scale(.97);
  transition: opacity .3s ease, transform .3s cubic-bezier(.22,1,.36,1);
}
.dlz-modal.is-open .dlz-modal-back { opacity: 1; }
.dlz-modal.is-open .dlz-modal-card { opacity: 1; transform: none; }
.dlz-modal-media { position: relative; height: 132px; overflow: hidden; background: var(--dlz-volcanic); }
.dlz-modal-media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 58%; }
.dlz-modal-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(6,26,44,.15), rgba(6,26,44,.55)); }
.dlz-modal-x {
  position: absolute; z-index: 3; right: 12px; top: 12px; width: 32px; height: 32px;
  border: 0; border-radius: var(--dlz-r-pill); background: rgba(255,255,255,.92); color: var(--dlz-sea-deep);
  font-size: 17px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.dlz-modal-x:hover { background: #fff; }
.dlz-sheet-grip { display: none; }
.dlz-modal-body { padding: 24px; }
.dlz-modal-body h2 { margin: 7px 0 8px; font-size: 22px; font-weight: 700; letter-spacing: -.02em; line-height: 1.2; text-wrap: balance; }
.dlz-modal-body > p { margin: 0 0 18px; font-size: 14px; color: var(--dlz-ink-soft); line-height: 1.55; }
.dlz-nl-form { display: flex; gap: 8px; flex-wrap: wrap; }
.dlz-nl-form--stack { flex-direction: column; }
.dlz-nl-form--stack .dlz-btn { width: 100%; }
.dlz-nl-form input {
  flex: 1; min-width: 0; font-family: inherit; font-size: 14px; padding: 12px 16px;
  border: 1px solid var(--dlz-line); border-radius: var(--dlz-r-pill); background: var(--dlz-white); color: var(--dlz-ink);
}
.dlz-nl-form input::placeholder { color: var(--dlz-ink-mute); }
.dlz-nl-form input:focus-visible { border-color: var(--dlz-sea); outline: 2px solid var(--dlz-sea); outline-offset: 1px; }
.dlz-nl-small { margin: 12px 0 0; font-size: 11.5px; color: var(--dlz-ink-mute); }

/* ---------------------------------------------------------------------------
   Newsletter band: the footer's always-visible counterpart to the modal, so
   someone who dismissed the sheet can still subscribe.
   ------------------------------------------------------------------------ */
.dlz-signup { background: var(--dlz-sea-pale); border-top: 1px solid var(--dlz-line); padding: 44px 0; }
.dlz-signup-in { display: grid; grid-template-columns: 1fr auto; gap: 32px; align-items: center; }
.dlz-signup h2 { margin: 6px 0 6px; font-size: clamp(20px, 2.3vw, 27px); font-weight: 700; letter-spacing: -.02em; line-height: 1.15; }
.dlz-signup p { margin: 0; color: var(--dlz-ink-soft); font-size: 14.5px; max-width: 54ch; }
.dlz-signup form { display: flex; gap: 8px; flex-wrap: wrap; }
.dlz-signup input[type="email"],
.dlz-signup input[type="text"] {
  font-family: inherit; font-size: 14px; padding: 13px 18px;
  border: 1px solid var(--dlz-line); border-radius: var(--dlz-r-pill);
  background: var(--dlz-white); color: var(--dlz-ink);
}
.dlz-signup input[type="text"]  { min-width: 150px; }
.dlz-signup input[type="email"] { min-width: 220px; }
.dlz-signup input:focus-visible { border-color: var(--dlz-sea); outline: 2px solid var(--dlz-sea); outline-offset: 1px; }

@media (max-width: 800px) {
  .dlz-signup-in { grid-template-columns: 1fr; }
  .dlz-signup input[type="email"],
  .dlz-signup input[type="text"] { min-width: 0; flex: 1 1 100%; }
  .dlz-signup .dlz-btn { width: 100%; }
}

/* ---------------------------------------------------------------------------
   Footer
   ------------------------------------------------------------------------ */
.dlz-footer { background: var(--dlz-volcanic); color: #aab4bd; padding: 56px 0 0; font-size: 13.5px; }
.dlz-footer a { color: inherit; text-decoration: none; }
.dlz-footer a:hover { color: var(--dlz-sun); }
.dlz-footer-grid { display: grid; grid-template-columns: 1.5fr repeat(4, 1fr); gap: 34px; padding-bottom: 40px; }
.dlz-footer h2 { margin: 0 0 14px; color: #fff; font-size: 11px; letter-spacing: .13em; text-transform: uppercase; font-weight: 700; }
.dlz-footer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.dlz-footer-brand .dlz-logo { color: #fff; margin-bottom: 12px; display: inline-block; }
.dlz-footer-blurb { margin: 0 0 16px; line-height: 1.6; max-width: 34ch; color: #8c979f; }
.dlz-footer-bottom { border-top: 1px solid var(--dlz-volcanic-2); padding: 18px 0; display: flex; justify-content: space-between; gap: 16px; font-size: 12px; color: #78838c; flex-wrap: wrap; }

/* ---------------------------------------------------------------------------
   Hero variants

   Base is the interior hero (pages, archives). --home is the front page's
   full statement hero; --tall sits between; --flat is the no-photograph case.
   ------------------------------------------------------------------------ */
.dlz-hero--tall { min-height: 460px; }
.dlz-hero--tall .dlz-hero-in { padding-top: 92px; padding-bottom: 40px; }
.dlz-hero--flat { min-height: 0; background: linear-gradient(160deg, var(--dlz-sea-deep), var(--dlz-volcanic)); }
.dlz-hero--flat::after { display: none; }
.dlz-hero--flat .dlz-hero-in { padding-top: 52px; padding-bottom: 46px; }
.dlz-hero--flat h1 { text-shadow: none; }

/* An archive intro sits right above the grid; drop its bottom padding so the
   two are not separated by a full section's worth of empty space. */
.dlz-section--flush-b { padding-bottom: 0; }

.dlz-section--tight { padding-top: 26px; }

/* Breadcrumb sits between the hero and the copy on single posts. */
.dlz-crumb .sep { margin: 0 8px; color: var(--dlz-ink-mute); }
.dlz-hero .dlz-crumb { color: #cfdae4; padding: 0 0 10px; }
.dlz-hero .dlz-crumb a { color: #e8eef4; }
.dlz-hero .dlz-crumb a:hover { color: #fff; }

/* ---------------------------------------------------------------------------
   Share row
   ------------------------------------------------------------------------ */
.dlz-share {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 0 0 22px; margin: 0 auto 26px;
  border-bottom: 1px solid var(--dlz-line); max-width: 68ch;
}
.dlz-share-label { font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--dlz-ink-mute); }
.dlz-share-list { display: flex; gap: 8px; list-style: none; margin: 0; padding: 0; }
.dlz-share-btn {
  width: 38px; height: 38px; border-radius: var(--dlz-r-pill);
  border: 1px solid var(--dlz-line); background: var(--dlz-white); color: var(--dlz-ink-soft);
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
  padding: 0; transition: .18s ease;
}
.dlz-share-btn .dlz-ico { width: 17px; height: 17px; }
.dlz-share-btn:hover { border-color: var(--dlz-sea); color: var(--dlz-sea); transform: translateY(-1px); }
.dlz-share-btn.is-copied { border-color: var(--dlz-sun); color: var(--dlz-sun-deep); }
/* Brand marks are filled glyphs; the base .dlz-ico rule strokes everything. */
.dlz-ico--solid { fill: currentColor; stroke: none; }

/* ---------------------------------------------------------------------------
   Card extras used by dlz_card()
   ------------------------------------------------------------------------ */
.dlz-card-tag {
  position: absolute; z-index: 2; left: 10px; top: 10px;
  background: var(--dlz-sun); color: #241a06;
  font-size: 9.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  padding: 4px 10px; border-radius: var(--dlz-r-pill);
}
.dlz-card-meta { font-size: 11.5px; letter-spacing: .04em; color: #cfdae4; margin-top: 6px; }
.dlz-card-2x { grid-column: span 2; grid-row: span 2; }

/* ---------------------------------------------------------------------------
   Fact panel (single CPT sidebar)
   ------------------------------------------------------------------------ */
.dlz-facts { background: var(--dlz-sea-pale); border: 1px solid var(--dlz-line); border-radius: var(--dlz-r-card); padding: 22px 24px; }
.dlz-facts dl { margin: 0; display: grid; gap: 0; }
.dlz-facts dt {
  font-size: 10.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--dlz-ink-mute); margin-top: 14px;
}
.dlz-facts dt:first-child { margin-top: 0; }
.dlz-facts dd { margin: 3px 0 0; font-size: 15px; font-weight: 500; color: var(--dlz-sea-deep); }

/* Affiliate booking buttons in the excursion sidebar. */
.dlz-book { display: flex; flex-direction: column; gap: 10px; }
.dlz-book-h {
  margin: 0 0 2px; font-size: 9.5px; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--dlz-ink-mute);
}
.dlz-book-btn { text-align: center; }
.dlz-book-note { margin: 4px 0 0; font-size: 11.5px; line-height: 1.5; color: var(--dlz-ink-mute); }

/* ---------------------------------------------------------------------------
   Comments
   ------------------------------------------------------------------------ */
.dlz-comments { max-width: 68ch; margin: 0 auto; }
.dlz-comments-title { font-size: 21px; font-weight: 700; letter-spacing: -.015em; margin: 0 0 22px; }
.dlz-comment-list { list-style: none; margin: 0 0 40px; padding: 0; }
.dlz-comment-list .children { list-style: none; margin: 0; padding: 0 0 0 26px; border-left: 1px solid var(--dlz-line); }
.dlz-comment { padding: 0; }
.dlz-comment-in { display: flex; gap: 14px; padding: 20px 0; border-bottom: 1px solid var(--dlz-line); }
.dlz-comment-avatar { flex: none; }
.dlz-avatar { border-radius: var(--dlz-r-pill); display: block; }
.dlz-comment-body { flex: 1; min-width: 0; }
.dlz-comment-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; }
.dlz-comment-author { font-size: 14px; font-weight: 700; color: var(--dlz-ink); }
.dlz-comment-head time { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--dlz-ink-mute); }
.dlz-comment-hold { font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--dlz-sun-deep); background: var(--dlz-sun-pale); padding: 2px 8px; border-radius: var(--dlz-r-pill); }
.dlz-comment-text { font-size: 14.5px; color: var(--dlz-ink-soft); }
.dlz-comment-text p { margin: 0 0 10px; }
.dlz-comment-text p:last-child { margin-bottom: 0; }
.dlz-comment-reply { display: inline-block; margin-top: 10px; }
.dlz-comment-reply a { font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--dlz-sea); text-decoration: none; }
.dlz-comment-reply a:hover { color: var(--dlz-sun); }
.dlz-pingback { padding: 12px 0; border-bottom: 1px solid var(--dlz-line); font-size: 13.5px; }
.dlz-comments-closed { font-size: 13.5px; color: var(--dlz-ink-mute); }

.dlz-comment-form { margin: 0; }
.dlz-comment-form .comment-form-cookies-consent { display: flex; align-items: center; gap: 9px; margin-bottom: 16px; font-size: 13px; color: var(--dlz-ink-soft); }
.dlz-comment-form .comment-form-cookies-consent input { width: auto; }
.dlz-comment-form .comment-form-cookies-consent label { font-size: 13px; text-transform: none; letter-spacing: 0; font-weight: 400; color: var(--dlz-ink-soft); }
.dlz-comment-form .form-submit { margin: 0; }
#cancel-comment-reply-link { font-size: 12px; font-weight: 500; text-transform: none; letter-spacing: 0; color: var(--dlz-ink-mute); margin-left: 10px; }
#cancel-comment-reply-link:hover { color: var(--dlz-sea); }
.dlz-comments .logged-in-as { font-size: 12.5px; color: var(--dlz-ink-mute); margin-bottom: 14px; }

/* ---------------------------------------------------------------------------
   Block-composed homepage

   The pattern uses core blocks, so these rules dress core markup to match the
   hand-built sections. Keep the two in step: .dlz-hero-cover must read the same
   as .dlz-hero.
   ------------------------------------------------------------------------ */
.dlz-hero-cover { align-items: center; padding: 0; }

/* Full viewport, less the utility bar and the sticky header above it.
   --dlz-chrome-h is measured in main.js; 114px is the unscripted fallback.
   This only lands if the Cover carries no minHeight attribute, because that
   writes an inline style. patterns/homepage.php leaves it unset. */
.dlz-hero-cover.wp-block-cover,
.dlz-hero--home { min-height: calc(100vh - var(--dlz-chrome-h, 114px)); }
@supports (height: 100svh) {
  .dlz-hero-cover.wp-block-cover,
  .dlz-hero--home { min-height: calc(100svh - var(--dlz-chrome-h, 114px)); }
}

/* The hero copy group must be a flow layout, not a constrained one. Constrained
   makes core centre every child that has a max-width, and it does so with
   !important, which no selector can outrank. The fix is the block attribute in
   patterns/homepage.php, not a heavier rule here. */
.dlz-hero-cover.wp-block-cover { text-align: left; }
.dlz-hero-cover .dlz-hero-btns { justify-content: flex-start; }
.dlz-hero-cover .wp-block-cover__background { background: transparent; }
/* The scrim. Core's dimRatio is a flat wash; the design needs a gradient.
   Two layers, because the copy is centred vertically and aligned left:
   the horizontal one buys contrast behind the text, the vertical one keeps the
   foot dark so the hero resolves into the page. Between them the right of the
   photograph stays clear, which a single heavier wash would have flattened. */
.dlz-hero-cover::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(6,26,44,.66) 0%, rgba(6,26,44,.34) 46%, rgba(6,26,44,0) 74%),
    linear-gradient(180deg, rgba(6,26,44,.34) 0%, rgba(6,26,44,0) 42%, rgba(6,26,44,.66) 100%);
}
.dlz-hero-cover .wp-block-cover__inner-container { position: relative; z-index: 2; width: 100%; }
.dlz-hero-copy { max-width: var(--dlz-shell); margin: 0 auto; padding: 48px 20px; }
.dlz-hero-cover .dlz-eyebrow { color: var(--dlz-sun); }
.dlz-hero-h1 {
  margin: 12px 0 0; color: #fff; font-weight: 700; text-transform: uppercase;
  font-size: clamp(30px, 5.1vw, 62px); line-height: 1.02; letter-spacing: -.02em;
  max-width: 16ch; text-wrap: balance; text-shadow: 0 2px 26px rgba(0,20,40,.5);
}
.dlz-hero-cover .dlz-hero-rule {
  width: 74px; height: 4px; background: var(--dlz-sun); border: 0;
  margin: 22px 0 18px; opacity: 1;
}
.dlz-hero-cover .dlz-hero-sub { margin: 0; color: #e8eef4; font-size: 17px; max-width: 52ch; line-height: 1.55; }
.dlz-hero-cover .dlz-hero-btns { margin-top: 26px; gap: 10px; }
.dlz-hero-cover .wp-block-button__link { border-radius: var(--dlz-r-pill); }
.dlz-hero-cover .is-style-outline .wp-block-button__link {
  background: rgba(255,255,255,.10); color: #fff; border: 1px solid rgba(255,255,255,.55);
  backdrop-filter: blur(3px);
}
.dlz-hero-cover .is-style-outline .wp-block-button__link:hover { background: #fff; color: var(--dlz-sea-deep); }

/* Essay */
.dlz-essay-block > * { max-width: var(--dlz-shell); margin-left: auto; margin-right: auto; padding-left: 20px; padding-right: 20px; }
.dlz-essay-block p { color: var(--dlz-ink-soft); max-width: 68ch; }
.dlz-essay-h2 { font-size: clamp(23px, 2.7vw, 34px); letter-spacing: -.02em; text-wrap: balance; }

/* Biosphere */
.dlz-bio-block > * { max-width: var(--dlz-shell); margin-left: auto; margin-right: auto; padding-left: 20px; padding-right: 20px; }
.dlz-bio-cols { gap: 48px; }
.dlz-bio-img img { border-radius: var(--dlz-r-card); width: 100%; height: 430px; object-fit: cover; }
.dlz-bio-block h2 { font-size: clamp(23px, 2.7vw, 34px); letter-spacing: -.02em; margin: 8px 0 16px; text-wrap: balance; }
.dlz-bio-block p:not(.dlz-eyebrow) { color: var(--dlz-ink-soft); max-width: 60ch; }

/* Owner offer */
.dlz-offer-block {
  background: var(--dlz-sea-deep); color: #fff; border-radius: var(--dlz-r-card);
  padding: 44px; max-width: var(--dlz-shell); margin: 0 auto;
}
.dlz-offer-block h2 { color: #fff; font-size: clamp(24px, 3vw, 36px); letter-spacing: -.02em; margin: 8px 0 6px; }
.dlz-offer-block .dlz-eyebrow { color: var(--dlz-sun); }
.dlz-offer-block .dlz-offer-price { color: var(--dlz-sun); font-size: 15px; font-weight: 500; margin: 0 0 18px; }
.dlz-offer-block ul { list-style: none; margin: 0 0 24px; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.dlz-offer-block li { font-size: 14px; color: #cfe0ec; padding-left: 22px; position: relative; }
.dlz-offer-block li::before { content: ""; position: absolute; left: 0; top: 9px; width: 6px; height: 6px; border-radius: 50%; background: var(--dlz-sun); }

/* ---------------------------------------------------------------------------
   Amazon affiliate product strip (dlz/products).
   ------------------------------------------------------------------------ */
.dlz-prod { display: grid; gap: 20px; }
.dlz-prod--grid { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
/* Strip: one row that scrolls sideways, so a long list does not stack tall. */
.dlz-prod--strip {
  grid-auto-flow: column; grid-auto-columns: minmax(230px, 1fr);
  overflow-x: auto; scroll-snap-type: x mandatory;
  padding-bottom: 6px; scrollbar-width: thin;
}
.dlz-prod--strip .dlz-prod-card { scroll-snap-align: start; }

.dlz-prod-card {
  display: flex; flex-direction: column; background: var(--dlz-white);
  border: 1px solid var(--dlz-line); border-radius: var(--dlz-r-card); overflow: hidden;
}
.dlz-prod-media { aspect-ratio: 3 / 2; background: var(--dlz-paper); }
.dlz-prod-media img { width: 100%; height: 100%; object-fit: contain; display: block; padding: 12px; }
.dlz-prod-body { display: flex; flex-direction: column; gap: 8px; padding: 16px 18px 18px; flex: 1; }
.dlz-prod-title { font-size: 15px; font-weight: 700; letter-spacing: -.01em; margin: 0; line-height: 1.3; }
.dlz-prod-blurb { font-size: 13px; color: var(--dlz-ink-soft); margin: 0; line-height: 1.5; }
.dlz-prod-cta {
  margin-top: auto; align-self: flex-start; background: var(--dlz-sun); color: #241a06;
  font-weight: 700; font-size: 12.5px; letter-spacing: .03em; text-transform: uppercase;
  padding: 9px 16px; border-radius: var(--dlz-r-pill); text-decoration: none;
  transition: background .18s ease, color .18s ease;
}
.dlz-prod-cta:hover { background: var(--dlz-sea); color: #fff; }
.dlz-prod-disclosure { margin: 16px 0 0; font-size: 12px; color: var(--dlz-ink-mute); font-style: italic; }

/* A product strip dropped inside an article sits in the prose column, but its
   own .dlz-wrap adds centring padding that insets it from the surrounding text.
   Strip that padding so it lines up flush, and use article-scale vertical space
   rather than the full 62px section gap. */
.dlz-prose .dlz-products.dlz-section { padding: 22px 0; }
.dlz-prose .dlz-products .dlz-wrap { max-width: none; padding-left: 0; padding-right: 0; }

/* An empty block explains itself in the editor rather than vanishing. */
.dlz-block-empty {
  margin: 0; padding: 22px; border: 1px dashed var(--dlz-line); border-radius: var(--dlz-r-card);
  background: var(--dlz-paper); color: var(--dlz-ink-mute); font-size: 13.5px; text-align: center;
}

/* ---------------------------------------------------------------------------
   Responsive
   ------------------------------------------------------------------------ */
@media (max-width: 1000px) {
  .dlz-split, .dlz-split--center, .dlz-offer, .dlz-wx-card, .dlz-with-side { grid-template-columns: 1fr; }
  .dlz-bio-cols { gap: 26px; }
  .dlz-bio-img img { height: 280px; }
  /* Sidebar drops below the article; adverts sit side by side rather than
     stacking into a long tail nobody scrolls to. */
  .dlz-side { position: static; }
  .dlz-ads { flex-direction: row; flex-wrap: wrap; justify-content: center; }
  .dlz-ad { max-width: 300px; }
  .dlz-wx-now { border-right: 0; border-bottom: 1px solid var(--dlz-line); }
  .dlz-grid--4 { grid-template-columns: repeat(2, 1fr); }
  .dlz-footer-grid { grid-template-columns: 1fr 1fr; }
  .dlz-side { position: static; }
  .dlz-burger { display: block; }

  .dlz-nav {
    position: fixed; inset: var(--dlz-head-h) 0 0; background: var(--dlz-white);
    overflow-y: auto; padding: 16px 20px 40px; transform: translateX(100%);
    transition: transform .25s ease; z-index: 60;
  }
  .dlz-nav.is-open { transform: none; }
  .dlz-nav > ul { flex-direction: column; height: auto; gap: 0; }
  .dlz-nav > ul > li { display: block; border-bottom: 1px solid var(--dlz-line); }
  .dlz-nav > ul > li > a { height: auto; padding: 15px 0; border-bottom: 0; font-size: 15px; }
  .dlz-nav .sub-menu {
    position: static; opacity: 1; visibility: visible; transform: none;
    border: 0; box-shadow: none; padding: 0 0 14px 14px; min-width: 0;
  }
  .dlz-nav > ul > li.dlz-mega > .sub-menu { display: block; padding: 0 0 14px 14px; }
  .dlz-nav .dlz-mega > .sub-menu > li > a { border-bottom: 0; padding: 10px 0 0; }
}
@media (max-width: 640px) {
  .dlz-grid--3, .dlz-grid--2 { grid-template-columns: 1fr; }
  .dlz-hero-copy { padding: 40px 20px; }
  .dlz-offer-block { padding: 26px; }
  .dlz-comment-list .children { padding-left: 14px; }
  .dlz-comment-in { gap: 11px; }
  .dlz-grid--feature > *:first-child { grid-column: span 2; }
  .dlz-hero { min-height: 480px; }
  .dlz-offer-in, .dlz-wx-now, .dlz-wx-fc { padding: 26px; }
  .dlz-wx-metrics { grid-template-columns: 1fr; }
  .dlz-footer-grid { grid-template-columns: 1fr; gap: 26px; }

  .dlz-modal { align-items: flex-end; padding: 0; }
  .dlz-modal-card {
    width: 100%; border-radius: 18px 18px 0 0; transform: translateY(100%);
    transition: transform .4s cubic-bezier(.32,.72,0,1), opacity .2s ease;
  }
  .dlz-modal.is-open .dlz-modal-card { transform: translateY(0); }
  .dlz-sheet-grip { display: block; position: absolute; z-index: 3; left: 50%; top: 9px; transform: translateX(-50%); width: 38px; height: 4px; border-radius: 2px; background: rgba(255,255,255,.85); }
}
@media (prefers-reduced-motion: reduce) {
  .dlz-modal-card { transition: opacity .01s !important; transform: none !important; }
}

/* ---------------------------------------------------------------------------
   Editor-only: the dynamic blocks draw an editable section head above a server
   render that has been told to omit its own. Keeps the two from double-padding.
   ------------------------------------------------------------------------ */
.dlz-section--nohead { padding-top: 0; }
.dlz-editor-head { padding-bottom: 0; }
.dlz-editor-head .dlz-more { cursor: default; }