/* Anthology Book Shop, Divi child theme.
   Ported from the static build. Anything Divi already renders (header,
   menu, footer, product loops) is targeted through Divi's own classes at
   the bottom of this file; everything above is the design system itself. */

@font-face {
  font-family: "Cormorant fallback";
  src: local("Georgia"), local("Times New Roman");
  size-adjust: 88.1%;
  ascent-override: 76%;
  descent-override: 24%;
}
@font-face {
  font-family: "Karla fallback";
  src: local("Arial"), local("Helvetica");
  size-adjust: 101.6%;
  ascent-override: 78.6%;
  descent-override: 21.4%;
}
@font-face {
  font-family: "Jost fallback";
  src: local("Arial"), local("Helvetica");
  size-adjust: 96.6%;
  ascent-override: 73.8%;
  descent-override: 26.2%;
}

:root {
  --verd-deep:  #24403a;
  --verdigris:  #5e908b;
  --rose-deep:  #622537;
  --rose:       #b68697;

  --ink:        #0c1614;
  --ink-2:      #12201d;
  --ink-3:      #1a2c28;
  --verd-lite:  #7fada7;
  --rose-lite:  #c79cab;
  --bone:       #ece7e2;
  --bone-soft:  #a8b5b1;
  --rule:       #24332f;

  --display: "Cormorant Garamond", "Cormorant fallback", Georgia, serif;
  --caps:    "Jost", "Jost fallback", system-ui, sans-serif;
  --body:    "Karla", "Karla fallback", system-ui, sans-serif;

  --maxw: 1240px;
  --wide: 1420px;
  --gut:  clamp(1.25rem, 4vw, 3rem);
  --sec:  clamp(4.5rem, 9vw, 8.5rem);
  --hdr:  98px;
}

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

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}

body {
  margin: 0;
  background: var(--ink);
  color: var(--bone);
  font: 400 17px/1.72 var(--body);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; height: auto; }
a { color: var(--rose-lite); }
a:hover { color: var(--verd-lite); }

:focus-visible {
  outline: 2px solid var(--rose-lite);
  outline-offset: 3px;
}

.vh {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

.skip {
  position: absolute; left: 1rem; top: -4rem; z-index: 200;
  background: var(--rose-deep); color: var(--bone);
  padding: .8rem 1.4rem; font: 500 .8rem/1 var(--caps);
  letter-spacing: .12em; text-transform: uppercase; text-decoration: none;
  transition: top .2s ease;
}
.skip:focus { top: 1rem; color: var(--bone); }

/* --- grid ---------------------------------------------------------------- */

.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gut); }
.wrap--wide { max-width: var(--wide); }

section { padding: var(--sec) 0; }
section + section { padding-top: 0; }
.sec--band { padding: var(--sec) 0; }
.sec--alt { background: var(--ink-2); }
section.sec--alt + section { padding-top: var(--sec); }

/* --- type ---------------------------------------------------------------- */

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 500;
  color: var(--rose);
  margin: 0;
  line-height: 1.08;
  letter-spacing: -.005em;
}

h1 { font-size: clamp(2.75rem, 6.4vw, 5rem); }
h2 { font-size: clamp(2rem, 4.2vw, 3.25rem); }
h3 { font-size: clamp(1.2rem, 1.9vw, 1.5rem); line-height: 1.25; }
h4 { font-size: 1.05rem; line-height: 1.3; }

h1 em, h2 em { font-style: italic; font-weight: 400; color: var(--bone); }

p { margin: 0 0 1.15em; }
p:last-child { margin-bottom: 0; }

.lede {
  font-size: clamp(1.1rem, 1.6vw, 1.3rem);
  line-height: 1.62;
  color: var(--bone);
}
.prose { max-width: 62ch; }
.measure { max-width: 46ch; }
.soft { color: var(--bone-soft); }

.eyebrow {
  display: block;
  font: 400 .72rem/1 var(--caps);
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--verd-lite);
  margin-bottom: 1.3rem;
}

.rule {
  width: 96px; height: 1px; background: rgba(236,231,226,.22);
  border: 0; margin: 2rem 0; position: relative;
}
.rule::after {
  content: ""; position: absolute; left: 0; top: 50%;
  width: 7px; height: 7px; background: var(--rose);
  transform: translateY(-50%) rotate(45deg);
}

/* --- buttons -------------------------------------------------------------- */

.btn {
  display: inline-block;
  font: 500 .76rem/1 var(--caps);
  letter-spacing: .18em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 1.15rem 2.2rem;
  border: 1px solid var(--verd-deep);
  color: var(--bone);
  background: transparent;
  cursor: pointer; white-space: nowrap;
  transition: background-color .25s ease, color .25s ease, border-color .25s ease;
}
.btn:hover, .btn:focus-visible {
  background: var(--bone); color: var(--ink); border-color: var(--bone);
}
.btn--rose { background: var(--rose-deep); border-color: var(--rose-deep); color: var(--bone); }
.btn--rose:hover, .btn--rose:focus-visible { background: var(--rose-lite); border-color: var(--rose-lite); color: var(--ink); }
.btn--ghost { border-color: rgba(236,231,226,.32); }
.btn--sm { padding: .85rem 1.5rem; font-size: .7rem; }
.btn + .btn { margin-left: .9rem; }

.tlink {
  display: inline-block;
  font: 500 .74rem/1 var(--caps);
  letter-spacing: .18em; text-transform: uppercase;
  text-decoration: none; color: var(--verd-lite);
  border-bottom: 1px solid var(--verd-deep);
  padding-bottom: .5rem;
  transition: color .25s ease, border-color .25s ease;
}
.tlink:hover { color: var(--rose-lite); border-color: var(--rose-lite); }


/* --- the doors --------------------------------------------------------------
   She asked for the homepage to open like doors with her logo on. Two panelled
   leaves swing outward on a perspective, the crest is split down the centre
   seam so it parts as they open, and warm light spills through the widening
   gap. Once per session, skippable, removed entirely under reduced motion, and
   the page is fully rendered underneath so this can fail in any way and the
   site still works.
   -------------------------------------------------------------------------- */

.doors { display: none; }
.ab-doors-run .doors {
  display: block;
  position: fixed; inset: 0; z-index: 100010;
  perspective: 1800px;
  perspective-origin: 50% 45%;
  overflow: hidden;
  pointer-events: none;
}

.doors__leaf {
  position: absolute; top: 0; bottom: 0; width: 50.1%;
  overflow: hidden;
  background-color: var(--verd-deep);
  background-image: linear-gradient(rgba(7,12,11,.72), rgba(7,12,11,.88)),
                    url("img/texture-green.webp");
  background-size: auto, 720px;
  background-repeat: repeat, repeat;
  backface-visibility: hidden;
  transition: transform 1.15s cubic-bezier(.62,0,.2,1);
}
.doors__leaf--l { left: 0;  transform-origin: left center;  box-shadow: inset -26px 0 50px rgba(0,0,0,.6); }
.doors__leaf--r { right: 0; transform-origin: right center; box-shadow: inset  26px 0 50px rgba(0,0,0,.6); }

/* the recessed panel of a real door */
.doors__leaf::before {
  content: ""; position: absolute;
  inset: clamp(28px, 5vh, 60px) clamp(26px, 4vw, 58px);
  border: 1px solid rgba(194,164,159,.20);
  box-shadow: inset 0 0 0 9px rgba(0,0,0,.16),
              inset 0 0 60px rgba(0,0,0,.35),
              0 0 30px rgba(0,0,0,.3);
  pointer-events: none;
}

