/* ==========================================================================
   Divine Foodz — component styles
   Tokens (colors, type, spacing) come from theme.json as --wp--preset--* vars.
   Desktop layout (Figma 1920). Tablet and mobile rules: responsive.css.
   ========================================================================== */

:root {
	--df-teal: var(--wp--preset--color--teal, #016c6e);
	--df-deep: var(--wp--preset--color--deep-teal, #083637);
	--df-ink: var(--wp--preset--color--ink, #0c1414);
	--df-muted: var(--wp--preset--color--muted, #5c6e6e);
	--df-surface: var(--wp--preset--color--surface, #f2f2f2);
	--df-line: var(--wp--preset--color--line, #e6eded);
	--df-sky: var(--wp--preset--color--sky, #d8eefd);
	--df-orange: var(--wp--preset--color--orange, #eb3d04);
	--df-mint: var(--wp--preset--color--mint, #bfd9d9);
	--df-gap: 16px;
	--df-r-xl: 32px;
	--df-r-l: 28px;
	--df-r-m: 24px;
	--df-r-s: 20px;
	--df-pad-xl: clamp(28px, 4.2vw, 56px);
}

html { scroll-behavior: smooth; }
body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
img { max-width: 100%; height: auto; }

/* Site frame: header, main and footer all sit in the 1129px column, 16px apart. */
.wp-site-blocks > *,
.df-main > *,
.df-main .wp-block-post-content > * { margin-block: 0 !important; }
.wp-site-blocks > * + *,
.df-main > * + *,
.df-main .wp-block-post-content > * + * { margin-block-start: var(--df-gap) !important; }
.df-site-header,
.df-site-footer {
	box-sizing: border-box; width: 100%; margin-inline: auto !important;
	padding-inline: var(--wp--style--root--padding-left, 24px);
	max-width: calc(1129px + 2 * var(--wp--style--root--padding-left, 24px));
}

/* Generic helpers ---------------------------------------------------------- */
.df-grid { display: grid; gap: var(--df-gap); }
.df-grid > * { margin: 0 !important; min-width: 0; }
.df-muted { color: var(--df-muted); }
.df-lead { font-size: var(--wp--preset--font-size--body-l); }
.df-justify { text-align: justify; }
.df-label { font-size: 13px; line-height: 16px; font-weight: 500; letter-spacing: .06em; color: var(--df-teal); }
.df-main h1, .df-main h2, .df-main h3, .df-main h4, .df-main p { margin: 0; }

/* Buttons (Figma: Button/Primary, Secondary, On Dark) ---------------------- */
.wp-block-buttons { gap: 12px; }
.wp-block-button .wp-block-button__link {
	display: inline-flex; align-items: center; gap: 10px;
	border: 1.25px solid transparent;
	transition: background-color .2s ease, color .2s ease, border-color .2s ease, transform .2s ease;
}
.wp-block-button .wp-block-button__link::after { content: "→"; transition: transform .2s ease; }
.wp-block-button .wp-block-button__link:hover::after { transform: translateX(3px); }
.wp-block-button .wp-block-button__link:focus-visible { outline: 2px solid var(--df-orange); outline-offset: 3px; }

.is-style-df-primary .wp-block-button__link { background: var(--df-teal); color: #fff; }
.is-style-df-primary .wp-block-button__link:hover { background: var(--df-deep); }
.is-style-df-light .wp-block-button__link { background: var(--df-sky); color: var(--df-teal); }
.is-style-df-light .wp-block-button__link:hover { background: #fff; }
.is-style-df-white .wp-block-button__link { background: #fff; color: var(--df-teal); border-color: var(--df-teal); }
.is-style-df-white .wp-block-button__link:hover { background: var(--df-sky); }
.is-style-df-outline-light .wp-block-button__link { background: transparent; color: #fff; border-color: #fff; }
.is-style-df-outline-light .wp-block-button__link:hover { background: rgba(255,255,255,.12); }
.df-ghost .wp-block-button__link { border-color: transparent; }
.df-ghost .wp-block-button__link:hover { border-color: rgba(255,255,255,.4); background: transparent; }

/* Header / pill navigation ------------------------------------------------- */
.df-site-header { position: sticky; top: 12px; z-index: 50; }
.admin-bar .df-site-header { top: 44px; }
.df-nav {
	background: #fff; border-radius: 999px;
	padding: 12px 12px 12px 28px !important;
	gap: 24px; transition: box-shadow .25s ease;
}
.df-site-header.is-stuck .df-nav { box-shadow: 0 8px 30px rgba(12, 20, 20, .08); }
.df-logo { margin: 0 !important; flex-shrink: 0; }
.df-logo img { display: block; }

.df-menu { font-size: 16px; line-height: 23px; }
.df-menu .wp-block-navigation__container { gap: 26px; }
.df-menu .wp-block-navigation-item__content { color: #000; transition: color .2s ease; }
.df-menu .wp-block-navigation-item__content:hover,
.df-menu .wp-block-navigation-item__content[aria-current="page"] { color: var(--df-teal); }

.df-nav__actions { gap: 16px; flex-shrink: 0; }
.df-lang { margin: 0; font-size: 13px; line-height: 16px; font-weight: 500; letter-spacing: 1.04px; color: var(--df-ink); }
.df-nav__cta .wp-block-button__link { padding: 13px 24px; gap: 8px; }

/* Desktop: show the menu inline. Below 1024px it becomes the overlay. */
@media (min-width: 1025px) {
	.df-menu .wp-block-navigation__responsive-container-open { display: none !important; }
	.df-menu .wp-block-navigation__responsive-container:not(.is-menu-open) {
		display: block; position: relative; width: 100%; z-index: auto; background: inherit;
	}
	.df-menu .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__responsive-container-close { display: none; }
}

/* Shared surfaces ---------------------------------------------------------- */
.df-card {
	background: var(--df-surface); border-radius: var(--df-r-l);
	padding: 36px; display: flex; flex-direction: column; justify-content: space-between; gap: 24px;
}
.df-card > * { margin: 0 !important; }
.df-card__text > * + * { margin-top: 10px !important; }
.df-card__text p { font-size: var(--wp--preset--font-size--body-l); }
.df-card--tall { min-height: 308px; }
.df-panel { border-radius: var(--df-r-xl); padding: var(--df-pad-xl); }
.df-panel--teal { background: var(--df-teal); color: #fff; }
.df-panel--deep { background: var(--df-deep); color: #fff; }
.df-panel--surface { background: var(--df-surface); }
.df-panel--teal h2, .df-panel--teal h3, .df-panel--deep h2, .df-panel--deep h3 { color: #fff; }

.df-icon { margin: 0 !important; width: 65px; height: 65px; border-radius: 50%; background: #fff; display: flex !important; align-items: center; justify-content: center; flex-shrink: 0; }
.df-icon img { width: auto; max-width: 60%; max-height: 70%; display: block; }
.df-icon--sm { width: 46px; height: 46px; }

/* 01 Hero ------------------------------------------------------------------ */
.df-hero.wp-block-cover { border-radius: var(--df-r-xl); overflow: hidden; padding: var(--df-pad-xl); min-height: 560px; }
.df-hero .wp-block-cover__image-background { border-radius: var(--df-r-xl); }
.df-hero .wp-block-cover__inner-container { width: 100%; max-width: none; }
.df-hero .wp-block-cover__inner-container > * { margin-left: 0 !important; margin-right: 0 !important; max-width: none; }
.df-hero__title { color: #fff; font-size: var(--wp--preset--font-size--display) !important; line-height: 1.03 !important; letter-spacing: -1.6px !important; }
.df-hero .df-hero__lead { margin-top: 24px !important; max-width: 545px; font-size: 20px; line-height: 27px; font-weight: 600; color: #fff; }
.df-hero__actions { margin-top: 40px !important; }

/* 02 Operations ------------------------------------------------------------ */
.df-ops { grid-template-columns: repeat(4, minmax(0, 1fr)); padding-block: 16px; }

/* 03 Positioning ----------------------------------------------------------- */
.df-positioning { padding: 37px 0 34px 8px; }
.df-positioning > h2 { max-width: 860px; }
.df-two-col { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 56px; margin-top: 36px !important; text-align: justify; color: #000; }
.df-two-col p { max-width: 530px; }

/* 04 Consolidation --------------------------------------------------------- */
.df-consolidation { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.df-consolidation .df-panel { padding: 48px; display: flex; flex-direction: column; min-height: 412px; }
.df-consolidation .df-panel > * { margin: 0 !important; max-width: 480px; }
.df-consolidation .df-panel > h2 { margin-bottom: 20px !important; }
.df-consolidation .df-panel > .wp-block-buttons { margin-top: 16px !important; }
.df-services { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 1fr; }
.df-service {
	background: var(--df-surface); border: 1px solid var(--df-line); border-radius: var(--df-r-s);
	padding: 22px; min-height: 127px; display: flex; flex-direction: column; justify-content: space-between; gap: 12px;
}
.df-service > * { margin: 0 !important; }

/* 05 Range ----------------------------------------------------------------- */
.df-range-head { padding: 20px 8px 8px 20px; gap: 24px; }
.df-range-head__text { max-width: 700px; }
.df-range-head__text > p { margin-top: 20px !important; color: #000; }
.df-cats { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: minmax(222px, 1fr); padding-block: 21px; }
.df-cat {
	position: relative; overflow: hidden; isolation: isolate;
	background: var(--df-surface); border-radius: var(--df-r-m); padding: 26px;
	display: flex; flex-direction: column; justify-content: space-between; gap: 16px;
	transition: transform .3s ease;
}
.df-cat > * { margin: 0 !important; position: relative; z-index: 1; }
.df-cat h3 { max-width: 100%; }
.df-cat__img { position: absolute !important; inset: 0; z-index: 0 !important; pointer-events: none; }
.df-cat__img img { position: absolute; max-width: none; transition: transform .5s ease; transform-origin: center; }
/* Image crops copied from Figma (left, top, width, height as % of the card) */
.df-cat--bakery     .df-cat__img img { left: 29.01%; top: -39.85%; width: 91.1%;   height: 130.36%; }
.df-cat--chocolate  .df-cat__img img { left: 34.08%; top: 7.28%;   width: 75.58%;  height: 64.67%; }
.df-cat--fruits     .df-cat__img img { left: auto !important; right: -7% !important; top: -9% !important; width: 72% !important; height: 82% !important; object-fit: contain !important; object-position: right top !important; }
.df-cat--eggs-dairy .df-cat__img img { left: 34.44%; top: -33.18%; width: 76.63%;  height: 118.35%; }
.df-cat--sauces     .df-cat__img img { left: -2.6%;  top: -53.23%; width: 109.99%; height: 117.49%; }
.df-cat--canned     .df-cat__img img { left: auto !important; right: -5% !important; top: -7% !important; width: 66% !important; height: 82% !important; object-fit: contain !important; object-position: right top !important; }
.df-cat--beverages  .df-cat__img img { left: 50%;    top: -37.08%; width: 49.15%;  height: 113.5%; }
.df-cat:hover .df-cat__img img { transform: scale(1.04); }
.df-cat--cta { background: var(--df-orange); color: #fff; justify-content: flex-start; gap: 6px; }
.df-cat--cta h2 { color: #fff; max-width: 244px; }
.df-cat--cta h2 a { color: inherit; }
.df-cat--cta h2 a::after { content: ""; position: absolute; inset: 0; z-index: 2; }

/* 06 Wide photo ------------------------------------------------------------ */
.df-wide-photo { margin: 0 !important; border-radius: var(--df-r-xl); overflow: hidden; background: #e7ecec; }
.df-wide-photo img { display: block; width: 100%; height: 398px; object-fit: cover; object-position: center; }

/* 07 Delish ---------------------------------------------------------------- */
.df-delish { display: flex; align-items: center; justify-content: space-between; gap: 56px; }
.df-delish__text { max-width: 600px; display: flex; flex-direction: column; gap: 24px; }
.df-delish__text > * { margin: 0 !important; max-width: 560px; }
.df-delish__logo img { display: block; }
.df-delish__photo { margin: 0 !important; flex: 0 0 361px; height: 340px; border-radius: var(--df-r-l); overflow: hidden; background: #e7ecec; }
.df-delish__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 92% center; }

/* 08 Why ------------------------------------------------------------------- */
.df-why { padding: 20px 0 0 8px; }
.df-why > h2 { padding-inline: 20px; }
.df-why__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: minmax(216px, 1fr); padding-block: 24px; margin-top: 20px !important; }
.df-card--why { padding: 32px; border-radius: var(--df-r-m); color: #000; }
.df-why__photo { margin: 0 !important; border-radius: var(--df-r-m); overflow: hidden; }
.df-why__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* 09 CTA ------------------------------------------------------------------- */
.df-cta { padding: 90px 80px; display: flex; flex-direction: column; align-items: center; gap: 28px; text-align: center; }
.df-cta > * { margin: 0 !important; }
.df-cta h2 { font-size: var(--wp--preset--font-size--heading-xl); line-height: 1.13; letter-spacing: -.69px; }
.df-cta__lead { max-width: 620px; font-size: clamp(19px, 2vw, 24px); line-height: 1.3; }

/* Footer ------------------------------------------------------------------- */
.df-footer {
	background: var(--df-teal); color: #fff; border-radius: var(--df-r-xl);
	padding: 64px 64px 44px; display: flex; flex-direction: column; gap: 52px;
}
.df-footer > * { margin: 0 !important; }
.df-footer a { color: #fff; }
.df-footer a:hover { color: var(--df-sky); }
.df-footer__cols { display: grid; grid-template-columns: 330px 210px 210px; justify-content: space-between; gap: 32px; }
.df-footer__about > * { margin: 0 !important; }
.df-footer__about p { margin-top: 20px !important; font-size: 18px; text-align: justify; }
.df-footer__logo img { display: block; }
.df-footer__list { list-style: none; padding: 0; margin: 0 !important; font-size: 14px; line-height: 22px; display: flex; flex-direction: column; gap: 9px; }
.df-footer__list li { margin: 0; }
.df-footer__divider.wp-block-separator { border: 0; border-top: 1px solid #12595b; opacity: 1; width: 100%; }
.df-footer__legal { font-size: 14px; line-height: 22px; color: #a9c4c4; gap: 12px; }
.df-footer__legal p { margin: 0; }

/* Placeholder pages / prose ------------------------------------------------ */
.df-soon { min-height: 320px; display: flex; flex-direction: column; justify-content: flex-end; gap: 12px; }
.df-soon > * { margin: 0 !important; }
.df-prose { padding: 48px 8px !important; }

/* Scroll reveal (Figma: fade up 32px, ~0.6s ease-out) ---------------------- */
.js .df-reveal { opacity: 0; translate: 0 32px; transition: opacity .6s ease-out, translate .6s ease-out; }
.js .df-reveal.is-visible { opacity: 1; translate: 0 0; }
@media (prefers-reduced-motion: reduce) {
	.js .df-reveal { opacity: 1; translate: none; transition: none; }
	html { scroll-behavior: auto; }
}
.editor-styles-wrapper .df-reveal { opacity: 1 !important; translate: none !important; }

/* ==========================================================================
   Inner pages — About, Products, Export & Consolidation, Delish, Contact, 404
   ========================================================================== */

html, body { overflow-x: clip; }
.df-site-footer { position: relative; z-index: 2; }

/* Heroes */
.df-hero--about .df-hero__title    { max-width: 1017px; }
.df-hero--products .df-hero__title { max-width: 784px; }
.df-hero--export .df-hero__title   { max-width: 771px; }
.df-hero--delish .df-hero__title   { max-width: 891px; line-height: 1.25 !important; }
.df-hero--products .df-hero__lead,
.df-hero--contact .df-hero__lead   { max-width: 620px; }
.df-hero--contact.wp-block-cover   { min-height: 480px; }
.df-hero--contact .df-hero__title  { font-size: clamp(44px, 6vw, 76px) !important; line-height: 1.05 !important; letter-spacing: -1.9px !important; }

/* Intro block: big heading + one or two text columns */
.df-intro { padding: 36px 20px 34px; color: #000; }
.df-intro > * { margin: 0 !important; }
.df-intro > * + * { margin-top: 32px !important; }
.df-intro > h2, .df-intro__text { max-width: 860px; }
.df-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 56px; }
.df-col > * { margin: 0 !important; }
.df-col > * + * { margin-top: 16px !important; }
.df-accent { color: var(--df-teal); font-size: 20px; line-height: 27px; font-weight: 600; }

/* Section: padded title + content */
.df-section > * { margin: 0 !important; }
.df-section > * + * { margin-top: 20px !important; }
.df-section__title { padding: 28px 20px 4px; max-width: 900px; color: #000; }
.df-section--catalog > * + * { margin-top: 24px !important; }

/* Grids */
.df-g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.df-g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.df-g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.df-g6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.df-stack { display: flex; flex-direction: column; gap: 16px; }
.df-stack > * { margin: 0 !important; flex: 1 1 auto; }

/* Icons: Figma glyphs sit at ~52% of the white circle */
.df-icon img[src*="glyph-"] { width: 52%; height: 52%; max-width: none; max-height: none; }
.df-icon--md { width: 56px; height: 56px; }

/* Card variants */
.df-card h3, .df-card h4 { color: #000; }
.df-card--h280 { min-height: 280px; }
.df-card--h303 { min-height: 303px; }
.df-card--h304 { min-height: 304px; }
.df-card--teal { background: var(--df-teal); }
.df-card--teal h3 { color: var(--df-sky); }
.df-card--teal p { color: #fff; }
.df-card--why { min-height: 216px; }
.df-card--sky { background: var(--df-sky); }
.df-card--big-title h3 { font-size: clamp(26px, 2.4vw, 32px); line-height: 1.05; letter-spacing: -.16px; }

/* Numbered cards (01 … 06) */
.df-num-card {
	background: var(--df-surface); border-radius: var(--df-r-s); padding: 22px;
	display: flex; flex-direction: column; justify-content: space-between; gap: 18px; min-height: 162px; color: #000;
}
.df-num-card > *, .df-num-card__text > * { margin: 0 !important; }
.df-num-card__text > * + * { margin-top: 8px !important; }
.df-num-card h4 { font-size: 20px; line-height: 27px; font-weight: 600; color: #000; }
.df-num-card--bold .df-label { font-size: 16px; font-weight: 700; letter-spacing: .06em; }
.df-track { grid-template-rows: minmax(193px, auto) minmax(162px, auto); }

/* About — Vision & Mission */
.df-vm { display: flex; flex-direction: column; gap: 28px; padding: 48px; min-height: 335px; }
.df-vm > *, .df-vm__text > * { margin: 0 !important; }
.df-vm__text > * + * { margin-top: 14px !important; }
.df-vm p { color: #fff; }

/* Photo panels (cover block with text at the bottom) */
.df-photo-panel.wp-block-cover { border-radius: var(--df-r-xl); overflow: hidden; padding: 48px; }
.df-photo-panel .wp-block-cover__image-background { border-radius: var(--df-r-xl); }
.df-photo-panel .wp-block-cover__inner-container { width: 100%; }
.df-photo-panel .wp-block-cover__inner-container > * { margin: 0 !important; max-width: none; }
.df-photo-panel .wp-block-cover__inner-container > * + * { margin-top: 20px !important; }
.df-photo-panel .wp-block-cover__inner-container > .wp-block-buttons { margin-top: 32px !important; }
.df-photo-panel__title { color: #fff; font-size: clamp(30px, 3vw, 40px) !important; line-height: 1 !important; letter-spacing: -.4px !important; }
.df-photo-panel__title--xl { font-size: clamp(34px, 3.6vw, 48px) !important; line-height: .96 !important; }
.df-photo-panel p { color: #fff; }
.df-photo-panel--flags .wp-block-cover__image-background { object-position: 21% 50%; }

/* Check list (Export — what you can consolidate) */
.df-check { background: var(--df-sky); border-radius: var(--df-r-s); padding: 22px; display: flex; align-items: center; gap: 16px; min-height: 94px; }
.df-check > * { margin: 0 !important; }
.df-check__icon { flex: 0 0 30px; }
.df-check__icon img { width: 30px; height: 30px; display: block; }
.df-check p { font-size: 16px; line-height: 27px; font-weight: 600; color: #000; }

/* Who we work with */
.df-chip { background: var(--df-surface); border-radius: var(--df-r-s); padding: 22px; display: flex; align-items: center; gap: 16px; min-height: 125px; }
.df-chip > * { margin: 0 !important; }
.df-chip h4 { font-size: 20px; line-height: 27px; font-weight: 600; color: #000; }

/* Client logos */
.df-logo-tile { background: var(--df-surface); border-radius: var(--df-r-s); height: 102px; padding: 16px; display: flex; align-items: center; justify-content: center; }
.df-logo-tile > * { margin: 0 !important; }
.df-logo-tile .df-label { text-transform: uppercase; letter-spacing: 1.04px; }
.df-logo-tile img { max-height: 70px; width: auto; object-fit: contain; }

/* Photo inside a card grid */
.df-grid-photo { margin: 0 !important; border-radius: var(--df-r-l); overflow: hidden; min-height: 303px; }
.df-grid-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Products — category cards */
.df-pcat {
	position: relative; overflow: hidden; isolation: isolate;
	background: var(--df-surface); border-radius: var(--df-r-m); padding: 26px;
	display: flex; flex-direction: column; justify-content: space-between; gap: 22px; min-height: 359px; color: #000;
}
.df-pcats > .df-pcat:nth-child(-n+4) { min-height: 414px; }
.df-pcat > * { margin: 0 !important; position: relative; z-index: 1; }
.df-pcat h3 { color: #000; }
.df-pcat__img { position: absolute !important; top: 0; right: 0; width: 72%; height: 150px; z-index: 0 !important; pointer-events: none; }
.df-pcat__img img { width: 100%; height: 100%; object-fit: contain; object-position: right top; }
.df-pcat--cta { background: var(--df-orange); }
.df-pcat--cta h3, .df-pcat--cta p { color: #fff; }
.df-pcat--cta .df-card__text p { font-size: 16px; }
.df-pcat--cta .df-card__text > * + * { margin-top: 8px !important; }

/* Products — catalogue */
.df-filters { display: flex; flex-wrap: wrap; gap: 10px; }
.df-filter, .df-tab {
	appearance: none; border: 0; cursor: pointer; display: inline-flex; align-items: center; gap: 8px;
	background: var(--df-sky); color: var(--df-teal); border-radius: 999px; padding: 16px 30px;
	font: 500 15px/20px var(--wp--preset--font-family--roboto); transition: background-color .2s ease, color .2s ease;
}
.df-filter span { font-weight: 400; }
.df-filter:hover, .df-tab:hover { background: #c4e4fb; }
.df-filter.is-active, .df-tab.is-active { background: var(--df-teal); color: #fff; }
.df-filter:focus-visible, .df-tab:focus-visible { outline: 2px solid var(--df-orange); outline-offset: 3px; }
.df-products { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-top: 24px; }
.df-product { background: var(--df-surface); border-radius: var(--df-r-m); padding: 22px; display: flex; flex-direction: column; gap: 18px; }
.df-product[hidden] { display: none; }
.df-product__img { background: var(--df-sky); border-radius: 16px; height: 170px; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.df-product__img img { width: 100%; height: 100%; object-fit: contain; }
/* Placeholder when a product has no photo yet: category icon, not a stand-in photo. */
.df-product__img img.df-product__img--generic { width: 56px; height: 56px; opacity: .4; }
.df-product__img span, .df-product__type, .df-product__specs dt, .df-field label {
	font-size: 13px; line-height: 16px; font-weight: 500; letter-spacing: 1.04px; text-transform: uppercase; color: var(--df-teal);
}
.df-product__text > * { margin: 0; }
.df-product__text h3 { margin-top: 8px; font-size: 26px; line-height: 32px; letter-spacing: -.13px; color: #000; }
.df-product__specs { background: #fff; border-radius: 14px; padding: 12px 16px; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.df-product__specs div { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.df-product__specs dd { margin: 0; font-size: 16px; line-height: 22px; font-weight: 500; color: #000; text-align: right; }
.df-product .wp-block-button { margin-top: auto; }
.df-catalog__empty { margin-top: 16px; }

/* Delish — product range */
.df-range-card { background: var(--df-surface); border-radius: var(--df-r-m); padding: 22px; display: flex; flex-direction: column; gap: 18px; min-height: 410px; color: #000; }
.df-range-card > * { margin: 0 !important; }
.df-range-card h3 { color: #000; }
.df-range-card__img { height: 170px; border-radius: 16px; overflow: hidden; }
.df-range-card__img img { width: 100%; height: 100%; object-fit: contain; display: block; }
.df-range-card--fruit-fillings .df-range-card__img img,
.df-range-card--spreads .df-range-card__img img { object-fit: cover; }
.df-range-card .df-card__text > * + * { margin-top: 8px !important; }

/* Delish — own label */
.df-own-label { display: flex; flex-direction: column; gap: 20px; padding: 48px; }
.df-own-label > * { margin: 0 !important; }
.df-own-label p { color: #fff; }
.df-own-label .df-pill {
	align-self: flex-start; background: var(--df-sky); color: var(--df-teal); border-radius: 999px; padding: 8px 14px;
	font-size: 13px; line-height: 16px; font-weight: 500; letter-spacing: 1.04px; text-transform: uppercase;
}
.df-own-label__steps { grid-auto-rows: 1fr; }
.df-own-label__steps .df-num-card { min-height: 130px; }

/* CTA used on inner pages */
.df-cta--page { padding: 80px 56px; gap: 24px; }
.df-cta--page h2 { max-width: 900px; }
.df-cta--page .df-cta__lead { max-width: 640px; }
.df-cta--page .wp-block-buttons { margin-top: 16px !important; }

/* Contact — enquiry forms */
.df-enquiry-wrap > * { margin: 0 !important; }
.df-enquiry { scroll-margin-top: 110px; }
.df-tabs { display: flex; flex-wrap: wrap; gap: 12px; }
.df-form-panel {
	margin-top: 24px; background: var(--df-surface); border-radius: var(--df-r-l); padding: 48px;
	display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 64px;
}
.df-form-panel[hidden] { display: none; }
.df-form-panel__intro h3 { margin: 0; font-size: 26px; line-height: 32px; letter-spacing: -.13px; color: #000; }
.df-form-panel__intro p { margin: 14px 0 0; font-size: 18px; color: #000; }
.df-notice { margin-top: 24px; background: var(--df-sky); border-radius: 16px; padding: 16px; font-size: 16px; color: #000; }
.df-notice--error { background: #fde4da; color: #7a2200; }
.df-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 16px; }
.df-field { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.df-field--wide, .df-check-field { grid-column: 1 / -1; }
.df-field label span { color: var(--df-orange); }
.df-field input, .df-field textarea {
	box-sizing: border-box; width: 100%; height: 48px; padding: 0 14px; border: 1.5px solid transparent; border-radius: 12px;
	background: #fff; color: var(--df-ink); font: 400 16px/23px var(--wp--preset--font-family--roboto);
	transition: border-color .2s ease, box-shadow .2s ease;
}
.df-field textarea { height: 112px; padding: 12px 14px; resize: vertical; }
.df-field input:focus, .df-field textarea:focus { outline: none; border-color: var(--df-teal); box-shadow: 0 0 0 3px rgba(1, 108, 110, .15); }
.df-check-field { display: flex; align-items: center; gap: 10px; font-size: 16px; line-height: 23px; color: #000; cursor: pointer; }
.df-check-field input { width: 20px; height: 20px; margin: 0; accent-color: var(--df-teal); }
.df-form .wp-block-button { margin-top: 28px; }
.df-form button.wp-block-button__link { cursor: pointer; font-family: inherit; }
.df-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Contact — offices */
.df-office {
	background: var(--df-surface); border-radius: var(--df-r-l); padding: 36px;
	display: flex; flex-direction: column; justify-content: space-between; gap: 24px; min-height: 612px; color: #000;
}
.df-office > * { margin: 0 !important; }
.df-office__photo { border-radius: 16px; overflow: hidden; height: 200px; }
.df-office__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.df-office__text > * { margin: 0 !important; }
.df-office__text > * + * { margin-top: 4px !important; }
.df-office__text h3 { color: #000; }
.df-office__text .df-office__actions { margin-top: 18px !important; }
.df-office a, .df-line a, .df-footer__list a { color: inherit; }

/* Contact — prefer to talk */
.df-talk { display: flex; flex-direction: column; gap: 20px; padding: 48px; min-height: 332px; }
.df-talk > * { margin: 0 !important; }
.df-talk p { color: #fff; }
.df-line { background: var(--df-sky); border-radius: var(--df-r-s); padding: 22px; display: flex; align-items: center; gap: 18px; min-height: 100px; }
.df-line > *, .df-line__text > * { margin: 0 !important; }
.df-line__text > * + * { margin-top: 4px !important; }
.df-line h4 { font-size: 20px; line-height: 27px; font-weight: 600; color: #000; }
.df-line p { color: var(--df-teal); font-size: 18px; }

/* 404 */
.is-style-df-grey .wp-block-button__link { background: var(--df-surface); color: var(--df-teal); font-weight: 700; }
.is-style-df-grey .wp-block-button__link:hover { background: var(--df-line); }
.is-style-df-orange .wp-block-button__link { background: var(--df-orange); color: #fff; font-weight: 700; }
.is-style-df-orange .wp-block-button__link:hover { background: #c93300; }
.df-404 { position: relative; min-height: 665px; }
.df-404 > * { margin: 0 !important; }
.df-404__text { position: relative; z-index: 1; padding: 120px 0 60px 56px; max-width: 760px; }
.df-404__text > * { margin: 0 !important; }
.df-404__title { color: var(--df-teal) !important; font-size: clamp(48px, 5.4vw, 96px) !important; line-height: .875 !important; letter-spacing: -1px !important; }
.df-404__text p { margin-top: 48px !important; max-width: 540px; }
.df-404__text .wp-block-buttons { margin-top: 45px !important; }
.df-404__plate { position: absolute !important; left: 80%; top: 36px; width: 776px; z-index: 0; pointer-events: none; }
.df-404__plate img { width: 776px; max-width: none; display: block; }

.wp-block-button__link { white-space: nowrap; }
.df-pcat--cta .wp-block-button__link { padding-inline: 19px; }

/* Products — category images: exact boxes and crops from Figma (box: left top width height; img: left top width height) */
.df-pcat .df-pcat__img { right: auto; overflow: hidden; }
.df-pcat .df-pcat__img img { position: absolute; max-width: none; object-fit: fill; }
.df-pcat--bakery     .df-pcat__img { left: 84px;   top: 26px; width: 187px; height: 104px; }
.df-pcat--bakery     .df-pcat__img img { left: 9.62%;  top: -50.01%; width: 109.09%; height: 196.15%; }
.df-pcat--chocolate  .df-pcat__img { left: 77px;   top: 26px; width: 192px; height: 142px; }
.df-pcat--chocolate  .df-pcat__img img { left: 18.76%; top: -0.32%;  width: 97.71%;  height: 86.37%; }
.df-pcat--fruits     .df-pcat__img { left: 80px !important;   top: 22px !important; width: 192px !important; height: 140px !important; }
.df-pcat--fruits     .df-pcat__img img { left: 0 !important;      top: 0 !important;       width: 100% !important;    height: 100% !important;   object-fit: contain !important; object-position: right top !important; }
.df-pcat--eggs-dairy .df-pcat__img { left: 111px;  top: 5px;  width: 159px; height: 136px; }
.df-pcat--eggs-dairy .df-pcat__img img { left: -0.1%;  top: -20.46%; width: 115.35%; height: 126.93%; }
.df-pcat--sauces     .df-pcat__img { left: 61.5px; top: 0;    width: 212px; height: 145px; }
.df-pcat--sauces     .df-pcat__img img { left: 0;      top: -12.6%;  width: 100%;    height: 107.95%; }
.df-pcat--canned     .df-pcat__img { left: 80px !important;   top: 10px !important; width: 192px !important; height: 134px !important; }
.df-pcat--canned     .df-pcat__img img { left: 0 !important;      top: 0 !important;       width: 100% !important;    height: 100% !important;   object-fit: contain !important; object-position: right top !important; }
.df-pcat--beverages  .df-pcat__img { left: 84.25px; top: 0;   width: 185px; height: 144px; }
.df-pcat--beverages  .df-pcat__img img { left: 23.04%; top: -31.25%; width: 70.14%;  height: 131.25%; }
.df-pcat--bakery .df-card__text { margin-top: 22px !important; }
.df-pcat--bakery { justify-content: flex-start; }

/* Tablet/mobile-only content (shown in responsive.css) */
.df-africa > * { margin: 0 !important; }
.df-presence, .df-footer__hours { display: none; }