/* ==========================================================================
   ACM Beverage – Product detail layout (ctsp-1), WordPress version
   Generated from layout/assets/css/product-detail.css: every rule is scoped under
   .acm-pd (the product page wrapper, woocommerce/content-single-product.php) so
   Flatsome and this layout do not restyle each other. The static header, footer
   and nav are dropped (Flatsome's are used); the key-info icons come from PHP.
   Flickity's base CSS (lightbox) is included, scoped the same way.
   ========================================================================== */

/* Outfit, self-hosted (variable font, weights 400–700) */
@font-face {
  font-family: "Outfit";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/outfit/outfit-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Outfit";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/outfit/outfit-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

.acm-pd {
  --blue-900: #0a2350;
  --blue-800: #0d3a8c;
  --blue-700: #0f4fc4;
  --blue-600: #1461e0;
  --blue-500: #2f7bf5;
  --blue-100: #dde9fd;
  --blue-50: #eef4fe;
  --navy: #0e2748;
  --text: #33445c;
  --muted: #6b7a90;
  --line: #e3eaf3;
  --line-strong: #cfdbeb;
  --soft: #f5f8fc;
  --white: #fff;
  --red-50: #fff0f2;
  --red-600: #d6334b;
  --violet-50: #f2efff;
  --violet-600: #6a4fd8;
  --amber-50: #fff6e6;
  --amber-700: #b86e00;

  --radius-sm: 8px;
  --radius: 12px;
  --radius-lg: 16px;
  --shadow-sm: 0 1px 2px rgba(14, 39, 72, .06);
  --shadow: 0 8px 24px -12px rgba(14, 39, 72, .18);
  --shadow-lg: 0 24px 48px -20px rgba(14, 39, 72, .28);

  --header-h: 72px;
  --tabs-h: 56px;
  --container: 1360px;
  --gutter: 24px;
  --font: "Outfit", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

/* ---------- Base ---------- */
.acm-pd,
.acm-pd *,
.acm-pd::before,
.acm-pd *::before,
.acm-pd::after,
.acm-pd *::after {
  box-sizing: border-box;
}

/* sections land right under the sticky tab bar (JS uses the same measurement for tab clicks) */

.acm-pd {
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.6;
  color: var(--text);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
}

.acm-pd img {
  max-width: 100%;
  display: block;
}

.acm-pd a {
  color: inherit;
  text-decoration: none;
}

.acm-pd button {
  font: inherit;
  color: inherit;
  cursor: pointer;
  background: none;
  border: 0;
  padding: 0;
}

.acm-pd h1,
.acm-pd h2,
.acm-pd h3,
.acm-pd h4,
.acm-pd p,
.acm-pd ul,
.acm-pd ol,
.acm-pd figure {
  margin: 0;
}

.acm-pd ul,
.acm-pd ol {
  padding: 0;
  list-style: none;
}

.acm-pd table {
  border-collapse: collapse;
  width: 100%;
}

.acm-pd .icon {
  width: 1em;
  height: 1em;
  flex: none;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.acm-pd .pd-container {
  width: 100%;
  max-width: calc(var(--container) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.acm-pd .visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.acm-pd :focus-visible {
  outline: 2px solid var(--blue-500);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ---------- Theme guard ----------
   This layout is served inside the Flatsome theme, so the theme's global
   element styles are already in the cascade when this file loads. The reset
   above only undoes what the browser sets; these rules undo what the theme
   sets on the same elements, so the page renders identically standalone and
   in the theme. Structural class names are prefixed (pd-) for the same reason. */
.acm-pd button,
.acm-pd input[type="button"],
.acm-pd input[type="reset"],
.acm-pd input[type="submit"] {
  margin: 0;
  min-width: 0;
  min-height: 0;
  max-width: none;
  position: static;
  text-align: inherit;
  text-transform: none;
  letter-spacing: inherit;
  vertical-align: baseline;
  text-shadow: none;
}

/* the theme targets fields as input[type=...], so the guard has to match that
   specificity to land */
.acm-pd input,
.acm-pd input[type],
.acm-pd select,
.acm-pd textarea {
  margin: 0;
  min-width: 0;
  min-height: 0;
  max-width: none;
  vertical-align: baseline;
  box-shadow: none;
}

/* the theme strips the native control, then our own background removes its
   replacement arrow – give the select its indicator back */
.acm-pd select {
  -webkit-appearance: auto;
  appearance: auto;
}

.acm-pd label {
  display: inline;
  margin: 0;
  font: inherit;
  color: inherit;
}

.acm-pd h1,
.acm-pd h2,
.acm-pd h3,
.acm-pd h4,
.acm-pd h5,
.acm-pd h6 {
  width: auto;
  color: inherit;
  line-height: inherit;
  text-rendering: auto;
}

.acm-pd li {
  margin: 0;
}

.acm-pd blockquote,
.acm-pd dl,
.acm-pd form,
.acm-pd pre {
  margin: 0;
}

.acm-pd table {
  margin: 0;
  border-spacing: 0;
  border-color: inherit;
}

.acm-pd th,
.acm-pd td {
  padding: 0;
  border: 0;
  color: inherit;
  font-size: inherit;
  line-height: inherit;
  letter-spacing: normal;
  text-transform: none;
  vertical-align: inherit;
}

.acm-pd th {
  text-align: center;
}

.acm-pd a:hover {
  color: inherit;
}

.acm-pd img {
  vertical-align: baseline;
}

/* ---------- Buttons ---------- */
.acm-pd .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 48px;
  padding: 0 24px;
  border-radius: 10px;
  font-weight: 500;
  font-size: 15px;
  white-space: nowrap;
  transition: background-color .2s, box-shadow .2s, color .2s, border-color .2s, transform .2s;
}

.acm-pd .btn .icon {
  font-size: 18px;
}

.acm-pd .btn--primary {
  background: linear-gradient(180deg, var(--blue-600), var(--blue-700));
  color: var(--white);
  box-shadow: 0 6px 16px -6px rgba(20, 97, 224, .6);
}

.acm-pd .btn--primary:hover {
  background: linear-gradient(180deg, var(--blue-500), var(--blue-600));
  transform: translateY(-1px);
}

.acm-pd .btn--outline {
  border: 1.5px solid var(--blue-600);
  color: var(--blue-700);
  background: var(--white);
}

.acm-pd .btn--outline:hover {
  background: var(--blue-50);
}

.acm-pd .btn--sm {
  height: 40px;
  padding: 0 18px;
  font-size: 14px;
  border-radius: 8px;
}

.acm-pd .btn--block {
  width: 100%;
}

.acm-pd .link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--blue-700);
  font-weight: 500;
}

.acm-pd .link-arrow:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---------- Pills / section heads ---------- */
.acm-pd .pill {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 12px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  background: var(--blue-100);
  color: var(--blue-700);
}

.acm-pd .pill--red {
  background: var(--red-50);
  color: var(--red-600);
}

.acm-pd .pill--violet {
  background: var(--violet-50);
  color: var(--violet-600);
}

.acm-pd .pill--amber {
  background: var(--amber-50);
  color: var(--amber-700);
}

.acm-pd .pill--light {
  background: var(--white);
  color: var(--blue-800);
  box-shadow: var(--shadow-sm);
}

.acm-pd .pd-section {
  padding-block: 40px;
}

.acm-pd .pd-section+.pd-section {
  border-top: 1px solid var(--line);
}

.acm-pd [data-section]:focus,
.acm-pd [data-section]:focus-visible {
  outline: none;
}

.acm-pd .pd-section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
}

.acm-pd .pd-section-title {
  font-size: 26px;
  line-height: 1.2;
  font-weight: 700;
  color: var(--blue-700);
  text-transform: uppercase;
  letter-spacing: .01em;
}

.acm-pd .pd-section-sub {
  margin-top: 6px;
  color: var(--muted);
  font-size: 15px;
}

/* ==========================================================================
   Header
   ========================================================================== */

/* ---------- Breadcrumb ---------- */
.acm-pd .breadcrumb {
  padding-block: 16px 20px;
  /* font-size: 13px; */
  color: var(--muted);
}

.acm-pd .breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
}

.acm-pd .breadcrumb li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.acm-pd .breadcrumb li+li::before {
  content: "›";
  color: #a4b0c0;
  font-size: 15px;
}

.acm-pd .breadcrumb a:hover {
  color: var(--blue-700);
}

.acm-pd .breadcrumb [aria-current] {
  color: var(--navy);
}

/* ==========================================================================
   Hero (gallery + summary + key info)
   ========================================================================== */
.acm-pd .pd-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) 340px;
  gap: 28px;
  align-items: start;
}

/* Gallery */
.acm-pd .pd-gallery {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr);
  gap: 16px;
}

.acm-pd .pd-thumbs {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.acm-pd .pd-thumbs__nav {
  width: 32px;
  height: 28px;
  display: grid;
  place-items: center;
  color: var(--navy);
  border-radius: 6px;
}

.acm-pd .pd-thumbs__nav:hover {
  background: var(--soft);
}

.acm-pd .pd-thumbs__nav .icon {
  font-size: 20px;
}

.acm-pd .pd-thumbs__list {
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-height: 462px;
  overflow: hidden;
  scroll-behavior: smooth;
  padding: 2px;
}

.acm-pd .pd-thumb {
  width: 68px;
  height: 80px;
  flex: none;
  border-radius: 10px;
  border: 1.5px solid var(--line);
  background: #fbfcfe;
  padding: 4px;
  transition: border-color .2s, box-shadow .2s;
}

.acm-pd .pd-thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.acm-pd .pd-thumb:hover {
  border-color: var(--line-strong);
}

.acm-pd .pd-thumb.is-active {
  border-color: var(--blue-600);
  box-shadow: 0 0 0 3px var(--blue-100);
}

.acm-pd .pd-stage {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 4 / 5;
}

.acm-pd .pd-stage__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 4%;
  transform: scale(1.22);
  transition: opacity .25s;
  /* no stage background: fade the edges so the product's drop shadow isn't cut off abruptly */
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 12%, #000 88%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 12%, #000 88%, transparent 100%);
}

.acm-pd .pd-stage__img.is-fading {
  opacity: 0;
}

.acm-pd .pd-stage__img {
  cursor: zoom-in;
}

.acm-pd .pd-stage__zoom {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, .92);
  box-shadow: var(--shadow);
  color: var(--navy);
  transition: color .2s, transform .2s;
}

.acm-pd .pd-stage__zoom:hover {
  color: var(--blue-700);
  transform: scale(1.06);
}

.acm-pd .pd-stage__zoom .icon {
  font-size: 18px;
}

.acm-pd .pd-stage__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .92);
  display: grid;
  place-items: center;
  box-shadow: var(--shadow);
  color: var(--navy);
}