/* a handle each side of the centre seam */
.doors__leaf::after {
  content: ""; position: absolute; top: 64%; z-index: 2;
  width: 9px; height: 78px; border-radius: 5px;
  transform: translateY(-50%);
  background: linear-gradient(90deg, #6d5348, #c2a49f 42%, #7d5f53);
  box-shadow: 0 3px 12px rgba(0,0,0,.7);
}
.doors__leaf--l::after { right: clamp(14px, 2vw, 26px); }
.doors__leaf--r::after { left:  clamp(14px, 2vw, 26px); }

/* the crest, split across the seam: each leaf clips half of one circle */
.doors__crest {
  position: absolute; top: 50%;
  width: min(62vw, 400px); aspect-ratio: 1;
  transform: translateY(-50%);
  background: url("img/crest.webp") center/contain no-repeat;
  filter: drop-shadow(0 10px 30px rgba(0,0,0,.55));
}
.doors__leaf--l .doors__crest { right: calc(min(62vw, 400px) / -2); }
.doors__leaf--r .doors__crest { left:  calc(min(62vw, 400px) / -2); }

/* light through the gap */
.doors__light {
  position: absolute; top: -10%; bottom: -10%; left: 50%;
  width: 0; transform: translateX(-50%);
  background: radial-gradient(ellipse at center,
              rgba(236,231,226,.55) 0%, rgba(199,156,171,.22) 45%, rgba(236,231,226,0) 72%);
  opacity: 0;
}

.doors.is-open .doors__leaf--l { transform: rotateY(-108deg); }
.doors.is-open .doors__leaf--r { transform: rotateY(108deg); }
.doors.is-open .doors__light { animation: ab-doorlight 1.15s ease forwards; }

@keyframes ab-doorlight {
  0%   { width: 0;     opacity: 0; }
  40%  { width: 44vw;  opacity: .95; }
  100% { width: 110vw; opacity: 0; }
}

@media (prefers-reduced-motion: reduce) { .doors { display: none !important; } }

/* --- feature: offset panel + text, alternating ------------------------------ */

.feature {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
.feature--flip .feature__media { order: 2; }
.feature__text { max-width: 52ch; }
.feature__media { position: relative; }
.feature__media img { width: 100%; }

/* A framed slot for photography that has not arrived yet. Deliberately looks
   like a placeholder rather than pretending to be a picture. */
.slot {
  position: relative;
  aspect-ratio: 4 / 3;
  border: 1px solid var(--verd-deep);
  background: var(--ink-2) url("img/wreath.webp") center/48% no-repeat;
  display: grid; place-items: center; text-align: center;
  padding: 2rem;
}
.slot::after {
  content: ""; position: absolute; inset: 10px; border: 1px solid rgba(143,179,177,.16);
  pointer-events: none;
}
.slot::before {
  content: ""; position: absolute; inset: 0;
  background: rgba(18,32,29,.72); pointer-events: none;
}
.slot span { position: relative; }
.slot span {
  font: 400 .72rem/1.7 var(--caps);
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--verd-lite);
  max-width: 22ch;
}
.slot--tall { aspect-ratio: 3 / 4; }
.slot--wide { aspect-ratio: 16 / 9; }

/* --- section headers -------------------------------------------------------- */

.sechead {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 2rem; margin-bottom: clamp(2rem, 4vw, 3.4rem);
  border-bottom: 1px solid var(--rule); padding-bottom: 1.4rem;
}
.sechead__text { max-width: 48ch; }
.sechead p { margin-top: .9rem; color: var(--bone-soft); }
.sechead .tlink { flex: 0 0 auto; border-bottom-color: transparent; }

/* --- product cards ---------------------------------------------------------- */

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(215px, 1fr));
  gap: clamp(1.6rem, 3vw, 2.6rem) clamp(1.2rem, 2.4vw, 2rem);
}
.grid--wide { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.grid > .draft-tag { grid-column: 1 / -1; justify-self: start; margin-bottom: .2rem; }
.grid--shelf { grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 1180px) { .grid--shelf { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 820px)  { .grid--shelf { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 520px)  { .grid--shelf { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.card { position: relative; display: flex; flex-direction: column; }
.card__media {
  position: relative; overflow: hidden;
  background: var(--ink);
  margin-bottom: 1.1rem;
}
.card__media img {
  width: 100%; aspect-ratio: 2 / 3; object-fit: cover;
  transition: transform 1.1s cubic-bezier(.2,.7,.2,1);
}
.card--sq .card__media img { aspect-ratio: 1; }
.card:hover .card__media img { transform: scale(1.045); }
.card__flag {
  position: absolute; left: 0; bottom: 0;
  background: var(--rose-deep); color: var(--bone);
  font: 500 .62rem/1 var(--caps);
  letter-spacing: .16em; text-transform: uppercase;
  padding: .55rem .8rem;
}
.card h3 { font-size: 1.16rem; margin-bottom: .25rem; }
.card h3 a { color: inherit; text-decoration: none; }
.card:hover h3 a { color: var(--rose-lite); }
.card__author {
  font: 400 .74rem/1 var(--caps); letter-spacing: .16em;
  text-transform: uppercase; color: var(--bone-soft);
  margin-bottom: .7rem;
}
.card__foot {
  margin-top: auto; padding-top: .55rem;
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: .6rem 1rem;
}
.card__price { font-family: var(--display); font-size: 1.3rem; color: var(--bone); }
.card__price s { color: var(--bone-soft); font-size: .95rem; margin-right: .45rem; }

/* --- texture band ----------------------------------------------------------- */

.band {
  position: relative;
  background-color: var(--verd-deep);
  background-image: url("img/texture-green.webp");
  background-size: 780px;
  padding: clamp(4rem, 8vw, 7rem) 0;
}
.band::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(14,20,21,.62), rgba(14,20,21,.78));
}
.band > * { position: relative; }
.band__inner { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.band h2 { max-width: 16ch; }
.band .lede { color: var(--bone); }
.band .notes li { border-bottom-color: rgba(236,231,226,.16); }
.band .notes li:first-child { border-top-color: rgba(236,231,226,.16); }

/* --- notes list ------------------------------------------------------------- */

.notes { list-style: none; margin: 0; padding: 0; }
.notes li {
  padding: 1.1rem 0 1.1rem 1.9rem;
  border-bottom: 1px solid var(--rule);
  position: relative;
}
.notes li:first-child { border-top: 1px solid var(--rule); }
.notes li::before {
  content: ""; position: absolute; left: 2px; top: 1.75rem;
  width: 6px; height: 6px; background: var(--rose); transform: rotate(45deg);
}
.notes strong { color: var(--rose); font-weight: 500; }

/* --- panel (forms, denominations) ------------------------------------------- */

.panel {
  background: var(--ink-2);
  border: 1px solid var(--rule);
  padding: clamp(1.8rem, 4vw, 3.2rem);
}
.sec--alt .panel { background: var(--ink); }

.field { margin-bottom: 1.4rem; }
.field label {
  display: block; margin-bottom: .55rem;
  font: 400 .72rem/1 var(--caps); letter-spacing: .18em;
  text-transform: uppercase; color: var(--verd-lite);
}
.field input, .field select, .field textarea {
  width: 100%;
  background: var(--ink-3); border: 1px solid var(--verd-deep);
  color: var(--bone); font: 400 1rem/1.6 var(--body);
  padding: .95rem 1.05rem;
}
.field textarea { min-height: 150px; resize: vertical; }
.field input::placeholder, .field textarea::placeholder { color: var(--bone-soft); }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: 2px solid var(--rose-lite); outline-offset: 1px; border-color: var(--rose-lite);
}
.field--pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.4rem; }
.hint { font-size: .86rem; color: var(--bone-soft); margin-top: .5rem; }

/* --- denominations ----------------------------------------------------------- */

.denoms { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
.denom {
  position: relative;
  aspect-ratio: 1.62;
  border: 1px solid var(--verd-deep);
  background-color: var(--verd-deep);
  background-image: linear-gradient(rgba(8,14,12,.72), rgba(8,14,12,.78)),
                    url("img/texture-green.webp");
  background-size: auto, 520px;
  display: flex; flex-direction: column; justify-content: center;
  padding: 1.4rem 1rem;
  text-align: center;
  text-decoration: none;
  transition: border-color .25s ease, transform .25s ease, box-shadow .25s ease;
}
.denom::before {
  content: ""; position: absolute; inset: 9px;
  border: 1px solid rgba(194,164,159,.28);
  pointer-events: none;
}
.denom::after {
  content: ""; position: absolute; left: 50%; top: 12%;
  transform: translateX(-50%);
  width: 44%; height: 26%;
  background: url("img/wreath.webp") center/contain no-repeat;
  opacity: .22; pointer-events: none;
}
.denom:hover {
  border-color: var(--rose-lite); transform: translateY(-4px);
  box-shadow: 0 18px 40px rgba(0,0,0,.45);
}
.denom b {
  position: relative; display: block;
  font-family: var(--display); font-weight: 500;
  font-size: clamp(2rem, 3.6vw, 2.9rem); color: var(--rose);
}
.denom:hover b { color: var(--rose-lite); }
.denom span {
  position: relative; display: block; margin-top: .5rem;
  font: 400 .66rem/1 var(--caps); letter-spacing: .18em;
  text-transform: uppercase; color: var(--bone-soft);
}

/* --- filter row --------------------------------------------------------------- */

.filters { display: flex; flex-wrap: wrap; gap: .6rem; margin-bottom: clamp(2rem, 4vw, 3rem); }
.filters a {
  font: 400 .72rem/1 var(--caps); letter-spacing: .16em;
  text-transform: uppercase; text-decoration: none;
  color: var(--bone-soft);
  border: 1px solid var(--rule);
  padding: .8rem 1.15rem;
  transition: color .22s ease, border-color .22s ease, background-color .22s ease;
}
.filters a:hover { color: var(--bone); border-color: var(--verd-lite); }
.filters a[aria-current] { color: var(--ink); background: var(--verd-lite); border-color: var(--verd-lite); }

/* --- search block (the Portobello lesson: offer it twice) --------------------- */

.findbar {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1rem;
  align-items: center;
  background: var(--ink-2); border: 1px solid var(--rule);
  padding: clamp(1.2rem, 2.5vw, 1.8rem);
}
.findbar label { font: 400 .72rem/1 var(--caps); letter-spacing: .18em; text-transform: uppercase; color: var(--verd-lite); display: block; margin-bottom: .6rem; }
.findbar input {
  width: 100%; background: var(--ink-3); border: 1px solid var(--verd-deep);
  color: var(--bone); font: 400 1rem var(--body); padding: .95rem 1.05rem;
}
.findbar input::placeholder { color: var(--bone-soft); }
.findbar input:focus { outline: 2px solid var(--rose-lite); outline-offset: 1px; }

/* --- legal pages ------------------------------------------------------------
   One narrow column. Long-form text has one job, which is to be read. */

.legal { max-width: 68ch; }
.legal h2 {
  font-size: clamp(1.35rem, 2.2vw, 1.75rem);
  margin: 3rem 0 1rem;
  padding-top: 2.4rem;
  border-top: 1px solid var(--rule);
}
.legal h2:first-of-type { margin-top: 0; padding-top: 0; border-top: 0; }
.legal .notes { margin: 1.4rem 0; }
.legal__meta {
  font: 400 .72rem/1 var(--caps); letter-spacing: .18em;
  text-transform: uppercase; color: var(--verd-lite);
  margin-bottom: 2.6rem;
}


/* --- draft markers -------------------------------------------------------------
   Everything invented rather than supplied by the client is tagged, so nothing
   fictional can reach the live site unnoticed. Toggle bottom-right, or press p.
   ------------------------------------------------------------------------------ */

.draft-tag {
  display: inline-block; vertical-align: middle;
  background: var(--rose-deep); color: var(--bone);
  font: 500 .58rem/1 var(--caps); letter-spacing: .14em;
  text-transform: uppercase;
  padding: .38rem .5rem; margin-right: .45rem;
  max-width: 100%;
}
[data-draft] { outline: 1px dashed rgba(224,140,171,.45); outline-offset: 5px; }

body.draft-off .draft-tag { display: none; }
body.draft-off [data-draft] { outline: 0; }

.draft-switch {
  position: fixed; right: 1rem; bottom: 1rem; z-index: 120;
  background: var(--rose-deep); color: var(--bone);
  border: 0; padding: .7rem 1rem; cursor: pointer;
  font: 500 .66rem/1 var(--caps); letter-spacing: .14em; text-transform: uppercase;
  opacity: .85;
}
.draft-switch:hover { opacity: 1; }

/* --- reveal ---------------------------------------------------------------------- */

.reveal { opacity: 0; transform: translateY(18px); }
.reveal.is-in { opacity: 1; transform: none; transition: opacity .8s ease, transform .8s cubic-bezier(.2,.7,.2,1); }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; } }


/* --- responsive ------------------------------------------------------------------ */

@media (max-width: 1080px) {
  .footer-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .footer-brand { grid-column: 1 / -1; }
}

@media (max-width: 980px) {
  .nav { display: none; }
  .menu-toggle { display: flex; }
  .brand { margin-right: auto; margin-left: .2rem; }
  .hero__inner { grid-template-columns: 1fr; }
  .hero__body { max-width: 100%; }
  .hero__crest { justify-self: center; width: min(72%, 330px); order: -1; }
  .feature { grid-template-columns: 1fr; }
  .feature--flip .feature__media { order: 0; }
  .band__inner { grid-template-columns: 1fr; align-items: start; }
  .social { grid-template-columns: 1fr; }
  .findbar { grid-template-columns: 1fr; }
  .findbar .btn { width: 100%; }
}

@media (max-width: 900px) {
  .denoms { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

@media (max-width: 720px) {
  body { font-size: 16px; }
  .sechead { flex-direction: column; align-items: flex-start; gap: 1.2rem; }
  .denoms { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .field--pair { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .footer-bottom { flex-direction: column; gap: .5rem; }
  .btn { display: block; text-align: center; }
  .btn + .btn { margin-left: 0; margin-top: .8rem; }
  .hero__actions .btn { display: block; }
}

@media (max-width: 520px) {
  .grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
  .btn--sm { padding: .8rem 1.1rem; letter-spacing: .14em; }
  .announce { font-size: .72rem; }
}

/* ==========================================================================
   Divi
   Divi emits per-module rules at `body #page-container .et_pb_section ...`
   with !important, which nothing in a normal stylesheet can beat. Where that
   applies, the selector below matches its specificity deliberately.
   ========================================================================== */

#page-container { background: var(--ink); }
#et-main-area { overflow-x: hidden; }
#main-content { background: transparent; }

body.et_pb_pagebuilder_layout #main-content .container { padding-top: 0; width: 100%; max-width: none; }
.et_pb_row { width: 90%; max-width: var(--wide); }
.et_pb_section { background-color: transparent; padding: var(--sec) 0; }
@media (max-width: 980px) { .et_pb_section { padding: clamp(3.5rem, 8vw, 5rem) 0; } }

.et_pb_text_inner p:last-of-type { margin-bottom: 0; }
.et_pb_module { margin-bottom: 0; }

body #page-container .et_pb_section .et_pb_button,
body #page-container .et_pb_section .et_pb_button:hover {
  font-family: var(--caps) !important;
  font-size: .76rem !important;
  font-weight: 500 !important;
  letter-spacing: .18em !important;
  text-transform: uppercase !important;
  line-height: 1.2 !important;
  border-radius: 0 !important;
  border-width: 1px !important;
  padding: 1.15rem 2.2rem !important;
  transition: background-color .25s ease, color .25s ease, border-color .25s ease !important;
}
body #page-container .et_pb_section .et_pb_button:after { display: none !important; }

body #page-container .et_pb_section .et_pb_button.ab-btn-rose {
  background-color: var(--rose-deep) !important;
  border-color: var(--rose-deep) !important;
  color: var(--bone) !important;
}
body #page-container .et_pb_section .et_pb_button.ab-btn-rose:hover {
  background-color: var(--rose-lite) !important;
  border-color: var(--rose-lite) !important;
  color: var(--ink) !important;
}
body #page-container .et_pb_section .et_pb_button.ab-btn-ghost {
  background-color: rgba(0,0,0,0) !important;
  border-color: rgba(236,231,226,.32) !important;
  color: var(--bone) !important;
}
body #page-container .et_pb_section .et_pb_button.ab-btn-ghost:hover {
  background-color: var(--bone) !important;
  border-color: var(--bone) !important;
  color: var(--ink) !important;
}

