/* Le Duong Quality pages (ldq-*), design v2: premium layout with photos, icons and illustrations.
   Draft stylesheet for the preview; the production copy ships with the pages in their own release. */
.ldq-page { --g: #0b3b2c; --g2: #145a43; --gold: #ad8534; --gold2: #c9a35c; --gold-text: #8c6a24; --gold-s: #efe4cc; --cream: #f8f4ea;
  --ink: #1f2a24; --muted: #56635c; --line: #e2e7e4; --white: #fff;
  max-width: 1120px; margin: 0 auto; padding: 0 16px 56px; color: var(--ink); font-size: 16px; line-height: 1.65; }
.ldq-page *, .ldq-page *::before, .ldq-page *::after { box-sizing: border-box; }
.ldq-page img { max-width: 100%; height: auto; }
.ldq-page a { color: #0b6b4c; text-underline-offset: 2px; }
.ldq-page p { margin: 0 0 12px; }
.ldq-page ul, .ldq-page ol { padding-inline-start: 1.3em; margin: 0 0 12px; }
.ldq-page li { margin: 5px 0; }

/* Components below reset the generic list and image rules above (same element, higher specificity). */
.ldq-page .ldq-chips, .ldq-page .ldq-stats, .ldq-page .ldq-steps, .ldq-page .ldq-checks, .ldq-page .ldq-links,
.ldq-page .ldq-tier__facts { padding-inline-start: 0; }
.ldq-page .ldq-card__img { max-width: none; }
.ldq-page .ldq-section--dark h2, .ldq-page .ldq-section--dark h3 { color: #fff; }

/* Hero */
.ldq-hero { display: grid; grid-template-columns: 1.08fr .92fr; gap: 36px; align-items: center; padding: 40px 0 12px; }
.ldq-hero__text { min-width: 0; }
.ldq-hero__media { margin: 0; position: relative; }
.ldq-hero__media img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 22px;
  box-shadow: 0 22px 48px rgba(11, 59, 44, .18); }
.ldq-hero__media::after { content: ""; position: absolute; inset-block-end: -10px; inset-inline-end: -10px; width: 38%; height: 38%;
  border-inline-end: 3px solid var(--gold); border-bottom: 3px solid var(--gold); border-end-end-radius: 26px; pointer-events: none; }
.ldq-hero--product .ldq-hero__media img { object-fit: contain; padding: 22px;
  background: radial-gradient(circle at 50% 42%, #fff 0, #fbf6ea 55%, #efe4cc 100%); }
@media (max-width: 860px) { .ldq-hero { grid-template-columns: 1fr; gap: 20px; padding-top: 24px; } }
.ldq-kicker { text-transform: uppercase; letter-spacing: .12em; font-size: .76rem; font-weight: 700; color: var(--gold-text); margin: 0 0 6px; }
.ldq-page h1 { font-size: clamp(1.95rem, 4.4vw, 2.95rem); line-height: 1.1; letter-spacing: -.012em; margin: 0 0 14px; color: var(--g); }
.ldq-lead { font-size: 1.12rem; color: #3c4a43; max-width: 62ch; }
.ldq-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 0; padding: 0; list-style: none; }
.ldq-chips li { margin: 0; border: 1px solid #e3d4b0; background: #fffdf8; color: var(--g); border-radius: 999px;
  padding: 5px 13px; font-size: .84rem; font-weight: 600; }

/* Sections */
.ldq-section { margin: 52px 0; }
.ldq-section--band { background: var(--cream); border-radius: 24px; padding: 34px 28px; }
.ldq-section--dark { background: linear-gradient(135deg, var(--g) 0%, var(--g2) 100%); color: #eef4f0; border-radius: 24px; padding: 34px 28px; }
.ldq-section--dark h2, .ldq-section--dark h3 { color: #fff; }
.ldq-section--dark a { color: #f1d595; }
@media (max-width: 600px) { .ldq-section--band, .ldq-section--dark { padding: 24px 16px; border-radius: 18px; } }
.ldq-page h2 { position: relative; font-size: clamp(1.38rem, 2.6vw, 1.78rem); line-height: 1.25; margin: 0 0 16px; padding-top: 14px; color: var(--g); }
.ldq-page h2::before { content: ""; position: absolute; top: 0; inset-inline-start: 0; width: 44px; height: 3px; border-radius: 2px; background: var(--gold); }
.ldq-page h3 { font-size: 1.1rem; line-height: 1.3; margin: 20px 0 8px; color: var(--g); }
.ldq-intro { color: var(--muted); max-width: 70ch; }

/* Stat strip */
.ldq-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; margin: 22px 0 0; padding: 0; list-style: none; }
.ldq-stats li { margin: 0; background: var(--g); color: #e9f1ec; border-radius: 16px; padding: 16px 18px; }
.ldq-stats b { display: block; font-size: 1.55rem; line-height: 1.15; color: #f1d595; font-weight: 700; }
.ldq-stats span { font-size: .86rem; }

/* Cards */
.ldq-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; margin: 18px 0; }
.ldq-cards--2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.ldq-cards--3 { grid-template-columns: repeat(3, 1fr); }
.ldq-cards--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1000px) { .ldq-cards--4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 820px) { .ldq-cards--3 { grid-template-columns: 1fr; } }
@media (max-width: 520px) { .ldq-cards, .ldq-cards--2, .ldq-cards--4 { grid-template-columns: 1fr; } }
/* Five cards: three on the first row, two wider ones on the second. */
.ldq-cards--3-2 { grid-template-columns: repeat(6, 1fr); }
.ldq-cards--3-2 > * { grid-column: span 2; }
.ldq-cards--3-2 > :nth-last-child(-n+2) { grid-column: span 3; }
@media (max-width: 820px) { .ldq-cards--3-2 { grid-template-columns: 1fr; } .ldq-cards--3-2 > * { grid-column: auto !important; } }
.ldq-card { position: relative; background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 20px;
  box-shadow: 0 2px 12px rgba(11, 59, 44, .05); min-width: 0; }
.ldq-card h3 { margin: 12px 0 6px; }
.ldq-card p, .ldq-card li { color: #46534c; font-size: .96rem; }
.ldq-card p:last-child { margin-bottom: 0; }
.ldq-card__img { display: block; width: calc(100% + 40px); max-width: none; margin: -20px -20px 14px; aspect-ratio: 16 / 10;
  object-fit: cover; border-radius: 18px 18px 0 0; }
.ldq-card--product .ldq-card__img { object-fit: contain; padding: 12px; background: radial-gradient(circle at 50% 45%, #fff 0, #f6efdf 100%); }
.ldq-card--accent { border-top: 4px solid var(--gold); }
.ldq-section--dark .ldq-card { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .14); box-shadow: none; }
.ldq-section--dark .ldq-card p, .ldq-section--dark .ldq-card li { color: #dbe7e0; }
.ldq-ico { width: 46px; height: 46px; border-radius: 14px; background: var(--gold-s); color: var(--g); display: inline-grid; place-items: center; flex: none; }
.ldq-section--dark .ldq-ico { background: rgba(241, 213, 149, .16); color: #f1d595; }
.ldq-ico svg { width: 24px; height: 24px; }
.ldq-svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* Quality-level cards */
.ldq-tier { border-top: 5px solid var(--tier, var(--g)); }
.ldq-tier__name { display: flex; align-items: center; gap: 10px; font-weight: 700; color: var(--g); font-size: 1.12rem; margin: 0 0 4px; }
.ldq-tier__dot { width: 14px; height: 14px; border-radius: 50%; background: var(--tier, var(--g)); box-shadow: 0 0 0 4px rgba(0, 0, 0, .05); }
.ldq-tier__facts { list-style: none; padding: 0; margin: 10px 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: 6px 12px; }
.ldq-tier__facts li { margin: 0; font-size: .88rem; color: var(--muted); }
.ldq-tier__facts li:nth-child(3) { grid-column: 1 / -1; }
.ldq-tier__facts b { display: block; color: var(--ink); font-size: 1rem; }
.ldq-tier--orchid { --tier: #6d4a8f; } .ldq-tier--lotus { --tier: #c0567a; } .ldq-tier--jasmine { --tier: #c9a35c; } .ldq-tier--daisy { --tier: #5f8f4a; }
/* Decision states (not the brand series): accepted, on hold, rejected. */
.ldq-tier--ok { --tier: #2f7d5b; } .ldq-tier--hold { --tier: #c9a35c; } .ldq-tier--stop { --tier: #a8473f; }

/* Numbered steps */
.ldq-steps { list-style: none; counter-reset: ldqstep; padding: 0; margin: 18px 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; }
.ldq-steps > li { counter-increment: ldqstep; position: relative; margin: 0; background: #fff; border: 1px solid var(--line);
  border-radius: 16px; padding: 52px 16px 16px; min-width: 0; }
.ldq-steps > li::before { content: counter(ldqstep, decimal-leading-zero); position: absolute; top: 14px; inset-inline-start: 16px; font-weight: 800;
  font-size: 1.05rem; color: var(--gold-text); letter-spacing: .04em; }
.ldq-steps > li::after { content: ""; position: absolute; top: 25px; inset-inline: 52px 16px; height: 1px; background: linear-gradient(90deg, var(--gold-s), transparent); }
[dir="rtl"] .ldq-steps > li::after { background: linear-gradient(270deg, var(--gold-s), transparent); }
.ldq-steps strong { display: block; color: var(--g); margin-bottom: 4px; }
.ldq-section--band .ldq-steps > li { border-color: #eadfc6; }

/* Media + text */
.ldq-split { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: center; }
.ldq-split--wide { grid-template-columns: 1.25fr .75fr; }
.ldq-split > * { min-width: 0; }
.ldq-split img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 20px; box-shadow: 0 16px 36px rgba(11, 59, 44, .14); }
@media (max-width: 860px) { .ldq-split, .ldq-split--wide { grid-template-columns: 1fr; gap: 18px; } }
.ldq-figure { margin: 18px 0; }
.ldq-figure > img, .ldq-figure > svg { display: block; width: 100%; height: auto; border-radius: 18px; }
.ldq-figure > svg { background: #fff; border: 1px solid var(--line); }
.ldq-figure figcaption { font-size: .84rem; color: var(--muted); margin-top: 8px; }
.ldq-figure--narrow > svg { max-width: 480px; margin: 0 auto; }
/* Drawings keep their left-to-right layout on right-to-left (Arabic) pages. */
.ldq-page svg { direction: ltr; }
/* Wide illustrations keep a readable text size on phones and scroll sideways inside their frame. */
@media (max-width: 600px) {
  .ldq-figure:not(.ldq-figure--narrow) { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .ldq-figure:not(.ldq-figure--narrow) > svg { min-width: 560px; }
}
.ldq-gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; margin: 18px 0; }
.ldq-gallery figure { margin: 0; }
.ldq-gallery img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 14px; }
.ldq-gallery figcaption { font-size: .82rem; color: var(--muted); margin-top: 6px; }
@media (max-width: 520px) { .ldq-gallery { grid-template-columns: 1fr 1fr; } }
/* Real photographs: product shots sit on a cream disc; operation photos may be cropped towards their lower part. */
.ldq-page img.ldq-photo--product { object-fit: contain; padding: 16px; box-sizing: border-box; box-shadow: none;
  background: #fff; border: 1px solid var(--line); }
.ldq-page img.ldq-photo--low { object-position: 50% 92%; }
/* Two photographs side by side with a label each (for example kernels with and without testa). */
.ldq-compare { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ldq-compare > figcaption { grid-column: 1 / -1; margin-top: 0; }
.ldq-compare__item { position: relative; margin: 0; }
.ldq-compare__item img { display: block; width: 100%; aspect-ratio: 1 / 1; border-radius: 16px; }
.ldq-compare__tag { position: relative; display: block; margin: -12px 10px 0; background: var(--g); color: #fff; border-radius: 12px;
  padding: 7px 10px; font-weight: 700; font-size: .92rem; line-height: 1.25; box-shadow: 0 6px 14px rgba(11, 59, 44, .16); }
.ldq-compare__tag small { display: block; font-weight: 400; font-size: .78rem; color: #f1d595; }
.ldq-compare__item--light .ldq-compare__tag { background: rgba(255, 255, 255, .94); color: var(--g); border: 1px solid var(--line); }
.ldq-compare__item--light .ldq-compare__tag small { color: var(--gold-text); }
/* A path of photographs with numbered steps and arrows between them. */
.ldq-photo-path { list-style: none; counter-reset: ldqpath; display: grid; grid-template-columns: repeat(3, 1fr); gap: 34px; padding: 0; margin: 0; }
.ldq-photo-path > li { counter-increment: ldqpath; position: relative; margin: 0; }
.ldq-photo-path img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 16px; box-shadow: 0 12px 28px rgba(11, 59, 44, .12); }
.ldq-photo-path span { display: flex; align-items: center; gap: 8px; margin-top: 10px; font-weight: 700; color: var(--g); line-height: 1.25; }
.ldq-photo-path span::before { content: counter(ldqpath); flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--g); color: #f1d595;
  display: inline-grid; place-items: center; font-size: .82rem; }
.ldq-photo-path > li:not(:last-child)::after { content: ""; position: absolute; top: calc(37.5% - 8px); inset-inline-end: -24px; width: 12px; height: 12px;
  border-top: 3px solid var(--gold); border-right: 3px solid var(--gold); transform: rotate(45deg); }
[dir="rtl"] .ldq-photo-path > li:not(:last-child)::after { transform: rotate(-135deg); }
.ldq-photo-path img.ldq-photo--product { padding: 8px; }
/* On phones the path runs down the page: photo on the left, step on the right, arrows pointing down. */
@media (max-width: 520px) {
  .ldq-photo-path { grid-template-columns: 1fr; gap: 26px; }
  .ldq-photo-path > li { display: grid; grid-template-columns: 48% 1fr; align-items: center; gap: 14px; }
  .ldq-photo-path span { margin-top: 0; }
  .ldq-photo-path > li:not(:last-child)::after { top: auto; inset-inline-end: auto; bottom: -20px; inset-inline-start: calc(24% - 6px); transform: rotate(135deg); }
  [dir="rtl"] .ldq-photo-path > li:not(:last-child)::after { transform: rotate(135deg); }
  .ldq-compare__tag { font-size: .84rem; padding: 6px 8px; }
}

/* Callouts */
.ldq-note { border-inline-start: 4px solid var(--gold); background: var(--cream); padding: 14px 18px; border-radius: 12px; margin: 16px 0; }
.ldq-note p:last-child { margin-bottom: 0; }
.ldq-section--band .ldq-note { background: #fff; }

/* Tables */
.ldq-table { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 14px 0 18px; border: 1px solid var(--line);
  border-radius: 14px; background: #fff; }
.ldq-table table { width: 100%; border-collapse: collapse; font-size: .95rem; }
.ldq-table table:has(th:nth-child(4)) { min-width: 600px; }
.ldq-table thead th { background: var(--g); color: #fff; text-align: start; font-weight: 600; padding: 11px 14px; vertical-align: top; }
.ldq-table td { padding: 10px 14px; border-top: 1px solid var(--line); vertical-align: top; }
.ldq-table tbody tr:nth-child(even) td { background: #f7f9f8; }
.ldq-table td:first-child { font-weight: 600; color: var(--g); }
.ldq-table tbody th { font-weight: 600; color: var(--g); text-align: start; padding: 10px 14px; border-top: 1px solid var(--line); vertical-align: top; }
.ldq-table tbody tr:nth-child(even) th { background: #f7f9f8; }
.ldq-table tbody th + th { font-weight: 400; color: inherit; }
.ldq-table:focus-visible { outline: 2px solid var(--g2); outline-offset: 2px; }
.ldq-figure[tabindex]:focus-visible { outline: 2px solid var(--g2); outline-offset: 2px; }

/* Definition lists */
.ldq-page dl { margin: 10px 0 16px; display: grid; gap: 10px; }
.ldq-page dl > div { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 12px 16px; }
.ldq-page dt { font-weight: 700; color: var(--g); }
.ldq-page dd { margin: 3px 0 0; color: #46534c; }

/* Lists with check marks */
.ldq-checks { list-style: none; padding: 0; margin: 10px 0 14px; }
.ldq-checks li { position: relative; padding-inline-start: 28px; margin: 8px 0; }
.ldq-checks li::before { content: ""; position: absolute; inset-inline-start: 2px; top: .45em; width: 14px; height: 8px; border-left: 2.5px solid var(--gold);
  border-bottom: 2.5px solid var(--gold); transform: rotate(-45deg); }
.ldq-links { list-style: none; padding: 0; }
.ldq-links li { margin: 8px 0; }

/* Call to action */
.ldq-cta { position: relative; overflow: hidden; margin: 56px 0 14px; padding: 30px 28px; border-radius: 24px; color: #e9f1ec;
  background: radial-gradient(circle at 92% 10%, rgba(241, 213, 149, .22) 0, transparent 38%), linear-gradient(135deg, var(--g) 0%, var(--g2) 100%); }
.ldq-cta strong { color: #fff; font-size: 1.15rem; }
.ldq-cta p { margin: 8px 0; max-width: 70ch; }
.ldq-cta a { color: #f1d595; }
.ldq-button { display: inline-block; margin-inline-end: 10px; background: var(--gold-text); color: #fff !important; text-decoration: none; padding: 11px 20px;
  border-radius: 999px; font-weight: 700; letter-spacing: .01em; box-shadow: 0 6px 16px rgba(0, 0, 0, .18); }
.ldq-button:hover { background: #7a5c1e; }
.ldq-version { font-size: .84rem; color: #6a756f; margin-top: 16px; }