.acm-pd .pd-stage__nav:hover {
  background: var(--white);
  color: var(--blue-700);
}

.acm-pd .pd-stage__nav .icon {
  font-size: 20px;
}

.acm-pd .pd-stage__nav--prev {
  left: 16px;
}

.acm-pd .pd-stage__nav--next {
  right: 16px;
}

.acm-pd .pd-stage__count {
  position: absolute;
  right: 16px;
  bottom: 16px;
  font-size: 12px;
  font-weight: 500;
  color: var(--navy);
  background: rgba(255, 255, 255, .9);
  padding: 2px 10px;
  border-radius: 999px;
}

/* Summary */
.acm-pd .pd-summary {
  padding-top: 4px;
}

.acm-pd .pd-eyebrow {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--blue-700);
}

.acm-pd .pd-title {
  margin-top: 8px;
  font-size: 28px;
  line-height: 1.2;
  font-weight: 700;
  color: var(--navy);
  letter-spacing: -.01em;
}

.acm-pd .pd-lead {
  margin-top: 14px;
  color: var(--muted);
  font-size: 15px;
}

.acm-pd .pd-checks {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  margin-top: 16px;
  font-size: 14px;
  color: var(--navy);
}

.acm-pd .pd-checks li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.acm-pd .pd-checks .icon {
  color: var(--blue-600);
  font-size: 17px;
}

.acm-pd .pd-flavors {
  margin-top: 22px;
}

.acm-pd .pd-flavors__label {
  font-size: 14px;
  color: var(--muted);
}

.acm-pd .pd-flavors__label strong {
  color: var(--navy);
  font-weight: 600;
}

/* Fixed-width columns packed from the left: the gap stays the same whatever the column width
   (a 1fr grid spread five swatches across the whole summary on wide or single-column layouts). */
.acm-pd .pd-flavors__list {
  display: grid;
  grid-template-columns: repeat(auto-fill, 76px);
  justify-content: start;
  gap: 12px 8px;
  margin-top: 12px;
}

.acm-pd .flavor {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-align: center;
  font-size: 12.5px;
  line-height: 1.3;
  color: var(--muted);
}

.acm-pd .flavor__icon {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: var(--white);
  border: 1.5px solid var(--line);
  display: grid;
  place-items: center;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: border-color .2s, box-shadow .2s, transform .2s;
}

.acm-pd .flavor__icon img {
  width: 70%;
  height: 70%;
  object-fit: contain;
}

.acm-pd .flavor__icon img.is-can {
  width: 100%;
  height: 100%;
  /* transform: scale(1.5) translateY(4%); */
}

.acm-pd .flavor:hover .flavor__icon {
  transform: translateY(-2px);
  border-color: var(--line-strong);
}

.acm-pd .flavor.is-active {
  color: var(--navy);
  font-weight: 500;
}

.acm-pd .flavor.is-active .flavor__icon {
  border-color: var(--blue-600);
  box-shadow: 0 0 0 3px var(--blue-100);
}

.acm-pd .flavor small {
  display: block;
  font-size: 11px;
  color: var(--muted);
  font-weight: 400;
}

.acm-pd .pd-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 24px;
}

.acm-pd .pd-actions .btn {
  flex: 1 1 auto;
  padding: 0 18px;
}

.acm-pd .pd-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 28px;
  margin-top: 18px;
  font-size: 14px;
}

.acm-pd .pd-links a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--navy);
}

.acm-pd .pd-links a:hover {
  color: var(--blue-700);
}

.acm-pd .pd-links .icon {
  font-size: 18px;
  color: var(--blue-700);
}
/* Datasheet PDF link while the PDF is being made */
.acm-pd .pd-links a.is-busy {
  cursor: progress;
  opacity: .7;
}


/* Key info */
.acm-pd .pd-keyinfo {
  background: var(--soft);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 20px 20px 8px;
}

.acm-pd .pd-keyinfo__title {
  font-size: 17px;
  font-weight: 600;
  color: var(--navy);
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}

/* Plain 2-column table (no th, no inline svg). The icon is a masked ::before on the label cell,
   chosen by an acm-icon-* class on that cell. The script adds the class from the cell text
   (ACM_ICON_MAP in product-detail.js), e.g. <td>Packaging</td> -> acm-icon-pack.
   A label cell without an acm-icon-* class gets the default drink-can icon. */
.acm-pd .pd-keyinfo table {
  font-size: 13.5px;
  line-height: 1.45;
}

.acm-pd .pd-keyinfo td {
  padding: 10px 0;
  text-align: left;
  vertical-align: top;
  color: var(--muted);
}

.acm-pd .pd-keyinfo td:first-child {
  position: relative;
  width: 50%;
  padding-left: 28px;
  padding-right: 10px;
  color: var(--navy);
  font-weight: 500;
}

.acm-pd .pd-keyinfo td:first-child::before {
  content: "";
  position: absolute;
  left: 0;
  top: 11px;
  width: 18px;
  height: 18px;
  background-color: var(--blue-700);
  /* --acm-icon only exists when the cell has an acm-icon-* class; otherwise fall back to the can */
  -webkit-mask: var(--acm-icon, var(--acm-icon-default)) center / contain no-repeat;
  mask: var(--acm-icon, var(--acm-icon-default)) center / contain no-repeat;
}

.acm-pd .pd-keyinfo tr+tr>td {
  border-top: 1px dashed var(--line);
}

/* Icon set (lucide-style stroke icons) – reusable anywhere via --acm-icon */
.acm-pd {
  --acm-icon-default: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 2h6'/%3E%3Cpath d='M9 2 6.5 5v14.5A2.5 2.5 0 0 0 9 22h6a2.5 2.5 0 0 0 2.5-2.5V5L15 2'/%3E%3Cpath d='M6.5 7.5h11'/%3E%3Cpath d='M6.5 18h11'/%3E%3Cpath d='M10.5 12h3'/%3E%3C/svg%3E");
}

/* ==========================================================================
   Sticky tabs
   ========================================================================== */
.acm-pd .pd-tabs {
  position: sticky;
  top: var(--header-h);
  z-index: 40;
  margin-top: 32px;
  background: rgba(255, 255, 255, .96);
  backdrop-filter: blur(8px);
}

.acm-pd .pd-tabs__inner {
  display: flex;
  gap: 8px;
  height: var(--tabs-h);
  padding-inline: 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--soft);
  overflow-x: auto;
  scrollbar-width: none;
}

.acm-pd .pd-tabs__inner::-webkit-scrollbar {
  display: none;
}

.acm-pd .pd-tabs a {
  flex: 1 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 16px;
  position: relative;
  font-size: 15px;
  color: var(--text);
  white-space: nowrap;
  transition: color .2s;
}

.acm-pd .pd-tabs a::after {
  content: "";
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 0;
  height: 3px;
  border-radius: 3px 3px 0 0;
  background: var(--blue-600);
  transform: scaleX(0);
  transition: transform .25s;
}

.acm-pd .pd-tabs a:hover {
  color: var(--blue-700);
}

.acm-pd .pd-tabs a.is-active {
  color: var(--blue-700);
  font-weight: 600;
}

.acm-pd .pd-tabs a.is-active::after {
  transform: scaleX(1);
}

/* ==========================================================================
   Overview – WordPress editor content (.entry-content) + read more
   ========================================================================== */
.acm-pd #overview .pd-section-head {
  margin-bottom: 18px;
}

/* .entry-content is the WordPress editor wrapper, so the theme styles it too –
   padding has to be stated here or the read-more clamp measures the wrong height */
.acm-pd .entry-content {
  padding: 0;
  font-size: 16px;
  line-height: 1.75;
  color: var(--text);
}

.acm-pd .entry-content>*+* {
  margin-top: 1em;
}

.acm-pd .entry-content h2 {
  margin-top: 1.6em;
  font-size: 22px;
  line-height: 1.3;
  font-weight: 600;
  color: var(--navy);
}

.acm-pd .entry-content h3 {
  margin-top: 1.5em;
  font-size: 19px;
  line-height: 1.35;
  font-weight: 600;
  color: var(--navy);
}

.acm-pd .entry-content h4 {
  margin-top: 1.4em;
  font-size: 17px;
  font-weight: 600;
  color: var(--navy);
}

.acm-pd .entry-content h2+*,
.acm-pd .entry-content h3+*,
.acm-pd .entry-content h4+* {
  margin-top: .5em;
}

.acm-pd .entry-content a {
  color: var(--blue-700);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.acm-pd .entry-content a:hover {
  color: var(--blue-600);
}

.acm-pd .entry-content strong {
  color: var(--navy);
  font-weight: 600;
}

.acm-pd .entry-content ul,
.acm-pd .entry-content ol {
  padding-left: 1.4em;
}

.acm-pd .entry-content ul {
  list-style: disc;
}

.acm-pd .entry-content ol {
  list-style: decimal;
}

.acm-pd .entry-content li+li {
  margin-top: .35em;
}

.acm-pd .entry-content li::marker {
  color: var(--blue-600);
}

.acm-pd .entry-content img {
  height: auto;
  border-radius: var(--radius);
}

.acm-pd .entry-content figure {
  margin-block: 1.5em;
}

.acm-pd .entry-content figcaption {
  margin-top: 8px;
  font-size: 13px;
  color: var(--muted);
  text-align: center;
}

.acm-pd .entry-content blockquote {
  margin: 1.5em 0;
  padding: 4px 0 4px 18px;
  border-left: 3px solid var(--blue-600);
  color: var(--navy);
  font-style: italic;
}

.acm-pd .entry-content table {
  font-size: 14px;
  border: 1px solid var(--line);
}

.acm-pd .entry-content th,
.acm-pd .entry-content td {
  padding: 10px 14px;
  border: 1px solid var(--line);
  text-align: left;
}

.acm-pd .entry-content th {
  background: var(--soft);
  color: var(--navy);
  font-weight: 600;
}

.acm-pd .entry-content .aligncenter {
  margin-inline: auto;
}

/* Collapsed state is added by JS only when the content is long; without JS everything shows. */
.acm-pd .readmore {
  position: relative;
  overflow: hidden;
  transition: max-height .45s ease;
}

.acm-pd .readmore.is-collapsed {
  max-height: var(--readmore-h, 340px);
}

.acm-pd .readmore.is-collapsed::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 120px;
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0), #fff 85%);
}

.acm-pd .readmore-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 14px;
  height: 40px;
  padding: 0 18px;
  border: 1.5px solid var(--blue-600);
  border-radius: 999px;
  color: var(--blue-700);
  font-size: 14px;
  font-weight: 500;
  transition: background-color .2s;
}