/* Divi wraps every image in an inline-block that refuses to stretch. */
.ab-fill .et_pb_image_wrap, .ab-fill { display: block; width: 100%; }
.ab-fill img { width: 100% !important; }
.ab-crest .et_pb_image_wrap { display: block; }
.ab-crest img { width: 100% !important; filter: drop-shadow(0 24px 60px rgba(0,0,0,.55)); }

/* --- announcement bar (child theme, above Divi's header) ------------------- */

.ab-announce {
  background: var(--rose-deep);
  font: 400 .8rem/1.4 var(--caps);
  letter-spacing: .06em;
  color: var(--bone);
  position: relative; z-index: 100000;
}
.ab-announce__inner {
  width: 90%; max-width: var(--wide); margin: 0 auto;
  display: flex; align-items: center; gap: 1rem; padding: .7rem 0;
}
.ab-announce p { margin: 0 auto; text-align: center; }
.ab-announce a { color: var(--bone); text-underline-offset: .22em; }
.ab-announce__close {
  background: none; border: 0; color: var(--bone); opacity: .75;
  font-size: 1.4rem; line-height: 1; cursor: pointer; padding: 0 .2rem;
}
.ab-announce__close:hover { opacity: 1; }
.ab-announce[hidden] { display: none; }
@media (max-width: 520px) { .ab-announce { font-size: .72rem; } }

