/* ====== GLOBAL ====== */
:root {
  --dd-font: "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --dd-text: #111;
  --dd-muted: #666;
  --dd-border: #e7e7e7;
  --dd-card: #f9f9f9;
  --dd-maxw: 1200px;
}

:root{
  --ico-dot: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><circle cx='12' cy='12' r='10' fill='black'/></svg>");
  --ico-diamond: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 2L22 12L12 22L2 12Z' fill='black'/></svg>");
  --ico-triangle: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 3L22 20H2Z' fill='black'/></svg>");

  /* TWO-TIER CAKE with scalloped icing on the bottom tier + candle */
  --ico-cake: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='black'>\
  <path stroke-linecap='round' stroke-linejoin='round' d='M12 8.25v-1.5m0 1.5c-1.355 0-2.697.056-4.024.166C6.845 8.51 6 9.473 6 10.608v2.513m6-4.871c1.355 0 2.697.056 4.024.166C17.155 8.51 18 9.473 18 10.608v2.513M15 8.25v-1.5m-6 1.5v-1.5m12 9.75-1.5.75a3.354 3.354 0 0 1-3 0 3.354 3.354 0 0 0-3 0 3.354 3.354 0 0 1-3 0 3.354 3.354 0 0 0-3 0 3.354 3.354 0 0 1-3 0L3 16.5m15-3.379a48.474 48.474 0 0 0-6-.371c-2.032 0-4.034.126-6 .371m12 0c.39.049.777.102 1.163.16 1.07.16 1.837 1.094 1.837 2.175v5.169c0 .621-.504 1.125-1.125 1.125H4.125A1.125 1.125 0 0 1 3 20.625v-5.17c0-1.08.768-2.014 1.837-2.174A47.78 47.78 0 0 1 6 13.12M12.265 3.11a.375.375 0 1 1-.53 0L12 2.845l.265.265Zm-3 0a.375.375 0 1 1-.53 0L9 2.845l.265.265Zm6 0a.375.375 0 1 1-.53 0L15 2.845l.265.265Z'/>\
</svg>");


  --ico-whisk: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='black'>\
  <path stroke-linecap='round' stroke-linejoin='round' d='M9.53 16.122a3 3 0 0 0-5.78 1.128 2.25 2.25 0 0 1-2.4 2.245 4.5 4.5 0 0 0 8.4-2.245c0-.399-.078-.78-.22-1.128Zm0 0a15.998 15.998 0 0 0 3.388-1.62m-5.043-.025a15.994 15.994 0 0 1 1.622-3.395m3.42 3.42a15.995 15.995 0 0 0 4.764-4.648l3.876-5.814a1.151 1.151 0 0 0-1.597-1.597L14.146 6.32a15.996 15.996 0 0 0-4.649 4.763m3.42 3.42a6.776 6.776 0 0 0-3.42-3.42'/>\
</svg>");

  /* SPRINKLES: exactly three rounded sticks - TL, TR, bottom-center */
  --ico-sprinkles: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='black'>\
  <path stroke-linecap='round' stroke-linejoin='round' d='M9.813 15.904 9 18.75l-.813-2.846a4.5 4.5 0 0 0-3.09-3.09L2.25 12l2.846-.813a4.5 4.5 0 0 0 3.09-3.09L9 5.25l.813 2.846a4.5 4.5 0 0 0 3.09 3.09L15.75 12l-2.846.813a4.5 4.5 0 0 0-3.09 3.09ZM18.259 8.715 18 9.75l-.259-1.035a3.375 3.375 0 0 0-2.455-2.456L14.25 6l1.036-.259a3.375 3.375 0 0 0 2.455-2.456L18 2.25l.259 1.035a3.375 3.375 0 0 0 2.456 2.456L21.75 6l-1.035.259a3.375 3.375 0 0 0-2.456 2.456ZM16.894 20.567 16.5 21.75l-.394-1.183a2.25 2.25 0 0 0-1.423-1.423L13.5 18.75l1.183-.394a2.25 2.25 0 0 0 1.423-1.423l.394-1.183.394 1.183a2.25 2.25 0 0 0 1.423 1.423l1.183.394-1.183.394a2.25 2.25 0 0 0-1.423 1.423Z'/>\
</svg>");
}


body {
  font-family: var(--dd-font);
  color: var(--dd-text);
  margin: 0;
  line-height: 1.6;
}

::selection {
    background: #BCA76A;
    color: #111;
}

h1, h2, h3 {
  font-weight: 700;
  color: var(--dd-text);
  margin-top: 0;
}

p { color: var(--dd-muted); margin: 0.5em 0; }



.container {
  max-width: var(--dd-maxw);
  margin: 0 auto;
  padding: 0 1.5rem;
}

/* ====== HEADER ====== */
.dd-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: #fff;
  border-bottom: 1px solid var(--dd-border);
  height: 64px;
  display: flex;
  align-items: center;
}

.dd-header__inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.dd-brand {
  font-weight: 700;
  text-decoration: none;
  font-size: 1rem;
}

.dd-nav {
  display: flex;
  gap: 1rem;
}

.dd-nav a {
  text-decoration: none;
  color: var(--dd-text);
  font-weight: 500;
}

.dd-nav a:hover {
  text-decoration: underline;
  color: #BCA76A;
}

/* ====== HERO ====== */

/* Full-viewport, edge-to-edge */
.dd-hero.dd-hero--cover {
  position: relative;
  min-height: 100vh;                /* fill the viewport */
  width: 100vw;
  margin-left: calc(50% - 50vw); /* cancel out page margins */
  margin-right: calc(50% - 50vw);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-bottom: 1px solid var(--dd-border);
}

