/* jdtheme26 - About page /about/ (2026-09-29) and store page /location/ (2026-09-30, end of this file). Spec: wiki sources/2026-09-29-about-page/JUST_DOG_About_Claude_Code.txt
   Quiet editorial page: warm ivory ground, much air, no cards.
   Sections: first photograph with the page's only <h1> - brand film - how it started - what we do (both: photograph + text) -
   our journey (timeline) - closing. The page's own header and the 1440px box are further down.
   Headings are plain text in the body font; eyebrows are small, letter-spaced, quiet.
   Accent colours of the spec are used sparingly: cream yellow #F8D347 (active timeline dot), the links' line is hand-drawn, in the timeline line's colour. */

/* page ground #f6f5f1 (operator 2026-09-29; #ffeded for an hour before that). The hero photograph has its own ground (#f4f3ef): its left and lower parts are faded
   out with a mask, so that it runs into the page's colour without an edge. */
body.jd-page-about { --jd-about-bg: #f6f5f1; }
body.jd-page-about,
body.jd-page-about :is(.website-wrapper, .wd-page-wrapper, .wd-page-content) { background-color: var(--jd-about-bg); }
body.jd-page-about .wd-page-content,
body.jd-page-about .wd-content-layout.content-layout-wrapper { padding-top: 0; }
body.jd-page-about .wpb_raw_code { margin-bottom: 0; }

.jd-about {
  margin-bottom: 100px;                  /* operator 2026-09-29: 100px between the page's last block and the footer */
  --jd-about-ink: var(--jd-ink-900, #3b2a1f);
  --jd-about-text: var(--jd-ink-700, #5c4a3c);
  --jd-about-muted: #a39384;
  --jd-about-line: #e4dacb;
  --jd-about-pad: clamp(72px, 10vw, 140px);
  /* the page's box: blocks that run to the window's edges stop at 1440px and stand in the middle of wider windows;
     --jd-about-edge = the room beside the box (0 up to 1440px), the photographs' outer edges fade out over it */
  --jd-about-box: min(calc(100vw - var(--wd-scroll-w, 0px)), 1440px);
  --jd-about-edge: clamp(0px, calc((100vw - 1440px) / 2), 160px);
  --jd-about-edge-fade: transparent 0, rgba(0,0,0,.06) calc(var(--jd-about-edge) * .14), rgba(0,0,0,.2) calc(var(--jd-about-edge) * .28), rgba(0,0,0,.5) calc(var(--jd-about-edge) * .45), rgba(0,0,0,.8) calc(var(--jd-about-edge) * .62), rgba(0,0,0,.95) calc(var(--jd-about-edge) * .8), #000 var(--jd-about-edge);
  color: var(--jd-about-text);
  text-align: center;
}
.jd-about__sec {
  box-sizing: border-box;
  max-width: 1320px;
  margin-inline: auto;
  padding: var(--jd-about-pad) 20px;
}
.jd-about__sec + .jd-about__sec { padding-top: 0; }
.jd-about__intro { padding-top: clamp(80px, 11vw, 150px); }

.jd-about .jd-about__eyebrow {
  margin: 0 0 18px;
  font-family: "Baloo 2", sans-serif;
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: .34em;
  text-indent: .34em;                    /* the last letter's spacing would push the word off centre */
  text-transform: uppercase;
  color: var(--jd-about-muted);
}
/* headings: the body text's font (operator 2026-09-29) - plain text, not drawn */
body .jd-about :is(h1, h2).jd-home-title {
  display: block;
  margin: 0 auto 30px;
  color: var(--jd-about-ink);
  font-family: var(--jd-font-body);
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: .08em;
  text-wrap: balance;
}
body .jd-about h1.jd-home-title { font-size: clamp(30px, 4.2vw, 46px); }
body .jd-about h2.jd-home-title { font-size: clamp(24px, 3vw, 34px); }
body :is(h1, h2).jd-home-title--drawn.jd-about__title .jd-home-title__arts { justify-content: center; }

body .jd-about .jd-about__text {
  max-width: 700px;
  margin: 0 auto 1.4em;
  font-size: 15px;
  line-height: 1.95;
  text-wrap: pretty;
}
body .jd-about .jd-about__text:last-child { margin-bottom: 0; }
body .jd-about .jd-about__lead { font-size: 16px; color: var(--jd-about-ink); }
body .jd-about .jd-about__quiet {
  margin-top: 2em;
  font-size: 16px;
  color: var(--jd-about-ink);
}
/* LINKS of this page = the mock-up's: dark lettering with one thin dark line under it (operator 2026-09-29).
   The line is HAND-DRAWN, in the timeline line's colour (= --jd-journey-done): a barely unsteady stroke (a 120 x 6px drawing that repeats; it starts and ends at the same height, so
   the repeats join). The timeline's line is the same stroke. */
.jd-about {
  --jd-about-stroke: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='6' viewBox='0 0 120 6'%3E%3Cpath d='M0%203c10-.45%2020%20.45%2030%20.1s20-.5%2030-.1%2020%20.45%2030%200%2020-.4%2030%200' fill='none' stroke='%233b2a1f' stroke-opacity='.46' stroke-width='1.1' stroke-linecap='round'/%3E%3C/svg%3E");
  --jd-about-stroke-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='6' viewBox='0 0 120 6'%3E%3Cpath d='M0%203c10-.45%2020%20.45%2030%20.1s20-.5%2030-.1%2020%20.45%2030%200%2020-.4%2030%200' fill='none' stroke='%23000' stroke-width='1.1' stroke-linecap='round'/%3E%3C/svg%3E");
}
.jd-about .jd-about__text a {
  padding-bottom: 5px;
  color: var(--jd-about-ink);
  font-weight: 600;
  text-decoration: none;
  background: var(--jd-about-stroke) 0 100% / 120px 6px repeat-x;
  -webkit-box-decoration-break: clone;
          box-decoration-break: clone;
  transition: opacity .2s ease;
}
.jd-about .jd-about__text a:is(:hover, :focus-visible) { opacity: .6; }
.jd-about__cta { margin: 36px 0 0; }

/* three small paintings under "how it started" */
body .jd-about .jd-about__trio {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(12px, 3vw, 44px);
  max-width: 860px;
  margin: clamp(36px, 5vw, 64px) auto 0;
  padding: 0;
  list-style: none;
}
body .jd-about .jd-about__trio li { margin: 0; padding: 0; }
body .jd-about .jd-about__trio li::before { content: none; }
.jd-about__trio a { display: block; color: var(--jd-about-text); text-decoration: none; }
.jd-about__trio img { display: block; width: 100%; height: auto; aspect-ratio: 800 / 470; transition: transform .35s ease; }
.jd-about__trio span { display: block; margin-top: 8px; font-size: 13px; letter-spacing: .12em; }
@media (hover: hover) { .jd-about__trio a:hover img { transform: translateY(-4px); } }

/* thin rule between the big parts */
.jd-about__rule {
  width: 56px;
  height: 1px;
  margin: 0 auto var(--jd-about-pad);
  border: 0;
  background: var(--jd-about-line);
}

/* ---- our journey: timeline (2nd design, 2026-09-29; brief: wiki sources/2026-09-29-about-page/journey-section-redesign-operator-brief.md) ----
   One thin hand-drawn line with four stops, labels above it; under it ONE text at a time, typography only.
   All four texts are in the page's HTML. assets/js/jd-about.js switches the shown one (click, pointer over, keys, swipe, arrows on phones)
   and starts the entrance once the section is seen. Without the script: every text is shown, nothing is hidden or animated. */
body .jd-about .jd-about__sec.jd-about__journey {
  padding-top: clamp(80px, 10vw, 140px);
  padding-bottom: clamp(90px, 11vw, 150px);
}
body .jd-about .jd-about__journey h2.jd-home-title { margin-bottom: 0; }
.jd-journey {
  --jd-journey-line: rgba(59, 42, 31, .16);
  --jd-journey-done: rgba(59, 42, 31, .46);
  --jd-journey-ring: rgba(59, 42, 31, .36);
  --jd-journey-butter: #fbeaa9;
  --jd-journey-dot: 13px;
  max-width: 1100px;
  margin: clamp(44px, 5vw, 70px) auto 0;
}
.jd-journey__nav {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
}
body .jd-journey .jd-journey__stops {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
}
body .jd-journey .jd-journey__stops li { margin: 0; padding: 0; }
body .jd-journey .jd-journey__stops li::before { content: none; }
/* the line runs from the first dot's centre to the last one's; the darker part ends at the chosen stop */
.jd-journey__line,
.jd-journey__line::after {
  position: absolute;
  height: 6px;
  pointer-events: none;
  -webkit-mask: var(--jd-about-stroke-mask) 0 50% / 120px 6px repeat-x;
          mask: var(--jd-about-stroke-mask) 0 50% / 120px 6px repeat-x;
}
.jd-journey__line {
  left: 12.5%;
  right: 12.5%;
  bottom: calc(10px + 8px - 3px);        /* the button's lower padding + half of the dot's 16px box - half of the stroke's 6px box */
  background: var(--jd-journey-line);
  transform-origin: left center;
}
.jd-journey__line::after {
  content: "";
  left: 0;
  top: 0;
  width: calc(var(--jd-journey-at, 0) * 100%);
  background: var(--jd-journey-done);
  transition: width .35s ease;
}
body .jd-journey .jd-journey__stop {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  width: 100%;
  min-height: 0;
  padding: 8px 2px 10px;
  border: 0;
  border-radius: 10px;
  background: none;
  box-shadow: none;
  color: var(--jd-about-muted);
  font-family: "Baloo 2", var(--jd-font-body);
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: .16em;
  text-indent: .16em;
  text-transform: none;
  cursor: pointer;
  transition: color .3s ease;
}
body .jd-journey .jd-journey__stop:hover { background: none; box-shadow: none; color: var(--jd-about-ink); }
body .jd-journey .jd-journey__stop:focus-visible { outline: 1px solid var(--jd-journey-done); outline-offset: 2px; }
.jd-journey__stop[aria-selected="true"] { color: var(--jd-about-ink); }
.jd-journey__dot {
  position: relative;
  display: grid;
  place-items: center;
  width: 16px;
  height: 16px;
}
.jd-journey__dot::before {                /* the circle */
  content: "";
  box-sizing: border-box;
  width: var(--jd-journey-dot);
  height: var(--jd-journey-dot);
  border: 1px solid var(--jd-journey-ring);
  border-radius: 52% 48% 50% 50% / 49% 52% 48% 51%;
  background: var(--jd-about-bg, #f6f5f1);
  transition: width .3s ease, height .3s ease, background-color .3s ease, border-color .3s ease;
}
.jd-journey__dot::after {                 /* the chosen stop's uneven outer ring */
  content: "";
  position: absolute;
  inset: -4px;
  border: 1px solid rgba(201, 168, 74, .5);
  border-radius: 56% 44% 53% 47% / 46% 55% 45% 54%;
  opacity: 0;
  transform: rotate(-14deg) scale(.7);
  transition: opacity .3s ease, transform .3s ease;
}
.jd-journey__stop.is-done .jd-journey__dot::before { border-color: var(--jd-journey-done); }
.jd-journey__stop[aria-selected="true"] .jd-journey__dot::before {
  width: 16px;
  height: 16px;
  border-color: rgba(201, 168, 74, .75);
  background: var(--jd-journey-butter);
}
.jd-journey__stop[aria-selected="true"] .jd-journey__dot::after { opacity: 1; transform: rotate(-14deg); }

/* previous / next: phones only */
body .jd-journey .jd-journey__step { display: none; }

/* the text under the line */
.jd-journey__panels { margin-top: clamp(40px, 4.6vw, 62px); }
.jd-journey__panel { max-width: 480px; margin: 0 auto 44px; }
.jd-journey__panel:last-child { margin-bottom: 0; }
body .jd-about .jd-journey__panel h3 {
  margin: 0 0 16px;
  font-family: var(--jd-font-body);
  font-size: clamp(20px, 2.1vw, 24px);
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: .06em;
  color: var(--jd-about-ink);
}
.jd-journey__when {
  display: block;
  margin-bottom: 14px;
  font-family: "Baloo 2", var(--jd-font-body);
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: .12em;
  color: var(--jd-about-muted);
}
.jd-journey__bar {                        /* the 「｜」 between label and title: read, not shown */
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
body .jd-about .jd-journey__panel .jd-about__text { max-width: none; margin-bottom: 0; font-size: 15px; line-height: 1.8; }

/* with the script */
.jd-journey.is-ready .jd-journey__panel { margin-bottom: 0; }
.jd-journey.is-ready .jd-journey__panel[hidden] { display: none; }
.jd-journey.is-ready .jd-journey__panel:not([hidden]) { animation: jd-journey-in .3s ease both; }
@keyframes jd-journey-in { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }
/* entrance, once: the line is drawn from the left, then the stops appear one after another */
.jd-journey.is-ready:not(.is-in) .jd-journey__line { transform: scaleX(0); }
.jd-journey.is-ready:not(.is-in) .jd-journey__stop,
.jd-journey.is-ready:not(.is-in) .jd-journey__panels { opacity: 0; }
.jd-journey.is-ready.is-in .jd-journey__line { transform: none; transition: transform .8s cubic-bezier(.4, 0, .2, 1); }
.jd-journey.is-ready.is-in .jd-journey__stop { opacity: 1; transition: opacity .45s ease calc(.55s + var(--jd-journey-n, 0) * .12s), color .3s ease; }
.jd-journey.is-ready.is-in .jd-journey__panels { opacity: 1; transition: opacity .5s ease 1.1s; }

@media (max-width: 767px) {
  .jd-journey__nav { grid-template-columns: 30px minmax(0, 1fr) 30px; }
  body .jd-journey .jd-journey__step {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    min-height: 0;
    margin-top: -1px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: none;
    box-shadow: none;
    color: var(--jd-about-ink);
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
  }
  body .jd-journey .jd-journey__step[disabled] { color: var(--jd-journey-line); cursor: default; }
  body .jd-journey .jd-journey__step:focus-visible { outline: 1px solid var(--jd-journey-done); }
  body .jd-journey .jd-journey__stop { gap: 16px; padding-inline: 0; font-size: 11px; letter-spacing: .1em; text-indent: .1em; }
  .jd-journey__panels { margin-top: 40px; touch-action: pan-y; }
  body .jd-about .jd-journey__panel h3 { font-size: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .jd-journey *, .jd-journey *::before, .jd-journey *::after { transition: none !important; animation: none !important; }
  .jd-journey.is-ready:not(.is-in) .jd-journey__line { transform: none; }
  .jd-journey.is-ready:not(.is-in) .jd-journey__stop,
  .jd-journey.is-ready:not(.is-in) .jd-journey__panels { opacity: 1; }
}

@media (max-width: 767px) {
  .jd-about__sec { padding-inline: 22px; }
  body .jd-about .jd-about__text { font-size: 15px; line-height: 1.9; }
  body .jd-about .jd-about__trio span { font-size: 12px; letter-spacing: .04em; }
}
@media (prefers-reduced-motion: reduce) {
  .jd-about__trio img { transition: none; }
}

/* ---- HEADER of this page (operator 2026-09-29): the one-row layout of the sticky bar (logo left, menu, tools right), lying OVER the hero
   photograph: no background, no line, no shadow. Made from the normal header's two rows by CSS - the logo / tools row stays,
   the menu row is laid over it between logo and tools. Menu size and gaps = the sticky bar's rules (assets/css/jd-nav-lang.css).
   Once the page is scrolled WoodMart's own sticky bar (white) takes over as on every page. ---- */
body.jd-page-about .whb-header {
  position: absolute;
  z-index: 390;
  top: 0;
  left: 0;
  right: 0;
  margin: 0;
  background: none;
  box-shadow: none;
}
body.admin-bar.jd-page-about .whb-header { top: 32px; }
body.jd-page-about .whb-header .whb-main-header { position: relative; background: none; border: 0; box-shadow: none; }
body.jd-page-about .whb-header .whb-row,
body.jd-page-about .whb-header .whb-row > .container,
body.jd-page-about .whb-header .whb-flex-row {
  background: none !important;           /* the rows' colours come from Header Builder's generated CSS */
  border: 0 !important;
  box-shadow: none;
}
@media (min-width: 1025px) {
  body.jd-page-about .whb-header { --jd-about-hd-h: 76px; --jd-about-hd-logo: 170px; --jd-about-hd-tools: 120px; }
  /* tools = the sticky bar's: 我的帳號, 搜尋, 購物車, 40px each, no divider line / spacers (operator 2026-09-30: 「搜尋icon右邊有條直線 … 刪除 … 跟sticky header一樣」) */
  body.jd-page-about .whb-header .whb-top-bar .whb-col-right :is(.wd-header-divider, .whb-space-element) { display: none; }
  body.jd-page-about .whb-header .whb-top-bar .whb-col-right .wd-header-my-account { order: 1; }
  body.jd-page-about .whb-header .whb-top-bar .whb-col-right .wd-header-search { order: 2; }
  body.jd-page-about .whb-header .whb-top-bar .whb-col-right .wd-header-cart { order: 3; }
  body.jd-page-about .whb-header .whb-main-header { max-width: 1440px; margin-inline: auto; }
  body.jd-page-about .whb-header .whb-top-bar .whb-flex-row { height: var(--jd-about-hd-h); }
  body.jd-page-about .whb-header .whb-top-bar .whb-col-left { display: none; }
  body.jd-page-about .whb-header .whb-top-bar .whb-col-center { order: 1; flex: 0 0 var(--jd-about-hd-logo); justify-content: flex-start; }
  body.jd-page-about .whb-header .whb-top-bar .whb-col-right { order: 2; flex: 1 1 auto; justify-content: flex-end; }
  body.jd-page-about .whb-header .site-logo img { max-width: 150px !important; }
  /* the menu row: over the first row, between logo and tools */
  body.jd-page-about .whb-header .whb-general-header {
    position: absolute;
    top: 0;
    left: calc(51px + var(--jd-about-hd-logo));
    right: calc(51px + var(--jd-about-hd-tools));
    height: var(--jd-about-hd-h);
  }
  body.jd-page-about .whb-header .whb-general-header > .container { width: 100%; max-width: none; height: 100%; padding: 0; }
  body.jd-page-about .whb-header .whb-general-header .whb-flex-row { height: var(--jd-about-hd-h) !important; min-height: var(--jd-about-hd-h) !important; max-height: none !important; }   /* Header Builder gives this row 56px: the menu stood 10px higher than the tools */
  body.jd-page-about .whb-header .whb-general-header :is(.whb-col-left, .whb-col-right) { display: none; }
  body.jd-page-about .whb-header .whb-general-header .whb-col-center { flex: 1 1 auto; justify-content: center; }
  body.jd-page-about .whb-header .wd-header-nav .wd-nav-main { justify-content: center; }
  body.jd-page-about .whb-header .wd-header-nav .wd-nav-main > li > a { padding-inline: 0; }
  body.jd-page-about .whb-header .wd-header-nav .wd-nav-main > li > a,
  body.jd-page-about .whb-header .wd-header-nav .wd-nav-main > li > a .nav-link-text { font-size: 15px; }
}
/* Menu of this header = the home page's sticky bar (operator 2026-09-30: 「about頁的header … 跟首頁的stickyheader一樣要置中對齊而且有子選項就要顯示箭頭」,
   「一開始還沒到sticky的那版header … 背景要透明並且刪除底線陰影」): centred between logo and tools, dropdown arrows shown, transparent, no line / shadow.
   The menu has less room here than in the sticky bar (logo 170 + tools 120 + 2 x 51px margins, box capped at 1440px):
     room = min(window, 1440px) - 392px.  Labels of the 10 items at 15px, no gaps [measured]: .1em + arrows ~853px · 0 + arrows ~776px · 0, no arrows ~696px
     gap = (room - labels - 24px spare) / 9, never below 2px.  Arrows from 1290px (below that there is no room for them, as in the sticky bar below 1440px). */
@media (min-width: 1025px) {
  body.jd-page-about .whb-header { --jd-about-hd-room: calc(min(100vw - var(--wd-scroll-w, 0px), 1440px) - 2 * 51px - var(--jd-about-hd-logo) - var(--jd-about-hd-tools)); }
  body.jd-page-about .whb-header .wd-header-nav { flex: 0 1 auto; width: auto; max-width: 100%; padding-inline: 0; }   /* WoodMart stretches it (flex 1, text-left): the menu sat at the left */
  body.jd-page-about .whb-header .wd-header-nav .wd-nav-main { flex-wrap: nowrap; justify-content: center; }
  body.jd-page-about .whb-header,
  body.jd-page-about .whb-header :is(.whb-main-header, .whb-row, .whb-flex-row) { box-shadow: none !important; border-bottom: 0 !important; }
  body.jd-page-about .whb-header .whb-main-header::after,
  body.jd-page-about .whb-header .whb-row::after { display: none; }
}
@media (min-width: 1440px) {
  body.jd-page-about .whb-header .wd-header-nav .wd-nav-main { --nav-gap: clamp(2px, calc((var(--jd-about-hd-room) - 877px) / 9), 26px); }
  body.jd-page-about .whb-header .wd-header-nav .wd-nav-main > li > a,
  body.jd-page-about .whb-header .wd-header-nav .wd-nav-main > li > a .nav-link-text { letter-spacing: .1em; }
}
@media (min-width: 1290px) and (max-width: 1439px) {
  body.jd-page-about .whb-header .wd-header-nav .wd-nav-main { --nav-gap: clamp(2px, calc((var(--jd-about-hd-room) - 800px) / 9), 20px); }
  body.jd-page-about .whb-header .wd-header-nav .wd-nav-main > li > a,
  body.jd-page-about .whb-header .wd-header-nav .wd-nav-main > li > a .nav-link-text { letter-spacing: 0; }
}
@media (min-width: 1025px) and (max-width: 1289px) {
  body.jd-page-about .whb-header .wd-header-nav .wd-nav-main > li > a::after { display: none; }
}
@media (min-width: 1200px) and (max-width: 1289px) {
  body.jd-page-about .whb-header .wd-header-nav .wd-nav-main { --nav-gap: clamp(2px, calc((var(--jd-about-hd-room) - 720px) / 9), 12px); }
  body.jd-page-about .whb-header .wd-header-nav .wd-nav-main > li > a,
  body.jd-page-about .whb-header .wd-header-nav .wd-nav-main > li > a .nav-link-text { letter-spacing: 0; }
}
/* small desktop widths: the lettering itself gets smaller (13px: labels about 603px, 12px: about 557px) */
@media (min-width: 1025px) and (max-width: 1199px) {
  body.jd-page-about .whb-header { --jd-about-hd-logo: 150px; --jd-about-hd-tools: 120px; }
  body.jd-page-about .whb-header .site-logo img { max-width: 132px !important; }
  body.jd-page-about .whb-header .wd-header-nav .wd-nav-main { --nav-gap: clamp(2px, calc((100vw - 1060px) / 9), 14px); }
  body.jd-page-about .whb-header .wd-header-nav .wd-nav-main > li > a,
  body.jd-page-about .whb-header .wd-header-nav .wd-nav-main > li > a .nav-link-text { font-size: 13px; letter-spacing: 0; }
}
@media (min-width: 1025px) and (max-width: 1079px) {
  body.jd-page-about .whb-header .wd-header-nav .wd-nav-main > li > a,
  body.jd-page-about .whb-header .wd-header-nav .wd-nav-main > li > a .nav-link-text { font-size: 12px; }
}

/* The photographs' fades use several eased steps: a plain two-step gradient showed faint contour lines on the light ground. */
/* ---- HERO: the photograph in the upper right corner, from the very top of the page (under the header); the text stands on the
   photograph's empty wall on the left. The photograph is one picture with its own soft fade to the left and to the bottom. ---- */
.jd-about__hero {
  --jd-about-hero-w: var(--jd-about-box);
  position: relative;
  box-sizing: border-box;
  width: var(--jd-about-hero-w);
  margin-inline: calc(50% - var(--jd-about-hero-w) / 2);
  height: clamp(520px, calc(var(--jd-about-box) * .52), 800px);
  overflow: hidden;
  text-align: start;
}
.jd-about__hero-art,
.jd-about__hero-art img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}
.jd-about__hero-art img { object-fit: cover; object-position: 100% 35%; }
.jd-about__hero-art {
  -webkit-mask-image: linear-gradient(to right, transparent 12%, rgba(0,0,0,.06) 19%, rgba(0,0,0,.2) 25%, rgba(0,0,0,.5) 32%, rgba(0,0,0,.8) 39%, rgba(0,0,0,.95) 45%, #000 50%), linear-gradient(to top, transparent 1%, rgba(0,0,0,.06) 6%, rgba(0,0,0,.2) 11%, rgba(0,0,0,.5) 16%, rgba(0,0,0,.8) 21%, rgba(0,0,0,.95) 26%, #000 30%), linear-gradient(to left, var(--jd-about-edge-fade));
          mask-image: linear-gradient(to right, transparent 12%, rgba(0,0,0,.06) 19%, rgba(0,0,0,.2) 25%, rgba(0,0,0,.5) 32%, rgba(0,0,0,.8) 39%, rgba(0,0,0,.95) 45%, #000 50%), linear-gradient(to top, transparent 1%, rgba(0,0,0,.06) 6%, rgba(0,0,0,.2) 11%, rgba(0,0,0,.5) 16%, rgba(0,0,0,.8) 21%, rgba(0,0,0,.95) 26%, #000 30%), linear-gradient(to left, var(--jd-about-edge-fade));
  -webkit-mask-composite: source-in;
          mask-composite: intersect;
}
.jd-about__hero-text {
  position: absolute;
  z-index: 1;
  top: 50%;
  left: clamp(22px, 3.6vw, 52px);
  width: min(calc(var(--jd-about-box) * .3), 460px);
  transform: translateY(-44%);
}
.jd-about .jd-about__hero .jd-about__eyebrow { text-indent: 0; margin-bottom: 20px; }
body .jd-about .jd-about__hero :is(h1, h2).jd-home-title { margin: 0 0 26px; }
body :is(h1, h2).jd-home-title--drawn.jd-about__title--start .jd-home-title__arts { justify-content: flex-start; }
body .jd-about .jd-about__hero .jd-about__text { max-width: none; margin-inline: 0; }
.jd-about__hero + .jd-about__sec { padding-top: var(--jd-about-pad); }

/* tablets and phones (operator 2026-09-29: the photograph ABOVE the text): the photograph first, from the window's top under the
   transparent header, cut to its right part; its lower edge fades into the page; the text under it */
@media (max-width: 1024px) {
  .jd-about__hero { height: auto; display: flex; flex-direction: column; }
  .jd-about__hero-art {
    position: relative;
    inset: auto;
    order: 1;
    height: auto;
    -webkit-mask-image: linear-gradient(to top, transparent 0%, rgba(0,0,0,.06) 5%, rgba(0,0,0,.2) 9%, rgba(0,0,0,.5) 14%, rgba(0,0,0,.8) 18%, rgba(0,0,0,.95) 22%, #000 26%);
            mask-image: linear-gradient(to top, transparent 0%, rgba(0,0,0,.06) 5%, rgba(0,0,0,.2) 9%, rgba(0,0,0,.5) 14%, rgba(0,0,0,.8) 18%, rgba(0,0,0,.95) 22%, #000 26%);
    -webkit-mask-composite: source-over;
            mask-composite: add;
  }
  .jd-about__hero-art img { position: static; height: clamp(300px, 78vw, 600px); object-position: 84% 100%; }
  .jd-about__hero-text {
    position: static;
    order: 2;
    width: auto;
    max-width: 560px;
    padding: 6px 24px 0;
    transform: none;
  }
}

/* ---- HOW IT STARTED (mock-up jd_about.jpg, 2nd photograph): text on the left, the photograph on the right, running off the window's
   right edge. The photograph has its own light ground: left, upper and lower parts are faded out so that it runs into the page's colour. ---- */
.jd-about__split {
  --jd-about-hero-w: var(--jd-about-box);
  position: relative;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: minmax(0, 46fr) minmax(0, 54fr);
  align-items: center;
  width: var(--jd-about-hero-w);
  margin-inline: calc(50% - var(--jd-about-hero-w) / 2);
  padding-block: clamp(48px, 7vw, 110px);
  text-align: start;
}
.jd-about__split-text {
  box-sizing: border-box;
  padding-inline: clamp(22px, 3.6vw, 52px) clamp(16px, 3vw, 48px);
  max-width: 640px;
}
.jd-about .jd-about__split .jd-about__eyebrow { text-indent: 0; margin-bottom: 20px; }
body .jd-about .jd-about__split :is(h1, h2).jd-home-title { margin: 0 0 26px; }
body .jd-about .jd-about__split .jd-about__text { max-width: none; margin-inline: 0; }
.jd-about__split-art {
  display: block;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,.06) 7%, rgba(0,0,0,.2) 14%, rgba(0,0,0,.5) 21%, rgba(0,0,0,.8) 28%, rgba(0,0,0,.95) 34%, #000 40%), linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.06) 5%, rgba(0,0,0,.2) 9%, rgba(0,0,0,.5) 14%, rgba(0,0,0,.8) 18%, rgba(0,0,0,.95) 22%, #000 26%), linear-gradient(to top, transparent 0%, rgba(0,0,0,.06) 5%, rgba(0,0,0,.2) 10%, rgba(0,0,0,.5) 15%, rgba(0,0,0,.8) 20%, rgba(0,0,0,.95) 24%, #000 28%), linear-gradient(to left, var(--jd-about-edge-fade));
          mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,.06) 7%, rgba(0,0,0,.2) 14%, rgba(0,0,0,.5) 21%, rgba(0,0,0,.8) 28%, rgba(0,0,0,.95) 34%, #000 40%), linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.06) 5%, rgba(0,0,0,.2) 9%, rgba(0,0,0,.5) 14%, rgba(0,0,0,.8) 18%, rgba(0,0,0,.95) 22%, #000 26%), linear-gradient(to top, transparent 0%, rgba(0,0,0,.06) 5%, rgba(0,0,0,.2) 10%, rgba(0,0,0,.5) 15%, rgba(0,0,0,.8) 20%, rgba(0,0,0,.95) 24%, #000 28%), linear-gradient(to left, var(--jd-about-edge-fade));
  -webkit-mask-composite: source-in;
          mask-composite: intersect;
}
.jd-about__split-art img { display: block; width: 100%; height: auto; aspect-ratio: 1359 / 724; }
@media (max-width: 1024px) {
  .jd-about__split { grid-template-columns: minmax(0, 1fr); padding-block: clamp(40px, 8vw, 72px) 0; }
  .jd-about__split-text { max-width: 600px; padding-inline: 24px; }
  .jd-about__split-art {
    margin-top: 18px;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 26%, #000 76%, transparent 100%);
            mask-image: linear-gradient(to bottom, transparent 0, #000 26%, #000 76%, transparent 100%);
    -webkit-mask-composite: source-over;
            mask-composite: add;
  }
}

/* ---- WHAT WE DO (mock-up, 4th block): the mirror of "how it started" - photograph on the left, running off the window's left edge,
   text on the right; the link under the text is a plain text link with a line under it. ---- */
.jd-about__split--flip { grid-template-columns: minmax(0, 44fr) minmax(0, 56fr); }
.jd-about__split--flip .jd-about__split-art {
  -webkit-mask-image: linear-gradient(to left, transparent 0%, rgba(0,0,0,.06) 6%, rgba(0,0,0,.2) 12%, rgba(0,0,0,.5) 18%, rgba(0,0,0,.8) 24%, rgba(0,0,0,.95) 29%, #000 34%), linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.06) 4%, rgba(0,0,0,.2) 7%, rgba(0,0,0,.5) 10%, rgba(0,0,0,.8) 14%, rgba(0,0,0,.95) 17%, #000 20%), linear-gradient(to top, transparent 0%, rgba(0,0,0,.06) 4%, rgba(0,0,0,.2) 8%, rgba(0,0,0,.5) 12%, rgba(0,0,0,.8) 17%, rgba(0,0,0,.95) 21%, #000 24%), linear-gradient(to right, var(--jd-about-edge-fade));
          mask-image: linear-gradient(to left, transparent 0%, rgba(0,0,0,.06) 6%, rgba(0,0,0,.2) 12%, rgba(0,0,0,.5) 18%, rgba(0,0,0,.8) 24%, rgba(0,0,0,.95) 29%, #000 34%), linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.06) 4%, rgba(0,0,0,.2) 7%, rgba(0,0,0,.5) 10%, rgba(0,0,0,.8) 14%, rgba(0,0,0,.95) 17%, #000 20%), linear-gradient(to top, transparent 0%, rgba(0,0,0,.06) 4%, rgba(0,0,0,.2) 8%, rgba(0,0,0,.5) 12%, rgba(0,0,0,.8) 17%, rgba(0,0,0,.95) 21%, #000 24%), linear-gradient(to right, var(--jd-about-edge-fade));
  -webkit-mask-composite: source-in;
          mask-composite: intersect;
}
.jd-about__split--flip .jd-about__split-art img { aspect-ratio: 1039 / 831; }
.jd-about__split--flip .jd-about__split-text {
  padding-inline: clamp(24px, 6vw, 110px) clamp(22px, 3.6vw, 52px);
  max-width: 720px;
}
.jd-about .jd-about__more { margin: 30px 0 0; }
.jd-about .jd-journey__panel .jd-about__more { margin-top: 22px; }
.jd-about .jd-about__more a {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding-bottom: 10px;
  background: var(--jd-about-stroke) 0 100% / 120px 6px repeat-x;
  color: var(--jd-about-ink);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .14em;
  text-decoration: none;
}
.jd-about .jd-about__more a span { transition: transform .25s ease; }
@media (hover: hover) { .jd-about .jd-about__more a:hover span { transform: translateX(4px); } }
.jd-about .jd-about__more a:focus-visible { outline: 1.5px solid var(--jd-about-ink); outline-offset: 4px; }
.jd-about__split + .jd-about__split { padding-top: 0; }
@media (max-width: 1024px) {
  .jd-about__split--flip { grid-template-columns: minmax(0, 1fr); padding-top: clamp(40px, 8vw, 72px); }
  .jd-about__split--flip .jd-about__split-art { order: 2; max-width: 620px; }
  .jd-about__split--flip .jd-about__split-text { order: 1; max-width: 600px; padding-inline: 24px; }
  .jd-about__split--flip .jd-about__split-art {
    -webkit-mask-image: linear-gradient(to left, transparent 0%, rgba(0,0,0,.06) 5%, rgba(0,0,0,.2) 10%, rgba(0,0,0,.5) 16%, rgba(0,0,0,.8) 21%, rgba(0,0,0,.95) 26%, #000 30%), linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.06) 4%, rgba(0,0,0,.2) 7%, rgba(0,0,0,.5) 11%, rgba(0,0,0,.8) 15%, rgba(0,0,0,.95) 19%, #000 22%), linear-gradient(to top, transparent 0%, rgba(0,0,0,.06) 4%, rgba(0,0,0,.2) 8%, rgba(0,0,0,.5) 12%, rgba(0,0,0,.8) 17%, rgba(0,0,0,.95) 21%, #000 24%);
            mask-image: linear-gradient(to left, transparent 0%, rgba(0,0,0,.06) 5%, rgba(0,0,0,.2) 10%, rgba(0,0,0,.5) 16%, rgba(0,0,0,.8) 21%, rgba(0,0,0,.95) 26%, #000 30%), linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.06) 4%, rgba(0,0,0,.2) 7%, rgba(0,0,0,.5) 11%, rgba(0,0,0,.8) 15%, rgba(0,0,0,.95) 19%, #000 22%), linear-gradient(to top, transparent 0%, rgba(0,0,0,.06) 4%, rgba(0,0,0,.2) 8%, rgba(0,0,0,.5) 12%, rgba(0,0,0,.8) 17%, rgba(0,0,0,.95) 21%, #000 24%);
    -webkit-mask-composite: source-in;
            mask-composite: intersect;
  }
}
@media (prefers-reduced-motion: reduce) { .jd-about .jd-about__more a span { transition: none; } }

/* ---- BRAND FILM (2nd block of the mock-up): the place of the player. The player itself = assets/css/jd-film-player.css ---- */
.jd-about__film {
  box-sizing: border-box;
  max-width: 1360px;
  margin-inline: auto;
  padding: clamp(18px, 3vw, 40px) clamp(16px, 3.6vw, 52px) 0;
}
.jd-about__film-title {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.jd-about__hero + .jd-about__film + .jd-about__split { padding-top: clamp(40px, 6vw, 96px); }

/* ==== STORE PAGE /location/ (2026-09-30): the About page's layout with the store's own blocks.
   Content = Raw HTML written by build/scripts/header-and-colors/location-page-v1.php ==== */
/* first photograph = the shop front, on the RIGHT HALF of the page's box only (operator 2026-09-30: the full-width picture was too
   large). The picture keeps its shape and is shown whole; its left, lower and (on wide screens) outer edge fade into the page. The
   block is as high as the picture, the text stands in the left half. */
@media (min-width: 1025px) {
  .jd-about__hero--store { height: auto; min-height: calc(var(--jd-about-box) * .5 * 920 / 1455 + 40px); }
  .jd-about__hero--store .jd-about__hero-art {
    inset: 0 0 auto auto;
    width: 50%;
    height: auto;
    aspect-ratio: 1455 / 920;
    -webkit-mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,.06) 4%, rgba(0,0,0,.2) 8%, rgba(0,0,0,.5) 13%, rgba(0,0,0,.8) 18%, rgba(0,0,0,.95) 22%, #000 26%), linear-gradient(to top, transparent 0%, rgba(0,0,0,.06) 4%, rgba(0,0,0,.2) 8%, rgba(0,0,0,.5) 12%, rgba(0,0,0,.8) 16%, rgba(0,0,0,.95) 19%, #000 22%), linear-gradient(to left, var(--jd-about-edge-fade));
            mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,.06) 4%, rgba(0,0,0,.2) 8%, rgba(0,0,0,.5) 13%, rgba(0,0,0,.8) 18%, rgba(0,0,0,.95) 22%, #000 26%), linear-gradient(to top, transparent 0%, rgba(0,0,0,.06) 4%, rgba(0,0,0,.2) 8%, rgba(0,0,0,.5) 12%, rgba(0,0,0,.8) 16%, rgba(0,0,0,.95) 19%, #000 22%), linear-gradient(to left, var(--jd-about-edge-fade));
  }
  .jd-about__hero--store .jd-about__hero-art img { object-fit: contain; object-position: 100% 0; }
  .jd-about__hero--store .jd-about__hero-text { top: calc(50% + 24px); width: min(calc(var(--jd-about-box) * .42), 520px); transform: translateY(-50%); }
  .jd-about__hero--store + .jd-about__sec { padding-top: clamp(56px, 7vw, 100px); }
}
/* tablets and phones (operator 2026-09-30): the text first, the whole picture UNDER it, not cut. The text starts under the header,
   which lies over the page's top; the picture's upper and lower edge fade into the page. */
@media (max-width: 1024px) {
  .jd-about__hero--store .jd-about__hero-text { order: 1; padding-top: calc(var(--jd-loc-hd, 70px) + clamp(28px, 7vw, 56px)); }
  .jd-about__hero--store .jd-about__hero-art {
    order: 2;
    margin-top: clamp(22px, 5vw, 40px);
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.06) 3%, rgba(0,0,0,.2) 6%, rgba(0,0,0,.5) 10%, rgba(0,0,0,.8) 14%, rgba(0,0,0,.95) 17%, #000 20%), linear-gradient(to top, transparent 0%, rgba(0,0,0,.06) 4%, rgba(0,0,0,.2) 8%, rgba(0,0,0,.5) 12%, rgba(0,0,0,.8) 16%, rgba(0,0,0,.95) 19%, #000 22%);
            mask-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.06) 3%, rgba(0,0,0,.2) 6%, rgba(0,0,0,.5) 10%, rgba(0,0,0,.8) 14%, rgba(0,0,0,.95) 17%, #000 20%), linear-gradient(to top, transparent 0%, rgba(0,0,0,.06) 4%, rgba(0,0,0,.2) 8%, rgba(0,0,0,.5) 12%, rgba(0,0,0,.8) 16%, rgba(0,0,0,.95) 19%, #000 22%);
    -webkit-mask-composite: source-in;
            mask-composite: intersect;
  }
  .jd-about__hero--store .jd-about__hero-art img { height: auto; aspect-ratio: 1455 / 920; object-fit: cover; object-position: 50% 50%; }
  .jd-about__hero--store + .jd-about__sec { padding-top: clamp(40px, 8vw, 72px); }
}
@media (min-width: 700px) and (max-width: 1024px) {
  .jd-about__hero--store .jd-about__hero-art { width: min(100%, 760px); margin-inline: auto; }
  .jd-about__hero--store .jd-about__hero-text { max-width: 760px; margin-inline: auto; width: 100%; box-sizing: border-box; }
}

/* facts in columns: address / hours / telephone, and the two ways to get here */
.jd-loc__cols {
  display: grid;
  grid-template-columns: repeat(var(--jd-loc-n, 3), minmax(0, 1fr));
  gap: clamp(28px, 4vw, 64px);
  max-width: 1040px;
  margin: clamp(30px, 4vw, 52px) auto 0;
  padding: 0;
  text-align: center;
}
.jd-loc__cols--2 { --jd-loc-n: 2; max-width: 820px; }
.jd-loc__col { position: relative; min-width: 0; }
.jd-loc__col + .jd-loc__col::before {
  content: "";
  position: absolute;
  top: 6px;
  bottom: 6px;
  left: calc(clamp(28px, 4vw, 64px) / -2);
  width: 1px;
  background: var(--jd-about-line);
}
body .jd-about h3.jd-loc__name {
  margin: 0 0 14px;
  color: var(--jd-about-ink);
  font-family: var(--jd-font-body);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: .14em;
  text-indent: .14em;
}
body .jd-about .jd-loc__col :is(p, address).jd-about__text {
  max-width: 300px;
  margin: 0 auto .7em;
  font-style: normal;
}
.jd-loc__cols--2 .jd-loc__col :is(p, address).jd-about__text { max-width: 340px; }
body .jd-about .jd-loc__col .jd-loc__main { color: var(--jd-about-ink); font-size: 16px; font-weight: 500; }
body .jd-about .jd-loc__col .jd-about__text:last-child { margin-bottom: 0; }
.jd-about__sec > .jd-about__more { margin-top: clamp(30px, 4vw, 48px); }
.jd-about__close .jd-about__more { margin-top: 30px; }

/* room above the closing block (operator 2026-09-30, store page then About page: too much empty room above it): the block before
   the rule + the rule's margin + the closing block's padding added up to about 420px; now about 150px, the thin rule in the middle */
body .jd-about :is(.jd-about__sec, .jd-about__journey):has(+ .jd-about__rule) { padding-bottom: clamp(44px, 5vw, 72px); }
.jd-about .jd-about__rule { margin-bottom: 0; }
.jd-about .jd-about__rule + .jd-about__close { padding-top: clamp(44px, 5vw, 72px); }

/* the map (2026-09-30, operator: the map of WoodMart's Sweets Bakery contact page) = WoodMart's OpenStreetMap element, as wide as
   the page's box, 500px high, with the store card on its left. The page is three builder rows here: text / map / closing. */
.jd-loc--top, .jd-loc--card { margin-bottom: 0; }
.jd-loc--top .jd-loc__find { padding-bottom: clamp(26px, 4vw, 44px); }
.jd-loc--end { padding-top: clamp(44px, 5vw, 72px); }
body.jd-page-location .vc_row.jd-loc-map-row { margin-bottom: 0; }
.jd-loc__osm {
  --jd-loc-box: min(calc(100vw - var(--wd-scroll-w, 0px)), 1440px);
  position: relative;
  width: var(--jd-loc-box);
  margin-inline: calc(50% - var(--jd-loc-box) / 2);
  background: #ece9e2;
}
.jd-loc__osm .wd-map-wrapper { height: 500px; }
.jd-loc__osm .wd-map-placeholder img { opacity: 0; }       /* the element's stock picture of another city: not shown before the map starts */
.jd-loc__osm .wd-map-content-wrap { width: 100%; max-width: none; padding: 40px clamp(22px, 3.6vw, 52px); pointer-events: none; }
body .jd-loc__osm .wd-map-content-wrap > .wd-map-content {
  padding: 28px 30px 26px;
  border: 1px solid var(--jd-card-border, #f2eeef);
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(60, 30, 40, .04), 0 8px 24px rgba(60, 30, 40, .06);
  text-align: start;
  pointer-events: auto;
}
.jd-loc__osm .wpb_raw_code { margin-bottom: 0; }
.jd-about.jd-loc--card { text-align: start; }
.jd-loc--card .jd-about__eyebrow { margin-bottom: 12px; text-indent: 0; }
body .jd-about.jd-loc--card h3.jd-loc__name { margin-bottom: 12px; text-indent: 0; }
body .jd-about.jd-loc--card .jd-about__text { max-width: none; margin: 0 0 .5em; font-size: 15px; line-height: 1.8; }
.jd-loc--card .jd-about__more { margin-top: 16px; }
/* the map in the page's colours (operator 2026-09-30: 「地圖的色調好醜 … 搭配這頁色調的配色」): OpenStreetMap's own tiles, turned into a soft warm
   cream-and-ink map by a filter on the TILE layer only (pin, card, controls are not filtered); the pin is the theme's own pink paw pin
   (assets/img/jd-map-pin.svg, 50x64) in place of Leaflet's blue one; zoom buttons and credits in the page's ink / cream. */
.jd-loc__osm .leaflet-container { background: #f3eee6; }
.jd-loc__osm .leaflet-tile-pane { filter: grayscale(.82) sepia(.3) brightness(1.08) contrast(.8); }
.jd-loc__osm img.leaflet-marker-icon {
  content: url("../img/jd-map-pin.svg");
  width: 40px !important;
  height: 51px !important;
  margin-left: -20px !important;
  margin-top: -49px !important;
}
.jd-loc__osm img.leaflet-marker-shadow { display: none; }
.jd-loc__osm .leaflet-bar { border: 1px solid var(--jd-card-border, #f2eeef); border-radius: 14px; overflow: hidden; box-shadow: 0 1px 2px rgba(60, 30, 40, .04), 0 8px 24px rgba(60, 30, 40, .06); }
.jd-loc__osm .leaflet-bar a { width: 34px; height: 34px; line-height: 34px; border-bottom-color: #f2eeef; background: #fff; color: #3b2a1f; font-weight: 400; }
.jd-loc__osm .leaflet-bar a:hover { background: #faf4e6; color: #3b2a1f; }
.jd-loc__osm .leaflet-control-attribution { background: rgba(246, 245, 241, .82); color: #8a7a6d; font-size: 10px; }
.jd-loc__osm .leaflet-control-attribution a { color: #8a7a6d; }
.jd-loc__osm .leaflet-popup-content { margin: 10px 14px; color: #3b2a1f; font-family: var(--jd-font-body); font-size: 13px; line-height: 1.6; letter-spacing: 0; }
/* the element hides its card on narrower screens: from 1025px it stays on the map */
@media (min-width: 1025px) {
  body .jd-loc__osm .wd-map-content-wrap.wd-fill { display: flex !important; }
}
/* tablets and phones: the card stands under the map instead */
@media (max-width: 1024px) {
  .jd-loc__osm .wd-map-wrapper { height: 420px; }
  body .jd-loc__osm .wd-map-content-wrap.wd-fill { position: static; display: block !important; width: auto; height: auto; margin: 0; padding: 18px clamp(16px, 4vw, 40px) 0; background: var(--jd-about-bg, #f6f5f1); }
  body .jd-loc__osm .wd-map-content-wrap > .wd-map-content { max-width: 520px !important; margin-inline: auto; padding: 22px 22px 20px; }
}
@media (max-width: 767px) {
  .jd-loc__osm .wd-map-wrapper { height: 340px; }
}

@media (max-width: 767px) {
  .jd-loc__cols, .jd-loc__cols--2 { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .jd-loc__col { padding-block: 26px; }
  .jd-loc__col:first-child { padding-top: 0; }
  .jd-loc__col:last-child { padding-bottom: 0; }
  .jd-loc__col + .jd-loc__col::before { top: 0; bottom: auto; left: 50%; width: 56px; height: 1px; transform: translateX(-50%); }
}

/* phones (operator 2026-09-30): every text paragraph of the About and the store page is 14px - also the lead sentence, the store's
   address / hours / telephone and the timeline's text. The selector is repeated to outweigh those blocks' own sizes. */
@media (max-width: 767px) {
  body .jd-about .jd-about__text.jd-about__text.jd-about__text { font-size: 14px; }
}

/* ==== PAGE NOT FOUND (404.php, 2026-09-30): the About page's first block with its photograph; two ways back ==== */
body.error404 .wd-page-title { display: none; }
.jd-404 { margin-bottom: 0; }
.jd-404__acts { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 30px; margin-top: 30px; }
.jd-404__acts .jd-about__more { margin: 0; }
@media (max-width: 1024px) {
  .jd-404 .jd-about__hero-text { padding-bottom: clamp(56px, 12vw, 90px); }
}