/* --- header (Divi Theme Builder) ------------------------------------------ */

.ab-header {
  background-color: var(--verd-deep) !important;
  background-image: linear-gradient(rgba(8,14,12,.62), rgba(8,14,12,.62)),
                    url("img/texture-green.webp") !important;
  background-size: auto, 620px !important;
  background-repeat: repeat, repeat !important;
  box-shadow: 0 10px 34px rgba(0,0,0,.35);
  padding: 0 !important;
}
.ab-header .et_pb_row { padding: 14px 0 !important; }
.ab-header .et_pb_menu .et_pb_menu__wrap { min-height: 70px; }
.ab-header .et_pb_menu__icon { font-size: 20px; margin-left: 18px; }
/* Divi only generates a dynamic CSS file for pages built with the builder, so
   on WooCommerce archives like /shop/ the Theme Builder header's own styles
   never arrive and Divi's base `left_aligned` rule wins on source order, which
   drops the nav next to the logo. These carry an extra class so the header
   lays out identically whether that file exists or not. */
.ab-header .et_pb_menu .et_pb_menu_inner_container { display: flex; align-items: center; width: 100%; }
.ab-header .et_pb_menu .et_pb_menu__logo-wrap { margin-right: auto; flex: 0 0 auto; }
.ab-header .et_pb_menu__logo img { width: clamp(142px, 14vw, 186px); }
.ab-header .et_pb_menu.et_pb_menu--style-left_aligned .et_pb_menu__wrap,
.ab-header .et_pb_menu .et_pb_menu__wrap,
/* Divi scopes Theme Builder CSS behind #et-boc. That is an ID, so no number
   of classes outranks it; this matches the scope rather than fighting it. */
.et-db #et-boc .et-l .ab-header .et_pb_menu .et_pb_menu__wrap {
  display: flex; flex: 1 1 auto;
  justify-content: flex-end; align-items: center;
}
.et-db #et-boc .et-l .ab-header .et_pb_menu .et_pb_menu__logo-wrap { margin-right: auto; flex: 0 0 auto; }
.ab-header .et-menu > li > a {
  font: 400 .78rem/1 var(--caps);
  letter-spacing: .17em; text-transform: uppercase;
  color: var(--bone) !important;
  padding-bottom: 7px;
  border-bottom: 1px solid transparent;
  transition: color .22s ease, border-color .22s ease;
}
.ab-header .et-menu > li > a::after { display: none !important; }
.ab-header .et-menu > li > a:hover,
.ab-header .et-menu > li.current-menu-item > a {
  color: var(--rose-lite) !important; opacity: 1;
  border-bottom-color: var(--rose-lite);
}
.ab-header .et_pb_menu__icon { color: var(--bone); }
.ab-header .et_pb_menu__icon:hover { color: var(--rose-lite); }
/* The menu module's background is transparent on purpose, so the header
   texture shows through. Divi reuses that same value for the mobile dropdown,
   which then renders as unreadable text floating over the page. These match
   Divi's #et-boc Theme Builder scope so they actually win. */
.ab-header .et_mobile_menu,
.et-db #et-boc .et-l .ab-header .et_pb_menu .et_mobile_menu,
.et-db #et-boc .et-l .ab-header .et_mobile_menu {
  background-color: var(--ink) !important;
  border-top: 1px solid var(--verd-deep);
  box-shadow: 0 22px 44px rgba(0,0,0,.6);
  padding: .4rem 0;
}
.ab-header .et_mobile_menu li a,
.et-db #et-boc .et-l .ab-header .et_mobile_menu li a {
  font-family: var(--display); font-size: 1.5rem; line-height: 1.2;
  color: var(--bone) !important;
  border-bottom: 1px solid var(--rule);
  padding: .62em 6%;
}
.ab-header .et_mobile_menu li:last-child > a { border-bottom: 0; }
.ab-header .et_mobile_menu li a:hover,
.ab-header .et_mobile_menu li.current-menu-item > a {
  color: var(--rose-lite) !important; opacity: 1;
}
.ab-header .et_pb_menu__search-input { color: var(--bone); font-family: var(--body); }
.ab-header .et_pb_menu__search-container { background: rgba(0,0,0,.42); }

/* --- footer (Divi Theme Builder) ------------------------------------------ */