.acm-pd .readmore-toggle:hover {
  background: var(--blue-50);
}

.acm-pd .readmore-toggle[hidden] {
  display: none;
}

.acm-pd .readmore-toggle .icon {
  font-size: 18px;
  transition: transform .25s;
}

.acm-pd .readmore-toggle[aria-expanded="true"] .icon {
  transform: rotate(180deg);
}

/* ==========================================================================
   Packaging options
   ========================================================================== */
.acm-pd .pack-groups {
  display: grid;
  grid-template-columns: minmax(0, 8fr) minmax(0, 4fr) minmax(0, 1.15fr);
  gap: 16px;
  margin-top: 24px;
}

.acm-pd .pack-group {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px 16px 12px;
  background: var(--white);
}

.acm-pd .pack-group__title {
  font-size: 15px;
  font-weight: 600;
  color: var(--navy);
}

.acm-pd .pack-group__items {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: 8px;
  margin-top: 12px;
}

.acm-pd .pack-item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 16px 6px 12px;
  border: 1.5px solid transparent;
  border-radius: 10px;
  text-align: center;
  line-height: 1.3;
  transition: border-color .2s, background-color .2s;
}

.acm-pd .pack-item:hover {
  background: var(--soft);
}

.acm-pd .pack-item.is-selected {
  border-color: var(--blue-600);
  background: var(--white);
  box-shadow: 0 0 0 3px var(--blue-50);
}

.acm-pd .pack-item__check,
.acm-pd .outer-card__check {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 1;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--blue-600);
  color: #fff;
  display: none;
  place-items: center;
}

.acm-pd .pack-item__check .icon,
.acm-pd .outer-card__check .icon {
  font-size: 14px;
  stroke-width: 3;
}

.acm-pd .pack-item.is-selected .pack-item__check,
.acm-pd .outer-card.is-selected .outer-card__check {
  display: grid;
}

.acm-pd .pack-item__media {
  position: relative;
  display: block;
  width: 76px;
  height: 190px;
  overflow: hidden;
}

/* Source images are 1000×1000 on a shared scale (base at ~91%): scale them the same so sizes stay comparable. */
.acm-pd .pack-item__media img {
  position: absolute;
  left: 50%;
  bottom: -18px;
  width: 220px;
  height: 220px;
  max-width: none;
  transform: translateX(-50%);
  transition: transform .25s;
}

.acm-pd .pack-item:hover .pack-item__media img {
  transform: translateX(-50%) translateY(-3px);
}

.acm-pd .pack-item__size {
  font-weight: 600;
  color: var(--navy);
  font-size: 15px;
}

.acm-pd .pack-item__name {
  display: block;
  font-size: 13px;
  color: var(--muted);
  font-weight: 400;
}

.acm-pd .pack-item.is-selected .pack-item__name {
  color: var(--blue-700);
}

.acm-pd .pack-item__tag {
  display: inline-block;
  margin-top: 4px;
  padding: 1px 6px;
  white-space: nowrap;
  border-radius: 999px;
  background: var(--red-50);
  color: var(--red-600);
  font-size: 11px;
  font-weight: 600;
}

.acm-pd .pack-note {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 14px;
  font-size: 13.5px;
  color: var(--muted);
}

.acm-pd .pack-note .icon {
  flex: none;
  margin-top: 1px;
  color: var(--blue-600);
  font-size: 18px;
}

/* ==========================================================================
   Outer packaging
   ========================================================================== */
/* Two groups: Case (tray / box) and Pack (optional). Each group allows one choice, and a second
   click on the chosen card clears it – so the cards are toggle buttons (aria-pressed), not radios. */
.acm-pd .outer-groups {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-top: 24px;
}

.acm-pd .outer-group {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px;
  background: var(--white);
}

.acm-pd .outer-group__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.acm-pd .outer-group__title {
  font-size: 15px;
  font-weight: 600;
  color: var(--navy);
}

.acm-pd .outer-group__hint {
  font-size: 13px;
  color: var(--muted);
}

.acm-pd .outer-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 12px;
}

.acm-pd .outer-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 12px 12px 16px;
  border: 1.5px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
  transition: border-color .2s, box-shadow .25s;
}

.acm-pd .outer-card:hover {
  border-color: var(--line-strong);
  box-shadow: var(--shadow);
}

.acm-pd .outer-card.is-selected {
  border-color: var(--blue-600);
  box-shadow: 0 0 0 3px var(--blue-50);
}

/* the whole card is the hit area of this (label-less) button; its name comes from the card title */
.acm-pd .outer-card__toggle {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  cursor: pointer;
}

.acm-pd .outer-card__toggle:focus-visible {
  outline: 2px solid var(--blue-500);
  outline-offset: 3px;
}

.acm-pd .outer-card__check {
  z-index: 2;
  pointer-events: none;
}

.acm-pd .outer-card__body {
  padding-inline: 4px;
}

.acm-pd .outer-card__media {
  height: 160px;
  border-radius: 10px;
  overflow: hidden;
  background: var(--soft);
  position: relative;
  padding: 10px;
}

.acm-pd .outer-card__media>img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.acm-pd .outer-card__title {
  font-size: 17px;
  font-weight: 600;
  color: var(--blue-700);
}

.acm-pd .outer-card__units {
  font-weight: 500;
  white-space: nowrap;
}

.acm-pd .outer-card__list {
  margin-top: 8px;
  font-size: 13.5px;
  color: var(--muted);
}

.acm-pd .outer-card__list li {
  position: relative;
  padding-left: 14px;
}

.acm-pd .outer-card__list li+li {
  margin-top: 3px;
}

.acm-pd .outer-card__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .6em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--blue-500);
}

