/* ==========================================================================
   DP adapter (A2): makes the dp-* classes of dp.css work on NATIVE Elementor markup.

   In Astro a class sits on the element itself (<a class="dp-btn">). In Elementor, Advanced → CSS Classes lands
   on the widget's WRAPPER (div.elementor-widget-button) and the real element is deeper
   (wrapper > .elementor-widget-container > .elementor-button-wrapper > a.elementor-button). This file:
     1. neutralises what dp.css would wrongly draw on a wrapper (buttons),
     2. re-targets the component onto the real element,
     3. maps the section layouts (dp-sx-*) onto Elementor containers (boxed: the grid goes on .e-con-inner).
   Which class goes on which widget, and what it does: docs/class-map.md.
   Selectors are written at a higher specificity than Elementor's own (0,1,x) rules, never with !important,
   so a value a builder sets in the panel (per-element CSS, 0,3,0) still wins.
   Written against Elementor 4.3.6 with Optimized Markup OFF (it removes .elementor-widget-container): turn
   that experiment on only after re-checking this file (review E).
   ========================================================================== */

/* ──────────── 1. Containers: gutter, no default padding ──────────── */
/* Elementor's default 10px container padding is gone (Astro has none); top-level sections get the page gutter.
   The 1440px content width comes from the Kit (container_width). */
.elementor .e-con {
  --container-default-padding-top: 0px;
  --container-default-padding-right: 0px;
  --container-default-padding-bottom: 0px;
  --container-default-padding-left: 0px;
}
.elementor .e-con.e-parent { --padding-left: var(--spacing-gutter); --padding-right: var(--spacing-gutter); }
/* dp-section: the section's vertical rhythm. Boxed containers keep block padding on the outer element (dp.css
   .dp-section), full containers on themselves: both work as written in dp.css. */