.ab-footer { background: var(--ink-2) !important; border-top: 1px solid var(--rule); }
.ab-footer .et_pb_text_inner ul { list-style: none; margin: 0; padding: 0; }
.ab-footer li { margin-bottom: .75rem; font-size: .94rem; }
.ab-footer a { color: var(--bone); text-decoration: none; overflow-wrap: anywhere; }
.ab-footer a:hover { color: var(--rose-lite); }
.ab-footer .ab-foot-head {
  font: 400 .72rem/1 var(--caps); letter-spacing: .22em;
  text-transform: uppercase; color: var(--verd-lite); margin-bottom: 1.4rem;
}
.ab-footer-bottom {
  border-top: 1px solid var(--rule);
  font-size: .85rem; color: var(--bone-soft);
}
.ab-footer-bottom a { color: var(--bone-soft); }

/* --- WooCommerce -----------------------------------------------------------
   Divi's shop module wraps the whole card in one <a> and puts the image in a
   span.et_shop_image with its own hover overlay, so the loop is targeted
   through that rather than through stock WooCommerce markup. */

.woocommerce ul.products, .et_pb_shop ul.products {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(215px, 1fr));
  gap: clamp(1.6rem, 3vw, 2.6rem) clamp(1.2rem, 2.4vw, 2rem);
  margin: 0; padding: 0;
}
.woocommerce ul.products::before, .woocommerce ul.products::after { display: none; }
.woocommerce ul.products li.product,
.et_pb_shop ul.products li.product {
  width: 100% !important; margin: 0 !important; float: none !important;
  display: flex; flex-direction: column; text-align: left;
}
.woocommerce ul.products li.product a img,
.et_pb_shop ul.products li.product a img {
  width: 100%; aspect-ratio: 2 / 3; object-fit: cover;
  background: var(--ink);
  transition: transform 1.1s cubic-bezier(.2,.7,.2,1);
}
.woocommerce ul.products li.product:hover a img { transform: scale(1.045); }
.woocommerce ul.products li.product .woocommerce-loop-product__link {
  display: flex; flex-direction: column; height: 100%;
}
.et_shop_image { position: relative; display: block; overflow: hidden; margin-bottom: 1.1rem; }
.et_shop_image img { margin-bottom: 0 !important; }
.et_overlay {
  background: rgba(12,22,20,.55) !important;
  border: 0 !important;
  z-index: 2;
}
.et_overlay:before {
  color: var(--bone) !important;
  font-size: 28px !important;
}
.woocommerce ul.products li.product h2,
.woocommerce ul.products li.product h3,
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.et_pb_shop ul.products li.product h2,
.et_pb_shop ul.products li.product h3 {
  font-family: var(--display) !important;
  font-size: 1.16rem !important; font-weight: 500;
  color: var(--rose) !important; padding: 0 !important; margin: 0 0 .25rem !important;
}
.woocommerce ul.products li.product:hover h2 { color: var(--rose-lite) !important; }
.ab-author {
  font: 400 .74rem/1 var(--caps); letter-spacing: .16em;
  text-transform: uppercase; color: var(--bone-soft); margin: 0 0 .7rem;
}
.ab-flagwrap { position: relative; display: block; height: 0; }
.ab-flag {
  position: absolute; left: 0; bottom: 1.1rem; z-index: 3;
  background: var(--rose-deep); color: var(--bone);
  font: 500 .62rem/1 var(--caps); letter-spacing: .16em;
  text-transform: uppercase; padding: .55rem .8rem;
}
.woocommerce ul.products li.product .price,
.et_pb_shop ul.products li.product .price {
  font-family: var(--display) !important;
  font-size: 1.3rem !important; color: var(--bone) !important;
  margin: auto 0 0 !important; padding-top: .55rem; order: 5;
}
.woocommerce ul.products li.product .price del { color: var(--bone-soft); font-size: .95rem; margin-right: .45rem; }
.woocommerce ul.products li.product .price ins { text-decoration: none; }
.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product .added_to_cart {
  order: 6; align-self: flex-start; margin-top: .8rem !important;
  font: 500 .7rem/1 var(--caps) !important; letter-spacing: .18em !important;
  text-transform: uppercase !important;
  padding: .85rem 1.5rem !important; border-radius: 0 !important;
  background: transparent !important; color: var(--bone) !important;
  border: 1px solid var(--verd-deep) !important;
  transition: background-color .25s ease, color .25s ease, border-color .25s ease;
}
.woocommerce ul.products li.product .button:hover {
  background: var(--bone) !important; color: var(--ink) !important; border-color: var(--bone) !important;
}
.woocommerce span.onsale, .et_pb_shop span.onsale {
  background: var(--rose-deep) !important; color: var(--bone) !important;
  border-radius: 0 !important; font: 500 .62rem/1 var(--caps);
  letter-spacing: .16em; text-transform: uppercase; padding: .55rem .8rem !important;
  min-height: 0; min-width: 0; line-height: 1 !important; top: .8rem; right: .8rem; left: auto;
}
.woocommerce .woocommerce-result-count, .woocommerce .woocommerce-ordering { color: var(--bone-soft); }

/* single product */
.woocommerce div.product .product_title { font-family: var(--display); color: var(--rose); }
.woocommerce div.product p.price { font-family: var(--display); font-size: 2rem; color: var(--bone); }
.woocommerce div.product .woocommerce-tabs ul.tabs { border: 0; padding: 0; }
.woocommerce div.product .woocommerce-tabs ul.tabs::before { border-bottom-color: var(--rule); }
.woocommerce div.product .woocommerce-tabs ul.tabs li {
  background: transparent; border: 0; border-radius: 0;
  font: 400 .74rem/1 var(--caps); letter-spacing: .18em; text-transform: uppercase;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li a { color: var(--bone-soft); }
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a { color: var(--rose-lite); }
.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after { display: none; }

/* forms, cart, checkout */
.woocommerce table.shop_table, .woocommerce table.shop_table td,
.woocommerce table.shop_table th, .woocommerce-cart table.cart td.actions {
  border-color: var(--rule) !important; background: transparent; color: var(--bone);
}
.woocommerce .cart_totals h2, .woocommerce-checkout h3, .woocommerce-billing-fields h3 {
  font-family: var(--display); color: var(--rose);
}
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce .select2-container .select2-selection--single,
.woocommerce-page input[type="text"], .woocommerce-page input[type="email"],
.woocommerce-page input[type="tel"], .woocommerce-page input[type="password"] {
  background: var(--ink-3) !important; border: 1px solid var(--verd-deep) !important;
  color: var(--bone) !important; border-radius: 0 !important;
  font: 400 1rem/1.6 var(--body) !important; padding: .95rem 1.05rem !important;
}
.woocommerce form .form-row label, .woocommerce-checkout label {
  font: 400 .72rem/1 var(--caps); letter-spacing: .18em;
  text-transform: uppercase; color: var(--verd-lite);
}
.woocommerce #respond input#submit, .woocommerce a.button, .woocommerce button.button,
.woocommerce input.button, .woocommerce a.button.alt, .woocommerce button.button.alt,
.woocommerce input.button.alt {
  background: var(--rose-deep) !important; color: var(--bone) !important;
  border-radius: 0 !important;
  font: 500 .76rem/1 var(--caps) !important; letter-spacing: .18em !important;
  text-transform: uppercase !important; padding: 1.15rem 2.2rem !important;
  transition: background-color .25s ease, color .25s ease;
}
.woocommerce a.button:hover, .woocommerce button.button:hover,
.woocommerce input.button:hover, .woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover, .woocommerce input.button.alt:hover,
.woocommerce #respond input#submit:hover {
  background: var(--rose-lite) !important; color: var(--ink) !important;
}
.woocommerce-info, .woocommerce-message, .woocommerce-error {
  background: var(--ink-2) !important; color: var(--bone) !important;
  border-top-color: var(--rose-lite) !important;
}
.woocommerce-info::before, .woocommerce-message::before { color: var(--rose-lite) !important; }
.woocommerce-breadcrumb, .woocommerce-breadcrumb a { color: var(--bone-soft) !important; }
.woocommerce-breadcrumb a:hover { color: var(--rose-lite) !important; }