.acm-pd .outer-card__media--contain {
  background: linear-gradient(180deg, #f5f8fc, #e8eff8);
}

.acm-pd .outer-card__media--contain>img {
  object-fit: contain;
  /* padding: 6px;
  transform: scale(var(--zoom, 1)); */
}

/* Pack illustrations are drawn at a fixed size inside .illus, then scaled to fit the card */
.acm-pd .illus {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 140px;
  height: 110px;
  transform: translateX(-50%) scale(var(--illus-scale, 1.25));
  transform-origin: 50% 100%;
}

/* 6-pack illustration */
.acm-pd .illus-sixpack {
  background: linear-gradient(180deg, #f2f6fb, #e4ecf6);
}

.acm-pd .illus-sixpack .pd-row {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
}

.acm-pd .illus-sixpack .pd-row img {
  height: 74px;
  margin-inline: -2px;
}

.acm-pd .illus-sixpack .pd-row--back {
  bottom: 26px;
  margin-left: 10px;
  filter: brightness(.85);
}

.acm-pd .illus-sixpack .pd-row--front {
  bottom: 12px;
}

.acm-pd .illus-sixpack .film {
  position: absolute;
  left: 50%;
  bottom: 8px;
  width: 108px;
  height: 92px;
  transform: translateX(-50%);
  border-radius: 12px;
  background: linear-gradient(115deg, rgba(255, 255, 255, .55) 0%, rgba(255, 255, 255, .08) 38%, rgba(255, 255, 255, .45) 52%, rgba(255, 255, 255, .06) 70%);
  border: 1px solid rgba(255, 255, 255, .7);
}

/* 4-pack paperboard carrier illustration */
.acm-pd .illus-fourpack {
  background: linear-gradient(180deg, #f2f6fb, #e4ecf6);
}

.acm-pd .illus-fourpack .pd-row {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
}

.acm-pd .illus-fourpack .pd-row img {
  height: 74px;
  margin-inline: -1px;
}

.acm-pd .illus-fourpack .pd-row--back {
  bottom: 26px;
  margin-left: 12px;
  filter: brightness(.85);
}

.acm-pd .illus-fourpack .pd-row--front {
  bottom: 12px;
}

.acm-pd .illus-fourpack .sleeve {
  position: absolute;
  left: 50%;
  bottom: 10px;
  width: 66px;
  height: 46px;
  transform: translateX(-50%);
  border-radius: 3px 3px 5px 5px;
  background: linear-gradient(180deg, #dcb07a 0%, #c79455 100%);
  box-shadow: 0 6px 10px -4px rgba(80, 45, 0, .35), inset 0 2px 0 rgba(255, 255, 255, .25);
  display: grid;
  place-items: center;
}

.acm-pd .illus-fourpack .sleeve::before {
  content: "";
  position: absolute;
  top: 6px;
  left: 50%;
  width: 18px;
  height: 5px;
  transform: translateX(-50%);
  border-radius: 3px;
  background: rgba(70, 40, 0, .45);
}

.acm-pd .illus-fourpack .sleeve span {
  margin-top: 8px;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: .12em;
  color: rgba(70, 40, 0, .65);
}

/* ==========================================================================
   Container loading
   ========================================================================== */
.acm-pd .pd-section-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px 40px;
}

.acm-pd .pd-section-bar>div:first-child {
  flex: 1 1 520px;
  max-width: 880px;
}

.acm-pd .units {
  display: flex;
  align-items: center;
  gap: 12px;
}

.acm-pd .units__label {
  font-size: 14px;
  font-weight: 500;
  color: var(--navy);
}

.acm-pd .units .seg button {
  min-width: 52px;
  padding: 0 14px;
}

.acm-pd .seg {
  display: inline-flex;
  padding: 4px;
  border-radius: 10px;
  background: var(--soft);
  border: 1px solid var(--line);
}

.acm-pd .seg button {
  height: 38px;
  padding: 0 20px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
  transition: background-color .2s, color .2s;
}

.acm-pd .seg button[aria-checked="true"] {
  background: var(--blue-600);
  color: #fff;
  box-shadow: 0 4px 10px -4px rgba(20, 97, 224, .6);
}

.acm-pd .seg button:disabled {
  opacity: .4;
  cursor: not-allowed;
}

/* Full-width variant: equal buttons filling the row */
.acm-pd .seg--block {
  display: flex;
  width: 100%;
  background: var(--white);
  border-color: var(--line-strong);
}

.acm-pd .seg--block button {
  flex: 1 1 0;
  height: 44px;
  padding: 0 8px;
  font-size: 15px;
  text-align: center;
}

/* Two cards: loading table (left) and calculator (right) */
.acm-pd .load-layout {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  margin-top: 24px;
}

.acm-pd .load-card {
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--white);
  box-shadow: var(--shadow-sm);
}

.acm-pd .load-tabs {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: 8px;
}

.acm-pd .load-tabs button {
  height: 52px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--soft);
  color: var(--navy);
  font-size: 15px;
  font-weight: 500;
  text-align: center;
  transition: background-color .2s, border-color .2s, color .2s;
}

.acm-pd .load-tabs button:hover {
  border-color: var(--line-strong);
  background: var(--blue-50);
}

.acm-pd .load-tabs button[aria-selected="true"] {
  border-color: var(--blue-600);
  background: var(--blue-600);
  color: #fff;
  box-shadow: 0 6px 14px -8px rgba(20, 97, 224, .7);
}

.acm-pd .table-wrap {
  margin-top: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow-x: auto;
}

.acm-pd .data-table {
  min-width: 520px;
  font-size: 14px;
}

.acm-pd .data-table th {
  background: var(--blue-600);
  color: #fff;
  font-weight: 500;
  padding: 10px 12px;
  line-height: 1.3;
  text-align: center;
  vertical-align: middle;
}

.acm-pd .data-table thead th+th,
.acm-pd .data-table thead tr+tr th {
  border-left: 1px solid rgba(255, 255, 255, .22);
}

.acm-pd .data-table thead tr+tr th {
  background: var(--blue-700);
  font-size: 13px;
  padding: 8px 12px;
  border-top: 1px solid rgba(255, 255, 255, .22);
}

.acm-pd .data-table thead tr:first-child th:first-child,
.acm-pd .data-table td:first-child {
  text-align: left;
}

.acm-pd .data-table td {
  padding: 13px 12px;
  text-align: center;
  color: var(--text);
  border-top: 1px solid var(--line);
}

/* "24 Bottles" stays on one line; the package name wraps instead */
.acm-pd .data-table td:nth-child(2) {
  white-space: nowrap;
}

.acm-pd .data-table tbody tr {
  cursor: pointer;
}

.acm-pd .data-table tbody tr:nth-child(even) {
  background: #f9fbfe;
}

.acm-pd .data-table tbody tr:hover {
  background: var(--blue-50);
}

.acm-pd .data-table tbody tr.is-current {
  background: var(--blue-100);
}

.acm-pd .data-table tr.is-current td {
  color: var(--navy);
  font-weight: 600;
}

.acm-pd .data-table tr.is-current td:first-child {
  box-shadow: inset 4px 0 0 var(--blue-600);
}

/* the package name is the row's button (keyboard + screen readers); a click anywhere on the row picks it */
.acm-pd .load-pick {
  display: block;
  width: 100%;
  text-align: left;
  font-weight: inherit;
}

.acm-pd .load-card .pack-note {
  margin-top: 12px;
  padding-inline: 4px;
}

/* Calculator */
.acm-pd .calc {
  padding: 20px 20px 16px;
  container-type: inline-size;
}

.acm-pd .calc__title {
  font-size: 26px;
  line-height: 1.2;
  font-weight: 700;
  color: var(--blue-700);
  letter-spacing: -.01em;
}

.acm-pd .calc__sub {
  margin-top: 6px;
  font-size: 14px;
  color: var(--muted);
}

.acm-pd .calc__inputs {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: 12px;
  margin-top: 16px;
}

/* two columns; they stack only on a narrow calculator (its width depends on the page layout,
   hence a container query). */
@container (max-width: 460px) {
  .acm-pd .calc__inputs {
    grid-template-columns: minmax(0, 1fr);
  }

  .acm-pd .calc-qty-row {
    flex-wrap: wrap;
  }

  .acm-pd .calc-qty-row .calc-qty,
  .acm-pd .calc-qty-row .calc-fill {
    flex: 1 1 100%;
  }
}

/* medium calculator (two page columns under ~1400px): Auto fill keeps only its icon */
@container (min-width: 461px) and (max-width: 600px) {
  .acm-pd .calc-fill {
    width: 54px;
    padding: 0;
  }

  .acm-pd .calc-fill__text {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
}


.acm-pd .calc-field {
  padding: 12px 14px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fbfcfe;
}

.acm-pd .calc-field__label {
  display: block;
  margin-bottom: 10px;
  font-size: 16px;
  font-weight: 600;
  color: var(--blue-700);
}

/* quantity and Auto fill on one row (Auto fill moves underneath on a narrow calculator) */
.acm-pd .calc-qty-row {
  display: flex;
  gap: 8px;
}

.acm-pd .calc-qty {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  height: 54px;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  background: var(--white);
  overflow: hidden;
  transition: border-color .2s, box-shadow .2s;
}

.acm-pd .calc-qty:focus-within {
  border-color: var(--blue-600);
  box-shadow: 0 0 0 3px var(--blue-100);
}

/* flashed by Auto fill */
.acm-pd .calc-qty.is-filled {
  animation: calc-filled .9s ease-out;
}

@keyframes calc-filled {

  0%,
  35% {
    border-color: var(--blue-600);
    background: var(--blue-50);
    box-shadow: 0 0 0 4px var(--blue-100);
  }
}

/* a text field so the quantity can show thousands separators; input[type] selectors match the
   theme's specificity for fields */
.acm-pd .calc-qty input[type="text"] {
  flex: 1 1 auto;
  width: 100%;
  height: auto;
  padding: 0 10px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  font: inherit;
  font-size: 22px;
  font-weight: 700;
  color: var(--navy);
  font-variant-numeric: tabular-nums;
}

.acm-pd .calc-qty input[type="text"]:focus {
  outline: none;
  box-shadow: none;
  background: transparent;
  color: var(--navy);
}

/* + over − : 100 cartons */
.acm-pd .calc-qty__steps {
  flex: none;
  display: flex;
  flex-direction: column;
  width: 36px;
  border-left: 1px solid var(--line);
}

.acm-pd .calc-qty__step {
  flex: 1 1 0;
  display: grid;
  place-items: center;
  min-height: 0;
  color: var(--navy);
  transition: background-color .2s, color .2s;
}

.acm-pd .calc-qty__step:hover:not(:disabled) {
  background: var(--blue-50);
  color: var(--blue-700);
}

.acm-pd .calc-qty__step:disabled {
  color: var(--line-strong);
  cursor: not-allowed;
}

.acm-pd .calc-qty__step+.calc-qty__step {
  border-top: 1px solid var(--line);
}

.acm-pd .calc-qty__step .icon {
  font-size: 15px;
  stroke-width: 2.2;
}

.acm-pd .calc-qty__unit {
  display: flex;
  align-items: center;
  padding: 0 10px;
  border-left: 1px solid var(--line);
  background: var(--soft);
  font-size: 13.5px;
  color: var(--text);
}

.acm-pd .calc-fill {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  height: 54px;
  padding: 0 12px;
  border: 1px solid var(--blue-100);
  border-radius: 10px;
  background: var(--blue-50);
  color: var(--blue-700);
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  transition: background-color .2s, border-color .2s;
}

.acm-pd .calc-fill:hover:not(:disabled) {
  border-color: var(--blue-500);
  background: var(--blue-100);
}

.acm-pd .calc-fill:disabled {
  opacity: .45;
  cursor: not-allowed;
}

.acm-pd .calc-fill .icon {
  font-size: 17px;
  stroke-width: 2.2;
}

.acm-pd .calc-result {
  margin-top: 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fafcff;
  overflow: hidden;
}

.acm-pd .calc-result__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 2px 16px;
  padding: 10px 16px;
  background: var(--blue-50);
  border-bottom: 1px solid var(--line);
}

.acm-pd .calc-result__title {
  font-size: 17px;
  font-weight: 600;
  color: var(--blue-700);
}

.acm-pd .calc-result__basis {
  font-size: 13px;
  color: var(--muted);
}

.acm-pd .calc-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  padding: 14px 0 16px;
}

.acm-pd .calc-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 10px;
  text-align: center;
}

.acm-pd .calc-stat+.calc-stat {
  border-left: 1px solid var(--line);
}

.acm-pd .calc-stat__value {
  font-size: 34px;
  line-height: 1.15;
  font-weight: 700;
  color: var(--navy);
  font-variant-numeric: tabular-nums;
}

/* editable container count: − [ 0.2 ] + */
.acm-pd .calc-stepper {
  display: flex;
  align-items: center;
  gap: 6px;
}

.acm-pd .calc-stepper__btn {
  flex: none;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  background: var(--white);
  color: var(--blue-700);
  transition: background-color .2s, border-color .2s;
}

.acm-pd .calc-stepper__btn:hover:not(:disabled) {
  border-color: var(--blue-500);
  background: var(--blue-50);
}

.acm-pd .calc-stepper__btn:disabled {
  color: var(--line-strong);
  cursor: not-allowed;
}

.acm-pd .calc-stepper__btn .icon {
  font-size: 15px;
  stroke-width: 2.4;
}

.acm-pd .calc-stepper input[type="text"] {
  width: 5ch;
  height: auto;
  padding: 0 4px;
  border: 1px dashed var(--line-strong);
  border-radius: 8px;
  background: var(--white);
  box-shadow: none;
  font-family: inherit;
  font-size: 34px;
  line-height: 1.15;
  font-weight: 700;
  color: var(--navy);
  text-align: center;
  transition: border-color .2s, box-shadow .2s;
}

.acm-pd .calc-stepper input[type="text"]:hover:not(:disabled) {
  border-color: var(--blue-500);
}

.acm-pd .calc-stepper input[type="text"]:focus {
  outline: none;
  border-style: solid;
  border-color: var(--blue-600);
  box-shadow: 0 0 0 3px var(--blue-100);
  color: var(--navy);
}

.acm-pd .calc-stepper input[type="text"]:disabled {
  background: transparent;
}

.acm-pd .calc-stepper input[type="text"]::placeholder {
  color: var(--navy);
  opacity: 1;
}

.acm-pd .calc-stat__label {
  margin-top: 2px;
  font-size: 15px;
  line-height: 1.3;
  font-weight: 500;
  color: var(--navy);
}

.acm-pd .calc-stat__note {
  margin-top: 2px;
  font-size: 13.5px;
  line-height: 1.35;
  color: var(--muted);
}

/* narrow calculator: the result columns stack, so the container stepper keeps its room */
@container (max-width: 460px) {
  .acm-pd .calc-stats {
    grid-template-columns: minmax(0, 1fr);
    padding: 4px 0;
  }

  .acm-pd .calc-stats .calc-stat {
    padding: 10px;
  }

  .acm-pd .calc-stats .calc-stat+.calc-stat {
    border-left: 0;
    border-top: 1px solid var(--line);
  }
}

.acm-pd .calc-result__msg {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 0 16px 14px;
  font-size: 13.5px;
  color: var(--amber-700);
}

.acm-pd .calc-result__msg[hidden] {
  display: none;
}

.acm-pd .calc-result__msg .icon {
  flex: none;
  margin-top: 2px;
  font-size: 16px;
}

.acm-pd .calc-illus {
  margin-top: 16px;
}

.acm-pd .calc-illus__caption {
  min-height: 1.5em;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--blue-700);
  text-align: center;
}