.dd-hero__inner {
  will-change: transform;
  backface-visibility: hidden;
  transform: translate3d(0,0,0);
  
}

/* Remove max-width restrictions for hero inner container */
.dd-hero__inner.container {
  max-width: none;
  width: 100%;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

/* Content sits above overlays */
.dd-hero--cover .dd-hero__inner { position: relative; z-index: 2; }

.dd-hero--cover {
  --hero-bleed: 20vh;
  position: relative;
  overflow: hidden;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  contain: paint; /* extra safety */
}

/* Background photo (underlay) — uses CSS var set inline in the block */
.dd-hero--cover::before {
  content: "";
  position: absolute;
  left: 0; right: 0;
  top: calc(-0.5 * var(--hero-bleed));
  height: calc(100% + var(--hero-bleed));
  background-image: var(--dd-hero-image);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  will-change: transform;
  backface-visibility: hidden;
  transform: translate3d(0,0,0); /* kick to GPU */
}

@supports (animation-timeline: view()) {
  .dd-hero--cover::before {
    animation-name: dd-parallax-bg-lite;
    animation-timeline: --hero;
    animation-range: cover 0% cover 80%;
    animation-fill-mode: both;
  }
  .dd-hero__inner {
    animation-name: dd-parallax-title-lite;
    animation-timeline: --hero;
    animation-range: cover 0% cover 80%;
    animation-fill-mode: both;
  }
  @keyframes dd-parallax-bg-lite {
    from { transform: translate3d(0, 0, 0);   }
    to   { transform: translate3d(0, -60px, 0); }
  }
  @keyframes dd-parallax-title-lite {
    from { transform: translate3d(0, 0, 0); }
    to   { transform: translate3d(0, 24px, 0); } 
  }
}

.dd-hero--parallax::before { transform: translate3d(0, calc(var(--dd-parallax, 0) * -12vh), 0); }
.dd-hero--parallax::after  { transform: translate3d(0, calc(var(--dd-parallax, 0) *  -4vh), 0); }
.dd-hero--parallax .dd-hero__inner { transform: translate3d(0, calc(var(--dd-parallax, 0) *  4vh), 0); }

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .dd-hero--parallax::before,
  .dd-hero--parallax::after { transform: none; }
}


/* Bottom → top frosted/blurred gradient over the hero image */
.dd-hero--cover::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  /* cover only the lower portion to reduce cost */
  height: 65%;
  pointer-events: none;
  z-index: 1;

  /* lighter/cheaper blur and slight saturation */
  backdrop-filter: blur(6px) saturate(1.02);
  -webkit-backdrop-filter: blur(6px) saturate(1.02);

  /* fade out the overlay upward */
  mask-image: linear-gradient(to top, rgba(0,0,0,.65), rgba(0,0,0,0) 65%);
  -webkit-mask-image: linear-gradient(to top, rgba(0,0,0,.65), rgba(0,0,0,0) 65%);
}


/* ====== HERO PLATE ====== */
.dd-hero__plate{
  position: relative;
  overflow: hidden;
  width: clamp(340px, 46vw, 560px);
  aspect-ratio: 1/1;
  border-radius: 50%;
  background: rgba(255,255,255,1);              
  padding: clamp(1.6rem, 3vw, 2.6rem);
  display:flex; align-items:center; justify-content:center; flex-direction:column;
  gap: clamp(.7rem, 1.2vw, 1rem);
  box-shadow:
    inset 0 0 0 1px rgba(0,0,0,0.05),               /* hairline rim */
    inset 0 18px 36px rgba(255,255,255,.65),        /* inner highlight */
    inset 0 -10px 18px rgba(0,0,0,.05),             /* inner well */
    0 28px 60px rgba(0,0,0,.20);                    /* stronger drop */
}

/* soft dish well & rim effect */
.dd-hero__plate::before{
  content:"";
  position:absolute; inset:10%; border-radius:50%;
  box-shadow: inset 0 2px 8px rgba(0,0,0,.05), inset 0 -2px 6px rgba(0,0,0,.04);
  background:
    radial-gradient(55% 55% at 50% 54%, rgba(0,0,0,.03), transparent 60%),
    transparent;
  pointer-events:none;
}

.dd-hero__focus {
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    radial-gradient(40% 40% at 50% 50%, rgba(255,255,255,.45), transparent 70%),
    linear-gradient(to bottom, rgba(255,255,255,0) 40%, rgba(255,255,255,.25) 100%);
}


/* drop shadow under plate */
.dd-hero__plate::after {
  content: "";
  position: absolute;
  left: 8%;
  right: 8%;
  bottom: -25px;
  height: 40px;
  background: radial-gradient(50% 100% at 50% 0,
              rgba(0,0,0,.25), rgba(0,0,0,0));
  filter: blur(10px);
  z-index: -1;
  pointer-events: none;
}

/* ensure text/buttons appear above */
.dd-hero__plate > * {
  position: relative;
  z-index: 1;
}