@media (max-width: 520px) {
  .woocommerce ul.products, .et_pb_shop ul.products { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
}

/* --- patterns used inside Divi text modules ---------------------------------
   The static build's classes are reused verbatim in the page content, so they
   need re-asserting against Divi's own list and link resets. */

.et_pb_text_inner ul.notes { list-style: none !important; margin: 1.4rem 0 !important; padding: 0 !important; }
.et_pb_text_inner ul.notes li {
  padding: 1.1rem 0 1.1rem 1.9rem !important;
  border-bottom: 1px solid var(--rule);
  position: relative; list-style: none !important;
}
.et_pb_text_inner ul.notes li:first-child { border-top: 1px solid var(--rule); }
.et_pb_text_inner ul.notes li::before {
  content: ""; position: absolute; left: 2px; top: 1.75rem;
  width: 6px; height: 6px; background: var(--rose); transform: rotate(45deg);
}
.et_pb_text_inner .notes strong { color: var(--rose); font-weight: 500; }

.ab-band {
  background-image: linear-gradient(rgba(12,22,20,.62), rgba(12,22,20,.78)),
                    url("img/texture-green.webp") !important;
  background-size: auto, 780px !important;
  background-repeat: repeat, repeat !important;
}
.ab-band .notes li { border-bottom-color: rgba(236,231,226,.16); }
.ab-band .notes li:first-child { border-top-color: rgba(236,231,226,.16); }
.ab-band .et_pb_column { display: flex; flex-direction: column; justify-content: center; }

.ab-pagehead { border-bottom: 1px solid var(--rule); }
.ab-pagehead .et_pb_column { display: flex; flex-direction: column; justify-content: flex-end; }

.ab-sechead { border-bottom: 1px solid var(--rule); }

/* --- the books search block ------------------------------------------------- */

.findbar-wrap {
  background: var(--ink-2); border: 1px solid var(--rule);
  padding: clamp(1.2rem, 2.5vw, 1.8rem);
}
.findbar-wrap form { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1rem; align-items: end; }
.findbar-wrap label {
  grid-column: 1 / -1;
  font: 400 .72rem/1 var(--caps); letter-spacing: .18em;
  text-transform: uppercase; color: var(--verd-lite);
}
.findbar-wrap input[type="search"] {
  width: 100%; background: var(--ink-3); border: 1px solid var(--verd-deep);
  color: var(--bone); font: 400 1rem var(--body); padding: .95rem 1.05rem;
}
.findbar-wrap input::placeholder { color: var(--bone-soft); }
.findbar-wrap button {
  background: var(--rose-deep); color: var(--bone); border: 1px solid var(--rose-deep);
  font: 500 .76rem/1 var(--caps); letter-spacing: .18em; text-transform: uppercase;
  padding: 1.15rem 2.2rem; cursor: pointer;
  transition: background-color .25s ease, color .25s ease, border-color .25s ease;
}
.findbar-wrap button:hover { background: var(--rose-lite); border-color: var(--rose-lite); color: var(--ink); }
@media (max-width: 720px) {
  .findbar-wrap form { grid-template-columns: 1fr; }
  .findbar-wrap button { width: 100%; }
}

/* --- WooCommerce loop chrome ------------------------------------------------- */

.woocommerce .woocommerce-result-count {
  font: 400 .72rem/1 var(--caps); letter-spacing: .18em;
  text-transform: uppercase; color: var(--bone-soft); margin-bottom: 2rem;
}
.woocommerce .woocommerce-ordering select, .woocommerce select.orderby {
  background: var(--ink-3); border: 1px solid var(--verd-deep); color: var(--bone);
  font: 400 .85rem var(--body); padding: .7rem .9rem; border-radius: 0;
}
.woocommerce .woocommerce-ordering { margin-bottom: 2rem; }

/* --- gift cards -------------------------------------------------------------
   Denominations are products, but they are landscape cards rather than book
   covers, so this one category gets its own crop and no flag. */

.ab-denoms ul.products { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
.ab-denoms li.product .ab-flagwrap { display: none !important; }
.ab-denoms li.product a img {
  aspect-ratio: 1.6 !important;
  object-fit: cover;
  border: 1px solid var(--verd-deep);
  transition: border-color .25s ease, transform .25s ease, box-shadow .25s ease;
}
.ab-denoms li.product:hover a img {
  transform: none;
  border-color: var(--rose-lite);
  box-shadow: 0 18px 40px rgba(0,0,0,.45);
}
.ab-denoms li.product h2 { font-size: 1.05rem !important; }
@media (max-width: 900px) { .ab-denoms ul.products { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } }

/* --- social tiles, reused from the static build ------------------------------ */

.et_pb_text_inner a.social__tile { color: inherit; }
.et_pb_text_inner a.social__tile h3 { color: var(--rose); }
.et_pb_text_inner a.social__tile:hover h3 { color: var(--rose-lite); }

/* --- shared ------------------------------------------------------------------ */

.et_pb_text_inner .tlink { color: var(--verd-lite); }
.et_pb_text_inner .tlink:hover { color: var(--rose-lite); border-color: var(--rose-lite); }
.et_pb_text_inner hr.rule { border: 0; }
.et_pb_button_module_wrapper { display: inline-block !important; vertical-align: top; }
.et_pb_button_module_wrapper + .et_pb_button_module_wrapper { margin-left: .9rem; }
@media (max-width: 720px) {
  .et_pb_button_module_wrapper { display: block !important; }
  .et_pb_button_module_wrapper + .et_pb_button_module_wrapper { margin-left: 0; margin-top: .8rem; }
}


/* --- accessibility corrections to Divi and WooCommerce defaults --------------- */

/* Links in running text must not be distinguished by colour alone (WCAG 1.4.1). */
.et_pb_text_inner p a,
.et_pb_text_inner li a,
.woocommerce-info a, .woocommerce-message a {
  text-decoration: underline; text-underline-offset: .18em;
}
.et_pb_text_inner a.social__tile, .et_pb_text_inner a.tlink,
.et_pb_text_inner a.et_pb_button { text-decoration: none; }

/* WooCommerce's sort control sits outside .woocommerce on the Divi module. */
select.orderby, .woocommerce-ordering select {
  background: var(--ink-3) !important; border: 1px solid var(--verd-deep) !important;
  color: var(--bone) !important; border-radius: 0 !important;
  font: 400 .85rem var(--body) !important; padding: .7rem .9rem !important;
}
select.orderby option { background: var(--ink-3); color: var(--bone); }

/* WooCommerce's quantity box keeps the browser default light styling, which
   is unreadable text on this palette. */
.woocommerce .quantity input.qty,
.woocommerce div.product form.cart .quantity input.qty {
  background: var(--ink-3) !important;
  border: 1px solid var(--verd-deep) !important;
  color: var(--bone) !important;
  border-radius: 0 !important;
  font: 400 1rem var(--body) !important;
  padding: .8rem .6rem !important;
  height: auto !important;
}

/* The SKU and category meta under a product inherit Divi's muted grey. */
.woocommerce div.product .product_meta,
.woocommerce div.product .product_meta a,
.woocommerce div.product .product_meta .sku { color: var(--bone-soft) !important; }
.woocommerce div.product .product_meta a:hover { color: var(--rose-lite) !important; }
.woocommerce div.product .woocommerce-product-details__short-description { color: var(--bone); }

/* WooCommerce product tabs keep a white panel and a light active tab under
   Divi; both are unreadable on this palette. */
.woocommerce div.product .woocommerce-tabs ul.tabs li,
.woocommerce div.product .woocommerce-tabs ul.tabs li.active {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 1.6rem .9rem 0 !important;
}
.woocommerce div.product .woocommerce-tabs .panel {
  background: transparent !important;
  border: 0 !important;
  padding: 2rem 0 0 !important;
  color: var(--bone);
}
.woocommerce div.product .woocommerce-tabs { border-top: 1px solid var(--rule); padding-top: 2.4rem; margin-top: 3rem; }
.woocommerce div.product .woocommerce-tabs .panel h2 { font-family: var(--display); color: var(--rose); }
.woocommerce div.product .woocommerce-tabs ul.tabs { margin-bottom: 0 !important; }
.woocommerce div.product div.images .woocommerce-product-gallery__trigger { background: var(--ink-2); color: var(--bone); }
.woocommerce div.product .stock { color: var(--verd-lite) !important; }
.woocommerce .related > h2, .woocommerce .up-sells > h2, .woocommerce .cross-sells > h2 {
  font-family: var(--display); color: var(--rose); font-size: clamp(1.6rem, 3vw, 2.2rem);
  margin-bottom: 2rem;
}

/* WooCommerce pages are full width; Divi's default reserves a sidebar column. */
.woocommerce-page #main-content .container::before,
.woocommerce.et_right_sidebar #main-content .container::before,
.woocommerce.et_left_sidebar #main-content .container::before { display: none !important; }
.woocommerce-page #left-area, .woocommerce.et_right_sidebar #left-area { width: 100% !important; padding-right: 0 !important; }
.woocommerce-page #sidebar, .woocommerce.et_right_sidebar #sidebar { display: none !important; }

/* Underlining every link is right in running text and wrong in the footer,
   where every item is a link and the column becomes a wall of lines. */
.ab-footer .et_pb_text_inner li a,
.ab-footer .et_pb_text_inner p a { text-decoration: none; }
.ab-footer .et_pb_text_inner li a:hover { text-decoration: underline; text-underline-offset: .18em; }


/* --- social tiles ------------------------------------------------------------
   Built from inline elements only: wpautop injects paragraph breaks around any
   block-level tag inside a Divi text module, which closes the anchor early and
   splits the tile into two bordered boxes. */

.et_pb_column .et_pb_module:has(> .et_pb_text_inner > a.social__tile),
.et_pb_text_inner:has(> a.social__tile) { height: 100%; }
.et_pb_text_inner a.social__tile {
  position: relative; display: block; height: 100%; text-decoration: none;
  border: 1px solid var(--rule); background: var(--ink-2);
  padding: clamp(1.6rem, 3vw, 2.4rem);
  min-height: 240px; overflow: hidden;
  transition: border-color .25s ease, background-color .25s ease;
}
.et_pb_text_inner a.social__tile::before {
  content: ""; position: absolute; right: -34%; bottom: -46%;
  width: 74%; aspect-ratio: 1;
  background: url("img/wreath.webp") center/contain no-repeat;
  opacity: .1;
  transition: opacity .4s ease, transform .6s cubic-bezier(.2,.7,.2,1);
}
.et_pb_text_inner a.social__tile:hover { border-color: var(--rose-lite); background: var(--ink-3); }
.et_pb_text_inner a.social__tile:hover::before { opacity: .18; transform: rotate(9deg) scale(1.06); }
.social__tile > span { position: relative; display: block; }
.social__tile .st-kind {
  font: 400 .72rem/1 var(--caps); letter-spacing: .22em;
  text-transform: uppercase; color: var(--verd-lite);
}
.social__tile .st-handle {
  font-family: var(--display); font-size: 1.5rem; line-height: 1.25;
  color: var(--rose); margin: 1.2rem 0 .5rem;
}
.social__tile:hover .st-handle { color: var(--rose-lite); }
.social__tile .st-blurb { color: var(--bone-soft); font-size: .93rem; line-height: 1.6; }
.social__tile .st-cta {
  margin-top: 1.6rem;
  font: 500 .72rem/1 var(--caps); letter-spacing: .18em;
  text-transform: uppercase; color: var(--bone);
}
.social__tile:hover .st-cta { color: var(--rose-lite); }

/* Two-column feature rows centre their columns against each other; otherwise a
   short image column leaves a block of dead space beside a taller text one. */
.et_pb_row.ab-feature > .et_pb_column { display: flex; flex-direction: column; justify-content: center; }
@media (max-width: 980px) { .et_pb_row.ab-feature > .et_pb_column { display: block; } }


/* --- outstanding content ------------------------------------------------------
   Anything the client still has to supply is marked with this rather than
   guessed at. It is deliberately ugly: it should never survive to launch. */

.need {
  display: inline-block;
  background: var(--rose-deep); color: var(--bone);
  font: 500 .62rem/1 var(--caps); letter-spacing: .14em;
  text-transform: uppercase; padding: .38rem .5rem;
  vertical-align: middle;
}

/* --- single product ----------------------------------------------------------
   Divi styles the tabs at `body.woocommerce div.product ...` with hard-coded
   greys (#f4f4f4, #d9d9d9). Nothing below that specificity can touch them, so
   these match it deliberately rather than reaching for !important. */

body.woocommerce .woocommerce-tabs,
body.woocommerce-page .woocommerce-tabs {
  border: 0;
  border-top: 1px solid var(--rule);
  margin: 3.5rem 0 0;
  padding-top: 2.4rem;
}
body.woocommerce div.product .woocommerce-tabs ul.tabs,
body.woocommerce #content-area div.product .woocommerce-tabs ul.tabs,
body.woocommerce-page div.product .woocommerce-tabs ul.tabs {
  background: transparent;
  padding: 0 !important;
  margin: 0 0 .5rem !important;
}
body.woocommerce div.product .woocommerce-tabs ul.tabs li,
body.woocommerce #content-area div.product .woocommerce-tabs ul.tabs li,
body.woocommerce div.product .woocommerce-tabs ul.tabs li.active,
body.woocommerce #content-area div.product .woocommerce-tabs ul.tabs li.active,
body.woocommerce-page div.product .woocommerce-tabs ul.tabs li {
  background: transparent;
  border: 0;
  border-right: 0;
  padding: 0 1.8rem 0 0;
  margin: 0;
}
body.woocommerce div.product .woocommerce-tabs ul.tabs li a,
body.woocommerce-page div.product .woocommerce-tabs ul.tabs li a {
  font: 400 .74rem/1 var(--caps);
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--bone-soft); padding: 0;
}
body.woocommerce div.product .woocommerce-tabs ul.tabs li.active a { color: var(--rose-lite); }
body.woocommerce div.product .woocommerce-tabs ul.tabs:before,
body.woocommerce-page div.product .woocommerce-tabs ul.tabs:before,
body.woocommerce #content div.product .woocommerce-tabs ul.tabs:before { border-bottom: 0; }
body.woocommerce div.product .woocommerce-tabs .panel,
body.woocommerce-page div.product .woocommerce-tabs .panel {
  background: transparent; border: 0; padding: 1.6rem 0 0; max-width: 68ch;
}
/* The panel repeats the tab name as an h2; the tab already says it. */
body.woocommerce div.product .woocommerce-tabs .panel > h2:first-child { display: none; }

/* A book cover at half the page width is bigger than the book. */
.woocommerce div.product div.images { max-width: 420px; }
.woocommerce div.product div.images img { width: 100%; }

/* WooCommerce's own sheet paints the active tab white on top of Divi's grey. */
body.woocommerce div.product .woocommerce-tabs ul.tabs li,
body.woocommerce div.product .woocommerce-tabs ul.tabs li.active,
body.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
body.woocommerce div.product .woocommerce-tabs ul.tabs li::after,
body.woocommerce-page div.product .woocommerce-tabs ul.tabs li,
body.woocommerce-page div.product .woocommerce-tabs ul.tabs li.active {
  background: none !important;
  background-color: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  content: none !important;
}
body.woocommerce div.product .woocommerce-tabs ul.tabs li a { background: transparent !important; }

/* Divi paints the active tab with
   `body.woocommerce #content-area div.product ... li.active { background:#fff !important }`.
   That carries an ID, so no number of classes outranks it; these selectors
   match it and add one element to win. */
html body.woocommerce #content-area div.product .woocommerce-tabs ul.tabs li,
html body.woocommerce #content-area div.product .woocommerce-tabs ul.tabs li.active,
html body.woocommerce-page #content-area div.product .woocommerce-tabs ul.tabs li,
html body.woocommerce-page #content-area div.product .woocommerce-tabs ul.tabs li.active {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
html body.woocommerce #content-area div.product .woocommerce-tabs { border: 0 !important; }
html body.woocommerce #content-area div.product .woocommerce-tabs ul.tabs li a,
html body.woocommerce-page #content-area div.product .woocommerce-tabs ul.tabs li a {
  color: var(--bone-soft) !important;
  font: 400 .74rem/1 var(--caps) !important;
  letter-spacing: .2em !important;
  text-transform: uppercase !important;
}
html body.woocommerce #content-area div.product .woocommerce-tabs ul.tabs li.active a {
  color: var(--rose-lite) !important;
}