.acm-pd .calc-illus__svg {
  display: block;
  width: 100%;
  max-width: 720px;
  height: auto;
  margin: 8px auto 0;
  overflow: visible;
}

/* Container illustration – shapes are generated by product-detail.js */

/* ground shadows (blurred in the SVG): a wide soft one, and tight ones under the frame and the cargo */
.acm-pd .cl-shadow {
  fill: rgba(14, 39, 72, .22);
}

.acm-pd .cl-shadow--contact {
  fill: rgba(14, 39, 72, .45);
}

.acm-pd .cl-contact {
  fill: rgba(40, 24, 6, .34);
}

.acm-pd .cl-floor {
  fill: #bca483;
}

.acm-pd .cl-floor__planks {
  fill: none;
  stroke: rgba(92, 64, 30, .22);
}

.acm-pd .cl-wall {
  fill: #e1e6ec;
}

.acm-pd .cl-wall--end {
  fill: #cad1da;
}

.acm-pd .cl-ribs {
  fill: rgba(14, 39, 72, .07);
}

.acm-pd .cl-shell {
  fill: #1553d0;
}

.acm-pd .cl-shell--door {
  fill: #1b5bd8;
}

.acm-pd .cl-shell--roof {
  fill: #2f6fe8;
}

.acm-pd .cl-shell--rail {
  fill: #1149bd;
}

.acm-pd .cl-shell--sill {
  fill: #3a78ea;
}

.acm-pd .cl-shell--post {
  fill: #0f44b3;
}

.acm-pd .cl-shell__ribs {
  fill: rgba(8, 30, 90, .16);
}

.acm-pd .cl-shell__seam {
  fill: none;
  stroke: rgba(6, 24, 70, .55);
  stroke-width: 1.4;
}

.acm-pd .cl-shell__bars {
  fill: none;
  stroke: #9fb8ec;
  stroke-width: 2;
  stroke-linecap: round;
}

.acm-pd .cl-shell__handles {
  fill: #c5d5f5;
}

.acm-pd .cl-casting {
  fill: #0b3690;
}

.acm-pd .cl-cartons .is-top {
  fill: #e9c796;
}

.acm-pd .cl-cartons .is-front {
  fill: #d8a466;
}

.acm-pd .cl-cartons .is-side {
  fill: #c48d4f;
}

.acm-pd .cl-cartons__seams {
  fill: none;
  stroke: rgba(110, 66, 20, .45);
  stroke-width: .9;
}

.acm-pd .cl-pallet .is-top {
  fill: #eab766;
}

.acm-pd .cl-pallet .is-front {
  fill: #d99a3e;
}

.acm-pd .cl-pallet .is-side {
  fill: #c0832e;
}

.acm-pd .cl-pallet__gaps {
  fill: #5a3a14;
}

/* unfilled part of the last pallet */
.acm-pd .cl-ghost path {
  fill: rgba(20, 97, 224, .05);
  stroke: var(--blue-500);
  stroke-width: 1.2;
  stroke-dasharray: 4 3;
  stroke-linejoin: round;
}

/* free pallet position */
.acm-pd .cl-slot {
  fill: rgba(255, 255, 255, .28);
  stroke: rgba(255, 255, 255, .9);
  stroke-width: 1.2;
  stroke-dasharray: 5 4;
}

.acm-pd .cl-badge circle {
  fill: var(--blue-600);
  stroke: #fff;
  stroke-width: 2;
}

.acm-pd .cl-badge text {
  fill: #fff;
  font-size: 12px;
  font-weight: 600;
  text-anchor: middle;
  dominant-baseline: central;
}

.acm-pd .cl-dim line {
  stroke: var(--navy);
  stroke-width: 1.2;
}

.acm-pd .cl-dim__arrow {
  fill: var(--navy);
}

.acm-pd .cl-dim__value {
  fill: var(--navy);
  font-size: 18px;
  font-weight: 600;
}

.acm-pd .cl-dim__note {
  fill: var(--text);
  font-size: 14.5px;
}

/* ==========================================================================
   Certifications band
   ========================================================================== */
.acm-pd .cert-band {
  position: relative;
  margin-top: 16px;
  border-radius: 20px;
  background: linear-gradient(120deg, #eaf2fe 0%, #f5f9ff 55%, #e2edfd 100%);
}

.acm-pd .cert-band__map {
  position: absolute;
  inset: 0;
  background: url("../images/acm-product/world-map.png") no-repeat 70% 40% / 110% auto;
  opacity: .9;
  border-radius: inherit;
  pointer-events: none;
}

.acm-pd .cert-band__inner {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: 40px;
  padding: 40px;
  align-items: center;
}

.acm-pd .cert-band__title {
  margin-top: 12px;
  font-size: 32px;
  line-height: 1.2;
  font-weight: 700;
  color: var(--navy);
}

.acm-pd .cert-band__text {
  margin-top: 12px;
  max-width: 560px;
  color: var(--text);
}

.acm-pd .cert-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 28px;
}

.acm-pd .cert {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border-radius: 14px;
  background: rgba(255, 255, 255, .92);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
}

.acm-pd .cert__seal {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  flex: none;
  text-align: center;
  font-size: 10px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: .02em;
  color: #fff;
  background: radial-gradient(circle at 35% 30%, #3f8cff, var(--blue-700));
  box-shadow: inset 0 0 0 3px rgba(255, 255, 255, .5), 0 0 0 2px var(--blue-600);
}

.acm-pd .cert__seal--green {
  background: radial-gradient(circle at 35% 30%, #34c37b, #0e8a4d);
  box-shadow: inset 0 0 0 3px rgba(255, 255, 255, .5), 0 0 0 2px #10924f;
}

.acm-pd .cert__seal--navy {
  background: radial-gradient(circle at 35% 30%, #365a94, var(--blue-900));
  box-shadow: inset 0 0 0 3px rgba(255, 255, 255, .5), 0 0 0 2px var(--blue-900);
}

.acm-pd .cert__seal b {
  display: block;
  font-size: 12.5px;
  letter-spacing: 0;
}

.acm-pd .cert__name {
  font-weight: 600;
  color: var(--navy);
  line-height: 1.25;
}

.acm-pd .cert__desc {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.35;
}

.acm-pd .cta-card {
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: 28px;
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--line);
}

.acm-pd .cta-card__title {
  font-size: 20px;
  line-height: 1.3;
  font-weight: 600;
  color: var(--navy);
}

.acm-pd .cta-card__text {
  margin-top: 6px;
  font-size: 14.5px;
  color: var(--muted);
}

/* Steps in buying order, joined by a thin line between the numbers */
.acm-pd .cta-steps {
  list-style: none;
  margin: 22px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.acm-pd .cta-step {
  position: relative;
  display: flex;
  gap: 14px;
}

.acm-pd .cta-step:not(:last-child)::before {
  content: "";
  position: absolute;
  left: 13px;
  top: 32px;
  bottom: -14px;
  width: 2px;
  background: var(--line);
}

.acm-pd .cta-step__num {
  flex: none;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--blue-50);
  color: var(--blue-700);
  font-size: 13.5px;
  font-weight: 600;
}

.acm-pd .cta-step:last-child .cta-step__num {
  background: var(--blue-700);
  color: var(--white);
}

.acm-pd .cta-step__body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-top: 3px;
}

.acm-pd .cta-step__title {
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
}

.acm-pd .cta-step__link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  align-self: flex-start;
  font-size: 15px;
  font-weight: 500;
  color: var(--blue-700);
}

.acm-pd .cta-step__link:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.acm-pd .cta-step__link .icon {
  font-size: 18px;
}

.acm-pd .cta-step__link.is-busy {
  cursor: progress;
  opacity: .7;
}

.acm-pd .cta-step .btn {
  margin-top: 4px;
}

.acm-pd .cta-card__contact {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}

.acm-pd .cta-card__label {
  font-size: 13.5px;
  color: var(--muted);
}

.acm-pd .cta-card__links {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 10px;
  font-size: 14.5px;
}

.acm-pd .cta-card__links a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--blue-700);
  font-weight: 500;
}

.acm-pd .cta-card__links a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.acm-pd .cta-card__links .icon {
  font-size: 18px;
}

/* ---------- Market certifications (inside the band) ---------- */
.acm-pd .market-cert {
  grid-column: 1 / -1;
  padding: 28px;
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, .94);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}

.acm-pd .market-cert__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: 16px 32px;
  align-items: end;
}

.acm-pd .market-cert__title {
  font-size: 20px;
  line-height: 1.3;
  font-weight: 600;
  color: var(--navy);
}

.acm-pd .market-cert__text {
  margin-top: 6px;
  font-size: 14.5px;
  color: var(--muted);
}

.acm-pd .market-cert__label {
  display: block;
  margin-bottom: 6px;
  font-size: 13px;
  font-weight: 500;
  color: var(--navy);
}

.acm-pd .market-cert__body {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}

.acm-pd .market-cert__empty {
  padding: 18px;
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius);
  text-align: center;
  font-size: 14.5px;
  color: var(--muted);
}

.acm-pd .market-cert__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 16px;
}

.acm-pd .market-cert__count {
  font-size: 14.5px;
  color: var(--text);
}

.acm-pd .market-cert__count b {
  color: var(--navy);
  font-weight: 600;
}

.acm-pd .market-cert__actions {
  display: flex;
  gap: 16px;
}

.acm-pd .market-cert__action {
  font-size: 14px;
  font-weight: 500;
  color: var(--blue-700);
}

.acm-pd .market-cert__action:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.acm-pd .market-cert__legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  margin-top: 10px;
  font-size: 12.5px;
  color: var(--muted);
}

.acm-pd .market-cert__legend > span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.acm-pd .market-cert__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px 24px;
  margin-top: 20px;
}

.acm-pd .market-cert__foot[hidden] {
  display: none;
}

.acm-pd .market-cert__note {
  display: flex;
  gap: 8px;
  max-width: 640px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--muted);
}

.acm-pd .market-cert__note .icon {
  flex: none;
  margin-top: 2px;
  font-size: 16px;
  color: var(--blue-600);
}

.acm-pd .market-cert__foot .btn {
  flex: none;
}

/* level tag */
.acm-pd .lvl {
  display: inline-flex;
  align-items: center;
  flex: none;
  height: 20px;
  padding: 0 8px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .06em;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: help;
}

.acm-pd .lvl--required {
  background: var(--red-50);
  color: var(--red-600);
}

.acm-pd .lvl--de_facto {
  background: var(--violet-50);
  color: var(--violet-600);
}

.acm-pd .lvl--preferred {
  background: var(--blue-100);
  color: var(--blue-700);
}

.acm-pd .lvl--conditional {
  background: var(--amber-50);
  color: var(--amber-700);
}