/* ──────────── 2. Text widgets: the dp type classes on the wrapper, the heading inherits them ──────────── */
.elementor-widget-heading:is([class*="dp-display"], [class*="dp-headline"], .dp-hero-title, .dp-numeral, [class*="dp-body"], [class*="dp-label"], .dp-coord, .dp-muted, .dp-gold-text) .elementor-heading-title {
  font-family: inherit; font-size: inherit; font-weight: inherit; line-height: inherit;
  letter-spacing: inherit; color: inherit; text-transform: inherit; white-space: inherit;
}
.elementor-widget-text-editor > .elementor-widget-container > :last-child,
.elementor-widget-text-editor > .elementor-widget-container > p:last-child { margin-bottom: 0; }
.elementor-widget-text-editor p { margin-top: 0; }
/* links written in a text (links inherit their colour): underlined, as the design's running-text links */
.elementor-widget-text-editor a:not([class]) { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.elementor-widget-text-editor a:not([class]):hover { color: var(--color-gold-text); }
/* measure (Astro max-w-[Nch]) */
.elementor-element.dp-measure-32 { max-width: 32ch; }
.elementor-element.dp-measure-38 { max-width: 38ch; }
.elementor-element.dp-measure-42 { max-width: 42ch; }
.elementor-element.dp-measure-48 { max-width: 48ch; }
.elementor-element.dp-measure-60 { max-width: 60ch; }
/* extra space above one widget (Astro mt-N, N × 0.25rem), on top of the container gap */
.elementor-element.dp-mt-2 { margin-top: .5rem; }
.elementor-element.dp-mt-4 { margin-top: 1rem; }
.elementor-element.dp-mt-6 { margin-top: 1.5rem; }
.elementor-element.dp-mt-8 { margin-top: 2rem; }
.elementor-element.dp-mt-12 { margin-top: 3rem; }
.elementor-element.dp-mt-16 { margin-top: 4rem; }

/* ──────────── 3. Buttons (Button widget + dp-btn, dp-btn--gold | --secondary | --ghost, --sm | --lg, --arrow) ─── */
/* 3a. the wrapper: keep the --btn-* variables dp.css sets on it (they inherit into the button), drop the rest */
.elementor-widget-button.dp-btn {
  display: block; min-height: 0; padding: 0; gap: 0; isolation: auto; transform: none;
  font: inherit; color: inherit; white-space: normal; text-decoration: none; transition: none; cursor: auto;
}
.elementor-widget-button.dp-btn::before, .elementor-widget-button.dp-btn::after { content: none; }
.elementor-widget-button.dp-btn:hover, .elementor-widget-button.dp-btn:active, .elementor-widget-button.dp-btn--ghost:hover { transform: none; text-decoration: none; }
/* 3b. the real button */
.elementor-widget-button.dp-btn .elementor-button {
  position: relative; isolation: isolate; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 0 1.4rem; background: none; border: 0; border-radius: 0; box-shadow: none;
  color: var(--btn-fg); fill: currentColor; font-family: var(--font-body); font-weight: var(--font-weight-normal);
  font-size: var(--text-small); line-height: 1; letter-spacing: normal; text-transform: none; white-space: nowrap;
  cursor: pointer; text-decoration: none; transition: transform var(--t-press) var(--ease-out);
}
.elementor-widget-button.dp-btn .elementor-button:is(:hover, :focus, :visited) { color: var(--btn-fg); }
.elementor-widget-button.dp-btn .elementor-button::before, .elementor-widget-button.dp-btn .elementor-button::after { content: ""; position: absolute; inset: 0; clip-path: var(--shape-control); }
.elementor-widget-button.dp-btn .elementor-button::before {
  z-index: -1; --stroke: var(--btn-border); background-color: var(--btn-bg); box-shadow: inset 0 0 0 1px var(--btn-border); transition: background-color var(--t-hover);
  background-image: linear-gradient(to top right, transparent calc(50% - 1px), var(--stroke) calc(50% - 1px), var(--stroke) calc(50% + 1px), transparent calc(50% + 1px));
  background-position: top right; background-repeat: no-repeat; background-origin: border-box; background-size: var(--cut-sm) var(--cut-sm);
}
.elementor-widget-button.dp-btn .elementor-button::after { z-index: -2; background: var(--btn-shadow); opacity: 0; transition: transform var(--t-press) var(--ease-out), opacity var(--t-press); }
.elementor-widget-button.dp-btn .elementor-button:hover { transform: translate(-2px, -2px); }
.elementor-widget-button.dp-btn .elementor-button:hover::after { opacity: 1; transform: translate(4px, 4px); }
.elementor-widget-button.dp-btn .elementor-button:active { transform: none; }
.elementor-widget-button.dp-btn .elementor-button:active::after { opacity: 0; transform: none; }
.elementor-widget-button.dp-btn .elementor-button-content-wrapper { gap: 10px; }
/* sizes */
.elementor-widget-button.dp-btn--sm .elementor-button { min-height: 40px; padding: 0 1rem; }
.elementor-widget-button.dp-btn--lg .elementor-button { min-height: 56px; padding: 0 1.75rem; font-size: var(--text-body); }
/* ghost: a text link with an underline on hover */
.elementor-widget-button.dp-btn--ghost .elementor-button { padding: 0 2px; min-height: 40px; }
.elementor-widget-button.dp-btn--ghost .elementor-button::after { display: none; }
.elementor-widget-button.dp-btn--ghost .elementor-button:hover { transform: none; }
.elementor-widget-button.dp-btn--ghost .elementor-button:hover .elementor-button-text { text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 1px; }
/* the arrow (Astro <span class="dp-btn__arrow">→</span>): an inline-block, so the ghost underline stops at the words */
.elementor-widget-button.dp-btn--arrow .elementor-button-text::after { content: "→"; display: inline-block; margin-left: 10px; transition: transform var(--t-hover) var(--ease-out); }
.elementor-widget-button.dp-btn--arrow .elementor-button:hover .elementor-button-text::after { transform: translateX(4px); }
/* a full-width button on phones: Elementor's own Button → Alignment (mobile) "Justified" also works */
.elementor-widget-button.dp-btn--block .elementor-button { display: flex; width: 100%; }

/* ──────────── 4. Images (Image widget + dp-outline | dp-pic--offset | dp-pic--folder | dp-photo, dp-ratio-*) ──── */
.elementor-widget-image:is(.dp-outline, .dp-pic--offset, .dp-pic--folder, .dp-photo) img { display: block; width: 100%; height: auto; max-width: none; object-fit: cover; transition: transform 1.6s var(--ease-soft); }
/* the photo box (Astro .dp-photo): the widget container, in the photo cut */
.elementor-widget-image:is(.dp-outline, .dp-pic--offset, .dp-photo) > .elementor-widget-container { position: relative; overflow: hidden; background-color: var(--color-line); clip-path: var(--shape-photo); }
.elementor-widget-image.dp-photo { clip-path: none; background: none; overflow: visible; }
/* the outline frame: dp.css draws it on the wrapper as written; the link inside drives the hover */
.elementor-widget-image.dp-outline:has(a:hover) { --stroke: var(--color-ink); }
.elementor-widget-image:is(.dp-outline, .dp-pic--offset, .dp-pic--folder, .dp-photo) a:hover img { transform: scale(1.05); }
/* offset: dp.css draws the shifted outline (::before) on the wrapper; margins at Elementor's specificity */
.elementor-widget.dp-pic--offset { margin: 0 var(--po) var(--po) 0; width: auto; }
.elementor-widget-image.dp-pic--offset:has(a:hover) { --stroke: var(--color-gold); }
/* folder: the photo itself cut to the folder silhouette */
.elementor-widget-image.dp-pic--folder > .elementor-widget-container {
  clip-path: polygon(0 var(--td), var(--tx) var(--td), calc(var(--tx) + var(--td)) 0, calc(var(--tx) + var(--tw) - var(--td)) 0, calc(var(--tx) + var(--tw)) var(--td), 100% var(--td), 100% 100%, 0 100%);
  overflow: hidden; background-color: var(--color-line);
}
/* aspect ratios (Astro aspect="4 / 5"): the photo is cropped to fit */
.elementor-widget-image.dp-ratio-1x1 img { aspect-ratio: 1 / 1; }
.elementor-widget-image.dp-ratio-4x5 img { aspect-ratio: 4 / 5; }
.elementor-widget-image.dp-ratio-3x4 img { aspect-ratio: 3 / 4; }
.elementor-widget-image.dp-ratio-4x3 img { aspect-ratio: 4 / 3; }
.elementor-widget-image.dp-ratio-3x2 img { aspect-ratio: 3 / 2; }
.elementor-widget-image.dp-ratio-16x9 img { aspect-ratio: 16 / 9; }
.elementor-widget-image.dp-ratio-21x9 img { aspect-ratio: 21 / 9; }
.elementor-widget-image.dp-ratio-fill img { height: 100%; }

/* ──────────── 5. Surfaces on containers (dp-panel, dp-deck, dp-sheet, dp-card, dp-cutcard, dp-tab) ──────────── */
/* dp.css paints them on the container as written. The tab notch is a ::before, which Elementor also uses for
   its background overlay: take it over completely. */
.e-con.dp-tab::before {
  content: ""; display: block; position: absolute; z-index: auto; opacity: 1; mix-blend-mode: normal; transition: none;
  border: 0; border-radius: 0; background: inherit;
  top: calc(var(--notch-d) * -1 + 1px); left: max(var(--spacing-gutter), calc(50% - var(--container-site) / 2));
  width: var(--notch-w); height: var(--notch-d);
  clip-path: polygon(var(--notch-d) 0, calc(100% - var(--notch-d)) 0, 100% 100%, 0 100%);
}
.e-con.dp-tab--right::before { left: auto; right: max(var(--spacing-gutter), calc(50% - var(--container-site) / 2)); }
/* surfaces: their dp.css padding goes through Elementor's padding variables (so it can't lose to Elementor's own
   padding rules on load order); the gap between their widgets is dp.css's 1rem */
.e-con.dp-card { --dp-pad: 2rem; }
.e-con.dp-sheet { --dp-pad: clamp(1.5rem, 1rem + 2vw, 3rem); }
.e-con.dp-cutcard { --dp-pad: clamp(1.75rem, 1.2rem + 2vw, 3rem); }
@media (max-width: 640px) { .e-con.dp-card { --dp-pad: 1.5rem; } }
.e-con:is(.dp-sheet, .dp-card, .dp-cutcard) { --padding-top: var(--dp-pad); --padding-right: var(--dp-pad); --padding-bottom: var(--dp-pad); --padding-left: var(--dp-pad); --gap: 1rem 1rem; --row-gap: 1rem; }

/* ──────────── 6. Section layouts (dp-sx-*) on containers ──────────── */
/* A layout class on a BOXED container lays out its .e-con-inner; the outer element stays Elementor's flex box.
   Children are plain full-width containers; their order in the Navigator is their order on the page. */
.e-con-boxed:is(.dp-sx-hero, .dp-sx-split, .dp-sx-cta, .dp-sx-edge) { display: flex; grid-template-columns: none; gap: 0; }
.e-con-boxed.dp-section:is(.dp-sx-split, .dp-sx-cta, .dp-sx-edge) { padding-block: var(--spacing-section); }
.e-con-boxed.dp-sx-edge { padding-bottom: calc(var(--spacing-section) + 3.5rem); }

/* PageHero: text 5 / picture 7 on the bottom line (Astro: lg:grid-cols-12, 5 + 7, gap 3rem 3.5rem, pt-24 pb-16) */
.e-con.dp-sx-hero > .e-con-inner { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 3rem 3.5rem; padding-top: 6rem; padding-bottom: 4rem; }
.e-con.dp-sx-hero__text { --justify-content: flex-end; --row-gap: 1.5rem; --gap: 1.5rem 1.5rem; }
@media (max-width: 1023px) { .e-con.dp-sx-hero > .e-con-inner { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 767px) { .e-con.dp-sx-hero > .e-con-inner { padding-top: 4rem; } }

/* Split (SplitGold and the quiet sections): picture 7 / text 5, text on the bottom line */
.e-con.dp-sx-split > .e-con-inner { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 3rem clamp(2.5rem, 1rem + 5vw, 6rem); align-items: end; }
.e-con.dp-sx-split--flip > .e-con-inner { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.e-con.dp-sx-split--flip > .e-con-inner > :first-child { order: 2; }
.e-con.dp-sx-split__text { --row-gap: 1.25rem; --gap: 1.25rem 1.25rem; padding-bottom: .5rem; }
@media (max-width: 900px) {
  .e-con.dp-sx-split > .e-con-inner, .e-con.dp-sx-split--flip > .e-con-inner { grid-template-columns: minmax(0, 1fr); }
  .e-con.dp-sx-split--flip > .e-con-inner > :first-child { order: 0; }
}
/* SplitGold: the photo's column; the small gold field out of its bottom-left corner is CSS only (decoration, D2) */
.e-con.dp-sx-gold { position: relative; isolation: isolate; margin: 0 0 2rem 2rem; max-width: 36rem; width: auto; }
.e-con.dp-sx-gold::after { content: ""; position: absolute; z-index: -1; left: -2rem; bottom: -2rem; width: 38%; height: 30%; background-color: var(--color-gold); pointer-events: none; --par: 40px; }
.e-con.dp-sx-split--flip .e-con.dp-sx-gold { justify-self: end; width: 100%; }
@supports (animation-timeline: view()) { @media (prefers-reduced-motion: no-preference) {
  .e-con.dp-sx-gold::after { animation: dp-par linear both; animation-timeline: view(); animation-range: cover; }
}}

/* CtaPanel: heading + line 7 / the two buttons 5, on the bottom line (Astro: lg 7 + 5, gap 2rem 3rem, items-end) */
.e-con.dp-sx-cta > .e-con-inner { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 2rem 3rem; align-items: end; }
.e-con.dp-sx-cta__text { --row-gap: 1.5rem; --gap: 1.5rem 1.5rem; }
.e-con.dp-sx-cta__actions { --flex-direction: row; --flex-wrap: wrap; --gap: .75rem .75rem; --row-gap: .75rem; --column-gap: .75rem; justify-self: end; width: auto; }
@media (max-width: 1023px) {
  .e-con.dp-sx-cta > .e-con-inner { grid-template-columns: minmax(0, 1fr); }
  .e-con.dp-sx-cta__actions { justify-self: start; }
}
.e-con.dp-sx-cta__actions > .elementor-widget { width: auto; }

/* ──────────── 7. Custom Blocks placed by shortcode (C1) ──────────── */
/* The wrapper adds nothing: no gutter, no gap; the block's own section lays itself out. */
.elementor .e-con.dp-block { --padding-left: 0px; --padding-right: 0px; --gap: 0px 0px; --row-gap: 0px; }
.e-con.dp-block > .elementor-widget-shortcode, .e-con.dp-block .elementor-shortcode { width: 100%; }
.e-con.dp-block.dp-mt-16 { margin-top: 4rem; }

/* ──────────── 8. Motion markup (preloader, page cover) on the core's runtime ──────────── */
/* The core uses gp-* state classes on <html>; dp.css was written for the dp-* ones. */
html.gp-intro-skip .dp-intro { display: none; }
/* Arrival under the cover: the sheet is down from the first paint (kit.css), its contents in their final state,
   the monogram whole (not redrawn), no transitions until it lifts. */
html.gp-covered .dp-cover__mono path, .dp-cover.is-instant .dp-cover__mono path { visibility: visible; }
html.gp-covered .dp-cover__mono, .dp-cover.is-instant .dp-cover__mono { transform: none; }
html.gp-covered .dp-cover__rule, .dp-cover.is-instant .dp-cover__rule { transform: scaleX(1); }
html.gp-covered .dp-cover__coord, .dp-cover.is-instant .dp-cover__coord { opacity: .8; }
html.gp-covered .dp-cover__label span, .dp-cover.is-instant .dp-cover__label span { transform: none; opacity: 1; }
.dp-cover.is-instant, .dp-cover.is-instant * { transition: none !important; }
/* the lightbox dialog sits above the admin bar and the cover */
.dp-lightbox[open] { z-index: 100000; }

/* ──────────── 9. Forms: Contact Form 7 in the design system (QuoteForm) ──────────── */
/* The form ("DP · Ζητήστε προσφορά") carries the dp-field classes itself; this lays it out and styles CF7's
   own validation and response. Put its Shortcode widget in a container with `dp-card`, after a Heading
   ("Τα στοιχεία <em>σας</em>.", class dp-card__title-style: Heading tag H3 + class dp-headline-md). */
.wpcf7 .dp-form__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; margin-top: .5rem; }
.wpcf7 .dp-form__wide { grid-column: 1 / -1; }
@media (max-width: 640px) { .wpcf7 .dp-form__grid { grid-template-columns: minmax(0, 1fr); } }
.wpcf7 label.dp-field { display: flex; line-height: inherit; vertical-align: baseline; }
.wpcf7 .wpcf7-form-control-wrap { display: block; }
.wpcf7 .dp-form__foot { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem; margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px dotted var(--color-ink); }
.wpcf7 .wpcf7-not-valid { --stroke: var(--color-error); }
.wpcf7 .wpcf7-not-valid-tip { display: block; margin-top: 6px; color: var(--color-error); font-size: var(--text-small); }
.wpcf7 form .wpcf7-response-output { margin: 1.5rem 0 0; padding: .9rem 1rem; border: 1px solid var(--color-ink); font-size: var(--text-small); line-height: 1.5; }
.wpcf7 form.sent .wpcf7-response-output { border-color: var(--color-gold); background-color: var(--color-gesso); }
.wpcf7 form:is(.invalid, .unaccepted, .payment-required, .failed, .aborted, .spam) .wpcf7-response-output { border-color: var(--color-error); color: var(--color-error); }
.wpcf7 .wpcf7-spinner { margin: 0 0 0 12px; }
.wpcf7 .wpcf7-submit:disabled { opacity: .6; cursor: progress; }

/* ──────────── 10. More section layouts ──────────── */
/* CalculatorSection: heading + line 4 / the calculator 8 (Astro lg:grid-cols-12, 4 + 8, gap 2.5rem 3rem) */
.e-con-boxed:is(.dp-sx-calc, .dp-sx-quote) { display: flex; grid-template-columns: none; gap: 0; }
.e-con.dp-sx-calc > .e-con-inner { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 2.5rem 3rem; }
.e-con.dp-sx-calc__text { --row-gap: 1.5rem; --gap: 1.5rem 1.5rem; }
/* QuoteForm: text, steps and a photo 5 / the form card 6, starting at column 7 */
.e-con.dp-sx-quote > .e-con-inner { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 3rem 3rem; align-items: start; }
.e-con.dp-sx-quote__text { grid-column: 1 / span 5; --row-gap: 1.5rem; --gap: 1.5rem 1.5rem; }
.e-con.dp-sx-quote__form { grid-column: 7 / span 6; --row-gap: .5rem; --gap: .5rem .5rem; }
@media (max-width: 1023px) {
  .e-con:is(.dp-sx-calc, .dp-sx-quote) > .e-con-inner { grid-template-columns: minmax(0, 1fr); }
  .e-con:is(.dp-sx-quote__text, .dp-sx-quote__form) { grid-column: 1 / -1; }
}
/* "what happens next": a plain list on dotted rules, no numbers (client rule) */
.dp-steps { list-style: none; margin: 0; padding: 0; border-top: 1px dotted var(--color-ink); }
.dp-steps > li { padding: 1rem 0; border-bottom: 1px dotted var(--color-line); font-family: var(--font-display); font-weight: var(--font-weight-light); font-size: var(--text-title); line-height: 1.28; }
/* the card title as a Heading widget */
.elementor-widget-heading.dp-card__title .elementor-heading-title { font-family: var(--font-display); font-weight: var(--font-weight-light); font-size: var(--text-title); line-height: 1.2; color: inherit; }
/* the calculator widget fills its column */
.elementor-widget-dp-calculator { width: 100%; }
/* Band and GalleryGrid sections: the widget fills the container */
.e-con.dp-sx-grid { padding-top: 2.5rem; }
.e-con.dp-sx-band.dp-section { padding-top: 0; }
.elementor-widget:is(.elementor-widget-dp-photo-band, .elementor-widget-dp-photo-masonry, .elementor-widget-dp-projects) { width: 100%; }
/* WorksMosaic / GalleryWall sections: the rings and the wall run past the container to the screen edges */
.e-con.wm-bleed, .e-con.gw-bleed { overflow-x: clip; --overflow: visible; }
.e-con.dp-sx-wall { padding-top: 2.5rem; }
.elementor-widget:is(.elementor-widget-dp-works-mosaic, .elementor-widget-dp-gallery-wall) { width: 100%; }

/* ──────────── 11. 3D (ModelStage, ModelShowcase): the Tailwind utilities their Astro markup carried ──────────── */
.dp-stage__box { position: relative; background-color: var(--color-gesso); border: 1px solid var(--color-line); overflow: hidden; --stroke: var(--color-line);
  background-image: linear-gradient(to top right, transparent calc(50% - 1px), var(--stroke) calc(50% - 1px), var(--stroke) calc(50% + 1px), transparent calc(50% + 1px));
  background-position: top right; background-repeat: no-repeat; background-origin: border-box; background-size: var(--cut-lg) var(--cut-lg); }
.dp-showcase__stage { position: relative; background-color: var(--color-gesso); overflow: hidden; }
.dp-showcase__list { list-style: none; margin: 0; padding: 0; }
.elementor-widget:is(.elementor-widget-dp-model-stage, .elementor-widget-dp-model-showcase) { width: 100%; }
/* ServicesShowcase: the heading row above the showcase (heading 8 / line 4) */
.e-con-boxed.dp-sx-services { display: flex; grid-template-columns: none; gap: 0; }
.e-con.dp-sx-services > .e-con-inner { display: flex; flex-direction: column; gap: 3.5rem; }
.e-con.dp-sx-services__head { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); column-gap: 2.5rem; row-gap: 1.5rem; }
.e-con.dp-sx-services__head > .elementor-widget-text-editor { padding-top: .75rem; }
@media (max-width: 1023px) { .e-con.dp-sx-services__head { grid-template-columns: minmax(0, 1fr); } }

/* ──────────── 12. HomeHero (DP · Αρχική: hero) in a full-width container `dp-sx-homehero` ──────────── */
.elementor .e-con.dp-sx-homehero { --padding-left: 0px; --padding-right: 0px; --gap: 0px 0px; --row-gap: 0px; }
.elementor-widget-dp-home-hero { width: 100%; }
/* the Tailwind utilities of the Astro card (mt-8, mt-4, max-w-[40ch] mx-auto, mt-7 flex wrap centre gap-3) */
.dp-hero__h1 { margin-top: 2rem; }
.dp-hero__lead { margin: 1rem auto 0; max-width: 40ch; }
.dp-hero__actions { margin-top: 1.75rem; display: flex; flex-wrap: wrap; justify-content: center; gap: .75rem; }

/* ──────────── 13. Header and footer (Ultimate Addons templates) ──────────── */
/* the header bar sticks under the admin bar, on the page ground */
#masthead { position: sticky; top: 0; z-index: 40; background-color: var(--color-gesso); }
body.admin-bar #masthead { top: var(--wp-admin--admin-bar--height, 32px); }
@media (max-width: 600px) { body.admin-bar #masthead { top: 0; } }
.elementor-widget-dp-site-nav { width: 100%; }
.dp-nav__list { display: flex; align-items: center; gap: 2rem; list-style: none; margin: 0; padding: 0; height: 100%; }
.dp-nav__end { display: flex; align-items: center; gap: 1rem; }
.dp-nav__mobile { position: relative; display: none; }
.dp-nav__mobile > summary { list-style: none; cursor: pointer; padding: .5rem; margin-right: -.5rem; }
.dp-nav__mobile > summary::-webkit-details-marker { display: none; }
.dp-nav__panel { position: absolute; right: 0; top: 52px; width: min(88vw, 340px); background-color: var(--color-white); border: 1px solid var(--color-ink); --stroke: var(--color-ink); padding: 1.5rem; display: flex; flex-direction: column; gap: 1rem; z-index: 60; }
.dp-nav__panel-link { color: var(--color-ink); }
.dp-nav__panel-sub { list-style: none; margin: .75rem 0 0; padding: 0 0 0 1rem; display: flex; flex-direction: column; gap: .5rem; border-left: 1px solid var(--color-line); }
.dp-nav__panel-cta { margin-top: .5rem; }
@media (max-width: 767px) { .dp-nav__list { display: none; } .dp-nav__mobile { display: block; } }
@media (max-width: 639px) { .dp-nav__cta { display: none; } }
/* the footer: a black sheet; its boxed container lays out like .dp-footer__inner */
.e-con-boxed.dp-footer { display: flex; }
.e-con.dp-footer > .e-con-inner { min-height: clamp(460px, 68svh, 760px); display: grid; grid-template-rows: auto 1fr auto auto; padding-top: 2.5rem; padding-bottom: 1.25rem; gap: 0; }
.e-con.dp-footer__cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--spacing-gutter); grid-row: 1; }
.e-con.dp-footer__cols > .elementor-widget > .elementor-widget-container { display: flex; flex-direction: column; gap: .2rem; font-size: 1rem; line-height: 1.5; color: var(--color-on-deck-muted); }
.e-con.dp-footer__cols b { display: block; color: var(--color-white); font-weight: var(--font-weight-normal); }
.e-con.dp-footer__cols ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .2rem; }
.e-con.dp-footer .elementor-widget-dp-footer-mark { grid-row: 3; width: 100%; }
.e-con.dp-footer__legal { grid-row: 4; margin-top: 1.25rem; display: flex; flex-direction: row; justify-content: space-between; gap: 1rem 2rem; flex-wrap: wrap; font-size: var(--text-small); color: var(--color-on-deck-muted); padding-top: 1.25rem; border-top: 1px solid var(--color-deck-line); }
.e-con.dp-footer__legal > .elementor-widget { width: auto; }
.e-con.dp-footer .elementor-widget-text-editor a:not([class]) { text-decoration: none; }
.e-con.dp-footer .elementor-widget-text-editor a:not([class]):hover { color: var(--color-white); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
@media (max-width: 760px) {
  .e-con.dp-footer > .e-con-inner { min-height: 0; row-gap: 3.5rem; }
  .e-con.dp-footer__cols { grid-template-columns: 1fr 1fr; row-gap: 2rem; }
}

/* ──────────── 14. The remaining section layouts (step 8) ──────────── */
.e-con-boxed:is(.dp-sx-head, .dp-sx-edge, .dp-sx-method, .dp-sx-incl, .dp-sx-stack, .dp-sx-pair, .dp-sx-chapters, .dp-sx-case-head, .dp-sx-album-sheet, .dp-sx-album) { display: flex; grid-template-columns: none; gap: 0; }
.e-con-boxed.dp-sx-edge.dp-section { padding-block: var(--spacing-section) calc(var(--spacing-section) + 3.5rem); }
.e-con.dp-sx-nopt { padding-top: 0; }
.e-con.dp-sx-nopb { padding-bottom: 0; }
.elementor-element.dp-measure-34 { max-width: 34ch; }
.elementor-element.dp-measure-46 { max-width: 46ch; }
.elementor-element.dp-measure-52 { max-width: 52ch; }
/* a row of buttons */
.e-con.dp-btn-row { --flex-direction: row; --flex-wrap: wrap; --gap: .75rem .75rem; --row-gap: .75rem; --column-gap: .75rem; }
.e-con.dp-btn-row > .elementor-widget { width: auto; }
/* SectionHead: h2 left, ghost link right, bottom line */
.e-con.dp-sx-sechead { --flex-direction: row; --flex-wrap: wrap; --justify-content: space-between; --align-items: flex-end; --gap: 1.5rem 1.5rem; --row-gap: 1.5rem; margin-bottom: 3rem; }
.e-con.dp-sx-sechead > .elementor-widget { width: auto; }
.e-con.dp-sx-stack > .e-con-inner { display: flex; flex-direction: column; gap: 0; }
/* PageHead: h1 8 / text 4, items on the bottom line, pt-24 pb-12; a rule or a meta row under it */
.e-con.dp-sx-head > .e-con-inner { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: 2rem 3rem; align-items: end; padding-top: 6rem; }
.e-con.dp-sx-head__side { --align-items: flex-start; --gap: 1.25rem 1.25rem; --row-gap: 1.25rem; padding-bottom: .25rem; }
.e-con.dp-sx-head .dp-sx-head__rule, .e-con.dp-sx-head__meta { grid-column: 1 / -1; margin-top: 1rem; }
.e-con.dp-sx-head__meta { --flex-direction: row; --flex-wrap: wrap; --justify-content: space-between; --gap: 1rem 1rem; padding: 1rem 0; border-top: 1px dotted var(--color-ink); }
.e-con.dp-sx-head__meta > .elementor-widget { width: auto; }
@media (max-width: 1023px) { .e-con.dp-sx-head > .e-con-inner { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 767px) { .e-con.dp-sx-head > .e-con-inner { padding-top: 4rem; } }
/* EdgeCard: the 12-column grid of dp.css on the inner box; the card hangs below the photo */
.e-con.dp-sx-edge > .e-con-inner { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--spacing-gutter); }
.e-con.dp-sx-edge__card { margin: 0 0 -3.5rem; align-self: end; --row-gap: 1rem; --gap: 1rem 1rem; }
.dp-par--up { --par: -30px; }
@media (max-width: 900px) { .e-con.dp-sx-edge__card { margin: -2.5rem 0 0; } }
/* TwoSizes */
.e-con.dp-sx-two { position: relative; padding-bottom: 3rem; }
.e-con .elementor-widget.dp-sx-two__big { width: 86%; }
.e-con .elementor-widget.dp-sx-two__small { position: absolute; right: 0; bottom: 0; width: 32%; z-index: 1; --par: 36px; }
/* Method: the deck (mt-16 above it), heading + steps 7, photo 5 on the right */
.e-con.dp-sx-method { margin-top: 4rem; }
.e-con.dp-sx-method > .e-con-inner { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 3rem 3rem; }
.e-con.dp-sx-method__text { --gap: 3rem 3rem; --row-gap: 3rem; }
.dp-method { list-style: none; margin: 0; padding: 0; border-top: 1px dotted var(--color-on-deck-muted); }
.dp-method > li { padding: 1.75rem 0; border-bottom: 1px dotted var(--color-deck-line); }
.dp-method h3 { font-family: var(--font-display); font-weight: var(--font-weight-thin); font-size: var(--text-h3); line-height: 1.18; letter-spacing: -0.015em; margin: 0; }
.dp-method p { margin: .5rem 0 0; max-width: 48ch; color: var(--color-on-deck-muted); }
@media (max-width: 1023px) { .e-con.dp-sx-method > .e-con-inner { grid-template-columns: minmax(0, 1fr); } .e-con.dp-sx-method__photo { order: -1; } }
/* triptych of cards (StepCards, TeamCards): dp.css grid on a full container */
.e-con.dp-triptych { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.e-con.dp-triptych--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 960px) { .e-con.dp-triptych { grid-template-columns: minmax(0, 1fr); } .e-con.dp-triptych--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .e-con.dp-triptych--4 { grid-template-columns: minmax(0, 1fr); } }
.e-con.dp-card--step { --dp-pad: .75rem; padding-bottom: 2rem; }
.e-con.dp-card--step > .elementor-widget:not(:first-child) { padding-inline: .75rem; }
.e-con.dp-card--team > .elementor-widget:nth-child(3) { margin-top: -.5rem; }
.elementor-widget-heading.dp-card__title .elementor-heading-title, .elementor-widget-heading.dp-work__name .elementor-heading-title { margin: 0; }
.elementor-widget-text-editor.dp-card__body { font-size: var(--text-body); line-height: 1.6; }
/* Included: photo 5 / heading + two-column list 7, bottom line */
.e-con.dp-sx-incl > .e-con-inner { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 2.5rem 3.5rem; align-items: end; }
.e-con.dp-sx-incl__text { --gap: 3rem 3rem; --row-gap: 3rem; }
.dp-included { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; column-gap: 2.5rem; }
.dp-included > li { padding: 1.5rem 0; border-top: 1px solid var(--color-ink); font-family: var(--font-display); font-weight: var(--font-weight-light); font-size: var(--text-title); line-height: 1.28; }
@media (max-width: 1023px) { .e-con.dp-sx-incl > .e-con-inner { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 639px) { .dp-included { grid-template-columns: 1fr; } }
/* PhotoCards (dp-works) as native link containers */
.e-con.dp-works { display: grid; grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr)); gap: 3rem 20px; }
.e-con.dp-works--2 { --cols: 2; } .e-con.dp-works--3 { --cols: 3; } .e-con.dp-works--4 { --cols: 4; }
.e-con.dp-works--stepped > .dp-work:nth-child(even) { margin-top: 3rem; }
@media (max-width: 960px) { .e-con.dp-works { grid-template-columns: repeat(min(var(--cols, 4), 2), minmax(0, 1fr)); } }
@media (max-width: 560px) { .e-con.dp-works { grid-template-columns: minmax(0, 1fr); } .e-con.dp-works--stepped > .dp-work:nth-child(even) { margin-top: 0; } }
a.e-con.dp-work { --gap: 10px 10px; --row-gap: 10px; color: inherit; }
.elementor-widget-heading.dp-work__name { margin-top: 8px; }
.elementor-widget-heading.dp-work__name .elementor-heading-title { font-family: var(--font-display); font-weight: var(--font-weight-light); font-size: var(--text-title); line-height: 1.2; }
.elementor-widget-text-editor.dp-work__meta { font-size: var(--text-small); color: var(--color-muted); }
a.e-con.dp-work:hover .dp-outline { --stroke: var(--color-ink); }
a.e-con.dp-work:hover .dp-outline img { transform: scale(1.05); }
/* project pages: a 5 / 7 pair (intro, scope), the case head, the chapters, the album sheet */
.e-con.dp-sx-pair > .e-con-inner { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 2rem 3rem; }
.e-con.dp-sx-pair--album > .e-con-inner { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
@media (max-width: 1023px) { .e-con:is(.dp-sx-pair, .dp-sx-pair--album) > .e-con-inner { grid-template-columns: minmax(0, 1fr); } }
.dp-paras p + p { margin-top: 1.25rem; }
.dp-scope { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--color-ink); counter-reset: dp-scope; }
.dp-scope > li { counter-increment: dp-scope; display: grid; grid-template-columns: 4rem 1fr; gap: 1.5rem; align-items: baseline; padding: 1.4rem .75rem 1.4rem 0; border-bottom: 1px dotted var(--color-line); font-family: var(--font-display); font-weight: var(--font-weight-light); font-size: var(--text-title); line-height: 1.28; }
.dp-scope > li::before { content: counter(dp-scope, decimal-leading-zero); font-family: var(--font-body); font-weight: var(--font-weight-normal); font-size: var(--text-small); color: var(--color-muted); font-variant-numeric: tabular-nums; }
.dp-scope-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--color-ink); }
.dp-scope-list > li { padding: .75rem 0; border-bottom: 1px dotted var(--color-line); }
.e-con.dp-sx-case-head > .e-con-inner { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 2.5rem 3rem; align-items: end; padding-bottom: 3.5rem; }
.e-con.dp-sx-case-head .dp-sx-back { grid-column: 1 / -1; margin-bottom: -.5rem; }
.e-con.dp-sx-case-head__text { --gap: 2rem 2rem; --row-gap: 2rem; }
@media (max-width: 1023px) { .e-con.dp-sx-case-head > .e-con-inner { grid-template-columns: minmax(0, 1fr); } }
.e-con.dp-sx-chapters { padding-top: 0; }
.e-con.dp-show { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 40px 48px; align-items: center; padding: 56px 0; border-bottom: 1px dotted var(--color-line); }
.e-con.dp-show:first-child { border-top: 1px solid var(--color-ink); }
.e-con.dp-show:last-child { border-bottom: 0; }
.e-con.dp-show__text { --gap: 1rem 1rem; --row-gap: 1rem; }
@media (max-width: 960px) { .e-con.dp-show { grid-template-columns: minmax(0, 1fr); gap: 24px; padding: 40px 0; } }
.e-con.dp-sx-album-cover { --padding-left: var(--spacing-frame); --padding-right: var(--spacing-frame); padding-top: 1.5rem; max-width: calc(var(--container-site) + 2 * var(--spacing-gutter)); margin-inline: auto; }
.elementor-widget-image.dp-album-cover { width: 100%; }
.elementor-widget-image.dp-album-cover > .elementor-widget-container { position: relative; aspect-ratio: 16 / 8; min-height: 420px; max-height: 82svh; overflow: hidden; clip-path: var(--shape-cut-tl-br); background-color: var(--color-line); }
.elementor-widget-image.dp-album-cover img { width: 100%; height: 100%; object-fit: cover; max-width: none; }
@media (max-width: 639px) { .elementor-widget-image.dp-album-cover > .elementor-widget-container { min-height: 300px; aspect-ratio: 4 / 5; } }
.e-con.dp-album__sheet { --dp-pad: clamp(1.5rem, 1rem + 2vw, 3rem); --padding-top: var(--dp-pad); --padding-right: var(--dp-pad); --padding-bottom: var(--dp-pad); --padding-left: var(--dp-pad); margin-inline: clamp(0px, 4vw, 4rem); }
.e-con.dp-sx-album-sheet__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 2rem 3rem; align-items: end; margin-top: 1.5rem; }
.e-con.dp-sx-album-sheet__text { --gap: 1.5rem 1.5rem; --row-gap: 1.5rem; }
@media (max-width: 1023px) { .e-con.dp-sx-album-sheet__grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 639px) { .e-con.dp-album__sheet { margin-inline: 0; } }
.elementor-widget-text-editor.dp-sx-back .dp-back { padding-top: 2rem; }
.dp-album__sheet .elementor-widget-text-editor.dp-sx-back .dp-back { padding-top: 0; }
.elementor-widget:is(.elementor-widget-dp-album, .elementor-widget-dp-project-next, .elementor-widget-dp-project-facts, .elementor-widget-dp-wedge-hero) { width: 100%; }
.dp-next__cta { margin-top: 1rem; display: inline-flex; align-items: center; gap: .5rem; }
/* the contact details list in the contact hero */
.dp-contact-list { margin: 0; padding-top: 1.5rem; display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem 2rem; border-top: 1px dotted var(--color-ink); }
.dp-contact-list dt { font-size: var(--text-small); font-weight: var(--font-weight-normal); color: var(--color-muted); }
.dp-contact-list dd { margin: .25rem 0 0; font-size: 15px; font-variant-numeric: tabular-nums; }
.dp-contact-list__big, .dp-contact-list__big a { font-family: var(--font-display); font-weight: var(--font-weight-light); font-size: var(--text-title); line-height: 1.28; text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.dp-contact-list__wide { grid-column: 1 / -1; }
@media (max-width: 639px) { .dp-contact-list { grid-template-columns: 1fr; } }
.e-con.dp-sx-hero--rule { border-bottom: 0; }
.e-con.dp-sx-hero--rule > .e-con-inner { border-bottom: 1px dotted var(--color-ink); }
/* the stores on the contact page: two cards inside a split's text */
.e-con.dp-stores { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 1.5rem; }
@media (max-width: 640px) { .e-con.dp-stores { grid-template-columns: 1fr; } }