.ab-header .et_pb_menu__logo-link { display: block; line-height: 0; }
.ab-header .et_pb_menu__logo-link:focus-visible { outline: 2px solid var(--rose-lite); outline-offset: 4px; }


/* --- search results ---------------------------------------------------------- */

.ab-search { padding: clamp(2.5rem, 5vw, 4rem) 0 clamp(4rem, 8vw, 7rem); }
.ab-search__wrap { width: 90%; max-width: var(--wide); margin: 0 auto; }
.ab-search__head { margin-bottom: clamp(2rem, 4vw, 3.4rem); }
.ab-search__head h1 {
  font-family: var(--display); font-weight: 500; color: var(--rose);
  font-size: clamp(2.25rem, 5vw, 3.75rem); line-height: 1.08;
  margin: 0 0 1.8rem;
}
.ab-search .ab-eyebrow {
  font: 400 .72rem/1 var(--caps); letter-spacing: .24em;
  text-transform: uppercase; color: var(--verd-lite); margin: 0 0 1.1rem;
}
.ab-search__label {
  font: 400 .72rem/1 var(--caps); letter-spacing: .22em;
  text-transform: uppercase; color: var(--verd-lite);
  border-bottom: 1px solid var(--rule); padding-bottom: 1.1rem;
  margin: clamp(2.5rem, 5vw, 3.6rem) 0 clamp(1.6rem, 3vw, 2.4rem);
}
.ab-search__none { color: var(--bone-soft); max-width: 52ch; }
.ab-search__list { list-style: none; margin: 0; padding: 0; max-width: 68ch; }
.ab-search__list li {
  padding: 1.3rem 0; border-bottom: 1px solid var(--rule);
}
.ab-search__list a {
  display: block; font-family: var(--display); font-size: 1.35rem;
  color: var(--rose); text-decoration: none;
}
.ab-search__list a:hover { color: var(--rose-lite); }
.ab-search__list span { display: block; color: var(--bone-soft); font-size: .92rem; margin-top: .35rem; }
.ab-search .navigation.pagination { margin-top: 3rem; }
.ab-search .nav-links { display: flex; gap: .6rem; flex-wrap: wrap; }
.ab-search .page-numbers {
  display: inline-block; padding: .7rem 1rem;
  border: 1px solid var(--rule); color: var(--bone-soft);
  font: 400 .78rem/1 var(--caps); letter-spacing: .1em; text-decoration: none;
}
.ab-search .page-numbers:hover { color: var(--bone); border-color: var(--verd-lite); }
.ab-search .page-numbers.current { color: var(--ink); background: var(--verd-lite); border-color: var(--verd-lite); }