.acm-pd .lvl--optional {
  background: #eef1f5;
  color: var(--muted);
}

/* certification cards (checkbox) */
.acm-pd .mc-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 10px;
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
}

.acm-pd .mc-list > li {
  margin: 0;
}

.acm-pd .mc-cert {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  height: 100%;
  margin: 0;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  cursor: pointer;
  font-weight: 400;
  transition: border-color .15s, box-shadow .15s, background-color .15s;
}

.acm-pd .mc-cert:hover {
  border-color: var(--line-strong);
  box-shadow: var(--shadow-sm);
}

.acm-pd .mc-cert.is-checked {
  border-color: var(--blue-600);
  background: var(--blue-50);
}

/* the real checkbox stays focusable but hidden (theme guard: Flatsome styles checkboxes) */
.acm-pd .mc-cert .mc-cert__input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  opacity: 0;
  pointer-events: none;
}

.acm-pd .mc-cert__box {
  display: grid;
  place-items: center;
  flex: none;
  width: 20px;
  height: 20px;
  margin-top: 1px;
  border: 1.5px solid var(--line-strong);
  border-radius: 6px;
  background: #fff;
  color: #fff;
  transition: background-color .15s, border-color .15s;
}

.acm-pd .mc-cert__box .icon {
  font-size: 14px;
  opacity: 0;
}

.acm-pd .mc-cert.is-checked .mc-cert__box {
  border-color: var(--blue-600);
  background: var(--blue-600);
}

.acm-pd .mc-cert.is-checked .mc-cert__box .icon {
  opacity: 1;
}

.acm-pd .mc-cert__input:focus-visible + .mc-cert__box {
  box-shadow: 0 0 0 3px var(--blue-100);
  border-color: var(--blue-600);
}

.acm-pd .mc-cert__main {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  flex: 1;
}

.acm-pd .mc-cert__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.acm-pd .mc-cert__name {
  font-weight: 600;
  color: var(--navy);
  line-height: 1.3;
}

.acm-pd .mc-cert__desc {
  font-size: 13px;
  line-height: 1.4;
  color: var(--muted);
}

.acm-pd .mc-cert__type {
  display: inline-block;
  margin-right: 6px;
  padding: 0 6px;
  border-radius: 4px;
  background: var(--soft);
  border: 1px solid var(--line);
  font-size: 11px;
  font-weight: 500;
  color: var(--text);
}

.acm-pd .mc-cert__markets {
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--text);
}

.acm-pd .mc-cert__markets b {
  font-weight: 600;
}

.acm-pd .mc-cert__held {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12.5px;
  font-weight: 500;
  color: #0e8a4d;
}

.acm-pd .mc-cert__held .icon {
  font-size: 15px;
}

/* ---------- Searchable select (.acm-select) – styles match the acmbeverage.com contact form ---------- */
.acm-pd .acm-select {
  --acm-accent: var(--blue-600);
  --acm-accent-soft: var(--blue-100);
  --acm-border: var(--line-strong);
  --acm-text: var(--navy);
  --acm-muted: #9ca3af;
  --acm-hover: var(--blue-50);
  --acm-radius: 10px;
  --acm-height: 44px;
  position: relative;
  width: 100%;
  font-size: 15px;
  line-height: 1.45;
  color: var(--acm-text);
}

.acm-pd .acm-select__native {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  border: 0;
  opacity: 0;
  clip-path: inset(50%);
  white-space: nowrap;
  pointer-events: none;
}

.acm-pd .acm-select__control {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: var(--acm-height);
  padding: 6px 12px 6px 14px;
  background: #fff;
  border: 1px solid var(--acm-border);
  border-radius: var(--acm-radius);
  cursor: pointer;
  transition: border-color .15s ease, box-shadow .15s ease;
}

.acm-pd .acm-select__control:hover {
  border-color: #b9c3ce;
}

.acm-pd .acm-select__control:focus-visible,
.acm-pd .acm-select.is-open .acm-select__control {
  outline: none;
  border-color: var(--acm-accent);
  box-shadow: 0 0 0 3px var(--acm-accent-soft);
}

