/* ==========================================================================
   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; }
/* buy column: the buy box and, under it, the product customizer in its stacked layout (same width, never page-wide) */
.molde .mo-twocol > .mo-bcol { flex: none; width: 480px; max-width: 100%; display: flex; flex-direction: column; gap: var(--space-8); }
.molde .mo-bcol > .mo-buybox, .molde .mo-bcol > .mo-pz { width: 100%; }
.molde .mo-bcol > .mo-pz { padding: 0; }
.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); }
/* Checkout (Figma TemplateCheckout): the step column holds section cards and its CTA; step 5 is a centered confirmation */
.molde .mo-ckstep { padding: 0; background: transparent; border: 0; }
.molde .mo-ckstep > .mo-btn { width: 100%; }
.molde .mo-cksec { 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-cksec h2 { margin: 0; font: var(--font-heading-weight) var(--type-heading-sm)/1.3 var(--font-heading); color: var(--text-primary); }
.molde .mo-cksec .mo-cartitem, .molde .mo-cksec .mo-field, .molde .mo-cksec .mo-ship, .molde .mo-cksec .mo-cps { width: 100%; }
.molde .mo-cksec .mo-ship { padding: 0; border: 0; background: transparent; }
.molde .mo-cksec .mo-r2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
.molde .mo-cksec .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-card); }
.molde .mo-cksec .mo-pm.is-on { border: 2px solid var(--border-brand); padding: calc(var(--space-3) - 1px) calc(var(--space-4) - 1px); }
.molde .mo-cksec .mo-pm > span:not(.mo-pmlogos) { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.molde .mo-cksec .mo-pm b { font: 400 var(--type-body-md)/1.4 var(--font-body); color: var(--text-primary); }
.molde .mo-cksec .mo-pm small { font: 400 var(--type-body-sm)/1.4 var(--font-body); color: var(--text-secondary); }
.molde .mo-cksec .mo-pm small.is-free { color: var(--commerce-installments); }
.molde .mo-cksec .mo-pmlogos { display: flex; gap: 6px; }
.molde .mo-cksec.is-row { flex-direction: row; align-items: center; gap: var(--space-4); }
.molde .mo-cksec.is-row > .mo-icon { font-size: 28px; color: var(--icon-default); }
.molde .mo-cksec.is-row span { display: flex; flex-direction: column; gap: 2px; text-align: left; }
.molde .mo-cksec.is-row b { font: var(--font-label-weight) var(--type-label-lg)/1.4 var(--font-body); }
.molde .mo-cksec small { font: 400 var(--type-body-sm)/1.4 var(--font-body); color: var(--text-secondary); }
.molde .mo-cksec > b { font: var(--font-label-weight) var(--type-label-md)/1.4 var(--font-body); color: var(--text-primary); }
.molde .mo-cksec .mo-sub2 { display: flex; justify-content: space-between; align-items: baseline; font: var(--font-label-weight) var(--type-label-md)/1.4 var(--font-body); }
.molde .mo-cksec .mo-sub2 b { font: var(--font-heading-weight) var(--type-heading-md)/1.2 var(--font-heading); }
.molde .mo-ckdone { display: flex; flex-direction: column; align-items: stretch; gap: var(--space-4); width: 550px; max-width: 100%; margin: 0 auto; text-align: center; }
.molde .mo-ckdone > h2 { margin: 0; font: var(--font-heading-weight) var(--type-heading-lg)/1.25 var(--font-heading); color: var(--text-primary); }
.molde .mo-ckdone > span { font: 400 var(--type-body-sm)/1.4 var(--font-body); color: var(--text-secondary); }
.molde .mo-ckdone .mo-okic { align-self: center; display: grid; place-items: center; width: 88px; height: 88px; border-radius: var(--radius-full); background: var(--feedback-success-subtle); }
.molde .mo-ckdone .mo-okic .mo-icon { font-size: 48px; color: var(--feedback-success); }
.molde .mo-ckdone .mo-cksec { text-align: left; }
.molde .mo-ckacts { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
.molde .mo-ckacts .mo-btn { width: 100%; }
.molde .mo-ckhead .mo-sec2.is-help { text-decoration: none; }
.molde .mo-page[data-device="mobile"] .mo-cksec .mo-r2, .molde .mo-page[data-device="mobile"] .mo-ckacts { grid-template-columns: 1fr; }
.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); }
/* Editorial PLP columns: fewer columns = bigger editorial pieces (image grows with the column, type steps up by token) */
.molde .mo-page .mo-pgrid2[data-cols="5"] { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.molde .mo-page .mo-pgrid2[data-cols="4"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.molde .mo-page .mo-pgrid2[data-cols="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-8) var(--space-6); }
.molde .mo-page .mo-pgrid2[data-cols="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-12) var(--space-8); }
.molde .mo-page .mo-pgrid2[data-cols="1"] { grid-template-columns: minmax(0, 1fr); gap: var(--space-6); }
.molde .mo-pgrid2[data-cols="3"] .mo-card .mo-name { font-size: var(--type-body-lg); }
.molde .mo-pgrid2[data-cols="3"] .mo-card .mo-now { font-size: var(--type-price-md); }
.molde .mo-pgrid2[data-cols="2"] .mo-card[data-device="desktop"] .mo-name { font: var(--font-heading-weight) var(--type-heading-md)/1.3 var(--font-heading); }
.molde .mo-pgrid2[data-cols="2"] .mo-card[data-device="desktop"] .mo-now { font-size: var(--type-price-lg); }
.molde .mo-pgrid2[data-cols="2"] .mo-card[data-device="desktop"] .mo-info { gap: var(--space-2); }
.molde .mo-pgrid2[data-cols="1"] .mo-card .mo-name { font-size: var(--type-body-md); }
.molde .mo-pgrid2[data-cols="1"] .mo-card .mo-now { font-size: var(--type-price-md); }
.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; }
.molde .mo-wrapc:has(> .mo-twocol > .mo-ckstep, > .mo-ckdone) > .mo-stepper { width: 560px; max-width: 100%; margin-inline: auto; }
.molde .mo-ckdone .mo-cps .mo-ibtn { display: none; }
/* Bank promos (Figma TemplateBankPromos): day / payment chip rows, a wrapping grid of promo cards, conditions note */
.molde .mo-bankpromos { display: flex; flex-direction: column; gap: var(--space-6); }
.molde .mo-bpf { display: flex; flex-direction: column; gap: var(--space-4); }
.molde .mo-bpf > b { font: var(--font-label-weight) var(--type-label-md)/1.4 var(--font-body); color: var(--text-primary); }
.molde .mo-bpf .mo-chiprow { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.molde .mo-bpgrid { display: flex; flex-wrap: wrap; gap: var(--space-4); }
.molde .mo-bpgrid .mo-bpitem[hidden] { display: none; }
.molde .mo-bpnote, .molde .mo-bpempty { margin: 0; font: 400 var(--type-body-sm)/1.4 var(--font-body); color: var(--text-secondary); }
.molde .mo-page[data-device="mobile"] .mo-bpf .mo-chiprow { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
.molde .mo-page[data-device="mobile"] .mo-bpgrid { flex-direction: column; }
.molde .mo-page[data-device="mobile"] .mo-bpgrid .mo-fin { width: 100%; }
/* Checkout options: invoice type (Factura A fields only when chosen), pickup store list, gift wrap */
.molde .mo-ckinv { display: flex; flex-direction: column; gap: var(--space-3); }
.molde .mo-ckinv .mo-ckinva { display: flex; flex-direction: column; gap: var(--space-4); padding-top: var(--space-2); }
.molde .mo-ckinv[data-inv="cf"] .mo-ckinva { display: none; }
.molde .mo-ckopt, .molde .mo-ckstore { cursor: pointer; }
.molde .mo-cklocate { display: flex; align-items: flex-end; gap: var(--space-4); }
.molde .mo-cklocate > [data-ckcity] { flex: 1; }
.molde .mo-cklocate .mo-field { width: 100%; }
.molde .mo-ckstores { display: flex; flex-direction: column; }
.molde .mo-ckstore { display: flex; align-items: flex-start; gap: var(--space-3); }
.molde .mo-ckstore[hidden] { display: none; }
.molde .mo-ckstore .mo-store { flex: 1; width: auto; }
.molde .mo-page[data-device="mobile"] .mo-cklocate { flex-direction: column; align-items: stretch; }