/* --- cookie consent ----------------------------------------------------------
   Hidden by default, shown only when the inline head script has confirmed no
   choice is recorded, so a cached page cannot flash it at someone who has
   already answered. */

.ab-cookies { display: none; }
.ab-consent-ask .ab-cookies:not([hidden]) { display: block; }
.ab-cookies {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 100002;
  background: var(--ink-2);
  border-top: 1px solid var(--verd-deep);
  box-shadow: 0 -18px 50px rgba(0,0,0,.55);
}
.ab-cookies__inner {
  width: 90%; max-width: var(--wide); margin: 0 auto;
  display: flex; align-items: center; gap: clamp(1.5rem, 4vw, 3.5rem);
  padding: clamp(1.3rem, 2.5vw, 1.9rem) 0;
}
.ab-cookies__text { flex: 1; min-width: 0; }
.ab-cookies h2 {
  font: 400 .72rem/1 var(--caps); letter-spacing: .22em;
  text-transform: uppercase; color: var(--verd-lite);
  margin: 0 0 .7rem;
}
.ab-cookies p {
  margin: 0; color: var(--bone); font-size: .93rem; line-height: 1.65; max-width: 76ch;
}
.ab-cookies a { color: var(--rose-lite); text-decoration: underline; text-underline-offset: .18em; }
.ab-cookies a:hover { color: var(--verd-lite); }
.ab-cookies__actions { display: flex; gap: .7rem; flex: 0 0 auto; }
.ab-cookies__btn {
  font: 500 .72rem/1 var(--caps); letter-spacing: .18em; text-transform: uppercase;
  padding: 1rem 1.6rem; cursor: pointer; white-space: nowrap;
  background: transparent; color: var(--bone);
  border: 1px solid var(--verd-deep);
  transition: background-color .25s ease, color .25s ease, border-color .25s ease;
}
.ab-cookies__btn:hover { background: var(--bone); color: var(--ink); border-color: var(--bone); }
.ab-cookies__btn--solid {
  background: var(--rose-deep); border-color: var(--rose-deep); color: var(--bone);
}
.ab-cookies__btn--solid:hover { background: var(--rose-lite); border-color: var(--rose-lite); color: var(--ink); }
.ab-cookies__reopen {
  background: none; border: 0; padding: 0; cursor: pointer;
  color: var(--bone); font: 400 .94rem var(--body); text-align: left;
}
.ab-cookies__reopen:hover { color: var(--rose-lite); text-decoration: underline; text-underline-offset: .18em; }

@media (max-width: 900px) {
  .ab-cookies__inner { flex-direction: column; align-items: flex-start; gap: 1.2rem; }
  .ab-cookies__actions { width: 100%; }
  .ab-cookies__btn { flex: 1; padding: 1rem .8rem; }
}