/* Mobile fit tables: scroll instead of overflowing the viewport. */
.buyer-fit-wrap{ max-width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; }
.buyer-fit-wrap:focus-visible{outline:3px solid var(--accent,#0f766e);outline-offset:3px}
.buyer-fit-wrap.pm-fit-table-wrap{overflow-x:auto;max-width:100%}
.buyer-fit-wrap .buyer-specs{ min-width:600px; }

/* Line-art figure for a category style card. The image is a labeled
   construction sketch, not a product photograph or a specific design. */
.buyer-figure{ margin:24px 0 8px; max-width:520px; }
.buyer-figure svg{ display:block; width:100%; height:auto; border:1px solid var(--line,#e4e4e7); border-radius:var(--radius,4px); background:#faf8f1; }
.buyer-figure figcaption{ font-size:13px; color:var(--text-sub,#52525b); margin-top:10px; line-height:1.7; }

.nav-links{gap:18px}
.nav{gap:16px}
.dropdown{min-width:240px}
.breadcrumb{padding-top:24px;font-size:13px;color:var(--text-sub,#52525b)}
.breadcrumb.container{padding-inline:var(--pad-x,24px)}
.breadcrumb ol{list-style:none;display:flex;flex-wrap:wrap;gap:8px}
.breadcrumb li:not(:last-child)::after{content:"/";margin-left:8px;color:var(--line,#e4e4e7)}
.site-footer p,.site-footer a{overflow-wrap:anywhere}
.site-footer .social-links{display:flex;gap:12px;flex-wrap:wrap;margin-top:12px}
.buyer-section{padding:56px 0}
.buyer-section--soft{background:var(--bg-alt,#f5f5f4)}
.buyer-head{padding:56px 0 28px}
.buyer-head h1{max-width:850px;margin:12px 0 20px}
.buyer-head p{max-width:780px;color:var(--text-sub,#52525b);font-size:18px}
.buyer-kicker{font-family:var(--font-mono,monospace);font-size:12px;letter-spacing:.1em;color:var(--accent,#0f766e);text-transform:uppercase}
.buyer-section h2{margin-bottom:20px}
.buyer-section p{max-width:800px;margin-bottom:16px;line-height:1.75}
.buyer-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.buyer-grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.buyer-grid--1{grid-template-columns:minmax(0,1fr);max-width:850px}
.buyer-card{border:1px solid var(--line,#e4e4e7);border-radius:var(--radius,4px);padding:28px;background:var(--bg,#fff);display:flex;flex-direction:column;gap:14px;min-width:0}
.buyer-card p{font-size:15px;color:var(--text-sub,#52525b);margin:0}
.buyer-card a{margin-top:auto;font-weight:600}
.buyer-card h2{font-size:24px;margin:0}
.buyer-card h3{font-size:20px}
/* Product showcase cards: the photo is a real <picture>/<img> (indexable, responsive,
   lazy-loaded) positioned behind the card content, replacing the former CSS background
   pseudo-element. Same visual treatment: cover, anchored to the bottom, opacity .55. */
.buyer-card--pearl-mountings,
.buyer-card--finished-jewelry,
.buyer-card--diamond-jewelry,
.buyer-card--wholesale-sourcing,
.buyer-card--oem-odm{position:relative;overflow:hidden}
.buyer-card__media{position:absolute;inset:0;pointer-events:none}
.buyer-card__media img{width:100%;height:100%;object-fit:cover;object-position:center bottom;opacity:.55;display:block}
/* Only the text layers sit above the photo; the <picture> media itself must
   stay absolutely positioned (the later, unqualified >* rule used to override
   .buyer-card__media and pushed the photo back into normal flow). */
.buyer-card--pearl-mountings>*:not(.buyer-card__media),
.buyer-card--finished-jewelry>*:not(.buyer-card__media),
.buyer-card--diamond-jewelry>*:not(.buyer-card__media),
.buyer-card--wholesale-sourcing>*:not(.buyer-card__media),
.buyer-card--oem-odm>*:not(.buyer-card__media){position:relative}
/* Top-bleed catalogue image for a buyer-card: uniform 4:5 ratio, edge-to-edge
   on top of the card, with a 200ms ease hover zoom per the design system. */
.buyer-card--img{padding-top:0;overflow:hidden}
.buyer-card__figure{margin:0 -28px 6px;aspect-ratio:4/5;overflow:hidden;background:#faf8f5}
.buyer-card__figure img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .2s ease}
.buyer-card--img:hover .buyer-card__figure img{transform:scale(1.02)}
@media(max-width:768px){.buyer-card__figure{margin:-24px -24px 6px}}
.buyer-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:24px}
.buyer-actions .btn{white-space:normal;text-align:center}
.buyer-list{padding-left:22px;max-width:830px}
.buyer-list li{padding:6px 0;line-height:1.7}
.buyer-note{border-left:3px solid var(--accent,#0f766e);padding:16px 20px;background:var(--bg-alt,#f5f5f4);margin:24px 0;max-width:850px}
.buyer-specs{width:100%;max-width:900px;border-collapse:collapse;font-size:15px}
.buyer-specs th,.buyer-specs td{padding:15px 18px;border-bottom:1px solid var(--line,#e4e4e7);text-align:left;vertical-align:top;overflow-wrap:break-word}
.buyer-specs th{width:32%;font-weight:600}
.buyer-faq{max-width:850px;padding:20px 0;border-bottom:1px solid var(--line,#e4e4e7)}
.buyer-faq h3{margin-bottom:12px}
.inquiry-help{font-size:14px;color:var(--text-sub,#52525b);margin:16px 0;max-width:650px}
.inquiry-draft{margin-top:20px;border:1px solid var(--line,#e4e4e7);padding:18px;border-radius:4px}
.inquiry-draft[hidden]{display:none}
.inquiry-draft a[hidden]{display:none}
.inquiry-draft textarea{display:block;width:100%;min-height:250px;margin:12px 0;padding:12px;border:1px solid var(--line,#e4e4e7);font:inherit;line-height:1.5;border-radius:4px}
.inquiry-draft .buyer-actions{margin-top:12px}
.inquiry-feedback{font-size:14px;margin-top:12px}
button:disabled{opacity:.6;cursor:not-allowed}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:3px solid var(--accent,#0f766e);outline-offset:3px}
@media(max-width:1100px) and (min-width:1025px){.nav-links{gap:10px}.nav-links>li>a{font-size:12px}.nav-logo-img{width:160px;height:40px}.nav-cta .btn{padding:9px 12px}}
/* Homepage hero: photo rendered as a real <picture>/<img> (indexable, responsive, preloaded);
   the directional white scrim that keeps the text readable is an overlay above the photo —
   heavier over the text column, fading out over the photo side. */
.buyer-head--hero{position:relative;overflow:hidden}
.buyer-hero-media{position:absolute;inset:0}
.buyer-hero-media img{width:100%;height:100%;object-fit:cover;object-position:center;display:block}
.buyer-hero-scrim{position:absolute;inset:0;pointer-events:none;background:linear-gradient(105deg,rgba(255,255,255,.96) 0%,rgba(255,255,255,.88) 30%,rgba(255,255,255,.55) 55%,rgba(255,255,255,.12) 80%,rgba(255,255,255,0) 100%)}
.buyer-head--hero>.container{position:relative}
@media(max-width:1024px){.buyer-hero-scrim{background:linear-gradient(105deg,rgba(255,255,255,.96) 0%,rgba(255,255,255,.88) 38%,rgba(255,255,255,.5) 68%,rgba(255,255,255,.1) 100%)}}
@media(max-width:768px){.buyer-hero-scrim{background:linear-gradient(180deg,rgba(255,255,255,.96) 0%,rgba(255,255,255,.88) 50%,rgba(255,255,255,.62) 78%,rgba(255,255,255,.35) 100%)}}
@media(max-width:768px){.buyer-grid{grid-template-columns:1fr}.buyer-section{padding:36px 0}.buyer-head{padding-top:36px}.buyer-card{padding:24px}.buyer-head p{font-size:16px}.buyer-specs th,.buyer-specs td{padding:12px 10px}.footer-bottom{gap:16px;flex-wrap:wrap}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* A row heading stays with its description on narrow screens. The markup
   remains a table; no generated label replaces the original heading. */
@media(max-width:480px){
 .buyer-specs,.buyer-specs tbody,.buyer-specs tr,.buyer-specs th,.buyer-specs td{display:block;width:100%}
 .buyer-specs caption{display:block;width:100%;text-align:left;margin-bottom:10px}
 .buyer-specs tr{padding-block:14px;border-bottom:1px solid var(--line,#e4e4e7)}
 .buyer-specs th{padding:0 0 6px;border:0;overflow-wrap:normal;word-break:normal}
 .buyer-specs td{padding:0;border:0;overflow-wrap:anywhere;word-break:normal}
 .container>table.buyer-specs{display:block;overflow-x:auto;max-width:100%}
 .buyer-fit-wrap{display:block;max-width:100%;overflow-x:auto}
 .buyer-fit-wrap .buyer-specs{display:table;width:600px;min-width:600px}
 .buyer-fit-wrap .buyer-specs tbody{display:table-row-group}
 .buyer-fit-wrap .buyer-specs tr{display:table-row;padding:0}
 .buyer-fit-wrap .buyer-specs th,
 .buyer-fit-wrap .buyer-specs td{display:table-cell;width:auto;padding:12px 10px;border-bottom:1px solid var(--line,#e4e4e7)}
 .buyer-fit-wrap .buyer-specs th{width:32%}
 .buyer-fit-wrap .buyer-specs caption{display:table-caption;width:auto}
}

/* Added inquiry controls use the existing form's type and color system. */
form[data-inquiry-draft] .quantity-fields{display:grid;grid-template-columns:minmax(0,1fr) minmax(130px,.8fr);gap:12px;align-items:start}
form[data-inquiry-draft] .quantity-fields>*{min-width:0}
form[data-inquiry-draft] .quantity-fields input,
form[data-inquiry-draft] .quantity-fields select{width:100%;min-height:46px;padding:11px 12px;border:1px solid var(--line,#d4d4d8);border-radius:4px;background:#fff;color:var(--text,#18181b);font:inherit;line-height:1.5}
form[data-inquiry-draft] .field-label{display:block;font-size:14px;font-weight:500;line-height:1.7;margin-bottom:8px}
form[data-inquiry-draft] .field-error{font-size:14px;line-height:1.6;color:#9d2626;margin-top:8px}
form[data-inquiry-draft] .field-error[hidden]{display:none}
@media(max-width:360px){form[data-inquiry-draft] .quantity-fields{grid-template-columns:1fr}}

/* Enhanced desktop navigation shares the same visible/ARIA open state. */
@media(min-width:1025px){
 .has-dropdown[data-menu-ready="true"]:not(.open)>.dropdown{opacity:0;visibility:hidden;transform:translateY(8px);pointer-events:none}
 .has-dropdown[data-menu-ready="true"].open>.dropdown{opacity:1;visibility:visible;transform:translateY(0);pointer-events:auto}
}

/* Keep image provenance readable, including after each page's own styles. */
main.qf-home .home-image-caption,
main.qf-home .home-hero-visual figcaption,
main.qf-home .home-collection-note,
main.qf-page .qf-hero figcaption,
main.qf-page .qf-caption,
main.pm-page .pm-hero-figure figcaption,
main.pm-page .pm-sketch-note,
main.cj-page .cj-hero-figure figcaption,
main.cj-page .cj-sketch-note,
main.dj-page .dj-hero-figure figcaption,
main.dj-page .dj-sketch-note,
main.fj-page .fj-hero-figure figcaption,
main.fj-page .fj-sketch-note,
main.fj-page .fj-pearl-figure figcaption,
main.cp-page .cp-hero-figure figcaption,
main.cp-page .cp-sketch-note,
main.rs-page .rs-hero-figure figcaption,
main.rs-page .rs-feature-figure figcaption,
main.rs-page .rs-sketch-note{font-size:13px;line-height:1.7}

/* Shared buyer-reading and touch refinements. Page-specific layouts remain intact. */
/* Keep contact actions in the document. Floating copies covered paragraphs,
   product images and form controls while readers scrolled long pages. */
body :is(.about-bar,.ld-contact-bar,.mf-contact-bar,.mc-contact-bar,.qc-dock,.bd-dock,.dc-dock,.case-contact-bar,.sticky-inquiry,.case-dock,.ci-dock,.ci-contact-bar,.q-contact-bar,.fq-whatsapp,.cad-dock,.cm-dock,.jd-dock,.pr-contact-bar,.rq-dock,.dc-floating-cta,.persistent-cta,.inquiry-dock,.lg-sticky-contact,.nd-contact-bar,.guide-dock,.craft-dock,.guide-contact,.pf-dock){position:static!important;inset:auto!important;box-shadow:none!important;transform:none!important;max-width:100%;z-index:auto!important}
body :is(.about-bar,.ld-contact-bar,.mf-contact-bar,.mc-contact-bar,.qc-dock,.bd-dock,.case-contact-bar,.case-dock,.ci-dock,.ci-contact-bar,.q-contact-bar,.cad-dock,.cm-dock,.jd-dock,.pr-contact-bar,.rq-dock,.inquiry-dock,.nd-contact-bar,.guide-dock,.craft-dock,.guide-contact,.pf-dock){width:100%;margin:0;flex-wrap:wrap}
body :is(.dc-dock,.sticky-inquiry,.fq-whatsapp,.dc-floating-cta,.persistent-cta,.lg-sticky-contact){display:flex;width:fit-content;max-width:calc(100% - 48px);margin:24px auto;min-height:44px}
.dropdown-back{display:none}
.menu-back{border:0;border-bottom:1px solid var(--line,#d9dfd8);background:transparent;color:var(--accent,#0f766e);font:inherit;text-align:left;cursor:pointer;padding:12px 16px;width:100%;min-height:44px}
.nav a:focus-visible,.nav button:focus-visible,.site-footer a:focus-visible{outline:3px solid var(--accent,#0f766e);outline-offset:3px}
@media(max-width:1024px){.dropdown-back{display:block}}
:root{--container:1200px}
html{scroll-padding-top:0}
main [id]{scroll-margin-top:100px}
main p{overflow-wrap:break-word}
/* Body copy keeps a readable baseline; preserve lead text and small labels. */
body main p:not([class*="kicker"]):not([class*="eyebrow"]):not([class*="caption"]):not([class*="-note"]):not([class*="-small"]):not([class*="-lead"]):not([class*="-intro"]):not([class*="subtitle"]){font-size:16px;line-height:1.75}
main img{height:auto}
.buyer-head p,.buyer-section p{max-width:75ch}
.buyer-card__figure img,.style-card>img,.card-img img{object-fit:contain;background:#faf8f5}
.buyer-card__figure img{padding:12px}
.btn,summary{min-height:44px}
.dropdown a,.footer-col a{min-height:44px;display:inline-flex;align-items:center}
.footer-col li{margin-bottom:0}
.nav-toggle[aria-expanded="true"]{background:#eef2ed;border-color:#93aaa0}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
@media(max-width:1024px){
 .nav-links{max-height:calc(100dvh - 76px);overflow-y:auto;overscroll-behavior:contain;box-shadow:0 12px 18px rgb(36 61 57 / 7%)}
 .nav-links>li>a{min-height:48px}
 .dropdown a{display:flex;align-items:center;min-height:44px;line-height:1.6}
}
@media(max-width:600px){
 .nav{height:68px}
 .nav-links{top:68px;max-height:calc(100dvh - 68px)}
 .nav-logo-img{width:168px;height:42px}
 .btn{white-space:normal;text-align:center}
 main [id]{scroll-margin-top:84px}
}