/* ==========================================================================
   Molde · Templates
   Page compositions from the Figma page "📐 Templates". Every template takes
   Style (A Esencial / B Editorial / C Marketplace) and passes it to its
   organisms, so one prop switches the whole store option.
   ========================================================================== */
.molde .mo-page { display: flex; flex-direction: column; background: var(--bg-page); color: var(--text-primary); position: relative; }
.molde .mo-page > .mo-wa { position: absolute; right: 24px; bottom: 24px; }
.molde .mo-wrapc { display: flex; flex-direction: column; gap: var(--space-6); padding: var(--space-8) var(--layout-page-margin) var(--space-12); }
.molde .mo-wrapc.is-center { align-items: center; }
.molde .mo-pt { display: flex; align-items: baseline; gap: var(--space-3); }
.molde .mo-pt h1 { margin: 0; font: var(--font-heading-weight) var(--type-heading-xl)/1.2 var(--font-heading); letter-spacing: -0.01em; }
.molde .mo-pt span { font: 400 var(--type-body-md)/1.45 var(--font-body); color: var(--text-secondary); }
.molde .mo-plp-body { display: flex; gap: var(--space-6); align-items: flex-start; }
.molde .mo-plp-body.is-col { flex-direction: column; align-items: stretch; }
.molde .mo-plp-res { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--space-6); }
.molde .mo-pgrid2 { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--space-6) var(--space-4); }
.molde .mo-pgrid2 .mo-card { width: auto; }
.molde .mo-pgrid2.is-list { grid-template-columns: 1fr; }
.molde .mo-pgrid2.is-list .mo-card { width: 100%; }
.molde .mo-pgrid2.is-looks { grid-template-columns: repeat(3, 1fr); }
.molde .mo-pgrid2.is-looks .mo-look, .molde .mo-pgrid2.is-arts .mo-article { width: auto; }
.molde .mo-pgrid2.is-arts { grid-template-columns: repeat(3, 1fr); }
.molde .mo-center { display: flex; justify-content: center; }
.molde .mo-chiprow { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.molde .mo-twocol { display: flex; gap: var(--space-8); align-items: flex-start; }
.molde .mo-twocol > :first-child { flex: 1; min-width: 0; }
.molde .mo-twocol .mo-gal { flex: 1; width: auto; }
.molde .mo-sidemenu { display: flex; gap: var(--space-8); align-items: flex-start; padding: var(--space-8) var(--layout-page-margin) var(--space-12); }
.molde .mo-sidemenu > :last-child { flex: 1; min-width: 0; }
.molde .mo-items-box { flex: 1; min-width: 0; }
.molde .mo-items-box .mo-cartitem { width: 100%; }
.molde .mo-login { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-8); width: 960px; max-width: 100%; }
.molde .mo-login > div { display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-8); background: var(--bg-surface); border: 1px solid var(--border-default); border-radius: var(--radius-card); }
.molde .mo-login h2 { margin: 0; font: var(--font-heading-weight) var(--type-heading-lg)/1.25 var(--font-heading); }
.molde .mo-login p { margin: 0; font: 400 var(--type-body-md)/1.45 var(--font-body); color: var(--text-secondary); }
.molde .mo-login .mo-field, .molde .mo-login .mo-btn { width: 100%; }
.molde .mo-login .mo-ln { display: flex; justify-content: space-between; align-items: center; }
.molde .mo-ckhead { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-4) var(--layout-page-margin); background: var(--bg-surface); border-bottom: 1px solid var(--border-default); }
.molde .mo-ckhead .mo-grow { flex: 1; }
.molde .mo-ckhead .mo-sec2 { display: inline-flex; align-items: center; gap: 6px; font: var(--font-label-weight) var(--type-label-sm)/1.3 var(--font-body); color: var(--text-secondary); }
.molde .mo-ckhead .mo-sec2 .mo-icon { font-size: 18px; color: var(--icon-secondary); }
.molde .mo-ckhead[data-style="c"] { background: var(--bg-brand); border: 0; }
.molde .mo-ckhead[data-style="c"] .mo-sec2 { color: var(--text-on-brand); }
.molde .mo-ckhead[data-style="c"] .mo-sec2 .mo-icon { color: var(--icon-on-brand); }
.molde .mo-ckstep { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-6); background: var(--bg-surface); border: 1px solid var(--border-default); border-radius: var(--radius-card); }
.molde .mo-ckstep h2 { margin: 0; font: var(--font-heading-weight) var(--type-heading-md)/1.3 var(--font-heading); }
.molde .mo-ckstep .mo-cartitem, .molde .mo-ckstep .mo-field { width: 100%; }
.molde .mo-ckstep .mo-r2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
.molde .mo-ckstep .mo-pm { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); border: 1px solid var(--border-default); border-radius: var(--radius-field); }
.molde .mo-ckstep .mo-pm.is-on { border: 2px solid var(--border-brand); }
.molde .mo-ckstep .mo-pm b { flex: 1; font: var(--font-label-weight) var(--type-label-md)/1.4 var(--font-body); }
.molde .mo-ckstep .mo-ok { display: flex; flex-direction: column; align-items: center; gap: var(--space-3); padding: var(--space-8) 0; text-align: center; }
.molde .mo-ckstep .mo-ok > .mo-icon { font-size: 56px; color: var(--feedback-success); }
.molde .mo-page[data-device="mobile"] .mo-plp-body, .molde .mo-page[data-device="mobile"] .mo-twocol, .molde .mo-page[data-device="mobile"] .mo-sidemenu { flex-direction: column; align-items: stretch; }
.molde .mo-page[data-device="mobile"] .mo-pgrid2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4) var(--space-3); }
.molde .mo-page[data-device="mobile"] .mo-pgrid2.is-looks, .molde .mo-page[data-device="mobile"] .mo-pgrid2.is-arts, .molde .mo-page[data-device="mobile"] .mo-login, .molde .mo-page[data-device="mobile"] .mo-ckstep .mo-r2 { grid-template-columns: 1fr; }
.molde .mo-page[data-device="mobile"] .mo-filters[data-style="a"], .molde .mo-page[data-device="mobile"] .mo-filters[data-style="c"] { display: none; }
.molde .mo-page[data-device="mobile"] .mo-csum { width: 100%; }
/* inside a page the margin already comes from the page: the buy box drops its own side padding */
.molde .mo-page[data-device="mobile"] .mo-buybox { width: 100%; padding-inline: 0; }

/* PDP Marketplace (desktop): gallery + product details on the left, the buy box on the right */
.molde .mo-twocol.is-mkt { align-items: flex-start; }
.molde .mo-twocol.is-mkt > .mo-pdpl { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--space-8); }
.molde .mo-twocol.is-mkt > .mo-pdpl > .mo-gal, .molde .mo-twocol.is-mkt > .mo-pdpl > .mo-pdetails { width: 100%; }
/* grid cells never grow past their column (dense Marketplace cards) */
.molde .mo-pgrid2 > * { min-width: 0; }