/* Shared refinements for the standalone pages. */
.hero-actions{gap:12px;flex-wrap:wrap}
.hero-actions .hero-wholesale{background:rgba(255,255,255,.94);border:1px solid #173e72;color:#173e72;min-height:46px;padding:12px 20px;font-size:13px}
.hero-actions .hero-wholesale:hover{background:#173e72;color:#fff}
/* Home uses a portrait-and-landscape banner; keep both routes readable and equal in size. */
.hero[aria-label="MJ Pearls home banner"] .hero-actions{flex-direction:row;align-items:center}
.hero[aria-label="MJ Pearls home banner"] .hero-actions .btn{flex:0 1 auto;min-width:0;min-height:56px;padding:14px 22px;font-size:18px;line-height:1.3;text-align:center}
.hero[aria-label="MJ Pearls home banner"] .hero-actions .hero-wholesale{background:rgba(255,255,255,.94);color:#173e72;border-color:#173e72}
.hero[aria-label="MJ Pearls home banner"] .hero-actions .hero-wholesale:hover{background:#173e72;color:#fff}
.shop-shortcuts{display:flex;flex-wrap:wrap;gap:10px;padding-top:26px;padding-bottom:12px}
.shop-shortcuts a{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:10px 20px;border:1px solid #d9d4cb;border-radius:999px;font-size:13px;font-weight:650;color:#17202a;background:#fff}
.shop-shortcuts a:hover{background:#f5f2ec;border-color:#a67b47;text-decoration:none}
.shop-shortcuts + #catalog{padding-top:30px}
.shop-shortcuts + #catalog .section-head{margin-bottom:24px}
.process-photo{margin:0;aspect-ratio:16/10;border-radius:15px;overflow:hidden;min-width:0;background:#ece8e1}
.process-photo img{display:block;width:100%;height:100%;object-fit:cover;object-position:center}
.pearl-art{overflow:hidden}
.product[hidden],.catalog-empty[hidden]{display:none!important}
.catalog-empty{padding:28px 20px;border:1px solid #d9d4cb;background:#faf8f4;border-radius:12px;margin-top:16px;color:#53606c}
.catalog-empty button{margin-right:12px}
button.active-pill{font:inherit;font-size:12px;cursor:pointer;border:1px solid #d9d4cb}
.active-pill:hover{background:#eee7db}
.hero-note a{text-decoration:underline;text-underline-offset:3px}
/* Action feedback: fixed geometry, lightweight CSS, no extra assets or scripts. */
.btn{
 --action-hover-bg:#31587e;--action-hover-ink:#fff;--action-hover-edge:#31587e;
 cursor:pointer;transition:background-color 160ms ease,color 160ms ease,border-color 160ms ease,box-shadow 160ms ease,transform 160ms ease;
}
.btn.secondary,.btn.ghost,.hero-actions .hero-wholesale{
 --action-hover-bg:#173e72;--action-hover-ink:#fff;--action-hover-edge:#173e72;
}
.btn.light,.btn.soft,.source-actions .btn{
 --action-hover-bg:#ead8bc;--action-hover-ink:#172235;--action-hover-edge:#c3a577;
}
@media(hover:hover) and (pointer:fine){
 :root .btn:not(:disabled):not([aria-disabled="true"]):hover,
 .hero[aria-label="MJ Pearls home banner"] .hero-actions .btn:not(:disabled):not([aria-disabled="true"]):hover{
  background:var(--action-hover-bg);color:var(--action-hover-ink);border-color:var(--action-hover-edge);
  box-shadow:inset 0 0 0 1px var(--action-hover-edge),0 4px 10px rgba(23,34,53,.14);transform:translateY(-2px);text-decoration:none;
 }
}
:root .btn:not(:disabled):not([aria-disabled="true"]):focus-visible,
.hero[aria-label="MJ Pearls home banner"] .hero-actions .btn:not(:disabled):not([aria-disabled="true"]):focus-visible{
 background:var(--action-hover-bg);color:var(--action-hover-ink);border-color:var(--action-hover-edge);
 box-shadow:inset 0 0 0 1px var(--action-hover-edge);text-decoration:none;
}
:root .btn:not(:disabled):not([aria-disabled="true"]):active,
.hero[aria-label="MJ Pearls home banner"] .hero-actions .btn:not(:disabled):not([aria-disabled="true"]):active{
 background:var(--action-hover-bg);color:var(--action-hover-ink);border-color:var(--action-hover-edge);
 transform:translateY(0) scale(.98);box-shadow:inset 0 0 0 1px var(--action-hover-edge);
}
:is(.link-arrow,.text-link,.quick-filter,.product .actions a,.pearl-type-actions a,.lot-actions a,.mj-update-actions a){
 display:inline-block;cursor:pointer;text-decoration-line:underline;text-decoration-color:transparent;text-decoration-thickness:2px;text-underline-offset:5px;
 transition:color 160ms ease,text-decoration-color 160ms ease,transform 160ms ease;
}
.source-actions .text-link{border-bottom:0;text-decoration-color:currentColor}
@media(hover:hover) and (pointer:fine){
 :root :is(.link-arrow,.text-link,.quick-filter,.product .actions a,.pearl-type-actions a,.lot-actions a,.mj-update-actions a):not(:disabled):not([aria-disabled="true"]):hover{
  text-decoration-line:underline;text-decoration-color:currentColor;text-decoration-thickness:2px;transform:translateX(3px);
 }
 .source-actions .text-link:hover{color:#f2d5a4}
}
:root :is(.link-arrow,.text-link,.quick-filter,.product .actions a,.pearl-type-actions a,.lot-actions a,.mj-update-actions a):focus-visible{
 text-decoration-line:underline;text-decoration-color:currentColor;text-decoration-thickness:2px;
}
:root :is(.link-arrow,.text-link,.quick-filter,.product .actions a,.pearl-type-actions a,.lot-actions a,.mj-update-actions a):active{transform:translateX(1px)}
.btn:disabled,.btn[aria-disabled="true"],.quick-filter:disabled{cursor:not-allowed;opacity:.55}
@media(prefers-reduced-motion:reduce){
 :root .btn,:root :is(.link-arrow,.text-link,.quick-filter,.product .actions a,.pearl-type-actions a,.lot-actions a,.mj-update-actions a){transition:none!important;transform:none!important}
}
[id="catalog"],[id="pricing"],[id="types"],[id="pearl-types"],[id="source-updates"]{scroll-margin-top:100px}
:is(a,button,input,select,textarea):focus-visible{outline:2px solid #173e72;outline-offset:4px}
.source-story :is(.btn,.text-link):focus-visible{outline-color:#f2d5a4}
@media(max-width:680px){
 .hero-actions .btn{flex:1 1 190px;min-height:46px;text-align:center}
 .hero[aria-label="MJ Pearls home banner"] .hero-actions{flex-direction:column;align-items:stretch}
 .hero[aria-label="MJ Pearls home banner"] .hero-actions .btn{flex:0 0 auto;width:100%;min-height:54px;font-size:17px}
 .shop-shortcuts{gap:8px;padding-top:20px}
 .shop-shortcuts a{padding:9px 14px;font-size:12px}
 .shop-shortcuts + #catalog{padding-top:22px}
 [id="catalog"],[id="pricing"],[id="types"],[id="pearl-types"],[id="source-updates"]{scroll-margin-top:190px}
}

/* Content recommendations should read as cards, not scattered underlined text. */
.mj-blog-reco-wrap{margin-top:14px}
.mj-blog-reco{display:grid!important;grid-template-columns:72px minmax(0,1fr);align-items:center;gap:12px;min-height:72px;padding:0!important;border:1px solid #d9d8cf;border-radius:9px;overflow:hidden;background:#fff;color:#26313c!important;text-decoration:none!important;transition:border-color 160ms ease,box-shadow 160ms ease,transform 160ms ease}
.mj-blog-reco__cover{display:block;width:72px;height:72px;overflow:hidden;background:#eeeae1}
.mj-blog-reco__cover img{display:block;width:100%;height:100%;object-fit:cover}
.mj-blog-reco__copy{display:flex;flex-direction:column;justify-content:center;gap:3px;min-width:0;padding:9px 12px 9px 0}
.mj-blog-reco__copy small{font-size:9px;line-height:1.3;letter-spacing:.11em;text-transform:uppercase;color:#8a7655}
.mj-blog-reco__copy strong{font:600 13px/1.35 Arial,sans-serif;color:#26313c}
.mj-blog-reco:hover{border-color:#a99b82;box-shadow:0 8px 18px rgba(28,43,54,.08);transform:translateY(-1px);text-decoration:none!important}
.pj-inline-help:has(.mj-blog-reco){display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px;width:100%}
.pj-inline-help .mj-blog-reco{min-width:0;min-height:72px}

/* Action links use contained controls; long-form editorial links remain underlined. */
:root :is(.link-arrow,.quick-filter,.pearl-type-actions a,.lot-actions a,.mj-update-actions a,.product .actions a){display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:36px;padding:7px 11px;border:1px solid #d5d3ca;border-radius:999px;background:#fff;text-decoration:none!important;text-decoration-color:transparent!important;line-height:1.25;transform:none}
:root :is(.link-arrow,.quick-filter,.pearl-type-actions a,.lot-actions a,.mj-update-actions a,.product .actions a):hover{border-color:#a79b86;background:#f5f2eb;text-decoration:none!important;transform:none}
:root .text-link{font-weight:650;text-decoration:none!important;border-bottom:0!important}
.hero-note a{font-weight:650;text-decoration:none!important}

/* Larger editorial guide recommendations retain their short explanation while sharing the same image language. */
.mj-blog-feature-card{display:grid!important;grid-template-columns:118px minmax(0,1fr)!important;gap:0!important;padding:0!important;overflow:hidden;border:1px solid #d9d8cf!important;background:#fff!important;min-height:118px;align-items:stretch}
.mj-blog-feature-cover{display:block;min-width:0;min-height:0;align-self:stretch;background:#eeeae1;overflow:hidden;position:relative}
.mj-blog-feature-cover img{display:block;position:absolute;inset:0;width:100%;height:100%;min-height:0;object-fit:cover}
.mj-blog-feature-copy{display:flex;flex-direction:column;justify-content:center;min-width:0;padding:16px 18px}
.mj-blog-feature-copy .num{margin-bottom:5px}
.mj-blog-feature-copy h3{margin-bottom:7px}
.mj-blog-feature-title{color:inherit!important;text-decoration:none!important}
.mj-blog-feature-title:hover{text-decoration:none!important}
.mj-blog-feature-copy p{margin:0!important}
@media(max-width:600px){
 .mj-blog-feature-card{grid-template-columns:88px minmax(0,1fr)!important;min-height:88px}
 .mj-blog-feature-copy{padding:11px 12px}
 .mj-blog-feature-copy p{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;font-size:12px!important}
}

.guide-strip:has(.mj-blog-reco){grid-template-columns:minmax(150px,.72fr) repeat(3,minmax(210px,1fr));gap:10px;border:0!important;background:transparent!important;overflow:visible!important}
.guide-strip:has(.mj-blog-reco)>*{border:1px solid #d9d8cf!important;border-radius:9px!important}
.guide-strip:has(.mj-blog-reco)>a:not(.mj-blog-reco){display:flex;align-items:center;justify-content:center;padding:12px!important;background:#fff;text-decoration:none!important;text-align:center}
.guide-strip:has(.mj-blog-reco) .mj-blog-reco{padding:0!important}
@media(max-width:900px){.guide-strip:has(.mj-blog-reco){grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.guide-strip:has(.mj-blog-reco){grid-template-columns:1fr}}

/* Mixed guide-card + utility-link rows: keep the utility action compact instead of
   stretching to fill a CSS-grid track beside the recommendation card. */
.pj-inline-help:has(.mj-blog-reco)>a:not(.mj-blog-reco){
 justify-self:start;
 align-self:center;
 width:auto;
 max-width:100%;
 min-height:40px;
 padding:9px 14px;
 border-radius:8px;
 white-space:normal;
}