/* optional faint inner highlight band (gives a porcelain feel) */
.dd-hero__plate-rim {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  pointer-events: none;
  opacity: .75;

  /* ring thickness */
  --rim: 20px;

  /* draw only the rim band */
  -webkit-mask: radial-gradient(closest-side,
                  transparent calc(100% - var(--rim)),
                  #000       calc(100% - var(--rim)) );
          mask: radial-gradient(closest-side,
                  transparent calc(100% - var(--rim)),
                  #000       calc(100% - var(--rim)) );

  /* subtle porcelain highlight + faint shadow inside the ring */
  background:
    radial-gradient(120% 90% at 50% 18%,
      rgba(255,255,255,.85),
      rgba(255,255,255,0) 60%),
    radial-gradient(closest-side,
      rgba(0,0,0,.07),
      rgba(0,0,0,0) 70%);
}

/* Keep the plate sitting higher */
.dd-hero__inner{ display:grid; place-items:center; padding-inline: 1.25rem; }
.dd-hero.dd-hero--cover{ align-items:flex-start; }
.dd-hero.dd-hero--cover .dd-hero__inner{ margin-top:clamp(9vh, 14vh, 18vh); }

.dd-hero--cover { position:relative; }
.dd-hero--cover .dd-hero__focus { z-index:1; }
.dd-hero--cover .dd-hero__inner { position:relative; z-index:2; }

/* title sizing works well with the plate */
.dd-hero__title{
  font-family:"Fraunces", serif;
  font-weight:700;
  letter-spacing:.2px;
  text-wrap: balance;                 /* nicer automatic line breaks */
  font-size: clamp(2.4rem, 6.0vmin, 4.8rem);
  line-height: 1.03;
  margin: 0 .25rem .75rem;
  text-align:center;
  color:#111;
}

/* Buttons (keeps your gold scheme) */
.dd-btn .wp-block-button__link,
.wp-block-button .wp-block-button__link {
  display: inline-block;
  font-weight: 600;
  text-decoration: none;
  border-radius: 999px;
  padding: 0.6rem 1.25rem;
  font-size: 0.95rem;
  line-height: 1.2;
  transition: transform .15s ease, background-color .15s ease, color .15s ease, border-color .15s ease;
  border: 1px solid #111;
}

.dd-btn--primary .wp-block-button__link {
  background-color: #BCA76A;
  border-color: #BCA76A;
  color: #111;
}
.dd-btn--primary .wp-block-button__link:hover {
  background-color: #FFFAF3;
  color: #8C7A40;
  transform: translateY(-3px);
}

.dd-btn--ghost .wp-block-button__link {
  background-color: #FFFAF3;
  color: #111;
  border-color: #BCA76A;
}
.dd-btn--ghost .wp-block-button__link:hover {
  transform: translateY(-3px);
  color: #8C7A40;
}

/* Gold filled (primary) */
.dd-btn--gold .wp-block-button__link {
  transition: background-color .25s ease;
  background-color: #BCA76A38;
  border-color: #BCA76A;
  color: #111;
}
.dd-btn--gold .wp-block-button__link:hover {
  transition: background-color .25s ease;
  background-color: #e8d9a4;
  border-color: #e8d9a4;
  transform: translateY(-2px);
}

/* Outline (secondary) */
.dd-btn--outline .wp-block-button__link {
    transition: background-color .25s ease;
  background: transparent;
  color: #111;
  border-color: #BCA76A;
}
.dd-btn--outline .wp-block-button__link:hover {
    transition: background-color .25s ease;
  background: #fff7e0;
  transform: translateY(-2px);
}

/* Spacing for the row on the plate */
.dd-hero__ctas {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
}

.dd-hero__ctas .wp-block-button__link {
  font-size: clamp(.9rem, 1.6vmin, 1.05rem);
  padding: calc(.6rem + .2vmin) calc(1.1rem + .4vmin);
}

/* Small-screen adjustment so header overlap feels right */
@media (max-width: 680px) {
  .dd-hero.dd-hero--cover { min-height: 85vh; }
}

/* On very wide/aspect-ratio screens, give it a bit more presence */
@media (min-aspect-ratio: 16/9){
  .dd-hero__plate{ width: clamp(360px, 50vmin, 640px); }
}


/* ====== SECTIONS ====== */
.dd-intro {
  max-width: 900px;
  margin: 0 auto;
}

/* make the intro a layering context */
.dd-intro { position: relative; z-index: 0; }

/* keep the content above the swirl */
.dd-intro > * { position: relative; z-index: 1; }

/* decorative icing swirls behind */
.dd-intro::before {
  content: "";
  position: absolute;
  inset: -30px 0 -20px 0;                  /* extend a bit beyond */
  pointer-events: none;
  z-index: 0;

  /* SVG icing strokes (thin, round, low-opacity) */
  background-image:url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 420' fill='none'>\
  <g stroke='%23bca76a' stroke-linecap='round' stroke-linejoin='round'>\
    <path stroke-width='5' stroke-opacity='.10' d='M-40 160 C 80 100, 160 240, 280 180 S 520 90, 640 180 S 880 260, 1000 170 S 1240 110, 1680 180'/>\
    <path stroke-width='3' stroke-opacity='.08' d='M0 220 C 120 160, 260 270, 380 210 S 620 120, 760 190 S 1040 260, 1600 200'/>\
  </g>\
</svg>");
  background-repeat:no-repeat;
  background-position: center 50%;
  background-size: min(1200px, 90vw) auto; /* responsive scale */
  opacity: 1;                               /* overall strength */
  filter: blur(0.2px);                      /* soften edges slightly */
}


.dd-section {
  padding: 5rem 1rem;
  text-align: left;
}

.dd-h2 {
  font-family: "Fraunces", serif;
  font-size: 2rem;
  font-weight: 800;
  margin-bottom: 1rem;
}

.dd-h2 span {
  display: inline-block;
}

.dd-h2__black { color: #111; }
.dd-h2__gold { color: #bca76a; }
.dd-h2__dark_gold { color: #8C7A40; }

.dd-h2 span + span { margin-left: 0.4ch; }

.dd-lead-container {
  width: 100%;
  max-width: var(--dd-maxw);
  margin: 0 auto 2rem;
}

.dd-lead {
  color: #262626;
  line-height: 1.7;
  font-size: 1rem;
  max-width: 800px;
  margin: 0 auto;
}

.dd-lead span {
  font-weight: 500;
}

.dd-lead .dd-gold { color: #bca76a; }
.dd-lead .dd-berry { color: #8a2b1d; }
.dd-lead .dd-black { color: #111; }

.dd-sub {
  font-weight: 500;
  margin-top: -0.5rem;
  color: var(--dd-text);
}

/* ====== GRID ====== */
/* Dashed divider above High-end Desserts */
.dd-section.dd-highend {
  border-top: 1px dashed var(--dd-border);
  padding-top: 3rem;       /* space above cards */
  margin-top: 3rem;        /* space below previous section */
  text-align: center;      /* keep the heading centered */
}

.dd-section.dd-highend::before{
  content:"";
  position:absolute; inset: 0 0 -30px 0;  /* faint spill below */
  pointer-events:none; z-index:0;
  background-size: min(1150px, 88vw) auto;
  filter: blur(.2px);
}

.dd-section.dd-highend {
  position: relative;
  isolation: isolate;               /* ensures backdrop effects don’t bleed */
}


.dd-section.dd-highend .dd-h2,
.dd-section.dd-highend .dd-sub {
  margin-left: auto;
  margin-right: auto;
}


.dd-grid { margin-top: 2rem; }



.dd-card {
  padding: 1.75rem 1.5rem;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(6px) saturate(1.1);
  border: 1px solid rgba(188, 167, 106, 0.25); /* your gold tone */
  box-shadow:
    0 4px 20px rgba(0, 0, 0, 0.06),
    inset 0 0 0 1px rgba(255, 255, 255, 0.4);
  border-radius: 18px;
  transition: transform .2s ease, box-shadow .2s ease;
  cursor: pointer;
  will-change: transform, box-shadow;
}

.dd-card__title {
  font-family: "Fraunces", serif;
  font-weight: 700;
  font-size: 1.25rem;
  margin-bottom: 0.6rem;
  color: #111;
}

.dd-card__text {
  margin-bottom: 1.25rem;
  font-family: "Inter", sans-serif;
  color: #484848;
}

/* Card container should stretch evenly */
.wp-block-columns.dd-grid > .wp-block-column > .dd-card {
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* Media frame */
.dd-card__thumb {
  /* size & position */
  --plate-size: 220px;       /* tweak per card/viewport if you like */
  --rim: 14px;               /* thickness of the plate rim */
  width: var(--plate-size);
  aspect-ratio: 1 / 1;
  margin: 1.25rem auto 0;

  position: relative;
  border-radius: 50%;
  overflow: visible;         /* we use ::after shadow outside the circle */

  /* base porcelain look */
  /*background: radial-gradient(circle at 50% 54%, #ffffff 0%, #f6f6f6 70%, #f2f2f2 100%);*/
  box-shadow:
    inset 0 0 0 1px rgba(0,0,0,.06),      /* hairline outer */
    inset 0 16px 28px rgba(255,255,255,.55), /* top highlight */
    inset 0 -10px 18px rgba(0,0,0,.05);   /* inner well */

  /* remove the card’s old square frame look */
  border: none;
  padding: 0;

  margin-top: auto;
  align-self: center;
}

.dd-card__thumb img {
    -webkit-user-drag: none;
    -webkit-user-select: none;
    user-select: none;
    filter: brightness(1.02) contrast(.96) saturate(.96);
  box-shadow: inset 0 0 16px rgba(0,0,0,.05);
  transition: transform .25s ease, filter .25s ease, box-shadow .25s ease;
  object-position: 50% 60%; /* keeps a consistent “horizon” across images */
}

.dd-card__thumb::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  pointer-events: none;

  /* only show the outer band of thickness --rim */
  -webkit-mask: radial-gradient(closest-side,
                transparent calc(100% - var(--rim)),
                #000       calc(100% - var(--rim)));
          mask: radial-gradient(closest-side,
                transparent calc(100% - var(--rim)),
                #000       calc(100% - var(--rim)));

  /* subtle highlight/shadow on the rim */
  background:
    radial-gradient(120% 90% at 50% 20%, rgba(255,255,255,.85), rgba(255,255,255,0) 60%),
    radial-gradient(closest-side, rgba(0,0,0,.07), rgba(0,0,0,0) 70%);
  opacity: .85;
}



/* position the figure as a circular “well” inside the plate */
.dd-card__thumb figure {
  position: absolute;
  inset: var(--rim);            /* sits inside the rim */
  border-radius: 50%;
  overflow: hidden;
  margin: 0;
  display: block;               /* override flex centering */
}

/* make the image fill the inner circle */
.dd-card__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;            /* crop nicely to a circle */
  display: block;
  border-radius: 50%;
  filter: brightness(0.98) contrast(0.92) saturate(0.92);
  transition: transform .2s ease, filter .25s ease;
}

.dd-card:hover .dd-card__thumb img {
  transform: scale(1.03);
  filter: brightness(1.0) contrast(1) saturate(1.0);
  box-shadow: inset 0 0 10px rgba(0,0,0,.04);
}

@media (max-width: 560px) {
  .dd-card__thumb { --plate-size: 180px; --rim: 12px; }
}

.dd-card:hover {
  transform: translateY(-6px);
  box-shadow:
    0 12px 32px rgba(0,0,0,0.1),
    inset 0 0 0 1px rgba(255,255,255,0.4);
}

/* Neutralize the old decorative backgrounds when an <img> is present */
.dd-card__thumb.dd-thumb { background: #fff; }


.dd-grid:not(.wp-block-columns) {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1.5rem;
}

.wp-block-columns.dd-grid { gap: 1.5rem; align-items: stretch; }
.wp-block-columns.dd-grid > .wp-block-column { display: flex; }

.wp-block-columns.dd-grid > .wp-block-column > .dd-card {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;      /* equal heights without changing widths */
  height: 100%;
  overflow: visible;
  width: 100%;
}

/* placeholder thumb styles */
.dd-thumb--spray { background: radial-gradient(circle at 50% 50%, #ffd676, #fff4c4); }
.dd-thumb--dots {
  background:
    radial-gradient(#f7cc3a 18%, transparent 19%) 0 0/40px 40px,
    radial-gradient(#4ab0ff 18%, transparent 19%) 20px 20px/40px 40px,
    #fff9d6;
}
.dd-thumb--waves { background: linear-gradient(120deg, #a7e6dc, #8cd3e8); }
.dd-thumb--blend { background: linear-gradient(180deg, #d0e8a3, #b3cfa6, #d9c0a6); }


/* ====== BUILDER ====== */
/* make the left title naturally break into two lines */
.dd-builder__left .dd-h2 {
  max-width: 16ch; /* narrow measure so it wraps to two lines */
}


.dd-builder {
  border-top: 1px dashed var(--dd-border);
  padding: 5rem 1rem 7rem;
}

.dd-builder__inner {
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  gap: 2rem;
  max-width: var(--dd-maxw);
  margin: 0 auto;
}

@media (max-width: 900px) {
  .dd-builder__inner {
    grid-template-columns: 1fr;
  }
}

.dd-step {
  display: grid;
  grid-template-columns: 24px 1fr;
  gap: 1rem;
  background: rgba(255, 255, 255, 0.85);
  border-radius: 12px;
  border: 1px solid var(--dd-border);
  padding: 1rem;
  margin-bottom: 1rem;
}

.dd-step:hover {
    box-shadow: 0 8px 18px rgba(0,0,0,.06), inset 0 0 0 1px rgba(255,255,255,.4);
  transform: translateY(-2px);
  transition: transform .18s ease, box-shadow .18s ease;
}

.dd-step__title {
  font-weight: 700;
  margin-bottom: 0.3rem;
}

.dd-step__text {
    font-size: 0.95rem;
}



/* RESET the old shape styles and draw with SVG masks */
.dd-step__dot,
.dd-step__diamond,
.dd-step__triangle{
  /* neutralize previous border/border-radius triangle hacks */
  width: 25px;
  height: 25px;
  border: 0;
  border-left: 0;
  border-right: 0;
  transform: none;
  border-radius: 0;

  display: inline-block;
  vertical-align: middle;

  /* the “ink” of the icon */
  background-color: currentColor;   /* use text color */
  color: #111;

  /* SVG mask plumbing */
  -webkit-mask-image: var(--icon);
          mask-image: var(--icon);
  -webkit-mask-size: contain;       mask-size: contain;
  -webkit-mask-position: center;    mask-position: center;
  -webkit-mask-repeat: no-repeat;   mask-repeat: no-repeat;

  /* Use the step's --icon if provided, else fall back to the element's --shape */
  -webkit-mask-image: var(--icon, var(--shape));
  mask-image: var(--icon, var(--shape));
}

/* Default fallback icons if no special class is set */
.dd-step__dot      { --shape: var(--ico-dot); }
.dd-step__diamond  { --shape: var(--ico-diamond); }
.dd-step__triangle { --shape: var(--ico-triangle); }

/* Map step classes → whichever SVG you want right now */
.dd-step.is-icon-cake     { --icon: var(--ico-cake); }
.dd-step.is-icon-whisk    { --icon: var(--ico-whisk); }
.dd-step.is-icon-sparkle  { --icon: var(--ico-sprinkles); }

/* Optional hover color */
.dd-step:hover .dd-step__dot,
.dd-step:hover .dd-step__diamond,
.dd-step:hover .dd-step__triangle { color:#bb9a38; }

.dd-step > .dd-step__dot,
.dd-step > .dd-step__diamond,
.dd-step > .dd-step__triangle{
  color: #111;
}


/* ====== FOOTER ====== */
.dd-footer {
  border-top: 1px solid var(--dd-border);
  background: #fff;
  padding: 2rem 1.5rem;
}

.dd-footer__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  max-width: var(--dd-maxw);
  margin: 0 auto;
}

.dd-footmenu {
  display: flex;
  gap: 1rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.dd-footmenu a {
  text-decoration: none;
  color: var(--dd-text);
}

.dd-social {
  display: flex;
  gap: 1rem;
}

.dd-social a {
  color: var(--dd-text);
  text-decoration: none;
  font-weight: 600;
}


.dd-header { position: sticky; top: 0; z-index: 100; background:#fff; border-bottom:1px solid var(--dd-border); }
.dd-header__inner { display:flex; align-items:center; justify-content:space-between; height:64px; }
.dd-brand { text-decoration:none; color:var(--dd-text); font-weight:700; }

.dd-nav { display:flex; align-items:center; }
.dd-menu, .dd-menu ul { list-style:none; margin:0; padding:0; display:flex; gap:18px; }
.dd-menu li { margin:0; }
.dd-menu a { text-decoration:none; color:var(--dd-text); font-weight:600; padding:6px 4px; }
.dd-menu a:hover { text-decoration:underline; }


.dd-footer { border-top:1px solid var(--dd-border); background:#fff; }
.dd-footer__inner { display:flex; align-items:center; justify-content:space-between; gap:18px; flex-wrap:wrap; min-height:64px; }
.dd-footmenu { list-style:none; display:flex; gap:16px; margin:0; padding:0; }
.dd-footmenu a { text-decoration:none; color:var(--dd-text); }
.dd-footmenu a:hover { text-decoration:underline; }
.dd-footmenu a:visited { color:var(--dd-text); }

.dd-social { display:flex; gap:14px; }
.dd-social__icon { display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px; border:1px solid var(--dd-border); border-radius:10px; color:var(--dd-text); }
.dd-social__icon:hover { background:#f7f7f7; }

.dd-main { display:block; }

.dd-footer__inner {
  display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap;
}
.dd-footnav { flex:1 1 auto; display:flex; justify-content:left; }
.dd-footmenu { list-style:none; display:flex; gap:24px; margin:0; padding:0; }
.dd-footmenu a { text-decoration:none; color:var(--dd-text); }
.dd-footmenu a:hover { text-decoration:underline; color: #BCA76A; }

.dd-builder__right {
  position: relative;
}

.dd-builder__left {
  display: flex;
  justify-content: center;
  align-items: center;
  padding-top: .5rem;
  border-right: 2px dashed rgba(188,167,106,0.3);
}

.dd-builder-header__left {
    text-align: center;
}

@media (max-width: 900px) {
  .dd-builder__left {
    border-right: none;
    border-bottom: 2px dashed rgba(188,167,106,0.3);
    padding-bottom: 1rem;
    margin-bottom: 1rem;
  }
}


.dd-card__thumb {
  /* Use the smallest of: your nominal 220px, a % of the card, and the card's content width minus padding */
  --plate-size: min(220px, 62vw, calc(100% - 3rem));
  width: var(--plate-size);
}

/* If a card gets very narrow, keep the circle happy */
@media (max-width: 40em) { /* ~640px */
  .dd-card__thumb {
    --plate-size: min(200px, calc(100% - 2.5rem));
  }
}

/* Make sure the circular media never exceeds the card */
.dd-card__thumb{
  --plate-size: min(220px, calc(100% - 3rem));
  width: var(--plate-size);
  margin-inline: auto;
}

@media (max-width: 40em){
  .dd-card__thumb{ --plate-size: min(200px, calc(100% - 2.5rem)); }
}


/* One-up (vertical stack) at ≤72em */
@media (max-width: 72em) {
  .wp-block-columns.dd-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 1.25rem !important;
  }
  .wp-block-columns.dd-grid > .wp-block-column {
    margin: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    flex: none !important;
  }
}

/* CTA container — centers under the three steps */
.dd-builder__cta {
  text-align: center;
  margin-top: 1.5rem;
}

/* Larger, premium button */
.dd-btn--xl .wp-block-button__link {
  padding: 0.9rem 1.5rem;
  border-radius: 999px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  box-shadow: 0 6px 18px rgba(188,167,106,.28);
}

/* Arrow icon sits nicely */
.dd-btn__icon {
  display: inline-block;
  transform: translateX(0);
  transition: transform .18s ease;
}

/* Delightful hover nudge */
.dd-btn--gold .wp-block-button__link:hover .dd-btn__icon {
  transform: translateX(3px);
}

body { font-size: 16.5px; }
.dd-lead { color:#303030; }

a:focus-visible { outline: 2px solid #bca76a; outline-offset: 5px; }

/* Tone images down inside High-End Desserts */
.dd-section.dd-highend .dd-card__thumb img{
  filter: saturate(.78) contrast(.92) brightness(.98);
  transition: filter .25s ease;
}

/* Let them come alive on hover/focus
.dd-section.dd-highend .dd-card:hover .dd-card__thumb img,
.dd-section.dd-highend .dd-card:focus-within .dd-card__thumb img{
  filter: saturate(1) contrast(1) brightness(1.02);
}*/

/* Warm veil that harmonizes with your gold */
.dd-section.dd-highend .dd-card__thumb::after{
  content:"";
  position:absolute; inset: var(--rim);
  border-radius:50%;
  pointer-events:none;
  background: linear-gradient(
    to bottom,
    rgba(188,167,106,.10),
    rgba(255,255,255,0) 60%
  );
  mix-blend-mode: multiply;   /* gives a subtle film look */
  opacity:.8;
  transition: opacity .25s ease;
}
.dd-section.dd-highend .dd-card:hover .dd-card__thumb::after{
  opacity:.35;                /* back off on hover */
}

/* Turn on a decorative frame for the High-End Desserts section */
.dd-section.dd-highend{
  position: relative;
  isolation: isolate;
  /* DO NOT set width/max-width to 100vw */
  margin-left:  max(calc(50% - 50vw), calc(-1 * var(--wp--style--root--padding-left, 0px)));
  margin-right: max(calc(50% - 50vw), calc(-1 * var(--wp--style--root--padding-right, 0px)));

  /* keep the drizzle vars */
  --drizzle: #6b4b33;
  --drizzle-op: .10;

  /* clip paint so the rails don’t create scrollbars */
  overflow: visible;                 /* modern */
  overflow-x: visible;             /* fallback */
  overflow-clip-margin: initial; /* extra safety on some engines */
}
@supports not (overflow: clip){
  .dd-section.dd-highend{ overflow-x: hidden; } /* fallback */
}

.dd-section.dd-highend > *{ position: relative; z-index: 1; }

/* rails */
.dd-section.dd-highend::before,
.dd-section.dd-highend::after{
  content:"";
  position: absolute;
  top: clamp(24px, 3vh, 40px);
  bottom: clamp(24px, 3vh, 40px);
  width: min(160px, 12vw);
  pointer-events: none;
  opacity: var(--drizzle-op);
  filter: drop-shadow(0 2px 0 rgba(0,0,0,.03));
  background-repeat: no-repeat;
  background-size: contain;
  z-index: 0;                         /* behind content but inside clip */
}

/* LEFT: anchor at the edge, then nudge outward with transform
   (transform does not affect scrollable overflow) */
.dd-section.dd-highend::before{
  left: 0;
  transform: translateX(-100%);
  background-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 180 800' fill='none'>\
  <g stroke='%236b4b33' stroke-linecap='round' stroke-width='5' stroke-opacity='0.5' >\
    <path d='M40 0 C35 90, 20 140, 60 210 S120 330, 70 410 S15 520, 80 600 S140 700, 120 800'/>\
    <path stroke-width='5' d='M10 60 C40 150, 10 210, 70 260 S140 380, 60 470 S30 600, 110 690'/>\
  </g>\
</svg>");
}

/* RIGHT: mirror and nudge outward */
.dd-section.dd-highend::after{
  right: 0;
  transform: translateX(100%) scaleX(-1);
  background-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 180 800' fill='none'>\
  <g stroke='%236b4b33' stroke-linecap='round' stroke-width='5' stroke-opacity='0.5'>\
    <path d='M40 0 C35 90, 20 140, 60 210 S120 330, 70 410 S15 520, 80 600 S140 700, 120 800'/>\
    <path stroke-width='5' d='M10 60 C40 150, 10 210, 70 260 S140 380, 60 470 S30 600, 110 690'/>\
  </g>\
</svg>");
}

/* hide rails on small screens */
@media (max-width: 900px){
  .dd-section.dd-highend::before,
  .dd-section.dd-highend::after{ display:none; }
}


/* Force 4-up on wide screens, 1-up on narrow */
.wp-block-columns.dd-grid{
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 1.5rem !important;
  align-items: stretch;
}

/* Neutralize Gutenberg's flex sizing so grid controls widths */
.wp-block-columns.dd-grid > .wp-block-column{
  margin: 0 !important;
  width: auto !important;
  max-width: none !important;
  flex: none !important;
}

/* Stack to 1-up at <=72em */
@media (max-width: 72em){
  .wp-block-columns.dd-grid{
    grid-template-columns: 1fr !important;
  }
}


/* --- GRID: only 4x1 or 1x4, never 2x2 --- */
.wp-block-columns.dd-grid{
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 1.25rem !important;
}

/* 1 column under 72em */
@media (max-width: 72em){
  .wp-block-columns.dd-grid{
    grid-template-columns: 1fr !important;
  }

  /* stop the equal-height behavior on mobile */
  .wp-block-columns.dd-grid > .wp-block-column{
    display: block !important;            /* no flex wrapper */
  }
  .wp-block-columns.dd-grid > .wp-block-column > .dd-card{
    height: auto !important;              /* don't stretch */
    max-width: 680px;                      /* keep a nice width/height feel */
    margin: 0 auto 1.25rem;                /* center the card */
  }

  /* don't let the plate push the card taller */
  .dd-card__thumb{
    margin-top: 1.25rem !important;       /* override the previous margin-top:auto */
    --plate-size: min(220px, 60vw, 360px); /* keep the media from ballooning */
  }
}

/* Only use the equal-height trick on wide screens */
@media (min-width: 72.0625em){
  .wp-block-columns.dd-grid > .wp-block-column{ display: flex; }
  .wp-block-columns.dd-grid > .wp-block-column > .dd-card{
    flex: 1 1 auto;
    height: 100%;
  }
}


/* Disable view-timeline / CSS animations */
.dd-hero--cover::before,
.dd-hero__inner {
  animation: none !important;
}

/* Neutralize transform-based parallax if any class remains */
.dd-hero--parallax::before,
.dd-hero--parallax::after,
.dd-hero--parallax .dd-hero__inner {
  transform: none !important;
}

/* (Optional) remove perf hints now that nothing animates */
.dd-hero__inner {
  will-change: auto !important;
  backface-visibility: visible !important;
}



/* ======= SHOP ============ */
/* Container */
.dd-shop { padding: 1rem 1rem 2rem; }

/* Tiny lead */
.dd-shop__lead { margin: .5rem 0 1rem; font-size: 1rem; font-weight: 700; text-align: center; }

/* Search full width with soft corners */
.dd-shop__search { margin: .25rem auto 1.25rem; max-width: 900px; }

/* Section headings */
.dd-shop__section { margin: 1.25rem 0 1.75rem; }
.dd-shop__h { display:flex; align-items:center; gap:.6rem; font-size:1.05rem; }

/* Grid: keep it 3 columns on desktop, full width on mobile */
.dd-shop__grid { --wc-products-block-columns: 3; }
@media (max-width: 900px) { .dd-shop__grid { --wc-products-block-columns: 2; } }
@media (max-width: 600px) { .dd-shop__grid { --wc-products-block-columns: 1; } }

/* Card look */
.dd-card__thumb img { border-radius: 12px; }
.wc-block-product,
.wc-block-product-collection__product {
  border-radius: 16px;
  border: 1px solid rgba(0,0,0,.06);
  background: #fff;
  box-shadow: 0 6px 18px rgba(0,0,0,.06);
  overflow: hidden;
}

.dd-card__body { padding: .75rem .9rem 1rem; }
.dd-card__title { margin: .25rem 0 .25rem; font-size: .98rem; }
.dd-card__price { margin: 0 0 .5rem; font-weight: 700; }
.dd-card__btn .wp-block-button__link,
.wc-block-components-product-button .wp-block-button__link {
  width: 100%;
  border-radius: 999px;
}


/* ---------- SHOP SHELL ---------- */
.dd-shop { padding: 1rem 1rem 2rem; }
.dd-shop__lead {
  margin: .75rem 0 1rem;
  font-size: 1rem;
  font-weight: 700;
  text-align: center;
}

/* Search field full width + soft corners */
.dd-shop__search .wc-block-product-search__fields,
.dd-shop__search form {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: .5rem;
}
.dd-shop__search input[type="search"]{
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.12);
  padding: .7rem 1rem;
  box-shadow: 0 2px 10px rgba(0,0,0,.04) inset;
}
.dd-shop__search button{
  border-radius: 999px;
}

/* Section headings with the grey dot */
.dd-shop__section { margin: 1.25rem 0 1.75rem; }
.dd-shop__h {
  position: relative;
  display: flex; align-items: center; gap: .6rem;
  font-size: 1.05rem; font-weight: 700;
  margin: 0 0 .75rem;
}
.dd-shop__h::before{
  content:"";
  width: 28px; height: 28px; border-radius: 50%;
  background: #d9d9d9;
  display:inline-block; margin-right:.4rem;
}

/* ---------- CATEGORY GRID AS CARDS ---------- */
/* Woo block outputs a UL; turn it into a card grid */
.dd-cardgrid { display: grid; gap: 1rem; }
.dd-cardgrid--3 { grid-template-columns: repeat(3,minmax(0,1fr)); }
@media (max-width: 900px){ .dd-cardgrid--3 { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media (max-width: 600px){ .dd-cardgrid--3 { grid-template-columns: 1fr; } }

/* Normalize the list */
.wc-block-product-categories,
.wc-block-product-categories-list {
  list-style: none; margin: 0; padding: 0;
}

/* Category item card */
.wc-block-product-categories-list .wc-block-product-categories-list-item {
  border-radius: 16px;
  border: 1px solid rgba(0,0,0,.06);
  background: #fff;
  box-shadow: 0 6px 18px rgba(0,0,0,.06);
  overflow: hidden;
}

/* Thumbnail on top */
.wc-block-product-categories-list.has-images .wc-block-product-categories-list-item a {
  display: grid; grid-template-rows: auto 1fr;
  text-decoration: none; color: inherit;
}
.wc-block-product-categories-list.has-images .wc-block-product-categories-list-item img {
  width: 100%; height: 140px; object-fit: cover; display:block;
}

/* Category text area */
.wc-block-product-categories-list.has-images .wc-block-product-categories-list-item .wc-block-product-categories-list-item__name,
.wc-block-product-categories-list.has-thumbnails .wc-block-product-categories-list-item .wc-block-product-categories-list-item__name {
  display:block; font-weight:700; padding:.6rem .9rem .2rem;
}
.wc-block-product-categories-list.has-images .wc-block-product-categories-list-item .wc-block-product-categories-list-item__desc {
  padding: 0 .9rem .9rem; color:#666; font-size:.9rem;
}

/* Hide counts if any theme adds them */
.wc-block-product-categories-list-item__count { display:none !important; }

/* ---------- PRODUCT GRID CARDS ---------- */
.dd-shop__grid { --wc-products-block-columns: 3; }
@media (max-width: 900px) { .dd-shop__grid { --wc-products-block-columns: 2; } }
@media (max-width: 600px) { .dd-shop__grid { --wc-products-block-columns: 1; } }

.wc-block-product,
.wc-block-product-collection__product {
  border-radius: 16px;
  border: 1px solid rgba(0,0,0,.06);
  background: #fff;
  box-shadow: 0 6px 18px rgba(0,0,0,.06);
  overflow: hidden;
}

.dd-card__thumb img { border-radius: 12px; }
.dd-card__body { padding: .75rem .9rem 1rem; }
.dd-card__title { margin: .25rem 0 .25rem; font-size: .98rem; }
.dd-card__price { margin: 0 0 .5rem; font-weight: 700; }
.dd-card__btn .wp-block-button__link,
.wc-block-components-product-button .wp-block-button__link {
  width: 100%; border-radius: 999px;
}

/* Center the lead + search */
.dd-shop__lead{ text-align:center; }
.dd-shop__search { max-width: 900px; margin: .25rem auto 1.25rem; }

/* Give the two sections a soft card look (like your mock) */
.dd-shop__section{
  background:#fff;
  border:1px solid rgba(0,0,0,.06);
  border-radius:16px;
  padding:1rem;
  box-shadow:0 6px 18px rgba(0,0,0,.05);
}

/* Tighter gutters on product grid */
.dd-shop__grid { --wc-products-block-columns: 3; gap: 1rem; }
@media (max-width: 900px){ .dd-shop__grid { --wc-products-block-columns: 2; } }
@media (max-width: 600px){ .dd-shop__grid { --wc-products-block-columns: 1; } }

/* Hide default sidebar widgets on shop pages */
.woocommerce-page .widget-area,
.woocommerce-page .sidebar,
.woocommerce-page aside.widget-area,
.woocommerce-page #secondary {
  display: none !important;
}