/* Practical support pages: the existing ivory palette with magenta accents. */
.faq-page-intro,
.faq-browser { max-width: 1100px; }

.faq-browser { padding-bottom: 76px; }
.faq-search-form {
  padding: 25px 28px 20px;
  background: var(--white);
  border: 1px solid var(--line);
  border-top: 3px solid var(--accent, #8b356d);
}
.faq-search-form > label { font-size: 15px; font-weight: 600; }
.faq-search-row { display: flex; align-items: center; gap: 12px; margin-top: 12px; }
.faq-search-row input {
  flex: 1;
  margin: 0;
  min-height: 56px;
  padding: 14px 17px;
  border-color: #bdb0a5;
  background: var(--ivory);
  font-size: 16px;
}
.faq-search-row input:focus { border-color: var(--accent, #8b356d); }
.faq-reset {
  flex-shrink: 0;
  min-height: 48px;
  padding: 11px 17px;
  border: 1px solid #dbc5d3;
  border-radius: 2px;
  background: var(--accent-soft, #f3e8ef);
  color: var(--accent-dark, #6d2855);
  font-size: 13px;
  font-weight: 500;
}
.faq-reset:hover { border-color: var(--accent, #8b356d); }
.faq-result-count { margin-top: 12px; min-height: 21px; font-size: 12px; color: var(--muted); }
.faq-category-nav { display: flex; flex-wrap: wrap; gap: 9px; padding: 25px 0 34px; }
.faq-category-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 9px 17px;
  border: 1px solid var(--line);
  border-radius: 2px;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.5;
}
.faq-category-nav a:hover { background: var(--accent-soft, #f3e8ef); border-color: #c997b5; color: var(--accent-dark, #6d2855); }
.faq-groups { display: grid; gap: 42px; }
.faq-search-form:not([hidden]) ~ .faq-category-nav[hidden] + .faq-groups { padding-top: 30px; }
.faq-group { display: grid; grid-template-columns: 205px minmax(0, 1fr); gap: 40px; }
.faq-group > h2 { padding-top: 21px; font-size: 28px; line-height: 1.2; letter-spacing: -.55px; }
.faq-browser .faq-list summary { min-height: 74px; padding: 22px 0; gap: 22px; font-size: 15px; line-height: 1.6; }
.faq-browser .faq-list summary:hover,
.faq-browser .faq-list details[open] summary { color: var(--accent-dark, #6d2855); }
.faq-browser .faq-list summary > span { flex-shrink: 0; width: 22px; text-align: center; color: var(--accent, #8b356d); }
.faq-browser .faq-list details > p { padding: 0 34px 24px 0; font-size: 14px; line-height: 1.85; }
.faq-browser .faq-list details[open] { background: linear-gradient(90deg, transparent, #f3e8ef38); }
.faq-empty { padding: 48px 0 10px; max-width: 600px; }
.faq-empty h2 { font-size: 30px; letter-spacing: -.5px; }
.faq-empty p { color: var(--muted); font-size: 14px; margin-top: 16px; }
.faq-empty .text-link { color: var(--accent, #8b356d); margin-top: 12px; }

/* Marketing support uses direct audience links and real, uncropped examples. */
.marketing-page-intro { padding-block: 34px 26px; }
.marketing-page-intro h1 { margin-top: 0; font-size: clamp(34px, 3.3vw, 44px); }
.marketing-page-intro > p,
.marketing-page-intro > p:last-of-type { max-width: 780px; margin-top: 14px; color: var(--muted); font-size: 14px; }
.marketing-page-intro > p.marketing-photo-hint { margin-top: 8px; font-size: 12px; }
.marketing-page-intro > .marketing-back { gap: 8px; margin-top: -10px; margin-bottom: 6px; color: var(--accent); font-size: 12px; }
.marketing-hub { padding-bottom: 38px; }
.marketing-audience-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: 24px; }
.marketing-audience-card { display: grid; grid-template-columns: 180px minmax(0, 1fr); align-items: stretch; min-width: 0; min-height: 248px; overflow: hidden; background: var(--white); border: 1px solid var(--line); border-radius: var(--image-radius); }
.marketing-audience-card:hover { border-color: #bb90aa; }
.marketing-audience-photo { display: flex; align-items: center; justify-content: center; min-width: 0; overflow: hidden; padding: 18px; background: #f5f1eb; }
.marketing-audience-photo img { display: block; width: 100%; height: 100%; object-fit: contain; }
.marketing-audience-copy { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; padding: 24px; }
.marketing-audience-copy h2 { font-size: 28px; line-height: 1.25; letter-spacing: -.5px; }
.marketing-audience-copy p { margin-top: 12px; font-size: 13px; line-height: 1.7; color: var(--muted); }
.marketing-audience-copy .text-link { margin-top: auto; padding-top: 16px; color: var(--accent-dark); font-size: 12px; gap: 14px; }
.marketing-legacy-links { padding-block: 0 26px; font-size: 13px; }
.marketing-legacy-links a { color: var(--accent-dark); text-decoration: underline; text-underline-offset: 3px; }
@supports selector(:has(:target)) {
  .marketing-legacy-links:not(:has(:target)) { display: none; }
}
.marketing-collection { padding-bottom: 38px; }
.marketing-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: 24px; }
.marketing-card { display: grid; grid-template-columns: minmax(0, 42fr) minmax(0, 58fr); align-items: stretch; min-width: 0; overflow: hidden; background: var(--white); border: 1px solid var(--line); border-radius: var(--image-radius); }
.marketing-card-gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: minmax(0, 1fr); min-width: 0; height: 248px; padding: 18px; gap: 12px; background: #f5f1eb; }
.marketing-card-gallery[data-photo-count="1"] { grid-template-columns: 1fr; }
.marketing-card-gallery:is([data-photo-count="3"], [data-photo-count="5"], [data-photo-count="6"], .has-many) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.marketing-card-gallery[data-photo-count="5"] { grid-template-columns: repeat(6, minmax(0, 1fr)); column-gap: 6px; }
.marketing-card-gallery[data-photo-count="5"] .marketing-example { grid-column: span 2; }
.marketing-card-gallery[data-photo-count="5"] .marketing-example:nth-child(4) { grid-column: 2 / span 2; }
.marketing-card-gallery[data-photo-count="5"] .marketing-example:nth-child(5) { grid-column: 4 / span 2; }
.marketing-example { display: grid; grid-template-rows: minmax(0, 1fr) auto; min-width: 0; min-height: 0; width: 100%; height: 100%; gap: 6px; }
.marketing-image { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; min-width: 0; min-height: 0; overflow: hidden; border-radius: 6px; }
.marketing-image img { display: block; width: 100%; height: 100%; object-fit: contain; }
.marketing-example figcaption { flex: none; text-align: center; color: var(--muted); font-size: 10px; line-height: 1.4; overflow-wrap: anywhere; }
.marketing-card-copy { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; padding: 22px; border-left: 1px solid var(--line); }
.marketing-card-copy h2 { font-size: 25px; line-height: 1.25; letter-spacing: -.4px; }
.marketing-card-copy > p { margin-top: 10px; margin-bottom: 12px; color: var(--muted); font-size: 13px; line-height: 1.65; }
.marketing-card-copy .text-link { margin-top: auto; color: var(--accent-dark); font-size: 12px; gap: 12px; }
.marketing-help { padding-block: 0 42px; }

.faq-invitation,
.marketing-invitation { padding-block: 54px; background: var(--accent-soft, #f3e8ef); border-top: 1px solid #e4d1de; }
.faq-invitation .eyebrow,
.marketing-invitation .eyebrow { margin: 0 0 15px; color: var(--accent, #8b356d); font-size: 10px; }
.faq-invitation .invitation-inner h2,
.marketing-invitation .invitation-inner h2 { font-size: clamp(30px, 3vw, 40px); }
.faq-invitation .invitation-inner > div,
.marketing-invitation .invitation-inner > div { min-width: 0; }

@media (max-width: 1050px) {
  .marketing-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
  .marketing-card { grid-template-columns: 1fr; grid-template-rows: 220px 1fr; }
  .marketing-card-gallery { height: 220px; }
  .marketing-card-copy { min-height: 214px; border-left: 0; border-top: 1px solid var(--line); }
  .marketing-audience-card { grid-template-columns: 135px minmax(0, 1fr); }
  .marketing-audience-copy { padding: 20px; }
  .marketing-audience-copy h2 { font-size: 25px; }
  .faq-group { grid-template-columns: 165px minmax(0, 1fr); gap: 30px; }
  .faq-group > h2 { font-size: 26px; }
}

@media (max-width: 760px) {
  .faq-browser,
  .marketing-collection { padding-bottom: 48px; }
  .faq-search-form { padding: 20px; }
  .faq-group { grid-template-columns: 1fr; gap: 18px; }
  .faq-group > h2 { padding-top: 0; }
  .faq-groups { gap: 36px; }
  .faq-category-nav { padding-block: 20px 30px; gap: 8px; }
  .faq-category-nav a { padding-inline: 13px; }
  .marketing-page-intro { padding-block: 28px 24px; }
  .marketing-audience-grid { grid-template-columns: 1fr; gap: 20px; }
  .marketing-hub { padding-bottom: 30px; }
  .marketing-grid { gap: 20px; }
  .marketing-card-copy { padding: 22px 20px; }
  .marketing-card-copy h2 { font-size: 24px; }
  .marketing-card-gallery { gap: 10px; }
  .faq-invitation,
  .marketing-invitation { padding-block: 38px; }
}

@media (max-width: 540px) {
  .faq-search-form { padding: 18px 16px 15px; }
  .faq-search-form > label { font-size: 14px; }
  .faq-search-row { flex-wrap: wrap; gap: 8px; }
  .faq-search-row input { flex-basis: 100%; min-height: 54px; padding-inline: 12px; }
  .faq-reset { min-height: 44px; padding: 8px 12px; font-size: 12px; }
  .faq-browser .faq-list summary { min-height: 70px; font-size: 14px; gap: 14px; }
  .faq-browser .faq-list details > p { font-size: 13px; padding-right: 10px; }
  .faq-empty { padding-top: 32px; }
  .faq-empty h2 { font-size: 27px; }
  .marketing-grid { grid-template-columns: 1fr; gap: 18px; }
  .marketing-card { grid-template-rows: 196px 1fr; }
  .marketing-card-gallery { height: 196px; padding: 16px; }
  .marketing-audience-card { grid-template-columns: 104px minmax(0, 1fr); }
  .marketing-audience-copy { padding: 18px; }
  .marketing-audience-copy h2 { font-size: 24px; }
  .marketing-audience-copy p { margin-top: 9px; font-size: 12px; }
  .marketing-audience-copy .text-link { font-size: 11px; gap: 8px; }
  .marketing-card-copy { min-height: 204px; padding: 18px; }
  .marketing-card-copy h2 { font-size: 24px; }
  .marketing-invitation h2 br { display: none; }
}

/* Packaging has its own small collection, separate from the dessert browser. */
.packaging-intro,
.packaging-collection { max-width: 1000px; }
.packaging-intro { padding-block: 30px 26px; }
.packaging-intro > .text-link { gap: 8px; margin-top: -10px; color: var(--accent); font-size: 12px; }
.packaging-intro h1 { margin-top: 4px; font-size: clamp(34px, 3.3vw, 44px); }
.packaging-intro > p:last-of-type { max-width: 720px; margin-top: 14px; font-size: 14px; }
.packaging-collection { padding-bottom: 52px; }
.packaging-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }
.packaging-card { min-width: 0; overflow: hidden; background: var(--white); border: 1px solid var(--line); border-radius: var(--image-radius); }
.packaging-image { overflow: hidden; border-radius: var(--image-radius); background: #fff; border-bottom: 1px solid var(--line); }
.packaging-photo-strip { display: flex; align-items: flex-start; width: 100%; }
.packaging-photo-strip img { display: block; width: 100%; height: auto; }
.packaging-info { padding: 24px; }
.packaging-info h2 { max-width: 350px; font-size: clamp(25px, 2.3vw, 30px); line-height: 1.25; letter-spacing: -.5px; }
.packaging-details > p { margin-top: 12px; color: var(--muted); font-size: 13px; line-height: 1.7; }
.packaging-details { margin: 10px 0 12px; }
.packaging-details summary { width: fit-content; min-height: 44px; padding-block: 10px; color: var(--accent); cursor: pointer; font-size: 13px; font-weight: 600; }
.packaging-details summary::marker { font-size: 11px; }
.packaging-specs { margin: 10px 0 0; font-size: 13px; }
.packaging-specs > div { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding-block: 9px; border-bottom: 1px solid var(--line); }
.packaging-specs dt { color: var(--muted); }
.packaging-specs dd { margin: 0; font-weight: 500; text-align: right; overflow-wrap: anywhere; }
.packaging-enquiry { min-height: 46px; padding: 11px 21px; gap: 22px; }
.packaging-delivery { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 32px; margin-top: 28px; padding: 30px; background: var(--accent-soft); border: 1px solid #e4d1de; border-radius: 4px; }
.packaging-delivery h2 { max-width: 360px; font-size: clamp(26px, 2.5vw, 32px); line-height: 1.25; letter-spacing: -.5px; }
.packaging-delivery-copy p { margin-top: 12px; color: var(--muted); font-size: 13px; line-height: 1.8; }
.packaging-delivery-apps h3 { margin: 0 0 14px; color: var(--muted); font-family: inherit; font-size: 12px; font-weight: 500; letter-spacing: 0; }
.packaging-delivery-apps ul { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 18px; margin: 0; padding: 0; list-style: none; }
.packaging-delivery-apps li { display: flex; align-items: center; justify-content: center; min-width: 0; min-height: 36px; }
.packaging-delivery-apps img { display: block; width: 100%; max-width: 96px; height: 32px; object-fit: contain; }

@media (max-width: 800px) {
  .packaging-delivery { grid-template-columns: 1fr; gap: 22px; }
}

@media (max-width: 700px) {
  .packaging-intro { padding-block: 24px 22px; }
  .packaging-grid { grid-template-columns: 1fr; gap: 24px; }
  .packaging-collection { padding-bottom: 38px; }
  .packaging-info { padding: 21px; }
  .packaging-info h2 { max-width: none; font-size: 27px; }
  .packaging-delivery { margin-top: 24px; padding: 24px 21px; }
  .packaging-delivery h2 { max-width: none; }
  .packaging-delivery-apps ul { gap: 12px; }
}

@media (max-width: 360px) {
  .marketing-audience-card { grid-template-columns: 90px minmax(0, 1fr); }
  .marketing-audience-copy { padding: 16px; }
  .marketing-audience-copy h2 { font-size: 23px; }
  .packaging-info { padding: 19px; }
  .packaging-info h2 { font-size: 25px; }
  .packaging-specs { font-size: 12px; }
  .packaging-delivery-apps ul { gap: 12px 10px; }
}

/* FAQ: a colorful topic directory and calm, readable answer cards. */
.faq-hero { background: var(--ivory); color: var(--cocoa); }
.faq-page-intro { padding-block: 58px 46px; }
.faq-page-intro .eyebrow { color: #edc4d8; }
.faq-page-intro h1 { font-size: clamp(40px, 4.1vw, 59px); }
.faq-page-intro h1 em { color: #edc4d8; font-weight: 400; }
.faq-page-intro > p:last-of-type { color: #f0dfe8; max-width: 620px; }
.faq-browser { padding-top: 32px; }
.faq-search-form { border: 1px solid #e4d1de; border-radius: 12px; padding: 24px 28px 20px; background: #fffdfa; box-shadow: 0 8px 28px #54244008; }
.faq-search-form > label { color: #542440; }
.faq-search-row input { border-radius: 7px; background: #faf6f8; }
.faq-browse-label { margin-top: 32px; color: #765069; }
.faq-category-nav { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; padding: 14px 0 38px; }
.faq-category-nav a { --faq-bg: #f0e2ec; --faq-ink: #673453; padding: 18px; gap: 14px; border: 1px solid transparent; border-radius: 10px; background: var(--faq-bg); color: var(--faq-ink); font-size: 14px; transition: border-color .2s, box-shadow .2s; }
.faq-category-nav a:hover { background: var(--faq-bg); color: var(--faq-ink); border-color: currentColor; box-shadow: 0 4px 14px #5424400a; }
.faq-topic-number { font: italic 27px/1 var(--serif); opacity: .75; }
.faq-topic-copy { flex: 1; }
.faq-topic-copy small { display: block; margin-top: 3px; font-size: 11px; font-weight: 400; }
.faq-topic-arrow { font-size: 20px; }
.faq-groups { gap: 24px; }
.faq-group { --faq-bg: #f0e2ec; --faq-ink: #673453; grid-template-columns: 230px minmax(0, 1fr); gap: 0; background: #fffdfa; border: 1px solid #e5dadf; border-radius: 12px; overflow: hidden; }
.page-faqs .faq-category-nav a[href="#faq-general"], .page-faqs #faq-general { --faq-bg: #f0e2ec; --faq-ink: #673453; }
.page-faqs .faq-category-nav a[href="#faq-foodservice"], .page-faqs #faq-foodservice { --faq-bg: #e4ece5; --faq-ink: #365b43; }
.page-faqs .faq-category-nav a[href="#faq-retail"], .page-faqs #faq-retail { --faq-bg: #f3e6d6; --faq-ink: #79512b; }
.page-faqs .faq-category-nav a[href="#faq-ordering"], .page-faqs #faq-ordering { --faq-bg: #f3e1dc; --faq-ink: #874c3e; }
.page-faqs .faq-category-nav a[href="#faq-handling"], .page-faqs #faq-handling { --faq-bg: #e3e9f0; --faq-ink: #405873; }
.page-faqs .faq-category-nav a[href="#faq-marketing"], .page-faqs #faq-marketing { --faq-bg: #e8e4f1; --faq-ink: #604c75; }
.faq-group-heading { background: var(--faq-bg); color: var(--faq-ink); padding: 28px 24px; }
.faq-section-number { display: block; font: italic 40px/1 var(--serif); margin-bottom: 24px; opacity: .65; }
.faq-group-heading h2 { font-size: 27px; line-height: 1.2; letter-spacing: -.5px; }
.faq-group-heading p { margin-top: 12px; font-size: 11px; }
.faq-browser .faq-list { border-top: 0; padding: 6px 26px; }
.faq-browser .faq-list details { border-color: #ece4e8; }
.faq-browser .faq-list details:last-child { border-bottom: 0; }
.faq-browser .faq-list summary { min-height: 68px; padding-block: 19px; font-size: 14px; }
.faq-browser .faq-list summary > span { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: var(--faq-bg); color: var(--faq-ink); font-size: 20px; }
.faq-browser .faq-list details[open] { background: transparent; }
.faq-browser .faq-list details > p { border-left: 3px solid var(--faq-bg); margin-bottom: 22px; padding: 0 24px 0 16px; }
.faq-browser:has(.faq-category-nav[hidden]) .faq-browse-label { display: none; }
.faq-invitation { background: #542440; color: #fff9ef; border: 0; }
.faq-invitation .eyebrow { color: #edc4d8; }
.faq-invitation .invitation-inner p { color: #f0dfe8; }
.faq-invitation .button { background: #f0dfe8; color: #542440; border-color: #f0dfe8; }
@media (max-width: 800px) {
  .faq-group { grid-template-columns: 1fr; }
  .faq-group-heading { padding: 20px 24px; }
  .faq-section-number { float: left; margin: 0 16px 0 0; font-size: 32px; }
  .faq-group-heading p { margin-top: 5px; }
  .faq-group-heading h2 { font-size: 25px; }
  .faq-category-nav { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 540px) {
  .faq-page-intro { padding-block: 36px 32px; }
  .faq-page-intro h1 { font-size: 43px; }
  .faq-browser { padding-top: 22px; }
  .faq-search-form { padding: 20px 16px 16px; }
  .faq-category-nav { gap: 9px; padding-bottom: 26px; }
  .faq-category-nav a { padding: 14px 12px; gap: 9px; font-size: 12px; }
  .faq-topic-number { font-size: 22px; }
  .faq-topic-arrow { display: none; }
  .faq-topic-copy small { font-size: 10px; }
  .faq-browser .faq-list { padding-inline: 17px; }
  .faq-group-heading { padding: 20px 17px; }
  .faq-browser .faq-list details > p { padding-right: 0; }
}