.acm-pd .acm-select__value {
  display: flex;
  flex: 1 1 auto;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.acm-pd .acm-select__placeholder {
  color: var(--acm-muted);
  font-size: 14px;
}

.acm-pd .acm-select__single {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.acm-pd .acm-select__arrow {
  display: flex;
  flex: 0 0 auto;
  color: var(--acm-muted);
  transition: transform .18s ease;
}

.acm-pd .acm-select.is-open .acm-select__arrow {
  transform: rotate(180deg);
}

.acm-pd .acm-select__tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  max-width: 100%;
  padding: 3px 6px 3px 9px;
  background: var(--acm-accent-soft);
  border-radius: 4px;
  font-size: 13.5px;
  line-height: 1.4;
}

.acm-pd .acm-select__tag > span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.acm-pd .acm-select .acm-select__tag-remove {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 17px;
  height: 17px;
  min-height: 0;
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 3px;
  color: var(--acm-accent);
  cursor: pointer;
  transition: background .12s ease;
}

.acm-pd .acm-select .acm-select__tag-remove:hover {
  background: rgba(20, 97, 224, .2);
}

.acm-pd .acm-select__panel {
  position: absolute;
  z-index: 60;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  background: #fff;
  border: 1px solid var(--acm-border);
  border-radius: var(--acm-radius);
  box-shadow: 0 8px 24px rgba(16, 30, 54, .12);
  overflow: hidden;
}

.acm-pd .acm-select--up .acm-select__panel {
  top: auto;
  bottom: calc(100% + 6px);
}

.acm-pd .acm-select__search-wrap {
  padding: 10px;
  border-bottom: 1px solid #eef1f5;
}

.acm-pd .acm-select__search-wrap[hidden] {
  display: none;
}

.acm-pd .acm-select input.acm-select__search {
  display: block;
  width: 100%;
  height: 36px;
  margin: 0;
  padding: 0 12px;
  background: #fff;
  border: 1px solid var(--acm-border);
  border-radius: 8px;
  box-shadow: none;
  font: inherit;
  font-size: 14.5px;
  color: var(--acm-text);
}

.acm-pd .acm-select input.acm-select__search:focus {
  outline: none;
  border-color: var(--acm-accent);
  box-shadow: 0 0 0 3px var(--acm-accent-soft);
}

.acm-pd .acm-select__list {
  max-height: 240px;
  margin: 0;
  padding: 4px 0;
  list-style: none;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: #c5ccd6 transparent;
}

.acm-pd .acm-select__group {
  padding: 10px 12px 4px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
  cursor: default;
}

.acm-pd .acm-select__option {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 !important;
  padding: 9px 16px;
  cursor: pointer;
  list-style: none;
}

.acm-pd .acm-select__option-label {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.acm-pd .acm-select__option.is-active {
  background: var(--acm-hover);
}

.acm-pd .acm-select__option.is-selected {
  color: var(--acm-accent);
  font-weight: 500;
}

.acm-pd .acm-select__option-check {
  display: flex;
  flex: 0 0 auto;
  color: var(--acm-accent);
  opacity: 0;
}

.acm-pd .acm-select__option.is-selected .acm-select__option-check {
  opacity: 1;
}

.acm-pd .acm-select__empty {
  padding: 16px;
  text-align: center;
  color: var(--acm-muted);
  font-size: 14px;
}

/* ==========================================================================
   Footer
   ========================================================================== */

/* ==========================================================================
   Gallery lightbox (Flickity) – the popup grows out of the product image as a circle,
   the clicked image flies into the centre and its neighbours fan out, scaled by distance.
   ========================================================================== */
.acm-pd .lightbox {
  --lb-cell: 19vw;
  /* distance between slides */
  --lb-img: min(70vh, 44vw);
  /* size of the active image box */
  --lb-ease: cubic-bezier(.7, 0, .2, 1);
  position: fixed;
  inset: 0;
  z-index: 1100;
  display: flex;
  flex-direction: column;
  background: radial-gradient(120% 90% at 50% 40%, #f3f6fc 0%, #e6ebf6 60%, #dde4f2 100%);
  clip-path: circle(var(--r0, 0px) at var(--ox, 50%) var(--oy, 50%));
  transition: clip-path .7s var(--lb-ease);
}

.acm-pd .lightbox[hidden] {
  display: none;
}

.acm-pd .lightbox.is-open {
  clip-path: circle(150vmax at var(--ox, 50%) var(--oy, 50%));
}

.acm-pd .lightbox__bar {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 28px 0;
}

.acm-pd .lightbox__count {
  font-size: 14px;
  font-weight: 500;
  letter-spacing: .08em;
  color: var(--muted);
}

.acm-pd .lightbox__close {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--navy);
  background: rgba(255, 255, 255, .7);
  transition: background-color .2s, transform .3s;
}

.acm-pd .lightbox__close:hover {
  background: #fff;
  transform: rotate(90deg);
}

.acm-pd .lightbox__close .icon {
  font-size: 22px;
}

.acm-pd .lightbox__carousel {
  flex: 1;
  min-height: 0;
}

.acm-pd .lightbox__carousel:focus-visible {
  outline: none;
}

.acm-pd .lightbox__cell {
  width: var(--lb-cell);
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* the theme forces every direct child of a Flickity slider to full width with
   !important, which collapses the peek of the neighbouring slides; its transform
   transition would also make a cell moved from the start to the end (endless
   strip, product-detail.js) slide across instead of jumping there unseen */
.acm-pd .lightbox .flickity-slider>.lightbox__cell {
  width: var(--lb-cell) !important;
  transition: none;
}

.acm-pd .lightbox__figure {
  margin: 0;
  transform-origin: 50% 50%;
  will-change: transform, opacity;
}

.acm-pd .lightbox__img {
  display: block;
  width: var(--lb-img);
  height: var(--lb-img);
  max-width: none;
  object-fit: contain;
  filter: drop-shadow(0 24px 30px rgba(14, 39, 72, .16));
  transition: transform .8s cubic-bezier(.2, .9, .2, 1), opacity .6s ease;
  transition-delay: calc(var(--dist, 0) * 90ms + 120ms);
  user-select: none;
  -webkit-user-drag: none;
}

/* entrance / exit: neighbours start folded behind the centre image */
.acm-pd .lightbox:not(.is-open) .lightbox__img:not(.is-hero) {
  opacity: 0;
  transform: translateX(calc(var(--dir, 0) * -55%)) scale(.4);
}

.acm-pd .lightbox.is-closing .lightbox__img:not(.is-hero) {
  transition-delay: 0s;
  transition-duration: .45s;
}

.acm-pd .lightbox__img.is-hero {
  transition: transform .75s var(--lb-ease);
  transition-delay: 0s;
}

.acm-pd .lightbox__caption {
  position: relative;
  z-index: 2;
  max-width: 340px;
  min-height: 3.9em;
  margin: 0 auto 6vh;
  padding: 0 16px;
  text-align: center;
  font-size: 18px;
  line-height: 1.35;
  font-weight: 600;
  color: var(--navy);
  transition: opacity .35s, transform .35s;
}

.acm-pd .lightbox__caption.is-changing {
  opacity: 0;
  transform: translateY(6px);
}

.acm-pd .lightbox:not(.is-open) .lightbox__caption {
  opacity: 0;
  transform: translateY(12px);
}

/* Flickity arrows: plain chevrons at the far edges.
   The theme restyles these too – it hides them until a slider is hovered and
   drops the vertical centering with !important, so both are restated here. */
.acm-pd .lightbox .flickity-prev-next-button {
  width: 56px;
  height: 56px;
  bottom: auto;
  background: transparent;
  color: var(--navy);
  border-radius: 50%;
  opacity: 1;
  transform: translateY(-50%) !important;
  transition: color .2s, background-color .2s;
}

.acm-pd .lightbox .flickity-prev-next-button:hover {
  background: rgba(255, 255, 255, .6);
  color: var(--blue-700);
}

.acm-pd .lightbox .flickity-prev-next-button:focus-visible {
  box-shadow: 0 0 0 3px var(--blue-100);
}

.acm-pd .lightbox .flickity-prev-next-button.previous {
  left: 4vw;
}

.acm-pd .lightbox .flickity-prev-next-button.next {
  right: 4vw;
}

.acm-pd .lightbox .flickity-prev-next-button .flickity-button-icon {
  left: 30%;
  top: 30%;
  width: 40%;
  height: 40%;
  padding: 0;
  transform: none;
}

.acm-pd .lightbox:not(.is-open) .flickity-prev-next-button {
  opacity: 0;
}

/* ==========================================================================
   Quote modal + mobile bar
   ========================================================================== */
.acm-pd .modal {
  position: fixed;
  inset: 0;
  z-index: 1090;
  display: grid;
  place-items: center;
  padding: 16px;
  background: rgba(10, 35, 80, .55);
  opacity: 0;
  visibility: hidden;
  transition: opacity .2s, visibility .2s;
}

.acm-pd .modal.is-open {
  opacity: 1;
  visibility: visible;
}

.acm-pd .modal__dialog {
  width: 100%;
  max-width: 620px;
  max-height: calc(100vh - 32px);
  overflow-y: auto;
  background: #fff;
  border-radius: 18px;
  box-shadow: var(--shadow-lg);
  padding: 28px;
  transform: translateY(12px);
  transition: transform .25s;
}

.acm-pd .modal.is-open .modal__dialog {
  transform: none;
}

.acm-pd .modal__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.acm-pd .modal__title {
  font-size: 22px;
  font-weight: 600;
  color: var(--navy);
  line-height: 1.25;
}

.acm-pd .modal__product {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 16px;
  padding: 10px 12px;
  background: var(--soft);
  border-radius: 10px;
  font-size: 14px;
  color: var(--navy);
}

.acm-pd .modal__product img {
  width: 36px;
  height: 48px;
  object-fit: contain;
}

.acm-pd .modal__close {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  flex: none;
}

.acm-pd .modal__close:hover {
  background: var(--soft);
}

.acm-pd .modal__close .icon {
  font-size: 20px;
}

.acm-pd .form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: 20px;
}

.acm-pd .form-grid .full {
  grid-column: 1 / -1;
}

/* Quote popup on desktop: a wider dialog, so "Packaging & volume" and "Outer packaging"
   (.full--mobile) share one row – one row less to fit a 768px-high screen */
@media (min-width: 900px) {
  .acm-pd .modal__dialog {
    max-width: 760px;
  }

  .acm-pd .form-grid .full--mobile {
    grid-column: auto;
  }
}

/* Short screens (1366 × 768 laptops: ~650px of browser viewport): tighter spacing */
@media (min-width: 900px) and (max-height: 820px) {
  .acm-pd .modal {
    padding: 12px;
  }

  .acm-pd .modal__dialog {
    max-height: calc(100vh - 24px);
    padding: 20px 26px 22px;
    border-radius: 16px;
  }

  .acm-pd .modal__title {
    font-size: 20px;
  }

  .acm-pd .modal__close {
    width: 32px;
    height: 32px;
  }

  .acm-pd .modal__product {
    margin-top: 10px;
    padding: 6px 10px;
    font-size: 13.5px;
  }

  .acm-pd .modal__product img {
    width: 26px;
    height: 34px;
  }

  .acm-pd .modal .form-grid {
    gap: 10px 14px;
    margin-top: 14px;
  }

  .acm-pd .modal .field label {
    margin-bottom: 4px;
  }

  .acm-pd .modal .field input,
  .acm-pd .modal .field select,
  .acm-pd .modal .calc-qty--field {
    height: 40px;
  }

  .acm-pd .modal .acm-select {
    --acm-height: 40px;
  }

  .acm-pd .modal .field textarea {
    height: 60px;
    padding: 8px 14px;
  }
}

.acm-pd .field label {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: var(--navy);
  margin-bottom: 6px;
}

.acm-pd .field input,
.acm-pd .field select,
.acm-pd .field textarea {
  width: 100%;
  height: 44px;
  padding: 0 14px;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  font: inherit;
  font-size: 14px;
  color: var(--navy);
  background: #fff;
}

/* Several controls under one label (e.g. outer packaging: carton + pack) */
.acm-pd .field-set__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

/* Input with a unit after the value */
.acm-pd .input-unit {
  position: relative;
}

.acm-pd .field .input-unit input {
  padding-right: 80px;
}

/* Quote form quantity: the .calc-qty control at the size of the other form fields */
.acm-pd .calc-qty--field {
  height: 44px;
}

.acm-pd .calc-qty--field input[type="text"] {
  padding: 0 14px;
  font-size: 14px;
  font-weight: 400;
}

.acm-pd .calc-qty--field .calc-qty__steps {
  width: 32px;
}

.acm-pd .calc-qty--field .calc-qty__step .icon {
  font-size: 13px;
}

.acm-pd .calc-qty--field .calc-qty__unit {
  font-size: 13px;
}

.acm-pd .input-unit__suffix {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 14px;
  color: var(--muted);
  pointer-events: none;
}

.acm-pd .field textarea {
  height: 96px;
  padding: 10px 14px;
  resize: vertical;
}

.acm-pd .field input:focus,
.acm-pd .field select:focus,
.acm-pd .field textarea:focus {
  outline: none;
  border-color: var(--blue-600);
  box-shadow: 0 0 0 3px var(--blue-100);
}

.acm-pd .mobile-cta {
  display: none;
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1200px) {

  .acm-pd .pd-hero {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  .acm-pd .pd-keyinfo {
    grid-column: 1 / -1;
  }

  /* Full-width panel: flow the rows into two columns */
  .acm-pd .pd-keyinfo tbody {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 32px;
  }

  .acm-pd .pd-keyinfo tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    border-bottom: 1px dashed var(--line);
  }

  .acm-pd .pd-keyinfo tr+tr>td {
    border-top: 0;
  }

  .acm-pd .pd-keyinfo td:first-child {
    width: auto;
  }

  .acm-pd .pack-groups {
    grid-template-columns: minmax(0, 4fr) minmax(0, 1.25fr);
  }

  .acm-pd .pack-group--alu {
    grid-column: 1 / -1;
  }

  .acm-pd .outer-groups {
    grid-template-columns: minmax(0, 1fr);
  }

  .acm-pd .load-layout {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 1024px) {
  .acm-pd {
    --header-h: 64px;
  }

  .acm-pd .cert-band__inner {
    grid-template-columns: minmax(0, 1fr);
    padding: 32px;
  }

  .acm-pd .market-cert__head {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
  }
}

@media (max-width: 768px) {
  .acm-pd {
    --gutter: 16px;
    --tabs-h: 50px;
  }

  .acm-pd {
    font-size: 14.5px;
  }

  body.acm-pd-page {
    padding-bottom: 72px;
  }

  .acm-pd .pd-hero {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
  }

  .acm-pd .pd-gallery {
    grid-template-columns: minmax(0, 1fr);
  }

  .acm-pd .pd-thumbs {
    order: 2;
    flex-direction: row;
  }

  .acm-pd .pd-thumbs__nav {
    display: none;
  }

  .acm-pd .pd-thumbs__list {
    flex-direction: row;
    max-height: none;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .acm-pd .pd-thumb {
    width: 60px;
    height: 70px;
  }

  .acm-pd .pd-title {
    font-size: 24px;
  }

  .acm-pd .pd-keyinfo tbody {
    grid-template-columns: minmax(0, 1fr);
  }

  .acm-pd .pd-tabs {
    margin-top: 24px;
    margin-inline: calc(var(--gutter) * -1);
  }

  .acm-pd .pd-tabs__inner {
    border-radius: 0;
    border-inline: 0;
    padding-inline: 8px;
  }

  .acm-pd .pd-tabs a {
    flex: 0 0 auto;
    font-size: 14px;
    padding: 0 12px;
  }

  .acm-pd .pd-section {
    padding-block: 32px;
  }

  .acm-pd .pd-section-title {
    font-size: 21px;
  }

  .acm-pd .entry-content {
    font-size: 15px;
  }

  .acm-pd .entry-content h2 {
    font-size: 19px;
  }

  .acm-pd .pack-groups {
    grid-template-columns: minmax(0, 1fr);
  }

  .acm-pd .pack-group__items {
    grid-auto-flow: row;
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .acm-pd .pack-item {
    padding: 10px 2px;
    gap: 6px;
  }

  .acm-pd .pack-item__media {
    width: 60px;
    height: 150px;
  }

  .acm-pd .pack-item__media img {
    width: 174px;
    height: 174px;
    bottom: -15px;
  }

  .acm-pd .pack-item__size {
    font-size: 14px;
  }

  .acm-pd .pack-item__name {
    font-size: 12px;
  }

  .acm-pd .outer-group {
    padding: 12px;
  }

  .acm-pd .illus {
    --illus-scale: 1.1;
  }

  .acm-pd .outer-card__media {
    height: 120px;
  }

  .acm-pd .cert-band {
    margin-inline: calc(var(--gutter) * -1);
    border-radius: 0;
  }

  .acm-pd .cert-band__inner {
    padding: 32px var(--gutter);
  }

  .acm-pd .cert-band__title {
    font-size: 26px;
  }

  .acm-pd .cert-list {
    grid-template-columns: minmax(0, 1fr);
  }

  .acm-pd .market-cert {
    padding: 20px 16px;
  }

  .acm-pd .market-cert__foot {
    flex-direction: column;
    align-items: stretch;
  }

  .acm-pd .mc-list {
    grid-template-columns: minmax(0, 1fr);
  }

  .acm-pd .cta-card {
    padding: 22px;
  }

  .acm-pd .units {
    width: 100%;
    justify-content: space-between;
  }

  .acm-pd .load-layout {
    gap: 16px;
    margin-top: 20px;
  }

  .acm-pd .load-card {
    padding: 10px;
  }

  .acm-pd .load-tabs {
    gap: 6px;
  }

  .acm-pd .load-tabs button {
    height: 44px;
    padding: 0 6px;
    font-size: 14px;
  }

  /* the table scrolls sideways here: keep the package name in view */
  .acm-pd .data-table th:first-child,
  .acm-pd .data-table td:first-child {
    position: sticky;
    left: 0;
    z-index: 1;
  }

  .acm-pd .data-table tbody tr {
    background: var(--white);
  }

  .acm-pd .data-table td:first-child {
    background: inherit;
  }

  .acm-pd .calc {
    padding: 16px 14px 14px;
  }

  .acm-pd .calc__title {
    font-size: 21px;
  }

  .acm-pd .calc-stats {
    padding: 12px 0 14px;
  }

  .acm-pd .calc-stat {
    padding: 0 6px;
  }

  .acm-pd .calc-stat__value,
  .acm-pd .calc-stepper input[type="text"] {
    font-size: 26px;
  }

  .acm-pd .calc-stat__label {
    font-size: 13.5px;
  }

  .acm-pd .calc-stat__note {
    font-size: 12.5px;
  }

  .acm-pd .form-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .acm-pd .modal__dialog {
    padding: 22px;
  }

  .acm-pd .mobile-cta {
    display: flex;
    gap: 10px;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 45;
    padding: 12px var(--gutter);
    background: rgba(255, 255, 255, .97);
    border-top: 1px solid var(--line);
    box-shadow: 0 -8px 20px -12px rgba(14, 39, 72, .25);
  }

  .acm-pd .mobile-cta .btn {
    flex: 1;
    height: 46px;
    padding: 0 12px;
  }

  .acm-pd .lightbox {
    --lb-cell: 46vw;
    --lb-img: min(60vh, 104vw);
  }

  .acm-pd .lightbox__bar {
    padding: 14px 16px 0;
  }

  .acm-pd .lightbox__caption {
    font-size: 16px;
    margin-bottom: 4vh;
  }

  /* arrows move below the slides so they never cover the neighbouring images */
  .acm-pd .lightbox .flickity-prev-next-button {
    top: auto;
    bottom: 4px;
    transform: none;
    width: 44px;
    height: 44px;
    background: rgba(255, 255, 255, .7);
  }

  .acm-pd .lightbox .flickity-prev-next-button.previous {
    left: calc(50% - 56px);
  }

  .acm-pd .lightbox .flickity-prev-next-button.next {
    right: calc(50% - 56px);
  }
}

/* the illustration's viewBox is refitted at this width (product-detail.js), so keep them in sync */
@media (max-width: 560px) {

  /* tabs share the row by label length so none of them wraps */
  .acm-pd .load-tabs {
    display: flex;
  }

  .acm-pd .load-tabs button {
    flex: 1 1 auto;
    white-space: nowrap;
  }

  /* the drawing scales down: larger label text, notes dropped */
  .acm-pd .cl-dim__value {
    font-size: 30px;
  }

  .acm-pd .cl-dim__note {
    display: none;
  }

  .acm-pd .cl-dim line {
    stroke-width: 2;
  }
}

@media (max-width: 420px) {
  .acm-pd .pd-flavors__list {
    grid-template-columns: repeat(auto-fill, 64px);
    gap: 10px 6px;
  }

  .acm-pd .flavor__icon {
    width: 52px;
    height: 52px;
  }

  .acm-pd .outer-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .acm-pd .outer-card {
    flex-direction: row;
    align-items: center;
  }

  .acm-pd .outer-card__media {
    flex: 0 0 120px;
    height: 104px;
  }

  .acm-pd .illus {
    --illus-scale: 1;
  }
}

@media (prefers-reduced-motion: reduce) {

  .acm-pd,
  .acm-pd *,
  .acm-pd::before,
  .acm-pd *::before,
  .acm-pd::after,
  .acm-pd *::after {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
  }
}
/* "Download product spec (PDF)" links have no href */
.acm-pd [data-datasheet] {
  cursor: pointer;
}

/* ---------- Flickity (lightbox) ---------- */
/*! Flickity v3.0.0
https://flickity.metafizzy.co
---------------------------------------------- */
.acm-pd .flickity-enabled{position:relative}.acm-pd .flickity-enabled:focus{outline:0}.acm-pd .flickity-viewport{overflow:hidden;position:relative;height:100%;touch-action:pan-y}.acm-pd .flickity-slider{position:absolute;width:100%;height:100%;left:0}.acm-pd .flickity-rtl .flickity-slider{left:unset;right:0}.acm-pd .flickity-enabled.is-draggable{-webkit-tap-highlight-color:transparent;user-select:none}.acm-pd .flickity-enabled.is-draggable .flickity-viewport{cursor:move;cursor:grab}.acm-pd .flickity-enabled.is-draggable .flickity-viewport.is-pointer-down{cursor:grabbing}.acm-pd .flickity-cell{position:absolute;left:0}.acm-pd .flickity-rtl .flickity-cell{left:unset;right:0}.acm-pd .flickity-button{position:absolute;background:hsl(0 0% 100% / 75%);border:none;color:#333}.acm-pd .flickity-button:hover{background:#fff;cursor:pointer}.acm-pd .flickity-button:focus{outline:0;box-shadow:0 0 0 5px #19f}.acm-pd .flickity-button:active{opacity:.6}.acm-pd .flickity-button:disabled{opacity:.3;cursor:auto;pointer-events:none}.acm-pd .flickity-button-icon{fill:currentColor}.acm-pd .flickity-prev-next-button{top:50%;width:44px;height:44px;border-radius:50%;transform:translateY(-50%)}.acm-pd .flickity-prev-next-button.previous{left:10px}.acm-pd .flickity-prev-next-button.next{right:10px}.acm-pd .flickity-rtl .flickity-prev-next-button.previous{left:auto;right:10px}.acm-pd .flickity-rtl .flickity-prev-next-button.next{right:auto;left:10px}.acm-pd .flickity-prev-next-button .flickity-button-icon{position:absolute;left:20%;top:20%;width:60%;height:60%}.acm-pd .flickity-page-dots{position:absolute;width:100%;bottom:-25px;text-align:center;display:flex;justify-content:center;flex-wrap:wrap}.acm-pd .flickity-rtl .flickity-page-dots{direction:rtl}.acm-pd .flickity-page-dot{display:block;width:10px;height:10px;padding:0;margin:0 8px;background:hsl(0 0% 20% / 25%);border-radius:50%;cursor:pointer;appearance:none;border:none;text-indent:-9999px;overflow:hidden}.acm-pd .flickity-rtl .flickity-page-dot{text-indent:9999px}.acm-pd .flickity-page-dot:focus{outline:0;box-shadow:0 0 0 5px #19f}.acm-pd .flickity-page-dot.is-selected{background:hsl(0 0% 20% / 100%)}

/* ==========================================================================
   WordPress additions (not in the static layout)
   ========================================================================== */

/* Sticky tab bar under Flatsome's sticky header: product-detail.js keeps
   --acm-sticky-top at the bottom edge of the stuck header (0 when none). */
.acm-pd .pd-tabs {
  top: var(--acm-sticky-top, 0px);
}

/* Anchor jumps (#packaging …) land below the header and the tab bar */
.acm-pd [data-section] {
  scroll-margin-top: calc(var(--acm-sticky-top, 0px) + var(--tabs-h) + 8px);
}

/* Product with one image: no thumbnail column */
.acm-pd .pd-gallery.is-single {
  grid-template-columns: minmax(0, 1fr);
}

/* The short description arrives as paragraphs */
.acm-pd .pd-lead > * + * {
  margin-top: .6em;
}

/* ---------- Quote form (Contact Form 7) ---------- */
.acm-pd .wpcf7 {
  color: inherit;
}

.acm-pd .form-grid .hidden-fields-container {
  display: none;
}

.acm-pd .form-grid .wpcf7-form-control-wrap {
  display: block;
}

/* the quantity input sits in the .calc-qty box next to its − / + and unit */
.acm-pd .calc-qty .wpcf7-form-control-wrap {
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
}

.acm-pd .field-set__row .wpcf7-form-control-wrap {
  min-width: 0;
}

.acm-pd .wpcf7 .wpcf7-not-valid-tip {
  position: static;
  margin: 4px 0 0;
  padding: 0;
  background: none;
  opacity: 1;
  font-size: 12.5px;
  line-height: 1.35;
  color: var(--red-600);
}

.acm-pd .wpcf7 .wpcf7-not-valid-tip::after {
  display: none;
}

.acm-pd .field .wpcf7-not-valid,
.acm-pd .field .wpcf7-not-valid + .acm-select__control,
.acm-pd .acm-select:has(.wpcf7-not-valid) .acm-select__control {
  border-color: var(--red-600);
}

.acm-pd .form-grid .wpcf7-response-output {
  grid-column: 1 / -1;
  margin: 0;
  padding: 10px 14px;
  border-radius: 10px;
  font-size: 14px;
}

.acm-pd .form-grid .wpcf7-response-output:empty {
  display: none;
}

.acm-pd .wpcf7-form.submitting .wpcf7-submit {
  cursor: progress;
  opacity: .7;
}

.acm-pd .wpcf7-form.sent .wpcf7-submit {
  cursor: default;
}

.acm-pd .modal__fallback {
  margin-top: 20px;
  font-size: 15px;
}

/* Key info as the third hero column (> 1200px): compact rows so the panel stays about as tall
   as the gallery and summary beside it, even with 14 rows. */
@media (min-width: 1201px) {
  .acm-pd .pd-keyinfo {
    padding: 16px 18px 6px;
  }

  .acm-pd .pd-keyinfo__title {
    font-size: 16px;
    padding-bottom: 10px;
  }

  .acm-pd .pd-keyinfo table {
    font-size: 13px;
    line-height: 1.35;
  }

  .acm-pd .pd-keyinfo td {
    padding: 7px 0;
  }

  .acm-pd .pd-keyinfo td:first-child {
    width: 48%;
    padding-left: 26px;
  }

  .acm-pd .pd-keyinfo td:first-child::before {
    top: 7px;
    width: 17px;
    height: 17px;
  }
}